/* Age in Music: "screening room" theme.
   One loud element, the ages, set in condensed marquee numerals; everything else stays quiet.
   Follows the device's light/dark setting. Mobile first. */

/* Fonts are served from this site (no Google Fonts), both under the SIL Open Font License. */
@font-face { font-family: "Big Shoulders Display"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/big-shoulders-display-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Big Shoulders Display"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("fonts/big-shoulders-display-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/instrument-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/instrument-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/instrument-sans-latin-600-normal.woff2") format("woff2"); }

:root {
  color-scheme: dark light;
  --bg: #16131f;        /* screening-room violet-black */
  --surface: #201c2c;
  --surface-2: #2b2639;
  --line: #3a3449;
  --text: #f3efe7;      /* projector-light off-white */
  --muted: #a9a2b9;
  --faint: #6f6883;
  --marquee: #f4b740;   /* the ages */
  --younger: #6fd3c7;
  --good: #7bd88f;
  --warn: #e9b1a2;
  --focus: #f4b740;
  --shadow: 0 18px 50px rgb(0 0 0 / .45);
  --sc-great: #2fb7a0; --sc-good: #8cc9b9; --sc-mixed: #9a93a8; --sc-poor: #e07a6a; /* score bands */
  --c-actor: #c4850e;   /* chart pair, validated for CVD on the dark surface */
  --c-char: #0e9688;

  --display: "Big Shoulders Display", "Arial Narrow", system-ui, sans-serif;
  --body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --r-sm: 8px; --r-md: 14px; --r-lg: 20px;
  --pad: max(18px, env(safe-area-inset-left));
  --measure: 1200px; /* page width; was 880px before the wide layout (commit 5199451) */
}
/* Dark colour choices (Settings > Dark color). Placed before the light rules so light mode still wins. */
:root[data-tone="midnight"] { --bg: #0f1520; --surface: #17202e; --surface-2: #212c3d; --line: #31405a; --muted: #a3aec2; --faint: #66728a; }
:root[data-tone="charcoal"] { --bg: #151517; --surface: #1e1e21; --surface-2: #29292d; --line: #3a3a40; --muted: #a8a8b2; --faint: #6e6e78; }
:root[data-tone="black"] { --bg: #000; --surface: #0e0e10; --surface-2: #1a1a1d; --line: #2c2c31; --muted: #a8a8b2; --faint: #6e6e78; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f3f1f8; --surface: #ffffff; --surface-2: #e9e6f1; --line: #d9d4e5;
    --text: #1b1824; --muted: #5e5872; --faint: #9c96ad;
    --marquee: #9a5b00; --younger: #0e7c72; --good: #237a3b; --warn: #9b4a33; --focus: #9a5b00;
    --shadow: 0 18px 40px rgb(40 30 70 / .14);
    --c-actor: #a35f00; --c-char: #008a7d;
    --sc-great: #0b7f6e; --sc-good: #4d9a8a; --sc-mixed: #8a8399; --sc-poor: #b8513f;
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f1f8; --surface: #ffffff; --surface-2: #e9e6f1; --line: #d9d4e5;
  --text: #1b1824; --muted: #5e5872; --faint: #9c96ad;
  --marquee: #9a5b00; --younger: #0e7c72; --good: #237a3b; --warn: #9b4a33; --focus: #9a5b00;
  --shadow: 0 18px 40px rgb(40 30 70 / .14);
  --c-actor: #a35f00; --c-char: #008a7d;
  --sc-great: #0b7f6e; --sc-good: #4d9a8a; --sc-mixed: #8a8399; --sc-poor: #b8513f;
}
:root[data-theme="dark"] { color-scheme: dark; }

* { box-sizing: border-box; }
html { font-size: calc(100% * var(--ts, 1.15)); -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; overflow-x: clip; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 1rem/1.5 var(--body); text-rendering: optimizeLegibility;
}
/* The hidden attribute must beat any display set by a rule below (the wide film layout sets display: grid on #film). */
[hidden] { display: none !important; }
a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
button, select, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
::selection { background: color-mix(in srgb, var(--marquee) 35%, transparent); }

.app { max-width: var(--measure); margin: 0 auto; padding: 0 var(--pad) calc(48px + env(safe-area-inset-bottom)); }

/* ------------------------------------------------------------------ top bar */
.bar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 18px;
  padding: max(12px, env(safe-area-inset-top)) 0 12px;
}
/* The frosted strip and its rule run the full width of the window; the controls stay in the page column. */
.bar::before {
  content: ""; position: absolute; z-index: -1; inset: 0 calc(50% - 50vw);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
}
.bar::after {
  content: ""; position: absolute; inset: auto calc(50% - 50vw) 0; height: 1px; background: var(--line);
}
.brand {
  display: inline-flex; align-items: center; gap: 10px; flex: none;
  font: 800 1.5rem/1 var(--display); letter-spacing: .01em; text-decoration: none; color: var(--text);
}
/* The site icon (same artwork as the favicon). */
.mark {
  width: 36px; height: 36px; border-radius: 9px;
  background: url(/icons/favicon.svg?v=4) center / cover no-repeat;
}

.searchbox { position: relative; flex: 1; min-width: 0; }
.glass {
  position: absolute; left: 14px; top: 50%; translate: 0 -50%; width: 18px; height: 18px;
  fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; pointer-events: none;
}
#q {
  width: 100%; height: 48px; padding: 0 44px 0 42px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
  font-size: max(16px, 1rem); /* 16px keeps iOS from zooming */
  transition: border-color .15s, box-shadow .15s;
}
#q::placeholder { color: var(--faint); }
#q:focus { outline: none; border-color: var(--marquee); box-shadow: 0 0 0 4px color-mix(in srgb, var(--marquee) 22%, transparent); }
#q::-webkit-search-cancel-button { display: none; }
.clear {
  position: absolute; right: 6px; top: 50%; translate: 0 -50%; display: none; place-items: center;
  width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer;
}
.clear svg { width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.clear:hover { background: var(--surface-2); }
.clear:hover svg { stroke: var(--text); }
.clear:focus-visible { outline: 2px solid var(--marquee); outline-offset: 0; }
#q:not(:placeholder-shown) ~ .clear { display: grid; }

/* Settings: a small popover anchored under the top-right button. */
.gear {
  flex: none; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface); transition: border-color .15s;
}
.gear:hover { border-color: var(--marquee); }
.gear svg { width: 20px; height: 20px; fill: none; stroke: var(--text); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.settings {
  position: fixed; inset: auto; top: 72px; right: max(16px, calc((100vw - var(--measure)) / 2));
  margin: 0; width: min(24rem, calc(100vw - 32px)); padding: 10px; /* grows with the text size; full width on phones */
  background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow);
}
.sethead { margin: 4px 8px 4px; font: 800 1.125rem/1 var(--display); }
.setrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 8px;
  border-radius: var(--r-sm); cursor: pointer; }
.setrow:hover { background: var(--surface-2); }
.settext { display: grid; gap: 1px; }
.setlabel { font-weight: 600; font-size: 0.9375rem; }
.sethelp { color: var(--muted); font-size: 0.7812rem; }
.setnote { margin: 6px 8px 4px; color: var(--faint); font-size: 0.7188rem; }
/* Text size */
.sizerow { padding: 10px 8px 8px; display: grid; gap: 8px; }
.sizes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 3px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--line); }
.sizebtn { min-height: 40px; border: 0; border-radius: calc(var(--r-sm) - 2px); background: none; color: var(--muted);
  font: 700 var(--sz, 1rem)/1 var(--display); cursor: pointer; }
.sizebtn:hover { color: var(--text); }
.sizebtn[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.sizebtn:focus-visible { outline: 2px solid var(--marquee); outline-offset: 2px; }
/* Switch */
.setrow input[type="checkbox"] {
  appearance: none; flex: none; width: 40px; height: 24px; margin: 0; border-radius: 999px; position: relative;
  background: var(--surface-2); border: 1px solid var(--line); cursor: pointer; transition: background-color .15s;
}
.setrow input[type="checkbox"]::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--muted); transition: translate .15s, background-color .15s;
}
.setrow input[type="checkbox"]:checked { background: var(--marquee); border-color: var(--marquee); }
.setrow input[type="checkbox"]:checked::after { translate: 16px 0; background: var(--bg); }

#results {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); margin: 0; padding: 6px;
  list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow); max-height: min(60vh, 460px); overflow-y: auto; overscroll-behavior: contain;
}
#results li {
  display: flex; align-items: center; gap: 12px; min-height: 48px;
  padding: 8px 12px; border-radius: var(--r-sm); cursor: pointer;
}
#results .rtext { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
/* Person, TV or film, as a quiet icon on a soft tile; people get a round tile like their photos elsewhere. */
#results .ricon { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px;
  background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--muted); }
#results .ricon.person { border-radius: 50%; }
#results .ricon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#results li.on .ricon { color: var(--marquee); }
#results .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#results li.on, #results li:hover { background: var(--surface-2); }
#results .t { font-weight: 600; }
#results .d { color: var(--muted); font-size: 0.8438rem; }

/* ------------------------------------------------------------------ status */
.status { min-height: 1.5em; margin: 14px 0 0; color: var(--muted); font-size: 0.875rem; }
.status:empty { margin: 0; min-height: 0; }
.status.busy {
  position: fixed; z-index: 30; top: 86px; left: 50%; translate: -50% 0; margin: 0; display: flex; width: max-content; max-width: calc(100vw - 32px); align-items: center; gap: 10px; overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
  padding: 8px 16px 8px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--text);
}
.status.busy::before {
  content: ""; flex: none; width: 22px; height: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23f4b33f%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 3h12M6 21h12M7 3c0 5 3 6 5 9-2 3-5 4-5 9M17 3c0 5-3 6-5 9 2 3 5 4 5 9%22/%3E%3C/svg%3E") center / contain no-repeat;
  animation: spin .9s linear infinite;
}
.status.busy::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 40%; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--marquee), transparent); animation: sweep 1.2s ease-in-out infinite;
}
@keyframes spin { to { rotate: 360deg; } }
@keyframes sweep { from { translate: -100% 0; } to { translate: 250% 0; } }
.status.warn { color: var(--warn); }
.status.err {
  color: var(--text); background: color-mix(in srgb, var(--warn) 14%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); border-radius: var(--r-sm); padding: 10px 14px;
}
@keyframes bulb { 50% { opacity: .25; } }

/* ------------------------------------------------------------------ home */
#home { padding: clamp(28px, 6vw, 56px) 0 8px; }
.hero {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr); gap: clamp(24px, 4vw, 48px);
  align-items: center; margin-bottom: clamp(36px, 6vw, 56px);
}
#home h1 {
  margin: 0 0 16px; max-width: 16ch;
  font: 800 clamp(2.75rem, 7vw, 4.75rem)/1 var(--display); letter-spacing: .005em; text-wrap: balance;
}
.lede { max-width: 46ch; margin: 0; font-size: clamp(1.0312rem, 1.9vw, 1.1562rem); color: color-mix(in srgb, var(--text) 86%, var(--muted)); text-wrap: pretty; }

