/* Equifruit page styles. Tokens and components are the hub's (docs/research/hub-design.md).
   The CSP allows no inline styles, so everything visual lives in this file. */

@font-face { font-family: 'ClaudiaShouter-Black'; font-weight: 400 900; font-display: swap; src: url('fonts/ClaudiaShouter-Black.woff2') format('woff2'); }
/* Retor, the brand's text face, in its one weight. Bold text is drawn bolder by the browser. */
@font-face { font-family: 'Equifruit Text'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/Retor-Regular.woff2') format('woff2'); }

:root {
  color-scheme: light;
  interpolate-size: allow-keywords;
  --eq-font-display: 'ClaudiaShouter-Black', 'Arial Black', sans-serif;
  --eq-font-body: 'Equifruit Text', system-ui, sans-serif;
  --paper: #EAE3DA; --paper-2: #F4EFE7; --surface: #FFFCF6; --surface-2: #FAF6EF;
  --ink: #2E2624; --ink-2: #4A3A34; --muted: #7A6055;
  --banana: #FBBB20; --mint: #9AC9B5; --purple: #D8C7E0; --sky: #94CDE9;
  --on-bright: #2E2624;
  --eq-border: #2E2624; --eq-shadow-ink: #2E2624;
  --eq-hair: rgba(46, 38, 36, .12); --eq-hair-2: rgba(46, 38, 36, .22); --eq-field: rgba(46, 38, 36, .55);
  --eq-hover: #FAF6EF;
  --eq-ring: 0 0 0 3px rgba(251, 187, 32, .45);
  --eq-rust: #9A4424; /* darker than the hub's, so it clears 4.5:1 on the foot and on its own tint */
  --eq-chrome: #2E2624; --eq-chrome-ink: #F4EFE7;
  --ease: cubic-bezier(.2, .8, .2, 1);

  /* Phones first. */
  --bar: 56px; --mark: 28px; --word: 28px;
  --gutter: 16px; --col: 760px;
  --radius: 12px; --shadow: 3px;
  --inset: 16px; /* the one left line inside a card: statement, answers, rows */
  --num: 0px; /* the hanging number's column, from 720 up */
  --band-size: 1rem; --band-pad: 10px var(--inset);
  --foot-pad: 6px 0 8px;
}
@media (min-width: 720px) {
  :root { --radius: 14px; --shadow: 4px; --band-size: 1.15rem; --num: 2.5rem; --foot-pad: 18px 0 0; }
}
@media (min-width: 860px) {
  :root { --gutter: 32px; --inset: 24px; }
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --paper: #110E0D; --paper-2: #1F1A18; --surface: #1A1514; --surface-2: #241E1C;
    --ink: #F8F2EA; --ink-2: #DDD3C7; --muted: #A69789;
    --banana: #FFC629; --mint: #3EE0A6; --purple: #BC98FF; --sky: #45C8FF;
    --on-bright: #15100E;
    --eq-border: rgba(248, 242, 234, .3); --eq-shadow-ink: #FFC629;
    --eq-hair: rgba(248, 242, 234, .1); --eq-hair-2: rgba(248, 242, 234, .24); --eq-field: rgba(248, 242, 234, .42);
    --eq-hover: rgba(255, 198, 41, .07);
    --eq-ring: 0 0 0 3px rgba(255, 198, 41, .6);
    --eq-rust: #FF8F6B;
    --eq-chrome: #0C0A09;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 106.25%; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--bar) + 8px); scroll-padding-bottom: calc(var(--foot-h, 88px) + 8px); scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ink) 30%, transparent) transparent; }
html.in-q { scroll-padding-top: calc(var(--bar) + var(--prog-h, 56px) + 8px); }
/* The top bar's own buttons are never under the bars, so focusing one must not scroll the page. */
html:has(#bar :focus) { scroll-padding-top: 0; }
::selection { background: rgba(251, 187, 32, .45); color: inherit; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--paper); color: var(--ink); font: 400 1rem/1.5 var(--eq-font-body); letter-spacing: normal; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
h1, h2, h3, p, ol, ul { margin: 0; padding: 0; }
button, input, textarea { font: inherit; color: inherit; }
a { color: inherit; }
main { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; overflow-x: clip; }
[hidden] { display: none !important; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
h1:focus, h3:focus { outline: none; box-shadow: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: var(--eq-ring); }
svg.ic { display: block; flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Top bar */
.topbar { position: sticky; top: 0; z-index: 60; flex: none; display: flex; align-items: center; gap: 10px; min-height: calc(var(--bar) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); background: var(--eq-chrome); color: var(--eq-chrome-ink); }
.tb-banana { height: var(--mark); width: auto; flex: none; }
.tb-banana polygon { fill: #FBBB20; stroke: #2E2624; stroke-width: 9; stroke-linejoin: round; }
.tb-word { display: block; flex: 0 100 auto; min-width: 0; height: var(--word); aspect-ratio: 755 / 300; background: var(--eq-chrome-ink); -webkit-mask: url('brand/equifruit-wordmark.png') left center / contain no-repeat; mask: url('brand/equifruit-wordmark.png') left center / contain no-repeat; }
.tb-right { margin-left: auto; display: flex; align-items: center; min-width: 0; }
/* EN | FR, the one on show underlined in banana. It sits right of Sign out, whose label changes
   width between languages, so the button just pressed never moves and nothing slides under it. */
.tb-lang { flex: none; display: flex; align-items: center; }
.lang-btn { min-width: 28px; min-height: 44px; padding: 2px 4px; background: none; border: 0; border-radius: 6px; color: var(--eq-chrome-ink); font: 400 .86rem/1.1 var(--eq-font-body); opacity: .7; cursor: pointer; touch-action: manipulation; }
.lang-btn[aria-pressed="true"] { opacity: 1; text-decoration: underline; text-decoration-color: var(--banana); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.lang-btn:focus-visible { outline: 2px solid var(--eq-chrome-ink); outline-offset: -2px; box-shadow: none; }
@media (hover: hover) { .lang-btn:hover { opacity: 1; } }
.lang-bar { color: var(--eq-chrome-ink); font: 400 .8rem/1 var(--eq-font-body); opacity: .4; }
.tb-avatar { flex: none; display: block; width: 32px; height: 32px; margin-left: 4px; border-radius: 50%; object-fit: cover; background: var(--paper-2); box-shadow: 0 0 0 2px var(--eq-chrome), 0 0 0 3.5px var(--banana); }
.line { position: absolute; left: 0; right: 0; bottom: 0; height: 2.5px; background: rgba(244, 239, 231, .16); }
.line i { display: block; height: 100%; background: var(--banana); transform-origin: left center; transform: scaleX(var(--p, 1)); }
.in-q .line { opacity: 0; }
.tb-btn { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 2px 8px; background: none; border: 0; border-radius: 8px; color: var(--eq-chrome-ink); font: 400 .9rem/1.15 var(--eq-font-body); font-variant-numeric: tabular-nums; text-align: right; overflow-wrap: anywhere; cursor: pointer; touch-action: manipulation; }
.tb-btn:focus-visible { outline: 2px solid var(--eq-chrome-ink); outline-offset: -2px; box-shadow: none; }
@media (hover: hover) { .tb-btn:hover { background: rgba(244, 239, 231, .12); } }

/* Buttons */
.eq-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; max-width: 100%; margin: 0; padding: 4px 18px; font: 400 .86rem/1.15 var(--eq-font-display); text-align: center; overflow-wrap: break-word; text-decoration: none; text-transform: uppercase; letter-spacing: .04em; color: var(--on-bright); background: var(--banana); border: 2px solid var(--on-bright); border-radius: 9px; box-shadow: 3px 3px 0 var(--eq-shadow-ink); cursor: pointer; touch-action: manipulation; }
.eq-btn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--eq-shadow-ink); }
.eq-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: 3px 3px 0 var(--eq-shadow-ink), var(--eq-ring); }
.eq-btn:disabled, .eq-btn[aria-disabled="true"] { cursor: default; transform: none; box-shadow: none; color: var(--muted); background: var(--paper-2); border-color: var(--eq-hair-2); }
.eq-btn-sm { min-width: 88px; min-height: 44px; padding: 4px 14px; font-size: .78rem; }
.eq-btn-ghost { color: var(--ink); background: transparent; border-color: transparent; box-shadow: none; }
.eq-btn-ghost:active { transform: translate(1px, 1px); box-shadow: none; }
.eq-btn-ghost:focus-visible { box-shadow: var(--eq-ring); }
.eq-btn-ghost:disabled { background: transparent; border-color: transparent; }
@media (hover: hover) {
  .eq-btn:not(:disabled, [aria-disabled="true"]):hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--eq-shadow-ink); }
  .eq-btn:not(:disabled, [aria-disabled="true"]):active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--eq-shadow-ink); }
  .eq-btn-ghost:not(:disabled):hover { background: var(--paper-2); transform: translate(-1px, -1px); box-shadow: none; }
  .eq-btn-ghost:not(:disabled):active { transform: translate(1px, 1px); box-shadow: none; }
}

