/* ============================================================
   Quiz Engine — quiz.css
   Direction B Hybrid: Modern Longform · Editorial Feedback · Consumer Accessibility
   Single clean file. No overlay. No meridian.css.

   Architecture:
    1. Custom properties (tokens)
    2. Reset & base
    3. Site layout (header, footer, column)
    4. Screen management
    5. Landing screen (editorial flat layout)
    6. Sample question preview
    7. Question screen
    8. Inline transition overlay
    9. Why we ask expandable
   10. Options (editorial rows — no cards)
   11. Validation message
   12. Navigation buttons
   13. Progress bar
   14. Result screen — header
   15. Fix 0 editorial bridge
   16. Result steps section
   17. Email capture
   18. Article continuation / followup
   19. Orientation block
   20. Loading & error states
   21. Focus rings
   22. Reduced motion
   23. Print
   ============================================================ */


/* ── 1. Custom properties ─────────────────────────────────── */

:root {
  /* Cool white palette — aligned to SafeBrowsingCheck.com */
  --color-bg:             #ffffff;
  --color-text:           #1c1c1a;
  --color-muted:          #4a5568;
  --color-faint:          #718096;
  --color-border:         #e2e8f0;
  --color-border-light:   #f1f5f9;
  --color-accent:         #1a5496;
  --color-accent-hover:   #143f75;
  --color-focus:          #1a5496;
  --color-surface:        #f8faff;
  --color-surface-warm:   #eff6ff;
  --color-accent-subtle:  #eff6ff;
  --color-accent-selected:#dbeafe;
  --color-success:        #1a5e2a;
  --color-success-bg:     #e8f5ec;
  --color-error:          #8b1a1a;
  --color-error-bg:       #fdf0f0;

  /* Typography
     --font-display uses Lora — reserved for landing headline, result title,
     and inline observation text only. Questions use --font-base (system sans). */
  --font-base:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                  Helvetica, Arial, sans-serif;
  --font-display: 'Lora', Georgia, "Times New Roman", serif;

  /* Column — ~58ch at 18px base, optimal for reading */
  --max-content-width: 640px;
  --quiz-width:        580px;

  /* Vertical rhythm */
  --space-xs:  8px;
  --space-sm:  14px;
  --space-md:  24px;
  --space-lg:  40px;
  --space-xl:  64px;
  --space-2xl: 100px;

  /* Geometry — modest radius: practical guide, not app/SaaS */
  --border-radius:    6px;
  --transition-speed: 200ms;
}


/* ── 2. Reset & base ──────────────────────────────────────── */

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

html {
  font-size: 18px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-base);
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* 50+ audience: do not reduce base font on mobile */
@media (max-width: 640px) {
  html {
    font-size: 18px;
  }
}


/* ── 3. Site layout ───────────────────────────────────────── */

/* Header — publication masthead with structural rule */
.site-header {
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-md);
  background: var(--color-bg);
}

.site-header-inner {
  max-width: var(--max-content-width);
  margin: 0 auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
}

.site-logo {
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--color-text);
  text-decoration: none;
  letter-spacing: 0.01em;
  flex-shrink: 0;
}

.site-logo:hover {
  color: var(--color-accent);
}

.site-tagline {
  font-size: 0.8125rem;
  color: var(--color-faint);
  font-style: italic;
  text-align: right;
}

/* Main editorial column */
#quiz-root {
  max-width: var(--quiz-width);
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md) var(--space-2xl);
  min-height: 70vh;
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--color-border-light);
  padding: var(--space-lg) var(--space-md);
  color: var(--color-faint);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.site-footer-inner {
  max-width: var(--max-content-width);
  margin: 0 auto;
}

.site-footer p + p {
  margin-top: var(--space-xs);
}

.site-footer a {
  color: var(--color-faint);
}

.site-footer a:hover {
  color: var(--color-accent);
}

/* Quiz-mode: suppress header/footer chrome during active quiz flow.
   Applied by quiz.js on boot. Does not affect homepage or article pages. */
body.quiz-mode .site-header,
body.quiz-mode .site-footer {
  display: none;
}

