/* ═══════════════════════════════════════════════════════════════
   HPC Assessment Engine v3 "The Case File" — Editorial Diagnostic Dossier
   Scoped: #hpc-assess / .hpc-assess / .assess__ prefix
   Contract: pipelines/assess/specs/DESIGN-engine-v3.md (supersedes v2 "The Trace")
   Fonts (fixed by plugin enqueue): Fraunces (display serif, editorial moments only)
   · Instrument Sans (structural/UI) · Spline Sans Mono (data/labels)
   Laws: one accent (pillar-themable) + one ordered severity ramp (data only);
   13px text floor; no backdrop-filter; no gradient text; no per-category hues;
   imagery is cover-only + palette-bound.
═══════════════════════════════════════════════════════════════ */

/* v5.0 "Nocturne" — type + colour elevation over v4.0's Field of Light.
   TYPE: Fraunces (real ital + opsz axis) now owns every EDITORIAL DISPLAY
   moment — the score numeral, verdict setup/payoff, intro title/keyword,
   top-level section headings, mirror reading, cascade/strength/CTA/review
   headings — against Instrument Sans for everything structural (question
   text, card titles, buttons, item labels) and Spline Mono for data.
   Fraunces' real italic axis finally replaces the old "Bricolage has no
   italic axis" synthetic-oblique workaround on the verdict payoff + the
   mirror reading. Bricolage Grotesque is fully retired (every rule that
   used it is now either Fraunces or Instrument Sans — see --font-display /
   --font-ui below) and dropped from the font enqueue.
   COLOUR: canvas/wash/card deepened toward a dimensional aubergine/plum
   undertone (was flat warm-brown) + --card is now a subtle two-stop
   gradient (was flat) for real surface depth; a new --brass antique-gold
   token (#C9A24B) marks premium hairline/tick/folio detail; pillar glows
   (hook orb, selection dot, field-of-light cap, keyline) gained a hot
   near-white core + deeper saturated falloff for a jewel-luminous read.
   Re-verified via a throwaway WCAG script (contrast_lab.py, not committed):
   cream ink/ink-2 + brass + every pillar's dusk accent all ≥4.5:1 on the
   new canvas/card(both gradient stops)/wash for all 10 pillars, AND the
   hero-field's own internal gradient re-checked end-to-end (--hf-cream-dim
   alpha raised .74→.88 to clear the ember-floor stop for the closest
   pillar). Severity ramp + pillar bloom/accent hex values themselves are
   UNTOUCHED — only the surfaces + glow recipes around them changed. */

/* ── TOKENS ─────────────────────────────────────────────────── */
/* v4.0 "Field of Light, always": the dark-luminous world (formerly the Dusk
   alternate) is now the BASE/default — deep warm-twilight ground, cream
   type, pillar colour as glowing light. Promoted + elevated from the old
   Dusk values (#241B15/#2F241C/#1C1410 -> deeper #1D150E/#2A1F17/#170F09,
   closer to the results hero's own gradient floor) so intro/quiz/results
   read as one continuous cinematic surface, hero to footer. The former
   Daylight/warm-light values now live ONLY in [data-theme="light"] below —
   the deliberate alternate, not the default. Re-verified via a throwaway
   WCAG script (contrast_dark.py): cream ink/ink-2 + every pillar's dusk
   accent + the severity ramp all ≥4.5:1 on canvas/card/wash for all 10
   pillars (250/250 pass); two dusk accents (flow, identity) and the full
   severity ramp were re-tuned brighter to clear the bar — see the pillar
   map and --sev-* below. Light-theme --ink-3 and the light sev ramp were
   re-tuned 2026-07-10 to clear 4.5:1 on all light grounds (no size
   exceptions remain — see the [data-theme="light"] block). */
#hpc-assess {
  /* Nocturne: aubergine/plum-shifted twilight base (was flat warm-brown
     #1D150E/#170F09/#2A1F17); --card is now a subtle top-lit/bottom-sunk
     two-stop gradient — the lighter stop is the ORIGINAL flat --card recipe
     unchanged (zero regression on the pillar-accent-as-text-on-card
     invariant), the darker stop sinks further for real surface depth. */
  --canvas:#1C1218; --wash:#160D14; --card:linear-gradient(165deg, #2A1F17 0%, #201710 100%);
  --ink:#F4E8D6; --ink-2:#C9B8A4; --ink-3:#A08B76;
  --line:rgba(244,232,214,.12); --line-strong:rgba(244,232,214,.18);
  --accent:var(--assess-pillar-accent-dusk, var(--assess-pillar-accent,#E8A765));
  --bloom:var(--assess-pillar-bloom,#F6A65B);
  --bloom-hi:var(--assess-pillar-bloom-hi,#FFD9A0);
  --tint:var(--assess-pillar-tint,rgba(244,162,97,.16));
  --accent-ink:#1B140D;
  --accent-soft:var(--tint);
  --accent-line:color-mix(in srgb,var(--accent) 30%,transparent);
  --shadow-rgb: 8,5,2;
  --sev-low:#52D98A; --sev-moderate:#F0B44E; --sev-elevated:#FF9159; --sev-critical:#FF8177;
  --verdict-color:var(--sev-moderate);
  /* Antique-gold — restrained premium hairline/tick/folio/ornament detail only.
     Never a wash, never the accent's job (identity stays --accent/--bloom). */
  --brass:#C9A24B;
  /* Type split: Fraunces owns editorial display moments (real ital + opsz
     axis); Instrument Sans is the structural/UI voice; Spline Mono (still
     hardcoded per-rule) carries data/labels. */
  --font-display:'Fraunces', Georgia, serif;
  --font-ui:'Instrument Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --r-sm:8px; --r-md:14px; --r-lg:16px; --r-card:24px; --r-pill:999px;
  --shadow-card:0 1px 0 rgba(255,235,205,.06) inset,0 14px 34px rgba(var(--shadow-rgb),.45);
  --shadow-lit:0 14px 34px rgba(var(--shadow-rgb),.45),0 0 56px -18px var(--bloom);
  --shadow-well:inset 0 2px 6px rgba(0,0,0,.4);
  --ease-out:cubic-bezier(.22,.9,.3,1);
  /* Twilight scrim for the cover-hero — fades to the dark --canvas (NOT navy) */
  --cover-scrim: linear-gradient(to bottom, transparent 30%, var(--canvas) 90%);

  /* Spacing (unchanged) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 14px; --sp-4: 22px;
  --sp-5: 36px; --sp-6: 56px; --sp-7: 84px;

  color-scheme: dark light;
}

/* Explicit dark opt-in mirrors the (now-default) base — kept for parity when
   a caller sets data-theme="dark" deliberately rather than relying on default. */
:root[data-theme="dark"] #hpc-assess, [data-theme="dark"] #hpc-assess {
  --canvas:#1C1218; --wash:#160D14; --card:linear-gradient(165deg, #2A1F17 0%, #201710 100%);
  --ink:#F4E8D6; --ink-2:#C9B8A4; --ink-3:#A08B76;
  --line:rgba(244,232,214,.12); --line-strong:rgba(244,232,214,.18);
  --accent-ink:#1B140D;
  --shadow-rgb: 8,5,2;
  --sev-low:#52D98A; --sev-moderate:#F0B44E; --sev-elevated:#FF9159; --sev-critical:#FF8177;
  --accent: var(--assess-pillar-accent-dusk, var(--assess-pillar-accent));
  --shadow-card:0 1px 0 rgba(255,235,205,.06) inset,0 14px 34px rgba(var(--shadow-rgb),.45);
  --shadow-lit:0 14px 34px rgba(var(--shadow-rgb),.45),0 0 56px -18px var(--bloom);
  --shadow-well:inset 0 2px 6px rgba(0,0,0,.4);
}
/* Daylight — the deliberate ALTERNATE (was base pre-v4.0). Same warm-light
   palette, unchanged values; only reachable via explicit data-theme="light". */
:root[data-theme="light"] #hpc-assess, [data-theme="light"] #hpc-assess {
  --canvas:#F3E9D7; --wash:#EBDFCB; --card:#F9F2E4;
  /* ink-3 darkened #9C8D7C -> #6C6156: the old value failed even the 3:1
     large-text bar (2.45:1 on wash) while several usage sites are 13px
     labels where the real bar is 4.5:1. #6C6156 clears 4.5:1 on all three
     light grounds (worst 4.58 on wash), so no size exception is needed;
     the light-theme ink-2/ink-3 step is now carried by warmth more than
     lightness. */
  --ink:#2E241D; --ink-2:#6B5D4F; --ink-3:#6C6156;
  --line:rgba(62,44,24,.10); --line-strong:rgba(62,44,24,.14);
  --accent-ink:#FFF8EC;
  --shadow-rgb: 62,44,24;
  /* sev low/moderate/elevated darkened ~8.5% for AA on the darkest light
     ground (wash #EBDFCB): 4.00:1 -> ≥4.56:1 on all three grounds; ramp
     hues unchanged, critical already passed (4.99 on wash). */
  --sev-low:#1B7145; --sev-moderate:#8F5509; --sev-elevated:#A54619; --sev-critical:#B3251C;
  /* Brass darkened for the light alternate: the dark-world antique gold
     #C9A24B reads 1.8–2.2:1 on the pale grounds (the 13px folio is brass
     TEXT, not just hairline). #775E24 keeps the antique-gold hue at
     ≥4.68:1 on all three light grounds. */
  --brass:#775E24;
  --accent: var(--assess-pillar-accent);
  --shadow-card:0 1px 2px rgba(var(--shadow-rgb),.06),0 8px 24px rgba(var(--shadow-rgb),.08),0 24px 64px -28px rgba(var(--shadow-rgb),.22);
  --shadow-lit:0 1px 2px rgba(var(--shadow-rgb),.06),0 8px 24px rgba(var(--shadow-rgb),.08),0 0 44px -8px var(--bloom);
  --shadow-well:inset 0 2px 6px rgba(var(--shadow-rgb),.07);
}

/* Accent tints + pillar-tinted warm surface tokens where color-mix is available */
@supports (background: color-mix(in srgb, red 10%, transparent)) {
  #hpc-assess {
    --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
    --accent-line: color-mix(in srgb, var(--accent) 30%, transparent);
    /* Nocturne: pillar-tinted DARK surfaces on the deepened aubergine/plum
       bases (10/13-and-8/7%) — --card is now the two-stop gradient (lighter
       stop = the ORIGINAL 13%/#2A1F17 recipe unchanged; darker stop sinks to
       8%/#201710 for real depth). Re-verified via contrast_lab.py: ink/
       ink-2/accent-dusk/brass/severity all ≥4.5:1 on every mixed canvas/
       card(both stops)/wash for all 10 pillars. */
    --canvas: color-mix(in srgb, var(--bloom) 10%, #1C1218);
    --card:   linear-gradient(165deg,
                color-mix(in srgb, var(--bloom) 13%, #2A1F17) 0%,
                color-mix(in srgb, var(--bloom) 8%,  #201710) 100%);
    --wash:   color-mix(in srgb, var(--bloom) 7%,  #160D14);
    /* Light the field in the category colour — accent-derived ambient
       radials (top masthead zone + foot) layered over the archival grain,
       plus a faint full-height aubergine-to-ember vertical tonal shift
       (the "real atmospheric depth" pass) sitting just above the grain. */
    background-image:
      radial-gradient(125% 46% at 50% 0%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 62%),
      radial-gradient(120% 42% at 50% 100%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 72%),
      linear-gradient(180deg, color-mix(in srgb, var(--bloom) 4%, transparent) 0%, transparent 45%, transparent 60%, color-mix(in srgb, var(--bloom) 5%, transparent) 100%),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.05'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: no-repeat, no-repeat, no-repeat, repeat;
  }
  #hpc-assess .assess__options .assess__option--selected {
    background: color-mix(in srgb, var(--accent) 20%, transparent) !important;
  }
  :root[data-theme="dark"] #hpc-assess, [data-theme="dark"] #hpc-assess {
    --canvas: color-mix(in srgb, var(--bloom) 10%, #1C1218);
    --card:   linear-gradient(165deg,
                color-mix(in srgb, var(--bloom) 13%, #2A1F17) 0%,
                color-mix(in srgb, var(--bloom) 8%,  #201710) 100%);
    --wash:   color-mix(in srgb, var(--bloom) 7%,  #160D14);
  }
  /* Daylight alternate: original warm-light mix ratios (10/4/8%), unchanged */
  :root[data-theme="light"] #hpc-assess, [data-theme="light"] #hpc-assess {
    --canvas: color-mix(in srgb, var(--bloom) 10%, #F3E9D7);
    --card:   color-mix(in srgb, var(--bloom) 4%,  #F9F2E4);
    --wash:   color-mix(in srgb, var(--bloom) 8%,  #EBDFCB);
  }
}

/* ── PILLAR / CATEGORY ACCENT MAP ─────────────────────────────
   The one accent IS the category colour. WordPress adds body.pillar-<name>;
   --accent resolves via var(--assess-pillar-accent-dusk, ...) now that dusk
   is the base default (previously only picked up under prefers-color-scheme/
   data-theme=dark). --assess-pillar-accent-dusk = the glowing-light accent
   used against the dark surfaces; --assess-pillar-accent = the plain accent
   used only by the [data-theme="light"] alternate. flow + identity dusk
   accents lightened (from #A97BFF/#7D8CFF) after the contrast re-verify —
   both landed just under 4.5:1 as text on --card at the old values. */
body.pillar-arena      { --assess-pillar-accent:#B23A34; --assess-pillar-bloom:#FF7E6B; --assess-pillar-bloom-hi:#FFB3A0; --assess-pillar-tint:rgba(224,90,90,.14);    --assess-pillar-accent-dusk:#FF7E6B; }
body.pillar-bio        { --assess-pillar-accent:#0B7D71; --assess-pillar-bloom:#34D3BF; --assess-pillar-bloom-hi:#9FF0E2; --assess-pillar-tint:rgba(46,196,182,.14);  --assess-pillar-accent-dusk:#34D3BF; }
body.pillar-decisions  { --assess-pillar-accent:#9A5A0E; --assess-pillar-bloom:#F6A65B; --assess-pillar-bloom-hi:#FFD9A0; --assess-pillar-tint:rgba(244,162,97,.16);  --assess-pillar-accent-dusk:#E8A765; }
body.pillar-flow       { --assess-pillar-accent:#6D2FC4; --assess-pillar-bloom:#A97BFF; --assess-pillar-bloom-hi:#D3BCFF; --assess-pillar-tint:rgba(155,93,229,.13);  --assess-pillar-accent-dusk:#B591FF; }
body.pillar-habits     { --assess-pillar-accent:#177A3E; --assess-pillar-bloom:#43CE74; --assess-pillar-bloom-hi:#A5EDBE; --assess-pillar-tint:rgba(45,198,83,.14);   --assess-pillar-accent-dusk:#43CE74; }
body.pillar-identity   { --assess-pillar-accent:#3346C8; --assess-pillar-bloom:#7D8CFF; --assess-pillar-bloom-hi:#BCC4FF; --assess-pillar-tint:rgba(67,97,238,.12);   --assess-pillar-accent-dusk:#94A0FF; }
body.pillar-leadership { --assess-pillar-accent:#AD5600; --assess-pillar-bloom:#FF9E33; --assess-pillar-bloom-hi:#FFCF8F; --assess-pillar-tint:rgba(251,133,0,.15);   --assess-pillar-accent-dusk:#FF9E33; }
body.pillar-learning   { --assess-pillar-accent:#06718F; --assess-pillar-bloom:#2FC3EA; --assess-pillar-bloom-hi:#A4E9FA; --assess-pillar-tint:rgba(0,180,216,.13);   --assess-pillar-accent-dusk:#2FC3EA; }
body.pillar-nutri      { --assess-pillar-accent:#4F7A00; --assess-pillar-bloom:#96CE2E; --assess-pillar-bloom-hi:#D3F09A; --assess-pillar-tint:rgba(128,185,24,.15);  --assess-pillar-accent-dusk:#96CE2E; }
body.pillar-social     { --assess-pillar-accent:#B01560; --assess-pillar-bloom:#FF5FA8; --assess-pillar-bloom-hi:#FFAFD2; --assess-pillar-tint:rgba(247,37,133,.12);  --assess-pillar-accent-dusk:#FF5FA8; }

/* ── RESET ───────────────────────────────────────────────────── */
/* :where() keeps this at zero specificity so component classes can set
   margins/padding without fighting the ID selector (v1/v2 latent bug). */
:where(#hpc-assess *, #hpc-assess *::before, #hpc-assess *::after) {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#hpc-assess {
  font-family: var(--font-ui);
  font-size: 1rem;
  color: var(--ink);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--canvas);
  max-width: 920px;
  margin: 64px auto;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
  padding: 68px 0 76px;
}

/* Registration marks — print-shop corner artifacts (decorative, clipped by the frame) */
#hpc-assess::before,
#hpc-assess::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  pointer-events: none;
  opacity: 0.55;
}
#hpc-assess::before {
  top: 12px;
  left: 12px;
  border-top: 1px solid color-mix(in srgb, var(--brass) 55%, var(--line-strong));
  border-left: 1px solid color-mix(in srgb, var(--brass) 55%, var(--line-strong));
}
#hpc-assess::after {
  bottom: 12px;
  right: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--brass) 55%, var(--line-strong));
  border-right: 1px solid color-mix(in srgb, var(--brass) 55%, var(--line-strong));
}

/* ── WP CONTENT OVERRIDES ────────────────────────────────────── */
/* AUTHORIZED SCOPING EXCEPTION: these rules scope via the CLASS .hpc-assess,
   not the id. The skeleton's root carries both (#hpc-assess.hpc-assess), so
   containment holds; the class form is kept deliberately — retargeting to
   the id would raise specificity past component rules (e.g. the
   .entry-content override would start beating #hpc-assess .assess__* p
   rules). Do not add .hpc-assess to any other element. */
.hpc-assess a { color: inherit !important; text-decoration: none !important; box-shadow: none !important; border-bottom: none !important; }
.hpc-assess ul, .hpc-assess ol, .hpc-assess li { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.hpc-assess li::marker { content: none; }
.hpc-assess strong { font-weight: 600 !important; color: inherit; }
.hpc-assess h2, .hpc-assess h3, .hpc-assess h4, .hpc-assess h5 { font-weight: inherit; margin: 0; padding: 0; }
.entry-content .hpc-assess p { margin-bottom: 0; }

/* ── FOCUS ───────────────────────────────────────────────────── */
/* WCAG gate: 3px tint ring + accent border on every interactive element.
   Specific components (.assess__option, .assess__capture-input, etc.) carry
   their own :focus-visible rules that layer depth/shadows on top. */
#hpc-assess *:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--tint);
  border-radius: var(--r-sm);
}

/* ── VISUALLY HIDDEN (sr-only) ───────────────────────────────── */
#hpc-assess .assess__sr-table,
#hpc-assess .assess__progress-srbar {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── SKIP LINK ───────────────────────────────────────────────── */
/* AUTHORIZED SCOPING EXCEPTION: the skip link sits BEFORE <section
   id="hpc-assess"> opens (a skip link must precede the landmark it skips),
   so an #hpc-assess ancestor selector can never match it. The class name is
   plugin-prefixed to keep the collision surface near zero. */
.assess__skip {
  position: absolute;
  top: -100px;
  left: 16px;
  /* Self-contained colours only: this element sits OUTSIDE #hpc-assess, so
     scoped tokens (--accent, --r-sm) are UNRESOLVABLE here — the old
     background: var(--accent) computed to transparent, leaving the focused
     skip link near-invisible (dark text, no chip) on dark pages. The
     pillar var lives on body.pillar-* (an ancestor), brass literal as the
     no-pillar fallback. */
  background: var(--assess-pillar-accent, #C9A24B);
  color: #1a1205;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  z-index: 1000;
  transition: top 0.2s;
}
.assess__skip:focus { top: 16px; }
.admin-bar .assess__skip:focus { top: 48px; }

/* ── FRAME ───────────────────────────────────────────────────── */
/* Nocturne: a bloom-hi jewel-glint core at the midpoint (was flat --accent
   the whole span) — the hairline now reads as lit-from-within, not painted. */
#hpc-assess .assess__keyline {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 2%, var(--accent) 26%, color-mix(in srgb, var(--bloom-hi) 70%, #fff 20%) 50%, var(--accent) 74%, transparent 98%);
  transition: filter 0.6s var(--ease-out);
}
/* One gold edge-flash when the verdict lands — "computed" */
#hpc-assess .assess__keyline--flash { filter: brightness(3.2); transition: none; }

#hpc-assess .assess__body {
  position: relative;
  z-index: 1;
  padding: 0 56px;
}

/* ── MASTHEAD (persistent, all screens) — Daylight editorial style ── */
/* v3.1-daylight: brand left, editorial locator right in Spline Mono.
   Nocturne: brand moved to Instrument Sans (see below); locator is brass.
   Dropped: accent underline, double-rule hairline. */
#hpc-assess .assess__masthead {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  /* Nocturne: a hint of brass warms the masthead's hairline — the first
     "considered" detail a reader meets. */
  border-bottom: 1px solid color-mix(in srgb, var(--brass) 40%, var(--line));
  padding-bottom: 18px;
  margin-bottom: var(--sp-4);
}
/* v3.1-daylight: drop the second hairline (bureaucratic double-rule removed) */
#hpc-assess .assess__masthead::after { display: none; }
/* Nocturne: brand wordmark stays clean sans — Fraunces owns "display", not
   small tracked uppercase identity marks. */
#hpc-assess .assess__masthead-brand {
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.2;
  border-bottom: none;
  padding-bottom: 0;
}
/* Folio: one-line editorial locator "Pillar · Topic" in Spline Mono --brass —
   the explicit brass/locator pairing (Nocturne); was --ink-3, now the
   antique-gold instrument-plate colour (verified ≥4.5:1 on canvas/card for
   all 10 pillars). The runtime injects:
   <span.folio-fileno>Pillar</span><br><span.folio-sub>Label</span>
   We hide the <br> and run both spans inline. */
#hpc-assess .assess__folio {
  display: flex;
  /* Long labels (e.g. "Your Probabilistic Thinking Profile" at 390px): let the
     topic span drop to its own clean row instead of colliding with the pillar
     name — wrap only engages when the one-line form doesn't fit. */
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 2px 0;
  font-family: 'Spline Sans Mono', ui-monospace, monospace;
  font-size: 0.84375rem;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--brass);
  text-align: right;
  line-height: 1.4;
}
#hpc-assess .assess__folio br { display: none; }
/* v3.1-daylight: show both pillar + topic; add interpunct before the topic span */
#hpc-assess .assess__folio-fileno {
  display: inline;
  color: var(--brass);
  white-space: nowrap;
}
#hpc-assess .assess__folio-sub {
  display: inline;
  color: var(--brass);
}
/* Explicit margins on the separator — the mono font renders the padding
   spaces in a bare ' · ' string too tight against the sound pill at 390. */
#hpc-assess .assess__folio-sub::before { content: '\00B7'; margin: 0 0.45em; }

/* ── INTRO COVER (MJ art hero, optional) — Daylight ─────────── */
/* v3.1-daylight: invitation hero; full-colour MJ art; warm canvas scrim.
   Dropped: grayscale/sepia filter. Changed: border-radius, taller min. */
#hpc-assess .assess__cover-hero {
  position: relative;
  height: clamp(280px, 36vw, 420px);
  margin: 0 0 var(--sp-4);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--wash);
}
#hpc-assess .assess__cover-hero[hidden] { display: none; }
/* v3.1-daylight: show MJ art in full colour; gentle brightness for warmth */
#hpc-assess .assess__cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.9) contrast(1.02) saturate(1.05);
  opacity: 1;
}
/* Warm canvas scrim — fades toward --canvas (warm bone), NOT navy */
#hpc-assess .assess__cover-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--cover-scrim);
  pointer-events: none;
}
#hpc-assess .assess__cover-credit {
  position: absolute;
  right: 12px;
  bottom: 10px;
  z-index: 2;
  font-family: 'Spline Sans Mono', ui-monospace, monospace;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: rgba(255,244,224,.85);
}

/* Cover title block (assessment identity on the intro) — Daylight */
/* v3.1-daylight: centred hero text; label kicker chip visible. */
#hpc-assess .assess__cover-title {
  text-align: center;
  padding-top: var(--sp-6);
  margin-bottom: var(--sp-5);
}

/* v3.1-daylight: label kicker chip — warm tinted pill with icon + text */
#hpc-assess .assess__label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 18px;
  border-radius: var(--r-pill);
  background: var(--tint);
  color: var(--accent);
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 600;
  font-size: 0.84375rem;
  letter-spacing: 0.04em;
  margin-bottom: var(--sp-4);
}

/* Nocturne: the intro title is the reader's first Fraunces moment — real
   optical-size axis lets the huge clamp'd size carry dramatic thick/thin
   contrast the old grotesque never could. Weight eased from 800 (Bricolage
   black) to 600 (Fraunces at high opsz is already very high-contrast at
   moderate weight; going to 600 avoids the italic-adjacent clumsiness a
   maxed-out serif weight gets at this scale). */
#hpc-assess .assess__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4.75rem);
  font-weight: 600;
  line-height: 1.02;
  color: var(--ink);
  margin-bottom: var(--sp-3);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
/* Keyword in accent colour, upright (colour + weight carry the emphasis —
   real italic is reserved for the verdict payoff + mirror reading so it
   stays a rare, meaningful editorial beat rather than a house style). */
#hpc-assess .assess__title-keyword {
  color: var(--accent);
  font-style: normal;
  font-weight: 700;
}