/* Type */
.ptitle { font: 400 clamp(1.35rem, 1.9vw, 1.6rem)/1.1 var(--eq-font-display); text-transform: uppercase; letter-spacing: .01em; text-wrap: balance; }
.eq-title { font: 400 1.2rem/1.3 var(--eq-font-body); overflow-wrap: anywhere; }
.eq-help { font: 400 .94rem/1.4 var(--eq-font-body); color: var(--muted); overflow-wrap: anywhere; }
.eq-label { display: block; margin: 0 0 7px; font: 700 .78rem/1.2 var(--eq-font-body); color: var(--ink-2); text-transform: uppercase; letter-spacing: .06em; }
.eq-card-title { font: 400 1rem/1.2 var(--eq-font-display); text-transform: uppercase; letter-spacing: .02em; }
.eq-stat-num { display: block; font: 400 2.1rem/1 var(--eq-font-display); font-variant-numeric: tabular-nums; text-transform: uppercase; letter-spacing: .01em; }
.eq-note-error { display: block; margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; background: rgba(180, 83, 46, .10); color: var(--eq-rust); font: 400 .98rem/1.4 var(--eq-font-body); text-align: left; }
@media (prefers-color-scheme: dark) { .eq-note-error { background: rgba(255, 143, 107, .08); box-shadow: inset 0 0 0 1px rgba(255, 143, 107, .55); } }

