/* Layout: iOS-inspired structure (large titles, sheets, grouped lists, a docked tab bar) with Sezo's own language:
   episode pips that show skipped episodes as gaps, a Tonight timeline, and an ember light reserved for now, next and the moment of checking.
   Colour: plum-dusk neutrals plus one ember accent (kept well clear of TV Time's yellow on black); each show's colour carries its identity.
   Type: Bricolage Grotesque for everything (self-hosted, SIL OFL: fonts/OFL.txt). Its optical-size axis follows the text size,
   so titles get the tight display cut and body text the open one. Sizes in rem so iOS Larger Text scales them. */
@font-face { font-family: "Bricolage Grotesque"; src: url(fonts/bricolage-grotesque-latin.woff2) format("woff2"); font-weight: 200 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Bricolage Grotesque"; src: url(fonts/bricolage-grotesque-latin-ext.woff2) format("woff2"); font-weight: 200 800; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root {
  --bg: oklch(96.8% .005 330);
  --card: oklch(99.4% .002 330);
  --sheet-bg: oklch(96.8% .005 330);
  --sheet-card: oklch(99.4% .002 330);
  --tabbar: oklch(98.6% .003 330);
  --fill: oklch(50% .02 330 / .1);
  --fill-2: oklch(50% .02 330 / .16);
  --press: oklch(30% .02 330 / .07);
  --label: oklch(22% .025 330);
  --label-2: oklch(45% .02 330);
  --label-3: oklch(56% .018 330);
  --sep: oklch(40% .02 330 / .2);
  --lamp: oklch(66% .17 40);
  --on-lamp: oklch(22% .04 35);
  --lamp-ink: oklch(52% .155 38);
  --lamp-soft: oklch(66% .17 40 / .16);
  --red: oklch(50% .19 15);
  --bar: oklch(96.8% .005 330 / .86);
  --scrim: oklch(15% .02 330 / .38);
  --toast: oklch(24% .025 330);
  --toast-text: oklch(96% .006 330);
  --toast-act: oklch(80% .12 48);
  --lift: 0 1px 0 oklch(30% .02 330 / .05);
  --on-show: oklch(99% .003 330);
  --shade: oklch(20% .02 330 / .35);
  --art-edge: oklch(22% .025 330 / .1);
  --font: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --t-large: 2rem; --t-title: 1.294rem; --t-title3: 1.176rem; --t-body: 1rem; --t-sub: .882rem; --t-foot: .765rem; --t-cap: .706rem;
  --ease: cubic-bezier(.25, 1, .5, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: oklch(18.5% .02 330); --card: oklch(23.5% .022 330); --sheet-bg: oklch(21.5% .022 330); --sheet-card: oklch(27% .023 330); --tabbar: oklch(20.5% .02 330);
    --fill: oklch(80% .02 330 / .1); --fill-2: oklch(80% .02 330 / .16); --press: oklch(90% .02 330 / .08);
    --label: oklch(95% .006 330); --label-2: oklch(74% .016 330); --label-3: oklch(62% .018 330); --sep: oklch(90% .02 330 / .12);
    --lamp: oklch(71% .16 42); --on-lamp: oklch(20% .04 35); --lamp-ink: oklch(81% .11 50); --lamp-soft: oklch(71% .16 42 / .18); --red: oklch(69% .16 12);
    --bar: oklch(18.5% .02 330 / .86); --scrim: oklch(5% .02 330 / .55); --toast: oklch(32% .022 330); --lift: none; --shade: oklch(5% .02 330 / .6); --art-edge: oklch(95% .006 330 / .12);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: oklch(18.5% .02 330); --card: oklch(23.5% .022 330); --sheet-bg: oklch(21.5% .022 330); --sheet-card: oklch(27% .023 330); --tabbar: oklch(20.5% .02 330);
  --fill: oklch(80% .02 330 / .1); --fill-2: oklch(80% .02 330 / .16); --press: oklch(90% .02 330 / .08);
  --label: oklch(95% .006 330); --label-2: oklch(74% .016 330); --label-3: oklch(62% .018 330); --sep: oklch(90% .02 330 / .12);
  --lamp: oklch(71% .16 42); --on-lamp: oklch(20% .04 35); --lamp-ink: oklch(81% .11 50); --lamp-soft: oklch(71% .16 42 / .18); --red: oklch(69% .16 12);
  --bar: oklch(18.5% .02 330 / .86); --scrim: oklch(5% .02 330 / .55); --toast: oklch(32% .022 330); --lift: none; --shade: oklch(5% .02 330 / .6); --art-edge: oklch(95% .006 330 / .12);
  color-scheme: dark;
}

/* iOS Larger Text: -apple-system-body follows the phone's text size; other browsers keep 17px */
html { font-size: 17px; font: -apple-system-body; }
* { box-sizing: border-box; }
body { background: var(--bg); color: var(--label); font-family: var(--font); font-size: var(--t-body); line-height: 1.3; letter-spacing: -.012em; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
button, input, textarea, summary { font: inherit; color: inherit; letter-spacing: inherit; }
button, summary, label { cursor: pointer; touch-action: manipulation; }
:focus-visible { outline: 2px solid var(--label); outline-offset: 2px; border-radius: 10px; }
a { color: var(--label); text-underline-offset: 2px; }
html { scroll-padding: calc(52px + env(safe-area-inset-top, 0px)) 0 calc(140px + env(safe-area-inset-bottom, 0px)); } /* focus never lands under the bars */
svg { flex: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.locked { overflow: hidden; }

/* Navigation bar */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; height: 44px; transition: background-color .2s ease, box-shadow .2s ease; }
.nav-in { max-width: 600px; height: 100%; margin: 0 auto; display: grid; place-items: center; padding: 0 16px; }
.nav-title { font-family: var(--font); font-weight: 700; opacity: 0; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease; }
.nav.scrolled { background: var(--bar); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); box-shadow: 0 .5px 0 var(--sep); }
.nav.scrolled .nav-title { opacity: 1; transform: none; }
.app { max-width: 600px; margin: 0 auto; padding: 0 16px calc(96px + var(--consent-h, 0px) + env(safe-area-inset-bottom, 0px)); }
.enter { animation: fadein .2s ease; }
@keyframes fadein { from { opacity: 0; } }

/* Text */
.large-title { margin: 0; font: 700 min(var(--t-large), 13vw)/1.2 var(--font); letter-spacing: .005em; overflow-wrap: anywhere; } /* a one-word title still fits a 320px screen at the largest text */
.subtitle { margin: 4px 0 0; font-size: var(--t-sub); line-height: 1.35; letter-spacing: -.008em; color: var(--label-2); text-wrap: pretty; }
.subtitle b { color: var(--label); font-weight: 600; }
.section-title { margin: 28px 2px 10px; font: 700 var(--t-title)/1.25 var(--font); letter-spacing: .01em; }
.group-label { margin: 26px 16px 8px; font-size: var(--t-foot); line-height: 1.35; font-weight: 600; letter-spacing: -.006em; color: var(--label-2); scroll-margin-top: 64px; }
.footnote { margin: 8px 16px 0; font-size: var(--t-foot); line-height: 1.4; letter-spacing: -.006em; color: var(--label-2); }
.ep-code { font-family: var(--font); font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: .01em; color: var(--label-2); margin-right: .35em; display: inline-block; }
.time { flex: none; min-width: 3.1em; font-family: var(--font); font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: 0; }

/* Lists */
.list { position: relative; background: var(--card); border-radius: 16px; overflow: hidden; box-shadow: var(--lift); }
.list > * { position: relative; }
.list > * + *::before { content: ""; position: absolute; top: 0; right: 0; left: var(--inset, 16px); height: 1px; background: var(--sep); transform: scaleY(.5); transform-origin: top; pointer-events: none; }
.row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; margin: 0; padding: 10px 16px; border: 0; background: none; text-align: left; color: inherit; transition: background-color .15s ease; }
.row-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; margin: -10px 0; padding: 10px 0; border: 0; background: none; text-align: left; color: inherit; border-radius: 10px; transition: background-color .15s ease; }
button.row:active, label.row:active, summary.row:active, .row-main:active { background: var(--press); }
.row-text { flex: 1; min-width: 0; display: grid; gap: 2px; overflow-wrap: anywhere; } /* a word wider than the room left at Larger Text breaks instead of spilling */
.row-title { font-size: var(--t-body); line-height: 1.3; }
.row-title.strong { font-weight: 600; }
.row-sub { font-size: var(--t-sub); line-height: 1.35; letter-spacing: -.008em; color: var(--label-2); text-wrap: pretty; }
.row-note { font-size: var(--t-foot); line-height: 1.35; color: var(--label-2); }
.row-trail { flex: none; font-size: var(--t-sub); color: var(--label-2); font-variant-numeric: tabular-nums; text-align: right; }
.chev { color: var(--label-3); margin-right: -4px; }
.row.action { color: var(--label); font-weight: 600; }
.row.action.plain { color: var(--label); }
.row.action.danger { color: var(--red); }

