/* ==========================================================================
   Security assessment (/assessment/) — the standalone review app, scoped to
   main.assess so it never touches the site header or footer, with its colour
   and type variables mapped onto the Vamocles tokens at the end of this file.
   Source: Audits/web/styles.css + refresh.css (scoped by a build script).
   ========================================================================== */
/* Hallmark · v2.0.0 · checked: 2026-10-29 · genre: modern-minimal · shape: app screen · theme: Vamocles brand (by request) · posture: restrained · hero: compact banner · nav: wordmark and review actions · footer: private-assessment note · signature: rated implementation beside verified progress · surface: absolute */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: H, two scores could compete; verified progress leads and reported implementation has a quieter secondary treatment. */
/* Hallmark · answered F3 · questionnaire and report headings wrap naturally with zero-minimum grid tracks and a capped reading width. */
/* Hallmark · dismissed 3 · the crimson rule is the supplied PDF review's identity and marks evidence or priority notes, not a repeated decorative feature-card treatment. */
/* Hallmark · answered F4 · comprehensive navigation uses a quiet ruled index; personal progress appears once, above the question flow. */

.assess {
  --color-crimson: #C8102E;
  --color-crimson-hover: #A60C25;
  --color-crimson-active: #82091D;
  --color-night: #050506;
  --color-night-plane: #1B1B20;
  --color-paper: #FFFFFF;
  --color-wash: #F5F5F7;
  --color-shape: #EBEBEF;
  --color-soft: #FBECEF;
  --color-ink: #0A0A0C;
  --color-body: #3B3B42;
  --color-muted: #62626C;
  --color-inverse: #C3C3CA;
  --color-line: #D5D5DB;
  --color-field-line: #777780;
  --color-focus: var(--color-ink);
  --color-transparent: transparent;
  --color-backdrop: rgb(5 5 6 / .66);
  --color-ring: rgb(255 255 255 / .13);
  --color-soft-line: rgb(200 16 46 / .22);
  --color-shadow: rgb(5 5 6 / .1);
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-body);
  --space-0: 0;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --radius-control: .5rem;
  --radius-panel: .75rem;
  --width-shell: 75rem;
  --width-reading: 45rem;
  --text-small: .875rem;
  --text-label: .8125rem;
  --text-body: 1rem;
  --text-lead: 1.125rem;
  --text-h1: clamp(2.4rem, 3.7vw, 4rem);
  --text-h2: clamp(1.6rem, 2.5vw, 2.25rem);
  --text-hero: clamp(3rem, 5vw, 5rem);
  --shadow-panel: 0 8px 32px var(--color-shadow);
}

.assess * { box-sizing: border-box; }
.assess { overflow-x: clip; scroll-padding-top: var(--space-8); }
.assess {
  margin: var(--space-0);
  overflow-x: clip;
  background: var(--color-wash);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}
.assess button:where(:not(.btn)), .assess input, .assess select, .assess textarea { font: inherit; }
.assess button { cursor: pointer; }
.assess img, .assess svg { display: block; max-width: 100%; }
.assess a { color: var(--color-crimson); text-underline-offset: .2em; transition: color var(--t-fast, 180ms) var(--ease-soft), text-decoration-thickness var(--t-fast, 180ms) var(--ease-soft); }
.assess button, .assess a, .assess input, .assess textarea, .assess select, .assess summary { -webkit-tap-highlight-color: var(--color-transparent); }
.assess :is(a, .assess button, .assess input, .assess textarea, .assess select, .assess summary, .assess [tabindex]):focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}
.assess input:focus-visible, .assess select:focus-visible, .assess textarea:focus-visible { outline-offset: -3px; }
.assess button:disabled, .assess input:disabled, .assess select:disabled, .assess textarea:disabled {
  opacity: .55;
  cursor: not-allowed;
}
.assess [aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.assess [hidden] { display: none !important; }
.assess h1, .assess h2, .assess h3, .assess h4 {
  margin: var(--space-0);
  min-width: 0;
  overflow-wrap: break-word;
  color: inherit;
  font-family: var(--font-display);
  font-weight: 650;
  line-height: 1.13;
  letter-spacing: -.025em;
}
.assess h1 { font-size: var(--text-h1); }
.assess h2 { font-size: var(--text-h2); }
.assess h3 { font-size: 1.15rem; }
.assess p { margin: var(--space-0) var(--space-0) var(--space-4); }
.assess p:last-child { margin-bottom: var(--space-0); }
.assess strong { font-weight: 650; }
.assess ul, .assess ol { padding-left: var(--space-6); }
.assess fieldset { margin: var(--space-0); padding: var(--space-0); border: 0; min-width: 0; }
.assess legend { padding: var(--space-0); font-weight: 600; }
.assess .shell { width: min(100% - var(--gutter) * 2, var(--width-shell)); margin-inline: auto; }
.assess .visually-hidden, .assess .live-region {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: var(--space-0);
  margin: -1px;
  overflow: clip;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.assess .print-only { display: none; }
/* Until app.js has run, everything it drives stays hidden (it removes body.no-js), except the
   hero's Start button: shown from the first paint whenever scripts run (theme-boot.js sets
   html.js), so app.js arriving after that paint no longer pushes "Download the guides" along. */
.no-js .assess .js-only:not(.as-hero *) { display: none; }
.assess .no-js-note { padding: var(--space-6); margin-block: var(--space-6); background: var(--color-soft); }
.assess .skip-link {
  position: absolute;
  z-index: 10;
  left: var(--gutter);
  top: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--color-paper);
  transform: translateY(-200%);
}
.assess .skip-link:focus-visible { transform: translateY(0); }
.assess .site-header { background: var(--color-paper); border-bottom: 1px solid var(--color-line); }
.assess .site-header > .shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  min-height: 80px;
  padding-block: var(--space-4);
}
.assess .brand { display: inline-flex; flex: 0 0 auto; min-height: 44px; align-items: center; }
.assess .brand img { width: 180px; height: auto; }
.assess .header-label { color: var(--color-muted); font-size: var(--text-small); font-weight: 500; }
.assess .button, .assess .button-quiet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: var(--space-3) var(--space-6);
  border: 1px solid var(--color-crimson);
  border-radius: var(--radius-control);
  background: var(--color-crimson);
  color: var(--color-paper);
  font-size: var(--text-body);
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.assess .button-secondary { color: var(--color-ink); border-color: var(--color-field-line); background: var(--color-paper); }
.assess .button-quiet { color: var(--color-body); background: var(--color-transparent); border-color: var(--color-transparent); padding-inline: var(--space-4); }
.assess .button:active { background: var(--color-crimson-active); border-color: var(--color-crimson-active); color: var(--color-paper); }
.assess .button-secondary:active, .assess .button-quiet:active { background: var(--color-shape); border-color: var(--color-field-line); color: var(--color-ink); }
.assess .site-footer { border-top: 1px solid var(--color-line); margin-top: var(--space-16); color: var(--color-muted); }
.assess .site-footer .shell { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-6); padding-block: var(--space-6); font-size: var(--text-small); }
.assess .site-footer p { margin: var(--space-0); }

/* The opening uses the same cut plane and white mark as the audit PDFs. */
.assess .intro-hero {
  position: relative;
  isolation: isolate;
  display: block;
  min-height: 360px;
  padding: var(--space-12) var(--space-0);
  margin-top: var(--space-8);
  background: var(--color-night);
  color: var(--color-paper);
  overflow: clip;
}
.assess .intro-hero > .shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .42fr); align-items: center; gap: var(--space-8); }
.assess .intro-hero::before, .assess .intro-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.assess .intro-hero::before { background: var(--color-night-plane); clip-path: polygon(71% 0, 84% 0, 100% 100%, 86% 100%); }
.assess .intro-hero::after { background: var(--color-crimson); clip-path: polygon(95% 0, 100% 0, 100% 100%, 98% 100%, 86% 26%); }
.assess .hero-copy { min-width: 0; max-width: 45rem; }
.assess .hero-copy h1 { font-size: var(--text-hero); line-height: 1.02; max-width: 12ch; margin-bottom: var(--space-5); }
.assess .hero-copy > p { max-width: 42ch; color: var(--color-inverse); font-size: var(--text-lead); }
.assess .hero-copy .button-secondary { color: var(--color-paper); background: var(--color-transparent); border-color: var(--color-inverse); }
.assess .hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.assess .hero-mark { position: relative; justify-self: center; width: min(100%, 185px); height: auto; }
.assess .hero-mark img, .assess img.hero-mark { filter: brightness(0) invert(1); }
.assess .hero-facts { display: flex; flex-wrap: wrap; gap: var(--space-6); margin-top: var(--space-8); color: var(--color-inverse); font-size: var(--text-small); }
.assess .hero-facts strong { display: inline-block; margin-right: var(--space-1); color: var(--color-paper); }
.assess .setup-layout { display: grid; grid-template-columns: minmax(0, .64fr) minmax(0, 1fr); gap: var(--space-16); padding-block: var(--space-12); }
.assess .setup-copy h2 { margin-bottom: var(--space-4); }
.assess .setup-copy > p { max-width: 48ch; color: var(--color-body); }
.assess .setup-copy ol { margin-block: var(--space-6); }
.assess .setup-copy li { margin-bottom: var(--space-3); }
.assess .printable-reviews { margin-top: var(--space-8); }
.assess .printable-reviews h3 { font-size: var(--text-body); margin-bottom: var(--space-3); }
.assess .download-list { list-style: none; padding: var(--space-0); margin: var(--space-0); border-top: 1px solid var(--color-line); }
.assess .setup-copy .download-list li { margin: var(--space-0); border-bottom: 1px solid var(--color-line); }
.assess .download-list a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 52px; padding-block: var(--space-3); color: var(--color-ink); text-decoration: none; font-size: var(--text-small); font-weight: 600; }
.assess .download-list a > span:last-child { flex-shrink: 0; color: var(--color-muted); font-size: var(--text-label); font-weight: 400; }
@media (hover: hover) { .assess .download-list a:hover { color: var(--color-crimson); } }
.assess .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-6); }
.assess .span-full { grid-column: 1 / -1; }
.assess .field { min-width: 0; }
.assess .field label, .assess .field > span:first-child { display: block; font-size: var(--text-small); font-weight: 600; margin-bottom: var(--space-2); }
.assess .field :is(input:not([type="checkbox"]):not([type="radio"]), .assess textarea, .assess select), .assess .question-jump select {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  border: 1px solid var(--color-field-line);
  border-radius: var(--radius-control);
  padding: var(--space-3) var(--space-4);
  background: var(--color-paper);
  color: var(--color-ink);
  outline: 2px solid var(--color-transparent);
  outline-offset: -3px;
}
.assess .field textarea { min-height: 112px; resize: vertical; }
.assess .field input::placeholder, .assess .field textarea::placeholder { color: var(--color-muted); opacity: 1; }
.assess .field-help { margin-top: var(--space-2); font-size: var(--text-small); color: var(--color-muted); }
.assess .field-error { margin-top: var(--space-2); font-size: var(--text-small); color: var(--color-crimson); font-weight: 600; }
.assess .field :is(input, .assess textarea, .assess select)[aria-invalid="true"] { border-color: var(--color-crimson); }
.assess .field :is(input:not([type="checkbox"]):not([type="radio"]), .assess textarea, .assess select):focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-color: var(--color-crimson);
}
.assess .privacy-note { margin-top: var(--space-6); border-left: 3px solid var(--color-crimson); padding-left: var(--space-4); font-size: var(--text-small); color: var(--color-body); }
.assess .remember-choice { display: flex; align-items: flex-start; gap: var(--space-3); min-height: 44px; margin-block: var(--space-5); font-size: var(--text-small); cursor: pointer; }
.assess input[type="checkbox"], .assess input[type="radio"] { width: 20px; height: 20px; flex: 0 0 auto; margin: var(--space-0); accent-color: var(--color-crimson); }
.assess .remember-choice input { margin-top: var(--space-1); }
.assess .intro-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-6); }
.assess .session-banner, .assess .error-banner { margin-top: var(--space-6); padding: var(--space-5) var(--space-6); border-left: 3px solid var(--color-crimson); background: var(--color-soft); }
.assess .session-banner { display: block; margin-bottom: var(--space-6); }
.assess .session-banner h3 { margin-bottom: var(--space-3); }
.assess .session-banner p { margin: var(--space-0); }
.assess .session-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; flex: 0 0 auto; }
.assess .error-banner { color: var(--color-crimson); }

