/* net.css — the network's design system (2026-09-10). Shared by every screen: guide, lineup, top rated, ratings,
   programmer, the season, cancelled. Three layers, in order: 1 tokens (base palette, then roles named for their job;
   type, space, radius, elevation, motion), 2 base, 3 components with their states (rest, hover on pointer devices,
   pressed, focus, selected, busy, disabled).
   The look: a lit screen, light and cool, not a printed page. Instrument Serif names things, Instrument Sans carries the
   interface. Rules: components read tokens only; the base palette is the only place a colour value is written; the grid is
   squared off, only what you touch is rounded; one blur, on the tab bar; no sheens or glows.
   2026-09-15 (Keyno): paper turned back. Paper read flat and did not fit a TV network. Light stays, but cool and with depth:
   surfaces are raised with real two-layer shadows, and the guide's lanes sit in a recessed well so the airings stand up out
   of it. The ground itself stays flat (a ground gradient rendered as a pale rectangle behind the scaled carousel cards).
   Still no added colour: the pictures carry it. */
@import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap");

/* 1 · tokens */
:root{
  /* base palette */
  /* cool light: a screen, not paper. The white-* values stay white on purpose: they are the ink used ON media, where the picture is the ground. */
  --mist-0:#eef1f6;--mist-1:#e2e7ef;--mist-2:#d3dae6;--card:#fbfcfe;--card-hover:#f1f4f9;
  --ink-900:#111827;--ink-600:#4b5565;--ink-400:#8791a3;--rule:rgba(17,24,39,.13);--hairline:rgba(17,24,39,.07);
  --white:#f4f7ff;--white-70:rgba(244,247,255,.7);--white-45:rgba(244,247,255,.45);--white-12:rgba(244,247,255,.12);--white-7:rgba(244,247,255,.07);
  --red-500:#b3382c;--black-55:rgba(0,0,0,.55);
  /* colour roles */
  --bg:var(--mist-0);--surface:var(--card);--surface-raised:var(--card);--surface-hover:var(--card-hover);--surface-media:var(--mist-2);--well:var(--mist-1);
  --text:var(--ink-900);--text-2:var(--ink-600);--text-3:var(--ink-400);--border:var(--rule);--hair:var(--hairline);
  --accent:var(--ink-900);--on-accent:var(--card);--accent-soft:var(--mist-1);--accent-border:var(--ink-900);
  --live:var(--ink-900);--accent-wash:var(--mist-1);--danger:var(--red-500);--overlay:var(--black-55);--scrim:rgba(17,24,39,.38);--on-media:#fff;
  /* type */
  --font:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --display:"Instrument Serif",Georgia,"Times New Roman",serif;   /* one weight only: display text asks for 400, never a bold */
  --fs-2xs:10px;--fs-xs:11px;--fs-s:13px;--fs-m:15px;--fs-l:19px;--fs-xl:26px;--fs-2xl:34px;
  --lh-tight:1.15;--lh:1.45;--w-regular:400;--w-medium:500;--w-semibold:600;
  /* space, radius, elevation, motion */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s8:32px;--gutter:16px;
  --r-s:2px;--r-m:6px;--r-l:10px;--r-xl:14px;
  /* elevation: two layers each, a tight contact shadow and a soft cast shadow, both cool */
  --shadow-1:0 1px 2px rgba(17,24,39,.10),0 2px 6px rgba(17,24,39,.06);
  --shadow-2:0 2px 4px rgba(17,24,39,.07),0 12px 28px rgba(17,24,39,.13);
  --shadow-3:0 4px 12px rgba(17,24,39,.09),0 30px 70px rgba(17,24,39,.22);
  --inset:inset 0 1px 3px rgba(17,24,39,.12),inset 0 0 0 1px rgba(17,24,39,.04);
  --t-fast:120ms;--t:200ms;--t-slow:320ms;--ease:cubic-bezier(.2,.8,.2,1);
  --tap:44px;
}
@media(prefers-reduced-motion:reduce){:root{--t-fast:0ms;--t:0ms;--t-slow:0ms}}

/* 2 · base */
*{box-sizing:border-box;min-width:0}
html,body{margin:0;color:var(--text);font:var(--fs-m)/var(--lh) var(--font);-webkit-font-smoothing:antialiased}
/* the ground is flat: depth comes from elevation (raised surfaces, the recessed well), never from a ground gradient */
html{background:var(--bg)}
body{background:transparent}
[hidden]{display:none!important}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1,h2,h3,p{margin:0}
.phone{max-width:430px;margin:0 auto;min-height:100vh;position:relative;padding-bottom:96px}
.msg{padding:60px var(--gutter);text-align:center;color:var(--text-3)}.msg a{color:var(--accent)}
.num{font-variant-numeric:tabular-nums}
h1{font-family:var(--display);font-size:var(--fs-2xl);font-weight:var(--w-semibold);line-height:var(--lh-tight);letter-spacing:-.015em;margin:var(--s3) var(--gutter) var(--s1)}
h1 small{font-weight:var(--w-regular);color:var(--text-3)}
h2.sec{font-family:var(--display);font-size:var(--fs-l);font-weight:var(--w-medium);color:var(--text);margin:var(--s6) var(--gutter) var(--s2);padding-top:var(--s2);border-top:1px solid var(--hair)}
h2.sec:first-child{border-top:0;padding-top:0}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin:0 var(--gutter) var(--s3);font-size:var(--fs-s);color:var(--text-3);font-variant-numeric:tabular-nums}
.meta>span+span::before{content:"";display:inline-block;width:1px;height:10px;background:var(--border);margin-right:var(--s2);vertical-align:-1px}
.meta b{color:var(--text-2);font-weight:var(--w-medium)}

/* skeleton: the shape of the screen while it loads */
.skel{background:var(--surface);border-radius:var(--r-m);position:relative;overflow:hidden}
.skel{animation:skel 1.4s ease-in-out infinite}
@keyframes skel{50%{opacity:.5}}
@media(prefers-reduced-motion:reduce){.skel{animation:none}}
.sk-line{height:12px;margin:0 0 var(--s1) auto}.sk-line.in{margin:0 var(--gutter) var(--s2)}.w80{width:80px}.w110{width:110px}.w120{width:120px}.w200{width:200px}
.sk-ham{width:40px;height:40px;border-radius:var(--r-l)}.sk-h1{height:22px;width:160px;margin:var(--s2) var(--gutter) var(--s2)}
.sk-preview{margin:0 var(--gutter) var(--s3);aspect-ratio:16/9;border-radius:var(--r-l)}
.sk-grid{display:flex;flex-direction:column;gap:var(--s1);margin:0 var(--gutter)}.sk-hour{height:14px;width:100%}.sk-cell{height:74px}
.sk-row{height:104px;margin:0 var(--gutter) var(--s2);border-radius:var(--r-l)}
.sk-caro{display:flex;gap:var(--s3);justify-content:center;align-items:center;margin:var(--s2) 0}.sk-ep{width:176px;height:340px;border-radius:var(--r-l)}.sk-ep.side{width:150px;height:300px;opacity:.5}