/* Artwork: the TVmaze poster when there is one, otherwise a soft tile in the show's colour with its initials */
.art { --c: oklch(60% .012 330); flex: none; position: relative; display: grid; place-items: center; overflow: hidden; color: var(--on-show); background: var(--c); font-family: var(--font); font-weight: 800; letter-spacing: 0; }
.art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.art.sm { width: 58px; height: 87px; border-radius: 12px; font-size: 22px; }
.art.xs { width: 38px; height: 57px; border-radius: 8px; font-size: 15px; }
.art.lg { width: 100px; height: 150px; border-radius: 16px; font-size: 38px; box-shadow: 0 10px 24px -12px var(--shade); }

/* Episode pips: one per episode of the season. Watched in the show's colour, the next one lit, skipped ones stay hollow */
.pips { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 9px; }
.pip { display: block; width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--label-3); }
.pip.w { background: var(--c); box-shadow: none; }
.pip.next { width: 11px; height: 11px; background: var(--lamp); box-shadow: 0 0 0 3px var(--lamp-soft); }
.pip.soon { width: 4px; height: 4px; margin: 0 2px; background: var(--label-3); box-shadow: none; }
.pip-more { font: 650 var(--t-cap)/1 var(--font); color: var(--label-2); font-variant-numeric: tabular-nums; }
.pips.big { gap: 6px; margin-top: 14px; }
.pips.big .pip { width: 10px; height: 10px; }
.pips.big .pip.next { width: 13px; height: 13px; }
.pips.big .pip.soon { width: 5px; height: 5px; }