/* One question, a native rating scale, and an always-visible live result. */
.assess .assessment-top { padding-block: var(--space-10) var(--space-6); }
.assess .review-meta { display: grid; gap: var(--space-3); color: var(--color-muted); font-size: var(--text-small); margin-bottom: var(--space-3); }
.assess .review-meta h1 { color: var(--color-ink); }
.assess .assessment-top h1 { font-size: clamp(2rem, 3vw, 3rem); }
.assess .completion-line { display: grid; gap: var(--space-2); font-size: var(--text-small); color: var(--color-body); margin-top: var(--space-5); }
.assess .completion-line progress { margin-top: var(--space-0); }
.assess progress { display: block; width: 100%; height: 5px; border: 0; border-radius: 0; background: var(--color-shape); color: var(--color-crimson); accent-color: var(--color-crimson); margin-top: var(--space-3); overflow: clip; }
.assess progress::-webkit-progress-bar { background: var(--color-shape); }
.assess progress::-webkit-progress-value { background: var(--color-crimson); }
.assess progress::-moz-progress-bar { background: var(--color-crimson); }
.assess .review-layout { display: grid; grid-template-columns: minmax(0, 16.75rem) minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.assess .review-rail { min-width: 0; }
.assess .live-score { position: relative; overflow: clip; padding: var(--space-6); background: var(--color-night); color: var(--color-paper); }
.assess .live-score::after { content: ""; width: 70px; height: 100%; position: absolute; right: 0; top: 0; background: var(--color-crimson); clip-path: polygon(78% 0, 100% 0, 100% 100%); pointer-events: none; }
.assess .live-score h2, .assess .live-score > p:first-child { font-size: var(--text-body); line-height: 1.4; font-weight: 600; letter-spacing: 0; margin-bottom: var(--space-3); }
.assess .score-large { display: block; font-size: 3.6rem; line-height: 1.05; font-weight: 650; letter-spacing: -.04em; font-variant-numeric: tabular-nums; margin-bottom: var(--space-4); }
.assess .score-large small, .assess #live-score-unit { font-size: 1.4rem; font-weight: 400; letter-spacing: 0; color: var(--color-inverse); }
.assess .score-secondary { display: block; font-size: var(--text-small); color: var(--color-inverse); margin-top: var(--space-4); }
.assess .score-secondary strong { color: var(--color-paper); }
.assess .score-secondary output { white-space: nowrap; }
.assess .score-note { font-size: var(--text-label); color: var(--color-inverse); margin-top: var(--space-3); }
.assess .critical-note { border-left: 2px solid var(--color-crimson); padding-left: var(--space-3); margin-top: var(--space-5); color: var(--color-body); font-size: var(--text-small); }
.assess .live-score .critical-note { color: var(--color-inverse); border-color: var(--color-inverse); }
.assess .section-nav { display: grid; margin-top: var(--space-8); }
.assess .section-nav h2 { font-size: var(--text-small); font-weight: 600; letter-spacing: 0; margin-bottom: var(--space-3); }
.assess .section-button { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr) auto; width: 100%; min-height: 52px; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-2); border: 0; border-bottom: 1px solid var(--color-line); border-left: 2px solid var(--color-transparent); background: var(--color-transparent); text-align: left; color: var(--color-body); font-size: var(--text-small); }
.assess .section-number, .assess .section-count { font-size: var(--text-label); color: var(--color-muted); font-variant-numeric: tabular-nums; }
.assess .section-count { white-space: nowrap; }
.assess .section-button.current, .assess .section-button[aria-current="step"] { border-left-color: var(--color-crimson); color: var(--color-ink); background: var(--color-paper); font-weight: 600; }
.assess .section-button.completed { color: var(--color-ink); }
.assess .utility-links { margin-top: var(--space-5); display: grid; gap: var(--space-2); }
.assess .utility-links :is(.button, .assess .button-quiet) { font-size: var(--text-small); padding-inline: var(--space-3); }
.assess .review-options { position: relative; min-width: 0; font-size: var(--text-small); }
.assess .review-options summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 44px; padding: var(--space-3); border-radius: var(--radius-control); color: var(--color-body); font-weight: 500; list-style: none; }
.assess .review-options summary::-webkit-details-marker { display: none; }
.assess .review-options summary::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); flex-shrink: 0; }
.assess .review-options[open] > summary::after { transform: rotate(225deg); }
.assess .review-options-panel { padding: var(--space-2); background: var(--color-paper); border: 1px solid var(--color-line); border-radius: var(--radius-control); }
.assess .review-options-panel button { display: block; width: 100%; min-height: 44px; padding: var(--space-3); border: 0; border-radius: var(--radius-control); background: var(--color-transparent); color: var(--color-body); text-align: left; font-size: var(--text-small); }
.assess .review-options-panel .review-clear { color: var(--color-crimson); }
.assess .report-title-actions > .review-options { flex: 0 0 auto; }
.assess .report-title-actions .review-options-panel { position: absolute; inset-inline-end: 0; top: calc(100% + var(--space-2)); z-index: 3; width: 220px; box-shadow: var(--shadow-panel); }
@media (hover: hover) {
  .assess .review-options summary:hover, .assess .review-options-panel button:hover { background: var(--color-wash); }
}
.assess .question-workspace { min-width: 0; padding: var(--space-8); background: var(--color-paper); border-top: 3px solid var(--color-crimson); }
.assess .question-heading { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; font-size: var(--text-small); margin-bottom: var(--space-5); }
.assess .question-heading p { margin: var(--space-0); }
.assess .question-number { color: var(--color-crimson); font-weight: 650; font-size: 1.1rem; }
.assess .priority-badge { display: inline-flex; padding: var(--space-1) var(--space-2); background: var(--color-wash); color: var(--color-body); font-size: var(--text-label); }
.assess .priority-badge.critical { background: var(--color-crimson); color: var(--color-paper); }
.assess .priority-badge.high { background: var(--color-soft); color: var(--color-crimson); }
.assess .weight-label { margin-left: auto; color: var(--color-muted); font-size: var(--text-small); }
.assess #question-content h2 { max-width: 28ch; margin-bottom: var(--space-5); text-wrap: balance; }
.assess .question-standard { font-size: var(--text-lead); line-height: 1.6; color: var(--color-body); max-width: 62ch; }
.assess .question-standard strong { display: block; color: var(--color-ink); font-size: var(--text-small); margin-bottom: var(--space-2); }
.assess .verification-tip { border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); margin-block: var(--space-5) var(--space-8); }
.assess summary { cursor: pointer; min-height: 44px; padding-block: var(--space-3); font-size: var(--text-small); font-weight: 600; transition: color var(--t-fast, 180ms) var(--ease-soft); }
.assess .verification-tip p { padding-bottom: var(--space-4); font-size: var(--text-small); color: var(--color-body); }
.assess .rating-fieldset legend { margin-bottom: var(--space-3); }
.assess .rating-fieldset[aria-invalid="true"] .rating-options { outline: 2px solid var(--color-crimson); outline-offset: 4px; }
.assess .rating-options { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2); }
.assess .rating-option { position: relative; display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; min-height: 132px; padding: var(--space-3); border: 1px solid var(--color-field-line); border-radius: var(--radius-control); background: var(--color-paper); cursor: pointer; }
.assess .rating-option input { width: 18px; height: 18px; }
.assess .rating-number { display: block; font-size: 1.75rem; line-height: 1; font-weight: 650; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.assess .rating-word { display: block; font-size: var(--text-label); line-height: 1.3; color: var(--color-body); overflow-wrap: break-word; }
.assess .rating-option:has(input:checked) { border-color: var(--color-crimson); background: var(--color-soft); outline: 1px solid var(--color-crimson); outline-offset: -2px; }
.assess .rating-option:has(input:checked) .rating-number { color: var(--color-crimson); }
.assess .rating-option:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 3px; }
/* The tile carries the keyboard ring, so the radio inside it does not draw a second one (outranks line 80) */
.assess .rating-option input[type="radio"]:focus-visible { outline: none; }
.assess .rating-option:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.assess .alternative-options { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); margin-top: var(--space-4); }
.assess .alternative-options label { display: inline-flex; align-items: center; min-height: 44px; gap: var(--space-2); cursor: pointer; font-size: var(--text-small); }
.assess .verification-control { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4) var(--space-0); margin-top: var(--space-3); border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); cursor: pointer; }
.assess .verification-control input { margin-top: var(--space-1); }
.assess .verification-control strong { display: block; }
.assess .verification-control small { display: block; font-size: var(--text-small); line-height: 1.5; color: var(--color-muted); margin-top: var(--space-1); }
.assess .verification-control:has(input:disabled) { color: var(--color-muted); cursor: not-allowed; }
.assess .na-reason { margin-top: var(--space-4); }
.assess .question-notes { margin-top: var(--space-3); }
.assess .question-notes textarea { width: 100%; }
.assess .question-feedback { border-left: 3px solid var(--color-crimson); padding: var(--space-4) var(--space-5); margin-top: var(--space-6); background: var(--color-wash); }
.assess .question-feedback h3 { font-size: var(--text-body); margin-bottom: var(--space-2); }
.assess .question-feedback p { font-size: var(--text-small); color: var(--color-body); }
.assess .question-feedback .feedback-action { margin-top: var(--space-3); color: var(--color-ink); }
.assess .question-feedback strong { font-weight: 650; }
.assess .question-actions { display: flex; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-8); }
.assess .question-jump { margin-top: var(--space-6); }
.assess .question-workspace > .question-jump { margin-top: var(--space-0); margin-bottom: var(--space-8); }
.assess .question-jump label { display: block; font-size: var(--text-small); font-weight: 600; margin-bottom: var(--space-2); }
.assess .question-jump select { font-size: var(--text-small); }
.assess .question-select-control { position: relative; min-width: 0; }
.assess #question-select {
  appearance: none;
  -webkit-appearance: none;
  min-height: 56px;
  padding: var(--space-4);
  padding-inline-end: var(--space-12);
  font-size: var(--text-body);
  font-weight: 500;
  line-height: 1.4;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: border-color var(--t-fast, 180ms) var(--ease-soft), box-shadow var(--t-fast, 180ms) var(--ease-soft);
}
.assess .question-select-chevron {
  position: absolute;
  inset-inline-end: var(--space-4);
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  color: var(--ink-3);
  pointer-events: none;
}
.assess #question-select:focus-visible {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink), 0 0 0 4px rgb(var(--ink-rgb) / 0.12);
}
.assess .question-jump .field-help { font-size: var(--text-label); }
@media (hover: hover) {
  .assess #question-select:hover { border-color: var(--ink-3); }
}
@media (forced-colors: active) {
  .assess #question-select { appearance: auto; -webkit-appearance: auto; }
  .assess .question-select-chevron { display: none; }
}