/* Fields */
.eq-input { display: block; width: 100%; height: 44px; margin: 0; padding: 0 12px; font: 400 1.02rem/1.2 var(--eq-font-body); color: var(--ink); background-color: var(--surface); border: 1.5px solid var(--eq-field); border-radius: 8px; }
.eq-input:hover { border-color: var(--eq-border); }
.eq-input:focus { outline: 2px solid var(--ink); outline-offset: 1px; border-color: var(--ink); box-shadow: var(--eq-ring); }
textarea.eq-input { height: auto; min-height: 120px; padding: 10px 12px; line-height: 1.45; resize: vertical; }

/* Gate card */
.gate { width: 100%; max-width: calc(560px + 2 * var(--gutter)); margin: auto; padding: 24px var(--gutter) calc(32px + env(safe-area-inset-bottom)); }
/* The password card is placed from the top, where centring would put it with no error line: the
   card is 304 tall at normal text, 360 with the gate's padding. A wrong password then grows the
   card downward, and the field and the button stay under the thumb. */
.gate:has(.pw-head) { margin-block: max(0px, calc((100dvh - var(--bar) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 360px) / 2)) auto; }
.eq-card { min-width: 0; margin: 0; padding: 22px 24px 24px; background: var(--surface); color: var(--ink); border: 2px solid var(--eq-border); border-radius: var(--radius); box-shadow: var(--shadow) var(--shadow) 0 var(--eq-shadow-ink); }
.eq-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; text-align: center; }
.eq-empty-page { padding: 40px 24px 36px; }
.eq-empty-ico { width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: 8px; border-radius: 50%; background: var(--paper-2); color: var(--ink-2); }
.eq-empty-ico svg.ic { width: 20px; height: 20px; stroke-width: 1.7; }
.eq-empty-title { font: 400 1.15rem/1.15 var(--eq-font-display); text-transform: uppercase; letter-spacing: .02em; text-wrap: balance; color: var(--ink); }
.eq-empty-sub { max-width: 38ch; font: 400 1rem/1.45 var(--eq-font-body); color: var(--muted); text-wrap: balance; overflow-wrap: break-word; }
/* Each side of an address stays whole, so a hyphen in a name never ends a line. Only a part wider than the card wraps inside itself. */
.addr { display: inline-block; max-width: 100%; }
.eq-empty .eq-btn { min-height: 44px; margin-top: 12px; }
.signin-form { width: 100%; margin-top: 12px; text-align: left; }
.signin-form .eq-btn { width: 100%; margin-top: 12px; }
/* Show sits at the right end of the label's line, so the password has the field's whole width
   and shows whole on a phone. The field grows with enlarged text. */
