/* Gather, direction B, "Editorial". Switch it on with data-direction="b" on <html>.
   A characterful display serif for the voices and the questions, a clean grotesk for the controls, each screen a page of
   its own warm colour from a short palette, stamps and stickers for the codename and the keepsake, underlines and
   marginalia. The fun comes from the mix; the trust from plain words in a calm column.

   Faces: Fraunces (roman and italic, instanced to a soft, wonky cut) and Geist, both SIL Open Font Licence 1.1
   (OFL-Fraunces.txt, OFL-Geist.txt). Latin subset for en, fr, es, it. About 90 KB of fonts.

   Every text pairing, WCAG 2.1 contrast, computed by app/looksheet.py and checked by tests/test_design.py:
     ink on ground 14.96 | ink on card 16.4 | ink-soft on ground 9.33 | ink-soft on card 10.22
     on-mark (white) on mark (tomato) 5.35 | on-mark on mark-deep 7.55 | ink on mark-wash 13.47 | button text on button 16.4
     ink on each page colour: peach 11.42, blush 10.02, butter 12.53, clay 8.78, apricot 9.59
     ink-soft on each page colour: peach 7.12, blush 6.25, butter 7.81, clay 5.48, apricot 5.98
     bad on card 7.26 | record on card 6.33
   The tightest are white on tomato, 5.35, and quiet ink on the clay page, 5.48. Touch targets are --tap (44px). Motion is cut by base.css under prefers-reduced-motion.

   Full-experience round: no new colour; every new surface reuses a pairing above. Those the new rules lean on:
     ink on card 16.4 (recorder, resume note, upload rows, keepsake) | white on bad 7.49 (delete button)
     white on bad darkened 20% with --black 9.91 (its hover) | white on record 6.54 (recording button)
     ink on mark-wash 13.47 (hovered mode button) | ink on each page colour 8.78 to 12.53 (footer links, quoted answers)
   A chosen answer is tomato AND bold, a chosen radio filled AND ringed, the record button red AND says Stop; the focus ring
   is ink. In-sentence links keep a 44px target as vertical padding, so the sentence does not break. */

@font-face { font-family: "Fraunces"; src: url("/static/fonts/Fraunces-Roman.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("/static/fonts/Fraunces-Italic.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Geist"; src: url("/static/fonts/Geist.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }

:root[data-direction="b"] {
  --ground: #f8f0e3;
  --card: #fffbf3;
  --ink: #2b1810;
  --ink-soft: #503a31;
  --line: #dcc9b0;
  --field: #fffdf8;

  --mark: #c8321a;
  --mark-deep: #a02612;
  --mark-wash: #fbe0d4;
  --on-mark: #ffffff;
  --button-bg: var(--ink);
  --button-ink: var(--card);
  --button-line: var(--ink);
  --focus: var(--ink);

  --bad: #a4210f;
  --bad-wash: #f4d9d3;
  --problem-wash: #f9e7e2;
  --good: #1f5c2e;
  --wash: #f1e6d3;
  --white: #fff;
  --black: #000;
  --record: #b3261e;

  --night-ground: #2b1810;
  --night-card: #3a2218;
  --night-ink: #f8f0e3;

  /* The short palette: one warm page per question screen, in turn. */
  --page-1: #ffc9a8;
  --page-2: #f9b5c4;
  --page-3: #ffd98a;
  --page-4: #f4a98c;
  --page-5: #ffb27a;

  --font-voice: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-ui: "Geist", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Fraunces", "Iowan Old Style", Georgia, serif;
  --size-caption: 14px;
  --size-body: 17px;
  --size-lead: 28px;
  --size-title: 40px;
  --size-display: 56px;
  --size-numeral: 64px;
  --leading-body: 1.55;
  --leading-tight: 1.08;
  --weight-title: 700;
  --weight-lead: 500;
  --weight-button: 600;
  --track-title: -0.02em;
  --label-case: uppercase;
  --label-track: 0.1em;

  --s1: 6px;
  --s2: 10px;
  --s3: 16px;
  --s4: 24px;
  --s5: 40px;
  --s6: 64px;
  --s7: 104px;

  --corner-card: 12px;
  --corner-control: 10px;
  --corner-button: 999px;
  --corner-tag: 4px;
  --stroke: 2px;
  --tilt: -6deg;
  --lift: none;
  --lift-hover: none;
  --lift-press: none;
  --measure: 540px;
  --curve: cubic-bezier(0.2, 0.7, 0.2, 1);
  --fast: 200ms;
  --slow: 420ms;
  --tap: 44px;

  --link: var(--ink);
}

/* A coloured page. The class goes on <body> in the app and on a frame on the look sheet. */
:root[data-direction="b"] .screen-1 { --ground: var(--page-1); }
:root[data-direction="b"] .screen-2 { --ground: var(--page-2); }
:root[data-direction="b"] .screen-3 { --ground: var(--page-3); }
:root[data-direction="b"] .screen-4 { --ground: var(--page-4); }
:root[data-direction="b"] .screen-5 { --ground: var(--page-5); }
:root[data-direction="b"] .screen-1,
:root[data-direction="b"] .screen-2,
:root[data-direction="b"] .screen-3,
:root[data-direction="b"] .screen-4,
:root[data-direction="b"] .screen-5 { background: var(--ground); color: var(--ink); transition: background var(--slow) var(--curve); }

:root[data-direction="b"] :is(.body, .caption, .lead, .legal) a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 2px; text-decoration-color: var(--mark); }

