/*
 * Screenalong: a movie-night app. Dark "theatre" palette, amber marquee accent.
 * Phone first; the desktop layout kicks in at 720px.
 *
 * Colors, type sizes, spacing and radii come from these tokens and nowhere
 * else. What each one is for is in docs/style-guide.md.
 */

:root {
  --bg: #120f0d;
  --bg-glow: #2b2019;
  --surface-1: #1c1815;
  --surface-2: #26211d;
  --surface-3: #312a25;
  --line: #3a322c;
  --line-soft: #2a241f;
  --text: #f4eee7;
  --text-2: #cfc5ba;
  --text-3: #9d9186;
  --marquee: #f2b544;
  --marquee-2: #ffd27a;
  --marquee-ink: #1a1305;
  --danger: #ef5b45;
  --success: #7bd88f;

  --text-display: 2rem;
  --text-title: 1.75rem;
  --text-headline: 1.0625rem;
  --text-body: 1rem;
  --text-callout: .875rem;
  --text-label: .75rem;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --radius-xs: 6px;
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-pill: 999px;

  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Fraunces", Georgia, serif;
  --shadow: 0 24px 48px -24px rgba(0, 0, 0, .8);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--text-body);
  background: radial-gradient(900px 500px at 50% -200px, var(--bg-glow) 0%, var(--bg) 65%) var(--bg);
  background-attachment: fixed;
  color: var(--text);
  min-height: 100dvh;
  line-height: 1.45;
  -webkit-tap-highlight-color: transparent;
}
a { color: var(--marquee); text-decoration: none; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; letter-spacing: -0.015em; margin: 0; line-height: 1.1; }
h1 { font-size: var(--text-display); }
h2 { font-size: var(--text-headline); }
h3 { font-size: var(--text-headline); }
p { margin: 0 0 .75rem; }
code { background: var(--surface-2); padding: .1em .35em; border-radius: var(--radius-xs); font-size: .9em; }
.muted { color: var(--text-3); }
.small { font-size: var(--text-callout); }
.eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: var(--text-label); color: var(--marquee); font-weight: 600; margin: 0 0 .3rem; }
[hidden] { display: none !important; }

/* ---------- App chrome ---------- */

/* Room under the list for the list bar and a toast above it. */
.container { max-width: 760px; margin: 0 auto; padding: 1rem 16px calc(150px + env(safe-area-inset-bottom)); }
@media (min-width: 1000px) { .container { padding-top: 1.5rem; } }

.appbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: calc(.55rem + env(safe-area-inset-top)) 16px .55rem;
  background: rgba(18, 15, 13, .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.brand-mark { width: 1.6em; height: 1.6em; vertical-align: middle; }
.appbar-me { display: inline-flex; align-items: center; border-radius: var(--radius-pill); padding: .15rem; }
.appbar-me:hover, .appbar-me.active { background: var(--surface-2); }
/* On pages without their own app bar, the list is its title: its first few
   people, its name, and how many are in it. */
.group-title { display: inline-flex; align-items: center; gap: .6rem; min-width: 0; min-height: 44px; padding: .2rem .6rem .2rem .2rem; margin-left: -.2rem; border-radius: var(--radius-sm); color: var(--text); }
.group-title:hover { background: var(--surface-2); }
.group-title-faces { display: inline-flex; flex: none; }
.group-title-faces .avatar { width: 26px; height: 26px; font-size: .75rem; box-shadow: 0 0 0 2px var(--bg); }
.group-title-faces .avatar + .avatar { margin-left: -8px; }
.group-title-text { display: grid; min-width: 0; line-height: 1.15; }
.group-title-name { display: flex; align-items: center; gap: .3rem; min-width: 0; font-family: var(--display); font-weight: 800; font-size: var(--text-headline); }
.group-title-name > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.group-title-name .chevron { color: var(--text-3); font-family: var(--font); font-size: .72rem; }
.group-title-people { font-size: var(--text-label); color: var(--text-3); }
@media (min-width: 1000px) { .group-title { max-width: calc(50% - 300px); } }

/* ---------- Avatars ---------- */

.avatar {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; flex: none;
  font-weight: 700; font-size: .85rem; color: var(--marquee-ink); background: hsl(var(--hue, 40) 70% 66%);
}
.avatar.tiny { width: 18px; height: 18px; font-size: .62rem; vertical-align: -3px; }
.avatar.large { width: 40px; height: 40px; font-size: 1.05rem; }

/* ---------- Buttons & inputs ---------- */

.btn {
  font: inherit; font-weight: 600; cursor: pointer; border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--surface-2); color: var(--text); padding: .6rem 1.1rem;
  min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  transition: transform .06s ease, filter .15s ease, background .15s ease;
  white-space: nowrap;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .35; cursor: default; }
.btn-primary { background: var(--marquee); color: var(--marquee-ink); border-color: transparent; }
.btn-danger { background: var(--danger); color: #fff; border-color: transparent; }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-lg { min-height: 54px; padding: .8rem 1.4rem; font-size: var(--text-headline); }
.btn-sm { min-height: 36px; padding: .35rem .85rem; font-size: var(--text-callout); }
.btn-block { width: 100%; }
.btn-icon { width: 44px; padding: 0; }
.linkish { font: inherit; background: none; border: 0; color: var(--text-3); padding: .35rem .2rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.danger-text { color: var(--danger); }
.btn-row { display: flex; flex-wrap: wrap; gap: .6rem; }
.btn-row form, .actions form { display: contents; }

.input {
  font: inherit; width: 100%; min-height: 46px; padding: .6rem .9rem; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--surface-1); color: var(--text);
}
.input:focus { outline: 2px solid var(--marquee); outline-offset: 1px; border-color: transparent; }
select.input { appearance: none; padding-right: 2rem; background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%), linear-gradient(135deg, var(--text-3) 50%, transparent 50%); background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
label { display: grid; gap: .3rem; font-size: var(--text-callout); color: var(--text-3); }
.stack { display: grid; gap: .85rem; }

/* ---------- Flash ---------- */

.flash { padding: .7rem 1rem; border-radius: var(--radius-sm); margin-bottom: 1rem; font-weight: 500; cursor: pointer; animation: slide-in .25s ease-out; transition: opacity .25s, transform .25s; }
.flash-notice { background: rgba(123, 216, 143, .1); border: 1px solid rgba(123, 216, 143, .35); }
.flash-alert { background: rgba(239, 91, 69, .12); border: 1px solid rgba(239, 91, 69, .45); }
.flash-leaving { opacity: 0; transform: translateY(-6px); }

/* ---------- Page headings ---------- */

.page-head { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin-bottom: .2rem; }
.page-sub { color: var(--text-3); font-size: var(--text-callout); margin-bottom: 1rem; }
.count { font-family: var(--font); font-size: var(--text-label); font-weight: 600; background: var(--surface-2); color: var(--text-2); border-radius: var(--radius-pill); padding: .15rem .6rem; }

/* ---------- Search bar & results ---------- */

.searchbar { position: relative; margin-bottom: .75rem; }
.searchbar svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.searchbar .input { padding-left: 44px; border-radius: var(--radius-pill); background: var(--surface-1); min-height: 50px; font-size: var(--text-body); }
.searchbar input[type=submit] { display: none; }

turbo-frame { display: block; }
.search-panel { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius-md); padding: .6rem; margin-bottom: 1rem; }
.search-panel:not(:has(*)) { display: none; }
.search-note { padding: .3rem .4rem .6rem; }
.search-foot { padding: .6rem .4rem .2rem; display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.manual-add summary { cursor: pointer; color: var(--text-3); font-size: var(--text-callout); list-style: none; }
.manual-add summary::-webkit-details-marker { display: none; }
.manual-form { display: grid; grid-template-columns: 1fr 6.5rem; gap: .5rem; margin-top: .6rem; }
.manual-form .span-2 { grid-column: 1 / -1; }

/* Suggestions on the Search tab, as poster grids. */
button.chip { font: inherit; font-size: var(--text-callout); max-width: 70vw; overflow: hidden; text-overflow: ellipsis; }
.poster-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem .6rem; }
@media (min-width: 560px) { .poster-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.grid-card { display: grid; gap: .1rem; align-content: start; min-width: 0; }
.grid-poster { position: relative; }
.grid-poster .shelf-poster { display: block; }
.grid-poster .shelf-poster img, .grid-poster .shelf-poster .poster-empty { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--radius-xs); background: var(--surface-2); }
.grid-add {
  position: absolute; right: 6px; bottom: 6px; width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; background: var(--marquee); color: var(--marquee-ink);
  font: inherit; font-weight: 800; font-size: 1.25rem; line-height: 1; box-shadow: 0 2px 10px rgba(0, 0, 0, .6);
}
.grid-add:active { transform: scale(.92); }
.grid-add:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

