/* MovieMaz. Layout: one-column phone app. A glass header sits on top, views scroll beneath it,
   a floating glass tab bar is fixed to the bottom edge, and title details open as a bottom sheet.
   Look: deep cinematic navy with a teal glow, rounded posters, glass chips, soft depth. */
:root {
  --bg: #EDF4F7;
  --surface: #FFFFFF;
  --surface-2: #E2ECF1;
  --surface-3: #F6FAFC;
  --fg: #0C1A25;
  --muted: #4F6575;
  --line: #CCDBE3;
  --accent: #1FD1C1;
  --accent-2: #25B5EA;
  --on-accent: #042926;
  --accent-ink: #087069;
  --glow: #8FE8DE;
  --strip: #0C1A25;
  --good: #1E7F55;
  --bad: #B8312B;
  --star: #E8A317;
  --shadow-card: 0 6px 18px rgb(12 40 56 / 0.12), 0 1px 3px rgb(12 40 56 / 0.08);
  --shadow-pop: 0 14px 38px rgb(12 40 56 / 0.2);
  --glow-btn: 0 8px 22px rgb(31 209 193 / 0.38);
  --poster-l: 80%;
  --poster-fg: #0C1A25;
  --font-display: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  /* Design tokens: one scale for spacing, text size and corner radius. Use these instead of raw px values
     (a test fails on a raw value that already has a token). Colours are the variables above. */
  --ds-sp-2: 2px; --ds-sp-4: 4px; --ds-sp-6: 6px; --ds-sp-8: 8px; --ds-sp-10: 10px; --ds-sp-12: 12px; --ds-sp-14: 14px; --ds-sp-16: 16px; --ds-sp-18: 18px; --ds-sp-20: 20px; --ds-sp-24: 24px; --ds-sp-32: 32px;
  --ds-fs-11: 11px; --ds-fs-12: 12px; --ds-fs-13: 13px; --ds-fs-14: 14px; --ds-fs-15: 15px; --ds-fs-16: 16px; --ds-fs-18: 18px; --ds-fs-22: 22px; --ds-fs-24: 24px; --ds-fs-26: 26px; --ds-fs-30: 30px; --ds-fs-36: 36px;
  --ds-r-xs: 3px; --ds-r-sm: 4px; --ds-r-md: 6px; --ds-r-lg: 14px; --ds-r-xl: 20px; --ds-r-2xl: 28px; --ds-r-pill: 999px; --ds-white: #FFFFFF;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #060F1A; --surface: #0D1C2D; --surface-2: #14293D; --surface-3: #0F2033; --fg: #EEF5FA; --muted: #92A8BA;
    --line: #1D3550; --accent: #1FD1C1; --accent-2: #25B5EA; --on-accent: #042926; --accent-ink: #36E0D0; --glow: #0E7580; --strip: #14293D;
    --good: #4CC38A; --bad: #F0736B; --star: #F5B83D;
    --shadow-card: 0 8px 22px rgb(0 0 0 / 0.38), 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-pop: 0 18px 44px rgb(0 0 0 / 0.55);
    --glow-btn: 0 8px 26px rgb(31 209 193 / 0.3);
    --poster-l: 24%; --poster-fg: #EEF5FA;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #060F1A; --surface: #0D1C2D; --surface-2: #14293D; --surface-3: #0F2033; --fg: #EEF5FA; --muted: #92A8BA;
  --line: #1D3550; --accent: #1FD1C1; --accent-2: #25B5EA; --on-accent: #042926; --accent-ink: #36E0D0; --glow: #0E7580; --strip: #14293D;
  --good: #4CC38A; --bad: #F0736B; --star: #F5B83D;
  --shadow-card: 0 8px 22px rgb(0 0 0 / 0.38), 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-pop: 0 18px 44px rgb(0 0 0 / 0.55);
  --glow-btn: 0 8px 26px rgb(31 209 193 / 0.3);
  --poster-l: 24%; --poster-fg: #EEF5FA;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0; min-height: 100dvh;
  background: var(--bg);
  background: radial-gradient(130% 46% at 50% -6%, color-mix(in srgb, var(--glow) 34%, transparent), transparent 70%), var(--bg);
  background-repeat: no-repeat;
  color: var(--fg);
  font: 400 var(--ds-fs-15)/1.5 var(--font-body);
  padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px));
  -webkit-font-smoothing: antialiased;
}
h1, h2, p, ul, dl, dd { margin: 0; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { color: var(--accent-ink); -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.poster :focus-visible { outline-offset: -2px; }
main:focus-visible { outline: none; }

/* ---- icons (drawn by js/app.js and index.html) ---- */
.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ico.solid { fill: currentColor; stroke: none; }
.ico.star { color: var(--star); }

/* ---- header: glass bar, thin accent line on top ---- */
header {
  position: sticky; top: 0; z-index: 6;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}
.strip { height: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-2) 60%, transparent); }
.brand {
  display: flex; align-items: center; justify-content: space-between; gap: var(--ds-sp-10);
  min-height: 56px; padding-top: var(--ds-sp-6); padding-bottom: var(--ds-sp-6);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.brand-name { font: 800 var(--ds-fs-22)/1 var(--font-display); letter-spacing: -0.02em; white-space: nowrap; }
.brand-name span { color: var(--accent-ink); }
.brand-logo { height: 1.5em; width: auto; vertical-align: -0.34em; margin-right: var(--ds-sp-8); filter: drop-shadow(0 2px 8px color-mix(in srgb, var(--accent) 45%, transparent)); }
.brand-side { display: flex; align-items: center; gap: var(--ds-sp-8); }
.mode {
  display: inline-flex; align-items: center; gap: var(--ds-sp-6);
  font: 600 10.5px/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase;
  padding: var(--ds-sp-6) var(--ds-sp-10); border: 1px solid var(--line); border-radius: var(--ds-r-pill);
  color: var(--muted); background: color-mix(in srgb, var(--surface) 70%, transparent);
}
.mode::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.mode[data-mode="live"] { color: var(--good); border-color: currentColor; }
.hdr-search {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  color: var(--fg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-card);
}
.hdr-search .ico { width: 20px; height: 20px; }

main {
  max-width: 960px; margin: 0 auto; outline: none;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.page-title {
  font: 800 var(--ds-fs-30)/1.1 var(--font-display); letter-spacing: -0.025em;
  margin: var(--ds-sp-20) 0 var(--ds-sp-14); text-wrap: balance;
}
.page-title span { color: var(--accent-ink); }
.section {
  font: 700 var(--ds-fs-18)/1.2 var(--font-display); letter-spacing: -0.01em;
  color: var(--fg); margin: var(--ds-sp-24) 0 var(--ds-sp-12);
}
.note { color: var(--muted); margin-top: var(--ds-sp-10); max-width: 65ch; }
.legal { color: var(--muted); font-size: var(--ds-fs-12); margin-top: var(--ds-sp-8); padding-top: var(--ds-sp-16); border-top: 1px solid var(--line); }
.credits p { margin: var(--ds-sp-10) 0 0; max-width: 65ch; }
.tmdb-link { display: inline-block; line-height: 0; color: var(--muted); font: 600 var(--ds-fs-12)/1 var(--font-body); }
.tmdb-logo { height: 20px; width: auto; display: block; }
.about {
  display: flex; align-items: center; gap: var(--ds-sp-14); margin-top: var(--ds-sp-16); margin-bottom: var(--ds-sp-12);
  padding: var(--ds-sp-14) var(--ds-sp-16); background: var(--surface); border: 1px solid var(--line); border-radius: var(--ds-r-xl);
}
.about-logo { height: 2.4rem; width: auto; flex: none; }
.about .version { margin: 0; }
.version { font: 400 var(--ds-fs-12)/1.4 var(--font-mono); color: var(--muted); margin-top: var(--ds-sp-6); }

/* ---- controls ---- */
.search {
  width: 100%; min-height: 50px; padding: 0 var(--ds-sp-16); font-size: var(--ds-fs-16);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--ds-r-pill);
  box-shadow: var(--shadow-card);
}
.search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); }
.search::placeholder { color: var(--muted); }
.searchbox { position: relative; display: block; }
.searchbox .ico { position: absolute; left: var(--ds-sp-16); top: 50%; margin-top: -10px; color: var(--muted); pointer-events: none; }
.searchbox .search { padding-left: 46px; }
.chips { display: flex; flex-wrap: wrap; gap: var(--ds-sp-8); margin-top: var(--ds-sp-14); }
.chip {
  min-height: 38px; padding: 0 var(--ds-sp-16); border-radius: var(--ds-r-pill);
  background: var(--surface); border: 1px solid var(--line); font-weight: 600; font-size: var(--ds-fs-14); color: var(--muted);
}
.chip[aria-pressed="true"] {
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--on-accent);
  border-color: transparent; box-shadow: var(--glow-btn);
}
.btn {
  min-height: 46px; padding: 0 var(--ds-sp-18); border-radius: var(--ds-r-pill); font-weight: 600;
  background: var(--surface); border: 1px solid var(--line); text-align: center;
}
.btn.primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--on-accent);
  border-color: transparent; box-shadow: var(--glow-btn); font-weight: 700;
}
.btn.danger { color: var(--bad); }
.btn.small { min-height: 38px; padding: 0 var(--ds-sp-14); flex: none; font-size: var(--ds-fs-14); }
.btn:disabled { opacity: 0.55; cursor: default; }
.link-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-sp-8); text-decoration: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--ds-sp-8); }
.icon-btn {
  width: 44px; height: 44px; flex: none; border-radius: 50%; font-size: var(--ds-fs-24); line-height: 1;
  background: var(--surface-2); border: 1px solid var(--line);
}
.icon-btn:disabled { opacity: 0.4; cursor: default; }

