/* ==========================================================================
   MEANRANK — design system
   Concept: an instrument that reads every other rating platform and gives
   you one honest number. Dark "measurement console" surface, a condensed
   technical display face for numbers, and a signature "consensus gauge"
   (a ring showing the mean score as an arc) reused at every scale from a
   12px list-row chip to the hero of a title page.
   No build step: plain CSS custom properties, one file, no Tailwind CDN.
   ========================================================================== */

/* ── theme ───────────────────────────────────────────────────────────────
   Light is the default. A reference site people land on from a search
   result and read in daylight shouldn't open as a dark console, and every
   comparable site (IMDb, Rotten Tomatoes, Letterboxd, Metacritic) is light
   by default for the same reason.

   Dark is still here, in full, and reachable three ways: the header
   toggle, the OS setting, or a saved choice. The variable names below are
   roles, not colours -- "--void" is the page ground, "--paper" is the text
   on it -- so every component rule in this file works unchanged in both
   themes and there is exactly one place to edit a palette.

   Precedence, in order: an explicit [data-theme] choice, then the OS
   preference, then light.
   ──────────────────────────────────────────────────────────────────────── */
:root {
  /* -- surfaces -- */
  --void: #ffffff;        /* page ground */
  --slate: #f7f8fa;       /* raised panel */
  --slate-2: #eef1f5;     /* input / hover fill */
  --slate-3: #e2e7ee;     /* pressed / track */
  --border: #d7dde5;
  --border-soft: #e6eaf0;

  /* -- the hard rule --
     Every box that matters is drawn with a real ink border and a solid
     offset shadow rather than a grey hairline and a soft blur. At zero
     corner radius that is what makes a card read as a printed object
     instead of a div; the hairline version is what made the whole site
     read as a settings screen. --border stays for inputs and dividers,
     where an ink line would be shouting. */
  --rule: #12151d;

  /* -- text -- */
  --paper: #12151d;       /* primary text */
  --mist: #596171;        /* secondary text */
  --mist-2: #6a7285;      /* small labels -- dark enough for AA at 11px */

  /* -- accents --
     Brand green. #009966 is the true brand colour, as drawn in the logo;
     these two are the same hue (160) and saturation, darkened for white and
     lightened for near-black so each clears WCAG AA on its own ground.
     Green is a deliberate position, not a default: Rotten Tomatoes owns
     red, IMDb owns yellow, and almost every other aggregator is blue. */
  --signal: #008558;   /* the "consensus" colour: mean score, gauge, primary CTA */
  --signal-dim: #00704b;
  --teal: #00704b;     /* links -- the same family, darker; not a rival accent */
  --teal-dim: #005c3e;
  --coral: #c8412f;    /* low scores / destructive actions */
  --coral-dim: #a53425;

  /* A second, warmer accent, used sparingly: the hero eyebrow and "only
     here" callout tag so far -- anywhere the page should interrupt the
     green for a second so the eye has somewhere else to land. Amber/gold
     rather than a true yellow: IMDb's brand is yellow, and this needs to
     read as "a MEANRANK colour," not as a nod to theirs. */
  --spark: #a05b00;
  --spark-dim: #7f4900;
  --spark-rgb: 160,91,0;

  /* A third accent, used as a structural mark rather than text: a bright
     yellow-green top edge on the big cards (verdict, sidebar, home boxes,
     where-to-watch) instead of the same grey hairline every other box on
     the internet uses. A true bright yellow reads as almost invisible at
     hairline width against a near-white card -- physics, not taste, pure
     yellow is the lightest hue there is -- so this leans a little more
     green than yellow and the stripe runs thick enough (4px) to carry
     the colour anyway. */
  --edge: #7fb800;
  --edge-rgb: 127,184,0;

  /* ── the bright set ────────────────────────────────────────────────────
     Eight saturated colours, identical in both themes, used as solid fills
     and as per-card accents. The site's problem was never the green -- it
     was that green was the only colour on the page, applied at 12% opacity,
     so eight ranking boxes read as eight identical grey rectangles. These
     get cycled across every grid so position carries colour.

     Each one ships with the ink that actually reads on it: the light,
     high-luminance fills (green, lime, gold, cyan) take near-black, the
     darker ones take white. Never guess -- use the pair.
     ──────────────────────────────────────────────────────────────────── */
  --c-green:  #00c46a;  --on-c-green:  #05170e;
  --c-lime:   #b6ec00;  --on-c-lime:   #14180a;
  --c-gold:   #ffb800;  --on-c-gold:   #1b1300;
  --c-orange: #ff6a1f;  --on-c-orange: #1a0700;
  --c-pink:   #ff2d72;  --on-c-pink:   #26000e;
  --c-violet: #5f43e0;  --on-c-violet: #ffffff;
  --c-cyan:   #00c2e0;  --on-c-cyan:   #04161a;
  --c-blue:   #2f6bff;  --on-c-blue:   #ffffff;

  /* The accent a card is currently wearing. Grids reassign it per position
     (see "accent rotation"); everything else inherits the brand green, so a
     one-off card still gets the treatment without being told a colour. */
  --accent: var(--c-green);
  --on-accent: var(--on-c-green);

  /* Tint used behind badges and message strips, as r,g,b triples so the
     same rule can carry a different alpha in each theme. */
  --signal-rgb: 0,133,88;
  --teal-rgb: 0,112,75;
  --mist-rgb: 89,97,113;
  --coral-rgb: 200,65,47;
  --success-rgb: 0,133,88;
  --success: #00734a;   /* dashboard "it worked" green -- not a grade */
  --tint-alpha: .12;
  --paper-rgb: 18,21,29;

  /* Translucent header backdrop, per theme. */
  --header-bg: rgba(255,255,255,.88);
  --overlay: rgba(255,255,255,.82);
  --on-signal: #ffffff;   /* text on a --signal fill */


  /* Sharp on purpose: soft rounded corners are what every comparison/SaaS
     site defaults to, and it's a large part of why this one read as
     generic. Zero radius everywhere a box is a box. Actual circles (the
     gauge ring, small status/provider dots) aren't corner-rounding and
     keep border-radius:50% -- that's a shape, not a softness setting. */
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --shadow-card: 0 1px 2px rgba(16,24,40,.05), 0 8px 24px -12px rgba(16,24,40,.18);
  --shadow-pop: 0 20px 60px -20px rgba(16,24,40,.28);

  --font-display: "Oswald", "Arial Narrow", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* An instrument reads its numbers off a mono face, not a headline font --
     this is the one typographic choice that says "measurement" rather
     than "marketing site" the moment you look at a score. Used only for
     the numbers themselves (gauge, verdict, stat cards, platform values),
     never for words. */
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;

  --container: 1280px;
}

/* The original dark palette, kept intact. Defined once and applied both
   by the OS preference and by an explicit choice. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --void: #0b0d12;
    --slate: #12151d;
    --slate-2: #1a1f2a;
    --slate-3: #232936;
    --border: #262d3b;
    --border-soft: #1d2330;
    --rule: #59647a;

    --paper: #eef0f4;
    --mist: #9aa3b5;
    --mist-2: #7d8697;

    --signal: #00c281;
    --signal-dim: #00ad74;
    --teal: #2fd39a;
    --teal-dim: #00c281;
    --coral: #e2604f;
    --coral-dim: #c14f40;

    --spark: #ffc53d;
    --spark-dim: #ffb020;
    --spark-rgb: 255,197,61;
    --edge: #d4e600;
    --edge-rgb: 212,230,0;
    --accent: var(--c-green);
    --on-accent: var(--on-c-green);

    --signal-rgb: 0,194,129;
    --teal-rgb: 47,211,154;
    --mist-rgb: 154,163,181;
    --coral-rgb: 226,96,79;
    --success-rgb: 0,194,129;
  --success: #2fd39a;
    --success: #2fd39a;
    --tint-alpha: .15;
    --paper-rgb: 238,240,244;

    --header-bg: rgba(11,13,18,.88);
    --overlay: rgba(11,13,18,.7);
    --on-signal: #04150e;


    --shadow-card: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
    --shadow-pop: 0 20px 60px -20px rgba(0,0,0,.7);
  }
}

:root[data-theme="dark"] {
  --void: #0b0d12;
  --slate: #12151d;
  --slate-2: #1a1f2a;
  --slate-3: #232936;
  --border: #262d3b;
  --border-soft: #1d2330;
  --rule: #59647a;

  --paper: #eef0f4;
  --mist: #9aa3b5;
  --mist-2: #7d8697;

  --signal: #00c281;
  --signal-dim: #00ad74;
  --teal: #2fd39a;
  --teal-dim: #00c281;
  --coral: #e2604f;
  --coral-dim: #c14f40;

  --spark: #ffc53d;
  --spark-dim: #ffb020;
  --spark-rgb: 255,197,61;
  --edge: #d4e600;
  --edge-rgb: 212,230,0;
  --accent: var(--c-green);
  --on-accent: var(--on-c-green);

  --signal-rgb: 0,194,129;
  --teal-rgb: 47,211,154;
  --mist-rgb: 154,163,181;
  --coral-rgb: 226,96,79;
  --success-rgb: 0,194,129;
  --success: #2fd39a;
  --tint-alpha: .15;
  --paper-rgb: 238,240,244;

  --header-bg: rgba(11,13,18,.88);
  --overlay: rgba(11,13,18,.7);
  --on-signal: #04150e;


  --shadow-card: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  --shadow-pop: 0 20px 60px -20px rgba(0,0,0,.7);
}


/* ── grades ───────────────────────────────────────────────────────────────
   Six distinct colours, not six steps along one gradient. The previous ramp
   walked green through olive to red, which meant A+, A, B and C all landed
   in the same yellow-green family and were near-impossible to tell apart at
   badge size.

   These follow the order everyone already reads without being taught:
   green is good, blue is fine, yellow is a warning, orange is worse, red is
   bad. A+ is the brand green; A is a distinctly brighter green so the top
   two read as related but not identical.

   The chips are solid fills and identical in both themes -- a grade should
   look the same everywhere, the way a traffic light does. Each carries the
   text colour that actually reads on it, which is why C and D take dark
   text: white on yellow is 1.9:1 and illegible.
   ──────────────────────────────────────────────────────────────────────── */
.grade-a-plus { --g-fill: #00734a; --g-ink: #ffffff; }  /* deep green   5.9:1 */
.grade-a      { --g-fill: #4ca64c; --g-ink: #12151d; }  /* green        6.0:1 */
.grade-b      { --g-fill: #1f63c4; --g-ink: #ffffff; }  /* blue         5.8:1 */
.grade-c      { --g-fill: #eab308; --g-ink: #12151d; }  /* yellow       9.5:1 */
.grade-d      { --g-fill: #e06c0a; --g-ink: #12151d; }  /* orange       5.5:1 */
.grade-f      { --g-fill: #c62828; --g-ink: #ffffff; }  /* red          5.6:1 */
.grade-none   { --g-fill: var(--slate-2); --g-ink: var(--mist-2); }

/* Where the grade tints something other than a chip -- the gauge arc, an
   inline label -- it uses the fill as a colour rather than a background. */
.grade-a-plus, .grade-a, .grade-b, .grade-c, .grade-d, .grade-f, .grade-none,
.arc-a-plus, .arc-a, .arc-b, .arc-c, .arc-d, .arc-f {
  color: var(--g-fill);
  stroke: var(--g-fill);
}

* { box-sizing: border-box; }
/* scroll-padding-top: a link to #your-history or #google lands with its
   heading below the sticky header (about 66px), not hidden behind it. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0;
  background: var(--void);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: .01em; margin: 0; }

::selection { background: var(--signal); color: var(--on-signal); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
  border-radius: 0;
}

.container { max-width: var(--container); margin: 0 auto; padding: 0 20px; }

/* ── header ──────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--header-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-soft);
}
.site-header__inner {
  display: flex; align-items: center; gap: 20px;
  height: 64px;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-size: 20px; font-weight: 700;
  letter-spacing: .02em; color: var(--paper); white-space: nowrap;
}
.brand__mark {
  width: 26px; height: 26px; flex-shrink: 0;
  color: var(--signal);
}
/* One flex item, so the gap sits between mark and word -- not between
   "Mean" and "Rank". MEANRANK is one word. */
.brand__word { white-space: nowrap; }
.brand--sm { font-size: 15px; }
.brand--sm .brand__mark { width: 18px; height: 18px; }
.brand__accent { color: var(--signal); }

.main-nav { display: flex; align-items: center; gap: 4px; flex: 1; }
.main-nav a {
  padding: 8px 12px; border-radius: var(--radius-sm);
  font-size: 14px; color: var(--mist); font-weight: 500;
  transition: color .15s, background .15s;
}
.main-nav a:hover, .main-nav a.is-active { color: var(--paper); background: var(--slate-2); }

/* "More": open on hover and on keyboard focus, no JavaScript. :focus-within
   is what makes it work from the keyboard -- tabbing into the button opens
   the panel and tabbing past the last link closes it again. */
.nav-more { position: relative; }
.nav-more__btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: 0; cursor: pointer; font: inherit;
  padding: 8px 12px; border-radius: var(--radius-sm);
  font-size: 14px; color: var(--mist); font-weight: 500;
}
.nav-more__btn svg { width: 13px; height: 13px; }
.nav-more:hover .nav-more__btn, .nav-more:focus-within .nav-more__btn { color: var(--paper); }
.nav-more__panel {
  display: none;
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  min-width: 190px; padding: 6px;
  background: var(--void); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-card);
}
.nav-more:hover .nav-more__panel,
.nav-more:focus-within .nav-more__panel { display: block; }
.nav-more__panel a { display: block; white-space: nowrap; }
/* The panel sits a few pixels below the button so it reads as a separate
   surface. Those few pixels are not part of anything hoverable, so moving
   the cursor down from "More" left .nav-more, closed the panel, and the
   menu vanished before you could reach it. This bridges the gap: an
   invisible strip that belongs to the panel, so the pointer never leaves. */
.nav-more__panel::before {
  content: ""; position: absolute;
  left: 0; right: 0; top: -10px; height: 10px;
}

.search-form { flex: 1; max-width: 300px; margin-left: auto; position: relative; }
.search-form input {
  width: 100%; background: var(--slate-2); border: 1px solid var(--border);
  color: var(--paper); border-radius: 0; padding: 9px 16px 9px 38px;
  font-size: 14px;
}
.search-form input::placeholder { color: var(--mist-2); }
.search-form svg {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--mist-2); pointer-events: none;
}

/* ── nav toggle: hamburger that folds into an X ──────────────────────────
   Driven entirely by the aria-expanded attribute main.js already sets, so
   the visual state cannot drift out of step with the state screen readers
   are told about -- there is one flag, not a class for CSS and an attribute
   for assistive tech.

   The two outer bars travel to the middle and rotate; the centre bar fades.
   Transforms and opacity only, so it composites on the GPU and doesn't
   reflow the header mid-animation.
   ──────────────────────────────────────────────────────────────────────── */
.nav-toggle {
  display: none; background: none; border: 0; color: var(--paper);
  padding: 8px; cursor: pointer; line-height: 0;
}
.nav-toggle__box {
  display: block; position: relative; width: 22px; height: 16px;
}
.nav-toggle__bar {
  position: absolute; left: 0; width: 100%; height: 2px;
  background: currentColor;
  transition: transform .22s ease, opacity .14s ease;
}
.nav-toggle__bar:nth-child(1) { top: 0; }
.nav-toggle__bar:nth-child(2) { top: 7px; }
.nav-toggle__bar:nth-child(3) { top: 14px; }

/* Open: collapse both outer bars onto the centre line, then cross them. */
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
  opacity: 0; transform: scaleX(.4);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Someone who has asked for less motion still needs the state to be
   legible, so the X is drawn -- it just arrives without the travel. */
@media (prefers-reduced-motion: reduce) {
  .nav-toggle__bar { transition: none; }
}

@media (max-width: 880px) {
  /* The nav becomes a drop-down panel under the header. Previously it was
     just `display:none` here with no open state, so the hamburger toggled
     a class that no rule listened to and the menu was unreachable on
     exactly the screens the button exists for. */
  .main-nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--void);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-card);
    padding: 6px 20px 12px;
    max-height: calc(100vh - 64px); overflow-y: auto;
  }
  .main-nav.is-open { display: flex; }
  .main-nav a { padding: 12px 8px; border-radius: var(--radius-sm); font-size: 15px; }
  .main-nav a + a { border-top: 1px solid var(--border-soft); }
  /* The nav is already a panel here, so "More" would be a panel inside a
     panel. Its button goes and its links just carry on down the list. */
  .nav-more { position: static; }
  .nav-more__btn { display: none; }
  .nav-more__panel {
    display: block; position: static; min-width: 0;
    padding: 0; background: none; border: 0; box-shadow: none;
  }
  /* No gap to bridge here, and nothing to position against either: the
     panel is static, so the strip would hang off whatever ancestor
     happened to be positioned and sit over the page. */
  .nav-more__panel::before { display: none; }
  .nav-more__panel a { border-top: 1px solid var(--border-soft); }
  .search-form { max-width: none; }
  .nav-toggle { display: block; }
  body.nav-open { overflow: hidden; }
}

/* ── mobile search: icon in the bar, sheet under it ──────────────────────
   At 375px the inline input measured 57px wide with 38px of that taken by
   its own icon padding -- about 19px to type in, and the placeholder never
   appeared at all. Below 600px the input leaves the header row and the
   magnifier button takes its place, opening the same form as a full-width
   sheet directly beneath the bar.

   600px is where the arithmetic stops working, not a round number: the row
   costs the brand (123px) plus two 36px buttons plus three 28px gaps plus
   the container's 40px of padding, so a usable ~180px input needs about
   500px of viewport and anything under 600 is already tight.
   ──────────────────────────────────────────────────────────────────────── */
.search-toggle { display: none; }

@media (max-width: 600px) {
  .search-toggle {
    display: grid; place-items: center;
    width: 36px; height: 36px; flex-shrink: 0;
    margin-left: auto;                 /* takes the slot the input had */
    background: var(--void); color: var(--paper);
    border: 2px solid var(--rule); border-radius: 0;
    cursor: pointer; padding: 0;
  }
  .search-toggle svg { width: 17px; height: 17px; }
  .search-toggle[aria-expanded="true"] {
    background: var(--c-green); color: var(--on-c-green);
  }

  /* Out of the header row, into a sheet. Hidden with display:none rather
     than height/opacity so the input is genuinely unreachable by tab or by
     a screen reader while it is closed. */
  .search-form {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    margin: 0; padding: 12px 20px 14px;
    background: var(--void);
    border-bottom: 2px solid var(--rule);
    box-shadow: 0 10px 18px -12px rgba(0,0,0,.28);
    z-index: 41;                       /* above the nav panel's 40 */
  }
  .search-form.is-open { display: block; }

  /* A real target: 46px tall, and 16px text because anything smaller makes
     iOS Safari zoom the whole page on focus. */
  .search-form input {
    height: 46px; font-size: 16px;
    padding: 9px 14px 9px 42px;
    background: var(--void);
    border: 2px solid var(--rule);
  }
  /* The form is now the positioned ancestor itself, so the icon's offsets
     resolve against the sheet's padding box rather than the input. Sheet
     padding is 20px left and 12px top, and the input is 46px tall, so these
     put the icon inside the field rather than out in the sheet's margin. */
  .search-form svg {
    left: 34px; top: 35px; transform: translateY(-50%);
    width: 18px; height: 18px; color: var(--mist);
  }

  /* The magnifier moved into the button, so the brand no longer has to share
     the row with a dead 57px input. */
  .site-header__inner { gap: 12px; }
}

/* ── hero ────────────────────────────────────────────────────────────────
   A flat single-colour band read as the site's biggest source of "this
   looks like a decade-old dashboard" -- so the hero is the one place a
   gradient mesh, a texture and a moving highlight are allowed to do more
   than a hairline border ever could. Everything else on the site stays
   restrained; this is where the brand gets to have a pulse. */
.hero {
  position: relative; overflow: hidden;
  padding: 56px 0 40px;
  background:
    radial-gradient(680px 340px at 12% -10%, rgba(var(--signal-rgb),.16), transparent 60%),
    radial-gradient(560px 320px at 88% 0%, rgba(var(--spark-rgb),.14), transparent 62%),
    radial-gradient(900px 500px at 50% 120%, rgba(var(--edge-rgb),.07), transparent 65%);
  border-bottom: 1px solid var(--border-soft);
}
/* A faint dot grid, the one "texture" allowed on the site -- it reads as
   an instrument's ground glass, not decoration, and disappears entirely
   past the hero. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(var(--paper-rgb),.14) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(700px 340px at 20% 0%, #000, transparent 75%);
  mask-image: radial-gradient(700px 340px at 20% 0%, #000, transparent 75%);
  opacity: .5;
}
.hero .container { position: relative; z-index: 1; }
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; text-transform: uppercase; letter-spacing: .14em;
  color: var(--spark); font-weight: 600; margin-bottom: 12px;
}
.hero__eyebrow::before {
  content: ""; width: 16px; height: 2px; background: var(--spark); flex-shrink: 0;
}
.hero h1 {
  font-size: clamp(30px, 5vw, 48px); line-height: 1.08; color: var(--paper);
  max-width: 17ch; margin-bottom: 16px;
}
/* A gradient-filled word, used once per hero -- the loudest single element
   on the page, which is the point: it's the word the sentence hinges on. */
