/* ページ共通のデザイントークンと外枠。 */
body.mouse-tester-page {
  color-scheme: light;
  --mouse-page: #f4f6f8;
  --mouse-surface: #ffffff;
  --mouse-surface-soft: #f6f8fa;
  --mouse-border: #d0d7de;
  --mouse-border-strong: #8c959f;
  --mouse-text: #1f2328;
  --mouse-muted: #57606a;
  --mouse-accent: #0969da;
  --mouse-accent-hover: #0757b5;
  --mouse-active: #ff8182;
  --mouse-active-edge: #cf222e;
  --mouse-tested: #54aeff;
  --mouse-warning: #9a6700;
  --mouse-warning-text: #6e4c00;
  --mouse-warning-bg: #fff8c5;
  --mouse-info-text: #0550ae;
  --mouse-info-bg: #ddf4ff;
  --mouse-info-border: #b6e3ff;
  --mouse-on-accent: #ffffff;
  --mouse-device-surface-end: #d8dee4;
  --mouse-device-grid-line: rgba(140, 149, 159, .16);
  --mouse-device-inset: rgba(255, 255, 255, .55);
  --mouse-tested-ring: rgba(84, 174, 255, .22);
  --mouse-active-ring: rgba(255, 129, 130, .28);
  --mouse-trackball-shadow: rgba(31, 35, 40, .28);
  --mouse-surface-hint-bg: rgba(246, 248, 250, .9);
  --mouse-radius: 12px;
  --mouse-control-radius: 8px;
  --mouse-control-min-height: 38px;
  --mouse-control-border: 1px solid var(--mouse-border);
  --mouse-control-background: var(--mouse-surface-soft);
  --mouse-panel-padding: 18px;
  --mouse-settings-grid-template: repeat(4, minmax(180px, 1fr));
  --mouse-stage-height: 410px;
  --mouse-shadow: 0 14px 36px rgba(31, 35, 40, .07);
  --mouse-focus-ring: rgba(9, 105, 218, .16);
  --mouse-device-shadow: rgba(31, 35, 40, .22);
  margin: 0;
  min-height: 100vh;
  color: var(--mouse-text);
  background: var(--mouse-page);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

.mouse-tester,
.mouse-tester * {
  box-sizing: border-box;
}

body.mouse-tester-page > .mouse-main {
  width: min(1320px, calc(100% - 40px));
  margin: 0 auto;
  padding: 40px 0;
}

:where(.mouse-tester) .mouse-page-header {
  margin-block-end: 18px;
}

:where(.mouse-tester) .mouse-page-title,
:where(.mouse-tester) .mouse-panel-title {
  margin: 0;
}

:where(.mouse-tester) .mouse-page-title {
  font-size: clamp(1.7rem, 3vw, 2.2rem);
}

:where(.mouse-tester) .mouse-page-description {
  margin: 0;
  margin-block-start: 8px;
  color: var(--mouse-muted);
  line-height: 1.7;
}

.mouse-tester .breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-block-end: 12px;
  color: var(--mouse-muted);
  font-size: .9rem;
}

.mouse-tester a {
  color: var(--mouse-accent);
  font-weight: 700;
  text-decoration: none;
}

.mouse-tester a:hover,
.mouse-tester a:focus-visible {
  text-decoration: underline;
}

/* パネルとフォーム部品の共通表示。 */
:where(.mouse-tester) .mouse-panel-shell,
:where(.mouse-tester) .mouse-panel {
  margin-block-end: 16px;
  border: 1px solid var(--mouse-border);
  border-radius: var(--mouse-radius);
  background: var(--mouse-surface);
  box-shadow: var(--mouse-shadow);
}

:where(.mouse-tester) .mouse-notice {
  padding: 12px 14px;
  color: var(--mouse-info-text);
  background: var(--mouse-info-bg);
  border-color: var(--mouse-info-border);
  line-height: 1.65;
}

:where(.mouse-tester) .mouse-panel {
  padding: var(--mouse-panel-padding);
}

:where(.mouse-tester) .mouse-panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-block-end: 14px;
}

:where(.mouse-tester) .mouse-panel-title {
  font-size: 1.12rem;
}

:where(.mouse-tester) .mouse-panel-description {
  margin: 0;
  margin-block-start: 5px;
  color: var(--mouse-muted);
  line-height: 1.55;
  font-size: .9rem;
}