/* Tonight: the evening as a broadcast line, with a lamp for now */
.tonight { margin-top: 14px; padding: 14px 16px 6px; border-radius: 20px; background: var(--card); box-shadow: var(--lift); }
.tn-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
.tn-title { margin: 0; font: 700 var(--t-title3)/1.2 var(--font); }
.tn-sub { font-size: var(--t-foot); color: var(--label-2); }
.tn-line { position: relative; height: 36px; margin: 14px 4px 2px; }
.tn-track { position: absolute; left: 0; right: 0; top: 7px; height: 2px; border-radius: 1px; background: var(--fill-2); }
.tn-hour { position: absolute; top: 18px; transform: translateX(-50%); font: 600 min(var(--t-cap), 12px)/1 var(--font); /* decorative scale (aria-hidden); the list below carries the times at full size */ font-variant-numeric: tabular-nums; color: var(--label-2); }
.tn-tick { position: absolute; top: 2px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px var(--card); }
.tn-tick.past { background: var(--card); box-shadow: inset 0 0 0 2px var(--c), 0 0 0 2px var(--card); }
.tn-now { position: absolute; top: -2px; width: 4px; height: 20px; margin-left: -2px; border-radius: 2px; background: var(--lamp); box-shadow: 0 0 0 3px var(--lamp-soft); }
.tn-list { margin: 4px -8px 0; }
.tn-item { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 2px 10px; width: 100%; min-height: 44px; padding: 8px; border: 0; border-radius: 12px; background: none; text-align: left; color: inherit; }
.tn-item + .tn-item { margin-top: -2px; }
.tn-text { flex: 1 1 9em; min-width: 0; display: grid; gap: 1px; overflow-wrap: anywhere; } /* drops under the time when Larger Text leaves no room */
.tn-name { font-weight: 600; }
.tn-ep { font-size: var(--t-foot); line-height: 1.35; color: var(--label-2); }
.cdot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--c); vertical-align: .08em; }

/* Watch list cards */
.cards { display: grid; gap: 10px; }
.card { position: relative; display: flex; align-items: center; gap: 2px; padding: 14px 4px 14px 14px; background: var(--card); border-radius: 20px; box-shadow: var(--lift); touch-action: pan-y; transition: transform .25s var(--ease); }
.card.dragging { transition: none; }
.card-main { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 14px; padding: 0; border: 0; background: none; text-align: left; color: inherit; border-radius: 12px; }
.card-text { flex: 1; min-width: 0; display: grid; gap: 2px; overflow-wrap: anywhere; }
.card-title { font-size: var(--t-body); line-height: 1.3; font-weight: 600; }
.card-ep { font-size: var(--t-sub); line-height: 1.35; letter-spacing: -.008em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 1px; font-size: var(--t-foot); line-height: 1.35; color: var(--label-2); }
.advanced .card-ep { animation: tick .32s var(--ease); }
.advanced .pip.next { animation: pipin .4s var(--ease); }
@keyframes tick { from { opacity: 0; transform: translateY(45%); } }
@keyframes pipin { from { transform: scale(.3); } }

/* The check: an empty ring that lights up in ember */
.check { flex: none; width: 46px; height: 46px; display: grid; place-items: center; padding: 0; border: 0; background: none; color: inherit; }
.ring { position: relative; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; border: 1.75px solid var(--label-3); color: transparent; transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease; }
.check.big .ring { width: 32px; height: 32px; }
.check.on .ring { background: var(--c, var(--lamp)); border-color: var(--c, var(--lamp)); color: var(--on-show); }
.check:active .ring { transform: scale(.88); }
.check.pop .ring { background: var(--lamp); border-color: var(--lamp); color: var(--on-lamp); animation: pop .3s var(--ease); }
.check.pop .ring::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; box-shadow: 0 0 0 2px var(--lamp-soft); animation: bloom .55s ease-out forwards; }
@keyframes pop { from { transform: scale(.8); } }
@keyframes bloom { to { transform: scale(1.8); opacity: 0; } }
.card.armed .ring { background: var(--lamp-soft); border-color: var(--lamp); }
.future .ring { border-style: dashed; }
.check.static { pointer-events: none; }
.chip { display: inline-flex; align-items: center; min-height: 1.45em; padding: 1px 8px; border-radius: 999px; background: var(--fill); color: var(--label-2); font-size: var(--t-cap); font-weight: 650; line-height: 1.3; letter-spacing: 0; }
.chip.lamp { background: var(--lamp-soft); color: var(--lamp-ink); }