body.quiz-mode #quiz-root {
  padding-top: var(--space-xl);
}


/* ── 4. Screen management ─────────────────────────────────── */

.screen[hidden] {
  display: none;
}


/* ── 5. Landing screen ────────────────────────────────────── */
/*
 * Editorial flat layout — no card, no shadow, no SaaS feel.
 * Content flows in the quiz column like a publication.
 * The landing-card class is preserved for JS compatibility
 * but carries no visual card treatment.
 */

.landing-card {
  /* intentionally empty — no background, no border, no shadow */
}

/* Eyebrow — editorial metadata label above the headline */
.landing-eyebrow {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
}

/* Large Lora headline — publication register from the first word */
.landing-headline {
  font-family: var(--font-display);
  font-size: 2.375rem;
  font-weight: 700;
  line-height: 1.12;
  margin-bottom: var(--space-md);
  max-width: 22ch;
  color: var(--color-text);
  letter-spacing: -0.015em;
}

@media (max-width: 640px) {
  .landing-headline {
    font-size: 1.875rem;
  }
}

/* Editorial lede — readable sans body */
.landing-subheadline {
  font-size: 1.0625rem;
  color: var(--color-muted);
  margin-bottom: var(--space-lg);
  max-width: 52ch;
  line-height: 1.72;
}

.landing-start-area {
  margin-bottom: var(--space-md);
}

/* Trust metadata row — byline-style provenance note with rule above */
.trust-microcopy {
  font-size: 0.8125rem;
  color: var(--color-faint);
  margin-top: var(--space-lg);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border-light);
  line-height: 1.5;
  max-width: 40ch;
}

.secondary-line {
  font-size: 0.875rem;
  color: var(--color-muted);
  margin-top: var(--space-sm);
}


/* ── 7. Question screen ───────────────────────────────────── */
/*
 * position: relative required for the inline transition overlay.
 */

#screen-question {
  position: relative;
}

/* Editorial annotation register — metadata, not label */
.question-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-lg);
  font-size: 0.75rem;
  color: var(--color-faint);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}

/* Question prompt — system sans, guide register (Lora reserved for landing/result) */
.question-prompt {
  font-family: var(--font-base);
  font-size: 1.6875rem;
  font-weight: 700;
  line-height: 1.3;
  margin-top: var(--space-lg);
  margin-bottom: var(--space-md);
  color: var(--color-text);
  letter-spacing: -0.01em;
  max-width: 40ch;
}

@media (max-width: 640px) {
  .question-prompt {
    font-size: 1.375rem;
  }
}

.helper-text {
  font-size: 0.9375rem;
  color: var(--color-muted);
  margin-bottom: var(--space-md);
  line-height: 1.55;
}

/* Mobile tap target floor — 56px WCAG 2.5.5 minimum, we preserve 60px */
@media (max-width: 640px) {
  .option-btn,
  .option-check {
    min-height: 60px;
    padding-top: 18px;
    padding-bottom: 18px;
  }

  .option-btn {
    display: flex;
    align-items: center;
  }
}


/* ── 8. Inline transition overlay ─────────────────────────── */
/*
 * After each answer the overlay covers the full question area with the
 * page background, then shows a spinner + optional observation text.
 * Previous question content is faded to opacity 0 so no ghost text
 * bleeds through the overlay.
 * Duration is controlled by q.transitionDuration in the config (ms).
 * Default: 560ms (last question) | 580ms (all others).
 * On prefers-reduced-motion: skipped entirely (see §22).
 */

#screen-question.is-transitioning > :not(.transition-inline-overlay) {
  opacity: 0;
  transition: opacity 180ms ease;
  pointer-events: none;
  user-select: none;
}

.transition-inline-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: var(--space-xl) var(--space-md);
  pointer-events: none;
  animation: overlay-fade-in 200ms ease forwards;
}

@keyframes overlay-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.transition-spinner-wrap {
  width: 34px;
  height: 34px;
}

.transition-spinner-ring {
  width: 34px;
  height: 34px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: spinner-rotate 750ms linear infinite;
}