:where(.mouse-tester) .mouse-panel-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.mouse-tester button,
.mouse-tester select {
  min-height: var(--mouse-control-min-height);
  border: var(--mouse-control-border);
  border-radius: var(--mouse-control-radius);
  color: var(--mouse-text);
  background: var(--mouse-control-background);
  font: inherit;
}

.mouse-tester button {
  padding: 7px 14px;
  font-weight: 700;
  cursor: pointer;
}

.mouse-tester button:hover,
.mouse-tester button:focus-visible,
.mouse-tester select:focus-visible,
:where(.mouse-tester) .mouse-movement-surface:focus-visible {
  border-color: var(--mouse-accent);
  outline: 2px solid var(--mouse-focus-ring);
  outline-offset: 1px;
}

.mouse-tester button:disabled,
.mouse-tester select:disabled {
  cursor: not-allowed;
  opacity: .52;
}

.mouse-tester .mouse-primary-button {
  color: var(--mouse-on-accent);
  background: var(--mouse-accent);
  border-color: var(--mouse-accent);
}

.mouse-tester .mouse-primary-button:hover,
.mouse-tester .mouse-primary-button:focus-visible {
  background: var(--mouse-accent-hover);
}

/* 診断設定と現在の入力状態。 */
:where(.mouse-tester) .mouse-settings-grid {
  display: grid;
  grid-template-columns: var(--mouse-settings-grid-template);
  gap: 10px;
}

:where(.mouse-tester) .mouse-setting-field {
  display: grid;
  gap: 6px;
  color: var(--mouse-muted);
  font-size: .84rem;
  font-weight: 700;
}

:where(.mouse-tester) .mouse-setting-field select {
  width: 100%;
  padding: 6px 30px 6px 10px;
}

:where(.mouse-tester) .mouse-connection-status {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 16px;
  margin-block-start: 14px;
  padding: 12px 14px;
  border-radius: var(--mouse-control-radius);
  color: var(--mouse-muted);
  background: var(--mouse-surface-soft);
  font-size: .88rem;
}

:where(.mouse-tester) .mouse-connection-status strong {
  color: var(--mouse-text);
}

/* マウス図形とポインター移動エリア。 */
:where(.mouse-tester) .mouse-test-layout {
  display: grid;
  grid-template-columns: minmax(390px, .85fr) minmax(520px, 1.15fr);
  gap: 16px;
}

:where(.mouse-tester) .mouse-device-panel,
:where(.mouse-tester) .mouse-movement-panel {
  min-width: 0;
}

:where(.mouse-tester) .mouse-legend {
  justify-content: flex-end;
  color: var(--mouse-muted);
  font-size: .82rem;
}

:where(.mouse-tester) .mouse-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

:where(.mouse-tester) .mouse-legend i {
  width: 11px;
  height: 11px;
  border: 1px solid var(--mouse-border);
  border-radius: 50%;
}

:where(.mouse-tester) .mouse-legend i.is-active {
  background: var(--mouse-active);
}

:where(.mouse-tester) .mouse-legend i.is-tested {
  background: var(--mouse-tested);
}

:where(.mouse-tester) .mouse-device-stage {
  display: grid;
  place-items: center;
  min-height: var(--mouse-stage-height);
  overflow: hidden;
  padding: 24px;
  border: 1px solid var(--mouse-border);
  border-radius: 10px;
  background:
    linear-gradient(var(--mouse-surface-soft), var(--mouse-surface-soft)) padding-box,
    repeating-linear-gradient(0deg, transparent 0 23px, var(--mouse-device-grid-line) 24px),
    repeating-linear-gradient(90deg, transparent 0 23px, var(--mouse-device-grid-line) 24px);
}

