/* ═══════════════════════════════════════════════════════════════════════════
   THE ASSESSMENT — shared primitives

   brand.css supplies the kit: --lead, --paper, --ink, the type, the corner and
   the quilt ground. This file supplies the parts every one of the three
   presentations needs identically, and nothing about layout. Layout is where
   they are supposed to differ.

   Every global rule in assessment.md §2 is enforced here rather than left to
   each build to remember:
     · one screen, one question, and no scrolling on a question screen
     · an explicit Continue on every scored question — no auto-advance
     · the CTA carries the skip text until an answer exists, then becomes
       Continue (Warby Parker's morphing CTA), so skipping costs no extra UI
       and never reads as failure
     · no back button, said once on the opener and never enforced with a dialog
     · reactions are skippable on tap
     · a–d select, Enter continues, and the affordance is visible
     · reduced motion keeps opacity and colour, and disables movement only
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── THE BASE TOKENS ────────────────────────────────────────────────────────
   These live here rather than in brand.css, and that distinction cost an hour.

   brand.css is an OVERRIDE for the six older games: it retargets --yellow,
   --lead, --body and --r, and it assumes --paper / --ink / --card / --line /
   --display / --ease already exist, because each of those six declares them in
   its own inline <style>. The three new files have no inline style, so every one
   of those was undefined — which CSS treats as an invalid value, so it falls
   back to initial. The symptom was a Continue button with no fill and body text
   in pure black instead of Midnight, on a page whose accent colour worked fine
   because --lead IS in brand.css.

   Declaring them here and not in brand.css keeps the six untouched: brand.css
   stays a delta over what they already have, and this file is self-sufficient.
   Values are brand-kit.ts, so both routes agree.
*/
:root{
  --paper:#FBFBF8; --rail:#F5F4EF; --card:#FFFFFF; --line:#E4E3DE;
  --ink:#151524; --text2:#4A4943; --mute:#6E6D66; --faint:#9C9B93;
  --display:"Funnel Display","Instrument Sans",-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.16,.84,.28,1);
}

/* The ground is quieter here than on the six. They are dense — a board, a desk,
   a canvas — and carry .16 without noticing. An assessment screen is one
   question on open paper, and at .16 the quilt was competing with the sentence
   the whole thing turns on. */
.tilefield{filter:opacity(.07)}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;margin:0;padding:0;overflow:hidden}
body{background:var(--paper);color:var(--ink);font-family:var(--body);
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--lead);outline-offset:3px}

/* ── the site header ──────────────────────────────────────────────────────
   Ported from web/public/new-home/index.html: fixed, out of the flow, opaque,
   hairline under it, logo at 22px — site-header.tsx's value, which the homepage
   condenses to. It is deliberately the CONDENSED bar and not the 88px open one:
   this is a two-minute flow on one screen with no scrolling, and 88px of chrome
   is 10% of a laptop's height spent on navigation nobody is going to use
   mid-assessment.

   Everything else on the page is offset by --nav-h rather than sitting under
   it — the rail, the question, the field. */
:root{ --nav-h:58px; }
.site{position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:60;
  display:flex;align-items:center;gap:clamp(16px,2.2vw,34px);
  padding-inline:clamp(20px,3.4vw,52px);
  background:var(--paper);border-bottom:1px solid var(--line)}
.site img{height:22px;width:auto;display:block}
.site .links{display:flex;gap:clamp(16px,2.4vw,32px);margin-left:auto}
.site .links a{font-size:14px;color:var(--text2);text-decoration:none;transition:color .15s}
.site .links a:hover{color:var(--lead)}
.site .cta-nav{display:inline-flex;align-items:center;height:36px;padding:0 16px;
  background:var(--ink);color:var(--paper);font-size:13.5px;font-weight:600;
  border-radius:var(--r);text-decoration:none;transition:background .15s}