@keyframes spinner-rotate {
  to { transform: rotate(360deg); }
}

/* Observation text — Lora italic: columnist's aside, not quiz software output */
.transition-inline-obs {
  font-family: var(--font-display);
  font-size: 1rem;
  font-style: italic;
  color: var(--color-text);
  line-height: 1.75;
  text-align: center;
  max-width: 30ch;
}


/* ── 9. Why we ask expandable ─────────────────────────────── */

.why-we-ask {
  margin-bottom: var(--space-md);
}

.why-we-ask-toggle {
  background: none;
  border: none;
  color: var(--color-accent);
  font-size: 0.875rem;
  font-family: var(--font-base);
  cursor: pointer;
  padding: 4px 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.why-we-ask-toggle:hover {
  color: var(--color-accent-hover);
}

.why-we-ask-content {
  margin-top: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface);
  border-left: 2px solid var(--color-accent);
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  font-size: 0.875rem;
  color: var(--color-muted);
  line-height: 1.65;
}

.why-we-ask-content[hidden] {
  display: none;
}


/* ── 10. Options — editorial rows ─────────────────────────── */
/*
 * Full-bleed text rows with top-rule separators. Not cards.
 * No visible form controls — native checkboxes are hidden; selection
 * is marked by a 3px left accent rule + font-weight 600 on the text.
 * No hover lift. No shadows. No border all-around.
 * Reads like a typographically-selected list in a publication.
 */

.options-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: var(--space-xl);
  margin-bottom: var(--space-xl);
  /* closes the final row */
  border-bottom: 1px solid var(--color-border-light);
}

/* Single-choice / preference options */

.option-btn {
  display: block;
  width: 100%;
  min-height: 60px;
  padding: 16px var(--space-md);
  padding-left: calc(var(--space-md) - 3px); /* -3px reserves left-border space */
  background: transparent;
  border: none;
  border-top: 1px solid var(--color-border-light);
  border-left: 3px solid transparent;         /* invisible by default; accent on select */
  border-radius: 0;
  font-family: var(--font-base);
  font-size: 1rem;
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-speed);
  line-height: 1.5;
}

.option-btn:hover {
  background: rgba(26, 84, 150, 0.035);
  /* no lift, no shadow, no border color change — keep rows calm */
}

.option-btn[aria-pressed="true"],
.option-btn.selected {
  background: transparent;
  border-left-color: var(--color-accent);
  font-weight: 600;
  /* left rule is the only mark — no fill, no card border */
}

.option-btn:disabled {
  cursor: default;
  pointer-events: none;
}

/* Multi-select checkbox options */

.option-check {
  display: flex;
  align-items: center;
  gap: 0;
  position: relative; /* contains the absolutely-positioned hidden checkbox */
  min-height: 60px;
  padding: 16px var(--space-md);
  padding-left: calc(var(--space-md) - 3px); /* -3px reserves left-border space */
  background: transparent;
  border: none;
  border-top: 1px solid var(--color-border-light);
  border-left: 3px solid transparent;         /* invisible by default; accent on select */
  border-radius: 0;
  cursor: pointer;
  transition: background var(--transition-speed);
}

.option-check:hover {
  background: rgba(26, 84, 150, 0.035);
  /* no lift, no shadow */
}

/* Visually hidden — kept in accessibility tree for screen readers and keyboard nav */
.option-check input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  pointer-events: none;
}

.option-check:has(input:checked),
.option-check.is-checked {
  background: transparent;
  border-left-color: var(--color-accent);
  /* left rule is the only mark — no fill, no card border */
}

.option-check > span {
  font-size: 1rem;
  color: var(--color-text);
  line-height: 1.5;
}

/* Bold text on selected checkbox rows */
.option-check.is-checked > span,
.option-check:has(input:checked) > span {
  font-weight: 600;
  color: var(--color-text);
}

/* Keyboard focus indicator — shown when checkbox receives focus */
.option-check:focus-within {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}


/* ── 11. Validation message ───────────────────────────────── */

