/* Risk Profiler.
   Layers on top of site.css — every token comes from there, no new colours.

   Mobile note: issues.md records the client's complaint that service-card type
   was too small on phones. Nothing here goes below 16px, and options sit at 17px
   with generous tap targets. */

/* ---------- Stage ---------- */

/* Header height comes from site.css .nav: 92px, 82px under 960, 76px under 420.
   The sticky progress bar has to sit exactly below it at every breakpoint. */
.quiz-stage {
  min-height: calc(100svh - 92px);
  display: flex;
  flex-direction: column;
  padding-bottom: clamp(32px, 6vw, 64px);
}

.quiz-screen { display: none; }
.quiz-screen.is-active { display: block; }

/* Each new screen moves focus to its heading so screen readers announce it.
   That is an assistive affordance, not a keyboard target, so it must not paint
   a focus ring around the question. */
.quiz-screen h1[tabindex="-1"]:focus,
.quiz-screen h2[tabindex="-1"]:focus { outline: none; }

/* ---------- Progress ---------- */

.quiz-progress {
  position: sticky;
  top: 92px;
  z-index: 20;
  background: var(--ground);
  padding: 14px 0 12px;
  border-bottom: 1px solid var(--hairline);
}
.quiz-progress-inner {
  display: flex;
  align-items: center;
  gap: 16px;
}
.quiz-progress-track {
  flex: 1;
  height: 3px;
  background: var(--hairline);
  border-radius: 999px;
  overflow: hidden;
}
/* scaleX rather than width: width animation relayouts the header on every frame
   of a 450ms transition, thirteen times per run. transform is composited. */
.quiz-progress-fill {
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: var(--gold);
  border-radius: 999px;
  transition: transform .45s var(--ease);
}
@media (prefers-reduced-motion: reduce) { .quiz-progress-fill { transition: none; } }
.quiz-progress-label {
  font-family: "Figtree", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--neutral);
  white-space: nowrap;
}

/* ---------- Intro ---------- */

.quiz-intro {
  padding: clamp(40px, 8vw, 88px) 0 0;
  max-width: 720px;
}
.quiz-intro h1 {
  font-size: clamp(40px, 6.4vw, 74px); /* DESIGN.md → typography.display */
  letter-spacing: -0.03em;
  line-height: 1.06;
  margin-bottom: 22px;
}
.quiz-intro .lede {
  font-size: clamp(17px, 2.1vw, 20px);
  color: var(--ink-soft);
  margin-bottom: 18px;
  max-width: 56ch;
}
.quiz-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 30px 0 34px;
  padding-top: 22px;
  border-top: 1px solid var(--hairline);
}
.quiz-meta div {
  font-size: 14.5px;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 9px;
}
.quiz-meta svg { color: var(--gold-ink); flex: none; }

/* The three characters, previewed before you start. */
.quiz-cast {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 2vw, 22px);
  margin: 40px 0;
}
.quiz-cast figure { margin: 0; text-align: center; }
/* height:auto is load-bearing. The width/height HTML attributes map to CSS
   presentational hints, and a hinted height defeats aspect-ratio — without this
   the square source renders at its full 1024px intrinsic height. */
.quiz-cast img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--r-lg);
  border: 1px solid var(--hairline);
  background: var(--raised);
}
.quiz-cast figcaption {
  font-family: "Schibsted Grotesk", sans-serif;
  font-weight: 600;
  font-size: clamp(15px, 2vw, 18px);
  margin-top: 12px;
}
.quiz-cast .cast-sub {
  display: block;
  font-family: "Figtree", sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--neutral);
  margin-top: 3px;
}

/* ---------- Question ---------- */

.quiz-q {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  padding: clamp(28px, 5vw, 56px) 0;
}

/* The model returns square 1024x1024 regardless of any aspect-ratio instruction
   in the prompt, so the frame is square on desktop — full composition, no crop.
   Phones get a 4:3 crop so the image does not eat the whole viewport. */
.quiz-figure {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--raised);
  border: 1px solid var(--hairline);
  aspect-ratio: 1;
}
.quiz-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Real vector data, composited over the painted scene. The image model never
   renders a number — see RISK-PROFILER.md section 4. */
