/* Statiq Maps technical design system. Presentation only: no layout, positioning,
   dimensions, visibility, z-index, pointer handling, or map/data palette rules. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/inter-400.ttf) format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/inter-500.ttf) format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/inter-600.ttf) format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/inter-700.ttf) format('truetype');
}
:root {
  color-scheme: dark;
  --st-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --st-bg: #0f141a;
  --st-nav: #0c1217;
  --st-surface: #172129;
  --st-raised: #202d37;
  --st-field: #111a22;
  --st-hover: #263541;
  --st-border: #2b3a46;
  --st-text: #e5e7eb;
  --st-muted: #a6b2be;
  --st-accent: #3b82f6;
  --st-primary: #2563eb;
  --st-accent-soft: #1c3554;
  --st-link: #94bff7;
  --st-on-accent: #ffffff;
  --st-radius: 6px;
  --st-shadow-float: 0 6px 20px rgba(0, 0, 0, .22);
  --st-success: #83c9ad;
  --st-warning: #e6c17a;
  --st-error: #f0a5a5;
}
/* Retain the existing light/system preference contract. No preference JS changes. */
:root[data-theme="light"] {
  color-scheme: light;
  --st-bg: #f3f5f7;
  --st-nav: #e9eef2;
  --st-surface: #ffffff;
  --st-raised: #edf1f5;
  --st-field: #ffffff;
  --st-hover: #e2e9f0;
  --st-border: #cad3dc;
  --st-text: #1c2935;
  --st-muted: #526372;
  --st-accent-soft: #dfebfc;
  --st-link: #2055a0;
  --st-success: #176443;
  --st-warning: #805700;
  --st-error: #a52b37;
}
html, body { background-color: var(--st-bg); color: var(--st-text); font-family: var(--st-font); }
body { background-image: none; }
button, input, select, textarea { font-family: var(--st-font); }
h1, h2, h3, h4, h5, h6 { font-family: var(--st-font); font-weight: 600; text-shadow: none; }
/* Hierarchy follows the existing title sizes and responsive sizing rules. */
h1, h2 { letter-spacing: -.02em; }
:where(.value, .metric-value, .stat-value, .kpi .value, td.right) { font-variant-numeric: tabular-nums; }
:where(button, .btn, .button, .button-link, input, select, textarea) {
  border-radius: var(--st-radius);
  box-shadow: none;
  text-shadow: none;
}
:where(button, .btn, .button, .button-link) { font-weight: 500; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--st-accent) !important;
  outline-offset: 2px;
}
:where(button, input, select, textarea):disabled { cursor: not-allowed; }
input::placeholder, textarea::placeholder { color: var(--st-muted); opacity: 1; }
input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--st-accent); }
:where(th) { color: var(--st-muted); font-weight: 500; }
:where(table) { font-variant-numeric: tabular-nums; }
:where(tbody tr:hover) { background-color: var(--st-hover); }
:where(.sidebar, .topbar, .rb-sidebar, .rb-topbar, .mobile-bottom-nav, .mobile-app-topbar) {
  background: var(--st-nav) !important;
  box-shadow: none !important;
  border-color: var(--st-border) !important;
}
:where(.sidebar-title) { color: var(--st-muted) !important; letter-spacing: .08em; }
body .nav-link.is-active, body .rb-nav-link.is-active,
.mobile-bottom-nav__item.is-active {
  background: var(--st-accent-soft) !important;
  color: var(--st-text) !important;
  border-color: var(--st-border) !important;
  box-shadow: none !important;
}
body .nav-link:hover:not(.is-disabled), body .rb-nav-link:hover {
  background: var(--st-hover) !important;
}
:where(.nav-link, .rb-nav-link, .tab-btn, .subtab-btn) { border-radius: var(--st-radius); }
/* Preserve semantic notices and data colors; soften only decorative UI treatments. */
:where(.readonly-banner, .read-only-banner) { color: var(--st-warning); }
/* Third-party map chrome only. Map canvases, tiles, SVG paths, markers, scales,
   attribution placement and data-layer styling are deliberately not selected. */