.person-head { display: flex; align-items: center; gap: .75rem; padding: .4rem; }
.person-photo { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.person-name { font-size: var(--text-headline); }
.other-people { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; padding: 0 .4rem .6rem; margin: 0; }
.section-label { font-family: var(--font); font-size: var(--text-label); text-transform: uppercase; letter-spacing: .12em; color: var(--text-3); margin: .9rem .4rem .4rem; }

/* ---------- Chips (quick filters) ---------- */

.chips { display: flex; gap: .45rem; overflow-x: auto; scrollbar-width: none; margin: 0 -16px .9rem; padding: 0 16px; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; display: inline-flex; align-items: center; gap: .35rem; min-height: 36px; padding: .3rem .85rem;
  border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--surface-1); color: var(--text-2);
  font-size: var(--text-callout); font-weight: 500; white-space: nowrap; cursor: pointer;
}
.chip.on { background: var(--marquee); border-color: transparent; color: var(--marquee-ink); font-weight: 600; }
.chip .count { background: var(--marquee-ink); color: var(--marquee); padding: 0 .45rem; }
.chip.on .count { background: rgba(0,0,0,.15); color: var(--marquee-ink); }

.filters-panel { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius-md); padding: .9rem; margin: -.3rem 0 1rem; }
.filter-form { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.filter-form .span-2 { grid-column: 1 / -1; }
.filter-form .check { display: flex; align-items: center; gap: .55rem; color: var(--text); min-height: 40px; }
.filter-form .check input { width: 20px; height: 20px; accent-color: var(--marquee); }
.filter-foot { display: flex; justify-content: space-between; align-items: center; }
@media (min-width: 720px) { .filter-form { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Movie rows ---------- */

.rows { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.row {
  position: relative; display: grid; grid-template-columns: 58px 1fr auto; gap: .8rem; align-items: start;
  background: var(--surface-1); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: .6rem .5rem .6rem .6rem;
  transition: border-color .15s, background .15s;
}
.row:hover { border-color: var(--line); background: #201b18; }
.row-poster { position: relative; }
.row-poster img, .poster-empty { width: 58px; height: 87px; object-fit: cover; border-radius: var(--radius-xs); display: block; background: var(--surface-2); }
.poster-empty { display: grid; place-items: center; font-size: 1.4rem; }
.row-body { min-width: 0; display: grid; gap: .22rem; }
.row-title { font-weight: 600; font-size: var(--text-body); line-height: 1.25; color: var(--text); }
/* The title link covers the whole row, so tapping anywhere opens details. */
.row-link { color: inherit; }
.row-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-sm); }
.row-link:focus-visible { outline: none; }
.row-link:focus-visible::after { outline: 2px solid var(--marquee); outline-offset: 2px; }
.row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; font-size: var(--text-callout); color: var(--text-3); }
.row-meta .sep { opacity: .5; }
.runtime { color: var(--text-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.row-side { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: .3rem; align-self: center; }
.row-side form { display: contents; }
.row .btn-sm { min-height: 34px; }
.shared-tag { color: var(--success); font-weight: 600; }
/* Not on any of your services: still there, still in order, just quieter. */
.row-off .row-poster, .row-off .row-title, .row-off .score, .row-off .logos { opacity: .45; }
.row-off .row-poster { filter: grayscale(.7); }
.service-off { color: var(--text-3); font-size: var(--text-label); }
.row-actions { position: relative; z-index: 2; }

.drag-handle { cursor: grab; touch-action: none; user-select: none; color: var(--text-3); width: 36px; height: 44px; display: grid; place-items: center; border-radius: var(--radius-sm); font-size: 1.25rem; }
.drag-handle:active { cursor: grabbing; background: var(--surface-2); }
.drag-ghost { opacity: .35; }
.drag-chosen { box-shadow: var(--shadow); border-color: var(--marquee); }

/* Scores and where-to-watch, compact */
.scores { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .7rem; font-size: var(--text-callout); color: var(--text-2); font-variant-numeric: tabular-nums; }
.score { display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap; }
.score b { font-weight: 700; color: var(--text); }
.score-imdb b { color: #f5c518; }
.logos { display: inline-flex; align-items: center; gap: .25rem; }
.logos img { width: 20px; height: 20px; border-radius: var(--radius-xs); display: block; }
.logos img.off { opacity: .35; filter: grayscale(1); }
.logos .more { font-size: var(--text-label); color: var(--text-3); font-weight: 600; }
.rent-only { font-size: var(--text-label); color: var(--text-3); }

.empty { text-align: center; padding: 2.5rem 1rem; color: var(--text-3); }
.empty-art { font-size: 2.6rem; margin-bottom: .4rem; }

/* ---------- Detail sheet ---------- */

/* The dialog itself stays put; only the inner frame scrolls, so the close
   button can be pinned to the corner (sticky/float in a scrolling dialog is
   unreliable in Safari). */
.sheet {
  width: 100%; max-width: 640px; margin: auto auto 0; padding: 0; overflow: hidden;
  border: 1px solid var(--line); border-bottom: 0; border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: var(--surface-1); color: var(--text);
}
.sheet-scroll { max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain; }
.sheet[open] { animation: sheet-up .28s cubic-bezier(.2, .9, .3, 1); }
.sheet::backdrop { background: rgba(0, 0, 0, .65); backdrop-filter: blur(3px); }
.sheet-close { position: absolute; top: 10px; right: 10px; z-index: 3; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(0,0,0,.55); color: var(--text); display: grid; place-items: center; cursor: pointer; }
.sheet-close:focus { outline: none; }
.sheet-close:focus-visible { outline: 2px solid var(--marquee); }
@media (min-width: 720px) {
  .sheet { margin: auto; border-radius: var(--radius-md); border-bottom: 1px solid var(--line); }
  .sheet-scroll { max-height: 86dvh; }
}
.sheet-body { padding: 0 1.1rem 1.4rem; }
.sheet-hero { position: relative; display: grid; grid-template-columns: 104px 1fr; gap: 1rem; align-items: end; padding: 1.4rem 3.2rem 1rem 1.1rem; overflow: hidden; }
.sheet-hero::before { content: ""; position: absolute; inset: 0; background-image: var(--backdrop); background-size: cover; background-position: center; filter: blur(28px) saturate(1.2); opacity: .35; transform: scale(1.3); }
.sheet-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 30%, var(--surface-1)); }
.sheet-hero > * { position: relative; z-index: 1; }
.sheet-hero img, .sheet-hero .poster-empty { width: 104px; height: 156px; border-radius: var(--radius-xs); object-fit: cover; box-shadow: var(--shadow); }
.sheet-title { font-size: var(--text-title); margin-bottom: .35rem; }
.sheet-section { padding: .9rem 0; border-top: 1px solid var(--line-soft); }
.sheet-section:first-child { border-top: 0; }
.sheet-section h3 { font-family: var(--font); font-size: var(--text-label); text-transform: uppercase; letter-spacing: .12em; color: var(--text-3); font-weight: 600; margin-bottom: .6rem; }
.tagline { font-style: italic; color: var(--text-3); margin-bottom: .5rem; }
.synopsis .tagline { font-family: var(--display); font-size: var(--text-headline); color: var(--marquee-2); }
.synopsis .overview { font-size: var(--text-body); line-height: 1.6; margin: 0; }
.facts { display: grid; gap: .35rem; font-size: var(--text-callout); }
.facts dt { color: var(--text-3); font-size: var(--text-label); }
.facts dd { margin: 0 0 .35rem; }
.actions { display: grid; gap: .5rem; }
.actions .btn { width: 100%; }

.ratings { display: flex; flex-wrap: wrap; gap: .4rem; }
.rating {
  display: inline-grid; gap: 0; padding: .4rem .7rem; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--line-soft);
  color: var(--text); min-width: 76px; text-decoration: none;
}
.rating b { font-size: var(--text-headline); font-variant-numeric: tabular-nums; }
.rating span { font-size: var(--text-label); color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; }
.rating:hover { border-color: var(--line); }

.watch { display: grid; gap: .6rem; }
.watch-group { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.watch-label { width: 100%; font-size: var(--text-label); text-transform: uppercase; letter-spacing: .1em; color: var(--text-3); font-weight: 600; }
.watch-stream .watch-label, .watch-free .watch-label { color: var(--success); }
.provider { display: inline-flex; align-items: center; gap: .45rem; padding: .25rem .6rem .25rem .25rem; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text); font-size: var(--text-callout); }
.provider img { width: 28px; height: 28px; border-radius: var(--radius-xs); display: block; }
.provider-yours { box-shadow: inset 0 0 0 1.5px var(--success); }
.provider-check { color: var(--success); font-weight: 700; }

/* ---------- Tonight ---------- */

.envelope-card { position: relative; overflow: hidden; text-align: center; padding: 2rem 1.1rem 1.5rem; background: var(--surface-1); border: 1px solid var(--line-soft); border-radius: var(--radius-md); }
.envelope-card > * { position: relative; }
.envelope-card .empty-art { font-size: 3.4rem; margin-bottom: .6rem; }
/* A soft stage spotlight falling on the envelope. */
.spotlight::before {
  content: ""; position: absolute; inset: -40% -20% 30%; pointer-events: none;
  background: radial-gradient(closest-side at 50% 60%, rgba(255, 214, 140, .2), transparent 70%);
  animation: spotlight 6s ease-in-out infinite alternate;
}
.envelope { display: inline-block; margin-bottom: 1rem; animation: float 4s ease-in-out infinite; }
.envelope-art { width: 150px; height: auto; display: block; overflow: visible; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .55)) drop-shadow(0 0 26px rgba(242, 181, 68, .25)); }
.envelope-flap { transform-box: fill-box; transform-origin: 50% 0; transition: transform .45s cubic-bezier(.3, .7, .3, 1); }
.envelope-seal { transform-box: fill-box; transform-origin: 50% 50%; transition: transform .25s ease-in, opacity .25s ease-in; }
.opening .envelope { animation: none; }
.opening .envelope-seal { transform: scale(0); opacity: 0; }
/* A 2D flip, not rotateX: Android's WebView doesn't draw 3D transforms on
   SVG, so the flap never lifted there. Open, it sits 2 units into the
   envelope, so its bottom corners tuck into the envelope's rounded top
   corners instead of resting on top of them. */