#hpc-assess .assess__subtitle {
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  color: var(--ink-2);
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

/* v3.1-daylight: meta line as warm pill capsules (flex wrap, centred) */
#hpc-assess .assess__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  font-family: 'Instrument Sans', sans-serif;
  font-variant-numeric: tabular-nums;
  font-size: 0.84375rem;
  color: var(--ink-2);
  margin-top: var(--sp-4);
  letter-spacing: 0;
}
#hpc-assess .assess__meta-seg {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  background: var(--card);
  box-shadow: 0 1px 2px rgba(var(--shadow-rgb),.09),0 6px 16px -6px rgba(var(--shadow-rgb),.18);
  font-weight: 500;
  white-space: nowrap;
  color: var(--ink-2);
}
/* v3.1-daylight: separators not needed — capsules are visually self-separating */
#hpc-assess .assess__meta-sep { display: none; }

/* ── SCREENS ─────────────────────────────────────────────────── */
#hpc-assess .assess__screen { display: none; }
#hpc-assess .assess__screen--active { display: block; position: relative; }

/* v3.1-daylight: intro order — title hero above cover art on all viewports.
   Mobile @media overrides with its own order values (cover-hero first on small screens). */
#hpc-assess #assess-intro.assess__screen--active {
  display: flex;
  flex-direction: column;
}
#hpc-assess #assess-intro .assess__cover-title { order: 0; }
#hpc-assess #assess-intro .assess__cover-hero  { order: 1; }
#hpc-assess #assess-intro .assess__intro-panel  { order: 2; }
#hpc-assess #assess-intro .assess__spec-strip   { order: 3; }
#hpc-assess #assess-intro .assess__hook         { order: 4; }
#hpc-assess #assess-intro .assess__fineprint    { order: 5; }
/* Ambient pillar bloom — warm radial sits behind all content (z-index:0 < body z-index:1).
   inset:-180px 0 auto 0 keeps left/right flush so no horizontal overflow is added.
   Swell: breathe-in opacity + soft scale of the LIGHT only (~700ms, once per activation). */
#hpc-assess .assess__screen--active::before {
  content: ""; position: absolute; inset: -180px 0 auto 0; height: 560px; z-index: 0;
  background: radial-gradient(ellipse at 50% 0%, var(--bloom-hi) 0%, var(--bloom) 42%, transparent 72%);
  opacity: .45; pointer-events: none;
  animation: assessSwell 0.7s var(--ease-out) both;
}

/* Caliper rail — fine calibration ticks down the results margin (decorative;
   every fifth tick reads longer, echoing the ledger and analysing figures) */
#hpc-assess #assess-results { position: relative; }
/* Nocturne: the every-fifth "major" tick takes a brass tint (was flat
   --line-strong) — a fine-instrument calibration detail; minor ticks stay
   neutral --line so the brass reads as deliberate emphasis, not a wash. */
#hpc-assess #assess-results::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: -30px;
  width: 7px;
  background:
    repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 14px) left top / 3px 100% no-repeat,
    repeating-linear-gradient(to bottom, color-mix(in srgb, var(--brass) 55%, var(--line-strong)) 0 1px, transparent 1px 70px) left top / 7px 100% no-repeat;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════
   INTRO SCREEN — Daylight
══════════════════════════════════════════════════════════════ */
/* v3.1-daylight: stat hook redesigned as warm pull-quote grid.
   ::before = bloom-lit quote orb (col 1, spans both rows);
   claim + cite auto-place into col 2.
   Dropped: left border, recessed background, italic on claim. */
#hpc-assess .assess__hook {
  display: grid;
  grid-template-columns: 56px 1fr;
  column-gap: 20px;
  row-gap: 0;
  align-items: start;
  border-left: none;
  padding: 0;
  background: none;
  border-radius: 0;
  margin: var(--sp-6) 0 var(--sp-5);
}
/* Quote orb — jewel-luminous: a hot near-white core, a bloom-hi midtone,
   then a deep saturated bloom falloff (was a flat 2-stop radial); the
   layered box-shadow adds a tight hot glint under the wider soft bloom. */
#hpc-assess .assess__hook::before {
  content: '"';
  grid-column: 1;
  grid-row: 1 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%,
    color-mix(in srgb, var(--bloom-hi) 70%, #fff 30%) 0%,
    var(--bloom-hi) 38%,
    var(--bloom) 82%,
    color-mix(in srgb, var(--bloom) 65%, #000 22%) 100%);
  box-shadow: 0 0 10px -1px color-mix(in srgb, var(--bloom-hi) 80%, #fff 20%),
              0 0 30px -6px var(--bloom);
  /* Fraunces italic — a real serif quotation mark, not a sans glyph */
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 1.875rem;
  color: var(--accent);
  line-height: 1;
  padding-bottom: 6px;
}
/* Nocturne: the pull-quote claim moves to Fraunces roman — an editorial
   claim deserves the display serif, distinct from the sans structural type
   around it. */
#hpc-assess .assess__hook-claim {
  grid-column: 2;
  font-family: var(--font-display);
  font-style: normal;
  font-size: clamp(1.0625rem, 2vw, 1.4375rem);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.45;
}
/* v3.1-daylight: citation in Spline Mono --ink-3 — legible + honest */
#hpc-assess .assess__hook-cite {
  grid-column: 2;
  font-family: 'Spline Sans Mono', ui-monospace, monospace;
  font-size: 0.8125rem;
  color: var(--ink-3);
  margin-top: 14px;
  font-style: normal;
  line-height: 1.55;
}

