/* Mouse test: the test area with the mouse picture, the button list, the
   polling, wheel and click-gap panels. Scoped under .mst; colours come from
   the site's tokens. */
.mst-bar { justify-content: space-between; align-items: end; }
.mst-th { flex: 1 1 220px; max-width: 320px; }
.mst-th-row { display: flex; justify-content: space-between; gap: 8px; }
.mst-th output { color: var(--muted); }

.mst-pad { position: relative; height: clamp(260px, 44vh, 380px); overflow: hidden; border: 2px dashed var(--line-strong); border-radius: var(--radius);
  background: var(--sunk); cursor: crosshair; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.mst-pad.is-active { border-style: solid; border-color: var(--accent); }
.mst-draw { position: absolute; inset: 0; width: 100%; height: 100%; }
.mst-mouse { position: absolute; left: 50%; top: 46%; width: min(170px, 42%); height: auto; max-height: 72%; transform: translate(-50%, -50%); pointer-events: none; }
.mst-body { fill: var(--panel); stroke: var(--line-strong); stroke-width: 2; }
.mst-part { fill: var(--panel); stroke: var(--line-strong); stroke-width: 2; transition: fill .08s; }
.mst-part.is-tested { fill: var(--accent-soft); stroke: var(--accent); }
.mst-part.is-down { fill: var(--accent); stroke: var(--accent); }
.mst-part.is-fail { fill: var(--crit-soft); stroke: var(--crit); }
.mst-part.is-fail.is-down { fill: var(--crit); }
.mst-arrow { fill: none; stroke: var(--line-strong); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.mst-arrow.is-on { stroke: var(--accent); }
.mst-pos { position: absolute; top: 8px; right: 12px; margin: 0; color: var(--muted); font-size: 13px; pointer-events: none; }
.mst-help { position: absolute; left: 12px; right: 12px; bottom: 10px; margin: 0; color: var(--muted); font-size: 14px; text-align: center; pointer-events: none; }

.mst-buttons .mst-count { color: var(--muted); font-size: 14px; }

.mst-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.mst-panel { display: grid; gap: 10px; align-content: start; min-width: 0; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--sunk); }
.mst-panel h2 { font-size: 18px; }
.mst-panel > button { justify-self: start; }
.mst-readouts { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 12px; }
.mst-readouts .readout .v { font-size: clamp(26px, 4vw, 34px); }
.mst .readout.is-fail .v { color: var(--crit); }
.mst-panel .kv th { width: 55%; font-size: 14px; }

.mst-hist { display: block; width: 100%; height: auto; }
.mst-hist .bar { fill: var(--accent); }
.mst-hist .bar.is-fail { fill: var(--crit); }
.mst-hist .axis { stroke: var(--line-strong); stroke-width: 1; }
.mst-hist .th-line { stroke: var(--crit); stroke-width: 1.5; stroke-dasharray: 4 3; }
.mst-hist text { fill: var(--muted); font: 11px var(--f-mono); }