/* Your Local Tradesman — onboarding portal.
   Tokens come from /assets/tokens.css, generated from the brand kit.
   Rule that governs the whole file: dark ink on the accent, never white.
   #2DBDEF holds #191919 at 9.64:1 and white at 2.18:1. */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
/* Nothing is meant to be wider than the screen. If something ever is, it gets
   cut off at the edge rather than letting the whole page slide sideways. */
html, body { overflow-x: clip; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--body-weight);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: -.02em; line-height: 1.2; margin: 0; }
p { margin: 0 0 1em; }
a { color: inherit; }
.script { font-family: 'Caveat', cursive; font-weight: 700; }
.muted { color: var(--ink-muted); }
[hidden] { display: none !important; }

/* ── Buttons ───────────────────────────────────────────────────────── */

.btn {
  font: inherit; font-weight: 600; font-size: 15px;
  border: 0; border-radius: var(--radius-pill);
  padding: 13px 26px; cursor: pointer;
  transition: transform .12s ease, background .16s ease, opacity .16s ease;
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
}
/* Button wording wraps between words on a narrow screen, never inside one. */
.btn { overflow-wrap: normal; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn--accent { background: var(--accent); color: var(--ink-on-accent); }
.btn--accent:hover:not(:disabled) { background: var(--accent-pressed); }
.btn--dark { background: var(--ground-dark); color: var(--ink-on-dark); }
.btn--ghost { background: transparent; color: currentColor; border: 1px solid var(--hairline-strong); }
.btn--ghost:hover { border-color: currentColor; }
.btn--sm { padding: 8px 16px; font-size: 13px; }
/* Fingers need more room than a mouse pointer does. */
@media (pointer: coarse), (max-width: 1200px) { .btn--sm { min-height: 44px; } }
.btn--block { width: 100%; }

/* ── Fields ────────────────────────────────────────────────────────── */

.field { display: block; margin: 0 0 20px; }
.field__label { display: block; font-size: 15px; font-weight: 600; margin-bottom: 7px; }
.field__hint { display: block; font-size: 14px; color: var(--ink-muted); margin: -3px 0 8px; line-height: 1.5; }
.field__input, textarea.field__input, select.field__input {
  width: 100%; font: inherit; font-size: 16px;
  padding: 13px 15px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-field);
  background: var(--surface); color: var(--ink);
  transition: border-color .14s ease, box-shadow .14s ease;
}
.field__input:focus, textarea.field__input:focus, select.field__input:focus {
  outline: 0; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(45,189,239,.28);
}
.field__input::placeholder { color: #939393; }
textarea.field__input { resize: vertical; min-height: 96px; line-height: 1.55; }
.field--invalid .field__input { border-color: #C4321F; }
.field__error { color: #C4321F; font-size: 14px; margin-top: 6px; }

.field__suffixed { display: flex; align-items: stretch; }
.field__suffixed .field__input { border-radius: var(--radius-field) 0 0 var(--radius-field); }
.field__suffix {
  display: flex; align-items: center; padding: 0 14px;
  background: var(--canvas); border: 1px solid var(--hairline-strong); border-left: 0;
  border-radius: 0 var(--radius-field) var(--radius-field) 0;
  font-size: 14px; color: var(--ink-muted); white-space: nowrap;
}

.choices { display: grid; gap: 9px; }
.choice {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 16px; border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-field); background: var(--surface);
  cursor: pointer; transition: border-color .14s, background .14s;
  font-size: 16px;
}
.choice:hover { border-color: var(--accent); }
.choice input { margin: 3px 0 0; accent-color: var(--accent); width: 18px; height: 18px; flex: none; }
.choice--on { border-color: var(--accent); background: rgba(45,189,239,.07); }

.scale { display: flex; gap: 8px; align-items: center; }
.scale__btn {
  flex: 1; padding: 14px 0; font: inherit; font-weight: 600;
  border: 1px solid var(--hairline-strong); border-radius: var(--radius-field);
  background: var(--surface); cursor: pointer; transition: all .14s;
}
.scale__btn--on { background: var(--accent); border-color: var(--accent); color: var(--ink-on-accent); }
.scale__ends { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-muted); margin-top: 6px; }

.fieldgroup { margin: 0 0 34px; }
.fieldgroup__head {
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 600; color: var(--ink-muted);
  padding-bottom: 9px; margin-bottom: 20px; border-bottom: 1px solid var(--hairline);
}

/* ── Login ─────────────────────────────────────────────────────────── */

.login { display: grid; grid-template-columns: 1fr; min-height: 100dvh; }
@media (min-width: 900px) { .login { grid-template-columns: 1fr .8fr; } }

.login__panel {
  background: var(--ground-dark); color: var(--ink-on-dark);
  padding: clamp(32px, 6vw, 84px); display: flex; flex-direction: column; justify-content: center;
}
.login__logo { width: 168px; margin-bottom: 44px; }
.login__h1 { font-size: clamp(38px, 6vw, 58px); font-weight: 300; letter-spacing: -.03em; margin-bottom: 16px; }
.login__lead { font-size: 18px; color: var(--ink-on-dark-muted); max-width: 42ch; margin-bottom: 34px; }
.login__form { max-width: 420px; }
.login__form .field__label { color: var(--ink-on-dark); }
.login__form .field__input { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.2); color: var(--ink-on-dark); }
.login__form .field__input::placeholder { color: rgba(255,255,255,.35); }
.login__form .btn { width: 100%; }
.login__msg { margin-top: 18px; padding: 14px 18px; border-radius: var(--radius-field); background: rgba(45,189,239,.14); max-width: 420px; font-size: 15px; }
.login__foot { margin-top: 40px; font-size: 14px; color: var(--ink-on-dark-muted); }
.login__foot a { color: var(--accent); }