/* v3.1-daylight: start card — lit card, centred, max 640px; --shadow-lit */
#hpc-assess .assess__intro-panel {
  background: var(--card);
  border: none;
  border-radius: var(--r-card);
  box-shadow: var(--shadow-lit);
  padding: 36px 40px 34px;
  text-align: center;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--sp-5);
}
/* v3.1-daylight: icon ready — styled for when runtime un-hides it */
#hpc-assess .assess__intro-icon {
  display: block;
  font-size: 2rem;
  line-height: 1;
  text-align: center;
  margin: 0 auto var(--sp-3);
}
#hpc-assess .assess__intro-icon[hidden] { display: none; }
/* Nocturne: card-level heading stays clean sans (card titles are structural,
   not the editorial-display register Fraunces owns). */
#hpc-assess .assess__intro-title {
  font-family: var(--font-ui);
  font-size: clamp(1.1875rem, 2.2vw, 1.6875rem);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: var(--sp-3);
  line-height: 1.25;
}
#hpc-assess .assess__intro-desc {
  font-size: 0.96875rem;
  color: var(--ink-2);
  line-height: 1.65;
  max-width: 52ch;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--sp-4);
}
#hpc-assess .assess__intro-details {
  font-family: 'Spline Sans Mono', ui-monospace, monospace;
  font-size: 0.8125rem;
  color: var(--ink-2);
  margin-bottom: var(--sp-4);
  display: block;
  letter-spacing: 0.02em;
}

/* Nocturne: honesty note is a note, not a headline — stays sans; weight +
   background warmth supply the needed emphasis. */
#hpc-assess .assess__intro-honesty {
  font-family: var(--font-ui);
  font-style: normal;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink-2);
  margin-bottom: var(--sp-3);
  background: var(--tint);
  border-left: none;
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
}

/* v3.1-daylight: primary pill CTA — larger, prominent (Nocturne: Instrument Sans, a UI control not a display moment) */
#hpc-assess .assess__btn-start {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-ui);
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  padding: 17px 44px;
  border: none;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: filter 0.18s, transform 0.18s var(--ease-out);
  min-height: 56px;
  box-shadow: 0 12px 30px -8px color-mix(in srgb,var(--accent) 58%,transparent),
              0 0 40px -10px var(--bloom);
}
#hpc-assess .assess__btn-start:hover {
  filter: brightness(1.12);
  transform: translateY(-2px);
}
#hpc-assess .assess__btn-start:active {
  filter: brightness(0.88);
  transform: translateY(0);
  transition: filter 0.07s, transform 0.07s;
}

/* v3.1-daylight: fineprint — calm, visible, --ink-2; bordered for honesty context */
#hpc-assess .assess__fineprint {
  font-size: 0.875rem;
  color: var(--ink-2);
  line-height: 1.65;
  max-width: 70ch;
  margin-top: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
}

/* ══════════════════════════════════════════════════════════════
   QUIZ SCREEN
══════════════════════════════════════════════════════════════ */
#hpc-assess .assess__resume {
  background: var(--card);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-md);
  padding: 14px 18px;
  margin-bottom: var(--sp-4);
  display: none;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
#hpc-assess .assess__resume--show { display: flex; }
#hpc-assess .assess__resume-text { font-size: 0.875rem; color: var(--ink-2); }
#hpc-assess .assess__btn-resume {
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent);
  padding: 10px 16px;
  border-radius: var(--r-pill);
  font-family: 'Instrument Sans', sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.18s;
  white-space: nowrap;
  min-height: 44px;
}
#hpc-assess .assess__btn-resume:hover { filter: brightness(1.15); }

/* Progress — filling of light (encouragement, not an exam counter) */
#hpc-assess .assess__progress { margin-bottom: var(--sp-5); position: relative; }
#hpc-assess .assess__progress-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 10px;
  margin-bottom: 0;
}
#hpc-assess .assess__progress-counter {
  font-size: 0.875rem;
  color: var(--ink-2);
  line-height: 1.4;
}
#hpc-assess .assess__progress-dim {
  font-family: 'Spline Sans Mono', ui-monospace, monospace;
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
#hpc-assess .assess__meter {
  display: flex;
  gap: 0;
  align-items: stretch;
  height: 9px;
  border-radius: var(--r-pill);
  background: var(--wash);
  box-shadow: var(--shadow-well);
  overflow: hidden;
}
#hpc-assess .assess__meter-seg {
  flex: 1;
  height: 100%;
  border-radius: 0;
  background: transparent;
  transition: background 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
  transform-origin: bottom;
}
#hpc-assess .assess__meter-seg--done {
  background: linear-gradient(90deg, var(--bloom-hi), var(--bloom));
}
#hpc-assess .assess__meter-seg--active {
  background: var(--accent);
  box-shadow: 0 0 18px var(--bloom);
}

/* Question stage — wrap is the raised card surface; question is the animated transparent layer inside */
#hpc-assess .assess__question-wrap {
  position: relative;
  min-height: 420px;
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
}
#hpc-assess .assess__question {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 36px 32px;
  animation: assessFocusIn 0.45s var(--ease-out);
}
#hpc-assess .assess__q-kicker {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line);
}
#hpc-assess .assess__q-cat {
  font-family: 'Spline Sans Mono', ui-monospace, monospace;
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 8px;
}
#hpc-assess .assess__q-cat::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--bloom);
  box-shadow: 0 0 7px var(--bloom);
  flex-shrink: 0;
}
/* The scenario is the longest-dwelled text in the product — stays clean sans
   (Nocturne keeps Fraunces for editorial display only; high-dwell reading
   text needs the grotesque's readability, not the serif's character). */
#hpc-assess .assess__q-text {
  font-family: var(--font-ui);
  font-size: clamp(1.4rem, 2.8vw, 1.9rem);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.32;
  margin-bottom: var(--sp-4);
  max-width: 44ch;
  /* No single-word last lines on question copy (progressive enhancement;
     authored strings vary, so this beats hand-tuned widths). */
  text-wrap: pretty;
}

/* Options — Daylight ember cards. 3D tilt system retired (Task 3.3). No backdrop-filter. */
#hpc-assess .assess__options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}
#hpc-assess .assess__option {
  background: var(--card);
  border: 1.5px solid transparent;
  border-radius: var(--r-lg);
  padding: 15px 54px 15px 48px;
  cursor: pointer;
  position: relative;
  font-size: 0.9375rem;
  color: var(--ink);
  line-height: 1.5;
  min-height: 54px;
  display: flex;
  align-items: center;
  box-shadow: 0 1px 2px rgba(var(--shadow-rgb),.08), 0 6px 18px -8px rgba(var(--shadow-rgb),.18);
  transition: transform 0.22s var(--ease-out), box-shadow 0.3s var(--ease-out), border-color 0.2s, background 0.2s;
}
/* ember bloom — emanates from center on snap (no cursor-following spotlight) */
#hpc-assess .assess__option::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: var(--r-lg);
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--bloom) 55%, transparent) 0%, transparent 70%);
  opacity: 0;
  pointer-events: none;
}
/* HOVER (pointer) — gentle lift */
#hpc-assess .assess__option:hover {
  transform: translateY(-2px);
  border-color: var(--accent-line);
  background: var(--card);
  box-shadow: 0 2px 4px rgba(var(--shadow-rgb),.09),
              0 12px 32px -12px rgba(var(--shadow-rgb),.27),
              0 0 0 1px var(--accent-line);
}
/* KEYBOARD parity — focus ring so keyboard users have clear state */
#hpc-assess .assess__option:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px var(--tint);
}
/* SELECTED — tint flood + accent border + filled check. Nocturne: a faint
   jewel radial layered under the flat tint, emanating from the lit radio
   dot, so the selection itself reads as a small pool of light. */
#hpc-assess .assess__option--selected {
  transform: translateY(-2px);
  border-color: var(--accent) !important;
  background: radial-gradient(140% 160% at 10% 50%, color-mix(in srgb, var(--bloom) 20%, transparent), transparent 68%), var(--tint);
  box-shadow: 0 8px 24px -10px rgba(var(--shadow-rgb),.24),
              0 0 0 1.5px var(--accent);
  color: var(--ink);
}
/* SNAP — Daylight ember: card lifts 2px (already --selected), bloom pulses from center */
#hpc-assess .assess__option--snap { animation: assessEmberLift 0.22s var(--ease-out); }
#hpc-assess .assess__option--snap::after { animation: assessEmberPulse 0.5s var(--ease-out); }
@keyframes assessEmberLift {
  0%   { transform: translateY(-4px); }
  100% { transform: translateY(-2px); }
}
@keyframes assessEmberPulse {
  0%   { opacity: 0.75; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.08); }
}
#hpc-assess .assess__option-radio {
  position: absolute;
  left: 17px;
  top: 50%;
  transform: translateY(-50%);
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 1.5px solid var(--ink-3);
  transition: border-color 0.18s, box-shadow 0.2s;
  flex-shrink: 0;
}
#hpc-assess .assess__option-radio::after {
  content: '';
  position: absolute;
  inset: 50% auto auto 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.22, 1.28);
  box-shadow: 0 0 10px var(--accent);
}
/* Sound toggle — injected by runtime; sits in the top padding, above masthead.
   Identity chip: tint background + accent ink, pill shape. */
#hpc-assess .assess__sound-toggle {
  position: absolute;
  top: 22px;
  right: 22px;
  z-index: 4;
  font-family: 'Spline Sans Mono', ui-monospace, monospace;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  background: var(--tint);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  padding: 0 14px;
  min-height: 44px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
#hpc-assess .assess__sound-toggle[aria-pressed="true"] { color: var(--accent); border-color: var(--accent-line); }
#hpc-assess .assess__sound-toggle:hover { color: var(--accent); }
/* Nocturne: same hot-core/deep-falloff jewel recipe as the hook orb, scaled
   down for the small selection dot. */
#hpc-assess .assess__option--selected .assess__option-radio {
  background: radial-gradient(circle at 32% 28%,
    color-mix(in srgb, var(--bloom-hi) 75%, #fff 25%) 0%,
    var(--bloom-hi) 42%,
    var(--bloom) 100%);
  border-color: transparent;
  box-shadow: 0 0 4px -0.5px color-mix(in srgb, var(--bloom-hi) 80%, #fff 20%),
              0 0 10px -2px var(--bloom);
}
#hpc-assess .assess__option--selected .assess__option-radio::after {
  transform: translate(-50%, -50%) scale(1);
  background: var(--accent);
}
#hpc-assess .assess__option-label { flex: 1; font-size: 0.9375rem; line-height: 1.55; }
#hpc-assess .assess__option-key {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Spline Sans Mono', ui-monospace, monospace;
  font-size: 0.8125rem;
  color: var(--ink-3);
  background: var(--wash);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 2px 7px;
  transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.22s var(--ease-out);
}
#hpc-assess .assess__option:hover .assess__option-key {
  color: var(--accent);
  border-color: var(--accent-line);
  background: var(--tint);
  transform: translateY(-50%) scale(1.06);
}
#hpc-assess .assess__option--selected .assess__option-key {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
  transform: translateY(-50%) scale(1.05);
}
#hpc-assess .assess__option--snap .assess__option-key { animation: assessBadgeSlam 0.42s cubic-bezier(0.2, 0.9, 0.22, 1.28); }
@keyframes assessBadgeSlam {
  0%   { transform: translateY(-50%) scale(1.35); }
  55%  { transform: translateY(-50%) scale(0.95); }
  100% { transform: translateY(-50%) scale(1.05); }
}

/* Evidence reveal — warm aside: fully rounded well, supportive "here is the research" tone */
#hpc-assess .assess__context {
  display: none;
  margin-top: var(--sp-4);
  padding: 20px 22px;
  background: var(--wash);
  border: none;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-well);
}
#hpc-assess .assess__context--show { display: block; animation: assessFadeUp 0.38s var(--ease-out) both; }
#hpc-assess .assess__context-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
#hpc-assess .assess__context-flag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'Spline Sans Mono', ui-monospace, monospace;
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--tint);
  border-radius: var(--r-pill);
  padding: 4px 12px;
}
#hpc-assess .assess__context-flag::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bloom);
  box-shadow: 0 0 6px var(--bloom);
  flex-shrink: 0;
}
#hpc-assess .assess__context-cite {
  font-family: 'Spline Sans Mono', ui-monospace, monospace;
  font-size: 0.8125rem;
  color: var(--ink-3);
  display: block;
  margin-top: 10px;
}
#hpc-assess .assess__context-probe {
  font-size: 0.875rem;
  color: var(--ink);
  margin-bottom: 8px;
}
#hpc-assess .assess__context-probe strong { color: var(--ink-2); font-weight: 600; }
#hpc-assess .assess__context-text {
  font-size: 0.9375rem;
  color: var(--ink-2);
  line-height: 1.65;
}

/* Citation suffix used across results */
#hpc-assess .assess__cite {
  font-family: 'Spline Sans Mono', ui-monospace, monospace;
  font-size: 0.8125rem;
  color: var(--ink-3);
  white-space: nowrap;
}
/* Click-through DOI link on evidence/specimen citations (2026-07 live audit:
   let skeptics spot-check a cited claim in place). Inherits the mono cite
   look; a dotted underline signals it's live without shouting. */
#hpc-assess .assess__cite-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: color 0.15s, text-decoration-color 0.15s;
}
#hpc-assess .assess__cite-link:hover,
#hpc-assess .assess__cite-link:focus-visible {
  color: var(--accent-ink, var(--accent));
  text-decoration-color: currentColor;
}
#hpc-assess .assess__cite-block {
  display: block;
  font-family: 'Spline Sans Mono', ui-monospace, monospace;
  font-size: 0.8125rem;
  color: var(--ink-3);
  margin-top: 6px;
}

/* Status line (unanswered jump announcements) */
#hpc-assess .assess__status {
  font-size: 0.875rem;
  color: var(--sev-elevated);
  min-height: 1.5em;
  margin-top: var(--sp-2);
  opacity: 0;
  transition: opacity 0.25s;
}
#hpc-assess .assess__status--show { opacity: 1; }

/* Nav buttons */
#hpc-assess .assess__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--sp-3);
  gap: 12px;
}
/* Keyboard-shortcut hint (runtime-injected after .assess__nav) — quiet
   instrument-label voice; desktop-only, keyboards are the exception on
   small viewports and the line would crowd the 390 nav. */
