/* ============================================================================
   Reaction Time Test — tool layer over base.css
   base.css supplies reset, type, forms, buttons, chips, badges, panels,
   tables, header, footer, focus rings. This file adds the accent and only
   what is unique to this tool.

   Accent — amber-yellow, measured against base.css surfaces (WCAG relative
   luminance):
     dark  #facc15  12.35:1 on --bg   11.39:1 on --surface   12.78:1 on --bg-sunk
     light #7a6108   5.69:1 on --bg    5.93:1 on --surface    5.21:1 on --bg-sunk
   Both clear the 4.5:1 text floor on all three surfaces in both themes.

   The stage's own red/green states are NOT the accent — they are functional
   signal colours (WCAG 1.4.1: colour is never the only cue, so each state
   also carries a text label) fixed at #b91c1c (wait) and #15803d (go) in both
   themes, each paired with white text:
     white on #b91c1c = 6.47:1     white on #15803d = 5.02:1
   Both clear 4.5:1 for the normal-size labels drawn on them.
   ========================================================================= */
:root { --accent: #facc15; --accent-dim: rgba(250, 204, 21, 0.14); }
@media (prefers-color-scheme: light) {
  :root { --accent: #7a6108; --accent-dim: rgba(122, 97, 8, 0.10); }
}

.brand svg .mark-bg { fill: var(--accent); }
.brand svg .mark-fg { fill: var(--on-accent); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================================
   The stage
   A large, focusable block that is its own control: idle/neutral by default,
   a fixed red while waiting, a fixed green when live. Both colours are hard
   values (not theme tokens) because they must read the same, and pass the
   same contrast maths, in dark and light mode alike — see the header comment.
   ========================================================================= */

.rt-tool { margin-bottom: 2.5rem; }

.rt-topline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
}
.rt-progress {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.rt-best { color: var(--text-dim); }
.rt-best strong { color: var(--text); font-family: var(--mono); }
.rt-best-note { color: var(--text-faint); font-size: 0.8125rem; }

.rt-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: clamp(220px, 42vw, 320px);
  text-align: center;
  padding: 2rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-sunk);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
}
.rt-stage:hover { border-color: var(--line-strong); }
.rt-stage:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.rt-message {
  margin: 0;
  font-size: clamp(1.375rem, 1.1rem + 1.6vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}
.rt-sub {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--text-dim);
  min-height: 1.3em;
}

/* Wait — fixed red, white text, in both themes. */
.rt-stage.is-waiting {
  background: #b91c1c;
  border-color: #b91c1c;
}
.rt-stage.is-waiting .rt-message,
.rt-stage.is-waiting .rt-sub { color: #ffffff; }

/* Go — fixed green, white text, in both themes. */
.rt-stage.is-go {
  background: #15803d;
  border-color: #15803d;
}
.rt-stage.is-go .rt-message,
.rt-stage.is-go .rt-sub { color: #ffffff; }

/* Too soon — reuses the shared warn tokens, not a new colour. */
.rt-stage.is-early {
  background: var(--warn-bg);
  border-color: var(--warn);
}
.rt-stage.is-early .rt-message { color: var(--warn); }

/* Result — neutral surface, the number reads as the hero via the accent. */
.rt-stage.is-result .rt-message {
  color: var(--accent);
  font-family: var(--mono);
  font-feature-settings: "tnum" 1, "zero" 1;
}

.rt-stage.is-done { cursor: default; }
.rt-stage.is-done .rt-message { color: var(--text-dim); }

/* ---------------------------------------------------------- attempt list -- */

.rt-list {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}
.rt-item {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0.85rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
}
.rt-item-n { color: var(--text-dim); }
.rt-item-v { font-weight: 600; }

/* -------------------------------------------------------------- summary -- */

.rt-summary {
  margin-top: 1.25rem;
}
.rt-summary h3 { margin: 0 0 0.85rem; font-size: 1rem; }
.rt-summary .stat-value { color: var(--accent); }

.toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; }

/* ============================================================================
   Article furniture — shared across index, about, and the sub-page
   ========================================================================= */

.section { max-width: 74ch; }
.section table { max-width: none; }

.callout {
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1rem 1.1rem;
  margin: 0 0 1.2em;
  font-size: 0.9375rem;
  color: var(--text-dim);
}
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: var(--text); }

.pagelinks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: 0.75rem;
  margin-top: 1.25rem;
}
.pagelinks a {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.95rem 1.15rem;
  text-decoration: none;
}
.pagelinks a:hover { border-color: var(--accent); }
.pagelinks strong { display: block; color: var(--accent); margin-bottom: 0.15rem; }
.pagelinks span { display: block; color: var(--text-dim); font-size: 0.875rem; }

.sources { font-size: 0.9375rem; }
.sources li { margin-bottom: 0.6em; }
.source-note { color: var(--text-dim); }

.tag-pass { color: var(--ok); font-weight: 600; }
.tag-fail { color: var(--err); font-weight: 600; }

.noscript {
  background: var(--err-bg);
  border: 1px solid var(--err);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  color: var(--err);
  font-size: 0.9375rem;
}