.login__aside {
  display: none; background: var(--accent); color: var(--ink-on-accent);
  padding: 64px; align-items: center; justify-content: center; text-align: center;
}
@media (min-width: 900px) { .login__aside { display: flex; } }
.login__quote .script { font-size: 56px; display: block; line-height: 1; margin-bottom: 20px; }
.login__quote p { font-size: 21px; font-weight: 600; margin-bottom: 4px; }
.login__quote small { font-size: 14px; opacity: .8; }

/* ── App shell ─────────────────────────────────────────────────────── */

.app { min-height: 100dvh; display: flex; flex-direction: column; }

/* --bar is how tall the top bar is; the menu drawer opens directly under it. */
.app { --bar: 72px; }
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 16px;
  min-height: var(--bar); box-sizing: border-box;
  padding: 12px clamp(14px, 3vw, 26px);
  background: var(--ground-dark); color: var(--ink-on-dark);
}
.topbar__logo { height: 48px; flex: 0 1 auto; min-width: 0; object-fit: contain; object-position: left center; }
.topbar .btn { white-space: nowrap; flex: none; }
.rail__signout { display: none; }
/* On a phone the bar has to fit menu, logo, the test badge and points in 320px,
   so the progress bar drops out, the points figure carries it alone, and Sign
   out moves to the foot of the menu. */
@media (max-width: 600px) {
  .app { --bar: 56px; }
  .topbar { gap: 8px; padding-top: 6px; padding-bottom: 6px; }
  .topbar__logo { height: 26px; }
  .topbar .scorebar { display: none; }
  .topbar #logout { display: none; }
  .topbar__test-more { display: none; }
  /* The bottom margin lets it scroll clear of the Flag this button. */
  .rail__signout { display: flex; width: calc(100% - 16px); margin: 22px 8px 70px; }
}
.topbar__score { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.topbar__pts { font-size: 13px; font-weight: 600; white-space: nowrap; }
.scorebar { width: clamp(80px, 22vw, 240px); height: 8px; border-radius: var(--radius-pill); background: rgba(255,255,255,.16); overflow: hidden; }
.scorebar__fill { height: 100%; width: 0; background: var(--accent); border-radius: var(--radius-pill); transition: width .5s cubic-bezier(.2,.7,.3,1); }

.topbar__menu { display: none; background: none; border: 0; padding: 8px; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 4px; min-width: 44px; min-height: 44px; margin-left: -8px; color: inherit; }
.topbar__menu span { display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; }
@media (max-width: 900px) { .topbar__menu { display: flex; } }

.app__body { display: grid; grid-template-columns: 288px 1fr; flex: 1; align-items: start; }
@media (max-width: 900px) { .app__body { grid-template-columns: 1fr; } }

/* ── Rail ──────────────────────────────────────────────────────────── */

.rail {
  position: sticky; top: var(--bar); align-self: start;
  height: calc(100dvh - var(--bar)); overflow-y: auto;
  padding: 22px 14px 40px; background: var(--surface);
  border-right: 1px solid var(--hairline);
}
@media (max-width: 900px) {
  .rail { position: fixed; inset: var(--bar) 0 0 0; max-height: none; z-index: 30; display: none; }
  .rail--open { display: block; }
}

.rail__item {
  display: flex; gap: 13px; align-items: flex-start; width: 100%; text-align: left;
  padding: 12px 14px; border: 0; background: none; font: inherit; cursor: pointer;
  border-radius: 14px; color: var(--ink); transition: background .14s;
}
.rail__item:hover { background: var(--canvas); }
.rail__item--on { background: var(--canvas); }
.rail__item--on .rail__title { color: var(--ink); }
.rail__item--locked { opacity: .42; cursor: not-allowed; }

.rail__dot {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--hairline-strong); display: grid; place-items: center;
  font-size: 12px; font-weight: 700; color: var(--ink-muted); margin-top: 1px;
}
.rail__item--on .rail__dot { border-color: var(--accent); color: var(--accent); }
.rail__item--done .rail__dot { background: var(--accent); border-color: var(--accent); color: var(--ink-on-accent); }