.quiz-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.quiz-overlay svg { width: 100%; height: 100%; display: block; }
.quiz-overlay .ov-line {
  fill: none;
  stroke: var(--navy);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}
.is-active .quiz-overlay .ov-line { animation: ov-draw 1.1s var(--ease) .25s forwards; }
@keyframes ov-draw { to { stroke-dashoffset: 0; } }

.quiz-overlay .ov-fill { fill: var(--navy); opacity: .08; }
.quiz-overlay .ov-figure {
  font-family: "Schibsted Grotesk", sans-serif;
  font-weight: 600;
  font-size: 30px;
  letter-spacing: -0.02em;
  fill: var(--gold-ink);
}
.quiz-overlay .ov-caption {
  font-family: "Figtree", sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  fill: var(--neutral);
}
.quiz-overlay .ov-plate {
  fill: var(--ground);
  opacity: .93;
}
@media (prefers-reduced-motion: reduce) {
  .is-active .quiz-overlay .ov-line { animation: none; stroke-dashoffset: 0; }
}

.quiz-prompt h2 {
  font-size: clamp(30px, 4vw, 46px); /* DESIGN.md → typography.headline */
  line-height: 1.06;
  margin-bottom: 12px;
}
.quiz-prompt .q-sub {
  font-size: 17px;
  color: var(--ink-soft);
  margin-bottom: 26px;
}

.quiz-options {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.quiz-option {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 17px;
  line-height: 1.4;
  color: var(--ink);
  background: var(--raised);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: 17px 20px;
  cursor: pointer;
  transition: border-color .2s, background .2s, transform .2s var(--ease);
}
.quiz-option:hover {
  border-color: var(--gold);
  transform: translateY(-1px);
}
.quiz-option.is-chosen {
  border-color: var(--navy);
  background: var(--gold-tint);
}
@media (prefers-reduced-motion: reduce) { .quiz-option:hover { transform: none; } }

.quiz-nav {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
}
.quiz-back {
  background: none;
  border: none;
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--neutral);
  cursor: pointer;
  padding: 8px 0;
}
.quiz-back:hover { color: var(--ink); }
.quiz-back[hidden] { display: none; }

/* ---------- Result ---------- */

.quiz-result { padding: clamp(32px, 6vw, 72px) 0 0; }
.quiz-result-head {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.quiz-result-portrait {
  width: 100%;
  height: auto; /* see note on .quiz-cast img */
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--r-lg);
  border: 1px solid var(--hairline);
}
.quiz-result-eyebrow {
  font-family: "Figtree", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 14px;
}
.quiz-result h1 {
  font-size: clamp(40px, 6.4vw, 74px); /* DESIGN.md → typography.display */
  letter-spacing: -0.03em;
  line-height: 1.06;
  margin-bottom: 10px;
}
.quiz-result .result-strap {
  font-size: clamp(18px, 2.4vw, 23px);
  color: var(--ink-soft);
  margin-bottom: 22px;
}

/* The cap callout. This sentence is the smartest moment on the page and keeps its
   weight — but it earns it with a labelled panel in the site's own editorial idiom,
   not a coloured bar down one side. */
.quiz-cap {
  background: var(--gold-tint);
  border: 1px solid var(--gold-soft);
  padding: 20px 24px;
  border-radius: var(--r-md);
  margin: 24px 0;
  font-size: 16.5px;
  color: var(--ink);
}
.quiz-cap-label {
  font-family: "Figtree", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 8px;
}
.quiz-cap strong { font-weight: 600; }

.quiz-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 36px);
  margin: clamp(36px, 6vw, 64px) 0;
  padding-top: clamp(30px, 5vw, 48px);
  border-top: 1px solid var(--hairline);
}
.quiz-detail h3 {
  font-size: 13px;
  font-family: "Figtree", sans-serif;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 12px;
}
.quiz-detail p { font-size: 16.5px; color: var(--ink-soft); }

.quiz-selfcheck {
  font-size: 16.5px;
  color: var(--ink-soft);
  padding: 20px 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: clamp(32px, 5vw, 52px);
}
.quiz-selfcheck strong { color: var(--ink); font-weight: 600; }

