/* BRAND KIT V3 (October 2026): the colour and type names in this file are the JOBS, not the hues —
   cream = paper #F6F2EA, ink = Fjord Ink #12263A, burgundy = terracotta #A44723, petrol = Øresund
   #3F6E71 (both for data only), the main action = ink (raised navy on hover); Bricolage, Newsreader and
   Fraunces all read Space Grotesk now (upright); figures in tables Plex Mono, large ones Space Grotesk; square
   (app/theme.css). The v3 additions are at the end of the file. */
/* halfway — skin for the lab, on Halfway's own palette (see app/theme.css). One light theme.
   Four colours: cream paper, brown ink, burgundy, petrol — plus their tints.
   Shapes, sizes and type come from the COMPONENTS block in brand.css (var(--rr-…)), so this lab
   matches the site and every other lab: pills for controls, 12px boxes for choices and fields,
   20px panels with a hairline, three heading sizes, small capitals for labels and tags.
   Players: player 1 = burgundy CIRCLE, player 2 = petrol SQUARE — everywhere they appear (shape + position + name, never colour alone).
   The turn's own actions (Next, the + button, the answered card) take the player's colour: that is how
   each screen says whose turn it is.
   Outcomes: aligned = petrol-soft, solid petrol edge · different = burgundy-soft, DASHED burgundy edge ·
             to talk through = solid ink, cream text · little at stake = quiet sunken tint, ink-2 text.
   The game board — the five tokens on each question card (.slots) and the 0–5 line with the two
   answers on the results map (.rw-track) — is drawn, not a component, and keeps its own marks. */

/* ---------- 1. variables, once ---------- */
:root:root:root{
  --bg:var(--t-bg);
  --surface:var(--t-surface);
  --ink:var(--t-ink);
  --ink-2:var(--t-ink-2);
  --line:var(--t-line);
  --line-2:var(--t-line-2);
  --p1:var(--t-burgundy);
  --p1-soft:var(--t-burgundy-soft);
  --p2:var(--t-petrol);
  --p2-soft:var(--t-petrol-soft);
  --ok:var(--t-petrol);
  --ok-soft:var(--t-petrol-soft);
  --mid:var(--t-burgundy);
  --mid-soft:var(--t-burgundy-soft);
  --talk:var(--t-ink);
  --talk-soft:var(--t-ink);
  --me:var(--t-ink);
  --me-soft:var(--t-sunken);
  --display:var(--t-sans);
  --body:var(--t-sans);
  --radius:var(--rr-radius);
}

/* ---------- 2. type ---------- */
body{font-family:var(--t-sans);font-size:16px;line-height:1.5}
/* three heading sizes: h1 the screen's statement, h2 a section or panel, nothing else */
h1,h2,h3{font-family:var(--t-sans)}
h1,.trans h1,.res-head h1{font:var(--rr-h1);letter-spacing:var(--rr-h1-ls)}
.area-title h2,.sec-t,.map-area h3,.qd-t h3{font:var(--rr-h2);letter-spacing:var(--rr-h2-ls)}
.brand{font-family:var(--t-sans);font-weight:500;font-size:19px;letter-spacing:-.03em}
/* emoji: the sans first, so every word is Bricolage; the pictures fall back to the system's emoji font */
.pip,.ov-t .e,.map-area .em,.area-title .em,.big-emoji{font-family:var(--rr-sans),"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji"}
/* reading text: Newsreader */
.lead,.small,.muted,.desc,.qq,.why,.map-area > .an,.qd-t p,.qd-l dd,.rw-d .ln,.warn,.dialog .row{font-family:var(--t-read)}
.lead{font-size:20px;line-height:1.45;color:var(--t-ink)}
.small{font-size:16px;line-height:1.5}
.muted{font-size:16px;line-height:1.5}
/* labels: small capitals, Bricolage 700 */
.eyebrow,.vc-x,.qd-l dt,.sum-l,.qd-score span,.field label{font:var(--rr-label-font);letter-spacing:var(--rr-label-ls);text-transform:uppercase;color:var(--t-ink-2)}
.desc{font-style:normal;font-size:15px;line-height:1.3;color:var(--t-ink-2)}
/* a card's title is a small group heading */
.label,.cats .label{font:var(--rr-h3);letter-spacing:var(--rr-h3-ls)}
.cats .desc{font-size:14.5px;line-height:1.3}
/* Fraunces italic: the one accent — the per-answer line */
.answer{font-family:var(--t-serif);font-style:normal;font-weight:500;font-size:15.5px;line-height:1.3;color:var(--t-ink-2)}
.cats .answer{font-size:15.5px;white-space:normal}
.cat.has .answer{color:var(--me)}
.vp,.pc,.qd-score b{font-variant-numeric:tabular-nums}