/* A real result, shown as the hero: what the site does, at a glance. */
.sample {
  display: grid; gap: 0; width: 100%; padding: 0; text-align: left; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow); overflow: hidden; transition: border-color .2s, translate .2s ease;
}
.sample:hover, .sample:focus-visible { border-color: var(--marquee); translate: 0 -2px; }
.samplehead { display: grid; gap: 2px; padding: 16px 18px 12px; border-bottom: 1px solid var(--line); }
.samplehead strong { font: 800 1.625rem/1 var(--display); }
.samplehead span { color: var(--good); font-size: 0.8125rem; }
.samplehead span.atrel { color: var(--muted); }
.srow {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.sname { display: grid; font-weight: 700; font-size: 1.0625rem; }
.sname small { color: var(--muted); font-weight: 400; font-size: 0.8125rem; }
.sage { font: 800 2rem/1 var(--display); color: var(--marquee); font-variant-numeric: tabular-nums; }
.samplefoot { display: flex; justify-content: space-between; gap: 12px; padding: 10px 18px 12px; color: var(--faint); font-size: 0.7812rem; }
.samplefoot .open { color: var(--muted); font-weight: 500; }
.sample:hover .open { color: var(--text); }

.trending { margin: 0 0 var(--sgap, 40px); }
.trendhead { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 12px; }
.trendhead h2 { margin: 0; font: 800 1.75rem/1 var(--display); }
.shuffle {
  min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); font-weight: 500; transition: border-color .15s;
}
.shuffle:hover { border-color: var(--marquee); }
.picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.pick {
  display: flex; align-items: center; gap: 12px; min-height: 52px;
  padding: 8px 12px 8px 8px; text-align: left; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line); transition: border-color .15s, background-color .15s;
}
.pick:hover { border-color: var(--marquee); background: color-mix(in srgb, var(--surface-2) 50%, var(--surface)); }
.pposter { flex: none; width: 72px; aspect-ratio: 2 / 3; border-radius: 6px; object-fit: cover; display: block;
  background: var(--surface-2); box-shadow: 0 0 0 1px var(--line); }
.pposter.none { display: grid; place-items: center; font: 800 1.25rem/1 var(--display); color: var(--muted); }
.ptext { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.pt { font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.pk {
  flex: none; padding: 2px 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 600;
  background: var(--surface-2); color: var(--muted);
}
.fine { max-width: 62ch; margin: 0; color: var(--muted); font-size: 0.875rem; text-wrap: pretty; }
@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; }
}
/* Once someone has used the site a while the headline goes. Nothing replaces it on a phone; on a wide
   screen Recently viewed sits beside the example card, or the card centres when there is no history. */
html.vet .herotext { display: none; }
html.vet #home { padding-top: clamp(20px, 3vw, 32px); }
html.vet .hero { margin-bottom: clamp(24px, 4vw, 40px); }
html.vet .hero:not(.withrecent) { grid-template-columns: minmax(0, 560px); justify-content: center; }
.hero.withrecent { align-items: start; }
.hero.withrecent #recentsec { margin: 0; }
.hero.withrecent .picks { grid-template-columns: 1fr 1fr; }
.hero.withrecent #recent > :nth-child(n+5) { display: none; }
/* Phones: a compact headline so the example card is on screen straight away. */
@media (max-width: 560px) {
  #home { padding-top: 18px; }
  #home h1 { font-size: 2.125rem; max-width: none; margin-bottom: 8px; }
  .lede { font-size: 0.9688rem; line-height: 1.45; }
  .hero { gap: 18px; margin-bottom: 28px; }
}
@media (max-width: 560px) {
  .picks { grid-template-columns: 1fr 1fr; }
  .pick { gap: 10px; }
  .pposter { width: 60px; }
}

/* ------------------------------------------------------------------ title page */
#film { padding-top: 20px; }
.filmhead h2 {
  margin: 8px 0 6px; font: 800 clamp(2.5rem, 8vw, 4.5rem)/.95 var(--display); text-wrap: balance;
}
/* Title row: poster on the left, title, details and scores beside it. */
.titlerow { display: grid; grid-template-columns: clamp(96px, 17vw, 168px) minmax(0, 1fr); gap: clamp(16px, 3vw, 28px);
  align-items: start; margin: 4px 0 18px; }
.titletext { min-width: 0; }
.titletext h2 { margin-top: 0; }
.titletext .ratings { margin-bottom: 0; }
.poster {
  display: block; aspect-ratio: 2 / 3; border-radius: var(--r-md); overflow: hidden;
  background: var(--surface-2); box-shadow: var(--shadow), 0 0 0 1px var(--line);
}
.poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
a.poster { transition: translate .2s ease; }
a.poster:hover { translate: 0 -2px; }
.titlerow.noposter { grid-template-columns: minmax(0, 1fr); }
.sub { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 18px; color: var(--muted); }
.sub span:first-child:not(:only-child) { flex-basis: 100%; }

.summarywrap { margin: 0 0 16px; max-width: 68ch; }
.summary { margin: 0; color: color-mix(in srgb, var(--text) 88%, var(--muted)); text-wrap: pretty; }
.summary.clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.summaryfoot { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.morebtn { padding: 6px 0; border: 0; background: none; color: var(--text); font-weight: 600; font-size: 0.875rem;
  text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; }
.morebtn:hover { text-decoration-color: var(--marquee); }
.credit { color: var(--faint); font-size: 0.7188rem; text-decoration: none; }
.credit:hover { color: var(--muted); }

.ratings { margin: 0 0 18px; }
.scores { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.score {
  display: inline-flex; align-items: baseline; gap: 8px; min-height: 44px; padding: 8px 14px;
  border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line);
  color: var(--text); text-decoration: none; transition: border-color .15s;
}
a.score:hover { border-color: var(--marquee); }
.sv { font: 800 1.5rem/1 var(--display); font-variant-numeric: tabular-nums; }
/* Score bands: a thin meter along the bottom, filled to the score, colored by band. */
.score { position: relative; overflow: hidden; }
.score .meter { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: color-mix(in srgb, var(--line) 60%, transparent); }
.score .meter::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--pct); background: var(--band); border-radius: 0 2px 2px 0; }
.score.great { --band: var(--sc-great); } .score.good { --band: var(--sc-good); }
.score.mixed { --band: var(--sc-mixed); } .score.poor { --band: var(--sc-poor); }
.score.great .sv, .score.poor .sv { color: var(--band); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sn { color: var(--muted); font-size: 0.8125rem; }
.lookup { margin: 0; color: var(--faint); font-size: 0.75rem; }
.lookup a { color: var(--muted); }
.lookup a:hover { color: var(--text); }

.filming {
  display: grid; gap: 6px; padding: 14px 16px; margin: 0 0 18px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  color: color-mix(in srgb, var(--text) 88%, var(--muted));
}
.pill {
  justify-self: start; display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.8125rem; font-weight: 600;
}
.pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.ok .pill { color: var(--good); }
.none .pill { color: var(--warn); }
.filming details { color: var(--muted); font-size: 0.875rem; }
.filming summary { cursor: pointer; width: fit-content; padding: 4px 0; }
.filming summary:hover { color: var(--text); }
.filming blockquote {
  margin: 8px 0; padding: 10px 14px; border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--text); font-style: normal;
}

.chip {
  min-height: 40px; padding: 0 16px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); color: var(--text);
  transition: border-color .15s, background-color .15s;
}
.chip:hover { border-color: var(--marquee); }
.seasons { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.seasons .chip { position: relative; min-width: 48px; padding: 0 14px; font-weight: 500; }
.seasons .chip.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.seasons .dot { position: absolute; top: 5px; right: 6px; }
.dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--good); flex: none; }
.legend { margin: 0 0 18px; }
.legend .dot { margin-right: 7px; vertical-align: 2px; }

.tools { display: flex; justify-content: flex-end; margin: 0 0 6px; }
.tools label { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-size: 0.875rem; }
.tools select {
  min-height: 40px; padding: 0 34px 0 12px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23a9a2b9' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 13px center;
  appearance: none;
}

/* ------------------------------------------------------------------ TV backdrop */
#film { position: relative; isolation: isolate; }
.backdrop {
  position: absolute; z-index: -1; top: calc(-1 * var(--bar-h, 76px)); left: 50%; width: 100vw; translate: -50% 0;
  height: clamp(320px, 52vw, 560px); overflow: hidden; pointer-events: none;
}
.backdrop img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; opacity: .42;
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 30%, transparent 100%);
}
/* A poster used as a backdrop: blurred and enlarged so it reads as colour and mood. */
.backdrop.soft img { filter: blur(22px) saturate(1.2); scale: 1.25; object-position: center 25%; opacity: .34; }
.backdrop::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 35%, transparent) 45%, transparent 100%);
}
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .backdrop img { opacity: .28; } }
:root[data-theme="light"] .backdrop img { opacity: .28; }

/* ------------------------------------------------------------------ age chart */
.agechart { position: relative; margin: 0 0 24px; padding: 14px 16px 10px; border: 1px solid var(--line);
  border-radius: var(--r-md); background: var(--surface); }
.agechart figcaption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 10px; }
.ac-title { font: 800 1.25rem/1 var(--display); }
.ac-legend { display: flex; gap: 14px; color: var(--muted); font-size: 0.8125rem; }
.lg { display: inline-flex; align-items: center; gap: 6px; }
.sw { width: 10px; height: 10px; border-radius: 50%; }
.sw.dot { background: var(--c-actor); }
.sw.ring { border: 2px solid var(--c-char); }
.ac-plot { position: relative; display: grid; grid-template-columns: minmax(6rem, 10rem) minmax(0, 1fr);
  grid-template-rows: repeat(var(--rows), 28px) 22px; column-gap: 12px; }
.ac-name { grid-column: 1; align-self: center; font-size: 0.8438rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: color-mix(in srgb, var(--text) 85%, var(--muted)); }
.ac-track { grid-column: 2; position: relative; align-self: stretch; border-radius: 6px; outline-offset: 0; }
.ac-track:hover, .ac-track:focus-visible { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
.ac-grid { grid-column: 2; grid-row: 1 / span var(--rows); position: relative; pointer-events: none; }
.ac-grid span { position: absolute; top: 0; bottom: 0; width: 1px; background: color-mix(in srgb, var(--line) 60%, transparent); }
.ac-axis { grid-column: 2; grid-row: calc(var(--rows) + 1); position: relative; }
.ac-axis span { position: absolute; top: 4px; translate: -50% 0; color: var(--faint); font-size: 0.7188rem; font-variant-numeric: tabular-nums; }
.ac-dot, .ac-char { position: absolute; top: 50%; width: 12px; height: 12px; translate: -50% -50%; border-radius: 50%; }
.ac-dot { background: var(--c-actor); box-shadow: 0 0 0 2px var(--surface); z-index: 2; }
.ac-char { border: 2px solid var(--c-char); background: var(--surface); z-index: 1; }
.ac-link { position: absolute; top: 50%; height: 2px; translate: 0 -50%; background: color-mix(in srgb, var(--c-char) 55%, transparent); }
.ac-tip {
  position: absolute; z-index: 5; max-width: 260px; padding: 7px 10px; translate: 0 -100%; pointer-events: none;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--shadow);
  font-size: 0.8125rem; color: var(--text);
}
@media (max-width: 560px) {
  .ac-plot { grid-template-columns: minmax(5rem, 7rem) minmax(0, 1fr); column-gap: 8px; }
  .agechart { padding: 12px 12px 8px; }
}