.site .cta-nav:hover{background:var(--lead);color:var(--onlead)}
/* BEGIN GENERATED NAV CSS · scripts/sync-nav.mjs · edit web/src/lib/nav.json */
/* Generated — edit web/src/lib/nav.json and run scripts/sync-nav.mjs, then
   scripts/sync-assessment.mjs to propagate to web/public/assessment/.
   What was here: `@media (max-width:820px){ .site .links{display:none} }` — the
   fifth copy of the missing-mobile-menu bug. */
/* GROUPS — the same shape the static bars use, in this page's vocabulary. */
.site .navgrp{position:relative;display:flex;align-items:center}
.site .navgrp-top{display:inline-flex;align-items:center;gap:7px}
.site .navcaret{width:8px;height:8px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.6;transition:transform .2s ease}
.site .navpanel{position:absolute;top:100%;left:0;min-width:236px;z-index:2;
  display:flex;flex-direction:column;padding:6px;background:var(--paper);
  border:1px solid var(--ink);box-shadow:4px 4px 0 var(--ink);
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s}
.site .navpanel::before{content:"";position:absolute;left:0;right:0;top:-9px;height:9px}
.site .navpanel a{display:block;padding:9px 12px;font-size:14.5px;white-space:nowrap}
.site .navpanel a:hover,.site .navpanel a:focus-visible{background:var(--rail)}
.site .navpanel-all{margin-top:5px;padding-top:11px;border-top:1px solid var(--line);
  font-size:13px;color:var(--mute)}
@media (hover:hover) and (pointer:fine){
  .site .navgrp:hover>.navpanel{opacity:1;visibility:visible;transform:none}
  .site .navgrp:hover>.navgrp-top .navcaret{transform:rotate(180deg)}
}
.site .navgrp:focus-within>.navpanel,
.site .navgrp[data-open]>.navpanel{opacity:1;visibility:visible;transform:none}
.site .navgrp:focus-within>.navgrp-top .navcaret,
.site .navgrp[data-open]>.navgrp-top .navcaret{transform:rotate(180deg)}

.site .navtoggle{display:none}
@media (max-width:820px){
  .site .navgrp{display:block}
  .site .navgrp-top{width:100%;justify-content:space-between}
  .site .navpanel{position:static;opacity:1;visibility:visible;transform:none;
    min-width:0;display:none;margin:0 0 8px;padding:0 0 0 14px;border:0;
    border-left:1px solid var(--line);box-shadow:none}
  .site .navpanel::before{display:none}
  .site .navgrp[data-open]>.navpanel,
  .site .navgrp:focus-within>.navpanel{display:block}
  .site .navpanel a{padding:11px 0;min-height:44px;display:flex;align-items:center;
    white-space:normal;border-top:0}
  .site .navtoggle{display:inline-flex;align-items:center;justify-content:center;
    flex:none;margin-left:auto;width:44px;height:44px;padding:0;background:none;
    border:1px solid var(--line);color:var(--ink);cursor:pointer}
  .site .navtoggle-bars{display:block;position:relative;width:18px;height:12px}
  .site .navtoggle-bars span{position:absolute;left:0;width:100%;height:1.5px;
    background:currentColor;transition:transform .18s ease,opacity .12s linear}
  .site .navtoggle-bars span:nth-child(1){top:0}
  .site .navtoggle-bars span:nth-child(2){top:5.25px}
  .site .navtoggle-bars span:nth-child(3){top:10.5px}
  .site[data-nav-open] .navtoggle-bars span:nth-child(1){transform:translateY(5.25px) rotate(45deg)}
  .site[data-nav-open] .navtoggle-bars span:nth-child(2){opacity:0}
  .site[data-nav-open] .navtoggle-bars span:nth-child(3){transform:translateY(-5.25px) rotate(-45deg)}
  .site .links{position:absolute;top:100%;left:0;right:0;display:flex;
    flex-direction:column;align-items:stretch;gap:0;margin:0;
    padding:4px clamp(20px,3.4vw,52px) 12px;background:var(--paper);
    border-bottom:1px solid var(--line)}
  .site .links a{display:flex;align-items:center;gap:.35em;min-height:44px;
    font-size:16px;border-top:1px solid var(--line)}
  .site:not([data-nav-open]) .links{display:none}
}
@media (prefers-reduced-motion:reduce){ .site .navtoggle-bars span{transition:none} }
.nav-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* END GENERATED NAV CSS */

