/* Fixed mid-grey, neutral surround on purpose. #6d6d6d (sRGB 109, Y = 0.152) is the median mean
   luminance of the V7 plate dots, so the eye adapts to the plates' level: on white the surround was
   ~6.5x brighter than the plates (murkier colour, lower chromatic sensitivity), and the white gaps
   between dots favoured dark distractors over light ones. The plates are transparent PNGs, so the
   gaps show this grey. All UI greys are exactly neutral (R = G = B): no hue cues in a colour test UI.
   No dark-theme switch and no CSS filters anywhere (checks.js looks for them). */
:root {
  --bg: #6d6d6d;
  --surface: #797979;
  --ink: #ffffff;
  --ink-2: #ececec;
  --ink-3: #dddddd;
  --line: #8e8e8e;
  --accent: #ffffff;
  --radius: 14px;
  color-scheme: only light;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body {
  font: 16px/1.5 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
#app { max-width: 640px; margin: 0 auto; padding: 24px 16px 48px; }
#screen-intro { padding-top: 8vh; }
.screen[hidden] { display: none; }

.eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: 12px; color: var(--ink-3); margin: 8px 0 4px; }
h1 { font-size: clamp(26px, 6vw, 36px); line-height: 1.15; margin: 0 0 12px; letter-spacing: -.01em; }
.lede { font-size: 18px; color: var(--ink-2); margin: 0 0 16px; }
.fineprint { font-size: 13px; color: var(--ink-3); }
.cvd-link { margin: 14px 0 0; }
.cvd-link a { color: var(--ink); }

.notice { border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 12px 14px; margin: 0 0 16px; font-size: 15px; }
.notice p { margin: 4px 0; }
.notice-block { border: 2px solid var(--ink); background: var(--bg); }
.notice-block::before { content: "Can’t start yet"; display: block; font-weight: 700; margin-bottom: 4px; }

.setup { padding-left: 20px; margin: 0 0 20px; color: var(--ink-2); }

.mode-toggle { display: inline-flex; border: 1.5px solid var(--ink); border-radius: 999px; padding: 3px; margin: 0 0 16px; }
.mode-toggle label { cursor: pointer; }
.mode-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.mode-toggle span { display: block; padding: 8px 16px; border-radius: 999px; font-size: 15px; color: var(--ink-2); }
.mode-toggle input:checked + span { background: var(--ink); color: var(--bg); }
.mode-toggle input:focus-visible + span { outline: 3px solid var(--ink-3); outline-offset: 1px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1.5px solid var(--ink);
  background: var(--bg); color: var(--ink); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
}
.btn-primary { background: var(--ink); color: var(--bg); }
.btn:disabled { opacity: .35; cursor: not-allowed; }
.btn:focus-visible, .target:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* Test screen */
.progress { max-width: 320px; margin: 4px auto 0; text-align: center; }
.progress[hidden] { display: none; }
.progress-bar { height: 6px; background: var(--surface); border-radius: 3px; overflow: hidden; }
.progress-bar > span { display: block; height: 100%; width: 0; background: var(--ink-3); transition: width .3s ease; }
.progress p { margin: 6px 0 0; font-size: 14px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.trial-note { min-height: 22px; text-align: center; color: var(--ink-3); font-size: 14px; margin: 10px 0 0; }
/* Plate + 8 round direction buttons just outside the dot disc. --cx/--cy/--rt come from manifest.disc. */
.stage {
  --cx: 50%; --cy: 50%; --rt: 40%;
  position: relative; width: min(100%, 58vh, 540px); aspect-ratio: 1; margin: 0 auto;
}
#plate, .stage-example img {
  position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: var(--cx) var(--cy);
  user-select: none; -webkit-user-select: none; pointer-events: none;
}
#plate.blank { visibility: hidden; }
.target {
  --a: 0deg;
  /* Round button, --td across (scales with the stage); centred on the ring at --rt. Neutral greys only. */
  --td: 9.5%;
  position: absolute; width: var(--td); aspect-ratio: 1; padding: 0; cursor: pointer;
  left: calc(var(--cx) + var(--rt) * cos(var(--a)));
  top: calc(var(--cy) - var(--rt) * sin(var(--a)));
  transform: translate(-50%, -50%); touch-action: manipulation;
  border-radius: 50%; border: 1.5px solid var(--ink-3);
  background: radial-gradient(circle at 50% 35%, #8a8a8a, #7a7a7a 70%);
  box-shadow: 0 2px 3px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: background .1s, box-shadow .1s, transform .1s;
}
.target:hover { background: radial-gradient(circle at 50% 35%, #9a9a9a, #8a8a8a 70%); }
.target:active, .target.pressed {
  background: var(--ink); border-color: var(--ink);
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .35); transform: translate(-50%, -50%) scale(.94);
}
.target[data-dir="0"] { --a: 0deg; } .target[data-dir="45"] { --a: 45deg; }
.target[data-dir="90"] { --a: 90deg; } .target[data-dir="135"] { --a: 135deg; }
.target[data-dir="180"] { --a: 180deg; } .target[data-dir="225"] { --a: 225deg; }
.target[data-dir="270"] { --a: 270deg; } .target[data-dir="315"] { --a: 315deg; }
.stage[aria-disabled="true"] .target { pointer-events: none; }
.examples-title { font-size: 20px; margin: 4px 0 8px; text-align: center; }
.examples { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px 16px; margin: 0 0 20px; }
.example { margin: 0; }
.examples[hidden] { display: none; }
.stage-example { width: min(100%, 340px); }
.stage-example .target { cursor: default; }
.stage-example .target.answer { background: var(--ink); border-color: var(--ink); }
/* Distractor direction: neutral cross, no hue (no hue cues in the UI). */
.stage-example .target.decoy::before {
  content: "\2715"; position: absolute; inset: 0; z-index: 1; display: grid; place-items: center;
  font-size: clamp(12px, 3.6vw, 20px); font-weight: 700; line-height: 1; color: #111111;
}
.example figcaption { text-align: center; color: var(--ink-2); font-size: 15px; margin-top: 4px; }

/* Results */
.types { display: grid; gap: 12px; margin: 8px 0 24px; }
.type-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.type-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.type-name { font-weight: 700; }
.type-axis { font-size: 13px; color: var(--ink-3); }
.type-score { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
.type-score small { font-size: 14px; color: var(--ink-3); font-weight: 500; }
/* Score bar: "You" triangle + label above the track, "Typical" dashed tick + label below. */
.meter { position: relative; margin: 30px 0 30px; }
.line-row { margin-top: 14px; }
.line-row .type-head { margin-bottom: 0; }
.line-row .meter { margin-top: 26px; }
.line-score { font-size: 20px; font-weight: 700; }
.line-score small { font-weight: 400; color: var(--ink-3); font-size: 13px; }
.meter .track { position: relative; height: 10px; background: var(--surface); border-radius: 5px; }
.meter .track > span { position: absolute; inset: 0 auto 0 0; background: var(--ink-3); border-radius: 5px; }
.mk { position: absolute; top: 0; width: 0; height: 10px; }
.mk span { position: absolute; white-space: nowrap; font-size: 13px; font-variant-numeric: tabular-nums; }
.mk.mid span { transform: translateX(-50%); }
.mk.left span { left: -6px; }
.mk.right span { right: -6px; }
.mk-you::before {
  content: ""; position: absolute; left: -7px; top: -11px; border: 7px solid transparent; border-top: 9px solid var(--ink); border-bottom: 0;
}
.mk-you span { bottom: 22px; font-weight: 700; color: var(--ink); }
.mk-typ::before { content: ""; position: absolute; left: -1px; top: -5px; height: 20px; border-left: 2px dashed var(--ink); }
.mk-typ span { top: 18px; color: var(--ink-2); }
.type-note { font-size: 14px; color: var(--ink-2); margin: 6px 0 0; }
.share-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 6px; }

.traces { margin: 24px 0; }
.traces h2 { font-size: 18px; margin: 0 0 4px; }
.traces .fineprint { margin: 0 0 8px; }
.trace { margin: 14px 0 18px; }
.trace h3 { font-size: 14px; margin: 0 0 4px; }
.trace h3 span { font-weight: 400; color: var(--ink-3); }
.trace svg { width: 100%; height: auto; display: block; overflow: visible; }
.trace .band { fill: var(--surface); }
.trace .grid { stroke: var(--line); stroke-width: 1; }
.trace .lbl { fill: var(--ink-3); font-size: 11px; }
.trace .path { fill: none; stroke: var(--ink-3); stroke-width: 1.5; stroke-linejoin: round; opacity: .7; }
.trace .hit { fill: transparent; }
.trace .m-correct { fill: var(--ink); }
.trace .m-miss { fill: var(--bg); stroke: var(--ink); stroke-width: 1.5; }
.trace .m-distractor { stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.trace .m-rev { fill: none; stroke: var(--ink); stroke-width: 1; }
.trace .thr { stroke: var(--ink); stroke-dasharray: 4 3; stroke-width: 1.5; }
.trace .thr-b { stroke-dasharray: 1.5 3; }
.trace .rt { fill: var(--ink-2); }
.trace .rt-miss { fill: var(--bg); stroke: var(--ink-2); stroke-width: 1.2; }