/* TPK Live, the public site: Newsdesk's look for people who never sign in. Square corners, the logo's red and blue,
   cards that glow blue, Archivo for headlines, Public Sans to read and IBM Plex Mono for the small print. Colors are
   light-dark pairs like the app's (styles.css): the theme follows the system unless the switch in the bar picks one,
   and a browser too old for light-dark() gets the light ones. The coverage chart is the app's own, with its styles
   (charts.css); this file only sets the colors it reads and keeps it to the spectrum.

   Fonts and pictures are named @m/name and get their fingerprinted address when the site is published
   (src/site/assets.ts). Nothing here loads from anyone else. */

@font-face { font-family: "Archivo"; src: url("../../m/archivo.e3a28ead.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("../../m/public-sans.5ed4d31c.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("../../m/public-sans-italic.16dc9325.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../../m/ibm-plex-mono-500.01d28544.woff2") format("woff2"); font-weight: 400 500; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../../m/ibm-plex-mono-600.0d1f0b8d.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../../m/ibm-plex-mono-700.4f84d86c.woff2") format("woff2"); font-weight: 700 900; font-display: swap; }

/* ---- Colors: the app's, as light-dark(light, dark) ---- */
:root {
  color-scheme: light dark;
  --bg: light-dark(#eef1f6, #0a0f1b);
  --panel: light-dark(#ffffff, #111a2b);
  --panel-2: light-dark(#f3f5f9, #172238);
  --ink: light-dark(#111827, #e8edf6);
  --muted: light-dark(#586274, #95a2b9);
  --line: light-dark(#d7dde8, #24314a);
  --red: #ed1c24;
  --red-ink: light-dark(#c9181f, #f14e54);
  --red-soft: light-dark(#fde8e9, #3f1219);
  --on-red: #ffffff;
  --blue: #3871c1;
  --blue-ink: light-dark(#3871c1, #6a94d0);
  --blue-soft: light-dark(#e8eff8, #1a2d4c);
  --good: light-dark(#127a55, #41d197);
  --good-soft: light-dark(#def3ea, #0f3326);
  --warn: light-dark(#9a620a, #f2b552);
  --warn-soft: light-dark(#fcefd6, #3a2a10);
  --glass: light-dark(rgba(255, 255, 255, 0.72), rgba(15, 22, 38, 0.7));
  --glass-line: light-dark(rgba(17, 24, 39, 0.08), rgba(255, 255, 255, 0.08));
  --glow-1: light-dark(rgba(237, 28, 36, 0.13), rgba(237, 28, 36, 0.22));
  --glow-2: light-dark(rgba(56, 113, 193, 0.15), rgba(56, 113, 193, 0.32));
  --sh-1: light-dark(rgba(17, 24, 39, 0.05), rgba(0, 0, 0, 0.3));
  --sh-2: light-dark(rgba(17, 24, 39, 0.22), rgba(0, 0, 0, 0.75));
  --sh-3: light-dark(rgba(17, 24, 39, 0.34), rgba(0, 0, 0, 0.9));
  --viz-grid: light-dark(#e6eaf1, #1f2a40);
  --lean-left: var(--blue);
  --lean-lean-left: light-dark(#92b1dd, #88aada);
  --lean-center: #9ca3af;
  --lean-lean-right: light-dark(#f4777c, #f36b71);
  --lean-right: var(--red);
  --lean-official: light-dark(#ca8a04, #facc15);
  --lean-international: light-dark(#0d9488, #2dd4bf);
  --lean-local: light-dark(#7c3aed, #a78bfa);
  --src-truth: light-dark(#6d4aff, #a78bfa);
  --src-x: light-dark(#0284c7, #38bdf8);
  --src-youtube: var(--red);
  --src-news: light-dark(#b7791f, #facc15);
  --src-event: light-dark(#0f766e, #2dd4bf);
  --src-statement: light-dark(#c026d3, #e879f9);
  --kind-promise: light-dark(#7c3aed, #a78bfa);
  --kind-attack: light-dark(#ea580c, #fb923c);

  --shadow: 0 1px 2px var(--sh-1), 0 10px 28px -16px var(--sh-2);
  --shadow-up: 0 2px 6px var(--sh-1), 0 22px 44px -20px var(--sh-3);
  /* The square look's two glows: all round a card, and down to the right of a tab or a small box. */
  --glow: 0 0 9px -2px var(--blue);
  --glow-tab: 2px 2px 6px -1px rgba(56, 113, 193, 0.65);

  --display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --body: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.3, 1.3, .5, 1);
  --gap: 18px;
  --radius: 0px;
  --bar-h: 64px;
  --width: 1180px;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* A browser without light-dark() reads the light colors (and the theme switch does nothing there). */
@supports not (color: light-dark(#000, #fff)) {
  :root {
    --bg: #eef1f6; --panel: #ffffff; --panel-2: #f3f5f9; --ink: #111827; --muted: #586274; --line: #d7dde8;
    --red-ink: #c9181f; --red-soft: #fde8e9; --blue-ink: #3871c1; --blue-soft: #e8eff8;
    --good: #127a55; --good-soft: #def3ea; --warn: #9a620a; --warn-soft: #fcefd6;
    --glass: rgba(255, 255, 255, 0.72); --glass-line: rgba(17, 24, 39, 0.08);
    --glow-1: rgba(237, 28, 36, 0.13); --glow-2: rgba(56, 113, 193, 0.15);
    --sh-1: rgba(17, 24, 39, 0.05); --sh-2: rgba(17, 24, 39, 0.22); --sh-3: rgba(17, 24, 39, 0.34);
    --viz-grid: #e6eaf1; --lean-lean-left: #92b1dd; --lean-lean-right: #f4777c; --lean-official: #ca8a04;
    --lean-international: #0d9488; --lean-local: #7c3aed; --src-truth: #6d4aff; --kind-promise: #7c3aed; --kind-attack: #ea580c;
    --src-x: #0284c7; --src-news: #b7791f; --src-event: #0f766e; --src-statement: #c026d3;
  }
  #theme { display: none; }
}

/* ---- Base ---- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; scroll-padding-top: calc(var(--bar-h) + 16px); }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; position: relative; overflow-x: clip;
  background: var(--bg); color: var(--ink);
  font: 16px/1.6 var(--body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
/* The soft red and blue light behind the top of every page, as in the app. */
body::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 620px; z-index: 0; pointer-events: none;
  background:
    radial-gradient(680px 340px at 6% -80px, var(--glow-1), transparent 70%),
    radial-gradient(820px 380px at 94% -100px, var(--glow-2), transparent 70%);
}
a { color: inherit; }
h1, h2, h3 { line-height: 1.15; margin: 0; }
p { margin: 0.4em 0; }
img { max-width: 100%; height: auto; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--blue) 30%, transparent); }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ic { display: block; flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ic .fill { fill: currentColor; fill-rule: evenodd; stroke: none; }

.skip {
  position: fixed; left: 12px; top: 10px; z-index: 50; padding: 10px 14px; background: var(--panel); border: 1px solid var(--blue);
  font-weight: 600; text-decoration: none; transform: translateY(-160%); transition: transform .2s var(--ease);
}
.skip:focus { transform: none; }

.wrap { position: relative; z-index: 1; width: 100%; max-width: var(--width); margin-inline: auto; padding-inline: clamp(16px, 3vw, 32px); }
main.wrap { flex: 1 0 auto; padding-bottom: 64px; }

/* ---- Buttons ---- */
.btn {
  appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
  font: 600 14px/1.1 var(--body); padding: 10px 17px; min-height: 40px; white-space: nowrap; text-decoration: none;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink); box-shadow: var(--glow-tab);
  transition: transform .15s var(--ease), border-color .2s, background .2s, box-shadow .2s, filter .2s;
}
.btn:hover { border-color: color-mix(in srgb, var(--ink) 30%, var(--line)); }
.btn:active { transform: scale(.96); }
.btn.primary, .btn.yt { background: var(--red); border-color: var(--red); color: var(--on-red); box-shadow: 0 10px 22px -12px var(--red); }
.btn.primary:hover, .btn.yt:hover { filter: brightness(1.07); }
.icon-btn {
  appearance: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; cursor: pointer;
  border: 1px solid transparent; background: transparent; color: var(--muted);
  transition: background .2s, color .2s, transform .15s var(--ease);
}
.icon-btn:hover { background: var(--panel-2); color: var(--ink); }
.icon-btn:active { transform: scale(.9); }

/* ---- Top bar: frosted glass, with the logo's red-to-blue line under it ---- */
.bar {
  position: sticky; top: 0; z-index: 20; background: var(--glass);
  -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px);
  border-bottom: 1px solid var(--glass-line);
}
.bar::after { content: ""; position: absolute; inset: auto 0 -1px; height: 2px; background: linear-gradient(90deg, var(--red), var(--blue)); opacity: .9; }
.bar-in { max-width: calc(var(--width) + 120px); margin-inline: auto; padding: 0 clamp(16px, 3vw, 32px); min-height: var(--bar-h); display: flex; align-items: center; gap: 10px 22px; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; flex: none; }
/* The logo sits on a white tile, as in the app's bar: its black stroke needs the white on a dark page. */
.mark { display: grid; place-items: center; width: 46px; height: 40px; padding: 3px 4px; flex: none; border-radius: 10px; background: #fff; box-shadow: var(--shadow); }
.mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* The whole name: the channel's wordmark (Tangential PoliTiKing, a picture per word, so a phone can stack them),
   then Live on a red tag. */
.brand-name { --wh: 19px; display: inline-flex; align-items: center; white-space: nowrap; }
.brand-name img { display: block; height: var(--wh); width: auto; filter: drop-shadow(0 1px 0 light-dark(rgba(255, 255, 255, .6), rgba(0, 0, 0, .6))); }
.brand-name .w2 { margin-left: calc(var(--wh) * .144); }
.brand-name b { margin-left: 9px; font: 850 14px/1 var(--display); font-stretch: 76%; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--red); padding: 4px 6px 3px; border-radius: 5px; }
.nav { display: flex; align-items: center; gap: 4px; min-width: 0; }
.nav a {
  position: relative; font: 600 14.5px/1 var(--body); padding: 11px 14px; text-decoration: none; color: var(--muted); white-space: nowrap;
  transition: color .2s, background .2s, box-shadow .2s;
}
.nav a:hover { color: var(--ink); }
.nav-sep { flex: none; width: 1px; height: 18px; margin: 0 6px; background: var(--line); }
.nav a.on { color: var(--ink); background: var(--panel); box-shadow: var(--glow-tab); }
.nav a.on::after { content: ""; position: absolute; inset: auto 10px 5px; height: 2px; background: var(--red); }
.bar-end { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
/* The theme switch shows where it would take you: the moon in light, the sun in dark. */
#theme .ic:first-child { display: none; }
:root[data-theme="dark"] #theme .ic:first-child { display: block; }
:root[data-theme="dark"] #theme .ic:last-child { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #theme .ic:first-child { display: block; }
  :root:not([data-theme="light"]) #theme .ic:last-child { display: none; }
}

/* ---- A day's head ---- */
.day-head { position: relative; padding: clamp(30px, 5.5vw, 64px) 0 26px; max-width: 900px; }
.eyebrow {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin: 0;
  font: 600 12px/1.35 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--red-ink);
}
.eyebrow time { color: var(--muted); }
.live-dot { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--muted); flex: none; }
.is-today .live-dot { background: var(--red); }
.is-today .live-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--red); animation: live 2.6s ease-out infinite; }
@keyframes live { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(2.8); opacity: 0; } }
.day-head h1 {
  font: 850 clamp(42px, 6.6vw, 80px)/0.94 var(--display); font-stretch: 72%; letter-spacing: -0.012em;
  margin: 12px 0 0; text-wrap: balance;
}
.lede { font-size: clamp(17px, 1.7vw, 20px); line-height: 1.5; color: var(--muted); max-width: 60ch; margin: 14px 0 0; text-wrap: pretty; }
.facts { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 20px 0 0; }
.facts li {
  display: inline-flex; align-items: baseline; gap: 7px; padding: 9px 13px; background: var(--panel); border: 1px solid var(--line);
  box-shadow: var(--glow-tab); font: 500 12.5px/1 var(--mono); color: var(--muted);
}
.facts b { font: 800 19px/1 var(--display); font-stretch: 80%; color: var(--ink); font-variant-numeric: tabular-nums; }
.updated { margin: 14px 0 0; font: 500 12px/1.3 var(--mono); color: var(--muted); }

/* ---- The coverage chart: Newsdesk's own card, the spectrum only ---- */
/* Its Open lanes side reads the competitor check, which never leaves Newsdesk; so the switch and that side stay out. */
.cov-card #cov-view, .cov-card [data-for="lanes"] { display: none !important; }
.cov-slot { margin: 6px 0 30px; }
/* Room kept for the chart while site.js draws it, so the stories below don't jump. */
.js .cov-slot.is-waiting { min-height: calc(250px + var(--rows, 5) * 82px); }
.wall-card { position: relative; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--glow); padding: 18px 20px; }
.w-title {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 0 10px;
  font: 600 11.5px/1.3 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
}
.cov-slot > noscript p { padding: 18px 20px; border: 1px dashed var(--line); margin: 0; }
.cov-failed { padding: 18px 20px; border: 1px dashed var(--line); color: var(--muted); }

/* ---- Story cards ---- */
.stories { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap); }
.story-card {
  display: grid; grid-template-columns: 66px minmax(0, 1fr); gap: 4px 20px;
  background: var(--panel); border: 1px solid var(--line); box-shadow: var(--glow); padding: 24px 26px;
  scroll-margin-top: calc(var(--bar-h) + 16px);
}
.rank {
  font: 900 66px/0.8 var(--display); font-stretch: 62%; color: transparent; -webkit-text-stroke: 1.6px var(--red);
  padding-top: 6px; text-align: center; user-select: none; -webkit-user-select: none;
}
.story-card.hero .rank { color: var(--red); -webkit-text-stroke: 0; font-size: clamp(84px, 7vw, 108px); }
.story-body { min-width: 0; }
.hook { font: 800 27px/1.06 var(--display); font-stretch: 80%; letter-spacing: -0.005em; margin: 6px 0 12px; text-wrap: balance; }
.story-card.hero .hook { font-size: clamp(31px, 3vw, 44px); }
.summary { font-size: 17px; line-height: 1.6; max-width: 68ch; margin: 0 0 10px; text-wrap: pretty; }
.kv { max-width: 68ch; margin: 0 0 12px; text-wrap: pretty; }
.kv strong { font-weight: 700; }
.ai-tag {
  display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 0; padding: 5px 9px 5px 7px; cursor: help;
  font: 600 10.5px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--blue-ink); background: var(--blue-soft);
}
.ai-tag .ic { width: 14px; height: 14px; }
.ai-tag.inline { padding: 2px 6px 2px 5px; vertical-align: 1px; cursor: default; }
.ai-tag.inline .ic { width: 12px; height: 12px; }
.meta-row {
  display: flex; gap: 10px 22px; align-items: center; flex-wrap: wrap; margin: 16px 0 4px; padding-top: 14px; border-top: 1px dashed var(--line);
  font: 500 12px/1.2 var(--mono); color: var(--muted);
}
.meta-row > span { display: inline-flex; align-items: center; gap: 8px; }
.heat { display: inline-flex; gap: 2px; align-items: flex-end; height: 14px; }
.heat i { width: 4px; background: var(--line); display: inline-block; height: 5px; }
.heat i:nth-child(2) { height: 6px; } .heat i:nth-child(3) { height: 7px; } .heat i:nth-child(4) { height: 8px; } .heat i:nth-child(5) { height: 9px; }
.heat i:nth-child(6) { height: 10px; } .heat i:nth-child(7) { height: 11px; } .heat i:nth-child(8) { height: 12px; } .heat i:nth-child(9) { height: 13px; } .heat i:nth-child(10) { height: 14px; }
.heat i.on { background: var(--red); }
.leanbar { display: inline-flex; height: 8px; width: 110px; overflow: hidden; background: var(--line); }
.leanbar span { display: block; height: 100%; }
.lean-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.lean-left { background: var(--lean-left); }
.lean-lean-left { background: var(--lean-lean-left); }
.lean-center { background: var(--lean-center); }
.lean-lean-right { background: var(--lean-lean-right); }
.lean-right { background: var(--lean-right); }
.lean-official { background: var(--lean-official); }
.lean-international { background: var(--lean-international); }
.lean-local { background: var(--lean-local); }

/* The coverage and the posts open under the story. */
.story-more { margin-top: 12px; border-top: 1px solid var(--line); }
.story-more > summary {
  display: flex; align-items: center; gap: 9px; padding: 12px 0 2px; cursor: pointer; list-style: none;
  font: 600 14.5px/1.3 var(--body); color: var(--muted); transition: color .2s;
}
.story-more > summary::-webkit-details-marker { display: none; }
.story-more > summary::before {
  content: ""; width: 7px; height: 7px; flex: none; border: solid currentColor; border-width: 0 2px 2px 0;
  transform: rotate(-45deg); transition: transform .25s var(--ease); margin: 0 3px 0 1px;
}
.story-more[open] > summary::before { transform: rotate(45deg); }
.story-more > summary:hover { color: var(--ink); }
.cov-group { margin-top: 14px; }
.cov-lean {
  display: flex; align-items: center; gap: 8px; margin: 0; padding-bottom: 6px; border-bottom: 2px solid var(--line);
  font: 600 11.5px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink);
}
.cov-lean small { font: inherit; color: var(--muted); letter-spacing: .04em; text-transform: none; }
.coverage { list-style: none; padding: 0; margin: 0; font-size: 14.5px; }
.coverage li { display: grid; grid-template-columns: minmax(130px, 200px) minmax(0, 1fr); gap: 2px 16px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--line); }
.coverage li:last-child { border-bottom: 0; }
.outlet { font-weight: 700; min-width: 0; }
.heds { display: grid; gap: 5px; min-width: 0; }
.hed a { text-decoration: none; text-wrap: pretty; }
.hed a:hover { color: var(--blue-ink); text-decoration: underline; text-underline-offset: 3px; }
.hed time { margin-left: 4px; font: 500 11.5px/1 var(--mono); color: var(--muted); white-space: nowrap; }
.post { margin: 12px 0 0; padding: 14px 16px 12px; background: var(--panel-2); border: 1px solid var(--line); border-left: 3px solid var(--src-truth); }
.post-text { margin: 0; white-space: pre-line; overflow-wrap: anywhere; font-size: 15.5px; line-height: 1.55; }
.post-text a { color: var(--blue-ink); }
.post-media-note { margin: 8px 0 0; font: 500 12px/1.3 var(--mono); color: var(--muted); }
.post-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 10px; font: 500 12px/1.3 var(--mono); color: var(--muted); }
.post-meta a { color: var(--blue-ink); text-decoration: none; }
.post-meta a:hover { text-decoration: underline; }
.post-meta a::after { content: " ↗"; }

/* ---- Older and newer, the days strip, how it's made ---- */
.steps { display: flex; justify-content: space-between; gap: 12px; margin: 30px 0 0; }
.steps a {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; min-height: 46px; text-decoration: none; font-weight: 600;
  background: var(--panel); border: 1px solid var(--line); box-shadow: var(--glow-tab); transition: transform .2s var(--ease), border-color .2s;
}
.steps a:hover { border-color: var(--blue); }
.steps a[rel="prev"]:hover { transform: translateX(-3px); }
.steps a[rel="next"]:hover { transform: translateX(3px); }
.section-title { font: 600 12px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.days { margin-top: 48px; }
.day-strip {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(196px, 232px); gap: 12px; overflow-x: auto;
  padding: 4px 4px 16px; margin-inline: -4px; scroll-snap-type: x proximity; overscroll-behavior-x: contain; scrollbar-width: thin;
}
.day {
  display: grid; gap: 6px; align-content: start; padding: 14px 16px 15px; scroll-snap-align: start; text-decoration: none;
  background: var(--panel); border: 1px solid var(--line); box-shadow: var(--glow-tab); transition: transform .2s var(--ease), border-color .2s;
}
.day:hover { transform: translateY(-2px); border-color: var(--blue); }
.day b { font: 800 17px/1.1 var(--display); font-stretch: 84%; }
.day small { color: var(--muted); font-size: 13px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.day.on { border-color: var(--red); box-shadow: inset 0 3px 0 var(--red), var(--glow-tab); }
.how { margin-top: 44px; padding: 22px 24px; border: 1px dashed var(--line); }
.how-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 4px 32px; color: var(--muted); font-size: 15px; }
.how-cols b { color: var(--ink); }

/* ---- Text pages: privacy, not found, the wait for the first brief ---- */
.text-page { max-width: 780px; padding: clamp(30px, 5.5vw, 64px) 0 0; }
.text-page h1 { font: 850 clamp(38px, 5.4vw, 60px)/0.98 var(--display); font-stretch: 74%; letter-spacing: -0.01em; margin: 12px 0 0; text-wrap: balance; }
.text-card { background: var(--panel); border: 1px solid var(--line); box-shadow: var(--glow); padding: 20px 24px; margin-top: 18px; }
.text-card h2 { font: 800 22px/1.15 var(--display); font-stretch: 84%; margin: 0 0 8px; }
.text-card p, .text-card li { max-width: 68ch; }
.text-card ul { margin: 0; padding-left: 20px; }
.text-card li { margin: 6px 0; }
.text-card li::marker { color: var(--red); }
.text-card a, .lede a { color: var(--blue-ink); }
.contact { margin: 22px 0 0; }
.lost .btn { margin-top: 16px; }

/* ---- The Midterms page ----
   Its record, map, legend and result rows are the app's (midterms.css, loaded before this file), so only the page
   around them is here. Panels are :where()d so midterms.css's own boxes (the election-night one) keep their look. */
:where(.panel) { background: var(--panel); border: 1px solid var(--line); box-shadow: var(--glow); padding: 20px 22px; margin: 0 0 var(--gap); }
:where(.panel) h2 { font: 800 21px/1.12 var(--display); font-stretch: 84%; margin: 0 0 6px; }
.mt-pagehead { padding-bottom: 22px; }
.mt-pagehead .ai-tag { margin-top: 14px; }
.mt-watch { box-shadow: var(--glow); }
.mt-watch a { color: var(--blue-ink); font-weight: 600; }
.mt-watch h2 { text-wrap: balance; }
.mt-top .panel { box-shadow: var(--glow); }
/* Room kept for the app's charts while site.js draws them, so the page doesn't jump. */
.js .mt-record-chart.is-waiting { min-height: 150px; }
.js .mt-map-slot.is-waiting { aspect-ratio: 12 / 8.2; }
.mt-record-chart { display: flex; flex-direction: column; gap: 14px; }
.mt-statelist { margin-top: 14px; }
.mt-statelist ul { list-style: none; margin: 10px 0 0; padding: 0; columns: 2 230px; column-gap: 24px; font-size: 14px; }
.mt-statelist li { break-inside: avoid; padding: 4px 0; border-bottom: 1px solid var(--line); }
.mt-statelist li span { color: var(--muted); }

/* Who holds Washington: one tile per seat of power, in its party's color. */
.mt-power { margin-top: var(--gap); }
.mt-seats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 10px; margin: 10px 0 12px; }
.mt-seat { display: grid; gap: 3px; padding: 12px 14px; background: var(--panel-2); border: 1px solid var(--line); border-top: 4px solid var(--muted); }
.mt-seat.p-R { border-top-color: var(--red); }
.mt-seat.p-D { border-top-color: var(--blue); }
.mt-seat small { font: 600 10.5px/1.2 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.mt-seat b { font: 800 21px/1.1 var(--display); font-stretch: 84%; }
.mt-seat.p-R b { color: var(--red-ink); }
.mt-seat.p-D b { color: var(--blue-ink); }
.mt-seat span { font-size: 13px; color: var(--muted); }
.mt-power .muted a { color: var(--blue-ink); }
.mt-result { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); }
.mt-result-text { font-size: 17px; line-height: 1.55; max-width: 68ch; margin: 6px 0; text-wrap: pretty; }
.mt-result a { color: var(--blue-ink); }
.mt-result-wait { margin: 10px 0 0; color: var(--muted); max-width: 68ch; }

/* Every race: the balance of power, the map of the states and every race, in the parties' colors. Without JavaScript
   the Senate, Governors and House show one under the other, each under its own heading. */
.races { --s-R: var(--red); --s-D: var(--blue); --s-O: light-dark(#7c3aed, #a78bfa); margin-top: var(--gap); }
.races-top { display: grid; gap: 6px; margin-bottom: 12px; }
.races-top h2 { display: flex; align-items: center; gap: 10px; margin: 0; }
.races-top p { margin: 0; max-width: 78ch; }
.races-top time { white-space: nowrap; }
.race-tabs { display: none; margin: 2px 0 14px; }
.js .race-tabs { display: inline-flex; }
.race-tabs .n { margin-left: 6px; font: 600 11px/1 var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.race-h { font: 800 18px/1.2 var(--display); font-stretch: 84%; margin: 0 0 8px; }
.race-pane + .race-pane { margin-top: 28px; padding-top: 18px; border-top: 1px dashed var(--line); }
.js .race-pane + .race-pane { margin-top: 0; padding-top: 0; border-top: 0; }
.js .race-pane[hidden] { display: none; }
.js .race-h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.bal { margin: 2px 0 8px; }
.bal-nums { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 12px; font-size: 13.5px; line-height: 1.15; color: var(--muted); }
.bal-nums .s-R, .bal-nums .s-D, .bal-nums .s-O, .bal-wait { display: flex; flex-direction: column; gap: 3px; }
.bal-nums b { font: 800 30px/1 var(--display); font-stretch: 84%; font-variant-numeric: tabular-nums; }
.bal-nums .s-R b { color: var(--red-ink); }
.bal-nums .s-D b { color: var(--blue-ink); }
.bal-nums .s-O b { color: var(--s-O); }
.bal-wait { align-items: center; }
.bal-wait b { font-size: 22px; color: var(--ink); }
.bal-right { display: flex; justify-content: flex-end; gap: 16px; }
.bal-right > span { align-items: flex-end; }
.bal-bar { position: relative; display: flex; height: 20px; margin: 8px 0 7px; background: var(--panel-2); border: 1px solid var(--line); }
.bal-bar i { display: block; height: 100%; transition: width .7s var(--ease); }
.bal-bar .s-R, .race-fill .s-R { background: var(--s-R); }
.bal-bar .s-D, .race-fill .s-D { background: var(--s-D); }
.bal-bar .s-O, .race-fill .s-O { background: var(--s-O); }
.bal-gap { background: repeating-linear-gradient(135deg, transparent 0 5px, color-mix(in srgb, var(--muted) 24%, transparent) 5px 7px); }
.bal-line { position: absolute; top: -6px; bottom: -6px; width: 2px; margin-left: -1px; background: var(--ink); }
.bal-note { margin: 0; font: 500 12.5px/1.5 var(--mono); color: var(--muted); }
.race-going { margin: 2px 0 12px; }

.race-body { display: grid; gap: 8px 28px; align-items: start; }
.race-body.has-latest { grid-template-columns: minmax(0, 720px) minmax(220px, 1fr); }
.race-map { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; max-width: 720px; margin: 10px 0; }
.race-latest { margin-top: 10px; }
.race-latest ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.race-latest a { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 2px 8px; padding: 7px 10px 7px 12px; border: 1px solid var(--line); border-left: 4px solid var(--muted); background: var(--panel-2); color: var(--ink); text-decoration: none; }
.race-latest a:hover { border-color: var(--blue-ink); }
.race-latest .s-R a { border-left-color: var(--s-R); }
.race-latest .s-D a { border-left-color: var(--s-D); }
.race-latest .s-O a { border-left-color: var(--s-O); }
.race-latest b { font: 800 15px/1.2 var(--display); font-stretch: 84%; }
.race-latest span { font-size: 14px; }
.race-latest small { grid-column: 1 / -1; font: 500 11.5px/1.3 var(--mono); color: var(--muted); }
.race-st {
  position: relative; aspect-ratio: 1; min-width: 0; display: grid; align-content: center; justify-items: center; gap: 2px;
  padding: 3px 2px 6px; overflow: hidden; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); text-decoration: none;
  transition: transform .25s var(--spring), box-shadow .25s;
}
.race-st b { font: 700 clamp(9px, 1vw, 12px)/1 var(--mono); letter-spacing: .02em; }
.race-st small { font: 700 clamp(7px, .75vw, 9.5px)/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); font-variant-numeric: tabular-nums; }
.race-st.none { opacity: .35; border-style: dashed; background: transparent; }
.race-st.wait.h-R { background: color-mix(in srgb, var(--s-R) 11%, var(--panel-2)); border-color: color-mix(in srgb, var(--s-R) 42%, var(--line)); }
.race-st.wait.h-D { background: color-mix(in srgb, var(--s-D) 11%, var(--panel-2)); border-color: color-mix(in srgb, var(--s-D) 42%, var(--line)); }
.race-st.wait.h-O { background: color-mix(in srgb, var(--s-O) 11%, var(--panel-2)); border-color: color-mix(in srgb, var(--s-O) 42%, var(--line)); }
.race-st.won { color: #fff; border-color: transparent; }
.race-st.won small { color: rgba(255, 255, 255, .88); }
.race-st.won.s-R { background: var(--s-R); }
.race-st.won.s-D { background: var(--s-D); }
.race-st.won.s-O { background: var(--s-O); }
/* A seat that changed party gets stripes over its new color. */
.race-st.flip::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(255, 255, 255, .3) 6px 9px); pointer-events: none; }
.race-st.picked::before { content: "★"; position: absolute; top: 2px; right: 3px; font-size: clamp(7px, .8vw, 10px); line-height: 1; color: var(--warn); }
.race-st.won.picked::before { color: #fff; }
a.race-st:hover { transform: translateY(-2px) scale(1.08); z-index: 2; box-shadow: var(--shadow-up); }
.race-fill { position: absolute; left: 3px; right: 3px; bottom: 3px; height: 3px; display: flex; gap: 1px; }
.race-fill i { display: block; min-width: 1px; }

.race-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 4px 0 10px; padding: 0; font: 600 11.5px/1.2 var(--mono); color: var(--muted); }
.race-legend li { display: inline-flex; align-items: center; gap: 6px; }
.race-legend i { width: 12px; height: 12px; display: inline-grid; place-items: center; border: 1px solid transparent; font: 700 11px/1 var(--mono); font-style: normal; }
.race-legend i.s-R { background: var(--s-R); }
.race-legend i.s-D { background: var(--s-D); }
.race-legend i.s-O { background: var(--s-O); }
.race-legend i.wait { background: linear-gradient(135deg, color-mix(in srgb, var(--s-R) 26%, var(--panel-2)) 50%, color-mix(in srgb, var(--s-D) 26%, var(--panel-2)) 50%); border-color: color-mix(in srgb, var(--muted) 45%, transparent); }
.race-legend i.none { border: 1px dashed var(--muted); opacity: .6; }
.race-legend i.flip { background: repeating-linear-gradient(135deg, var(--muted) 0 3px, transparent 3px 5px); border-color: var(--muted); }
.race-legend i.pick { color: var(--warn); }

.race-all { margin-top: 6px; }
.race-all > summary { cursor: pointer; padding: 8px 0; font: 600 14.5px/1.3 var(--body); color: var(--blue-ink); }
.race-list { list-style: none; margin: 6px 0 4px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 10px; }
.race { display: grid; align-content: start; gap: 7px; padding: 12px 14px; background: var(--panel-2); border: 1px solid var(--line); border-left: 4px solid var(--line); scroll-margin-top: calc(var(--bar-h) + 16px); }
.race.won.s-R { border-left-color: var(--s-R); }
.race.won.s-D { border-left-color: var(--s-D); }
.race.won.s-O { border-left-color: var(--s-O); }
.race.wait.h-R { border-left-color: color-mix(in srgb, var(--s-R) 40%, var(--line)); }
.race.wait.h-D { border-left-color: color-mix(in srgb, var(--s-D) 40%, var(--line)); }
.race:target, .race.is-linked { outline: 2px solid var(--blue); outline-offset: 2px; }
.race-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.race-state { font: 800 17px/1.15 var(--display); font-stretch: 84%; }
.race-tag { padding: 2px 6px; font: 600 10px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); }
.race-call { margin-left: auto; font: 700 10.5px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.race.won .race-call { color: var(--ink); }
.race.flip .race-call { color: var(--warn); }
.race-cands { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.race-cands li { display: grid; grid-template-columns: 8px minmax(0, 1fr); column-gap: 8px; align-items: baseline; font-size: 14.5px; line-height: 1.3; }
.race-cands small { grid-column: 2; font-size: 12.5px; color: var(--muted); }
.race-dot { width: 8px; height: 8px; background: var(--muted); }
.race-cands .s-R .race-dot { background: var(--s-R); }
.race-cands .s-D .race-dot { background: var(--s-D); }
.race-cands .s-O .race-dot { background: var(--s-O); }
.race-cands li.won .race-who { font-weight: 700; }
.race-check, .race-pick { display: inline-block; padding: 2px 5px; font: 700 10px/1.1 var(--mono); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; vertical-align: 1px; }
.race-check { color: var(--good); background: var(--good-soft); }
.race-pick { color: var(--warn); background: var(--warn-soft); text-decoration: none; }
.race-pick:hover { text-decoration: underline; }
.race-rest > summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.race-rest .race-cands { margin-top: 5px; }
.race-now { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.race-now a, .race-src a { color: var(--blue-ink); }
.race-src { margin: 10px 0 0; }
.race-gains { list-style: none; margin: 6px 0 0; padding: 0; columns: 2 240px; column-gap: 24px; font-size: 14px; }
.race-gains li { break-inside: avoid; padding: 5px 0 5px 10px; border-left: 3px solid var(--line); margin-bottom: 4px; }
.race-gains li.s-R { border-left-color: var(--s-R); }
.race-gains li.s-D { border-left-color: var(--s-D); }
.race-gains li.s-O { border-left-color: var(--s-O); }
.race-gains small { color: var(--muted); }

/* The switches over the picks: square, like the rest of the site. Without JavaScript every pick shows and they stay hidden. */
.seg { position: relative; display: inline-flex; gap: 2px; padding: 4px; max-width: 100%; overflow-x: auto; scrollbar-width: none; background: var(--panel-2); border: 1px solid var(--line); }
.seg::-webkit-scrollbar { display: none; }
.seg > button {
  appearance: none; padding: 8px 13px; border: 0; background: none; cursor: pointer; white-space: nowrap;
  font: 600 13.5px/1.1 var(--body); color: var(--muted); transition: color .2s, background .2s, box-shadow .2s;
}
.seg > button:hover { color: var(--ink); }
.seg > button.on { color: var(--ink); background: var(--panel); box-shadow: var(--glow-tab); }
.mt-tools { display: none; }
.js .mt-tools { display: flex; }
.mt-tools { scroll-margin-top: calc(var(--bar-h) + 12px); }
input[type="search"], select {
  font: inherit; font-size: 15px; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 0;
  padding: 9px 12px; min-height: 40px; transition: border-color .2s, box-shadow .2s;
}
input[type="search"]:focus, select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 18%, transparent); }
select {
  appearance: none; -webkit-appearance: none; padding-right: 32px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a94a6' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
}
.mt-search { flex: 1 1 220px; max-width: 340px; }
.mt-search input { width: 100%; }
.mt-statechip { min-height: 32px; }

/* Each pick: what race, how it went, where the result came from, and his own words at the foot. */
.mt-picks { margin-top: 36px; }
.mt-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: var(--gap); align-items: stretch; }
.mt-pick[hidden] { display: none; }
.mt-pick { --st: var(--s-waiting); scroll-margin-top: calc(var(--bar-h) + 20px); }
.mt-pick.st-won { --st: var(--s-won); }
.mt-pick.st-lost { --st: var(--s-lost); }
.mt-pick.st-ahead { --st: var(--s-ahead); }
.mt-pick.st-out { --st: var(--s-out); }
.mt-pick-card {
  height: 100%; display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 14px;
  background: var(--panel); border: 1px solid var(--line); border-top: 4px solid var(--st); box-shadow: var(--glow);
}
.mt-pick.is-linked .mt-pick-card { outline: 2px solid var(--blue); outline-offset: 3px; }
.mt-chip {
  padding: 4px 8px 4px 7px; border-left: 3px solid var(--st); background: color-mix(in srgb, var(--st) 16%, transparent);
  font: 700 10.5px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--ink); cursor: help;
}
.mt-pick-card .mt-name { font-size: 22px; }
.mt-pick-card .mt-stages { margin-top: 2px; }
.mt-pick-card .mt-src a { color: var(--blue-ink); }
.mt-said { margin: auto 0 0; padding: 10px 0 0 12px; border-left: 3px solid var(--src-truth); }
.mt-said p { margin: 0; font: italic 500 15px/1.5 var(--body); overflow-wrap: anywhere; text-wrap: pretty; }
.mt-said p.muted { font-style: normal; font-size: 13.5px; }
.mt-said footer { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; font: 500 12px/1.45 var(--mono); color: var(--muted); }
.mt-said a { color: var(--blue-ink); text-decoration: none; }
.mt-said a:hover { text-decoration: underline; }
.mt-said footer > a::after { content: " ↗"; }
.mt-again { flex-basis: 100%; }
.mt-none { margin: 0; padding: 18px; border: 1px dashed var(--line); text-align: center; }
.mt-none .btn { margin-left: 8px; }
.mt-more-row { margin: 22px 0 0; text-align: center; }
.mt-more-row:has(#mt-more[hidden]) { display: none; }

/* His posts about the vote on election week. */
.mt-week { margin-top: 36px; }
.mt-week > .muted { margin: 0 0 6px; max-width: 70ch; }
.mt-feed { display: grid; max-width: 780px; }
.mt-rigged { margin: 0 0 8px; font: 700 11px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--red-ink); }
.mt-rigged b { padding: 1px 4px; background: var(--red-soft); }

/* Every year with picks. */
.mt-years-list { margin-top: 40px; }
.mt-table-wrap { overflow-x: auto; }
.mt-table { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--glow-tab); font-variant-numeric: tabular-nums; }
.mt-table th, .mt-table td { padding: 10px 14px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.mt-table th:first-child { text-align: left; }
.mt-table thead th { font: 600 11px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.mt-table tbody th { font-weight: 700; }
.mt-table tbody tr:last-child > * { border-bottom: 0; }
.mt-table a { color: var(--blue-ink); }
.mt-table tr.on { background: var(--panel-2); box-shadow: inset 3px 0 0 var(--red); }
.mt-table .g { color: var(--good); }
.mt-table .r { color: var(--red-ink); }
.mt-table small { font-size: 11px; color: var(--muted); }

/* ---- Behind the video: a video's page, and the Videos page ---- */
.vid-head { position: relative; padding: clamp(30px, 5.5vw, 60px) 0 20px; max-width: 920px; }
.vid-head .eyebrow a { color: inherit; text-decoration: none; }
.vid-head .eyebrow a:hover { text-decoration: underline; text-underline-offset: 3px; }
.vid-head h1 { font: 850 clamp(34px, 5.2vw, 64px)/0.98 var(--display); font-stretch: 74%; letter-spacing: -0.01em; margin: 12px 0 0; text-wrap: balance; }
.vid-head .ai-tag { margin-top: 14px; }
.vid-part { margin-top: 36px; }
.vid-part > .muted { margin: -6px 0 0; }
.vid-watch { margin: 4px 0 0; }

/* The player: the show's own poster until you press play, so nothing comes from YouTube before. */
.player { max-width: 960px; margin-top: 6px; }
.player-screen { position: relative; aspect-ratio: 16 / 9; background: #0a0f1b; border: 1px solid var(--line); box-shadow: var(--glow); overflow: hidden; }
.player-screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player-poster {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 14px;
  padding: clamp(16px, 4vw, 40px); color: #fff; text-decoration: none;
  background:
    radial-gradient(60% 85% at 0% 0%, rgba(237, 28, 36, .5), transparent 70%),
    radial-gradient(70% 95% at 100% 100%, rgba(56, 113, 193, .62), transparent 70%),
    linear-gradient(135deg, #111a2b, #0a0f1b);
}
/* A TV's lines over it. */
.player-poster::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 4px); }
.player-brand { margin-bottom: auto; font: 600 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .82); }
.player-title { font: 850 clamp(20px, 3.6vw, 44px)/1.02 var(--display); font-stretch: 76%; max-width: 24ch; text-wrap: balance; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.player-btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px 14px 18px; background: var(--red); color: #fff;
  font: 700 17px/1 var(--body); box-shadow: 0 14px 34px -12px rgba(237, 28, 36, .9); transition: transform .2s var(--spring), filter .2s;
}
.player-btn .ic { width: 24px; height: 24px; }
.player-poster:hover .player-btn { transform: scale(1.05); filter: brightness(1.08); }
.player-poster:active .player-btn { transform: scale(.97); }
.player-note { margin: 10px 0 0; font: 500 12px/1.5 var(--mono); color: var(--muted); }
.player-note a { color: var(--blue-ink); }

.chapters { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 8px; }
.chapters a, .chapters .ch-row {
  display: flex; align-items: baseline; gap: 12px; height: 100%; padding: 10px 14px; text-decoration: none;
  background: var(--panel); border: 1px solid var(--line); box-shadow: var(--glow-tab); transition: border-color .2s, transform .2s var(--ease);
}
.chapters a:hover { border-color: var(--blue); transform: translateY(-1px); }
.ch-time { min-width: 3.6em; font: 600 13px/1.3 var(--mono); color: var(--red-ink); font-variant-numeric: tabular-nums; }

/* The receipts: one card for each the video shows, its kind in the color along the top. */
.receipts { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: var(--gap); }
.rc { --k: var(--blue); display: flex; flex-direction: column; gap: 9px; padding: 16px 18px 14px; background: var(--panel); border: 1px solid var(--line); border-top: 4px solid var(--k); box-shadow: var(--glow); }
.rc.k-post { --k: var(--src-truth); }
.rc.k-tweet { --k: var(--lean-lean-left); }
.rc.k-x { --k: var(--muted); }
.rc.k-number { --k: var(--red); }
.rc.k-quote { --k: var(--lean-official); }
.rc.k-title { --k: var(--ink); }
.rc-top { display: flex; flex-wrap: wrap; gap: 3px 10px; margin: 0; font: 600 11px/1.35 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.rc-kind { color: var(--k); }
.rc.k-title .rc-kind, .rc.k-x .rc-kind { color: var(--muted); }
.rc-from { color: var(--ink); }
.rc-hed { font: 800 22px/1.14 var(--display); font-stretch: 84%; text-wrap: pretty; }
.rc-head { font: 800 18px/1.2 var(--display); font-stretch: 84%; }
.rc-name { font: 850 30px/1 var(--display); font-stretch: 74%; text-wrap: balance; }
.rc-said, .rc-q { margin: 0; }
.rc-said p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; font-size: 15.5px; line-height: 1.55; }
.rc-q p { margin: 0; font: italic 500 17px/1.5 var(--body); overflow-wrap: anywhere; text-wrap: pretty; }
.rc-who { margin: 0; font-weight: 600; font-size: 14px; }
.rc-nums { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rc-nums li { font: 800 24px/1.12 var(--display); font-stretch: 80%; font-variant-numeric: tabular-nums; }
.rc-detail { margin: 0; color: var(--muted); font-size: 14px; }
.rc-note { margin: 0; font: 500 11.5px/1.45 var(--mono); color: var(--muted); }
.rc-x { margin: 0; color: var(--muted); font-size: 14.5px; }
.rc mark { background: color-mix(in srgb, #facc15 52%, transparent); color: inherit; padding: 0 .1em; }
.rc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--line); }
.rc-link { font: 500 12px/1.3 var(--mono); color: var(--blue-ink); text-decoration: none; overflow-wrap: anywhere; }
.rc-link:hover { text-decoration: underline; }
.rc-link::after { content: " ↗"; }
/* The stamp that lands at the end of the card in the video. */
.rc-stamp { margin-left: auto; padding: 3px 7px; border: 2px solid var(--red-ink); color: var(--red-ink); font: 850 13px/1 var(--display); font-stretch: 80%; letter-spacing: .08em; text-transform: uppercase; transform: rotate(-6deg); white-space: nowrap; }

.vid-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 0 36px; }
.vid-sources, .vid-clips { list-style: none; margin: 0; padding: 0; }
.vid-sources li, .vid-clips li { display: grid; gap: 3px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.vid-sources li:last-child, .vid-clips li:last-child { border-bottom: 0; }
.vid-sources a, .vid-clips a { text-decoration: none; text-wrap: pretty; overflow-wrap: anywhere; }
.vid-clips a { display: grid; gap: 1px; }
.vid-clips a span { color: var(--muted); font-size: 14.5px; }
.vid-sources a:hover, .vid-clips a:hover b { color: var(--blue-ink); text-decoration: underline; text-underline-offset: 3px; }
.vid-sources small, .vid-clips small { font: 500 11.5px/1.3 var(--mono); color: var(--muted); }

.vid-day {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3px 14px; max-width: 660px; margin-top: 36px;
  padding: 16px 20px; text-decoration: none; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--red);
  box-shadow: var(--glow-tab); transition: border-color .2s, transform .2s var(--ease);
}
.vid-day > :not(.ic) { grid-column: 1; }
.vid-day > .ic { grid-column: 2; grid-row: 1 / span 3; color: var(--muted); transition: transform .2s var(--ease); }
.vid-day b { font: 800 21px/1.15 var(--display); font-stretch: 84%; }
.vid-day > span:last-of-type { color: var(--muted); font-size: 14.5px; }
.vid-day:hover { border-color: var(--blue); }
.vid-day:hover > .ic { transform: translateX(3px); }

.vid-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: var(--gap); }
.vid-card {
  height: 100%; display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 16px; text-decoration: none;
  background: var(--panel); border: 1px solid var(--line); border-top: 4px solid var(--red); box-shadow: var(--glow);
  transition: transform .2s var(--ease), box-shadow .2s;
}
.vid-card:hover { transform: translateY(-3px); box-shadow: var(--glow), var(--shadow-up); }
.vid-when { font: 600 11.5px/1.3 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--red-ink); }
.vid-title { font: 800 25px/1.08 var(--display); font-stretch: 80%; text-wrap: balance; }
.vid-hook { color: var(--muted); font-size: 15px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.vid-counts { font: 500 12px/1.3 var(--mono); color: var(--muted); }
.vid-card .ai-tag { align-self: flex-start; }
.vid-go { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 14px; color: var(--blue-ink); }
.vid-go .ic { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.vid-card:hover .vid-go .ic { transform: translateX(3px); }
.vid-none { max-width: 660px; margin: 0; padding: 22px; border: 1px dashed var(--line); color: var(--muted); }
.vid-none a { color: var(--blue-ink); }

/* ---- The Receipts page ----
   Its charts are the app's (charts.css, loaded before this file): the rage meter from Today's brief (rage.css, and the
   card's turn in credits.css), the Topic river and the Posting clock from Truth Social › Patterns, and the "rigged"
   tracker from History › Elections. Each card shows its numbers in words until site.js draws its chart there, and goes
   back to them if it can't. The few app styles the charts lean on (the spinner, a card wall, a note at the foot of the
   screen) are below, in the site's square look. */
/* The rage meter stands beside the page's title, and under it on narrower screens. */
.rp-head.has-rage {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 460px); gap: 28px clamp(28px, 4.5vw, 64px);
  align-items: center; padding: clamp(30px, 5.5vw, 64px) 0 34px;
}
.rp-head.has-rage > .day-head { padding: 0; }
.rp-rage { position: relative; min-width: 0; }
.js .rp-rage .rp-wait { min-height: 600px; }
.rp-rage .rp-static p { font-size: 15px; }
.rp-rage .rp-static b { font: 800 20px/1 var(--display); font-stretch: 85%; color: var(--ink); font-variant-numeric: tabular-nums; }
/* The card is never wider than a phone here, so its back keeps to his two hottest posts as the app's does on a phone,
   and stays about as tall as the front. With no Video button, the time it was checked sits on its own at the right. */
.rp-rage .rg-posts > li:nth-child(n + 3) { display: none; }
.rp-rage .rg-actions { justify-content: flex-end; min-height: 0; }
.rp-page { display: grid; gap: var(--gap); }
.rp-page > .panel { margin: 0; min-width: 0; }
.rp-wait { display: none; }
.js .rp-wait { display: grid; min-height: 360px; }
.js .rp-static, .js .rp-failed .rp-wait { display: none; }
.js .rp-failed .rp-static { display: block; }
.rp-topics { list-style: none; margin: 14px 0 8px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 0 24px; }
.rp-topics li { display: flex; align-items: center; gap: 9px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.rp-topics i { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--c); }
.rp-topics span { flex: 1; min-width: 0; }
.rp-topics b { font: 500 12px/1 var(--mono); color: var(--muted); white-space: nowrap; }
.rp-ai { justify-self: start; margin: calc(var(--gap) / -2) 0 0; }
.rp-caveat { margin: 12px 0 0; }
.rp-tap { display: none; }
.js .rp-tap { display: inline; }
.rp-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.rp-rigged .el-h { font-size: clamp(24px, 2.6vw, 30px); text-wrap: balance; }
.rp-rigged .eyebrow { margin-bottom: 8px; }

/* Said it before: History's timeline (the app's own, styled as in its styles.css), then the chains in words. */
.rp-said .el-h { font-size: clamp(24px, 2.6vw, 30px); text-wrap: balance; }
.rp-said .eyebrow { margin-bottom: 8px; }
.sb-chart { min-width: 0; container-type: inline-size; }
/* On a narrow chart the app's timeline leaves 78px for its lane names: a size smaller, so "Truth Social" fits. */
@container (max-width: 639px) { .sb-chart .tl-lane-label { font-size: 10px; } }
.js .sb-chart .rp-wait { min-height: 300px; }
.tl-wrap { position: relative; overflow-x: auto; margin-top: 10px; }
.tl-svg { display: block; font-family: var(--body); }
.tl-lane { fill: var(--panel-2); }
.tl-lane-label { fill: var(--muted); font-size: 12px; font-weight: 700; }
.tl-grid { stroke: var(--viz-grid); stroke-width: 1; }
.tl-tick { fill: var(--muted); font-size: 11px; font-family: var(--mono); }
.tl-dot { stroke: var(--panel); stroke-width: 1.5; cursor: pointer; transition: r .2s var(--spring), opacity .3s; }
.tl-dot:hover { stroke: var(--ink); stroke-width: 2; r: 8.5; }
.tl-arc { fill: none; stroke-width: 2; opacity: .85; transition: opacity .3s; }
.legend { display: flex; gap: 8px 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); margin: 10px 0 4px; }
.legend span { display: inline-flex; gap: 6px; align-items: center; }
.legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.legend b { width: 18px; height: 3px; border-radius: 2px; display: inline-block; }
/* The dots are in their source's color here, not Claude's labels: the key's "Not labeled yet" has nothing to say. */
.sb-chart .legend span:has(> .kind-fill-none) { display: none; }
.src-badge, .link-badge {
  font: 700 10.5px/1.5 var(--mono); padding: 1px 8px; border-radius: 6px; white-space: nowrap; display: inline-block; letter-spacing: .02em;
}
.src-badge { color: var(--c, var(--muted)); background: color-mix(in srgb, var(--c, var(--muted)) 14%, transparent); }
.src-badge.src-truth { --c: var(--src-truth); }
.src-badge.src-x, .src-badge.src-x-found { --c: var(--src-x); }
.src-badge.src-youtube { --c: var(--src-youtube); }
.src-badge.src-news { --c: var(--src-news); }
.src-badge.src-event { --c: var(--src-event); }
.src-badge.src-statement { --c: var(--src-statement); }
.link-badge { color: #fff; background: light-dark(var(--lc, #8b8f98), color-mix(in srgb, var(--lc, #8b8f98) 70%, white)); }
.sb-list-head { margin: 26px 0 12px; font: 600 12px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sb-chains { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.js .sb-chains:not(.sb-all) > .sb-chain:nth-child(n + 6) { display: none; }
.sb-chain { border: 1px solid var(--line); background: var(--panel); padding: 14px 18px 16px; scroll-margin-top: calc(var(--bar-h) + 20px); }
.sb-chain-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.sb-types { display: flex; flex-wrap: wrap; gap: 6px; }
.sb-span { margin: 0; flex: 1 1 auto; font: 500 12.5px/1.3 var(--mono); color: var(--muted); }
.sb-zoom {
  font: 600 12.5px/1 var(--body); color: var(--blue-ink); background: var(--blue-soft); border: 1px solid transparent;
  padding: 7px 11px; cursor: pointer; transition: border-color .2s, transform .15s var(--ease);
}
.sb-zoom:hover { border-color: var(--blue); }
.sb-zoom:active { transform: translateY(1px); }
.sb-steps { list-style: none; margin: 0; padding: 0; }
/* A rail down the left joins a chain's receipts, oldest first; each link sits on it, above the receipt it reaches back from. */
.sb-step { position: relative; padding: 12px 0 4px 24px; scroll-margin-top: calc(var(--bar-h) + 40px); }
.sb-step::before { content: ""; position: absolute; left: 5px; top: 0; bottom: 0; width: 2px; background: var(--line); }
.sb-step:first-child::before { top: 20px; }
.sb-step:last-child::before { bottom: auto; height: 20px; }
.sb-step::after { content: ""; position: absolute; left: 0; top: 15px; width: 12px; height: 12px; border-radius: 50%; background: var(--panel); border: 3px solid var(--blue); }
.sb-step.sb-hit { animation: sb-hit 1.6s var(--ease); }
@keyframes sb-hit { 0%, 30% { background: color-mix(in srgb, var(--blue) 12%, transparent); } }
.sb-link { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: -2px 0 8px; }
.sb-to { font: 500 12px/1.3 var(--mono); color: var(--muted); }
.sb-to::before { content: "← "; }
.sb-note { margin: -2px 0 10px; font-size: 14px; color: var(--muted); max-width: 80ch; }
.sb-when { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font: 500 12.5px/1.3 var(--mono); color: var(--muted); }
.sb-said { margin: 8px 0 6px; padding: 10px 14px; background: var(--panel-2); border-left: 3px solid var(--src-truth); }
.sb-step:has(.src-x) .sb-said { border-left-color: var(--src-x); }
.sb-step:has(.src-statement) .sb-said { border-left-color: var(--src-statement); }
.sb-step:has(.src-event) .sb-said { border-left-color: var(--src-event); }
.sb-said p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; font-size: 15.5px; line-height: 1.55; }
.sb-headline { margin: 8px 0 6px; font: 700 17px/1.3 var(--body); text-wrap: pretty; }
.sb-away { margin: 8px 0 6px; color: var(--muted); font-style: italic; }
.sb-open { font: 600 13px/1.3 var(--body); color: var(--blue-ink); text-decoration: none; }
.sb-open:hover { text-decoration: underline; }
.sb-more { margin-top: 14px; }
.sb-more[hidden] { display: none; }
/* His posts only, and no server to ask: the river's Whose posts switch and the clock's Check now stay out. */
.river-who, .clock-check { display: none !important; }
/* The posts' own links carry their arrow ("On Truth Social ↗"). */
.river-posts .post-meta a::after { content: none; }
.panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 8px; }
.panel-head h2 { margin-bottom: 0; }
.clock-card .eyebrow { display: block; color: var(--muted); }
.mono { font-family: var(--mono); }
.btn.small { padding: 7px 12px; min-height: 32px; font-size: 13px; }
.rp-page mark { background: color-mix(in srgb, var(--red) 24%, transparent); color: inherit; padding: 0 2px; }
.spinner {
  width: 12px; height: 12px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  display: inline-block; animation: spin .8s linear infinite; vertical-align: -1px; margin-right: 8px;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes rise { from { opacity: 0; translate: 0 14px; scale: .985; } }
.error-box { background: var(--red-soft); border: 1px solid color-mix(in srgb, var(--red) 55%, transparent); padding: 12px 16px; margin: 14px 0; }
.wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); align-items: start; margin-inline: calc(var(--gap) / -2); }
.wall > .wall-sizer { display: none; }
.wall > .tile { padding: calc(var(--gap) / 2); }
.wall > .tile > * { margin: 0 !important; }
.toast {
  position: fixed; left: 50%; translate: -50% 0; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 80; max-width: calc(100% - 32px);
  background: var(--ink); color: var(--bg); padding: 10px 18px; font-weight: 600; font-size: 14px; text-align: center; box-shadow: var(--shadow-up);
}
.toast[hidden] { display: none; }

/* ---- The Déjà vu page ----
   Its charts are the app's Signals view (dejavu-signals.css, loaded before this file), drawn by site.js from the files
   beside the page. The page's own head says what the charts are and when they were counted, so the view's intro keeps
   only its episode key and its last line stays out. The few app styles it leans on (the chips, the search box, a round
   button) and the episode's sheet (Déjà vu's event file, from dejavu.css) are below, in the site's look. */
:root { --dv-glow: var(--glow); --tabbar-h: 0px; }
/* A chart's color, a little lighter on the dark theme so it reads on the dark cards. */
[style*="--c"] { --c-ink: light-dark(var(--c), color-mix(in oklab, var(--c) 62%, white)); }
@supports not (color: light-dark(#000, #fff)) { [style*="--c"] { --c-ink: var(--c); } }
.dv-page { min-width: 0; }
/* Under 1240px the top bar has the sections' row under the logo (56px and 38px, and its line), so the charts' toolbar
   sticks under both. */
@media (max-width: 1239px) {
  .dv-page { --bar-h: calc(95px + env(safe-area-inset-top, 0px)); }
}
.dv-page .sv-hero-text, .dv-page .sv-status { display: none; }
.dv-page .sv-hero { grid-template-columns: minmax(0, 1fr); padding: 14px 16px; }
.dv-page .sv-legend { justify-content: flex-start; align-items: center; }
.dv-page .sv-legend::before { content: "Episodes"; content: "Episodes" / ""; margin-right: 6px; font: 600 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.js .dv-page .rp-wait { min-height: 420px; place-items: center; }
.dv-static h3 { margin: 20px 0 4px; font: 800 17px/1.2 var(--display); font-stretch: 88%; }
.dv-static p { max-width: 92ch; font-size: 14.5px; }
.dv-list { margin: 0 0 22px; padding-left: 20px; display: grid; gap: 6px; max-width: 92ch; }
.rchips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.rchip {
  appearance: none; display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; min-height: 32px; white-space: nowrap; cursor: pointer;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: 600 12.5px/1.2 var(--body);
  transition: border-color .2s, background .2s, opacity .2s, transform .15s var(--ease);
}
.rchip:hover:not(:disabled) { border-color: var(--c, var(--ink)); }
.rchip:active:not(:disabled) { transform: scale(.95); }
.rchip > i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; }
.rchip .n { font: 600 11px/1 var(--mono); color: var(--muted); }
.rchip[aria-pressed="true"] { background: color-mix(in srgb, var(--c, var(--ink)) 14%, var(--panel)); border-color: var(--c, var(--ink)); }
.iconbtn {
  appearance: none; width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 999px; cursor: pointer;
  border: 1px solid transparent; background: transparent; color: var(--muted); transition: background .2s, color .2s, transform .15s var(--ease);
}
.iconbtn:hover { background: var(--panel-2); color: var(--ink); }
.iconbtn:active { transform: scale(.9); }
.dj-search {
  flex: 1 1 300px; display: flex; align-items: center; gap: 9px; height: 44px; padding: 0 14px; margin: 0; cursor: text; color: var(--muted);
  background: var(--panel); border: 1px solid var(--line); box-shadow: var(--glow); transition: border-color .2s, box-shadow .2s;
}
.dj-search:focus-within { border-color: var(--blue); box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 18%, transparent); }
.dj-search-ic { display: grid; place-items: center; transition: transform .45s var(--spring), color .2s; }
.dj-search:focus-within .dj-search-ic { color: var(--blue); transform: rotate(-12deg) scale(1.12); }
.dj-search input { flex: 1; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: 15px/1.2 var(--body); }

/* An episode's file: a sheet that slides in from the side. */
.dj-scrim { position: fixed; inset: 0; z-index: 59; background: rgba(4, 8, 16, .32); opacity: 0; pointer-events: none; transition: opacity .35s; }
.dj-scrim.open { opacity: 1; pointer-events: auto; }
.dj-sheet {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 60; width: min(520px, 100%); overflow-y: auto; overscroll-behavior: contain;
  padding: 22px 22px calc(28px + env(safe-area-inset-bottom, 0px)); background: var(--panel); border-left: 1px solid var(--line);
  box-shadow: -30px 0 60px -30px var(--sh-3), var(--glow); transform: translateX(105%); transition: transform .5s var(--spring);
}
.dj-sheet.open { transform: none; }
.dj-sheet-close { position: sticky; top: 0; float: right; margin: -6px -6px 0 0; z-index: 2; background: var(--panel); }
.dj-sheet h2 { margin: 8px 0 4px; font: 850 30px/1.02 var(--display); font-stretch: 78%; text-wrap: balance; }
.dj-sheet h3 { margin: 22px 0 8px; font: 800 15px/1.2 var(--display); font-stretch: 88%; }
.dj-sheet p { font-size: 15px; }
.dj-sheet-sub { margin: 0 0 10px; font-size: 13.5px !important; }
.dj-top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; min-height: 26px; margin-top: 10px; }
.dj-fam {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; white-space: nowrap; font: 700 10.5px/1 var(--mono); letter-spacing: .07em;
  text-transform: uppercase; color: var(--c-ink); background: color-mix(in srgb, var(--c) 13%, transparent);
}
.dj-fam::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.dj-who { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; white-space: nowrap; font: 700 11.5px/1 var(--mono); color: #fff; background: var(--p, var(--muted)); }
.dj-who.D { --p: var(--blue); }
.dj-who.R { --p: var(--red); }
.dj-who.me::after { content: "him"; padding: 2px 4px; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; background: rgba(255, 255, 255, .22); }
.dj-in { display: grid; gap: 12px; }
.dj-quote { display: block; margin: 0; padding-left: 12px; border-left: 3px solid color-mix(in srgb, var(--c) 55%, var(--line)); font-weight: 600; line-height: 1.45; quotes: "“" "”"; overflow-wrap: anywhere; }
.dj-quote a { color: inherit; text-decoration: none; }
.dj-quote a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--c) 60%, transparent); }
.dj-where { display: flex; flex-wrap: wrap; gap: 2px 8px; margin-top: 4px; font: 500 11px/1.4 var(--mono); color: var(--muted); }
.dj-in .dj-where { padding-left: 15px; }
.dj-where a { color: var(--blue-ink); }
.dj-ok { color: var(--good); white-space: nowrap; }
.dj-ok::before { content: "✓ "; font-weight: 700; }
.dj-after { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-size: 14.5px; }
.dj-after .dj-day { font: 600 11px/1 var(--mono); color: var(--muted); margin-right: 4px; }
.dj-after a { color: var(--blue-ink); }
.dj-credit { margin: 10px 0 0; font: 500 11px/1.4 var(--mono) !important; color: var(--muted); }
.dj-credit a { color: inherit; }
@media (prefers-reduced-motion: reduce) { .dj-sheet, .dj-scrim, .rchip, .iconbtn, .dj-search-ic { transition: none; } }

/* On a day's story: the show's video about it. */
.behind {
  display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 2px; padding: 9px 12px 9px 10px; text-decoration: none;
  background: var(--red-soft); color: var(--red-ink); border-left: 3px solid var(--red); font: 700 14px/1.25 var(--body);
}
.behind .ic { width: 18px; height: 18px; }
.behind .ic:last-child { width: 15px; height: 15px; transition: transform .2s var(--ease); }
.behind:hover .ic:last-child { transform: translateX(3px); }

/* ---- Footer ---- */
.foot { position: relative; z-index: 1; background: var(--panel); border-top: 1px solid var(--line); }
.foot::before { content: ""; position: absolute; inset: -1px 0 auto; height: 2px; background: linear-gradient(90deg, var(--red), var(--blue)); opacity: .9; }
.foot-in {
  max-width: var(--width); margin-inline: auto; padding: 30px clamp(16px, 3vw, 32px) calc(28px + env(safe-area-inset-bottom, 0px));
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 18px 48px;
}
.foot-id { display: flex; gap: 14px; align-items: flex-start; }
.foot-id .mark { margin-top: 3px; }
.foot-id p { margin: 0; max-width: 56ch; color: var(--muted); font-size: 15px; }
.foot-id b { color: var(--ink); }
.foot-id a { color: var(--ink); }
.foot-links { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 10px 28px; align-content: start; }
.foot-links a { font-weight: 600; font-size: 14.5px; text-decoration: none; }
.foot-links a:hover { color: var(--blue-ink); text-decoration: underline; text-underline-offset: 3px; }
.foot-small { grid-column: 1 / -1; margin: 4px 0 0; padding-top: 14px; border-top: 1px dashed var(--line); font: 500 12px/1.5 var(--mono); color: var(--muted); }

/* ---- Moving between pages ---- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; }
  .is-today .live-dot::after { animation: none; }
}

/* ---- Tablets and phones ---- */
@media (max-width: 900px) {
  .rp-head.has-rage { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .rp-rage { width: 100%; max-width: 460px; }
}
/* Under 1240px the whole name, the sections and the links after them don't fit on one line: the sections get a row of
   their own under the logo, scrolling sideways once there are many. */
@media (max-width: 1239px) {
  :root { --bar-h: 56px; }
  .bar-in { flex-wrap: wrap; gap: 0 12px; padding-top: env(safe-area-inset-top, 0px); }
  .brand { min-height: 56px; }
  .nav { order: 3; flex: 1 0 100%; margin: 0 -8px; padding: 0 8px 6px; overflow-x: auto; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { padding: 9px 12px; font-size: 14px; }
  html { scroll-padding-top: calc(var(--bar-h) + 60px); }
  .story-card { scroll-margin-top: calc(var(--bar-h) + 60px); }
}
@media (max-width: 760px) {
  .brand { gap: 9px; }
  .brand .mark { width: 40px; height: 35px; border-radius: 9px; }
  /* The name in two lines beside the logo: Tangential over PoliTiKing and the tag. */
  .brand-name { --wh: 15px; display: grid; grid-template-columns: auto auto; justify-content: start; align-items: center; gap: 3px 6px; }
  .brand-name .w1 { grid-column: 1 / -1; }
  .brand-name .w2 { margin-left: 0; }
  .brand-name b { margin-left: 0; font-size: 12px; padding: 3px 5px 2px; border-radius: 4px; }
  .bar-end { gap: 4px; }
  .btn.yt { padding: 0; width: 40px; min-height: 40px; }
  .btn.yt span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .race-body.has-latest { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  body { font-size: 15.5px; }
  .day-head h1 { font-size: clamp(38px, 11vw, 52px); }
  .facts li { padding: 8px 11px; }
  .js .cov-slot.is-waiting { min-height: calc(280px + var(--rows, 5) * 128px); }
  .wall-card { padding: 16px 14px; }
  .story-card { grid-template-columns: minmax(0, 1fr); padding: 18px 16px; gap: 0; }
  .rank { text-align: left; font-size: 52px; padding-top: 0; }
  .story-card.hero .rank { font-size: 74px; }
  .hook { font-size: 23px; margin-top: 8px; }
  .story-card.hero .hook { font-size: 28px; }
  .summary { font-size: 16px; }
  .coverage li { grid-template-columns: minmax(0, 1fr); }
  .post { padding: 12px 13px 11px; }
  .steps a { padding: 10px 12px; font-size: 14px; }
  .how { padding: 18px 16px; }
  .text-card { padding: 18px 16px; }
  .foot-in { grid-template-columns: minmax(0, 1fr); }
  :where(.panel) { padding: 16px 14px; }
  .mt-watch { padding: 14px 16px; }
  .mt-search { flex-basis: 100%; max-width: none; }
  .mt-level { flex: 1 1 auto; }
  .mt-level select { width: 100%; }
  .seg > button { padding: 8px 10px; }
  /* Six switches don't fit across a phone: two rows of three, so none hides off the edge. */
  .mt-show { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .mt-show > button { padding: 9px 4px; text-align: center; }
  .mt-pick-card { padding: 14px 14px 12px; }
  .vid-head h1 { font-size: clamp(30px, 9vw, 44px); }
  .rc { padding: 14px 14px 12px; }
  .rc-name { font-size: 26px; }
  .player-btn { padding: 11px 18px 11px 14px; font-size: 15px; }
  .player-btn .ic { width: 20px; height: 20px; }
  .vid-card { padding: 16px 14px 14px; }
  .vid-day { padding: 14px 16px; }
  .mt-table th, .mt-table td { padding: 9px 10px; }
  .bal-nums { gap: 8px; font-size: 12.5px; }
  .bal-nums b { font-size: 25px; }
  .bal-wait b { font-size: 19px; }
  .bal-right { gap: 10px; }
  /* Squares this small: his pick is a corner, not a star over the state's letters. */
  .race-st.picked::before { content: ""; top: 0; right: 0; border-top: 8px solid var(--warn); border-left: 8px solid transparent; }
  .race-st.won.picked::before { border-top-color: #fff; }
  .race-legend i.pick { font-size: 0; background: linear-gradient(225deg, var(--warn) 50%, transparent 50%); border-color: var(--line); }
  .race-st.runoff small { font-size: 6px; letter-spacing: 0; }
  /* The House's squares keep the seat count; the bar under it shows how many are called. */
  .race-done { display: none; }
  .race-fill { left: 2px; right: 2px; bottom: 2px; height: 2px; }
  .race-map { gap: 3px; }
  .race { padding: 11px 12px; }
  .js .rp-wait { min-height: 300px; }
  .sb-chain { padding: 12px 13px 14px; }
  .sb-step { padding-left: 20px; }
  .sb-said { padding: 9px 11px; }
}

@media print {
  .bar, .cov-slot, .days, .steps, .skip, .mt-tools, .mt-more-row, .mt-count, .race-tabs, .player, .toast { display: none !important; }
  .mt-pick[hidden], .race-pane[hidden] { display: block !important; }
  .sb-chains > .sb-chain { display: block !important; }
  .sb-zoom, .sb-more { display: none !important; }
  body::before { display: none; }
  .story-card, .text-card, .mt-pick-card, .panel, .rc, .vid-card { box-shadow: none; break-inside: avoid; }
}