/* The Rest Is History · episode index — stylesheet
   ------------------------------------------------------------------------------------------------
   The layout: a centred column · underline tabs + a pill field · bordered cards · three On-this-day cards ·
   numbered citations + a source key.

   The rules that give the page its character:
     * One sentence, one field. Nothing above the fold competes with the headline and the field.
     * Only four things change between Find and Ask: the field's leading icon, its ring, the submit button,
       and the helper copy + Try chips. The field never moves; switching never sends.
     * The accent colour means the AI and nothing else: the spark, the Ask tab underline, the Ask ring and
       button, the AI-generated tag, the active citation. Everything else is ink, the page colour and greys plus
       pale series colours used as small filled tags — never as a border stripe.
     * Serif for content (headline, titles, passages, the answer), Sans for interface, Mono for timestamps
       only. The show's name is italic wherever it appears in running text, because it is a title.
     * Still and flat: cards are border-only, the field is the only elevated thing, hover is a flat tint,
       no transitions. The one exception is the answer panel while Claude works (the motion section at the
       end). Honesty markers (approx., AI-generated, citation removed, unofficial) are part of the design, not
       fine print.
   ------------------------------------------------------------------------------------------------ */

/* ---- tokens ------------------------------------------------------------------------------------ */
:root {
  --page: #FAF9F5;                    /* page background, never pure white */
  --surface: #FFFFFF;                 /* cards, panels, the field */
  --surface-sunken: #F0EEE6;
  --tint: rgba(115,114,108,0.10);     /* time chips */
  --tint-12: rgba(115,114,108,0.12);  /* segmented track, unofficial tag, citation-removed marker */
  --tint-14: rgba(115,114,108,0.14);  /* kind tag "event" */
  --tint-weak: rgba(115,114,108,0.08);/* row hover */
  --hover: rgba(0,0,0,0.04);          /* every button hover: a flat tint, nothing else changes */
  --underline: rgba(20,20,19,0.35);   /* text-link underlines */
  --seg-on: #FFFFFF;                  /* the raised segment */

  --text: #141413;                    /* ink */
  --text-2: #3D3D3A;                  /* passages, secondary body */
  --text-3: #5E5D59;                  /* summaries, meta */
  --text-4: #73726C;                  /* labels, placeholders, timestamps, disclaimers */
  --on-dark: #FAF9F5;
  --tag-text: #141413;                /* series tags keep ink-coloured text in both themes */

  --line: rgba(31,30,29,0.15);
  --line-strong: rgba(31,30,29,0.30);
  --line-weak: rgba(31,30,29,0.10);

  --accent: #D97757;
  --accent-text: #A9522F;               /* the accent darkened for the 11.5px tag: 4.7:1 on the wash over white */
  --accent-wash: rgba(217,119,87,0.12);
  --accent-row: rgba(217,119,87,0.14);  /* the active source-key row */
  --mineral: #629987;
  --mark: rgba(240,172,84,0.32);

  --series-peach: #EBC9B7; --series-cloud: #C5D3E0; --series-cactus: #BCD1CA; --series-heather: #CBCADB;
  --series-matcha: #CED6BF; --series-orchid: #E5CADA; --series-coral: #EBCCCC; --series-none: #E3E1D8;
  --kind-event: #E3E1D8; --kind-born: #BCD1CA; --kind-died: #CBCADB;   /* all three pale and theme-invariant: ink-coloured text stays legible in the dark theme */

  --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', system-ui, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --w-ui: 430; --w-mid: 500; --w-strong: 600;

  --field-rest: 0 0 0 1px rgba(31,30,29,0.15), 0 4px 20px rgba(0,0,0,0.035);
  --field-ask: 0 0 0 1.5px #D97757, 0 0 0 5px rgba(217,119,87,0.16), 0 4px 20px rgba(0,0,0,0.035);
  --seg-active: 0 1px 2px rgba(0,0,0,0.06);

  --w-hero: 720px; --w-results: 800px; --gutter: 40px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #1F1E1D; --surface: #2A2927; --surface-sunken: #262523;
    --text: #FAF9F5; --text-2: #D8D6CF; --text-3: #B0AEA5; --text-4: #9A988F; --on-dark: #141413;   /* text-4: 5.0:1 on the card surface */
    --line: rgba(250,249,245,0.14); --line-strong: rgba(250,249,245,0.28); --line-weak: rgba(250,249,245,0.08);
    --tint: rgba(250,249,245,0.08); --tint-12: rgba(250,249,245,0.10); --tint-14: rgba(250,249,245,0.12);
    --tint-weak: rgba(250,249,245,0.06); --hover: rgba(255,255,255,0.05);
    --underline: rgba(250,249,245,0.4); --seg-on: #3F3E3B; --accent-text: #E99A80;
    --mark: rgba(240,172,84,0.28);
    --field-rest: 0 0 0 1px rgba(250,249,245,0.14), 0 4px 20px rgba(0,0,0,0.25);
    --field-ask: 0 0 0 1.5px #D97757, 0 0 0 5px rgba(217,119,87,0.18), 0 4px 20px rgba(0,0,0,0.25);
    --seg-active: 0 1px 2px rgba(0,0,0,0.3);
  }
}

/* ---- base ---------------------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; }
body {
  margin: 0; min-height: 100%; display: flex; flex-direction: column;
  background: var(--page); color: var(--text);
  font: var(--w-ui) 14px/1.4 var(--font-sans);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
main { flex: 1 0 auto; }
a { color: var(--text); text-decoration-color: var(--underline); text-underline-offset: 2px; }
a:hover { color: var(--mineral); text-decoration-color: var(--mineral); }
button, input { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; }
input::placeholder { color: var(--text-4); opacity: 1; }
em, i { font-style: italic; }
mark { background: var(--mark); color: inherit; padding: 0 2px; border-radius: 2px; }
svg { display: inline-block; vertical-align: middle; fill: none; }
.sprite { position: absolute; }   /* the icons' definitions: nothing to see, and no room taken */
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--mineral); outline-offset: 2px; }
::selection { background: rgba(98,153,135,0.25); }