.opening .envelope-flap { transform: translateY(2px) scaleY(-1); transition-delay: .15s; }
.envelope-card h2 { margin-bottom: .4rem; }
.envelope-card .muted { max-width: 30ch; margin: 0 auto 1.2rem; }


.hero-watch { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: var(--text-callout); color: var(--text-2); }
.hero-watch .logos img { width: 28px; height: 28px; border-radius: var(--radius-xs); }
.hero-watch .muted { flex-basis: 100%; font-size: var(--text-callout); }
@media (min-width: 720px) { .hero-watch .muted { flex-basis: auto; } }

.vetoes { display: flex; flex-wrap: wrap; gap: .45rem; }
.veto-chip { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .75rem .3rem .3rem; border-radius: var(--radius-pill); background: var(--surface-2); font-size: var(--text-callout); color: var(--text-2); }
.veto-chip .avatar { width: 26px; height: 26px; font-size: .75rem; }
.veto-used { opacity: .55; }
.veto-used .veto-state { text-decoration: line-through; }

.decide { display: grid; grid-template-columns: 1fr; gap: .6rem; }
.decide:has(> :nth-child(2)) { grid-template-columns: 1.5fr 1fr; }
.decide form { display: contents; }
.decide .btn { width: 100%; padding-inline: .6rem; }
.locked-note { font-size: var(--text-callout); color: var(--marquee-2); }

.about { margin-top: 1rem; background: var(--surface-1); border: 1px solid var(--line-soft); border-radius: var(--radius-md); padding: .3rem 1.1rem 1rem; }
.tonight-foot { text-align: center; margin-top: 1rem; }

/* After a movie is watched: a dashed slot below it where the next draw will go. */
.next-card { display: grid; justify-items: center; gap: .6rem; margin-top: 1rem; padding: 1.1rem; border: 1.5px dashed var(--line); border-radius: var(--radius-md); }
.next-card p { margin: 0; }

.watched-banner { text-align: center; padding: .9rem; border-radius: var(--radius-sm); background: rgba(242,181,68,.1); border: 1px solid rgba(242,181,68,.35); color: var(--marquee-2); font-weight: 600; }

/* Fun: popcorn when you commit. */
.celebrate { position: relative; }
.popcorn { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 5; }
.popcorn i { position: absolute; bottom: 30%; font-style: normal; font-size: 1.4rem; animation: pop 1.4s ease-out forwards; opacity: 0; }