.rail__title { font-weight: 600; font-size: 15px; display: block; line-height: 1.35; }
.rail__meta { font-size: 12.5px; color: var(--ink-muted); }

.rail__item--soon .rail__dot { border-style: dashed; }
.rail__item--soon .rail__title { color: var(--ink-muted); }

/* ── Stage ─────────────────────────────────────────────────────────── */

/* min-width and overflow-wrap: a long unbroken string (an email address, a
   link) wraps inside the page rather than pushing it wider than a phone. */
.stage { padding: clamp(24px, 4vw, 52px) clamp(18px, 5vw, 64px) 120px; max-width: 920px; margin-inline: auto; width: 100%; min-width: 0; overflow-wrap: anywhere; }
.stage:focus { outline: 0; }

.stage__kicker { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; color: var(--accent); margin-bottom: 10px; }
.stage__title { font-size: clamp(32px, 5.2vw, 50px); font-weight: 300; letter-spacing: -.035em; margin-bottom: 12px; }
.stage__meta { display: flex; gap: 18px; flex-wrap: wrap; font-size: 14px; color: var(--ink-muted); margin-bottom: 36px; padding-bottom: 24px; border-bottom: 1px solid var(--hairline); }

.block { margin: 0 0 40px; }
.block h2 { font-size: 27px; margin-bottom: 14px; letter-spacing: -.025em; }
.block h3 { font-size: 20px; margin-bottom: 10px; }
.block p { max-width: 68ch; }
.block strong { font-weight: 600; }

/* Whiteboard cartoon slot. Deliberately looks like a drawn frame rather than a
   broken image, so a portal shipped ahead of the animations still reads as
   finished. Swap `src` in journey.js and the placeholder disappears. */
.vidslot {
  position: relative; aspect-ratio: 16/9; width: 100%;
  border-radius: var(--radius-card); overflow: hidden;
  margin: 0 0 34px; background: #fff;
  border: 2px dashed rgba(25,25,25,.22);
  display: grid; place-items: center; text-align: center; padding: 24px;
}
.vidslot::before {
  content: ''; position: absolute; inset: 10px; border-radius: 14px;
  background:
    repeating-linear-gradient(0deg, rgba(25,25,25,.045) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(25,25,25,.045) 0 1px, transparent 1px 34px);
  pointer-events: none;
}
.vidslot__mark { position: relative; }
.vidslot__pen {
  width: 54px; height: 54px; border-radius: 50%; background: var(--accent);
  display: grid; place-items: center; margin: 0 auto 14px; color: var(--ink-on-accent);
}
.vidslot__script { font-family: 'Caveat', cursive; font-weight: 700; font-size: 34px; line-height: 1.1; margin: 0; }
@media (max-width: 600px) {
  .vidslot__pen { width: 44px; height: 44px; margin-bottom: 10px; }
  .vidslot__script { font-size: 25px; }
}
.vidslot video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vidslot--filled { border: 0; padding: 0; background: #000; }

/* A stage that is written but not switched on yet. */
.soon {
  background: var(--surface); border-radius: var(--radius-card);
  padding: 32px 34px; margin: 0 0 34px;
}
.soon__badge {
  display: inline-block; background: var(--accent); color: var(--ink-on-accent);
  font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  padding: 6px 14px; border-radius: var(--radius-pill); margin-bottom: 16px;
}
.soon__lead { font-size: 19px; font-weight: 600; margin-bottom: 12px; }
.soon p:last-child { margin-bottom: 0; }

.callout {
  border-radius: var(--radius-card); padding: 26px 30px; margin: 0 0 34px;
}
.callout h3 { margin-bottom: 8px; }
.callout p:last-child { margin-bottom: 0; }
.callout--accent { background: var(--accent); color: var(--ink-on-accent); }
.callout--quiet { background: var(--surface); }

.jess {
  display: flex; gap: 18px; align-items: flex-start;
  background: var(--surface); border-radius: var(--radius-card);
  padding: 24px 28px; margin: 0 0 34px;
  box-shadow: rgba(0,0,0,.06) 6px 14px 34px;
}
.jess__av {
  flex: none; width: 52px; height: 52px; border-radius: 50%;
  background: var(--accent); color: var(--ink-on-accent);
  display: grid; place-items: center; font-weight: 700; font-size: 19px;
}
.jess__who { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--ink-muted); margin-bottom: 8px; }
.jess__h { margin-bottom: 10px; }
.jess__body p:last-child { margin-bottom: 0; }
/* On a phone the picture, name and heading make a header row, and what Jess
   says runs the full width of the card underneath instead of in a thin column. */