/* Controls */
.seg { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--fill); }
.seg.top { margin-top: 14px; flex-wrap: wrap; }
.seg button { flex: 1 0 auto; min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: var(--label-2); font-size: var(--t-foot); font-weight: 650; letter-spacing: -.006em; transition: background-color .2s ease, color .2s ease; }
.seg button[aria-pressed="true"] { background: var(--card); color: var(--label); box-shadow: inset 0 0 0 1.5px var(--label); }
.seg.seasons { margin-top: 24px; overflow-x: auto; scrollbar-width: none; }
.seg.seasons button { flex: 0 0 auto; min-width: 44px; padding: 0 12px; font-family: var(--font); }
.seg.seasons::-webkit-scrollbar { display: none; }
.seg.seasons.fade { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
.seg.seasons.fade::after { content: ""; flex: 0 0 18%; } /* the last season can scroll out of the fade */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 10px 18px; border: 0; border-radius: 14px; background: var(--fill); color: var(--label); font-size: var(--t-body); line-height: 1.2; font-weight: 600; text-align: center; text-wrap: balance; transition: opacity .15s ease, background-color .15s ease; }
.btn:active { opacity: .7; }
.btn.ink { background: var(--label); color: var(--card); }
.btn.danger { background: color-mix(in oklab, var(--red) 11%, transparent); color: var(--red); }
.btn.text { background: none; color: var(--label); padding: 0 10px; text-decoration: underline; text-decoration-color: var(--label-3); text-underline-offset: 3px; }
.btn.wide { display: flex; width: 100%; }
.btn.wide + .btn.wide { margin-top: 10px; }
.follow-btn { position: relative; flex: none; display: inline-flex; align-items: center; gap: 4px; min-height: 34px; padding: 0 14px 0 10px; border: 0; border-radius: 999px; background: var(--fill); color: var(--label); font-size: var(--t-sub); font-weight: 650; }
.follow-btn::after { content: ""; position: absolute; inset: -6px -4px; }
.icon-btn { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 12px; background: none; color: var(--label); }
.icon-btn.quiet { color: var(--label-3); }
.text-btn { min-height: 44px; padding: 0 8px; border: 0; background: none; color: var(--label); font-size: var(--t-body); font-weight: 600; }

/* Tips and empty states */
.tip { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start; margin-top: 18px; padding: 0 0 0 2px; }
.tip b { display: block; font-size: var(--t-sub); line-height: 1.35; font-weight: 650; }
.tip p { margin: 3px 0 0; font-size: var(--t-sub); line-height: 1.4; letter-spacing: -.008em; color: var(--label-2); }
.tip .btn { margin-top: 10px; min-height: 40px; font-size: var(--t-sub); }
.tip-close { width: 44px; height: 44px; margin: -10px 0 -10px; display: grid; place-items: center; border: 0; background: none; color: var(--label-3); }
.tip-mark { display: inline-flex; gap: 4px; margin-right: 8px; vertical-align: .1em; }
.tip-mark i { width: 7px; height: 7px; border-radius: 50%; background: var(--label-3); }
.tip-mark i:nth-child(2) { background: var(--lamp); }
.empty { display: grid; justify-items: center; gap: 6px; padding: 40px 24px 28px; text-align: center; }
.empty h2 { margin: 0; font: 700 var(--t-title)/1.25 var(--font); text-wrap: balance; }
.empty p { margin: 0; max-width: 36ch; font-size: var(--t-sub); line-height: 1.4; letter-spacing: -.008em; color: var(--label-2); }
.empty-pips { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin-bottom: 12px; }
.empty-pips i { width: 14px; height: 14px; border-radius: 50%; background: var(--c, var(--fill-2)); }
.empty-pips.hollow i { background: none; box-shadow: inset 0 0 0 2px var(--label-3); }
.empty.compact { padding: 4px 8px 0; }

/* Welcome */
.welcome { padding: 40px 0 20px; text-align: center; }
.mark { display: inline-flex; align-items: center; gap: 8px; }
.mark i { width: 14px; height: 14px; border-radius: 50%; background: var(--label); }
.mark i.on { width: 19px; height: 19px; background: var(--lamp); box-shadow: 0 0 0 6px var(--lamp-soft); }
.mark i.off { background: none; box-shadow: inset 0 0 0 2px var(--label-3); }
.welcome-title { margin: 18px 0 0; font: 800 min(var(--t-large), 13vw)/1.15 var(--font); }
.welcome-sub { margin: 10px auto 0; max-width: 30ch; font-size: var(--t-body); line-height: 1.4; color: var(--label-2); text-wrap: balance; }
.demo { margin: 40px 0 0; text-align: left; }
.demo .card { pointer-events: none; }
.demo-cap { margin: 12px 8px 0; font-size: var(--t-foot); line-height: 1.4; color: var(--label-2); text-align: center; }