@keyframes reveal { 0% { transform: perspective(600px) rotateY(90deg) scale(.8); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes fade-up { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-6px) rotate(2deg); } }
@keyframes spotlight { from { transform: translateX(-6%); opacity: .8; } to { transform: translateX(6%); opacity: 1; } }
@keyframes announce-in { from { opacity: 0; letter-spacing: .12em; } to { opacity: 1; letter-spacing: 0; } }
@keyframes announce-out { to { opacity: 0; visibility: hidden; } }
@keyframes pop { 0% { transform: translate(0, 0) scale(.6); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(var(--dx), -220px) rotate(var(--rot)); opacity: 0; } }
@keyframes slide-in { from { transform: translateY(-6px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sheet-up { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- History & settings ---------- */

.card { background: var(--surface-1); border: 1px solid var(--line-soft); border-radius: var(--radius-md); padding: 1.1rem; margin-bottom: 1rem; }
.card h2 { margin-bottom: .8rem; }
.card h3 { font-family: var(--font); font-size: var(--text-label); text-transform: uppercase; letter-spacing: .1em; color: var(--text-3); margin: 1.2rem 0 .5rem; }
.invite { display: flex; gap: .5rem; margin-bottom: .25rem; }
.invite .input { flex: 1; min-width: 0; font-size: var(--text-callout); color: var(--text-2); }

/* ---------- Sign in / sign up ---------- */

.session-body { display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 1rem; min-height: 100dvh; }
.session-card { width: 100%; max-width: 390px; background: var(--surface-1); border: 1px solid var(--line-soft); border-radius: var(--radius-md); padding: 1.6rem 1.4rem; box-shadow: var(--shadow); }
.session-title { text-align: center; font-size: var(--text-title); margin-bottom: .4rem; }
.session-sub { text-align: center; color: var(--text-3); margin-bottom: 1.4rem; }
.session-form { display: grid; gap: .9rem; }
.code-input { font-size: 1.4rem; letter-spacing: .35em; text-align: center; font-variant-numeric: tabular-nums; }
.session-links { text-align: center; margin: 1.1rem 0 0; display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }

/* ---------- Trailer player ---------- */

.trailer-dialog { width: min(960px, calc(100vw - 16px)); max-width: none; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-1); color: var(--text); overflow: hidden; }
.trailer-dialog::backdrop { background: rgba(0,0,0,.85); backdrop-filter: blur(4px); }
.trailer-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .35rem .35rem .35rem 1rem; }
.trailer-frame { position: relative; aspect-ratio: 16 / 9; background: #000; }
.trailer-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.trailer-foot { margin: 0; padding: .6rem 1rem; }
.role { color: var(--marquee); }

/* Groups */
.group-list { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .5rem; }
.group-row { display: flex; align-items: center; gap: .4rem; background: var(--surface-1); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: .35rem .4rem .35rem .35rem; }
.group-row.current { border-color: var(--marquee); }
.group-row form { flex: 1; min-width: 0; display: flex; }
.group-pick { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr auto; gap: .2rem .5rem; text-align: left; font: inherit; color: var(--text); background: none; border: 0; padding: .45rem .5rem; border-radius: var(--radius-sm); cursor: pointer; }
.group-pick:hover { background: var(--surface-2); }
.group-row-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.group-row-members { grid-column: 1; display: inline-flex; align-items: center; gap: .2rem; }
.group-current { grid-row: 1 / span 2; grid-column: 2; align-self: center; color: var(--marquee); font-weight: 800; }
.new-group { display: grid; grid-template-columns: 1fr auto; gap: .5rem; }
.sheet-groups { padding-top: 1.4rem; }
.watched-tag { color: var(--marquee-2); }

/* ---------- Onboarding: the invite page, and naming a first list ---------- */

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.invited-name { color: var(--text); }

.avatar-stack { display: flex; justify-content: center; }
.avatar-stack .avatar { box-shadow: 0 0 0 3px var(--surface-1); }
.avatar-stack .avatar + .avatar { margin-left: -10px; }

.invite-head { text-align: center; }
.invite-head .avatar-stack { margin-bottom: .9rem; }
.invite-head .session-sub { margin-bottom: 1.2rem; }

.invite-queue { text-align: center; margin-bottom: 1.2rem; }
.poster-strip { display: flex; justify-content: center; gap: .4rem; margin-bottom: .5rem; }
.poster-strip img, .poster-strip .poster-empty { width: 58px; height: 87px; object-fit: cover; border-radius: var(--radius-xs); display: block; background: var(--surface-2); box-shadow: 0 8px 16px -8px rgba(0, 0, 0, .8); }
.poster-strip > :nth-child(odd) { transform: rotate(-3deg); }
.poster-strip > :nth-child(even) { transform: rotate(2.5deg) translateY(3px); }

.how-it-works { list-style: none; padding: 0; margin: 0 0 1.3rem; display: grid; gap: .55rem; }
.how-it-works li { display: grid; grid-template-columns: 2.2rem 1fr; gap: .6rem; align-items: center; padding: .7rem .8rem; border-radius: var(--radius-sm); background: var(--surface-2); font-size: var(--text-callout); color: var(--text-2); }
.how-it-works strong { color: var(--text); }
.how-icon { width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--surface-3); color: var(--marquee); font-size: 1.4rem; }



/* Admin: people */
.admin-users { list-style: none; padding: 0; margin: 0; }
.admin-user { scroll-margin-top: 80px; }
.admin-user-head { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.admin-user-who { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .45rem; }
.admin-user-email { flex-basis: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge { font-size: var(--text-label); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--marquee-ink); background: var(--marquee); border-radius: var(--radius-pill); padding: .1rem .5rem; }
.admin-features { border: 0; padding: .6rem 0 0; margin: .6rem 0 0; border-top: 1px solid var(--line); }
.admin-feature { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--text-callout); }
.admin-feature input { margin-top: .2rem; accent-color: var(--text); }
.admin-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: .9rem 0; }
.admin-stats div { background: var(--surface-2); border-radius: var(--radius-sm); padding: .5rem .6rem; }
.admin-stats dt { font-size: var(--text-label); text-transform: uppercase; letter-spacing: .1em; color: var(--text-3); }
.admin-stats dd { margin: 0; font-size: var(--text-headline); font-weight: 700; font-variant-numeric: tabular-nums; }
.admin-stats dd .muted { font-size: var(--text-callout); font-weight: 500; }
.admin-controls { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .75rem; }
.admin-controls form { display: contents; }
.admin-toggle { margin-left: auto; }
.stepper { display: inline-flex; align-items: center; gap: .35rem; }
.stepper form { display: contents; }
.stepper .btn-icon { width: 36px; font-size: 1.1rem; }
.stepper-value { min-width: 2ch; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.group-limit-note { margin: 0; }

/* Settings: the steps for putting Screenalong on the home screen */
.home-screen-steps { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; gap: .45rem; text-align: left; }
.home-screen-steps li { counter-increment: step; display: grid; grid-template-columns: 1.6rem 1fr; gap: .6rem; align-items: center; padding: .6rem .75rem; border-radius: var(--radius-sm); background: var(--surface-2); font-size: var(--text-callout); color: var(--text-2); }
.home-screen-steps li::before { content: counter(step); display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--marquee); color: var(--marquee-ink); font-weight: 800; font-size: .8rem; }
.home-screen-steps strong { color: var(--text); }
.key { display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; padding: 0 .3rem; vertical-align: middle; border-radius: var(--radius-xs); border: 1px solid var(--line); background: var(--surface-3); color: var(--text); font-weight: 700; line-height: 1; }
.home-screen-done { margin: 0; color: var(--success); font-weight: 600; }

/* Usage sharing: the sign-up notice, the one-time banner, the Settings switch, the privacy page. */
.usage-notice { text-align: center; margin: 1rem 0 0; }
.usage-banner { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; padding: .8rem 1rem; margin-bottom: 1rem; border-radius: var(--radius-sm); background: var(--surface-1); border: 1px solid var(--line); }
.usage-banner p { flex: 1 1 16rem; margin: 0; }
.usage-banner-actions { display: flex; gap: .5rem; }
.inline-icon { vertical-align: -2px; }
.privacy h2 { font-size: var(--text-headline); margin: 1.2rem 0 .4rem; }
.privacy p, .privacy li { color: var(--text-3); font-size: var(--text-callout); }
.privacy ul { padding-left: 1.2rem; margin: .4rem 0; }

/* ---------- Suggestions ---------- */

.shelf-poster img, .shelf-poster .poster-empty { width: 128px; height: 192px; object-fit: cover; border-radius: var(--radius-xs); display: block; background: var(--surface-2); }
.shelf-poster:focus-visible { outline: 2px solid var(--marquee); outline-offset: 2px; border-radius: var(--radius-xs); }
.shelf-name { font-weight: 600; font-size: var(--text-callout); line-height: 1.2; margin-top: .3rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.shelf-year { font-size: var(--text-label); color: var(--text-3); }

/* ---------- Color roles, headings and marks ----------
   docs/style-guide.md's. Each rule here keeps the specificity of the one it
   replaces above, so it wins only by coming later. */

.mark { flex: none; vertical-align: -.15em; }
svg.mark + b, .score svg.mark { margin-right: .1rem; }
.btn-veto { background: rgba(239, 91, 69, .14); color: #ff8a76; border-color: rgba(239, 91, 69, .35); }
/* A missing poster shows the title, sized to whatever box it's in. */
.poster-title { container-type: inline-size; padding: 8%; text-align: center; background: var(--surface-2); color: var(--text-2); }
.poster-title span { font-family: var(--display); font-weight: 800; font-size: max(9px, 17cqi); line-height: 1.1; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow-wrap: anywhere; }

/* Amber is for movie night and the main action. Links, labels, choices
   and focus go neutral. */
a { color: var(--text); }
:is(p, li, dd, label) > a:not([class]) { text-decoration: underline; text-decoration-color: var(--text-3); text-underline-offset: 3px; }
.eyebrow { color: var(--text-3); }
:is(.envelope-card, .tv-board) .eyebrow { color: var(--marquee); }
.input:focus { outline-color: var(--text-2); }
.chip.on { background: var(--text); color: var(--bg); }
.chip .count { background: var(--surface-3); color: var(--text); }
.chip.on .count { background: rgba(0, 0, 0, .12); color: var(--bg); }
.group-row.current { border-color: var(--text-3); }
.group-current { color: var(--text); display: inline-flex; }

/* Green means "you can watch this", nothing else. */
.watch-stream .watch-label, .watch-free .watch-label { color: var(--text-3); }
.shared-tag { color: var(--text-2); }
.watched-tag { color: var(--text-3); }
.provider-check { display: inline-flex; }

/* Fraunces is for list names, movie titles and the reveal; section
   headings are Inter. */
:is(.card h2, .sheet-groups .sheet-title) {
  font-family: var(--font); font-weight: 600; font-size: var(--text-headline); letter-spacing: 0; line-height: 1.3;
}
.empty-art { color: var(--text-3); }
.poster-empty:not(.poster-title) { color: var(--text-3); }

/* ---------- Messaging ----------
   docs/style-guide.md's messaging: toasts at the bottom (a popover, so they
   sit above open sheets), confirm sheets, and errors under their field. */

.toast-region[popover] {
  position: fixed; inset: auto 12px calc(16px + env(safe-area-inset-bottom)) 12px; margin: 0 auto; max-width: 520px; width: auto;
  padding: 0; border: 0; background: none; overflow: visible; color: inherit;
}
.toast {
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  border-radius: var(--radius-sm); background: var(--text); color: #1a1512; font-size: var(--text-body); font-weight: 500;
  box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .7); animation: toast-in .25s ease-out; transition: opacity .25s, transform .25s;
}
.toast-text { flex: 1; min-width: 0; }
.toast form { display: contents; }
.toast-action { font: inherit; font-weight: 600; color: #8a5a00; background: none; border: 0; padding: var(--space-1) var(--space-2); min-height: 36px; cursor: pointer; }
.toast-error { background: #3a1611; color: #ffd9d2; box-shadow: inset 0 0 0 1px rgba(239, 91, 69, .5), 0 12px 30px -8px rgba(0, 0, 0, .7); }
.toast-error > svg { flex: none; color: var(--danger); }
.toast-close { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; }
.toast-leaving { opacity: 0; transform: translateY(8px); }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } }

.confirm-sheet { max-width: 520px; padding: var(--space-5) var(--space-5) calc(var(--space-5) + env(safe-area-inset-bottom)); }
.confirm-text { display: grid; gap: var(--space-2); margin-bottom: var(--space-5); }
.confirm-title { font-family: var(--font); font-weight: 600; font-size: var(--text-headline); letter-spacing: 0; line-height: 1.3; }
.confirm-body { margin: 0; color: var(--text-2); }
.confirm-actions { display: grid; gap: var(--space-2); }

.field-error { display: flex; align-items: center; gap: var(--space-2); color: #ff8a76; font-size: var(--text-callout); }
.field-error svg { flex: none; }
.input[aria-invalid="true"], .input[aria-invalid="true"]:focus { border-color: var(--danger); outline-color: var(--danger); }

@media (prefers-reduced-motion: reduce) { .toast { animation: none; transition: none; } }

/* ---------- Movie night ----------
   The pick in one column, the main action first (docs/style-guide.md). */

/* A toast sits above the list bar, on pages that have one, unless a sheet is up. */
body:has(.list-bar) .toast-region[popover] { bottom: calc(92px + env(safe-area-inset-bottom)); }
body:has(.list-bar):has(dialog[open]) .toast-region[popover] { bottom: calc(16px + env(safe-area-inset-bottom)); }

.decide, .decide:has(> :nth-child(2)) { grid-template-columns: 1fr; }
.veto-chip { gap: var(--space-2); padding: 4px var(--space-3) 4px 4px; color: var(--text); }
.veto-chip .avatar { width: 22px; height: 22px; font-size: 11px; }
.veto-hand { color: var(--marquee); }
.veto-used { color: var(--text-3); opacity: 1; }
.veto-used .veto-state { text-decoration: none; }
.veto-used .avatar { filter: grayscale(1); opacity: .5; }
.veto-used .veto-hand { color: var(--text-3); }
.veto-used s { font-size: var(--text-label); }
.stage-label { font-family: var(--font); font-weight: 600; font-size: var(--text-label); text-transform: uppercase; letter-spacing: .1em; color: var(--text-3); margin: 0; }
.night-tv { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin: 0; }
.enjoy { text-align: center; color: var(--marquee-2); font-weight: 600; margin: 0; }
.next-card { border: 0; background: none; padding: var(--space-2) 0 0; margin-top: 0; }
.next-card .btn { background: transparent; border-color: transparent; color: var(--text-2); }
.toast-activity .avatar { width: 24px; height: 24px; font-size: 11px; }

/* Movie night as the list bar's Pick tab (nights/tonight_tab). The pick's
   poster runs full bleed under the app bar and the tab title, framed from
   about a fifth of the way down, and fades into the page; what it is and
   whose pick sit on its lower edge. */
.tonight-tab { display: block; }
.tonight-note { margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text-2); font-size: var(--text-callout); }
/* The sealed envelope floats free on the page under its spotlight, with
   nothing around it to clip the flap as it lifts. Opening, it holds its
   float where it is (no snapping level), then the whole block drifts up and
   fades before the pick fades in. */
.envelope-card.tonight-sealed { overflow: visible; background: none; border: 0; padding: var(--space-6) 0 var(--space-2); }
.tonight-sealed.spotlight::before { inset: -10% -10% 35%; }
.tonight-sealed .envelope { margin: var(--space-4) 0 var(--space-5); }
.tonight-sealed .envelope-art { width: 190px; }
.tonight-sealed.opening .envelope { animation: float 4s ease-in-out infinite; animation-play-state: paused; }
.tonight-sealed > * { transition: opacity .25s ease-in, translate .25s ease-in; }
.tonight-sealed.leaving > * { opacity: 0; translate: 0 -14px; }
.tonight-sealed.leaving::before { opacity: 0; transition: opacity .25s ease-in; }
.tonight-sealed .vetoes { justify-content: center; margin: 0 0 var(--space-4); }
.tonight-bleed {
  --lift: calc(1rem + 62px + env(safe-area-inset-top));
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between;
  min-height: clamp(440px, 64vh, 600px); margin: calc(-1 * var(--lift)) -16px var(--space-3); padding: var(--lift) 16px var(--space-2);
}
@media (min-width: 1000px) { .tonight-bleed { --lift: calc(1.5rem + 62px + env(safe-area-inset-top)); } }
.tonight-bleed-preload { display: none; }
.tonight-bleed::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--poster, none) center 18% / cover no-repeat, var(--surface-1); }
.tonight-bleed::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(18, 15, 13, .78) 0, rgba(18, 15, 13, .15) 150px, rgba(18, 15, 13, 0) 40%, rgba(18, 15, 13, .55) 70%, var(--bg) 97%); }
.tonight-bleed .tab-title { margin: 0; }
.tonight-bleed .tab-title h1 { text-shadow: 0 2px 14px rgba(0, 0, 0, .7); }
.tonight-bleed-meta { display: grid; gap: var(--space-1); }
.tonight-bleed-meta .eyebrow { color: var(--marquee); margin: 0; }
.tonight-bleed-title { font-size: 2.4rem; line-height: 1.04; margin: 0; text-shadow: 0 2px 16px rgba(0, 0, 0, .6); text-wrap: balance; }
.tonight-bleed-title a { color: var(--text); }
.tonight-bleed-facts { margin: 0; color: var(--text-2); font-size: var(--text-callout); }
.tonight-bleed-why { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin: 0; color: var(--text); font-size: var(--text-callout); }
.tonight-body { display: grid; gap: var(--space-3); }
.tonight-pick.celebrate { position: relative; }
/* The pick arrives under a title that doesn't move: the poster fades in
   behind it, and what it is fades up on its edge. */