/* masthead */
.top{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);padding:var(--s3) var(--s3) var(--s2) var(--gutter);min-height:56px}
.top .mark{font-weight:var(--w-semibold);letter-spacing:.26em;font-size:var(--fs-s)}
.top .net{font-size:var(--fs-xs);color:var(--text-3);text-align:right;line-height:1.3;margin-left:auto}
.top .net b{display:block;color:var(--text-2);font-weight:var(--w-medium)}
.top .day{display:inline-flex;align-items:center;gap:var(--s1)}
.top .day button{border:0;background:transparent;color:var(--text-2);width:28px;height:28px;border-radius:var(--r-m);cursor:pointer;display:grid;place-items:center}
.top .day button svg{width:16px;height:16px}
.top .day button:active{background:var(--surface)}
.top .day button:disabled{opacity:.3;cursor:default}
.top .day em{font-style:normal;color:var(--accent);margin-right:var(--s1)}
.top .ham{width:40px;height:40px;border:1px solid var(--border);border-radius:var(--r-l);background:var(--surface);color:var(--text);display:grid;place-items:center;cursor:pointer;flex:0 0 auto}
.top .ham svg{width:20px;height:20px}
.top .ham:active{background:var(--surface-hover)}
.clock{margin:0 var(--gutter) var(--s2);font-size:var(--fs-xs);color:var(--accent)}
/* the station bar: the season line every screen carries, and the way into the controls */
.station{display:flex;align-items:center;gap:var(--s2);width:100%;margin:0 0 var(--s3);padding:var(--s2) var(--gutter);background:var(--surface);border:0;box-shadow:var(--shadow-1);color:var(--text-2);text-decoration:none;font:inherit;font-size:var(--fs-s);cursor:pointer;text-align:left}
.station .dot{width:7px;height:7px;border-radius:50%;background:var(--live);flex:0 0 auto}
.station .dot.off{background:var(--text-3)}
.station .meta{margin:0;font-size:var(--fs-s)}
.station .go{margin-left:auto;color:var(--text-3);display:grid;place-items:center}
.station .go svg{width:15px;height:15px}
.station:active{background:var(--surface-raised)}
/* the control row: what you can do to what is on screen, in reach */
.controls{display:grid;grid-template-columns:repeat(4,1fr);margin:var(--s3) var(--gutter) 0;border:1px solid var(--border);border-radius:var(--r-m);overflow:hidden}
.controls button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:56px;padding:var(--s2) 2px;border:0;border-left:1px solid var(--hair);background:var(--surface);color:var(--text);font-size:var(--fs-2xs);cursor:pointer}
.controls button:first-child{border-left:0}
.controls button svg{width:17px;height:17px;color:var(--text-2)}
.controls button:active{background:var(--surface-hover)}
.controls button:disabled{color:var(--text-3);cursor:default}
.controls button:disabled svg{color:var(--text-3);opacity:.5}
.controls button.danger{color:var(--danger)}.controls button.danger svg{color:var(--danger)}

/* the preview window */
.preview{position:relative;margin:0 var(--gutter);aspect-ratio:16/9;border-radius:var(--r-m);overflow:hidden;background:#000;box-shadow:var(--shadow-3);cursor:pointer}
.preview:active{transform:scale(.99)}
.preview video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.chip{position:absolute;left:var(--s2);top:var(--s2);font-size:var(--fs-xs);font-weight:var(--w-semibold);color:var(--on-accent);background:var(--live);padding:2px 7px;border-radius:var(--r-s)}
.chip.pre{background:var(--surface-raised);color:var(--text)}
.preview .bug{position:absolute;right:var(--s2);top:var(--s2);display:flex;align-items:center;gap:var(--s1);font-size:var(--fs-xs);color:var(--on-media);background:var(--overlay);padding:3px var(--s2) 3px 6px;border-radius:var(--r-s)}
.preview .bug svg{width:14px;height:14px}
.preview .cap{position:absolute;left:var(--s2);right:52px;bottom:var(--s2);color:var(--on-media);text-shadow:0 1px 3px #000}
.preview .cap b{display:block;font-family:var(--display);font-size:var(--fs-l);font-weight:var(--w-medium);line-height:var(--lh-tight)}
.preview .cap .meta{margin:2px 0 0;font-size:var(--fs-xs);color:var(--on-media)}
.preview .cap .meta>span+span::before{background:var(--white-45)}
.snd{position:absolute;right:var(--s2);bottom:var(--s2);width:34px;height:34px;border-radius:var(--r-m);border:1px solid var(--white-12);background:var(--overlay);color:var(--on-media);display:grid;place-items:center;cursor:pointer}
.snd svg{width:16px;height:16px}
.snd:active{background:var(--surface-hover)}
.bar{padding:var(--s2) var(--gutter) var(--s1);font-size:var(--fs-s);color:var(--text-3);min-height:38px}
.bar b{color:var(--text-2);font-weight:var(--w-medium)}

/* the grid, a cable guide: channels down the left and pinned, the day running across and scrolling under them.
   A block holds its channel from the moment it airs until the next airing on that channel, which is what a feed
   actually does, so the row fills edge to edge and the width means something. --hpx is pixels an hour, --ch the
   channel column, both set on the element because the data decides them. */
.epg{position:relative;margin:0 var(--gutter)}
.epg .pan{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.epg .pan::-webkit-scrollbar{display:none}
.epg .canvas{position:relative;width:calc(var(--ch) + var(--hours) * var(--hpx))}
.epg .hours{display:flex;height:20px;align-items:flex-end}
.epg .hours .spacer{position:sticky;left:0;z-index:3;flex:0 0 var(--ch);height:100%;background:transparent}
.epg .hours i{flex:0 0 var(--hpx);font-style:normal;font-size:var(--fs-2xs);color:var(--text-3);font-variant-numeric:tabular-nums;padding-left:5px;border-left:1px solid var(--hair);line-height:1.6}
.epg .lane{display:flex;height:74px;margin-top:var(--s1)}
.epg .chan{position:sticky;left:0;z-index:3;flex:0 0 var(--ch);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;background:var(--surface);border-radius:var(--r-s);box-shadow:var(--shadow-1);cursor:pointer}
.epg .chan svg{width:20px;height:20px;color:var(--text)}
.epg .chan small{font-size:9px;color:var(--text-3);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 3px}
.epg .chan:active{background:var(--surface)}
.epg .chan[aria-pressed="true"]{border-right-color:var(--accent)}
.epg .chan[aria-pressed="true"] svg{color:var(--accent)}
.epg .slots{position:relative;flex:1 0 calc(var(--hours) * var(--hpx));margin-left:var(--s1);background:var(--well);border-radius:var(--r-s);box-shadow:var(--inset)}
/* a block: the poster carries it, a scrim keeps the words legible, the state is in the edge */
.epg .show{position:absolute;top:3px;bottom:3px;overflow:hidden;border-radius:var(--r-s);background:var(--surface-media) center/cover no-repeat;border:1px solid transparent;box-shadow:var(--shadow-1);cursor:pointer;display:flex;flex-direction:column;justify-content:flex-end;padding:5px 6px;transition:transform var(--t-fast)}
.epg .show::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15) 30%,rgba(0,0,0,.8))}
.epg .show b{position:relative;z-index:1;font-family:var(--display);font-size:var(--fs-s);font-weight:var(--w-medium);line-height:var(--lh-tight);color:var(--on-media);text-shadow:0 1px 2px #000;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.epg .show small{position:relative;z-index:1;display:flex;gap:5px;margin-top:2px;font-size:var(--fs-2xs);color:var(--white-70);font-variant-numeric:tabular-nums;text-shadow:0 1px 2px #000}
.epg .show:active{transform:scale(.99)}
.epg .show.past{filter:saturate(.15) brightness(.94)}
.epg .show.held{opacity:.4;border-style:dashed;border-color:var(--border)}
.epg .show.on,.epg .show[aria-selected="true"]{border-color:var(--live);box-shadow:0 0 0 1px var(--live);opacity:1;z-index:2}
.epg .show.tight{padding:3px 4px}
.epg .show.tight b,.epg .show.tight small{display:none}
.epg .show.tight::before{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--text-3);z-index:1}
.epg .show.tight.on::before{background:var(--live)}
.epg .show.loading::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--white-12),transparent);transform:translateX(-100%);animation:skel 1.2s infinite}
/* the now line, down through every channel */
.epg .nowline{position:absolute;top:20px;bottom:0;width:2px;background:var(--live);z-index:4;pointer-events:none}
.epg .nowline::before{content:"Now";position:absolute;top:-2px;left:0;font-size:var(--fs-2xs);font-weight:var(--w-semibold);background:var(--live);color:var(--on-accent);padding:1px 5px;border-radius:var(--r-s)}
/* back to now, in the bar above the grid, when the day has scrolled away from it */
.bar{display:flex;align-items:center;gap:var(--s2)}
.to-now{margin-left:auto;min-height:30px;padding:0 var(--s3);border:1px solid var(--border);border-radius:var(--r-m);background:transparent;color:var(--accent);font:inherit;font-size:var(--fs-xs);cursor:pointer;opacity:0;pointer-events:none;transition:opacity var(--t)}
.to-now.on{opacity:1;pointer-events:auto}
.to-now:active{background:var(--surface-hover)}
/* the tab bar (real links); the one translucent surface, because the page scrolls under it */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:5;display:flex;justify-content:center;padding:0 var(--s3) calc(env(safe-area-inset-bottom,0px) + var(--s2))}
.tabs nav{width:100%;max-width:406px;display:flex;background:color-mix(in srgb,var(--surface-raised) 88%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border);border-radius:var(--r-m);padding:var(--s1);box-shadow:var(--shadow-2)}
.tabs a{flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:var(--tap);font-size:var(--fs-2xs);color:var(--text-3);white-space:nowrap;text-decoration:none;padding:var(--s1) 0;border-radius:var(--r-m)}
.tabs a[aria-current="page"]{color:var(--accent);background:var(--accent-soft)}
.tabs a:active{background:var(--surface-hover)}
.tabs svg{width:20px;height:20px}