/* Schedule */
.cal { margin-top: 16px; padding: 8px 8px 10px; border-radius: 20px; background: var(--card); box-shadow: var(--lift); }
.cal-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding-left: 10px; }
.month { margin: 0; font: 700 var(--t-body)/1.3 var(--font); }
.cal-nav { display: flex; align-items: center; }
.grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); touch-action: pan-y; }
.wd { padding: 6px 0 4px; text-align: center; font-size: var(--t-cap); font-weight: 650; color: var(--label-2); }
.day { min-width: 0; min-height: 52px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 2px 0 0; border: 0; border-radius: 12px; background: none; color: var(--label); }
.day .num { min-width: 34px; aspect-ratio: 1; padding: 0 2px; display: grid; place-items: center; border-radius: 50%; font: 500 min(var(--t-body), 5.4vw)/1 var(--font); font-variant-numeric: tabular-nums; transition: background-color .15s ease; }
.day.out .num { color: var(--label-2); }
.day.today .num { box-shadow: inset 0 0 0 2px var(--lamp); font-weight: 750; }
.day.sel .num { background: var(--label); color: var(--card); font-weight: 700; box-shadow: none; }
.day.sel.today .num { background: var(--lamp); color: var(--on-lamp); }
.dots { display: flex; align-items: center; justify-content: center; gap: 3px; height: 8px; }
.dot { display: block; width: 6px; height: 6px; border-radius: 50%; }
.dot.seen { background: var(--c); }
.dot.todo { width: 7px; height: 7px; box-shadow: inset 0 0 0 2px var(--c); }
.dot.soon { width: 4px; height: 4px; background: var(--label-3); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 16px 0; font-size: var(--t-foot); color: var(--label-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend .dot { --c: var(--label-2); }
.cal-ep { padding-left: 4px; }
.trail2 { flex: none; display: grid; justify-items: end; gap: 2px; font-size: var(--t-foot); color: var(--label-2); }
.trail2 b { font: 650 var(--t-sub)/1.2 var(--font); color: var(--label); font-variant-numeric: tabular-nums; }

/* Shows */
.search { position: relative; margin-top: 12px; }
.search > svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--label-2); pointer-events: none; }
.search input { width: 100%; min-height: 44px; padding: 0 44px 0 38px; border: 0; border-radius: 14px; background: var(--fill); color: var(--label); font-size: var(--t-body); -webkit-appearance: none; appearance: none; }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.search input::placeholder { color: var(--label-2); }
.search input:focus-visible { outline-offset: 0; }
.clear { position: absolute; right: 0; top: 50%; width: 44px; height: 44px; transform: translateY(-50%); display: grid; place-items: center; border: 0; background: none; }
.clear span { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: var(--label-3); color: var(--card); }

/* Profile */
.row-details > summary { list-style: none; }
.row-details > summary::-webkit-details-marker { display: none; }
.row-details > summary .chev { transition: transform .2s ease; }
.row-details[open] > summary .chev { transform: rotate(90deg); }
.details-body { padding: 0 16px 16px; }
.details-body p { margin: 0; font-size: var(--t-sub); line-height: 1.45; letter-spacing: -.008em; color: var(--label-2); }
.details-body svg { vertical-align: -3px; color: var(--label); }
.details-body .btn { margin-top: 10px; }
.note { padding: 12px 16px; }
.note ul { margin: 0; padding-left: 18px; font-size: var(--t-sub); line-height: 1.45; letter-spacing: -.008em; color: var(--label-2); }
.note li + li { margin-top: 4px; }
textarea { display: block; width: 100%; min-height: 110px; padding: 10px 12px; border: 0; border-radius: 12px; background: var(--fill); color: var(--label); font: .765rem/1.45 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0; resize: vertical; }
textarea[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--red); }
textarea::placeholder { color: var(--label-2); }
.field-error { margin: 8px 0 0; font-size: var(--t-foot); font-weight: 650; color: var(--red); }
.field-error:empty { display: none; }
#exportBox { margin-top: 12px; }

/* Account */
.account { margin-top: 16px; padding: 18px 16px 16px; border-radius: 20px; background: var(--card); box-shadow: var(--lift); }
.account.in { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 6px 14px 14px; }
.mark.small { gap: 6px; }
.mark.small i { width: 9px; height: 9px; }
.mark.small i.on { width: 12px; height: 12px; box-shadow: 0 0 0 4px var(--lamp-soft); }
.acct-title { margin: 12px 0 0; font: 700 var(--t-title3)/1.25 var(--font); }
.acct-text { margin: 6px 0 0; font-size: var(--t-sub); line-height: 1.45; letter-spacing: -.008em; color: var(--label-2); }
.acct-actions, .tip-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5em), 1fr)); gap: 8px; margin-top: 14px; }
.tip-actions .btn { margin-top: 0; }
.acct-note { margin: 12px 0 0; font-size: var(--t-foot); line-height: 1.4; color: var(--label-2); }
.avatar { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--fill-2); color: var(--label); font: 800 var(--t-title3)/1 var(--font); }
.acct-id { flex: 1 1 10em; min-width: 0; display: grid; gap: 3px; }
.acct-id b { font-weight: 650; overflow-wrap: anywhere; }
.sync-state { display: flex; align-items: center; gap: 6px; font-size: var(--t-foot); color: var(--label-2); }
.sync-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--label-3); }
.sync-state.busy .sync-dot { background: var(--lamp); }
.form { display: grid; gap: 12px; margin-top: 18px; }
.field { display: grid; gap: 6px; }
.field span { font-size: var(--t-foot); font-weight: 650; color: var(--label-2); }
.field input { width: 100%; min-width: 0; min-height: 50px; padding: 0 14px; border: 0; border-radius: 14px; background: var(--card); box-shadow: inset 0 0 0 1px var(--label-3); color: var(--label); font-size: var(--t-body); }
.field input:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--label); }
.field input[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--red); }
.field input[aria-invalid="true"]:focus-visible { box-shadow: inset 0 0 0 2px var(--red); outline: 2px solid var(--label); outline-offset: 2px; }
.field-hint { margin: -4px 0 0; font-size: var(--t-foot); color: var(--label-2); }
.form .btn[disabled] { opacity: .6; }
.switch { margin: 16px 0 0; text-align: center; font-size: var(--t-sub); color: var(--label-2); }
.link { min-height: 24px; padding: 0; border: 0; background: none; color: var(--label); font-weight: 650; text-decoration: underline; text-underline-offset: 2px; }