@media (max-width: 600px) {
  .jess { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 0; align-items: center; padding: 22px 20px; }
  .jess__body { display: contents; }
  .jess__av { grid-column: 1; grid-row: 1 / span 2; width: 46px; height: 46px; font-size: 17px; }
  .jess__who { grid-column: 2; grid-row: 1 / span 2; margin-bottom: 0; }
  .jess--titled .jess__who { grid-row: 1; align-self: end; }
  .jess__h { grid-column: 2; grid-row: 2; align-self: start; margin: 3px 0 0; }
  .jess__body > :not(.jess__who):not(.jess__h) { grid-column: 1 / -1; }
  .jess__who + :not(.jess__h), .jess__h + * { margin-top: 16px; }
}

.rulelist { display: grid; gap: 2px; border-radius: var(--radius-card); overflow: hidden; }
.rule { background: var(--surface); padding: 20px 24px; display: grid; gap: 5px; }
.rule__top { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.rule__title { font-weight: 600; font-size: 17px; }
.rule__clause {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  background: rgba(45,189,239,.18); color: #0B6E8E;
  padding: 3px 9px; border-radius: var(--radius-pill); white-space: nowrap;
}
.rule__body { color: var(--ink-muted); font-size: 15.5px; line-height: 1.6; }

.statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0 0 34px; }
.stat { background: var(--surface); border-radius: var(--radius-card); padding: 22px; }
.stat__n { font-size: 34px; font-weight: 600; letter-spacing: -.04em; line-height: 1; margin-bottom: 6px; }
.stat__l { font-size: 14px; color: var(--ink-muted); line-height: 1.45; }

.docs { display: grid; gap: 10px; margin: 0 0 34px; }
.doclink {
  display: flex; align-items: center; gap: 14px; text-decoration: none;
  background: var(--surface); border-radius: var(--radius-field);
  padding: 16px 20px; border: 1px solid var(--hairline); transition: border-color .14s;
}
.doclink:hover { border-color: var(--accent); }
.doclink__icon { flex: none; width: 34px; height: 34px; border-radius: 9px; background: rgba(45,189,239,.16); display: grid; place-items: center; color: #0B6E8E; }
.doclink__t { font-weight: 600; font-size: 16px; }
.doclink__s { font-size: 13px; color: var(--ink-muted); }
.doclink__go { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--ink-muted); }

.sheet { background: var(--surface); border-radius: var(--radius-card); overflow: hidden; margin: 0 0 34px; }
.sheet table { width: 100%; border-collapse: collapse; font-size: 15px; }
.sheet th { text-align: left; background: var(--canvas); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); padding: 12px 20px; }
.sheet td { padding: 11px 20px; border-top: 1px solid var(--hairline); }
.sheet tr:hover td { background: rgba(45,189,239,.05); }
.sheet__more { padding: 14px 20px; font-size: 14px; color: var(--ink-muted); border-top: 1px solid var(--hairline); }