/* ---------- 3. focus ---------- */
button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--t-ink);outline-offset:2px}

/* ---------- 4. players: dots, logo, whose turn ---------- */
.dot{box-shadow:none}
.dot.p1{background:var(--t-burgundy)}
.dot.p2{background:var(--t-petrol);border-radius:0}
.lg-bar{height:5px;background:var(--t-ink)}
.logo.big .lg-bar{height:9px}
/* whose turn: a tag in the player's colour (not clickable, so not a button's shape) */
.who{height:var(--rr-tag);padding:0 11px 0 9px;gap:7px;background:var(--me);color:var(--t-cream);
  font:var(--rr-tag-font);letter-spacing:var(--rr-tag-ls);text-transform:uppercase}
.who i{width:9px;height:9px;background:var(--t-cream)}
#app[data-who="p2"] .who i{border-radius:0}
.who span{max-width:34vw;line-height:1.2}

/* ---------- 5. controls: pills, 44 high (36 in the header and the summary chips) ---------- */
.btn{min-height:0;height:var(--rr-control);padding:0 24px;font:var(--rr-control-font);letter-spacing:normal;
  background:var(--t-action);color:var(--t-cream);border:1px solid var(--t-action);box-shadow:none;transition:background .15s,color .15s,border-color .15s}
.btn:hover:not(:disabled){background:var(--t-action-hover);border-color:var(--t-action-hover);color:var(--t-on-action-hover);transform:none}
.btn:active:not(:disabled){transform:translateY(1px);box-shadow:none}
.btn.me{background:var(--me);border-color:var(--me);color:var(--t-cream)}
#app[data-who="p1"] .btn.me:hover:not(:disabled),#app[data-who="p2"] .btn.me:hover:not(:disabled){background:var(--t-ink);border-color:var(--t-ink)}
/* secondary: surface, ink text, hairline edge — hover: ink edge */
.btn.ghost{background:var(--t-surface);color:var(--t-ink);border-color:var(--t-edge);box-shadow:none}
.btn.ghost:hover:not(:disabled){background:var(--t-surface);border-color:var(--t-ink);color:var(--t-ink)}
/* danger: surface, burgundy text and edge */
.btn.danger{background:var(--t-surface);border-color:var(--t-burgundy);color:var(--t-ink)}
.btn.danger:hover:not(:disabled){background:var(--t-burgundy-soft);border-color:var(--t-burgundy);color:var(--t-ink)}
.btn svg,.exp svg{flex:none}
/* disabled = quiet, dashed, still readable (no opacity) */
.btn:disabled{opacity:1;background:var(--t-sunken);color:var(--t-ink-2);border:1px dashed var(--t-edge);box-shadow:none}

/* header reset (36: the header is a dense row) and the export button: secondary pills */
.reset,.exp{background:var(--t-surface);color:var(--t-ink);border:var(--rr-hair);box-shadow:none;transition:border-color .15s}
.reset{height:var(--rr-control-sm);padding:0 14px;font:var(--rr-control-font-sm)}
.exp{min-height:0;height:var(--rr-control);padding:0 18px;font:var(--rr-control-font)}
.reset:hover,.exp:hover{background:var(--t-surface);color:var(--t-ink);border-color:var(--t-ink)}

/* round + / − buttons on each card: 44 wide at every size */
.cat,.cats .cat{--rb:var(--rr-control)}
.rbtn{font-family:var(--t-sans);font-weight:500;background:var(--t-surface);color:var(--t-ink);border:var(--rr-hair);box-shadow:none}
.cats .rbtn{font-size:26px}
.rbtn.plus{background:var(--me);color:var(--t-cream);border-color:var(--me)}
.rbtn:hover:not(:disabled){background:var(--t-ink);color:var(--t-cream);border-color:var(--t-ink);transform:none}
.rbtn:active:not(:disabled){transform:translateY(1px)}
.rbtn:disabled{opacity:1;background:var(--t-sunken);color:var(--t-ink-2);border:1px dashed var(--t-edge);box-shadow:none}