/* ── type ────────────────────────────────────────────────────────────────── */
.q{font-family:var(--display);font-weight:500;letter-spacing:-.03em;line-height:1.06;
  /* Scaled off vw ALONE this overflowed a short window: at 1280x720 the Q9
     screen ran 41px past the fold and, with html{overflow:hidden} enforcing
     "no scrolling on a question", Continue was unreachable. It takes whichever
     axis binds — the same mistake the homepage hero made with its cell. */
  margin:0;font-size:clamp(25px,min(3.1vw,4.4vh),46px)}
/* an aside inside a headline — same size and colour, lighter weight */
.q .q-lt{font-weight:300}
.sub{margin:14px 0 0;font-size:clamp(14px,1.05vw,17px);color:var(--text2);line-height:1.55}
.why{margin:10px 0 0;font-size:13px;color:var(--mute)}
.eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mute);margin:0}

/* ── the choice ladder ───────────────────────────────────────────────────── */
/* Stacked, not wrapped: these are full sentences, and a flex-wrap row would
   set them at ragged widths that read as a paragraph broken into pieces. The
   grid keeps one per line. The SHAPE is the pill's — same 999px radius — so a
   single-select choice looks like a single-select choice everywhere in the
   assessment, whether the options are two words or a full sentence. */
.opts{display:grid;gap:9px;margin:26px 0 0;max-width:640px}
.opt{display:block;text-align:left;padding:15px 22px;
  border:1px solid var(--line);background:var(--card);border-radius:999px;
  transition:border-color .14s,background .14s,color .14s}
.opt:hover{border-color:var(--ink)}
.opt[aria-checked="true"]{border-color:var(--ink);background:var(--paper)}
.opt .t{font-size:15.5px;line-height:1.45}

/* multi-select pills and single-select pills */
.pills{display:flex;flex-wrap:wrap;gap:9px;margin:26px 0 0;max-width:660px}
.pill{padding:11px 16px;border:1px solid var(--line);border-radius:999px;background:var(--card);
  font-size:14.5px;transition:border-color .14s,background .14s,color .14s}
.pill:hover{border-color:var(--ink)}
.pill[aria-checked="true"]{background:var(--lead);border-color:var(--lead);color:var(--onlead);font-weight:600}

textarea.job{width:100%;max-width:640px;margin:24px 0 0;min-height:104px;resize:none;
  padding:14px 16px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);
  font-size:16px;line-height:1.5}
textarea.job::placeholder{color:var(--faint)}

/* ── the morphing CTA ────────────────────────────────────────────────────── */
/* align-self matters: .screen is display:contents in a1, so the button's real
   parent is a flex COLUMN whose default align-items is stretch — inline-flex
   does not save it, and it rendered 640px wide. */
.cta{display:inline-flex;align-self:flex-start;flex:none;align-items:center;gap:11px;margin-top:28px;height:50px;
  padding:0 24px;border-radius:var(--r);font-size:15.5px;font-weight:600;
  background:var(--ink);color:var(--paper);transition:background .16s,color .16s,box-shadow .16s,opacity .16s}
/* Hover lives with the other colour decisions, further down, because it has to
   carry :not([disabled]) — see the note above .cta:hover:not([disabled]). */
.cta[data-state="skip"]{background:transparent;color:var(--mute);
  box-shadow:inset 0 0 0 1px var(--line);font-weight:400}
.cta[data-state="skip"]:hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.cta .ent{font-family:var(--mono);font-size:10px;letter-spacing:.12em;opacity:.62}

/* ── the dial ─────────────────────────────────────────────────────────────
   Sized off the cell, not off the viewport, so it sits in the same lattice as
   everything else. The arc and the hand are the only things that move. */
.dialrow{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
  gap:0 22px;align-items:center;margin-top:26px;max-width:520px}
.dial-q{grid-column:2;align-self:end;margin:0 0 6px;font-size:15px;color:var(--text2)}
.dial{grid-row:1 / span 2;width:132px;height:132px;cursor:grab;touch-action:none;
  border-radius:50%}