/* The masthead. */
:root[data-direction="b"] .wordmark { font-weight: 700; font-style: italic; letter-spacing: -0.02em; font-size: var(--size-lead); }
:root[data-direction="b"] .wordmark .dot { width: 0.2em; height: 0.2em; }

/* Headlines in the display serif, with a tomato underline you can see being drawn. */
:root[data-direction="b"] .title { text-decoration: underline; text-decoration-color: var(--mark); text-decoration-thickness: 0.09em; text-underline-offset: 0.12em; }
:root[data-direction="b"] .lead { line-height: 1.22; font-variation-settings: "SOFT" 100; }
:root[data-direction="b"] .body { font-size: var(--size-body); }
:root[data-direction="b"] .caption { font-size: var(--size-caption); }

/* Sections sit straight on the page, divided by a rule, as in a magazine. */
:root[data-direction="b"] .card { background: transparent; border: 0; border-top: var(--stroke) solid var(--ink); border-radius: 0; padding: var(--s4) 0 var(--s3); }
:root[data-direction="b"] .card + .card { margin-top: var(--s4); }
:root[data-direction="b"] .question { border-top: 0; padding-top: 0; }
:root[data-direction="b"] .hero { border-top-width: var(--stroke); }
:root[data-direction="b"] .hero .lead { font-size: var(--size-title); font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; }
:root[data-direction="b"] .hero .title { font-size: var(--size-display); line-height: 1; }

/* Marginalia: the count is a handwritten-looking note in the margin. */
:root[data-direction="b"] .progress { display: inline-block; font-family: var(--font-voice); font-style: italic; font-weight: 500; font-size: var(--size-lead); line-height: 1; color: var(--ink); border-bottom: 2px dashed var(--ink); padding-bottom: var(--s1); transform: rotate(-2deg); transform-origin: left center; margin: 0 0 var(--s4); }
:root[data-direction="b"] .caption { font-family: var(--font-ui); }
:root[data-direction="b"] .card > .caption:last-child { font-style: italic; }

/* Fields and labels. */
:root[data-direction="b"] label:not(.option, .choice, .check, .pick-button, .look-pick, .audio-upload) { font-weight: 600; color: var(--ink); font-size: var(--size-caption); }
:root[data-direction="b"] input[type="text"],
:root[data-direction="b"] input[type="password"],
:root[data-direction="b"] input[type="email"],
:root[data-direction="b"] textarea,
:root[data-direction="b"] select { border-color: var(--ink); background: var(--field); }