:where(.mouse-tester) .mouse-device {
  --mouse-device-width: 240px;
  --mouse-device-height: 340px;
  --mouse-device-radius: 48% 48% 42% 42% / 32% 32% 55% 55%;
  --mouse-main-button-top: 16px;
  --mouse-main-button-width: 92px;
  --mouse-main-button-height: 112px;
  --mouse-left-button-offset: 18px;
  --mouse-right-button-offset: 18px;
  --mouse-wheel-top: 52px;
  --mouse-wheel-height: 68px;
  --mouse-aux-button-top: 164px;
  --mouse-back-button-left: 18px;
  --mouse-forward-button-left: 78px;
  --mouse-trackball-display: none;
  --mouse-trackball-top: auto;
  --mouse-trackball-right: auto;
  --mouse-trackball-bottom: auto;
  --mouse-trackball-left: auto;
  --mouse-trackball-size: 104px;
  --mouse-trackball-transform: none;
  position: relative;
  width: var(--mouse-device-width);
  height: var(--mouse-device-height);
  border: 3px solid var(--mouse-border-strong);
  border-radius: var(--mouse-device-radius);
  background: linear-gradient(145deg, var(--mouse-on-accent), var(--mouse-device-surface-end));
  box-shadow:
    inset 0 0 0 5px var(--mouse-device-inset),
    0 14px 24px var(--mouse-device-shadow);
  user-select: none;
}

:where(.mouse-tester) .mouse-device-button {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  border: 2px solid var(--mouse-muted);
  color: var(--mouse-text);
  background: var(--mouse-surface-soft);
  box-shadow: 0 3px 5px var(--mouse-device-shadow);
  font-size: .78rem;
  font-weight: 800;
  transition: transform 40ms linear;
}

:where(.mouse-tester) .mouse-device-button.is-tested {
  border-color: var(--mouse-tested);
  box-shadow: 0 0 0 3px var(--mouse-tested-ring);
}

:where(.mouse-tester) .mouse-device-button.is-active {
  border-color: var(--mouse-active-edge);
  color: var(--mouse-on-accent);
  background: var(--mouse-active);
  box-shadow: 0 0 0 3px var(--mouse-active-ring);
  transform: translateY(2px);
}

:where(.mouse-tester) .mouse-left-button,
:where(.mouse-tester) .mouse-right-button {
  top: var(--mouse-main-button-top);
  width: var(--mouse-main-button-width);
  height: var(--mouse-main-button-height);
}

:where(.mouse-tester) .mouse-left-button {
  left: var(--mouse-left-button-offset);
  border-radius: 42px 10px 16px 10px;
}

:where(.mouse-tester) .mouse-right-button {
  right: var(--mouse-right-button-offset);
  border-radius: 10px 42px 10px 16px;
}

:where(.mouse-tester) .mouse-wheel {
  top: var(--mouse-wheel-top);
  left: 50%;
  width: 30px;
  height: var(--mouse-wheel-height);
  border-radius: 15px;
  transform: translateX(-50%);
}

:where(.mouse-tester) .mouse-wheel.is-active {
  transform: translateX(-50%) translateY(2px);
}

:where(.mouse-tester) .mouse-back-button,
:where(.mouse-tester) .mouse-forward-button {
  top: var(--mouse-aux-button-top);
  width: 54px;
  height: 36px;
  border-radius: 12px;
}

:where(.mouse-tester) .mouse-back-button {
  left: var(--mouse-back-button-left);
}

:where(.mouse-tester) .mouse-forward-button {
  left: var(--mouse-forward-button-left);
}

:where(.mouse-tester) .mouse-trackball {
  position: absolute;
  top: var(--mouse-trackball-top);
  right: var(--mouse-trackball-right);
  bottom: var(--mouse-trackball-bottom);
  left: var(--mouse-trackball-left);
  z-index: 1;
  display: var(--mouse-trackball-display);
  width: var(--mouse-trackball-size);
  height: var(--mouse-trackball-size);
  border: 4px solid var(--mouse-muted);
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 34% 28%,
      var(--mouse-on-accent) 0 5%,
      var(--mouse-tested) 18%,
      var(--mouse-accent) 70%
    );
  box-shadow:
    inset -9px -12px 18px var(--mouse-trackball-shadow),
    0 5px 10px var(--mouse-device-shadow);
  transform: var(--mouse-trackball-transform);
}

:where(.mouse-tester) .mouse-device-mark {
  position: absolute;
  bottom: 36px;
  left: 50%;
  color: var(--mouse-muted);
  font-size: .68rem;
  font-weight: 700;
  transform: translateX(-50%);
}

