/*
 * Redesign intent: replace developer-console defaults with readable,
 * semantic controls and a six-level typographic hierarchy.
 */
*, *::before, *::after { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
html { background: var(--surface-page); }
body {
  min-width: 320px;
  overflow: hidden;
  background: var(--surface-page);
  color: var(--text-primary);
  font: 300 18px/1.55 var(--font-body);
  text-rendering: optimizeLegibility;
}
button, input, select { font: inherit; }
button, select, input[type='search'] { color: inherit; }
button { border: 0; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.5; }
button, input, select, summary { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
button svg { width: 20px; height: 20px; display: block; }
h1, h2, h3, p, dl, dd { margin: 0; }
h1, h2, h3 { font-family: var(--font-display); font-feature-settings: 'liga' 1, 'calt' 1; font-weight: 700; }
.text-display { font: 600 32px/1.2 var(--font-display); }
.text-title { font: 600 20px/1.3 var(--font-body); }
.text-body { font: 400 15px/1.6 var(--font-body); }
.eyebrow, .text-label { color: var(--text-secondary); font: 600 12px/1.4 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; }
.text-caption { color: var(--text-secondary); font: 400 13px/1.5 var(--font-body); }
.telemetry { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.skip-link { position: fixed; top: var(--space-3); left: var(--space-3); z-index: 100; transform: translateY(-160%); padding: 10px 14px; border-radius: var(--radius-control); background: var(--accent); color: var(--text-on-accent); font-weight: 700; }
.skip-link:focus { transform: translateY(0); }
.skip-link:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 3px; }
.icon-button, .map-button {
  display: inline-grid;
  width: var(--touch-target);
  height: var(--touch-target);
  place-items: center;
  border: 1px solid transparent;
  border-radius: 50%;
  background: var(--surface-secondary);
  color: var(--accent);
  transition: color var(--motion-fast), border-color var(--motion-fast), background var(--motion-fast);
}
.icon-button:hover, .map-button:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); }
.primary-button, .secondary-button {
  min-height: var(--touch-target);
  padding: 0 16px;
  border-radius: var(--radius-control);
  font-weight: 600;
  transition: background var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast);
}
.primary-button { background: var(--action); color: #fff; }
.primary-button:hover { background: var(--action); box-shadow: inset 0 0 0 2px var(--action-hover); }
.secondary-button { border: 1px solid var(--accent); background: #fff; color: var(--accent); }
.secondary-button:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); }
dialog { color: var(--text-primary); }
dialog::backdrop { background: rgba(0, 0, 0, 0.32); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}