/* ============================================================
   yehdekh — "Screening Room"
   A warm, dark private-cinema palette. The one bold move: the hero
   pick lights the room with its poster's own color (--ambient).
   ============================================================ */

@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces.woff2") format("woff2");
  font-weight: 400 650;
  font-display: swap;
}

/* Tokens — see DESIGN.md. Never inline a raw hex, px font-size, or shadow. */
:root {
  /* Netflix's own values — the point is to sit inside the visual grammar of
     the services yehdekh searches, not next to it. */
  --red: #e50914;
  --red-dark: #b20710;
  --red-soft: rgba(229, 9, 20, 0.14);

  --bg: #141414;
  --surface: #1c1c1c;    /* elevation 1 — resting card   */
  --surface-2: #242424;  /* elevation 2 — raised / hover */
  --surface-3: #2b2b2b;  /* elevation 3 — hero interior  */
  --edge: #333333;
  --edge-soft: #242424;
  --ink: #f5f1f1;
  --muted: #a8a3a3;
  --faint: #6f6b6b;
  /* Amber survives for star ratings only — a rating star is gold by
     convention everywhere, and red would read as an error. */
  --brass: #c9a24b;
  --brass-2: #e0bc6a;
  --brass-soft: rgba(201, 162, 75, 0.14);
  --ambient: 229, 9, 20; /* rgb triplet, overridden per hero */

  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --t-hero: clamp(26px, 5.2vw, 34px);
  --t-h1: clamp(28px, 5vw, 40px);
  --t-title: 18px;
  --t-body: 14.5px;
  --t-meta: 13px;
  --t-label: 11px;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 120ms;
  --dur-mid: 280ms;
  --dur-slow: 600ms;

  --maxw: 820px;
  --radius: var(--r-lg);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

/* ============================================================
   HERO — doubles as the results header.
   In home state it fills the viewport; in results state it collapses to a
   slim sticky bar. Keeping one composer in the DOM across both states avoids
   duplicating input state.
   ============================================================ */
.masthead { position: relative; overflow: hidden; background: var(--bg); }
body.home .masthead { min-height: 100vh; }

/* The wall of posters. Blurred only 3px — the point is that titles stay
   recognisable; legibility is bought by the scrim below, not by blur. */
.wall {
  position: absolute; inset: -16%;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px;
  transform: rotate(-4deg) scale(1.16);
  animation: drift 120s linear infinite alternate;
}
.wall img {
  width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--r-sm);
  filter: blur(3px) saturate(1.2) brightness(0.95);
  opacity: 0.64;
}
@keyframes drift {
  from { transform: rotate(-4deg) scale(1.16) translate3d(0, 0, 0); }
  to   { transform: rotate(-4deg) scale(1.16) translate3d(-26px, -18px, 0); }
}
.veil {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(20,20,20,.55), rgba(20,20,20,.42) 40%, rgba(20,20,20,.74));
}
/* Tight scrim behind the copy only — this is what buys legibility. */
.scrim {
  position: absolute; inset: 0; z-index: 2;
  background: radial-gradient(46% 42% at 50% 44%, rgba(20,20,20,.94) 0%, rgba(20,20,20,.80) 45%, transparent 78%);
}
.bloom {
  position: absolute; inset: 0; z-index: 3;
  background: radial-gradient(48% 34% at 50% 30%, rgba(229,9,20,.22), transparent 70%);
}
.grain {
  position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: .34;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
}

/* ---------- top bar ---------- */
.topbar {
  position: relative; z-index: 6;
  max-width: 1180px; margin: 0 auto;
  padding: 24px 20px 0;
  display: flex; align-items: center; justify-content: space-between;
}
.wordmark {
  font-family: var(--display);
  font-weight: 600; font-size: 29px; letter-spacing: -0.01em;
  background: none; border: 0; color: var(--ink); cursor: pointer; padding: 0;
}
.wordmark span { color: var(--red); font-style: italic; }