/* ------------------------------------------------------------------ key facts bar */
.keybar {
  display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin: 0 0 22px; container: keybar / inline-size;
}
/* The season's filming/premiere note sits under the tiles, full width of the bar. */
.keybar > .filming { flex: 1 1 100%; margin: 0; }
.keys {
  flex: 1; min-width: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
}
.key { padding: 12px 14px; min-width: 0; }
.key + .key { box-shadow: -1px 0 0 var(--line); }
.key dt { color: var(--muted); font-size: 0.8125rem; }
/* Long values (names) wrap onto a second line rather than being cut off. */
/* No clamp or overflow clipping here: Safari slices the descenders of this tall display font
   (the g in Minghella) at the line box. Long values simply wrap. */
.key dd { margin: 4px 0 0; font: 800 1.875rem/1.2 var(--display); letter-spacing: .01em; overflow-wrap: break-word; }
.key dd .more { margin-left: .35em; padding: 0 .4em; font: inherit; font-size: .6em; line-height: 1.5; vertical-align: .15em; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; cursor: pointer; }
.key dd .more:hover, .key dd .more:focus-visible { border-color: var(--marquee); color: var(--marquee); }
.key.accent dd { color: var(--marquee); }
.key.muted dd { color: var(--faint); }
.ks { display: block; margin-top: 4px; color: var(--muted); font-size: 0.7812rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.detailsbtn {
  flex: none; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-width: 96px; padding: 10px 14px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line); font-weight: 600; font-size: 0.875rem;
  transition: border-color .15s;
}
.detailsbtn:hover { border-color: var(--marquee); }
/* Five or six tiles on a wide bar: rows of three rather than cramped columns. */
@container keybar (min-width: 701px) {
  .keys:has(> .key:nth-child(5)) { grid-template-columns: repeat(3, 1fr); }
  .keys:has(> .key:nth-child(5)) .key:nth-child(n + 4) { border-top: 1px solid var(--line); }
  /* Seven or more pinned: rows of four. */
  .keys:has(> .key:nth-child(7)) { grid-template-columns: repeat(4, 1fr); }
  .keys:has(> .key:nth-child(7)) .key:nth-child(n + 4) { border-top: 0; }
  .keys:has(> .key:nth-child(7)) .key:nth-child(n + 5) { border-top: 1px solid var(--line); }
  /* A short last row: the last tile stretches to fill it. */
  .keys:has(> .key:nth-child(5)):not(:has(> .key:nth-child(7))) .key:last-child:nth-child(3n + 2) { grid-column: span 2; }
  .keys:has(> .key:nth-child(7)) .key:last-child:nth-child(4n + 3) { grid-column: span 2; }
}
/* Narrow bar (tablets, side panes, phones): numbers 2 x 2, button full width beneath. */
@container keybar (max-width: 700px) {
  .keys { grid-template-columns: 1fr 1fr; }
  .key + .key { box-shadow: none; }
  .key:nth-child(even) { box-shadow: -1px 0 0 var(--line); }
  .key:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .key:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@container keybar (max-width: 560px) {
  .key dd { font-size: 1.625rem; }
}
.detailsbtn .n {
  min-width: 26px; padding: 1px 8px; border-radius: 999px; background: var(--surface-2);
  color: var(--muted); font-size: 0.75rem; font-weight: 600;
}

/* ------------------------------------------------------------------ details sheet */
html.sheet-open { overflow: hidden; }
.sheet {
  margin: 0 0 0 auto; padding: 0; border: 0; max-height: 100dvh; height: 100dvh; width: min(440px, 100vw);
  background: var(--bg); color: var(--text); border-left: 1px solid var(--line);
  box-shadow: var(--shadow); overflow-y: auto; overscroll-behavior: contain;
}
.sheet::backdrop { background: rgb(8 6 14 / .55); backdrop-filter: blur(3px); }
.sheet[open] { animation: sheet-in-side .22s cubic-bezier(.2,.8,.2,1); }
.sheet[open]::backdrop { animation: fade .22s ease; }
@keyframes sheet-in-side { from { translate: 40px 0; opacity: 0; } }
@keyframes sheet-in-up { from { translate: 0 60px; opacity: 0; } }
@keyframes fade { from { opacity: 0; } }
.sheethead {
  position: sticky; top: 0; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 20px 20px 14px; background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
}
.sheethead h3 { margin: 0; font: 800 2rem/1 var(--display); text-wrap: balance; }
.sheethead p { margin: 4px 0 0; color: var(--muted); font-size: 0.875rem; }
.close {
  flex: none; position: relative; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface);
}
.close span::before, .close span::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.8px; border-radius: 2px;
  background: var(--text); translate: -50% -50%; rotate: 45deg;
}
.close span::after { rotate: -45deg; }
.close:hover { border-color: var(--marquee); }
.dgroup { padding: 14px 20px 2px; }
.dgroup + .dgroup { border-top: 1px solid var(--line); }
.dgroup h4 { margin: 0 0 2px; font: 800 1.25rem/1 var(--display); color: var(--muted); }
.dlist { margin: 0; padding: 0; }
.drow {
  display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 14px; padding: 12px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.drow:last-child { border-bottom: 0; }
.drow dt { color: var(--muted); font-size: 0.875rem; }
.drow dd { margin: 0; display: grid; gap: 2px; }
.dv { font-weight: 600; overflow-wrap: anywhere; }
.dv a { color: var(--text); }
.drow.accent .dv { color: var(--marquee); }
.ds { color: var(--muted); font-size: 0.8125rem; }
.sheet .src { padding: 0 20px calc(24px + env(safe-area-inset-bottom)); }
.src { margin: 10px 0 0; color: var(--faint); font-size: 0.7188rem; }

/* ------------------------------------------------------------------ cast list */
.cast { list-style: none; margin: 0; padding: 0; container-type: inline-size; }
.row, .head {
  display: grid; grid-template-columns: minmax(0, 1fr) 4.5rem 4.5rem; gap: 12px; align-items: center;
}
.cast.hasgap .row, .cast.hasgap .head { grid-template-columns: minmax(0, 1fr) 4.5rem 4.5rem 5.5rem; }
.head { padding: 6px 0 8px; color: var(--muted); font-size: 0.8125rem; border-bottom: 1px solid var(--line); }
.head span:not(:first-child), .age, .gapcell { text-align: right; }
.row { padding: 12px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.row:last-child { border-bottom: 0; }

.who { display: flex; align-items: center; gap: 14px; min-width: 0; }
.whotext { min-width: 0; display: grid; gap: 1px; }
.who strong { font-weight: 700; overflow-wrap: anywhere; }
.whotext span { color: var(--muted); font-size: 0.9062rem; overflow-wrap: anywhere; }
/* The actor's name leads: full-strength text and larger, over the muted character line. (The
   name sits in a span.nameline, which the muted rule above would otherwise catch.) */
.whotext span.nameline { color: var(--text); font-size: 1.1875rem; }

.avatar {
  flex: none; width: 48px; height: 48px; border-radius: 50%; overflow: hidden;
  display: inline-grid; place-items: center; background: var(--surface-2);
  box-shadow: 0 0 0 1px var(--line);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; }
.photopop { position: fixed; z-index: 60; left: 0; top: 0; max-width: 260px; padding: 6px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  opacity: 0; transition: opacity 0.12s; pointer-events: none; }
.photopop.on { opacity: 1; }
.photopop img { display: block; width: 100%; max-height: 340px; object-fit: cover; border-radius: 8px; }
.photopop.cover { max-width: 320px; }
.photopop.cover img { max-height: 320px; object-fit: contain; }
.photocredit { display: block; margin-top: 4px; color: var(--faint); font-size: 0.6875rem; }
.avatar.none { color: var(--muted); font-size: 0.875rem; font-weight: 600; }

/* The loud element: ages in marquee numerals. */
.age {
  font: 800 2.125rem/1 var(--display); color: var(--marquee); font-variant-numeric: tabular-nums; letter-spacing: .01em;
}
.age.rng { font-size: 1.625rem; }
.age.none { color: var(--faint); font-weight: 600; }
.cast .age + .age { color: color-mix(in srgb, var(--marquee) 55%, var(--muted)); font-size: 1.625rem; }
.cast .age + .age.rng { font-size: 1.375rem; }

.gapcell { font: 800 1.625rem/1 var(--display); font-variant-numeric: tabular-nums; }
.gapcell small { display: block; margin-top: 3px; font: 500 0.75rem/1.2 var(--body); color: var(--muted); }
.gapcell.older { color: var(--marquee); }
.gapcell.younger { color: var(--younger); }

.note { color: var(--muted); font-size: 0.875rem; margin: 14px 0 0; max-width: 70ch; }

/* ------------------------------------------------------------------ season grid */
.gridwrap {
  overflow-x: auto; scrollbar-width: thin; overscroll-behavior-x: contain;
}
.seasongrid { border-collapse: separate; border-spacing: 0; width: 100%; font-variant-numeric: tabular-nums; }
.seasongrid th, .seasongrid td {
  padding: 12px; text-align: right; white-space: nowrap;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.seasongrid tbody tr:last-child > * { border-bottom: 0; }
.seasongrid thead th { padding-top: 10px; padding-bottom: 10px; }
.seasongrid thead th { color: var(--muted); font-size: 0.8125rem; font-weight: 500; border-bottom-color: var(--line); }
.seasongrid .name {
  position: sticky; left: 0; z-index: 1; text-align: left; font-weight: 400; background: var(--bg);
}
@media (max-width: 760px) { .seasongrid .name { box-shadow: 1px 0 0 var(--line); } }
.seasongrid .name { min-width: 17rem; max-width: 17rem; padding-left: 0; }
.seasongrid td, .seasongrid thead th:not(.name) { min-width: 3.75rem; }
.seasongrid .whotext { min-width: 0; }
.seasongrid .whotext span:not(.nameline) { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seasongrid .avatar { width: 48px; height: 48px; }
.seasongrid .who { gap: 14px; }
.seasongrid td { font: 800 1.625rem/1 var(--display); color: var(--marquee); }
.seasongrid td.rng { font-size: 1.25rem; }
.seasongrid td.none { color: var(--faint); font-weight: 600; }
.seasongrid tbody tr:hover > * { background: color-mix(in srgb, var(--surface-2) 60%, var(--bg)); }
.colbtn {
  display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 0 8px;
  border: 0; border-radius: 999px; background: none; color: var(--text); font-weight: 600;
}
.colbtn:hover { background: var(--surface-2); }

/* ------------------------------------------------------------------ loading */
.sk {
  display: block; height: 12px; border-radius: 999px; background: var(--surface-2);
  background-image: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text) 9%, transparent), transparent);
  background-size: 200% 100%; background-repeat: no-repeat; animation: shimmer 1.3s ease-in-out infinite;
}
@keyframes shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.whotext .sk + .sk { height: 10px; margin-top: 6px; }
.row > .sk { justify-self: end; height: 26px; }
.avatar.sk { height: 48px; border-radius: 50%; }
.skh { color: var(--faint); }

/* ------------------------------------------------------------------ tip card */
.tipcard { position: relative; display: flex; align-items: center; gap: 16px; margin: 28px 0 8px; padding: 16px 18px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: linear-gradient(90deg, rgb(244 183 64 / .08), transparent 60%), var(--surface); }
.tipcard .cup { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: rgb(244 183 64 / .14); }
.tipcard .cup img { width: 26px; height: 26px; }
.tipcard .tx { flex: 1; min-width: 0; padding-right: 14px; }
.tipcard .tx b { display: block; color: var(--text); font: 600 1rem/1.3 var(--body); }
.tipcard .tx span { display: block; color: var(--muted); font-size: .9rem; line-height: 1.4; margin-top: 2px; }
.tipcard a { flex: none; padding: 9px 16px; border-radius: 999px; background: var(--marquee); color: #1b1408;
  font-weight: 600; font-size: .92rem; text-decoration: none; white-space: nowrap; }
.tipcard a:hover { filter: brightness(1.06); }
.tipcard .x { position: absolute; top: 6px; right: 8px; padding: 4px 6px; border: 0; background: none;
  color: var(--faint); font-size: 16px; line-height: 1; cursor: pointer; }
.tipcard .x:hover { color: var(--muted); }
@media (max-width: 560px) {
  .tipcard { flex-wrap: wrap; align-items: flex-start; padding: 16px; }
  .tipcard .tx { flex-basis: calc(100% - 56px); }
  .tipcard a { flex: 1; margin-left: 56px; text-align: center; }
}

/* ------------------------------------------------------------------ footer */
footer {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px;
  margin-top: 56px; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  color: var(--faint); font-size: 0.7188rem;
}
footer nav { display: flex; gap: 14px; }
footer a { color: var(--faint); text-decoration: none; }
footer a:hover { color: var(--muted); }
footer .kofi { display: inline-flex; align-items: center; gap: 0.45em; }
footer .kofi img { width: 1.45em; height: 1.45em; position: relative; top: -0.25em; }
footer .data { margin-left: auto; }
footer > span:first-child a { margin: 0 0.2em; }

/* ------------------------------------------------------------------ lists */
.homelists { margin-bottom: var(--sgap, 40px); }
.listcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.lcwrap > a {
  display: grid; gap: 6px; height: 100%; padding: 16px 18px; text-decoration: none; color: var(--text);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); transition: border-color .15s;
}
.lcwrap > a { grid-template-columns: auto 1fr; grid-template-rows: auto auto 1fr; column-gap: 14px; }
.lcwrap > a:hover { border-color: var(--marquee); }
.lc-icon {
  grid-row: 1 / span 3; align-self: start; display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 12px; background: var(--surface-2); color: var(--marquee);
}
.lc-icon svg { width: 26px; height: 26px; }
.lcwrap > a:hover .lc-icon { background: color-mix(in srgb, var(--marquee) 18%, var(--surface-2)); }
.lc-title { font: 800 1.5rem/1.05 var(--display); }
.lc-blurb { color: var(--muted); font-size: 0.875rem; }
.lc-count { color: var(--faint); font-size: 0.7812rem; align-self: end; }
.listpage { padding-top: 0; }
.listpage h2 { margin: 0 0 6px; font: 800 clamp(2.25rem, 6vw, 3.75rem)/1 var(--display); text-wrap: balance; }
.listpage .lede.small { font-size: 1.0312rem; margin-bottom: 8px; }
.back { display: inline-block; color: var(--muted); font-size: 0.875rem; }
.listpage > a { text-decoration: none; }
.pstats { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 10px 0 0; }
.personpage .listtools { margin: 30px 0 18px; }
.pchips { display: flex; flex-wrap: wrap; gap: 6px; }
.pchip { padding: 4px 11px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); font-size: 0.8125rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.pchip b { color: var(--marquee); font-weight: 800; }
.pnote { color: var(--faint); font-size: 0.8125rem; }
.listmeta { margin: 0 0 10px; color: var(--faint); font-size: 0.8125rem; }
.listtools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 10px; margin: 10px 0 18px; }
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }
.segbtn { min-height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: var(--muted); font-weight: 500; }
.segbtn.on { background: var(--text); color: var(--bg); }
.sortlab { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; color: var(--muted); font-size: 0.875rem; }
.sortlab select {
  min-height: 38px; padding: 0 34px 0 12px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23a9a2b9' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 13px center;
  appearance: none;
}
.lgroup + .lgroup { margin-top: 26px; }
.lgroup h3 { margin: 0 0 4px; font: 800 1.5rem/1 var(--display); }
.lgroup .note { margin: 0 0 6px; }