#hpc-assess .assess__kbd-hint {
  margin-top: var(--sp-2);
  text-align: right;
  font-family: 'Spline Sans Mono', ui-monospace, monospace;
  font-size: 0.8125rem;
  letter-spacing: 0.03em;
  color: var(--ink-3);
}
@media (max-width: 640px) {
  #hpc-assess .assess__kbd-hint { display: none; }
}
#hpc-assess .assess__btn-nav {
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--ink-2);
  padding: 11px 22px;
  border-radius: var(--r-pill);
  font-family: 'Instrument Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s, filter 0.18s;
  min-height: 44px;
}
#hpc-assess .assess__btn-nav:hover { background: var(--wash); border-color: var(--line-strong); color: var(--ink); }
#hpc-assess .assess__btn-nav--prev { }
#hpc-assess .assess__btn-nav--next {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: transparent;
  border-radius: var(--r-pill);
  letter-spacing: 0.02em;
  text-transform: none;
  font-size: 0.875rem;
  padding: 12px 28px;
  box-shadow: 0 10px 26px -8px color-mix(in srgb,var(--accent) 55%,transparent);
}
#hpc-assess .assess__btn-nav--next:hover { background: var(--accent); color: var(--accent-ink); border-color: transparent; filter: brightness(1.14); }
#hpc-assess .assess__btn-nav--next:active { filter: brightness(0.88); transition: filter 0.07s; }
#hpc-assess .assess__btn-nav:disabled { opacity: 0.3; cursor: not-allowed; pointer-events: none; }

/* ══════════════════════════════════════════════════════════════
   ANALYSING SCREEN — the instrument calibrating
══════════════════════════════════════════════════════════════ */
#hpc-assess .assess__analysing {
  text-align: center;
  padding: var(--sp-7) 32px;
}
#hpc-assess .assess__calibrate {
  position: relative;
  width: 240px;
  height: 88px;
  margin: 0 auto var(--sp-5);
}
#hpc-assess .assess__calibrate-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line);
}
#hpc-assess .assess__calibrate-line:nth-child(1) { top: 0; }
#hpc-assess .assess__calibrate-line:nth-child(2) { top: 22px; }
#hpc-assess .assess__calibrate-line:nth-child(3) { top: 44px; background: var(--line-strong); }
#hpc-assess .assess__calibrate-line:nth-child(4) { top: 66px; }
#hpc-assess .assess__calibrate-line:nth-child(5) { top: 88px; }
#hpc-assess .assess__calibrate-carriage {
  position: absolute;
  top: -6px;
  bottom: -6px;
  left: 0;
  width: 1px;
  background: var(--accent);
  animation: assessCarriage 2.2s ease-in-out infinite;
}
#hpc-assess .assess__analysing-text {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 1.15rem;
  color: var(--ink-3);
}

/* ══════════════════════════════════════════════════════════════
   RESULTS — THE FIELD OF LIGHT (hero band)
   Verdict lockup + dimension field fused into one continuous twilight
   ground — dark warm gradient (plum/brown/ember, NEVER navy), full-bleed
   past .assess__body's own padding. The descendant rules below (verdict
   lockup, portrait) are UNCHANGED in structure; they read --ink/--ink-2/
   --ink-3/--line/--line-strong/--card/--wash/--shadow-well/--shadow-lit
   already, so redefining those tokens here is what relights them for the
   dark ground — no separate "dark" ruleset to keep in sync. --bloom/
   --bloom-hi stay the pillar accent throughout: light is identity, not
   severity, in both this band and the light-ground body below it.
══════════════════════════════════════════════════════════════ */
#hpc-assess .assess__hero-field {
  --hf-cream: #F7ECD9;
  /* Nocturne: alpha raised .74 -> .88 (still a visibly "dimmed" secondary ink
     next to full --hf-cream) so the re-verify script clears 4.5:1 against
     the ember-floor stop for every pillar — see contrast_lab.py in the
     handoff notes; the deepened/hue-shifted gradient below made the old .74
     marginal for the warmest pillars at the very bottom of the field. */
  --hf-cream-dim: rgba(247,236,217,.88);
  --hf-cream-faint: rgba(247,236,217,.46);
  --hf-line: rgba(247,236,217,.16);
  --hf-line-strong: rgba(247,236,217,.24);
  --ink: var(--hf-cream);
  --ink-2: var(--hf-cream-dim);
  --ink-3: var(--hf-cream-faint);
  --line: var(--hf-line);
  --line-strong: var(--hf-line-strong);
  --card: transparent;
  --wash: rgba(8,5,3,.34);
  --shadow-well: inset 0 2px 10px rgba(0,0,0,.4);
  --shadow-lit: none;
  --accent-ink: var(--hf-cream);
  /* PINNED-TOKEN CHECKLIST — this band's ground must stay dark in BOTH
     themes, so EVERY theme-switchable token consumed by a hero-field
     descendant (or by the band's own gradient) must be re-pinned to its
     dark-world value here, or the light theme paints light-ground colours
     onto a dark ground. Currently pinned: ink family + line +
     card/wash/shadows (above), --sev-*, --brass, --accent, --canvas
     (below). If you add a new token consumer inside the hero band, add its
     pin here — sev (1.76:1) and the profile chip's accent (1.57:1) were
     both shipped misses of exactly this category. NOTE: indirections like
     --verdict-color: var(--sev-x) resolve at the consuming element and
     pick up these pins automatically; only DIRECT reads of theme tokens
     need a checklist line. */
  --sev-low:#52D98A; --sev-moderate:#F0B44E; --sev-elevated:#FF9159; --sev-critical:#FF8177;
  /* Brass: the ghost verdict-folio watermark + hero hairlines keep the
     dark-world antique gold (light theme darkens --brass for pale grounds). */
  --brass:#C9A24B;
  /* Accent: the profile chip (and anything else reading --accent /
     --accent-line in the band) keeps the dusk accent — the light theme's
     plain pillar accent is tuned for pale grounds and lands at 1.6–2.3:1
     on this gradient. */
  --accent: var(--assess-pillar-accent-dusk, var(--assess-pillar-accent, #E8A765));
  /* Canvas: the band's own top two gradient stops color-mix a whisper of
     --canvas; unpinned, the light theme's pale cream leaked in and nudged
     the extreme 0% edge to 4.41:1 for one pillar (not user-reachable, but
     the pin makes "always dark" actually true rather than approximately). */
  --canvas:#1C1218;
  position: relative;
  isolation: isolate;
  margin: 0 -56px var(--sp-6);
  padding: clamp(30px,3.6vw,48px) 56px clamp(26px,3vw,38px);
  overflow: clip;
  /* Nocturne: the top three stops shift from neutral near-black-brown toward
     visible aubergine/plum (the "twilight sky" gradation); the ember floor
     (100%, bloom 16%) is UNCHANGED from the pre-Nocturne recipe — re-verified
     end-to-end via contrast_lab.py, all 10 pillars clear 4.5:1 at every stop. */
  background:
    radial-gradient(120% 55% at 50% 100%, color-mix(in srgb, var(--bloom) 26%, transparent), transparent 68%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--canvas) 14%, #160d14) 0%,
      color-mix(in srgb, var(--canvas) 10%, #23111c) 22%,
      #301a1e 42%,
      #3e1f18 58%,
      #5c2b17 74%,
      color-mix(in srgb, var(--bloom) 16%, #7a3618) 100%);
}
/* CRITICAL-TIER GRAVITY (owner queue #1) — severity-independent register.
   The runtime stamps data-verdict-tier on #hpc-assess at results time. On a
   CRITICAL verdict the twilight ground goes graver: the ember floor and the
   pillar bloom's ambient wash are pulled well down (cheerfulness is what the
   board flagged, and the ambience is where it lives) and a single hard
   sev-critical rule crowns the band. Honest-encoding holds: the beams, chip,
   and tier labels are untouched — light stays pillar hue; only the ROOM gets
   graver. Every stop here is darker than its base twin, so the AA-verified
   cream inks only gain contrast. */
#hpc-assess[data-verdict-tier="critical"] .assess__hero-field {
  border-top: 3px solid var(--sev-critical);
  background:
    radial-gradient(120% 55% at 50% 100%, color-mix(in srgb, var(--bloom) 12%, transparent), transparent 60%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--canvas) 14%, #150d12) 0%,
      color-mix(in srgb, var(--canvas) 10%, #1e1018) 22%,
      #281719 42%,
      #301a15 58%,
      #402013 74%,
      color-mix(in srgb, var(--bloom) 8%, #4d2413) 100%);
}

/* Film grain — quiets the gradient banding; identical device used elsewhere in the engine */
#hpc-assess .assess__hero-field::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .05;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* THE VERDICT LOCKUP — lives directly on the twilight ground now: no plate,
   no corner marks, no caption chip (there is no border left for it to break). */
#hpc-assess .assess__verdict-lockup {
  position: relative;
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  margin-top: 4px;
  margin-bottom: var(--sp-5);
}
#hpc-assess .assess__verdict-lockup::before,
#hpc-assess .assess__verdict-lockup::after {
  display: none;
}
/* Nocturne: the ghost numeral moves to Fraunces at its heaviest weight (huge
   display numerals are exactly what the optical-size axis is for) and tints
   brass instead of ink — an antique-gold watermark. Still a pure ornament at
   3.5% opacity, well below any legibility threshold. */
#hpc-assess .assess__verdict-folio {
  position: absolute;
  top: -0.45em;
  right: 0.02em;
  z-index: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(11rem, 19vw, 16rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--brass);
  opacity: 0.035;
  pointer-events: none;
}
#hpc-assess .assess__verdict-kicker,
#hpc-assess .assess__verdict-setup,
#hpc-assess .assess__verdict-payoff,
#hpc-assess .assess__verdict-lockup-line,
#hpc-assess .assess__verdict-desc,
#hpc-assess .assess__profile-chip { position: relative; z-index: 1; }

/* Field label, not section title: frames the editorial headline as the
   instrument's prose annotation on the data (skeptic lens, round 4).
   Runs in the construct-capsule register — mono, quiet, one job. */
#hpc-assess .assess__verdict-kicker {
  display: block;
  font-family: 'Spline Sans Mono', ui-monospace, monospace;
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
}
/* Chapter marker — short accent dash before the editorial-voice kickers (T7). */
#hpc-assess .assess__delta-kicker::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 2px;
  background: var(--accent);
  vertical-align: 0.3em;
  margin-right: 10px;
}
#hpc-assess .assess__verdict-setup {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.4vw, 2.1rem);
  font-weight: 500;
  line-height: 1.04;
  color: var(--ink-2);
}
#hpc-assess .assess__verdict-setup[hidden] { display: none; }
/* Nocturne: real Fraunces italic on the payoff — the "finally" moment this
   whole type pass was aimed at; Bricolage never had an italic axis, so this
   line was upright-only before. Weight eased 800->600: a maxed-out italic
   serif weight at this size gets clumsy, and Fraunces' high opsz already
   supplies the thick/thin drama the old 800-weight grotesque was reaching
   for. setup (roman, --ink-2) leads; payoff (italic, --ink) lands. */
#hpc-assess .assess__verdict-payoff {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(2.8rem, 7.2vw, 5rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
  margin: 6px 0 var(--sp-4);
  line-height: 1.1;
}
#hpc-assess .assess__verdict-lockup-line {
  display: flex;
  align-items: flex-end;
  gap: clamp(14px,2vw,22px);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}
/* Diagnostic stamp — SEVERITY chip only: pill shape + severity channel colour.
   NEVER repaint with --accent / --tint (honest-encoding law: accent = identity,
   severity channel = data; double-encoding breaks the reading). */
#hpc-assess .assess__verdict-chip {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--verdict-color);
  border: 1px solid currentColor;
  border-radius: var(--r-pill);
  padding: 5px 12px;
  margin-bottom: 0.6em;
}
/* THE ANCHOR — the score is the one huge object in the hero; everything
   else (kicker, setup, payoff, chip) is annotation around this number.
   Nocturne: Fraunces at high opsz — the huge clamp'd size lets the optical
   axis deliver genuine thick/thin numeral drama a grotesque cannot. */
#hpc-assess .assess__verdict-reading {
  display: flex;
  align-items: baseline;
  gap: 0.12em;
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: clamp(3.6rem, 9.4vw, 6.8rem);
  letter-spacing: -0.01em;
  line-height: 0.86;
  color: var(--ink);
  text-shadow: 0 0 46px color-mix(in srgb, var(--bloom) 55%, transparent);
}
#hpc-assess .assess__verdict-reading-val { color: var(--ink); }
#hpc-assess .assess__verdict-reading-max {
  color: var(--ink-3);
  font-size: 0.34em;
  font-weight: 500;
  letter-spacing: 0;
}
#hpc-assess .assess__verdict-desc {
  font-size: 0.9375rem;
  color: var(--ink-2);
  line-height: 1.7;
  max-width: 58ch;
  margin-bottom: var(--sp-4);
}
/* Editorial-band disclaimer: shown when the active band carries editorial:true.
   Styling lives here (not inline) so it obeys the #hpc-assess specificity contract;
   13px honours the hard mobile floor. opacity removed: at-floor text must not
   be further buried by compositing — secondary register is communicated via
   --ink-2 colour and italic, not reduced pixel density. */
#hpc-assess .assess__band-disclaimer {
  font-size: 13px;
  font-style: italic;
  color: var(--ink-2);
}
/* Identity chip: carries pillar affiliation — tint background + accent ink.
   MUST NOT encode severity; distinct from verdict-chip / flag-label. */
#hpc-assess .assess__profile-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  background: var(--tint);
  color: var(--accent);
  border-radius: var(--r-pill);
  padding: 4px 14px;
}
#hpc-assess .assess__profile-chip-label {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
#hpc-assess .assess__profile-chip-value {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  /* 70% accent (was --accent-line's 30%): at 30% alpha the underline
     composited to 1.7–1.9:1 on the hero ground for every pillar — an
     ornament too faint to be one. 70% clears the 3:1 non-text bar for all
     10 pillars (worst 3.26, social) and reads as a deliberate accent tick.
     The value text above it passes AA on its own; the underline is
     affordance, not information. */
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 70%, transparent);
  padding-bottom: 2px;
}
#hpc-assess .assess__profile-gloss {
  font-size: 0.8125rem;
  color: var(--ink-3);
  margin-top: var(--sp-1);
}
#hpc-assess .assess__verdict-recorded {
  font-family: 'Spline Sans Mono', ui-monospace, monospace;
  font-size: 0.8125rem;
  color: var(--ink-3);
  margin-top: var(--sp-2);
  margin-bottom: var(--sp-2);
}
/* Instrument sub-line: the worst construct in dry measurement language */
#hpc-assess .assess__primary-exposure {
  position: relative;
  z-index: 1;
  font-family: 'Spline Sans Mono', ui-monospace, monospace;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-top: 2px;
}

/* THE STAMP LANDING — the verdict prints itself: number descends from above,
   words rise to meet it, chip clicks in, context settles (staggered beats). */