/* the menu */
.menu{position:fixed;inset:0;z-index:30;background:var(--scrim);opacity:0;pointer-events:none;transition:opacity var(--t)}
.menu.on{opacity:1;pointer-events:auto}
.menu .panel{position:absolute;right:var(--s3);top:var(--s3);width:min(300px,calc(100vw - 24px));background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--r-l);padding:var(--s2);box-shadow:var(--shadow-3);transform:translateY(-8px);transition:transform var(--t) var(--ease)}
.menu.on .panel{transform:none}
.menu .who{padding:var(--s2) var(--s2) var(--s3);font-size:var(--fs-xs);color:var(--text-3);border-bottom:1px solid var(--border);margin-bottom:var(--s1)}
.menu .who b{display:block;color:var(--text);font-size:var(--fs-m);font-weight:var(--w-semibold)}
.menu a{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:var(--tap);color:var(--text);text-decoration:none;font-size:var(--fs-m);padding:0 var(--s2) 0 var(--s3);border-radius:var(--r-m)}
.menu a svg{width:16px;height:16px;color:var(--text-3)}
.menu a:active{background:var(--surface-hover)}
.menu a[aria-current="page"]{color:var(--accent)}

/* tokens (small facts), rows, cards */
.tok{display:inline-flex;align-items:center;gap:var(--s1);padding:5px var(--s2);border-radius:var(--r-s);font-size:var(--fs-s);font-variant-numeric:tabular-nums;color:var(--text);background:var(--surface);border:0;white-space:nowrap}
.tok svg{width:14px;height:14px;flex:0 0 auto}
.tok.live{background:var(--accent-soft);border-color:var(--accent-border);color:var(--accent)}
.tok.dim{color:var(--text-3)}
.tok b{font-weight:var(--w-semibold)}
.toks{display:flex;flex-wrap:wrap;gap:var(--s1)}
.toks+.toks{margin-top:var(--s2)}
.list{display:flex;flex-direction:column;gap:var(--s2);margin:0 var(--gutter)}
.row{display:grid;grid-template-columns:54px 1fr auto;gap:var(--s3);align-items:center;padding:var(--s2);border-radius:var(--r-m);background:var(--surface);border:0;box-shadow:var(--shadow-1);text-decoration:none;color:var(--text);transition:transform var(--t-fast)}
a.row:active{transform:scale(.99)}
.row .cover{aspect-ratio:9/16;border-radius:var(--r-m);overflow:hidden;background:var(--surface-media) center/cover no-repeat;position:relative;box-shadow:var(--shadow-1)}
.badge{position:absolute;left:var(--s1);top:var(--s1);font-size:var(--fs-2xs);font-weight:var(--w-semibold);color:var(--on-accent);background:var(--accent);padding:1px 5px;border-radius:var(--r-s);font-variant-numeric:tabular-nums}
.row .t{font-family:var(--display);font-size:var(--fs-m);font-weight:var(--w-medium);line-height:var(--lh-tight);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.row .m{display:flex;align-items:center;gap:var(--s2);margin-top:5px;font-size:var(--fs-xs);color:var(--text-2);font-variant-numeric:tabular-nums;flex-wrap:wrap}
.row .m span{display:inline-flex;align-items:center;gap:var(--s1)}
.row .m svg{width:13px;height:13px;color:var(--text-3)}
.row .r{text-align:right;font-size:var(--fs-xs);color:var(--text-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.row .r b{display:block;color:var(--text);font-family:var(--display);font-size:var(--fs-l);font-weight:var(--w-medium)}
.row .r.pending{color:var(--text-3)}
.row.chan{grid-template-columns:32px 1fr auto}
.row.bare{background:none;border:0;padding:0;margin-bottom:var(--s2)}
.fields3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--s2);margin-top:var(--s3)}
.fields3 .field{margin:0}
.fields3 label{font-size:var(--fs-xs);margin-bottom:var(--s1)}
.fields3 select{padding:var(--s2) var(--s1);font-size:var(--fs-s)}
.tick{width:26px;height:26px;border-radius:50%;border:1px solid var(--border);display:grid;place-items:center;color:transparent}
.tick svg{width:14px;height:14px}
[aria-pressed="true"] .tick{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.row.chan .mark{color:var(--text)}.row.chan .mark svg{width:24px;height:24px;display:block}
.row.log{grid-template-columns:48px 1fr;align-items:start}
.row.log .when{font-size:var(--fs-xs);color:var(--text-2);font-variant-numeric:tabular-nums;padding-top:2px}
.row.log .m{display:block;color:var(--text-3);margin-top:3px;line-height:var(--lh)}
h2.sec.day{margin-top:var(--s3)}
/* the season as one rail: what has aired, what is on the air, what is left */
.rail{margin:var(--s2) var(--gutter) 0}
.rail .track{position:relative;height:6px;border-radius:3px;background:var(--surface);overflow:visible}
.rail .fill{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--white-45)}
.rail .mark{position:absolute;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--live);border:2px solid var(--bg)}
.rail .ends{display:flex;justify-content:space-between;margin-top:var(--s2);font-size:var(--fs-xs);color:var(--text-3);font-variant-numeric:tabular-nums}
.card{margin:0 var(--gutter);padding:var(--s3) var(--s4);border-radius:var(--r-m);background:var(--surface);border:0;box-shadow:var(--shadow-1)}
.card p{font-size:var(--fs-s);line-height:var(--lh)}
.card p+p{margin-top:var(--s2)}
.card .k{font-size:var(--fs-s);color:var(--accent);font-weight:var(--w-semibold);margin-bottom:var(--s2)}
.empty .btn{margin-top:var(--s3)}
.empty{margin:0 var(--gutter);padding:var(--s6) var(--s4);border-radius:var(--r-m);background:var(--surface);color:var(--text-3);font-size:var(--fs-s);text-align:center}
.covers{display:flex;gap:6px;overflow-x:auto;margin:0 var(--gutter);padding-bottom:var(--s1);scrollbar-width:none}
.covers::-webkit-scrollbar{display:none}
.cover.loading,.covers div.loading,.pic.loading{background-color:var(--surface)}
.cover.loading,.covers div.loading,.pic.loading{animation:skel 1.4s ease-in-out infinite}
/* fields, switches, ranges, segments, library rows: the controls behind the words and the sound */
.field{margin:var(--s3) 0 0}
.field>label,.lab{display:block;font-size:var(--fs-s);font-weight:var(--w-medium);color:var(--text-2);margin-bottom:var(--s2)}
.field textarea,.field input[type=text],.field select{width:100%;font:var(--fs-m)/var(--lh) var(--font);color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-m);padding:var(--s2) var(--s3);resize:vertical}
.field textarea{min-height:104px}
.field textarea:focus,.field input:focus,.field select:focus{border-color:var(--accent-border);outline:none}
.field textarea:disabled,.field input:disabled,.field select:disabled{opacity:.5}
.field .foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);margin-top:var(--s2)}
.count{font-size:var(--fs-xs);color:var(--text-3);font-variant-numeric:tabular-nums}
.count.over{color:var(--danger)}
.note{font-size:var(--fs-xs);color:var(--text-3);line-height:var(--lh);margin-top:var(--s2)}
.note.live{color:var(--accent)}
.sugs{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s2)}
.sug{text-align:left;font-size:var(--fs-s);line-height:var(--lh);color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-m);padding:var(--s2) var(--s3);cursor:pointer}
.sug:active{background:var(--surface-hover)}
.switch{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:var(--tap);font-size:var(--fs-m);cursor:pointer}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch .track{width:46px;height:28px;flex:0 0 auto;border-radius:14px;background:var(--surface);border:1px solid var(--border);position:relative;transition:background var(--t)}
.switch .track::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:var(--text-3);transition:transform var(--t) var(--ease),background var(--t)}
.switch input:checked+.track{background:var(--accent-soft);border-color:var(--accent-border)}
.switch input:checked+.track::after{transform:translateX(18px);background:var(--accent)}
.switch input:focus-visible+.track{outline:2px solid var(--accent);outline-offset:2px}
.switch input:disabled+.track{opacity:.4}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:var(--surface);border:1px solid var(--border)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;margin-top:-10px;border-radius:50%;background:var(--accent);border:2px solid var(--bg)}
input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:var(--surface);border:1px solid var(--border)}
input[type=range]::-moz-range-thumb{width:24px;height:24px;border:2px solid var(--bg);border-radius:50%;background:var(--accent)}
input[type=range]:disabled{opacity:.4}
input[type=range]:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.seg{display:flex;gap:var(--s1);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-m);padding:3px;overflow-x:auto;scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg button{flex:1 0 auto;min-height:36px;padding:0 var(--s3);border:0;background:transparent;color:var(--text-3);border-radius:var(--r-s);font-size:var(--fs-s);white-space:nowrap;cursor:pointer}
.seg button[aria-checked="true"]{background:var(--accent-soft);color:var(--accent)}
.seg button:active{background:var(--surface-hover)}
.lib{display:flex;flex-direction:column;gap:var(--s1);margin-top:var(--s2);max-height:264px;overflow-y:auto}
.lib .libr{display:grid;grid-template-columns:1fr 40px;gap:var(--s2);align-items:center;padding:var(--s2) var(--s3);border-radius:var(--r-m);background:var(--surface);border:1px solid var(--border);cursor:pointer;text-align:left;color:var(--text)}
.lib .libr:active{background:var(--surface-hover)}
.lib .libr[aria-selected="true"]{border-color:var(--accent-border);background:var(--accent-soft)}
.lib .libr .t{font-size:var(--fs-s);font-weight:var(--w-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lib .libr .m{font-size:var(--fs-xs);color:var(--text-3)}
.lib .libr .play{width:36px;height:36px;border-radius:var(--r-m);border:1px solid var(--border);background:var(--surface);color:var(--text);display:grid;place-items:center;cursor:pointer}
.lib .libr .play svg{width:14px;height:14px}
/* a panel inside the sheet: one step deeper, with a way back */
.phead{display:flex;align-items:center;gap:var(--s2);margin:0 0 var(--s3)}
.phead button{width:34px;height:34px;flex:0 0 auto;border-radius:var(--r-m);border:1px solid var(--border);background:var(--surface);color:var(--text);display:grid;place-items:center;cursor:pointer}
.phead button svg{width:16px;height:16px}
.phead button:active{background:var(--surface-hover)}
.phead h2{font-family:var(--display);font-size:var(--fs-xl);font-weight:var(--w-medium);margin:0}
/* a toast: what just happened, above the tab bar */
.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 88px);transform:translate(-50%,8px);z-index:50;max-width:calc(100% - 32px);padding:var(--s2) var(--s3);border-radius:var(--r-m);background:var(--surface-raised);border:1px solid var(--border);box-shadow:var(--shadow-2);font-size:var(--fs-s);color:var(--text);opacity:0;pointer-events:none;transition:opacity var(--t),transform var(--t) var(--ease)}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast.error{border-color:color-mix(in srgb,var(--danger) 50%,transparent)}
/* rows that open something */
.row.act{grid-template-columns:1fr auto;cursor:pointer;text-align:left;width:100%;font:inherit}
.row.act .go{color:var(--text-3);display:grid;place-items:center}
.row.pick{grid-template-columns:54px 1fr auto}
.row.pick[aria-pressed="true"]{border-color:var(--accent-border);background:var(--accent-soft)}
.row.act .go svg{width:16px;height:16px}
.covers div{position:relative;flex:0 0 58px;aspect-ratio:9/16;border-radius:var(--r-m);background:var(--surface-media) center/cover no-repeat;box-shadow:var(--shadow-1)}