/* ---------- Disclaimer ----------
   Never collapse, never hide behind a toggle. This is what keeps the tool an
   educational icebreaker rather than a regulated assessment. */

.quiz-disclaimer {
  background: var(--raised);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: 22px 24px;
  margin: clamp(28px, 4vw, 40px) 0;
}
.quiz-disclaimer h3 {
  font-family: "Figtree", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--neutral);
  margin-bottom: 10px;
}
.quiz-disclaimer p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.quiz-disclaimer p + p { margin-top: 9px; }

/* ---------- Capture ---------- */

.quiz-capture {
  background: var(--ground-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: clamp(26px, 4vw, 40px);
  margin-bottom: clamp(32px, 5vw, 56px);
}
.quiz-capture h2 { font-size: clamp(22px, 3vw, 30px); margin-bottom: 10px; }
.quiz-capture > p { color: var(--ink-soft); margin-bottom: 24px; max-width: 54ch; }

.quiz-consent {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin: 18px 0 6px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.quiz-consent input {
  margin: 3px 0 0;
  width: 17px;
  height: 17px;
  flex: none;
  accent-color: var(--navy);
}
.quiz-consent a { text-decoration: underline; text-underline-offset: 2px; }

.quiz-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

/* Honeypot. Off-screen rather than display:none — some bots skip hidden fields. */
.quiz-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Homepage band + nav attractor ---------- */

.rp-band-inner {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.rp-band-cast { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.rp-band-cast img {
  width: 100%;
  height: auto; /* see note on .quiz-cast img */
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--r-md);
  border: 1px solid var(--hairline);
}

/* The nav attractor: a small gold dot that breathes. Reduced motion turns the
   animation off but keeps the dot, so the affordance never disappears.

   The dot is a real <span>, not ::after — site.css already uses .nav-links a::after
   for the hover underline, and claiming it here kills that underline. */
.nav-new {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.nav-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  flex: none;
  animation: nav-pulse 2.4s var(--ease) infinite;
}
@keyframes nav-pulse {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 55%, transparent); }
  50%      { opacity: .75; transform: scale(1.15); box-shadow: 0 0 0 5px color-mix(in srgb, var(--gold) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-new::after { animation: none; }
}

/* ---------- The report document ----------
   Hidden on screen; the only thing that prints. Downloading is the browser's
   own print-to-PDF, which gives crisp vector text in the real brand typeface,
   selectable and screen-readable, with no JavaScript library shipped to anyone.
   The same markup is what the server renders for the emailed attachment. */

.report-doc { display: none; }

@media print {
  /* Everything that is not the report leaves the page.
     Scoped to direct children of body: the report has its own <header> and
     <footer>, and an unscoped selector here silently deletes the masthead and
     the regulatory block from the printed document. */
  body > header,
  body > footer,
  .quiz-progress,
  .quiz-intro,
  .quiz-q,
  .quiz-result-head,
  .quiz-detail,
  .quiz-selfcheck,
  .quiz-cap,
  .quiz-disclaimer,
  .quiz-capture,
  .msheet,
  .skip { display: none !important; }

  html, body {
    /* The only literal colour in this file, and print-specific by necessity:
       paper is white. Printing the warm cream ground would waste toner and read
       as a mistake on a document. Every other value here is a DESIGN.md token. */
    background: #fff;
    color: var(--ink);
    font-size: 11pt;
  }
  .wrap { max-width: none; padding: 0; }

  .report-doc {
    display: block;
    max-width: 100%;
    font-family: "Figtree", system-ui, sans-serif;
    color: var(--navy-deep);
  }

  /* site.css styles bare `header` and `footer` elements with a tinted and a navy
     ground. The report has its own, so both need resetting or the regulatory
     block prints dark-grey-on-navy and is effectively unreadable. */
  .report-head,
  .report-foot {
    background: none !important;
    backdrop-filter: none !important;
    position: static !important;
    border-radius: 0;
  }

  .report-head {
    border-bottom: 2px solid var(--gold);
    padding: 0 0 10pt;
    margin-bottom: 14pt;
  }
  .report-brand {
    display: flex;
    align-items: center;
    gap: 8pt;
    margin-bottom: 8pt;
    font-family: "Schibsted Grotesk", sans-serif;
    font-weight: 600;
    font-size: 13pt;
    letter-spacing: -0.01em;
    color: var(--navy);
  }
  .report-emblem { width: 13pt; height: auto; display: block; }
  .report-kicker {
    font-family: "Schibsted Grotesk", sans-serif;
    font-weight: 600;
    font-size: 16pt;
    letter-spacing: -0.01em;
  }
  .report-date { font-size: 9.5pt; color: var(--neutral); margin-top: 2pt; }

  /* Vertical budget: the whole report has to land on ONE A4 page.
     A4 minus the 16mm @page margins leaves 751pt of height, and the longest
     case — a capped result, which adds the constraint paragraph — measured
     747pt. Four points of headroom is not headroom, and the regulatory footer
     was landing alone on an otherwise blank second page. The masthead and the
     mnemonic mark were tightened to bring it to roughly 721pt.

     Measure at the PRINT column width, not the screen: print lays out at
     178mm (~673px), where the body wraps far taller than it does at 1440px.
     Measuring on screen says it fits when it does not.

     Nothing was taken from the IMPORTANT block — DESIGN.md's
     Full-Size-Disclosure Rule keeps risk and regulatory copy at reading size.
     If you lengthen the report copy, re-render and check the page count: an
     orphaned regulatory block reads as a mistake on a financial promotion. */
  .report-outcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18pt;
    padding: 10pt 0 11pt;
    border-bottom: 1px solid var(--hairline);
    margin-bottom: 14pt;
  }
  .report-label {
    font-size: 8pt;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold-ink);
  }
  .report-value {
    font-family: "Schibsted Grotesk", sans-serif;
    font-weight: 600;
    font-size: 26pt;
    letter-spacing: -0.02em;
    line-height: 1.05;
    margin-top: 3pt;
  }
  /* The animal is a mnemonic, not the headline. Small, and it stays small. */
  .report-mnemonic { font-size: 9.5pt; color: var(--neutral); margin-top: 4pt; font-style: italic; }
  .report-mark {
    width: 62pt;
    height: 62pt;
    object-fit: cover;
    border-radius: var(--r-sm);
    flex: none;
  }

  .report-body h2,
  .report-important h2 {
    font-family: "Figtree", sans-serif;
    font-size: 8.5pt;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold-ink);
    margin: 12pt 0 4pt;
  }
  .report-body p,
  .report-important p { font-size: 10.5pt; line-height: 1.5; }
  .report-body p + p,
  .report-important p + p { margin-top: 6pt; }

  .report-important {
    margin-top: 14pt;
    padding: 11pt 14pt;
    border: 1px solid var(--hairline);
    border-radius: var(--r-sm);
    break-inside: avoid;
  }
  .report-important p { font-size: 9pt; line-height: 1.45; }

  .report-foot {
    margin-top: 12pt;
    padding: 9pt 0 0;
    border-top: 1px solid var(--hairline);
    break-inside: avoid;
  }
  .report-foot p {
    font-size: 8pt;
    color: var(--neutral);
    line-height: 1.45;
  }
  .report-foot p + p { margin-top: 3pt; }
  .report-foot strong { color: var(--navy); }

  @page { margin: 16mm; }
}

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
  .quiz-progress { top: 82px; }
  .quiz-stage { min-height: calc(100svh - 82px); }
}

@media (max-width: 900px) {
  .quiz-q,
  .quiz-result-head,
  .rp-band-inner { grid-template-columns: 1fr; }
  .quiz-detail { grid-template-columns: 1fr; }
  .quiz-q { gap: 24px; padding-top: 20px; }
  .quiz-figure { aspect-ratio: 4 / 3; }
  .quiz-result-portrait { max-width: 320px; }
}

@media (max-width: 560px) {
  .quiz-cast { gap: 8px; }
  .quiz-cast figcaption { font-size: 14px; }
  .quiz-cast .cast-sub { font-size: 11px; letter-spacing: .08em; }
  .quiz-option { padding: 16px 17px; font-size: 16.5px; }
  .quiz-actions .btn { width: 100%; }
}

@media (max-width: 420px) {
  .quiz-progress { top: 76px; }
  .quiz-stage { min-height: calc(100svh - 76px); }
}