/* quiz-scenes.css — shared question-flow illustration styles.
   Loaded by quiz.html AND find-setup.html: the classes here style the scene
   markup that quiz-scenes.js emits (spec: 2026-08-02-quiz-redesign.md §5 +
   llm-wiki/domain/ui/quiz-flow-feedback-2026-07-30.md). Extracted from
   find-setup.css so the two question flows can never drift apart visually.
   Uses existing design tokens from style.css only, no new tokens (token-lock).
   Both pages keep the shared quiz-* component classes from style.css for
   progress/footer/card chrome; this file layers the illustrated-card round
   on top: full-width desktop layout, illustrated option cards, scene parts. */

/* ── Page frame: .container (1200px) replaces .container-sm ───────────── */
.fs-page .quiz-root { padding: var(--space-8); }
@media (max-width: 640px) { .fs-page .quiz-root { padding: var(--space-4); } }

/* Full-width screens: keep paragraph measure readable */
.fs-page .quiz-edu p { max-width: 78ch; }

/* Hidden symbol library: the SAME neutral dart artwork is <use>d by every
   grip/finger/lock option, so "identical barrel in every option" (spec E §5)
   holds by construction, not by drawing discipline. */
.fs-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ── Illustrated option grid: cards side by side on desktop instead of a
   narrow stack; auto-fit collapses to a single column on phones. ───────── */
.quiz-opts.fs-opts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: var(--space-3);
}

.fs-opt {
  align-items: center;
  text-align: center;
  justify-content: flex-start;
  gap: var(--space-2);
  padding: var(--space-4);
}

/* The row-layout hover arrow from .quiz-opt-go doesn't fit a centered card */
.fs-opt.quiz-opt-go { padding-right: var(--space-4); }
.fs-opt.quiz-opt-go::after { content: none; }

.fs-ill { display: block; width: 100%; color: var(--text-secondary); }
.fs-ill svg { display: block; width: 100%; height: auto; max-height: 96px; margin: 0 auto; }
/* Glyph-tier artwork (shape/texture chip language) renders smaller, centered */
.fs-ill--glyph svg { width: auto; max-height: 44px; }

.quiz-opt:hover .fs-ill,
.quiz-opt.on .fs-ill { color: var(--text-primary); }

/* ── Shared illustration parts (SVG classes, colors via tokens: CSP has no
   inline styles, so presentation lives here, geometry in the markup) ───── */
.fs-zone { fill: var(--accent); opacity: .3; }
.fs-zone--faint { opacity: .13; }
.fs-pad { fill: currentColor; opacity: .75; }
.fs-thumb { fill: var(--accent); }
.fs-board { stroke: currentColor; stroke-width: 3; opacity: .5; }
.fs-ring { stroke: currentColor; fill: none; opacity: .45; }
.fs-path { stroke: currentColor; stroke-width: 1.5; fill: none; opacity: .4; }
.fs-path--faint { opacity: .15; }
.fs-dart-marker { fill: var(--accent); }
.fs-arrow { fill: currentColor; opacity: .6; }
.fs-arrow-line { stroke: currentColor; stroke-width: 1.5; fill: none; opacity: .6; }
.fs-ill-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  fill: currentColor;
  opacity: .55;
}

/* Programmatic focus target on screen change (UX-14): the heading receives
   focus for keyboard/SR users; the browser default ring on a heading reads
   as an error, so it is suppressed — focus is announced, not decorated. */
.quiz-q:focus { outline: none; }

/* ── Screen transition (subtle, disabled under reduced motion) ─────────── */
.fs-screen { animation: fs-fade .22s ease; }
@keyframes fs-fade {
  from { opacity: 0; transform: translateY(6px); }
}
@media (prefers-reduced-motion: reduce) {
  .fs-screen { animation: none; }
}

/* ── Adjustable min-max range block (weight preference; finder's range-wrap
   pattern wrapped for the question flow) ───────────────────────────────── */
.fs-range-block {
  max-width: 480px;
  margin-bottom: var(--space-6);
}
.fs-range-block .quiz-continue { margin-top: var(--space-4); }