/* Sheet */
.sheet { position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-end; justify-content: center; padding-top: calc(env(safe-area-inset-top, 0px) + 10px); background: var(--scrim); animation: fade .25s ease; }
.sheet-panel { --c: transparent; --card: var(--sheet-card); position: relative; isolation: isolate; width: 100%; max-width: 600px; height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: 0 16px calc(36px + env(safe-area-inset-bottom, 0px)); border-radius: 24px 24px 0 0; background: var(--sheet-bg); scroll-padding: 66px 0 calc(84px + env(safe-area-inset-bottom, 0px)); animation: up .42s var(--ease); transition: transform .3s var(--ease); }
.sheet-panel.dragging { transition: none; }
.sheet-panel:focus { outline: none; }
.sheet-bar { position: sticky; top: 0; z-index: 3; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 58px; margin: 0 -16px; padding: 12px 10px 2px; touch-action: none; transition: background-color .2s ease, box-shadow .2s ease; }
.sheet-panel.scrolled .sheet-bar { background: color-mix(in oklab, var(--sheet-bg) 88%, transparent); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 .5px 0 var(--sep); }
.grabber { position: absolute; top: 6px; left: 50%; width: 36px; height: 5px; margin-left: -18px; border-radius: 3px; background: var(--label-3); opacity: .5; }
.bar-title { grid-column: 2; font: 700 var(--t-body)/1.3 var(--font); }
.bar-btn { grid-column: 1; justify-self: start; min-height: 44px; padding: 0 8px; border: 0; background: none; color: var(--label); font-size: var(--t-body); font-weight: 600; }
.close-btn { grid-column: 3; justify-self: end; width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; }
.close-btn span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--fill-2); color: var(--label); }
@keyframes up { from { transform: translateY(100%); } }
@keyframes fade { from { opacity: 0; } }
.sh-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: end; margin-top: 2px; }
.sh-title { margin: 0; font: 800 var(--t-title)/1.2 var(--font); text-wrap: balance; }
.sh-sub { margin: 4px 0 0; font-size: var(--t-sub); line-height: 1.35; color: var(--label-2); }
.sh-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 10px 0 0; font-size: var(--t-foot); color: var(--label-2); }
.panel { margin-top: 20px; padding: 14px 6px 16px 16px; border-radius: 20px; background: var(--card); box-shadow: var(--lift); }
.panel-label { margin: 0; font-size: var(--t-foot); font-weight: 650; color: var(--label-2); }
.panel-text { margin: 4px 12px 0 0; font-size: var(--t-sub); line-height: 1.4; color: var(--label-2); }
.panel .btn.wide { margin: 14px 10px 0 0; width: calc(100% - 10px); }
.note-line { margin: 0 10px 12px 0; padding: 10px 12px; border-radius: 12px; background: var(--fill); font-size: var(--t-sub); line-height: 1.4; color: var(--label-2); }
.next-row { display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.next-title { margin: 0; font-size: var(--t-body); line-height: 1.3; font-weight: 600; }
p.next-title { margin: 4px 10px 0 0; }
.next-meta { font-size: var(--t-foot); line-height: 1.35; color: var(--label-2); }
.progress-line { margin: 8px 10px 0 0; font-size: var(--t-foot); color: var(--label-2); font-variant-numeric: tabular-nums; }
.skip-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; margin: 12px 10px 0 0; padding: 4px 4px 4px 12px; border-radius: 12px; background: var(--fill); font-size: var(--t-sub); line-height: 1.35; }
.skip-row .btn { min-height: 40px; font-size: var(--t-sub); }
.blurb { margin: 18px 4px 0; max-width: 62ch; font-size: var(--t-sub); line-height: 1.45; letter-spacing: -.008em; color: var(--label-2); }
.eps { margin-top: 10px; }
.row.ep { gap: 8px; padding-left: 8px; }
.row.ep.done .row-title { color: var(--label-2); }
.row.ep.pick:active, .row.ep.pick:hover { background: var(--lamp-soft); }
.end-list { margin-top: 24px; }
.ask { margin-top: 22px; }
.ask-title { margin: 0; font: 700 var(--t-title3)/1.25 var(--font); text-wrap: balance; }
.ask-sub { margin: 4px 0 12px; font-size: var(--t-sub); color: var(--label-2); }
.center { display: flex; justify-content: center; margin-top: 8px; }
.sheet-h { margin: 2px 0 0; font: 800 var(--t-title)/1.2 var(--font); text-wrap: balance; }
.lede { margin: 6px 0 0; font-size: var(--t-sub); line-height: 1.4; letter-spacing: -.008em; color: var(--label-2); }
.tick-mark { flex: none; color: var(--label); visibility: hidden; }
label.row:has(input:checked) .tick-mark { visibility: visible; }
label.row:has(input:focus-visible) { outline: 2px solid var(--label); outline-offset: -3px; }
.okmark { flex: none; color: var(--label-2); }
.foot { position: sticky; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); margin-top: 24px; box-shadow: 0 8px 24px oklch(15% .02 330 / .18); }