/* ---------- 6. setup: language switch, names ---------- */
/* the language switch: two segments in a hairline frame; the chosen one petrol */
.lang{background:var(--t-surface);border:var(--rr-hair);padding:3px;gap:3px}
.lg{min-height:0;height:var(--rr-control-sm);padding:0 16px;font:var(--rr-control-font-sm);color:var(--t-ink-2)}
.lg:hover:not(.on){color:var(--t-ink);background:var(--t-sunken)}
.lg.on{background:var(--t-select);color:var(--t-cream)}
/* the names: fields (44 high, 12px corners, hairline on surface), the player's mark inside */
.name{min-height:0;height:var(--rr-control);padding:0 14px;border-radius:var(--rr-radius-sm);background:var(--t-surface);border:var(--rr-hair)}
.name.p1:focus-within,.name.p2:focus-within{border-color:var(--t-ink);outline:3px solid var(--t-ink);outline-offset:2px}
.name input{font:var(--rr-field-font)}
.name input::placeholder,.field input::placeholder,.field textarea::placeholder{color:var(--t-ink-2);font-weight:500;opacity:1}
.field input,.field textarea{background:var(--t-surface);border:var(--rr-hair);border-radius:var(--rr-radius-sm);font:var(--rr-field-font)}
.field input{min-height:0;height:var(--rr-control)}
.field.p1 input,.field.p2 input{border-color:var(--t-edge)}

/* ---------- 7. round screens ---------- */
.pip{border:1px dashed var(--t-edge);background:transparent;opacity:1;filter:grayscale(1)}
.pip.done{background:var(--me-soft);border:1px solid var(--me);filter:none}
.pip.done::after{background:var(--me);color:var(--t-cream);font-family:var(--t-sans);width:18px;height:18px;line-height:18px;font-size:12px;right:-4px;top:-8px}
#app:not([data-who]) .pip.done{border-color:var(--t-ink)}
.pip.now{background:var(--t-surface);border:var(--rr-frame);box-shadow:none;animation:none;filter:none}
.area-title .em{font-size:26px}
#app[data-who="p1"] .trans h1{color:var(--t-ink)}
#app[data-who="p2"] .trans h1{color:var(--t-ink)}

/* the cards: panels with a hairline (the player's colour once answered); the card grows if the text needs more room */
.cat{height:auto;min-height:calc(5 * var(--dot) + 4 * var(--gap) + 2 * var(--pad) + 4px);background:var(--t-surface);border:var(--rr-hair);border-radius:var(--rr-radius);box-shadow:none}
.cat.has{border-color:var(--me)}
.cat .body{height:auto}
.cat .txt{height:auto;min-height:100%;overflow:visible;gap:6px}
.cats .desc{display:block;-webkit-line-clamp:unset;overflow:visible}
.label > span{white-space:normal;overflow:visible;text-overflow:clip}
.cats .answer{overflow:visible;text-overflow:clip}
.ctl{border-left:1px solid var(--t-line-2)}
.cat.has .ctl{border-left-color:var(--me)}
.slots i{box-shadow:inset 0 0 0 1.5px var(--t-edge)}
.slots i.on{background:var(--me);box-shadow:inset 0 0 0 1.5px var(--me)}
.bar{background:linear-gradient(transparent,var(--t-bg) 14px)}

/* toast + reset dialog (the dialog is the one panel on its screen: the 2px ink frame) */
.toast{background:var(--t-ink);color:var(--t-cream);border:1px solid var(--t-ink);box-shadow:none;font:var(--rr-control-font)}
.scrim{background:var(--t-scrim)}
.dialog{background:var(--t-surface);border:var(--rr-frame);border-radius:var(--rr-radius);box-shadow:none}
.dialog p{font:var(--rr-h2);letter-spacing:var(--rr-h2-ls)}

/* ---------- 8. results ---------- */
.legend{font-size:15px}
.legend > span{font-weight:500;letter-spacing:-.005em}

