/* ==========================================================================
   PAPER  ·  the paper component: the letter, the reply slip, the result slip (Today after the real try), the quiz result and the game result (SPEC 6, 7.9, 7.17 to 7.19).
   It is <link>ed from index.html in every build (a lazy sheet would show an unstyled result slip, or cost a round trip on Today after the try, the one screen that should be instant). Only the 12 KB tooth-paper.webp
   is on demand, and by CSS alone: it loads where a .hl-paper is drawn. Rankings does not use paper (its certificate is a card on the dark).
   A DIM parchment sheet (luminance .475, below the lit window's .55) with fine tooth and dark ink, lying on the dark with its top edge catching the light. Only what is written TO the player lives on it.
   Foil is a stroke of 2 px or less (a rule, a keyline, the seal's ring): never a body, never on type. Fonts: Playfair 400 and Red Hat 400, 500, 600, 700 (labels); Red Hat Italic 400 on the letter and the reply slip only.
   The same sheets exist as dark card stock (.hl-paper--dark): the markup is the same, one class switches the custom properties (the optional "Dark letters" setting).
   ========================================================================== */
.hl-paper {
  position: relative; color: var(--hl-ink);
  background:
    var(--hl-tooth-paper) 0 0 / 160px 160px,
    radial-gradient(ellipse 70% 36% at 16% 36%, rgba(255, 250, 232, .16), rgba(255, 250, 232, 0) 72%) 0 0 / 100% 560px repeat-y,
    radial-gradient(ellipse 60% 38% at 88% 70%, rgba(105, 74, 38, .10), rgba(105, 74, 38, 0) 72%) 0 0 / 100% 560px repeat-y,
    var(--hl-paper);
  border-radius: var(--hl-r-3); box-shadow: var(--hl-e-paper);
  --kl-bg: var(--hl-foil-border);
  --hl-ring-paper-in: inset 0 0 0 1px var(--hl-paper-hair);
  --hl-ring-paper-ctl-in: inset 0 0 0 1px var(--hl-paper-hair-2);
  --hl-ring-paper-ctl: 0 0 0 1px var(--hl-paper-hair-2);
  --hl-ring-ink-in: inset 0 0 0 1px var(--hl-ink);
  --hl-rule-paper-l: -1px 0 0 var(--hl-paper-hair);
  --hl-rule-paper-t: 0 -1px 0 var(--hl-paper-hair);
  --hl-paper-bad: #8F2038;          /* a wrong answer's mark on paper (4.3:1 on the sheet; a cross carries it as well) */
}
.hl-paper .hl-label { color: var(--hl-ink-2); }
/* on paper the focus ring is ink: gold is 1.41:1 on it (ink is 7.98:1); the dark stock keeps the gold */
.hl-paper :is(:focus-visible, .is-focus) { outline: 2px solid var(--hl-ink); outline-offset: 2px; }
.hl-paper--dark :is(:focus-visible, .is-focus) { outline: var(--hl-focus); }
.hl-paper .hl-link-ink:is(:focus-visible, .is-focus) { outline-offset: -4px; }          /* it sits on the sheet's foot: a ring 2 px outside fell off the paper onto the night */
.hl-paper :is(h1, h2, .hl-fig) { text-shadow: 0 1px 0 rgba(255, 252, 240, .40); }          /* letterpress */
.hl-foil-rule { height: 1px; background: var(--hl-foil-on-paper); }