/* Uploads */
.uploads { display: grid; gap: 14px; margin: 0 0 34px; }
.upload {
  border: 2px dashed var(--hairline-strong); border-radius: var(--radius-card);
  padding: 20px 22px; background: var(--surface); transition: border-color .14s, background .14s;
}
.upload--over { border-color: var(--accent); background: rgba(45,189,239,.06); }
.upload--done { border-style: solid; border-color: var(--accent); }
.upload--problem { border-style: solid; border-color: #C0392B; }
.upload__problem { font-weight: 600; margin: 0 0 6px; }
.upload--problem .upload__problem { color: #C0392B; }
.upload__later { font-size: 14px; color: var(--ink-muted); margin: 0 0 14px; }
.upload__later:last-child { margin-bottom: 0; }
.upload__head { display: flex; align-items: center; gap: 14px; }
.upload__label { font-weight: 600; }
.upload__req { font-size: 12px; color: var(--ink-muted); }
.upload__hint { font-size: 14px; color: var(--ink-muted); margin-top: 4px; }
.upload__thumb { width: 78px; height: 52px; border-radius: 8px; object-fit: cover; background: var(--canvas); }
.upload__status { margin-left: auto; font-size: 13.5px; font-weight: 600; }
.upload__found { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--hairline); }
.upload__found h4 { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 12px; }
.upload__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.upload__grid .field { margin: 0; }

/* Quiz */
.quiz { background: #3B3F45; color: var(--ink-on-dark); border-radius: var(--radius-card); padding: clamp(24px, 4vw, 38px); margin: 44px 0 0; }
.quiz h2 { color: var(--ink-on-dark); margin-bottom: 6px; }
.quiz__lead { color: var(--ink-on-dark-muted); margin-bottom: 28px; }
.quiz__q { margin: 0 0 26px; padding: 0 0 26px; border-bottom: 1px solid rgba(255,255,255,.12); }
.quiz__q:last-of-type { border-bottom: 0; padding-bottom: 8px; }
.quiz__qt { font-weight: 600; font-size: 17px; margin-bottom: 14px; }
.quiz .choice { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.16); color: var(--ink-on-dark); }
.quiz .choice:hover { border-color: var(--accent); }
.quiz .choice--on { background: rgba(45,189,239,.16); border-color: var(--accent); }
.quiz .choice--wrong { border-color: #FF8A73; background: rgba(255,138,115,.12); }
.choice--right { border-color: var(--accent); background: rgba(45,189,239,.12); }
.quiz .choice--right { border-color: var(--accent); background: rgba(45,189,239,.2); }
.choice__tick { margin-left: auto; flex: none; display: block; }
.choice__tick path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.quiz__why { font-size: 14.5px; color: var(--accent); margin-top: 10px; padding-left: 4px; }
.quiz__result { margin-top: 20px; font-size: 15px; }

.stage__actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 44px; padding-top: 30px; border-top: 1px solid var(--hairline); }
.stage__saved { font-size: 13.5px; color: var(--ink-muted); margin-left: auto; }

/* Completion */
.done { text-align: center; padding: 40px 0; }
.done__ring { width: 168px; height: 168px; margin: 0 auto 28px; }
/* The tick is drawn bigger than the ring on purpose, so it breaks out of it. */
.done__ring svg { overflow: visible; }
.done__tick { stroke-dasharray: 1; }
.done__pct { font-size: 46px; font-weight: 600; letter-spacing: -.04em; }
.done__rank { font-size: 27px; margin-bottom: 8px; }

/* Flag button + modal */
.flagbtn {
  position: fixed; right: 20px; bottom: 20px; z-index: 45;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px; border-radius: var(--radius-pill);
  background: var(--ground-dark); color: var(--ink-on-dark);
  border: 0; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  box-shadow: rgba(0,0,0,.18) 4px 10px 26px;
}
.flagbtn:hover { background: #2D2D2D; }

.modal { border: 0; border-radius: var(--radius-card); padding: 0; max-width: 480px; width: calc(100% - 32px); }
.modal::backdrop { background: rgba(25,25,25,.55); }
.modal__inner { padding: 30px; }
.modal__inner h2 { margin-bottom: 8px; }
.modal__inner textarea { margin: 16px 0 20px; }
.modal__actions { display: flex; gap: 10px; justify-content: flex-end; }

/* Webcam window behind "Take a photo" on a computer. */
.camera { max-width: 760px; }
.camera__note { color: var(--ink-muted); margin: 0 0 14px; }
.camera__view { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #191919; border-radius: 12px; margin: 0 0 18px; }

/* ── Pop-up document viewer ────────────────────────────────────────── */
/* Pages are drawn as backgrounds and nothing in here can be selected. What
   that does and does not stop is written up beside openViewer in app.js. */
button.doclink { font: inherit; color: inherit; text-align: left; width: 100%; cursor: pointer; }

.viewer {
  border: 0; padding: 0; overflow: hidden;
  width: min(1000px, calc(100% - 32px)); max-width: none;
  height: calc(100vh - 32px); height: calc(100dvh - 32px); max-height: none;
  border-radius: var(--radius-card);
  background: var(--ground-dark); color: var(--ink-on-dark);
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.viewer[open] { display: flex; flex-direction: column; }
.viewer::backdrop { background: rgba(25,25,25,.55); }
.viewer__bar { flex: none; display: flex; align-items: center; gap: 16px; padding: 16px 22px; }
.viewer__bar .btn--ghost { border-color: rgba(255,255,250,.34); }
.viewer__bar .btn--ghost:hover { border-color: currentColor; }
.viewer__head { display: grid; min-width: 0; margin-right: auto; }
.viewer__title { font-weight: 600; font-size: 16px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viewer__count { font-size: 13px; line-height: 1.4; color: var(--ink-on-dark-muted); font-variant-numeric: tabular-nums; }
.viewer__scroll {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 2px 22px 8px;
}
.viewer__scroll:focus { outline: none; }
.viewer__scroll:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.viewer__page {
  position: relative; max-width: 860px; margin: 0 auto 14px; overflow: hidden;
  background: var(--surface) center / contain no-repeat;
  border-radius: var(--radius-field);
}
.viewer__mark { position: absolute; inset: 0; background-size: 460px 260px; }
.viewer__note { margin: 40px 0; text-align: center; color: var(--ink-on-dark-muted); }

@media (max-width: 600px) {
  /* Pinned to the corner and sized in viewport units, not left to centre itself
     in a percentage box: if anything on the page behind is wider than the
     phone, a centred dialog grows with it and the Close button ends up off
     the side of the screen. */
  .viewer { inset: 0 auto auto 0; margin: 0; width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; }
  .viewer__bar { padding: 12px 14px; }
  .viewer__scroll { padding: 0 8px 4px; }
  .viewer__page { margin-bottom: 8px; }
  .viewer__mark { background-size: 322px 182px; }
}

/* Nothing to print: the pages are not for paper. */
@media print { .viewer__scroll { display: none; } }

.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(120%);
  background: var(--ground-dark); color: var(--ink-on-dark);
  padding: 13px 22px; border-radius: var(--radius-pill); font-size: 14.5px; font-weight: 600;
  z-index: 60; transition: transform .3s cubic-bezier(.2,.8,.3,1);
  box-shadow: rgba(0,0,0,.2) 4px 10px 30px;
}
.toast--on { transform: translateX(-50%) translateY(0); }

/* ── "Setting you up" ──────────────────────────────────────────────── */
/* The one amber in the whole portal. It means a person has to do something,
   and it is never used for anything else. It appears as a dot only, #F5B700
   on white is 1.9:1, nowhere near readable as text. */
:root { --needs-human: #F5B700; }

.setup { background: var(--surface); border-radius: var(--radius-card); padding: 26px 28px; margin: 0 0 34px; }
.setup__head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.setup__head h2 { font-size: 23px; }
.setup__count { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.setup__lead { font-size: 14.5px; color: var(--ink-muted); margin: 8px 0 18px; max-width: 60ch; }
.setup__list { list-style: none; margin: 0; padding: 0; }
.setup__row { display: grid; grid-template-columns: 26px 1fr auto; gap: 14px; align-items: center; padding: 11px 0; border-top: 1px solid var(--hairline); }
.setup__row:first-child { border-top: 0; }
.setup__mark { width: 26px; height: 26px; display: grid; place-items: center; }
.setup__dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--hairline-strong); }
.setup__row--now .setup__dot { width: 18px; height: 18px; border-color: var(--accent); }
.setup__row--human .setup__dot { border-color: var(--needs-human); background: var(--needs-human); }
.setup__tick { width: 26px; height: 26px; display: block; }
.setup__tick path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.setup__label { font-size: 15.5px; font-weight: 500; }
.setup__row--done .setup__label { color: var(--ink-muted); }
.setup__detail { display: block; font-style: normal; font-size: 13px; color: var(--ink-muted); }
.setup__state { font-size: 12.5px; font-weight: 600; color: var(--ink-muted); white-space: nowrap; }
.setup__row--done .setup__state { color: #0B6E8E; }

/* Same panel, on the finished screen. */
.done .setup { text-align: left; max-width: 560px; margin: 34px auto 0; }

/* The compact version in the rail footer. */
.rail__setup { margin: 18px 8px 0; padding-top: 16px; border-top: 1px solid var(--hairline); }
.rail__setup-l { display: block; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--ink-muted); margin-bottom: 9px; }
.rail__setup-bar { height: 6px; border-radius: var(--radius-pill); background: var(--hairline); overflow: hidden; }
.rail__setup-bar i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: var(--radius-pill); }
.rail__setup-n { display: block; font-size: 12.5px; color: var(--ink-muted); margin-top: 8px; font-variant-numeric: tabular-nums; }

/* ── The terms off the contract ────────────────────────────────────── */

.terms { background: var(--surface); border-radius: var(--radius-card); padding: 26px 28px; margin: 0 0 34px; }
.terms__head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.terms__head h2 { font-size: 23px; }
.terms__from { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--ink-muted); }
.terms__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2px 26px; }
.terms__k { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--ink-muted); }
.terms__v { font-size: 17px; font-weight: 600; margin: 2px 0 16px; }