/* ---- posters and grid ---- */
.poster {
  position: relative; width: 100%; max-width: 100%; aspect-ratio: 2 / 3; overflow: hidden;
  display: flex; align-items: flex-end; padding: var(--ds-sp-10); border-radius: var(--ds-r-lg);
  background:
    linear-gradient(160deg, hsl(var(--hue, 210) 42% calc(var(--poster-l) + 8%)), hsl(calc(var(--hue, 210) + 40) 34% var(--poster-l)));
  color: var(--poster-fg);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 10%, transparent), var(--shadow-card);
}
.poster-title {
  position: relative; font: 700 var(--ds-fs-16)/1.1 var(--font-display); text-wrap: balance;
  overflow-wrap: anywhere;
}
.poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.poster::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(180deg, transparent 55%, rgb(0 0 0 / 0.28));
}
.grid {
  list-style: none; padding: 0; display: grid; gap: var(--ds-sp-24) var(--ds-sp-14);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 560px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 820px) { .grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.card {
  position: relative; display: flex; flex-direction: column; gap: var(--ds-sp-4); width: 100%; min-width: 0;
  padding: 0; border: 0; background: none; text-align: left;
}
.card-title { font-weight: 600; line-height: 1.25; margin-top: var(--ds-sp-6); overflow-wrap: anywhere; }
.card-meta, .row-meta, .tags, .meta { font: 400 var(--ds-fs-12)/1.4 var(--font-body); color: var(--muted); }
.card-meta .ico { width: 12px; height: 12px; vertical-align: -1px; margin-right: var(--ds-sp-2); }
.badge {
  position: absolute; z-index: 2; top: 8px; left: 8px; padding: var(--ds-sp-4) var(--ds-sp-8); border-radius: var(--ds-r-pill);
  font: 700 var(--ds-fs-11)/1.2 var(--font-body); letter-spacing: 0.02em;
  background: rgb(6 15 26 / 0.72); color: var(--ds-white);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.badge[data-s="watched"] { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--on-accent); }
.skeleton { background: var(--surface-2); border-radius: var(--ds-r-lg); box-shadow: none; }
.skeleton::after { display: none; }
.line { height: 12px; margin-top: var(--ds-sp-8); border-radius: var(--ds-r-pill); }
.line.short { width: 60%; }
@media (prefers-reduced-motion: no-preference) {
  .skeleton { animation: pulse 1.4s ease-in-out infinite; }
  @keyframes pulse { 50% { opacity: 0.5; } }
}
.error { margin-top: var(--ds-sp-16); padding: var(--ds-sp-16); display: grid; gap: var(--ds-sp-12); justify-items: start;
  background: var(--surface); border: 1px solid var(--bad); border-radius: var(--ds-r-lg); }
.empty { color: var(--muted); }

/* ---- rows (watchlist, diary): each title is a soft card ---- */
.rows { list-style: none; padding: 0; display: grid; gap: var(--ds-sp-10); }
.row {
  display: flex; align-items: center; gap: var(--ds-sp-12); padding: var(--ds-sp-10) var(--ds-sp-12) var(--ds-sp-10) var(--ds-sp-10);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--ds-r-xl); box-shadow: var(--shadow-card);
}
.row-main {
  display: flex; align-items: center; gap: var(--ds-sp-12); flex: 1; min-width: 0; padding: 0;
  background: none; border: 0; text-align: left;
}
.row .poster { width: 56px; flex: none; padding: var(--ds-sp-4); border-radius: var(--ds-r-lg); }
.row .poster-title { font-size: 9px; line-height: 1; overflow-wrap: break-word; }
.row-text { display: grid; gap: var(--ds-sp-2); min-width: 0; }
.row-title { font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.row-side { display: grid; justify-items: end; gap: var(--ds-sp-6); flex: none; }
.rating-chip {
  display: inline-flex; align-items: center; gap: var(--ds-sp-4); font: 700 var(--ds-fs-14)/1 var(--font-body);
  padding: var(--ds-sp-6) var(--ds-sp-10); border-radius: var(--ds-r-pill); background: var(--surface-2);
}
.rating-chip .ico { width: 13px; height: 13px; }
.row-date { font: 500 var(--ds-fs-11)/1 var(--font-body); color: var(--muted); }
.stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ds-sp-10);
}
.stats > div {
  padding: var(--ds-sp-14) var(--ds-sp-12); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--ds-r-xl); box-shadow: var(--shadow-card);
}
.stats dt { font: 500 var(--ds-fs-12)/1.2 var(--font-body); color: var(--muted); }
.stats dd {
  font: 800 var(--ds-fs-30)/1.1 var(--font-display); font-variant-numeric: tabular-nums; margin-top: var(--ds-sp-4);
  color: var(--accent-ink);
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .stats dd, .year-num {
    background: linear-gradient(135deg, var(--accent-ink), var(--accent-2)); -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
}
.empty-box {
  margin-top: var(--ds-sp-16); padding: var(--ds-sp-32) var(--ds-sp-20); display: grid; gap: var(--ds-sp-6); justify-items: center; text-align: center;
  background: var(--surface); border: 1px dashed var(--line); border-radius: var(--ds-r-2xl);
}
.empty-icon {
  display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: var(--ds-sp-8); border-radius: var(--ds-r-xl);
  color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 16%, transparent);
}
.empty-icon .ico { width: 30px; height: 30px; }
.empty-box h2 { font: 800 var(--ds-fs-22)/1.15 var(--font-display); letter-spacing: -0.01em; }
.empty-box .btn { margin-top: var(--ds-sp-14); }
.empty-box .note { margin-top: var(--ds-sp-4); }

