/* Mouse test — tool-specific UI. Layout chrome comes from shared.css. */

.mt-stage { max-width: 720px; margin: 0 auto; }

/* ── Pad ── */
.mt-pad {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 24px; border: 2px solid var(--border); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--surface), var(--surface2));
  user-select: none; -webkit-user-select: none; outline: none; text-align: center;
}
.mt-pad:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-bg); }

/* ── Mouse diagram ── */
.mt-mouse { width: 150px; height: 250px; }
.mt-body { fill: var(--surface); stroke: var(--border-control); stroke-width: 3; }
.mt-zone { fill: var(--surface2); stroke: var(--border-control); stroke-width: 2; cursor: pointer; transition: fill .05s ease; }
.mt-zone.pressed { fill: var(--accent); stroke: var(--accent); }
.mt-wheel { fill: var(--muted); }
.mt-wheel.pressed { fill: var(--accent); }
.mt-split { stroke: var(--border-control); stroke-width: 2; }

/* ── Side buttons ── */
.mt-side { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.mt-sidebtn {
  font: inherit; font-weight: 600; font-size: .85rem; cursor: pointer;
  padding: 8px 16px; border-radius: 999px; color: var(--text);
  background: var(--surface); border: 1px solid var(--border-control); transition: all .05s ease;
}
.mt-sidebtn.pressed { background: var(--accent); border-color: var(--accent); color: #fff; }

.mt-scrollcue { display: flex; gap: 16px; font-size: .82rem; font-weight: 600; color: var(--muted); }
.mt-scrollcue span { transition: color .1s ease, transform .1s ease; }
.mt-scrollcue span.lit { color: var(--teal-dark); transform: scale(1.08); }
.mt-hint { font-size: .78rem; color: var(--muted); margin: 0; }

/* ── Stats ── */
.mt-stats {
  margin-top: 18px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.mt-stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 8px; text-align: center; }
.mt-stat .v { font-family: 'Orbitron', var(--mono); font-weight: 700; font-size: 1.5rem; color: var(--text); font-variant-numeric: tabular-nums; }
.mt-stat .k { font-size: .7rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
[data-mouse].has-fault [data-mt-fault-stat] { border-color: var(--accent); background: var(--accent-bg); }
[data-mouse].has-fault [data-mt-fault-stat] .v { color: var(--accent); }

/* ── In-tool mode switcher ── */
.mt-modes { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 18px 0 0; }
.mt-mode-link {
  font-size: .85rem; font-weight: 600; padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); color: var(--muted);
}
.mt-mode-link:hover { border-color: var(--accent-light); color: var(--accent); text-decoration: none; }
.mt-mode-link[aria-current="page"] { background: var(--accent-bg); color: var(--accent-fg); border-color: var(--accent-light); }

@media (max-width: 560px) { .mt-stats { grid-template-columns: repeat(2, 1fr); } }