.dial:active{cursor:grabbing}
.dial .d-track{fill:var(--card);stroke:var(--line);stroke-width:2}
.dial .d-arc{stroke:var(--lead);stroke-width:6;stroke-linecap:round}
.dial .d-tick{stroke:var(--line);stroke-width:2}
.dial .d-hand{stroke:var(--ink);stroke-width:3.5;stroke-linecap:round;
  transition:none}
.dial .d-hub{fill:var(--ink)}
.dial:focus-visible{outline:2px solid var(--lead);outline-offset:4px}
.read{grid-column:2;align-self:start;margin:0;font-size:15px;color:var(--mute);
  display:grid;gap:3px}
.read span{white-space:nowrap}
.read b{font-family:var(--display);font-weight:500;font-size:21px;color:var(--ink);
  letter-spacing:-.02em}
.read .sep{opacity:.4;margin:0 4px}
@media (prefers-reduced-motion:reduce){ .dial .d-hand{transition:none} }

/* ── the reaction, as a popup ─────────────────────────────────────────────
   Three shapes were tried. A full screen of its own was six extra screens and
   six extra taps inside a flow that promises "under two minutes". A static line
   in the layout reserved height on every question whether or not it had
   anything to say, and moved the button when it did.

   A popup owns neither problem: it is out of the flow entirely, so nothing on
   the page moves when it arrives, and it costs no tap — it appears when an
   answer exists and leaves with the question. It sits at the foot of the copy
   column rather than centre-screen, so it never covers the options it is about.
*/
/* Bottom-CENTRE put a dark card level with the dark Continue button and the two
   read as a pair of buttons — one of which does nothing when you press it. It
   lives in the bottom-right corner instead, out of the answer column entirely. */
.pop{position:fixed;left:auto;right:26px;bottom:26px;z-index:45;display:flex;
  justify-content:center;pointer-events:none;padding-inline:22px}
.pop-in{max-width:min(44vw,480px);background:var(--ink);color:var(--paper);
  border-radius:var(--r);padding:15px 20px;font-size:15px;line-height:1.45;
  box-shadow:0 10px 34px -14px rgba(21,21,36,.55);
  border-left:3px solid var(--lead);
  opacity:0;transform:translateY(10px);
  transition:opacity .26s var(--ease),transform .26s var(--ease)}
.pop.on .pop-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .pop-in{transform:none;transition:opacity .2s linear}
}

/* ── the level rail — assessment.md §2, "the rail is the progress bar" ─────
   Down the LEFT edge, all five visible and faint, and a level fills when its
   boundary question is answered and STAYS filled. It is what makes the scoring
   legible by question five, so the result reads as a confirmation rather than
   as a surprise. */
.rail{position:fixed;left:0;top:var(--nav-h);bottom:0;width:190px;padding:26px 0 26px 26px;
  display:flex;flex-direction:column;justify-content:center;gap:16px;z-index:20;
  border-right:1px solid var(--line);background:color-mix(in srgb,var(--paper) 88%,transparent)}
.prog{padding-right:22px;opacity:0;transition:opacity .3s var(--ease)}
.rail.live .prog{opacity:1}
.prog-lb{margin:0;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint)}
.prog-n{margin:4px 0 0;font-family:var(--display);font-weight:500;font-size:26px;
  letter-spacing:-.02em;color:var(--ink);line-height:1}
.rail-hd{padding-top:15px;border-top:1px solid var(--line);margin-right:22px}
/* TWO VOICES, NOT ONE — 2026-08-26 (Scotty): "I would like different fonts for
   'your level so far' and 'fills in as you answer'."
   They were the same mono at two sizes, which read as one thing broken in half
   by the ladder. They are not one thing. The head is a LABEL for the column and
   keeps the mono: uppercase, letterspaced, the same voice every other label in
   this instrument uses. The foot is a SENTENCE about how the column behaves,
   and a sentence set in mono reads as code. It moves to the body face. */