/* "We filled this in from your contract." */
.prefill { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--ink-muted); background: rgba(45,189,239,.09); border-radius: var(--radius-field); padding: 12px 16px; margin: 0 0 30px; }
.prefill svg { flex: none; margin-top: 3px; color: #0B6E8E; }

/* ── The rail connector ────────────────────────────────────────────── */
/* A line from each node down to the next, filled once the stage is done, so the
   journey reads as a route rather than a list. */
.rail__item { position: relative; }
.rail__item::before {
  content: ''; position: absolute; left: 27px; top: 41px; bottom: -13px; width: 2px;
  background: var(--hairline); transform-origin: top;
}
.rail__item:last-of-type::before { display: none; }
.rail__item--done::before { background: var(--accent); }

/* ── Motion ────────────────────────────────────────────────────────── */
/* Everything that moves lives in here. With reduced motion every state below
   still renders, the animations only ever run from a hidden state to the
   resting one, so the resting one is what you get. */
@media (prefers-reduced-motion: no-preference) {

  /* Content blocks rise in, one after another, once per stage. */
  .stage--enter > * { animation: rise .44s cubic-bezier(.2,.7,.3,1) both; animation-delay: calc(var(--i, 0) * 40ms); }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } }

  /* The stage you are on breathes; the one you just finished draws its line. */
  .rail__item--on .rail__dot { animation: breathe 2.8s ease-in-out infinite; }
  @keyframes breathe { 50% { transform: scale(1.14); } }
  .rail__item--drawing::before { animation: drawdown .55s cubic-bezier(.3,.8,.4,1) both; }
  @keyframes drawdown { from { transform: scaleY(0); } }
  .rail__item--drawing .rail__dot { animation: pop .4s cubic-bezier(.2,1.5,.5,1) both; }
  @keyframes pop { from { transform: scale(.4); } 60% { transform: scale(1.18); } }

  /* Tracker rows. A row already done on first paint does not replay this — the
     classes are only added to rows that actually changed. */
  .setup__row--in .setup__tick path { animation: draw .5s cubic-bezier(.4,0,.2,1) both; }
  .setup__row--in .setup__tick { animation: pop .42s cubic-bezier(.2,1.5,.5,1) both; }
  @keyframes draw { from { stroke-dashoffset: 1; } }
  .setup__row--in .setup__dot { animation: pop .42s cubic-bezier(.2,1.5,.5,1) both; }
  .setup__row--now .setup__dot { animation: ring 1.9s ease-in-out infinite; }
  @keyframes ring {
    0%, 100% { box-shadow: 0 0 0 0 rgba(45,189,239,.55); }
    70% { box-shadow: 0 0 0 7px rgba(45,189,239,0); }
  }
  .setup__row--in .setup__label, .setup__row--in .setup__state { animation: fadein .5s ease both; }
  @keyframes fadein { from { opacity: 0; } }

  /* Quiz. Right tints and ticks, wrong shakes once and opens its reason. */
  .choice__tick path { animation: draw .45s cubic-bezier(.4,0,.2,1) both; }
  .quiz__q--shake { animation: shake .42s cubic-bezier(.36,.07,.19,.97); }
  @keyframes shake {
    20% { transform: translateX(-7px); } 40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); } 80% { transform: translateX(2px); }
  }
  .quiz__why { animation: slideopen .34s cubic-bezier(.2,.7,.3,1); overflow: hidden; }
  @keyframes slideopen { from { opacity: 0; max-height: 0; margin-top: 0; } to { max-height: 400px; } }

  /* The completion moment. Points fly to the scorebar, a restrained burst of
     confetti, and the new rank named in Caveat if one was earned. The whole
     thing is pointer-events:none and gone inside 1.4s. */
  .pop { position: fixed; inset: 0; z-index: 70; pointer-events: none; overflow: hidden; }
  .pop__pts {
    position: fixed; left: 0; top: 0; font-weight: 700; font-size: 20px;
    background: var(--accent); color: var(--ink-on-accent);
    padding: 7px 17px; border-radius: var(--radius-pill); white-space: nowrap;
    animation: fly .9s cubic-bezier(.4,0,.25,1) both;
  }
  /* The -50% centres the chip on the point it is flying from and to; a
     percentage in translate is of the element's own box. */
  @keyframes fly {
    from { transform: translate(calc(var(--x0) - 50%), calc(var(--y0) - 50%)) scale(.7); opacity: 0; }
    18% { transform: translate(calc(var(--x0) - 50%), calc(var(--y0) - 50% - 34px)) scale(1); opacity: 1; }
    82% { opacity: 1; }
    to { transform: translate(calc(var(--x1) - 50%), calc(var(--y1) - 50%)) scale(.35); opacity: 0; }
  }
  .pop__c { position: fixed; left: 0; top: 0; width: 7px; height: 12px; border-radius: 1px; animation: burst 1.2s cubic-bezier(.15,.6,.4,1) both; }
  @keyframes burst {
    from { transform: translate(var(--x0), var(--y0)) rotate(0deg); opacity: 1; }
    70% { opacity: 1; }
    to { transform: translate(var(--x1), var(--y1)) rotate(var(--r)); opacity: 0; }
  }
  .pop__rank {
    position: fixed; left: 50%; top: 34%; transform: translateX(-50%); text-align: center;
    font-family: 'Caveat', cursive; font-weight: 700; font-size: clamp(38px, 7vw, 62px);
    color: var(--accent); text-shadow: 0 2px 0 rgba(25,25,25,.12); white-space: nowrap;
    animation: rankin 1.3s cubic-bezier(.2,.8,.3,1) both;
  }
  @keyframes rankin {
    from { opacity: 0; transform: translateX(-50%) translateY(18px) rotate(-3deg); }
    22%, 74% { opacity: 1; transform: translateX(-50%) translateY(0) rotate(-2deg); }
    to { opacity: 0; transform: translateX(-50%) translateY(-12px) rotate(-2deg); }
  }

  /* The finished screen draws its own ring. */
  .done__ring circle + circle { animation: ringdraw 1s cubic-bezier(.3,.8,.4,1) .15s both; }
  @keyframes ringdraw { from { stroke-dashoffset: var(--c); } }
  .done__tick { animation: tickdraw .5s cubic-bezier(.3,.8,.4,1) 1s both; }
  @keyframes tickdraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Award logos, as on the website footer. */