/* Buttons: ink pills that turn tomato on a hover, quiet ones that fill in. */
:root[data-direction="b"] .button,
:root[data-direction="b"] button { letter-spacing: 0.01em; }
:root[data-direction="b"] .button:hover,
:root[data-direction="b"] button:hover { background: var(--mark); border-color: var(--mark); color: var(--on-mark); }
:root[data-direction="b"] .button.quiet:hover,
:root[data-direction="b"] button.quiet:hover { background: var(--ink); border-color: var(--ink); color: var(--card); }
:root[data-direction="b"] .modes button[aria-pressed="true"] { background: var(--ink); color: var(--card); }
:root[data-direction="b"] button[disabled]:hover { background: var(--button-bg); border-color: var(--button-line); color: var(--button-ink); }

/* Choices: ticket-like rows; the chosen one gets a tomato sticker fill. */
:root[data-direction="b"] .option span { border-color: var(--ink); border-radius: var(--corner-control); font-family: var(--font-voice); font-size: var(--size-lead); font-weight: 500; line-height: 1.15; padding: var(--s3); }
:root[data-direction="b"] .option:hover span { background: var(--card); transform: rotate(-0.6deg); }
:root[data-direction="b"] .option input:checked + span { background: var(--mark); color: var(--on-mark); font-weight: 600; transform: rotate(-0.6deg); }
:root[data-direction="b"] .choice input { accent-color: var(--mark); }

/* Stamps and stickers. */
:root[data-direction="b"] .stamp { font-family: var(--font-voice); font-style: italic; font-weight: 700; text-transform: none; letter-spacing: 0; font-size: var(--size-lead); padding: var(--s1) var(--s4); }
:root[data-direction="b"] .codename-tag { display: block; width: fit-content; margin: var(--s2) 0 var(--s4); font-size: var(--size-title); text-transform: uppercase; font-style: normal; letter-spacing: 0.04em; border: 2px dashed var(--on-mark); outline: 6px solid var(--mark); }
:root[data-direction="b"] .notice { border-left-color: var(--mark); background: var(--card); border: var(--stroke) dashed var(--ink); border-radius: var(--corner-control); }
:root[data-direction="b"] .badge { border-radius: var(--corner-tag); }
:root[data-direction="b"] .mono { letter-spacing: 0.02em; }

/* The ten cards: cards dealt a little crooked, which straighten when you reach for them. */
:root[data-direction="b"] .fact.down { border: var(--stroke) solid var(--ink); border-radius: var(--corner-control); font-style: italic; font-weight: 700; font-size: var(--size-numeral); line-height: 1; transform: rotate(-2deg); outline: 2px dashed var(--on-mark); outline-offset: -10px; }
:root[data-direction="b"] .card-slot:nth-child(even) .fact.down { transform: rotate(2deg); }
:root[data-direction="b"] .fact.down:not([disabled]):hover { transform: rotate(0) translateY(-4px); background: var(--mark-deep); }
:root[data-direction="b"] .fact.up { background: var(--card); border: var(--stroke) solid var(--ink); border-top: var(--s2) solid var(--mark); border-radius: var(--corner-control); padding: var(--s4); }
:root[data-direction="b"] .fact.up .body { font-family: var(--font-voice); font-size: var(--size-lead); line-height: 1.22; }

/* The keepsake: a postage-stamp page with a round sticker pressed on it. */
:root[data-direction="b"] .keepsake { container-type: inline-size; background: var(--card); border: var(--stroke) dashed var(--ink); border-radius: var(--corner-control); padding: var(--s5) var(--s4); }
:root[data-direction="b"] .keepsake-app { font-style: italic; font-weight: 700; letter-spacing: -0.02em; font-size: var(--size-title); line-height: 1; }
:root[data-direction="b"] .keepsake .stamp { display: grid; place-items: center; width: 7em; height: 7em; margin-inline: auto; padding: 0; border-radius: 50%; font-size: var(--size-lead); outline: 2px dashed var(--on-mark); outline-offset: -10px; }
:root[data-direction="b"] .keepsake-code { font-style: normal; font-weight: 800; font-size: min(var(--size-numeral), 19cqi); line-height: 1; letter-spacing: -0.02em; text-decoration: underline; text-decoration-color: var(--mark); text-decoration-thickness: 0.07em; text-underline-offset: 0.1em; overflow-wrap: anywhere; }
:root[data-direction="b"] .keepsake-date { font-family: var(--font-voice); font-style: italic; color: var(--ink-soft); font-size: var(--size-lead); }

