/* Layout: a late-90s media player skin. One bevelled window holds a title bar, an LCD clock and the controls; below it a black playlist panel lists days and fixtures. Dark only. */
:root{
  color-scheme:dark;
  --bg:#07080c; --dots:#171a28; --panel:#262634; --hi:#50506a; --lo:#0b0b12;
  --lcd:#020402; --green:#3dff5c; --green-dim:#1f9b35; --fg:#d9dbe8; --muted:#8a8ea8;
  --amber:#f2c14e; --sel:#1b3aa8; --rule:#14141d;
  --lcdfont:"Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --ui:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --pix:"Arial Narrow","Helvetica Neue",Arial,sans-serif;
}
html{background:var(--bg);height:100%;overflow:hidden}
body{background-color:var(--bg);background-image:radial-gradient(var(--dots) 1px,transparent 1px);background-size:14px 14px;
  color:var(--fg);font-family:var(--ui);font-size:13px;line-height:1.35;height:100%;overflow:hidden;box-sizing:border-box;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
.wrap{max-width:720px;height:100%;box-sizing:border-box;margin:0 auto;padding-block:16px 12px;display:flex;flex-direction:column;gap:10px}
.win{background:var(--panel);border:1px solid;border-color:var(--hi) var(--lo) var(--lo) var(--hi);box-shadow:0 0 0 1px #000,0 6px 24px rgba(0,0,0,.6);padding:3px 4px 6px}
header.win{flex:none}
.titlebar{display:flex;align-items:center;gap:8px;height:18px;padding:0 2px;margin-bottom:4px}
.titlebar::before,.titlebar::after{content:"";flex:1;height:7px;background:repeating-linear-gradient(to bottom,var(--amber) 0 1px,transparent 1px 3px);opacity:.75}
h1{font-family:var(--pix);font-weight:400;font-size:11px;letter-spacing:2px;color:var(--amber);margin:0;text-transform:uppercase;white-space:nowrap}
.top{display:flex;align-items:stretch;gap:8px;flex-wrap:wrap}
.lcd{flex:1 1 260px;min-width:0;background:var(--lcd);border:1px solid;border-color:var(--lo) var(--hi) var(--hi) var(--lo);padding:4px 10px 6px}
.clock{font-family:var(--lcdfont);font-size:44px;line-height:1;color:var(--green);text-shadow:0 0 6px rgba(61,255,92,.55);font-variant-numeric:tabular-nums}
.clock small{font-size:22px;margin-left:4px}
.sub{font-family:var(--lcdfont);font-size:18px;color:var(--green-dim);line-height:1.1}
.refresh{display:flex;flex-direction:column;justify-content:center;align-items:flex-end;gap:6px}
button{font:inherit;cursor:pointer}
.btn,.chip{background:var(--panel);color:var(--fg);border:1px solid;border-color:var(--hi) var(--lo) var(--lo) var(--hi);box-shadow:inset -1px -1px 0 #17171f,inset 1px 1px 0 #3a3a4e;border-radius:0}
.btn{font-family:var(--pix);font-size:11px;letter-spacing:1px;text-transform:uppercase;padding:7px 14px}
.btn:active:not([disabled]),.chip[aria-pressed="true"]{border-color:var(--lo) var(--hi) var(--hi) var(--lo);box-shadow:inset 1px 1px 0 #000}
.btn[disabled]{color:var(--muted);cursor:default}
.btn:focus-visible,.chip:focus-visible{outline:1px dotted var(--fg);outline-offset:-4px}
/* Clock line: big digits, the AM/PM tag and the zone label share one baseline; the zone wraps under the clock if it can't fit. */
.clockrow{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px}
.zone{font-family:var(--lcdfont);font-size:22px;line-height:1;color:var(--muted);overflow-wrap:anywhere}
.chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.chip{padding:3px 9px;font-size:12px;color:var(--muted)}
.chip[aria-pressed="true"]{background:var(--lcd);color:var(--green)}
.chip.mine[aria-pressed="true"]{color:var(--amber)}
.status{font-family:var(--lcdfont);font-size:17px;color:var(--green-dim);margin-top:6px;min-height:1em}
.status.err{color:var(--amber)}
#list{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-color:var(--hi) var(--lcd);background:var(--lcd);border:1px solid;border-color:var(--lo) var(--hi) var(--hi) var(--lo);box-shadow:0 0 0 1px #000;padding:2px 0 8px;min-height:120px}
section.day{margin-top:6px}
.dayhead{display:flex;align-items:center;gap:8px;padding:6px 10px 4px}
.dayhead h2{font-family:var(--pix);font-weight:400;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--amber);margin:0;white-space:nowrap}
.dayhead span{font-family:var(--lcdfont);font-size:17px;color:var(--green-dim);white-space:nowrap}
.dayhead::after{content:"";flex:1;height:5px;background:repeating-linear-gradient(to bottom,var(--green-dim) 0 1px,transparent 1px 3px);opacity:.6}
.row{display:grid;grid-template-columns:70px 1fr;gap:10px;align-items:start;padding:5px 10px;border-top:1px solid var(--rule)}
.row:hover{background:var(--sel)}
.time{font-family:var(--lcdfont);font-size:26px;line-height:.95;color:var(--green);font-variant-numeric:tabular-nums}
.time small{display:block;font-size:15px;color:var(--green-dim)}
.info{min-width:0}
.match{color:var(--green);font-size:13px;overflow-wrap:anywhere}
.match b{font-weight:700}
.row:has(.fav) .match,.row:has(.fav) .time{color:#fff;text-shadow:0 0 4px rgba(255,255,255,.35)}
.meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:2px;font-size:11px;color:var(--green-dim)}
.tag{font-family:var(--pix);font-size:9px;letter-spacing:1px;text-transform:uppercase;border:1px solid var(--green-dim);color:var(--green);padding:0 4px;line-height:14px}
.fav{color:var(--amber);font-weight:700}
.fav::before{content:"\2605  "}
.live{color:var(--amber)}
.live::before{content:"\25B6  "}
.row.past{opacity:.4}
.empty{font-family:var(--lcdfont);font-size:20px;color:var(--green);padding:32px 12px;text-align:center}
.foot{flex:none;margin:2px 0 0;font-size:11px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;justify-content:space-between}
.counter{font-family:var(--lcdfont);font-size:18px;color:var(--green);background:var(--lcd);border:1px solid;border-color:var(--lo) var(--hi) var(--hi) var(--lo);padding:0 6px;letter-spacing:2px}
@media (max-width:420px){.clock{font-size:38px}.row{grid-template-columns:58px 1fr}.time{font-size:23px}.refresh{flex-direction:row;align-items:center;width:100%;justify-content:space-between}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}