#hpc-assess .assess__verdict-lockup--anim .assess__verdict-kicker,
#hpc-assess .assess__verdict-lockup--anim .assess__verdict-setup,
#hpc-assess .assess__verdict-lockup--anim .assess__verdict-payoff,
#hpc-assess .assess__verdict-lockup--anim .assess__verdict-desc,
#hpc-assess .assess__verdict-lockup--anim .assess__primary-exposure,
#hpc-assess .assess__verdict-lockup--anim .assess__profile-chip {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
#hpc-assess .assess__verdict-lockup--anim .assess__verdict-lockup-line {
  opacity: 0;
  transform: scale(0.88);
  transform-origin: left center;
  transition: opacity 0.3s var(--ease-out) 0.22s, transform 0.3s var(--ease-out) 0.22s;
}
#hpc-assess .assess__verdict-lockup--anim .assess__verdict-folio {
  opacity: 0;
  transform: scale(1.18) translateY(-16px);
  transition: opacity 0.58s var(--ease-out), transform 0.58s var(--ease-out);
}
#hpc-assess .assess__verdict-lockup--anim .assess__verdict-setup { transition-delay: 0.08s; }
#hpc-assess .assess__verdict-lockup--anim .assess__verdict-payoff { transition-delay: 0.18s; transition-duration: 0.6s; }
#hpc-assess .assess__verdict-lockup--anim .assess__verdict-desc { transition-delay: 0.34s; }
#hpc-assess .assess__verdict-lockup--anim .assess__primary-exposure { transition-delay: 0.4s; }
#hpc-assess .assess__verdict-lockup--anim .assess__profile-chip { transition-delay: 0.44s; }
#hpc-assess .assess__verdict-lockup--run .assess__verdict-kicker,
#hpc-assess .assess__verdict-lockup--run .assess__verdict-setup,
#hpc-assess .assess__verdict-lockup--run .assess__verdict-payoff,
#hpc-assess .assess__verdict-lockup--run .assess__verdict-desc,
#hpc-assess .assess__verdict-lockup--run .assess__primary-exposure,
#hpc-assess .assess__verdict-lockup--run .assess__profile-chip {
  opacity: 1;
  transform: translateY(0);
}
#hpc-assess .assess__verdict-lockup--run .assess__verdict-lockup-line {
  opacity: 1;
  transform: scale(1);
}
#hpc-assess .assess__verdict-lockup--run .assess__verdict-folio {
  opacity: 0.035;
  transform: scale(1) translateY(0);
}

/* ══════════════════════════════════════════════════════════════
   RESULTS — THE FIELD OF LIGHT (dimension field; worst-first on a shared scale)
   Honest-encoding laws: every beam shares an identical --portrait-field track;
   only --lit (extent of light) differs, and it drives ONE axis at a time —
   width on this mobile base, height on the desktop override below (≥641px).
   Greyscale-survivable via extent + the always-visible tier word. Pillar
   --bloom is identity/warmth; NEVER the severity ramp.
   A third tier lives far below in the responsive stack: the ≤600px
   narrow-phone override ("THE FIELD OF LIGHT — NARROW-PHONE OVERRIDE",
   ~L2560) re-flows name/value/field for phones where the 210px fixed
   name column here would crush the light-bar. It is load-bearing, not
   legacy — see that block's comment before editing either side.
══════════════════════════════════════════════════════════════ */
#hpc-assess .assess__portrait-kicker {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 var(--sp-3);
}
#hpc-assess .assess__portrait {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: var(--sp-4) 0 var(--sp-1);
  border-top: 2px solid var(--line-strong);
  border-bottom: 1px solid var(--line);
}
#hpc-assess .assess__portrait-scale {
  display: flex;
  justify-content: space-between;
  margin: 0 0 var(--sp-2);
  padding-left: 210px;
}
#hpc-assess .assess__portrait-scale-end {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
/* Hero evidence line — attributed proof above the fold (2026-07 reading
   audit, owner-adjudicated): computed from the verified citation registry,
   sits directly under the meta chips. */
#hpc-assess .assess__evidence-line {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 0.8125rem;
  font-style: italic;
  color: var(--ink-3);
  margin: var(--sp-2) 0 0;
}
/* One-line hedge under the start control (same audit round) — the honest
   contract lands at the decision point, not only in the fineprint. */
#hpc-assess .assess__cta-hedge {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 0.8125rem;
  font-style: italic;
  color: var(--ink-3);
  margin: var(--sp-2) 0 0;
}
/* One-sentence key for the Field of Light — closes the two reader gaps the
   2026-07 reading audit found (what "/16" means; which direction is bad)
   without touching the honest light-as-resistance encoding. */
#hpc-assess .assess__portrait-scale-note {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 0.8125rem;
  font-style: italic;
  color: var(--ink-3);
  margin: 0 0 var(--sp-3);
  padding-left: 210px;
}
/* Wraps just the beams (not the scale legend) so desktop can flip this one
   element into a flex row of columns without touching the legend's layout. */
#hpc-assess .assess__portrait-rows { display: block; }
#hpc-assess .assess__portrait-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  min-height: 44px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background 0.15s;
}
#hpc-assess .assess__portrait-row:last-child { border-bottom: none; }
#hpc-assess .assess__portrait-row:hover { background: rgba(247, 236, 217, .06); }
#hpc-assess .assess__portrait-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--tint);
  border-radius: var(--r-sm);
}
/* Worst row: quiet --sev-critical left marker; name presses forward */
#hpc-assess .assess__portrait-row--worst {
  border-left: 3px solid var(--sev-critical);
  padding-left: 13px;
  margin-left: -16px;
}
#hpc-assess .assess__portrait-row--worst .assess__portrait-name {
  color: var(--ink);
  font-size: 1.25rem;
}
/* DOM order is field, value, name (so desktop can put the beam on top with
   the tag below it); `order` restores the mobile reading sequence
   name -> field -> value on this horizontal-bar base layout. */
#hpc-assess .assess__portrait-name {
  order: 1;
  flex: none;
  width: 210px;
  font-family: var(--font-ui);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.15;
  color: var(--ink);
}
#hpc-assess .assess__portrait-field { order: 2; }
#hpc-assess .assess__portrait-value { order: 3; }
/* Tier word: always visible — greyscale channel alongside extent */
#hpc-assess .assess__portrait-tierlabel {
  display: block;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-top: 2px;
}
/* Tier-word valence cue (owner queue #3): the tier WORD takes its stop on the
   severity ramp so STRONG and CRITICAL no longer share one visual voice. The
   word itself stays (greyscale-survivable); colour is additive. Severity
   channel only — never the beams (light = pillar identity, not severity).
   The word becomes a compact TAG on a near-black backing: the sev ramp fails
   AA (≈2:1 worst) directly on the bright ember floor where bottom rows sit,
   so the tag carries its own dark ground — all four stops clear ≥5:1 on it
   (verified against the brightest per-pillar floor blend, both recipes).
   Rows sit inside .assess__hero-field, whose pinned dark sev ramp holds in
   both themes. */
#hpc-assess .assess__portrait-tierlabel {
  /* display:table = shrink-wrapped block: the tag always takes its OWN line
     under the name (never flows inline after a wrapped name) yet stays
     pill-width; desktop centres it via margin:auto in the ≥641 column
     layout below. */
  display: table;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  background: rgba(10, 6, 4, 0.88);
  margin: 4px 0 0;
}
#hpc-assess .assess__portrait-row[data-tier="low"] .assess__portrait-tierlabel { color: var(--sev-low); }
#hpc-assess .assess__portrait-row[data-tier="moderate"] .assess__portrait-tierlabel { color: var(--sev-moderate); }
#hpc-assess .assess__portrait-row[data-tier="elevated"] .assess__portrait-tierlabel { color: var(--sev-elevated); }
#hpc-assess .assess__portrait-row[data-tier="critical"] .assess__portrait-tierlabel { color: var(--sev-critical); }
/* Comprehension gloss: plain-English sub-line, 13px floor */
#hpc-assess .assess__portrait-plain {
  display: block;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink-3);
  margin-top: 3px;
  max-width: 30ch;
}
/* The field: full-width track shared by every row — same container, extent differs.
   Dotted wick (::after) is a fixed ceiling reference, not tied to the beam's
   own extent. Mobile: a horizontal light row — --lit drives WIDTH. */
#hpc-assess .assess__portrait-field {
  position: relative;
  flex: 1;
  height: 18px;
  border-radius: 999px;
  background: var(--wash);
  box-shadow: var(--shadow-well);
}
#hpc-assess .assess__portrait-field::after {
  content: '';
  position: absolute;
  left: 12px; right: 12px;
  top: 50%;
  height: 0;
  border-top: 2px dotted var(--line-strong);
  pointer-events: none;
}
/* Tier boundary ticks — mobile: vertical hairline at --tick-frac along the width */
#hpc-assess .assess__portrait-tick {
  position: absolute;
  left: var(--tick-frac, 0%);
  top: 3px; bottom: 3px;
  width: 1.5px;
  background: var(--line-strong);
}
/* The bloom: luminous --bloom gradient, --lit-driven (identity hue, not severity). */
#hpc-assess .assess__portrait-bloom {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: var(--lit, 0%);
  border-radius: 999px;
  background: linear-gradient(to right, var(--bloom-hi), var(--bloom));
  box-shadow: 0 0 18px -4px var(--bloom);
  /* Dawn motion: --lit grows from 0 to its true extent on reveal, staggered
     by --row-d. Declaring both axes here costs nothing on mobile (only
     width ever changes) and lets the desktop override below animate height
     with no separate transition rule to maintain. */
  transition: width 0.75s var(--ease-out), height 0.75s var(--ease-out);
  transition-delay: var(--row-d, 0.4s);
}
/* Value: raw/CAT_MAX in Spline Mono */
#hpc-assess .assess__portrait-value {
  flex: none;
  width: 52px;
  text-align: right;
  font-family: 'Spline Sans Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-2);
}

/* ══════════════════════════════════════════════════════════════
   THE FIELD OF LIGHT — DESKTOP (≥641px): vertical light columns.
   Exactly the mobile markup and the same --lit/--tick-frac values;
   only the axis they drive changes (height instead of width). Blur/glow
   layers live ONLY in this block — below 641px there is zero filter:blur
   and, sitewide, zero backdrop-filter.
══════════════════════════════════════════════════════════════ */
@media (min-width: 641px) {
  /* Rows is NOT given an explicit height — it's sized by its tallest column
     (field-track + value + name + tier + gloss). Every column still shares
     one identical track height (set on the FIELD itself, below), so beams
     stay comparable; align-items:flex-start keeps every track's TOP —
     hence every track's bottom, since they're all the same height — level,
     regardless of how many lines a given gloss wraps to underneath it. */
  #hpc-assess .assess__portrait-scale { padding-left: 0; margin-bottom: var(--sp-5); }
  #hpc-assess .assess__portrait-scale-note { padding-left: 0; }
  #hpc-assess .assess__portrait-rows {
    display: flex;
    align-items: flex-start;
    gap: clamp(10px, 1.8vw, 30px);
  }
  #hpc-assess .assess__portrait-row {
    flex: 1 1 0;
    max-width: 168px;
    /* 44px touch floor kept on desktop too (touch laptops / landscape
       tablets land in this range); columns are far taller in practice so
       this only guards degenerate content. */
    min-height: 44px;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 0;
    border-bottom: none;
  }
  #hpc-assess .assess__portrait-row:hover { background: none; }
  #hpc-assess .assess__portrait-row:hover .assess__portrait-bloom { filter: brightness(1.16); }
  #hpc-assess .assess__portrait-row--worst {
    border-left: none;
    padding-left: 0;
    margin-left: 0;
  }
  #hpc-assess .assess__portrait-row--worst .assess__portrait-name {
    border-bottom: 2px solid var(--sev-critical);
    padding-bottom: 3px;
  }
  /* THE shared track — one fixed height every beam is measured against. */
  #hpc-assess .assess__portrait-field {
    order: 1;
    flex: none;
    width: clamp(34px, 3.2vw, 52px);
    height: var(--field-h, clamp(200px, 24vw, 320px));
  }
  #hpc-assess .assess__portrait-field::after {
    left: 4px; right: 4px; top: 10px; bottom: auto;
  }
  /* Pool — soft ambient glow where every beam meets the ground. Lives on the
     FIELD (the fixed-height track), not the bloom, so its size is always
     constant regardless of --lit — a fully-lit beam's pool cannot grow. */
  #hpc-assess .assess__portrait-field::before {
    content: '';
    position: absolute;
    left: 50%; bottom: -8px;
    width: 190%; height: 30px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse, color-mix(in srgb, var(--bloom) 50%, transparent), transparent 72%);
    filter: blur(8px);
    mix-blend-mode: screen;
    pointer-events: none;
  }
  #hpc-assess .assess__portrait-tick {
    left: 4px; right: 4px; top: auto; width: auto; height: 1.5px;
    bottom: var(--tick-frac, 0%);
  }
  #hpc-assess .assess__portrait-bloom {
    left: 0; right: 0; top: auto; bottom: 0;
    width: 100%;
    height: var(--lit, 0%);
    background: linear-gradient(to top,
      var(--bloom) 0%,
      var(--bloom-hi) 68%,
      color-mix(in srgb, var(--bloom-hi) 45%, transparent) 100%);
    box-shadow: 0 0 26px -2px var(--bloom);
  }
  /* Halo — ambient glow around the lit tip. Fixed px size (not a % of the
     bloom's own height) anchored to top:0, so it tracks --lit's position
     but a fully-lit beam still bleeds only ~35px above the track — never
     the whole beam height — and can't wash out the legend above the field. */
  #hpc-assess .assess__portrait-bloom::before {
    content: '';
    position: absolute;
    left: 50%; top: 0;
    width: 260%; height: 64px;
    transform: translate(-50%, -46%);
    background: radial-gradient(ellipse 60% 70% at 50% 50%, color-mix(in srgb, var(--bloom) 50%, transparent), transparent 74%);
    filter: blur(12px);
    mix-blend-mode: screen;
    pointer-events: none;
  }
  /* Cap — bright tip highlight where the beam meets the dark. Nocturne:
     hotter white-mixed core (12%->22%) for a jewel-sparkle tip. */
  #hpc-assess .assess__portrait-bloom::after {
    content: '';
    position: absolute;
    left: 50%; top: 0;
    width: 210%; height: 28px;
    transform: translate(-50%, -55%);
    background: radial-gradient(ellipse, color-mix(in srgb, var(--bloom-hi) 78%, white 22%), transparent 74%);
    filter: blur(8px);
    mix-blend-mode: screen;
    pointer-events: none;
  }
  #hpc-assess .assess__portrait-value {
    order: 2;
    width: auto;
    margin-top: 14px;
    font-size: 0.9375rem;
    text-align: center;
  }
  #hpc-assess .assess__portrait-name {
    order: 3;
    width: auto;
    max-width: 100%;
    margin-top: 6px;
    text-align: center;
  }
  #hpc-assess .assess__portrait-tierlabel,
  #hpc-assess .assess__portrait-plain {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ══════════════════════════════════════════════════════════════
   RESULTS — SECTIONS
══════════════════════════════════════════════════════════════ */
/* Settle: section cards land — translateY(10px->0) ~380ms ease-out (IntersectionObserver removes --pending) */
#hpc-assess .assess__section {
  transition: opacity 0.38s var(--ease-out), transform 0.38s var(--ease-out);
}
#hpc-assess .assess__section--pending {
  opacity: 0;
  transform: translateY(10px);
}

/* The Reading — mirror sentence on a lit card (centered, real Fraunces italic, bloom glow) */
#hpc-assess .assess__reading {
  margin: 0 var(--sp-5) var(--sp-6);
  padding: var(--sp-5);
  background: var(--card);
  box-shadow: var(--shadow-lit);
  border-radius: var(--r-card);
  text-align: center;
  max-width: 72ch;
}
#hpc-assess .assess__reading[hidden] { display: none; }
#hpc-assess .assess__reading-kicker {
  display: block;
  font-family: 'Spline Sans Mono', ui-monospace, monospace;
  font-size: 0.8125rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--sp-2);
}
/* Nocturne: real Fraunces italic on the mirror reading — the second of the
   two deliberate italic moments (with the verdict payoff); this is the line
   the whole "finally replaces synthetic oblique" fix was written for. */
#hpc-assess .assess__reading-text {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.5rem, 2.8vw, 1.95rem);
  color: var(--ink-2);
  line-height: 1.45;
}
#hpc-assess .assess__reading-cite {
  display: block;
  margin-top: var(--sp-2);
  font-family: 'Spline Sans Mono', ui-monospace, monospace;
  font-size: 0.8125rem;
  font-style: normal;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