.toplist { list-style: none; margin: 0; padding: 0; }
.lrow {
  display: grid; grid-template-columns: 2rem 40px minmax(0, 1fr) 10.5rem 5.5rem; gap: 12px; align-items: center;
  padding: 9px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  counter-increment: rank;
}
.toplist:not(.unranked) .lrow::before { content: ""; }
/* The rank sits in the row's first column but on the title's line: drawn from the title row with
   only a left offset, so it sits on the title's first line wherever the row's content is placed. */
.toplist:not(.unranked) .lrow { position: relative; --rankw: 2rem; }
.toplist:not(.unranked) .lrow .lr-top::before {
  content: counter(rank); position: absolute; left: 0; width: var(--rankw); box-sizing: border-box; align-self: flex-start; margin-top: 2px;
  color: var(--muted); font: 800 1.25rem/1 var(--display); text-align: right; padding-right: 0.3rem; font-variant-numeric: tabular-nums;
}
@media (max-width: 560px) { .toplist:not(.unranked) .lrow { --rankw: 1.4rem; } }
.lrow > .avatar { width: 40px; height: 40px; }
.lrow.grow { grid-template-columns: 2rem 40px minmax(0, 1fr) auto 8.5rem; }
/* On laptops the age range moves out of the card to its left; phones keep it inside. */
.lrow.grow .lr-age.wide { padding-right: 0.5rem; }
.lrow.grow .lr-badge.span .span-big { display: none; }
.lrow.bp { grid-template-columns: 3.2rem minmax(0, 1fr) 8.5rem 8.5rem; }
.lrow.gen { grid-template-columns: 2rem minmax(0, 1fr) 6.5rem; align-items: start; }
.lrow.gen::before, .lrow.gen .lr-badge { margin-top: 2px; }
/* The rating badge sits at the bottom of every list row, on laptops as on phones. */
.lrow.gen .lr-badge { align-self: end; margin-top: 0; margin-bottom: 2px; }
/* Sit the rank numeral on the same baseline as the title beside it. */
.lrow.gen::before { margin-top: 3.7px; }
/* Profit rows: the return badge sits at the bottom of the row. */
.lrow.gen.profit .lr-badge { align-self: end; margin-top: 0; margin-bottom: 2px; }
.lrow.gen .yr { flex: none; color: var(--faint); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.lrow.gen .lr-sub b { color: var(--marquee); font-weight: 600; }
/* Awards under a film in the most-awarded list: chips that open to category names. */
.awd { margin-top: 2px; }
.awd summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer;
  min-height: 36px; border-radius: var(--r-sm); }
.awd summary::-webkit-details-marker { display: none; }
.awd summary::after { content: ""; flex: none; width: 8px; height: 8px; margin-right: 6px; border-right: 2px solid var(--faint); border-bottom: 2px solid var(--faint);
  rotate: 45deg; translate: 0 -2px; transition: rotate .18s ease; }
.awd[open] summary::after { rotate: 225deg; translate: 0 2px; }
.awd summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.awd-chips { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.awd-chip { padding: 2px 9px; border-radius: 999px; background: color-mix(in srgb, var(--marquee) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--marquee) 26%, transparent);
  color: var(--text); font-size: 0.75rem; white-space: nowrap; }
.awd-chip b { color: var(--marquee); font-weight: 700; font-variant-numeric: tabular-nums; }
.awd-chip.dim { background: none; border-color: var(--line); color: var(--muted); }
.awd-list { margin: 4px 0 6px; padding: 10px 12px; display: grid; gap: 10px; border-radius: var(--r-sm); background: var(--surface-2); }
.awd-list dt { color: var(--muted); font-size: 0.6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.awd-list dt span { color: var(--marquee); }
.awd-list dd { margin: 2px 0 0; font-size: 0.8125rem; line-height: 1.4; color: var(--text); }
.genrechips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 22px; }
.genrechips .chip { min-height: 36px; padding: 0 14px; font-weight: 500; }
.genrechips .chip.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.year { font: 800 1.375rem/1 var(--display); color: var(--muted); font-variant-numeric: tabular-nums; }
.lr-main { display: grid; gap: 2px; min-width: 0; }
.lr-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lr-top strong { font-weight: 600; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: break-word; }
.lr-top strong a { color: var(--text); }
.lr-sub { color: var(--muted); font-size: 0.8438rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: break-word; }
.lr-sub a { color: color-mix(in srgb, var(--text) 85%, var(--muted)); }
.tag { flex: none; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 0.7188rem; font-weight: 500; }
.lr-age { display: grid; justify-items: end; text-align: right; gap: 2px; min-width: 0; }
.lr-age .big { font: 800 1.875rem/1 var(--display); color: var(--marquee); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lr-age.post .small { font-style: italic; line-height: 1.25; }
.lr-age .big.dim { color: color-mix(in srgb, var(--marquee) 55%, var(--muted)); }
.lr-age .small { color: var(--muted); font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.lr-badge {
  display: grid; justify-items: center; gap: 2px; padding: 6px 4px; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--marquee) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--marquee) 30%, transparent);
  font: 800 1.375rem/1 var(--display); color: var(--text);
}
.lr-badge small { font: 500 0.6875rem/1.1 var(--body); color: var(--muted); }
/* Kids who grew up on screen: age at season 1 to age at the last season, then years and seasons. */
.lr-badge.span .span-big { font: 800 1.375rem/1 var(--display); white-space: nowrap; }
.lr-badge.span .span-big i { font-style: normal; color: var(--faint); margin: 0 .2em; font-size: .85em; }
.lr-badge.span small { line-height: 1.25; }
.lr-badge.none { background: none; border-color: var(--line); color: var(--faint); }
@media (max-width: 560px) {
  .lrow { grid-template-columns: 1.4rem 34px minmax(0, 1fr) auto; gap: 9px; }
  .lrow > .avatar { width: 34px; height: 34px; }
  .lr-badge { display: none; }
  .lrow.grow { grid-template-columns: 1.4rem 34px minmax(0, 1fr) 6.6rem; }
  .lrow.grow .lr-age.wide { display: none; }
  .lrow.grow .lr-badge.span .span-big { display: block; }
  .lrow.grow .lr-badge { display: grid; }
  .lrow.bp { grid-template-columns: 2.6rem minmax(0, 1fr) auto; }
  .lrow.bp .lr-age:last-child { display: none; }
  .lrow.gen { grid-template-columns: 1.4rem minmax(0, 1fr) 4.2rem; }
  .lrow.gen .lr-badge { display: grid; font-size: 1.125rem; align-self: end; margin-top: 0; margin-bottom: 2px; }
  .lrow.gen .lr-badge small { font-size: 0.625rem; }
  .genrechips { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--pad)); padding-inline: var(--pad); scrollbar-width: none; }
  .genrechips .chip { flex: none; }
  .lr-age .big { font-size: 1.5rem; }
  .lrow:not(.bp) > .lr-age { margin-right: 0.6rem; }
  .lr-top .tag { display: none; }
  .sortlab { margin-left: 0; }
}

/* ------------------------------------------------------------------ text pages (credits, terms, privacy) */
.doc { max-width: 68ch; padding: clamp(24px, 5vw, 48px) 0 8px; }
.doc h1 { margin: 0 0 6px; font: 800 clamp(2.5rem, 6vw, 3.75rem)/1 var(--display); }
.doc .updated { margin: 0 0 28px; color: var(--faint); font-size: 0.8125rem; }
.doc h2 { margin: 30px 0 8px; font: 800 1.5rem/1.1 var(--display); }
.doc p, .doc li { color: color-mix(in srgb, var(--text) 86%, var(--muted)); }
.doc ul { padding-left: 1.2em; }
.doc li + li { margin-top: 6px; }
.doc a { color: var(--text); }