.validation-msg {
  font-size: 0.875rem;
  color: var(--color-error);
  background: var(--color-error-bg);
  border: 1px solid #e8b4b4;
  border-radius: var(--border-radius);
  padding: var(--space-xs) var(--space-md);
  margin-bottom: var(--space-md);
}

.validation-msg[hidden] {
  display: none;
}


/* ── 12. Navigation buttons ───────────────────────────────── */

.question-nav {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-top: var(--space-md);
}

/* Primary button — flat, strong color, no shadow */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: var(--space-sm) var(--space-lg);
  background: var(--color-accent);
  color: #ffffff;
  border: 2px solid var(--color-accent);
  border-radius: var(--border-radius);
  font-family: var(--font-base);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  letter-spacing: 0.01em;
  /* no box-shadow — flat editorial surface */
  transition: background var(--transition-speed), border-color var(--transition-speed);
}

.btn-primary:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

/* Mobile: full-width confirm/next — Direction C accessibility borrow.
   Scoped to .question-nav to avoid affecting the landing Start button. */
@media (max-width: 640px) {
  .question-nav .btn-primary {
    width: 100%;
    justify-content: center;
  }
}

/* Secondary button — Back */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: var(--space-sm) var(--space-md);
  background: transparent;
  color: var(--color-muted);
  border: 1.5px solid var(--color-border);
  border-radius: var(--border-radius);
  font-family: var(--font-base);
  font-size: 0.9375rem;
  cursor: pointer;
  transition: border-color var(--transition-speed), color var(--transition-speed);
}

.btn-secondary:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}


/* ── 13. Progress bar ─────────────────────────────────────── */
/*
 * A thin thread of progress — informational, not a dashboard gauge.
 * 3px height, higher opacity for 50+ legibility.
 */

.progress-bar-wrap {
  height: 3px;
  background: var(--color-border-light);
  border-radius: 2px;
  margin-bottom: var(--space-sm);
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: var(--color-accent);
  border-radius: 2px;
  opacity: 0.85;
  transition: width 600ms ease;
}


/* ── 14. Result screen — header ───────────────────────────── */
/*
 * Result feels like a published conclusion.
 * The ::before accent rule is a CSS-only editorial section opener —
 * like the rule above a print byline. No JS required.
 */

.result-header {
  margin-bottom: var(--space-2xl);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-border-light);
}

.result-title {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.18;
  margin-bottom: var(--space-md);
  color: var(--color-text);
  letter-spacing: -0.015em;
  max-width: 32ch;
}

/* Short accent rule above the result title — editorial section opener */
.result-title::before {
  content: '';
  display: block;
  width: 28px;
  height: 2px;
  background: var(--color-accent);
  margin-bottom: var(--space-md);
}

@media (max-width: 640px) {
  .result-title {
    font-size: 1.625rem;
  }
}

.result-recognition {
  font-size: 1.0625rem;
  color: var(--color-text);
  line-height: 1.82;
  max-width: 58ch;
}

.result-summary {
  font-size: 0.9375rem;
  color: var(--color-muted);
  max-width: 58ch;
  line-height: 1.75;
  margin-bottom: var(--space-md);
}


/* ── 15. Fix 0 editorial bridge ───────────────────────────── */
/*
 * The editorial aside between recognition and practical steps.
 * A quiet, confident left-border block — not a card.
 * "Here's why these steps exist."
 */

.fix0-block {
  margin: var(--space-xl) 0;
  padding-left: var(--space-lg);
  border-left: 2px solid var(--color-accent);
}

@media (max-width: 640px) {
  .fix0-block {
    padding-left: var(--space-md);
  }
}

.fix0-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  margin-bottom: 6px;
}

.fix0-body {
  font-size: 0.9375rem;
  color: var(--color-muted);
  line-height: 1.72;
  max-width: 52ch;
  font-style: italic;
}


/* ── 16. Result steps section ─────────────────────────────── */

.result-steps-section {
  margin-bottom: var(--space-xl);
}

.fixes-heading {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-faint);
  margin-bottom: var(--space-lg);
}

.fixes-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Fix items: open, editorial, separated by light rules */
.fix-item {
  padding: var(--space-xl) 0;
  border-bottom: 1px solid var(--color-border-light);
}