.text-spark {
  background: linear-gradient(100deg, var(--signal), var(--spark) 85%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p { color: var(--mist); max-width: 52ch; font-size: 16px; margin-bottom: 28px; }
.hero__search { display: flex; gap: 10px; max-width: 620px; }
.hero__search input {
  flex: 1; background: var(--slate-2); border: 1px solid var(--border);
  color: var(--paper); border-radius: var(--radius-md); padding: 15px 18px; font-size: 16px;
}
.hero__stats { display: flex; gap: 24px; margin-top: 28px; color: var(--mist); font-size: 13px; }
.hero__stats strong { color: var(--paper); font-family: var(--font-mono); font-size: 16px; }

/* Shorter variant for the homepage: the rankings are the reason to be on
   this page, so the hero's job is to identify the site and get out of the
   way, not fill the first screen. */
.hero--compact { padding: 32px 0 26px; }
.hero--compact h1 { font-size: clamp(26px, 4vw, 38px); margin-bottom: 10px; }
.hero--compact p { margin-bottom: 18px; font-size: 15px; }
.hero--compact .hero__search input { padding: 11px 16px; font-size: 15px; }
.hero--compact .hero__stats { margin-top: 18px; }

/* Animation's hub leads with the spark accent rather than the signal green
   -- a small signal that this section reads differently from the rest of
   the site, the same way its rankings are kept separate underneath. */
.hero--animation {
  background:
    radial-gradient(680px 340px at 85% -20%, rgba(var(--spark-rgb),.20), transparent 60%),
    radial-gradient(500px 300px at 10% 20%, rgba(var(--signal-rgb),.10), transparent 62%);
}

/* ── homepage: platform/region ranking boxes ────────────────────────────
   Fixed four columns on desktop -- eight boxes read as two even rows
   rather than however many happen to fit at 220px each, which produced an
   ugly 5+3 split at some widths. */
.home-box-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(4, 1fr);
}
.home-box { padding: 14px; }
@media (max-width: 1080px) { .home-box-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .home-box-grid { grid-template-columns: 1fr; } }

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.chip {
  font-size: 12.5px; padding: 6px 12px; border-radius: 0;
  border: 1px solid var(--border); color: var(--mist); background: var(--slate);
  transition: border-color .15s, color .15s;
}
.chip:hover { border-color: var(--teal); color: var(--paper); }

/* ── buttons ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600;
  border: 1px solid transparent; transition: transform .1s, filter .15s, background .15s;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: linear-gradient(135deg, var(--signal), var(--signal-dim));
  color: var(--on-signal);
  box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 0 0 0 rgba(var(--signal-rgb),0);
  transition: transform .1s, filter .15s, box-shadow .2s;
}
.btn-primary:hover { filter: brightness(1.08); box-shadow: 0 4px 18px -4px rgba(var(--signal-rgb),.45); }
.btn-secondary { background: var(--slate-2); color: var(--paper); border-color: var(--border); }
.btn-secondary:hover { border-color: var(--teal); }
.btn-ghost { color: var(--mist); }
.btn-ghost:hover { color: var(--paper); }
.btn-danger { background: var(--coral); color: #fff; }
.btn-danger:hover { filter: brightness(1.1); }
.btn-sm { padding: 7px 13px; font-size: 13px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .5; pointer-events: none; }

/* ── section headers ─────────────────────────────────────────────────── */
/* padding-block, not the shorthand: several pages use <div class="container
   section">, and `padding: 44px 0` here resets the container's own 20px side
   padding -- .section is defined later in this file, so it won. That put the
   whole rankings hub flush against the window edge. */
.section { padding-block: 44px; }
/* A tinted band, used sparingly to break up a page that would otherwise be
   one uninterrupted field of --void -- rhythm, not a new layout. */
.section--tint { background: var(--slate); }
.section-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  margin-bottom: 20px; flex-wrap: wrap;
}
.section-head h2 { font-size: 22px; color: var(--paper); display: flex; align-items: center; gap: 10px; }
.section-head h2::before {
  content: ""; width: 4px; height: 20px; flex-shrink: 0; background: var(--edge);
}
.section-head__count { font-family: var(--font-body); font-size: 13px; font-weight: 400; color: var(--mist-2); }
/* Unscoped on purpose -- this used to only be defined under .section-head,
   so a "Full ranking" link placed anywhere else (a home box, a hub card)
   silently fell back to plain body text: no colour, no weight, easy to
   miss next to a properly styled one on the very next page. One class,
   one look, wherever it's used. */
.view-all { font-size: 13px; color: var(--teal); font-weight: 600; }
.view-all:hover { text-decoration: underline; }

.tab-row { display: inline-flex; background: var(--slate-2); border-radius: 0; padding: 4px; gap: 2px; }
.tab-row a, .tab-row button {
  padding: 7px 16px; border-radius: 0; font-size: 13px; font-weight: 600;
  color: var(--mist); background: none; border: 0;
}
.tab-row a.is-active, .tab-row button.is-active { background: var(--void); color: var(--paper); }

/* ── the consensus gauge (signature component) ──────────────────────── */
.gauge { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.gauge svg { transform: rotate(-90deg); }
.gauge circle.track { stroke: var(--slate-3); fill: none; }
.gauge circle.arc { fill: none; stroke-linecap: round; transition: stroke-dashoffset .4s ease; }
.gauge__label {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
}
.gauge__score { font-family: var(--font-mono); font-weight: 700; line-height: 1; color: var(--paper); }
.gauge__letter { font-size: 10px; font-weight: 700; letter-spacing: .05em; margin-top: 2px; }
.gauge--sm .gauge__score { font-size: 12px; }
.gauge--md .gauge__score { font-size: 18px; }
.gauge--lg .gauge__score { font-size: 30px; }
.gauge--xl .gauge__score { font-size: 44px; }
.gauge--sm .gauge__letter, .gauge--md .gauge__letter { display: none; }

/* The .grade-* classes above already set colour and stroke from --g-fill;
   the .arc-* aliases the gauge uses map onto the same fills. */
.arc-a-plus { --g-fill: #00734a; } .arc-a { --g-fill: #4ca64c; }
.arc-b      { --g-fill: #1f63c4; } .arc-c { --g-fill: #eab308; }
.arc-d      { --g-fill: #e06c0a; } .arc-f { --g-fill: #c62828; }
.arc-none   { --g-fill: #9aa3b5; }

/* ── media cards (grid) ──────────────────────────────────────────────── */
.card-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.card-grid--scroll {
  display: flex; gap: 14px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x proximity;
  /* Fades the last ~40px of the row rather than cutting a poster off dead
     square -- the visual cue that there's more to scroll to. */
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
}
.card-grid--scroll .media-card { width: 150px; flex-shrink: 0; scroll-snap-align: start; }
.card-grid--scroll::-webkit-scrollbar { height: 6px; }
.card-grid--scroll::-webkit-scrollbar-thumb { background: var(--slate-3); border-radius: 0; }

.media-card { display: block; }
.media-card__poster {
  position: relative; aspect-ratio: 2/3; border-radius: var(--radius-md);
  overflow: hidden; background: var(--slate-2); margin-bottom: 8px;
  box-shadow: var(--shadow-card); border: 1px solid var(--border-soft);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.media-card__poster img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.media-card:hover .media-card__poster img { transform: scale(1.04); }
.media-card:hover .media-card__poster {
  border-color: rgba(var(--signal-rgb),.5);
  box-shadow: 0 2px 4px rgba(16,24,40,.06), 0 14px 30px -14px rgba(var(--signal-rgb),.4);
  transform: translateY(-2px);
}
.media-card__gauge { position: absolute; top: 6px; right: 6px; background: var(--overlay); border-radius: 50%; backdrop-filter: blur(4px); }
.media-card__rank {
  position: absolute; top: 6px; left: 6px; width: 22px; height: 22px; border-radius: 0;
  background: var(--overlay); color: var(--paper); font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; font-family: var(--font-display);
}
.media-card__title { font-size: 13.5px; font-weight: 600; color: var(--paper); line-height: 1.3; }
.media-card:hover .media-card__title { color: var(--signal); }
.media-card__meta { font-size: 12px; color: var(--mist-2); margin-top: 2px; }
.media-card--empty { color: var(--mist-2); font-size: 13px; padding: 20px 0; }

/* ── list rows (search / rankings / year / genre) ───────────────────── */
.media-row {
  display: flex; align-items: center; gap: 14px; padding: 10px;
  border: 1px solid var(--border-soft); border-radius: var(--radius-md);
  background: var(--slate); margin-bottom: 8px; transition: border-color .15s, background .15s;
}
.media-row:hover { border-color: var(--border); background: var(--slate-2); }
.media-row__rank { width: 26px; text-align: right; font-family: var(--font-display); color: var(--mist-2); font-size: 15px; flex-shrink: 0; }
.media-row__poster { width: 46px; height: 68px; border-radius: 0; overflow: hidden; flex-shrink: 0; background: var(--slate-2); }
.media-row__poster img { width: 100%; height: 100%; object-fit: cover; }
.media-row__body { flex: 1; min-width: 0; }
.media-row__title { font-size: 15px; font-weight: 600; color: var(--paper); }
.media-row:hover .media-row__title { color: var(--signal); }
.media-row__meta { font-size: 12.5px; color: var(--mist); margin-top: 2px; display: flex; gap: 8px; flex-wrap: wrap; }
.media-row__meta .sep { color: var(--mist-2); }

/* ── filter bar ──────────────────────────────────────────────────────── */
.filter-bar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding: 14px; background: var(--slate); border: 1px solid var(--border-soft);
  border-radius: var(--radius-md); margin-bottom: 18px;
}
.filter-bar input[type="text"], .filter-bar select {
  background: var(--slate-2); border: 1px solid var(--border); color: var(--paper);
  border-radius: var(--radius-sm); padding: 9px 12px; font-size: 13.5px;
}
.filter-bar input[type="text"] { flex: 1; min-width: 160px; }
.genre-popover { position: relative; }
.genre-popover__menu {
  display: none; position: absolute; top: calc(100% + 6px); right: 0; z-index: 20;
  background: var(--slate-2); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 10px; width: 220px; max-height: 280px; overflow-y: auto; box-shadow: var(--shadow-pop);
}
.genre-popover.is-open .genre-popover__menu { display: block; }
.genre-popover__menu label {
  display: flex; align-items: center; gap: 8px; padding: 6px 4px; font-size: 13px; color: var(--mist);
}
.genre-popover__menu input { accent-color: var(--signal); }
.result-count { font-size: 13px; color: var(--mist); }

/* ── pagination ──────────────────────────────────────────────────────── */
.pagination { display: flex; justify-content: center; gap: 6px; margin: 32px 0; flex-wrap: wrap; }
.pagination a, .pagination span {
  min-width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); font-size: 13.5px; padding: 0 10px;
  border: 1px solid var(--border-soft); color: var(--mist);
}
.pagination a:hover { border-color: var(--teal); color: var(--paper); }
.pagination .is-current { background: var(--signal); color: var(--on-signal); border-color: var(--signal); font-weight: 700; }
.pagination .is-disabled { opacity: .35; pointer-events: none; }

/* ── layout: two-column with sidebar ─────────────────────────────────── */
.layout-2col { display: grid; grid-template-columns: 1fr 300px; gap: 32px; align-items: start; }
/* A grid item's default min-width is auto, which means a track refuses to
   shrink below its widest unbreakable content. On a phone that pushed this
   column to 364px inside a 335px container -- the sidebar, and everything
   in it, sat 29px past the right edge of every other block on the page.
   Nothing here needs to be wider than its column. */
.layout-2col > * { min-width: 0; }
@media (max-width: 940px) { .layout-2col { grid-template-columns: 1fr; } }

.sidebar-card {
  background: var(--slate); border: 1px solid var(--border-soft); border-radius: var(--radius-md);
  border-top: 4px solid var(--edge);
  padding: 18px; margin-bottom: 18px;
}
.sidebar-card h3 { font-size: 14px; color: var(--paper); margin-bottom: 12px; }
.sidebar-list { display: flex; flex-direction: column; gap: 10px; }
.sidebar-item { display: flex; gap: 10px; align-items: center; }
.sidebar-item__poster { width: 40px; height: 58px; border-radius: 0; overflow: hidden; background: var(--slate-2); flex-shrink: 0; }
.sidebar-item__poster img { width: 100%; height: 100%; object-fit: cover; }
.sidebar-item__title { font-size: 12.5px; font-weight: 600; color: var(--paper); line-height: 1.3; }
.sidebar-item:hover .sidebar-item__title { color: var(--signal); }
.sidebar-item__meta { font-size: 11px; color: var(--mist-2); }
.rank-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rank-list li { display: flex; justify-content: space-between; font-size: 13px; color: var(--mist); }
.rank-list a:hover { color: var(--paper); }
.rank-list .rank-num { font-family: var(--font-display); color: var(--signal); font-weight: 700; }

/* ── title detail page ───────────────────────────────────────────────── */
/* Poster and streaming on the left, everything else on the right.
   ---------------------------------------------------------------------
   The left column is the artwork and where to watch it; the right is the
   title, the grade, the ratings and the rest. That pairing is what keeps
   the two columns near enough in height -- the ratings are long, and
   they are what sits beside the streaming box.

   The poster column is 200px rather than 260px. Same arrangement, more
   room for the ratings, which were being laid out two-across in the space
   left over.

   On a phone it stacks, and the order changes: poster, then the title and
   grade and ratings, and "Where to watch" last, immediately above the
   plot. A reader on a phone met a list of streaming services before they
   had been told what they were looking at or whether it was any good.
   Grid areas do that without the markup moving. */
.detail-hero {
  display: grid; gap: 22px 30px; padding: 32px 0;
  grid-template-columns: 240px 1fr;
  grid-template-areas:
    "poster main"
    "watch  main";
  /* The first row is exactly the poster; the second takes whatever is
     left. Both rows were `auto`, and because the right-hand column spans
     them it shared its surplus height between the two -- which pushed
     "Where to watch" 150px away from the poster it belongs under, for no
     reason a reader could see. */
  grid-template-rows: max-content 1fr;
  align-items: start;
}
.detail-hero__poster-col { grid-area: poster; }
.detail-hero__watch      { grid-area: watch; }
.detail-hero__main       { grid-area: main; min-width: 0; }

@media (min-width: 561px) and (max-width: 860px) {
  .detail-hero { grid-template-columns: 200px 1fr; gap: 14px 22px; }
}

@media (max-width: 560px) {
  /* One column, one edge. The poster used to be centred here while the
     title, grade and everything under it were left-aligned -- one element
     on a different axis from the rest, which reads as a mistake rather
     than a choice. */
  .detail-hero {
    grid-template-columns: 1fr;
    grid-template-areas: "poster" "main" "watch";
    gap: 16px; padding: 18px 0;
  }
  /* Big enough to be the artwork rather than a thumbnail. It is the
     first thing on the page and a phone has the width to spare. */
  .detail-hero__poster-col { width: 62%; max-width: 230px; margin: 0; }
  .detail-hero__poster { box-shadow: 5px 5px 0 var(--c-green); }
  .detail-title { font-size: clamp(22px, 6.5vw, 30px); }
  .detail-subline { margin-bottom: 14px; font-size: 13px; }
}
}
.detail-hero__poster-col { display: flex; flex-direction: column; gap: 16px; }
.detail-hero__poster {
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-pop);
  border: 1px solid var(--border-soft); aspect-ratio: 2/3;
}
.detail-hero__poster img { width: 100%; height: 100%; object-fit: cover; }

/* ── where to watch: under the poster, not competing with the ratings ── */
.watch-box {
  background: var(--slate); border: 1px solid var(--border-soft);
  border-top: 4px solid var(--edge);
  border-radius: var(--radius-md); padding: 14px;
}
.watch-list { display: grid; gap: 6px; margin-top: 8px; }
.watch-row {
  /* Tighter than it was: the padding was set around a 22px circle and
     left the box looking half empty once the marks grew. */
  display: flex; align-items: center; gap: 10px; padding: 5px 8px;
  border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 600; color: var(--paper);
}
.watch-row:hover { background: var(--slate-2); }
.watch-row--all { color: var(--mist); font-weight: 500; }
.watch-note { margin: 8px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--mist); }
.watch-note--credit { margin-top: 6px; font-size: 11.5px; }
.watch-note a { text-decoration: underline; }
.watch-row__all-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: var(--radius-sm); flex-shrink: 0;
  background: var(--slate-3); color: var(--mist-2); font-size: 15px;
}
/* The service's own mark, at a size you can actually recognise. 22px was
   drawn for a letter monogram; a real logo at 22px is a smudge, and the
   row had the height to spare -- it was mostly empty space either side of
   a small circle. 32px fills it and the rows tighten up to match. */
.provider-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: var(--radius-sm); overflow: hidden;
}
/* Logos arrive as squares on their own background, so they are shown
   whole rather than cropped to a circle -- Disney+ and Paramount+ are
   wordmarks and a circle cuts them in half. */
.provider-icon--logo { object-fit: contain; background: #fff; }
.provider-icon--letter {
  border-radius: 50%; color: #fff; font-size: 13px; font-weight: 700;
  line-height: 1; font-family: var(--font-display); background: #5a6274;
}
.detail-title { font-size: clamp(26px, 4vw, 38px); color: var(--paper); margin-bottom: 6px; }
.detail-subline { color: var(--mist); font-size: 14px; margin-bottom: 20px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.genre-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; }
.genre-tag {
  font-size: 12px; padding: 5px 11px; border-radius: 0; background: var(--slate-2);
  border: 1px solid var(--border); color: var(--teal);
}
.genre-tag:hover { border-color: var(--teal); }

.consensus-panel { display: flex; align-items: center; gap: 20px; background: var(--slate); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 20px; margin-bottom: 24px; }
.consensus-panel__text h3 { font-size: 15px; color: var(--paper); margin-bottom: 4px; }
.consensus-panel__text p { font-size: 13px; color: var(--mist); margin: 0; }

.platform-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 24px; }
.platform-tile {
  background: var(--slate); border: 1px solid var(--border-soft); border-radius: var(--radius-md);
  padding: 12px 14px;
}
.platform-tile__name { font-size: 11.5px; color: var(--mist-2); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.platform-tile__value { font-family: var(--font-mono); font-size: 18px; color: var(--paper); }
.platform-tile__votes { font-size: 11.5px; color: var(--mist-2); margin-top: 2px; }

.plot-text { color: var(--mist); font-size: 15px; line-height: 1.7; margin-bottom: 24px; max-width: 74ch; }

.crew-line { font-size: 14px; color: var(--mist); margin-bottom: 8px; }
.crew-line strong { color: var(--paper); font-weight: 600; }
.crew-line a { color: var(--paper); }
.crew-line a:hover { color: var(--signal); }

.provider-row { display: flex; flex-wrap: wrap; gap: 10px; }
.provider-chip {
  display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 0;
  background: var(--slate-2); border: 1px solid var(--border); font-size: 13px; font-weight: 600; color: var(--paper);
}
.provider-chip:hover { border-color: var(--signal); }
.provider-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }

.cast-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 14px; }
.cast-card__photo { aspect-ratio: 3/4; border-radius: var(--radius-sm); overflow: hidden; background: var(--slate-2); margin-bottom: 6px; }
.cast-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.cast-card__name { font-size: 12.5px; font-weight: 600; color: var(--paper); }
.cast-card__role { font-size: 11.5px; color: var(--mist-2); }

.award-list { display: flex; flex-direction: column; gap: 10px; }
.award-row {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px;
  background: var(--slate); border: 1px solid var(--border-soft); border-radius: var(--radius-md);
}
.award-row__badge {
  flex-shrink: 0; font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 0;
  text-transform: uppercase; letter-spacing: .04em;
}
.award-row__badge--winner { background: rgba(var(--signal-rgb),var(--tint-alpha)); color: var(--signal); }
.award-row__badge--nominee { background: rgba(var(--mist-rgb),var(--tint-alpha)); color: var(--mist); }
.award-row__name { font-size: 14px; font-weight: 600; color: var(--paper); }
.award-row__meta { font-size: 12.5px; color: var(--mist); margin-top: 2px; }
.awards-summary-line { font-size: 13.5px; color: var(--mist); margin-bottom: 14px; }
details.awards-more summary { cursor: pointer; color: var(--teal); font-size: 13px; font-weight: 600; margin-top: 10px; }

/* ── forms (dashboard) ───────────────────────────────────────────────── */
.field-group { margin-bottom: 16px; }
.field-group label { display: block; font-size: 13px; font-weight: 600; color: var(--mist); margin-bottom: 6px; }
.field-input {
  width: 100%; background: var(--slate-2); border: 1px solid var(--border); color: var(--paper);
  border-radius: var(--radius-sm); padding: 10px 12px; font-size: 14px;
}
.field-textarea { resize: vertical; min-height: 90px; }
.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.field-hint { font-size: 12px; color: var(--mist-2); margin-top: 4px; }
.form-section { margin-bottom: 28px; }
.form-section h3 { font-size: 15px; color: var(--paper); margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--border-soft); }

/* ── dashboard layout ────────────────────────────────────────────────── */
.dash-shell { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
@media (max-width: 860px) { .dash-shell { grid-template-columns: 1fr; } .dash-sidebar { display: none; } }
.dash-sidebar { background: var(--slate); border-right: 1px solid var(--border-soft); padding: 20px 14px; }
.dash-sidebar a {
  display: block; padding: 9px 12px; border-radius: var(--radius-sm); font-size: 13.5px;
  color: var(--mist); font-weight: 500; margin-bottom: 2px;
}
.dash-sidebar a:hover, .dash-sidebar a.is-active { background: var(--slate-2); color: var(--paper); }
.dash-sidebar .dash-group-label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--mist-2); margin: 18px 0 6px 12px; }
.dash-main { padding: 28px 32px; max-width: 1180px; }
.dash-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
.dash-topbar h1 { font-size: 24px; }

.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 28px; }
.stat-card { background: var(--slate); border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: 16px; }
.stat-card__value { font-family: var(--font-mono); font-size: 26px; color: var(--paper); }
.stat-card__label { font-size: 12.5px; color: var(--mist); margin-top: 2px; }
.stat-card--warn .stat-card__value { color: var(--signal); }

.job-card {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 16px; background: var(--slate); border: 1px solid var(--border-soft); border-radius: var(--radius-md);
  margin-bottom: 10px; flex-wrap: wrap;
}
.job-card__name { font-size: 14.5px; font-weight: 600; color: var(--paper); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.job-card__pending {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .04em; padding: 2px 7px; border-radius: 0;
  background: rgba(var(--coral-rgb),.12); color: var(--coral);
}
/* A job with nothing left to do, or one that's a fixed-size full recompute
   rather than a backlog, doesn't deserve the same "needs attention" red
   the coral pill implies everywhere else on the site. */
.job-card__pending--clear { background: rgba(var(--success-rgb),.12); color: var(--success); }
.job-card__pending--neutral { background: var(--slate-2); color: var(--mist-2); }
.job-card__status { font-size: 12.5px; color: var(--mist); margin-top: 4px; }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.status-dot--running { background: var(--signal); animation: pulse 1.2s infinite; }
.status-dot--success { background: var(--success); }
.status-dot--partial { background: var(--c-gold); }
.status-dot--failed { background: var(--coral); }
.status-dot--idle { background: var(--mist-2); }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

table.dash-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.dash-table th { text-align: left; color: var(--mist-2); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; padding: 10px 12px; border-bottom: 1px solid var(--border); }
table.dash-table td { padding: 10px 12px; border-bottom: 1px solid var(--border-soft); color: var(--paper); vertical-align: middle; }
table.dash-table tr:hover td { background: var(--slate-2); }
.table-wrap { overflow-x: auto; background: var(--slate); border: 1px solid var(--border-soft); border-radius: var(--radius-md); }

.badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 0; font-size: 11px; font-weight: 700; }
.badge-movie { background: rgba(var(--teal-rgb),var(--tint-alpha)); color: var(--teal); }
.badge-show { background: rgba(var(--signal-rgb),var(--tint-alpha)); color: var(--signal); }