.pw-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; margin-top: -14px; }
.pw-head .eq-label { margin: 0; }
.pw-input { height: auto; min-height: 44px; padding: 8px 10px; }
.pw-toggle { flex: none; display: inline-flex; align-items: center; justify-content: flex-end; min-width: 64px; min-height: 44px; margin-right: -10px; padding: 4px 10px; background: none; border: 0; border-radius: 8px; color: var(--ink-2); font: 700 .78rem/1.2 var(--eq-font-body); text-transform: uppercase; letter-spacing: .06em; cursor: pointer; touch-action: manipulation; }
.pw-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; box-shadow: none; }
@media (hover: hover) { .pw-toggle:hover { background-color: var(--paper-2); color: var(--ink); } }
.link-btn { min-height: 44px; margin-top: 8px; padding: 4px 8px; background: none; border: 0; border-radius: 6px; color: var(--ink); font: 400 .98rem/1.15 var(--eq-font-body); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; cursor: pointer; touch-action: manipulation; }

.ic-wrap { display: inline-flex; flex: none; }
.eq-help a .ic-wrap { vertical-align: -.12em; margin-left: 2px; }
.eq-help a .ic-wrap svg.ic { width: .95em; height: .95em; }

/* Skeleton */
.eq-skel { display: block; border-radius: 6px; background: var(--paper-2); }
.skel-ico { width: 44px; height: 44px; margin-bottom: 8px; border-radius: 50%; }
.skel-title { width: 38%; height: 18px; }
.skel-line { width: 62%; height: 12px; margin-top: 8px; }
.skel-ptitle { width: 60%; height: 50px; }
.skel-card { min-height: 68px; border-color: transparent; box-shadow: none; background: var(--paper-2); }
.skel-go { width: 100%; height: 48px; }
.skel-n { flex: none; width: 1.6rem; height: 20px; }
.skel-stmt { width: 78%; height: 22px; }
.skel-mid { justify-content: center; min-height: calc(100dvh - var(--bar)); }
.skel-mid .qhead { display: flex; gap: 10px; }

/* Results */
.results { padding: 22px 24px 24px; }
.results .eq-stat-num { margin-top: 16px; }
.results .eq-help { margin-top: 12px; font-size: .98rem; }
.results-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 20px; }
.results-row .eq-btn:not(.eq-btn-ghost) { min-height: 44px; }
/* Refresh alone, or under Download on a phone: its label starts on the card's left line. */
.results-row .eq-btn[hidden] + .eq-btn-ghost { margin-left: -16px; }
@media (max-width: 399.98px) {
  .results-row { flex-direction: column; align-items: flex-start; }
  .results-row .eq-btn-ghost { margin-left: -16px; }
}

/* A screen fades in. */
.screen { width: 100%; }

/* The page: the top part, the questions, then the way to Review. One column. */
.flow { flex: 1 0 auto; display: flex; flex-direction: column; max-width: calc(var(--col) + 2 * var(--gutter)); margin-inline: auto; padding: 0 var(--gutter); }