.awards { background: var(--surface); border-radius: var(--radius-card); padding: 26px 30px; }
.awards__row { display: flex; align-items: center; justify-content: center; gap: clamp(18px, 5vw, 48px); flex-wrap: wrap; }
.awards__logo { height: 150px; width: auto; max-width: 30%; object-fit: contain; }
.awards__cap { text-align: center; font-size: 14px; color: var(--ink-muted); margin: 16px 0 0; }

.upload__actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; flex: none; }
.upload__actions .btn { white-space: nowrap; }
/* On a phone the name of the document gets the full width and the two buttons
   sit side by side underneath it, each wide enough for a thumb. */
@media (max-width: 600px) {
  .upload__head { flex-wrap: wrap; }
  .upload__head > :first-child { flex: 1 1 100%; }
  .upload__actions { flex: 1 1 100%; justify-content: stretch; margin-left: 0; }
  .upload__actions .btn { flex: 1 1 0; }
  .upload__status { margin-left: 0; }
  .upload__status:empty { display: none; }
}

/* What you get: one provider per row, colour logo on the left. */
.providers { display: grid; gap: 12px; margin: 0 0 34px; }
.provider { display: flex; align-items: center; gap: 18px; background: var(--surface); border-radius: var(--radius-card); padding: 20px 24px; }
.provider__logo { width: 44px; height: 44px; flex: none; object-fit: contain; }
.provider__name { font-size: 18px; font-weight: 600; margin-bottom: 2px; }
.provider__label { font-size: 15px; color: var(--ink-muted); line-height: 1.5; }
.setup + .stage__actions { margin-top: 34px; }