/* Confirmation dialog: rises from the bottom, within thumb reach */
.modal-bg { position: fixed; inset: 0; z-index: 70; display: flex; align-items: flex-end; justify-content: center; padding: 12px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--scrim); animation: fade .2s ease; }
.confirm { width: 100%; max-width: 420px; max-height: 100%; overflow: auto; padding: 22px 16px 14px; border-radius: 26px; background: var(--card); box-shadow: 0 20px 50px oklch(10% .02 330 / .3); animation: up .38s var(--ease); }
.confirm h3 { margin: 0 4px; font: 700 var(--t-title3)/1.25 var(--font); text-wrap: balance; }
.confirm p { margin: 8px 4px 0; font-size: var(--t-sub); line-height: 1.45; letter-spacing: -.008em; color: var(--label-2); }
.confirm-actions { display: grid; gap: 8px; margin-top: 18px; }
.toast { position: fixed; left: 50%; bottom: calc(72px + var(--consent-h, 0px) + env(safe-area-inset-bottom, 0px)); z-index: 80; width: min(560px, calc(100% - 24px)); transform: translateX(-50%); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 8px; padding: 4px 6px 4px 16px; border-radius: 18px; background: var(--toast); color: var(--toast-text); box-shadow: 0 12px 30px oklch(10% .02 330 / .28); font-size: var(--t-sub); line-height: 1.35; animation: toastin .3s var(--ease); }
.toast:empty { display: none; }
.modal-open .toast { z-index: 60; } /* under the dialog's scrim, so it never covers a dialog's buttons */
.toast :focus-visible { outline-color: var(--toast-text); }
.toast .toast-x { min-width: 44px; padding: 0; display: grid; place-items: center; color: var(--toast-text); opacity: .7; }
.locked .toast { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
.toast-msg { flex: 1 1 200px; min-width: 0; padding: 9px 0; }
.toast .ep-code { color: inherit; }
.toast-acts { display: flex; }
.toast button { min-height: 44px; padding: 0 10px; border: 0; border-radius: 12px; background: none; color: var(--toast-act); font-size: var(--t-sub); font-weight: 650; }
@keyframes toastin { from { opacity: 0; transform: translate(-50%, 12px); } }

/* Tab bar: docked; the active tab gets a short ink bar above its icon */
.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--tabbar); box-shadow: 0 -.5px 0 var(--sep); }
.tabs-in { max-width: 600px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tab { position: relative; min-height: 56px; display: grid; justify-items: center; align-content: center; gap: 3px; padding: 6px 2px 8px; border: 0; background: none; color: var(--label-2); font-size: min(.647rem, 17px); line-height: 1.2; font-weight: 500; letter-spacing: 0; transition: color .2s ease; }
.tab[aria-current="page"] { color: var(--label); font-weight: 650; }
.tab[aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 50%; width: 24px; height: 3px; margin-left: -12px; border-radius: 0 0 2px 2px; background: var(--label); }

@media (hover: hover) {
  button.row:hover, label.row:hover, summary.row:hover, .row-main:hover, .tn-item:hover { background: var(--press); }
  .card-main:hover .card-title { text-decoration: underline; text-decoration-color: var(--label-3); text-underline-offset: 3px; }
  .check:not(.on):hover .ring { color: var(--label-3); border-color: var(--lamp); }
  .btn:hover, .follow-btn:hover { opacity: .82; }
  .tab:hover { color: var(--label); }
}
@media (min-width: 700px) { .modal-bg { align-items: center; } }
@media (min-width: 900px) {
  .sheet { align-items: center; padding: 32px; }
  .sheet-panel { height: auto; max-height: min(880px, 100%); border-radius: 24px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* Product shell: base rules the prototype got from its page wrapper, plus states that only exist with real data */
html, body { margin: 0; }
:root { padding-top: env(safe-area-inset-top, 0px); }
img { max-width: 100%; }
[hidden] { display: none !important; }
.follow-btn[aria-busy="true"] { opacity: .55; }
.following { flex: none; display: inline-flex; align-items: center; gap: 4px; color: var(--label-2); font-size: var(--t-sub); font-weight: 650; } /* in search results, a followed show says so instead of a bare chevron */
.sync-state.err, .acct-note.err { color: var(--red); }
.sync-state.err .sync-dot { background: var(--red); }

/* Focus rings inside grouped lists sit inside the row, so overflow: hidden can't clip them */
.list :is(.row, .row-main, summary):focus-visible { outline-offset: -3px; }
/* Agenda: one list, each day a label band inside it */
.list-label { margin: 0; padding: 12px 16px 6px; background: var(--fill); font-size: var(--t-foot); font-weight: 650; line-height: 1.35; color: var(--label-2); }
.agenda > .list-label::before, .agenda > .list-label + *::before { display: none; }
/* "Watched up to…": a quiet row under the panel, not a button heavier than the episode */
.place-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: calc(100% - 10px); min-height: 44px; margin: 12px 10px 0 0; padding: 0 2px; border: 0; border-top: 1px solid var(--sep); background: none; color: var(--label); font-size: var(--t-sub); font-weight: 600; text-align: left; }
/* Welcome: what the deal is, then one action */
.welcome-deal { margin: 36px auto 0; max-width: 32ch; font-size: var(--t-sub); font-weight: 600; line-height: 1.45; text-wrap: balance; }
/* Signed out: two clear ways in (find, sign in) and a quieter restore; signed in, a line saying where shows are saved */
.welcome-actions { display: grid; justify-items: center; gap: 10px; margin: 36px 0 0; }
.welcome-actions > .btn.wide + .btn.wide { margin-top: 0; }
.welcome-actions .link { min-height: 44px; font-size: var(--t-sub); }
.welcome-signed { margin: 4px auto 0; max-width: 34ch; font-size: var(--t-sub); line-height: 1.45; color: var(--label-2); overflow-wrap: anywhere; text-wrap: balance; }
.welcome-signed b { color: var(--label); font-weight: 650; }
.welcome-tv { margin: 28px 0 0; padding: 14px 16px; border-radius: 16px; background: var(--fill); text-align: left; font-size: var(--t-foot); line-height: 1.5; color: var(--label-2); }
.welcome-tv b { color: var(--label); font-weight: 650; }

/* Posters: a hairline edge so white or black artwork keeps its shape on any card */
.art::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--art-edge); pointer-events: none; }
/* The welcome demo is a picture of the rule, not a control */
.demo .check .ring { opacity: .5; }
/* iPhone Safari tab: installing is the first step */
.install-block { margin: 32px 0 0; padding: 16px; border-radius: 20px; background: var(--card); box-shadow: var(--lift); text-align: left; }
.install-block h2 { margin: 0; font: 700 var(--t-title3)/1.3 var(--font); }
.install-block ol { margin: 10px 0 0; padding-left: 22px; font-size: var(--t-body); line-height: 1.45; }
.install-block li + li { margin-top: 4px; }
.install-block svg { vertical-align: -2px; }
.install-block p { margin: 10px 0 0; font-size: var(--t-foot); line-height: 1.45; color: var(--label-2); }