/* The top part */
.start { display: flex; flex-direction: column; gap: 16px; padding: 22px 0 32px; }
.vwrap { display: grid; grid-template-rows: 1fr; grid-template-columns: minmax(0, 1fr); }
.vwrap > div { min-height: 0; overflow: hidden; padding: 0 5px 5px 0; margin: 0 -5px -5px 0; }
.vwrap.shut { grid-template-rows: 0fr; margin-top: -16px; }
.vwrap.shut > div { visibility: hidden; }
.vframe { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9; overflow: clip; background: var(--surface); color: var(--muted); border: 2px solid var(--eq-border); border-radius: var(--radius); box-shadow: var(--shadow) var(--shadow) 0 var(--eq-shadow-ink); }
.vframe video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.vframe video:focus-visible { outline: none; box-shadow: none; }
.vframe:has(video:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: var(--shadow) var(--shadow) 0 var(--eq-shadow-ink), var(--eq-ring); }
.vframe-ph { display: grid; justify-items: center; gap: 8px; padding: 12px; text-align: center; font: 400 .98rem/1.3 var(--eq-font-body); }
.vframe-ph svg { display: block; width: 48px; height: 48px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
/* The round X sits on the film's corner, clear of its controls. */
.vclose { position: absolute; top: 10px; right: 10px; z-index: 3; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; background: var(--surface); color: var(--ink); border: 2px solid var(--on-bright); border-radius: 50%; box-shadow: 2px 2px 0 var(--on-bright); cursor: pointer; touch-action: manipulation; }
.vclose::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; }
.vclose svg.ic { width: 18px; height: 18px; stroke-width: 2.2; }
.vclose:focus-visible { outline: 2px solid var(--surface); outline-offset: 2px; box-shadow: 0 0 0 6px var(--ink); }
@media (hover: hover) { .vclose:hover { background: var(--banana); color: var(--on-bright); } }
.vopen { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px; background: var(--surface); color: var(--ink); border: 1.5px solid var(--eq-hair-2); border-radius: 999px; font: 400 1rem/1.2 var(--eq-font-body); cursor: pointer; touch-action: manipulation; }
.vopen svg.ic { width: 20px; height: 20px; }
@media (hover: hover) { .vopen:hover { border-color: var(--eq-border); } }
/* The form for a concern: a whole card to tap, with its own icon. */
.leave-card { display: flex; align-items: center; gap: 14px; min-height: 68px; margin-top: 4px; padding: 12px 16px 12px 14px; background: var(--surface); color: var(--ink); text-decoration: none; border: 2px solid var(--eq-border); border-radius: var(--radius); box-shadow: var(--shadow) var(--shadow) 0 var(--eq-shadow-ink); touch-action: manipulation; }
.leave-ico { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--mint); color: var(--on-bright); }
.leave-ico svg.ic { width: 20px; height: 20px; stroke-width: 2; }
.leave-txt { flex: 1 1 auto; display: grid; gap: 2px; min-width: 0; }
.leave-t { font: 700 1.04rem/1.25 var(--eq-font-body); overflow-wrap: anywhere; }
.leave-s { font: 400 .88rem/1.3 var(--eq-font-body); color: var(--muted); }
.leave-go svg.ic { width: 20px; height: 20px; }
a.leave-card:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--eq-shadow-ink); }
@media (hover: hover) { a.leave-card:hover { transform: translate(-1px, -1px); box-shadow: calc(var(--shadow) + 1px) calc(var(--shadow) + 1px) 0 var(--eq-shadow-ink); } }
.leave-card.off { border-color: var(--eq-hair-2); box-shadow: none; }
.leave-card.off .leave-ico { background: var(--paper-2); color: var(--muted); }
.leave-off { color: var(--muted); }
.start-go { display: grid; gap: 10px; margin-top: 6px; }
.start-line { font: 400 1rem/1.4 var(--eq-font-body); color: var(--ink-2); }
.start-btn { width: 100%; min-height: 50px; font-size: .95rem; }
@media (prefers-color-scheme: dark) { .leave-ico { background: none; color: var(--mint); box-shadow: inset 0 0 0 1.5px var(--mint); } }

/* Progress: under the top bar while the questions are on screen. One segment per section, as wide
   as its share of the questions, filling as its questions are answered. */
.prog { position: absolute; top: 100%; left: 0; right: 0; padding: 8px max(var(--gutter), env(safe-area-inset-right)) 10px max(var(--gutter), env(safe-area-inset-left)); background: var(--paper); color: var(--ink); border-bottom: 1px solid var(--eq-hair-2); visibility: hidden; opacity: 0; }
.in-q .prog { visibility: visible; opacity: 1; }
.prog-in { max-width: var(--col); margin-inline: auto; }
.prog-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 26px; }
.prog-sect { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 .8rem/1.2 var(--eq-font-display); text-transform: uppercase; letter-spacing: .03em; }
.prog-count { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: -9px -8px -9px 0; padding: 0 8px; background: none; border: 0; border-radius: 8px; color: var(--muted); font: 400 .88rem/1.2 var(--eq-font-body); font-variant-numeric: tabular-nums; cursor: pointer; touch-action: manipulation; }
.prog-count svg.ic { width: 15px; height: 15px; }
@media (hover: hover) { .prog-count:hover { color: var(--ink); background: var(--paper-2); } }
.prog-track { display: flex; align-items: center; gap: 3px; height: 7px; margin-top: 6px; }
.seg { flex: 1 1 0; min-width: 4px; height: 4px; overflow: hidden; border-radius: 2px; background: var(--eq-hair-2); }
.seg i { display: block; height: 100%; background: var(--banana); transform-origin: left center; transform: scaleX(var(--p, 0)); }
.seg.now { height: 7px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 30%, transparent); }