/* ---- header --------------------------------------------------------------------------------------- */
.top { border-bottom: 1px solid var(--line-weak); }
.top-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px var(--gutter); font-size: 13px; }
.brand { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; max-height: 1.7em; overflow: hidden; }   /* ONE LINE, AND WHAT DOESN'T FIT IN IT GOES OUT OF SIGHT WHOLE: it falls to a second line, which isn't shown. (On a phone, with the way out at the right, the tag was cut in the middle of its word: "pre") */
.brand-name { font-weight: var(--w-strong); text-decoration: none; color: var(--text); white-space: nowrap; }
.brand-name:hover { color: var(--text); text-decoration: underline; text-decoration-color: var(--underline); }
.brand-sub { color: var(--text-4); white-space: nowrap; }
/* the way out, and an admin's way in, at the right of the bar: there only for whoever is signed in */
.top-links { display: flex; gap: 16px; flex: none; }
.top-out { color: var(--text-4); text-decoration: none; white-space: nowrap; }
.top-out:hover, .top-out:focus-visible { color: var(--text); text-decoration: underline; text-decoration-color: var(--underline); }
.tag-unofficial { font-size: 11px; padding: 2px 7px; border-radius: 4px; background: var(--tint-12); color: var(--text-2); white-space: nowrap; }
.top-nav { display: flex; align-items: center; gap: 20px; min-width: 0; }
.top-link { background: none; border: 0; padding: 0; color: var(--text-2); text-decoration: none; font-size: 13px; font-weight: var(--w-ui); white-space: nowrap; }
.top-link:hover { color: var(--mineral); text-decoration: underline; text-decoration-color: var(--mineral); }

/* ---- hero --------------------------------------------------------------------------------------- */
.hero { width: 100%; max-width: calc(var(--w-hero) + 2 * var(--gutter)); margin: 0 auto; padding: 64px var(--gutter) 12px; display: flex; flex-direction: column; gap: 22px; }
.hero > div[role="tabpanel"] { display: flex; flex-direction: column; gap: 22px; }
.headline { margin: 0; font: var(--w-mid) 46px/1.08 var(--font-serif); text-align: center; text-wrap: balance; color: var(--text); }
.headline em { font-style: italic; font-weight: inherit; }

/* underline tabs: a column each — label row + sub-label; active = ink text + 2px underline (the accent for Ask),
   overlapping the tablist rule by -1px. Sub-labels stay text-4 in every state. */
.tabs { display: flex; justify-content: center; gap: 36px; border-bottom: 1px solid var(--line); }
.tab {
  background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 8px 2px 12px;
  display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--text-4);
}
.tab.is-on { color: var(--text); border-bottom-color: var(--text); }
.tab.is-on[data-how="ask"] { border-bottom-color: var(--accent); }
.tab-label { display: flex; align-items: center; gap: 7px; font-size: 15px; font-weight: var(--w-strong); line-height: 1.3; }
.tab-icon { width: 15px; height: 15px; color: currentColor; }
.tab-icon.spark { color: var(--accent); }
.tab-sub { font-size: 12.5px; color: var(--text-4); font-weight: var(--w-ui); }
.tab:focus-visible { outline-offset: 2px; border-radius: 6px; }

/* the pill field: white, radius 20, padding 8 8 8 18; the ring is the only elevation on the page */
.field-form { margin: 0; }
.field { display: flex; align-items: center; gap: 10px; background: var(--surface); border-radius: 20px; padding: 8px 8px 8px 18px; box-shadow: var(--field-rest); }
.field:has(input:focus-visible) { outline: 2px solid var(--mineral); outline-offset: 2px; }
.field-form[data-how="ask"] .field { box-shadow: var(--field-ask); }
.field-form[data-how="ask"] .field:has(input:focus-visible) { outline-color: var(--accent-text); }   /* keyboard focus still shows, in the accent's family: the accent ring is there focused or not */
.field-icon { width: 18px; height: 18px; flex: none; color: var(--text-4); }
.field-form[data-how="ask"] .field-icon { color: var(--accent); }
.field input {
  flex: 1; min-width: 0; border: 0; outline: none; background: transparent; padding: 8px 0;
  font-size: 17px; font-weight: 400; color: var(--text); line-height: 1.3;
}
.field input::-webkit-search-decoration, .field input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.field-hint { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-4); white-space: nowrap; }
.field-hint svg { width: 12px; height: 12px; }
.field-go {
  flex: none; display: inline-flex; align-items: center; gap: 7px; border: 0; border-radius: 14px; padding: 10px 16px;
  font-size: 14px; font-weight: var(--w-mid); color: var(--on-dark); background: var(--text); white-space: nowrap;
}
/* Ink on the accent (5.9:1, --tag-text in both themes): the page colour on the accent is 2.96:1, under AA for 14px text. */
.field-form[data-how="ask"] .field-go { background: var(--accent); color: var(--tag-text); }
.field-go-icon { width: 14px; height: 14px; display: none; }
.field-go[disabled] { cursor: progress; opacity: .7; }
/* Cloudflare Turnstile (only on hosts that configure it): under the field, with the Ask tab, empty until challenged */
.turnstile { display: flex; justify-content: center; margin-top: 14px; }
.turnstile:empty, .field-form[data-how="find"] .turnstile { display: none; }
.helper { margin: -8px 0 0; text-align: center; font-size: 12.5px; color: var(--text-4); text-wrap: pretty; }
.helper.is-hint { color: var(--text-2); }