/* The recorder and the play control. */
:root[data-direction="b"] .rec-toggle { min-width: 9em; }
:root[data-direction="b"] .rec[data-state="recording"] .rec-toggle,
:root[data-direction="b"] .rec[data-state="recording"] .rec-toggle:hover { background: var(--record); border-color: var(--record); color: var(--white); }
:root[data-direction="b"] button.play[data-state="playing"] { background: var(--mark); color: var(--on-mark); border-color: var(--mark); }

/* ---- Every real guest page ---- */
:root[data-direction="b"] ::selection { background: var(--ink); color: var(--card); }
:root[data-direction="b"] .card:not(.question) > h1.lead { font-size: var(--size-title); font-weight: var(--weight-title); line-height: var(--leading-tight); letter-spacing: var(--track-title); }
:root[data-direction="b"] .card:not(.question) > h1.lead,
:root[data-direction="b"] .legal-record h1 { font-weight: 700; text-decoration: underline; text-decoration-color: var(--mark); text-decoration-thickness: 0.09em; text-underline-offset: 0.12em; }
:root[data-direction="b"] .caption a.inline-link { display: inline; min-height: 0; padding-block: calc((var(--tap) - 1lh) / 2); }
:root[data-direction="b"] .caption a:not(.inline-link), :root[data-direction="b"] .foot a { min-width: var(--tap); }

/* The footer is the colophon: a rule, then links underlined in tomato. */
:root[data-direction="b"] .foot { padding: var(--s5) var(--s4); }
:root[data-direction="b"] .foot nav { max-width: calc(var(--measure) - 2 * var(--s4)); margin: 0 auto; padding-top: var(--s3); border-top: var(--stroke) solid var(--ink); justify-content: flex-start; gap: 0 var(--s4); }
:root[data-direction="b"] .foot a { color: var(--ink); font-family: var(--font-ui); font-weight: 500; text-decoration: underline; text-decoration-color: var(--mark); text-decoration-thickness: 2px; text-underline-offset: 4px; }

:root[data-direction="b"] .resume { background: var(--card); border: var(--stroke) dashed var(--ink); border-radius: var(--corner-card); padding: var(--s4); margin-bottom: var(--s4); }

/* Radios: a ringed dot that fills with tomato. */
:root[data-direction="b"] .choice input { appearance: none; -webkit-appearance: none; flex: none; display: grid; place-content: center; width: 24px; height: 24px; margin: 0; border: var(--stroke) solid var(--ink); border-radius: 50%; background: var(--card); }
:root[data-direction="b"] .choice input::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--mark); transform: scale(0); transition: transform var(--fast) var(--curve); }
:root[data-direction="b"] .choice input:checked::before { transform: scale(1); }
:root[data-direction="b"] .share { margin-top: var(--s4); }
:root[data-direction="b"] .share legend { font-weight: 600; color: var(--ink); }

/* Type or speak: one pill, two halves. */
:root[data-direction="b"] .modes { gap: 0; padding: 3px; background: var(--card); border: var(--stroke) solid var(--ink); border-radius: var(--corner-button); }
:root[data-direction="b"] .modes button { border-color: transparent; background: transparent; }
:root[data-direction="b"] .modes button:hover:not([aria-pressed="true"]) { background: var(--mark-wash); border-color: transparent; color: var(--ink); }
:root[data-direction="b"] .modes button[aria-pressed="true"] { border-color: var(--ink); }

:root[data-direction="b"] button[aria-current="true"]::after { content: ""; width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--mark); }
:root[data-direction="b"] button.danger { background: var(--bad); border-color: var(--bad); color: var(--white); }
:root[data-direction="b"] button.danger:hover { background: color-mix(in srgb, var(--bad), var(--black) 20%); border-color: color-mix(in srgb, var(--bad), var(--black) 20%); color: var(--white); }
:root[data-direction="b"] .fact.down:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* The hello sticker stays on one line inside the column, whatever the codename. */
:root[data-direction="b"] .hero { container-type: inline-size; }
:root[data-direction="b"] .codename-tag { max-width: calc(100% - var(--s3)); margin-left: var(--s2); white-space: nowrap; padding-inline: var(--s3); font-size: min(var(--size-title), 10.5cqi); }