.rail-hd{margin:0;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);padding-right:22px}
.rail-ft{font-family:var(--body);font-size:11.5px;letter-spacing:0;
  text-transform:none;line-height:1.4;color:var(--faint);padding-right:22px}
/* ── the spine — five names with nothing joining them read as a list of links ──
   DRAWN IN SEGMENTS BETWEEN THE BOXES, not as one line behind them.
   2026-08-26 (Scotty): "I can see the dividing line that connects all of them
   through the rounded rectangle squares, and I don't want that when they're
   blank — I'd rather not show that line through that box."

   Two full-height lines used to run from the top rung to the bottom one, and
   each dot was supposed to occlude them by painting itself over the top. On the
   lattice skin it does not: that page overrides the dot to `background:
   transparent` so the boxes read as empty outlines, and a transparent box hides
   nothing.

   Painting the dot opaque again was the obvious fix and it is the wrong one —
   the rail's own ground there is a horizontal gradient (`rgba(scrim,.9)` to
   `rgba(scrim,.5)`), so there is no single colour a 9px chip could be to
   disappear into it. Any value picked would be right at one x and visibly wrong
   at another.

   So the line simply stops at each box and starts again after it. One segment
   per rung, sitting in the gap BELOW that rung's dot, which is what makes the
   colour rule trivial: the ladder runs 5 at the top down to 1 at the bottom, so
   the segment below rung L joins L to L-1 and is lit exactly when L itself is
   reached. No sibling has to look upward at another.

   Geometry is in percentages of the row rather than pixels so it survives a
   font-size or line-height change: from 5px below this dot's centre to 5px
   above the next one's, both clearing the 9px box by half a pixel. */
.rungs{position:relative}
.rail .lv:not(:last-child)::after{content:"";position:absolute;left:28px;width:1px;
  top:calc(50% + 5px);bottom:calc(-50% + 5px);background:var(--line);
  transition:background .4s var(--ease)}
.rail .lv.on:not(:last-child)::after,
.rail .lv.now:not(:last-child)::after{background:var(--lead)}
/* THE DIM STATE MOVED OFF .lv AND ONTO ITS CHILDREN. It was `opacity:.34` on
   the row, which an ::after inherits — the unreached segments would have come
   out at a third of a hairline and the spine would have faded away above the
   reader instead of staying a ladder. The children carry it now, so the row
   itself stays at full strength and only the num, box and name dim. */
.rail .lv{position:relative;display:grid;grid-template-columns:14px 9px 1fr;
  align-items:center;gap:0 10px;padding:9px 0}
.rail .lv>*{opacity:.34;transition:opacity .3s var(--ease)}
.rail .lv .num{font-family:var(--mono);font-size:10px;color:var(--faint);text-align:left}
.rail .lv .dot{width:9px;height:9px;flex:none;border:1px solid var(--ink);border-radius:2px;
  background:var(--paper);transition:background .35s var(--ease),border-color .35s var(--ease)}
.rail .lv .nm{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase}
.rail .lv .tag{display:none;font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--onlead);background:var(--lead);border-radius:2px;
  padding:2px 5px;grid-column:3;justify-self:start;margin-top:5px}
.rail .lv.on>*,.rail .lv.now>*{opacity:1}
.rail .lv.on .dot{background:var(--lead);border-color:var(--lead)}
.rail .lv.on .num{color:var(--text2)}
.rail .lv.now .nm{color:var(--ink);font-weight:500}
.rail .lv.now .tag{display:block}

/* ── the level bar ───────────────────────────────────────────────────────────
   "What if you had those five across the top? As you answer, the pills start
   filling up and you start leveling up." It replaces a1's left rail, which was
   saying the same thing next to a mosaic that was saying something narrower —
   "isn't the thing on the left duplicitous with the thing on the right".
   ────────────────────────────────────────────────────────────────────────── */
:root{ --bar-h:62px; }
.rail.off{display:none}
.levelbar{position:fixed;top:var(--nav-h);left:0;right:0;height:var(--bar-h);z-index:40;
  display:flex;align-items:center;gap:16px;padding:0 clamp(18px,2.4vw,34px);
  background:color-mix(in srgb,var(--paper) 94%,transparent);
  border-bottom:1px solid var(--line);backdrop-filter:none}