/* Marks a test starter's session. */
.topbar__test { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 5px 12px; border-radius: var(--radius-pill); background: var(--accent); color: var(--ink-on-accent); white-space: nowrap; }
@media (max-width: 600px) { .topbar__test { font-size: 10px; letter-spacing: .06em; padding: 4px 8px; } .topbar__pts { font-size: 12px; } }

.awards__row--partners { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--hairline); }
.awards__partner { height: 56px; width: auto; max-width: 40%; object-fit: contain; }
.gbadge { display: flex; align-items: center; gap: 12px; }
.gbadge__g { width: 30px; height: 30px; }
.gbadge__t { font-size: 15px; font-weight: 600; line-height: 1.2; }
.gbadge__n { font-size: 13px; color: var(--ink-muted); }

/* ── Tool list pop-up ──────────────────────────────────────────────── */
.kit__go { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 18px; }
.kit__state { margin: 0; font-size: 14px; font-weight: 600; }
.kitlist__scroll { flex: 1; overflow-y: auto; padding: 0 22px 22px; }
.kitlist__scroll:focus { outline: none; }
.kitlist__page { max-width: 760px; margin: 0 auto; background: #fff; color: var(--ink); border-radius: 10px; padding: 34px 38px; }
.kitlist__lead { color: var(--ink-muted); margin: 0 0 8px; }
.kitlist__section h3 { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); margin: 26px 0 6px; }
.kitlist__row { display: flex; align-items: center; gap: 14px; padding: 11px 2px; border-bottom: 1px solid var(--hairline); cursor: pointer; }
.kitlist__row input { width: 20px; height: 20px; flex: none; accent-color: var(--accent); }
.kitlist__row--ours { cursor: default; color: var(--ink-muted); padding-left: 36px; }
.kitlist__name { flex: 1; }
.kitlist__tag { font-size: 12px; font-weight: 600; white-space: nowrap; }
.kitlist__foot { flex: none; display: flex; justify-content: flex-end; padding: 14px 22px; }
@media (max-width: 600px) {
  .kitlist__scroll { padding: 0 10px 14px; }
  .kitlist__page { padding: 22px 18px; }
  .kitlist__foot .btn { width: 100%; }
}