.messages { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.messages li { padding: 12px 16px; border-radius: var(--radius-sm); font-size: 13.5px; border: 1px solid var(--border); }
.messages .success { background: rgba(var(--success-rgb),.1); color: var(--success); border-color: rgba(var(--success-rgb),.3); }
.messages .error { background: rgba(var(--coral-rgb),.1); color: var(--coral); border-color: rgba(var(--coral-rgb),.3); }
.messages .warning { background: rgba(var(--signal-rgb),.1); color: var(--signal); border-color: rgba(var(--signal-rgb),.3); }

/* ── auth ────────────────────────────────────────────────────────────── */
.auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.auth-card { width: 100%; max-width: 380px; background: var(--slate); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 32px; }
.auth-card h1 { font-size: 22px; margin-bottom: 20px; }

/* ── generic content pages ──────────────────────────────────────────── */
.prose { max-width: 74ch; color: var(--mist); font-size: 15px; line-height: 1.75; }
.prose h2 { color: var(--paper); font-size: 20px; margin: 28px 0 10px; }
.prose ul { padding-left: 20px; }
.prose li { margin-bottom: 6px; }
.page-title { font-size: 30px; color: var(--paper); margin-bottom: 24px; }

.empty-state { text-align: center; padding: 60px 20px; color: var(--mist); }
.empty-state h3 { color: var(--paper); font-size: 18px; margin-bottom: 8px; }

/* ── footer ──────────────────────────────────────────────────────────── */
.site-footer { border-top: 1px solid var(--border-soft); padding: 36px 0; margin-top: 60px; color: var(--mist-2); font-size: 13px; }
.site-footer__links { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 10px; }
.site-footer__links a:hover { color: var(--paper); }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ── theme toggle ─────────────────────────────────────────────────────────
   Two icons in one button; CSS decides which is visible so the control
   works before any JS runs and never shows both mid-load. */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex-shrink: 0;
  background: none; border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--mist);
  transition: color .15s, background .15s, border-color .15s;
}
.theme-toggle:hover { color: var(--paper); background: var(--slate-2); border-color: var(--border); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .icon-moon { display: block; }
.theme-toggle .icon-sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
}
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: block; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: none; }

/* ── rankings hub ─────────────────────────────────────────────────────── */
.hub-group { margin-bottom: 34px; }
.hub-group__label {
  font-family: var(--font-display); font-size: 13px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--mist-2);
  padding-bottom: 8px; margin-bottom: 16px; border-bottom: 1px solid var(--border-soft);
}
.hub-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.hub-card {
  background: var(--slate); border: 1px solid var(--border-soft);
  border-top: 4px solid var(--edge);
  border-radius: var(--radius-md); padding: 14px 16px 12px;
  display: flex; flex-direction: column;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.hub-card:hover {
  border-color: rgba(var(--signal-rgb),.4);
  box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 16px 32px -18px rgba(var(--signal-rgb),.5);
  transform: translateY(-2px);
}
.hub-card__title { font-family: var(--font-display); font-size: 15px; line-height: 1.3; margin-bottom: 2px; }
.hub-card__count { font-size: 12px; color: var(--mist-2); margin-bottom: 10px; }
.hub-card__list { list-style: none; margin: 0 0 10px; padding: 0; flex: 1; }
.hub-card__list li {
  display: flex; gap: 8px; font-size: 13px; color: var(--mist);
  padding: 4px 0; align-items: center;
}
/* Direct-child combinator on purpose: a descendant selector here also
   matches .rank-badge__letter, which is a first-child span too, just
   nested one level deeper inside the badge -- that quietly overrode the
   badge's own white-on-green grade colour with this muted grey. */
.hub-card__list li > span:first-child { color: var(--mist-2); font-variant-numeric: tabular-nums; min-width: 14px; flex-shrink: 0; }
.hub-card__poster {
  width: 26px; height: 38px; flex-shrink: 0; overflow: hidden;
  background: var(--slate-2);
}
.hub-card__poster img { width: 100%; height: 100%; object-fit: cover; }
.hub-card__list li a { color: var(--paper); flex: 1; min-width: 0; }
.hub-card__list li a:hover { color: var(--teal); }
/* Layout only now -- pushes the link to the bottom of a flex card.
   Typography comes from .view-all, alongside it in the markup. */
.hub-card__more { margin-top: auto; }

/* ── ranking builder ─────────────────────────────────────────────────── */
.builder-callout {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: var(--slate); border: 1px solid var(--border-soft); border-top: 4px solid var(--spark);
  border-radius: var(--radius-md); padding: 16px 20px; margin: -6px 0 26px;
}
.builder-callout__text h2 { font-size: 16px; margin-bottom: 3px; }
.builder-callout__text p { margin: 0; font-size: 13.5px; color: var(--mist); }
.builder-genres {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 4px 10px;
  margin-top: 8px;
}
.builder-genres__item {
  display: flex; align-items: center; gap: 7px; padding: 5px 4px;
  font-size: 13.5px; color: var(--mist); cursor: pointer;
}
.builder-genres__item input { accent-color: var(--signal); }

/* ── ranking page intro + axis nav ────────────────────────────────────── */
.ranking-intro {
  color: var(--mist); font-size: 14px; line-height: 1.6;
  max-width: 68ch; margin: -6px 0 22px;
}
.axis-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.axis-nav a, .axis-nav span {
  font-size: 13px; padding: 5px 11px; border-radius: 0;
  border: 1px solid var(--border); color: var(--mist);
}
.axis-nav a:hover { color: var(--paper); background: var(--slate-2); }
.axis-nav .is-active { background: var(--signal); border-color: var(--signal); color: var(--on-signal); font-weight: 600; }

/* ── per-platform rating rows with their own links ────────────────────── */
.rating-rows { display: grid; gap: 8px; margin-bottom: 28px; }
/* One column stacked on a normal screen; two on a wide one, so eight or
   more platforms don't force a long single-file scroll when there's easy
   width to spare either side of the reading column. */
@media (min-width: 900px) {
  .rating-rows { grid-template-columns: repeat(2, 1fr); gap: 8px 12px; }
}
.rating-row {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 14px;
  padding: 11px 14px; background: var(--slate); border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm); transition: border-color .15s, background .15s;
}
div.rating-row:hover { border-color: var(--border); }
/* The whole row is the link now, not just the platform name -- that name
   alone was a small target on a row this wide. */
a.rating-row:hover { border-color: var(--signal); background: var(--slate-2); }
.rating-row__name { font-weight: 600; font-size: 14px; }
.rating-row__ext { color: var(--teal); font-weight: 400; }
.rating-row__value { font-family: var(--font-mono); font-size: 16px; font-variant-numeric: tabular-nums; }
.rating-row__votes { font-size: 12px; color: var(--mist-2); min-width: 74px; text-align: right; }
.rating-row__bar { grid-column: 1 / -1; height: 3px; background: var(--slate-3); border-radius: 0; overflow: hidden; }
.rating-row__bar span { display: block; height: 100%; background: var(--signal); border-radius: 0; }

/* ── awards, grouped by ceremony ──────────────────────────────────────── */
.award-group { margin-bottom: 18px; border: 1px solid var(--border-soft); border-radius: var(--radius-md); overflow: hidden; }
.award-group__head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 10px 14px; background: var(--slate); border-bottom: 1px solid var(--border-soft);
}
.award-group__name { font-family: var(--font-display); font-size: 15px; }
.award-group__count { font-size: 12px; color: var(--mist-2); }
.award-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.award-table td { padding: 8px 14px; border-top: 1px solid var(--border-soft); vertical-align: top; }
.award-table tr:first-child td { border-top: 0; }
.award-table__cat { color: var(--paper); }
.award-table__who { color: var(--mist); }
.award-table__res { text-align: right; white-space: nowrap; }
.award-pill {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; padding: 2px 8px; border-radius: 0;
}
.award-pill--winner { background: rgba(var(--signal-rgb),var(--tint-alpha)); color: var(--signal); }
.award-pill--nominee { background: rgba(var(--mist-rgb),var(--tint-alpha)); color: var(--mist); }

/* ── outbound platform links ──────────────────────────────────────────── */
.link-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.link-chips a {
  font-size: 13px; padding: 6px 12px; border-radius: 0;
  border: 1px solid var(--border); color: var(--mist); transition: all .15s;
}
.link-chips a:hover { color: var(--paper); background: var(--slate-2); border-color: var(--teal); }

/* A notice on pages we deliberately keep out of the index. */
.thin-notice {
  font-size: 13px; color: var(--mist); background: var(--slate);
  border: 1px solid var(--border-soft); border-left: 3px solid var(--signal);
  border-radius: var(--radius-sm); padding: 10px 14px; margin-bottom: 20px;
}

/* ── dashboard: form errors ───────────────────────────────────────────────
   A save that fails has to be impossible to miss. */
.form-errors {
  background: rgba(var(--coral-rgb),.08); border: 1px solid rgba(var(--coral-rgb),.35);
  border-left: 3px solid var(--coral); border-radius: var(--radius-sm);
  padding: 12px 16px; margin-bottom: 22px; color: var(--paper); font-size: 14px;
}
.form-errors ul { margin: 8px 0 0; padding-left: 18px; }
.form-errors li { margin: 3px 0; color: var(--mist); }
.form-errors a { color: var(--coral); font-weight: 600; }
ul.errorlist {
  list-style: none; margin: 5px 0 0; padding: 0;
  font-size: 12.5px; color: var(--coral); font-weight: 500;
}
.field-group:has(ul.errorlist) .field-input { border-color: var(--coral); }

/* ── dashboard: sync job cards ────────────────────────────────────────── */
.job-card__help { font-size: 12.5px; color: var(--mist-2); margin: 2px 0 6px; max-width: 72ch; }
.job-card__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.job-card__actions form { display: flex; align-items: center; gap: 8px; margin: 0; }
.job-limit { font-size: 12px; color: var(--mist-2); display: flex; align-items: center; gap: 5px; }
.job-limit input {
  width: 78px; background: var(--slate-2); border: 1px solid var(--border);
  color: var(--paper); border-radius: var(--radius-sm); padding: 5px 8px; font-size: 13px;
}
.stat-card--good { border-color: rgba(var(--success-rgb),.4); }
.stat-card--good .stat-card__value { color: var(--success); }

@media (max-width: 720px) {
  .job-card { flex-direction: column; align-items: stretch; gap: 10px; }
  .job-card__actions { justify-content: flex-start; flex-wrap: wrap; }
}

/* ── homepage: how the score works ────────────────────────────────────── */
.method-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.method-step {
  background: var(--void); border: 1px solid var(--border-soft);
  border-radius: var(--radius-md); padding: 18px 18px 16px; position: relative;
}
.method-step__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--signal); color: var(--on-signal);
  font-family: var(--font-display); font-size: 14px; font-weight: 700;
  margin-bottom: 10px;
}
.method-step h3 { font-size: 16px; margin-bottom: 6px; }
.method-step p { margin: 0; font-size: 14px; color: var(--mist); line-height: 1.6; }

/* ── prose pages (about / privacy / terms) ────────────────────────────── */
.source-list { list-style: none; padding: 0; margin: 14px 0; }
.source-list li {
  padding: 10px 0 10px 18px; border-left: 2px solid var(--border);
  margin-bottom: 8px; color: var(--mist); font-size: 14.5px; line-height: 1.65;
}
.source-list li strong { color: var(--paper); }

/* ── rank badge ───────────────────────────────────────────────────────────
   The site's own verdict. MEANRANK sells a rank, not another score, so the
   letter is the loud element everywhere it appears and the /100 is small
   supporting text beneath it. */
.rank-badge {
  display: inline-flex; flex-direction: column; align-items: center;
  justify-content: center; flex-shrink: 0; line-height: 1;
  font-family: var(--font-display); font-weight: 700;
  border-radius: var(--radius-sm);
  background: var(--slate-2); border: 1px solid var(--border);
  color: var(--mist-2);
}
.rank-badge__letter { font-size: 1em; letter-spacing: -.01em; }
.rank-badge__score {
  font-family: var(--font-mono); font-weight: 500;
  font-size: .4em; letter-spacing: 0; opacity: .8; margin-top: .18em;
  font-variant-numeric: tabular-nums;
}
.rank-badge--xs { width: 26px; height: 26px; font-size: 13px; }
.rank-badge--sm { width: 40px; height: 40px; font-size: 19px; }
.rank-badge--md { width: 54px; height: 54px; font-size: 25px; }
.rank-badge--lg { width: 84px; height: 84px; font-size: 40px; border-width: 2px; }
.rank-badge--xl { width: 112px; height: 112px; font-size: 54px; border-width: 2px; border-radius: var(--radius-md); }

/* Solid chip. Specificity of two classes, so it beats the colour-only rule
   above and paints the fill as a background instead. */
.rank-badge[class*="grade-"] {
  background: var(--g-fill);
  color: var(--g-ink);
  border-color: transparent;
}
/* A hairline keeps the darkest chips from melting into a dark page. */
:root[data-theme="dark"] .rank-badge[class*="grade-"],
.rank-badge.grade-none {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}
.rank-badge.grade-none { background: var(--g-fill); color: var(--g-ink); }

/* The top grade gets a faint glow ring, everywhere it appears at md size or
   larger -- the one visual cue that this isn't just another A grade, it's
   the top of the whole scale, without adding a second badge or a label. */
.rank-badge--md.grade-a-plus, .rank-badge--lg.grade-a-plus, .rank-badge--xl.grade-a-plus {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 0 0 3px rgba(var(--signal-rgb),.16);
}

.media-card__badge { position: absolute; top: 6px; right: 6px; z-index: 2; }
.media-card__badge .rank-badge { box-shadow: 0 2px 8px rgba(0,0,0,.35); backdrop-filter: blur(4px); }

/* ── tabs ─────────────────────────────────────────────────────────────── */
.tab-row--lg { margin: 0 0 26px; gap: 4px; border-bottom: 1px solid var(--border); padding-bottom: 0; }
.tab-row--lg a {
  font-family: var(--font-display); font-size: 15px; letter-spacing: .04em;
  text-transform: uppercase; padding: 10px 18px; color: var(--mist);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab-row--lg a:hover { color: var(--paper); }
.tab-row--lg a.is-active { color: var(--paper); border-bottom-color: var(--signal); }
.tab-panel.is-hidden { display: none; }

/* ── nested platform list ─────────────────────────────────────────────── */
.rank-list--nested > li { margin-bottom: 4px; }
.rank-list__variants { list-style: none; margin: 2px 0 6px; padding-left: 14px; border-left: 1px solid var(--border-soft); }
.rank-list__variants a { font-size: 13px; color: var(--mist-2); }
.rank-list__variants a:hover { color: var(--teal); }
.rank-list a[aria-current="page"] { color: var(--signal); font-weight: 600; }

/* ── modal ────────────────────────────────────────────────────────────── */
.modal {
  display: none; position: fixed; inset: 0; z-index: 90;
  background: rgba(8,10,14,.62); backdrop-filter: blur(3px);
  padding: 24px; overflow-y: auto;
}
.modal.is-open { display: flex; align-items: flex-start; justify-content: center; }
/* Pinned, not just clipped: main.js sets top to minus the scroll offset
   so the page stays put behind the modal and can be restored exactly.
   `overflow: hidden` alone lost the position and closed you to the top. */
body.modal-open { position: fixed; width: 100%; overflow: hidden; }
.modal__panel {
  background: var(--void); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-pop);
  width: 100%; max-width: 860px; margin: auto;
  max-height: calc(100vh - 48px); display: flex; flex-direction: column;
}
.modal__head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 22px; border-bottom: 1px solid var(--border-soft); flex-shrink: 0;
}
.modal__head h2 { font-size: 19px; }
.modal__body { padding: 18px 22px 24px; overflow-y: auto; }
.modal__close {
  background: none; border: 1px solid var(--border); color: var(--mist);
  border-radius: var(--radius-sm); width: 32px; height: 32px; line-height: 1;
  font-size: 18px; display: inline-flex; align-items: center; justify-content: center;
}
.modal__close:hover { color: var(--paper); background: var(--slate-2); }

/* ── homepage list rows ───────────────────────────────────────────────── */
.sidebar-item__body { flex: 1; min-width: 0; display: block; }
.sidebar-item__votes { color: var(--mist-2); font-size: 10.5px; margin-left: 4px; }
.section-note { font-size: 12.5px; color: var(--mist-2); }

/* ── title page ───────────────────────────────────────────────────────────
   Order of the page follows what people arrive for: the verdict, where to
   watch, then every rating, then the facts. The old layout put the ratings
   below the fold under the cast. */
.breadcrumbs {
  display: flex; flex-wrap: wrap; gap: 7px; align-items: center;
  font-size: 12.5px; color: var(--mist-2); padding: 18px 0 4px;
}
.breadcrumbs a { color: var(--mist); }
.breadcrumbs a:hover { color: var(--teal); }
.breadcrumbs span[aria-current] { color: var(--paper); }

.detail-hero__main { min-width: 0; }

.verdict {
  display: flex; align-items: stretch; gap: 16px; flex-wrap: wrap;
  margin: 18px 0 22px;
}
.verdict__score-card {
  display: flex; align-items: flex-start; gap: 18px;
  padding: 18px 20px; flex: 1 1 260px;
  background: var(--slate); border: 1px solid var(--border-soft);
  border-top: 4px solid var(--edge);
  border-radius: var(--radius-md);
}
.verdict .rank-badge { margin-top: 2px; }
.verdict__body { min-width: 0; flex: 0 1 auto; }
.verdict__label {
  font-family: var(--font-mono, var(--font-body)); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--mist-2);
  margin: 0 0 2px;
}
.verdict__score { margin: 0; font-family: var(--font-mono); line-height: 1; }
.verdict__score strong { font-size: 40px; font-weight: 700; }
.verdict__score span { font-size: 17px; color: var(--mist-2); margin-left: 2px; }
.verdict__meta { margin: 7px 0 0; font-size: 13.5px; color: var(--mist); }
.verdict__meta strong { color: var(--paper); }

/* ── where it ranks, its own card beside the grade ───────────────────────
   Deliberately a separate card, not a panel sharing the grade's border --
   a hairline divider inside one box read as "attached" rather than two
   things. Capped well under half the row (280px, vs the score card's
   flex:1) so it can never out-grow the grade it's next to; wraps to its
   own full-width row once the two can't sit side by side. */
.verdict__ranks-panel {
  flex: 0 1 280px; max-width: 280px; min-width: 220px;
  padding: 14px 18px;
  background: var(--slate); border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
}
@media (max-width: 640px) {
  .verdict__ranks-panel { flex-basis: 100%; max-width: none; }
}
.verdict__ranks-label {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--mist-2); margin: 0 0 8px;
}
.verdict__rank-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.verdict__rank-list li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: 13px;
}
.verdict__rank-list a { color: var(--paper); }
.verdict__rank-list a:hover { color: var(--teal); }
.verdict__rank-list .rank-num {
  color: var(--signal); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.verdict__ranks-more { margin-top: 8px; }
.verdict__ranks-more summary {
  font-size: 12px; color: var(--teal); cursor: pointer; font-weight: 600;
}
.verdict__ranks-more[open] summary { margin-bottom: 8px; }

.detail-block { margin-bottom: 30px; }
.detail-block__title {
  font-size: 14px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--mist-2); margin-bottom: 12px;
  padding-bottom: 8px; border-bottom: 1px solid var(--border-soft);
}
.detail-block__sub { font-size: 13px; color: var(--mist-2); margin: 20px 0 10px; letter-spacing: .06em; text-transform: uppercase; }

.fact-grid {
  display: grid; gap: 1px; margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  background: var(--border-soft); border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm); overflow: hidden;
}
.fact { background: var(--void); padding: 11px 15px; }
.fact dt {
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--mist-2); margin-bottom: 3px;
}
.fact dd { margin: 0; font-size: 14px; color: var(--paper); }
.fact dd a { color: var(--teal); }
.fact dd a:hover { text-decoration: underline; }

.plot-text { max-width: 74ch; }
.source-line { font-size: 12px; color: var(--mist-2); margin-top: 12px; }
.source-line a { color: var(--teal); }

.rating-row__value span { font-size: 12px; color: var(--mist-2); }

.provider-chip--all { border-style: dashed; }

/* A <button> used as an inline link (modal triggers) shouldn't look like a button. */
button.view-all {
  background: none; border: 0; padding: 0;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--teal);
}
button.view-all:hover { text-decoration: underline; }

.cast-card__name a { color: var(--paper); }
.cast-card__name a:hover { color: var(--teal); }

@media (max-width: 720px) {
  /* No padding. .verdict has no background and no border of its own, so
     padding on it does not pad anything -- it just pushes the grade and
     the ranks panel 14px in from the edge every other block on the page
     sits against, which reads as those two boxes being centred while the
     rest is aligned. */
  .verdict { gap: 14px; }
  .verdict__score strong { font-size: 32px; }
  .rank-badge--xl { width: 84px; height: 84px; font-size: 40px; }
}