.lb-count{margin:0;flex:none;min-width:52px;font-family:var(--mono);font-size:13px;
  letter-spacing:.06em;color:var(--ink);font-variant-numeric:tabular-nums}
.lb-pills{position:relative;display:flex;align-items:center;gap:clamp(6px,1.1vw,18px);
  flex:1;min-width:0}
/* the rail the pills sit on — without it five outlined capsules read as five
   empty input fields rather than as rungs of one ladder */
.lb-pills::before{content:"";position:absolute;left:10px;right:10px;top:50%;height:1px;
  background:var(--line)}
.lvpill{position:relative;flex:0 1 auto;min-width:0;display:flex;align-items:center;gap:7px;
  padding:5px 12px 5px 7px;border:1px solid var(--line);border-radius:999px;background:var(--paper);
  transition:background .4s var(--ease),border-color .4s var(--ease)}
.lvpill b{width:16px;height:16px;flex:none;display:grid;place-items:center;border-radius:50%;
  background:var(--rail);font-family:var(--mono);font-size:9px;font-weight:500;color:var(--mute)}
.lvpill span{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lvpill.on{background:var(--lead);border-color:var(--lead)}   /* same fill as every
     other selected control — see the note under the buttons */
.lvpill.on b{background:rgba(255,255,255,.28);color:#fff}
.lvpill.on span{color:#fff}
.lvpill.now{outline:2px solid var(--ink);outline-offset:1px}
@media (max-width:820px){
  .lb-count{min-width:0;font-size:11.5px}
  .lvpill span{display:none}
  .lvpill{justify-content:center;padding:7px 0}
  .lvpill b{font-size:11px}
}

/* ── the job, in three boxes ────────────────────────────────────────────────
   One box could not hold "an underwriter for corporate reinsurance for
   pharmaceutical equipment", and a dropdown of industries was rejected outright.
   ────────────────────────────────────────────────────────────────────────── */
.fields{display:grid;gap:12px;margin:22px 0 0;max-width:620px}
.field{display:grid;gap:6px}
.flab{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint)}
.field input,.field select,.otherbox{width:100%;height:48px;padding:0 15px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--card);font-family:var(--body);font-size:15.5px;color:var(--ink)}
.field input:focus,.field select:focus,.otherbox:focus{outline:2px solid var(--lead);outline-offset:1px}
/* box-sizing is declared rather than inherited: the height above has to match
   the text inputs exactly for the stack to read as one set of controls, and a
   1px border under content-box makes a select 50px against an input's 48. */
.field select{box-sizing:border-box;appearance:none;-webkit-appearance:none;cursor:pointer;
  /* The caret is drawn rather than left to the UA, because a native select
     arrow is the one part of this instrument that would look like a form. */
  background-image:linear-gradient(45deg,transparent 50%,var(--mute) 50%),
                   linear-gradient(135deg,var(--mute) 50%,transparent 50%);
  background-position:calc(100% - 19px) 21px,calc(100% - 14px) 21px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px}
/* Unanswered reads quieter than answered — the placeholder convention, applied
   to a control that has no placeholder of its own. */
.field select:invalid,.field select[data-empty="1"]{color:var(--faint)}
.otherbox{margin:11px 0 0;max-width:420px}

/* ── the stepped bar ────────────────────────────────────────────────────────
   Five stops. "There's too many variables there, like 5.7, 5.6."
   ────────────────────────────────────────────────────────────────────────── */
.hoursrow{margin:22px 0 0;max-width:460px}
.hlab{margin:0 0 14px;font-size:14px;color:var(--text2)}
.hbar{position:relative;height:26px;cursor:pointer;touch-action:none}
.hbar:focus-visible{outline:2px solid var(--lead);outline-offset:4px}
.hline,.hfill{position:absolute;top:50%;left:0;height:3px;margin-top:-1.5px;border-radius:2px}
.hline{right:0;background:var(--line)}
.hfill{background:var(--lead);transition:width .18s var(--ease)}
.hdot{position:absolute;top:50%;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;padding:0;
  border:1px solid var(--line);border-radius:50%;background:var(--card);cursor:pointer}
.hdot.on{background:var(--lead);border-color:var(--lead)}
.hknob{position:absolute;top:50%;width:24px;height:24px;margin:-12px 0 0 -12px;
  border:1px solid var(--ink);border-radius:5px;background:var(--card);pointer-events:none;
  box-shadow:0 1px 3px rgba(21,21,36,.12);transition:left .18s var(--ease)}
.hticks{display:flex;justify-content:space-between;margin-top:9px}
.hticks span{font-family:var(--mono);font-size:10.5px;color:var(--faint)}
.hticks span.on{color:var(--ink);font-weight:500}

/* Back is a real button now, sitting to the LEFT of Next: black rule, white
   ground, black label. It reads as the pair's other half rather than as a
   text link someone tucked beside it — but it is outlined where Next is
   filled, so which one is the forward move is never in question. */
/* The gap above the pair belongs to the ROW, not to Next. While .cta carried
   its own margin-top and Back did not, align-items:center measured Back
   against a box 28px taller than itself and sat it half that distance high —
   the two buttons were off by 14px for no reason anyone could see. */
.ctarow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:28px}
.ctarow .cta{margin-top:0}
.back{display:inline-flex;align-items:center;height:50px;padding:0 20px;cursor:pointer;
  background:#fff;color:var(--ink);border:1px solid var(--ink);border-radius:var(--r);
  font-family:var(--body);font-size:15px;font-weight:500;
  transition:background .14s var(--ease),color .14s var(--ease)}
