/* Application shell CSS. Everything visual beyond this lives in fig-tokens.css or
   in a screen's inline styles, ported verbatim from the .dc.html designs.
   No new hex literals may be introduced here — use var(--...) tokens. */

/* Typography faces (design system): General Sans is the primary body/label/numeral
   face; Space Grotesk is reserved for the brand wordmark and display headings. Screens
   reference these via var(--font-body) / var(--font-display) so the faces live in one place. */
:root {
  --font-body: 'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Space Grotesk', 'General Sans', sans-serif;
}

* { box-sizing: border-box; }

html, body, #root {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: var(--background-backgroundprimary);
  color: var(--contentprimary);
  font-family: var(--font-body);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

/* Single-viewport console: the shell never scrolls, individual regions do. */
#root {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

a { color: var(--contentactive); text-decoration: none; }
a:hover { color: var(--orange-300); }

input, textarea, select, button { font-family: inherit; }
input::placeholder, textarea::placeholder { color: var(--contenttertiary); }
input:focus, textarea:focus, select:focus { outline: none; }

/* Scrollbars — thin, neutral, console-appropriate. */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--charcoal-250);
  border-radius: 9999px;
  border: 3px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background-color: var(--charcoal-300); background-clip: content-box; }

/* FLASHING_RED is a backend state_color, carried as an animation rather than a fifth hue. */
@keyframes vt-flash { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.vt-flashing { animation: vt-flash 1s steps(1, end) infinite; }

/* Locked modal anatomy: panel entrance. */
@keyframes panelIn {
  from { opacity: 0; transform: translateY(6px) scale(0.995); }
  to   { opacity: 1; transform: none; }
}
@keyframes scrimIn { from { opacity: 0; } to { opacity: 1; } }

/* Side panel slides in over the right of the dashboard; the map stays live behind. */
@keyframes sidePanelIn {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* MapLibre's stock zoom/nav control, restyled to the design's chip-group treatment
   (4px radius, inset-border dividers) instead of the library's default rounded-square look. */
.maplibregl-ctrl-group {
  border-radius: 4px !important;
  box-shadow: inset 0 0 0 1px var(--borderneutral) !important;
  background: #fff !important;
  overflow: hidden;
}
.maplibregl-ctrl-group button {
  width: 30px !important;
  height: 32px !important;
}
.maplibregl-ctrl-group button + button {
  box-shadow: inset 0 1px 0 var(--borderneutral) !important;
}