/* My Next Film: poster-forward and dark like a screening room, in warm charcoal with one gold accent. */
:root {
  --bg: #161412;          /* warm charcoal */
  --surface: #211e1b;
  --surface-2: #2c2824;
  --ink: #f2ede5;
  --muted: #aba398;   /* raised for readability */
  --faint: #857d73;   /* raised for readability */
  --line: #36312c;
  --accent: #f2c14e;      /* marquee gold */
  --accent-ink: #1c1606;
  --gold-hot: #ffc629;
  --film: #0b0a09;        /* film base */
  --sprocket: #3b352f;    /* sprocket holes */    /* the score color at 100: brighter than the accent so it pops */
  --serif: "Instrument Serif", Georgia, serif;
  --sans: "Hanken Grotesk", system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
body {
  overflow-x: hidden;
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased;
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
}
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
/* the page area gets focus programmatically (for screen readers) and should never show a ring */
#app:focus, #app:focus-visible, main:focus-visible { outline: none; }
img { display: block; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }

/* header */
.top {
  display: flex; align-items: flex-start; justify-content: space-between;
  width: 100%; max-width: 1080px; margin: 0 auto; padding: 22px 24px;
}
.brand { position: relative; font: 400 26px/1 var(--serif); color: var(--ink); text-decoration: none; padding-bottom: 9px; }
.brand::after { /* short gold rule under the name */
  content: ""; position: absolute; left: 1px; bottom: 0; width: 28px; height: 1.5px; border-radius: 1px; background: var(--accent);
}
.brand em { color: var(--accent); }
.proto { font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }

/* The Director's Cut starts at the top, at the same place as a question screen (a spacer from stepTopRef sets it on a
   tall window), so the mode pills don't move between modes; centering it would put the short loading line mid-screen */
body[data-view="dc"] main { justify-content: flex-start; }
/* the stage: everything for the current question sits in the middle */
main {
  flex: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: 16px 24px 8vh;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; outline: none;
}
.step-label {
  font-size: 13.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 18px;
}
.step-label b { color: var(--accent); font-weight: 700; }
h1 {
  font: 400 clamp(40px, 6.4vw, 64px)/1.02 var(--serif); letter-spacing: -.01em;
  margin: 0 0 36px; text-wrap: balance; max-width: 16ch;
}
/* question headings always reserve two lines, so switching modes or steps never shifts the page */
h1.q-head { min-height: 2.04em; display: flex; align-items: center; justify-content: center; } /* a one-line heading sits centered in the two-line space */
h1.q-head.titles { max-width: 24ch; align-items: flex-start; min-height: 0; } /* Pitch headings with movie titles get more width so they don't stack into three lines; the top of the two-line space, so the gap under the mode pills matches The Feature's (Caleb, 2026-11-01) */
h1.q-head.one-line { min-height: 0; } /* The Screening's heading never wraps to two lines on a computer, so it starts where The Feature's does */
h1 em { font-style: italic; color: var(--accent); }
/* a share link on its way, then copied: the button answers at once, and gold says it worked (Caleb, 2026-11-02) */
.btn[data-label] { transition: background-color .25s, border-color .25s, color .25s; }
.btn.copied, .btn.copied:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
/* The Pitch slot machine: each blank is a window that titles spin through */
.reel-line { white-space: nowrap; }
.reel { position: relative; display: inline-block; width: 2.2em; height: 1.2em; vertical-align: -0.24em;
  overflow: hidden; /* the spin window (overflow clips reliably in mobile browsers, unlike clip-path) */
  box-sizing: content-box; padding: 0 .14em; margin: 0 -.14em; /* side room for leaning italics like a 7, without changing the spacing */
  transition: width .5s cubic-bezier(.45, 0, .2, 1); }
.reel-item { position: absolute; left: 50%; top: 0; line-height: 1.2em; white-space: nowrap;
  transform: translate(-50%, 0); transition: transform .5s cubic-bezier(.45, 0, .2, 1), opacity .5s; }
.reel-item.enter { transform: translate(-50%, -100%); opacity: 0; }
.reel-item.leave { transform: translate(-50%, 100%); opacity: 0; }
.reel .blank { vertical-align: -0.06em; }
.reel em { padding: 0 .04em 0 0; } /* room for italic overhang, so the next word never touches it */
h1 label { cursor: text; }

/* the question block (fades between steps; sits above the picks so the dropdown covers them) */
.stage { position: relative; z-index: 5; width: 100%; display: flex; flex-direction: column; align-items: center; }

/* full-screen TV turn-on: one white line draws across the middle (0.35-1.45s), holds a beat, then
   splits into two lines that travel up and down (1.6-3.0s), revealing the site between them. The line is
   the two halves' leading edges stacked on the same pixel row from the start, so nothing swaps mid-way. */
.tv-on { position: fixed; top: 0; bottom: 0; left: 0; width: 100vw; z-index: 1000; pointer-events: none; } /* 100vw reaches over the scrollbar strip too */
/* during the intro the scrollbar space is swapped for equal body padding (set in app.js), so the black
   screen and the line cover the full width and nothing shifts when the intro ends */
html.tv-playing { overflow: hidden; scrollbar-gutter: auto; }
.tv-half { position: absolute; left: 0; right: 0; height: 50%; background: #000; animation: tv-open 1.4s 1.6s cubic-bezier(.65, 0, .35, 1) both; }
.tv-half.up { top: 0; --dir: -101%; }
.tv-half.down { bottom: 0; --dir: 101%; }
.tv-half::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, #fff6dd 10%, #fff 50%, #fff6dd 90%, transparent);
  box-shadow: 0 0 14px 3px rgb(255 240 200 / .7), 0 0 60px 14px rgb(242 193 78 / .22);
  transform: scaleX(0); animation: tv-draw 1.1s .35s cubic-bezier(.45, 0, .2, 1) both;
}
.tv-half.up::after { bottom: -1px; }   /* both edges sit on the same 2px row at the center */
.tv-half.down::after { top: -1px; }
@keyframes tv-draw {
  0% { transform: scaleX(0); opacity: 0; }
  6% { transform: scaleX(.01); opacity: 1; }   /* a point of light */
  100% { transform: scaleX(1); opacity: 1; }   /* drawn across the screen */
}
@keyframes tv-open { from { transform: translateY(0); } to { transform: translateY(var(--dir)); } }

/* search */
.search { position: relative; width: 100%; max-width: 620px; }
.search svg {
  position: absolute; left: 22px; top: 50%; width: 22px; height: 22px; margin-top: -11px;
  color: var(--muted); pointer-events: none;
}
.search input {
  width: 100%; height: 68px; padding: 0 172px 0 58px;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 14px;
  font-size: 21px; font-weight: 500; text-align: left;
  box-shadow: 0 10px 40px rgb(0 0 0 / .35);
}
.search input::placeholder { color: var(--faint); font-weight: 400; }
.search input:focus { outline: none; border-color: var(--accent); }
.results-list {
  position: absolute; z-index: 10; left: 0; right: 0; top: calc(100% + 8px);
  overflow-y: auto; overscroll-behavior: contain; /* max-height is set from the space below the search */
  margin: 0; padding: 6px; list-style: none; text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 24px 60px rgb(0 0 0 / .5);
}
.results-list [role="option"] {
  display: flex; align-items: center; gap: 14px; padding: 8px 10px; border-radius: 10px; cursor: pointer;
}
.results-list [role="option"]:hover, .results-list [aria-selected="true"] { background: var(--surface-2); }
.results-list img, .results-list .ph {
  width: 40px; height: 60px; flex: none; border-radius: 4px; object-fit: cover; background: var(--line);
}
.opt-title { display: block; font-size: 16px; font-weight: 600; line-height: 1.25; }
.opt-meta { display: block; font-size: 15.5px; color: var(--muted); }
.results-list .none { padding: 16px; color: var(--muted); font-size: 15.5px; }

.nav { display: flex; justify-content: space-between; width: 100%; max-width: 620px; margin-top: 10px; }
.nav .btn {
  background: none; border: 0; min-height: 44px; padding: 8px 4px; cursor: pointer;
  font-size: 15.5px; font-weight: 600; color: var(--muted);
}
.nav .btn:hover:not(:disabled) { color: var(--ink); }
.nav .btn:disabled { opacity: .3; cursor: default; }

/* the six picks as poster frames */
.frames { display: flex; justify-content: center; gap: 14px; margin-top: 44px; flex-wrap: wrap; }
.frame {
  display: flex; flex-direction: column; align-items: center; gap: 8px; width: 90px;
  padding: 0; border: 0; background: none; cursor: pointer; color: var(--muted);
}
.frame .slot {
  width: 76px; height: 114px; border-radius: 6px; overflow: hidden;
  border: 1.5px dashed var(--line); display: grid; place-items: center;
}
.frame .slot img { width: 100%; height: 100%; object-fit: cover; }
.frame.filled .slot { border: 0; box-shadow: 0 8px 24px rgb(0 0 0 / .45), inset 0 0 0 1px rgb(255 255 255 / .06); }
.frame.skipped .slot::after { content: "Skipped"; font-size: 12.5px; color: var(--faint); }
.frame.current .slot { border: 2px solid var(--accent); }
/* the frame being filled shows a "+", so the empty frames read as "add a movie here" */
.frame.current:not(.filled) .slot::after { content: "+"; font: 300 34px/1 var(--sans); color: var(--accent); }
.frame .lbl { max-width: 100%; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frame.current .lbl { color: var(--accent); }
.frame:hover .lbl { color: var(--ink); }
.frame:hover .slot { border-color: var(--muted); }
.frame.current:hover .slot { border-color: var(--accent); }
/* the ✕ that removes a pick (Sam, 2026-10-23): on hover with a mouse, always shown on touch screens */
.frame { position: relative; }
.frame-x { position: absolute; top: -7px; left: calc(50% + var(--slot-w, 76px) / 2 - 13px); width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font: 600 15px/1 var(--sans); color: var(--ink); background: var(--surface-2);
  border: 1px solid var(--line); box-shadow: 0 2px 8px rgb(0 0 0 / .5); opacity: 0; transition: opacity .15s; cursor: pointer; }
.frame:hover .frame-x, .frame:focus-visible .frame-x { opacity: 1; }
.frame-x:hover { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
@media (hover: none) { .frame-x { opacity: 1; width: 20px; height: 20px; font-size: 13px; } }

/* results */
body[data-view="results"] main { justify-content: flex-start; padding-top: 6px; max-width: 1040px; }   /* the rest is a spacer from alignPills, so the mode pills sit where a question screen has them */
body[data-view="results"] h1 { margin-bottom: 12px; font-size: clamp(36px, 5vw, 52px); }
body[data-view="results"] h1 { margin-bottom: 28px; max-width: none; white-space: nowrap; }
.picks-head { margin: 48px 0 0; font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
body[data-view="results"] .frames { margin: 16px 0 0; gap: 10px; }
body[data-view="results"] .foot { margin-top: 0; }
body[data-view="results"] .frame { width: 76px; }
body[data-view="results"] .frame .slot { width: 56px; height: 84px; }
body[data-view="results"] .frame { --slot-w: 56px; }
/* a column, not a grid: a folding bar's -12px margin cancels the gap above it only in flex (Caleb, 2026-10-25: a jump at the end of the fold) */
.matches { display: flex; flex-direction: column; gap: 12px; width: 100%; text-align: left; }
.match {
  display: grid; grid-template-columns: 84px 1fr auto; gap: 20px; align-items: start;
  padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
}
.match .poster-btn img:not(.in) { opacity: 0; }
.match .poster-btn img { transition: opacity .2s; }
.match .poster-btn img, .match .ph { width: 84px; height: 126px; border-radius: 6px; object-fit: cover; background: var(--line); }
.match h2 { font: 700 21px/1.2 var(--sans); margin: 0 0 4px; letter-spacing: -.01em; }
.rating { color: var(--ink); font-weight: 600; }
.rating span { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; color: var(--faint); }
.nw { white-space: nowrap; }  /* one detail (a director's name, "156 min") never splits across lines */
.match .meta { color: var(--muted); font-size: 15.5px; margin: 0 0 12px; }
.why { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.why li { font-size: 15.5px; font-weight: 600; padding: 5px 10px 5px 11px; white-space: nowrap; border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.why b { display: inline-block; min-width: 3ch; margin-left: 3px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
/* The Feature's and The Pitch's question scores: always three across, so six make two rows of three, never three rows of two
   (Sam, 2026-11-09); the Director's Cut keeps its own wrapping */
.match .why:has(> li:nth-child(4)):not(.dc .why) { display: grid; grid-template-columns: repeat(3, max-content); }
/* on phones the pills shrink a little so three fit across a card */
@media (max-width: 640px) {
  .match .why:has(> li:nth-child(4)):not(.dc .why) { gap: 5px; }
  .match .why:has(> li:nth-child(4)):not(.dc .why) .pill { font-size: 13px; padding: 5px 7px 5px 8px; }
}
@media (max-width: 360px) {
  .match .why:has(> li:nth-child(4)):not(.dc .why) { gap: 4px; }
  .match .why:has(> li:nth-child(4)):not(.dc .why) .pill { font-size: 12px; padding: 4px 5px 4px 6px; }
  .match .why:has(> li:nth-child(4)):not(.dc .why) b { margin-left: 2px; }
}
/* where to watch: hidden behind a text link; opens to a divider, then stream and rent-or-buy logos */
.watch-toggle {
  display: inline-block; margin-top: 12px; padding: 4px 0; border: 0; background: none; cursor: pointer;
  font-size: 15.5px; font-weight: 500; color: var(--muted);
  text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px;
}
.watch-toggle:hover, .watch-toggle[aria-expanded="true"] { color: var(--ink); text-decoration-color: var(--accent); }
.card-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 22px; margin-top: 12px; }
.card-links .watch-toggle { margin-top: 0; }
.trailer-btn { text-decoration: none; }
.trailer-btn .tri { font-size: .8em; color: var(--accent); margin-right: 6px; }
.trailer-btn .u { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; }
.trailer-btn:hover .u { text-decoration-color: var(--accent); }
.watch { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.watch.none { color: var(--faint); font-size: 14.5px; margin: 8px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
.watch-group { display: inline-flex; align-items: center; gap: 6px; }
.watch-empty { font-size: 14.5px; line-height: 1; color: var(--faint); }
.watch-group:has(.watch-empty) { align-items: baseline; } /* text next to text lines up on the baseline */
.watch-lbl { line-height: 1; font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.svc { display: block; border-radius: 6px; line-height: 0; }
.watch-note { flex-basis: 100%; margin: 0; font-size: 14.5px; color: var(--faint); }   /* Caleb, 2026-10-30, from testing */
.svc img { width: 26px; height: 26px; border-radius: 7px; object-fit: cover; }
.svc:hover img { transform: translateY(-1px); box-shadow: 0 4px 12px rgb(0 0 0 / .5); }
.watch-group.rent .svc img { opacity: .75; }
.watch-group.rent .svc:hover img { opacity: 1; }

.score { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 126px; padding: 0 10px; }  /* fixed to the poster's height, so it never moves */
.score b { font: 700 44px/1 var(--sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.score span { margin-top: 5px; white-space: nowrap; font-size: 13.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.match.top { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.more { margin-top: 26px; display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.more .btn, .g-form .btn, .g-invite .btn, .g-more .btn {
  min-height: 44px; padding: 10px 20px; border-radius: 999px; cursor: pointer; font-weight: 600; font-size: 15.5px;
  background: none; border: 1.5px solid var(--line); color: var(--ink);
}
.more .btn.primary, .g-form .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.more .btn:hover, .g-form .btn:hover, .g-invite .btn:hover { border-color: var(--muted); }
.note { color: var(--muted); font-size: 15.5px; }

.foot { text-align: center; padding: 0 24px 20px; color: var(--faint); font-size: 12.5px; }
.foot p { margin: 0; }
.foot a { color: var(--muted); }
/* TMDB's logo, which their terms require beside the notice (Sam, 2026-10-27) */
/* one line on phones (Sam, 2026-11-01): a shorter notice; the full one stays on wider screens and the privacy page */
.foot-short { display: none; }
.tmdb-logo { display: inline-block; vertical-align: -1px; margin-right: 6px; }
.tmdb-logo img { display: block; height: 12px; width: auto; filter: grayscale(1) brightness(1.15); opacity: .55; }   /* grey, to sit quietly in the footer (Sam, 2026-10-27) */
@media (max-width: 640px) {
  .foot:has(.foot-short) { padding-left: 12px; padding-right: 12px; font-size: min(11px, 2.85vw); white-space: nowrap; }
  .foot-full { display: none; }
  .foot-short { display: inline; }
  .tmdb-logo { margin-right: 4px; }
  .tmdb-logo img { height: 9px; }
}
/* the privacy page (2026-10-24): a plain reading page in the site's look */
.legal-page { justify-content: flex-start; text-align: left; align-items: stretch; max-width: 680px; padding-top: 32px; }
.legal-page h1 { margin: 0 0 6px; text-align: left; }
.legal-page h2 { font: 400 26px/1.2 var(--serif); margin: 30px 0 8px; color: var(--ink); }
.legal-page p { font-size: 16.5px; line-height: 1.6; color: var(--muted); margin: 0 0 12px; }
.legal-date { color: var(--faint) !important; font-size: 14px !important; }
.legal-back { margin-top: 28px !important; }
.legal-page a { color: var(--accent); }

@media (max-width: 640px) {
  /* every question's example line takes two lines on a phone, so the page never shifts between questions (Sam, 2026-10-24) */
  .definition { min-height: calc(2lh); }
}
@media (max-width: 360px) {
  .definition { min-height: calc(3lh); }   /* the smallest phones need three lines for the longer examples */
  h1.q-head { font-size: 35px; }   /* "Pick a movie with the complexity you want." fits two lines like the rest */
}
@media (max-width: 640px) {
  .top { padding: 16px; }
  main { padding: 8px 16px 6vh; }
  body[data-view="step"] main, body[data-view="dc"] main { justify-content: flex-start; padding-top: 2px; } /* the mode pills right under the logo (Sam, 2026-11-09: it was 3vh, open space above them); The Director's Cut and results pages start in the same place */
  body[data-view="results"] main { padding-top: 2px; }
  h1 { margin-bottom: 26px; }
  .search input { height: 58px; font-size: 18px; padding-left: 50px; }
  .search svg { left: 18px; }
  .frames { gap: 4px; margin-top: 32px; flex-wrap: nowrap; }
  .frame { width: 54px; }
  .frame .slot, body[data-view="results"] .frame .slot { width: 48px; height: 72px; }
  .frame, body[data-view="results"] .frame { --slot-w: 48px; }
  body[data-view="results"] .frame { width: 54px; }
  .frame .lbl { font-size: 9.5px; letter-spacing: 0; max-width: none; overflow: visible; } /* six across on a phone: the widest label, Complexity, must fit */
  .match { grid-template-columns: 64px 1fr; gap: 14px; }
  .why { flex-wrap: wrap; }
  .match .poster-btn img, .match .ph { width: 64px; height: 96px; }
  .score { grid-column: 2; flex-direction: row; align-items: baseline; gap: 8px; padding: 0; }
  .score b { font-size: 32px; }
}
@media (prefers-reduced-motion: no-preference) {
  .frame .slot, .nav .btn, .more .btn { transition: border-color .15s, color .15s; }
  .enter { animation: fade .18s ease-out; }
}
@media (prefers-reduced-motion: reduce) {
  .enter { animation: none; }
}
@keyframes fade { from { opacity: 0; } }

/* ---------- feedback round (2026-09-27) ---------- */
/* step screen: See my matches, suggestions */
.nav { align-items: center; }
.nav-right { display: inline-flex; align-items: center; gap: 22px; }
.nav .btn.see {  /* underlined text, not a button shape */
  color: var(--accent); text-decoration: underline; text-decoration-color: var(--accent);
  text-underline-offset: 4px; font-weight: 700;
}
.nav .btn.see:hover { color: var(--ink); }
/* all six picked: The Feature no longer jumps to results, so "See my matches" becomes the screen's gold button
   (Caleb, 2026-10-30, from testing) */
.nav .btn.see.ready { padding: 0 24px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); text-decoration: none; font-size: 16px; }
.nav .btn.see.ready:hover { color: var(--accent-ink); filter: brightness(1.06); }
.suggest-link {
  margin-top: 18px; padding: 6px 2px; border: 0; background: none; cursor: pointer;
  font-size: 16px; font-weight: 600; color: var(--muted);
  text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px;
}
.suggest-link:hover { color: var(--ink); text-decoration-color: var(--accent); }
.more-control { margin: 22px 0 0; text-align: center; font: 400 16px/1.5 var(--sans); color: var(--muted); }   /* The Pitch's "Want more control?" (Caleb, 2026-11-08) */
/* at the top it shares the back link's line: "← Change my picks · Want more control? Try ..." (Caleb, 2026-11-08); on a
   narrow screen the hint drops to its own line whole and the dot goes */
.results-back:has(.more-control) { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 2px 10px; }
#app .more-control.at-top { margin: 0; font-size: 16px; }
.rb-dot { color: var(--muted); }
@media (max-width: 560px) { .rb-dot { display: none; } .results-back:has(.more-control) { row-gap: 10px; } }   /* room between "Change my picks" and "Want more control?" once they wrap (Sam, 2026-11-09) */
/* easier to see without getting bigger (Caleb, 2026-11-08: people might miss it): the question in the body color, not grey,
   and the mode names in the site's gold, like "Star Wars meets Elf"; "Change my picks" stays grey */
.more-control { color: var(--ink); }
.more-control .suggest-link { margin: 0; padding: 0; font: inherit; font-weight: 600; color: var(--accent); text-decoration-color: var(--accent); }
.more-control .suggest-link:hover { color: var(--accent); filter: brightness(1.15); }
.helpers .suggest-link[data-go="suggest"], .helpers .suggest-link[data-go="suggest-hide"] { color: var(--ink); text-decoration-color: var(--accent); }   /* brighter, at the original size (Caleb, 2026-11-02) */
.suggestions { display: flex; align-items: flex-start; justify-content: center; gap: 14px; margin-top: 14px; flex-wrap: wrap; }
.suggestions:empty { display: none; }
.sugg-cap { flex-basis: 100%; margin: -6px 0 12px; text-align: center; font: 400 16px/1.45 var(--sans); color: var(--ink); }
@media (min-width: 720px) { .sugg-cap { white-space: nowrap; } }
.tile { width: 92px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--muted); text-align: center; }
.tile img { width: 92px; height: 138px; border-radius: 6px; object-fit: cover; background: var(--surface);
  box-shadow: 0 8px 20px rgb(0 0 0 / .4); transition: transform .15s; }
.tile:hover img { transform: translateY(-3px); }
.tile span { display: block; overflow-wrap: break-word; margin-top: 7px; font-size: 13.5px; line-height: 1.3; }   /* full movie titles, never cut off (Sam, 2026-11-09: on phones many suggestion titles were) */
.tile:hover span { color: var(--ink); }

/* results: clickable title and poster, synopsis, clickable pills */
.poster-btn { padding: 0; border: 0; background: none; cursor: pointer; line-height: 0; border-radius: 6px; }
.poster-btn:hover img { filter: brightness(1.08); }
.title-btn { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: inherit; text-align: left; }
.title-btn:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }
.syn { margin: 0 0 12px; font-size: 15.5px; line-height: 1.5; color: var(--muted); }
/* result cards: synopses are written for two lines; the few that need a third on narrower screens
   show in full rather than being cut off */
.syn:empty { display: none; }
.why li { padding: 0; background: none; }
.pill {
  font: 600 15.5px/1 var(--sans); padding: 6px 10px 6px 11px; border-radius: 999px; border: 1px solid transparent;
  background: var(--surface-2); color: var(--muted); cursor: pointer; white-space: nowrap;
}
.pill:hover, .pill[aria-expanded="true"] { border-color: var(--line); color: var(--ink); }
/* a faint dashed underline (Caleb, 2026-10-30: a solid one looked off), so the question scores read as tappable (Caleb, 2026-10-30: neither tester found them) */
.why .pill { text-decoration: underline dashed; text-decoration-color: color-mix(in srgb, var(--muted) 60%, transparent);
  text-decoration-thickness: 1px; text-underline-offset: 4px; }
.why .pill:hover, .why .pill[aria-expanded="true"] { text-decoration-color: var(--accent); }

/* quality explanation */
.pop {
  position: absolute; z-index: 60; width: min(360px, calc(100% - 16px)); padding: 16px 18px 14px;  /* % of the page, not the window, so the scrollbar's space doesn't count */
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 20px 50px rgb(0 0 0 / .55); font-size: 15px; line-height: 1.5; color: var(--muted);
}
.pop p { margin: 0 0 10px; }
.pop strong { color: var(--ink); font-weight: 600; }
.pop-head { font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.pop-head b { font-size: 16px; letter-spacing: 0; margin-left: 4px; }
.pop-x, .modal-x {
  position: absolute; top: 6px; right: 8px; width: 32px; height: 32px; border: 0; border-radius: 50%;
  background: none; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer;
}
.pop-x:hover, .modal-x:hover { background: var(--surface); color: var(--ink); }
.pop-table { width: 100%; border-collapse: collapse; margin: 4px 0 8px; font-size: 15.5px; }
.pop-table th { font-weight: 600; color: var(--ink); text-align: right; vertical-align: bottom; padding: 0 0 6px 10px; max-width: 110px;
  line-height: 1.3; overflow-wrap: break-word; }   /* full movie titles, never cut off (Sam, 2026-11-09: on phones many suggestion titles were) */
.pop-table td { padding: 4px 0; border-top: 1px solid var(--line); }
.pop-table td + td { text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; padding-left: 10px; }
.pop-note { font-size: 14.5px; color: var(--faint); margin: 0 !important; }
.pop-sub { margin-bottom: 6px !important; }
.pop-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { padding: 3px 8px; border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 14.5px; }

/* trailer player */
.trailer { /* grey box holding the title and the gold-framed video */
  position: relative; width: min(960px, 100%, calc((100vh - 110px) * 16 / 9)); padding: 14px 18px 18px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: 0 30px 80px rgb(0 0 0 / .7);
}
.trailer-title { margin: 2px 44px 12px 2px; font: 700 18px/1.3 var(--sans); color: var(--ink); }
.trailer-title span { font-weight: 500; color: var(--muted); }
.trailer .modal-x { top: 8px; right: 10px; color: var(--ink); }
.trailer-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #000;
  border: 2px solid var(--accent); }
.trailer-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.trailer-back { background: rgb(0 0 0 / .85); }
/* film pop-up */
.modal-back {
  position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; padding: 16px;
  background: rgb(0 0 0 / .6); backdrop-filter: blur(3px);
}
.modal {
  position: relative; display: grid; grid-template-columns: 160px 1fr; gap: 22px; align-items: start;
  width: min(620px, 100%); padding: 22px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: 0 30px 80px rgb(0 0 0 / .6);
}
.modal img { width: 160px; height: 240px; border-radius: 8px; object-fit: cover; }
.modal h2 { font: 700 22px/1.2 var(--sans); margin: 0 36px 6px 0; }
.modal .meta { color: var(--muted); font-size: 15.5px; margin: 0 0 12px; }
.modal .out {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 10px 18px; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 15.5px; text-decoration: none;
}
.modal .out:hover { filter: brightness(1.08); }
.modal button.out { border: 0; cursor: pointer; font-family: inherit; }
.modal .note { margin: 8px 0 0; font-size: 13.5px; color: var(--faint); }

@media (max-width: 640px) {
  .suggestions { gap: 8px; }
  .tile, .tile img { width: 58px; }
  .tile img { height: 87px; }
  .tile span { font-size: 12px; line-height: 1.25; margin-left: -3px; margin-right: -3px; }   /* titles use 3px of the gap on each side, so long ones fit three lines (Sam, 2026-11-09) */
  /* phones: the poster on the left, the title and details beside it, the score in the top-right corner (as on
     desktop); the synopsis and everything after it use the card's full width (in a narrow column beside the
     poster a synopsis ran 5 to 9 lines). The content block dissolves into the card's grid so its parts can be
     placed one by one. Opening a card only adds below. */
  .match { grid-template-columns: 64px 1fr auto; grid-template-rows: auto 1fr; column-gap: 12px; row-gap: 0; }
  .match > .poster-btn { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
  .match > div:not(.score) { display: contents; }
  .match > div:not(.score) > * { grid-column: 1 / -1; }
  .match > div:not(.score) > h2 { grid-column: 2; grid-row: 1; }
  .match > div:not(.score) > .meta { grid-column: 2 / -1; grid-row: 2; margin-bottom: 0; }
  .match .score { grid-column: 3 !important; grid-row: 1; align-self: start; height: auto; flex-direction: column !important;
    align-items: center !important; gap: 3px !important; border-top: 0 !important; padding: 2px 0 0 !important; }
  .match .score b { font-size: 30px; }
  .match .score span { margin-top: 0; font-size: 9.5px; letter-spacing: .08em; text-align: center; white-space: normal; max-width: 6ch; line-height: 1.15; }
  .match > div:not(.score) > .syn { margin-top: 14px; }
  /* the details line: year, director and runtime first, then the ratings on their own line */
  .match .meta { display: flex; flex-direction: column; gap: 2px; }
  .match .meta .meta-d { order: -1; }
  .match .meta .meta-sep { display: none; }
  .match .meta .lb-click { display: none; }  /* "Letterboxd rating", so the ratings fit on one line */
  /* "Your picks" under the results: six frames that fit inside the page's side margins */
  body[data-view="results"] .frames { gap: 4px; }
  body[data-view="results"] .frame { width: 52px; }
  /* the movie pop-up on phones: poster beside the title and details, then the synopsis and links at full width */
  .modal { grid-template-columns: 90px 1fr; column-gap: 14px; row-gap: 0; padding: 16px; align-items: start; }
  .modal img { width: 90px; height: 135px; grid-column: 1; grid-row: 1 / span 2; }
  .modal .modal-body { display: contents; }
  .modal .modal-body > * { grid-column: 1 / -1; }
  .modal .modal-body > h2 { grid-column: 2; grid-row: 1; margin-right: 34px; }
  .modal .modal-body > .meta { grid-column: 2; grid-row: 2; }
  .modal .modal-body > .syn { margin-top: 14px; }
}

/* Letterboxd ratings embed and links in the film pop-up */
.lb-frame {  /* trims 2px off each side so the embed's hairline border never shows; its content and logo are untouched */
  width: 396px; max-width: 100%; height: 136px; margin: 0 0 16px; overflow: hidden; border-radius: 8px;
}
.lb-embed { display: block; width: 400px; height: 140px; margin: -2px; border: 0; }
.lb-title { font: 700 20px/1.2 var(--sans); margin: 0 36px 12px 0; }
.lb-title span { font-weight: 400; color: var(--muted); }
.lb-modal { grid-template-columns: 1fr; width: min(448px, 100%); padding: 48px 24px 22px; }
.lb-modal .out { justify-self: start; }
.lb-btn {  /* reads like the rest of the details line, underlined as a link */
  display: inline; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: inherit;
  text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px;
}
.lb-btn:hover, .lb-btn[aria-expanded="true"] { color: var(--ink); text-decoration-color: var(--muted); }  /* height is left to the embed ("auto"), per Letterboxd's guide, so the logo is never cropped */
.outs { display: flex; flex-wrap: wrap; gap: 8px; }
.modal .out.alt { background: none; color: var(--ink); border: 1.5px solid var(--line); }
.modal .out.alt:hover { border-color: var(--muted); filter: none; }

/* question helpers: suggestions and "What counts as ...?" */
.helpers { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; }
.helpers:has(.suggest-dot) { gap: 10px; }   /* Show different movies · Hide (Caleb, 2026-11-01) */
.suggest-dot { align-self: flex-end; padding: 6px 0; font-size: 16px; font-weight: 600; line-height: normal; color: var(--muted); }
.definition {
  max-width: 640px; margin: -14px auto 28px; font-size: 18px; line-height: 1.5; color: var(--muted); text-align: center;   /* 16px until Caleb, 2026-11-01 */
}
/* why we picked this: one line on each card, same height everywhere */
.why-line {
  margin: -4px 0 10px; font-size: 15px; line-height: 1.5; color: var(--ink); font-style: italic;
  max-height: 3em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
@media (max-width: 640px) { .why-line { height: auto; max-height: none; display: block; } }
/* an empty why line or pill row takes no space (Caleb, 2026-10-20: when a card has no reasons, as in Director's Cut with
   only filters, no gap should be left between the synopsis and the links); it was kept one line tall for even cards */
.why-line:empty, .why:empty { display: none; }

/* scrollbars in the site's colors: dark track, muted warm handle (page, search list, pop-ups) */
html { scrollbar-color: #4a443d var(--bg); scrollbar-gutter: stable; } /* space for the scrollbar is always kept, so pages that scroll and pages that don't stay centered the same */
.results-list, .pop, .modal { scrollbar-width: thin; scrollbar-color: #4a443d transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
.results-list::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #4a443d; border-radius: 999px; border: 2px solid var(--bg); }
.results-list::-webkit-scrollbar-thumb { border-color: var(--surface); }
::-webkit-scrollbar-thumb:hover { background: #6b645c; }
::-webkit-scrollbar-button { display: none; height: 0; width: 0; }

/* Letterboxd pop-up, anchored just above its link */
.lb-pop {
  position: absolute; z-index: 70; width: 420px; max-width: calc(100% - 16px); padding: 10px 10px 8px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 20px 50px rgb(0 0 0 / .55);
  visibility: hidden; opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity .16s ease-out, transform .16s ease-out, visibility 0s .16s;
}
.lb-pop.below { transform: translateY(-6px); }
.lb-pop.open { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition: opacity .16s ease-out, transform .16s ease-out; }
.lb-pop .lb-frame { width: 396px; max-width: 100%; height: 136px; margin: 0 auto; background: #14181c; }  /* the embed's own dark color while it loads */
.lb-pop .lb-embed { opacity: 0; transition: opacity .2s ease-out; }
.lb-pop .lb-embed.in { opacity: 1; }
.lb-link { display: inline-block; margin: 8px 2px 0; font-size: 15px; font-weight: 600; color: var(--muted); text-decoration: none; }
.lb-link:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- round 3: mode toggle, search toggle, The Pitch, share ---------- */
/* segmented toggles in the site's style: quiet text, the active side in gold */
.search-mode { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }
/* the "i" beside the mode toggle: placed outside the toggle (absolutely, so the toggle stays centered) with its
   own small tap target; its card floats over the page below the toggle, so nothing moves when it opens */
.mode-row { position: relative; display: inline-flex; margin: 0 0 22px; }
/* the modes: two labeled pills, Solo (The Feature, The Pitch) and Group (The Screening); side by side on wide
   screens, stacked on phones (Solo first) */
.modes { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 12px; }
/* each pill has a small half-pill cap on top holding its label and an icon (one person for Solo, two for Group):
   a shade lighter than the pill, rounded on top, joined to it with no line between (version 9 of 10, Sam's pick) */
.mode-col { display: flex; flex-direction: column; align-items: center; }
.mode-label {
  position: relative; z-index: 1; margin-bottom: -1px; padding: 5px 13px 4px; display: inline-flex; align-items: center; gap: 5px;
  background: var(--surface-2); border: 1px solid var(--line); border-bottom: 0; border-radius: 999px 999px 0 0;
  font-size: 10px; line-height: 1; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink);
}
.mode-label svg { width: 11px; height: 11px; flex: none; }
.mode-set { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }
.mode-set button { border: 0; background: none; cursor: pointer; border-radius: 999px; }
@media (max-width: 640px) {
  /* phones: side by side with slightly tighter buttons, and the "i" in the row right after The Screening, so it
     always moves with the pills (on desktop it's placed just outside them instead, keeping them centered) */
  .modes { gap: 10px; }
  .modes .mode-set button { padding: 0 10px; font-size: 13.5px; }
  .modes .mode-i { position: static; align-self: flex-end; margin: 0 0 7px -2px; }
}
@media (max-width: 500px) {  /* phones: the three Solo modes stacked in one tall pill on the left; on the right, Group (The Screening)
   with the "i" under it (Sam, 2026-11-09; before, The Screening sat centered under the Solo pill) */
  .modes { display: grid; grid-template-columns: auto auto; grid-template-areas: "solo group" "solo info"; align-items: start; justify-content: center; gap: 0 12px; width: max-content; }
  .modes .mode-col:first-child { grid-area: solo; }
  .modes .mode-col:nth-child(2) { grid-area: group; }
  /* straight sides, with corners curved like the ends of The Screening's pill (18.5px, half its 37px height), and the buttons the full
     width, so the gold one's ends sit inside the corners (Sam, 2026-11-09: fully round ends made the stack bulge) */
  .modes .mode-col:first-child .mode-set { flex-direction: column; align-items: stretch; gap: 0; border-radius: 14px; padding: 4px; }
  .modes .mode-col:first-child .mode-set button { min-height: 27px; padding: 0 14px; }   /* tight (Sam, 2026-11-09) */
  /* The Screening's button the same height, so it lines up with The Pitch (Sam, 2026-11-09) */
  .modes .mode-col:nth-child(2) .mode-set { padding: 4px; border-radius: 14px; }   /* a touch boxier, the same corners as the Solo box, so their tops match (Sam, 2026-11-09) */
  .modes .mode-col:nth-child(2) .mode-set button { min-height: 27px; }
  .modes .mode-set button { border-radius: 10px; }   /* the gold highlight follows the box's 14px corners, 4px in (Sam, 2026-11-09: round ends left empty space) */
  .modes .mode-i { grid-area: info; justify-self: center; align-self: start; position: static; margin: 10px 0 0; }
}
.mode-i {
  position: absolute; left: calc(100% + 8px); top: 26.3px;  /* centered on the Solo pill, below its cap */
  width: 26px; height: 26px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--muted);
  font: italic 700 15px/1 var(--serif); display: grid; place-items: center;
}
.mode-i:hover, .mode-i[aria-expanded="true"] { color: var(--accent); border-color: var(--accent); }
.mode-info {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 40;
  width: min(360px, calc(100vw - 32px)); padding: 14px 16px; text-align: left;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 34px rgb(0 0 0 / .5);
}
.mode-info[hidden] { display: none; }
.mode-info p { margin: 0; font-size: 15.5px; line-height: 1.45; color: var(--muted); }
.mode-info p + p { margin-top: 8px; }
.mode-info b { color: var(--ink); }
.blank { display: inline-block; width: 2.2em; height: .75em; border-bottom: 3px solid var(--accent); } /* the empty slots in "___ meets ___." */
.mode-set button, .search-mode button {
  min-height: 32px; padding: 0 14px; border: 0; border-radius: 999px; background: none; cursor: pointer;
  font: 600 14.5px/1 var(--sans); color: var(--muted);
}
.mode-set button:hover, .search-mode button:hover { color: var(--ink); }
.mode-set button[aria-pressed="true"], .search-mode button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.search-mode { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); }
.search-mode button { min-height: 30px; padding: 0 12px; font-size: 14px; }

/* The Pitch */
.pitch-frames { display: flex; align-items: flex-start; justify-content: center; gap: 22px; margin-top: 44px; }
.pitch-frames .meets { font: italic 400 28px/28px var(--serif); color: var(--accent); margin-top: 66px; } /* centered on the posters, not posters plus labels */
.pitch-slot { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 120px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--muted); }
.pitch-slot .slot { width: 110px; height: 165px; border-radius: 6px; overflow: hidden; border: 1.5px dashed var(--line); }
.pitch-slot .slot img { width: 100%; height: 100%; object-fit: cover; }
.pitch-slot.filled .slot { border: 0; box-shadow: 0 10px 28px rgb(0 0 0 / .45); }
.pitch-slot.current .slot { border: 2px solid var(--accent); }
.pitch-slot .lbl { max-width: 100%; font-size: 14.5px; line-height: 1.3; font-weight: 600; text-align: center; overflow-wrap: break-word; }   /* full movie titles, never cut off (Sam, 2026-11-09: on phones many suggestion titles were) */
.pitch-slot.filled:hover .slot { filter: brightness(1.08); }
.pitch-nav { margin-top: 18px; }
.results-pitch { /* "Heat meets Before Sunrise." under the results heading, styled like the Pitch heading */
  margin: -20px auto 26px; font: 400 24px/1.25 var(--serif); color: var(--ink); text-align: center; text-wrap: balance;
}
.results-pitch em { font-style: italic; color: var(--accent); }
/* results pages have no visible heading (Sam, 2026-11-09: "Here are your matches." only filled space): the streaming banner comes
   first, then "X meets Y" (or the Director's Cut's "Like ..." and what you asked for) under it */
h1.sr ~ .svc-bar { margin-top: 0; }
.svc-bar + .results-pitch { margin-top: 4px; }
.svc-bar + .dc-asked { margin-top: 0; }
@media (max-width: 640px) {
  .search input { padding-right: 138px; }
  .search input::placeholder { font-size: 16px; }
  .search-mode button { padding: 0 9px; }
  .pitch-frames { gap: 12px; }
  .pitch-slot { width: 108px; } /* labels get more room than the poster */
  .pitch-slot .slot { width: 84px; }
  .pitch-slot .slot { height: 126px; }
  .pitch-frames .meets { margin-top: 47px; }
}

/* ---------- Group Vote (group.js) ---------- */
.g-form { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; max-width: 460px; }
.g-form .btn { flex: 0 0 auto; font-family: inherit; }
.g-invite .btn { font-family: inherit; min-height: 40px; padding: 8px 18px; }
.g-input {
  flex: 1 1 200px; min-width: 0; height: 48px; padding: 0 18px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 500 17px var(--sans);
}
.g-input::placeholder { color: var(--faint); font-weight: 400; }
.g-input:focus { outline: none; border-color: var(--accent); }
.g-code { text-transform: uppercase; letter-spacing: .18em; }
.g-code::placeholder { letter-spacing: 0; text-transform: none; }
/* Group Vote's first screen: how it works in three steps, then a panel to start and a panel to join */
.g-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; width: 100%; margin: -14px 0 55px; padding: 0; list-style: none; } /* the bottom margin matches the gap above the numerals */
.g-steps li { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 16.5px; font-weight: 500; line-height: 1.4; color: var(--ink); }
.g-steps b { font: italic 400 34px/1 var(--serif); color: var(--accent); }
.g-steps span { text-wrap: balance; }
@media (min-width: 900px) { .g-steps { width: calc(100% + 120px); margin-left: -60px; margin-right: -60px; gap: 28px; } } /* a little wider than the column, so each step fits on two lines */
.g-start { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; width: 100%; margin-bottom: 10px; }   /* ends as far above the footer as The Feature (Caleb, 2026-10-26) */
.g-panel { display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); text-align: left; }
.g-panel.main { border-color: color-mix(in oklab, var(--accent) 55%, var(--line)); }
.g-panel h2 { margin: 0; font: 700 19px/1.2 var(--sans); color: var(--ink); }
.g-panel p { margin: -4px 0 4px; font-size: 14.5px; color: var(--muted); }
.g-panel .g-input { flex: none; width: 100%; background: var(--bg); }
.g-panel .btn {
  min-height: 48px; border-radius: 999px; cursor: pointer; font: 700 16px var(--sans);
  background: none; border: 1.5px solid var(--muted); color: var(--ink);
}
.g-panel .btn:hover { border-color: var(--ink); }
.g-panel .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.g-panel .btn.primary:hover { filter: brightness(1.06); }
.g-error { margin: -12px 0 18px; font-size: 15px; font-weight: 600; color: #f0a08a; text-align: center; }
.g-nav { justify-content: center; gap: 12px; }
.g-actions { margin-top: 4px; }
.btn:disabled { opacity: .45; cursor: default; }
.g-members { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 14px; margin-top: 40px; }
.g-m { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 104px; text-align: center; }
.g-m .slot { width: 76px; height: 114px; border-radius: 6px; overflow: hidden; border: 1.5px dashed var(--line); }
.g-m.filled .slot { border: 0; box-shadow: 0 10px 28px rgb(0 0 0 / .45); }
.g-m .slot img { width: 100%; height: 100%; object-fit: cover; }
.g-m.secret .slot { display: grid; place-items: center; background: var(--surface); border: 1.5px solid var(--accent); box-shadow: none; }
.g-check { font-size: 30px; font-weight: 700; color: var(--accent); }
.g-m .lbl { max-width: 100%; font-size: 14px; line-height: 1.3; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }   /* a long first name wraps, never cut (Sam, 2026-11-09) */
.g-status { max-width: 100%; font-size: 13px; line-height: 1.3; color: var(--muted); overflow-wrap: break-word; }   /* full movie titles, never cut off (Sam, 2026-11-09: on phones many suggestion titles were) */
.g-invite {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 18px;
  margin: 34px auto 0; padding: 14px 18px; max-width: 620px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface); font-size: 15px; color: var(--muted); text-align: center;
}
.g-invite b { color: var(--accent); letter-spacing: .14em; }
.g-foot { margin-top: 18px; text-align: center; }
.g-card .why { flex-wrap: wrap; }
.g-fit { cursor: default; }
.pill { display: inline-block; }  /* so a wrapped second row of pills sits below the first instead of touching it */
/* the vote on each shortlist card: a clear question and two big buttons */
.g-votes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.g-ask { margin-right: auto; font: 700 19px/1.2 var(--sans); color: var(--accent); }
.g-votes.answered .g-ask { color: var(--muted); }
.g-yn { display: flex; gap: 12px; }  /* Yes and No always wrap together, never one per line */
.g-votes button {
  min-width: 118px; min-height: 52px; padding: 0 22px; border-radius: 999px; cursor: pointer;
  border: 2px solid var(--muted); background: none; color: var(--ink); font: 700 18px/1 var(--sans);
}
.g-votes button span { margin-right: 4px; }
.g-votes button:hover:not(:disabled) { border-color: var(--ink); }
.g-votes button:disabled { cursor: default; opacity: .6; }
.g-votes .g-yes[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); opacity: 1; }
.g-votes .g-no[aria-pressed="true"] { background: #5a332c; border-color: #8a4a3e; color: var(--ink); opacity: 1; }
/* progress and the Done button stay on screen while the shortlist scrolls */
.g-bar {
  position: sticky; bottom: 12px; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px;
  width: 100%; margin-top: 18px; padding: 12px 18px; border-radius: 16px;
  background: var(--surface-2); border: 1px solid var(--line); box-shadow: 0 16px 40px rgb(0 0 0 / .55);
}
.g-bar p { margin: 0; font-size: 16px; color: var(--muted); text-align: left; }
.g-bar p b { color: var(--ink); }
.g-bar-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.g-bar .btn {
  min-height: 46px; padding: 10px 22px; border-radius: 999px; cursor: pointer; font: 700 16px var(--sans);
  background: none; border: 1.5px solid var(--line); color: var(--ink);
}
.g-bar .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.g-tie { display: block; margin-top: 6px; text-wrap: balance; }  /* the tie note, on its own line under how the winner won */
.g-tie em { font-style: italic; color: var(--ink); }
.g-tally { list-style: none; margin: 14px auto 0; padding: 0; width: 100%; max-width: 620px; }
.g-tally li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 4px; border-top: 1px solid var(--line); font-size: 16px; }
.g-tally li span { color: var(--muted); white-space: nowrap; }
body[data-view="results"] .g-members { margin-top: 16px; }
@media (max-width: 640px) {
  /* phones: the three steps as a small timeline in a soft card, numbers in gold-ringed circles joined by a
     thin gold line */
  .g-steps { grid-template-columns: 1fr; gap: 0; margin-bottom: 41px; padding: 18px 18px 18px 16px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
  .g-steps li { position: relative; display: grid; grid-template-columns: 34px 1fr; align-items: start; column-gap: 14px;
    padding-bottom: 20px; text-align: left; font-size: 16px; }
  .g-steps li:last-child { padding-bottom: 0; }
  .g-steps li:not(:last-child)::before {  /* the line down to the next step */
    content: ""; position: absolute; left: 16.25px; top: 34px; bottom: 0; width: 1.5px;
    background: linear-gradient(color-mix(in srgb, var(--accent) 70%, transparent), color-mix(in srgb, var(--accent) 15%, transparent));
  }
  .g-steps b { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
    border: 1.5px solid var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface));
    font-size: 21px; padding-right: 1px; }  /* the italic numeral looks centered with a hair of right padding */
  .g-steps span { padding-top: 5px; text-wrap: pretty; }  /* the first line sits level with the circle; lines fill instead of breaking early */
  .g-start { grid-template-columns: 1fr; gap: 12px; }
  .g-panel { padding: 16px; }
  .g-m { width: 92px; }
  .g-m .slot { width: 64px; height: 96px; }
  .g-ask { flex-basis: 100%; }
  .g-yn { flex: 1 1 100%; }
  .g-votes button { flex: 1; min-width: 0; padding: 0 10px; }
  .g-bar { bottom: 8px; padding: 10px 12px; gap: 8px; }
  .g-bar p { font-size: 14.5px; }
  .g-bar-btns { flex: 1 1 100%; flex-wrap: nowrap; gap: 8px; }
  .g-bar .btn { flex: 1 1 0; min-height: 42px; padding: 8px 10px; font-size: 15px; }
}

/* under the picks row: a note, and a Clear picks link once there's a pick */
.picks-note { margin: 18px 0 0; font-size: 15.5px; font-style: italic; color: var(--muted); }
.picks-actions { min-height: 36px; margin-top: 2px; }
/* an empty row takes no space, so a screen ends the same distance above the footer with or without it (Caleb, 2026-10-26) */
.picks-actions:empty { min-height: 0; }
.pitch-frames + .picks-actions:empty { margin-top: 9px; }   /* the Pitch's labels sit lower in their slots */
.picks-actions .suggest-link { margin-top: 0; }
.picks-actions { display: flex; justify-content: center; align-items: baseline; flex-wrap: wrap; gap: 4px 18px; }
.undo-line { margin: 0; font-size: 15px; color: var(--muted); }
.undo-line em { color: var(--ink); }
.undo-line .suggest-link { margin: 0 0 0 4px; }
h1 + .undo-line { margin: -10px 0 18px; text-align: center; }


/* Group Vote winner reveal (group.js groupReveal): a film-leader countdown 0.3-2.7s (each number 0.8s,
   with the sweep going round once per number), a projector flash at 2.7s, then the winner in chasing
   marquee lights with confetti. A tap skips it; it closes on its own after 10s. */
html.rv-playing { overflow: hidden; scrollbar-gutter: auto; }
.reveal {
  position: fixed; top: 0; bottom: 0; left: 0; width: 100vw; z-index: 1100; display: grid; place-items: center; overflow: hidden; cursor: pointer;  /* 100vw covers the scrollbar strip too */
  background: radial-gradient(ellipse at center, #2a2520 0%, #0d0b0a 70%, #000 100%);
  animation: rv-in .3s ease-out both;
}
.reveal.out { animation: rv-out .5s ease-in both; }
@keyframes rv-in { from { opacity: 0; } }
@keyframes rv-out { to { opacity: 0; } }
/* old-projector flicker and vignette over the whole show */
.reveal::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: radial-gradient(ellipse at center, transparent 55%, rgb(0 0 0 / .55) 100%);
  animation: rv-flicker .18s steps(2) infinite;
}
@keyframes rv-flicker { 50% { opacity: .82; } }

.rv-leader { grid-area: 1 / 1; position: relative; width: min(64vw, 340px); aspect-ratio: 1; animation: rv-leader-in .3s .1s ease-out both; }
.reveal.show .rv-leader { animation: rv-leader-out .35s ease-in both; }
@keyframes rv-leader-in { from { opacity: 0; transform: scale(.9); } }
@keyframes rv-leader-out { to { opacity: 0; transform: scale(1.4); } }
.rv-leader svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: #e9dcc1; stroke-width: 2.5; opacity: .75; z-index: 1; }
.rv-sweep {
  position: absolute; inset: 4%; border-radius: 50%;
  background: conic-gradient(from 0deg, rgb(242 193 78 / .55) 0deg, rgb(242 193 78 / .12) var(--a), transparent var(--a));
  animation: rv-sweep .8s .3s linear 3 both;
}
@property --a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes rv-sweep { from { --a: 0deg; } to { --a: 360deg; } }
.rv-num {
  position: absolute; inset: 0; display: grid; place-items: center; z-index: 2;
  font-family: var(--serif); font-size: min(44vw, 230px); line-height: 1; color: #fff3d6;
  text-shadow: 0 0 30px rgb(242 193 78 / .45);
}

.rv-flash { position: absolute; inset: 0; background: #fff8e6; opacity: 0; pointer-events: none; z-index: 4; }
.reveal.show .rv-flash { animation: rv-flash .55s ease-out both; }
@keyframes rv-flash { 0% { opacity: 0; } 15% { opacity: .95; } 100% { opacity: 0; } }

.rv-win { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 16px; z-index: 2; visibility: hidden; }
.reveal.show .rv-win { visibility: visible; }
.rv-kicker { margin: 0 0 18px; font-size: 15px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.reveal.show .rv-kicker { animation: rv-up .5s .15s ease-out both; }
/* the marquee: a frame of bulbs (two offset dot layers that take turns lighting up) around the poster */
.rv-marquee {
  position: relative; padding: 18px; border-radius: 10px; background: #1d1813;
  box-shadow: 0 0 0 2px #5a4526, 0 24px 70px rgb(0 0 0 / .7), 0 0 90px rgb(242 193 78 / .25);
}
.rv-marquee::before, .rv-marquee::after {
  content: ""; position: absolute; inset: 0; border-radius: 10px; pointer-events: none;
  background: radial-gradient(circle, #fff3c4 0 3px, rgb(255 210 110 / .5) 3.5px 5px, transparent 5.5px) 0 0 / 18px 18px;
  filter: drop-shadow(0 0 4px rgb(255 200 90 / .9));
}
.rv-marquee::after { background-position: 9px 9px; }
.reveal.show .rv-marquee { animation: rv-poster .9s .1s cubic-bezier(.2, 1.3, .4, 1) both; }
.reveal.show .rv-marquee::before { animation: rv-bulbs .5s steps(1) infinite; }
.reveal.show .rv-marquee::after { animation: rv-bulbs .5s .25s steps(1) infinite; }
@keyframes rv-bulbs { 50% { opacity: .15; } }
@keyframes rv-poster { from { opacity: 0; transform: scale(.55) rotate(-4deg); filter: blur(10px); } }
.rv-marquee img, .rv-noposter {
  position: relative; z-index: 1; display: block; width: min(52vw, 230px); aspect-ratio: 2 / 3; object-fit: cover; border-radius: 4px; background: var(--surface);
}
.rv-noposter { display: grid; place-items: center; padding: 16px; font-family: var(--serif); font-size: 28px; color: var(--ink); }
.rv-title { margin: 26px 0 6px; font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 8vw, 58px); line-height: 1.05; color: #fff3d6; text-wrap: balance; }
.rv-title em { color: var(--accent); }
.reveal.show .rv-title { animation: rv-up .6s .55s ease-out both; }
.rv-votes { margin: 0; font-size: 16px; color: var(--muted); }
.reveal.show .rv-votes { animation: rv-up .6s .75s ease-out both; }
@keyframes rv-up { from { opacity: 0; transform: translateY(14px); } }
.rv-skip { position: absolute; bottom: 22px; left: 0; right: 0; margin: 0; text-align: center; font-size: 13.5px; color: var(--faint); z-index: 5; opacity: 0; }
.reveal.show .rv-skip { opacity: 1; animation: rv-up .6s 2.2s ease-out both; }

.rv-confetti { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.rv-confetti i { position: absolute; top: -20px; left: var(--x); width: var(--w); height: calc(var(--w) * 1.6); border-radius: 1px; background: var(--c); opacity: 0; }
.reveal.show .rv-confetti i { animation: rv-fall var(--t) var(--d) cubic-bezier(.3, .4, .6, 1) forwards; }
@keyframes rv-fall {
  0% { opacity: 1; transform: translate(0, 0) rotate(0); }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), 110vh) rotate(var(--r)); }
}

/* reduced motion: no countdown, flash or confetti; the winner simply fades in with steady lights */
.reveal.calm .rv-leader, .reveal.calm .rv-flash { display: none; }
.reveal.calm .rv-win { visibility: visible; animation: rv-in .6s ease-out both; }
.reveal.calm .rv-skip { opacity: 1; }
@media (max-width: 640px) {
  .rv-marquee { padding: 15px; }
  .rv-kicker { font-size: 13px; }
}


/* Group Vote: the lobby's always-visible explanation and "Find our movie" */
.g-go { width: 100%; max-width: 560px; margin-top: 4px; text-align: center; }  /* the line above already ends with a 28px gap */
.g-how { margin: 0 auto 20px; font-size: 16px; line-height: 1.5; color: var(--muted); text-wrap: balance; }
.g-need { margin: 10px 0 0; font-size: 14px; font-style: italic; color: var(--faint); }
/* the winning headline wraps (results headings are otherwise kept on one line) */
body[data-view="results"] h1.g-head { white-space: normal; max-width: 20ch; overflow-wrap: anywhere; }
.rv-title { max-width: min(92vw, 16ch); overflow-wrap: anywhere; }

/* the picks reveal (group.js groupPicksReveal): cards deal in one at a time, "Blending them..." fades in,
   then the cards draw together into the middle and fade before the vote */
.pk-wrap { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 980px; padding: 0 16px; z-index: 2; }
.pk-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 18px; margin: 4px 0 26px; }
.pk-card { margin: 0; width: 132px; display: flex; flex-direction: column; align-items: center; gap: 10px; opacity: 0; }
.pk-card img, .pk-ph { width: 120px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 6px; background: var(--surface);
  box-shadow: 0 0 0 2px #5a4526, 0 16px 40px rgb(0 0 0 / .6), 0 0 34px rgb(242 193 78 / .18); }
.pk-ph { display: grid; place-items: center; padding: 8px; font: 400 18px/1.1 var(--serif); color: var(--ink); text-align: center; }
.pk-card figcaption { display: flex; flex-direction: column; gap: 2px; max-width: 100%; text-align: center; }
.pk-card b { font-size: 15px; color: var(--accent); overflow-wrap: break-word; }
.pk-card span { font-size: 13.5px; line-height: 1.3; color: var(--ink); overflow-wrap: break-word; }   /* full movie titles, never cut off (Sam, 2026-11-09: on phones many suggestion titles were) */
.pk .rv-kicker { opacity: 0; }
.pk.show .rv-kicker { opacity: 1; animation: rv-up .5s ease-out both; }
.pk.show .pk-card { animation: pk-deal .55s var(--d) cubic-bezier(.2, 1.3, .4, 1) both; }
@keyframes pk-deal {
  from { opacity: 0; transform: translateY(60px) rotate(calc(var(--tilt) * 3)) scale(.7); }
  to { opacity: 1; transform: rotate(var(--tilt)); }
}
.pk-next { margin: 0; font: italic 400 clamp(22px, 4vw, 30px)/1.2 var(--serif); color: #fff3d6; opacity: 0; }
.pk.blend .pk-next { opacity: 1; animation: rv-up .6s ease-out both, pk-pulse 1.4s .6s ease-in-out infinite; }
@keyframes pk-pulse { 50% { opacity: .55; } }
.pk.merge .pk-card { animation: pk-merge .9s cubic-bezier(.6, 0, .4, 1) both; }
@keyframes pk-merge {
  from { opacity: 1; transform: rotate(var(--tilt)); }
  to { opacity: 0; transform: scale(.3) rotate(0); filter: blur(4px); }
}
.pk.show .rv-skip { opacity: 1; animation: rv-up .6s 1.5s ease-out both; }
.pk.many .pk-card { width: 92px; }
.pk.many .pk-card img, .pk.many .pk-ph { width: 80px; }
.pk.calm .pk-card, .pk.calm .rv-kicker, .pk.calm .pk-next { opacity: 1; }
@media (max-width: 640px) {
  .pk-cards { gap: 16px 12px; }
  .pk-card { width: 100px; }
  .pk-card img, .pk-ph { width: 88px; }
  .pk.many .pk-card { width: 76px; }
  .pk.many .pk-card img, .pk.many .pk-ph { width: 64px; }
}

/* Group Vote: "five more", under the shortlist (and under the winner, for the host) */
.g-more { width: 100%; max-width: 560px; margin: 30px auto 0; padding: 22px 20px; text-align: center;
  border: 1px dashed var(--line); border-radius: 14px; }
.g-more-q { margin: 0 0 6px; font: 400 26px/1.15 var(--serif); color: var(--ink); }
.g-more-note { margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.g-more .btn { margin-top: 16px; }
.g-more .btn.armed { border-color: var(--accent); color: var(--accent); }

/* Caleb's pilot switch panel (only with ?engine=new on a local copy) */
.pilot-panel {
  position: fixed; right: 12px; bottom: 12px; z-index: 50; max-width: 300px; max-height: 80vh; overflow: auto;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
  font-size: 13px; color: var(--muted); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}
.pilot-panel summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.pilot-panel label { display: flex; justify-content: space-between; gap: 8px; align-items: center; margin-top: 6px; }
.pilot-panel select, .pilot-panel button {
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; font: inherit; padding: 2px 6px;
}
.pilot-panel a { color: var(--accent); }
.pilot-panel p { margin: 8px 0 0; }

/* pilot (?engine=new): the line under the results heading when a pick counted for more */
.unusual-line { max-width: 620px; margin: -14px auto 24px; font-size: 15.5px; line-height: 1.5; color: var(--muted); text-align: center; text-wrap: balance; }
.unusual-line em { font-style: italic; color: var(--ink); }

/* small phones (iPhone SE and narrower): the six pick frames shrink a little so they fit inside the margins */
@media (max-width: 360px) {
  .frames { gap: 3px; }
  .frame, body[data-view="results"] .frame { width: 46px; }
  .frame .slot, body[data-view="results"] .frame .slot { width: 42px; height: 63px; }
  .frame, body[data-view="results"] .frame { --slot-w: 42px; }
  .frame .lbl { font-size: 8.5px; }
  .frame.skipped .slot::after { font-size: 9.5px; }  /* "Skipped" fits the narrower frame */
}

/* after a tap on a frame: a short gold glow around the search box, so the eye goes straight to it */
.search.nudge input { animation: nudge 1.3s ease-out; }
@keyframes nudge {
  0% { box-shadow: 0 0 0 0 rgb(242 193 78 / .75), 0 10px 40px rgb(0 0 0 / .35); border-color: var(--accent); }
  45% { box-shadow: 0 0 0 7px rgb(242 193 78 / .28), 0 10px 40px rgb(0 0 0 / .35); border-color: var(--accent); }
  100% { box-shadow: 0 0 0 12px rgb(242 193 78 / 0), 0 10px 40px rgb(0 0 0 / .35); }
}
@media (prefers-reduced-motion: reduce) { .search.nudge input { animation: none; border-color: var(--accent); } }

/* the one-time welcome for first-time visitors */
.welcome-back { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 16px;
  background: rgb(0 0 0 / .6); backdrop-filter: blur(3px); animation: rv-in .25s ease-out both; }
.welcome-back.out { animation: rv-out .25s ease-in both; }
.welcome { width: min(420px, 100%); padding: 26px 24px 24px; text-align: center; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 70px rgb(0 0 0 / .6); animation: rv-up .35s ease-out both; }
.welcome-kicker { margin: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.welcome h2 { margin: 0 0 14px; font: 400 40px/1.05 var(--serif); color: var(--ink); }
.welcome h2 em { color: var(--accent); }
.welcome p:not(.welcome-kicker) { margin: 0 0 20px; font-size: 16px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.welcome .btn { min-height: 46px; padding: 0 28px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--accent); color: var(--accent-ink); font: 700 16px/1 var(--sans); }

/* streaming services: the bar under the results heading, and the picker sheet */
.svc-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 16px; margin: -14px 0 22px; text-align: center; }
.svc-bar p { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; color: var(--muted); }
.svc-bar p svg, .svc-btn svg { width: 18px; height: 18px; flex: none; color: var(--accent); }
.svc-bar .suggest-link { margin: 0; }
.svc-btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border-radius: 999px; cursor: pointer; text-align: left;
  border: 1px solid var(--line); background: var(--surface); color: var(--muted); font: 500 16.5px/1.35 var(--sans); }   /* a step larger (Caleb, 2026-11-01) */
.svc-btn b { color: var(--ink); font-weight: 700; }
.svc-btn:hover { border-color: var(--accent); }
.svc-none { margin: 0 0 18px; text-align: center; }
.svc-back { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; padding: 16px; background: rgb(0 0 0 / .6); animation: rv-in .2s ease-out both; }
.svc-sheet { position: relative; width: min(560px, 100%); max-height: calc(100dvh - 32px); overflow: auto; padding: 22px 20px 18px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 70px rgb(0 0 0 / .6); }
.svc-sheet h2 { margin: 0 36px 4px 0; font: 400 30px/1.1 var(--serif); }
.svc-sub { margin: 0 0 14px; font-size: 15px; color: var(--muted); }
.svc-sheet h3 { margin: 14px 0 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.svc-chip { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; cursor: pointer; text-align: left;
  border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: 600 14.5px/1.2 var(--sans); }
.svc-chip img, .svc-ph { width: 30px; height: 30px; flex: none; border-radius: 7px; object-fit: cover; background: var(--line); }
.svc-chip small { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 500; color: var(--faint); }
.svc-chip[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.svc-rent { display: flex; align-items: center; gap: 10px; margin: 16px 0 4px; font-size: 15px; color: var(--ink); cursor: pointer; }
.svc-rent input { width: 18px; height: 18px; accent-color: var(--accent); }
.svc-actions { position: sticky; bottom: -18px; display: flex; flex-wrap: wrap; gap: 10px; margin: 16px -20px 0; padding: 12px 20px 16px;
  background: var(--surface-2); border-top: 1px solid var(--line); }  /* always in reach on a phone, however far the list scrolls */
.svc-actions .btn { min-height: 44px; padding: 10px 20px; border-radius: 999px; cursor: pointer; font: 600 15.5px/1 var(--sans);
  border: 1.5px solid var(--line); background: none; color: var(--ink); }
.svc-actions .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.svc-note { margin: 12px 0 0; font-size: 13.5px; color: var(--faint); }
@media (max-width: 640px) { .svc-grid { grid-template-columns: 1fr 1fr; } .svc-chip { font-size: 13.5px; } }

/* One gap for every subheading line directly under a page heading (Caleb, 2026-10-20: "a uniform gap for subheadings
   under headings"): 8px, the gap he approved under "Like Heat" and the Pitch line. Covers the Director's Cut results
   line and intro, "X meets Y", and The Feature's "we leaned on your pick" line. Question headings keep their reserved
   two-line space, and controls under a heading (the streaming bar) aren't subheadings. */
:root { --sub-gap: 8px; }
#app h1:has(+ :is(.dc-asked, .results-pitch, .unusual-line, .dc-lede)) { margin-bottom: var(--sub-gap); }
#app h1 + :is(.dc-asked, .results-pitch, .unusual-line, .dc-lede) { margin-top: 0; }
/* Every further line in that stack sits the same 8px below the one before (Caleb, 2026-10-20: "Only 2 films meet every
   must" was 34px under "With your changes"), and the streaming bar sits 12px under whatever line comes last, as on The
   Pitch's results (it was 2px under that note and 4px under "With your changes"). */
:root { --bar-gap: 12px; }
#app .dc-asked:has(+ .note) { margin-bottom: var(--sub-gap); }
#app .dc-asked + .note { margin-top: 0; }
#app :is(.dc-asked, .dc-asked + .note):has(+ .svc-bar) { margin-bottom: 0; }
#app :is(.dc-asked, .dc-asked + .note) + .svc-bar { margin-top: var(--bar-gap); }

/* Short desktop windows, such as a 14-inch laptop's browser (about 800 pixels tall): a question screen in The Feature
   or The Pitch shows everything through Clear picks without scrolling (Caleb, 2026-10-24). Only the spacing and the
   heading's size tighten; taller windows keep the full spacing. */
@media (min-width: 641px) and (max-height: 940px) {
  body[data-view="step"] main, body[data-view="dc"] main { padding-top: 6px; }   /* The Director's Cut starts in the same place */
  body[data-view="step"] h1.q-head { font-size: min(58px, 6.4vw); margin-bottom: 28px; }
  body[data-view="step"] .helpers .suggest-link { margin-top: 10px; }
  body[data-view="step"] .frames, body[data-view="step"] .pitch-frames { margin-top: 26px; }
  body[data-view="step"] .picks-note { margin-top: 12px; }
}

/* results pages: a way back above the heading, so nobody scrolls to the bottom for it (Caleb, 2026-10-25) */
.results-back { margin: 0 0 var(--sub-gap); }
.results-back .suggest-link { padding: 0; min-height: 0; line-height: 1.4; }
.results-back:has(.more-control) { margin-bottom: 20px; }   /* its own line, not a label stuck to the heading (Caleb, 2026-11-08) */
/* the Pitch's ✕ on a chosen movie (Caleb, 2026-10-25), placed and shown like The Feature's */
.pitch-slot { position: relative; --slot-w: 110px; }
.pitch-slot .frame-x { top: -7px; }
.pitch-slot:hover .frame-x, .pitch-slot:focus-visible .frame-x { opacity: 1; }
/* the dismiss X under the match score (Caleb, 2026-10-25; an X since 10-26) */
.score .dismiss { position: relative; margin-top: 10px; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border-radius: 50%;
  color: var(--muted); background: none; border: 1px solid var(--line); cursor: pointer; }
.score .dismiss:hover, .score .dismiss:focus-visible { color: var(--ink); border-color: var(--accent); }
@media (max-width: 640px) { .score .dismiss { margin: 0 0 0 auto; align-self: center; } }
/* On wider screens the ✕ sits at the card's vertical middle, under the score but never higher than just below it
   (Sam, 2026-10-27); the score itself stays where it was, beside the poster */
@media (min-width: 641px) {
  .match .score { align-self: stretch; height: auto; min-height: 126px; justify-content: flex-start; padding-top: 7px; position: relative; }
  .score .dismiss { position: absolute; margin: 0; left: 50%; top: max(83px, calc(50% - 19px)); transform: translateX(-50%); }
}
/* the dismiss button's hover label, at once (a title waits a second) */
.score .dismiss[data-tip]:hover::after, .score .dismiss[data-tip]:focus-visible::after { content: attr(data-tip); position: absolute; top: calc(100% + 6px); right: -48px;
  white-space: nowrap; padding: 5px 9px; border-radius: 6px; font: 600 12.5px/1.2 var(--sans); letter-spacing: 0; text-transform: none;
  color: var(--ink); background: var(--surface-2); border: 1px solid var(--line); box-shadow: 0 4px 14px rgb(0 0 0 / .4); z-index: 5; pointer-events: none; }
/* a dismissed card folds away at once (Caleb, 2026-10-26); the film that moves up fades and slides in */
.match.folding { overflow: hidden; pointer-events: none; }
.match.folding.gone { height: 0 !important; margin-top: -12px; padding-top: 0; padding-bottom: 0; border-width: 0; opacity: 0;
  transition: height .28s ease, margin .28s ease, padding .28s ease, opacity .14s ease, border-width .28s ease; }
/* its Undo: notices stacked in the bottom right, outside the results, newest at the bottom; a dark chip like the site's
   cards with a gold Undo (Caleb, 2026-10-26: all gold was loud), as wide as the widest title in the stack */
.undo-stack { position: fixed; right: 20px; bottom: 20px; z-index: 50; display: flex; flex-direction: column; align-items: stretch;
  max-width: min(440px, calc(100vw - 32px)); pointer-events: none; }
.undo-toast { max-width: 100%; overflow: hidden; pointer-events: auto; animation: toast-in .25s ease both; }
.undo-toast-in { display: flex; align-items: center; gap: 14px; margin-top: 10px; padding: 8px 8px 8px 16px;
  border-radius: 12px; background: var(--surface-2); color: var(--ink); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  box-shadow: 0 6px 20px rgb(0 0 0 / .5); font-size: 15px; }
/* the room after the title keeps an italic last letter from being clipped */
.undo-toast-in span { flex: 1; min-width: 0; line-height: 1.35; overflow-wrap: break-word; padding-right: .15em; }   /* full movie titles, never cut off (Sam, 2026-11-09: on phones many suggestion titles were) */
.undo-toast-in em { font-weight: 700; }
.undo-toast-btn { flex: none; padding: 7px 15px; border-radius: 999px; border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink);
  font: 700 14px/1 var(--sans); letter-spacing: .02em; cursor: pointer; transition: filter .15s; }
.undo-toast-btn:hover, .undo-toast-btn:focus-visible { filter: brightness(1.1); }
.undo-toast.gone { height: 0 !important; opacity: 0; transition: height .28s ease, opacity .18s ease; }
@keyframes toast-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) { .undo-stack { right: 16px; bottom: 16px; } }
.match.arriving { animation: card-in .35s ease both; }
@keyframes card-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .match.folding, .match.arriving, .undo-toast { transition: none; animation: none; } }
/* results: the back link sits close under the mode tabs (Caleb, 2026-10-25: too much space) */
.mode-row:has(+ .results-back) { margin-bottom: 6px; }
@media (hover: none) { .score .dismiss[data-tip]::after { display: none; } }   /* no hover on touch screens */
.hidden-films { margin: 14px 0 0; text-align: center; }
.hidden-pop { width: min(360px, calc(100vw - 16px)); }
.hidden-list { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 8px; max-height: 50vh; overflow-y: auto; }
.hidden-list li { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; }
.hidden-list img { width: 30px; height: 45px; object-fit: cover; border-radius: 3px; }
.hidden-list small { color: var(--muted); }
/* where to watch: bigger logos once the panel is open (Caleb, 2026-10-25; on the hit list since October 21: 26px was hard to read) */
.watch .svc img { width: 36px; height: 36px; border-radius: 9px; }
/* the where-to-watch words as big as the 36px logos allow without making the panel taller (Caleb, 2026-10-25) */
.watch .watch-lbl { font-size: 15px; letter-spacing: .05em; }   /* tighter tracking at this size (Caleb: the letters looked spread) */
.watch-empty, .watch.none { font-size: 15px; }
.hidden-pop .hidden-all { text-align: center; margin: 10px 0 0; }   /* centered at the bottom of the list (Caleb, 2026-10-25) */
/* results pages end with the picks row; 9px under it puts its labels as far above the footer as The Feature's
   "Clear picks" (Caleb, 2026-10-26: every mode ends the same distance above "This site uses...") */
body[data-view="results"] #app > :is(nav.frames, nav.pitch-frames):last-child { margin-bottom: 9px; }
body[data-view="results"] #app > .more:last-child { margin-bottom: 10px; }   /* the Director's Cut has no picks row */
body[data-view="results"] #app > .hidden-films:last-child { margin-bottom: 3px; }