/* Reports remain a readable document on screen and a complete record on paper. */
.assess .report-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding-block: var(--space-8); }
.assess .report-title-actions { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.assess .report-toolbar p { color: var(--color-muted); font-size: var(--text-small); }
.assess .report-document { overflow-wrap: anywhere; padding: var(--space-10); background: var(--color-paper); color: var(--color-ink); }
.assess .report-masthead { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--space-4) var(--space-8); padding-bottom: var(--space-6); border-bottom: 3px solid var(--color-crimson); }
.assess .report-masthead img { width: 160px; height: auto; }
.assess .report-masthead h1 { grid-column: 1 / -1; max-width: 24ch; font-size: clamp(2rem, 3vw, 3rem); margin-top: var(--space-3); }
.assess .report-masthead > p { margin-top: var(--space-2); color: var(--color-muted); font-size: var(--text-small); }
.assess .report-masthead .report-meta { grid-column: 1 / -1; margin-block: var(--space-3) var(--space-0); }
.assess .report-status { display: inline-flex; margin-block: var(--space-4); padding: var(--space-2) var(--space-3); border-left: 3px solid var(--color-crimson); background: var(--color-soft); color: var(--color-crimson); font-size: var(--text-small); font-weight: 600; }
.assess .report-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-8); margin-block: var(--space-6); }
.assess .report-meta > div { min-width: 0; overflow-wrap: anywhere; }
.assess .report-meta dt { font-size: var(--text-label); color: var(--color-muted); }
.assess .report-meta dd { margin: var(--space-1) var(--space-0) var(--space-0); font-weight: 600; }
.assess .report-summary { background: var(--color-night); color: var(--color-paper); padding: var(--space-8); margin-block: var(--space-8); }
.assess .report-summary .report-status { display: block; margin: var(--space-0); padding: var(--space-0); border: 0; background: var(--color-transparent); color: var(--color-paper); }
.assess .report-summary .report-status h2 { font-size: 1.4rem; margin-bottom: var(--space-3); }
.assess .report-summary .report-status p { max-width: 75ch; font-weight: 400; color: var(--color-inverse); }
.assess .report-scores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); margin-block: var(--space-6); }
.assess .report-score { min-width: 0; }
.assess .report-score h3 { font-size: var(--text-body); letter-spacing: 0; line-height: 1.4; }
.assess .report-score h2, .assess .report-score-secondary h2 { font-size: var(--text-body); letter-spacing: 0; margin-bottom: var(--space-3); }
.assess .report-score > strong, .assess .report-score > output, .assess .report-score .report-score-value { display: block; font-size: 4rem; line-height: 1; font-weight: 650; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.assess .report-score small { font-size: var(--text-small); color: var(--color-inverse); }
.assess .report-score p { font-size: var(--text-small); color: var(--color-inverse); margin-top: var(--space-3); }
.assess .report-score .report-score-number { font-size: 4rem; line-height: 1.05; font-weight: 650; letter-spacing: -.04em; color: var(--color-paper); font-variant-numeric: tabular-nums; overflow-wrap: break-word; }
.assess .report-score-unit { font-size: 1.4rem; letter-spacing: 0; font-weight: 400; color: var(--color-inverse); white-space: nowrap; }
.assess .report-score-secondary { border-left: 1px solid var(--color-field-line); padding-left: var(--space-6); }
.assess .report-score-secondary > strong, .assess .report-score-secondary > output, .assess .report-score-secondary .report-score-value { font-size: 3rem; }
.assess .report-score-secondary p { color: var(--color-inverse); font-size: var(--text-small); }
.assess .report-score-secondary .report-score-number { font-size: 3.25rem; color: var(--color-inverse); font-variant-numeric: tabular-nums; }
.assess .report-counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); margin: var(--space-0); padding-top: var(--space-5); border-top: 1px solid var(--color-field-line); }
.assess .report-counts dt { font-size: var(--text-label); color: var(--color-inverse); }
.assess .report-counts dd { margin: var(--space-1) var(--space-0) var(--space-0); font-size: var(--text-lead); font-weight: 600; font-variant-numeric: tabular-nums; }
.assess .report-callout { border-left: 3px solid var(--color-line); background: var(--color-wash); padding: var(--space-5) var(--space-6); margin-block: var(--space-6); }
.assess .report-callout-critical { border-color: var(--color-crimson); background: var(--color-soft); }
.assess .report-callout h2, .assess .report-callout h3 { font-size: 1.15rem; margin-bottom: var(--space-3); }
.assess .report-document > section, .assess .report-document > .report-next { margin-top: var(--space-10); }
.assess .report-document h2 { margin-bottom: var(--space-5); }
.assess .report-summary h2 { margin-bottom: var(--space-3); }
.assess .report-priorities { margin-block: var(--space-6); }
.assess .report-priorities > ol { padding-left: var(--space-6); }
.assess .report-priority { padding-block: var(--space-5); border-bottom: 1px solid var(--color-line); }
.assess .report-priority:first-child { padding-top: var(--space-0); }
.assess .report-priority h3 { margin-bottom: var(--space-3); }
.assess .report-priority p { color: var(--color-body); }
.assess .report-priority .button { min-height: 44px; font-size: var(--text-small); padding: var(--space-2) var(--space-4); }
.assess .report-table-wrap { width: 100%; overflow-x: auto; margin-block: var(--space-6); }
.assess .report-table { width: 100%; border-collapse: collapse; font-size: var(--text-small); text-align: left; }
.assess .report-table caption { text-align: left; font-weight: 600; margin-bottom: var(--space-3); }
.assess .report-table th { font-weight: 600; color: var(--color-body); background: var(--color-wash); }
.assess .report-table th, .assess .report-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-line); vertical-align: top; }
.assess .report-table :is(th, .assess td):first-child { width: 40%; }
.assess .report-table :is(th, .assess td):not(:first-child) { font-variant-numeric: tabular-nums; }
.assess .report-domain { margin-top: var(--space-10); }
.assess .report-domain > h2 { padding-bottom: var(--space-4); border-bottom: 2px solid var(--color-crimson); }
.assess .report-domain > h3 { font-size: 1.5rem; padding-bottom: var(--space-4); border-bottom: 2px solid var(--color-crimson); margin-bottom: var(--space-4); }
.assess .report-domain > p { color: var(--color-muted); }
.assess .report-answer { padding-block: var(--space-6); border-bottom: 1px solid var(--color-line); }
.assess .report-answer h3 { font-size: 1.2rem; line-height: 1.3; margin-bottom: var(--space-3); }
.assess .report-answer h4 { font-size: 1.2rem; line-height: 1.3; margin-bottom: var(--space-3); }
.assess .report-response { color: var(--color-body); }
.assess .report-response strong { color: var(--color-ink); }
.assess .report-answer-meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); color: var(--color-crimson); font-size: var(--text-small); margin-bottom: var(--space-4); }
.assess .report-answer-meta > span, .assess .report-answer-meta > p { margin: var(--space-0); }
.assess .report-answer-detail { color: var(--color-body); }
.assess .report-answer-detail dt { font-size: var(--text-small); font-weight: 600; color: var(--color-ink); margin-top: var(--space-3); }
.assess .report-answer-detail dd { margin: var(--space-1) var(--space-0) var(--space-0); }
.assess .report-answer-notes { border-left: 2px solid var(--color-line); padding-left: var(--space-4); overflow-wrap: anywhere; white-space: pre-wrap; }
.assess .report-domain-note { margin-top: var(--space-5); padding: var(--space-5) var(--space-0); border-block: 1px solid var(--color-line); }
.assess .report-domain-note h4 { font-size: var(--text-body); margin-bottom: var(--space-3); }
.assess .report-domain-note p, .assess .report-cadence { font-size: var(--text-small); color: var(--color-body); }
.assess .report-cadence { margin-top: var(--space-4); }
.assess .report-next { padding-block: var(--space-8); border-top: 3px solid var(--color-crimson); }
.assess .report-next p { max-width: 64ch; color: var(--color-body); }
.assess .report-next .button { margin-top: var(--space-3); }
.assess .report-sources { font-size: var(--text-small); }
.assess .report-sources > ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-8); padding-left: var(--space-6); }
.assess .report-sources a { overflow-wrap: anywhere; }
.assess .report-method { padding-top: var(--space-6); border-top: 1px solid var(--color-line); color: var(--color-muted); font-size: var(--text-small); }
.assess .report-method p { max-width: 75ch; }
.assess .report-footer { padding-top: var(--space-6); margin-top: var(--space-6); border-top: 1px solid var(--color-line); color: var(--color-muted); font-size: var(--text-small); }
.assess dialog { position: fixed; inset: 0; margin: auto; width: min(32rem, calc(100% - var(--gutter) * 2)); max-height: 80dvh; overflow-y: auto; padding: var(--space-8); border: 0; border-top: 3px solid var(--color-crimson); border-radius: var(--radius-panel); background: var(--color-paper); color: var(--color-ink); box-shadow: var(--shadow-panel); }
.assess dialog::backdrop { background: var(--color-backdrop); }
.assess dialog h2 { margin-bottom: var(--space-4); }
.assess .dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-6); }

@media (hover: hover) {
  .assess .button:hover { background: var(--color-crimson-hover); border-color: var(--color-crimson-hover); color: var(--color-paper); }
  .assess .button-secondary:hover { background: var(--color-wash); border-color: var(--color-ink); color: var(--color-ink); }
  .assess .button-quiet:hover { background: var(--color-shape); border-color: var(--color-transparent); color: var(--color-ink); }
  .assess .hero-copy .button-secondary:hover { background: var(--color-night-plane); color: var(--color-paper); }
  .assess .rating-option:hover { background: var(--color-wash); border-color: var(--color-ink); }
  .assess .rating-option:has(input:checked):hover { background: var(--color-soft); border-color: var(--color-crimson); }
  .assess .section-button:hover { background: var(--color-shape); }
  .assess .section-button.current:hover { background: var(--color-paper); }
  .assess .field :is(input, .assess textarea, .assess select):hover { background: var(--color-wash); }
  .assess a:hover { text-decoration-thickness: 2px; }
  .assess summary:hover { color: var(--color-crimson); }
}

@media (min-width: 1100px) {
  .assess .review-rail { position: sticky; top: var(--space-6); }
}

@media (max-width: 960px) {
  .assess .setup-layout { grid-template-columns: minmax(0, .6fr) minmax(0, 1fr); gap: var(--space-8); }
  .assess .review-layout { grid-template-columns: minmax(0, 13.5rem) minmax(0, 1fr); gap: var(--space-5); }
  .assess .question-workspace { padding: var(--space-6); }
  .assess .live-score { padding: var(--space-5); }
  .assess .rating-option { padding: var(--space-2); }
  .assess .report-document { padding: var(--space-8); }
}