/* ── dashboard: runbook + job groups ──────────────────────────────────── */
.runbook {
  background: var(--slate); border: 1px solid var(--border-soft);
  border-left: 3px solid var(--teal); border-radius: var(--radius-md);
  padding: 18px 22px; margin-bottom: 28px;
}
.runbook h2 { font-size: 16px; margin-bottom: 8px; }
.runbook p { margin: 0 0 10px; font-size: 14px; color: var(--mist); max-width: 78ch; }
.runbook ol { margin: 0 0 10px; padding-left: 20px; font-size: 14px; color: var(--mist); }
.runbook li { margin-bottom: 5px; }
.runbook strong, .runbook em { color: var(--paper); font-style: normal; }
.runbook__note { font-size: 13px; color: var(--mist-2); margin-bottom: 0; }
.dash-group-heading {
  font-size: 12px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--mist-2); margin: 26px 0 12px;
  padding-bottom: 7px; border-bottom: 1px solid var(--border-soft);
}
.job-check {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--mist-2); white-space: nowrap;
}

/* ── awards: summary + highlights on the page, full table in the modal ── */
.award-summary {
  font-size: 14.5px; color: var(--mist); margin: 0 0 14px;
  padding: 10px 14px; background: var(--slate);
  border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
}
.award-summary strong { color: var(--paper); font-variant-numeric: tabular-nums; }
.award-table--highlights { border: 1px solid var(--border-soft); border-radius: var(--radius-sm); }
.award-table__ceremony { color: var(--mist); white-space: nowrap; font-size: 13px; }
.award-table__ceremony span { color: var(--mist-2); }
.awards-more-btn { margin-top: 14px; }

/* Modals open from a plain anchor when JS isn't available: the trigger
   links to the modal's id and :target does the work. */
.modal:target { display: flex; align-items: flex-start; justify-content: center; }
a.modal__close { text-decoration: none; }

/* ── attribution ──────────────────────────────────────────────────────────
   TMDb's terms require their wordmark and the "not endorsed" statement
   wherever their data appears; Wikipedia's CC BY-SA requires naming the
   source and the licence. Both live here, once, site-wide. */
.attribution {
  display: flex; gap: 14px; align-items: flex-start;
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border-soft);
}
.attribution__tmdb { flex-shrink: 0; padding-top: 3px; opacity: .9; }
.attribution__tmdb:hover { opacity: 1; }
.attribution p { margin: 0; font-size: 12px; line-height: 1.65; color: var(--mist-2); max-width: 78ch; }
.attribution a { color: var(--mist); text-decoration: underline; text-underline-offset: 2px; }
.attribution a:hover { color: var(--paper); }
@media (max-width: 560px) { .attribution { flex-direction: column; gap: 10px; } }

/* ── prose pages (about / privacy / terms) ────────────────────────────── */
.prose { max-width: 760px; }
.prose h2 {
  font-size: 21px; margin: 36px 0 12px;
  padding-bottom: 8px; border-bottom: 1px solid var(--border-soft);
}
.prose p { margin: 0 0 15px; line-height: 1.72; }
.prose .lede { font-size: 17.5px; color: var(--mist); line-height: 1.68; margin-bottom: 8px; }
.prose code {
  font-size: .88em; background: var(--slate-2); padding: 1px 6px;
  border-radius: 0; color: var(--paper);
}
.prose a { color: var(--teal); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--signal); }
.policy-date { font-size: 13px; color: var(--mist-2); margin: -6px 0 26px; }
.policy-note {
  font-size: 14px; color: var(--mist); background: var(--slate);
  border-left: 3px solid var(--signal); border-radius: var(--radius-sm);
  padding: 12px 16px; margin: 18px 0;
}
.policy-table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 0 0 16px; }
.policy-table th {
  text-align: left; font-family: var(--font-mono, inherit); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--mist-2);
  font-weight: 500; padding: 8px 12px; background: var(--slate-2);
  border-bottom: 1px solid var(--border);
}
.policy-table td { padding: 11px 12px; border-bottom: 1px solid var(--border-soft); vertical-align: top; color: var(--mist); }
.policy-table td:first-child { color: var(--paper); white-space: nowrap; }
.policy-kind { display: block; font-size: 11px; color: var(--mist-2); margin-top: 3px; }
.table-scroll-wrap { overflow-x: auto; }
@media (max-width: 560px) { .policy-table { font-size: 13px; } .policy-table td:first-child { white-space: normal; } }

/* Google retired its star ratings, so ours exist almost nowhere else. */
.rank-only-here {
  display: inline-block; font-size: 9.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; vertical-align: 1px;
  padding: 1px 5px; margin-left: 4px; border-radius: 0;
  background: rgba(var(--spark-rgb), var(--tint-alpha)); color: var(--spark);
}


/* -- curated lists, blog-style: a banner and a date lead each one, the
   way a piece of writing is presented rather than a query result -------- */
.collection-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* Three lists at the foot of a title page, not the lists index. Narrower
   cards and a tighter gap, so the section reads as a pointer to the lists
   rather than as another page grafted onto this one. */
.collection-grid--compact {
  gap: 16px; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
}
/* No height override on the stack. The posters are flex children with
   aspect-ratio 2/3; fixing the stack's height crushes every one of them,
   and the cards are full width down here anyway. */
.collection-grid--compact .collection-card__title { font-size: 15px; }
/* Why this card is here: the title you are reading is on this list. */
.collection-card__tag {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  padding: 2px 7px; border-radius: 2px;
  background: var(--c-green); color: var(--on-c-green);
  font-size: 9.5px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase;
}
.detail-block__subhead {
  margin: 16px 0 10px; font-size: 13px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--mist-2);
}
.collection-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--slate); border: 1px solid var(--border-soft);
  border-radius: var(--radius-md); overflow: hidden;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.collection-card:hover {
  border-color: rgba(var(--signal-rgb),.4); transform: translateY(-2px);
  box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 16px 32px -18px rgba(var(--signal-rgb),.5);
}
.collection-card__banner { aspect-ratio: 16/9; background: var(--slate-2); overflow: hidden; }
.collection-card__banner img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.collection-card:hover .collection-card__banner img { transform: scale(1.04); }
.collection-card__body { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px 18px; min-width: 0; }
.collection-card__date {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--mist-2);
}
.collection-card__title { font-family: var(--font-display); font-size: 19px; line-height: 1.28; color: var(--paper); }
.collection-card__sub { font-size: 13.5px; color: var(--mist); line-height: 1.5; }
.collection-card__meta { font-size: 11.5px; color: var(--mist-2); margin-top: 6px; }
.collection-card__draft {
  position: absolute; top: 10px; left: 10px; z-index: 1;
  font-size: 9.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; padding: 3px 7px; border-radius: 0;
  background: var(--coral); color: #fff;
}

.collection { max-width: 820px; }
.collection__banner {
  aspect-ratio: 21/9; overflow: hidden; background: var(--slate-2);
  border-radius: var(--radius-md); margin: 0 0 22px; border: 1px solid var(--border-soft);
}
.collection__banner img { width: 100%; height: 100%; object-fit: cover; }
.collection__date {
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--spark); margin: 0 0 8px;
}
.collection__sub { font-size: 18px; color: var(--mist); margin: -4px 0 6px; line-height: 1.5; }
.collection__meta { font-size: 12.5px; color: var(--mist-2); margin: 0 0 22px; }
.collection__intro { font-size: 16.5px; line-height: 1.75; max-width: 68ch; }
.collection__intro p { margin: 0 0 16px; }
.collection__intro p:last-child { margin-bottom: 0; }
.collection__intro a, .collection-item__note a { color: var(--teal); text-decoration: underline; text-underline-offset: 2px; }
.collection__intro a:hover, .collection-item__note a:hover { color: var(--signal); }
@media (max-width: 560px) { .collection__banner, .collection-card__banner { aspect-ratio: 4/3; } }

/* -- the "story" layout: the write-up set apart as its own piece of prose
   below the title's own data, not a caption crammed beside its poster.
   The ratings themselves are the opposite move -- a small side note next
   to the image, not the full title-page block, because that block already
   exists one click away on the title's own page. --------------------- */
.story-items { display: grid; gap: 40px; margin: 34px 0 0; }
.story-item { padding-bottom: 40px; border-bottom: 1px solid var(--border-soft); }
.story-item:last-child { border-bottom: 0; padding-bottom: 0; }
.story-item__top { display: grid; grid-template-columns: auto 130px 1fr; gap: 18px; align-items: start; }
.story-item__num {
  font-family: var(--font-mono); font-size: 34px; font-weight: 700;
  color: var(--signal); line-height: 1; min-width: 44px; font-variant-numeric: tabular-nums;
}
.story-item__side { display: flex; flex-direction: column; gap: 8px; }
.story-item__poster { display: block; }
.story-item__poster img { width: 100%; aspect-ratio: 2/3; object-fit: cover; }
.story-item__mini-ratings { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.story-item__mini-ratings li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 6px;
  font-size: 10.5px; line-height: 1.4;
}
.story-item__mini-ratings li span {
  color: var(--mist-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.story-item__mini-ratings li strong {
  font-family: var(--font-mono); font-weight: 600; color: var(--paper); white-space: nowrap;
}
.story-item__mini-ratings li strong small { color: var(--mist-2); font-weight: 500; }
.story-item__mini-ratings li.is-archived { opacity: .55; }
.story-item__heading { min-width: 0; }
.story-item__title { font-size: 24px; margin: 0 0 4px; }
.story-item__title a:hover { color: var(--teal); }
.story-item__year { color: var(--mist-2); font-weight: 400; font-size: 18px; }
.story-item__facts { font-size: 13px; color: var(--mist-2); margin: 0 0 10px; }
.story-item__note {
  margin: 22px 0 0; padding: 18px 20px; background: var(--slate);
  border-left: 3px solid var(--edge); border-radius: var(--radius-sm);
  font-size: 16px; line-height: 1.75; color: var(--paper);
}
.story-item__note p { margin: 0 0 14px; }
.story-item__note p:last-child { margin-bottom: 0; }
.story-item__note-label {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--mist-2); margin: 0 0 8px; font-weight: 600;
}
@media (max-width: 620px) {
  .story-item__top { grid-template-columns: auto 1fr; }
  .story-item__side { grid-row: 1 / 3; }
}
@media (max-width: 440px) {
  .story-item__top { grid-template-columns: 1fr; }
  .story-item__num { grid-row: 1; }
  .story-item__side { flex-direction: row; align-items: flex-start; }
  .story-item__poster { width: 90px; flex-shrink: 0; }
  .story-item__mini-ratings { flex: 1; }
}

.collection-items { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 20px; }
.collection-item {
  display: grid; grid-template-columns: auto 96px 1fr auto; gap: 16px;
  align-items: start; padding-bottom: 20px; border-bottom: 1px solid var(--border-soft);
}
.collection-item:last-child { border-bottom: 0; }
.collection-item__num {
  font-family: var(--font-mono); font-size: 28px; font-weight: 700;
  color: var(--signal); line-height: 1; min-width: 34px; font-variant-numeric: tabular-nums;
}
.collection-item__poster { display: block; border-radius: var(--radius-sm); overflow: hidden; }
.collection-item__poster img { width: 96px; aspect-ratio: 2/3; object-fit: cover; }
.collection-item__title { font-size: 20px; margin: 0 0 3px; }
.collection-item__title a:hover { color: var(--teal); }
.collection-item__year { color: var(--mist-2); font-weight: 400; font-size: 16px; }
.collection-item__facts { font-size: 12.5px; color: var(--mist-2); margin: 0 0 8px; }
.collection-item__note { line-height: 1.7; color: var(--paper); }
.collection-item__note p { margin: 0 0 8px; }
.collection-item__note p:last-child { margin-bottom: 0; }
.collection-item__plot { margin: 0; line-height: 1.7; color: var(--mist); font-size: 14.5px; }

.collection-items--grid .collection-item { grid-template-columns: 96px 1fr auto; }

@media (max-width: 640px) {
  .collection-item { grid-template-columns: 64px 1fr; gap: 12px; }
  .collection-item__num { grid-column: 1 / -1; font-size: 22px; }
  .collection-item__poster img { width: 64px; }
  .collection-item .rank-badge { grid-column: 2; justify-self: start; }
}


/* -- dashboard: list editor -------------------------------------------- */
.collection-editor { display: grid; gap: 10px; }
.collection-editor__row {
  display: grid; grid-template-columns: 64px minmax(160px, 220px) 1fr; gap: 12px;
  align-items: start; padding: 10px; background: var(--slate);
  border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
}
.collection-editor__pos {
  width: 100%; background: var(--slate-2); border: 1px solid var(--border);
  color: var(--paper); border-radius: var(--radius-sm); padding: 7px 8px;
  font-size: 14px; text-align: center; font-variant-numeric: tabular-nums;
}
.collection-editor__title { font-size: 14px; min-width: 0; }
.collection-editor__title span { color: var(--mist-2); }
.collection-editor__remove { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.collection-editor__remove form { margin: 0; }
@media (max-width: 720px) {
  .collection-editor__row { grid-template-columns: 64px 1fr; }
  .collection-editor__row textarea { grid-column: 1 / -1; }
}


/* -- dashboard: stale-data banner --------------------------------------- */
.stale-banner {
  background: rgba(var(--coral-rgb), .07);
  border: 1px solid rgba(var(--coral-rgb), .35);
  border-left: 3px solid var(--coral);
  border-radius: var(--radius-md); padding: 16px 20px; margin-bottom: 24px;
}
.stale-banner h2 { font-size: 15px; margin-bottom: 6px; color: var(--coral); }
.stale-banner > p { font-size: 14px; color: var(--mist); margin: 0 0 12px; max-width: 78ch; }
.stale-banner__row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 0; border-top: 1px solid rgba(var(--coral-rgb), .18);
}
.stale-banner__row form { margin: 0; }
@media (max-width: 640px) {
  .stale-banner__row { flex-direction: column; align-items: stretch; }
}


/* -- advertising --------------------------------------------------------
   Deliberately quiet. A reserved min-height (set per slot in the dashboard)
   keeps the page from jumping as an ad loads -- that shove is the main
   reason ad-funded sites feel cheap, and it is what Google measures as
   Cumulative Layout Shift. Nothing here is sticky and nothing overlays
   content. */
.ad {
  display: block; margin: 30px auto; max-width: 100%;
  text-align: center; overflow: hidden;
}
.ad__label {
  display: block; font-size: 9.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--mist-2);
  margin-bottom: 6px; opacity: .7;
}
.ad__unit { display: flex; align-items: center; justify-content: center; }
.ad__unit > * { max-width: 100%; }

/* Wide and short, between sections. Capped at 970px -- the widest standard
   leaderboard -- so it never outgrows the reading column on a large screen,
   and centred so it reads as part of the layout rather than bolted on. */
.ad--leaderboard {
  width: 100%; max-width: 970px; padding: 10px 0;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}

/* Portrait, in the sidebar. The sidebar column is exactly 300px, which is
   also the standard width of every sidebar ad unit ever made (300x250,
   300x600, 160x600) -- so the cap here matches both. Without it a
   leaderboard snippet pasted into this slot would overflow the column. */
.ad--sidebar { margin: 0 0 22px; max-width: 300px; }
.ad--sidebar .ad__unit { flex-direction: column; }

/* Whatever the network returns, it stays inside its slot. */
.ad__unit iframe, .ad__unit ins, .ad__unit img { max-width: 100%; }

@media (max-width: 880px) {
  /* The sidebar stacks under the content on narrow screens, and an ad
     there would sit between the reader and the next thing they want. */
  aside .ad { display: none; }
}


/* -- archived ratings ---------------------------------------------------
   Google retired its star ratings; ours are a snapshot. The row is marked
   so nobody reads a frozen figure as a live one. */
.rating-row--archived { border-style: dashed; }
.info-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; margin-left: 5px; padding: 0;
  border: 1px solid var(--border); border-radius: 50%;
  background: none; color: var(--mist-2);
  font-size: 10px; font-weight: 700; line-height: 1; cursor: help;
  vertical-align: 1px;
}
.info-dot:hover { color: var(--paper); border-color: var(--mist); background: var(--slate-2); }
.rating-rows__note {
  font-size: 12.5px; line-height: 1.6; color: var(--mist-2);
  margin: 10px 0 0; padding: 10px 12px;
  background: var(--slate); border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
}
.rating-rows__note strong { color: var(--mist); }
.rating-rows__note a { color: var(--teal); white-space: nowrap; }

/* ── how far apart those ratings are ─────────────────────────────────────
   Sits directly under the rating list because it is a statement about it.
   A solid left edge rather than a full card: it is evidence attached to the
   list above, not a separate section competing with it. */
.disagreement {
  display: flex; gap: 14px; align-items: flex-start;
  margin: 12px 0 0; padding: 12px 14px;
  background: var(--slate); border: 1px solid var(--border-soft);
  border-left: 3px solid var(--teal);
  border-radius: var(--radius-sm);
}
.disagreement__figure {
  flex: 0 0 auto; text-align: center; min-width: 54px;
  padding-right: 14px; border-right: 1px solid var(--border-soft);
}
.disagreement__value {
  display: block; font-size: 24px; font-weight: 800; line-height: 1;
  color: var(--mist); font-variant-numeric: tabular-nums;
}
.disagreement__unit {
  display: block; margin-top: 3px;
  font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--mist-2); font-weight: 700;
}
.disagreement__body { min-width: 0; }
.disagreement__label {
  margin: 0; font-size: 13.5px; font-weight: 700; color: var(--mist);
}
.disagreement__text {
  margin: 3px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--mist-2);
}
.disagreement__link {
  display: inline-block; margin-top: 6px;
  font-size: 12px; font-weight: 700; color: var(--teal);
}
/* On a phone the figure and the sentence stack rather than squeezing the
   sentence into a column two words wide. */
@media (max-width: 520px) {
  .disagreement { gap: 10px; }
  .disagreement__figure {
    min-width: 44px; padding-right: 10px;
  }
  .disagreement__value { font-size: 20px; }
}


/* ==========================================================================
   THE SCOREBOARD LAYER
   --------------------------------------------------------------------------
   Everything above builds the site out of grey hairlines, soft blurred
   shadows and one green used at 12% opacity. That is a perfectly correct
   settings screen, and it is why the site read as dull: at zero corner
   radius a 1px #e6eaf0 border isn't restrained, it's invisible, so every
   page came out as undifferentiated white with faint grey writing on it.

   This layer changes three things and only three things:

     1. Boxes are drawn like printed objects -- a 2px ink border and a
        solid offset shadow, no blur. Sharp corners need a hard edge to
        sit against or they just look unfinished.
     2. Colour is structural, not decorative. Grids hand each position a
        different bright fill via --accent, so eight ranking boxes are
        eight recognisable things instead of eight identical rectangles.
     3. Headings get loud -- condensed, uppercase, tight -- because the
        display face was already loaded and being used at 22px like a body
        font.

   Corner radius stays at 0 everywhere. Nothing here rounds anything.
   ========================================================================== */

/* -- accent rotation ------------------------------------------------------
   The one rule that does most of the work. A grid's children each take the
   next colour in the cycle, so the accent is a function of position and no
   template ever has to name a colour. Six-long so a four-column grid gets a
   different pairing on its second row rather than repeating the first.
   ----------------------------------------------------------------------- */
.home-box-grid > *:nth-child(6n+1), .hub-grid > *:nth-child(6n+1),
.method-grid > *:nth-child(6n+1), .collection-grid > *:nth-child(6n+1) {
  --accent: var(--c-green);  --on-accent: var(--on-c-green);
}
.home-box-grid > *:nth-child(6n+2), .hub-grid > *:nth-child(6n+2),
.method-grid > *:nth-child(6n+2), .collection-grid > *:nth-child(6n+2) {
  --accent: var(--c-pink);   --on-accent: var(--on-c-pink);
}
.home-box-grid > *:nth-child(6n+3), .hub-grid > *:nth-child(6n+3),
.method-grid > *:nth-child(6n+3), .collection-grid > *:nth-child(6n+3) {
  --accent: var(--c-cyan);   --on-accent: var(--on-c-cyan);
}
.home-box-grid > *:nth-child(6n+4), .hub-grid > *:nth-child(6n+4),
.method-grid > *:nth-child(6n+4), .collection-grid > *:nth-child(6n+4) {
  --accent: var(--c-gold);   --on-accent: var(--on-c-gold);
}
.home-box-grid > *:nth-child(6n+5), .hub-grid > *:nth-child(6n+5),
.method-grid > *:nth-child(6n+5), .collection-grid > *:nth-child(6n+5) {
  --accent: var(--c-violet); --on-accent: var(--on-c-violet);
}
.home-box-grid > *:nth-child(6n+6), .hub-grid > *:nth-child(6n+6),
.method-grid > *:nth-child(6n+6), .collection-grid > *:nth-child(6n+6) {
  --accent: var(--c-orange); --on-accent: var(--on-c-orange);
}

/* Sidebar cards stack rather than sitting in a grid, so they cycle by
   sibling position in the column. */
aside .sidebar-card:nth-of-type(2n) { --accent: var(--c-violet); --on-accent: var(--on-c-violet); }
aside .sidebar-card:nth-of-type(3n) { --accent: var(--c-cyan);   --on-accent: var(--on-c-cyan); }


/* -- hard-edge surfaces ---------------------------------------------------
   One treatment, every box that is a box. The offset shadow is the card's
   own accent: it is the single cheapest way to get real colour onto a page
   without tinting any surface a reader has to read text off.
   ----------------------------------------------------------------------- */
.sidebar-card,
.hub-card,
.method-step,
.watch-box,
.verdict__score-card,
.verdict__ranks-panel,
.builder-callout,
.auth-card,
.collection-card,
.consensus-panel {
  background: var(--void);
  border: 2px solid var(--rule);
  box-shadow: 6px 6px 0 var(--rule);
  transition: transform .12s ease, box-shadow .12s ease;
}

/* The shadow is ink, not the card's accent.
   --------------------------------------------------------------------------
   It used to be `0 var(--accent)`, which put a saturated pink, violet, cyan
   or gold slab behind every box on the page. That was the actual reason the
   site still read as "not good" after the colour was added: this is a
   scoring site, and the only colour on it that MEANS anything is the grade
   -- green is a good score, amber is a middling one, red is a bad one. Eight
   decorative hues competing at 6px thickness left the reader no way to tell
   which colour was information and which was furniture, so none of it read
   as information.

   Ink shadows cost nothing and give it back: the page is black rules and
   white paper, and the only saturated colour in the content column is a
   score. The accent still identifies each card -- it just does it on the
   heading cap and the top edge, where it labels the box instead of shouting
   over the numbers inside it. */