.tonight-in .tonight-bleed::before { animation: tonight-poster .45s ease-out both; }
.tonight-in .tonight-bleed-meta, .tonight-in .tonight-body, .tonight-in .next-card { animation: fade-up .45s .12s ease-out both; }
@keyframes tonight-poster { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tonight-in .tonight-bleed::before, .tonight-in .tonight-bleed-meta, .tonight-in .tonight-body, .tonight-in .next-card { animation: none; } }

/* ---------- The list ----------
   The list's name as a large title that folds into the app bar, a ⋯ menu,
   option rows for menus and choosers, and action tiles on a movie's details
   (docs/style-guide.md). */

.appbar-list { display: grid; grid-template-columns: 44px 1fr 44px auto; gap: var(--space-1); background: transparent; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; transition: background .2s, border-color .2s; }
.appbar-list.stuck { background: rgba(18, 15, 13, .86); border-bottom-color: var(--line-soft); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.appbar-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--text); }
.appbar-icon:hover { background: var(--surface-2); }

/* The mark and the name, top left on the list on wide screens only, back to
   the top. They line up with the page's column, and the list stays centered
   between equal sides. On a phone the mark is Pick, in the list bar. */
.appbar-brand { display: none; align-items: center; gap: var(--space-2); justify-self: start; height: 44px; margin-left: calc(-1 * var(--space-2)); padding: 0 var(--space-2); border-radius: var(--radius-pill); color: var(--text); }
.appbar-brand:hover { background: var(--surface-2); }
.appbar-mark { width: 28px; height: 28px; flex: none; display: block; }
.appbar-wordmark { font-family: var(--display); font-weight: 800; font-size: var(--text-headline); letter-spacing: -.01em; white-space: nowrap; }
.appbar-list-switch { grid-column: 2; }
@media (min-width: 1000px) {
  .appbar-list { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); padding-left: calc((100% - 760px) / 2 + 16px); padding-right: calc((100% - 760px) / 2 + 16px); }
  .appbar-brand { display: inline-flex; }
}

