/* Cross-component finish and accessibility. Loaded last so the four panel
   styles share one interaction language without duplicating declarations. */
:root { color-scheme: dark; }

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button, input, select { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

:where(button, select, input, [role="button"], [tabindex]):focus-visible {
  outline: 2px solid #93c5fd !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(59,130,246,.2);
}

input[type="range"]:focus-visible {
  outline-offset: 5px !important;
  box-shadow: none;
}

/* Fully draw range controls instead of relying on each browser's dark native
   theme. Literal colours are intentional here: Safari has rendered custom
   properties inconsistently inside range pseudo-elements. */
input[type="range"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  color-scheme: light;
  height: 16px;
  background: transparent !important;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 3px;
  border: 0;
  border-radius: 999px;
  background: rgba(148,163,184,.58) !important;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 14px;
  height: 14px;
  margin-top: -5.5px;
  border: 2px solid #bfdbfe !important;
  border-radius: 50%;
  background: #3b82f6 !important;
  box-shadow: 0 0 0 2px rgba(17,24,39,.9) !important;
}
input[type="range"]::-moz-range-track {
  height: 3px;
  border: 0;
  border-radius: 999px;
  background: rgba(148,163,184,.58) !important;
}
input[type="range"]::-moz-range-progress {
  height: 3px;
  border-radius: 999px;
  background: #60a5fa !important;
}
input[type="range"]::-moz-range-thumb {
  appearance: none !important;
  width: 10px;
  height: 10px;
  border: 2px solid #bfdbfe !important;
  border-radius: 50%;
  background: #3b82f6 !important;
  box-shadow: 0 0 0 2px rgba(17,24,39,.9) !important;
}
.month-section #month::-webkit-slider-runnable-track,
.month-section #month::-moz-range-track,
.month-section #month::-moz-range-progress { height: 4px; }

button:disabled, select:disabled, input:disabled {
  cursor: not-allowed;
}

/* Small labels remain secondary, but are readable on the dark surfaces. */
#app-sub,
.section-label,
#active-layers .al-title,
#legend .legend-title,
#lc-legend .legend-title,
#habitat-legend .legend-title,
#lidar-legend .legend-title,
#terrain-legend .legend-title,
.cp-meta,
.fp-label,
.kp-label {
  color: rgba(255,255,255,.52);
}

.month-ticks { color: rgba(255,255,255,.42); font-size: 9px; }
.metric-card-units { color: rgba(255,255,255,.5); }

/* MapLibre's navigation artwork is embedded as a dark SVG background. Draw
   high-contrast symbols directly so zoom/compass remain visible regardless of
   SVG filtering support or the browser's forced-colour treatment. */
.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon,
.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon,
.maplibregl-ctrl-compass .maplibregl-ctrl-icon {
  position: relative;
  background-image: none !important;
  filter: none !important;
  opacity: 1 !important;
}
.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon::before,
.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon::before,
.maplibregl-ctrl-compass .maplibregl-ctrl-icon::before {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #f8fafc;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,.75);
}
.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon::before {
  content: '+';
  padding-bottom: 2px;
  font-size: 23px;
  font-weight: 300;
}
.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon::before {
  content: '\2212';
  padding-bottom: 3px;
  font-size: 23px;
  font-weight: 300;
}
.maplibregl-ctrl-compass .maplibregl-ctrl-icon::before {
  content: '\25b2';
  font-size: 13px;
}

/* Consistent, quiet scrollbars for dense data panels. */
#sidebar,
#right-panel-inner,
.cp-body,
.fp-rules,
.kp-body {
  scrollbar-width: thin;
  scrollbar-color: rgba(148,163,184,.28) transparent;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(148,163,184,.25);
  border: 2px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(148,163,184,.42); }

@media (hover: none) and (pointer: coarse) {
  .rp-tab { min-height: 36px; }
  #rp-toggle { min-width: 40px; }
}

@media (max-width: 767px) {
  /* Keep map furniture clear of the collapsed analysis dock. */
  #legend { bottom: 70px; right: 12px; }
  #active-layers { right: 8px; min-width: 196px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}