.hub-card:hover,
.collection-card:hover {
  transform: translate(3px, 3px);
  box-shadow: 3px 3px 0 var(--rule);
  border-color: var(--rule);
}

/* Cards that carry a heading of their own wear the accent as a full-bleed
   cap rather than a drop shadow alone. Negative margins pull the heading
   out to the card's edges without any template change. */
.sidebar-card > h3 {
  margin: -18px -18px 14px;
  padding: 9px 16px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 13px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}
.sidebar-card > h3 a { color: inherit; }
.home-box { padding: 16px; }
.home-box > h3 {
  margin: -16px -16px 14px !important;   /* beats the template's inline style */
  padding: 9px 14px;
  font-size: 12.5px;
}
.hub-card { border-top-width: 7px; border-top-color: var(--accent); }
.hub-card__title { font-size: 16px; font-weight: 600; letter-spacing: .01em; }

/* The method steps read as a numbered sequence, so the number is the
   loudest thing in each one and it wears the step's colour. */
.method-step { padding: 20px; }
.method-step__num {
  width: 34px; height: 34px; border-radius: 0;
  background: var(--accent); color: var(--on-accent);
  border: 2px solid var(--rule);
  font-size: 17px;
}
.method-step h3 {
  font-size: 17px; text-transform: uppercase; letter-spacing: .03em;
}

/* The two title-page verdict cards are the page's headline, so they take
   the brand green rather than a rotation slot. */
.verdict__score-card { --accent: var(--c-green); border-top: 7px solid var(--c-green); }
.verdict__ranks-panel { --accent: var(--c-cyan); }
.watch-box { --accent: var(--c-gold); border-top: 7px solid var(--c-gold); }
.builder-callout { --accent: var(--c-pink); border-top: 7px solid var(--c-pink); }


/* -- header ---------------------------------------------------------------
   Opaque, and closed off with a real 2px line. The translucent blurred bar
   was doing nothing except making the top of every page look slightly
   washed out.
   ----------------------------------------------------------------------- */
.site-header {
  background: var(--void);
  backdrop-filter: none;
  border-bottom: 2px solid var(--rule);
}
/* The rule that runs the whole width under the header.
   This was six hard stops -- green, lime, gold, orange, pink, violet -- a
   full rainbow across the top of every page. A rainbow is the one motif
   that reads as "toy" rather than "reference work", and this site's entire
   claim is that it is the trustworthy number. Two stops of the brand green
   keep the bar doing its real job (separating the header from the page with
   something warmer than a black line) without spending the site's
   credibility on decoration. */
.site-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 3px;
  background: linear-gradient(90deg, var(--c-green) 0 62%, var(--c-lime) 62% 100%);
}
.main-nav a, .nav-more__btn {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--paper); border-radius: 0;
  border-bottom: 3px solid transparent;
  padding: 6px 9px 3px;
}
.main-nav a:hover, .main-nav a.is-active,
.nav-more:hover .nav-more__btn, .nav-more:focus-within .nav-more__btn {
  background: none; color: var(--paper); border-bottom-color: var(--c-green);
}
/* Inside the panel the underline is the wrong signal -- it reads as a row
   of tabs. A filled row is what a menu item wants. */
.nav-more__panel a { border-bottom: 0; padding: 8px 10px; }
.nav-more__panel a:hover { background: var(--c-green); color: var(--on-c-green); }

/* In the hamburger the two groups are one list, so they have to behave
   like one list.
   ----------------------------------------------------------------------
   On a wide screen the split is deliberate: the top-level links are tabs
   and hover as an underline, the "More" panel is a dropdown and hovers as
   a filled row. Below 900px the button disappears and the panel's links
   just carry on down the same stack -- so the first four underlined and
   the last four filled green, in one vertical menu, for no reason a
   reader could see.
   
   The fill wins here. An underline is a bottom border, and in a stacked
   menu it lands on the same edge as the separator rule between items,
   so it reads as the divider thickening rather than as a highlight.
   
   This has to sit after the rules it overrides rather than up in the
   earlier media query, because both have the same specificity and the
   later one wins. The breakpoint is 880px because that is where the nav
   actually collapses -- at 900 this would have restyled horizontal tabs. */
@media (max-width: 880px) {
  .main-nav a:hover,
  .main-nav a.is-active,
  .nav-more__panel a:hover {
    background: var(--c-green); color: var(--on-c-green);
    border-bottom-color: transparent;
  }
  /* Same row for both groups. The tab rule above gave the first four
     6/9/3px padding plus a 3px underline slot (32px rows) and the panel
     rule gave the last four 8/10px and none (37px), so the list visibly
     changed rhythm halfway down. */
  .main-nav a, .nav-more__panel a { padding: 10px 10px; border-bottom: 0; }
}
.search-form input { border: 2px solid var(--rule); background: var(--void); }
.theme-toggle { border: 2px solid var(--rule); color: var(--paper); }
.theme-toggle:hover { background: var(--c-green); color: var(--on-c-green); border-color: var(--rule); }


/* -- hero -----------------------------------------------------------------
   Louder gradients, a headline that behaves like a headline, and the
   eyebrow promoted from small coloured text to a solid chip.
   ----------------------------------------------------------------------- */
/* One wash, not three.
   Green + pink + cyan radials overlapped into a grey-mauve muddle in the
   middle of the hero -- three transparent hues over white average toward
   grey, which is the opposite of what stacking them was meant to achieve.
   A single green wash reads as deliberate and leaves the headline as the
   loudest thing in the band. */
.hero {
  border-bottom: 3px solid var(--rule);
  background:
    radial-gradient(900px 460px at 12% -20%, rgba(var(--signal-rgb),.26), transparent 66%),
    radial-gradient(700px 400px at 88% 110%, rgba(var(--signal-rgb),.10), transparent 68%);
}
/* Qualified with the element: the eyebrow is a <p>, and `.hero p` earlier in
   this file is one class + one type, so an unqualified `.hero__eyebrow`
   loses the colour fight and the chip came out grey-on-pink. */
/* Ink, not pink. The eyebrow sits directly above the headline, so a hot
   pink slab there is the first thing the eye lands on and the sentence that
   explains the site is the second. A solid ink chip still reads as a
   printed label and loses that fight on purpose. */
.hero p.hero__eyebrow {
  background: var(--rule); color: var(--void);
  padding: 5px 11px; margin-bottom: 16px;
  font-size: 11.5px; letter-spacing: .16em; font-weight: 700;
  border: 2px solid var(--rule);
}
.hero__eyebrow::before { display: none; }
/* The hero headline is a sentence -- "Stop guessing which rating to trust."
   and "Animation, ranked separately from everything else." Caps suit a short
   label; a whole sentence in caps is just shouting, and it also kills the
   `<span class="text-spark">` emphasis inside the animation headline, since
   you cannot see a word stressed differently when every letter is already at
   maximum. Size and weight carry it instead. */
.hero h1 {
  font-weight: 700; letter-spacing: -.015em; line-height: 1.04;
}
.hero--compact h1 { font-size: clamp(30px, 5vw, 46px); }
.hero__search input { border: 2px solid var(--rule); background: var(--void); }
.hero__stats {
  gap: 0; flex-wrap: wrap;
  border: 2px solid var(--rule); background: var(--void);
  display: inline-flex; width: auto;
}
.hero__stats span {
  padding: 9px 18px; font-size: 12px;
  text-transform: uppercase; letter-spacing: .07em; font-weight: 600;
}
.hero__stats span + span { border-left: 2px solid var(--rule); }
.hero__stats strong { display: block; font-size: 21px; letter-spacing: 0; }


/* -- section headings -----------------------------------------------------
   The display face is condensed and was being used at 22px, sentence case,
   with a 4px tick beside it -- which is to say it was being used as a body
   font. Uppercase, larger, tighter, with the tick promoted to a solid block
   and a rule carrying the eye across to the "all rankings" link.
   ----------------------------------------------------------------------- */
.section-head {
  align-items: center;
  border-bottom: 2px solid var(--rule);
  padding-bottom: 10px; margin-bottom: 22px;
}
.section-head h2 {
  font-size: clamp(22px, 2.6vw, 30px); font-weight: 700;
  text-transform: uppercase; letter-spacing: .01em; gap: 12px;
}
.section-head h2::before { width: 14px; height: 26px; background: var(--c-green); }
.view-all {
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: .07em; font-size: 12.5px; color: var(--paper);
  border-bottom: 2px solid var(--c-green); padding-bottom: 1px;
}
.view-all:hover { text-decoration: none; background: var(--c-green); color: var(--on-c-green); }

/* Uppercase is for labels we wrote, never for a title somebody else did.
   --------------------------------------------------------------------------
   These four classes hold real work titles -- `.detail-title` is
   {{ media.title }}, and .page-title carries "Full Cast — <title>" and a
   collection's own name. Uppercasing them threw away information (a film's
   own capitalisation, and the case distinction in names like "iRobot" or
   "BlacKkKlansman") and turned every long title into a wall: "EVERYTHING
   EVERYWHERE ALL AT ONCE" is measurably slower to read than the mixed-case
   original, because word shape is most of what the eye matches on.

   The condensed display face at 700 weight is already loud. It does not
   need the caps, and the section headings -- which ARE our own short labels
   -- keep theirs, so the page still has a shouting register to contrast
   against. */
.page-title, .detail-title, .story-item__title, .collection-item__title {
  font-weight: 700; letter-spacing: -.01em;
}
.page-title { font-size: clamp(28px, 4vw, 40px); }
.hub-group__label {
  font-size: 14px; color: var(--paper); letter-spacing: .12em;
  border-bottom: 2px solid var(--rule); padding-bottom: 9px;
}

/* Alternate the tinted band into a proper colour field rather than a
   barely-there grey one. */
.section--tint {
  background: var(--slate);
  border-top: 2px solid var(--rule); border-bottom: 2px solid var(--rule);
  padding-block: 44px;
}