/* buttons: rest, hover (pointer), pressed, focus, busy, disabled */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:var(--tap);border:1px solid var(--border);background:transparent;color:var(--text);border-radius:var(--r-m);padding:0 var(--s3);font-size:var(--fs-m);font-weight:var(--w-medium);cursor:pointer;position:relative;transition:transform var(--t-fast)}
.btn svg{width:16px;height:16px}
.btn:active{transform:scale(.98);background:var(--surface-hover)}
.btn.quiet{border-color:transparent;color:var(--text-2)}
.btn.primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent);font-weight:var(--w-semibold)}
.btn.primary:active{background:color-mix(in srgb,var(--accent) 88%,black)}
.btn.danger{color:var(--danger)}
.btn:disabled{opacity:.4;cursor:default;transform:none}
.btn.primary:disabled{opacity:1;background:transparent;color:var(--text-3);border-color:var(--border)}
.btn[aria-busy="true"]{color:transparent;pointer-events:none}
.btn[aria-busy="true"] svg{visibility:hidden}
.btn[aria-busy="true"]::after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;border:2px solid var(--text-3);border-top-color:var(--text);animation:spin .8s linear infinite}
.btn.primary[aria-busy="true"]::after{border-color:rgba(26,20,0,.35);border-top-color:var(--on-accent)}
@keyframes spin{to{transform:rotate(360deg)}}
@media(hover:hover){
  .btn:hover,.menu a:hover,.tabs a:hover:not([aria-current="page"]),.row:hover,.guide .h:hover{background:var(--surface-hover)}
  .btn.primary:hover{background:color-mix(in srgb,var(--accent) 92%,white)}
  .btn:disabled:hover{background:var(--surface)}
}