/* ---- the letter (SPEC 7.17): a letterhead (a blind-embossed Star, the chapter, the title, the sender, a foil rule), the greeting in italic, paragraphs at 16/26, taped pictures, a sign-off with its seal, a P.S. ---- */
.hl-letter { padding: var(--hl-sp-24) var(--hl-sp-24) var(--hl-sp-32); }
.hl-letter__head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hl-emboss-star { width: 40px; height: 40px; }
.hl-letter__head .hl-label { margin-top: var(--hl-sp-8); }
.hl-letter__title { margin: var(--hl-sp-4) 0 0; font: 400 var(--hl-t-title-size) / var(--hl-t-title-lh) var(--hl-font-display); font-variant-numeric: lining-nums; color: var(--hl-ink); text-wrap: balance; }
.hl-letter__from { margin: var(--hl-sp-4) 0 0; font: 500 var(--hl-t-body-s-size) / var(--hl-t-body-s-lh) var(--hl-font-ui); letter-spacing: .005em; color: var(--hl-ink-2); }          /* 14 px: a caption that carries a message is never under 14 */
.hl-letter__head .hl-foil-rule { width: 100%; margin-top: var(--hl-sp-16); }
.hl-letter__hello { margin: var(--hl-sp-16) 0 0; font: italic 400 1.25rem / 1.4 var(--hl-font-ui); color: var(--hl-ink); }
.hl-lp { margin: var(--hl-sp-12) 0 0; font: 400 var(--hl-t-body-size) / var(--hl-t-letter-lh) var(--hl-font-ui); color: var(--hl-ink); text-wrap: pretty; }
.hl-letter__hello + .hl-lp { margin-top: var(--hl-sp-8); }
.hl-letter figure { margin-top: var(--hl-sp-16); }
.hl-letter figcaption { margin-top: var(--hl-sp-8); font: italic 400 .875rem / 1.4286 var(--hl-font-ui); color: var(--hl-ink-2); }
.hl-plate--paper { aspect-ratio: 3 / 2; border-radius: var(--hl-r-1); box-shadow: var(--hl-e-photo); background: var(--hl-paper-wash); }
.hl-letter__end { margin-top: var(--hl-sp-24); display: flex; align-items: flex-end; gap: var(--hl-sp-12); }
.hl-letter__sign { flex: 1; min-width: 0; margin: 0; font: italic 400 1.125rem / 1.4444 var(--hl-font-ui); color: var(--hl-ink); display: flex; flex-direction: column; white-space: pre-line; }          /* the seal has its own column, so the last word is never covered, at 320 either */
.hl-letter__ps { margin: var(--hl-sp-16) 0 0; font: italic 400 .875rem / 1.4286 var(--hl-font-ui); color: var(--hl-ink-2); }
/* the seal: a blind-embossed P (the paper itself, a light edge up and left, a shade edge down and right, exactly as the Star above the title is embossed) inside ONE 2 px foil ring. No disc, no fill, no highlight. */
.hl-pseal { --kl-inset: 0; --kl-r: 50%; --kl-w: 2px; position: relative; flex: none; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font: 400 2rem / 1 var(--hl-font-display); font-variant-numeric: lining-nums; color: var(--hl-emb-fill); text-shadow: -1px -1px 0 var(--hl-emb-hi), 1px 1px 0 var(--hl-emb-lo); }

/* ---- the reply slip (SPEC 7.18): a label and three dots, Pip's note, a foil rule, the question in Playfair, the answers ---- */
.hl-slip { padding: var(--hl-sp-24); }
.hl-slip__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--hl-sp-8) var(--hl-sp-12); }
.hl-slip__note { margin: var(--hl-sp-12) 0 0; font: italic 400 .875rem / 1.4286 var(--hl-font-ui); color: var(--hl-ink-2); text-wrap: pretty; }
.hl-slip .hl-foil-rule { margin-top: var(--hl-sp-16); }
.hl-slip__q { margin: var(--hl-sp-16) 0 0; font: 400 var(--hl-t-title-size) / var(--hl-t-title-lh) var(--hl-font-display); font-variant-numeric: lining-nums; color: var(--hl-ink); text-wrap: balance; }
.hl-opts { margin-top: var(--hl-sp-16); display: grid; gap: var(--hl-sp-8); }
.hl-opt { position: relative; display: flex; align-items: center; gap: var(--hl-sp-12); width: 100%; min-height: 52px; padding: var(--hl-sp-8) var(--hl-sp-12); border-radius: var(--hl-r-2); background: none; box-shadow: var(--hl-ring-paper-in); color: var(--hl-ink); font: 500 var(--hl-t-body-size) / var(--hl-t-headline-lh) var(--hl-font-ui); text-align: left; cursor: pointer; touch-action: manipulation; }
.hl-opt__key { position: relative; flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; box-shadow: var(--hl-ring-paper-ctl-in); font: 600 .875rem / 1.1429 var(--hl-font-ui); color: var(--hl-ink); }
.hl-opt__key .hl-icon { width: 16px; height: 16px; stroke-width: 2.25; }
.hl-opt__text { min-width: 0; overflow-wrap: anywhere; }
.hl-opt[aria-checked="true"], .hl-opt.is-selected { box-shadow: var(--hl-ring-ink-in); font-weight: 600; }
.hl-opt[aria-checked="true"] .hl-opt__key, .hl-opt.is-selected .hl-opt__key { background: var(--hl-ink); color: var(--hl-paper); box-shadow: none; }          /* a shape, not only a colour: the key fills with ink and holds a check in paper */
.hl-opt[aria-checked="true"] .hl-opt__key .hl-icon, .hl-opt.is-selected .hl-opt__key .hl-icon { stroke: var(--hl-paper); }
.hl-opt:is(:focus-visible, .is-focus) { outline-offset: 2px; }
.hl-opt.is-correct { box-shadow: var(--hl-ring-ink-in); font-weight: 600; }
.hl-opt.is-correct .hl-opt__key { background: var(--hl-ink); color: var(--hl-paper); box-shadow: none; }
.hl-opt.is-correct .hl-opt__key .hl-icon { stroke: var(--hl-paper); }
.hl-opt.is-wrong { box-shadow: var(--hl-ring-bad-in); }
.hl-opt.is-wrong .hl-opt__key { background: var(--hl-paper-bad); color: var(--hl-paper); box-shadow: none; }
.hl-opt.is-wrong .hl-opt__key .hl-icon { stroke: var(--hl-paper); }
.hl-opt:is(:disabled, [aria-disabled="true"], .is-disabled, .is-revealed):not(.is-correct, .is-wrong, .is-loading) { color: var(--hl-ink-2); cursor: default; }
.hl-opt:is(.is-correct, .is-wrong) { cursor: default; }
.hl-opt.is-loading { overflow: hidden; pointer-events: none; color: transparent; background: var(--hl-paper-wash); box-shadow: none; }
.hl-opt.is-loading > * { visibility: hidden; }
.hl-opt.is-loading::after { content: ""; position: absolute; inset: 0; background: var(--hl-shimmer-paper); pointer-events: none; }
.hl-paper .hl-dots { color: var(--hl-ink); }