/* -- buttons ------------------------------------------------------------ */
.btn {
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: .06em; font-weight: 600; font-size: 14px;
  border: 2px solid var(--rule);
}
.btn-primary {
  background: var(--c-green); color: var(--on-c-green);
  box-shadow: 4px 4px 0 var(--rule);
  transition: transform .1s ease, box-shadow .1s ease;
}
.btn-primary:hover { filter: none; background: var(--signal); color: #fff; box-shadow: 4px 4px 0 var(--rule); }
.btn-primary:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--rule); }
.btn-secondary { background: var(--void); color: var(--paper); }
.btn-secondary:hover { background: var(--c-green); color: var(--on-c-green); border-color: var(--rule); }
.btn-danger { background: var(--coral); color: #fff; box-shadow: 4px 4px 0 var(--rule); }
.btn-ghost { border-color: transparent; }


/* -- chips, tags, tabs, pagination ----------------------------------------
   All the small interactive furniture, given the same ink outline so the
   page has one vocabulary, and a bright fill on hover so it answers.
   ----------------------------------------------------------------------- */
.chip, .genre-tag, .provider-chip, .link-chips a, .axis-nav a {
  border: 2px solid var(--rule);
  background: var(--void);
  color: var(--paper);
  font-weight: 600;
}
/* One hover colour for every piece of small furniture.
   These were lime for chips, cyan for genre tags and providers, gold for the
   theme toggle and the secondary button -- three different answers to the
   same question ("what does hover look like?"), which teaches a reader
   nothing and makes the palette feel arbitrary. Green is the brand and now
   the single interactive colour: if it turns green, it's clickable. */
.chip:hover, .link-chips a:hover, .axis-nav a:hover,
.genre-tag:hover, .provider-chip:hover {
  background: var(--c-green); color: var(--on-c-green); border-color: var(--rule);
}

.tab-row { background: var(--void); border: 2px solid var(--rule); padding: 0; }
.tab-row a, .tab-row button { color: var(--paper); font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em; }
.tab-row a.is-active, .tab-row button.is-active { background: var(--rule); color: var(--void); }
/* Block-level, so the 2px rule under the tabs runs the full width of the
   page rather than stopping at the last tab -- an inline-flex row made it
   look like a stray underline on whichever tab happened to be last. */
.tab-row--lg { display: flex; border: 0; border-bottom: 2px solid var(--rule); background: none; }
.tab-row--lg a.is-active { background: none; color: var(--paper); border-bottom: 4px solid var(--c-green); }

.pagination a, .pagination span {
  border: 2px solid var(--rule); color: var(--paper); font-weight: 600;
}
.pagination a:hover { background: var(--c-green); color: var(--on-c-green); border-color: var(--rule); }
.pagination .is-current { background: var(--rule); color: var(--void); border-color: var(--rule); }

.filter-bar { border: 2px solid var(--rule); background: var(--void); }
.filter-bar input[type="text"], .filter-bar select,
.field-input, .collection-editor__pos { border: 2px solid var(--rule); background: var(--void); }


/* -- posters and rows -----------------------------------------------------
   A poster is the one place on the site with real photographic colour in
   it; the frame's job is to hold it, not to fade into the page.
   ----------------------------------------------------------------------- */
.media-card__poster { border: 2px solid var(--rule); box-shadow: none; }
.media-card:hover .media-card__poster {
  border-color: var(--rule);
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 var(--c-green);
}
.media-card__title { font-size: 14px; }
.media-card:hover .media-card__title {
  color: var(--paper); text-decoration: underline;
  text-decoration-color: var(--c-green); text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}
.media-card__rank {
  background: var(--rule); color: var(--void);
  width: 24px; height: 24px; font-size: 12px;
}

.media-row {
  background: var(--void); border: 2px solid var(--rule); margin-bottom: 10px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.media-row:hover {
  background: var(--void); border-color: var(--rule);
  transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--c-green);
}
.media-row__rank {
  font-size: 17px; font-weight: 700; color: var(--paper);
  font-variant-numeric: tabular-nums;
}
.media-row__poster, .sidebar-item__poster, .hub-card__poster, .cast-card__photo {
  border: 1px solid var(--rule);
}
.detail-hero__poster { border: 3px solid var(--rule); box-shadow: 10px 10px 0 var(--c-green); }

.rank-list .rank-num, .verdict__rank-list .rank-num { color: var(--paper); }
.story-item__num, .collection-item__num {
  background: var(--c-green); color: var(--on-c-green);
  padding: 6px 10px; display: inline-block; border: 2px solid var(--rule);
}


/* -- title page --------------------------------------------------------- */
.verdict__score strong { font-size: 46px; }
.detail-block__title {
  font-family: var(--font-display); font-size: 15px; color: var(--paper);
  font-weight: 700; letter-spacing: .12em;
  border-bottom: 2px solid var(--rule); padding-bottom: 9px;
}
.platform-tile {
  background: var(--void); border: 2px solid var(--rule);
  transition: transform .12s ease, box-shadow .12s ease;
}
.platform-tile:hover { transform: translate(-2px,-2px); box-shadow: 4px 4px 0 var(--rule); }
.platform-tile__value { font-size: 20px; font-weight: 700; }
.fact-grid { border: 2px solid var(--rule); }
.award-row { background: var(--void); border: 2px solid var(--rule); }
.award-row__badge--winner { background: var(--c-gold); color: var(--on-c-gold); }


/* -- footer ---------------------------------------------------------------
   Inverted. A page that is white from the header to the last line of legal
   text has no bottom; a solid ink block gives every page one, and it is the
   cheapest possible way to add weight to a layout.
   ----------------------------------------------------------------------- */
.site-footer {
  background: #12151d; color: rgba(255,255,255,.62);
  border-top: 0; padding: 46px 0 34px; margin-top: 72px;
  position: relative;
}
.site-footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px;
  background: linear-gradient(90deg, var(--c-green) 0 62%, var(--c-lime) 62% 100%);
}
.site-footer .brand { color: #fff; font-size: 20px; }
.site-footer .brand--sm { font-size: 20px; }
.site-footer .brand--sm .brand__mark { width: 24px; height: 24px; }
.site-footer .brand__mark, .site-footer .brand__accent { color: var(--c-green); }
.site-footer a { color: rgba(255,255,255,.82); }
.site-footer a:hover { color: var(--c-lime); }
.site-footer__links { margin-top: 20px; gap: 0; flex-wrap: wrap; }
.site-footer__links a {
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: .07em; font-size: 12.5px;
  padding: 4px 14px; border-left: 2px solid rgba(255,255,255,.18);
}
.site-footer__links a:first-child { border-left: 0; padding-left: 0; }
.site-footer .attribution { border-top: 1px solid rgba(255,255,255,.16); }
.site-footer .attribution p, .site-footer .attribution a { color: rgba(255,255,255,.55); }
.site-footer .attribution a:hover { color: var(--c-lime); }


/* -- selection + focus, restated against the new palette ---------------- */
::selection { background: var(--c-lime); color: var(--on-c-lime); }
:focus-visible { outline: 3px solid var(--c-violet); outline-offset: 2px; }


/* On a phone the offset shadows would push cards past the viewport edge and
   introduce a horizontal scroll, so they shrink rather than disappear --
   the treatment still reads at 3px. */
@media (max-width: 560px) {
  .sidebar-card, .hub-card, .method-step, .watch-box,
  .verdict__score-card, .verdict__ranks-panel, .builder-callout,
  .auth-card, .collection-card, .consensus-panel {
    box-shadow: 3px 3px 0 var(--rule);
  }
  .detail-hero__poster { box-shadow: 5px 5px 0 var(--c-green); }
  .hero__stats { display: flex; }
  .hero__stats span { flex: 1 1 auto; }
}


/* -- platform colours -----------------------------------------------------
   The rotation above picks a colour from grid position, which is right for
   a decade or a genre and wrong for a platform: IMDb has been yellow and
   Rotten Tomatoes red for twenty years, and a reader recognises those
   before they read the label. So where a card *is* a platform, it wears
   that platform's colour and the rotation stands aside.

   These are each platform's own brand value, adjusted only where the
   original fails contrast against the ink it has to carry:
     - Rotten Tomatoes red is #fa320a, which is 3.9:1 under white; darkened
       one step to clear AA.
     - Google's brand blue is #4285f4 (3.7:1 white); this is Google's own
       darker UI blue, which they use for exactly this reason.
   Metacritic takes its black site chrome rather than one of its three
   score colours -- the yellow would collide with IMDb's, and the green
   with the mean score's, which defeats the point of branding them at all.

   Specificity matches the rotation rules (two classes) and these come
   later in the file, so they win.
   ----------------------------------------------------------------------- */
.home-box-grid > .home-box--mean,               .hub-grid > .hub-card--mean {
  --accent: var(--c-green);  --on-accent: var(--on-c-green);
}
.home-box-grid > .home-box--imdb,               .hub-grid > .hub-card--imdb {
  --accent: #f5c518;         --on-accent: #14110a;   /* IMDb yellow  */
}
.home-box-grid > .home-box--rt_average,         .hub-grid > .hub-card--rt_average,
.hub-grid > .hub-card--rt_tomatometer,          .hub-grid > .hub-card--rt_popcornmeter {
  --accent: #da2f00;         --on-accent: #ffffff;   /* Tomatometer red */
}
.home-box-grid > .home-box--metacritic_average, .hub-grid > .hub-card--metacritic_average,
.hub-grid > .hub-card--metacritic_metascore {
  --accent: #101010;         --on-accent: #ffffff;   /* Metacritic black */
}
.home-box-grid > .home-box--letterboxd,         .hub-grid > .hub-card--letterboxd {
  --accent: #40bcf4;         --on-accent: #06181f;   /* Letterboxd blue */
}
.home-box-grid > .home-box--google,             .hub-grid > .hub-card--google {
  --accent: #1a73e8;         --on-accent: #ffffff;   /* Google blue */
}
.home-box-grid > .home-box--ratinggraph,        .hub-grid > .hub-card--ratinggraph {
  --accent: var(--c-violet); --on-accent: var(--on-c-violet);
}
.hub-grid > .hub-card--criticker { --accent: var(--c-orange); --on-accent: var(--on-c-orange); }
.hub-grid > .hub-card--douban    { --accent: #007722;         --on-accent: #ffffff; }
.hub-grid > .hub-card--kinopoisk { --accent: #ff6600;         --on-accent: #1a0700; }
.hub-grid > .hub-card--allocine  { --accent: #fecc00;         --on-accent: #191300; }

/* The home boxes wear their colour as a header cap, so the cap is where a
   platform is identified -- give it a touch more presence than the generic
   sidebar heading gets. */
.home-box > h3 { letter-spacing: .1em; }


/* The title page's poster column, between phone and desktop.
   --------------------------------------------------------------------------
   Two fixes that have to be read together, because the first one on its own
   caused the second problem.

   Stacking to one column below 780px let the poster grow to the full width
   of the screen -- a 2:3 image about a screen and a half tall before you
   reached a single rating -- so it was capped at 300px. But the column it
   sits in was still the full 713px, so on a 768px tablet the cap produced
   ~410px of dead white space to the right of the poster and pushed every
   rating below the fold for no reason.

   A tablet has the width for two columns; it just doesn't have it for a
   260px poster plus a comfortable reading measure. So a tablet keeps the
   two columns with a narrower poster, and only the phone stacks.

   The phone used to centre the poster, on the reasoning that the leftover
   space then falls either side as a margin rather than pooling on one as
   a gap. It reads worse than the problem it solved: a centred image above
   a left-aligned title, subline, grade and everything else is one element
   on a different axis from every other, and it looks like a mistake
   rather than a choice. The stack now starts at the same edge all the way
   down, and the poster is small enough that there is no pool of space to
   worry about. */
@media (min-width: 561px) and (max-width: 860px) {
  .detail-hero { grid-template-columns: 180px 1fr; gap: 22px; }
  .detail-hero__poster-col { max-width: none; width: auto; }
}


/* In dark the footer's ink is barely darker than the page, which loses the
   "the page ends here" beat the block exists to give. Drop it below the
   page ground instead. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .site-footer { background: #04060a; }
}
:root[data-theme="dark"] .site-footer { background: #04060a; }


/* ==========================================================================
   THE SCOREBOARD LAYER: dashboard
   --------------------------------------------------------------------------
   The layer above only reached the public site, which left the dashboard in
   the old grey-hairline style -- hard-edged buttons sitting on soft cards,
   two design systems in one screen. Same vocabulary here: ink borders,
   offset shadows, colour that means something.

   One difference in intent. On the public site the accent rotates by grid
   position because those cards are peers. Here the colour is a status: a
   number that wants attention is amber, a job that failed is red, one that
   is fine is green. Nothing is coloured for decoration.
   ========================================================================== */

/* Buttons wrap onto two lines in the dashboard's narrow action columns now
   that they are uppercase and letter-spaced. "RUN NOW" is not a paragraph. */
.btn { white-space: nowrap; }

.dash-sidebar {
  background: var(--void);
  border-right: 2px solid var(--rule);
}
.dash-sidebar a {
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: .06em; font-size: 12.5px; color: var(--paper);
  border-left: 3px solid transparent;
}
.dash-sidebar a:hover { background: var(--slate-2); }
.dash-sidebar a.is-active {
  background: var(--slate-2); border-left-color: var(--c-green); font-weight: 700;
}
.dash-sidebar .dash-group-label { color: var(--mist-2); font-weight: 700; }
/* Sign out is a POST, so it is a button in a form, dressed as the links
   above it. */
.dash-signout { margin: 0; }
.dash-signout button {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; border-left: 3px solid transparent;
  padding: 9px 12px; border-radius: var(--radius-sm); margin-bottom: 2px;
  font-family: var(--font-display); text-transform: uppercase; font-weight: 500;
  letter-spacing: .06em; font-size: 12.5px; color: var(--paper);
}
.dash-signout button:hover { background: var(--slate-2); }

.dash-topbar {
  border-bottom: 2px solid var(--rule); padding-bottom: 14px;
}
.dash-topbar h1 {
  font-size: 28px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .01em;
}

/* Stat tiles. Flat by default -- eight of them each throwing a coloured
   shadow would be a fairground. The two that carry a judgement get one. */
.stat-card {
  background: var(--void); border: 2px solid var(--rule);
  padding: 16px 18px;
}
.stat-card__value { font-size: 30px; font-weight: 700; }
.stat-card__label {
  font-size: 11.5px; color: var(--mist); margin-top: 4px;
  text-transform: uppercase; letter-spacing: .07em; font-weight: 600;
}
.stat-card--good  { box-shadow: 5px 5px 0 var(--c-green); border-color: var(--rule); }
.stat-card--good .stat-card__value { color: var(--paper); }
.stat-card--warn  { box-shadow: 5px 5px 0 var(--c-gold); }
.stat-card--warn .stat-card__value { color: var(--paper); }

/* Job rows. The status dot was the only signal that a job had failed, at
   8px across; the whole row's left edge carries it now. */
.job-card {
  background: var(--void); border: 2px solid var(--rule);
  border-left: 7px solid var(--slate-3);
  margin-bottom: 12px;
}
.job-card:has(.status-dot--running) { border-left-color: var(--c-cyan); }
.job-card:has(.status-dot--success) { border-left-color: var(--c-green); }
.job-card:has(.status-dot--partial) { border-left-color: var(--c-gold); }
.job-card:has(.status-dot--failed)  { border-left-color: var(--coral); }
.job-card__name { font-size: 15px; }
.job-card__pending {
  border: 1px solid var(--rule);
  background: var(--c-gold); color: var(--on-c-gold);
}
.job-card__pending--clear   { background: var(--c-green); color: var(--on-c-green); }
.job-card__pending--neutral { background: var(--void); color: var(--paper); }
.job-limit input { border: 2px solid var(--rule); background: var(--void); }

.runbook {
  background: var(--void);
  border: 2px solid var(--rule); border-left: 7px solid var(--c-cyan);
  box-shadow: 6px 6px 0 var(--c-cyan);
}
.runbook h2 { text-transform: uppercase; letter-spacing: .02em; }

/* The one thing on this screen that is genuinely wrong and wants fixing.
   It should look it. */
.stale-banner {
  background: var(--void);
  border: 2px solid var(--rule); border-left: 7px solid var(--coral);
  box-shadow: 6px 6px 0 var(--coral);
}
.stale-banner h2 {
  color: var(--paper); font-size: 16px;
  text-transform: uppercase; letter-spacing: .04em;
}
.stale-banner__row { border-top: 1px solid var(--border); }

.table-wrap { background: var(--void); border: 2px solid var(--rule); }
table.dash-table th {
  color: var(--paper); font-weight: 700; letter-spacing: .08em;
  border-bottom: 2px solid var(--rule); background: var(--slate);
}
table.dash-table tr:hover td { background: var(--slate-2); }

.badge { border: 1px solid var(--rule); }
.badge-movie { background: var(--c-cyan);  color: var(--on-c-cyan); }
.badge-show  { background: var(--c-violet); color: var(--on-c-violet); }

.messages li { border: 2px solid var(--rule); font-weight: 600; }
.messages .success { background: var(--c-green); color: var(--on-c-green); border-color: var(--rule); }
.messages .error   { background: var(--coral);  color: #fff;               border-color: var(--rule); }
.messages .warning { background: var(--c-gold); color: var(--on-c-gold);   border-color: var(--rule); }

.dash-group-heading {
  color: var(--paper); font-weight: 700;
  border-bottom: 2px solid var(--rule);
}
.form-section h3 {
  text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 2px solid var(--rule); padding-bottom: 9px;
}
.field-group label {
  color: var(--paper); font-size: 12px;
  text-transform: uppercase; letter-spacing: .06em;
}
.collection-editor__row { background: var(--void); border: 2px solid var(--rule); }

/* The dashboard sidebar disappears entirely below 860px with nothing in its
   place, so on a tablet there is no way to reach any other admin page. It
   becomes a scrolling strip across the top instead. */
@media (max-width: 860px) {
  .dash-sidebar {
    display: block; border-right: 0; border-bottom: 2px solid var(--rule);
    padding: 10px 14px; overflow-x: auto; white-space: nowrap;
  }
  .dash-sidebar a {
    display: inline-block; border-left: 0; border-bottom: 3px solid transparent;
    padding: 7px 12px;
  }
  .dash-sidebar a.is-active { border-left: 0; border-bottom-color: var(--c-green); }
  .dash-sidebar .dash-group-label { display: none; }
  .dash-signout { display: inline-block; }
  .dash-signout button {
    display: inline-block; width: auto; border-left: 0;
    border-bottom: 3px solid transparent; padding: 7px 12px;
  }
  .dash-main { padding: 20px 16px; }
}


/* -- rating rows: one block per platform ----------------------------------
   Rotten Tomatoes and Metacritic each publish two scores. They used to sit
   in the list as four separate siblings -- "RT Tomatometer", "RT
   Popcornmeter", "Metascore", "Metacritic Users" -- which read as four
   sources rather than two, and hid the one thing that pair is actually
   for: the gap between what critics said and what the audience said.

   A platform is one bordered block now. Where it has two measures they sit
   side by side inside it, each with its own label, votes and bar, split by
   a rule. The grid below overrides the old three-column row wholesale.
   ----------------------------------------------------------------------- */
.rating-row {
  display: block;
  background: var(--void); border: 2px solid var(--rule);
  padding: 12px 14px;
  transition: transform .12s ease, box-shadow .12s ease;
}
div.rating-row:hover { border-color: var(--rule); }
a.rating-row:hover {
  background: var(--void); border-color: var(--rule);
  transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--c-green);
}
.rating-row__name {
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  margin-bottom: 9px;
}

.rating-row__measures { display: grid; gap: 12px; }
.rating-row--split .rating-row__measures { grid-template-columns: 1fr 1fr; }
/* The divider belongs to the second measure, so a platform that publishes
   two scores but only has one of them recorded doesn't draw a rule against
   nothing. */
.rating-row--split .rating-measure + .rating-measure {
  padding-left: 12px; border-left: 2px solid var(--border);
}
.rating-measure__label {
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--mist-2); font-weight: 700; margin-bottom: 2px;
}
.rating-measure .rating-row__value { font-size: 19px; font-weight: 700; line-height: 1.1; }
.rating-measure .rating-row__votes {
  font-size: 11.5px; color: var(--mist-2); text-align: left;
  min-width: 0; margin-top: 1px;
}
.rating-measure .rating-row__bar {
  height: 4px; background: var(--slate-3); margin-top: 7px;
  border: 1px solid var(--rule);
}
.rating-measure .rating-row__bar span { background: var(--c-green); }

/* A rating the mean left out, because too few people rated it.
   It stays on the page -- we hold the number and hiding it would be the
   dishonest option -- but it is dimmed and labelled, so "averaged across
   10 ratings" no longer sits above eleven numbers with nothing to explain
   the difference. The bar goes grey for the same reason: a full green bar
   reads as a score that counted. */
.rating-measure--uncounted .rating-row__value,
.rating-measure--uncounted .rating-measure__label { color: var(--mist-2); }
.rating-measure--uncounted .rating-row__bar span { background: var(--mist-3, var(--slate-3)); }
.rating-row__excluded {
  display: block; margin-top: 1px;
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  font-weight: 700; color: var(--mist-2); cursor: help;
}

/* At one column per row there is room for the pair side by side even on a
   phone; below that they stack. */
@media (max-width: 420px) {
  .rating-row--split .rating-row__measures { grid-template-columns: 1fr; }
  .rating-row--split .rating-measure + .rating-measure {
    padding-left: 0; padding-top: 10px;
    border-left: 0; border-top: 2px solid var(--border);
  }
}


/* ── person pages: actor / director / writer / creator ────────────────────
   These were a 72px photo, a name, and a grid of posters -- identical for a
   forty-film career and for one uncredited bit part, and the only page type
   on the site that told you nothing the poster grid didn't already say.

   Everything here is derived from credits already on file, so it uses the
   same bordered-box vocabulary as the rest of the site rather than
   introducing a new one.
   ──────────────────────────────────────────────────────────────────────── */
.person-head {
  display: grid; grid-template-columns: 180px 1fr; gap: 26px;
  align-items: start; margin-bottom: 28px;
}
.person-head__photo {
  border: 2px solid var(--rule); box-shadow: 6px 6px 0 var(--rule);
  aspect-ratio: 3/4; overflow: hidden; background: var(--slate-2);
}
.person-head__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.person-head__body .page-title { margin-bottom: 8px; }
.person-head__summary { color: var(--mist); max-width: 62ch; margin-bottom: 18px; }

/* The numbers. A row of bordered cells rather than separate cards -- they
   are one fact split three ways, not three unrelated boxes. */
.person-stats {
  display: inline-flex; flex-wrap: wrap;
  border: 2px solid var(--rule); background: var(--void);
  margin-bottom: 18px;
}
.person-stat {
  display: flex; align-items: baseline; gap: 10px;
  padding: 12px 18px;
}
.person-stat + .person-stat { border-left: 2px solid var(--rule); }
.person-stat__value {
  font-family: var(--font-display); font-size: 28px; font-weight: 700;
  line-height: 1; color: var(--paper); font-variant-numeric: tabular-nums;
}
.person-stat__label {
  font-size: 11.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .07em; color: var(--paper); line-height: 1.35;
}
.person-stat__label small {
  display: block; font-size: 11px; font-weight: 400;
  text-transform: none; letter-spacing: 0; color: var(--mist-2);
}

.person-head__genres { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.person-head__genres-label,
.person-head__also {
  font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
  font-weight: 600; color: var(--mist-2);
}
.person-head__also { margin: 0; text-transform: none; letter-spacing: 0; font-size: 13.5px; }

/* Their best credit, as a single full-width row: the one thing on the page
   worth clicking before the grid. */
.person-best {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 13px 16px; background: var(--void);
  border: 2px solid var(--rule); box-shadow: 5px 5px 0 var(--rule);
  transition: transform .12s ease, box-shadow .12s ease;
}
.person-best:hover {
  text-decoration: none;
  transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--rule);
}
.person-best__label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--on-c-green); background: var(--c-green);
  border: 2px solid var(--rule); padding: 4px 9px;
}
.person-best__title {
  font-family: var(--font-display); font-size: 19px; font-weight: 700;
  color: var(--paper); margin-right: auto;
}
.person-best__title span { color: var(--mist); font-weight: 400; }

@media (max-width: 680px) {
  .person-head { grid-template-columns: 120px 1fr; gap: 16px; }
  .person-head__photo { box-shadow: 3px 3px 0 var(--rule); }
  /* Full width, so three cells don't wrap into a ragged block. */
  .person-stats { display: flex; width: 100%; }
  .person-stat { flex: 1 1 auto; padding: 10px 12px; flex-direction: column; gap: 3px; }
  .person-stat__value { font-size: 22px; }
}


/* ── compare ──────────────────────────────────────────────────────────────
   A table, not a grid of cards. The whole point is reading across a row --
   "who wins on Metacritic" -- and a table is the only layout where the eye
   can do that, as well as being what the content actually is.
   ──────────────────────────────────────────────────────────────────────── */
.compare__lede { color: var(--mist); max-width: 62ch; margin-bottom: 22px; }

.compare-picker { display: flex; gap: 0; max-width: 520px; margin-bottom: 6px; }
.compare-picker input {
  flex: 1; height: 44px; padding: 0 14px; font-size: 15px;
  background: var(--void); color: var(--paper);
  border: 2px solid var(--rule); border-right: 0;
}
.compare-picker .btn { height: 44px; flex-shrink: 0; }

.compare-suggestions { list-style: none; margin: 0 0 22px; padding: 0; max-width: 520px; }
.compare-suggestions li + li { border-top: 0; }
.compare-suggestions a {
  display: flex; align-items: baseline; gap: 8px;
  padding: 9px 14px; color: var(--paper);
  border: 2px solid var(--rule); border-top: 0;
}
.compare-suggestions li:first-child a { border-top: 2px solid var(--rule); }
.compare-suggestions a:hover { background: var(--c-green); color: var(--on-c-green); text-decoration: none; }
.compare-suggestions span { font-size: 12.5px; color: var(--mist-2); }
.compare-suggestions a:hover span { color: inherit; }
.compare__empty, .compare__hint { color: var(--mist); font-size: 14px; margin-bottom: 22px; }

/* The table can outgrow a phone, so it gets its own scroller rather than
   pushing the whole page sideways. */
.compare-scroll { overflow-x: auto; margin-top: 26px; border: 2px solid var(--rule); }
.compare-table { width: 100%; border-collapse: collapse; background: var(--void); }
.compare-table th, .compare-table td {
  padding: 11px 14px; text-align: left; vertical-align: top;
  border-bottom: 2px solid var(--border);
}
.compare-table thead th { border-bottom: 2px solid var(--rule); vertical-align: bottom; }

/* The row label column: sticky, so the measure stays readable while the
   columns scroll under it on a narrow screen. */
.compare-table tbody th[scope="row"],
.compare-table__rowhead {
  position: sticky; left: 0; z-index: 1;
  background: var(--slate);
  border-right: 2px solid var(--rule);
  font-family: var(--font-display); font-size: 12.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; color: var(--paper);
  white-space: nowrap; min-width: 150px;
}
.compare-table__headline th[scope="row"], .compare-table__headline td {
  background: var(--slate-2); border-bottom: 2px solid var(--rule);
}
.compare-table__headline td { vertical-align: middle; }

.compare-col { display: block; min-width: 132px; color: var(--paper); }
.compare-col:hover { text-decoration: none; }
.compare-col:hover .compare-col__title {
  text-decoration: underline; text-decoration-color: var(--c-green);
  text-decoration-thickness: 2px; text-underline-offset: 2px;
}
.compare-col__poster {
  display: block; width: 100%; max-width: 116px; aspect-ratio: 2/3;
  border: 2px solid var(--rule); overflow: hidden; margin-bottom: 9px;
  background: var(--slate-2);
}
.compare-col__poster--person { aspect-ratio: 3/4; }
.compare-col__poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.compare-col__title {
  display: block; font-family: var(--font-display); font-size: 15.5px;
  font-weight: 700; line-height: 1.2;
}
.compare-col__year { display: block; font-size: 12px; color: var(--mist-2); margin-top: 2px; }
.compare-col__remove {
  display: inline-block; margin-top: 7px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  font-weight: 600; color: var(--mist-2);
}
.compare-col__remove:hover { color: var(--coral); text-decoration: underline; }

.compare-num {
  font-family: var(--font-mono, var(--font-display));
  font-size: 17px; font-weight: 700; color: var(--paper);
  font-variant-numeric: tabular-nums; display: block;
}
.compare-num--lg { font-size: 24px; }
.compare-num small { font-size: 11px; font-weight: 500; color: var(--mist-2); margin-left: 1px; }
.compare-votes { display: block; font-size: 11.5px; color: var(--mist-2); margin-top: 2px; }
.compare-none { color: var(--mist-2); }
.compare-cell--wrap { min-width: 150px; }
.compare-tag {
  display: inline-block; font-size: 11.5px; padding: 2px 7px; margin: 0 3px 3px 0;
  border: 1px solid var(--border); color: var(--mist);
}

/* The winner on a row. A left edge in the brand green rather than a tinted
   cell: it marks the cell without changing the ground the number is read
   off, which matters when the number itself is the content. */
.compare-table td.is-best {
  box-shadow: inset 4px 0 0 var(--c-green);
  background: rgba(var(--signal-rgb), .045);
}
.compare-table td.is-best .compare-num { color: var(--signal-dim); }

.compare-empty {
  border: 2px solid var(--rule); box-shadow: 6px 6px 0 var(--rule);
  padding: 26px; margin-top: 26px; max-width: 62ch; background: var(--void);
}
.compare-empty h2 {
  font-family: var(--font-display); font-size: 22px; font-weight: 700;
  margin-bottom: 10px;
}
.compare-empty p { color: var(--mist); margin-bottom: 10px; }
.compare-empty__note { font-size: 13.5px; color: var(--mist-2); margin-bottom: 0; }

@media (max-width: 560px) {
  .compare-table th, .compare-table td { padding: 9px 11px; }
  .compare-table tbody th[scope="row"], .compare-table__rowhead { min-width: 116px; font-size: 11.5px; }
  .compare-col { min-width: 108px; }
  .compare-empty { box-shadow: 3px 3px 0 var(--rule); padding: 18px; }
}

/* The "start a comparison" link on a title or person page. An outlined
   control rather than a filled button: it is a side door, not the reason
   the page exists. */
.detail-compare {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 14px; padding: 8px 13px;
  border: 2px solid var(--rule); background: var(--void); color: var(--paper);
  font-family: var(--font-display); font-size: 12.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
}
.detail-compare svg { width: 16px; height: 16px; flex-shrink: 0; }
.detail-compare:hover {
  background: var(--c-green); color: var(--on-c-green);
  border-color: var(--rule); text-decoration: none;
}


/* ── compare: summary + chart ─────────────────────────────────────────────
   Per-title colour is the one place on this page colour carries meaning --
   it says WHICH title a bar belongs to, which is information, not
   decoration. Four fixed slots by position, matching the column order.
   ──────────────────────────────────────────────────────────────────────── */
.compare-swatch {
  display: inline-block; width: 11px; height: 11px; margin-right: 6px;
  border: 1px solid var(--rule); vertical-align: baseline;
}
.compare-swatch--0, .compare-bar--0 { background: var(--c-green); }
.compare-swatch--1, .compare-bar--1 { background: var(--c-violet); }
.compare-swatch--2, .compare-bar--2 { background: var(--c-gold); }
.compare-swatch--3, .compare-bar--3 { background: var(--c-pink); }

.compare-summary {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0; margin-top: 26px;
  border: 2px solid var(--rule); background: var(--void);
}
.compare-summary__card { padding: 14px 16px; }
.compare-summary__card + .compare-summary__card { border-left: 2px solid var(--rule); }
.compare-summary__label {
  display: block; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; color: var(--mist-2); margin-bottom: 5px;
}
.compare-summary__card strong {
  display: block; font-family: var(--font-display); font-size: 17px;
  font-weight: 700; line-height: 1.25; color: var(--paper);
}
.compare-summary__detail { display: block; font-size: 12px; color: var(--mist); margin-top: 3px; }

.compare-chart {
  margin-top: 26px; padding: 20px;
  border: 2px solid var(--rule); background: var(--void);
}
.compare-chart__head {
  display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; gap: 10px;
  border-bottom: 2px solid var(--rule); padding-bottom: 11px; margin-bottom: 16px;
}
.compare-chart__head h2 {
  font-family: var(--font-display); font-size: 17px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; margin: 0;
}
.compare-legend { display: flex; flex-wrap: wrap; gap: 14px; }
.compare-legend__item { font-size: 12.5px; color: var(--paper); font-weight: 600; }

.compare-chart__row { display: grid; grid-template-columns: 158px 1fr; gap: 14px; margin-bottom: 13px; }
.compare-chart__label {
  font-size: 12.5px; font-weight: 600; color: var(--paper);
  text-transform: uppercase; letter-spacing: .05em; padding-top: 2px;
}
.compare-chart__gap {
  display: block; font-size: 11px; font-weight: 400; color: var(--mist-2);
  text-transform: none; letter-spacing: 0;
}
.compare-chart__bars { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

/* The bar. A minimum width so a very low score still shows its own label
   rather than collapsing to an invisible sliver. */
.compare-bar {
  height: 22px; min-width: 42px;
  border: 2px solid var(--rule);
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: 6px;
  font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--on-c-green);
}
.compare-bar--1 { color: var(--on-c-violet); }
.compare-bar--2 { color: var(--on-c-gold); }
.compare-bar--3 { color: var(--on-c-pink); }
.compare-bar--empty {
  width: auto; background: var(--slate-2); color: var(--mist-2);
  border-style: dashed; font-weight: 500; justify-content: flex-start;
  padding-left: 7px;
}
.compare-chart__foot { font-size: 12px; color: var(--mist-2); margin: 14px 0 0; }

@media (max-width: 620px) {
  .compare-summary { grid-template-columns: 1fr; }
  .compare-summary__card + .compare-summary__card {
    border-left: 0; border-top: 2px solid var(--rule);
  }
  .compare-chart { padding: 14px; }
  /* Label above the bars rather than a 158px column stealing half the width. */
  .compare-chart__row { grid-template-columns: 1fr; gap: 5px; margin-bottom: 16px; }
}

/* The live dropdown. Same rows as the no-JS list, but floating over the page
   rather than pushing it down as you type -- a list that reflows the layout
   on every keystroke is unusable. */
.compare-picker { position: relative; z-index: 3; }
.compare-suggestions--live {
  position: relative; margin-top: -2px; margin-bottom: 22px;
  max-height: 340px; overflow-y: auto;
}
.compare-suggestions a b {
  margin-left: auto; font-size: 12px; font-weight: 700;
  padding: 1px 6px; border: 1px solid var(--border); color: var(--mist);
  font-variant-numeric: tabular-nums;
}
.compare-suggestions a.is-active,
.compare-suggestions a:focus-visible {
  background: var(--c-green); color: var(--on-c-green); outline: none;
}
.compare-suggestions a.is-active span,
.compare-suggestions a.is-active b { color: inherit; border-color: currentColor; }


/* ── dashboard: what's missing ────────────────────────────────────────────
   A count on a job card answers "how much is left". It cannot answer "which
   ones", and some gaps -- a Criticker link, above all -- can only ever be
   filled by a person pasting a URL, so the titles have to be listable.
   ──────────────────────────────────────────────────────────────────────── */
.gap-group__label {
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--mist-2);
  margin: 26px 0 10px; padding-bottom: 7px;
  border-bottom: 2px solid var(--border);
}
.gap-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 10px;
}
.gap-card {
  display: block; padding: 12px 14px;
  border: 2px solid var(--rule); background: var(--void); color: var(--paper);
}
.gap-card:hover { text-decoration: none; box-shadow: 4px 4px 0 var(--rule); }
.gap-card.is-current { background: var(--c-green); color: var(--on-c-green); }
/* Nothing left to do reads as calm, not as another number to worry about. */
.gap-card.is-clear { opacity: .5; }
.gap-card.is-clear .gap-card__count { color: var(--signal); }
.gap-card__count {
  display: block; font-family: var(--font-display); font-size: 25px;
  font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums;
}
.gap-card__label { display: block; font-size: 12.5px; margin-top: 2px; line-height: 1.3; }
.gap-detail { margin-top: 30px; border-top: 2px solid var(--rule); padding-top: 6px; }
.gap-row__actions { white-space: nowrap; }
.gap-row__actions a { margin-right: 10px; font-size: 13px; }