/* Usage-statistics question: above the tab bar until it's answered. Both answers look the same (no nudging);
   the page and toasts make room for it through --consent-h, and sheets cover it */
.consent { position: fixed; left: 50%; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); z-index: 35; width: min(560px, calc(100% - 24px)); max-height: 60vh; overflow-y: auto; transform: translateX(-50%); padding: 14px 16px 16px; border-radius: 18px; background: var(--card); box-shadow: 0 0 0 .5px var(--sep), 0 10px 30px oklch(15% .02 330 / .16); }
.consent h2 { margin: 0; font: 700 var(--t-body)/1.3 var(--font); }
.consent p { margin: 4px 0 0; font-size: var(--t-sub); line-height: 1.4; color: var(--label-2); }
.consent-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.consent-acts .btn { flex: 1 1 8em; min-height: 44px; }
.toggle { flex: none; margin: 0; accent-color: var(--label); }
@supports not selector(::thumb) { .toggle { width: 22px; height: 22px; } } /* Safari draws its own switch; elsewhere a sized checkbox */
a.row { text-decoration: none; }
.row-icon { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: var(--fill); color: var(--label); }
.credit { margin: 30px 16px 0; text-align: center; font-size: var(--t-foot); line-height: 1.4; color: var(--label-2); }
.credit a { font-weight: 650; }
/* Pull to refresh (installed app): the brand mark slides down as you pull, and its lamp lights once letting go will refresh */
.ptr { position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 8px); z-index: 45; display: grid; place-items: center; width: 52px; height: 32px; border-radius: 999px; background: var(--card); box-shadow: 0 0 0 .5px var(--sep), 0 6px 18px oklch(15% .02 330 / .14); opacity: var(--pull, 0); transform: translate(-50%, calc((var(--pull, 0) - 1) * 48px)); transition: opacity .25s ease, transform .3s cubic-bezier(.22, 1, .36, 1); pointer-events: none; }
.ptr.pulling { transition: none; }
.ptr .mark i.on { background: var(--label-3); box-shadow: none; transition: background-color .15s ease, box-shadow .15s ease; }
.ptr:is(.ready, .busy) .mark i.on { background: var(--lamp); box-shadow: 0 0 0 4px var(--lamp-soft); }
.ptr.busy { --pull: 1; }
.ptr.busy .mark i { animation: ptr-wave 1s ease-in-out infinite; }
.ptr.busy .mark i:nth-child(2) { animation-delay: .15s; }
.ptr.busy .mark i:nth-child(3) { animation-delay: .3s; }
@keyframes ptr-wave { 50% { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .ptr, .ptr .mark i { transition: none; animation: none !important; } }