.fix-item:first-child {
  padding-top: var(--space-md);
}

.fix-item:last-child {
  border-bottom: none;
}

.fix-number {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin-bottom: 6px;
}

.fix-title {
  font-size: 1.0625rem;
  font-weight: 700;
  margin-bottom: var(--space-sm);
  line-height: 1.35;
  color: var(--color-text);
}

.fix-steps {
  font-size: 0.9375rem;
  color: var(--color-muted);
  line-height: 1.75;
  max-width: 58ch;
}

/* Chunked step list — significantly more scannable for 50+ readers */
.fix-steps-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 58ch;
}

.fix-steps-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 0.9375rem;
  color: var(--color-muted);
  line-height: 1.7;
}

.fix-step-num {
  flex-shrink: 0;
  width: auto;
  height: auto;
  min-width: 1.5em;
  background: transparent;
  border: none;
  border-radius: 0;
  display: inline;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-accent);
  margin-top: 0;
  line-height: 1.7;
}

.fix-step-num::after {
  content: ".";
}

.fix-step-text {
  flex: 1;
}

.fix-note {
  margin-top: var(--space-sm);
  font-size: 0.875rem;
  color: var(--color-faint);
  font-style: italic;
  line-height: 1.55;
  padding-left: 38px;
}


/* ── 17. Email capture ────────────────────────────────────── */
/*
 * A quiet courtesy offer — not a gate, not a conversion moment.
 * A gentle surface card sets it apart as an optional aside.
 */

.email-capture {
  margin-top: var(--space-xl);
  padding: var(--space-md) var(--space-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--border-radius);
}

.email-capture-label {
  display: block;
  font-size: 0.9375rem;
  color: var(--color-muted);
  margin-bottom: var(--space-sm);
  max-width: 52ch;
  line-height: 1.55;
  font-weight: 400;
}

.email-capture-privacy {
  font-size: 0.8125rem;
  color: var(--color-faint);
  margin-top: var(--space-xs);
  line-height: 1.5;
}

.email-input-row {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
  max-width: 420px;
}

.email-input {
  flex: 1 1 200px;
  min-height: 52px;
  padding: var(--space-xs) var(--space-sm);
  border: 1.5px solid var(--color-border);
  border-radius: var(--border-radius);
  font-family: var(--font-base);
  font-size: 0.9375rem;
  color: var(--color-text);
  background: var(--color-bg);
  transition: border-color var(--transition-speed);
}

.email-input:focus {
  border-color: var(--color-accent);
}

.email-input:focus:not(:focus-visible) {
  outline: 0;
}

.email-submit-btn {
  min-height: 52px;
  padding: var(--space-xs) var(--space-md);
  background: var(--color-bg);
  color: var(--color-accent);
  border: 1.5px solid var(--color-accent);
  border-radius: var(--border-radius);
  font-family: var(--font-base);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-speed), border-color var(--transition-speed);
  white-space: nowrap;
}

.email-submit-btn:hover {
  background: var(--color-accent-subtle);
  border-color: var(--color-accent);
}

.email-feedback {
  margin-top: var(--space-sm);
  font-size: 0.875rem;
}

.email-feedback[hidden] {
  display: none;
}

.email-feedback.success {
  color: var(--color-success);
  background: var(--color-success-bg);
  border: 1px solid #a3d4af;
  border-radius: var(--border-radius);
  padding: var(--space-xs) var(--space-sm);
}

.email-feedback.error {
  color: var(--color-error);
  background: var(--color-error-bg);
  border: 1px solid #e8b4b4;
  border-radius: var(--border-radius);
  padding: var(--space-xs) var(--space-sm);
}


/* ── 18. Article continuation / follow-up ─────────────────── */
/*
 * The guide as natural continuation — not a CTA.
 * The link title is large and editorial; surrounding sentences
 * make the case before it appears.
 */

.article-continuation {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border-light);
}

.continuation-bridge {
  font-size: 0.9375rem;
  color: var(--color-muted);
  font-style: italic;
  line-height: 1.68;
  max-width: 54ch;
  margin-bottom: var(--space-md);
}