/* ---- the result slip (SPEC 7.9: Today after the real try; the ticket's footprint plus a foot row) and the big result (7.19: the quiz result and the game result) ---- */
.hl-result { padding: var(--hl-sp-16) var(--hl-sp-24) 0; }          /* with .hl-keyline: the foil stroke 4 px inside the edge */
.hl-result__grid { display: grid; grid-template-columns: 1fr 72px; align-items: center; column-gap: var(--hl-sp-12); }
.hl-result__game { display: block; white-space: normal; overflow-wrap: anywhere; }          /* the game's name wraps in its column (it is longer than the column at 320) */
.hl-result__figs { display: flex; flex-wrap: wrap; row-gap: var(--hl-sp-8); margin-top: var(--hl-sp-8); }          /* three equal columns at 100%; at a larger text size one that no longer fits goes to a second row ("+38" is never broken) */
.hl-result__figs > li { flex: 1 1 calc(100% / 3); min-width: max-content; display: flex; flex-direction: column; padding: 0 0 0 var(--hl-sp-12); }
.hl-result__figs > li:first-child { padding-left: 0; }
.hl-result__figs > li + li { box-shadow: var(--hl-rule-paper-l); }
.hl-result__figs .hl-fig, .hl-big__figs .hl-fig { font-size: var(--hl-t-figure-l-size); line-height: var(--hl-t-figure-l-lh); color: var(--hl-ink); white-space: nowrap; }
.hl-postmark { flex: none; width: 72px; height: 72px; transform: rotate(-9deg); color: var(--hl-ink); opacity: .85; }          /* flex: none (it shrank to 9 px of text at 320 in a flex row); ink at .85 (it was .74: 4.5:1) */
.hl-result__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--hl-sp-12); min-height: var(--hl-tap); margin-top: var(--hl-sp-8); box-shadow: var(--hl-rule-paper-t); }
.hl-result__note { flex: 1 1 8em; margin: 0; font: 500 var(--hl-t-body-s-size) / var(--hl-t-body-s-lh) var(--hl-font-ui); letter-spacing: .005em; color: var(--hl-ink-2); text-wrap: balance; }          /* upright and 14/20: the italic face never loads on Today */
.hl-link-ink { flex: none; display: inline-flex; align-items: center; gap: var(--hl-sp-4); height: var(--hl-tap); padding-left: var(--hl-sp-8); color: var(--hl-ink); font: 600 var(--hl-t-body-s-size) / var(--hl-t-body-s-lh) var(--hl-font-ui); cursor: pointer; }
.hl-link-ink .hl-icon { width: 18px; height: 18px; stroke-width: 2; }