/* ---- More ---- */
.panel {
  display: grid; gap: var(--ds-sp-10); padding: var(--ds-sp-4) var(--ds-sp-16) var(--ds-sp-16); justify-items: stretch;
  margin-top: var(--ds-sp-12); background: var(--surface); border: 1px solid var(--line); border-radius: var(--ds-r-xl); box-shadow: var(--shadow-card);
}
.panel > .btn { justify-self: start; }
.panel .section { margin: var(--ds-sp-14) 0 var(--ds-sp-2); }
.panel .note { margin-top: 0; }
.mono-box {
  width: 100%; min-height: 130px; padding: var(--ds-sp-12); resize: vertical;
  font: 400 var(--ds-fs-12)/1.4 var(--font-mono); background: var(--surface-3);
  border: 1px solid var(--line); border-radius: var(--ds-r-lg);
}

/* ---- tab bar: a floating glass pill; the current tab gets a glowing capsule and a filled icon ---- */
.tabs {
  position: fixed; z-index: 5; left: 50%; transform: translateX(-50%);
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  width: min(520px, calc(100% - 24px));
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--ds-sp-2); padding: var(--ds-sp-6);
  background: var(--surface);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(1.7); backdrop-filter: blur(22px) saturate(1.7);
  border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent); border-radius: var(--ds-r-2xl);
  box-shadow: var(--shadow-pop);
}
.tabs a {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--ds-sp-2);
  min-height: 58px; padding: var(--ds-sp-10) var(--ds-sp-2) var(--ds-sp-6); border-radius: 22px;
  color: var(--muted); text-decoration: none; font: 600 var(--ds-fs-11)/1.2 var(--font-body);
  -webkit-tap-highlight-color: transparent;
}
.tabs a::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 26%, transparent), color-mix(in srgb, var(--accent-2) 10%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 38%, transparent);
  opacity: 0; transform: scale(0.8);
}
.tabs svg { position: relative; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tabs .dots { fill: currentColor; stroke: none; }
.tabs a[aria-current="page"] { color: var(--fg); }
.tabs a[aria-current="page"]::before { opacity: 1; transform: none; }
.tabs a[aria-current="page"] svg { color: var(--accent-ink); fill: color-mix(in srgb, currentColor 26%, transparent); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 60%, transparent)); }
.tabs a:focus-visible { outline-offset: -3px; }
@media (prefers-reduced-motion: no-preference) {
  .tabs a { transition: color 0.15s; }
  .tabs a::before { transition: opacity 0.2s, transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .tabs svg { transition: transform 0.15s; }
  .tabs a:active svg { transform: scale(0.88); }
}

/* ---- detail sheet ---- */
dialog {
  width: 100%; max-width: 640px; max-height: 92dvh; margin: auto auto 0; padding: 0; border: 0;
  border-radius: var(--ds-r-2xl) var(--ds-r-2xl) 0 0; background: var(--surface); color: var(--fg); overflow: auto;
  box-shadow: var(--shadow-pop);
}
dialog::backdrop { background: rgb(2 8 14 / 0.62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
body:has(dialog[open]) { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  dialog[open] { animation: sheet-up 0.32s cubic-bezier(0.2, 0.8, 0.2, 1); }
  dialog[open]::backdrop { animation: fade-in 0.25s ease-out; }
  @keyframes sheet-up { from { transform: translateY(40px); opacity: 0; } }
  @keyframes fade-in { from { opacity: 0; } }
}
.sheet {
  position: relative; display: grid; gap: var(--ds-sp-16); padding-top: var(--ds-sp-20);
  padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  padding-left: max(18px, env(safe-area-inset-left, 0px));
  padding-right: max(18px, env(safe-area-inset-right, 0px));
  isolation: isolate; overflow: hidden;
}
.sheet-bg {
  position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: 260px; overflow: hidden;
  background: linear-gradient(160deg, hsl(var(--hue, 210) 55% 30%), hsl(calc(var(--hue, 210) + 40) 45% 14%));
}
.sheet-bg img { position: absolute; inset: -30px; width: calc(100% + 60px); height: calc(100% + 60px); object-fit: cover; filter: blur(26px) saturate(1.3); opacity: 0.55; }
.sheet-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 20%, var(--surface) 98%); }
.sheet::before {
  content: ''; position: absolute; z-index: 1; top: 8px; left: 50%; width: 40px; height: 4px; margin-left: -20px;
  border-radius: var(--ds-r-pill); background: color-mix(in srgb, var(--fg) 30%, transparent);
}
.sheet-head { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; gap: var(--ds-sp-16); align-items: start; margin-top: var(--ds-sp-8); }
.sheet-poster .poster { width: 104px; border-radius: var(--ds-r-lg); box-shadow: var(--shadow-pop); }
.sheet-title { font: 800 var(--ds-fs-26)/1.1 var(--font-display); letter-spacing: -0.02em; margin-bottom: var(--ds-sp-8); overflow-wrap: anywhere; }
.sheet-info .meta { color: var(--fg); opacity: 0.85; }
.tags { margin-top: var(--ds-sp-2); }
.overview { max-width: 65ch; color: color-mix(in srgb, var(--fg) 88%, transparent); }
.segs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ds-sp-10); }
.seg {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-sp-8);
  min-height: 52px; border-radius: var(--ds-r-pill); font-weight: 700; font-size: var(--ds-fs-15);
  background: var(--surface-2); border: 1px solid var(--line);
}
.seg[aria-pressed="true"] {
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--on-accent);
  border-color: transparent; box-shadow: var(--glow-btn);
}
.watched { display: grid; gap: var(--ds-sp-16); }
.field { display: grid; gap: var(--ds-sp-8); }
.label { font: 600 var(--ds-fs-13)/1.2 var(--font-body); color: var(--muted); letter-spacing: 0.02em; }
.stepper { display: flex; align-items: center; gap: var(--ds-sp-14); }
.stepper output { min-width: 7ch; text-align: center; font: 500 var(--ds-fs-16)/1 var(--font-body); font-variant-numeric: tabular-nums; }
.rating { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--ds-sp-8); }
.rate {
  min-height: 46px; border-radius: var(--ds-r-lg); font: 600 var(--ds-fs-16)/1 var(--font-body);
  background: var(--surface-2); border: 1px solid var(--line);
}
.rate[aria-pressed="true"] {
  background: linear-gradient(135deg, var(--star), var(--accent)); color: var(--on-accent); border-color: transparent; box-shadow: var(--glow-btn);
}
.hint { color: var(--muted); }