@media (max-width: 760px) {
  .assess .site-header > .shell { min-height: 76px; gap: var(--space-3); }
  .assess .brand img { width: 145px; }
  .assess .intro-hero { padding: var(--space-8) var(--space-0); min-height: 320px; }
  .assess .intro-hero > .shell { grid-template-columns: minmax(0, 1fr) minmax(0, .25fr); gap: var(--space-4); }
  .assess .hero-copy h1 { font-size: clamp(2.5rem, 7.5vw, 3.75rem); }
  .assess .hero-mark { width: min(100%, 110px); align-self: start; margin-top: var(--space-3); }
  .assess .hero-facts { gap: var(--space-3) var(--space-6); }
  .assess .setup-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); padding-block: var(--space-8); }
  .assess .setup-copy > p { max-width: 60ch; }
  .assess .review-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .assess .review-rail { display: contents; }
  .assess .live-score { order: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-4); padding: var(--space-4) var(--space-5); }
  .assess .live-score > p:first-child { grid-column: 1; grid-row: 1; }
  .assess .score-large { grid-column: 2; grid-row: 1 / 3; align-self: center; font-size: 2.5rem; margin: var(--space-0); text-align: right; }
  .assess .live-score h2, .assess .live-score > p:first-child { margin-bottom: var(--space-2); }
  .assess .score-secondary { grid-column: 1; grid-row: 2; margin-top: var(--space-0); }
  .assess .score-note { grid-column: 1 / -1; margin-top: var(--space-2); }
  .assess .review-rail > .critical-note { order: 1; margin-top: var(--space-0); margin-bottom: var(--space-0); }
  .assess .section-nav { display: none; }
  .assess .utility-links { order: 3; display: flex; flex-wrap: wrap; margin-top: var(--space-0); gap: var(--space-2); }
  .assess .utility-links :is(.button, .assess .button-quiet) { min-height: 44px; flex: 1 1 auto; }
  .assess .utility-links .remember-choice { margin-block: var(--space-2); }
  .assess .utility-links .field-help { flex-basis: 100%; }
  .assess .utility-links > .review-options { flex-basis: 100%; }
  .assess .report-title-actions .review-options-panel { inset-inline-start: 0; inset-inline-end: auto; }
  .assess .question-workspace { order: 2; padding: var(--space-6); }
  .assess .assessment-top { padding-top: var(--space-8); }
  .assess .report-toolbar { align-items: stretch; flex-direction: column; gap: var(--space-3); }
  .assess .report-masthead { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .assess .report-masthead > p { margin-top: var(--space-0); }
  .assess .report-masthead h1 { max-width: 24ch; }
  .assess .report-summary { padding: var(--space-6); gap: var(--space-4); }
  .assess .report-score > strong, .assess .report-score > output, .assess .report-score .report-score-value { font-size: 3rem; }
  .assess .report-score-secondary { padding-left: var(--space-4); }
  .assess .report-score-secondary > strong, .assess .report-score-secondary > output, .assess .report-score-secondary .report-score-value { font-size: 2.5rem; }
  .assess .report-score .report-score-number { font-size: 3.5rem; }
  .assess .report-score-secondary .report-score-number { font-size: 2.75rem; }
  .assess .report-table th, .assess .report-table td { padding: var(--space-3) var(--space-2); }
  .assess .report-sources > ul { grid-template-columns: minmax(0, 1fr); }
  .assess .session-banner { align-items: flex-start; flex-direction: column; gap: var(--space-4); }
  .assess .site-footer .shell { flex-direction: column; gap: var(--space-3); }
}

@media (max-width: 480px) {
  .assess .site-header > .shell { align-items: center; flex-wrap: wrap; gap: var(--space-2); }
  .assess .brand img { width: 134px; }
  .assess .intro-hero { padding: var(--space-6) var(--space-0); margin-top: var(--space-5); min-height: 0; }
  .assess .intro-hero > .shell { grid-template-columns: minmax(0, 1fr); }
  .assess .hero-mark { display: none; }
  .assess .hero-copy h1 { font-size: 2.7rem; max-width: 10ch; }
  .assess .hero-copy > p { font-size: var(--text-body); }
  .assess .hero-facts { margin-top: var(--space-6); }
  .assess .hero-actions, .assess .intro-actions { flex-direction: column; align-items: stretch; }
  .assess .form-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .assess .question-workspace { padding: var(--space-5) var(--space-4); }
  .assess .question-heading { gap: var(--space-2); margin-bottom: var(--space-4); }
  .assess .weight-label { font-size: var(--text-label); }
  .assess .question-standard { font-size: var(--text-body); }
  .assess .rating-options { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .assess .rating-option { flex-direction: row; min-height: 52px; padding: var(--space-2) var(--space-3); align-items: center; gap: var(--space-3); text-align: left; }
  .assess .rating-word { font-size: var(--text-small); line-height: 1.35; }
  .assess .rating-number { font-size: 1.5rem; min-width: 1.6rem; }
  .assess .alternative-options { gap: var(--space-2); align-items: flex-start; flex-direction: column; }
  .assess .question-actions { gap: var(--space-2); }
  .assess .question-actions .button { padding-inline: var(--space-4); }
  .assess .question-feedback { padding: var(--space-4); }
  .assess .report-document { padding: var(--space-6) var(--space-4); }
  .assess .report-meta { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .assess .report-summary { padding: var(--space-5); }
  .assess .report-scores { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .assess .report-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .assess .report-score-secondary { border-left: 0; border-top: 1px solid var(--color-field-line); padding-left: var(--space-0); padding-top: var(--space-5); }
  .assess .report-callout { padding: var(--space-4); }
  .assess .report-priorities > ol { padding-left: var(--space-5); }
  .assess .report-answer-meta { gap: var(--space-2) var(--space-3); }
  .assess .report-title-actions { gap: var(--space-2); }
  .assess .report-title-actions .button { width: 100%; }
  .assess dialog { padding: var(--space-6); }
  .assess .dialog-actions .button { flex: 1 1 auto; }
}

/* Narrow reports retain table semantics while giving each review area its own row. */
@media screen and (max-width: 480px) {
  .assess .report-table, .assess .report-table tbody { display: block; }
  .assess .report-table caption { display: block; }
  .assess .report-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: var(--space-0);
    overflow: clip;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .assess .report-table tbody tr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-line);
  }
  .assess .report-table tbody th[scope="row"] {
    grid-column: 1 / -1;
    width: auto;
    padding: var(--space-3) var(--space-2);
    border-bottom: 0;
    font-size: var(--text-small);
  }
  .assess .report-table tbody td {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
    padding: var(--space-3) var(--space-1);
    border-bottom: 0;
    font-size: var(--text-small);
    white-space: normal;
  }
  .assess .report-table tbody td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: var(--space-1);
    color: var(--color-muted);
    font-size: var(--text-label);
    font-weight: 600;
    line-height: 1.4;
    white-space: normal;
    overflow-wrap: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .assess *, .assess *::before, .assess *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

@page { size: A4; margin: 14mm; }
@media print {
  .assess { --text-body: 10pt; --text-small: 9pt; --text-label: 8.5pt; --text-h1: 25pt; --text-h2: 17pt; }
  .assess, .assess { width: auto; min-height: 0; background: var(--color-paper); color: var(--color-ink); overflow: visible; }
  .assess { font-size: 10pt; line-height: 1.4; }
  .assess .site-header, .assess .site-footer, .assess .skip-link, .assess #intro-view, .assess #questions-view, .assess .report-toolbar, .assess .screen-only, .assess .no-js-note, .assess .session-banner, .assess .error-banner, .assess dialog { display: none !important; }
  .assess .print-only { display: block; }
  .assess .shell, .assess #report-view, .assess #report-content { width: auto; max-width: none; margin: var(--space-0); padding: var(--space-0); }
  .assess .report-document { padding: var(--space-0); background: var(--color-paper); }
  .assess .report-masthead { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4); padding-bottom: var(--space-4); border-bottom: 2pt solid var(--color-ink); }
  .assess .report-masthead img { width: 33mm; }
  .assess .report-masthead h1 { font-size: 24pt; max-width: 21ch; }
  .assess .report-masthead p { font-size: 9pt; }
  .assess .report-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-6); margin-block: var(--space-4); }
  .assess .report-status { color: var(--color-ink); border-color: var(--color-ink); background: var(--color-paper); padding: var(--space-1) var(--space-3); margin-block: var(--space-3); }
  .assess .report-summary { display: block; margin-block: var(--space-5); padding: var(--space-5); background: var(--color-paper); color: var(--color-ink); border: 1pt solid var(--color-ink); break-inside: avoid; }
  .assess .report-summary .report-status { padding: var(--space-0); margin: var(--space-0); border: 0; color: var(--color-ink); }
  .assess .report-summary .report-status p { color: var(--color-ink); }
  .assess .report-scores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); margin-block: var(--space-4); }
  .assess .report-counts { grid-template-columns: repeat(4, minmax(0, 1fr)); border-color: var(--color-field-line); padding-top: var(--space-3); }
  .assess .report-counts dt { color: var(--color-ink); }
  .assess .report-score-secondary { border-left: 1px solid var(--color-field-line); border-top: 0; padding-left: var(--space-5); padding-top: var(--space-0); }
  .assess .report-score > strong, .assess .report-score > output, .assess .report-score .report-score-value { font-size: 36pt; }
  .assess .report-score-secondary > strong, .assess .report-score-secondary > output, .assess .report-score-secondary .report-score-value { font-size: 30pt; }
  .assess .report-score .report-score-number { font-size: 36pt; color: var(--color-ink); }
  .assess .report-score-secondary .report-score-number { font-size: 30pt; color: var(--color-ink); }
  .assess .report-score-unit { font-size: 14pt; color: var(--color-ink); }
  .assess .report-score :is(p, .assess small), .assess .report-score-secondary p, .assess .report-callout p, .assess .report-answer-detail, .assess .report-answer-meta, .assess .report-meta dt, .assess .report-method, .assess .report-domain > p { color: var(--color-ink); }
  .assess .report-callout { background: var(--color-paper); border-color: var(--color-ink); border-width: 2pt; padding: var(--space-3) var(--space-4); margin-block: var(--space-4); break-inside: avoid; }
  .assess .report-callout h2 { font-size: 13pt; }
  .assess .report-document > section, .assess .report-document > .report-next { margin-top: var(--space-6); }
  .assess .report-document h2 { font-size: 17pt; margin-bottom: var(--space-4); }
  .assess .report-summary h2 { font-size: 11pt; margin-bottom: var(--space-3); }
  .assess .report-priority { padding-block: var(--space-4); break-inside: avoid; }
  .assess .report-priority h3, .assess .report-answer h3, .assess .report-answer h4 { font-size: 11pt; margin-bottom: var(--space-3); }
  .assess .report-priorities { margin-block: var(--space-4); }
  .assess .report-priorities > p { break-after: avoid; }
  .assess .report-priorities > ol { display: block; }
  .assess .report-table-wrap { overflow: visible; margin-block: var(--space-4); }
  .assess .report-breakdown { break-inside: avoid; }
  .assess .report-table { font-size: 9pt; }
  .assess .report-table thead { display: table-header-group; }
  .assess .report-table tr { break-inside: avoid; }
  .assess .report-table th, .assess .report-table td { padding: var(--space-2); background: var(--color-paper); color: var(--color-ink); }
  .assess .report-table caption { break-after: avoid; }
  .assess .report-details { break-before: page; }
  .assess .report-domain { break-before: auto; margin-top: var(--space-6); }
  .assess .report-domain:first-of-type { break-before: auto; }
  .assess .report-domain > h3 + p { break-after: avoid; }
  .assess .report-domain > h2 { border-color: var(--color-ink); padding-bottom: var(--space-3); }
  .assess .report-domain > h3 { border-color: var(--color-ink); font-size: 15pt; padding-bottom: var(--space-3); margin-bottom: var(--space-3); }
  .assess .report-answer { break-inside: avoid; padding-block: var(--space-4); }
  .assess .report-answer-meta { gap: var(--space-2) var(--space-4); font-size: 9pt; margin-bottom: var(--space-3); }
  .assess .report-answer-notes { white-space: pre-wrap; }
  .assess .report-answer-detail dt { margin-top: var(--space-2); }
  .assess .report-next { padding-block: var(--space-4); border-color: var(--color-ink); }
  .assess .report-sources { font-size: 8.5pt; break-inside: avoid; }
  .assess .report-sources > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-5); }
  .assess .report-domain-note { break-inside: avoid; break-after: avoid; padding-block: var(--space-3); margin-top: var(--space-4); }
  .assess .report-method { font-size: 8.5pt; padding-top: var(--space-4); }
  .assess h1, .assess h2, .assess h3, .assess h4, .assess dt { break-after: avoid; }
  .assess p { orphans: 3; widows: 3; }
  .assess a { color: var(--color-ink); }
}