/* ---------- masthead body ---------- */
.masthead-body {
  position: relative; z-index: 4;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 5vh 20px 8vh;
}
body.home .masthead-body { min-height: 78vh; justify-content: center; }

/* No pill and no red: a red badge reads as an alert, and red is reserved for
   the one primary action on the page. */
.eyebrow {
  font-size: 14.5px; font-weight: 500; margin: 0 0 22px;
  color: var(--muted); text-shadow: 0 1px 16px rgba(0,0,0,.9);
}
.eyebrow b { color: #f2eded; font-weight: 650; }
.headline {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(40px, 6.6vw, 76px); line-height: 1.0; letter-spacing: -0.03em;
  margin: 0; max-width: 15ch;
  text-shadow: 0 2px 30px rgba(0,0,0,.85), 0 1px 4px rgba(0,0,0,.6);
}
.headline em { font-style: italic; color: var(--red); }
.tagline {
  font-size: 16px; margin: 18px 0 0; max-width: 44ch; line-height: 1.5;
  color: #c9c4c4; text-shadow: 0 1px 18px rgba(0,0,0,.9);
}

/* ---------- composer (the one entry point) ---------- */
.composer {
  margin-top: 32px; display: flex; gap: 10px; width: min(640px, 100%);
}
.input {
  flex: 1;
  background: rgba(20,20,20,.62);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(18px);
  border-radius: 14px; padding: 19px 22px;
  color: var(--ink); font-size: 16px; font-family: var(--sans);
  outline: none;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), opacity 180ms;
}
.input::placeholder { color: #a9a4a4; }
.input:focus { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }
.ask {
  background: var(--red); color: #fff;
  border: none; border-radius: 14px; padding: 0 32px;
  font-weight: 800; font-size: 15px; cursor: pointer;
  box-shadow: 0 6px 24px rgba(229,9,20,.45);
  transition: background var(--dur-fast), transform 50ms;
}
.ask:hover { background: var(--red-dark); }
.ask:active { transform: translateY(1px); }
.ask:disabled { opacity: .5; cursor: default; }

/* ---------- suggestion chips ---------- */
.chips { display: flex; gap: 9px; margin-top: 15px; justify-content: center; flex-wrap: wrap; }
.chip {
  border-radius: 999px; padding: 10px 17px; font-size: 13.5px;
  color: #d2cdcd; cursor: pointer; font-family: var(--sans);
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(20,20,20,.5); backdrop-filter: blur(10px);
  transition: border-color var(--dur-fast), color var(--dur-fast);
}
.chip:hover { border-color: var(--red); color: #fff; }

/* ---------- scope strip ----------
   The differentiator stated as fact rather than offered as a form. Reads live
   from the same state the drawer writes. */
.scope {
  margin: 26px 0 0; font-size: 13.5px; color: #8e8989; line-height: 1.7;
  max-width: 64ch; text-shadow: 0 1px 16px rgba(0,0,0,.9);
}
.scope b { color: #dcd7d7; font-weight: 600; }
.change {
  background: none; border: 0; font: inherit; color: #8e8989; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; margin-left: 6px;
}
.change:hover { color: #fff; }

/* ---------- live demo ----------
   A real, pre-resolved result rendered straight from showcase.json. No LLM call
   on page load: zero latency, zero token cost, no failure mode. The magic is
   the typing animation, not the data. */
.demo {
  width: min(760px, 100%); margin: 46px auto 0; text-align: left;
  opacity: 0; transform: translateY(14px);
  transition: opacity 520ms var(--ease), transform 520ms var(--ease);
}
.demo.in { opacity: 1; transform: none; }
.demo-label {
  font-size: 13px; color: var(--muted); text-align: center; margin-bottom: 14px;
  text-shadow: 0 1px 16px rgba(0,0,0,.9);
}
.demo-label em { font-style: italic; color: #ded9d9; }
.demo .pick {
  display: grid; grid-template-columns: 84px 1fr auto; gap: 16px; align-items: center;
  padding: 14px 16px; border: 1px solid var(--edge); border-radius: var(--r-md);
  background: rgba(18,18,18,.93); backdrop-filter: blur(20px);
  box-shadow: 0 18px 50px rgba(0,0,0,.6);
}
.demo .pick img { width: 84px; aspect-ratio: 2/3; object-fit: cover; border-radius: var(--r-sm); background: var(--surface-2); }
.demo .p-name { font-family: var(--display); font-size: 21px; font-weight: 600; line-height: 1.1; }
.demo .p-meta { color: var(--muted); font-size: 12.5px; margin-top: 4px; }
.demo .p-meta .rating { color: var(--brass-2); font-weight: 600; }
.demo .p-go {
  white-space: nowrap; text-decoration: none; font-size: 12.5px; font-weight: 700;
  color: #fff; background: var(--red); border-radius: 999px; padding: 9px 15px;
}
.demo .p-also { color: var(--muted); font-size: 12.5px; margin: 10px 2px 0; text-align: center; text-shadow: 0 1px 16px rgba(0,0,0,.9); }
@media (max-width: 560px) {
  .demo .pick { grid-template-columns: 64px 1fr; grid-template-areas: "img body" "img go"; row-gap: 8px; }
  .demo .pick img { width: 64px; grid-area: img; }
  .demo .p-body { grid-area: body; }
  .demo .p-go { grid-area: go; justify-self: start; }
}

/* On a narrow viewport, fewer columns means bigger, more recognisable posters —
   the whole point of the wall. */
@media (max-width: 560px) {
  .wall { grid-template-columns: repeat(3, 1fr); gap: 9px; }
  .wall img { opacity: .7; }
  .composer { flex-direction: column; }
  .ask { padding: 17px; }
  .masthead-body { padding: 4vh 18px 7vh; }
  .headline { font-size: clamp(36px, 12vw, 52px); }
  .eyebrow { font-size: 13.5px; }
  .tagline { font-size: 15px; }
}

/* ---------- results state ---------- */
body.results .masthead {
  min-height: 0; position: sticky; top: 0; z-index: 30;
  background: var(--bg); border-bottom: 1px solid var(--edge);
}
body.results .wall,
body.results .veil,
body.results .scrim,
body.results .bloom,
body.results .grain { display: none; }
body.results .topbar { padding: 14px 20px 0; }
body.results .wordmark { font-size: 24px; }
body.results .masthead-body { padding: 10px 20px 14px; }
body.results .eyebrow,
body.results .headline,
body.results .tagline,
body.results .chips,
body.results .scope,
body.results .demo { display: none; }
body.results .composer { margin-top: 0; width: min(var(--maxw), 100%); }
body.results .input { background: var(--surface); backdrop-filter: none; }

/* ---------- stage ---------- */
.stage {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 8px 20px 120px;
}
body.home .stage { display: none; }

/* ---------- hero pick ----------
   The signature: the poster lights the card. v4 put the glow at 18% 12% —
   directly behind the opaque poster — so it was invisible. The light now sits
   on open surface (top-right), spills around the poster, and rims both the
   card's top edge and the poster itself. See DESIGN.md §7. */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: 176px 1fr;
  grid-template-areas:
    "poster head"
    "poster synopsis"
    "poster actions";
  align-content: start;
  gap: 0 24px;
  margin: 20px 0 14px;
  padding: 20px;
  border: 1px solid var(--edge);
  border-radius: var(--r-lg);
  background: var(--surface-3);
  box-shadow: inset 0 1px 0 rgba(var(--ambient), 0.28);
  overflow: hidden;
  animation: rise var(--dur-mid) var(--ease) both;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(560px 320px at 86% 2%, rgba(var(--ambient), 0.26), transparent 62%),
    radial-gradient(320px 420px at 20% 45%, rgba(var(--ambient), 0.13), transparent 70%);
  pointer-events: none;
  transition: background var(--dur-slow) ease;
}
.hero > * { position: relative; }
.hero .poster {
  grid-area: poster;
  align-self: start;
  width: 176px;
  aspect-ratio: 2 / 3;
  border-radius: var(--r-md);
  object-fit: cover;
  background: var(--surface-2);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(var(--ambient), 0.3);
}
.h-head { grid-area: head; }
.hero .eyebrow {
  font-size: var(--t-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 600;
  margin-bottom: 6px;
}
.hero .h-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-hero);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0 0 8px;
}
.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: center;
  color: var(--muted);
  font-size: var(--t-meta);
  margin-bottom: 12px;
}
.meta .rating { color: var(--brass-2); font-weight: 600; }
.lang-tag {
  border: 1px solid var(--edge);
  border-radius: var(--r-sm);
  padding: 1px 7px;
  font-size: 11.5px;
  color: var(--muted);
}
.overview {
  grid-area: synopsis;
  color: var(--muted);
  font-size: var(--t-body);
  line-height: 1.55;
  margin: 0 0 16px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Two deliberate rows: the primary action alone, then the feedback group.
   One row would overflow as soon as a title is on two providers
   ("Watch on Netflix / Amazon Prime"), and wrapping looked accidental. */
.actions {
  grid-area: actions;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.feedback {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid var(--edge-soft);
  width: 100%;
}
.watch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  background: var(--red);
  color: #fff;
  text-decoration: none;
  font-weight: 650;
  font-size: 14.5px;
  padding: 0 20px;
  border-radius: var(--r-md);
  transition: filter var(--dur-fast), transform 50ms;
}
.watch:hover { filter: brightness(1.06); }
.watch:active { transform: translateY(1px); }

/* Labelled feedback controls — this is the recommender's learning loop, so it
   can't be three unexplained glyphs. Labels collapse to icons on narrow screens
   (aria-label always carries the meaning). */
.actbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  min-width: 44px;
  padding: 0 13px;
  background: transparent;
  border: 1px solid var(--edge);
  color: var(--muted);
  border-radius: var(--r-md);
  cursor: pointer;
  font-family: var(--sans);
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.actbtn .glyph { font-size: 14px; line-height: 1; }
.actbtn .lbl { font-size: 13px; font-weight: 500; white-space: nowrap; }
.actbtn:hover { color: var(--ink); border-color: var(--red); background: var(--surface-2); }
.actbtn.on { color: #ff5a66; border-color: var(--red); background: var(--red-soft); }

/* ---------- supporting picks ---------- */
.support { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.scard {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--edge);
  border-radius: var(--r-md);
  background: var(--surface);
  animation: rise var(--dur-mid) var(--ease) both;
}
/* Stagger — a list that lands all at once reads as a page load; dealt cards
   read as a recommendation arriving. */
.support .scard:nth-child(2) { animation-delay: 60ms; }
.support .scard:nth-child(3) { animation-delay: 120ms; }
.support .scard:nth-child(4) { animation-delay: 180ms; }
.support .scard:nth-child(n + 5) { animation-delay: 240ms; }
.scard .poster { width: 54px; aspect-ratio: 2/3; border-radius: 7px; object-fit: cover; background: var(--surface-2); }
.scard .s-body { min-width: 0; }
.scard .s-name { font-family: var(--display); font-size: 17px; font-weight: 600; line-height: 1.15; }
.scard .s-meta { color: var(--muted); font-size: 12.5px; margin-top: 2px; display: flex; gap: 8px; flex-wrap: wrap; }
.scard .s-meta .rating { color: var(--brass-2); font-weight: 600; }
.scard .s-watch {
  white-space: nowrap;
  text-decoration: none;
  color: #ff6f78;
  border: 1px solid var(--edge);
  border-radius: 999px;
  padding: 7px 13px;
  font-size: 12.5px;
  font-weight: 600;
  transition: border-color 0.15s, background 0.15s;
}
.scard .s-watch:hover { border-color: var(--red); background: var(--red-soft); }

.section-label {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 22px 2px 10px;
}

/* ---------- refinement chips ---------- */
.refine { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.refine .r-chip {
  background: transparent;
  border: 1px solid var(--edge);
  color: var(--muted);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.refine .r-chip:hover { color: var(--ink); border-color: var(--red); background: var(--surface); }

/* ---------- skeletons ---------- */
.skel { position: relative; overflow: hidden; background: var(--surface); }
.skel::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
  animation: shimmer 1.2s infinite;
}
.skel-hero { box-shadow: none; }
.skel-hero .overview { display: block; } /* opt out of the 3-line clamp */
.skel-line { height: 12px; border-radius: 6px; background: var(--surface-2); margin: 8px 0; }
.skel-poster { border-radius: 10px; background: var(--surface-2); }

.thinking-note { color: var(--muted); font-size: 13px; margin: 14px 2px; display: flex; align-items: center; gap: 9px; }
.thinking-note .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: pulse 1s infinite; }

/* ---------- empty results / errors ---------- */
.notice {
  margin: 24px 2px;
  padding: 18px 18px;
  border: 1px dashed var(--edge);
  border-radius: 12px;
  color: var(--muted);
  font-size: 14.5px;
}
.notice strong { color: var(--ink); font-weight: 600; }

/* ---------- the query echo ---------- */
.asked {
  font-family: var(--display);
  font-size: 15px;
  color: var(--faint);
  margin: 20px 2px 2px;
}
.asked b { color: var(--muted); font-weight: 500; font-style: italic; }

/* ---------- profile drawer ---------- */
.drawer-scrim {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 40;
  animation: fade 0.2s;
}
.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(420px, 90vw);
  background: var(--bg);
  border-left: 1px solid var(--edge);
  z-index: 50;
  padding: 22px 22px 30px;
  overflow-y: auto;
  animation: slidein 0.28s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.drawer-head { display: flex; align-items: center; justify-content: space-between; }
.drawer-head h2 { font-family: var(--display); font-weight: 600; font-size: 24px; margin: 0; }
.drawer-close { background: none; border: none; color: var(--muted); font-size: 18px; cursor: pointer; }
.drawer-note { color: var(--muted); font-size: 13.5px; margin: 8px 0 18px; }
.drawer h3 { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); margin: 20px 0 10px; }
.toggle-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.toggle {
  background: var(--surface);
  border: 1px solid var(--edge);
  color: var(--muted);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.14s;
  user-select: none;
}
.toggle.on {
  border-color: var(--red);
  color: var(--ink);
  background: var(--red-soft);
}
.drawer-done {
  width: 100%;
  margin-top: 26px;
  background: var(--red);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 13px;
  font-weight: 650;
  font-size: 15px;
  cursor: pointer;
}

/* ---------- motion ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes slidein { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes shimmer { 100% { transform: translateX(100%); } }
@keyframes pulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto; }
}

/* ---------- focus ---------- */
:where(a, button, input, .toggle):focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

/* ---------- responsive ----------
   At 375px the old side-by-side layout left a ~231px synopsis column, which
   pushed the Watch button ~1100px down the page. Synopsis and actions now span
   full width under the poster row so Watch stays above the fold. */
@media (max-width: 560px) {
  .starters { grid-template-columns: 1fr; }
  .hero {
    grid-template-columns: 112px 1fr;
    grid-template-areas:
      "poster head"
      "synopsis synopsis"
      "actions actions";
    gap: 0 16px;
    padding: 16px;
  }
  .hero .poster { width: 112px; }
  .overview { margin: 14px 0 14px; }
  .actbtn { padding: 0; width: 44px; }
  .actbtn .lbl { display: none; }
  .actions { align-items: stretch; }
  .watch { justify-content: center; }

  /* At 375px the 3-column support row squeezes the meta so it wraps around the
     provider chip. Drop the chip to its own row instead. */
  .scard {
    grid-template-columns: 54px 1fr;
    grid-template-areas:
      "poster body"
      "poster watch";
    align-items: start;
    row-gap: 8px;
  }
  .scard .poster { grid-area: poster; align-self: center; }
  .scard .s-body { grid-area: body; }
  .scard .s-watch {
    grid-area: watch;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    min-height: 36px;
  }
  .wordmark { font-size: 26px; }
}

/* ---------- "not on your services" state (title lookups) ---------- */
.watch-off {
  display: inline-flex;
  align-items: center;
  padding: 11px 16px;
  border: 1px solid var(--edge);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--muted);
  font-size: var(--t-meta);
  font-weight: 500;
}
.s-off {
  white-space: nowrap;
  color: var(--faint);
  font-size: 12px;
  border: 1px solid var(--edge-soft);
  border-radius: 999px;
  padding: 6px 11px;
}

/* ---------- "was this helpful?" ----------
   Asked once per session, not per query — a prompt after every answer stops
   being feedback and starts being nagging. */
.helpful {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 26px 2px 0; padding: 14px 16px;
  border: 1px solid var(--edge); border-radius: var(--r-md); background: var(--surface);
  animation: rise var(--dur-mid) var(--ease) both;
}
.helpful .h-q { color: var(--muted); font-size: 14px; }
.h-btn {
  min-width: 44px; min-height: 44px; font-size: 19px; line-height: 1; cursor: pointer;
  background: transparent; border: 1px solid var(--edge); border-radius: var(--r-md);
  transition: border-color var(--dur-fast), background var(--dur-fast), transform 60ms;
}
.h-btn:hover { border-color: var(--red); background: var(--surface-2); }
.h-btn:active { transform: scale(.94); }

/* ---------- share ---------- */
.share {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin: 14px 2px 0; padding: 14px 16px;
  border: 1px dashed var(--edge); border-radius: var(--r-md);
}
.share .s-q { color: var(--muted); font-size: 14px; margin-right: 2px; }
.sh-btn {
  min-height: 40px; padding: 0 15px; font-size: 13.5px; font-weight: 600; cursor: pointer;
  font-family: var(--sans); color: var(--muted);
  background: transparent; border: 1px solid var(--edge); border-radius: 999px;
  transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast);
}
.sh-btn:hover { color: var(--ink); border-color: var(--red); }
.sh-btn.primary { background: var(--red); color: #fff; border-color: var(--red); }
.sh-btn.primary:hover { background: var(--red-dark); color: #fff; }

@media (max-width: 560px) {
  .share, .helpful { flex-direction: column; align-items: stretch; }
  .share .s-q, .helpful .h-q { text-align: center; margin-bottom: 4px; }
  .helpful { flex-direction: row; justify-content: center; }
}

/* ---------- content type ----------
   Three options because TMDB has exactly two media types; documentary, anime and
   stand-up are genres, not types, so a fourth pill would be a lie. */
.typebar {
  display: inline-flex; gap: 4px; margin-top: 14px; padding: 4px;
  border: 1px solid rgba(255,255,255,.16); border-radius: 999px;
  background: rgba(20,20,20,.5); backdrop-filter: blur(10px);
}
.tbtn {
  min-height: 36px; padding: 0 18px; border: 0; border-radius: 999px;
  background: transparent; color: var(--muted); cursor: pointer;
  font-family: var(--sans); font-size: 13.5px; font-weight: 600;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.tbtn:hover { color: var(--ink); }
.tbtn.on { background: var(--red); color: #fff; }
#scopeType { color: #dcd7d7; font-weight: 600; }

/* Deliberately still visible once results are up. The choice applies to every
   query you send, including the ones typed from the sticky header, so hiding it
   here left "Series" silently switched on with nothing on screen saying so and no
   way to switch it off — the scope strip that carries that note is hidden too.
   Smaller and flatter, to keep the sticky bar shallow. */
body.results .typebar {
  margin-top: 8px; padding: 3px;
  background: var(--surface); backdrop-filter: none;
}
body.results .tbtn { min-height: 30px; padding: 0 14px; font-size: 12.5px; }