.large-title { display: grid; gap: var(--space-1); margin: 0 0 var(--space-4); }
.large-title-sub { display: flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--text-3); font-size: var(--text-callout); }
.large-title-sub .avatar { width: 20px; height: 20px; font-size: 10px; }
/* A list bar tab's large title: the tab's name. The list it's in is always
   in the app bar, which switches lists. */
.tab-title h1 { font-size: var(--text-title); }
.appbar-list-switch { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; min-height: 44px; color: var(--text); font-weight: 600; font-size: var(--text-headline); }
/* A list's token (groups/_token): its people's faces, then its name. */
.list-token { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.list-token .avatar { width: 22px; height: 22px; font-size: 11px; }
.list-token-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet-you { margin-top: var(--space-4); }
.appbar-list-switch svg { flex: none; color: var(--text-3); }
.grouped-page > .tab-title { margin: 0; }
/* The Search tab: the box stays in reach under the app bar as results scroll. */
.search-page .searchbar { position: sticky; top: calc(66px + env(safe-area-inset-top)); z-index: 5; margin-bottom: var(--space-3); }
.search-page .searchbar::before { content: ""; position: absolute; inset: -8px -16px -8px; z-index: -1; background: var(--bg); }
.search-page-results .search-note { padding-left: 0; }
/* The Search tab's sections, led by its hero (SearchHero): one movie, its
   poster with the round +, and why it's there. */
.search-sections { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
.search-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--space-4); align-items: end; margin: 0 0 var(--space-5); padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface-1); border: 1px solid var(--line-soft); }
.search-hero::before { content: ""; position: absolute; inset: 0; background-image: var(--backdrop); background-size: cover; background-position: center 30%; filter: blur(30px) saturate(1.25); opacity: .4; transform: scale(1.3); }
.search-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(18, 15, 13, .1), var(--surface-1) 85%); }
.search-hero > * { position: relative; z-index: 1; }
.search-hero-body { display: grid; gap: var(--space-1); justify-items: start; min-width: 0; }
.search-hero-body .eyebrow { color: var(--marquee); margin: 0; }
.search-hero-title { font-size: var(--text-title); line-height: 1.1; margin: 0; white-space: normal; overflow-wrap: anywhere; text-wrap: balance; }
.search-hero-meta { margin: 0; color: var(--text-3); font-size: var(--text-callout); }
.search-hero-why { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-1) 0 var(--space-2); color: var(--text); font-size: var(--text-callout); }
.search-hero-why .avatar { width: 20px; height: 20px; font-size: 10px; }

.sheet-menu { display: grid; gap: var(--space-4); padding: var(--space-5) var(--space-5) calc(var(--space-5) + env(safe-area-inset-bottom)); }
.sheet-menu .sheet-title { font-family: var(--font); font-weight: 600; font-size: var(--text-headline); letter-spacing: 0; margin: 0 48px 0 0; }
.option-rows { display: grid; }
.option-rows form { display: contents; }
.option-row {
  display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 56px; padding: var(--space-2) var(--space-1);
  border: 0; border-bottom: 1px solid var(--line-soft); background: none; color: var(--text); font: inherit; font-weight: 500; text-align: left; cursor: pointer;
}
.option-rows > :last-child, .option-rows > form:last-child .option-row { border-bottom: 0; }
.option-row:hover { background: var(--surface-2); }
.option-icon { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: var(--surface-2); color: var(--text-2); }
.option-text { flex: 1; min-width: 0; display: grid; }
.option-text small { color: var(--text-3); font-size: var(--text-callout); font-weight: 400; }
.option-tick { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--line); }
.option-row.selected .option-tick { background: var(--text); border-color: transparent; color: var(--bg); }

/* The details sheet's action row (style guide: Movie details sheet). Tiles
   share one row, each at least as wide as its label, so a label stays on
   one line ("We watched it", not "We watched / it"). Where four don't fit,
   they go two to a row with the icon beside the label. */
.action-tiles-wrap { container-type: inline-size; width: 100%; }
.action-tiles { display: flex; flex-wrap: wrap; gap: var(--space-2); width: 100%; }
.action-tiles form { display: contents; }
.action-tile { flex: 1 1 0; min-width: max-content; display: grid; justify-items: center; gap: 6px; padding: var(--space-3) var(--space-2); border: 0; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text); font: inherit; font-size: var(--text-callout); font-weight: 500; cursor: pointer; }
.action-tile span { white-space: nowrap; }
@container (width < 400px) {
  .action-tiles:has(> :nth-child(4)) { display: grid; grid-template-columns: 1fr 1fr; }
  .action-tiles:has(> :nth-child(4)) .action-tile { min-width: 0; grid-auto-flow: column; justify-content: center; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-2); }
}
/* On the narrowest phones (320px) the icon goes back over the label, so
   "We watched it" has the tile's whole width. */
@container (width < 300px) {
  .action-tiles:has(> :nth-child(4)) .action-tile { grid-auto-flow: row; justify-items: center; gap: 6px; }
}
.action-tile:hover { background: var(--surface-3); }
.action-tile.on svg { color: var(--text); }
.sheet-remove { padding-top: 0; }
.sheet-remove .linkish { display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; padding-left: 0; }

/* ---------- Signing in and starting out ----------
   The code as six boxes over one real field (code_controller). Without
   JavaScript it's the plain field. */

.code-field { display: grid; gap: var(--space-2); font-size: var(--text-callout); color: var(--text-3); }
.code-entry { position: relative; }
.code-boxes { display: none; }
.code-ready .code-boxes { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-2); pointer-events: none; }
/* The real field sits over the boxes, see-through but still there for
   autofill, paste, screen readers and tests. */
.code-ready .code-input {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; min-height: 0; padding: 0; font-size: 16px; letter-spacing: 0;
  color: transparent; -webkit-text-fill-color: transparent; caret-color: transparent; background: transparent; border-color: transparent; box-shadow: none; outline: none;
}
.code-ready .code-input::selection { background: transparent; }
.code-ready .code-input:-webkit-autofill { -webkit-box-shadow: 0 0 0 100px transparent inset; transition: background-color 9999s; }
.code-boxes span {
  display: grid; place-items: center; aspect-ratio: 4 / 5; border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: var(--surface-1); color: var(--text); font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.code-boxes span.active { border-color: var(--text-2); box-shadow: 0 0 0 1px var(--text-2); }
.code-entry:has(.code-input[aria-invalid="true"]) .code-boxes span { border-color: var(--danger); }
.session-form .field-error, .code-field .field-error { margin-top: var(--space-1); }

/* ---------- Grouped settings ----------
   Settings and List settings as pages of grouped rows, with a back button
   in the app bar. Ticks, radios and switches save as you tap
   (docs/style-guide.md, Grouped rows). */

.appbar-page { display: grid; grid-template-columns: 44px 1fr 44px; gap: var(--space-1); padding-left: var(--space-2); padding-right: var(--space-2); }
.appbar-page-title { min-width: 0; text-align: center; font-weight: 600; font-size: var(--text-headline); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.grouped-page { display: grid; gap: var(--space-5); max-width: 560px; margin: 0 auto; }
.grouped-page > p { margin: 0; }
.settings-me { display: flex; align-items: center; gap: var(--space-3); }
.settings-me > div { display: grid; min-width: 0; }
.settings-me strong { font-size: var(--text-headline); font-weight: 600; }
.list-settings-head { display: grid; gap: var(--space-1); justify-items: start; }
.list-settings-head h1 { font-size: var(--text-title); }
.list-settings-head p { margin: 0; }

.row-group { display: grid; gap: var(--space-2); }
.row-group-label { margin: 0 var(--space-1); font-family: var(--font); font-weight: 600; font-size: var(--text-label); text-transform: uppercase; letter-spacing: .1em; color: var(--text-3); }
.row-group-note { margin: 0 var(--space-1); }
.row-box { background: var(--surface-1); border-radius: var(--radius-md); padding: 0 var(--space-3); }
.row-box .option-row { padding-inline: var(--space-1); }
.row-box .option-row:hover { background: none; }
.row-box a.option-row:hover .option-text, .row-box label.option-row:hover .option-text { color: var(--text); }
.option-row.static { cursor: default; }
.option-row.static form { display: contents; }
.option-row .avatar { flex: none; }
.option-go { flex: none; color: var(--text-3); display: grid; place-items: center; }
.option-icon.marquee { color: var(--marquee); }
.option-logo { flex: none; width: 36px; height: 36px; border-radius: 10px; object-fit: cover; }

/* A tick or a radio follows the real control, so a tap shows before the save comes back. */
.service-option:has(input:checked) .option-tick { background: var(--text); border-color: transparent; color: var(--bg); }
.service-option:not(:has(input:checked)) .option-tick svg { visibility: hidden; }
.option-radio { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line); }
.radio-option:has(input:checked) .option-radio { border: 7px solid var(--text); }
.service-option:has(input:focus-visible), .radio-option:has(input:focus-visible) { outline: 2px solid var(--text-2); outline-offset: -2px; border-radius: var(--radius-sm); }

.row-form { display: grid; gap: var(--space-2); }
.row-form-line { display: flex; gap: var(--space-2); }
.row-form-line .input { flex: 1; min-width: 0; }

/* An on/off switch on a plain checkbox. */
.switch { appearance: none; flex: none; position: relative; width: 50px; height: 30px; margin: 0; border-radius: var(--radius-pill); background: var(--surface-3); cursor: pointer; transition: background .2s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--text); transition: left .2s; }
.switch:checked { background: var(--success); }
.switch:checked::after { left: 23px; }
.switch:focus-visible { outline: 2px solid var(--text-2); outline-offset: 2px; }
.switch-option { align-items: center; }

