/* Stroop Test. Functional layout before the design pass; existing token values only (spec D3,
   follow-ups). The test panel is near-black in both themes (the light theme's --ink), so every ink
   reads on it: the four inks are the poster swatches' field tones (vermilion, jade, cobalt, saffron),
   as in the wordmark. Its text uses the dark theme's --ink and --ink-2. Swatches carry no text (D4);
   the key letters sit below them, outside the color. */

.b-stroop {
  --b-panel: #14161B;     /* light theme --ink */
  --b-panel-ink: #F2F3F5; /* dark theme --ink */
  --b-panel-ink-2: #A5ACB8; /* dark theme --ink-2 */
  --b-red: #F0643C;       /* .sw-vermilion --field */
  --b-green: #1FA67A;     /* .sw-jade --field */
  --b-blue: #3D6BE0;      /* .sw-cobalt --field */
  --b-yellow: #F5B82E;    /* .sw-saffron --field */
  padding-block: var(--s3) var(--s7);
}
.b-stroop__intro { margin-bottom: var(--s3); }
.b-stroop__intro h1 { font-size: 24px; }
.b-stroop__intro p { margin-top: var(--s1); max-width: 60ch; }
.b-stroop__note { font-size: 14px; }

/* ---------- test card ---------- */
.b-stroop__game { max-width: 560px; display: grid; gap: var(--s3); padding: var(--s3); }
@media (min-width: 400px) { .b-stroop__game { padding: var(--s4); } }
.b-stroop__game:focus { outline: none; }
.b-stroop__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s4); min-height: 44px; }
.b-stroop__status { color: var(--ink-2); font-size: 14px; font-variant-numeric: tabular-nums; }
.b-stroop__bar .btn { touch-action: manipulation; }

.b-stroop__test {
  display: grid; gap: var(--s3); padding: var(--s3); border-radius: 12px; background: var(--b-panel);
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.b-stroop__test > * { min-width: 0; }
.b-stroop__card { display: grid; place-items: center; height: clamp(150px, 42vw, 260px); color: var(--b-panel-ink); }
.b-stroop__word, .b-stroop__text { grid-area: 1 / 1; text-align: center; }
.b-stroop__word { font-size: clamp(44px, 14vw, 80px); font-weight: 900; font-stretch: 100%; letter-spacing: .02em; line-height: 1; }
.b-stroop__text { font-size: 20px; font-weight: 700; padding-inline: var(--s3); }
.b-stroop__card[data-state="fixation"] .b-stroop__text { font-size: 40px; font-weight: 400; color: var(--b-panel-ink-2); }
.b-stroop__card[data-state="message"] .b-stroop__text { font-size: 28px; }
.b-stroop__card[data-state="feedback"] .b-stroop__text { color: var(--b-panel-ink-2); }

.b-stroop__word.b-stroop__ink--red { color: var(--b-red); }
.b-stroop__word.b-stroop__ink--green { color: var(--b-green); }
.b-stroop__word.b-stroop__ink--blue { color: var(--b-blue); }
.b-stroop__word.b-stroop__ink--yellow { color: var(--b-yellow); }

/* ---------- swatches (D4): a row with keys on a keyboard layout, a 2 by 2 grid on touch ---------- */
.b-stroop__swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); }
.b-stroop.is-touch .b-stroop__swatches { grid-template-columns: repeat(2, 1fr); }
.b-stroop__swatch {
  position: relative; height: 64px; margin-bottom: 24px; border: 0; border-radius: 10px; padding: 0;
  background: var(--sw); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.b-stroop.is-touch .b-stroop__swatch { height: 88px; margin-bottom: 0; }
.b-stroop__swatch.b-stroop__ink--red { --sw: var(--b-red); }
.b-stroop__swatch.b-stroop__ink--green { --sw: var(--b-green); }
.b-stroop__swatch.b-stroop__ink--blue { --sw: var(--b-blue); }
.b-stroop__swatch.b-stroop__ink--yellow { --sw: var(--b-yellow); }
.b-stroop__key {
  position: absolute; left: 0; right: 0; top: 100%; padding-top: 4px;
  color: var(--b-panel-ink-2); font-size: 14px; font-weight: 700; text-align: center;
}
.b-stroop.is-touch .b-stroop__key { display: none; }

/* ---------- results ---------- */
.b-stroop__results { display: grid; gap: var(--s3); padding-top: var(--s2); }
.b-stroop__results:focus { outline: none; }
.b-stroop__results h2:focus { outline: none; }
.b-stroop__results ul { margin: 0; padding-left: 1.2em; }

/* ---------- about ---------- */
.b-stroop__about { max-width: 68ch; margin-top: var(--s7); }
.b-stroop__about h2 { margin-top: var(--s6); }
.b-stroop__about p, .b-stroop__about ol { margin-top: var(--s3); }