/* Vamocles · October 2026 editorial refresh.
   Built on the existing tokens and accessible form/report behaviour.
   Screen refinements are scoped so the complete print document remains intact. */
.assess { --color-soft: #F5F5F7; --color-soft-line: #D5D5DB; }

@media screen {
  .assess { background: var(--color-paper); }
  .assess .site-header > .shell { min-height: 88px; }
  .assess .header-nav { display: flex; align-items: center; gap: var(--space-8); }
  .assess .header-guides { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-ink); font-size: var(--text-small); text-decoration: none; }
  body[data-view="questions"] .assess .header-guides, body[data-view="report"] .assess .header-guides { display: none; }
  .assess .button { border-radius: var(--r-xs, 8px); gap: var(--space-3); }
  .assess .button-secondary { border-color: var(--color-field-line); }
  .assess .button-quiet { border-radius: var(--r-xs, 8px); }
  .assess .intro-hero { margin: 0; padding: var(--space-16) 0; min-height: 0; background: var(--color-paper); color: var(--color-ink); overflow: visible; }
  .assess .intro-hero::before, .assess .intro-hero::after { display: none; }
  .assess .intro-hero > .shell { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: var(--space-12); }
  .assess .hero-copy h1 { font-size: clamp(3rem, 5.2vw, 4.7rem); line-height: 1.02; letter-spacing: -.055em; max-width: none; margin-bottom: var(--space-6); }
  .assess .hero-copy > p { max-width: 32ch; color: var(--color-body); font-size: 1.15rem; line-height: 1.6; margin-bottom: var(--space-8); }
  .assess .hero-actions { display: flex; align-items: center; gap: var(--space-6); }
  .assess .hero-guides { display: inline-flex; align-items: center; min-height: 48px; color: var(--color-ink); font-size: var(--text-small); font-weight: 600; }
  .assess .hero-facts { color: var(--color-muted); font-size: var(--text-label); gap: var(--space-6); margin-top: var(--space-8); }
  .assess .hero-facts span { border: 0; padding: 0; }
  .assess .hero-image { min-width: 0; align-self: stretch; display: flex; }
  .assess .hero-image img { width: 100%; height: 100%; min-height: 0; aspect-ratio: 4 / 3; object-fit: cover; object-position: 56% center; }
  .assess .review-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); list-style: none; padding: var(--space-8) 0; margin-block: 0; border-block: 1px solid var(--color-line); }
  .assess .review-steps li { display: flex; gap: var(--space-4); }
  .assess .step-index { font-size: var(--text-small); color: var(--color-muted); line-height: 1.5; font-variant-numeric: tabular-nums; }
  .assess .review-steps h2 { font-size: 1rem; letter-spacing: -.015em; line-height: 1.4; margin-bottom: var(--space-2); }
  .assess .review-steps p { font-size: var(--text-small); color: var(--color-muted); max-width: 30ch; }
  .assess .setup-layout { grid-template-columns: minmax(0, .68fr) minmax(0, 1fr); gap: clamp(3rem, 7vw, 6rem); padding-block: var(--space-20); }
  .assess .setup-copy h2 { max-width: 12ch; font-size: clamp(2rem, 3vw, 2.65rem); margin-bottom: var(--space-6); }
  .assess .setup-copy > p { max-width: 38ch; color: var(--color-body); }
  .assess .privacy-note { border-left: 0; border-top: 1px solid var(--color-line); padding: var(--space-6) 0 0; margin-top: var(--space-8); max-width: 38ch; color: var(--color-muted); }
  .assess .privacy-note h3 { color: var(--color-ink); font-size: 1rem; margin-bottom: var(--space-3); }
  .assess .privacy-note p { font-size: var(--text-small); }
  .assess .field :is(input:not([type="checkbox"]):not([type="radio"]), .assess textarea, .assess select) { border-radius: var(--r-xs, 8px); border-color: var(--color-field-line); background: var(--color-paper); min-width: 0; }
  .assess .field :is(input, .assess textarea, .assess select):focus-visible { background: var(--color-paper); }
  .assess .field-help { line-height: 1.55; }
  .assess .profile-context { margin-top: var(--space-5); border-block: 1px solid var(--color-line); }
  .assess .profile-context > summary { min-height: 48px; }
  .assess .profile-context > summary span { color: var(--color-muted); font-weight: 400; }
  .assess .profile-context .form-grid { padding-block: var(--space-3) var(--space-6); }
  .assess #profile-form > .remember-choice { margin-block: var(--space-5) 0; align-items: center; }
  .assess .review-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-8); }
  .assess .review-choices > div { min-width: 0; }
  .assess .review-choices .button { width: 100%; padding-inline: var(--space-3); font-size: var(--text-small); }
  .assess .review-choices p { margin-top: var(--space-3); font-size: var(--text-small); color: var(--color-body); }
  .assess .review-choices p span { color: var(--color-muted); font-size: var(--text-label); }
  .assess #profile-form > .field-help:last-child { margin-top: var(--space-6); font-size: var(--text-label); }
  .assess .guide-library { display: grid; grid-template-columns: minmax(0, .68fr) minmax(0, 1fr); gap: clamp(3rem, 7vw, 6rem); padding-block: var(--space-16) var(--space-20); border-top: 1px solid var(--color-line); scroll-margin-top: 8px; }
  .assess .library-intro h2 { font-size: clamp(2rem, 3vw, 2.65rem); max-width: 12ch; margin-bottom: var(--space-5); }
  .assess .library-intro > p { color: var(--color-body); max-width: 35ch; }
  .assess .featured-guide { display: grid; grid-template-columns: minmax(0, 10.5rem) minmax(0, 1fr); gap: var(--space-8); align-items: center; margin-bottom: var(--space-8); }
  .assess .book-cover { display: block; }
  .assess .book-cover img { width: 100%; height: auto; box-shadow: 0 6px 16px var(--color-shadow); }
  .assess .featured-guide h3 { font-size: 1.65rem; letter-spacing: -.03em; margin-bottom: var(--space-4); }
  .assess .guide-description { color: var(--color-body); font-size: var(--text-small); }
  .assess .guide-format { color: var(--color-muted); font-size: var(--text-label); margin-bottom: var(--space-3); }
  .assess .text-link { display: inline-flex; align-items: center; gap: var(--space-3); min-height: 44px; font-size: var(--text-small); font-weight: 600; }
  .assess .download-list { margin: 0; }
  .assess .download-list li { border-bottom: 1px solid var(--color-line); }
  .assess .download-list a { min-height: 72px; gap: var(--space-4); padding-block: var(--space-5); color: var(--color-ink); }
  .assess .download-list a > span:first-child { font-weight: 600; }
  .assess .download-list a > span:last-child { color: var(--color-muted); font-size: var(--text-label); display: flex; gap: var(--space-4); align-items: center; flex-shrink: 0; }
  .assess .download-list a > span:last-child > span { color: var(--color-crimson); font-size: 1.25rem; }

  /* One calm workspace shared by the personal and comprehensive reviews. */
  .assess .assessment-top { display: flex; justify-content: space-between; align-items: end; gap: var(--space-8); padding-block: var(--space-10) var(--space-6); border-bottom: 1px solid var(--color-line); margin-bottom: var(--space-8); }
  .assess .review-meta { margin: 0; gap: 0; }
  .assess .review-meta h1 { font-size: clamp(1.75rem, 3vw, 2.4rem); max-width: 24ch; letter-spacing: -.04em; }
  .assess #review-description { font-size: var(--text-small); max-width: 60ch; margin-top: var(--space-3); }
  .assess .completion-line { width: 15rem; max-width: 100%; flex-shrink: 0; gap: var(--space-2); font-size: var(--text-label); margin-top: 0; }
  .assess progress { height: 5px; border-radius: 0; }
  .assess progress::-webkit-progress-bar, .assess progress::-webkit-progress-value { border-radius: 0; }
  .assess .review-layout { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); grid-template-areas: "rail question" "utilities question"; grid-template-rows: auto 1fr; column-gap: var(--space-10); row-gap: 0; }
  .assess .review-rail { position: static; grid-area: rail; }
  .assess .live-score { padding: 0 0 var(--space-6); border-bottom: 1px solid var(--color-line); background: var(--color-paper); color: var(--color-ink); }
  .assess .live-score::before, .assess .live-score::after { display: none; }
  .assess .live-score > p:first-child { color: var(--color-body); font-size: var(--text-small); margin-bottom: var(--space-3); }
  .assess .score-large { font-size: 3rem; line-height: 1.1; letter-spacing: -.045em; margin-bottom: var(--space-4); }
  .assess #live-score-unit { font-size: 1.2rem; color: var(--color-muted); }
  .assess .score-secondary { color: var(--color-muted); margin-top: 0; line-height: 1.6; }
  .assess .score-secondary strong, .assess .score-secondary output { color: var(--color-body); }
  .assess .score-note { color: var(--color-muted); font-size: var(--text-label); }
  .assess .critical-note { border-left: 0; padding-left: 0; font-size: var(--text-label); line-height: 1.6; }
  .assess .section-nav { margin-top: var(--space-6); }
  .assess .section-button { min-height: 52px; font-size: var(--text-label); }
  .assess .section-button.current, .assess .section-button[aria-current="step"] { background: var(--color-wash); }
  .assess .utility-links { grid-area: utilities; gap: var(--space-3); }
  .assess .utility-links > .remember-choice { font-size: var(--text-label); margin: 0; align-items: center; }
  .assess .utility-links > .field-help { font-size: var(--text-label); margin-top: 0; }
  .assess .question-workspace { grid-area: question; padding: 0 0 0 var(--space-10); border-top: 0; border-left: 1px solid var(--color-line); }
  .assess .question-navigation { margin-bottom: var(--space-5); }
  .assess .question-navigation > summary { display: flex; justify-content: end; align-items: center; gap: var(--space-3); color: var(--color-body); list-style: none; min-height: 44px; font-weight: 500; padding-top: 0; }
  .assess .question-navigation > summary::-webkit-details-marker { display: none; }
  .assess .question-navigation > summary::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin-right: 3px; }
  .assess .question-navigation[open] > summary::after { transform: rotate(225deg); }
  .assess .question-navigation .question-jump { margin: 0; padding: var(--space-4); background: var(--color-wash); border: 1px solid var(--color-line); }
  .assess #question-select { min-height: 52px; font-size: var(--text-small); }
  .assess .question-heading { gap: var(--space-4); margin-bottom: var(--space-4); }
  .assess .question-number { color: var(--color-body); font-size: var(--text-small); font-weight: 500; }
  .assess .priority-badge, .assess .priority-badge.critical, .assess .priority-badge.high { background: transparent; padding: 0; color: var(--color-body); font-weight: 600; }
  .assess .priority-badge.critical { color: var(--color-crimson); }
  .assess .weight-label { font-size: var(--text-label); }
  .assess #question-content h2 { font-size: clamp(1.65rem, 2.5vw, 2.1rem); max-width: 32ch; margin-bottom: var(--space-5); text-wrap: auto; letter-spacing: -.035em; }
  .assess .question-standard { font-size: 1rem; line-height: 1.65; max-width: 68ch; }
  .assess .verification-tip { margin-block: var(--space-5) var(--space-6); }
  .assess .verification-tip summary, .assess .question-notes summary { min-height: 48px; }
  .assess .rating-fieldset legend { font-size: 1.1rem; margin-bottom: var(--space-2); }
  .assess .rating-options { gap: var(--space-2); }
  .assess .rating-option { display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; align-items: center; gap: var(--space-3); min-height: 112px; padding: var(--space-4) var(--space-3); border-radius: var(--r-xs, 8px); border-color: var(--color-field-line); }
  .assess .rating-number { font-size: 1.6rem; text-align: right; }
  .assess .rating-word { grid-column: 1 / -1; color: var(--color-body); font-size: var(--text-label); }
  .assess .rating-option:has(input:checked) { background: var(--ink); border-color: var(--ink); outline: 0; color: var(--paper); }
  .assess .rating-option:has(input:checked) :is(.rating-number, .assess .rating-word) { color: var(--paper); }
  .assess .rating-option:has(input:checked) input { accent-color: var(--paper); }
  .assess .rating-option:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 3px; }
  .assess .verification-control { padding-block: var(--space-5); font-size: var(--text-small); line-height: 1.6; }
  .assess .verification-control strong { display: inline; margin-right: var(--space-2); }
  .assess .question-feedback { background: var(--color-wash); border-left: 0; padding: var(--space-5); margin-top: var(--space-5); }
  .assess #question-content > .button-quiet { min-height: 44px; font-size: var(--text-label); color: var(--color-muted); margin-top: var(--space-2); padding-inline: 0; }
  .assess .question-actions { border-top: 1px solid var(--color-line); padding-top: var(--space-6); margin-top: var(--space-5); }

  /* A document-like report, with full detail retained for printing. */
  body[data-view="report"] .assess { background: var(--color-wash); }
  .assess #report-view { --width-shell: 68rem; }
  .assess .report-toolbar .report-toolbar__title { margin: 0; font-family: var(--font-sans); font-size: 1.5rem; font-weight: 650; line-height: 1.2; letter-spacing: var(--tracking-head); color: var(--ink); }
  .assess .report-toolbar p { margin-top: var(--space-2); }
  .assess .report-title-actions { justify-content: end; }
  .assess .report-title-actions > .button { font-size: var(--text-small); }
  .assess .report-document { border: 1px solid var(--color-line); padding: var(--space-12); }
  .assess .report-masthead { border-bottom-width: 2px; }
  .assess .report-masthead h1 { font-size: clamp(2rem, 4vw, 2.7rem); max-width: 26ch; }
  .assess .report-meta > div:last-child { grid-column: 1 / -1; }
  .assess .report-summary { margin-block: var(--space-8); }
  .assess .report-evidence-status { font-size: var(--text-small); color: var(--color-inverse); margin-bottom: var(--space-6); }
  .assess .report-jump { margin-top: calc(-1 * var(--space-3)); margin-bottom: var(--space-6); font-size: var(--text-small); }
  .assess .report-jump a { display: inline-flex; min-height: 44px; align-items: center; }
  .assess .report-callout, .assess .report-callout-critical { background: var(--color-paper); border-block: 1px solid var(--color-line); border-right: 1px solid var(--color-line); }
  .assess .report-callout-critical h2 { color: var(--color-crimson); }
  .assess .report-priority h3 { font-size: 1.2rem; }
  .assess .report-answer-meta { color: var(--color-muted); }
  .assess .report-meta-item:nth-child(2) { color: var(--color-crimson); font-weight: 600; }
  .assess .report-answer .button { min-height: 44px; font-size: var(--text-small); padding-inline: var(--space-4); margin-top: var(--space-3); }
  .assess .report-response { display: flex; flex-wrap: wrap; column-gap: var(--space-2); }
  .assess .report-domain > h3 { border-bottom: 1px solid var(--color-line); }
  .assess .report-next { border-top: 1px solid var(--color-line); }
  .assess .report-next .button { max-width: 100%; }
  .assess .site-footer { margin-top: var(--space-16); }
}