/* ---------- Ratings ----------
   Stars are cream, never amber (movie night) or gold (IMDb), and come in
   halves (docs/style-guide.md, Ratings). A half star is the outline with
   the fill clipped to its left half. */

.stars { display: inline-flex; gap: 2px; vertical-align: middle; }
.star { position: relative; width: var(--star, 16px); height: var(--star, 16px); flex: none; }
.star svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.star .star-line { fill: none; stroke: var(--text-3); stroke-width: 1.5; stroke-linejoin: round; }
.star .star-fill { fill: var(--text); stroke: var(--text); stroke-width: 1.5; stroke-linejoin: round; visibility: hidden; }
.star.on .star-fill { visibility: visible; }
.star.half .star-fill { visibility: visible; clip-path: inset(0 50% 0 0); }
.star.on .star-line, .star.half .star-line { stroke: var(--text); }
.star-mark { display: inline-flex; width: var(--star, 16px); height: var(--star, 16px); vertical-align: -2px; }
.star-mark svg { width: 100%; height: 100%; fill: var(--text); }

/* Your rating: five stars over a real slider (stars_controller). The
   slider takes the keyboard; taps and slides land on the stars. */
.stars-form { display: block; }
.stars-field { position: relative; display: inline-flex; padding: 4px; margin-left: -4px; border-radius: var(--radius-sm); cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; }
.stars-field .stars { pointer-events: none; gap: 4px; }
.stars-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.stars-field:has(.stars-input:focus-visible) { outline: 2px solid var(--text-2); outline-offset: 2px; }

.rating-sheet { display: grid; gap: var(--space-4); padding-top: var(--space-5); padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom)); }
.rating-head { display: flex; gap: var(--space-4); align-items: end; padding-right: 44px; }
.rating-head img, .rating-head .poster-empty { width: 64px; height: 96px; border-radius: var(--radius-xs); object-fit: cover; flex: none; }
.rating-head .eyebrow { color: var(--marquee); }
.rating-title { font-family: var(--display); font-weight: 800; font-size: var(--text-title); line-height: 1.1; margin: 0; text-wrap: balance; }
.rating-panel { display: grid; gap: var(--space-3); }
.rating-note { margin: 0; font-size: var(--text-callout); color: var(--text-3); }
.rating-average { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--text-callout); color: var(--text-3); font-variant-numeric: tabular-nums; }
.rating-average b { color: var(--text); font-size: var(--text-headline); font-weight: 600; }
.rating-people { list-style: none; margin: 0; padding: 0; display: grid; }
.rating-people li { display: flex; align-items: center; gap: var(--space-3); min-height: 48px; border-bottom: 1px solid var(--line-soft); }
.rating-people li:last-child { border-bottom: 0; }
.rating-people .avatar { width: 30px; height: 30px; font-size: 13px; }
.rating-people .missed .avatar { opacity: .45; }
.rating-name { flex: 1; min-width: 0; }
.rating-state { font-size: var(--text-callout); color: var(--text-3); }
.rating-done { padding-top: var(--space-2); }
.rating-more { margin: 0; font-size: var(--text-callout); }
.rating-more a { color: var(--text-2); }

.rollcall .eyebrow { color: var(--marquee); }
.rollcall .sheet-title { margin-bottom: 0; }
.rollcall .option-row .avatar { width: 30px; height: 30px; font-size: 13px; }
.service-option:has(input:focus-visible) { outline: 2px solid var(--text-2); outline-offset: -2px; border-radius: var(--radius-sm); }
.night-unwatch { justify-self: center; display: block; margin: 0 auto; }

/* "Seen it" on other lists and in the reveal: who, never how many stars. */
.seen-line { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-callout); color: var(--text-2); }
.seen-faces { display: inline-flex; }
.seen-faces .avatar { width: 20px; height: 20px; font-size: 10px; box-shadow: 0 0 0 2px var(--bg); }
.seen-faces .avatar + .avatar { margin-left: -8px; }

/* I've seen it, on a movie's details. */
.seen-it { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); color: var(--text-2); }
.seen-it > span { display: inline-flex; align-items: center; gap: var(--space-1); }
.seen-it form { display: contents; }
.again-tag { justify-self: start; font-size: var(--text-label); color: var(--text-2); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 1px var(--space-2); }