/* What a guest wrote is quoted, in the display italic with a tomato bar. */
:root[data-direction="b"] .answer-text,
:root[data-direction="b"] .mine-item [data-current] { font-family: var(--font-voice); font-style: italic; font-size: calc(var(--size-lead) * 0.75); line-height: 1.35; padding-left: var(--s3); border-left: 4px solid var(--mark); }
:root[data-direction="b"] .mine-item h3.body,
:root[data-direction="b"] .guesses .body { font-family: var(--font-voice); font-size: calc(var(--size-lead) * 0.75); font-weight: 700; line-height: 1.25; }
:root[data-direction="b"] #ask-back .option span { font-size: calc(var(--size-lead) * 0.75); }
:root[data-direction="b"] .guesses li, :root[data-direction="b"] .plain li { border-bottom: var(--stroke) dashed var(--ink); }
:root[data-direction="b"] .followup-item { border-top: var(--stroke) dashed var(--ink); }
:root[data-direction="b"] .file { background: var(--card); border: var(--stroke) dashed var(--ink); border-radius: var(--corner-control); }

/* The recorder is a card with a big record button; the take being made is red and says Stop. */
:root[data-direction="b"] .rec { background: var(--card); border: var(--stroke) solid var(--ink); border-radius: var(--corner-card); padding: var(--s4); }
:root[data-direction="b"] .rec-toggle::before { content: ""; flex: none; width: 0.7em; height: 0.7em; border-radius: 50%; background: var(--mark); }
:root[data-direction="b"] .rec[data-state="recording"] .rec-toggle::before { border-radius: 2px; background: var(--white); }
:root[data-direction="b"] .rec-live { font-family: var(--font-voice); font-style: italic; font-size: var(--size-lead); font-weight: 700; line-height: 1.1; }
:root[data-direction="b"] .rec-clock { font-weight: 500; font-variant-numeric: tabular-nums; }
:root[data-direction="b"] button.play { background: var(--card); border-color: var(--ink); }

/* The legal pages: a quieter lead, ruled headings, languages as pills. */
:root[data-direction="b"] .legal .lead { font-size: calc(var(--size-lead) * 0.75); line-height: 1.4; }
:root[data-direction="b"] .legal-heading { font-weight: 700; padding-top: var(--s3); border-top: var(--stroke) solid var(--ink); }
:root[data-direction="b"] .legal-languages { border-top: var(--stroke) solid var(--ink); }
:root[data-direction="b"] .legal-language { border-radius: var(--corner-button); border-width: var(--stroke); }
:root[data-direction="b"] .legal-language.is-current { background: var(--card); }
:root[data-direction="b"] .legal-record h2 { font-weight: 700; }
:root[data-direction="b"] .table-wrap tr { border: var(--stroke) solid var(--ink); border-radius: var(--corner-control); }

/* Wide screens: the column and the type grow, nothing else changes. */
@media (min-width: 900px) {
  :root[data-direction="b"] { --measure: 680px; --size-body: 19px; --size-caption: 15px; --size-lead: 30px; --size-title: 48px; --size-display: 68px; }
}

/* The owner's pages. */
:root[data-direction="b"] .adminhead { border-bottom: var(--stroke) solid var(--ink); padding-bottom: var(--s3); }
:root[data-direction="b"] .adminnav a { border-radius: var(--corner-button); border-width: var(--stroke); border-color: var(--ink); }
:root[data-direction="b"] .adminnav a:hover { background: var(--mark-wash); }
:root[data-direction="b"] .adminnav a[aria-current="page"] { background: var(--mark); color: var(--on-mark); border-color: var(--mark); }
:root[data-direction="b"] .admin .card { border: var(--stroke) solid var(--ink); border-radius: var(--corner-card); background: var(--card); padding: var(--s4); }
:root[data-direction="b"] .admin .card + .card { margin-top: 0; }
:root[data-direction="b"] .adminword { font-family: var(--font-ui); letter-spacing: 0.1em; }