/* ------------------------------------------------------------------ small screens */
@media (max-width: 560px) {
  .bar { gap: 12px; }
  .brand { font-size: 0; gap: 0; }        /* keep only the bulb mark */
  .gear { width: 44px; height: 44px; }
  .settings { top: 64px; right: 16px; }
  .mark { width: 40px; height: 40px; border-radius: 10px; }
  #film { padding-top: 12px; }
  .titlerow { grid-template-columns: 120px minmax(0, 1fr); gap: 14px; }
  .titlerow.noposter { grid-template-columns: minmax(0, 1fr); }
  .titletext h2 { font-size: 2.125rem; }
  .titletext .sub { font-size: 0.875rem; }
  .titletext .scores { gap: 6px; }
  .titletext .score { min-height: 36px; padding: 5px 10px; }
  .titletext .sv { font-size: 1.25rem; }
  .titletext .lookup { display: none; }
  .row, .head { gap: 10px; grid-template-columns: minmax(0, 1fr) 3.2rem 3.2rem; }
  .cast.hasgap .row, .cast.hasgap .head { grid-template-columns: minmax(0, 1fr) 3rem 3rem 3.8rem; }
  .avatar { width: 40px; height: 40px; }
  .who { gap: 10px; }
  .age { font-size: 1.75rem; }
  .cast .age + .age { font-size: 1.375rem; }
  .gapcell { font-size: 1.375rem; }
  /* Key facts: Details button full width beneath the numbers. */
  .keybar { flex-direction: column; gap: 8px; }
  .detailsbtn { flex-direction: row; min-height: 44px; }
  /* Details open as a bottom sheet. */
  .sheet {
    margin: auto 0 0; width: 100vw; max-width: 100vw; height: auto; max-height: 88dvh;
    border-left: 0; border-top: 1px solid var(--line); border-radius: var(--r-lg) var(--r-lg) 0 0;
  }
  .sheet[open] { animation-name: sheet-in-up; }
  .sheethead { padding-top: 26px; }
  .sheethead::before {
    content: ""; position: absolute; top: 9px; left: 50%; translate: -50% 0;
    width: 40px; height: 4px; border-radius: 4px; background: var(--line);
  }
  .drow { grid-template-columns: 8rem minmax(0, 1fr); }
  /* Season grid: a slim name column so several seasons fit beside it. */
  .seasongrid th, .seasongrid td { padding: 9px 8px; }
  .seasongrid .name { min-width: 7.5rem; max-width: 9.5rem; }
  .seasongrid td, .seasongrid thead th:not(.name) { min-width: 0; }
  .seasongrid .who { gap: 8px; }
  .seasongrid .avatar { width: 30px; height: 30px; }
  .seasongrid .whotext strong { font-size: 0.875rem; line-height: 1.3; white-space: normal; overflow-wrap: break-word; }
  .seasongrid .whotext span:not(.nameline) { display: none; }
  .seasongrid td { font-size: 1.375rem; }
  .seasongrid td.rng { font-size: 1.0625rem; }
  .colbtn { padding: 0 4px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }

/* Cast rows: name line with tags, filming age with the release age under it on phones. */
.nameline { display: flex; align-items: center; gap: 7px; min-width: 0; flex-wrap: wrap; }
.nameline .tag.young { background: color-mix(in srgb, var(--marquee) 18%, var(--surface-2)); color: var(--text); }
.nameline .tag.old { background: var(--surface-2); color: var(--text); }
.agestack { display: grid; justify-items: end; gap: 3px; }
.relsub { display: none; color: var(--muted); font-size: 0.7188rem; white-space: nowrap; }
@media (max-width: 560px) {
  .cast .row > .age:nth-child(3), .cast .head span:nth-child(3) { display: none; }
  .cast .row, .cast .head { grid-template-columns: minmax(0, 1fr) 5.6rem; }
  .cast.hasgap .row, .cast.hasgap .head { grid-template-columns: minmax(0, 1fr) 5.6rem 3.8rem; }
  /* "37–38 at release" is wider than the numeral above it: let it wrap inside the column. */
  .relsub { display: block; white-space: normal; text-align: right; line-height: 1.15; max-width: 100%; }
  .cast .head span:nth-child(2) { text-align: right; }
}

/* ------------------------------------------------------------------ more settings */
/* Reduce motion: the device setting above, or the switch in the settings menu. */
:root[data-motion="reduce"] *, :root[data-motion="reduce"] *::before, :root[data-motion="reduce"] *::after {
  animation: none !important; transition: none !important; scroll-behavior: auto !important;
}

/* High contrast: stronger secondary text and borders, on whichever theme is showing. */
:root[data-contrast="high"] { --muted: #d9d3e6; --faint: #b9b2cc; --line: #6f6888; }
@media (prefers-color-scheme: light) {
  :root[data-contrast="high"]:not([data-theme="dark"]) { --muted: #36304a; --faint: #4d4763; --line: #7a7390; }
}
:root[data-theme="light"][data-contrast="high"] { --muted: #36304a; --faint: #4d4763; --line: #7a7390; }
:root[data-contrast="high"] .row { border-bottom-color: var(--line); }

/* Compact rows. */
.cast.compact .row { padding: 6px 0; }
.cast.compact .avatar { width: 32px; height: 32px; }
.cast.compact .who { gap: 10px; }
.cast.compact .age { font-size: 1.375rem; }
.cast.compact .age.rng { font-size: 1.125rem; }
.cast.compact .age + .age { font-size: 1.25rem; }
.cast.compact .gapcell { font-size: 1.25rem; }
.cast.compact .whotext span { font-size: 0.78rem; }
.cast.compact .whotext span.nameline { font-size: 0.9688rem; }

/* Without the release column. */
.cast.norel .row, .cast.norel .head { grid-template-columns: minmax(0, 1fr) 4.5rem; }
.cast.norel.hasgap .row, .cast.norel.hasgap .head { grid-template-columns: minmax(0, 1fr) 4.5rem 4.5rem; }
.cast.norel .relsub { display: none; }

/* Ages with months are wider. */
:root[data-agefmt="months"] .age { font-size: 1.25rem; }
:root[data-agefmt="months"] .age.rng { font-size: 1.125rem; }
:root[data-agefmt="months"] .seasongrid td { font-size: 1.0625rem; }
:root[data-agefmt="months"] .key dd { font-size: 1.5rem; }
:root[data-agefmt="months"] .cast .age + .age { font-size: 1.125rem; }
:root[data-agefmt="months"] .cast { --agew: 5.5rem; }
:root[data-agefmt="months"] .cast .row, :root[data-agefmt="months"] .cast .head { grid-template-columns: minmax(0, 1fr) 5.5rem 5.5rem; }
:root[data-agefmt="months"] .cast.hasgap .row, :root[data-agefmt="months"] .cast.hasgap .head { grid-template-columns: minmax(0, 1fr) 5.5rem 5.5rem 5.5rem; }
:root[data-agefmt="months"] .cast.norel .row, :root[data-agefmt="months"] .cast.norel .head { grid-template-columns: minmax(0, 1fr) 5.5rem; }
:root[data-agefmt="months"] .cast.norel.hasgap .row, :root[data-agefmt="months"] .cast.norel.hasgap .head { grid-template-columns: minmax(0, 1fr) 5.5rem 5.5rem; }
@media (max-width: 560px) {
  :root[data-agefmt="months"] .cast .row, :root[data-agefmt="months"] .cast .head { grid-template-columns: minmax(0, 1fr) 5rem; }
  :root[data-agefmt="months"] .cast.hasgap .row, :root[data-agefmt="months"] .cast.hasgap .head { grid-template-columns: minmax(0, 1fr) 5rem 3.8rem; }
}


/* Settings menu: grouped, scrolls on short screens, text size and theme as button rows. */
.settings { max-height: calc(100dvh - 88px); overflow-y: auto; overscroll-behavior: contain; }
.setgroup { margin: 12px 8px 2px; color: var(--muted); font-size: 0.75rem; font-weight: 700; letter-spacing: .04em; }
.sizerow .sizes.three { grid-template-columns: repeat(3, 1fr); }
.sizerow .sizes.tx4 { grid-template-columns: repeat(2, 1fr); } /* four word buttons: two by two */
.sizerow .sizes.two { grid-template-columns: repeat(2, 1fr); }
.sizebtn.txt { font: 600 0.875rem/1 var(--body); }
.setselect { min-height: 40px; padding: 0 10px; border-radius: var(--r-sm); border: 1px solid var(--line);
  background: var(--surface-2); color: var(--text); font-size: 0.9375rem; }

/* Pin a fact to the key bar from the details sheet. */
.pinhelp { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 20px 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); font-size: 0.8125rem; color: var(--muted); }
.pinhelp strong { display: block; color: var(--text); font-size: 0.9375rem; }
.pinhelp p { margin: 2px 0 0; }
.pinstar { color: var(--marquee); font-size: 1rem; line-height: 1; }
.pinside { display: grid; justify-items: end; gap: 4px; flex: none; }
.pincount { color: var(--marquee); font-weight: 700; white-space: nowrap; }
.pinhelp .morebtn { padding: 0; font-size: 0.8125rem; color: var(--muted); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.pinhelp .morebtn[hidden] { display: none; }
.pinhelp .morebtn:hover { color: var(--text); }
.drow { position: relative; }
.pin { position: absolute; right: 0; top: 6px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
  border: 0; border-radius: 50%; background: none; cursor: pointer; }
.pin svg { width: 18px; height: 18px; fill: none; stroke: var(--faint); stroke-width: 1.8; stroke-linejoin: round; }
.pin:hover svg { stroke: var(--text); }
.pin[aria-pressed="true"] svg { fill: var(--marquee); stroke: var(--marquee); }
.pin:disabled { cursor: not-allowed; opacity: .4; }
.pin:focus-visible { outline: 2px solid var(--marquee); }
.drow dd { padding-right: 34px; }

/* ------------------------------------------------------------------ wide screens
   Page is 1200px wide. Film pages and all-seasons TV pages put the key facts in a sticky left column
   and the cast on the right; other pages stay one column, capped so rows stay readable. */
#film:not(.wide2) .tools, #film:not(.wide2) .cast, #film:not(.wide2) .note { max-width: 880px; }
@media (min-width: 1040px) {
  #film.wide2:has(> .keybar) { display: grid; grid-template-columns: 340px minmax(0, 1fr); column-gap: 48px; align-items: start; }
  #film.wide2:has(> .keybar) > .filmhead { grid-column: 1 / -1; }
  #film.wide2:has(> .keybar) > .keybar { grid-column: 1; grid-row: 2 / span 8; position: sticky; top: 88px; flex-direction: column; gap: 8px; }
  #film.wide2:has(> .keybar) > .keybar .key dd { font-size: 1.25rem; }
  #film.wide2:has(> .keybar) > .keybar .detailsbtn { flex-direction: row; min-height: 44px; }
  #film.wide2:has(> .keybar) > :not(.filmhead):not(.keybar):not(.backdrop) { grid-column: 2; min-width: 0; }
  /* Start the key facts level with the top of the cast heading text, which sits under the Sort control
     (the list heading has 6px padding, the season table 10px, so the tiles drop by that much). */
  #film.wide2:has(> .keybar):not(:has(> .agechart)) > .keybar { margin-top: 58px; }
  /* Single-season and film cast lists sit at the same height as the All seasons grid. */
  #film.wide2:has(> .keybar):not(:has(> .agechart)):not(:has(> .gridwrap)) > .cast .head { box-sizing: border-box; min-height: 53px; padding: 10px 0; }
  #film.wide2:has(> .keybar):not(:has(> .agechart)):has(> .gridwrap) > .keybar { margin-top: 58px; }
  #film.wide2:has(> .keybar) > .tools { height: 40px; }
}

/* Footer on phones: a centred stack (links, sources, copyright) instead of a ragged wrapped row. */
@media (max-width: 560px) {
  footer { flex-direction: column; align-items: center; gap: 10px; margin-top: 44px; padding: 20px 0 28px;
    text-align: center; font-size: 0.8125rem; line-height: 1.5; }
  footer nav { order: 1; gap: 8px; flex-wrap: wrap; justify-content: center; }
  footer nav a { color: var(--muted); padding: 8px 12px; white-space: nowrap; border: 1px solid var(--line); border-radius: 999px; }
  footer .data { order: 2; margin-left: 0; max-width: 26ch; text-wrap: balance; }
  footer .data a { text-decoration: underline; text-underline-offset: 2px; }
  footer > span:first-child { order: 3; }
}

/* Share button: top right of a title or list page. */
.sharebtn { display: inline-flex; align-items: center; gap: 6px; font: 600 0.8125rem/1 var(--body); color: var(--text);
  background: transparent; border: 1.5px solid var(--text); border-radius: 999px; padding: 7px 12px; cursor: pointer; float: right; margin: 0 0 8px 12px; }
.sharebtn svg { width: 16px; height: 16px; }
.sharebtn:hover, .sharebtn:focus-visible { background: var(--surface-2); }
.listtop { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.listtop .sharebtn { float: none; margin: 0 0 0 auto; }

/* A person's page. */
.phead { display: flex; align-items: center; gap: 16px; margin: 4px 0 8px; }
.phead .avatar { width: 72px; height: 72px; flex: none; }
.phead h2 { margin: 0; }
.phead .lede { margin: 4px 0 0; }
/* Age now (gold, like every age on the site), small beside the birthday; grey with the years lived for someone who has died. */
.lifebadge { display: inline-flex; align-items: baseline; gap: 6px; margin-left: 8px; padding: 1px 8px 0; border-radius: 999px; vertical-align: -1px;
  border: 1px solid color-mix(in srgb, var(--marquee) 45%, transparent); background: color-mix(in srgb, var(--marquee) 10%, transparent); line-height: 1.35; }
.lifebadge b { font: 800 1.05rem/1.2 var(--display); color: var(--marquee); }
.lifebadge.gone { border-color: var(--line); background: var(--surface); }
.lifebadge.gone b { color: var(--muted); }
.lifebadge i { font-style: normal; font-size: .78rem; color: var(--faint); }
/* A slightly smaller cake beside the birthday on actor pages, centered on the same spot as before. */
.phead .cake { width: 1.15em; height: 1.15em; vertical-align: -0.18em; }
.phead .bday { white-space: normal; }
.phead .bday > span:first-child, .lifebadge { white-space: nowrap; }
.lrow.cred { grid-template-columns: 3.6rem minmax(0, 1fr) 5.5rem; align-items: center; }
.lrow.cred .yearcol { color: var(--faint); font: 800 1.125rem/1 var(--display); font-variant-numeric: tabular-nums; }
.lrow.cred .lr-age { align-self: center; }
.who-tag { font: 600 0.6875rem/1 var(--body); text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 7px; margin-right: 8px; }
.who strong a { color: inherit; text-decoration: none; }
.who strong a:hover, .who strong a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 560px) { .lrow.cred { grid-template-columns: 2.8rem minmax(0, 1fr) 4.2rem; } }

.lrow.kid { grid-template-columns: 2rem 40px minmax(0, 1fr) 6.5rem; }
@media (max-width: 560px) { .lrow.kid { grid-template-columns: 1.4rem 34px minmax(0, 1fr) auto; } }

/* Status tags: ended shows, and cast who have died. */
.tag.ended, .tag.died { background: transparent; border: 1px solid var(--faint); color: var(--muted); }
h2 .tag.ended { margin-left: 10px; vertical-align: middle; font-size: 0.75rem; }
.setfoot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.setreset { background: none; border: 1px solid var(--line); border-radius: 999px; color: var(--text); font: 600 0.8125rem/1 var(--body); padding: 8px 12px; cursor: pointer; }
.setreset:hover, .setreset:focus-visible { background: var(--surface-2); }
.setreset { flex: none; white-space: nowrap; }
.setreset.armed { border-color: #e5484d; color: #e5484d; }
.settings > .setnote { margin: 10px 10px 4px; }

/* Dragging a key-fact tile. */
.keys .key { cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.keys .key .more { cursor: pointer; }
.keys.reordering { cursor: grabbing; }
.keys .key.dragging { position: relative; z-index: 5; cursor: grabbing; background: var(--surface-2); border-radius: var(--r-md);
  box-shadow: 0 8px 24px rgba(0,0,0,.35); transition: none; }

/* Trending period switch beside Shuffle. */
.trendtools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.picks[aria-busy="true"] { opacity: .55; transition: opacity .15s; }

/* Poster beside each credit on a person's page. */
.cposter { width: 72px; aspect-ratio: 2 / 3; border-radius: 5px; object-fit: cover; display: block; background: var(--surface-2); box-shadow: 0 0 0 1px var(--line); }
.cposter.none { display: grid; place-items: center; font: 800 1.125rem/1 var(--display); color: var(--muted); }
@media (max-width: 560px) { .cposter { width: 60px; } }

.bday { white-space: nowrap; }
.cake { display: inline-block; width: 1.35em; height: 1.35em; vertical-align: -0.28em; margin-right: .1em; color: var(--marquee); }
.cake svg { width: 100%; height: 100%; display: block; }

/* On phones the facts stack, one per line, instead of leaving a dot at the end of a line. */
@media (max-width: 560px) { .phead .sep { display: none; } .phead .fact { display: block; } }
.phead .sep { padding: 0 .35em; color: var(--faint); }

/* Click a poster on an actor's page to see it larger. */
.cpbtn { padding: 0; border: 0; background: none; cursor: zoom-in; display: block; border-radius: 5px; }
.cpbtn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.lightbox { border: 0; padding: 8px; border-radius: var(--r-md); background: var(--surface); color: var(--text); max-width: 96vw; max-height: 100dvh; cursor: zoom-out; }
.lightbox::backdrop { background: rgb(8 6 14 / .72); backdrop-filter: blur(3px); }
/* As big as the screen allows: nearly the full width, or the full height less room for the caption, whichever is smaller. */
.lightbox img { display: block; width: min(100vw - 32px, (100dvh - 92px) * 2 / 3); aspect-ratio: 2 / 3; height: auto; object-fit: contain;
  background: center / contain no-repeat; border-radius: 6px; }
.lbcap { margin: 10px 2px 0; font-size: .8125rem; color: var(--muted); }
.lbcap strong { color: var(--text); }
.lbcap a { color: var(--muted); }

/* The actor's photo is larger: 132px on laptops, 104px on phones. */
.phead .avatar { width: 104px; height: 104px; }
@media (min-width: 761px) { .phead { gap: 24px; } .phead .avatar { width: 132px; height: 132px; } }

/* Phones: Shuffle sits beside the heading; the period switch gets its own full-width row. */
@media (max-width: 560px) {
  .trendhead:has(#trendtabs) { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; }
  .trendhead:has(#trendtabs) .trendtools { display: contents; }
  .trendhead:has(#trendtabs) #shuffle { grid-column: 2; grid-row: 1; }
  .trendhead:has(#trendtabs) #trendtabs { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(3, 1fr); }
  .trendhead:has(#trendtabs) #trendtabs button { padding-inline: 6px; white-space: nowrap; }
}

/* Numbers never break across lines. Ranges get a little less size and room on phones. */
.age, .gapcell, .lr-badge, .lr-badge .span-big { white-space: nowrap; }
@media (max-width: 560px) {
  .age.rng, .cast .age + .age.rng { font-size: 1.375rem; }
  .row, .head { grid-template-columns: minmax(0, 1fr) 3.6rem 3.6rem; }
  .cast.hasgap .row, .cast.hasgap .head { grid-template-columns: minmax(0, 1fr) 3.4rem 3.4rem 3.8rem; }
}

/* Show posters in list rows (longest-running shows). */
.lposter { width: 72px; aspect-ratio: 2 / 3; border-radius: 5px; object-fit: cover; display: block; background: var(--surface-2); box-shadow: 0 0 0 1px var(--line); }
.lposter.none { display: grid; place-items: center; font: 800 1.125rem/1 var(--display); color: var(--muted); }
.lrow.gen.pst { grid-template-columns: 2rem 72px minmax(0, 1fr) 6.5rem; align-items: center; }
.lrow.gen.pst::before { margin-top: 0; }
.lrow.gen.pst .lr-badge { align-self: center; margin-bottom: 0; }
@media (max-width: 560px) { .lrow.gen.pst { grid-template-columns: 1.4rem 60px minmax(0, 1fr) 4.2rem; } .lposter { width: 60px; } }
.lrow.bp.pst { grid-template-columns: 3.2rem 72px minmax(0, 1fr) 8.5rem 8.5rem; }
@media (max-width: 560px) { .lrow.bp.pst { grid-template-columns: 2.6rem 60px minmax(0, 1fr) auto; } }

/* Actor lists: the title's poster sits beside the actor's photo. */
.lrow.pst2 { grid-template-columns: 2rem 40px 72px minmax(0, 1fr) 10.5rem 5.5rem; }
.lrow.grow.pst2 { grid-template-columns: 2rem 40px 72px minmax(0, 1fr) auto 8.5rem; }
.lrow.kid.pst2 { grid-template-columns: 2rem 40px 72px minmax(0, 1fr) 6.5rem; }
.lrow.pst2 .lposter { width: 72px; }
@media (max-width: 560px) {
  .lrow.pst2 { grid-template-columns: 1.4rem 34px 60px minmax(0, 1fr) auto; }
  .lrow.grow.pst2 { grid-template-columns: 1.4rem 34px 60px minmax(0, 1fr) 6.6rem; }
  .lrow.kid.pst2 { grid-template-columns: 1.4rem 34px 60px minmax(0, 1fr) auto; }
  .lrow.pst2 .lposter { width: 60px; }
}

/* Actor page: the year of each film or show leads the row. */
.lrow.cred .yearcol { color: var(--text); font-size: 1.75rem; letter-spacing: .01em; }
.lrow.cred { grid-template-columns: 4.2rem minmax(0,1fr) 5.5rem; }
@media (max-width: 560px) {
  .lrow.cred .yearcol { font-size: 1.375rem; }
  .lrow.cred { grid-template-columns: 3.2rem minmax(0, 1fr) 4.2rem; }
}

/* Born today: actors with a birthday today. */
.borns { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 10px; }
.bcard { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: inherit; transition: border-color .15s; }
.bcard:hover { border-color: var(--marquee); }
.bphoto { flex: none; width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: center 22%; background: var(--surface-2); }
.bphoto.none { display: grid; place-items: center; font: 800 1.25rem/1 var(--display); color: var(--muted); }
.btext { min-width: 0; display: grid; gap: 2px; }
.btext strong { font-weight: 700; overflow-wrap: anywhere; }
.btext span { color: var(--marquee); font: 800 1rem/1 var(--display); }
@media (max-width: 560px) { .borns { grid-template-columns: 1fr; } .bphoto { width: 44px; height: 44px; } }
@media (min-width: 561px) { .borns { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); } .bphoto { width: 60px; height: 60px; } }

/* "Show all" under Born today. */
.bornmore { display: flex; justify-content: center; margin-top: 14px; }
.bornmore:empty { display: none; }
.bornmore button { min-height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
  color: var(--text); font: 600 0.9375rem/1 var(--body); cursor: pointer; }
.bornmore button:hover { border-color: var(--marquee); }

/* A cake beside the name on someone's birthday: icon only, so it never crowds the youngest/oldest tag. */
.tag.bday { padding: 1px 5px; background: transparent; color: var(--marquee); line-height: 1; }
.tag.bday .cake { width: 1.15em; height: 1.15em; margin: 0; vertical-align: -0.2em; }
.btext span .cake { width: 1.1em; height: 1.1em; margin-right: 4px; vertical-align: -0.103em; } /* plate sits on the text baseline */
.btext .known { color: var(--muted); font: 500 0.75rem/1.3 var(--body); }
.btext .known em { font-style: normal; color: var(--text); }

/* Best-picture rows: show the full youngest/oldest names (wrap rather than cut off) */
.lrow.bp .lr-age .small { white-space: normal; overflow: visible; text-overflow: clip; }
@media (min-width: 900px) {
  .lrow.bp { grid-template-columns: 3.2rem minmax(0, 1fr) 15rem 15rem; }
  .lrow.bp.pst { grid-template-columns: 3.2rem 72px minmax(0, 1fr) 15rem 15rem; }
  .lrow.bp .lr-age .small { white-space: nowrap; }
}
.btext span { white-space: nowrap; }

.rangerow { align-items: flex-start; flex-direction: column; gap: 6px; }
.rangerow .setrange { width: 100%; accent-color: var(--marquee); margin: 0; }
.rangeval { margin-left: 8px; color: var(--muted); font-weight: 500; font-size: 0.8125rem; }

/* Settings section headers: a divider above each group, an accent dot, and the display face */
.setgroup, .sethead { display: flex; align-items: center; gap: 8px; margin: 14px 8px 4px; padding-top: 14px;
  border-top: 1px solid var(--line); color: var(--text); font: 800 0.9375rem/1.1 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.setgroup::before, .sethead::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--marquee); flex: none; }
.sethead { margin-top: 4px; padding-top: 0; border-top: 0; }
/* Grouped settings: icon tile + title above a card holding that section's rows. */
.setgroup, .sethead { border-top: 0; padding-top: 0; margin: 20px 6px 8px; gap: 10px; text-transform: none; letter-spacing: .01em;
  font: 800 1.25rem/1 var(--display); }
.sethead { margin-top: 6px; }
.setgroup::before, .sethead::before { display: none; }
.shi { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; flex: none;
  background: color-mix(in srgb, var(--marquee) 16%, var(--surface-2)); color: var(--marquee); }
.shi svg { width: 16px; height: 16px; }
.setcard { background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: 2px 4px; }
.setcard > * + * { border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.setcard .setrow:hover { background: transparent; }

/* Watch trailer: an outlined pill beside the score pills. */
.trailerbtn { display: inline-flex; align-items: center; gap: 7px; align-self: stretch; padding: 0 14px; min-height: 44px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--text);
  font: 600 0.875rem/1 var(--body); text-decoration: none; transition: border-color .15s; }
.trailerbtn svg { width: 14px; height: 14px; color: var(--marquee); }
.trailerbtn:hover, .trailerbtn:focus-visible { border-color: var(--marquee); }

/* Trailer window: a big 16:9 player over the page; the player's own button goes full screen. */
.trailerbox { border: 0; padding: 12px; border-radius: var(--r-md); background: var(--surface); color: var(--text);
  width: min(96vw, 1000px); max-width: none; }
.trailerbox::backdrop { background: rgb(8 6 14 / .8); backdrop-filter: blur(3px); }
.tbhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 2px 10px; }
.tbclose { font: 600 0.8125rem/1 var(--body); color: var(--text); background: transparent; border: 1.5px solid var(--text);
  border-radius: 999px; padding: 7px 12px; cursor: pointer; }
.tbclose:hover, .tbclose:focus-visible { background: var(--surface-2); }
.tbframe { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 6px; overflow: hidden; }
.tbframe iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* "← Home" link above film, show, actor and list pages */
.backhome { display: none; }
/* Styled like the Share button, with Share on the same row at the right. */
main:has(> #film:not([hidden])) .backhome { position: relative; z-index: 2; display: inline-flex; align-items: center; box-sizing: border-box; height: 32px; margin: 14px 0 8px; padding: 0 12px;
  font: 600 0.8125rem/1 var(--body); color: var(--text); text-decoration: none; border: 1.5px solid var(--text); border-radius: 999px; }
main:has(> #film:not([hidden])) .backhome:hover, main:has(> #film:not([hidden])) .backhome:focus-visible { background: var(--surface-2); }
#film { position: relative; }
#film .sharebtn { position: absolute; top: -40px; right: 0; float: none; margin: 0; box-sizing: border-box; height: 32px; padding: 0 12px; }

/* Genre lists on phones: score on the title line, full-width text, award chips on one row. */
.lr-inscore { display: none; }
@media (max-width: 560px) {
  .lrow.genre, .lrow.genre.pst { grid-template-columns: 1.4rem 60px minmax(0, 1fr); align-items: start; }
  .lrow.genre:not(.pst) { grid-template-columns: 1.4rem minmax(0, 1fr); }
  .lrow.genre > .lr-badge { display: none; }
  .lrow .lr-top:has(> .yr) { display: block; }
  .lrow .lr-top:has(> .yr) strong { display: inline; }
  .lrow .lr-top .yr { margin-left: 6px; }
  .lrow.genre .lr-inscore { display: block; margin-top: 2px; color: var(--muted); font-size: 0.8125rem; }
  .lrow.genre .lr-inscore b { color: var(--marquee); font: 800 1rem/1 var(--display); }
  .lrow.genre .lr-sub { display: block; -webkit-line-clamp: unset; line-clamp: none; }
  .lrow.genre .lr-main, .lrow.genre .awd, .lrow.genre .awd summary { min-width: 0; }
  .lrow.genre .awd-chips { gap: 4px; }
  .lrow.genre .awd-chip { white-space: nowrap; padding: 2px 7px; font-size: 0.8125rem; }
}

/* Lists with posters: poster, title and number line up along the top; the score stays centered. */
.toplist .lrow.pst, .toplist .lrow.pst2 { align-items: start; }
.toplist .lrow.pst > .lr-badge, .toplist .lrow.pst2 > .lr-badge,
.toplist .lrow.pst > .lr-age, .toplist .lrow.pst2 > .lr-age { align-self: center; margin-top: 0; margin-bottom: 0; }
.toplist .lrow.pst > .lr-main, .toplist .lrow.pst2 > .lr-main { margin-top: -3px; }

/* Made-up poster for titles without one: deep two-tone color from the title, title set like a poster. */
.ptile.none {
  display: flex; flex-direction: column; justify-content: space-between; gap: 2px; padding: 6px 5px 5px; box-sizing: border-box;
  place-items: initial; overflow: hidden; color: #fff; text-align: left;
  background:
    radial-gradient(120% 70% at 20% 0%, hsl(var(--ph) 70% 55% / .45), transparent 60%),
    linear-gradient(165deg, hsl(var(--ph) 45% 28%), hsl(calc(var(--ph) + 35) 50% 11%));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08), 0 0 0 1px var(--line);
}
.ptile .pt-kind { font: 700 0.5rem/1 var(--body); letter-spacing: .12em; opacity: .7; }
.ptile .pt-title { font: 800 0.8125rem/1.02 var(--display); text-transform: uppercase; letter-spacing: .01em; overflow-wrap: normal; word-break: normal; hyphens: none;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; text-shadow: 0 1px 2px rgb(0 0 0 / .35); }
.ptile .pt-year { font: 600 0.5625rem/1 var(--body); opacity: .75; font-variant-numeric: tabular-nums; }

.ptile.pt-long .pt-title { font-size: 0.6875rem; }
.ptile.pt-xlong .pt-title { font-size: 0.5625rem; }

/* Recently viewed: people get a round photo in place of a poster. */
.pposter.rface { aspect-ratio: 1; border-radius: 50%; align-self: center; }
.pposter.rface.none { font-size: 1.125rem; background: var(--surface-2); }

/* "You were 12 when it came out." under the title, from a birthday kept in this browser. */
.youwere { margin: 10px 0 0; color: var(--muted); font-size: 0.9375rem; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.youwere > span:first-child { color: var(--text); }
.ywlink { padding: 0; border: 0; background: none; color: var(--muted); font: inherit; text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: var(--line); cursor: pointer; }
.ywlink:hover, .ywlink:focus-visible { color: var(--marquee); text-decoration-color: currentColor; }
.ywdate { font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 4px 8px; color-scheme: light dark; }
.ywbtn { font: 600 0.875rem/1 var(--body); color: var(--bg); background: var(--text); border: 0; border-radius: var(--r-sm);
  padding: 8px 12px; cursor: pointer; }
.ywnote { flex-basis: 100%; color: var(--faint); font-size: 0.75rem; }

/* Recently viewed: a small × in the corner removes one card. Shown on hover; always on touch screens. */
.rwrap { position: relative; display: grid; }
.rclose { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center;
  font: 400 17px/1 var(--body); color: var(--muted); background: var(--surface-2); border: 1px solid var(--line);
  opacity: 0; transition: opacity .15s, color .15s, border-color .15s; }
.rwrap:hover .rclose, .rclose:focus-visible { opacity: 1; }
.rclose:hover { color: var(--text); border-color: var(--marquee); }
@media (hover: hover) { .rwrap .pick { padding-right: 30px; } }
/* Touch screens: always shown, smaller and tucked into the corner so names keep their room. */
@media (hover: none) { .rclose { opacity: .85; top: 4px; right: 4px; width: 20px; height: 20px; font-size: 15px; } }
.pposter.listtile { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; align-self: center; font-size: 1.125rem; background: var(--surface-2); color: var(--marquee); }

/* ---- Age in Music: artist and band pages ---- */
.sechead { font: 700 1.25rem/1.2 var(--display); letter-spacing: 0.01em; margin: 1.6rem 0 0.4rem; }
.cast.members { margin-top: 0; }
.cast .age.gone { color: var(--faint); }
.memberof { margin-top: 0.3rem; }
.memberof a { color: inherit; }
.personpage .summarywrap { margin-top: 0.9rem; }
#results .ricon.artist { border-radius: 50%; }

/* Record covers are square, not poster-shaped. */
.poster { aspect-ratio: 1; }
.cposter.cover, .pposter.cover { aspect-ratio: 1; align-self: center; }

/* Track list on album pages */
.tracks { margin: 28px 0 8px; }
.tracks h3 { font: 800 1.35rem/1 var(--display); letter-spacing: .01em; margin: 0 0 10px; }
.tracks h4 { margin: 14px 0 6px; color: var(--muted); font-size: .85rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.tracks ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.tracks li { display: grid; grid-template-columns: 2.2em 1fr auto; gap: 8px; align-items: baseline; padding: 9px 2px; border-bottom: 1px solid var(--line); }
.tracks .no { color: var(--faint); font-variant-numeric: tabular-nums; text-align: right; }
.tracks .by { color: var(--muted); }
.tracks .len { color: var(--muted); font-variant-numeric: tabular-nums; }

footer .fsep { font-style: normal; margin: 0 0.7em; color: var(--faint); }

/* The plain server-sent copy of a page is for search engines and slow connections: it stays out of sight
   while the app draws the real page, and only shows itself if the app has not taken over after 3 seconds. */
.ssr { opacity: 0; animation: ssr-show 0s 3s forwards; }
@keyframes ssr-show { to { opacity: 1; } }

/* Links to the sister sites: each shown with its own small icon and name, as in its header. */
footer .family { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
footer .family .fl { color: var(--faint); }
footer a.sib { display: inline-flex; align-items: center; gap: 8px; color: var(--muted);
  font: 800 1.0625rem/1 var(--display); letter-spacing: .01em; }
footer a.sib:hover { color: var(--text); }
footer a.sib img { width: 20px; height: 20px; border-radius: 5px; display: block; }
@media (max-width: 560px) { footer .family { order: 4; flex-basis: auto; flex-direction: column; gap: 10px; }
  footer a.sib { font-size: 1.25rem; } footer a.sib img { width: 24px; height: 24px; } }

/* Lists without a rank number (same age, the 27 Club): the photo takes the first column. */
.toplist.unranked .lrow.kid { grid-template-columns: 40px minmax(0, 1fr) 6.5rem; }
@media (max-width: 560px) { .toplist.unranked .lrow.kid { grid-template-columns: 34px minmax(0, 1fr) auto; } }
.listsrc { margin-top: 22px; }

/* People lists: the photo fills the row's own height (the age block sets it), so rows stay the same size. */
.lrow.kid { grid-template-columns: 2rem 56px minmax(0, 1fr) 6.5rem; }
.lrow.kid > .avatar { width: 56px; height: 56px; }
.toplist.unranked .lrow.kid { grid-template-columns: 56px minmax(0, 1fr) 6.5rem; }
@media (max-width: 560px) {
  .lrow.kid { grid-template-columns: 1.4rem 50px minmax(0, 1fr) auto; }
  .lrow.kid > .avatar { width: 50px; height: 50px; }
  .toplist.unranked .lrow.kid { grid-template-columns: 50px minmax(0, 1fr) auto; }
}

/* Band lists: the album cover beside the row, sized to the row's own height. */
.lcover { width: 64px; height: 64px; border-radius: 5px; object-fit: cover; display: block; background: var(--surface-2); box-shadow: 0 0 0 1px var(--line); }
.lcover.none { display: grid; place-items: center; font: 800 0.75rem/1 var(--display); color: var(--muted); overflow: hidden; }
.lrow.gen.pst { grid-template-columns: 2rem 64px minmax(0, 1fr) 6.5rem; }
@media (max-width: 560px) { .lrow.gen.pst { grid-template-columns: 1.4rem 56px minmax(0, 1fr) 4.2rem; } .lcover { width: 56px; height: 56px; } }

/* "Also at 21, 32, 34" on the same-age list: small age chips that jump to that age. */
.alsoages { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 3px; color: var(--faint); font-size: 0.75rem; }
.agechip { min-width: 26px; padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); color: var(--text);
  font: 600 0.75rem/1.3 var(--body); cursor: pointer; }
.agechip:hover, .agechip:focus-visible { border-color: var(--marquee); color: var(--marquee); }
.personpage .youwere { margin: 14px 0 26px; }

/* Leader tiles (In office now, Born today, Recently viewed): a smaller round photo, and the office as plain text. */
.picks.leaders { grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); }
.picks.leaders .pposter.rface { width: 54px; }
.picks.leaders .ptext { gap: 2px; }
.picks.leaders .pk { padding: 0; background: none; font-weight: 500; font-size: 0.8125rem; }
@media (max-width: 560px) {
  .picks.leaders { grid-template-columns: 1fr; }
  .picks.leaders .pposter.rface { width: 48px; }
}

.regionpick { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: .9rem; }
.regionpick select { background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font: inherit; max-width: 60vw; }
.regionpick select { width: auto; }
.lc-icon.flag svg { width: 34px; height: 24px; }

/* Waiting is feedback, not decoration: the loading spinner and line keep moving even with reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .status.busy::before { animation: spin .9s linear infinite !important; }
  .status.busy::after { animation: sweep 1.6s ease-in-out infinite !important; }
}
:root[data-motion="reduce"] .status.busy::before { animation: spin .9s linear infinite !important; }
:root[data-motion="reduce"] .status.busy::after { animation: sweep 1.6s ease-in-out infinite !important; }

/* Only show the loading chip if the wait is longer than a blink: fast pages never flash it. */
@keyframes chipin { from { opacity: 0; } to { opacity: 1; } }
.status.busy, :root[data-motion="reduce"] .status.busy { animation: chipin .25s ease .5s both !important; }

/* Age in History: milestone icons and links on the person page */
.evicon { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 8px; vertical-align: -4px; color: var(--marquee); flex: none; }
.evicon svg { width: 18px; height: 18px; }
.lr-top .evname { font-weight: 600; }
.wikilink { color: inherit; }
.lr-about { display: block; margin-top: 2px; color: var(--muted); font-size: .8125rem; line-height: 1.35; }
.sum { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md, 14px); padding: 14px 16px; margin: 4px 0 16px; }
.sum h3 { margin: 0 0 8px; font: 700 .75rem/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--marquee); }
.sum dl { margin: 0; display: grid; gap: 10px; }
.sum dt { font-weight: 700; }
.sum dd { margin: 2px 0 0; color: var(--muted); font-size: .9rem; line-height: 1.4; }

/* Biography, compare, and the extra list filters */
.listtools { justify-content: flex-start; }
.bio { margin: 6px 0 4px; line-height: 1.55; color: var(--muted, inherit); max-width: 62ch; }
.cmpline { margin: 14px 0 0; }
.cmpline a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; border: 1.5px solid var(--marquee); color: var(--marquee); font-weight: 600; text-decoration: none; transition: background .15s, color .15s; }
.cmpline a::before { content: "\21C4"; font-size: 1.15em; line-height: 1; }
.cmpline a:hover, .cmpline a:focus-visible { background: var(--marquee); color: var(--bg); }
.cmpq { width: 100%; max-width: 420px; margin: 14px 0; padding: 12px 14px; font: inherit; border-radius: 12px; border: 1px solid var(--line, #444); background: transparent; color: inherit; }
.cmpgrid { display: grid; grid-template-columns: minmax(64px, 84px) 1fr 1fr; gap: 10px 14px; align-items: start; margin-top: 18px; }
.cmphead { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.cmphead .avatar { width: 64px; height: 64px; }
.cmprow { display: contents; }
.cmpage { font-weight: 600; font-size: .85em; opacity: .75; padding-top: 2px; }
.cmpcol { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--line, #3a3a48); padding-top: 8px; }
.cmpage { border-top: 1px solid var(--line, #3a3a48); padding-top: 8px; }
.cmpev { font-size: .95em; line-height: 1.35; }
.cmpyr { display: block; font-size: .8em; opacity: .65; }
.listtools { gap: 12px 18px; }
.listtools .sortlab { margin-left: 0; }

.morebtn { display: block; margin: 12px auto 0; padding: 9px 20px; font: inherit; font-size: .9rem; border-radius: 999px; border: 1px solid var(--line, #444); background: transparent; color: inherit; cursor: pointer; }
.morebtn:hover, .morebtn:focus-visible { background: color-mix(in srgb, var(--accent, #f4b33f) 18%, transparent); }

/* "You were N when..." callout: a tinted card with an accent bar so it stands out */
.youwere { display: flex; width: fit-content; max-width: 100%; margin: 16px 0; padding: 9px 14px 9px 12px; border-radius: 14px; border: 1px solid var(--line, rgba(128,128,128,.35)); border-left: 5px solid var(--marquee); background: var(--surface, transparent); color: var(--text); font-size: 1.0625rem; font-weight: 600; line-height: 1.35; }
.youwere::before { content: "\1F382"; font-size: 1.3em; line-height: 1; margin-right: 0; }
.youwere > span:first-child { color: var(--text); }
.youwere .ywlink { color: var(--marquee); font-weight: 600; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.youwere > .ywlink:only-child { font-size: 1.0625rem; }
.youwere > span + .ywlink, .youwere > span + .ywlink + .ywlink { color: var(--muted); font-weight: 500; font-size: .875rem; }

/* Date of death under a person's prizes */
.lifeline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; width: fit-content; max-width: 100%; margin: 18px 0 0; padding: 9px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: .95rem; }
.lifeline .llk { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.lifeline .llv { color: var(--text); font-weight: 600; }
.lifeline .llage { color: var(--muted); }
.lifeline .llage b { font: 800 1.35rem/1 var(--display); color: var(--text); margin-right: 2px; }

/* The site switcher: an arrow beside the site name and a menu of the family. */
.swbtn { flex: none; display: grid; place-items: center; width: 28px; height: 28px; margin-left: -6px; border-radius: 50%; border: 1px solid var(--line, #333); background: var(--surface, transparent); color: var(--muted, #aaa); cursor: pointer; padding: 0; }
.swbtn svg { width: 16px; height: 16px; }
.swbtn:hover, .swbtn[aria-expanded="true"] { color: var(--text, #fff); border-color: var(--marquee, #f4b33f); }
.sitemenu { position: fixed; inset: auto; margin: 0; padding: 8px; border: 1px solid var(--line, #333); border-radius: 16px; background: var(--surface, #1c1928); color: var(--text, #fff); box-shadow: 0 18px 48px rgba(0, 0, 0, .45); max-height: calc(100vh - 90px); overflow: auto; }
.sitemenu .swhead { margin: 6px 10px 8px; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted, #aaa); }
.swi { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; color: inherit; text-decoration: none; }
a.swi:hover, a.swi:focus-visible { background: color-mix(in srgb, var(--marquee, #f4b33f) 14%, transparent); outline: none; }
.swi img { flex: none; width: 28px; height: 28px; border-radius: 7px; }
.swi .swt { display: flex; flex-direction: column; min-width: 0; }
.swi b { font-weight: 600; font-size: .98rem; line-height: 1.2; }
.swi small { color: var(--muted, #aaa); font-size: .8rem; line-height: 1.25; }
.swi.cur { background: color-mix(in srgb, var(--marquee, #f4b33f) 10%, transparent); }
.swi.cur { box-shadow: inset 3px 0 0 var(--marquee, #f4b33f); }
.swi.cur small { color: var(--marquee, #f4b33f); }
.swi.soon { opacity: .5; }
.swi .swdot { flex: none; width: 28px; height: 28px; border-radius: 7px; border: 1px dashed var(--line, #555); }
.swall { display: block; margin: 6px 4px 2px; padding: 10px; border-top: 1px solid var(--line, #333); text-align: center; font-size: .9rem; color: var(--muted, #aaa); text-decoration: none; }
.swall:hover { color: var(--text, #fff); }