/* the episode sheet: one raised surface, slides up from the bottom */
.scrim{position:fixed;inset:0;z-index:40;background:var(--scrim);opacity:0;pointer-events:none;transition:opacity var(--t)}
.scrim.on{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:41;max-height:88vh;overflow-y:auto;max-width:430px;margin:0 auto;padding:var(--s4) var(--gutter) calc(env(safe-area-inset-bottom,0px) + var(--s4));border-radius:var(--r-l) var(--r-l) 0 0;background:var(--surface-raised);border-top:1px solid var(--border);box-shadow:var(--shadow-3);transform:translateY(100%);transition:transform var(--t-slow) var(--ease)}
.sheet.on{transform:none}
.sheet:focus{outline:none}
.sheet .grab{width:36px;height:4px;border-radius:2px;background:var(--white-45);margin:-6px auto var(--s3)}
.sheet .x{position:absolute;right:var(--s3);top:var(--s3);width:34px;height:34px;border-radius:var(--r-m);border:1px solid var(--border);background:var(--surface);color:var(--text);display:grid;place-items:center;cursor:pointer}
.sheet .x svg{width:14px;height:14px}
.sheet .x:active{background:var(--surface-hover)}
.sheet .hd{display:grid;grid-template-columns:104px 1fr;gap:var(--s3);align-items:start}
.sheet .facts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin-top:var(--s3)}
.sheet .controls{margin:var(--s3) 0 0}
.sheet .cover{position:relative;aspect-ratio:9/16;border-radius:var(--r-m);overflow:hidden;background:#000;cursor:pointer;box-shadow:var(--shadow-2)}
.sheet .cover video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sheet .cover .snd{width:30px;height:30px;right:6px;bottom:6px}
.sheet .cover .snd svg{width:14px;height:14px}
.sheet .cover .chip{left:6px;top:6px}
.sheet h2{font-family:var(--display);font-size:var(--fs-l);font-weight:var(--w-medium);line-height:var(--lh-tight);letter-spacing:-.01em;margin:0 40px var(--s2) 0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sheet .stats{display:flex;gap:var(--s3);margin:var(--s2) 0 0;font-size:var(--fs-s);font-variant-numeric:tabular-nums}
.sheet .stats span{display:inline-flex;align-items:center;gap:5px;color:var(--text)}
.sheet .stats svg{width:14px;height:14px;color:var(--text-2)}
.sheet .airs{display:flex;gap:6px;overflow-x:auto;margin:var(--s3) 0 0;padding:2px 0 var(--s1);scrollbar-width:none}
.sheet .airs::-webkit-scrollbar{display:none}
.sheet .air{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:var(--s1);min-width:60px;padding:var(--s2) var(--s2) 6px;border-radius:var(--r-m);background:var(--surface);border:1px solid var(--border)}
.sheet .air svg{width:16px;height:16px;color:var(--text-2)}
.sheet .air b{font-size:var(--fs-xs);font-weight:var(--w-medium);font-variant-numeric:tabular-nums}
.sheet .air.past{opacity:.45}
.sheet .air.on{background:var(--accent-soft);border-color:var(--accent-border)}.sheet .air.on svg,.sheet .air.on b{color:var(--accent)}
.sheet .air.held{border-style:dashed;opacity:.6}
.sheet .acts{display:flex;gap:var(--s2);margin-top:var(--s3)}
.sheet .acts .btn{flex:1}
.confirm{margin-top:var(--s2);border-radius:var(--r-l);padding:var(--s3);font-size:var(--fs-s);line-height:var(--lh);background:var(--accent-soft);border:1px solid var(--accent-border)}
.confirm.error{background:color-mix(in srgb,var(--danger) 14%,transparent);border-color:color-mix(in srgb,var(--danger) 50%,transparent)}
.confirm .btns{display:flex;gap:var(--s2);margin-top:var(--s2)}
.confirm .btns .btn{flex:1}

/* charts: SVG drawn at the column's own width, so nothing scales and no text distorts */
.chart{display:block;width:100%;height:auto;font-family:var(--font);overflow:visible}
.chart .rule{stroke:var(--hair);stroke-width:1}
.chart .rule.dash{stroke-dasharray:2 3}
.chart .area{fill:var(--accent-wash)}
.chart .line{fill:none;stroke:var(--accent);stroke-width:1.75;stroke-linejoin:round;stroke-linecap:round}
.chart .dot{fill:var(--accent)}
.chart .bar{fill:var(--white-12)}
.chart .bar.win{fill:var(--accent)}
.chart .tick{fill:var(--text-3);font-size:10px}
.chart .tick.end{text-anchor:end}
.chart .tick.center{text-anchor:middle}
.chart .tick.gold{fill:var(--accent);font-weight:var(--w-semibold);font-size:11px}
.empty-chart{display:grid;place-items:center;padding:var(--s5) var(--s3);border:1px dashed var(--border);border-radius:var(--r-m);color:var(--text-3);font-size:var(--fs-s);text-align:center}
.hbars{display:flex;flex-direction:column;gap:var(--s2)}
.hbar{display:grid;grid-template-columns:104px 1fr 74px;gap:var(--s2);align-items:center}
.hbar .hb-l{display:flex;align-items:center;gap:6px;font-size:var(--fs-s);color:var(--text-2);min-width:0}
.hbar .hb-l span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hbar .hb-l svg{width:16px;height:16px;flex:0 0 auto;color:var(--text-2)}
.hbar .hb-t{height:10px;border-radius:2px;background:var(--surface)}
.hbar .hb-t i{display:block;height:100%;border-radius:2px;background:var(--white-12)}
.hbar.win .hb-t i{background:var(--accent)}
.hbar.win .hb-l{color:var(--text)}
.hbar .hb-v{text-align:right;font-variant-numeric:tabular-nums;line-height:1.1}
.hbar .hb-v b{font-family:var(--display);font-size:var(--fs-m);font-weight:var(--w-medium)}
.hbar .hb-v small{display:block;font-size:var(--fs-2xs);color:var(--text-3)}
/* the numbers that head the screen */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);margin:0 var(--gutter)}
.tile{padding:var(--s3);border-radius:var(--r-m);background:var(--surface)}
.tile b{display:block;font-family:var(--display);font-size:var(--fs-2xl);font-weight:var(--w-medium);line-height:1;font-variant-numeric:tabular-nums}
.tile span{display:block;margin-top:5px;font-size:var(--fs-xs);color:var(--text-3)}
.tile.wide{grid-column:1 / -1}
.notice{margin:0 var(--gutter);padding:var(--s3) var(--s4);border-radius:var(--r-m);background:var(--surface);border-left:3px solid var(--accent)}
.notice h3{font-family:var(--display);font-size:var(--fs-l);font-weight:var(--w-medium);margin:0 0 var(--s2);color:var(--accent)}
.notice p{font-size:var(--fs-s);line-height:var(--lh);margin:0}
.notice .why{font-size:var(--fs-xs);color:var(--text-3);margin-top:var(--s2)}
.notice .btn{margin-top:var(--s3);text-decoration:none}
.tiles.bare{margin:var(--s3) 0 0}
/* a chart and its heading */
.panel{margin:var(--s3) var(--gutter) 0;padding:var(--s3);border-radius:var(--r-m);background:var(--surface)}
.panel h3{font-family:var(--display);font-size:var(--fs-l);font-weight:var(--w-medium);margin:0 0 2px}
.panel .why{font-size:var(--fs-xs);color:var(--text-3);margin:0 0 var(--s2)}
.panel .after{font-size:var(--fs-xs);color:var(--text-2);margin-top:var(--s2)}
.filters{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--s2);margin:var(--s2) var(--gutter) var(--s3)}
.filters .field{margin:0}
.filters label{font-size:var(--fs-xs);margin-bottom:var(--s1)}
.filters select{padding:var(--s2) var(--s1);font-size:var(--fs-s)}
.metric{margin:0 var(--gutter) var(--s3)}
/* the swap picker: the library as a long list you can order and search */
.swapout{display:grid;grid-template-columns:44px 1fr;gap:var(--s3);align-items:center;padding:var(--s2);border-radius:var(--r-m);background:var(--surface);margin-bottom:var(--s3)}
.swapout .cover{aspect-ratio:9/16;border-radius:var(--r-s);background:var(--surface-media) center/cover no-repeat}
.swapout .t{font-family:var(--display);font-size:var(--fs-m);font-weight:var(--w-medium);line-height:var(--lh-tight);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.swapout .m{display:flex;gap:var(--s2);margin-top:3px;font-size:var(--fs-xs);color:var(--text-3);font-variant-numeric:tabular-nums}
.swapout .m span{display:inline-flex;align-items:center;gap:var(--s1)}
.swapout .m svg{width:12px;height:12px}
.picks{display:flex;flex-direction:column;gap:var(--s1);margin-top:var(--s3)}
.pick-row{display:grid;grid-template-columns:40px 1fr auto;gap:var(--s3);align-items:center;width:100%;padding:var(--s2);border:0;border-radius:var(--r-m);background:var(--surface);color:var(--text);font:inherit;text-align:left;cursor:pointer}
.pick-row:active{background:var(--surface-hover)}
.pick-row[disabled]{opacity:.45;cursor:default}
.pick-row .cover{position:relative;aspect-ratio:9/16;border-radius:var(--r-s);background:var(--surface-media) center/cover no-repeat}
.pick-row .cover .badge{left:2px;top:2px;padding:0 4px;font-size:9px}
.pick-row .t{font-family:var(--display);font-size:var(--fs-m);font-weight:var(--w-medium);line-height:var(--lh-tight);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pick-row .m{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:3px;font-size:var(--fs-xs);color:var(--text-2);font-variant-numeric:tabular-nums}
.pick-row .m span{display:inline-flex;align-items:center;gap:var(--s1)}
.pick-row .m svg{width:12px;height:12px;color:var(--text-3)}
.pick-row .r{font-size:var(--fs-xs);color:var(--text-2);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.pick-row .r b{display:block;font-family:var(--display);font-size:var(--fs-m)}
.pick-row .r.pending{color:var(--text-3)}
.row.air-row{grid-template-columns:28px 1fr auto}
.row.air-row .mark svg{width:20px;height:20px;display:block;color:var(--text-2)}
.row.air-row .t{font-size:var(--fs-m);font-variant-numeric:tabular-nums}
.bar .hint{color:var(--text-3);margin-left:var(--s2)}
/* the lineup carousel: centre card full, neighbours fade with distance, five in view at most; depth by scale, not by material */
.caro{position:relative;margin:var(--s2) 0 0;padding:var(--s3) 0 var(--s2);overflow:hidden}
.caro .rail{display:flex;gap:var(--s3);overflow-x:auto;scroll-snap-type:x mandatory;padding:0 calc(50% - 88px);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.caro .rail::-webkit-scrollbar{display:none}
.ep{flex:0 0 176px;scroll-snap-align:center;position:relative;border-radius:var(--r-m);padding:var(--s2) var(--s2) var(--s3);background:var(--surface-raised);border:0;box-shadow:var(--shadow-2);transform:scale(.82);opacity:0;transition:transform var(--t-slow) var(--ease),opacity var(--t-slow);cursor:pointer}
.ep .cover{aspect-ratio:9/16;border-radius:var(--r-m);overflow:hidden;background:var(--surface-media) center/cover no-repeat;position:relative;box-shadow:var(--shadow-1)}
.ep .cover .badge{left:var(--s2);top:var(--s2)}
.ep .cover .marks{position:absolute;right:6px;bottom:6px;display:flex;gap:3px}
.ep .cover .marks span{width:22px;height:22px;border-radius:var(--r-s);background:var(--overlay);display:grid;place-items:center}
.ep .cover .marks svg{width:13px;height:13px;color:var(--on-media)}
.ep .t{font-family:var(--display);font-size:var(--fs-m);font-weight:var(--w-medium);line-height:var(--lh-tight);margin:var(--s2) var(--s1) var(--s1);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:33px}
.ep .m{display:flex;justify-content:space-between;align-items:center;margin:0 var(--s1);font-size:var(--fs-xs);color:var(--text-2);font-variant-numeric:tabular-nums}
.ep .m span{display:inline-flex;align-items:center;gap:var(--s1)}
.ep .m svg{width:12px;height:12px;color:var(--text-3)}
.ep .m b{color:var(--text);font-weight:var(--w-semibold);font-size:var(--fs-s)}
.ep[data-d="0"]{transform:scale(1);opacity:1;z-index:2;border-color:var(--accent-border)}
.ep[data-d="1"]{transform:scale(.9);opacity:.72}
.ep[data-d="2"]{transform:scale(.82);opacity:.38}
.ep[data-d="3"]{transform:scale(.76);opacity:0}
.ep:active{transform:scale(.98)}
.caro .dots{display:flex;justify-content:center;gap:5px;margin-top:var(--s3)}
.caro .dots i{width:5px;height:5px;border-radius:50%;background:var(--white-45);transition:background var(--t),transform var(--t)}
.caro .dots i.on{background:var(--accent);transform:scale(1.4)}

/* the masthead sits on a hairline now that the ground is paper */
.top{border-bottom:1px solid var(--hair)}

/* 4 · the channel view — tap a channel or a handle anywhere: the screen gives way, that handle flies to the top and
   grows, and the channel's day plays as a carousel starting on what is live. Nothing is edited here either. */
.chv{position:fixed;inset:0;z-index:40}
.chv-bg{position:absolute;inset:0;background:var(--bg);opacity:0;transition:opacity var(--t-slow) var(--ease)}
.chv.on .chv-bg{opacity:1}
.phone.chv-away{opacity:0;transition:opacity var(--t) var(--ease)}
.chv-badge{position:fixed;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;transform-origin:50% 50%;transition:transform var(--t-slow) var(--ease)}
.chv-badge svg{width:19px;height:19px;color:var(--text);display:block}
.chv-badge small{font-size:var(--fs-2xs);color:var(--text-3);white-space:nowrap;transition:color var(--t) var(--ease)}
.chv.on .chv-badge small{color:var(--text-2)}
.chv-x{position:absolute;right:var(--s2);top:var(--s2);z-index:4;width:var(--tap);height:var(--tap);border:0;background:transparent;color:var(--text-3);display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity var(--t) var(--ease)}
.chv-x svg{width:20px;height:20px}
.chv.lit .chv-x{opacity:1}
.chv-stage{position:absolute;left:0;right:0;top:72px;bottom:0;z-index:2;display:flex;flex-direction:column;opacity:0;transform:translateY(12px);transition:opacity var(--t) var(--ease),transform var(--t) var(--ease)}
.chv.lit .chv-stage{opacity:1;transform:none}
.chv-caro{flex:1 1 auto;display:flex;align-items:center;gap:var(--s4);overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;padding:0 calc(50vw - 132px)}
.chv.set .chv-caro{scroll-snap-type:x mandatory}   /* snap only once it has been put on the live card, or the snap fights the landing */
.chv-caro::-webkit-scrollbar{height:0}
.chv-card{flex:0 0 264px;width:264px;scroll-snap-align:center;text-align:left;opacity:.4;transition:opacity var(--t) var(--ease)}
.chv-card.now{opacity:1}
.chv-screen{position:relative;aspect-ratio:9/16;background:var(--ink-900);border:1px solid var(--rule);overflow:hidden}
.chv-screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.chv-screen .pic{position:absolute;inset:0;background:var(--surface-media) center/cover no-repeat}
.chv-st{position:absolute;left:0;top:0;font-size:var(--fs-2xs);font-weight:var(--w-semibold);letter-spacing:.12em;text-transform:uppercase;color:var(--on-accent);background:var(--live);padding:2px 6px}
.chv-st.pre{background:var(--overlay);color:var(--on-media)}
.chv-card h3{font-family:var(--display);font-size:var(--fs-m);font-weight:var(--w-medium);line-height:var(--lh-tight);margin-top:var(--s3);display:-webkit-box;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.chv-fx{margin-top:3px;font-size:var(--fs-xs);color:var(--text-3);font-variant-numeric:tabular-nums}
.chv-ctl{flex:0 0 auto;display:flex;align-items:center;gap:var(--s2);padding:var(--s3) var(--gutter) calc(env(safe-area-inset-bottom,0px) + var(--s4));border-top:1px solid var(--hair)}
.chv-nav{width:36px;height:36px;border:1px solid var(--rule);background:var(--surface);color:var(--text);display:grid;place-items:center;cursor:pointer;border-radius:var(--r-s)}
.chv-nav svg{width:16px;height:16px}
.chv-nav:disabled{opacity:.3;cursor:default}
.chv-pos{font-size:var(--fs-xs);color:var(--text-3);min-width:46px;text-align:center}
.chv-snd{width:36px;height:36px;border:1px solid var(--rule);background:var(--surface);color:var(--text);display:grid;place-items:center;cursor:pointer;border-radius:var(--r-s);margin-left:auto}
.chv-snd svg{width:16px;height:16px}
.chv-go{border:1px solid var(--ink-900);background:var(--ink-900);color:var(--on-accent);font:inherit;font-size:var(--fs-s);font-weight:var(--w-medium);padding:9px 14px;border-radius:var(--r-s);cursor:pointer;white-space:nowrap}
.chv-go:active{opacity:.85}

/* the guide banner, a cable guide's top: what is on, beside a small picture in the top-right corner. .big puts the
   picture full width above the details. The picture keeps the media ink; the details sit on the light surface. */
.banner{display:grid;grid-template-columns:minmax(0,1fr) 46%;gap:var(--s3);align-items:start;margin:0 var(--gutter);padding:var(--s3);background:var(--surface);border-radius:var(--r-m);box-shadow:var(--shadow-1)}
.banner .info{display:flex;flex-direction:column;gap:var(--s1);min-width:0;cursor:pointer}
.banner .line1{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.banner .chip{position:static}
.banner .chip.pre{background:var(--well);color:var(--text-2)}
.banner .bug{display:inline-flex;align-items:center;gap:var(--s1);font-size:var(--fs-xs);color:var(--text-2)}
.banner .bug svg{width:14px;height:14px}
.banner b{font-family:var(--display);font-size:var(--fs-l);font-weight:var(--w-regular);line-height:var(--lh-tight);color:var(--text);overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.banner .meta{margin:0;font-size:var(--fs-xs)}
.banner.big{grid-template-columns:minmax(0,1fr)}
.banner.big .pip{order:-1;border-radius:var(--r-m)}
.banner.big b{-webkit-line-clamp:2}
.pip{position:relative;aspect-ratio:16/9;border-radius:var(--r-s);overflow:hidden;background:#000;box-shadow:var(--shadow-2);cursor:pointer}
.pip:active{transform:scale(.99)}
.pip video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pip .snd{right:4px;bottom:4px;width:30px;height:30px}
.pip .snd svg{width:14px;height:14px}
.pip .grow{position:absolute;right:4px;top:4px;width:30px;height:30px;border-radius:var(--r-m);border:1px solid var(--white-12);background:var(--overlay);color:var(--on-media);display:grid;place-items:center;cursor:pointer}
.pip .grow svg{width:14px;height:14px}
.pip .grow:active{background:var(--surface-hover)}
.banner.big .pip .snd,.banner.big .pip .grow{width:34px;height:34px;right:var(--s2)}
.banner.big .pip .snd{bottom:var(--s2)}.banner.big .pip .grow{top:var(--s2)}
@media(hover:hover){.pip .grow:hover{background:var(--black-55)}}

/* the schedule controls (season): one card a channel. Dashed = a preview of what the backend does not do yet. */
.legend{display:flex;align-items:center;gap:var(--s2);margin:0 var(--gutter) var(--s2);font-size:var(--fs-xs);color:var(--text-3)}
.legend i{width:18px;height:12px;border:1px dashed var(--text-3);border-radius:var(--r-s)}
.preview-only{outline:1px dashed var(--text-3);outline-offset:3px;border-radius:var(--r-m)}
.lab.until-lab{margin-top:var(--s3)}
.planbar .seg+.meta{margin:var(--s2) 0 0}
.planbar .lab{margin-top:var(--s3)}
.sched-head{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:var(--s3);align-items:center}
.sched-head .mark svg{width:24px;height:24px;display:block;color:var(--text)}
.sched-head .t{font-family:var(--display);font-size:var(--fs-l);line-height:var(--lh-tight)}
.sched-head .m{font-size:var(--fs-xs);color:var(--text-3)}
.sched.paused .dial,.sched.paused input[type=range],.sched.paused .scale,.sched.paused .next48{opacity:.45}
.dial{display:grid;grid-template-columns:var(--tap) 1fr var(--tap);align-items:center;gap:var(--s2);margin-top:var(--s3)}
.dial .step{width:var(--tap);height:var(--tap);border-radius:var(--r-m);border:1px solid var(--border);background:var(--surface);color:var(--text);display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow-1);transition:transform var(--t-fast)}
.dial .step svg{width:18px;height:18px}
.dial .step:active{background:var(--surface-hover);transform:scale(.96)}
.dial .step:disabled{opacity:.35;cursor:default;box-shadow:none;transform:none}
.dial-n{text-align:center;line-height:1}
.dial-n b{display:block;font-family:var(--display);font-size:var(--fs-2xl);font-weight:var(--w-regular);font-variant-numeric:tabular-nums}
.dial-n small{font-size:var(--fs-xs);color:var(--text-3)}
.scale{display:flex;justify-content:space-between;font-size:var(--fs-2xs);color:var(--text-3)}
.scale .over{color:var(--danger)}
.list>.card{margin:0}
.sched .seg{margin-top:var(--s3)}
.fields2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);margin-top:var(--s2)}
.fields2 .field{margin:0}
.fields2 label{font-size:var(--fs-xs);margin-bottom:var(--s1)}
.times{display:flex;flex-wrap:wrap;gap:var(--s1);margin-top:var(--s2);padding:var(--s1)}
.times button{min-height:34px;padding:0 var(--s2);border-radius:var(--r-s);border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:var(--fs-xs);font-variant-numeric:tabular-nums;cursor:pointer}
.times button[aria-pressed="true"]{color:var(--text);border-color:var(--text);box-shadow:inset 0 0 0 1px var(--text)}
.sched .times button[aria-pressed="false"]{color:var(--text-3);background:var(--well);border-color:transparent}
.times button:active{transform:scale(.97)}
.days{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--s1);margin-top:var(--s3);padding:var(--s1)}
.days button{min-height:36px;border-radius:var(--r-s);border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:var(--fs-s);font-weight:var(--w-medium);cursor:pointer}
.days button[aria-pressed="false"]{color:var(--text-3);background:var(--well);border-color:transparent;text-decoration:line-through}
.next48{margin-top:var(--s3)}
.next48 .row48{display:grid;grid-template-columns:62px 1fr;align-items:center;gap:var(--s2);height:22px}
.next48 .row48>span{font-size:var(--fs-2xs);color:var(--text-3)}
.next48 .tl{position:relative;height:10px;background:var(--well);border-radius:5px;box-shadow:var(--inset)}
.next48 .tl i{position:absolute;top:50%;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:var(--text)}
.next48 .tl i.new{box-shadow:0 0 0 2px var(--mist-2)}
.next48 .tl i.gone{background:var(--surface);border:1.5px solid var(--text-3)}
.next48 .ticks{display:grid;grid-template-columns:62px 1fr;gap:var(--s2)}
.next48 .ticks div{display:flex;justify-content:space-between;font-size:var(--fs-2xs);color:var(--text-3)}
.savebar{position:sticky;bottom:calc(env(safe-area-inset-bottom,0px) + 84px);z-index:4;display:flex;align-items:center;gap:var(--s2);margin:var(--s3) var(--gutter) 0;padding:var(--s2) var(--s2) var(--s2) var(--s3);background:var(--surface-raised);border-radius:var(--r-m);box-shadow:var(--shadow-2)}
.savebar span{margin-right:auto;font-size:var(--fs-s);color:var(--text-2)}

/* the programmer: talk, log, notes. The conversation is prose by nature; the chrome around it stays labels. */
.views{margin:0 var(--gutter) var(--s3)}
.call .call-k{font-size:var(--fs-xs);color:var(--text-3)}
.call .call-w{font-family:var(--display);font-size:var(--fs-l);line-height:var(--lh-tight);margin-top:2px}
.chips{display:flex;flex-wrap:wrap;gap:var(--s1);margin-top:var(--s2)}
.chipbtn{flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--s1);min-height:34px;padding:0 var(--s3);border:1px solid var(--border);border-radius:var(--r-m);background:var(--surface);color:var(--text);font:inherit;font-size:var(--fs-xs);white-space:nowrap;text-decoration:none;cursor:pointer;transition:transform var(--t-fast)}
.chipbtn svg{width:12px;height:12px;color:var(--text-3)}
.chipbtn:active{background:var(--surface-hover);transform:scale(.97)}
.chipbtn:disabled{opacity:.45;cursor:default;transform:none}
@media(hover:hover){.chipbtn:hover:not(:disabled){background:var(--surface-hover)}}
.talk{display:flex;flex-direction:column;gap:var(--s2);margin:var(--s3) var(--gutter) 0}
.say{display:flex}
.say.you{justify-content:flex-end}
.say .bubble{max-width:86%;padding:var(--s2) var(--s3);border-radius:var(--r-l);background:var(--surface);box-shadow:var(--shadow-1);font-size:var(--fs-s);line-height:var(--lh);color:var(--text)}
.say.you .bubble{background:var(--accent);color:var(--on-accent);box-shadow:none}
.say.standin .bubble{outline:1px dashed var(--text-3);outline-offset:3px}
.say .bubble p{margin:0}
.say .bubble p+*{margin-top:var(--s2)}
.wlabel{font-size:var(--fs-2xs);color:var(--text-3);margin-bottom:var(--s1)}
.strip{display:flex;gap:var(--s1);overflow-x:auto;scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.strip .thumb{flex:0 0 38px;aspect-ratio:9/16;border-radius:var(--r-s);background:var(--surface-media) center/cover no-repeat;display:block}
.epcard{display:grid;grid-template-columns:44px minmax(0,1fr);gap:var(--s2);align-items:center;padding:var(--s1);border-radius:var(--r-m);background:var(--well);text-decoration:none;color:var(--text)}
.epcard .cover{aspect-ratio:9/16;border-radius:var(--r-s);background:var(--surface-media) center/cover no-repeat}
.epcard b{display:block;font-family:var(--display);font-weight:var(--w-regular);font-size:var(--fs-s);line-height:var(--lh-tight)}
.epcard span{font-size:var(--fs-2xs);color:var(--text-3)}
.typing{display:inline-flex;gap:4px;padding:4px 0}
.typing i{width:5px;height:5px;border-radius:50%;background:var(--text-3);animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{50%{opacity:.25}}
@media(prefers-reduced-motion:reduce){.typing i{animation:none}}
.phone.talking{padding-bottom:230px}
.composer{position:fixed;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 72px);z-index:6;display:flex;justify-content:center;padding:0 var(--s3)}
.composer .inner{width:100%;max-width:406px;padding:var(--s2);background:var(--surface-raised);border-radius:var(--r-m);box-shadow:var(--shadow-2)}
.composer .starters{flex-wrap:nowrap;overflow-x:auto;margin:0 0 var(--s2);scrollbar-width:none}
.composer .starters::-webkit-scrollbar{display:none}
.composer form{display:flex;gap:var(--s2);align-items:flex-end}
.composer textarea{flex:1;min-height:var(--tap);max-height:120px;resize:none;padding:var(--s2) var(--s3);border:1px solid var(--border);border-radius:var(--r-m);background:var(--surface);color:var(--text);font:var(--fs-m)/var(--lh) var(--font)}
.composer textarea:focus{outline:none;border-color:var(--accent-border)}
.composer .send{width:var(--tap);padding:0;flex:0 0 auto}
.composer .send svg{width:18px;height:18px}
.row.note{grid-template-columns:minmax(0,1fr)}