/* ============================================================
   Quiz Engine — quiz.css
   Editorial redesign: calm, trustworthy, 50+ optimised.
   Mobile-first. No framework. No custom fonts.
   All values use custom properties defined in :root.
   ============================================================ */

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

:root {
  /* Warm off-white palette — approachable, not clinical */
  --color-bg:             #faf9f7;
  --color-text:           #1c1c1a;
  --color-muted:          #5f5d58;
  --color-faint:          #706e68; /* raised from #9b9891 — ~4.6:1 on page bg, passes WCAG AA */
  --color-border:         #dbd9d3;
  --color-border-light:   #edeae3;
  --color-accent:         #1a5496;
  --color-accent-hover:   #143f75;
  --color-focus:          #1a5496;
  --color-surface:        #f4f3ef;
  --color-surface-warm:   #f2f0eb;
  --color-accent-subtle:  #edf3fb; /* very light accent tint — option hover */
  --color-accent-selected:#ddeafa; /* option selected background */
  --color-success:        #1a5e2a;
  --color-success-bg:     #e8f5ec;
  --color-error:          #8b1a1a;
  --color-error-bg:       #fdf0f0;

  --font-base:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 Helvetica, Arial, sans-serif;
  /* System serif stack for display headings — editorial weight without web font overhead.
     Georgia is available on macOS, iOS, Windows, and most Android builds. */
  --font-display: Georgia, "Times New Roman", serif;

  /* Narrower than before — column width optimised for reading */
  --max-content-width: 640px;
  --quiz-width:        600px;

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

  --border-radius:    8px; /* was 6px — softer, more editorial */
  --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;
}

/* ── 3. Mobile typography ─────────────────────────────────── */
/*
 * 50+ audience: do not reduce the base font on mobile.
 * 18px is the minimum for comfortable reading on small screens.
 */

@media (max-width: 640px) {
  html {
    font-size: 18px;
  }
}

/* ── 4. Layout ────────────────────────────────────────────── */

.site-header {
  border-bottom: 1px solid var(--color-border-light);
  padding: var(--space-md) 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);
}

/* Editorial tagline in the header — quiet, not a nav item */
.site-tagline {
  font-size: 0.8125rem;
  color: var(--color-faint);
  font-style: italic;
  text-align: right;
}

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

.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);
}

/* ── 5. Screens ───────────────────────────────────────────── */

.screen[hidden] {
  display: none;
}

/* ── 6. Landing screen ────────────────────────────────────── */

.landing-headline {
  font-family: var(--font-display); /* editorial serif — sets the publication register from the first word */
  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; /* serifs need less tightening than sans — optical rhythm is built in */
}

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

.landing-subheadline {
  font-size: 1.0625rem;
  color: var(--color-muted);
  margin-bottom: var(--space-xl); /* was --space-2xl (100px) — tighter rhythm to the button */
  max-width: 52ch;
  line-height: 1.72;
}

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

.trust-microcopy {
  font-size: 0.8125rem;
  color: var(--color-faint);
  margin-top: var(--space-lg);                          /* breathe above the separator */
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border-light);      /* publication byline separator — frames this as a provenance note, not small print */
  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 is required for the inline transition overlay.
 * The overlay is absolutely positioned within this container.
 */
#screen-question {
  position: relative;
}

.question-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-lg);
  font-size: 0.875rem; /* was 0.8rem (14.4px) — below safe threshold for 50+; now 15.75px */
  color: var(--color-faint);
  letter-spacing: 0.03em;
}

.question-prompt {
  font-size: 1.5625rem;
  font-weight: 700;
  line-height: 1.28;
  margin-bottom: var(--space-sm);
  color: var(--color-text);
  letter-spacing: -0.015em;
  max-width: 40ch;
}

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

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

/* ── 7a. Inline transition overlay ───────────────────────── */
/*
 * After each answer, the question fades to ~30% opacity and a centered
 * overlay appears — a soft spinner plus an optional editorial observation.
 *
 * This replaces full-screen transition cards entirely.
 * The user's selected answer stays visible beneath.
 *
 * Timing is controlled by q.transitionDuration in the JSON config (ms).
 * Default: 560ms (last question) | 580ms (all others).
 * The fade animation below (180ms) runs independently of the JS wait time.
 *
 * On prefers-reduced-motion: transition is skipped entirely (see section 21).
 */

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