/* Watched. */
.watched-page { display: grid; gap: var(--space-4); }
.watched-page > p { margin: 0; }
.watched-votes { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); font-size: var(--text-callout); color: var(--text-2); font-variant-numeric: tabular-nums; }
.watched-vote { display: inline-flex; align-items: center; gap: var(--space-1); }
.watched-vote.missed { color: var(--text-3); }
.watched-vote.missed .avatar { opacity: .45; }
.watched-average { display: inline-flex; align-items: center; gap: var(--space-1); font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.watched-average b { font-weight: 600; }
.watched-of { font-size: var(--text-label); color: var(--text-3); }
.watched-rows .row-side { align-items: flex-end; }
.rate-chip { display: inline-flex; align-items: center; gap: 2px; min-height: 36px; padding: 0 var(--space-2) 0 var(--space-3); border-radius: var(--radius-pill); border: 1px solid var(--line); font-size: var(--text-callout); font-weight: 500; color: var(--text); white-space: nowrap; }

/* ---------- Faster add to list ----------
   From your lists on the Search tab: a sideways shelf for each of your
   other lists, See all for one list in full, and On your lists above search
   results. Then Select movies on the list itself. */

.from-shelf { margin: 0 -1rem var(--space-5); }
.from-shelf-head { display: flex; align-items: baseline; gap: var(--space-2); padding: 0 var(--space-2) var(--space-2) 1rem; }
.from-shelf-head h3 { font-family: var(--font); font-size: var(--text-headline); font-weight: 600; letter-spacing: 0; margin: 0; flex-shrink: 0; max-width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.from-shelf-count { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--text-3); font-size: var(--text-callout); white-space: nowrap; }
.from-shelf-all { display: inline-flex; align-items: center; gap: 2px; min-height: 36px; padding: 0 var(--space-2); color: var(--text-2); font-size: var(--text-callout); font-weight: 500; white-space: nowrap; }
.from-shelf-row { list-style: none; margin: 0; padding: 0 1rem 2px; display: flex; gap: var(--space-3); overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding-inline: 1rem; overscroll-behavior-x: contain; }
.from-shelf-row::-webkit-scrollbar { display: none; }
.from-shelf-row > li { flex: none; width: 104px; scroll-snap-align: start; }
.from-see-all-tile { display: grid; place-items: center; aspect-ratio: 2 / 3; padding: var(--space-2); border: 1px dashed var(--line); border-radius: var(--radius-xs); color: var(--text-2); font-size: var(--text-callout); font-weight: 600; text-align: center; }
.from-see-all-tile:hover { background: var(--surface-2); }
.from-card-by { display: flex; align-items: center; gap: var(--space-1); min-width: 0; }
.from-card-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.from-card-rank { position: absolute; left: 6px; bottom: 10px; padding: 0 6px; border-radius: var(--radius-pill); background: rgba(0, 0, 0, .6); color: var(--text-2); font-size: var(--text-label); font-weight: 600; line-height: 18px; font-variant-numeric: tabular-nums; }
:is(.from-card, .on-list-result) .grid-add:disabled { background: var(--text); color: var(--bg); opacity: 1; }

.from-list-head { display: flex; align-items: center; gap: var(--space-1); margin: 0 0 var(--space-3) -.5rem; }
.from-list-head h3 { font-family: var(--font); font-size: var(--text-headline); font-weight: 600; letter-spacing: 0; margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.from-list-back { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--text); }
.from-list-back:hover { background: var(--surface-2); }
.from-list .chips { margin-bottom: var(--space-2); }
.from-list-note { margin: 0 0 var(--space-3); }
.from-list-more { display: block; margin-top: var(--space-4); }
.from-list-more > .poster-grid { margin-top: 0; }

.on-lists { margin-bottom: var(--space-2); }
.round-add { position: static; box-shadow: none; }

/* Select movies. The head covers the app bar and the bar covers movie night
   while it's on. */
.select-head, .select-bar, .select-tick { display: none; }
.selecting .select-head {
  display: flex; align-items: center; gap: var(--space-2); position: fixed; inset: 0 0 auto; z-index: 30;
  padding: calc(.55rem + env(safe-area-inset-top)) 16px .55rem 8px; min-height: 60px;
  background: rgba(18, 15, 13, .94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line-soft);
}
.select-stop { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--text); cursor: pointer; }
.select-title { flex: 1; font-weight: 600; font-size: var(--text-headline); font-variant-numeric: tabular-nums; }
.select-all { font: inherit; font-weight: 500; min-height: 44px; padding: 0 var(--space-2); border: 0; background: none; color: var(--text); cursor: pointer; }
.selecting .select-bar {
  display: flex; gap: var(--space-2); position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 25;
  max-width: 740px; margin: 0 auto; padding: var(--space-2); border-radius: 18px;
  background: rgba(38, 33, 29, .94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--line); box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .8);
}
.select-add { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.select-add span { font-variant-numeric: tabular-nums; }
.selecting .list-bar, .selecting .drag-handle { display: none; }
.selecting .select-tick {
  display: grid; place-items: center; width: 24px; height: 24px; margin: 0 6px; border-radius: 50%; border: 1.5px solid var(--line); color: transparent;
}
.selecting .row { cursor: pointer; user-select: none; -webkit-user-select: none; }
.selecting .row.selected { background: var(--surface-2); border-color: var(--line); }
/* A title-only poster would vanish into the selected row's fill. */
.selecting .row.selected .poster-empty { background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line); }
.selecting .row.selected .select-tick { background: var(--text); border-color: transparent; color: var(--bg); }
[data-controller~="select"] .row-link { -webkit-touch-callout: none; }
.select-lists .option-chevron { color: var(--text-3); flex: none; }
body:has(.selecting) .toast-region[popover] { bottom: calc(92px + env(safe-area-inset-bottom)); }

/* ---------- In the apps ----------
   html.native: the page is in the iOS or Android app (Hotwire Native). */
/* A long press on a link doesn't open the browser's preview or link menu;
   in the apps a long press is for Select movies. */
.native a { -webkit-touch-callout: none; }
/* A page the apps show as a native sheet looks like the web's sheet: its
   background, and the sheet's own spacing rather than the page's. */
body.native-sheet { background: var(--surface-1); }
.native-sheet .container { max-width: none; padding: 0 0 calc(24px + env(safe-area-inset-bottom)); }

/* ---------- The list bar ----------
   Watchlist, Search, Pick, Watched, Settings, floating at the bottom of the
   list. Pick is movie night: the one amber thing,
   raised in the middle, with no label; its icon is where tonight is, and
   most of the time that's the app's mark (mark_icon). */
.list-bar {
  position: fixed; left: 12px; right: 12px; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 25;
  max-width: 520px; margin: 0 auto; height: 56px; display: flex; justify-content: space-around; align-items: center;
  border-radius: 22px; background: rgba(38, 33, 29, .94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--line); box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .8);
}
.list-bar form { display: contents; }
.list-bar-tab { display: grid; justify-items: center; gap: 3px; width: 56px; color: var(--text-3); font-size: var(--text-label); font-weight: 600; text-decoration: none; }
.list-bar-tab[aria-current="page"] { color: var(--text); }
.list-bar-tab:focus-visible, .list-bar-pick:focus-visible { outline: 2px solid var(--text-2); outline-offset: 3px; border-radius: 10px; }
.list-bar-pick {
  flex: none; width: 58px; height: 58px; margin-top: -22px; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; background: var(--marquee); color: var(--marquee-ink);
  box-shadow: 0 0 0 5px var(--bg), 0 10px 20px -6px rgba(242, 181, 68, .45);
}
.list-bar-pick:focus-visible { border-radius: 50%; }
/* On movie night's own tab, the page has the amber action; Pick shows it's
   where you are instead. */
.list-bar-pick[aria-current="page"] { background: var(--surface-2); color: var(--marquee); box-shadow: 0 0 0 5px var(--bg), inset 0 0 0 2px var(--marquee); }
.list-bar-pick[aria-disabled="true"] { background: var(--surface-3); color: var(--text-3); box-shadow: 0 0 0 5px var(--bg); cursor: default; }

/* ---------- Sort and filter ----------
   Watchlist and Watched share one toolbar: Sort, which names the order and
   never turns cream, then Filters, then quick filters, cream with a ✓ when on. */
.sort-chip { display: contents; }
.chip-sort { color: var(--text); cursor: pointer; font: inherit; }
.chip-sort svg:last-child { color: var(--text-3); }
.list-toolbar .chip[aria-pressed="true"]::before { content: "✓"; font-size: .8em; }
.radio-option[aria-current] .option-radio { border: 7px solid var(--text); }
.list-note a { color: var(--text-2); }
.filter-check { display: flex; align-items: center; gap: var(--space-2); color: var(--text-2); font-size: var(--text-callout); }

/* ---------- Swipe for We watched it ----------
   A row on the list slides left to show a cream We watched it behind its
   right edge, or right to show a red Remove behind its left edge
   (swipe_controller sets --swipe, negative to the right). The row only moves
   while it's swiped, so its title link still covers the whole row the rest
   of the time. */
.row-swipe { overflow: hidden; touch-action: pan-y; }
.row-swipe > :not(.swipe-action) { transition: transform .2s ease; }
.row-swipe.swiped > :not(.swipe-action) { transform: translateX(calc(-1 * var(--swipe, 0px))); }
.row-swipe.swiping > * { transition: none; }
.row-swipe .row-link:focus-visible::after { outline-offset: -2px; }
.swipe-action {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 3; width: max(0px, var(--swipe, 0px)); overflow: hidden;
  display: flex; justify-content: flex-end; background: var(--text); color: var(--bg); transition: width .2s ease;
}
.swipe-remove { right: auto; left: 0; width: max(0px, -1 * var(--swipe, 0px)); justify-content: flex-start; background: var(--danger); color: #fff; }
.row-swipe.swiping .swipe-action { transition: none; }
.swipe-action form { display: contents; }
.swipe-btn {
  flex: none; width: 96px; min-height: 100%; display: grid; place-content: center; justify-items: center; gap: var(--space-1);
  padding: 0 var(--space-2); border: 0; background: none; color: inherit; cursor: pointer;
  font: 600 var(--text-callout)/1.2 var(--font); text-align: center; text-decoration: none;
}
/* Keyboard: tabbing to it shows it. */
.row-swipe:has(.swipe-action:not(.swipe-remove) .swipe-btn:focus-visible) { --swipe: 96px !important; }
.row-swipe:has(.swipe-action:not(.swipe-remove) .swipe-btn:focus-visible) > :not(.swipe-action) { transform: translateX(-96px); }
.row-swipe:has(.swipe-remove .swipe-btn:focus-visible) { --swipe: -96px !important; }
.row-swipe:has(.swipe-remove .swipe-btn:focus-visible) > :not(.swipe-action) { transform: translateX(96px); }
.swipe-btn:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; border-radius: var(--radius-sm); }