/* Mouse Tester page styles. Keep the test surface clear and usable at narrow widths. */
.mouse-tester-app {
  --mt-surface: #f7f9fc;
  --mt-border: #b7c4d6;
  --mt-border-strong: #6b7f99;
  --mt-accent: #0b57d0;
  --mt-accent-contrast: #fff;
  --mt-muted: #4a5a70;
  --mt-held: #d8f3e5;
  --mt-seen: #e8f0ff;
  --mt-error: #b3261e;
  container-type: inline-size;
}
.mouse-tester-settings {
  display: grid;
  gap: 1rem;
  margin-block: 1rem;
  max-width: 40rem;
}
.mouse-tester-settings > * {
  min-width: 0;
  max-width: 100%;
}
.mouse-tester-settings > label,
.mouse-tester-duration label {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-height: 44px;
}
.mouse-tester-settings select,
.mouse-tester-settings input,
.mouse-tester-duration input,
.mouse-tester-actions button,
.mouse-tester-button-table button {
  min-height: 44px;
}
.mouse-tester-duration {
  border: 1px solid var(--mt-border);
  border-radius: .5rem;
  padding: .75rem;
  min-inline-size: 0;
}
.mouse-tester-duration legend {
  font-weight: 700;
  padding-inline: .25rem;
}
.mouse-tester-duration-options {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
}
.mouse-tester-duration label {
  padding-inline: .35rem;
}
.mouse-tester-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin-block: 1rem;
}
.mouse-tester-actions .button {
  min-width: 7rem;
}
.mouse-tester-capture {
  min-height: 220px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: .5rem;
  margin-block: 1rem;
  padding: 1.25rem;
  border: 2px dashed var(--mt-border-strong);
  border-radius: .75rem;
  background: var(--mt-surface);
  text-align: center;
  outline-offset: 3px;
  user-select: none;
}
.mouse-tester-capture:focus-visible {
  outline: 3px solid var(--mt-accent);
}
.mouse-tester-capture > * {
  pointer-events: none;
}
.mouse-tester-app[data-state="active"] .mouse-tester-capture,
.mouse-tester-app[data-state="armed"] .mouse-tester-capture,
.mouse-tester-app[data-state="running"] .mouse-tester-capture {
  border-style: solid;
  border-color: var(--mt-accent);
  background: color-mix(in srgb, var(--mt-surface) 88%, var(--mt-accent));
}
.mouse-tester-button-table-wrap {
  max-width: 100%;
}
.mouse-tester-button-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  border-collapse: collapse;
}
.mouse-tester-button-table th,
.mouse-tester-button-table td {
  padding: .55rem;
  border-bottom: 1px solid var(--mt-border);
  text-align: start;
  vertical-align: middle;
}
.mouse-tester-button-table th {
  background: var(--mt-surface);
}
.mouse-tester-button-table th[scope="row"] {
  font-weight: 600;
  text-align: start;
  overflow-wrap: anywhere;
}
.mouse-tester-button-table td {
  overflow-wrap: anywhere;
}
.mouse-tester-button-table th:nth-child(1) {
  width: 36%;
}
.mouse-tester-button-table th:nth-child(2) {
  width: 24%;
  overflow-wrap: anywhere;
}
.mouse-tester-button-table th:nth-child(3) {
  width: 40%;
  overflow-wrap: anywhere;
}
.mouse-tester-button-table [data-mt-observed] {
  white-space: normal;
}
.mouse-tester-button-table [data-mt-presses],
.mouse-tester-metric output,
.mouse-tester-metric span[id],
.mouse-tester-result output,
.mouse-tester-result span[id] {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mouse-tester-button-table tr[data-observed="seen"] {
  background: var(--mt-seen);
}
.mouse-tester-button-table tr[data-observed="held"] {
  background: var(--mt-held);
}
.mouse-tester-metrics,
.mouse-tester-wheel,
.mouse-tester-result > dl {
  display: grid;
  gap: .7rem;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  margin-block: 1rem;
}
.mouse-tester-result {
  margin-block: 1rem;
}
.mouse-tester-metric,
.mouse-tester-result > dl > div {
  padding: .75rem;
  border: 1px solid var(--mt-border);
  border-radius: .5rem;
  min-width: 0;
}
.mouse-tester-metric {
  display: grid;
  gap: .35rem;
}
.mouse-tester-metric span[id] {
  font-size: 1.5rem;
  font-weight: 700;
}
.mouse-tester-metric dt,
.mouse-tester-result dt {
  color: var(--mt-muted);
  font-size: .875rem;
}
.mouse-tester-metric dd,
.mouse-tester-result dd {
  margin: .2rem 0 0;
  font-size: 1.35rem;
  font-weight: 700;
}
.mouse-tester-status {
  min-height: 1.5rem;
}
.mouse-tester-error {
  color: var(--mt-error);
  border-inline-start: .3rem solid var(--mt-error);
  padding-inline-start: .7rem;
}
.mouse-tester-copy-fallback textarea {
  width: 100%;
  min-height: 6rem;
  resize: vertical;
}
.mouse-tester-copy-fallback[hidden],
#mt-cps[hidden],
#mt-result[hidden] {
  display: none;
}
.mouse-tester-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  color: var(--mt-muted);
}
.mouse-tester-app :where(button, select, input, textarea):focus-visible {
  outline: 3px solid var(--mt-accent);
  outline-offset: 2px;
}
@media (min-width: 48rem) {
  .mouse-tester-capture {
    min-height: 260px;
  }
}
@media (max-width: 22rem) {
  .mouse-tester-duration-options {
    display: grid;
    grid-template-columns: 1fr;
  }
  .mouse-tester-actions .button {
    width: 100%;
  }
  .mouse-tester-button-table {
    min-width: 0;
    table-layout: fixed;
  }
  .mouse-tester-button-table td:nth-child(2),
  .mouse-tester-button-table td:nth-child(3) {
    width: auto;
  }
}
:root.dark .mouse-tester-app {
    --mt-surface: #172131;
    --mt-border: #71819a;
    --mt-border-strong: #a9b8ce;
    --mt-accent: #9cc3ff;
    --mt-accent-contrast: #0a254a;
    --mt-muted: #cfdaea;
    --mt-held: #174c35;
    --mt-seen: #1c3966;
    --mt-error: #ffb4ab;
}
@media (forced-colors: active) {
  .mouse-tester-capture,
  .mouse-tester-button-table th,
  .mouse-tester-button-table td,
  .mouse-tester-metric,
  .mouse-tester-result > dl > div {
    border: 1px solid CanvasText;
  }
  .mouse-tester-app :where(button, select, input, textarea):focus-visible,
  .mouse-tester-capture:focus-visible {
    outline: 3px solid Highlight;
  }
}