.transition-inline-overlay {
  position: absolute;
  inset: 0;
  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); }
}

.transition-inline-obs {
  font-size: 0.9375rem;
  color: var(--color-muted);
  line-height: 1.65;
  text-align: center;
  max-width: 36ch;
  font-style: italic;
}

/* 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-border);
  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;
}

/* ── 8. Options ───────────────────────────────────────────── */

.options-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px; /* was 9px — more breathing room between cards */
  margin-top: var(--space-lg);
  margin-bottom: var(--space-lg);
}

/* Single-choice / preference options */

.option-btn {
  display: block;
  width: 100%;
  min-height: 60px; /* was 58px */
  padding: 16px var(--space-md); /* was 15px — slightly more generous */
  background: var(--color-surface); /* was --color-bg — slight elevation off page */
  border: 1.5px solid var(--color-border);
  border-radius: var(--border-radius);
  font-family: var(--font-base);
  font-size: 1rem; /* was 0.9375rem — 50+ readability */
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition-speed), background var(--transition-speed),
              box-shadow var(--transition-speed);
  line-height: 1.5;
}

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

.option-btn[aria-pressed="true"],
.option-btn.selected {
  border-color: var(--color-accent);
  border-width: 2px;
  background: var(--color-accent-selected);
  font-weight: 600;
}

/* Multi-select checkbox options */

.option-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  min-height: 60px; /* was 58px */
  padding: 16px var(--space-md); /* was 15px */
  border: 1.5px solid var(--color-border);
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: border-color var(--transition-speed), background var(--transition-speed);
  background: var(--color-surface); /* was --color-bg — slight elevation off page */
}

.option-check:hover {
  border-color: var(--color-accent);
  background: var(--color-accent-subtle);
}

.option-check input[type="checkbox"] {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  accent-color: var(--color-accent);
  cursor: pointer;
}

.option-check:has(input:checked),
.option-check.is-checked {
  border-color: var(--color-accent);
  border-width: 2px;
  background: var(--color-accent-selected);
}

.option-check > span {
  font-size: 1rem; /* was 0.9375rem — 50+ readability */
  color: var(--color-text);
  line-height: 1.5;
  padding-top: 1px;
}

/* ── 9. 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;
}

/* ── 10. Navigation buttons ───────────────────────────────── */

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

/* Primary button */

.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;
  box-shadow: 0 1px 4px rgba(26, 84, 150, 0.18); /* subtle lift — distinguishes from flat surface */
  transition: background var(--transition-speed), border-color var(--transition-speed),
              box-shadow var(--transition-speed);
}

.btn-primary:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  box-shadow: 0 2px 8px rgba(26, 84, 150, 0.24);
}

/* 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);
}

/* ── 11. Progress bar ─────────────────────────────────────── */

/*
 * Deliberately minimal — a thin thread of progress, not a dashboard gauge.
 * Reduced opacity keeps it informational without drawing focus.
 */

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

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

/* ── 12. Result screen — header ───────────────────────────── */

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

.result-title {
  font-family: var(--font-display); /* serif at the result moment — payoff after functional sans-serif questions */
  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;
}

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

.result-recognition {
  font-size: 1.0625rem;
  color: var(--color-text);
  line-height: 1.82; /* was 1.78 — more generous for longer recognition paragraphs */
  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);
}

/* ── 12a. Fix 0 block ─────────────────────────────────────── */
/*
 * The editorial bridge between recognition and practical steps.
 * Not a card. Not a container. A quiet, confident left-border aside.
 * Conceptually: "here's why these steps exist."
 */

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

@media (max-width: 640px) {
  .fix0-block {
    padding-left: var(--space-md); /* was --space-lg (40px) — at 375px that leaves only ~30ch; now ~38ch */
  }
}

.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;
}

/* ── 12b. 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, not boxy.
 * Separated by a light rule, left-accent stripe removed in favour
 * of the step number as the visual anchor.
 */

.fix-item {
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--color-border-light);
}

.fix-item:first-child {
  padding-top: 0;
}

.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;
}

/* ── 12c. Chunked step list ───────────────────────────────── */
/*
 * When fix.stepsList is provided in the config, steps are rendered
 * as a numbered list — significantly more scannable for 50+ readers.
 * Each item uses a subtle circular counter rather than list-style numerals.
 */

.fix-steps-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  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;
  counter-increment: none; /* handled manually below */
}