/* Little "what did this title actually get" tags in the dashboard's
   recently-synced table. */
.sync-got span {
  display: inline-block; font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
  padding: 1px 5px; margin: 0 3px 2px 0;
  border: 1px solid var(--border); color: var(--mist);
}

/* When the platform count and the mean score name different winners, the
   card carries the site's own accent so the disagreement is the thing you
   notice rather than a footnote. */
.compare-summary__card--split { box-shadow: inset 4px 0 0 var(--c-gold); }

/* ── person page: sort control ──────────────────────────────────────────── */
.person-credits__head { flex-wrap: wrap; gap: 10px; }
.person-sort { display: flex; align-items: center; gap: 8px; }
.person-sort label {
  font-size: 11.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .07em; color: var(--mist-2);
}
.person-sort select {
  border: 2px solid var(--rule); background: var(--void); color: var(--paper);
  padding: 6px 10px; font-size: 13px; border-radius: 0;
}
/* JS submits on change, so the button is redundant -- but it stays in the
   DOM and keeps working for anyone without JS. */
.person-sort.is-autosubmit button { display: none; }

/* ── ranking builder: counts ───────────────────────────────────────────── */
.builder-genres__count {
  font-size: 11px; color: var(--mist-2); font-variant-numeric: tabular-nums;
}
.builder-total {
  margin: 14px 0 0; padding: 9px 13px;
  border: 2px solid var(--rule); background: var(--slate);
  font-family: var(--font-display); font-size: 14px; font-weight: 600;
  display: inline-block;
}
/* Below the ranking threshold: say so plainly rather than letting someone
   build a list that will never appear in the hub. */
.builder-total.is-thin { border-color: var(--spark); color: var(--spark-dim); }


/* ── lists index ──────────────────────────────────────────────────────────
   The cards showed one banner image each, which meant every card looked
   identical and none of them said what was in the list. A fanned row of the
   list's own posters does both jobs: it identifies the list at a glance and
   it is the only honest preview of its contents.
   ──────────────────────────────────────────────────────────────────────── */
.collection-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px; margin-top: 24px;
}

/* The lists as a shelf, same behaviour as the homepage rows: one line,
   swiped, fading out at the end so it reads as more rather than as a cut
   edge. A grid cannot do this -- the cards need a fixed width and no
   shrinking, which is a flex row. */
.collection-grid--scroll {
  display: flex; gap: 16px; overflow-x: auto; padding-bottom: 4px;
  scroll-snap-type: x proximity;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
}
.collection-grid--scroll .collection-card {
  width: 265px; flex: 0 0 265px; scroll-snap-align: start;
}
.collection-grid--scroll::-webkit-scrollbar { height: 6px; }
.collection-grid--scroll::-webkit-scrollbar-thumb { background: var(--slate-3); border-radius: 0; }
.collection-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--void); color: var(--paper); position: relative;
}
.collection-card__stack {
  display: flex; gap: 0; padding: 16px 16px 0; background: var(--slate);
  border-bottom: 2px solid var(--rule);
}
.collection-card__poster {
  /* A fifth of the strip each, rather than an equal share of it.
     ---------------------------------------------------------------
     With flex: 1 the posters divide whatever is there, so a card with
     two of them gets two wide posters -- and because they keep a 2:3
     ratio, wide means tall. Tarantino vs Nolan stood a head above every
     card beside it for that reason alone. At a fixed fifth, two posters
     fill two fifths and the card is the same height as its neighbours. */
  width: 20%; flex: 0 0 20%; min-width: 0; aspect-ratio: 2/3;
  border: 2px solid var(--rule); overflow: hidden; background: var(--slate-2);
  /* Overlapped, so five posters read as one object rather than five cards. */
  margin-right: -10px; box-shadow: 3px 0 0 rgba(0,0,0,.06);
}
.collection-card__poster:last-child { margin-right: 0; }
.collection-card__poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.collection-card__body { display: flex; flex-direction: column; padding: 14px 16px 16px; gap: 4px; }
.collection-card__date {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--mist-2); font-weight: 600;
}
.collection-card__title {
  font-family: var(--font-display); font-size: 19px; font-weight: 700;
  line-height: 1.2; color: var(--paper);
}
.collection-card__sub { font-size: 13.5px; color: var(--mist); line-height: 1.45; }
.collection-card__meta {
  margin-top: 6px; font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--mist-2);
}
.collection-card__draft {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  background: var(--spark); color: #fff; border: 2px solid var(--rule);
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; padding: 2px 7px;
}
.collection-card:hover .collection-card__title {
  text-decoration: underline; text-decoration-color: var(--c-green);
  text-decoration-thickness: 2px; text-underline-offset: 3px;
}


/* ==========================================================================
   LISTS, RESTYLED
   --------------------------------------------------------------------------
   The lists pages were written before the rest of the site was redrawn and
   never caught up: rounded corners, 1px hairline borders, soft blurred
   shadows and a lift-on-hover. Every other page here is 2px ink rules, hard
   offset shadows and square corners -- so clicking into a list felt like
   landing on a different, older website. That mismatch is most of why this
   section read as poor; the markup underneath was already fine.

   This brings them into the same vocabulary, and gives the reading layout
   the things an article actually needs: a masthead that separates the piece
   from the page, a real measure for the prose, and entries that are clearly
   entries rather than a list of divs.
   ========================================================================== */

/* -- the article ------------------------------------------------------- */
.collection { max-width: 860px; margin: 0 auto; }
.collection__banner {
  aspect-ratio: 21/9; border-radius: 0;
  border: 2px solid var(--rule); box-shadow: 8px 8px 0 var(--rule);
  margin: 0 0 30px;
}
.collection__head {
  border-bottom: 3px solid var(--rule);
  padding-bottom: 18px; margin-bottom: 26px;
}
.collection__date {
  font-family: var(--font-display); color: var(--paper);
  background: var(--c-gold); border: 2px solid var(--rule);
  display: inline-block; padding: 3px 9px; margin: 0 0 12px;
  font-size: 11px; letter-spacing: .1em; font-weight: 700;
}
.collection__sub {
  font-size: 19px; line-height: 1.45; color: var(--mist);
  margin: 6px 0 10px; max-width: 46ch;
}
.collection__meta {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--mist-2); margin: 0;
}
/* The intro is the piece of writing the page exists for, so it gets a
   reading size and a measure rather than the body default. */
.collection__intro { font-size: 17.5px; line-height: 1.72; max-width: 62ch; }
.collection__intro p { margin: 0 0 18px; }
.collection__intro p:first-child { font-size: 19px; line-height: 1.6; }

/* -- story layout: one entry, presented like a piece ------------------- */
.story-items { display: grid; gap: 0; margin: 38px 0 0; }
.story-item {
  padding: 30px 0; border-bottom: 2px solid var(--border);
}
.story-item:first-child { border-top: 2px solid var(--rule); }
.story-item__top { grid-template-columns: 62px 132px 1fr; gap: 20px; }
/* The rank is the loudest thing in the row: a solid block, not a coloured
   numeral competing with the title beside it. */
.story-item__num {
  font-family: var(--font-display); font-size: 26px; font-weight: 700;
  color: var(--on-c-green); background: var(--c-green);
  border: 2px solid var(--rule); min-width: 0;
  display: grid; place-items: center; aspect-ratio: 1; padding: 0;
}
.story-item__poster img { border: 2px solid var(--rule); }
.story-item__mini-ratings { border: 2px solid var(--rule); padding: 7px 9px; gap: 3px; }
.story-item__mini-ratings li { font-size: 11px; }
.story-item__title { font-size: 26px; letter-spacing: -.01em; }
.story-item__facts {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em;
  font-weight: 600; color: var(--mist-2); margin-bottom: 12px;
}
/* The note is the writing, so it is set as writing: ink rule down the left,
   no tinted panel, a real reading size. */
.story-item__note {
  background: none; border-left: 4px solid var(--c-green);
  border-radius: 0; padding: 4px 0 4px 18px; margin-top: 22px;
  font-size: 16.5px; line-height: 1.72; max-width: 60ch;
}
.story-item__note-label {
  font-family: var(--font-display); font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--mist-2); margin: 0 0 6px;
}

/* -- ranked / grid layouts --------------------------------------------- */
.collection-items { list-style: none; margin: 34px 0 0; padding: 0; }
.collection-items--grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px;
}
.collection-item {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--void); border: 2px solid var(--rule);
  padding: 14px; margin-bottom: 12px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.collection-item:hover { transform: translate(-2px,-2px); box-shadow: 4px 4px 0 var(--rule); }
.collection-items--grid .collection-item { flex-direction: column; margin-bottom: 0; }
.collection-item__num {
  font-family: var(--font-display); font-size: 20px; font-weight: 700;
  background: var(--rule); color: var(--void);
  min-width: 38px; height: 38px; display: grid; place-items: center;
  flex-shrink: 0; font-variant-numeric: tabular-nums;
}
.collection-item__poster { flex-shrink: 0; width: 74px; }
.collection-item__poster img { width: 100%; aspect-ratio: 2/3; object-fit: cover; border: 2px solid var(--rule); display: block; }
.collection-items--grid .collection-item__poster { width: 100%; }
.collection-item__body { min-width: 0; flex: 1; }
.collection-item__title { font-size: 18px; margin: 0 0 3px; }
.collection-item__year { color: var(--mist-2); font-weight: 400; }
.collection-item__facts {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  font-weight: 600; color: var(--mist-2); margin: 0 0 8px;
}
.collection-item__note, .collection-item__plot {
  font-size: 14.5px; line-height: 1.6; color: var(--paper); margin: 0;
}

@media (max-width: 680px) {
  .collection__banner { box-shadow: 4px 4px 0 var(--rule); }
  .story-item__top { grid-template-columns: 44px 92px 1fr; gap: 12px; }
  .story-item__num { font-size: 18px; }
  .story-item__title { font-size: 21px; }
  .story-item__note { font-size: 15.5px; padding-left: 13px; }
  .collection-item { flex-wrap: wrap; }
}


/* ── recommender ──────────────────────────────────────────────────────────
   The familiarity control is given its own row and a heavier frame, because
   it is the only one on the page that does something the other recommendation
   sites don't -- everything else narrows a list, that one decides whether the
   answer can surprise you.
   ──────────────────────────────────────────────────────────────────────── */
.rec-form { border: 2px solid var(--rule); padding: 20px; margin-top: 24px; background: var(--void); }
.rec-field { display: flex; flex-direction: column; gap: 5px; }
.rec-field label {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--paper);
}
.rec-field select {
  border: 2px solid var(--rule); background: var(--void); color: var(--paper);
  padding: 9px 11px; font-size: 14px; border-radius: 0; width: 100%;
}
.rec-field__hint { font-size: 12px; color: var(--mist-2); }
.rec-field--lead {
  border-left: 5px solid var(--c-green); padding: 2px 0 2px 14px; margin-bottom: 20px;
}
.rec-field--lead label { font-size: 13px; }
.rec-field--lead select { font-size: 15.5px; max-width: 420px; }
.rec-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px; margin-bottom: 20px;
}
.rec-form.is-autosubmit button { display: none; }

.rec-applied { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.rec-applied__chip {
  border: 2px solid var(--rule); padding: 4px 10px; font-size: 12.5px;
  background: var(--slate);
}
.rec-applied__chip strong { text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }
.rec-caveat {
  font-size: 13px; color: var(--mist); max-width: 68ch; margin: 12px 0 0;
  border-left: 3px solid var(--border); padding-left: 12px;
}

.rec-results { list-style: none; margin: 18px 0 0; padding: 0; }
.rec-result {
  display: flex; gap: 16px; align-items: flex-start;
  border: 2px solid var(--rule); background: var(--void);
  padding: 14px; margin-bottom: 12px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.rec-result:hover { transform: translate(-2px,-2px); box-shadow: 4px 4px 0 var(--rule); }
.rec-result__poster { flex-shrink: 0; width: 78px; }
.rec-result__poster img {
  width: 100%; aspect-ratio: 2/3; object-fit: cover;
  border: 2px solid var(--rule); display: block;
}
.rec-result__body { flex: 1; min-width: 0; }
.rec-result__title { font-size: 18px; margin: 0 0 3px; }
.rec-result__title span { color: var(--mist-2); font-weight: 400; }
.rec-result__facts {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  font-weight: 600; color: var(--mist-2); margin: 0 0 7px;
}
/* The working. This is the page's whole argument, so it is styled to be read
   rather than skipped. */
.rec-result__why {
  font-size: 13.5px; font-weight: 600; color: var(--signal-dim);
  margin: 0 0 6px; line-height: 1.5;
}
.rec-result__plot { font-size: 13.5px; color: var(--mist); margin: 0; line-height: 1.55; }

@media (max-width: 560px) {
  .rec-form { padding: 14px; }
  .rec-result { flex-wrap: wrap; }
}

/* ── countries index ──────────────────────────────────────────────────── */
.country-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px;
}
.country-tile {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  border: 2px solid var(--rule); background: var(--void); color: var(--paper);
  padding: 11px 14px;
}
.country-tile:hover { background: var(--c-green); color: var(--on-c-green); text-decoration: none; }
.country-tile__name { font-family: var(--font-display); font-size: 15px; font-weight: 600; }
.country-tile__count {
  font-size: 12px; font-weight: 700; color: var(--mist-2); font-variant-numeric: tabular-nums;
}
.country-tile:hover .country-tile__count { color: inherit; }

/* ── support link ─────────────────────────────────────────────────────────
   Only rendered when SUPPORT_URL is configured. In the footer rather than
   the header on purpose: a site asking for money above the fold reads as a
   toll gate, and this one hasn't earned that yet.
   ──────────────────────────────────────────────────────────────────────── */
.support-link {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 18px; padding: 9px 15px;
  background: var(--c-gold); color: var(--on-c-gold) !important;
  border: 2px solid var(--void);
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
}
.support-link:hover { background: var(--c-lime); color: var(--on-c-lime) !important; text-decoration: none; }
.support-link svg { width: 17px; height: 17px; }

/* ── FAQ on ranking pages ─────────────────────────────────────────────────
   Only rendered where there are questions worth answering. Set as prose with
   a real measure, because the point is that somebody reads the answer -- the
   schema markup is a by-product, not the purpose.
   ──────────────────────────────────────────────────────────────────────── */
.faq { margin-top: 44px; border-top: 3px solid var(--rule); padding-top: 22px; }
.faq__heading {
  font-family: var(--font-display); font-size: 20px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em; margin: 0 0 18px;
}
.faq__list { margin: 0; max-width: 66ch; }
.faq__item { padding: 0 0 18px; margin-bottom: 18px; border-bottom: 2px solid var(--border); }
.faq__item:last-child { border-bottom: 0; margin-bottom: 0; }
.faq__item dt {
  font-family: var(--font-display); font-size: 16.5px; font-weight: 700;
  color: var(--paper); margin-bottom: 6px;
}
.faq__item dd { margin: 0; font-size: 15.5px; line-height: 1.68; color: var(--mist); }

/* While a filter request is in flight. Dimmed rather than emptied, so the
   layout doesn't collapse and rebuild under the reader. */
[data-filter-results][aria-busy="true"] { opacity: .45; transition: opacity .12s ease; }


/* ==========================================================================
   LISTS: THE EDITORIAL FORMAT
   --------------------------------------------------------------------------
   An entry is a piece of writing about one thing, not a row in a table. So
   each one gets: a header that names it, a one-line verdict that says what
   the entry concludes, the reasoning set as prose, and -- on a scored list --
   a scorecard in which every number carries its own justification.

   The computed / editorial distinction is drawn in colour and repeated on
   every score, deliberately. A reader should never have to remember from the
   top of the page whether "9" was measured or decided.
   ========================================================================== */

/* -- the key ----------------------------------------------------------- */
.criteria-key {
  margin: 30px 0 8px; padding: 20px 22px;
  border: 2px solid var(--rule); background: var(--slate);
}
.criteria-key__heading {
  font-family: var(--font-display); font-size: 14px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; margin: 0 0 14px;
}
.criteria-key__list {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px 22px; margin: 0 0 14px;
}
.criteria-key__item dt {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-family: var(--font-display); font-size: 15.5px; font-weight: 700;
  color: var(--paper); margin-bottom: 4px;
}
.criteria-key__item dd { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--mist); }
.criteria-key__foot {
  margin: 0; padding-top: 12px; border-top: 2px solid var(--border);
  font-size: 13px; line-height: 1.55; color: var(--mist);
}

/* The two kinds of number. Filled for computed (it is a fact you can
   check); outlined for editorial (it is a claim somebody is making). */
.criteria-kind {
  display: inline-block; font-family: var(--font-body, inherit);
  font-size: 9.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; padding: 2px 6px; line-height: 1.4;
  border: 2px solid var(--rule); white-space: nowrap;
}
.criteria-kind--computed { background: var(--rule); color: var(--void); }
.criteria-kind--editorial { background: var(--void); color: var(--paper); border-style: dashed; }