/* ---- toast ---- */
#toast {
  margin: 0; padding: var(--ds-sp-12) var(--ds-sp-20); border: 0; border-radius: var(--ds-r-pill); overflow: visible;
  inset: auto auto calc(108px + env(safe-area-inset-bottom, 0px)) 50%; transform: translateX(-50%);
  max-width: calc(100vw - 32px); width: max-content;
  background: var(--fg); color: var(--bg); font-weight: 600; box-shadow: var(--shadow-pop);
}
#toast:not(:popover-open) { display: none; }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}

/* ---- where to watch and episodes ---- */
select.search { appearance: auto; }
.where { gap: var(--ds-sp-10); }
.prov-group { display: grid; gap: var(--ds-sp-6); }
.prov-label { font: 500 var(--ds-fs-12)/1.2 var(--font-body); color: var(--muted); }
.providers { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--ds-sp-8); }
.providers li {
  display: inline-flex; align-items: center; gap: var(--ds-sp-8); min-height: 38px; padding: var(--ds-sp-4) var(--ds-sp-14) var(--ds-sp-4) var(--ds-sp-6);
  border-radius: var(--ds-r-pill); background: var(--surface-2); border: 1px solid var(--line); font-weight: 500; font-size: var(--ds-fs-14);
}
.providers img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.providers li:not(:has(img)) { padding-left: var(--ds-sp-14); }
.prov-link { font-weight: 600; }
.ep-summary { font: 600 var(--ds-fs-16)/1.2 var(--font-body); }
.episodes { gap: var(--ds-sp-10); }
details.season { border: 1px solid var(--line); border-radius: var(--ds-r-lg); background: var(--surface-2); }
details.season summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--ds-sp-12); min-height: 50px; padding: 0 var(--ds-sp-16);
  cursor: pointer; font-weight: 600; list-style: none;
}
details.season summary::-webkit-details-marker { display: none; }
details.season summary::after { content: '+'; font: 500 var(--ds-fs-18)/1 var(--font-body); color: var(--muted); }
details.season[open] summary::after { content: '−'; }
.season-count { margin-left: auto; font: 500 var(--ds-fs-13)/1 var(--font-body); color: var(--muted); }
.season-body { display: grid; gap: var(--ds-sp-10); padding: 0 var(--ds-sp-10) var(--ds-sp-12); }
.season-body .btn { justify-self: start; }
.eps { list-style: none; padding: 0; display: grid; gap: var(--ds-sp-6); }
.ep {
  display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--ds-sp-12); align-items: center; width: 100%;
  min-height: 54px; padding: var(--ds-sp-6) var(--ds-sp-12); text-align: left; border-radius: var(--ds-r-lg);
  background: var(--surface); border: 1px solid var(--line);
}
.ep-check {
  width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%;
  border: 1.5px solid var(--muted); font-weight: 700; line-height: 1;
}
.ep[aria-pressed="true"] .ep-check { background: var(--good); border-color: var(--good); color: var(--surface); }
.ep:disabled { opacity: 0.55; cursor: default; }
.ep-text { display: grid; gap: var(--ds-sp-2); min-width: 0; }
.ep-name { font-weight: 500; overflow-wrap: anywhere; }
.ep-meta { font: 400 var(--ds-fs-12)/1.2 var(--font-body); color: var(--muted); }