:where(.mouse-tester) .mouse-device[data-profile="thumbTrackball"] {
  --mouse-device-width: 350px;
  --mouse-device-height: 260px;
  --mouse-device-radius: 100px 110px 72px 72px;
  --mouse-main-button-width: 112px;
  --mouse-main-button-height: 78px;
  --mouse-left-button-offset: 52px;
  --mouse-right-button-offset: 52px;
  --mouse-aux-button-top: 128px;
  --mouse-back-button-left: 108px;
  --mouse-forward-button-left: 168px;
  --mouse-trackball-display: block;
  --mouse-trackball-right: 26px;
  --mouse-trackball-bottom: 36px;
}

:where(.mouse-tester) .mouse-device[data-profile="thumbTrackball"][data-side="left"] {
  --mouse-back-button-left: 188px;
  --mouse-forward-button-left: 248px;
  --mouse-trackball-right: auto;
  --mouse-trackball-left: 26px;
}

:where(.mouse-tester) .mouse-device[data-profile="palmTrackball"] {
  --mouse-device-width: 350px;
  --mouse-device-height: 290px;
  --mouse-device-radius: 72px 72px 110px 110px;
  --mouse-main-button-width: 116px;
  --mouse-main-button-height: 58px;
  --mouse-left-button-offset: 28px;
  --mouse-right-button-offset: 28px;
  --mouse-wheel-top: 18px;
  --mouse-wheel-height: 52px;
  --mouse-aux-button-top: 216px;
  --mouse-back-button-left: 94px;
  --mouse-forward-button-left: 202px;
  --mouse-trackball-display: block;
  --mouse-trackball-top: 78px;
  --mouse-trackball-left: 50%;
  --mouse-trackball-size: 132px;
  --mouse-trackball-transform: translateX(-50%);
}

:where(.mouse-tester) .mouse-movement-surface {
  position: relative;
  height: var(--mouse-stage-height);
  overflow: hidden;
  border: 1px solid var(--mouse-border-strong);
  border-radius: 10px;
  background: var(--mouse-on-accent);
  cursor: crosshair;
  touch-action: none;
}

:where(.mouse-tester) .mouse-movement-surface.is-pointer-locked {
  border-color: var(--mouse-accent);
  cursor: none;
}

:where(.mouse-tester) .mouse-movement-surface canvas {
  position: absolute;
  inset: 0;
  display: block;
}

:where(.mouse-tester) .mouse-surface-hint {
  position: absolute;
  right: 12px;
  bottom: 10px;
  padding: 4px 7px;
  border-radius: 6px;
  color: var(--mouse-muted);
  background: var(--mouse-surface-hint-bg);
  font-size: .76rem;
  pointer-events: none;
}

/* 測定結果、診断内容、イベント履歴。 */
:where(.mouse-tester) .mouse-status-grid {
  --mouse-status-columns: 4;
  --mouse-status-divider: 1px solid var(--mouse-border);
  display: grid;
  grid-template-columns: repeat(var(--mouse-status-columns), minmax(0, 1fr));
  overflow: hidden;
}

:where(.mouse-tester) .mouse-status-card {
  min-width: 0;
  padding: 14px 15px;
  border-inline-end: var(--mouse-status-divider);
  border-block-end: var(--mouse-status-divider);
}

:where(.mouse-tester) .mouse-status-card:nth-child(4n) {
  border-inline-end: 0;
}

:where(.mouse-tester) .mouse-status-card:nth-last-child(-n + 3) {
  border-block-end: 0;
}

:where(.mouse-tester) .mouse-status-card > span {
  display: block;
  min-height: 2.3em;
  color: var(--mouse-muted);
  font-size: .78rem;
  font-weight: 700;
}

:where(.mouse-tester) .mouse-status-card strong {
  display: block;
  margin-block-start: 5px;
  color: var(--mouse-accent);
  overflow-wrap: anywhere;
}

:where(.mouse-tester) .mouse-diagnostics-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

:where(.mouse-tester) .mouse-diagnostic-item {
  padding: 10px 12px;
  border-inline-start: 4px solid var(--mouse-warning);
  border-radius: 6px;
  color: var(--mouse-warning-text);
  background: var(--mouse-warning-bg);
}

:where(.mouse-tester) .mouse-table-wrap {
  overflow: auto;
  max-height: 360px;
  border: 1px solid var(--mouse-border);
  border-radius: 9px;
}

:where(.mouse-tester) .mouse-event-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .84rem;
}

