/*
 * Shared theme for /debug/*.html tools (dispatcher, wheel) and /stats.html.
 */
:root {
  --debug-bg: #1e1e1e;
  --debug-fg: #d4d4d4;
  --debug-muted: #666;
  --debug-muted2: #555;
  --debug-border: #333;
  --debug-zone-border: #555;
  --debug-panel: #252526;
  --debug-accent-cyan: #9cdcfe;
  --debug-accent-teal: #4ec9b0;
  --debug-accent-orange: #ce9178;
  --debug-accent-green: #b5cea8;
  --debug-accent-red: #f44747;
  --debug-accent-purple: #c586c0;
  --debug-accent-yellow: #dcdcaa;
  --debug-accent-blue: #569cd6;
  --debug-btn-bg: #333;
  --debug-btn-border: #444;
  --debug-btn-hover: #3c3c3c;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

a {
  color: #6aafca;
}

a:visited {
  color: #9a8bb0;
}

body.debug-page {
  font-family: monospace;
  background: var(--debug-bg);
  color: var(--debug-fg);
  margin: 0;
  height: 100vh;
  user-select: none;
}

body.debug-page.debug-layout-dispatcher {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  overflow: hidden;
}

body.debug-page.debug-layout-wheel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
}

/* Interactive test region (canvas wrapper or div) */
.debug-zone {
  border: 2px dashed var(--debug-zone-border);
  border-radius: 8px;
  cursor: crosshair;
  touch-action: none;
}

.debug-zone.active {
  border-color: var(--debug-accent-teal);
}

/* Full-width canvas strip (dispatcher) */
.debug-zone-canvas {
  width: 100%;
  height: 140px;
  flex-shrink: 0;
  display: block;
}

/* Fixed size wheel test pad */
.debug-zone-wheel {
  width: 480px;
  height: 220px;
}

/* Div-based zone with centered label (wheel debugger) */
.debug-zone--labeled {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--debug-muted);
  font-size: 14px;
}

.debug-zone--labeled.active {
  color: var(--debug-accent-teal);
}

/* Section title (dispatcher h1, etc.) */
.debug-title {
  margin: 0;
  font-size: 14px;
  color: var(--debug-accent-cyan);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* On-demand stats page (/stats.html) */
body.debug-page.debug-layout-stats {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  min-height: 100vh;
  overflow: auto;
  user-select: text;
}

.debug-stats-main {
  max-width: 48rem;
}

.debug-stats-meta {
  margin: 0;
  font-size: 12px;
  color: var(--debug-muted);
}

.debug-stats-list {
  margin: 0;
}

.debug-stats-list dt {
  margin-top: 14px;
  font-size: 12px;
  color: var(--debug-accent-orange);
  line-height: 1.4;
}

.debug-stats-list dt:first-child {
  margin-top: 0;
}

.debug-stats-list dd {
  margin: 6px 0 0 0;
  font-size: 20px;
  color: var(--debug-accent-green);
}

/* Data table (wheel property grid) */
.debug-table {
  border-collapse: collapse;
  width: 480px;
}

.debug-table th,
.debug-table td {
  padding: 8px 16px;
  text-align: left;
  border-bottom: 1px solid var(--debug-border);
}

.debug-table th {
  color: var(--debug-accent-cyan);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.debug-table td.debug-label {
  color: var(--debug-accent-orange);
}

.debug-table td.debug-value {
  color: var(--debug-accent-green);
  font-size: 18px;
}

.debug-table td.debug-value.bool-true {
  color: var(--debug-accent-teal);
}

.debug-table td.debug-value.bool-false {
  color: var(--debug-accent-red);
}

/* Device / badge chip */
.debug-chip {
  font-size: 13px;
  padding: 4px 12px;
  border-radius: 4px;
  background: var(--debug-btn-bg);
}

.debug-chip.trackpad {
  color: var(--debug-accent-teal);
}

.debug-chip.mouse {
  color: var(--debug-accent-orange);
}

/* Log panels (dispatcher) */
.debug-logs {
  display: flex;
  gap: 12px;
  flex: 1;
  min-height: 0;
}

.debug-log-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.debug-log-panel h2 {
  margin: 0 0 6px 0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--debug-border);
}

.debug-log-panel--raw h2 {
  color: var(--debug-accent-orange);
}

.debug-log-panel--disp h2 {
  color: var(--debug-accent-teal);
}

.debug-log-scroll {
  flex: 1;
  overflow: hidden;
}

.debug-log-inner {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.debug-entry {
  font-size: 11px;
  line-height: 1.5;
  padding: 3px 6px;
  border-radius: 3px;
  background: var(--debug-panel);
  white-space: pre;
}

.debug-entry.wheel {
  border-left: 3px solid var(--debug-accent-blue);
}

.debug-entry.mousedown {
  border-left: 3px solid var(--debug-accent-purple);
}

.debug-entry.mousemove {
  border-left: 3px solid #444;
  color: var(--debug-muted);
}

.debug-entry.mouseup {
  border-left: 3px solid var(--debug-accent-purple);
}

.debug-entry.touchstart {
  border-left: 3px solid var(--debug-accent-yellow);
}

.debug-entry.touchmove {
  border-left: 3px solid #555;
  color: #777;
}

.debug-entry.touchend {
  border-left: 3px solid var(--debug-accent-yellow);
}

.debug-entry.zoom {
  border-left: 3px solid var(--debug-accent-teal);
}

.debug-entry.pan {
  border-left: 3px solid var(--debug-accent-blue);
}

.debug-entry.planeswitch {
  border-left: 3px solid var(--debug-accent-red);
}

.debug-entry.select {
  border-left: 3px solid var(--debug-accent-yellow);
}

.debug-entry.edit {
  border-left: 3px solid var(--debug-accent-purple);
}

.debug-entry.properties {
  border-left: 3px solid var(--debug-accent-orange);
}

.debug-entry.dragstart {
  border-left: 3px solid var(--debug-accent-cyan);
}

.debug-entry.dragmove {
  border-left: 3px solid #444;
  color: var(--debug-muted);
}

.debug-entry.dragend {
  border-left: 3px solid var(--debug-accent-cyan);
}

.debug-btn-clear {
  font-family: monospace;
  font-size: 11px;
  background: var(--debug-btn-bg);
  color: var(--debug-accent-cyan);
  border: 1px solid var(--debug-btn-border);
  border-radius: 4px;
  padding: 2px 8px;
  cursor: pointer;
  margin-left: auto;
}

.debug-btn-clear:hover {
  background: var(--debug-btn-hover);
}

.debug-log-header {
  display: flex;
  align-items: baseline;
  margin-bottom: 6px;
}