.hl-big { padding: var(--hl-sp-24) var(--hl-sp-24) var(--hl-sp-16); border-radius: var(--hl-r-3); }
.hl-big__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--hl-sp-12); }
.hl-big__top .hl-label { display: block; white-space: normal; overflow-wrap: anywhere; }
.hl-big__title { display: block; margin: 0; font: 600 var(--hl-t-body-s-size) / var(--hl-t-body-s-lh) var(--hl-font-ui); color: var(--hl-ink-2); }          /* the verdict is a sentence, not a caps label */
.hl-big__score { display: block; margin-top: var(--hl-sp-8); font: 300 var(--hl-t-figure-xl-size) / var(--hl-t-figure-xl-lh) var(--hl-font-ui); font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.02em; color: var(--hl-ink); }          /* the only use of weight 300 */
.hl-big__unit { display: block; margin-top: var(--hl-sp-4); color: var(--hl-ink-2); }
.hl-sheet .hl-paper { box-shadow: var(--hl-e-photo); }          /* a slip lying on a sheet of the dark */
.hl-big__figs { display: grid; grid-template-columns: repeat(var(--cols, 2), 1fr); margin-top: var(--hl-sp-16); padding-top: var(--hl-sp-12); box-shadow: var(--hl-rule-paper-t); }
.hl-big__figs > li { display: flex; flex-direction: column; padding-left: var(--hl-sp-16); }
.hl-big__figs > li:first-child { padding-left: 0; }
.hl-big__figs > li + li { box-shadow: var(--hl-rule-paper-l); }
.hl-big__pip { margin-top: var(--hl-sp-12); padding-top: var(--hl-sp-12); display: flex; gap: var(--hl-sp-12); box-shadow: var(--hl-rule-paper-t); }
.hl-big__pip p { margin: 0; font: 500 var(--hl-t-body-s-size) / var(--hl-t-body-s-lh) var(--hl-font-ui); letter-spacing: .005em; color: var(--hl-ink); text-wrap: pretty; }
.hl-big .hl-pip__face, .hl-result .hl-pip__face { background: var(--hl-paper-wash); box-shadow: var(--hl-ring-paper-ctl); }

/* ---- THE FALLBACK (the optional dark stock): the same sheets as dark card stock (s1) with cream ink; the foil stays as gold hairlines. Same markup plus one class. ---- */
.hl-paper--dark { --hl-emb-fill: var(--hl-s1-hi); --hl-emb-hi: rgba(255, 243, 218, .16); --hl-emb-lo: rgba(2, 10, 16, .70); --kl-bg: var(--hl-foil-border-dk); --hl-paper: var(--hl-surface); --hl-paper-wash: rgba(255, 243, 218, .06); --hl-ink: var(--hl-text); --hl-ink-2: var(--hl-text-muted); --hl-paper-hair: rgba(255, 243, 218, .12); --hl-paper-hair-2: rgba(255, 243, 218, .55); --hl-paper-bad: var(--hl-danger);
  background: var(--hl-surface); box-shadow: var(--hl-e1); color: var(--hl-text); }
.hl-paper--dark :is(h1, h2, .hl-fig) { text-shadow: none; }
.hl-paper--dark .hl-foil-rule { background: var(--hl-foil-rail); }
.hl-paper--dark .hl-plate--paper { box-shadow: var(--hl-ring-hair); }
.hl-paper--dark .hl-opt[aria-checked="true"], .hl-paper--dark .hl-opt.is-selected { box-shadow: var(--hl-ring-gold-state-in); }
.hl-paper--dark .hl-opt[aria-checked="true"] .hl-opt__key, .hl-paper--dark .hl-opt.is-selected .hl-opt__key { background: var(--hl-accent-gold); color: var(--hl-bg); }
.hl-paper--dark .hl-opt[aria-checked="true"] .hl-opt__key .hl-icon, .hl-paper--dark .hl-opt.is-selected .hl-opt__key .hl-icon { stroke: var(--hl-bg); }
.hl-paper--dark .hl-link-ink { color: var(--hl-accent-gold); }
.hl-paper--dark .hl-big .hl-pip__face, .hl-paper--dark .hl-result .hl-pip__face { background: var(--hl-surface-raised); box-shadow: var(--hl-ring-face); }