/* The questions */
.qs { display: flex; flex-direction: column; gap: 14px; }
.sh { display: flex; margin: 26px 0 -2px; }
.sh span { padding: 5px 12px 4px; background: var(--wk); color: var(--on-bright); border: 2px solid var(--eq-border); border-radius: 999px; font: 400 .82rem/1.2 var(--eq-font-display); text-transform: uppercase; letter-spacing: .03em; overflow-wrap: anywhere; }
.wk-sky { --wk: var(--sky); } .wk-mint { --wk: var(--mint); } .wk-purple { --wk: var(--purple); }
@media (prefers-color-scheme: dark) { .sh span { background: none; color: var(--wk); border-color: var(--wk); } }
/* A card away from the middle is faded but still reads and takes a tap. The one in the middle stands up off the page. */
.qc { min-width: 0; padding: 16px var(--inset) 18px; background: var(--surface); border: 2px solid var(--eq-hair-2); border-radius: var(--radius); opacity: .55; }
.qc.on { opacity: 1; border-color: var(--eq-border); box-shadow: var(--shadow) var(--shadow) 0 var(--eq-shadow-ink); }
.qst { position: relative; padding-left: var(--num); font: 400 1.22rem/1.32 var(--eq-font-body); text-wrap: pretty; overflow-wrap: anywhere; }
.qn { margin-right: .3em; font: 400 1.04rem/1 var(--eq-font-display); font-variant-numeric: tabular-nums; }
.qbody { padding-left: var(--num); }
.cells { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.cells .opt:last-child { margin-top: 6px; }

/* An answer: the hub's .opt, with an invisible native input over it. */
.opt { position: relative; isolation: isolate; display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 8px 14px; overflow: hidden; background: var(--paper-2); border: 1.5px solid var(--eq-hair-2); border-radius: 10px; font: 400 1.04rem/1.25 var(--eq-font-body); color: var(--ink); cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.opt::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--banana); opacity: 0; transform: scaleX(0); }
.opt input { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; appearance: none; -webkit-appearance: none; background: transparent; border-radius: inherit; cursor: inherit; outline: none; box-shadow: none; }
.opt .lbl { min-width: 0; overflow-wrap: break-word; }
.opt.sel { color: var(--on-bright); border-color: var(--on-bright); }
.opt.sel::before { opacity: 1; transform: scaleX(1); }
.opt:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: var(--eq-ring); }
@media (hover: hover) { body:not(.still) .opt:not(.sel):not(.locked):hover { background: var(--surface); border-color: var(--eq-border); } }
@media (hover: hover) and (prefers-color-scheme: dark) { body:not(.still) .opt:not(.sel):not(.locked):hover { border-color: var(--ink-2); } }
.opt.locked { color: var(--muted); background: transparent; border-color: var(--eq-hair); cursor: not-allowed; }
@media (forced-colors: active) {
  .opt.sel { border: 3px solid Highlight; }
  .opt.locked { color: GrayText; border-color: GrayText; }
  .opt::before { display: none; }
  .tb-word { background: CanvasText; forced-color-adjust: none; }
  .line i, .seg i { background: Highlight; forced-color-adjust: none; }
  .qc.on { border: 3px solid Highlight; }
}

/* In Dark the picked label is dark, so a fill growing from the centre leaves a label at the left unreadable until it arrives. It starts on the label's side. */
@media (prefers-color-scheme: dark) { .opts .opt::before { transform-origin: left center; } }
@media (prefers-color-scheme: dark) and (max-width: 719.98px) { .cells .opt::before { transform-origin: left center; } }