/* Specimen teaser (verdict-level pointer to dossier) */
#hpc-assess .assess__specimen-teaser {
  margin: 0 0 var(--sp-4) var(--sp-5);
  padding: 14px 18px;
  background: var(--card);
  border: none;
  box-shadow: var(--shadow-card);
  border-radius: var(--r-card);
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
#hpc-assess .assess__specimen-teaser[hidden] { display: none; }
#hpc-assess .assess__specimen-teaser-kicker {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  flex-shrink: 0;
}
#hpc-assess .assess__specimen-teaser-text {
  font-size: 0.875rem;
  color: var(--ink-2);
  flex: 1;
  min-width: 0;
}
#hpc-assess .assess__specimen-teaser-btn {
  background: var(--tint);
  border: 1px solid var(--accent-line);
  color: var(--accent);
  font-family: 'Instrument Sans', sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: var(--r-sm);
  cursor: pointer;
  white-space: nowrap;
  min-height: 44px;
  transition: background 0.18s;
}
#hpc-assess .assess__specimen-teaser-btn:hover { background: var(--accent-soft); }

/* Priorities — numbered editorial list */
#hpc-assess .assess__priorities {
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: var(--sp-5);
  margin-top: var(--sp-7);
  margin-bottom: var(--sp-5);
}
#hpc-assess .assess__priorities-heading {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.2vw, 2.2rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: var(--sp-2);
}
#hpc-assess .assess__priorities-subtitle {
  font-size: 0.875rem;
  color: var(--ink-3);
  margin-bottom: var(--sp-4);
  line-height: 1.65;
  max-width: 64ch;
}
#hpc-assess .assess__priority-list { border-top: 1px solid var(--line); }
#hpc-assess .assess__priority-item {
  display: flex;
  gap: 26px;
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--line);
  align-items: flex-start;
  min-height: 44px;
}
#hpc-assess .assess__priority-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--tint);
  border-radius: var(--r-sm);
}
/* Nocturne: Fraunces at light weight — a huge display ordinal at high opsz
   reads like a museum placard number, all thick/thin drama at weight 300. */
#hpc-assess .assess__priority-num {
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 6.5vw, 5rem);
  font-weight: 300;
  line-height: 0.85;
  color: var(--accent);
  flex-shrink: 0;
  width: 80px;
  margin-left: -16px;
  letter-spacing: -0.02em;
}
#hpc-assess .assess__priority-body { flex: 1; min-width: 0; }
#hpc-assess .assess__priority-meta {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: var(--sp-2);
}
#hpc-assess .assess__priority-bias {
  font-family: var(--font-ui);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}
#hpc-assess .assess__priority-badge {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 3px;
  border: 1px solid currentColor;
  flex-shrink: 0;
}
#hpc-assess .assess__priority-action {
  font-size: 0.9375rem;
  color: var(--ink-2);
  line-height: 1.7;
  margin-bottom: var(--sp-2);
  max-width: 68ch;
}
#hpc-assess .assess__priority-more {
  display: none;
  background: var(--tint);
  border: none;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  margin-bottom: var(--sp-2);
  font-family: 'Instrument Sans', sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  cursor: pointer;
  min-height: 44px;
}
#hpc-assess .assess__priority-cat {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
/* Open state: reveals the expand/details button; accent colour comes from parent --accent */
#hpc-assess .assess__priority-item--open .assess__priority-more {
  display: flex;
  align-items: center;
}

/* Dimension log — lit card wells per dimension, worst first */
#hpc-assess .assess__log { margin-bottom: var(--sp-6); }
#hpc-assess .assess__log-kicker {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: var(--sp-3);
}
/* Stacked card wells — no outer border-top; gap separates entries */
#hpc-assess .assess__log-list { display: flex; flex-direction: column; gap: 14px; }
#hpc-assess .assess__log-entry {
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  padding: var(--sp-4);
}
#hpc-assess .assess__log-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}
#hpc-assess .assess__log-rank {
  font-family: 'Spline Sans Mono', ui-monospace, monospace;
  font-size: 0.8125rem;
  color: var(--ink-3);
  flex: none;
  width: 66px;
  align-self: flex-start;
  padding-top: 6px;
}
#hpc-assess .assess__log-name {
  font-family: var(--font-ui);
  font-size: clamp(1.4rem, 2.4vw, 1.6rem);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.2;
  flex: 1;
  min-width: 0;
}
#hpc-assess .assess__log-reading {
  font-family: 'Spline Sans Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 0.875rem;
  font-weight: 500;
}
#hpc-assess .assess__log-tier {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  border-radius: 3px;
  padding: 2px 8px;
}

/* Inline position gauge — one-row echo of the hero trace */
#hpc-assess .assess__log-gauge {
  position: relative;
  height: 14px;
  margin-bottom: var(--sp-3);
}
#hpc-assess .assess__log-gauge::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--line);
}
#hpc-assess .assess__log-gauge::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(var(--line-strong), var(--line-strong)) left center / 2px 100% no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) right center / 1px 60% no-repeat;
}
#hpc-assess .assess__log-gauge-tick {
  position: absolute;
  top: 3px;
  bottom: 3px;
  width: 1px;
  background: var(--line-strong);
}
#hpc-assess .assess__log-gauge-dot {
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 2px var(--canvas);
}

#hpc-assess .assess__log-firstmove { margin-bottom: var(--sp-3); }
/* First-move label: warm ink-2, uppercase/spaced for affordance — accent too low-contrast at 13px on --card */
#hpc-assess .assess__log-firstmove-label {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  display: block;
  margin-bottom: var(--sp-1);
}
#hpc-assess .assess__log-firstmove-text {
  font-size: 0.875rem;
  color: var(--ink-2);
  line-height: 1.7;
  max-width: 70ch;
}

#hpc-assess .assess__log-subs { margin-bottom: var(--sp-3); }
#hpc-assess .assess__log-sub { padding: 16px 0; border-top: 1px solid var(--line-strong); }
#hpc-assess .assess__log-sub-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 4px;
}
#hpc-assess .assess__log-sub-dir {
  font-family: 'Spline Sans Mono', ui-monospace, monospace;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  flex-shrink: 0;
}
#hpc-assess .assess__log-sub-name { font-size: 0.875rem; font-weight: 600; color: var(--ink); }
#hpc-assess .assess__log-sub-score {
  font-family: 'Spline Sans Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  color: var(--ink-3);
  flex-shrink: 0;
}
#hpc-assess .assess__log-sub-text {
  font-size: 0.875rem;
  color: var(--ink-3);
  line-height: 1.7;
  max-width: 75ch;
}

/* Insight: warm accent-line separator, elevated from divider to editorial tier marker */
#hpc-assess .assess__log-insight {
  font-size: 0.875rem;
  color: var(--ink-2);
  line-height: 1.7;
  padding-top: var(--sp-3);
  padding-left: var(--sp-3);
  border-top: 1.5px solid var(--accent-line);
  max-width: 75ch;
  margin-top: var(--sp-2);
}
#hpc-assess .assess__log-insight strong { color: var(--ink) !important; }

/* Cascades + strength — gravity not alarm: cascades use calm neutral border + ink type;
   strength celebrates the settled dimension in bloom warmth (positive identity, not severity). */
#hpc-assess .assess__cascades {
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: var(--sp-5);
  margin-bottom: var(--sp-5);
}
/* Cascades list: equal-width stacked cards, no indent hierarchy */
#hpc-assess .assess__cascade-list { display: flex; flex-direction: column; gap: 14px; }
#hpc-assess .assess__cascade-meta {
  display: block;
  font-family: 'Spline Sans Mono', ui-monospace, monospace;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
}
/* Cascade card: calm neutral — gravity, not alarm; no red wash, no severity border */
#hpc-assess .assess__cascade {
  background: var(--wash);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-md);
  padding: 20px 24px;
}
/* Severity chips: pill shape + severity channel only.
   MUST NOT use --accent / --tint; colour comes from the severity ramp.
   --low / --critical modifiers select the appropriate ramp stop. */
#hpc-assess .assess__flag-label {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: var(--sp-2);
  color: var(--sev-critical);
  border: 1px solid currentColor;
  border-radius: var(--r-pill);
  padding: 3px 10px;
}
#hpc-assess .assess__flag-label--low { color: var(--sev-low); }
#hpc-assess .assess__flag-label--critical { color: var(--sev-critical); }
/* Cascades kicker: ink weight only — never severity-painted */
#hpc-assess .assess__cascades-kicker {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: var(--sp-3);
  display: block;
}
#hpc-assess .assess__cascade-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--sp-2);
}
#hpc-assess .assess__cascade-text { font-size: 0.875rem; color: var(--ink-2); line-height: 1.7; max-width: 75ch; }

/* Critical-density fold (owner queue #6) — on a CRITICAL verdict the pattern
   PROSE folds behind a native disclosure; the fired pattern TITLES stay out
   in the summary line, so nothing detected is ever concealed. Brass ornament
   + focus treatment mirror the dossier disclosure. */
#hpc-assess .assess__cascade-fold {
  background: var(--wash);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-md);
}
#hpc-assess .assess__cascade-fold-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  min-height: 44px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
}
#hpc-assess .assess__cascade-fold-summary::-webkit-details-marker { display: none; }
#hpc-assess .assess__cascade-fold-summary::before {
  content: '+';
  color: var(--brass);
  display: inline-block;
  align-self: center;
  transition: transform 0.2s var(--ease-out);
}
#hpc-assess .assess__cascade-fold[open] > .assess__cascade-fold-summary::before { transform: rotate(45deg); }
#hpc-assess .assess__cascade-fold-summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--tint);
}
#hpc-assess .assess__cascade-fold-titles {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}
/* The hint takes button chrome (review P2): the closed state must READ as
   tappable — the "+" ornament alone was too quiet a cue. */
#hpc-assess .assess__cascade-fold-hint {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  margin-left: auto;
  padding: 6px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  transition: border-color 0.18s, color 0.18s;
}
#hpc-assess .assess__cascade-fold-summary:hover .assess__cascade-fold-hint {
  border-color: var(--accent);
}
#hpc-assess .assess__cascade-fold-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 18px 18px;
}
/* Inside the fold the cards flatten to ruled entries — no box-in-box-in-box */
#hpc-assess .assess__cascade-fold-body .assess__cascade {
  background: none;
  border: none;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding: 14px 0 0;
}

/* SUPPORT PATHWAY (owner queue #2) — authored professional-support panel,
   surfaced directly under the hero on qualifying (default: CRITICAL) verdicts.
   Calm gravity, not alarm: neutral card, one sev-critical spine, display-type
   heading so it outranks everything below it on the page. */
#hpc-assess .assess__support {
  /* Review P2: firmer separation from the routine info-card pattern — a
     whisper of the sev hue in the ground (5% — distinct, not alarmed), a
     4px spine, and a stronger lift. @supports guard matches the engine's
     other color-mix uses; the plain --card fallback stays calm. */
  background: var(--card);
  border: 1.5px solid var(--line-strong);
  border-left: 4px solid var(--sev-critical);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card), 0 10px 34px -18px rgba(0, 0, 0, 0.55);
  padding: 24px 28px;
  margin-bottom: var(--sp-5);
}
@supports (background: color-mix(in srgb, red 5%, white)) {
  #hpc-assess .assess__support {
    background: color-mix(in srgb, var(--sev-critical) 5%, var(--card));
  }
}
#hpc-assess .assess__support-kicker {
  display: block;
  font-family: 'Spline Sans Mono', ui-monospace, monospace;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
}
#hpc-assess .assess__support-heading {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--sp-2);
}
#hpc-assess .assess__support-text {
  font-size: 0.9375rem;
  color: var(--ink-2);
  line-height: 1.7;
  max-width: 70ch;
  margin-bottom: var(--sp-3);
}
#hpc-assess .assess__support-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
#hpc-assess .assess__support-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 20px;
  background: var(--wash);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-family: 'Instrument Sans', sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
#hpc-assess .assess__support-link:hover {
  background: var(--card);
  border-color: var(--accent);
  color: var(--ink);
}
#hpc-assess .assess__support-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--tint);
}
#hpc-assess .assess__support-link-note {
  font-size: 0.8125rem;
  color: var(--ink-3);
  line-height: 1.5;
  margin-bottom: 4px;
}
#hpc-assess .assess__support-note {
  font-size: 0.8125rem;
  font-style: italic;
  color: var(--ink-3);
  line-height: 1.6;
  margin-top: var(--sp-3);
}

/* Strength card: bloom warmth — celebrates the best dimension; no severity green */
#hpc-assess .assess__strength {
  background: linear-gradient(
    140deg,
    color-mix(in srgb, var(--bloom-hi) 35%, transparent) 0%,
    color-mix(in srgb, var(--bloom) 12%, transparent) 100%
  );
  border: 1.5px solid var(--accent-line);
  border-radius: var(--r-md);
  box-shadow: 0 0 28px -8px color-mix(in srgb, var(--bloom) 28%, transparent);
  padding: 22px 26px;
  margin-bottom: var(--sp-6);
  max-width: 86%;
  margin-left: auto;
}
#hpc-assess .assess__strength-name {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: var(--sp-2);
}
#hpc-assess .assess__strength-text { font-size: 0.875rem; color: var(--ink-2); line-height: 1.7; max-width: 75ch; }

/* CTA */
#hpc-assess .assess__cta {
  position: relative;
  background: linear-gradient(180deg, var(--accent-soft), transparent 62%), var(--card);
  border: none;
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: 36px 32px;
  margin-bottom: var(--sp-5);
}
#hpc-assess .assess__cta::after {
  content: "";
  position: absolute;
  inset: 6px;
  pointer-events: none;
  background:
    linear-gradient(var(--accent-line), var(--accent-line)) 0 100% / 12px 2px no-repeat,
    linear-gradient(var(--accent-line), var(--accent-line)) 0 100% / 2px 12px no-repeat,
    linear-gradient(var(--accent-line), var(--accent-line)) 100% 100% / 12px 2px no-repeat,
    linear-gradient(var(--accent-line), var(--accent-line)) 100% 100% / 2px 12px no-repeat;
}
#hpc-assess .assess__cta-heading {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.2vw, 2.2rem);
  font-weight: 400;
  color: var(--ink);
  margin-bottom: var(--sp-2);
  line-height: 1.2;
}
#hpc-assess .assess__cta-text {
  font-size: 0.9375rem;
  color: var(--ink-2);
  line-height: 1.7;
  margin-bottom: var(--sp-4);
  max-width: 56ch;
}
#hpc-assess .assess__btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent);
  color: var(--accent-ink) !important;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 14px 28px;
  border-radius: var(--r-pill);
  text-decoration: none !important;
  transition: filter 0.18s;
  min-height: 48px;
  box-shadow: 0 10px 26px -8px color-mix(in srgb,var(--accent) 55%,transparent);
}
#hpc-assess .assess__btn-cta:hover { filter: brightness(1.14); }
#hpc-assess .assess__btn-cta:active { filter: brightness(0.88); transition: filter 0.07s; }

/* Editorial full-stop before the asks — Nocturne: Fraunces + brass (a small
   ornament, not an identity marker, so it takes the antique-gold detail
   colour rather than the pillar accent). */
#hpc-assess .assess__endmark {
  display: block;
  text-align: center;
  color: var(--brass);
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
  margin: var(--sp-5) auto;
}

