/* The colour vision check (programme 2026-10 F7). Loaded on that page only. */
.vision-check { display: block; }
.vision-check .vision-facts { margin-block: .6rem .9rem; }
.vision-setup { margin-block: 1.2rem 0; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.vision-setup h2 { margin: 0 0 .4rem; font-size: 1.05rem; }
.vision-setup ul { margin: 0 0 .4rem; padding-inline-start: 1.2rem; }
.vision-setup li { margin-block: .2rem; }
.vision-setup p { margin: 0; color: var(--muted); font-size: .9rem; }
.vision-refusal { margin-block: .8rem; padding: .8rem 1rem; border: 2px solid var(--ink); border-radius: 12px; background: var(--surface); font-weight: 650; }
.vision-run { display: grid; gap: .6rem; justify-items: center; }
.vision-run[hidden], .vision-result[hidden], .vision-outcome[hidden] { display: none; }
.vision-run .progress-status { justify-self: stretch; margin: 0; font-weight: 750; }
/* The frame's size comes from its width alone and the canvas keeps itself
   square (W5 review: WebKit stretched a percentage-height canvas about 4 %).
   70svh keeps the whole plate on a short landscape screen. */
.vision-plate-frame { box-sizing: border-box; inline-size: min(100%, 23rem, 70vh); inline-size: min(100%, 23rem, 70svh); padding: .4rem; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow); }
/* The plate is a picture whose colours ARE the test: a forced-colours theme
   must not repaint it (the page refuses to run under one anyway). */
.vision-plate { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 1; border-radius: 50%; forced-color-adjust: none; }
.vision-plate:focus { outline: none; }
.vision-plate:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.vision-form { justify-self: stretch; }
.vision-form fieldset { margin: 0; padding: 0; border: 0; }
.vision-form legend { margin-block-end: .5rem; font-weight: 750; }
.vision-choices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.vision-choice { display: flex; align-items: center; justify-content: center; gap: .45rem; min-block-size: 48px; padding: .4rem .6rem; border: 2px solid var(--line); border-radius: 12px; background: var(--surface); font-size: 1.25rem; font-weight: 800; cursor: pointer; }
.vision-choice:last-child { grid-column: 1 / -1; font-size: 1rem; font-weight: 700; }
.vision-choice input { inline-size: 1.15rem; block-size: 1.15rem; margin: 0; accent-color: var(--ink); }
/* The chosen answer is marked by a thicker ink border and the radio itself,
   never by colour alone. */
.vision-choice:has(input:checked) { border-color: var(--ink); border-width: 3px; }
.vision-choice:has(input:focus-visible) { outline: 3px solid var(--ink); outline-offset: 2px; }
.vision-form .form-actions { display: flex; justify-content: flex-end; margin-block-start: .6rem; }
.vision-form .form-actions .button { min-block-size: 48px; }
.vision-result { margin-block-start: 1rem; padding: 1.1rem 1rem; border: 2px solid var(--ink); border-radius: 16px; background: var(--surface); }
.vision-outcome h2 { margin-block: .2rem .6rem; }
.vision-outcome h2:focus { outline: none; }
.vision-outcome .eyebrow { display: flex; align-items: center; gap: .4rem; }
.vision-mark { inline-size: 1.2rem; block-size: 1.2rem; fill: none; stroke: var(--ink); stroke-width: 2.4; }
.vision-caveat { margin-block-start: .8rem; padding-block-start: .8rem; border-block-start: 1px solid var(--line); }
.vision-caveat p { margin-block: .3rem; }
.vision-result .result-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-start: .8rem; }
/* A phone on its side: the plate on the left, the digits and Next beside it. */
@media (orientation: landscape) and (max-height: 540px) {
  .vision-run { grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: 1rem; }
  .vision-run .progress-status { grid-column: 1 / -1; }
  .vision-plate-frame { inline-size: min(48vw, 78vh); inline-size: min(48vw, 78svh); }
  .vision-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 380px) {
  .vision-choices { gap: .4rem; }
  .vision-choice { font-size: 1.1rem; padding-inline: .4rem; }
}
@media (prefers-reduced-motion: reduce) { .vision-check * { scroll-behavior: auto; } }
/* The three-item checklist directly above Start (the full one is below). */
.vision-quick { display: flex; flex-wrap: wrap; gap: .1rem .8rem; margin: .4rem 0 .6rem; padding: 0; list-style: none; font-size: .84rem; font-weight: 650; line-height: 1.35; }
.vision-quick li::before { content: "✓ "; }