:where(.mouse-tester) .mouse-event-table th,
:where(.mouse-tester) .mouse-event-table td {
  padding: 9px 10px;
  border-block-end: 1px solid var(--mouse-border);
  text-align: start;
  white-space: nowrap;
}

:where(.mouse-tester) .mouse-event-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  color: var(--mouse-muted);
  background: var(--mouse-surface-soft);
}

:where(.mouse-tester) .mouse-event-table tbody tr:last-child td {
  border-block-end: 0;
}

:where(.mouse-tester) .mouse-empty-message {
  margin: 0;
  padding: 18px;
  color: var(--mouse-muted);
  text-align: center;
}

/* 画面幅に応じて列数を減らし、部品の寸法は維持する。 */
@media (max-width: 1120px) {
  :where(.mouse-tester) {
    --mouse-settings-grid-template: repeat(2, minmax(180px, 1fr));
    --mouse-stage-height: 390px;
  }

  :where(.mouse-tester) .mouse-test-layout {
    grid-template-columns: 1fr;
  }

  :where(.mouse-tester) .mouse-device-stage,
  :where(.mouse-tester) .mouse-movement-surface {
    min-height: var(--mouse-stage-height);
    height: var(--mouse-stage-height);
  }
}

@media (max-width: 760px) {
  body.mouse-tester-page > .mouse-main {
    width: min(100% - 20px, 1320px);
    padding: 24px 0;
  }

  :where(.mouse-tester) {
    --mouse-panel-padding: 14px;
  }

  :where(.mouse-tester) .mouse-panel-heading {
    align-items: stretch;
    flex-direction: column;
  }

  :where(.mouse-tester) .mouse-panel-actions > button:only-child {
    width: 100%;
  }

  :where(.mouse-tester) .mouse-connection-status {
    grid-template-columns: 1fr;
  }

  :where(.mouse-tester) .mouse-status-grid {
    --mouse-status-columns: 2;
  }

  :where(.mouse-tester) .mouse-status-card,
  :where(.mouse-tester) .mouse-status-card:nth-child(4n) {
    border-inline-end: var(--mouse-status-divider);
    border-block-end: var(--mouse-status-divider);
  }

  :where(.mouse-tester) .mouse-status-card:nth-child(2n) {
    border-inline-end: 0;
  }

  :where(.mouse-tester) .mouse-status-card:nth-last-child(-n + 3) {
    border-block-end: var(--mouse-status-divider);
  }

  :where(.mouse-tester) .mouse-status-card:last-child {
    border-block-end: 0;
  }

  :where(.mouse-tester) .mouse-device-stage {
    padding: 18px 10px;
  }

  :where(.mouse-tester) .mouse-device[data-profile="thumbTrackball"],
  :where(.mouse-tester) .mouse-device[data-profile="palmTrackball"] {
    transform: scale(.88);
  }
}

@media (max-width: 520px) {
  :where(.mouse-tester) {
    --mouse-settings-grid-template: 1fr;
    --mouse-stage-height: 340px;
  }

  :where(.mouse-tester) .mouse-settings-actions button {
    flex: 1 1 calc(50% - 8px);
  }

  :where(.mouse-tester) .mouse-status-grid {
    --mouse-status-columns: 1;
  }

  :where(.mouse-tester) .mouse-status-card,
  :where(.mouse-tester) .mouse-status-card:nth-child(2n),
  :where(.mouse-tester) .mouse-status-card:nth-child(4n),
  :where(.mouse-tester) .mouse-status-card:nth-last-child(-n + 3) {
    border-inline-end: 0;
    border-block-end: var(--mouse-status-divider);
  }

  :where(.mouse-tester) .mouse-status-card:last-child {
    border-block-end: 0;
  }

  :where(.mouse-tester) .mouse-device-stage,
  :where(.mouse-tester) .mouse-movement-surface {
    min-height: var(--mouse-stage-height);
    height: var(--mouse-stage-height);
  }

  :where(.mouse-tester) .mouse-device {
    transform: scale(.82);
  }

  :where(.mouse-tester) .mouse-device[data-profile="thumbTrackball"],
  :where(.mouse-tester) .mouse-device[data-profile="palmTrackball"] {
    transform: scale(.72);
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(.mouse-tester) .mouse-device-button {
    transition: none;
  }
}