/* Try chips: entities in Find (run at once), questions in Ask (fill and focus; nothing is sent) */
.try { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.try-label { color: var(--text-4); }
.chip { padding: 5px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: 13px; font-weight: 400; color: var(--text); text-align: left; }
.chip:hover { background: var(--hover); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .chip:hover { background: #33322F; } }

/* ---- results column ----------------------------------------------------------------------------- */
.results { width: 100%; max-width: calc(var(--w-results) + 2 * var(--gutter)); margin: 0 auto; padding: 36px var(--gutter) 56px; display: flex; flex-direction: column; gap: 14px; }
.results-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 4px; }
.summary { margin: 0; font-size: 14px; color: var(--text-3); text-wrap: pretty; overflow-wrap: anywhere; min-width: 0; }
.summary strong { color: var(--text); font-weight: var(--w-strong); }
/* Find by name: under the figure, the other names that are there (buttons), what the figure takes in, how it was counted */
.summary-offer, .summary-line, .summary-how { display: block; margin-top: 4px; }
.summary-offer { color: var(--text); }
.summary-how { font-size: 12.5px; color: var(--text-4); }
.summary-offer button, .state-offer button { background: none; border: 0; padding: 0; font: inherit; font-weight: var(--w-strong); color: var(--text); text-decoration: underline; text-decoration-color: var(--underline); text-underline-offset: 2px; cursor: pointer; }
.summary-offer button:hover, .state-offer button:hover { color: var(--mineral); text-decoration-color: var(--mineral); }
.state-offer { color: var(--text); font-size: 15px; }
/* Find's heading block (facts.js): the number that leads, what it is made up of, who else answers to the words. Type only: no box, no rule. */
.facts-slot { min-width: 0; flex: 1; }
.facts { display: flex; flex-direction: column; gap: 5px; font-size: 14px; color: var(--text-3); text-wrap: pretty; overflow-wrap: anywhere; }
.facts p { margin: 0; }
.facts-lead { font: var(--w-mid) 21px/1.3 var(--font-serif); color: var(--text); }
.facts-line { color: var(--text-2); max-width: 62ch; }
.facts [aria-busy="true"] { opacity: .55; cursor: progress; }   /* pressed, and its rows are on their way */
.only-failed button { background: none; border: 0; padding: 0; font: inherit; color: var(--text); cursor: pointer; text-decoration: underline; text-decoration-color: var(--underline); text-underline-offset: 2px; }
.only-failed { outline: none; }
.facts-note { font-size: 12.5px; color: var(--text-4); max-width: 70ch; }
.facts-showing { color: var(--text-2); padding-bottom: 3px; }
/* the numbers at the top of an Ask answer: the number a size up in the answer's typeface, its parts at the answer's size, with no box, rule or bar */
.facts-opening { gap: 6px; animation: trih-in .3s ease-out both; }
.facts-opening .facts-lead { line-height: 1.32; }
.facts-opening > .facts-line { font: 400 17.5px/1.55 var(--font-serif); color: var(--text); max-width: none; }
@media (prefers-reduced-motion: reduce) { .facts-opening { animation: none; } }
.facts-offer.is-brief { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 14px; padding-top: 4px; }
.facts-offer.is-brief ul { flex-direction: row; flex-wrap: wrap; gap: 3px 14px; margin: 0; }
.facts-on { margin: 0; font-size: 13px; color: var(--text-4); }
.facts-on .facts-find + .facts-find, .facts-on .facts-how:not(:first-child) { margin-left: 14px; }
.facts-how { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; color: var(--text-3); text-decoration: underline; text-decoration-color: var(--underline); text-underline-offset: 2px; }
.facts-how::after { content: " ⌄"; display: inline-block; text-decoration: none; white-space: pre; }
.facts-how[aria-expanded="true"]::after { content: " ⌃"; }
.facts-how:hover { color: var(--mineral); text-decoration-color: currentColor; }
.facts-behind { padding-top: 10px; font-size: 13.5px; }
.facts-behind span.facts-part:hover span { text-decoration: none; }   /* plain text here, not a button */
.trih-folded > .facts-behind { padding: 0 0 12px; }
.facts-find { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; color: var(--text-2); text-decoration: underline; text-decoration-color: var(--underline); text-underline-offset: 2px; }
.facts-find::after { content: " ›"; display: inline-block; text-decoration: none; white-space: pre; }
.facts-find:hover { color: var(--mineral); text-decoration-color: currentColor; }
.facts-back, .facts-more, .facts-name, .facts-part, button.facts-share { background: none; border: 0; padding: 0; font: inherit; color: var(--text); cursor: pointer; text-align: left; }
.facts-back, .facts-more, .facts-name { text-decoration: underline; text-decoration-color: var(--underline); text-underline-offset: 2px; }
.facts-back, .facts-more { color: var(--text-3); }
.facts-back:hover, .facts-more:hover, .facts-name:hover { color: var(--mineral); text-decoration-color: var(--mineral); }
.facts-offer { padding-top: 8px; }
.facts.is-offer-first > .facts-offer { padding-top: 0; }
.facts.is-offer-first > .facts-offer .facts-name { font-size: 17px; }
.facts.is-offer-first > .facts-lead { font: 400 14px/1.5 var(--font-sans); color: var(--text-3); padding-top: 10px; }   /* the list of entries leads; the sentence saying no episode has the whole line sits smaller under it */
.facts-to-ask { padding-top: 6px; }
.facts-offer ul, .facts-parts ul { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.facts-offer li { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.facts-ask { color: var(--text-3); }
.facts-name { font-weight: var(--w-strong); }
span.facts-name { text-decoration: none; cursor: default; color: var(--text); }
.facts-said { font-size: 13px; color: var(--text-3); }
/* in how many of the episodes that say the words this one is meant: at the end of its line; and, under those on offer, the episodes in which none of them is.
   BY WHAT FITS, AND BY NO WIDTH: the row is the wrapping row of ".facts-offer li" above: the description takes what room is left and goes to a line of its own where fewer than some twenty letters would be left to it; the number stands at the
   row's end. (It was a grid of three columns whose last didn't break: in a narrow COLUMN, which a wide window has too, beside the switch, the description was left a letter's width) */
.facts-offer:has(.facts-share) li { gap: 2px 10px; }
.facts-offer:has(.facts-share) li > .facts-said { flex: 1 1 22ch; min-width: min(22ch, 100%); }   /* (it grows, and so pushes the number to the row's end. No "margin-left: auto" on the number: that would take the free room before the description could, and leave it at its twenty letters on the widest screen) */
.facts-offer li > .facts-name + .facts-share { margin-left: auto; }   /* (no description: the number still at the row's end) */
.facts-share { max-width: 100%; font-size: 13px; color: var(--text-3); display: inline-flex; gap: 5px; align-items: baseline; }
/* an offered subject's number with a fixed line of its own: the number on a row of its own and the line right behind it, at every width, however long the description is */
.facts-offer li:has(> .facts-ownline) > .facts-share { flex-basis: 100%; margin-left: 0; }
.facts-offer li > .facts-ownline { flex-basis: 100%; padding-top: 0; }
.facts-share b { font-weight: var(--w-strong); color: var(--text); font-variant-numeric: tabular-nums; }
.facts-offer:has(.facts-share) { max-width: 74ch; }
.facts-offer .facts-rest { margin-top: 8px; font-size: 13px; }
.facts-rest .facts-part, .facts-rest .facts-part b { color: var(--text-4); font-weight: 400; cursor: default; }
.facts-rest span.facts-part:hover span { text-decoration: none; }
.facts-rest button.facts-part { cursor: pointer; }
button.facts-share { font-size: 13px; color: var(--text-3); }
button.facts-share:hover span, .facts [aria-pressed="true"] span { text-decoration: underline; text-decoration-color: var(--underline); text-underline-offset: 2px; }
.facts [aria-pressed="true"], .facts [aria-pressed="true"] b { color: var(--mineral); }
.only-line button { background: none; border: 0; padding: 0; font: inherit; color: var(--text-3); cursor: pointer; text-decoration: underline; text-decoration-color: var(--underline); text-underline-offset: 2px; }
.only-line { outline: none; }
.facts-offer .facts-note, .facts-parts .facts-note { padding-top: 6px; }
.facts-others { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; padding-top: 2px; }
.facts-others .facts-ask { color: var(--text-4); }
/* the number's parts: a thin bar in proportion, and one line a part, the figure first */
.facts-parts { padding-top: 2px; max-width: 62ch; }
.facts-bar { display: flex; gap: 2px; height: 5px; margin: 6px 0 8px; }
.facts-bar i { display: block; min-width: 3px; border-radius: 2px; background: var(--line-strong); }
.facts-bar .is-theirs { background: var(--text); }
.facts-bar .is-others { background: var(--mineral); }
.facts-bar .is-unchecked { background: var(--line-strong); }
.facts-bar .is-filed_unread { background: var(--text); opacity: .55; }   /* the subject's own too, but not read */
.facts-bar .is-with { background: var(--text); opacity: .3; }            /* what goes with the subject: between its own and the others' */
.facts-part { display: grid; grid-template-columns: 3.2ch 1fr; gap: 10px; align-items: baseline; color: var(--text-2); }
.facts-part b { font-weight: var(--w-strong); color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.facts-part:hover span { text-decoration: underline; text-decoration-color: var(--underline); text-underline-offset: 2px; }
.facts-parts .is-outside .facts-part, .facts-parts .is-outside b { color: var(--text-4); font-weight: 400; }
.results-head:has(.facts-slot:not([hidden])) { align-items: flex-start; }
/* the list's sections, one for each part of the number: the same figure and label as in the heading */
.part-line { scroll-margin-top: 12px; outline: none; }
.part-title b { font-weight: var(--w-strong); color: var(--text); font-variant-numeric: tabular-nums; }
.part-more { list-style: none; }
.closest { list-style: none; }
.closest p { margin: 6px 0 0; font-size: 14px; color: var(--text-3); }
/* Find with the register of names: who answers to the words (one quiet card over the list), and the lines that head the groups of episodes */
.group-line p { margin: 18px 0 2px; padding-top: 14px; border-top: 1px solid var(--line-weak); color: var(--text-2); }
.group-line button { background: none; border: 0; padding: 0; font: inherit; color: var(--text); text-decoration: underline; text-decoration-color: var(--underline); text-underline-offset: 2px; cursor: pointer; }
.group-line button:hover { color: var(--mineral); text-decoration-color: var(--mineral); }
.state.entry { padding: 16px 20px; gap: 8px; }
.entry-kind { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-4); }
.state.entry .entry-line { color: var(--text-2); font-size: 15px; }
.state.entry .entry-why { color: var(--text-3); }
.entry-ask { font-size: 14px; color: var(--text-3); }
.state.entry.is-slight { padding: 12px 20px; }
.entry-row { padding-top: 2px; }
.entry-choice { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.entry-choice li { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.entry-said { font-size: 13px; color: var(--text-3); }
.card .entry-row { margin-top: 8px; }

/* segmented control (Find results only): track tint 0.12, padding 3, radius 8; active = white + soft shadow */
.seg { display: inline-flex; flex: none; padding: 3px; border-radius: 8px; background: var(--tint-12); gap: 2px; }
.seg-help { display: none; margin: 2px 0 10px; font-size: 12.5px; line-height: 1.45; color: var(--text-4); }
.results-head:not([hidden]):has(.seg:not([hidden])) + .seg-help { display: block; }
.seg-opt { position: relative; }
.seg-opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.seg-opt span { display: block; padding: 5px 11px; border-radius: 6px; font-size: 12.5px; font-weight: var(--w-mid); color: var(--text-3); background: transparent; white-space: nowrap; }
.seg-opt.is-on span { background: var(--seg-on); color: var(--text); box-shadow: var(--seg-active); }
.seg-opt input:focus-visible + span { outline: 2px solid var(--mineral); outline-offset: 2px; }

/* result card: white, border line, radius 14, padding 18×22, column gap 10, series as a filled tag on top */
.cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px 22px; display: flex; flex-direction: column; gap: 10px; }
.card.is-active { background: var(--accent-wash); }
.card.is-active :focus-visible { outline-color: var(--text); box-shadow: 0 0 0 4px var(--surface); }
.card-meta { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text-4); flex-wrap: wrap; }
.series-tag { padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: var(--w-mid); color: var(--tag-text); background: var(--series, var(--series-none)); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.epn { font-variant-numeric: tabular-nums; white-space: nowrap; }
.card-right { margin-left: auto; white-space: normal; min-width: 0; max-width: 100%; }
.card-title { margin: 0; font: var(--w-mid) 21px/1.25 var(--font-serif); color: var(--text); text-wrap: balance; }
.passage { margin: 0; font: 400 15.5px/1.55 var(--font-serif); color: var(--text-2); text-wrap: pretty; overflow-wrap: anywhere; }
.passage.why::before { content: "Why it’s cited · "; font: var(--w-ui) 12px/1 var(--font-sans); color: var(--text-4); }
.card-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 2px; }
.btn-listen { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; background: var(--text); color: var(--on-dark); font-size: 13px; font-weight: var(--w-mid); border: 0; text-decoration: none; white-space: nowrap; }
.btn-listen svg { width: 12px; height: 12px; }
.time { display: inline-flex; align-items: center; gap: 5px; border: 0; font: 400 12px/1.2 var(--font-mono); padding: 5px 8px; border-radius: 6px; background: var(--tint); color: var(--text-2); text-decoration: none; white-space: nowrap; }
a.time:hover { background: var(--tint-weak); color: var(--mineral); }
.time svg { width: 11px; height: 11px; }
.time.notes { font-family: var(--font-sans); }
/* a moment's two times, "≈ 45:02 with ads" and "≈ 41:10 no ads": the second is quieter than the first (clock.js) */
.time-second { color: var(--text-4); font-size: .92em; }
.time-label { color: var(--text-4); font-family: var(--font-sans); font-size: .9em; }
.time .time-second { padding-left: 7px; margin-left: 2px; border-left: 1px solid var(--line); }
.otd-time .time-second { margin-left: 4px; }
.more-link { margin-left: auto; font-size: 12.5px; background: none; border: 0; padding: 0; color: var(--text); text-decoration: underline; text-decoration-color: var(--underline); text-underline-offset: 2px; white-space: nowrap; }
.more-link:hover { color: var(--mineral); text-decoration-color: var(--mineral); }
.more-list { list-style: none; margin: 4px 0 0; padding: 10px 0 0; border-top: 1px solid var(--line-weak); display: flex; flex-direction: column; gap: 10px; }
.more-list li { display: flex; flex-direction: column; gap: 6px; }
.more-list .passage { font-size: 14.5px; }
.more-list .card-actions { padding-top: 0; }

/* tail line / show-more under the list */
.tail { display: flex; justify-content: center; }
.tail:empty { display: none; }
.tail-note { margin: 6px 0 0; font-size: 13px; color: var(--text-4); text-align: center; }
.tail-note button { background: none; border: 0; padding: 0; font-size: inherit; color: var(--text); text-decoration: underline; text-decoration-color: var(--underline); text-underline-offset: 2px; }
.tail-note button:hover { color: var(--mineral); text-decoration-color: var(--mineral); }

/* ---- buttons ------------------------------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; gap: 6px; border-radius: 8px; padding: 8px 14px; font-size: 13px; font-weight: var(--w-mid); border: 1px solid transparent; text-decoration: none; white-space: nowrap; }
.btn-icon { width: 13px; height: 13px; }
.btn-outline { background: var(--surface); border-color: var(--line); color: var(--text); font-weight: 400; }
.btn-outline:hover { background: var(--hover); color: var(--text); }
.btn-small { padding: 5px 10px; font-size: 12.5px; }
.btn-link { background: none; border: 0; padding: 0; font-size: 13px; color: var(--text); text-decoration: underline; text-decoration-color: var(--underline); text-underline-offset: 2px; }
.btn-link:hover { color: var(--mineral); text-decoration-color: var(--mineral); }
.icon-btn { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); padding: 0; }
.icon-btn:hover { background: var(--hover); }
.icon-btn svg { width: 14px; height: 14px; }
.icon-btn-plain { border-color: transparent; background: transparent; color: var(--text-4); }
.icon-btn-plain:hover { background: var(--hover); color: var(--text); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn-outline:hover, :root:not([data-theme="light"]) .icon-btn:hover { background: #33322F; }
}

/* ---- state cards (no results · error · waiting) — same tokens, kept in the results column ---- */
.state { list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.state-title { margin: 0; font: var(--w-mid) 20px/1.25 var(--font-serif); color: var(--text); display: flex; align-items: center; gap: 10px; }
.state-title svg { width: 18px; height: 18px; color: var(--text-4); flex: none; }
.state-title .spark { color: var(--accent); }
.state p { margin: 0; font-size: 14px; color: var(--text-3); text-wrap: pretty; }
.state-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 4px; }
.state-near { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.state-near-label { color: var(--text-4); }
.state-also { margin: 0; font-size: 13px; color: var(--text-4); }
.answer-body .state { border: 0; padding: 0; font-family: var(--font-sans); }
.state-title, .answer-question, .waiting-status { overflow-wrap: anywhere; min-width: 0; }

/* skeleton rows while a list loads: flat, no shimmer */
.skeleton { list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px 22px; display: flex; flex-direction: column; gap: 12px; }
.skeleton .bar { height: 12px; border-radius: 4px; background: var(--tint); width: 40%; }
.skeleton .bar.t { height: 18px; width: 70%; }
.skeleton .bar.s { width: 92%; }
.skeleton .bar.s2 { width: 60%; }

/* ---- the answer panel -------------------------------------------------------------------------- */
/* set like a page: one column of about 70 characters with wide margins; the question is the headline, the answer's opening
   line (a count or a comparison) the standfirst, long quotations are set off, and everything that is not prose is small and quiet */
.answer { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 24px clamp(26px, 13.5%, 110px) 26px; display: flex; flex-direction: column; gap: 16px; }
.answer-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; row-gap: 6px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-4); margin-right: -8px; }
.answer-title-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.answer-spark { width: 18px; height: 18px; color: var(--accent); flex: none; }
.answer.is-busy .answer-spark { animation: breathe 1.6s ease-in-out infinite; }
.answer-title { margin: 0; font-size: 13px; font-weight: var(--w-strong); color: var(--text); white-space: nowrap; }
.answer-title:focus { outline: none; }   /* focus is moved here by script so that a screen reader starts at the answer; it is not a control */
.ai-tag { font-size: 11.5px; font-weight: var(--w-mid); padding: 2px 8px; border-radius: 999px; color: var(--accent-text); background: var(--accent-wash); white-space: nowrap; }
.answer-head-right { display: flex; align-items: center; gap: 10px; min-width: 0; margin-left: auto; }
.answer-meta { white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.answer-question { margin: 2px 0 0; font: var(--w-mid) 27px/1.16 var(--font-serif); color: var(--text); text-wrap: balance; padding-bottom: 16px; border-bottom: 1px solid var(--line-weak); }
.answer-body { font: 400 17.5px/1.62 var(--font-serif); color: var(--text); display: flex; flex-direction: column; gap: 15px; text-wrap: pretty; hanging-punctuation: first; }
.answer-body p { margin: 0; }
/* a quotation set off from the prose: italic, a hairline down the side, the opening mark hung in the margin of the text */
.answer-body blockquote { margin: 1px 0 1px 2px; padding: 1px 0 1px 20px; border-left: 1.5px solid var(--line-strong); color: var(--text); font-style: italic; font-size: 18px; line-height: 1.5; display: flex; flex-direction: column; gap: 5px; }
/* over each moment, the episode it is from: the title as a small heading, its number and year muted beside it */
.stop { position: relative; margin: 14px 0 -10px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; font: var(--w-ui) 12px/1.3 var(--font-sans); color: var(--text-4); font-variant-numeric: tabular-nums; }
.stop-title { border: 0; background: none; padding: 0; text-align: left; font: var(--w-strong) 14.5px/1.35 var(--font-sans); letter-spacing: -.005em; color: var(--text); }   /* sans: its semi-bold is among the weights the page loads, the serif's is not */
.stop-title:hover { color: var(--mineral); }
.answer-body > p.md-title { margin: 14px 0 -10px; }   /* a line the model gave to a title alone, where code has no heading to put in its place */
.answer-body > p.md-title strong { font: var(--w-strong) 14.5px/1.35 var(--font-sans); letter-spacing: -.005em; }
.stop-meta { display: inline-flex; gap: 4px; white-space: nowrap; }   /* a row of its own that never wraps; 4px is what the outer row's gap less a pull of 6px used to leave */
.stop-ep:not(:last-child)::after { content: " ·"; }
.answer-body mark.said { padding: 0 .12em; margin: 0 -.06em; }
.answer-body q.voice { font-style: italic; quotes: none; }   /* the marks are in the text */
.answer-body .standfirst { font-size: 20px; line-height: 1.45; text-wrap: pretty; }
.answer-body .closing { margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--line-weak); color: var(--text-2); }   /* upright: italic is the hosts' voices */
.answer-body blockquote p { text-indent: -.42em; hanging-punctuation: none; }
.answer.is-busy #show-fold { display: none; }   /* the link comes with the finished answer */
.answer-body p.md-h { font-weight: var(--w-mid); }
.answer-body ul, .answer-body ol { margin: 2px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: .93em; line-height: 1.5; color: var(--text-2); }
.answer-body li::marker { color: var(--text-4); }
.answer-body li strong { color: var(--text); }
.answer-body ul:has(> .ep-line) { list-style: none; padding: 0; gap: 0; margin-top: 8px; border-top: 1px solid var(--line-weak); }
.answer-body .ep-line { padding: 10px 0; border-bottom: 1px solid var(--line-weak); font-size: 15.5px; line-height: 1.45; }
.answer-body ul:has(> .ep-line) > li:last-child { border-bottom: 0; padding-bottom: 0; }
.answer-body .ep-line > strong:first-child { display: block; font: var(--w-strong) 14.5px/1.35 var(--font-sans); letter-spacing: -.005em; margin-bottom: 3px; }
.answer-body strong { font-weight: var(--w-mid); }
.answer-body > p:not(.md-h) strong { font-weight: inherit; font-style: italic; }   /* in running prose what the model marks is an episode's title, and a title is italic */
/* visually hidden: in the accessibility tree and in a plain-text copy, not on screen */
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* a citation: a small pale square, raised, with the source number; the sentence punctuation follows it. The brackets
   inside it are .vh, so a copy of the prose reads "Ep 156[1]" rather than "Ep 1561" (relative: they stay in the button) */
.cite { position: relative; vertical-align: .42em; text-indent: 0; font: var(--w-mid) 10.5px/1 var(--font-sans); font-variant-numeric: tabular-nums; margin: 0 1px 0 3px; padding: 2px 4.5px; border-radius: 4px; border: 0; background: var(--tint-14); color: var(--text-2); }
.cite:hover { background: var(--text); color: var(--on-dark); }
.cite + .cite { margin-left: 2px; }
.cite.is-active { background: var(--text); color: var(--on-dark); box-shadow: 0 0 0 1.5px var(--accent); }
.cite-removed { position: relative; font: var(--w-ui) 12px/1.3 var(--font-sans); color: var(--text-3); background: var(--tint-12); border-radius: 4px; padding: 1px 6px; white-space: nowrap; cursor: help; }
.cite-removed .tip { display: none; position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 2; width: 260px; white-space: normal; font-size: 12px; line-height: 1.4; color: var(--text-2); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.cite-removed:hover .tip, .cite-removed:focus .tip { display: block; }   /* :focus, not :focus-visible: a tap reveals it too */
.answer-note { display: flex; align-items: flex-start; gap: 8px; font: var(--w-ui) 13px/1.45 var(--font-sans); color: var(--text-3); background: var(--tint-weak); border-radius: 8px; padding: 8px 10px; }
.answer-note svg { width: 15px; height: 15px; flex: none; color: var(--text-4); margin-top: 1px; }
/* waiting: the spark breathes, the status line says what the loop is doing; no skeleton shimmer */
.waiting { display: flex; flex-direction: column; gap: 8px; font: var(--w-ui) 13px/1.45 var(--font-sans); color: var(--text-3); }
.waiting-status { margin: 0; display: flex; align-items: center; gap: 8px; }
/* the composing placeholder: three faint bars under the status line, shimmering while Claude works, gone when the
   first thinking or text arrives */
.composing { display: flex; flex-direction: column; gap: 10px; padding: 6px 0 2px; }
.composing .bar { display: block; height: 11px; border-radius: 6px; background: var(--tint-12); width: 88%; }
.composing .bar:nth-child(2) { width: 97%; }
.composing .bar:nth-child(3) { width: 61%; }
.answer.is-busy .composing .bar { background: linear-gradient(90deg, var(--tint-weak) 0%, var(--tint-14) 45%, var(--tint-weak) 90%); background-size: 220% 100%; animation: shimmer 1.7s ease-in-out infinite; }
.answer.is-busy .composing .bar:nth-child(2) { animation-delay: .12s; }
.answer.is-busy .composing .bar:nth-child(3) { animation-delay: .24s; }
/* what Claude is doing, as it happens: the summarized thinking the API streams, in a box that follows its own last
   line ("Claude is thinking…", open; the whole of it stays and the box scrolls, a fade at the top where it
   overflows), shrinking to its last lines when the answer's first words arrive and, once the verified answer has
   landed, rebuilt as one collapsed line ("What Claude considered") under the verified answer and above the source
   key, where it stays for the reader to open. Italic, interface sans. Below it, the answer text filling in as a
   marked draft: muted prose under a one-line caption, every citation bracket a "checking…" marker, each new piece
   fading in, a caret at the end of the line being written. */
.thinking { font: var(--w-ui) 12.5px/1.45 var(--font-sans); color: var(--text-4); }
.thinking summary { cursor: pointer; width: fit-content; padding: 2px 0; list-style: none; display: flex; align-items: center; gap: 7px; }
.thinking summary::-webkit-details-marker { display: none; }
.thinking summary::before { content: ""; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .2s ease; flex: none; margin: 0 1px 1px 2px; }
.thinking[open] summary::before { transform: rotate(45deg); margin-bottom: 3px; }
.thinking summary:hover { color: var(--text-3); }
.thinking-body { margin-top: 4px; max-height: 10.2em; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; font-style: italic; color: var(--text-3); overflow-wrap: anywhere; display: flex; flex-direction: column; gap: 6px; transition: max-height .35s ease; }
.thinking-body p { margin: 0; }
.thinking.is-faded .thinking-body { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 1.6em); mask-image: linear-gradient(to bottom, transparent 0, #000 1.6em); }   /* only once something is scrolled above */
.thinking.is-answering .thinking-body { max-height: 4.4em; }
.thinking.is-done .thinking-body { max-height: none; overflow: visible; -webkit-mask-image: none; mask-image: none; }
/* text that is still being written keeps its earlier line breaks (the answer body's text-wrap: pretty would re-break
   the last lines of a paragraph as each piece lands) */
.thinking-body, .answer-live { text-wrap: stable; }
/* a piece of streamed text fades in as it is written; the caret marks the end of the line being written */
.reveal { animation: reveal .32s ease-out both; }
.caret { display: inline-block; width: 2px; height: .9em; margin-left: 2px; vertical-align: -.1em; border-radius: 1px; background: var(--accent); animation: blink 1s steps(2, start) infinite; }
.answer-live { display: flex; flex-direction: column; gap: 12px; color: var(--text-2); }
.answer-live-note { font: var(--w-ui) 12.5px/1.45 var(--font-sans); font-style: italic; color: var(--text-4); }
.answer-live.is-withdrawn { opacity: .4; transition: opacity .3s ease-out; }   /* a draft that is being written again: it goes when the second writing begins */
.answer-live.is-withdrawn .caret { display: none; }
@media (prefers-reduced-motion: reduce) { .answer-live.is-withdrawn { transition: none; } }
.cite-pending { font: var(--w-ui) 11.5px/1.3 var(--font-sans); font-style: italic; color: var(--text-4); border: 1px dashed var(--line-strong); border-radius: 4px; padding: 0 5px; margin: 0 1px; white-space: nowrap; cursor: help; }

/* the source key under a rule: number square · Ep N · series square + title · arrow down */
.answer-sources { border-top: 1px solid var(--line-weak); padding-top: 14px; margin-top: 2px; display: flex; flex-direction: column; gap: 0; }
.sources-caption { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--text-4); margin-bottom: 6px; flex-wrap: wrap; }
.source-row { display: grid; grid-template-columns: 20px 50px 1fr auto; align-items: baseline; gap: 8px; padding: 5px 8px; margin: 0 -8px; border-radius: 8px; border: 0; background: transparent; color: var(--text); font-size: 12.5px; text-align: left; text-decoration: none; }
.source-row:hover { background: var(--tint-weak); color: var(--text); }
.source-row.is-active { background: var(--accent-row); }
.source-row.is-active .source-ep { color: var(--text-3); }
.source-n { font-size: 10.5px; font-weight: var(--w-mid); font-variant-numeric: tabular-nums; width: 18px; height: 17px; border-radius: 4px; background: var(--tint-14); color: var(--text-2); display: flex; align-items: center; justify-content: center; align-self: center; }
.source-ep { color: var(--text-4); font-variant-numeric: tabular-nums; white-space: nowrap; }
.source-title { display: flex; align-items: baseline; gap: 8px; min-width: 0; font: 400 15.5px/1.3 var(--font-serif); }
.source-title span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.series-sq { width: 8px; height: 8px; border-radius: 2px; background: var(--series, var(--series-none)); flex: none; }
.source-row svg { width: 12px; height: 12px; color: var(--text-4); align-self: center; opacity: 0; }
.source-row:hover svg, .source-row:focus-visible svg, .source-row.is-active svg { opacity: 1; }

/* ---- on this day -------------------------------------------------------------------------------- */
.otd { width: 100%; max-width: calc(var(--w-results) + 2 * var(--gutter)); margin: 0 auto; padding: 36px var(--gutter) 0; display: flex; flex-direction: column; gap: 14px; }
.otd-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.otd-title { margin: 0; display: flex; align-items: baseline; gap: 6px; font-size: 13.5px; font-weight: var(--w-strong); }
.otd-eyebrow { font-weight: var(--w-strong); }
.otd-date { color: var(--text-4); font-weight: var(--w-ui); }
.otd-date:not(:empty)::before { content: "· "; }
.otd-tools { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.otd-count { font-size: 12px; color: var(--text-4); margin-right: 6px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.otd-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.otd-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.otd-year-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.otd-year { font: var(--w-mid) 28px/1 var(--font-serif); font-variant-numeric: tabular-nums; color: var(--text); }
.otd-kind { font-size: 11.5px; padding: 2px 7px; border-radius: 4px; color: var(--tag-text); background: var(--kind-event); }
.otd-kind.born { background: var(--kind-born); }
.otd-kind.died { background: var(--kind-died); }
/* the tiny button on a card: takes the card to whichever tab is selected — the name for Find, a question for
   Ask — and only writes it into the field. Outline by default, the accent when it is about to write a question. */
.otd-act { margin-left: auto; align-self: center; display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  color: var(--text-3); font-size: 11.5px; line-height: 1.45; white-space: nowrap; }
.otd-act:hover { background: var(--hover); color: var(--text); }
.otd-act-icon { width: 11px; height: 11px; }
.otd-act.is-ask { border-color: var(--accent); color: var(--accent-text); }
.otd-act.is-ask .otd-act-icon { color: var(--accent); }
.otd-text { margin: 0; flex: 1; font-size: 13.5px; line-height: 1.45; color: var(--text-2); text-wrap: pretty; min-height: 58px; }
.otd-show { border-top: 1px solid var(--line-weak); padding-top: 10px; display: flex; flex-direction: column; gap: 5px; }
.otd-ep { background: none; border: 0; padding: 0; text-align: left; font-size: 13.5px; font-weight: var(--w-mid); line-height: 1.35; color: var(--text); text-wrap: pretty; }
.otd-ep:hover { color: var(--mineral); }
.otd-ep .epn { font-weight: var(--w-mid); }
.otd-ep-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--text-4); }
.otd-listen { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
.otd-listen svg { width: 11px; height: 11px; }
.otd-time { font: 400 11.5px/1.2 var(--font-mono); color: var(--text-4); }
.otd-wiki { margin-top: auto; align-self: flex-start; font-size: 11px; color: var(--text-4); display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
.otd-wiki:hover { color: var(--mineral); text-decoration: underline; }
.otd-wiki svg { width: 10px; height: 10px; }
.otd-empty { grid-column: 1 / -1; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; font-size: 13.5px; color: var(--text-3); }
/* the one-line form while results are on screen: click to expand the cards */
.otd-compact { display: none; width: 100%; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 9px 14px; font-size: 13px; color: var(--text-3); text-align: left; }
.otd-compact:hover { background: var(--hover); }
.otd-compact .otd-eyebrow { color: var(--text); white-space: nowrap; }
.otd-compact-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.otd-compact-more { display: inline-flex; align-items: center; gap: 2px; color: var(--text-4); font-size: 12.5px; white-space: nowrap; }
.otd-compact-more svg { width: 12px; height: 12px; }
.otd.is-collapsed { padding-top: 24px; gap: 0; }
.otd.is-collapsed .otd-head, .otd.is-collapsed .otd-list { display: none; }
.otd.is-collapsed .otd-compact { display: flex; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .otd-compact:hover { background: #33322F; } }

/* ---- footer -------------------------------------------------------------------------------------- */
/* small print, sized like small print: two lines, 11.5px, and the row is centred on them so the mark opposite
   sits on the same optical line. It is the last thing on the page and should read as a caption, not a section. */
.foot { margin-top: auto; border-top: 1px solid var(--line-weak); }
.foot-inner { padding: 11px var(--gutter) 13px; display: flex; justify-content: space-between; align-items: center; gap: 28px; font-size: 11.5px; color: var(--text-4); }
.foot-text { display: flex; flex-direction: column; gap: 1px; max-width: 940px; min-width: 0; }
.disclosure { margin: 0; line-height: 1.45; }
.powered { margin: 0; white-space: nowrap; color: var(--text-2); }

/* ---- motion: only while Claude works. The spark breathes, the composing bars shimmer, the streamed text is paced
   and fades in behind a caret, the thinking box shrinks when the answer starts (the stream
   should read as one flow, with something moving in the box before it starts). A card flashes when a citation
   is clicked. Under prefers-reduced-motion none of it moves: the text is shown in pieces once a second. ------ */
@keyframes breathe { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.9); } }
@keyframes shimmer { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
@keyframes reveal { from { opacity: 0; } to { opacity: 1; } }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .answer.is-busy .answer-spark { animation: none; }
  .answer.is-busy .composing .bar { animation: none; background: var(--tint-12); }
  .reveal { animation: none; }
  .caret { display: none; }
  .thinking-body { transition: none; }
  .thinking summary::before { transition: none; }
  html { scroll-behavior: auto; }
}

/* ---- phone (< 640px) ---------------------------------------------------------------------------- */
@media (max-width: 640px) {
  :root { --gutter: 16px; }
  .top-inner { padding: 14px var(--gutter); }
  .brand-sub { display: none; }
  .hero { padding-top: 36px; gap: 18px; }
  .hero > div[role="tabpanel"] { gap: 18px; }
  .headline { font-size: 30px; line-height: 1.1; }
  .tabs { gap: 0; }
  .tab { flex: 1; padding: 8px 4px 10px; }
  .tab-label { font-size: 14.5px; }
  .field { padding: 6px 6px 6px 14px; gap: 8px; }
  .field input { font-size: 16px; }         /* 16px stops iOS zooming the page on focus */
  .field-hint { display: none; }
  .field-go { padding: 0; justify-content: center; border-radius: 50%; }
  .field-go span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .field-go-icon { display: block; }
  .try .chip { max-width: 100%; }
  .field-form[data-how="ask"] ~ .try .chip { flex: 1 1 100%; }
  .results { padding-top: 24px; padding-bottom: 40px; }
  .results-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .card { padding: 16px 16px; }
  .card-title { font-size: 19px; }
  .btn-listen, .time, .chip, .more-link, .otd-ep, .source-row, .btn, .btn-link, .tail-note button, .otd-listen, .otd-wiki, .otd-compact, .top-link, .seg-opt span { min-height: 44px; }
  /* a 44px-tall pill beside a 28px year would wreck the row, so this one grows its hit area, not its box */
  .otd-act { position: relative; }
  .otd-act::after { content: ""; position: absolute; inset: -12px -8px; }
  .btn-link, .tail-note button, .otd-listen, .otd-wiki, .top-link, .seg-opt span { display: inline-flex; align-items: center; }
  .icon-btn { width: 44px; height: 44px; }
  .field-go { width: 44px; height: 44px; }
  .time { padding: 5px 10px; }
  .more-link { margin-left: 0; }
  .otd { padding-top: 28px; }
  .otd-list { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); gap: 10px; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 6px; -webkit-overflow-scrolling: touch; }
  .otd-card { flex: 0 0 82%; scroll-snap-align: start; }
  .otd-text { min-height: 0; }
  .answer { padding: 18px 18px 16px; gap: 14px; }
  .answer-question { font-size: 22px; padding-bottom: 13px; }
  .answer-body { font-size: 17px; line-height: 1.58; gap: 13px; }
  .answer-body blockquote { padding-left: 15px; font-size: 17px; }
  .answer-body .standfirst { font-size: 18.5px; }
  .trih-lead { font-size: 19px; }
  .answer-head-right .answer-meta { display: none; }
  /* the citation-removed tip spans the answer's width under its line instead of hanging off the marker's edge */
  .answer-body { position: relative; }
  .cite-removed { position: static; }
  .cite-removed .tip { left: 0; right: 0; width: auto; bottom: auto; margin-top: 4px; }
  .source-row { grid-template-columns: 20px 48px 1fr auto; align-items: center; }
  .source-title span:last-child { white-space: normal; }
  .foot-inner { flex-direction: column; align-items: flex-start; gap: 10px; }
}

@media print {
  .room { display: none; }
  .top-nav, .field-go, .field-hint, .try, .seg, .seg-help, .icon-btn, .otd-tools, .tail { display: none !important; }
  .card, .answer, .otd-card { break-inside: avoid; }
}