@media screen and (hover: hover) {
  .assess .rating-option:has(input:checked):hover { background: var(--ink); border-color: var(--ink); }
  .assess .hero-guides:hover, .assess .header-guides:hover, .assess .download-list a:hover { color: var(--color-crimson); }
  .assess #question-content > .button-quiet:hover { background: transparent; text-decoration: underline; }
}

@media screen and (max-width: 1080px) {
  .assess .intro-hero > .shell { gap: var(--space-8); }
  .assess .hero-copy h1 { font-size: clamp(2.8rem, 5.3vw, 4.2rem); }
  .assess .hero-image img { aspect-ratio: 1 / 1; }
  .assess .hero-actions { gap: var(--space-4); }
  .assess .setup-layout, .assess .guide-library { gap: var(--space-10); grid-template-columns: minmax(0, .6fr) minmax(0, 1fr); }
  .assess .review-layout { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: var(--space-6); }
  .assess .question-workspace { padding-left: var(--space-6); }
  .assess .rating-option { gap: var(--space-2); padding: var(--space-3) var(--space-2); }
  .assess .featured-guide { grid-template-columns: minmax(0, 8rem) minmax(0, 1fr); gap: var(--space-5); }
  .assess .report-toolbar { align-items: start; flex-direction: column; gap: var(--space-4); }
  .assess .report-title-actions { justify-content: start; }
  .assess .report-title-actions .review-options-panel { inset-inline-start: 0; inset-inline-end: auto; }
}

@media screen and (max-width: 760px) {
  .assess .site-header > .shell { min-height: 76px; }
  .assess .header-nav { gap: var(--space-5); }
  .assess .intro-hero { padding-block: var(--space-10); }
  .assess .intro-hero > .shell { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .assess .hero-copy h1 { font-size: clamp(3rem, 8vw, 4.2rem); }
  .assess .hero-copy > p { max-width: 40ch; font-size: 1rem; margin-bottom: var(--space-6); }
  .assess .hero-image { max-width: none; }
  .assess .hero-image img { aspect-ratio: 3 / 2; }
  .assess .hero-facts { margin-top: var(--space-6); }
  .assess .review-steps { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .assess .review-steps p { max-width: 50ch; }
  .assess .review-steps h2 { margin-bottom: var(--space-1); }
  .assess .setup-layout, .assess .guide-library { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); padding-block: var(--space-12); }
  .assess .setup-copy h2, .assess .library-intro h2 { max-width: 20ch; font-size: 2rem; }
  .assess .setup-copy > p, .assess .library-intro > p { max-width: 55ch; }
  .assess .privacy-note { max-width: none; margin-top: var(--space-6); padding-top: var(--space-5); }
  .assess .privacy-note p { max-width: 60ch; }
  .assess .featured-guide { grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); gap: var(--space-6); }
  .assess .assessment-top { flex-direction: column; padding-top: var(--space-8); gap: var(--space-5); margin-bottom: 0; border-bottom: 0; align-items: start; }
  .assess .review-meta h1 { font-size: clamp(1.65rem, 4.6vw, 2rem); }
  .assess .completion-line { width: 100%; }
  .assess .review-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "score" "question" "critical" "utilities"; grid-template-rows: auto; gap: 0; }
  .assess .review-rail { display: contents; }
  .assess .live-score { grid-area: score; order: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; padding: var(--space-4) 0; border-block: 1px solid var(--color-line); gap: var(--space-1) var(--space-4); }
  .assess .live-score > p:first-child { grid-column: 1; grid-row: 1; margin-bottom: 0; }
  .assess .score-large { grid-column: 2; grid-row: 1 / 3; align-self: center; margin: 0; font-size: 2rem; }
  .assess #live-score-unit { font-size: 1rem; }
  .assess .score-secondary { grid-column: 1; grid-row: 2; font-size: var(--text-label); }
  .assess .score-note { grid-column: 1 / -1; margin-top: var(--space-2); }
  .assess .review-rail > .critical-note { grid-area: critical; order: 3; margin-top: var(--space-8); padding-top: var(--space-5); border-top: 1px solid var(--color-line); }
  .assess .question-workspace { order: 2; border: 0; padding: var(--space-3) 0 0; }
  .assess .question-navigation { margin-bottom: var(--space-4); }
  .assess .question-navigation > summary { padding-top: var(--space-3); }
  .assess .utility-links { order: 4; margin-top: var(--space-5); }
  .assess .rating-option { min-height: 105px; padding: var(--space-3); }
  .assess .report-document { padding: var(--space-8); }
  .assess .report-masthead { gap: var(--space-3); }
  .assess .report-meta { gap: var(--space-4); }
  .assess .site-footer { margin-top: var(--space-12); }
}