.back:hover{background:var(--ink);color:#fff}
.back:focus-visible{outline:2px solid var(--lead);outline-offset:2px}
@media (max-height:800px){ .back{height:46px} }

/*
  WHITE TEXT ON SIGNAL ORANGE.

  Two instructions, both explicit: "the orange bubbles should have white text in
  them, not black text \u2014 same goes for the continue button", and then, after a
  pass shipped on Blaze 4, "change the button color back to orange".

  For the record, because the next person to touch this will wonder: white on
  #FC7800 measures 2.59:1, against the 4.5:1 AA wants at this label size. The
  alternatives were Midnight on Signal (6.72:1) or white on #E21200 (4.86:1),
  and both were looked at and set aside \u2014 the first loses the white text, the
  second reads red rather than orange. Changing `color` on this one rule is the
  whole fix if that trade is ever re-made.
*/
.pill[aria-checked="true"],.cta{background:var(--lead);color:#fff}
.pill[aria-checked="true"]{border-color:var(--lead)}
/* The choice rows lost their letter chip, and that chip was carrying the whole
   selected state — an orange square against a white row. Without it the row
   fills like a pill, for the same reason the pill does: it is the only mark on
   the screen, and a border alone is not one. */
.opt[aria-checked="true"]{background:var(--lead);border-color:var(--lead);color:#fff}
/* Hover inverts rather than deepening the fill: white ground, Midnight label,
   and a 2px Signal ring in the same orange the resting button is filled with.
   The ring is inset box-shadow, not border, so the button does not grow 2px
   and shove the proof line on hover.

   The :not([disabled]) guard is load-bearing. .cta[disabled] resets background
   and color but never box-shadow, so an unguarded hover rule paints the orange
   ring onto the greyed-out Continue while it is still waiting for an answer. */
.cta:hover:not([disabled]){background:#fff;color:var(--ink);box-shadow:inset 0 0 0 2px var(--lead)}
.cta[disabled]{background:none;border:1px solid var(--line);color:var(--faint);cursor:default}
.cta[disabled] .ent{opacity:.45}

/* ── the count, and the affordance the spec asks to be visible ───────────── */
.hud{position:fixed;right:26px;top:calc(var(--nav-h) + 18px);z-index:20;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.kbd{position:fixed;left:216px;bottom:22px;z-index:20;font-family:var(--mono);font-size:10px;
  letter-spacing:.12em;color:var(--faint)}

/* ── results ─────────────────────────────────────────────────────────────── */
/* FIXED, not absolute. Absolute takes its containing block from whatever the
   mount happens to sit in — half a column in a1, a 500px plate in a3 — so the
   results rendered inside the question's furniture: the headline wrapped to four
   words and clipped mid-word, and in a1 the copy ran across the column divider.
   The results page is a page. It takes the viewport, minus the rail. */
.results{position:fixed;inset:0;top:var(--nav-h);left:190px;overflow-y:auto;
  padding:7vh 6vw 12vh;z-index:30;background:var(--paper)}
@media (max-width:1000px){ .results{left:0} }
@media (max-width:1000px){
  .kbd{display:none}
  .pop{left:16px;right:16px;justify-content:center}
  .pop-in{max-width:none}
}
.results .wrap{max-width:640px;margin:0 auto}
.results h1{font-family:var(--display);font-weight:500;font-size:clamp(30px,4vw,52px);
  letter-spacing:-.035em;line-height:1.04;margin:12px 0 0}
.results h2{font-family:var(--display);font-weight:500;font-size:clamp(21px,2.2vw,30px);
  letter-spacing:-.028em;margin:0}
.block{margin-top:42px;padding-top:26px;border-top:1px solid var(--line)}
.block:first-of-type{border-top:0;padding-top:0}
.block p{margin:12px 0 0;font-size:16px;line-height:1.62;color:var(--text2)}
.block .big{font-family:var(--display);font-weight:500;font-size:clamp(23px,2.5vw,34px);
  letter-spacing:-.028em;line-height:1.15;color:var(--ink);margin:10px 0 0}
.block ul{margin:14px 0 0;padding-left:18px}
.block li{font-size:15.5px;line-height:1.6;color:var(--text2);margin:6px 0}
.paste{margin:14px 0 0;padding:15px 17px;background:var(--rail);border:1px solid var(--line);
  border-radius:var(--r);font-family:var(--mono);font-size:12.5px;line-height:1.75;white-space:pre-wrap}
.note{margin-top:14px;padding-left:13px;border-left:2px solid var(--lead);
  font-size:14px;line-height:1.55;color:var(--mute)}

/* ── the gate ────────────────────────────────────────────────────────────── */
/* Scoped to the email box, not to every input on the screen — the opt-in is
   also an <input> and a 52px-tall full-width checkbox is not a checkbox. */
.gate input[type="email"]{width:100%;max-width:420px;margin:22px 0 0;height:52px;padding:0 16px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--card);font-size:16px}
/* The label wraps the sentence, so the whole line is the hit target. */
.optin{display:flex;align-items:flex-start;gap:9px;max-width:420px;margin:13px 0 0;
  font-size:13.5px;line-height:1.5;color:var(--text2);cursor:pointer}
.optbox{flex:none;width:15px;height:15px;margin:2px 0 0;accent-color:var(--lead);cursor:pointer}
.gate ul{margin:12px 0 0;padding-left:18px}
.gate li{font-size:14.5px;line-height:1.6;color:var(--text2);margin:5px 0}
.gate .sub{margin-top:26px}

/* ── motion ──────────────────────────────────────────────────────────────── */
.screen{animation:rise .42s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  /* opacity and colour are kept; only movement goes — assessment.md §2 */
  .screen{animation:fade .3s ease both}
  @keyframes fade{from{opacity:0}to{opacity:1}}
  *{transition-duration:.01ms !important}
}


/* ── short windows ────────────────────────────────────────────────────────
   A 720-tall laptop is not a phone: the desktop layout is right, it just has
   less room. Everything vertical tightens; nothing is removed. Specificity is
   raised past `.dialrow` because each build sets its own dial margin. */
@media (max-height:800px){
  .side,.plate{padding-top:3.5vh;padding-bottom:3.5vh}
  .sub{margin-top:10px}
  .opts,.pills{margin-top:18px}
  body .dialrow{margin-top:16px}
  .cta{margin-top:20px;height:46px}
  .ctarow{margin-top:20px}
  .ask{padding-top:3vh;padding-bottom:3.5vh}
}