.leaflet-control-layers, .leaflet-bar,
.maplibregl-ctrl-group, .mapboxgl-ctrl-group,
.leaflet-popup-content-wrapper, .maplibregl-popup-content, .mapboxgl-popup-content {
  background-color: var(--st-surface);
  color: var(--st-text);
  border-color: var(--st-border);
  border-radius: var(--st-radius);
  box-shadow: var(--st-shadow-float);
  font-family: var(--st-font);
}
.leaflet-bar a, .maplibregl-ctrl-group button, .mapboxgl-ctrl-group button {
  background-color: var(--st-surface);
  color: var(--st-text);
  border-color: var(--st-border);
}
.leaflet-bar a:hover, .maplibregl-ctrl-group button:hover, .mapboxgl-ctrl-group button:hover {
  background-color: var(--st-hover);
}
.leaflet-popup-tip { background-color: var(--st-surface); }
:root:not([data-theme="light"]) .maplibregl-ctrl-icon,
:root:not([data-theme="light"]) .mapboxgl-ctrl-icon { filter: invert(.9); }
.leaflet-popup-close-button, .maplibregl-popup-close-button, .mapboxgl-popup-close-button { color: var(--st-muted); }
/* Generated condition report popups previously imposed their own blue theme. */
.map-conditions-maplibre-popup .maplibregl-popup-content {
  background: var(--st-surface) !important;
  color: var(--st-text) !important;
  border-color: var(--st-border) !important;
  box-shadow: var(--st-shadow-float) !important;
}
.map-conditions-maplibre-popup .maplibregl-popup-tip { border-top-color: var(--st-surface) !important; }
/* Chart drawing data and series colors are unchanged. Only their containers use
   the same surface treatment as the rest of the application. */
:where(.chart-card, .chart-panel, .chart-container, .graph-card) {
  background-color: var(--st-surface);
  border-color: var(--st-border);
  box-shadow: none;
  border-radius: var(--st-radius);
}
/* Utility-styled AI interface: preserve utility layout classes and restyle only
   its explicit visual utilities, including the decorative header gradient. */
body :is(.bg-neutral-950, .bg-neutral-900, .bg-slate-900) { background-color: var(--st-surface) !important; }
body :is(.bg-neutral-800, .bg-slate-800) { background-color: var(--st-raised) !important; }
body :is(.border-neutral-800, .border-neutral-700, .border-slate-700) { border-color: var(--st-border) !important; }
body :is(.text-neutral-400, .text-neutral-300, .text-slate-400) { color: var(--st-muted) !important; }
body [class*="bg-[radial-gradient"] { background: var(--st-surface) !important; }
body :is(.chart-card, .chart-panel, .chart-container, .graph-card) {
  background-color: var(--st-surface);
  border-color: var(--st-border);
  border-radius: var(--st-radius);
  box-shadow: none;
}
.map-conditions-maplibre-popup :is(.map-conditions-meta, .muted, .map-conditions-comment-author) { color: var(--st-muted) !important; }
.map-conditions-maplibre-popup :is(h4, .map-conditions-desc, .map-conditions-comment, .map-conditions-clear-note) { color: var(--st-text) !important; }
.map-conditions-maplibre-popup .map-conditions-comment {
  background: var(--st-raised) !important; border-color: var(--st-border) !important; border-radius: var(--st-radius) !important;
}
/* Keep the page canvas darker than its cards, including legacy body overrides. */
html body, body.garage-shell, body.garage-shell .shell,
body:not(.page-theme-optout) .shell { background: var(--st-bg) !important; }
body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), select, textarea) {
  background-color: var(--st-field);
  color: var(--st-text);
  border-color: var(--st-border);
}
body.garage-shell :is(.hero-card, .panel, .kpi) { box-shadow: none !important; }
/* Keep non-data progress fills solid without changing their values or widths. */
body .progress-fill, body .progress-track span { background-image: none; background-color: var(--st-accent); }
/* Background processing notices keep their warning identity in both themes. */
body .stats-build-alert { background: var(--st-surface); border-color: var(--st-warning); }
body .stats-build-alert :is(strong, p) { color: var(--st-text); }
body .stats-build-alert button { background: var(--st-raised); color: var(--st-text); border-color: var(--st-border); }
.map-conditions-maplibre-popup .maplibregl-popup-content { border-radius: var(--st-radius) !important; }
/* Preserve clear hierarchy when legacy grouped selectors include both headings
   and captions. Use surface-neutral text, not decorative accent headings. */
body :is(h1, h2, h3, h4, h5, h6),
body :is(.metric-value, .stat-value, .kpi .value, .summary-value) { color: var(--st-text) !important; }
body .unit-toggle { border-radius: var(--st-radius); }
/* Keep the existing five mobile destinations and touch targets; fit the longer
   Dashboard label cleanly in its existing button with Inter. */
.mobile-bottom-nav__label { font-size: 10px; letter-spacing: 0; white-space: nowrap; }
/* Metrics retain a stronger contrast than their captions, even when a page has
   a legacy selector that assigns one color to every nested span. */
body .stat-value .unit-value { color: var(--st-text) !important; }
body .stat-title { color: var(--st-muted) !important; }