@media screen and (max-width: 540px) {
  .assess .brand img { width: 140px; }
  .assess .header-guides { display: none; }
  .assess .header-label { font-size: var(--text-label); }
  .assess .hero-actions { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: var(--space-5); row-gap: var(--space-2); }
  .assess .hero-actions .button { font-size: var(--text-small); padding-inline: var(--space-5); }
  .assess .hero-copy h1 { font-size: clamp(2.8rem, 11vw, 3.8rem); }
  .assess .hero-facts { gap: var(--space-4); flex-wrap: wrap; }
  .assess .form-grid { grid-template-columns: minmax(0, 1fr); }
  .assess .review-choices { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .assess .review-choices .button { min-height: 50px; font-size: 1rem; }
  .assess .review-choices p { margin-top: var(--space-2); }
  .assess .featured-guide { grid-template-columns: minmax(0, 7rem) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
  .assess .featured-guide h3 { font-size: 1.3rem; }
  .assess .guide-description { font-size: var(--text-label); }
  .assess .featured-guide .text-link { font-size: var(--text-label); gap: var(--space-2); }
  .assess .download-list a { align-items: start; font-size: var(--text-small); }
  .assess .download-list a > span:last-child { gap: var(--space-2); }
  .assess .question-heading { gap: var(--space-3); }
  .assess .question-number { font-size: var(--text-label); }
  .assess #question-content h2 { font-size: 1.65rem; line-height: 1.2; }
  .assess .rating-options { grid-template-columns: minmax(0, 1fr); }
  .assess .rating-option { grid-template-columns: 20px 24px minmax(0, 1fr); min-height: 52px; padding: var(--space-3); gap: var(--space-4); align-items: center; }
  .assess .rating-number { text-align: left; font-size: 1.15rem; min-width: 0; }
  .assess .rating-word { grid-column: auto; font-size: var(--text-small); }
  .assess .alternative-options { flex-direction: column; align-items: start; gap: 0; }
  .assess .question-actions .button { min-height: 50px; }
  .assess .report-document { padding: var(--space-6) var(--space-4); }
  .assess .report-summary { padding: var(--space-5); margin-block: var(--space-6); }
  .assess .report-scores { grid-template-columns: minmax(0, 1fr); }
  .assess .report-score-secondary { border-left: 0; border-top: 1px solid var(--color-field-line); padding: var(--space-5) 0 0; }
  .assess .report-masthead h1 { font-size: 2rem; }
  .assess .report-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .assess .report-meta dd { font-size: var(--text-small); }
  .assess .report-title-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: var(--space-3); }
  .assess .report-title-actions > .review-options { grid-column: 1 / -1; }
  .assess .report-title-actions > .button { width: 100%; padding-inline: var(--space-2); }
  .assess .report-sources > ul { padding-left: var(--space-4); }
}

@media print {
  .assess .header-nav, .assess .review-steps, .assess .guide-library { display: none !important; }
  .assess .report-evidence-status { font-size: 9pt; margin-bottom: var(--space-4); }
  .assess .report-answer-heading { break-inside: avoid; break-after: avoid; }
  .assess .report-sources a::after { content: " (" attr(href) ")"; font-size: 7pt; overflow-wrap: anywhere; }
  .assess .report-sources { break-inside: auto; }
  .assess .report-sources li { break-inside: avoid; }
}



/* ==========================================================================
   Vamocles blend — tokens, type, controls. Everything below wins over the
   imported review styles, so the page follows the site in light and dark.
   ========================================================================== */
.assess {
  --color-crimson: var(--accent-text); --color-crimson-hover: var(--crimson-600, #A60C25); --color-crimson-active: var(--crimson-700, #82091D);
  --color-night: var(--night); --color-paper: var(--paper); --color-wash: var(--paper-2); --color-shape: rgb(var(--ink-rgb) / 0.08);
  --color-soft: var(--card); --color-soft-line: var(--line); --color-ink: var(--ink); --color-body: var(--ink-2); --color-muted: var(--ink-3);
  --color-line: var(--line-2); --color-field-line: var(--ink-4); --color-focus: var(--ink);
  --font-body: var(--font-text); --font-display: var(--font-sans);
  display: block; background: var(--paper); color: var(--ink); font-family: var(--font-text);
  font-size: var(--fs-body); line-height: var(--lh-body); overflow-x: clip;
}
body[data-view="report"] .assess { background: var(--paper); }
.assess h1, .assess h2, .assess h3 { font-family: var(--font-sans); font-weight: 650; letter-spacing: var(--tracking-head); color: var(--ink); text-wrap: balance; }
.assess .shell { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }

/* Hero: the site's own night hero, untouched by the review styles */
.assess .as-hero { margin: 0; }
.assess .as-hero h1.page-hero__title { font-size: var(--fs-hero); line-height: var(--lh-tight); letter-spacing: var(--tracking-mega); font-weight: var(--weight-display); color: #F5F5F7; max-width: 13ch; margin: 22px 0 0; }
.assess .as-hero .lead { margin: 28px 0 0; color: rgb(235 235 245 / 0.66); max-width: 54ch; }
.assess .as-hero .eyebrow { color: rgb(235 235 245 / 0.62); margin: 0; }
.assess .as-hero a.btn { text-decoration: none; }
.assess .as-hero .btn--primary { color: #fff; }
.assess .as-hero .btn--glass { color: #fff; }
.assess .as-facts { display: flex; flex-wrap: wrap; gap: 10px 36px; margin: 48px 0 0; padding: 22px 0 0; border-top: 1px solid rgb(255 255 255 / 0.1); list-style: none; }
.as-facts li { display: flex; align-items: baseline; gap: 10px; font-size: var(--fs-small); color: rgb(235 235 245 / 0.62); }
.as-facts b { font-size: 1.6rem; font-weight: 600; letter-spacing: -0.03em; color: #F5F5F7; font-variant-numeric: tabular-nums; }
html:not(.js) .assess .as-hero .js-only { display: none; }

/* Buttons: the site's pills */
.assess .button, .assess .button-secondary, .assess .button-quiet { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: var(--r-xs, 8px); font-family: var(--font-text); font-size: 0.98rem; font-weight: 590; letter-spacing: -0.01em; text-decoration: none; box-shadow: none; transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-exit, 200ms) var(--ease-out); }
.assess .button { background: var(--crimson); color: #fff; border: 1px solid transparent; }
@media (hover: hover) { .assess .button:not(.button-secondary):hover { background: var(--crimson-600, #A60C25); } }
.assess .button:not(.button-secondary):active { color: #fff; }
@media (hover: hover) { .assess .button:not(.button-secondary):hover { color: #fff; } }
.assess .button-secondary { background: transparent; color: var(--ink); border: 1px solid var(--ink-4); }
@media (hover: hover) { .assess .button-secondary:hover { border-color: var(--ink-3); background: rgb(var(--ink-rgb) / 0.04); } }
.assess .button-quiet { background: none; color: var(--ink-2); border: 0; padding-inline: 12px; }
.assess .button:active, .assess .button-secondary:active { transform: scale(0.97); transition-duration: var(--t-fast), var(--t-fast), var(--t-fast), var(--t-press, 90ms); }
.assess :is(.button, .button-secondary):is(:disabled, [aria-disabled="true"]) { opacity: 0.5; transform: none; }

/* Fields */
.assess input[type="text"], .assess input[type="date"], .assess input[type="email"], .assess select, .assess textarea { border-radius: var(--r-xs, 8px); background: var(--paper); color: var(--ink); border-color: var(--line-2); }

/* Questions sit clear of the sticky header when the review moves between them */
.assess #questions-view, .assess #report-view, .assess #profile-form { scroll-margin-top: 8px; }
.assess #questions-view, .assess #report-view { padding-top: calc(var(--header-h) + clamp(32px, 4vw, 56px)); padding-bottom: clamp(64px, 8vw, 112px); }

/* ---- Frosted glass: no score while answering -------------------------------------
   The score is computed as you go but stays hidden until every question is answered,
   so ratings are chosen on their merits, not to push a number up. Until then app.js and
   report.js write no figure at all ("—"); the glass is the visible cue on screen.
   Completion is an unveiling, never a celebration (the score can be 0.0): the glass fades
   over 240ms while the numerals sharpen (blur 9→0, opacity .55→1, scale .97→1) over 600ms,
   80ms later. Re-frosting takes 240ms. */
.assess .live-score { position: relative; }
.assess .score-figures { position: relative; }
.assess .live-score :is(.score-large, .score-secondary) {
  transition: filter 600ms var(--ease-out) 80ms, opacity 600ms var(--ease-out) 80ms, scale 600ms var(--ease-out) 80ms;
}
body[data-complete="false"] .assess .live-score :is(.score-large, .score-secondary) {
  filter: blur(9px); opacity: 0.55; scale: 0.97; user-select: none;
  transition-duration: 240ms; transition-delay: 0s;
}
@media screen {
  .assess .score-figures::after {
    content: "Revealed when every question is answered";
    position: absolute; inset: -4px 0; z-index: 1;
    display: grid; place-items: center; padding: 10px 14px; text-align: center;
    border-radius: var(--r-xs, 8px); font-size: 0.8125rem; font-weight: 500; line-height: 1.35; color: var(--ink-2);
    background: rgb(var(--paper-rgb) / 0.6); -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%);
    box-shadow: inset 0 0 0 1px var(--line-2);
    opacity: 0; visibility: hidden; scale: 1.02; pointer-events: none;
    transition: opacity 240ms var(--ease-soft), scale 240ms var(--ease-soft), visibility 0s linear 240ms;
  }
  body[data-complete="false"] .assess .score-figures::after { opacity: 1; visibility: visible; scale: 1; transition-delay: 0s; }

  /* The report keeps the same glass over its two figures while the review is provisional */
  body[data-complete="false"] .assess .report-scores { position: relative; }
  body[data-complete="false"] .assess .report-scores > * { filter: blur(8px); opacity: 0.55; user-select: none; }
  body[data-complete="false"] .assess .report-scores::after {
    content: "Revealed when every question is answered";
    position: absolute; inset: -8px; z-index: 1; display: grid; place-items: center; padding: 20px; text-align: center;
    border-radius: var(--r-xs, 8px); font-size: 0.9375rem; font-weight: 500; color: rgb(235 235 245 / 0.88);
    background: rgb(28 28 30 / 0.55); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14);
  }
}

/* Print: the report only — never the site header or footer */
@media print {
  vm-header, vm-footer, .assess .as-hero { display: none !important; }
  .assess #report-view { padding-top: 0; }
}

/* --------------------------------------------------------------- Form polish
   Fields line up row by row: each field's own rows hug their content instead of
   stretching to match the tallest neighbour (that stretch distorted the date). */
.assess .form-grid { align-items: start; }
.assess .field { align-content: start; grid-auto-rows: auto; }
.assess .field label { line-height: 1.4; }
.assess .field :is(input:not([type="checkbox"]):not([type="radio"]), select) { height: 52px; min-height: 52px; line-height: 1.2; }
.assess .field input[type="date"] { -webkit-appearance: none; appearance: none; display: flex; align-items: center; text-align: left; font-variant-numeric: tabular-nums; }
.assess .field input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
.assess .field input[type="date"]::-webkit-datetime-edit { padding: 0; }
.assess .field input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.55; cursor: pointer; }
.assess .field input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 0.9; }

/* Focus: a calm ink border and soft halo, the same as the site's other forms.
   Crimson is reserved for errors, so a focused field never reads as a mistake. */
.assess .field :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select) { transition: border-color 160ms var(--ease-soft), box-shadow 200ms var(--ease-soft); }
@media (hover: hover) { .assess .field :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select):hover { border-color: var(--ink-3); background: var(--paper); } }
.assess .field :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select):focus,
.assess .field :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select):focus-visible {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink), 0 0 0 4px rgb(var(--ink-rgb) / 0.12);
}
.assess .field :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select)[aria-invalid="true"],
.assess .field :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select)[aria-invalid="true"]:focus { border-color: var(--crimson); box-shadow: 0 0 0 4px rgb(var(--crimson-rgb) / 0.12); }

/* Clicked controls don't keep a ring; keyboard users still get one */
.assess :is(button, a, summary, .rating-option):focus:not(:focus-visible) { outline: none; }
.assess .rating-option:has(input:focus:not(:focus-visible)) { outline: none; }
.assess :is(section, .shell, [id$="-view"], h1, h2, h3)[tabindex="-1"]:focus { outline: none; }

/* Hero photograph, in graphite: desaturated and dimmed, sitting to the right and
   dissolving into the night surface so the headline always reads first. */
.assess .as-hero { position: relative; overflow: hidden; isolation: isolate; }
.assess .as-hero__photo { z-index: 0; }
.assess .as-hero__photo {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(62%, 1040px); height: 100%;
  object-fit: cover; object-position: 60% 30%;
  filter: grayscale(0.92) contrast(1.06) brightness(0.56);
  opacity: 0.62;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 42%), linear-gradient(0deg, transparent 0%, #000 22%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 42%), linear-gradient(0deg, transparent 0%, #000 22%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  pointer-events: none; user-select: none;
}
.assess .as-hero .page-hero__inner { position: relative; z-index: 1; }
@media (max-width: 900px) {
  /* Narrow screens: the photo sits behind the text as a faint graphite wash */
  .assess .as-hero__photo { width: 100%; object-position: 62% 20%; opacity: 0.32;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 78%); mask-image: linear-gradient(180deg, #000 0%, transparent 78%); }
}
@media print { .assess .as-hero__photo { display: none; } }

/* Report footer: date on the left, where to continue and who to ask on the right */
.assess .report-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; }
@media print {
  .assess .report-evidence-status { color: #4a4a50 !important; }
  .assess .report-footer { color: #4a4a50; }
}

/* ==========================================================================
   October 2026 review fixes — contrast in both themes, a clean printed
   report from either theme, calm controls and the assessment's motion
   (MOTION-SPEC "Assessment"). Motion is screen-only, skipped with reduced
   motion, and never hides content without JS or on paper.
   ========================================================================== */

/* Report summary: a graphite panel with light text in both themes (screen only; paper keeps the print rules) */
@media screen {
  .assess .report-summary {
    --ink: var(--night-ink); --ink-rgb: 245 245 247; --color-paper: var(--night-ink);
    --color-field-line: rgb(255 255 255 / 0.16);
    background: var(--night-2); color: var(--night-ink);
    border-radius: var(--r-md, 12px); box-shadow: inset 0 0 0 1px var(--night-line);
  }
}

/* Printing from the dark theme still produces the light report */
@media print {
  :root[data-theme="dark"] {
    color-scheme: light;
    --paper: #FFFFFF; --paper-2: #F5F5F7; --paper-3: #EBEBEF; --paper-rgb: 255 255 255;
    --ink: #0A0A0C; --ink-2: #3B3B42; --ink-3: #6B6B74; --ink-4: #73737D; --ink-rgb: 10 10 12;
    --line: rgb(10 10 12 / 0.08); --line-2: rgb(10 10 12 / 0.15);
    --accent-text: #C8102E; --accent-soft: rgb(200 16 46 / 0.08); --card: #F5F5F7;
  }
}

/* Status toast: always in view, ink on paper; crimson only marks an error */
@media screen {
  .assess .app-toast {
    position: fixed; z-index: var(--z-toast, 200); left: 0; right: 0;
    bottom: max(16px, env(safe-area-inset-bottom)); width: min(34rem, calc(100% - 32px)); margin: 0 auto;
    display: flex; align-items: flex-start; gap: 12px; padding: 12px 10px 12px 18px;
    border: 1px solid var(--line-2); border-radius: var(--r-md, 12px);
    background: var(--paper); color: var(--ink); box-shadow: var(--glass-shadow);
    font-size: var(--text-small); line-height: 1.5;
  }
  :root[data-theme="dark"] .assess .app-toast { background: var(--card); }
  .assess .app-toast[data-tone="error"] { border-color: rgb(var(--crimson-rgb) / 0.55); }
  .assess .app-toast p { flex: 1 1 auto; min-width: 0; margin: 0; padding-block: 6px; }
  .assess .app-toast__close {
    flex: 0 0 auto; display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
    border: 0; border-radius: var(--r-xs, 8px); background: transparent; color: var(--ink-3);
    transition: background-color var(--t-fast, 180ms) var(--ease-soft), color var(--t-fast, 180ms) var(--ease-soft);
  }
  .assess .app-toast__close svg { display: block; }
}
@media screen and (hover: hover) {
  .assess .app-toast__close:hover { background: rgb(var(--ink-rgb) / 0.06); color: var(--ink); }
}

/* Panels share the site's 12px corner; the saved-review notice is a plain card without a stripe */
.assess .session-banner { border-left: 0; border-radius: var(--r-md, 12px); background: var(--card); }
@media screen {
  .assess .question-feedback, .assess .question-navigation .question-jump { border-radius: var(--r-md, 12px); }
  .assess .report-callout, .assess .report-callout-critical { border: 1px solid var(--color-line); border-radius: var(--r-md, 12px); }
  .assess .report-document { border-radius: var(--r-md, 12px); }
}

/* Hero facts sit on the hero column; on phones they form three even columns */
.assess .as-facts b { min-width: 2ch; }
@media (max-width: 600px) {
  .assess .as-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .assess .as-facts li { flex-direction: column; align-items: flex-start; gap: 2px; }
}
/* On the narrowest phones each column takes the width of its own words, so "comprehensive" never runs into its neighbour */
@media (max-width: 400px) { .assess .as-facts { grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 12px; } }
@media (max-width: 480px) { .assess .as-hero .page-hero__actions .btn { flex: 1 1 100%; } }

/* The jump list never triggers iOS zoom (16px minimum on touch layouts) */
@media screen and (max-width: 760px) {
  .assess #question-select { font-size: 16px; }
}

/* Disclosures share one chevron instead of the browser's triangle */
.assess :is(.profile-context, .verification-tip, .question-notes) > summary { display: flex; align-items: center; gap: 10px; list-style: none; }
.assess :is(.profile-context, .verification-tip, .question-notes) > summary::-webkit-details-marker { display: none; }
.assess :is(.profile-context, .verification-tip, .question-notes) > summary::after {
  content: ""; flex-shrink: 0; width: 7px; height: 7px; margin-left: auto; margin-right: 3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg);
}
.assess :is(.profile-context, .verification-tip, .question-notes)[open] > summary::after { transform: rotate(225deg); }
.assess summary::after { transition: transform 240ms var(--ease-out); }

/* Reset and choice dialogs: a visible surface in dark, no tapered stripe, a calm title */
.assess dialog { border: 1px solid var(--line-2); border-radius: var(--r-md, 12px); box-shadow: var(--glass-shadow); }
:root[data-theme="dark"] .assess dialog { background: var(--card); }
.assess dialog h2 { font-size: 1.5rem; line-height: 1.2; }

/* Progress: an accessible <progress> for assistive technology, drawn as a scaleX bar */
.assess .completion-line { position: relative; }
.assess .completion-line progress {
  position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.assess .completion-bar { display: block; height: 5px; overflow: clip; background: var(--color-shape); }
.assess .completion-bar > i {
  display: block; height: 100%; background: var(--color-crimson);
  transform-origin: 0 50%; transform: scaleX(var(--done, 0)); transition: transform 420ms var(--ease-out);
}

/* Phones: the score card stacks label, figures and note, so the glass covers exactly the figures */
@media screen and (max-width: 760px) {
  .assess .live-score { display: block; }
  .assess .live-score > p:first-child { margin-bottom: var(--space-2); }
  .assess .score-figures { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-4); }
  .assess .score-figures .score-large { margin: 0; text-align: left; }
  .assess .score-figures .score-secondary { margin: 0; }
  .assess .live-score .score-note { margin-top: var(--space-3); }
}

/* ---- Motion ------------------------------------------------------------------------ */
/* Rating tiles: colour 160ms; press .98 (90ms in, 200ms out) */
.assess .rating-option {
  transition: background-color 160ms var(--ease-soft), border-color 160ms var(--ease-soft), color 160ms var(--ease-soft), transform var(--t-exit, 200ms) var(--ease-out);
}
.assess .rating-option :is(.rating-number, .rating-word) { transition: color 160ms var(--ease-soft); }
.assess .rating-option:active { transform: scale(0.98); transition-duration: 160ms, 160ms, 160ms, var(--t-press, 90ms); }

/* Feedback, the N/A reason and errors fade in over 200ms */
@keyframes as-fade { from { opacity: 0; } }
@media screen and (prefers-reduced-motion: no-preference) {
  .assess :is(.question-feedback, .na-reason, .field-error):not([hidden]) { animation: as-fade 200ms var(--ease-soft) backwards; }
}

/* Disclosures open and close over 280ms where the browser can animate to auto height.
   The clip margin keeps the fields' focus halo whole. */
@supports (interpolate-size: allow-keywords) {
  @media screen and (prefers-reduced-motion: no-preference) {
    .assess { interpolate-size: allow-keywords; }
    .assess :is(.verification-tip, .question-notes, .profile-context, .question-navigation)::details-content {
      block-size: 0; overflow: clip; overflow-clip-margin: 6px;
      transition: block-size 280ms var(--ease-out), content-visibility 280ms allow-discrete;
    }
    .assess :is(.verification-tip, .question-notes, .profile-context, .question-navigation)[open]::details-content { block-size: auto; }
  }
}

/* Dialogs: 200ms fade with an 8px rise, backdrop 240ms; the exit keeps the top layer until it ends */
@media screen and (prefers-reduced-motion: no-preference) {
  .assess dialog {
    transition: opacity 200ms var(--ease-soft), translate 280ms var(--ease-out), overlay 280ms allow-discrete, display 280ms allow-discrete;
  }
  .assess dialog:not([open]) {
    opacity: 0; translate: 0 8px;
    transition: opacity 200ms var(--ease-soft), translate 200ms var(--ease-soft), overlay 200ms allow-discrete, display 200ms allow-discrete;
  }
  .assess dialog::backdrop { transition: background-color 240ms var(--ease-soft), overlay 240ms allow-discrete, display 240ms allow-discrete; }
  .assess dialog:not([open])::backdrop { background-color: rgb(5 5 6 / 0); }
  @starting-style {
    .assess dialog[open] { opacity: 0; translate: 0 8px; }
    .assess dialog[open]::backdrop { background-color: rgb(5 5 6 / 0); }
  }
}

/* Intro blocks below the fold wait (screen only, JS only) until app.js reveals them */
@media screen { .assess .as-pending { opacity: 0; } }

/* The graphite hero photograph eases in once on load */
@keyframes as-photo { from { opacity: 0; scale: 1.015; } }
@media screen and (prefers-reduced-motion: no-preference) {
  .assess .as-hero__photo:not(.is-settled) { animation: as-photo 600ms var(--ease-out) 120ms backwards; }
  /* Arriving through the page cross-fade (theme-boot.js .vt-arrival): the fade is the entrance */
  .vt-arrival .assess .as-hero__photo { animation: none; }
}

/* Reduced motion: the element-level rule above does not reach these pseudo-elements */
@media (prefers-reduced-motion: reduce) {
  .assess ::details-content, .assess dialog::backdrop { transition: none !important; }
}

/* Section rules run with the content column, not out into the page gutter */
@media screen {
  .assess .review-steps { border-block: 0; position: relative; }
  .assess .guide-library { border-top: 0; position: relative; }
  .assess .review-steps::before, .assess .review-steps::after, .assess .guide-library::before {
    content: ""; position: absolute; left: var(--gutter); right: var(--gutter); height: 1px;
    background: var(--color-line); pointer-events: none;
  }
  .assess .review-steps::before, .assess .guide-library::before { top: 0; }
  .assess .review-steps::after { bottom: 0; }
}
/* Only the table's column headings are tinted; area names read as plain row labels */
@media screen { .assess .report-table tbody th { background: transparent; color: var(--color-ink); } }
.assess .no-js-note h2 { margin-bottom: var(--space-3); }