.fix-step-num {
  flex-shrink: 0;
  width: 26px; /* was 24px — easier to read at result page density */
  height: 26px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem; /* was 0.6875rem — more legible */
  font-weight: 700;
  color: var(--color-accent);
  margin-top: 1px;
  line-height: 1;
}

.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; /* was 36px — aligns with updated step num width */
}

/* ── 13. Orientation block ────────────────────────────────── */
/*
 * "The part nobody explains" — open, editorial, no box or background.
 * Just generous whitespace and clean typography.
 * The box has been removed. The section breathes on its own.
 */

.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-display); /* serif continues the editorial register into the explanatory section */
  font-size: 1.3125rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-lg);
  letter-spacing: -0.008em; /* smaller heading — serif needs even less tightening here */
  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;
}

/* ── 13a. Article continuation ────────────────────────────── */
/*
 * The guide is not a CTA. It is the natural continuation — the explanation
 * that sits behind everything the user just did.
 *
 * Treated as an editorial statement: the link title is set large and bold,
 * the surrounding context sentences make the case before the title appears.
 * A quiet note follows — human, not promotional.
 */

.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; /* was 1.1875rem — stronger visual weight as guide CTA */
  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);
}

/* Legacy orientation elements — kept for fallback config paths */

.orientation-divider {
  border: none;
  border-top: 1px solid var(--color-border-light);
  margin: var(--space-lg) 0 var(--space-md);
}

.orientation-bridge {
  font-size: 0.9375rem;
  color: var(--color-muted);
  font-style: italic;
  margin-bottom: var(--space-sm);
  line-height: 1.65;
}

.orientation-article-link {
  margin-top: var(--space-xs);
}

/* ── 14. Email capture ────────────────────────────────────── */
/*
 * A quiet, soft offer — not a gate, not a conversion moment.
 * Set into a gentle surface card to signal it as a distinct,
 * optional aside without adding visual weight.
 * The submit button is intentionally secondary — this is a courtesy offer.
 */

.email-capture {
  margin-top: var(--space-xl);
  padding: var(--space-md) var(--space-lg); /* gentle inner padding within the card */
  background: var(--color-surface); /* subtle card lift — frames it as a contained offer */
  border: 1px solid var(--color-border-light);
  border-radius: var(--border-radius);
}

.email-capture-label {
  display: block;
  font-size: 0.9375rem; /* was 0.875rem — better readability for 50+ */
  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; /* was 50px — aligned with more generous tap target */
  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); /* stays lighter than the card surface */
  transition: border-color var(--transition-speed);
}

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

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

/* Secondary-style submit — clearly a button, not an input field */
.email-submit-btn {
  min-height: 52px; /* was 50px — consistent with input height */
  padding: var(--space-xs) var(--space-md);
  background: var(--color-bg);
  color: var(--color-accent);
  border: 1.5px solid var(--color-accent); /* accent border at rest — distinguishes from adjacent input field without going full primary */
  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);
}

/* ── 15. Follow-up article (fallback when no orientation block) */

.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);
}

/* ── 16. Loading & error states ───────────────────────────── */
/*
 * Loading state: calm, branded, not alarming.
 * The ::before spinner uses the same spinner-rotate keyframe defined in §7a.
 * On prefers-reduced-motion the animation is suppressed globally — the ring
 * remains visible as a static indicator, which is sufficient.
 * No fake "scanning" or "processing" language — just a quiet wait signal.
 */

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

/* CSS-only spinner — no JS, no extra markup */
#screen-loading::before {
  content: '';
  display: block;
  width: 28px;
  height: 28px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-accent); /* brand blue segment — calm, not alarming */
  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);
}

/* ── 17. 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;
}

/* ── 18. Reduced motion ───────────────────────────────────── */
/*
 * Article page, prose page (about/privacy), and home page styles
 * have moved to article.css. Load both files on non-quiz pages:
 *   <link rel="stylesheet" href="/quiz/css/quiz.css">
 *   <link rel="stylesheet" href="/quiz/css/article.css">
 */

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

  html {
    scroll-behavior: auto;
  }

  /* With reduced motion: skip the fade entirely */
  #screen-question.is-transitioning > :not(.transition-inline-overlay) {
    opacity: 1;
  }
}

/* ── 22. 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 {
    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 {
    border: 0.5pt solid #999;
    color: #333;
    background: none;
  }

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