/* -- entries ----------------------------------------------------------- */
.entries { margin-top: 34px; counter-reset: none; }
.entry {
  border: 2px solid var(--rule); background: var(--void);
  box-shadow: 6px 6px 0 var(--rule);
  margin-bottom: 26px; padding: 22px;
}
.entry__head { display: flex; gap: 18px; align-items: flex-start; }
.entry__rank {
  flex-shrink: 0; width: 52px; height: 52px; display: grid; place-items: center;
  font-family: var(--font-display); font-size: 25px; font-weight: 700;
  background: var(--c-green); color: var(--on-c-green); border: 2px solid var(--rule);
  font-variant-numeric: tabular-nums;
}
/* First place carries the gold, and only first place. */
.entry:first-child .entry__rank { background: var(--c-gold); color: var(--on-c-gold); }
.entry__art { flex-shrink: 0; width: 96px; display: block; }
.entry__art img {
  width: 100%; aspect-ratio: 2/3; object-fit: cover; display: block;
  border: 2px solid var(--rule);
}
.entry__titles { flex: 1; min-width: 0; }
.entry__name {
  font-family: var(--font-display); font-size: 26px; font-weight: 700;
  line-height: 1.15; letter-spacing: -.01em; margin: 0 0 6px;
}
.entry__name a { color: var(--paper); }
.entry__name a:hover {
  text-decoration: underline; text-decoration-color: var(--c-green);
  text-decoration-thickness: 3px; text-underline-offset: 3px;
}
.entry__year { color: var(--mist-2); font-weight: 400; font-size: 20px; }
/* The verdict: what this entry concludes, before the reasoning for it. */
.entry__verdict {
  display: inline-block; margin: 0 0 8px; padding: 4px 10px;
  background: var(--slate); border-left: 4px solid var(--c-green);
  font-size: 13.5px; font-weight: 700; color: var(--paper);
}
.entry__pictured, .entry__facts {
  margin: 0; font-size: 12px; color: var(--mist-2);
}
.entry__facts { text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.entry__pictured a { color: var(--mist); text-decoration: underline; }
.entry__badge { flex-shrink: 0; }

/* The reasoning. Set as prose because it is prose. */
.entry__why {
  margin-top: 18px; padding-top: 16px; border-top: 2px solid var(--border);
  font-size: 16.5px; line-height: 1.7; color: var(--paper); max-width: 66ch;
}
.entry__why p { margin: 0 0 12px; }
.entry__why p:last-child { margin-bottom: 0; }
.entry__why strong { font-weight: 700; }

/* -- the scorecard ----------------------------------------------------- */
.scorecard {
  margin-top: 18px; display: grid; gap: 0;
  border: 2px solid var(--rule);
}
.scorecard__row {
  display: grid; grid-template-columns: 190px 110px 1fr; gap: 6px 16px;
  align-items: center; padding: 13px 15px;
}
.scorecard__row + .scorecard__row { border-top: 2px solid var(--border); }
.scorecard__measure { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.scorecard__label {
  font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--paper);
}
.scorecard__value {
  font-family: var(--font-display); font-size: 26px; font-weight: 700;
  color: var(--paper); font-variant-numeric: tabular-nums; line-height: 1;
}
.scorecard__value small { font-size: 13px; font-weight: 500; color: var(--mist-2); }
.scorecard__bar {
  height: 10px; border: 2px solid var(--rule); background: var(--slate-2);
  align-self: center;
}
.scorecard__bar span { display: block; height: 100%; background: var(--c-green); }
/* The justification spans the full row beneath its number. */
.scorecard__note {
  grid-column: 1 / -1; margin: 2px 0 0;
  font-size: 14.5px; line-height: 1.6; color: var(--mist);
}

.collection__outro {
  margin-top: 30px; padding: 18px 20px;
  border: 2px dashed var(--rule); font-size: 16px;
}

@media (max-width: 680px) {
  .entry { padding: 15px; box-shadow: 3px 3px 0 var(--rule); }
  .entry__head { gap: 12px; flex-wrap: wrap; }
  .entry__rank { width: 40px; height: 40px; font-size: 19px; }
  .entry__art { width: 72px; }
  .entry__name { font-size: 21px; }
  .entry__why { font-size: 15.5px; }
  .scorecard__row { grid-template-columns: 1fr auto; }
  .scorecard__bar { grid-column: 1 / -1; }
}

/* ── person awards ──────────────────────────────────────────────────────── */
.person-awards__list { list-style: none; margin: 0; padding: 0; border: 2px solid var(--rule); }
.person-awards__row {
  display: grid; grid-template-columns: 100px 1fr auto; gap: 14px;
  align-items: center; padding: 11px 14px; background: var(--void);
}
.person-awards__row + .person-awards__row { border-top: 2px solid var(--border); }
.person-awards__result {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  padding: 3px 7px; border: 2px solid var(--rule); text-align: center;
  background: var(--void); color: var(--paper);
}
.person-awards__row.is-win .person-awards__result { background: var(--c-gold); color: var(--on-c-gold); }
.person-awards__what { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.person-awards__what strong { font-size: 14.5px; color: var(--paper); }
.person-awards__what span { font-size: 12.5px; color: var(--mist-2); }
.person-awards__for { font-size: 13px; font-weight: 600; text-align: right; }
@media (max-width: 600px) {
  .person-awards__row { grid-template-columns: 1fr; gap: 6px; }
  .person-awards__result { justify-self: start; }
  .person-awards__for { text-align: left; }
}

/* ── lists: weights, roles, works, sources ─────────────────────────────── */
.criteria-key__weight { display: inline-block; font-weight: 700; color: var(--paper); }
.entry__role {
  margin: 12px 0 0; font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--mist-2);
}
.entry__works { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.entry__works-label {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; color: var(--mist-2); width: 100%;
}
.entry__work {
  display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px;
  border: 2px solid var(--rule); background: var(--void); color: var(--paper);
  font-size: 13px; font-weight: 600;
}
.entry__work img { width: 26px; aspect-ratio: 2/3; object-fit: cover; display: block; }
.entry__work small { font-weight: 400; color: var(--mist-2); }
.entry__work:hover { background: var(--c-green); color: var(--on-c-green); text-decoration: none; }
.entry__sources { margin: 14px 0 0; font-size: 12px; color: var(--mist-2); line-height: 1.6; }
.entry__sources a { color: var(--mist); text-decoration: underline; }
.collection__sources { margin-top: 26px; }

/* Titles that go with a list, unranked, under it. */
.collection-related { margin-top: 44px; }


/* -- head to head (Collection.layout == "versus") -------------------------- */
.versus { margin-top: 28px; }
.versus__sides { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.versus__side { border: 2px solid var(--rule); padding: 16px; background: var(--void); }
.versus__side--1 { box-shadow: 6px 6px 0 var(--c-pink); }
.versus__side--2 { box-shadow: 6px 6px 0 var(--c-cyan); }
.versus__art img { width: 88px; aspect-ratio: 2 / 3; object-fit: cover; border: 2px solid var(--rule); float: right; margin: 0 0 8px 12px; max-width: 100%; }
/* A head-to-head between two people shows the two people, and they are the
   subject of the page, so larger than a poster thumbnail would be. Cropped
   from the top: a headshot trimmed to fit loses a chin rather than a
   forehead. */
.versus__art--portrait img { width: 128px; object-position: 50% 15%; }
.entry__art--portrait img { object-position: 50% 15%; }
@media (max-width: 560px) {
  .versus__art--portrait img { width: 96px; }
}
.versus__name { font-size: 22px; margin: 0 0 6px; }
.versus__name a { color: inherit; }
.versus__verdict { font-weight: 600; margin: 0 0 8px; }
.versus__case { font-size: 14px; color: var(--mist); }
.versus__board { display: flex; align-items: stretch; justify-content: center; margin: 30px 0 10px; border: 2px solid var(--rule); }
.versus__tally { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 14px 8px; }
.versus__tally--1 { background: var(--c-pink); color: var(--on-c-pink); }
.versus__tally--2 { background: var(--c-cyan); color: var(--on-c-cyan); }
.versus__tally-num { font-family: var(--font-display); font-size: 44px; line-height: 1; }
.versus__tally-name { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; text-align: center; }
.versus__tally-mid { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 14px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; background: var(--void); text-align: center; }
.versus__tally-mid small { text-transform: none; letter-spacing: 0; color: var(--mist-2); }
.versus__rounds { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 18px; }
.round { border: 2px solid var(--rule); padding: 16px; background: var(--void); }
.round__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; }
.round__num { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--mist-2); }
.round__label { font-size: 19px; margin: 0; }
.round__blurb { font-size: 13px; color: var(--mist-2); margin: 4px 0 12px; }
.round__sides { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.round__side { border: 1px solid var(--rule); padding: 12px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.round__side.is-winner { border: 2px solid var(--rule); box-shadow: 4px 4px 0 var(--c-green); }
.round__who { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.round__edge { background: var(--c-green); color: var(--on-c-green); padding: 1px 6px; margin-left: 4px; white-space: nowrap; }
.round__value { font-family: var(--font-display); font-size: 26px; line-height: 1.1; }
.round__value small { font-size: 14px; color: var(--mist-2); }
.round__value--none { font-size: 14px; color: var(--mist-2); font-family: inherit; }
.round__case { margin: 2px 0 0; font-size: 14px; }
.round__note { margin: 0; font-size: 12px; color: var(--mist-2); }
.round__verdict { margin: 12px 0 0; font-size: 14px; }
@media (max-width: 560px) {
  .versus__sides, .round__sides { grid-template-columns: 1fr; }
  .versus__tally-num { font-size: 34px; }
}

.round__about { font-size: 15px; margin: 0 0 12px; }
.round__about p { margin: 0 0 8px; }
.round__case { font-size: 15px; line-height: 1.6; }
.round__case p { margin: 0 0 8px; }
.round__verdict { font-size: 15px; border-top: 1px solid var(--rule); padding-top: 10px; }
.versus__result { margin-top: 36px; }
.versus__result-heading { font-size: 26px; margin: 0 0 12px; }
.versus__final { font-size: 18px; margin: 14px 0 0; }
.round__side .scorecard__bar { display: block; width: 100%; align-self: stretch; }

@media (max-width: 600px) {
}

/* ── share: one button, choices on demand ──────────────────────────── */
/* The same invisible bridge the main nav needed: without it the pointer
   leaves the element crossing the gap and the sheet shuts. */

@media (max-width: 780px) {
  /* A <details> sizes to its summary, not the other way round, so the
     summary has to be told to fill it or Share comes out half the width
     of Compare beside it. */
  /* Right-aligned would hang off the screen edge on a narrow phone. */
}

/* ── where to watch, on a phone ────────────────────────────────────── */
@media (max-width: 780px) {
  /* A dozen services as a dozen full-width rows is a screen and a half of
     scrolling before the ratings. The logos are the recognisable part, so
     on a phone the names go and they wrap as a grid -- two rows at most
     for any realistic number of providers. */
  .watch-box { padding: 12px 14px; }
  .watch-list {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr));
    gap: 8px;
  }
  .watch-row {
    flex-direction: column; justify-content: center; gap: 0;
    padding: 9px 4px; min-height: 44px; border-radius: var(--radius-sm);
  }
  /* Only the label goes, which is the span with no class of its own.
     Matching every span in the row took the provider's own badge with it
     and left a box of empty squares -- the logos being the entire reason
     this works without names. */
  .watch-row > span:not([class]) {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  .watch-row--all > span:not([class]) {
    position: static; width: auto; height: auto; overflow: visible;
    clip: auto; font-size: 12px;
  }
}

/* ── the verdict, on a phone ───────────────────────────────────────── */
@media (max-width: 780px) {
  .verdict { gap: 10px; margin: 0 0 14px; }
  /* The badge and the score sat in a flex row with the explanation
     wrapping beside them, so "Averaged across 9 platforms · 2.9M votes"
     came out over four lines in a column two words wide. */
  .verdict__score-card { flex: 1 1 100%; gap: 12px; padding: 14px; }
  .verdict__body { flex: 1 1 auto; }
  .verdict__score strong { font-size: 34px; }
  .verdict__meta { font-size: 12.5px; }
  .verdict__ranks-panel { flex: 1 1 100%; max-width: none; }
}

@media (max-width: 780px) {
  /* "All options" keeps its words, so it cannot sit in a 46px icon cell.
     It takes the whole row under the logos -- which is also where it
     belongs, being the way out rather than one of the choices. On a title
     with no providers at all it is the only thing in the box, and a lone
     item floated into a corner of an empty panel looked broken. */
  .watch-row--all {
    grid-column: 1 / -1; flex-direction: row; justify-content: center;
    gap: 7px; padding: 9px 12px;
  }
}

/* ── awards on a phone ─────────────────────────────────────────────── */
@media (max-width: 780px) {
  /* Four columns of ceremony, category, nominee and result do not fit in
     390px, and a table that scrolls sideways is a table nobody reads on a
     phone. Each row becomes a small block instead: the category as the
     line that matters, the nominee under it, the result as a pill on the
     right, and the ceremony above where the highlights table carries one.
     No data is dropped -- the same cells are simply stacked. */
  .award-table, .award-table tbody, .award-table tr, .award-table td {
    display: block; width: auto;
  }
  .award-table tr {
    /* 14px each side, the same gutter the group head above uses and the
       table cells use on a wider screen. Without it the stacked rows sat
       flush against the group's own border, left and right both, because
       the block layout drops the cell padding that was doing the job.
       The 74px is the pill's room, on top of that gutter. */
    position: relative; padding: 11px calc(74px + 14px) 11px 14px;
    border-bottom: 1px solid var(--border-soft);
  }
  .award-table tr:last-child { border-bottom: 0; }
  .award-table td { border: 0; padding: 0; }
  .award-table__ceremony {
    font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase;
    color: var(--mist-2); margin-bottom: 3px;
  }
  .award-table__cat { font-size: 14px; color: var(--paper); line-height: 1.35; }
  .award-table__who { font-size: 13px; color: var(--mist); margin-top: 2px; }
  .award-table__who:empty { display: none; }
  /* The pill is the one cell with a fixed size, so it is the one that can
     be taken out of the flow and pinned. The padding-right above is what
     keeps the text clear of it. */
  .award-table__res { position: absolute; top: 11px; right: 14px; }
}

/* The mark takes the brand colour, not the whole row: a row of solid
   brand blocks is the thing this is getting away from. */

/* ═══ the actions row, and share ══════════════════════════════════════
   Written to this site's language rather than a generic one. Everything
   small and clickable here is a 2px near-black rule on the page ground,
   Oswald, uppercase, and it fills green on hover -- the same as a genre
   chip, a pagination link and a filter. The previous version was soft
   grey borders with a light fill and rounded corners, which is nobody's
   design in particular and looked a decade old beside the rest.

   Sizes match the chips they sit next to. A button is not more important
   than a genre because its word is longer.
   ═══════════════════════════════════════════════════════════════════ */
.detail-actions {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 18px 0 26px;
}
.detail-actions .genre-tags { margin: 0; gap: 6px; }
/* The share panel is positioned against this row rather than against the
   button, so on a narrow screen it can be as wide as the row instead of
   overflowing past the button it hangs off. */
.detail-actions__buttons { display: flex; gap: 8px; margin-left: auto; position: relative; }

.action-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 5px 12px; cursor: pointer; list-style: none;
  border: 2px solid var(--rule); background: var(--void); color: var(--paper);
  font-family: var(--font-display); font-size: 12px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  transition: background .13s, color .13s;
}
.action-btn::-webkit-details-marker { display: none; }
.action-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.action-btn:hover,
.share[open] > .action-btn { background: var(--c-green); color: var(--on-c-green); }

/* The sheet is a card in the same idiom as the poster frame and the
   verdict: square, thick rule, hard green shadow offset down-right. No
   blur, no translucency -- this design has no soft edges anywhere else
   and a floating rounded panel read as borrowed from another site. */
.share { position: relative; }
.share__sheet {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  /* min-width alone put the open sheet 40px off the right of a phone
     screen: the button it hangs from is already near the edge, and 250px
     of sheet has to go somewhere. It gives way to the screen now. */
  min-width: 250px; max-width: calc(100vw - 32px); padding: 12px;
  background: var(--void); border: 2px solid var(--rule);
  box-shadow: 8px 8px 0 var(--c-green);
}
/* Bridges the gap to the button so the pointer never leaves on the way
   down -- the same fix the main nav's More menu needed. */
.share__sheet::before {
  content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px;
}
.share__sheet-title {
  margin: 0 0 9px; font-family: var(--font-display);
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--mist-2);
}
.share__item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--paper);
  text-align: left; transition: background .12s, color .12s;
}
.share__item svg { width: 17px; height: 17px; flex-shrink: 0; }
/* Brand colour on the mark only. A stack of solid brand-coloured blocks
   is the 2012 share bar this is getting away from. */
.share__item--whatsapp svg { color: #25D366; }
.share__item--facebook svg { color: #1877F2; }
.share__item--x svg        { color: var(--paper); }
.share__item:hover { background: var(--c-green); color: var(--on-c-green); }
.share__item:hover svg { color: var(--on-c-green); }

.share__copy {
  display: flex; align-items: center; gap: 8px; width: 100%;
  margin-top: 10px; padding: 7px 9px;
  border: 2px solid var(--rule); background: var(--void);
  cursor: pointer; font: inherit; color: var(--mist); text-align: left;
  transition: background .12s, color .12s;
}
.share__copy-url {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-size: 11.5px; font-family: var(--font-mono);
}
.share__copy svg { width: 14px; height: 14px; flex-shrink: 0; }
.share__copy [data-share-copy-label] {
  font-family: var(--font-display); font-size: 11px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
}
.share__copy:hover { background: var(--c-green); color: var(--on-c-green); }
.share__copy.is-copied { background: var(--rule); color: var(--void); }

@media (max-width: 780px) {
  .detail-actions__buttons { margin-left: 0; width: 100%; }
  .detail-actions__buttons > * { flex: 1 1 50%; min-width: 0; }
  /* A <details> sizes to its summary, so the summary has to be told to
     fill it or Share comes out half the width of Compare. */
  .share > summary { width: 100%; box-sizing: border-box; }
  .action-btn { padding: 8px 12px; }
  /* The panel's 250px minimum is wider than the button it hangs off on a
     phone, so anchored to the button it ran past the edge of the page and
     the whole document scrolled sideways. Anchored to the button row and
     stretched between both edges, it is exactly as wide as the row. */
  .share { position: static; }
  .share__sheet {
    left: 0; right: 0; width: auto; min-width: 0;
    box-shadow: 6px 6px 0 var(--c-green);
  }
}

/* ── rating rows: smaller, quieter ─────────────────────────────────────
   Nine platforms in two columns of chunky bordered cards took more
   vertical room than the ratings deserve relative to everything else on
   the page, and a wall of identical heavy-bordered boxes is loud without
   being informative. The numbers are what matter; the boxes around them
   should be furniture. */
.rating-row { padding: 9px 12px; }
.rating-row__name {
  font-size: 11.5px; letter-spacing: .06em; margin-bottom: 6px;
  color: var(--mist);
}
a.rating-row:hover .rating-row__name { color: var(--paper); }
.rating-row__measures { gap: 10px; }
.rating-measure .rating-row__value { font-size: 16px; }
.rating-measure .rating-row__value span { font-size: 11px; }
.rating-measure__label { font-size: 9.5px; margin-bottom: 1px; }
.rating-measure .rating-row__votes { font-size: 10.5px; }
.rating-measure .rating-row__bar { height: 3px; margin-top: 5px; }
.rating-rows { gap: 7px; }
/* Three columns where there is room: nine platforms is three tidy rows
   rather than five, and each card only needs to hold two short numbers. */
@media (min-width: 1100px) {
  .rating-rows { grid-template-columns: repeat(3, 1fr); }
  .rating-row--split { grid-column: span 1; }
}

/* The player fills the modal panel. No border or shadow of its own --
   the panel already has both, and doubling them read as a frame inside a
   frame. 16:9 via aspect-ratio so it reflows without a padding hack. */
.modal__panel--trailer { max-width: 900px; }
.trailer {
  line-height: 0; background: var(--void) center / cover no-repeat;
  position: relative;
}
.trailer iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
/* While the player loads, its still shows through with a note on it; the
   frame is see-through until YouTube paints into it. */
.trailer.is-loading iframe { opacity: 0; }
.trailer.is-loading::after {
  content: "Loading trailer…"; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%); line-height: 1.2;
  padding: 8px 14px; border-radius: 4px;
  background: rgba(0, 0, 0, .72); color: #fff;
  font: 600 14px/1.2 var(--font-body, system-ui);
}

/* ── password show / hide ────────────────────────────────────────────── */
.password-field { position: relative; }
.password-field .field-input { padding-right: 46px; }
.password-field__toggle {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 36px; height: 36px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 4px;
  color: var(--mist-2); cursor: pointer;
}
.password-field__toggle:hover { color: var(--paper); }
.password-field__toggle:focus-visible { outline: 2px solid var(--c-green); outline-offset: 1px; }
.password-field__toggle svg { width: 20px; height: 20px; }
/* The eye shows what pressing it will do: open eye to reveal, struck-through
   eye to hide again. */
.password-field__eye-off { display: none; }
.password-field__toggle[aria-pressed="true"] .password-field__eye { display: none; }
.password-field__toggle[aria-pressed="true"] .password-field__eye-off { display: block; }

/* ── essays ─────────────────────────────────────────────────────────── */
/* Subheadings inside written prose ("## " in the editor). Sized between the
   body and the page title, so a long essay reads as sections rather than
   one wall of paragraphs. */
.collection__intro .prose__heading {
  font-size: clamp(19px, 2.2vw, 23px); font-weight: 700; line-height: 1.25;
  margin: 30px 0 10px; color: var(--paper);
}
.collection__intro .prose__heading:first-child { margin-top: 0; }
.post__films { margin-top: 34px; }

/* ── person: headline awards (Oscars, Emmys, Globes, BAFTAs, Cannes) ──── */
.award-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px; margin: 0 0 14px;
}
.award-card {
  display: grid; grid-template-columns: 34px 1fr; column-gap: 10px; row-gap: 2px;
  align-items: center; padding: 12px 14px; border: 2px solid var(--rule); background: var(--void);
}
.award-card__icon { grid-row: 1 / span 3; width: 34px; height: 34px; color: var(--mist-2); }
.award-card__icon svg { width: 100%; height: 100%; }
.award-card.has-win { border-color: var(--c-gold); }
.award-card.has-win .award-card__icon { color: var(--c-gold); }
.award-card__name {
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--paper);
}
.award-card__wins { font-family: var(--font-display); font-size: 22px; font-weight: 700; line-height: 1.05; color: var(--paper); }
.award-card__wins small { font-size: 12px; font-weight: 600; color: var(--mist-2); text-transform: uppercase; letter-spacing: .05em; }
.award-card__noms { font-size: 12.5px; color: var(--mist-2); }
.award-results { list-style: none; margin: 0 0 16px; padding: 0; border: 2px solid var(--rule); }
.award-result {
  display: grid; grid-template-columns: 22px 92px 1fr; gap: 12px; align-items: center;
  padding: 10px 14px; background: var(--void);
}
.award-result + .award-result { border-top: 2px solid var(--border); }
.award-result__icon { width: 22px; height: 22px; color: var(--mist-2); }
.award-result__icon svg { width: 100%; height: 100%; }
.award-result.is-win .award-result__icon { color: var(--c-gold); }
.award-result__pill {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  padding: 3px 7px; border: 2px solid var(--rule); text-align: center; color: var(--paper);
}
.award-result.is-win .award-result__pill { background: var(--c-gold); color: var(--on-c-gold); border-color: var(--c-gold); }
.award-result__what { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.award-result__what strong { font-size: 14.5px; color: var(--paper); }
.award-result__what span { font-size: 13px; color: var(--mist-2); }
@media (max-width: 600px) {
  .award-result { grid-template-columns: 22px 1fr; }
  .award-result__pill { grid-column: 2; justify-self: start; }
  .award-result__what { grid-column: 1 / -1; }
}


/* ── cookie choice: only on the page while ads are switched on ───────── */
.consent {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 900;
  max-width: 760px; margin: 0 auto;
  display: flex; gap: 16px; align-items: center; justify-content: space-between;
  padding: 16px 18px;
  background: var(--slate); color: var(--paper);
  border: 1px solid var(--border); box-shadow: var(--shadow-pop);
}
.consent[hidden] { display: none; }
.consent__text { margin: 0; font-size: 14px; line-height: 1.5; }
.consent__text a { color: inherit; text-decoration: underline; }
.consent__actions { display: flex; gap: 8px; flex-shrink: 0; }
@media (max-width: 640px) {
  .consent { flex-direction: column; align-items: stretch; }
  .consent__actions .btn { flex: 1; }
}

/* Card download: icons only, with its state on the button itself. */
.action-btn--icons { gap: 4px; }
.action-btn--icons .icon-done { display: none; }
.action-btn--icons.is-busy { opacity: .55; cursor: progress; }
.action-btn--icons.is-done .icon-download { display: none; }
.action-btn--icons.is-done .icon-done { display: inline; }
.action-btn--icons.is-done .action-btn__state { color: var(--accent); }
.action-btn--icons.is-failed { border-color: var(--coral); }
/* Editorial evidence tables follow the existing type and colour system. */
.prose__table-wrap { max-width: 100%; overflow-x: auto; margin: 24px 0; }
.prose__table { width: 100%; border-collapse: collapse; color: var(--paper); font: inherit; font-size: .88em; line-height: 1.55; }
.prose__table th, .prose__table td { padding: 10px 12px; border-bottom: 1px solid var(--border-soft); text-align: left; vertical-align: top; }
.prose__table th { font-weight: 700; }
.prose__table-wrap:focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; }