/* ---- home ---- */
.lead { color: var(--muted); margin-top: -6px; }
.search-pill {
  display: flex; align-items: center; gap: var(--ds-sp-12); min-height: 50px; margin-top: var(--ds-sp-16); padding: 0 var(--ds-sp-16);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--ds-r-pill); box-shadow: var(--shadow-card);
  color: var(--muted); text-decoration: none; font-size: var(--ds-fs-15);
}
.year-card {
  display: flex; align-items: center; gap: var(--ds-sp-14); margin-top: var(--ds-sp-14); padding: var(--ds-sp-14) var(--ds-sp-16); min-height: 72px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, var(--surface)), var(--surface) 70%);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line)); border-radius: var(--ds-r-xl);
  box-shadow: var(--shadow-card); color: var(--muted); text-decoration: none;
}
.year-icon {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: var(--ds-r-lg);
  color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 18%, transparent);
}
.year-icon .ico { width: 24px; height: 24px; }
.year-num { font: 800 var(--ds-fs-36)/1 var(--font-display); color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.year-label { flex: 1; min-width: 0; line-height: 1.3; }
.year-go { color: var(--muted); }
.hero {
  position: relative; display: block; width: 100%; margin-top: var(--ds-sp-16); padding: 0; text-align: left; overflow: hidden; isolation: isolate;
  border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent); border-radius: var(--ds-r-2xl);
  background: linear-gradient(150deg, hsl(var(--hue, 210) 55% 26%), hsl(calc(var(--hue, 210) + 50) 50% 12%));
  color: var(--ds-white); box-shadow: var(--shadow-pop);
}
.hero-bg { position: absolute; z-index: -1; inset: -24px; width: calc(100% + 48px); height: calc(100% + 48px); object-fit: cover; filter: blur(22px) saturate(1.35); opacity: 0.55; }
.hero::before {
  content: ''; position: absolute; z-index: -1; inset: 0;
  background: linear-gradient(100deg, rgb(4 12 20 / 0.82), rgb(4 12 20 / 0.35));
}
.hero-body { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--ds-sp-16); align-items: center; padding: var(--ds-sp-16); }
.hero .poster { box-shadow: 0 10px 26px rgb(0 0 0 / 0.5); }
.hero-info { display: grid; gap: var(--ds-sp-6); min-width: 0; }
.hero-kicker { font: 700 var(--ds-fs-11)/1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.hero-title { font: 800 var(--ds-fs-22)/1.1 var(--font-display); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.hero-meta { font: 500 var(--ds-fs-13)/1.3 var(--font-body); color: rgb(255 255 255 / 0.78); }
.hero-progress { display: block; height: 5px; border-radius: var(--ds-r-pill); background: rgb(255 255 255 / 0.22); overflow: hidden; }
.hero-progress .bar-fill { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.hero-cta {
  display: inline-flex; align-items: center; gap: var(--ds-sp-8); justify-self: start; margin-top: var(--ds-sp-4);
  min-height: 42px; padding: 0 var(--ds-sp-18) 0 var(--ds-sp-14); border-radius: var(--ds-r-pill); font-weight: 700; font-size: var(--ds-fs-14);
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--on-accent); box-shadow: var(--glow-btn);
}
.hero-cta .ico { width: 16px; height: 16px; }
.shelf { margin-top: var(--ds-sp-24); }
.shelf-head { display: flex; justify-content: space-between; align-items: center; }
.shelf-head .section { margin: 0; }
.see-all {
  display: inline-flex; align-items: center; gap: var(--ds-sp-2); min-height: 44px; font: 600 var(--ds-fs-14)/1 var(--font-body); text-decoration: none;
}
.see-all .ico { width: 16px; height: 16px; }
.rail {
  list-style: none; display: flex; gap: var(--ds-sp-14); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
  margin: 0 -16px; padding: var(--ds-sp-2) var(--ds-sp-16) var(--ds-sp-12);
}
.rail::-webkit-scrollbar { display: none; }
.rail li { flex: 0 0 136px; min-width: 0; scroll-snap-align: start; }
.rail .poster { padding-bottom: var(--ds-sp-20); }
.play {
  position: absolute; z-index: 2; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; display: grid; place-items: center;
  border-radius: 50%; color: var(--ds-white); background: rgb(6 15 26 / 0.55); border: 1.5px solid rgb(255 255 255 / 0.7);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.play .ico { width: 20px; height: 20px; margin-left: var(--ds-sp-2); }
.pill {
  position: absolute; z-index: 2; top: 8px; right: 8px; display: inline-flex; align-items: center; gap: var(--ds-sp-2); padding: var(--ds-sp-4) var(--ds-sp-8); border-radius: var(--ds-r-pill);
  background: rgb(6 15 26 / 0.72); color: var(--ds-white); font: 700 var(--ds-fs-12)/1.2 var(--font-body);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.pill .ico { width: 12px; height: 12px; }
.bar { position: absolute; z-index: 2; left: 10px; right: 10px; bottom: 10px; height: 4px; border-radius: var(--ds-r-pill); background: rgb(255 255 255 / 0.32); }
.bar-fill { display: block; height: 100%; border-radius: var(--ds-r-pill); background: linear-gradient(90deg, var(--accent), var(--accent-2)); }

/* ---- error screen, update bar, what's new ---- */
#boundary {
  position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center; overflow: auto;
  padding: var(--ds-sp-16); background: var(--bg);
}
.boundary-card { display: grid; gap: var(--ds-sp-14); max-width: 360px; width: 100%; text-align: center; }
.boundary-card .btn-row { justify-content: center; }
#update-bar {
  position: fixed; z-index: 50; margin: 0 auto; max-width: 560px;
  inset: auto 16px calc(108px + env(safe-area-inset-bottom, 0px)) 16px;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-sp-8) var(--ds-sp-10); padding: var(--ds-sp-12) var(--ds-sp-16);
  background: var(--fg); color: var(--bg); border-radius: var(--ds-r-xl); font-weight: 500; box-shadow: var(--shadow-pop);
}
#update-bar span { flex: 1 1 14ch; }
.news-row { margin-top: var(--ds-sp-10); }
.wn-version { font: 700 var(--ds-fs-16)/1.2 var(--font-display); margin-top: var(--ds-sp-4); }
.wn-label { font: 600 var(--ds-fs-13)/1.2 var(--font-body); color: var(--muted); margin-top: var(--ds-sp-6); }
.wn-list { margin: var(--ds-sp-4) 0 0; padding-left: var(--ds-sp-20); display: grid; gap: var(--ds-sp-6); }

/* ---- a screen fades in when you open it ---- */
@media (prefers-reduced-motion: no-preference) {
  #view > section { animation: view-in 0.34s cubic-bezier(0.2, 0.8, 0.2, 1); }
  @keyframes view-in { from { opacity: 0; transform: translateY(10px); } }
  .card, .hero, .row, .year-card, .search-pill { transition: transform 0.15s, box-shadow 0.15s; }
  .card:active, .hero:active, .year-card:active, .search-pill:active { transform: scale(0.98); }
}

.panel[hidden], .btn[hidden] { display: none; }

/* ---- more details: tagline, facts, cast, keywords ---- */
.tagline { margin-top: var(--ds-sp-4); font-style: italic; color: var(--muted); font-size: var(--ds-fs-13); }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-sp-12) var(--ds-sp-16); padding: var(--ds-sp-14); border-radius: var(--ds-r-lg); background: var(--surface-2); border: 1px solid var(--line); }
.fact { min-width: 0; }
.fact dt { font: 500 var(--ds-fs-12)/1.2 var(--font-body); color: var(--muted); }
.fact dd { margin-top: var(--ds-sp-2); font: 600 var(--ds-fs-14)/1.3 var(--font-body); overflow-wrap: anywhere; }
.cast { list-style: none; padding: 0; display: flex; gap: var(--ds-sp-14); overflow-x: auto; scrollbar-width: none; margin: 0 -18px; padding: var(--ds-sp-2) var(--ds-sp-18) var(--ds-sp-8); }
.cast::-webkit-scrollbar { display: none; }
.cast li { flex: 0 0 84px; min-width: 0; display: grid; gap: var(--ds-sp-2); justify-items: center; text-align: center; }
.cast-photo {
  position: relative; width: 72px; height: 72px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; margin-bottom: var(--ds-sp-4);
  font: 700 var(--ds-fs-22)/1 var(--font-display); color: var(--poster-fg);
  background: linear-gradient(160deg, hsl(var(--hue, 210) 42% calc(var(--poster-l) + 8%)), hsl(calc(var(--hue, 210) + 40) 34% var(--poster-l)));
}
.cast-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cast-name { font: 600 var(--ds-fs-12)/1.25 var(--font-body); overflow-wrap: anywhere; }
.cast-role { font: 400 var(--ds-fs-11)/1.25 var(--font-body); color: var(--muted); overflow-wrap: anywhere; }
.keywords { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--ds-sp-6); }
.keywords li { padding: var(--ds-sp-4) var(--ds-sp-10); border-radius: var(--ds-r-pill); background: var(--surface-2); border: 1px solid var(--line); font-size: var(--ds-fs-12); color: var(--muted); }
.sheet .rail { margin: 0 -18px; padding-left: var(--ds-sp-18); padding-right: var(--ds-sp-18); }