.continuation-link {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
  text-decoration: none;
  line-height: 1.32;
  max-width: 42ch;
  padding-bottom: 3px;
  border-bottom: 2px solid var(--color-accent);
  transition: color var(--transition-speed);
  letter-spacing: -0.01em;
}

.continuation-link:hover {
  color: var(--color-accent);
}

.continuation-note {
  font-size: 0.875rem;
  color: var(--color-faint);
  font-style: italic;
  line-height: 1.55;
  max-width: 52ch;
  margin-top: var(--space-sm);
}

/* Fallback: no orientation block — plain article link */
.followup-article {
  border-top: 1px solid var(--color-border-light);
  padding-top: var(--space-lg);
  margin-top: var(--space-xl);
}

.followup-framing {
  font-size: 0.9375rem;
  color: var(--color-muted);
  margin-bottom: var(--space-xs);
  line-height: 1.65;
}

.followup-link {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.followup-link:hover {
  color: var(--color-accent-hover);
}


/* ── 19. Orientation block ────────────────────────────────── */
/*
 * "The part nobody explains" — open, editorial, no box.
 * Generous whitespace and clean typography only.
 */

.orientation-block {
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-border-light);
}

.orientation-heading {
  font-family: var(--font-base);
  font-size: 1.3125rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-lg);
  letter-spacing: -0.008em;
  max-width: 30ch;
  line-height: 1.3;
}

.orientation-para {
  font-size: 0.9375rem;
  color: var(--color-muted);
  line-height: 1.78;
  max-width: 62ch;
  margin-bottom: var(--space-md);
}

.orientation-para:last-of-type {
  margin-bottom: 0;
}


/* ── 20. Loading & error states ───────────────────────────── */
/*
 * Loading: calm, branded, not alarming.
 * CSS-only spinner using spinner-rotate keyframe defined in §8.
 */

#screen-loading {
  padding: var(--space-xl) 0;
  color: var(--color-faint);
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
}

/*
 * Override: #screen-loading has display:flex (specificity 1,0,0) which wins
 * over .screen[hidden] (0,1,1). ID+attribute selector (1,0,1) restores it.
 */
#screen-loading[hidden] {
  display: none;
}

#screen-loading::before {
  content: '';
  display: block;
  width: 28px;
  height: 28px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: spinner-rotate 900ms linear infinite;
}

.load-error {
  padding: var(--space-xl) 0;
}

.load-error p {
  margin-bottom: var(--space-md);
  color: var(--color-muted);
}


/* ── 21. Focus rings (never suppressed) ───────────────────── */

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

.email-input:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 0;
}


/* ── 22. Reduced motion ───────────────────────────────────── */

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

  html {
    scroll-behavior: auto;
  }

  #screen-question.is-transitioning > :not(.transition-inline-overlay) {
    opacity: 1;
  }
}


/* ── 23. Print styles (result page) ──────────────────────── */

@media print {
  .site-header,
  .site-footer,
  .question-nav,
  .email-capture,
  .orientation-block,
  .followup-article,
  .btn-primary,
  .btn-secondary {
    display: none;
  }

  body {
    font-size: 12pt;
    color: #000;
    background: #fff;
  }

  #quiz-root {
    max-width: 100%;
    padding: 0;
  }

  .result-title::before {
    display: none;
  }

  .result-title {
    font-size: 18pt;
    margin-bottom: 10pt;
    letter-spacing: 0;
  }

  .result-recognition {
    font-size: 11pt;
    color: #222;
    line-height: 1.6;
    margin-bottom: 14pt;
    max-width: 100%;
  }

  .fix0-block {
    display: none;
  }

  .fix-item {
    border: none;
    border-bottom: 0.5pt solid #ccc;
    padding: 10pt 0;
    page-break-inside: avoid;
  }

  .fix-title {
    font-size: 13pt;
  }

  .fix-steps,
  .fix-step-text {
    font-size: 11pt;
    color: #333;
  }

  .fix-step-num {
    color: #333;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #555;
  }
}