/* Measurement spec strip — Daylight warm pill capsules */
#hpc-assess .assess__spec-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: var(--sp-3) 0 var(--sp-4);
}
#hpc-assess .assess__spec-strip-kicker {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-right: 6px;
}
/* v3.1-daylight: capsules as warm pill chips (border-radius pill, card bg) */
#hpc-assess .assess__spec-capsule {
  font-family: 'Spline Sans Mono', ui-monospace, monospace;
  font-size: 0.8125rem;
  color: var(--ink-2);
  background: var(--card);
  border: none;
  border-radius: var(--r-md);
  box-shadow: 0 1px 2px rgba(var(--shadow-rgb),.08),0 6px 18px -8px rgba(var(--shadow-rgb),.18);
  padding: 9px 14px 10px;
  /* Capsules carry the construct name + its authored plain gloss (2026-07
     reading audit: bare "Nash equilibrium reasoning" chips lost lay readers;
     the glosses were already authored + verified, now rendered in place). */
  white-space: normal;
  display: inline-flex;
  flex-direction: column;
  row-gap: 3px;
  text-align: left;
  max-width: 34ch;
}
#hpc-assess .assess__spec-capsule-name { line-height: 1.4; overflow-wrap: break-word; }
#hpc-assess .assess__spec-capsule-plain {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--ink-3);
}

/* Dossier disclosure — wraps the dimension log */
#hpc-assess .assess__dossier {
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--sp-5);
}
#hpc-assess .assess__dossier-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 12px 4px 12px 14px;
  cursor: pointer;
  list-style: none;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink);
}
#hpc-assess .assess__dossier-summary { transition: color 0.15s, background 0.15s; }
#hpc-assess .assess__dossier-summary:hover { color: var(--ink); background: var(--card); }
#hpc-assess .assess__dossier-summary::-webkit-details-marker { display: none; }
/* Nocturne: the disclosure toggle takes the brass "small ornament" treatment */
#hpc-assess .assess__dossier-summary::before {
  content: '+';
  color: var(--brass);
  display: inline-block;
  transition: transform 0.2s var(--ease-out);
}
#hpc-assess .assess__dossier[open] > .assess__dossier-summary::before { transform: rotate(45deg); }
#hpc-assess .assess__dossier-body {
  overflow: hidden;
  border-left: 2px solid var(--accent-line);
  padding-left: 18px;
}
#hpc-assess .assess__dossier-body--opening {
  transition: max-height 0.5s var(--ease-out);
}
#hpc-assess .assess__dossier-summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--tint);
}

/* Actions row */
#hpc-assess .assess__actions { display: flex; flex-wrap: wrap; gap: 10px; }
#hpc-assess .assess__btn-action {
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--ink-2);
  padding: 10px 18px;
  border-radius: var(--r-pill);
  font-family: 'Instrument Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
  min-height: 44px;
}
#hpc-assess .assess__btn-action:hover { background: var(--wash); border-color: var(--line-strong); color: var(--ink); }
#hpc-assess .assess__btn-action--copy-success {
  background: rgba(69, 207, 146, 0.08);
  border-color: rgba(69, 207, 146, 0.25);
  color: var(--sev-low);
}
#hpc-assess .assess__btn-action--confirm {
  border-color: var(--sev-critical);
  color: var(--sev-critical);
}

/* ══════════════════════════════════════════════════════════════
   REVIEW PANEL
══════════════════════════════════════════════════════════════ */
/* Review / citations block — proud spine: warm card, legible, references celebrated */
#hpc-assess .assess__review { display: none; }
#hpc-assess .assess__review--active {
  display: block;
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: var(--sp-5);
  margin-top: var(--sp-5);
}
#hpc-assess .assess__review-heading {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.2vw, 2.2rem);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: var(--sp-4);
}
#hpc-assess .assess__review-list { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--line-strong); }
#hpc-assess .assess__review-item {
  background: none;
  border-bottom: 1px solid var(--line);
  padding: 22px 0;
}
#hpc-assess .assess__review-q-num {
  font-family: 'Spline Sans Mono', ui-monospace, monospace;
  font-size: 0.8125rem;
  color: var(--ink-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--sp-2);
}
#hpc-assess .assess__review-q-text { font-size: 0.9375rem; color: var(--ink); margin-bottom: var(--sp-3); line-height: 1.6; }
#hpc-assess .assess__review-answer { font-size: 0.875rem; color: var(--ink-2); font-weight: 500; margin-bottom: var(--sp-2); }
#hpc-assess .assess__review-answer-mark { color: var(--ink-2); }
#hpc-assess .assess__review-answer-score {
  font-family: 'Spline Sans Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  color: var(--ink-3);
  font-weight: 400;
}
/* Context / citation: warm stripe — accent border, wash bg, legible ink-2 */
#hpc-assess .assess__review-context {
  font-size: 0.875rem;
  color: var(--ink-2);
  line-height: 1.7;
  padding: 12px 16px;
  background: var(--wash);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  margin-top: var(--sp-2);
}
#hpc-assess .assess__btn-back {
  display: inline-block;
  margin-top: var(--sp-4);
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--ink-2);
  padding: 11px 24px;
  border-radius: var(--r-pill);
  font-family: 'Instrument Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
  min-height: 44px;
}
#hpc-assess .assess__btn-back:hover { background: var(--wash); color: var(--ink); }

/* ══════════════════════════════════════════════════════════════
   NOSCRIPT
══════════════════════════════════════════════════════════════ */
#hpc-assess .assess__noscript { padding: 40px 20px; font-size: 0.9375rem; color: var(--ink-2); line-height: 1.7; }
#hpc-assess .assess__noscript a { color: var(--accent) !important; text-decoration: underline !important; }
/* Light theme: 4/10 pillar accents sit 4.17–4.49:1 on the bare light canvas —
   below AA for body-size text. The noscript link is the only shipped
   accent-as-small-text-on-canvas site, so it takes ink there; the underline
   keeps the affordance. Dark default keeps the accent. */
:root[data-theme="light"] #hpc-assess .assess__noscript a,
[data-theme="light"] #hpc-assess .assess__noscript a { color: var(--ink) !important; }

/* ══════════════════════════════════════════════════════════════
   SPECIMEN SCREEN (§3.3)
══════════════════════════════════════════════════════════════ */
#hpc-assess .assess__specimen { padding: 26px 20px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); }
#hpc-assess .assess__specimen-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; }
#hpc-assess .assess__specimen-kicker { font-size: 0.8125rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); }
#hpc-assess .assess__specimen-badge { font-family: 'Spline Sans Mono', ui-monospace, monospace; font-size: 0.8125rem; color: var(--ink-3); white-space: nowrap; }
#hpc-assess .assess__specimen-text { font-family: var(--font-ui); font-size: clamp(1.3rem, 2.4vw, 1.6rem); font-weight: 500; line-height: 1.45; color: var(--ink); margin-bottom: var(--sp-3); }
#hpc-assess .assess__specimen-options { display: flex; flex-direction: column; gap: 8px; margin-bottom: var(--sp-3); }
#hpc-assess .assess__specimen-footnote { font-size: 0.8125rem; color: var(--ink-3); margin-bottom: var(--sp-3); }
#hpc-assess .assess__specimen-skip { background: none; border: none; color: var(--ink-3); font-size: 0.8125rem; text-decoration: underline; cursor: pointer; min-height: 44px; padding: 0 8px; }
#hpc-assess .assess__specimen-reveal { border-left: 2px solid var(--accent); background: var(--canvas); padding: 12px 14px; margin-top: 12px; }
#hpc-assess .assess__specimen-reveal-heading { display: block; font-size: 0.8125rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 6px; }
#hpc-assess .assess__specimen-reveal-text { font-size: 0.875rem; color: var(--ink); line-height: 1.55; }

/* ══════════════════════════════════════════════════════════════
   KEYFRAMES
══════════════════════════════════════════════════════════════ */
/* Swell: bloom pseudo-element breathes in on screen activation (opacity + scale of LIGHT only) */
@keyframes assessSwell {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: .45; transform: scale(1); }
}
@keyframes assessFadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* v3.5: each question "arrives into focus". Nocturne perf pass: the blur(10px)
   ramp was dropped — filter is not GPU-composited and this keyframe fires on
   every question navigation (20×/session); a slight scale settle keeps the
   focusing feel on transform/opacity only. */
@keyframes assessFocusIn {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes assessFadeDown {
  to { opacity: 0; transform: translateY(-5px); }
}
#hpc-assess .assess__question--exit {
  animation: assessFadeDown 0.15s var(--ease-out) forwards;
}
/* Container-relative sweep — no fixed-px overshoot when .assess__calibrate narrows ≤480.
   ACCEPTED PERF EXCEPTION: animates `left` (layout) rather than transform —
   translateX(%) resolves against the element's own width, not the track's,
   so a transform equivalent needs the track width, which CSS can't know
   here. Cost is bounded: runs only during the one ~2.2s analysing
   interstitial per session; reduced-motion kills it. */
@keyframes assessCarriage {
  0%   { left: 0; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  44%  { left: calc(100% - 1px); animation-timing-function: cubic-bezier(0.84, 0, 0.84, 0); }
  56%  { left: calc(100% - 1px); animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  100% { left: 0; }
}

/* ══════════════════════════════════════════════════════════════
   REDUCED MOTION — kill everything, force end states
══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  #hpc-assess *,
  #hpc-assess *::before,
  #hpc-assess *::after {
    animation: none !important;
    transition: none !important;
  }
  /* Portrait of Light: global transition:none!important above kills the bloom Dawn motion;
     renderPortrait() also guards on prefersReducedMotion() so blooms render at lit% width. */
  #hpc-assess .assess__section--pending { opacity: 1 !important; transform: none !important; }
  /* Swell: animation:none above reverts to base opacity:.45; explicit transform:none for clarity */
  #hpc-assess .assess__screen--active::before { transform: none; }
  /* Settle: force sections visible regardless of --pending class (belt-and-suspenders, #hpc-assess scoped) */
  #hpc-assess .assess__section--pending { opacity: 1 !important; transform: none !important; }
  #hpc-assess .assess__verdict-lockup--anim .assess__verdict-kicker,
  #hpc-assess .assess__verdict-lockup--anim .assess__verdict-setup,
  #hpc-assess .assess__verdict-lockup--anim .assess__verdict-payoff,
  #hpc-assess .assess__verdict-lockup--anim .assess__verdict-desc,
  #hpc-assess .assess__verdict-lockup--anim .assess__primary-exposure,
  #hpc-assess .assess__verdict-lockup--anim .assess__verdict-lockup-line,
  #hpc-assess .assess__verdict-lockup--anim .assess__profile-chip { opacity: 1 !important; transform: none !important; }
  #hpc-assess .assess__verdict-lockup--anim .assess__verdict-folio { opacity: 0.035 !important; transform: none !important; }
  #hpc-assess .assess__question--exit { animation: none !important; opacity: 1 !important; }
  #hpc-assess .assess__calibrate-carriage { left: 50% !important; }
  #hpc-assess .assess__status--show { opacity: 1 !important; }
  /* v3.3: no lift on options under reduced motion — colour/border/check stay so
     selection remains unambiguous */
  #hpc-assess .assess__option,
  #hpc-assess .assess__option:hover,
  #hpc-assess .assess__option--selected,
  #hpc-assess .assess__option:focus-visible {
    transform: none !important;
  }
  #hpc-assess .assess__option-key,
  #hpc-assess .assess__option--selected .assess__option-key,
  #hpc-assess .assess__option:hover .assess__option-key { transform: translateY(-50%) !important; }
}

@media (min-width: 761px) {
  #hpc-assess .assess__verdict-payoff { margin-left: -14px; }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — 760px
══════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  #hpc-assess .assess__body { padding: 0 32px; }
  #hpc-assess .assess__hero-field { margin: 0 -32px var(--sp-6); padding: clamp(26px,4vw,40px) 32px clamp(22px,3.4vw,32px); }
  #hpc-assess .assess__log-head { row-gap: 4px; }
  #hpc-assess #assess-results::before { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — 640px
══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  #hpc-assess { margin: 24px auto; border-radius: var(--r-md); padding: 44px 0 52px; }
  #hpc-assess .assess__body { padding: 0 20px; }
  /* Sound toggle (absolute, top:22/height:44 → local bottom 66) needs the masthead
     pushed clear of it now that #hpc-assess's own top padding (44px) is shorter
     than the toggle's footprint; margin-top on the masthead (not more padding
     on #hpc-assess) keeps the corner registration marks' own coordinates intact. */
  #hpc-assess .assess__masthead { margin-top: 30px; }
  #hpc-assess .assess__hero-field { margin: 0 -20px var(--sp-5); padding: 22px 20px 20px; }
  #hpc-assess .assess__cover-title { margin-bottom: var(--sp-5); }
  #hpc-assess .assess__intro-panel { padding: 28px 20px; }
  #hpc-assess .assess__hook { padding: 14px 16px; margin-bottom: var(--sp-4); }
  #hpc-assess .assess__question { padding: 22px 16px; }
  #hpc-assess .assess__question-wrap { min-height: 0; }
  #hpc-assess .assess__option { padding: 12px 40px 12px 42px; font-size: 0.875rem; }
  #hpc-assess .assess__option-key { right: 8px; padding: 1px 5px; }
  #hpc-assess .assess__meter { height: 6px; }
  #hpc-assess .assess__meter-seg { height: 3px; }
  #hpc-assess .assess__verdict-lockup-line { gap: 14px; }
  #hpc-assess .assess__priority-item { gap: 16px; }
  #hpc-assess .assess__priority-num { width: 56px; font-size: clamp(2.8rem, 7vw, 3.6rem); margin-left: 0; }
  #hpc-assess .assess__strength { max-width: 100%; margin-left: 0; }
  #hpc-assess .assess__reading { margin-left: var(--sp-2); margin-right: 0; }
  #hpc-assess .assess__log-insight { padding-left: 0; }
  #hpc-assess .assess__verdict-reading { font-size: clamp(3rem, 15vw, 4.4rem); }
  /* Mobile card order = desktop parity (owner adjudication 2026-07-16,
     reading audit: 3 of 5 personas read the old CTA-first reflow as "the
     ask before the reasons" — description, privacy line and honesty note
     must precede the start control at every breakpoint). */
  #hpc-assess #assess-intro.assess__screen--active { display: flex; flex-direction: column; }
  #hpc-assess #assess-intro .assess__cover-hero { order: 0; }
  #hpc-assess #assess-intro .assess__cover-title { order: 1; }
  /* Board r2: the nowrap scroll row + fade mask read as clipped/broken to
     two independent reviews (kicker stacked one word per line, chips cut
     mid-word at the edge). Chips now wrap like desktop; kicker takes its
     own full line. Nothing hidden, nothing to discover. */
  #hpc-assess #assess-intro .assess__spec-strip {
    order: 2;
    margin: 0 0 var(--sp-3);
  }
  #hpc-assess #assess-intro .assess__spec-strip .assess__spec-strip-kicker { flex: 0 0 100%; }
  #hpc-assess #assess-intro .assess__intro-panel { order: 3; display: flex; flex-direction: column; }
  #hpc-assess #assess-intro .assess__intro-panel .assess__btn-start { margin-top: var(--sp-3); align-self: stretch; justify-content: center; }
  #hpc-assess #assess-intro .assess__hook { order: 4; margin: var(--sp-4) 0 0; }
  #hpc-assess #assess-intro .assess__fineprint { order: 5; }
  /* The plate numeral must own the mobile fold */
  #hpc-assess .assess__verdict-folio { font-size: clamp(12rem, 46vw, 14rem); top: -0.28em; }
  #hpc-assess .assess__verdict-share { display: flex; width: 100%; justify-content: center; border-color: var(--accent-line); padding: 12px 16px; }
  /* Collapsed-first priorities: two-line clamp + Read the move */
  #hpc-assess .assess__priority-action {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  #hpc-assess .assess__priority-item--open .assess__priority-action {
    display: block;
    -webkit-line-clamp: none;
    overflow: visible;
  }
  #hpc-assess .assess__priority-more { display: inline-block; }
  #hpc-assess .assess__specimen-teaser { margin-left: 0; }
  #hpc-assess .assess__log-rank { width: auto; padding-top: 0; }
  #hpc-assess .assess__endmark { margin: var(--sp-4) auto; }
  #hpc-assess .assess__dossier-body { padding-left: 10px; }
  #hpc-assess .assess__log-sub-head { flex-wrap: wrap; }
  #hpc-assess .assess__actions { flex-direction: column; }
  #hpc-assess .assess__btn-action { text-align: center; }
  #hpc-assess .assess__cta { padding: 24px 18px; }
  #hpc-assess .assess__cascade, #hpc-assess .assess__strength { padding: 14px 16px; }
  #hpc-assess .assess__support { padding: 16px 18px; }
  #hpc-assess .assess__support-heading { font-size: 1.3rem; }
  #hpc-assess .assess__support-link { width: 100%; justify-content: center; }
  #hpc-assess .assess__cascade-fold-summary { padding: 12px 14px; }
  #hpc-assess .assess__cascade-fold-hint { margin-left: 0; flex-basis: 100%; }
  #hpc-assess .assess__cascade-fold-body { padding: 4px 14px 14px; }
  #hpc-assess .assess__cascade-fold-body .assess__cascade { padding: 12px 0 0; }
  #hpc-assess .assess__reading { padding-left: var(--sp-3); }
  #hpc-assess .assess__portrait { padding: var(--sp-3) 0; }
  #hpc-assess .assess__btn-cta { width: 100%; justify-content: center; }
  #hpc-assess .assess__flag-label { letter-spacing: 0.1em; }
}