/* one look for every outcome: summary chips, verdict tags, percentages, outcome lines */
.go,.vd,.pc,.out{font-family:var(--t-sans);border:1px solid transparent}
.go.ok,.vd.ok,.pc.ok,.out.ok{background:var(--t-petrol-soft);color:var(--t-ink);border:1px solid var(--t-petrol)}
.go.mid,.vd.mid,.pc.mid,.out.mid{background:var(--t-burgundy-soft);color:var(--t-ink);border:1px dashed var(--t-burgundy)}
.go.talk,.vd.talk,.pc.talk,.out.talk{background:var(--t-ink);color:var(--t-cream);border:1px solid var(--t-ink)}
.out.none{background:var(--t-sunken);color:var(--t-ink-2);border:1px solid var(--t-edge)}
/* the summary chips: small pills (36), in a dense, wrapping row */
.go{min-height:0;height:var(--rr-control-sm);padding:0 14px;font:var(--rr-control-font-sm);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.go.ok:hover{background:var(--t-petrol);color:var(--t-cream)}
.go.mid:hover{background:var(--t-burgundy);color:var(--t-cream);border-style:solid}
.go.talk:hover{background:var(--t-burgundy);border-color:var(--t-burgundy)}
/* verdicts and percentages: tags — 26 high, small capitals */
.vd,.pc{display:inline-flex;align-items:center;height:var(--rr-tag);padding:0 10px;border-radius:var(--rr-pill);
  font:var(--rr-tag-font);letter-spacing:var(--rr-tag-ls);text-transform:uppercase;white-space:nowrap}
.pc{justify-self:start;padding:0 9px}
.ov-t .pc{font:var(--rr-tag-font)}
/* the outcome line inside an open answer: a small box nested in the panel (12px corners) */
.out{width:fit-content;max-width:100%;padding:5px 12px;border-radius:var(--rr-radius-sm);font-weight:500;line-height:1.35;font-size:15px}
.rw-d .out{font-family:var(--t-sans)}

/* overview tiles: choices (a button holding more than a line) — 12px corners, hairline */
.ov-t{background:var(--t-surface);border:var(--rr-hair);border-radius:var(--rr-radius-sm)}
.ov-t:hover{border-color:var(--t-ink)}
.ov-t b{font-family:var(--t-sans);font-weight:500;font-size:13px;letter-spacing:-.005em;white-space:normal;overflow:visible;line-height:1.2}

/* summary by outcome */
.sum{background:var(--t-surface);border:var(--rr-hair);border-radius:var(--rr-radius);padding:16px}
.sum-l{gap:8px}
.sum-l i{width:14px;height:14px;border-radius:0}
.sum-l.ok i{background:var(--t-petrol-soft);border:2px solid var(--t-petrol)}
.sum-l.mid i{background:var(--t-burgundy-soft);border:2px dashed var(--t-burgundy)}
.sum-l.talk i{background:var(--t-ink)}

/* area cards and the answer rows inside */
.map-area{background:var(--t-surface);border:var(--rr-hair);border-radius:var(--rr-radius);padding:12px 12px 8px}
.map-area > header{flex-wrap:wrap;row-gap:6px}
/* a narrow card (a phone, or two columns on a small tablet): title and percentage on one line, the verdict under the title */
.map-area{container-type:inline-size}
@container (max-width:440px){
  .map-area > header{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:10px;row-gap:6px;align-items:center}
  .map-area > header > *{grid-row:1}
  .map-area > header h3{grid-column:2;margin-right:0}
  .map-area > header .vp{grid-column:3}
  .map-area > header .vd{grid-column:2 / 4;grid-row:2;justify-self:start}
}
.map-area .em{font-size:22px}
.map-area > .an{font-size:16.5px;line-height:1.45;color:var(--t-ink-2)}
.map-area > .an b{font-family:var(--t-sans);font-weight:500;color:var(--t-ink)}
.vp{font-family:var(--t-sans);font-weight:500;font-size:17px;letter-spacing:-.02em}
.rw{border-top:1px solid var(--t-line)}
.rw[open]{background:var(--t-bg);border-radius:var(--rr-radius-sm)}
.rw-t{font-family:var(--t-sans);font-weight:500;font-size:14.5px;letter-spacing:-.005em;line-height:1.2}
/* the board: the bar spans the two answers — aligned = solid petrol-soft, different = dashed burgundy-soft, talk = solid ink, quiet = hollow */
.rw-track::before{background:var(--t-line-2)}
.rw-track::after{background:var(--t-edge)}
.rw-bar{height:10px;margin-top:-5px;border-radius:0;background:var(--t-sunken);border:1.5px solid var(--t-edge);box-sizing:border-box}
.rw.ok .rw-bar{background:var(--t-petrol-soft);border:1.5px solid var(--t-petrol)}
.rw.mid .rw-bar{background:var(--t-burgundy-soft);border:1.5px dashed var(--t-burgundy)}
.rw.talk .rw-bar{background:var(--t-ink);border:1.5px solid var(--t-ink)}
.rw.none summary{opacity:1}
.rw.none .rw-t{color:var(--t-ink-2)}
/* the two answers: circle burgundy = player 1, square petrol = player 2 */
.pt{width:18px;height:18px;margin:-9px 0 0 -9px;box-shadow:none}
.pt.p1{background:var(--t-burgundy);border:2.5px solid var(--t-surface)}
.pt.p2{background:var(--t-petrol);border:2.5px solid var(--t-surface);border-radius:0}
.rw.eq .pt.p1{margin-left:-13px}
.rw.eq .pt.p2{margin-left:-5px}
@keyframes flash{0%,55%{background:var(--t-petrol-soft)}}
.rw-d{font-size:16px;line-height:1.45;gap:8px;padding:2px 12px 12px}
.rw-d .qq{font-style:normal;font-size:16px;color:var(--t-ink-2)}
.rw-d .ln b{font-family:var(--t-sans);font-weight:500}
.flag{font-family:var(--t-sans);width:18px;height:18px;font-size:12px;font-weight:500}
.flag.p1{background:var(--t-burgundy);color:var(--t-cream)}
.flag.p2{background:var(--t-petrol);color:var(--t-cream);border-radius:0}
.warn{font-size:16px;line-height:1.45}
.warn b{font-family:var(--t-sans);font-weight:500}

/* section titles open with a 2px ink rule */
.sec-t{margin-top:40px;padding-top:14px;border-top:2px solid var(--t-ink)}

/* validity check cards: petrol edge = clean, burgundy edge = to review (and the word says so) */
.vc-p{background:var(--t-surface);border:var(--rr-hair);border-left:6px solid var(--t-edge);border-radius:var(--rr-radius)}
.vc-p.good{border-left-color:var(--t-petrol)}
.vc-p.bad{border-left-color:var(--t-burgundy)}
.vc-h{font-size:17px}
.vc-h b{font:var(--rr-h3);letter-spacing:var(--rr-h3-ls)}
.vc-s{font-family:var(--t-sans);font-size:14px;font-weight:500}
.vc-p.good .vc-s{color:var(--t-ink)}
.vc-p.bad .vc-s{color:var(--t-ink)}
.vc-x.cross{color:var(--t-ink)}
.vc-i{border-top:1px solid var(--t-line);font-size:16px;line-height:1.45}
.vc-i > b{font:var(--rr-h3);letter-spacing:var(--rr-h3-ls)}
.vc-i .why{color:var(--t-ink-2);font-size:16px}
.vc-i .ln{font-family:var(--t-read)}

/* the big picture: the verdict, so the one framed panel of the results (2px ink) */
.qd{background:var(--t-surface);border:var(--rr-frame);border-radius:var(--rr-radius)}
.qd-score{outline:2px solid var(--t-ink);outline-offset:0;background:conic-gradient(var(--c) calc(var(--s) * 1%),var(--t-line-2) 0)}
.qd-score::before{background:var(--t-surface)}
.qd-score b{font-family:var(--t-sans);font-weight:500;letter-spacing:-.04em}
.qd-score span{margin-top:3px}
.qd-t p{font-size:16.5px;line-height:1.45;color:var(--t-ink-2)}
.qd-l > div{border-top:1px solid var(--t-line)}
.qd-l dt{padding-top:3px}
.qd-l dd{font-size:16.5px;line-height:1.45}
.qd-l dd b{font-family:var(--t-sans);font-weight:500;letter-spacing:-.01em}

/* ---------- 9. motion ----------
   theme.css shortens every animation to ~0ms but keeps the end state; the app's fade-out
   animations end at opacity 0, so switch those off to keep the toast and the turn title visible. */
@media (prefers-reduced-motion:reduce){
  .toast,.trans h1{animation:none}
}
/* the name field shows the focus; no second ring on the input itself */
.name input:focus-visible{outline:none}

/* ---------- v3 (brand kit, October 2026): square markers — player 1 filled, player 2 outlined,
   so the two never differ by colour alone ---------- */
.dot.p2,.pt.p2,.flag.p2{background:var(--t-surface);box-shadow:inset 0 0 0 2.5px var(--t-petrol)}
.flag.p2{color:var(--t-ink)}
#app[data-who="p2"] .who i{background:transparent;box-shadow:inset 0 0 0 2px var(--t-cream)}
.vp,.pc,.qd-score b{font-family:var(--t-mono);font-weight:500}