/* ============================================================================
   Mouse Tester — 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-brown, measured against base.css surfaces (WCAG relative
   luminance):
     dark  #efb961  10.6:1 on --bg    9.8:1 on --surface   11.0:1 on --bg-sunk
     light #966008   5.1:1 on --bg    5.3:1 on --surface    4.6:1 on --bg-sunk
   Both clear the 4.5:1 text floor on all three surfaces in both themes.
   ========================================================================= */
:root { --accent: #efb961; --accent-dim: rgba(239, 185, 97, 0.14); }
@media (prefers-color-scheme: light) {
  :root { --accent: #966008; --accent-dim: rgba(150, 96, 8, 0.10); }
}

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

/* module headings inside a .panel read as a label, not a fresh article heading */
.mt-h2 {
  margin: 0 0 0.6rem;
  font-size: 1.0625rem;
}

/* ============================================================================
   Shared test-pad look — the four boxes a visitor presses/scrolls/moves in
   ========================================================================= */

.mt-pad {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 12rem;
  text-align: center;
  border: 1px dashed var(--line-strong);
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.mt-pad:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.mt-pad-hint { color: var(--text-dim); font-size: 0.9375rem; max-width: 32ch; }

/* ------------------------------------------------------------- diagram --- */

.mt-diagram { width: 7.5rem; height: auto; flex: 0 0 auto; }
.mt-zone { fill: var(--surface-2); stroke: var(--line-strong); stroke-width: 1.5; transition: fill 0.05s ease; }
.mt-zone.is-active { fill: var(--accent); stroke: var(--accent); }
.mt-outline { fill: none; stroke: var(--line-strong); stroke-width: 2; }
@media (prefers-reduced-motion: reduce) {
  .mt-zone { transition: none; }
}

.mt-readout-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  margin-top: 1.1rem;
}

/* ---------------------------------------------------------------- log ---- */

.mt-log-body td { font-family: var(--mono); font-size: 0.8125rem; }
.mt-log-body td.mt-btn-left    { color: var(--accent); }
.mt-log-body tr:first-child td { color: var(--text); font-weight: 600; }
.mt-log-empty { color: var(--text-dim); font-size: 0.9375rem; }
.mt-log-toolbar { display: flex; justify-content: flex-end; margin-top: 0.75rem; }

/* -------------------------------------------------------------- stats ---- */

.mt-stats { margin-top: 1.1rem; }

/* ------------------------------------------------------------ chatter ---- */

.mt-chatter-btn {
  width: 100%;
  min-height: 3.5rem;
  font-size: 1rem;
  margin-bottom: 1.1rem;
}
.mt-chatter-btn:active { filter: brightness(0.95); }

.mt-threshold-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.1rem;
}
.mt-threshold-row .field { flex: 0 0 auto; width: 7rem; }
.mt-threshold-row input[type="number"] { text-align: right; }

.mt-verdict { margin-bottom: 1rem; min-height: 1.6rem; }
.mt-gaps-table td, .mt-gaps-table th { font-family: var(--mono); }

/* ------------------------------------------------------------ polling ---- */

.mt-poll-stats { margin-top: 1.1rem; }