/* ══════════════════════════════════════════════════════════════
   THE FIELD OF LIGHT — NARROW-PHONE OVERRIDE (≤600px). LOAD-BEARING.
   Cross-refs: FoL mobile base rules live at "RESULTS — THE FIELD OF
   LIGHT" (~L1387-1548); the ≥641px column layout that supersedes both
   this block and the base rules lives right under it (~L1556-1675).
   Do not delete this block as "orphaned legacy" — it is what keeps the
   FoL usable between the base mobile layout and 641px.

   Why 601-640px and ≤600px must differ: the base rules give
   .assess__portrait-name a FIXED 210px column (name | field | value in
   one flex row, see ~L1460-1471) and give .assess__portrait-scale a
   matching 210px left pad so the scale-end legend lines up over the
   field. That fixed 210px column still fits at 601-640px. Below 600px
   it does not — a 210px name column plus gaps leaves too little track
   width for the light-bar itself (crushed/invisible bloom at e.g.
   390px). So here we: zero the scale's 210px padding-left (legend no
   longer needs to dodge a name column), let the row wrap (name+value
   share a top line, field wraps to its own full-width line via
   flex-basis:100%), and let the name size to content instead of a
   fixed 210px. Net effect: name+value stacked above a full-bleed
   horizontal light bar. If you touch the 641px breakpoint or the base
   210px column above, re-check this block still makes sense, and
   re-verify the 390px viewport (light bars horizontal, no overflow,
   13px+ text, honest-encoding intact) before shipping. ── */
@media (max-width: 600px) {
  #hpc-assess .assess__portrait-scale { padding-left: 0; }
  #hpc-assess .assess__portrait-scale-note { padding-left: 0; }
  #hpc-assess .assess__portrait-row { flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
  #hpc-assess .assess__portrait-name { width: auto; flex: 1; order: 1; }
  #hpc-assess .assess__portrait-value { order: 2; }
  #hpc-assess .assess__portrait-field { order: 3; flex-basis: 100%; }
}

/* ── Masthead stacks on very narrow screens ── */
@media (max-width: 480px) {
  /* margin-top clears the absolute sound-toggle (top:22 + 44px height = local
     bottom 66) now that #hpc-assess's own top padding has shrunk to 36px;
     see the 640px breakpoint above for the same invariant. */
  #hpc-assess .assess__masthead { flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 38px; }
  #hpc-assess .assess__folio { text-align: left; }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — 480px
══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  #hpc-assess { margin: 12px auto; padding: 36px 0 44px; }
  #hpc-assess .assess__body { padding: 0 14px; }
  #hpc-assess .assess__hero-field { margin: 0 -14px var(--sp-4); padding: 18px 14px 16px; }
  #hpc-assess .assess__verdict-reading { font-size: clamp(2.8rem, 15vw, 4.2rem); }
  #hpc-assess .assess__intro-panel { padding: 22px 14px; }
  #hpc-assess .assess__question { padding: 18px 14px; }
  #hpc-assess .assess__option { padding: 10px 36px 10px 38px; }
  #hpc-assess .assess__option-radio { left: 12px; width: 14px; height: 14px; top: 18px; transform: none; }
  #hpc-assess .assess__masthead-brand { letter-spacing: 0.18em; }
  #hpc-assess .assess__log-head { flex-wrap: wrap; }
  #hpc-assess .assess__log-name { flex-basis: 100%; }
  #hpc-assess .assess__review-item { padding: 16px 0; }
  #hpc-assess .assess__calibrate { width: 200px; }
  #hpc-assess .assess__cover-hero { height: clamp(200px, 44vw, 250px); }
}

/* ── Payoff font-size floor at very small widths ── */
@media (max-width: 360px) {
  #hpc-assess .assess__verdict-payoff { font-size: clamp(2.3rem, 7vw, 2.8rem); }
}

/* ══════════════════════════════════════════════════════════════
   SAFE AREA (notched devices)
══════════════════════════════════════════════════════════════ */
@supports (padding: env(safe-area-inset-left)) {
  @media (max-width: 640px) {
    #hpc-assess .assess__body {
      padding-left: max(20px, env(safe-area-inset-left));
      padding-right: max(20px, env(safe-area-inset-right));
    }
  }
  @media (max-width: 480px) {
    #hpc-assess .assess__body {
      padding-left: max(14px, env(safe-area-inset-left));
      padding-right: max(14px, env(safe-area-inset-right));
    }
  }
}

/* ══════════════════════════════════════════════════════════════
   PRINT
══════════════════════════════════════════════════════════════ */
@media print {
  #hpc-assess {
    background: #fff !important;
    color: #1a1a1a !important;
    box-shadow: none !important;
    border: 1px solid #ddd !important;
    max-width: 100%;
    padding: 24px;
  }
  #hpc-assess .assess__keyline, #hpc-assess .assess__btn-start, #hpc-assess .assess__btn-nav, #hpc-assess .assess__btn-cta,
  #hpc-assess .assess__btn-action, #hpc-assess .assess__btn-back, #hpc-assess .assess__btn-resume,
  #hpc-assess .assess__calibrate, #hpc-assess .assess__progress, .assess__skip,
  #hpc-assess .assess__cover-hero { display: none !important; }
  #hpc-assess .assess__screen--active { display: block !important; }
  #hpc-assess * { color: #1a1a1a !important; border-color: #ddd !important; }
  #hpc-assess .assess__verdict-folio { display: none !important; }
  #hpc-assess::before, #hpc-assess::after,
  #hpc-assess #assess-results::before,
  #hpc-assess .assess__verdict-lockup::before, #hpc-assess .assess__verdict-lockup::after { display: none !important; }
  #hpc-assess .assess__hero-field { background: none !important; margin: 0 !important; padding: 0 !important; }
  #hpc-assess .assess__hero-field::before { display: none !important; }
  #hpc-assess .assess__portrait-field { background: none !important; box-shadow: none !important; }
  #hpc-assess .assess__portrait-bloom::before,
  #hpc-assess .assess__portrait-bloom::after { display: none !important; }
  #hpc-assess .assess__portrait-tick { background: #ccc !important; }
  #hpc-assess .assess__portrait-bloom { box-shadow: none !important; background: #aaa !important; }
  #hpc-assess .assess__section--pending { opacity: 1 !important; transform: none !important; }
  #hpc-assess .assess__log-entry, #hpc-assess .assess__priority-item, #hpc-assess .assess__cascade,
  #hpc-assess .assess__strength, #hpc-assess .assess__review-item, #hpc-assess .assess__support {
    background: #f8f8f8 !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  /* Folded cascade prose prints open (beforeprint opens it; belt-and-braces) */
  #hpc-assess .assess__cascade-fold { background: none !important; }
  #hpc-assess .assess__cascade-fold-body .assess__cascade { background: #f8f8f8 !important; }
}

/* ═══════════════════════════════════════════════════════════════
   FUNNEL (v3.3 "The Standing File")
   Second Reading delta · email capture · verdict share card
   affordance · Next Case File strip · return nudge.
   Movement is not severity: delta text stays in the t-scale.
   ═══════════════════════════════════════════════════════════════ */

/* Verdict share affordance — quiet extract action at the identity moment */
#hpc-assess .assess__verdict-share {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  background: transparent;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-sm);
  padding: 8px 14px;
  margin-bottom: var(--sp-2);
  font-family: 'Spline Sans Mono', ui-monospace, monospace;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  color: var(--ink-2);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--accent-line);
  text-underline-offset: 4px;
  transition: color 0.18s, text-decoration-color 0.18s;
}
#hpc-assess .assess__verdict-share:hover {
  color: var(--ink);
  text-decoration-color: var(--accent);
}
#hpc-assess .assess__verdict-share[hidden] { display: none; }

/* Second Reading — comparison against the last recorded profile */
#hpc-assess .assess__delta {
  background: var(--card);
  border: none;
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: 18px 22px;
  margin-bottom: var(--sp-4);
}
#hpc-assess .assess__delta-traces { margin: 12px 0 10px; }
#hpc-assess .assess__delta-trace-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px 0;
}
#hpc-assess .assess__delta-trace-name {
  flex: none;
  width: 190px;
  font-size: 0.8125rem;
  color: var(--ink-3);
  line-height: 1.3;
}
#hpc-assess .assess__delta-trace-track {
  position: relative;
  flex: 1;
  height: 12px;
  background: linear-gradient(var(--line), var(--line)) left center / 100% 1px no-repeat;
}
#hpc-assess .assess__delta-trace-link {
  position: absolute;
  top: 50%;
  height: 1px;
  transform: translateY(-50%);
  opacity: 0.45;
}
#hpc-assess .assess__delta-trace-prev {
  position: absolute;
  top: 50%;
  width: 5px;
  height: 5px;
  transform: translate(-50%, -50%);
  border: 1px solid;
  background: var(--card);
}
#hpc-assess .assess__delta-trace-cur {
  position: absolute;
  top: 50%;
  width: 6px;
  height: 6px;
  transform: translate(-50%, -50%);
}
#hpc-assess .assess__delta-kicker {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: var(--sp-2);
}
#hpc-assess .assess__delta-main {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 0.9375rem;
  color: var(--ink);
  line-height: 1.6;
  margin-bottom: 6px;
}
#hpc-assess .assess__delta-dims {
  font-family: 'Spline Sans Mono', ui-monospace, monospace;
  font-size: 0.8125rem;
  color: var(--ink-2);
  line-height: 1.65;
}

/* Email capture — the standing-file offer */
#hpc-assess .assess__capture {
  background: linear-gradient(180deg, var(--accent-soft), transparent 70%), var(--card);
  border: none;
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: 36px 32px;
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-6);
}
#hpc-assess .assess__capture-kicker {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: var(--sp-2);
}
#hpc-assess .assess__capture-heading {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--sp-2);
  line-height: 1.3;
}
#hpc-assess .assess__capture-text {
  font-size: 0.9375rem;
  color: var(--ink-2);
  line-height: 1.7;
  max-width: 62ch;
  margin-bottom: var(--sp-3);
}
#hpc-assess .assess__capture-form { margin-bottom: var(--sp-2); }
#hpc-assess .assess__capture-label {
  display: block;
  font-family: 'Spline Sans Mono', ui-monospace, monospace;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
}
#hpc-assess .assess__capture-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
#hpc-assess .assess__capture-input {
  flex: 1 1 260px;
  min-height: 48px;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  padding: 10px 16px;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 0.9375rem;
  color: var(--ink);
  transition: border-color 0.18s, box-shadow 0.18s;
}
#hpc-assess .assess__capture-input::placeholder { color: var(--ink-3); }
#hpc-assess .assess__capture-input:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--tint);
}
#hpc-assess .assess__capture-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--accent);
  color: var(--accent-ink);
  border: none;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 13px 28px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: filter 0.18s;
  min-height: 48px;
  box-shadow: 0 10px 26px -8px color-mix(in srgb,var(--accent) 55%,transparent);
}
#hpc-assess .assess__capture-btn:hover { filter: brightness(1.08); }
#hpc-assess .assess__capture-consent {
  font-size: 0.8125rem;
  color: var(--ink-3);
  line-height: 1.65;
  max-width: 70ch;
}
#hpc-assess .assess__capture-success {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 0.9375rem;
  color: var(--ink);
  line-height: 1.6;
  border-left: 2px solid var(--accent-line);
  padding-left: 14px;
}

/* Next Case File — card cross-sell strip */
#hpc-assess .assess__next-case {
  border-top: 1px solid var(--line-strong);
  padding-top: var(--sp-4);
  margin-bottom: var(--sp-4);
}
#hpc-assess .assess__next-case-tease {
  font-size: 0.875rem;
  color: var(--ink-3);
  line-height: 1.6;
  margin-top: 4px;
  max-width: 60ch;
}
#hpc-assess .assess__next-case-kicker {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: var(--sp-3);
}
#hpc-assess .assess__next-case-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Next-case card: each case is a raised card for discoverability */
#hpc-assess .assess__next-case-item {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 52px;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  padding: var(--sp-3) var(--sp-4);
  flex-wrap: wrap;
}
#hpc-assess .assess__next-case-link {
  font-family: var(--font-ui);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--accent-line);
  text-underline-offset: 4px;
  transition: color 0.18s, text-decoration-color 0.18s;
}
#hpc-assess .assess__next-case-link:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}
#hpc-assess .assess__next-case-meta {
  font-family: 'Spline Sans Mono', ui-monospace, monospace;
  font-size: 0.8125rem;
  color: var(--ink-3);
}

/* Return nudge — second-reading invitation under the actions row */
#hpc-assess .assess__return-note {
  font-size: 0.8125rem;
  color: var(--ink-3);
  line-height: 1.65;
  max-width: 70ch;
  margin-top: var(--sp-3);
}

@media (max-width: 640px) {
  #hpc-assess .assess__capture { padding: 24px 18px; }
  #hpc-assess .assess__capture-row { flex-direction: column; }
  /* column direction: the 260px flex-basis would become HEIGHT — reset it */
  #hpc-assess .assess__capture-input { flex: 0 0 auto; width: 100%; }
  #hpc-assess .assess__capture-btn { width: 100%; }
  #hpc-assess .assess__delta { padding: 16px 16px; }
}