/* Q37 to Q39 */
.qbody > .eq-help { margin-top: 8px; }
.qbody .eq-help.hot { color: var(--ink); font-weight: 700; }
.qbody .eq-help a { padding-block: 13px; border-radius: 3px; } /* padding on an inline box moves nothing: it only grows the tap target */
.qbody .eq-help a:focus-visible { padding-block: 0; }
.opts { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.note { margin-top: 14px !important; }
.box { position: relative; flex: none; width: 18px; height: 18px; border: 1.5px solid currentColor; border-radius: 4px; }
.box svg { position: absolute; inset: -1.5px; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 20; stroke-dashoffset: 20; }
.opt.sel .box svg { stroke-dashoffset: 0; }
.fold { display: grid; grid-template-rows: 0fr; grid-template-columns: minmax(0, 1fr); }
.fold.open { grid-template-rows: 1fr; }
.fold > div { min-height: 0; min-width: 0; overflow: hidden; padding-inline: 5px; margin-inline: -5px; }
.fold:not(.open) > div { visibility: hidden; }
.fold .eq-input { margin-block: 5px; }
.charsleft { margin-top: 4px !important; font-size: .9rem; }
.text textarea { margin-top: 12px; }
.text .privacy { margin-top: 10px; }

/* The end: the count, and the way to Review. Space under it lets Q39 reach the middle. */
.end { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 40px 0 max(48px, 32vh); text-align: center; }
.end-count { font: 400 1rem/1.4 var(--eq-font-body); color: var(--muted); }
.end .eq-btn { min-width: 220px; min-height: 50px; font-size: .95rem; }

/* Said at the foot of the screen when the line that says it has scrolled away. */
.hint { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 50; width: max-content; max-width: calc(100% - 2 * var(--gutter)); padding: 10px 16px; transform: translateX(-50%); background: var(--eq-chrome); color: var(--eq-chrome-ink); border-radius: 10px; font: 400 1rem/1.35 var(--eq-font-body); text-align: center; }

/* Review. Its foot stays at the bottom of the screen. */
.review { flex: 1 0 auto; display: flex; flex-direction: column; max-width: calc(var(--col) + 2 * var(--gutter)); margin-inline: auto; padding: 20px var(--gutter) 0; }
.sects { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-block: 14px 16px; }
.sect { overflow: clip; background: var(--surface); border: 2px solid var(--eq-border); border-radius: var(--radius); box-shadow: var(--shadow) var(--shadow) 0 var(--eq-shadow-ink); }
.band { flex: none; padding: var(--band-pad); background: var(--wk); color: var(--on-bright); border-bottom: 2px solid var(--eq-border); }
.band-t { display: block; font: 400 var(--band-size)/1.1 var(--eq-font-display); text-transform: uppercase; letter-spacing: .02em; overflow-wrap: anywhere; }
@media (prefers-color-scheme: dark) { .band { background: none; color: var(--wk); border-bottom-color: var(--wk); } }
.rows { list-style: none; }
.rows li + li { border-top: 1px solid var(--eq-hair); }
.row { display: grid; grid-template-columns: 2ch minmax(0, 1fr); gap: 4px 12px; align-items: first baseline; width: 100%; min-height: 52px; padding: 10px var(--inset); text-align: left; background: none; border: 0; cursor: pointer; touch-action: manipulation; }
.row:focus-visible { outline-offset: -3px; box-shadow: none; }
@media (hover: hover) { .row:hover { background: var(--eq-hover); } }
.row .n { font: 400 .9rem/1.45 var(--eq-font-body); font-variant-numeric: tabular-nums; color: var(--muted); text-align: right; }
.row .st { font: 400 1rem/1.4 var(--eq-font-body); color: var(--ink-2); overflow-wrap: anywhere; }
.row .ans { grid-column: 2; font: 700 .92rem/1.35 var(--eq-font-body); color: var(--ink); overflow-wrap: anywhere; }
.row .ans > span { display: block; }
.row .ans.none { font-weight: 400; color: var(--muted); }
.row .said { grid-column: 2; font: 700 .92rem/1.4 var(--eq-font-body); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6; overflow: hidden; }
.qfoot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: var(--foot-pad); }
.qfoot.sticky { position: sticky; bottom: 0; z-index: 5; isolation: isolate; flex-wrap: wrap; row-gap: 6px; margin-top: auto; padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); }
.qfoot.sticky::before { content: ''; position: absolute; z-index: -1; inset: 0 -100vw; background: var(--paper); border-top: 1px solid var(--eq-hair); }
body.tall-foot .qfoot.sticky { position: relative; bottom: auto; }
/* Back's label starts on the rows' left line, and Send ends on their right edge. */
.foot-back { justify-content: flex-start; margin-left: max(0px, calc(var(--inset) - 14px)); }
.foot-right { margin-left: auto; margin-right: 2px; min-height: 44px; min-width: 88px; }
.back-arrow { margin-left: -2px; }
.foot-msg { flex: 1 1 100%; padding-inline: calc(var(--inset) + 2px); font: 400 1rem/1.4 var(--eq-font-body); color: var(--ink); }
.foot-msg.err { color: var(--eq-rust); }

/* The boot skeleton's fallback: only ever seen if a script never ran. At 15 seconds it shows and the empty card goes. */
.boot-late { margin-top: 16px; text-align: center; font: 400 1rem/1.45 var(--eq-font-body); color: var(--muted); visibility: hidden; animation: boot-late 0s 15s forwards; }
.boot-late a { padding-block: 12px; }
@keyframes boot-late { to { visibility: visible; } }
#bootSkeleton > .eq-card { animation: boot-gone 0s 15s forwards; }
@keyframes boot-gone { to { visibility: hidden; height: 0; padding: 0; border-width: 0; overflow: hidden; } }

/* 200% zoom on a phone: the top bar and the foot give up what they can do without. */
@media (max-width: 379.98px) { .topbar { gap: 6px; } }
@media (max-width: 219.98px) {
  .tb-banana, .tb-word, .tb-avatar { display: none; }
  .topbar { gap: 2px; padding-inline: 6px; }
  .tb-btn { padding-inline: 4px; font-size: .78rem; }
  .lang-btn { min-width: 24px; padding-inline: 2px; }
  .qfoot { gap: 0; }
  .eq-btn-sm, .foot-right, .results-row .eq-btn { min-width: 0; padding-inline: 8px; }
  .results { padding-inline: 12px; }
  .results-row .eq-btn { overflow-wrap: anywhere; }
  .end .eq-btn { min-width: 0; }
  .flow { padding-inline: 10px; }
  .qc { padding-inline: 10px; }
  .opt { padding-inline: 10px; }
  .prog { padding-inline: 10px; }
  .prog-count svg.ic { display: none; }
}

/* Bigger screens */
@media (min-width: 720px) {
  /* Six in a row at normal text. A cell cannot go below 5rem or its longest word, so text that grows drops cells to a new row and breaks no word. */
  .cells { flex-direction: row; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
  .cells .opt { flex: 1 1 5rem; min-width: min-content; max-width: 100%; justify-content: center; min-height: 62px; padding: 6px 8px; text-align: center; font-size: .98rem; }
  .cells .opt:nth-child(5) { margin-right: 10px; }
  .cells .opt:last-child { margin-top: 0; }
  .qc { padding: 20px var(--inset) 22px; }
  .qst { font-size: 1.36rem; }
  .qn { position: absolute; left: 0; top: .32em; margin: 0; font-size: 1.1rem; }
  .opts-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .opts-two .fold { grid-column: 1 / -1; }
  .start { gap: 16px; padding: 24px 0 40px; }
  /* The film keeps Start on the first screen of a laptop: it narrows as the window gets shorter. */
  .start .vframe { width: min(100%, max(320px, calc((100dvh - 330px) * 16 / 9))); }
  .start-go { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 20px; }
  .start-btn { grid-column: 1; grid-row: 1 / span 3; width: auto; min-width: 220px; }
  .start-go > .start-line { grid-column: 2; }
  .skel-ptitle { height: 30px; }
  .skel-go { width: 220px; }
  .review { padding-top: 24px; }
  .sects { gap: 24px; margin-block: 20px 24px; }
  .row { grid-template-columns: 2ch minmax(0, 1fr) 220px; gap: 4px 16px; padding: 12px var(--inset); }
  .row .st { font-size: 1.04rem; }
  .row .ans { grid-column: 3; font-size: 1rem; }
  .row .said { grid-column: 2 / -1; font-size: 1rem; }
}

/* Motion. Nothing moves when the system asks for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .prog { transition: opacity .2s ease, visibility 0s .2s; }
  .in-q .prog { transition: opacity .2s ease, visibility 0s; }
  .seg i { transition: transform .3s var(--ease); }
  .line { transition: opacity .2s ease; }
  .qc { transition: opacity .25s ease, border-color .25s ease, box-shadow .25s ease; }
  .vwrap { transition: grid-template-rows .32s var(--ease), margin-top .32s var(--ease); }
  .vwrap > div { transition: visibility 0s .32s; }
  .vwrap:not(.shut) > div { transition: visibility 0s; }
  .eq-btn, a.leave-card { transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; }
  .opt { transition: background-color .18s ease, border-color .18s ease; }
  .opt.sel { transition: none; }
  /* Clearing folds to the centre. Picking grows from it. Text and edge change at once. */
  .opt::before { transition: transform .2s var(--ease), opacity .2s ease; }
  .opt.sel::before { transition: transform .3s var(--ease), opacity 0s; }
  .box svg { transition: stroke-dashoffset .2s var(--ease); }
  .fold { transition: grid-template-rows .28s var(--ease); }
  .row { transition: background-color .18s ease; }
  .eq-skel { animation: eq-pulse 1.4s ease-in-out infinite; }
  .tick-draw { stroke-dasharray: 26; stroke-dashoffset: 26; animation: eq-tick .36s var(--ease) .08s forwards; }
}
@keyframes eq-pulse { 50% { opacity: .5; } }
@keyframes eq-tick { to { stroke-dashoffset: 0; } }