/* Evacusense app styles: layout and behaviour that sit on top of evacusense-theme.css (the design handoff, direction 4a "Graphite").
   Colours, type and components come from the --es-* tokens and es- classes there; change them there, not here.
   Rules from the handoff: orange = fire/slider fill/focus/logo only; red = affected roads only; pale blue = exit route only;
   one off-white primary button; 2px radius; no shadows, no gradients; no animation beyond the globe, the fly-in and the replay. */

* { box-sizing: border-box; }
html { color-scheme: dark; }
body { font-size: 14px; }
button, select { font-family: inherit; }

/* The map fills the page; the globe on the landing page is this same map */
#map { position: absolute; inset: 0; }

/* ----- Loading screen ----- */
#loading { position: fixed; inset: 0; z-index: 50; background: var(--es-bg); display: flex; flex-direction: column;
           align-items: center; justify-content: center; gap: 18px;
           font: 400 12px var(--es-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--es-muted);
           transition: opacity 0.5s ease, visibility 0s 0.5s; }
#loading p { margin: 0; }
body:not(.loading) #loading { opacity: 0; visibility: hidden; pointer-events: none; }

/* ----- Landing: text column on the left, the globe (the map) on the right ----- */
#landing { position: fixed; top: 0; bottom: 0; left: 0; width: 50vw; z-index: 20; display: flex; flex-direction: column;
           padding: 40px 64px 48px; background: var(--es-bg); transition: opacity 0.5s ease, visibility 0s 0.5s; }
body:not(.landing) #landing { opacity: 0; visibility: hidden; pointer-events: none; }
#landing .es-copy { margin: auto 0; max-width: 600px; }
#landing .es-title { margin-bottom: 28px; }
.es-skip { display: inline-block; margin-top: 28px; font: 400 12px var(--es-mono); letter-spacing: 0.06em; color: var(--es-muted); }
.es-skip:hover { color: var(--es-text); }
.es-credits { margin: 0; max-width: 560px; font: 400 10px/1.7 var(--es-mono); letter-spacing: 0.04em; color: var(--es-muted); }
#start:disabled { opacity: 0.45; cursor: wait; }

/* The Summerland marker on the globe: a fire dot with two soft halos, and its label */
.es-marker { position: relative; width: 12px; height: 12px; }
.es-marker::before { content: ""; position: absolute; left: 50%; top: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px;
                     border-radius: 50%; background: var(--es-fire); opacity: 0.12; }
.es-marker-core { position: absolute; inset: 0; }
.es-marker-core::before { content: ""; position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px;
                          border-radius: 50%; background: var(--es-fire); opacity: 0.25; }
.es-marker-core::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--es-fire); }
.es-marker-label { position: absolute; left: 24px; top: -9px; white-space: nowrap; pointer-events: none;
                   font: 400 13px var(--es-mono); letter-spacing: 0.04em; color: var(--es-muted); }

/* ----- "How it works" ----- */
#how { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
       background: rgba(10, 11, 13, 0.82); padding: 16px; }
#how[hidden] { display: none; }
.how-card { width: min(640px, 100%); max-height: 88vh; overflow-y: auto; background: #0c0e12; padding: 28px; }
.how-card h2 { font: 600 22px var(--es-font); margin: 0 0 12px; letter-spacing: -0.01em; }
.how-card h3 { margin: 20px 0 6px; }
.how-card ul { margin: 0; padding-left: 20px; }
.how-card .es-btn { margin-top: 18px; }

/* ----- Replay: panel, controls and legend appear once the replay has started ----- */
#panel, #legend, .maplibregl-ctrl-top-right { transition: opacity 0.4s ease; }
body:not(.replay) #panel, body:not(.replay) #legend, body:not(.replay) .maplibregl-ctrl-top-right {
  opacity: 0; visibility: hidden; pointer-events: none; }

#panel { overflow: hidden; }                       /* only the middle block scrolls, so the disclaimer stays in view */
.es-brand--small { gap: 10px; }
.es-brand--small img { width: 22px; height: 22px; }
.es-brand--small span { font-size: 12px; }
.es-time-row { display: flex; align-items: baseline; margin-top: 4px; }
.es-note { font-size: 11px; line-height: 1.45; color: var(--es-muted); margin: 6px 0 0; }

.es-controls { display: flex; align-items: center; gap: 14px; }
/* Play button: the icon is drawn with CSS from the data-state the script sets; the word stays for screen readers */
.es-play { font-size: 0; }
.es-play::before { content: ""; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent var(--es-bg); margin-left: 3px; }
.es-play[data-state="playing"]::before { width: 4px; height: 14px; border: 0; margin: 0; background: var(--es-bg); }
.es-play[data-state="playing"]::after { content: ""; width: 4px; height: 14px; margin-left: 4px; background: var(--es-bg); }
.es-play:hover { background: #fff; border-color: #fff; }
.es-play:focus-visible { outline: 2px solid var(--es-fire); outline-offset: 2px; }

/* Slider: a 2px line, an orange fill (width set by the script) and a native range on top for dragging and keyboard use */
.es-slider-wrap { position: relative; flex: 1; height: 14px; }
.es-slider-wrap::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: var(--es-line); }
.es-slider-fill { position: absolute; left: 0; top: 6px; height: 2px; width: 0; background: var(--es-fire); }
.es-slider-wrap input[type="range"].es-slider-native { position: absolute; inset: 0; height: 14px; margin: 0; background: transparent; }
.es-slider-native::-webkit-slider-runnable-track { background: transparent; height: 14px; }
.es-slider-native::-moz-range-track { background: transparent; height: 14px; }

.es-stat .es-number { display: block; }
.es-stat .es-est-tag { display: block; margin: 4px 0 0; }

.es-scroll { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding-right: 6px;
             scrollbar-width: thin; scrollbar-color: var(--es-line-strong) transparent; }
.es-section.es-static, .es-section-head.es-static { cursor: default; }
.es-section-meta { display: flex; align-items: center; gap: 10px; font-weight: 400; color: var(--es-muted); }
.es-chev { width: 12px; text-align: center; }
.es-section.is-closed .es-section-body { display: none; }
.es-section-head:focus-visible { outline: 2px solid var(--es-fire); outline-offset: 2px; }
.es-row-wrap { padding: 4px 0; }
.es-row-wrap .es-row { padding: 0; }
.es-row-sub { font-size: 11px; line-height: 1.4; color: var(--es-muted); margin-top: 2px; }
.es-row-sub .tight { color: var(--es-text); font-weight: 600; }
.es-section .es-est-tag { margin-left: 4px; }

select.es-select option { background: #12151a; color: var(--es-text); }
#briefing { font-size: 13px; line-height: 1.5; }
#briefing p { margin: 6px 0; }
#briefing h3 { font: 400 11px var(--es-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--es-muted); margin: 12px 0 4px; }
#briefing ul { margin: 0; padding-left: 18px; }

.es-disclaimer { flex: none; }

/* Map legend, bottom-right (above the map credit line) */
#legend { position: fixed; right: 24px; bottom: 44px; z-index: 5; font-size: 12px; }
/* Legend swatches share one width so the labels line up */
.es-legend .es-swatch { width: 22px; height: auto; display: flex; justify-content: center; background: none; border-radius: 0; }
.es-legend .es-swatch::after { content: ""; display: block; }
.es-legend .es-swatch--fire::after { width: 10px; height: 10px; border-radius: 50%; background: var(--es-fire); }
.es-legend .es-swatch--road::after { width: 22px; height: 4px; background: var(--es-road-affected); }
.es-legend .es-swatch--exit::after { width: 22px; height: 4px; background: var(--es-route-exit); }
.es-legend .es-swatch--point::after { width: 10px; height: 10px; border-radius: 50%; background: var(--es-text); border: 2px solid var(--es-bg); outline: 1px solid var(--es-muted); }
.es-legend-note { font-size: 11px; opacity: 0.8; }

/* ----- Map controls, attribution, popups: matched to the design ----- */
.maplibregl-ctrl-group { background: #0c0e12; border: 1px solid var(--es-line); border-radius: var(--es-radius); box-shadow: none; }
.maplibregl-ctrl-group button { background-color: transparent; border-color: var(--es-line); }
.maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(1) brightness(0.9); }
.maplibregl-ctrl-group button:not(:disabled):hover { background-color: rgba(236, 235, 232, 0.08); }
/* !important: MapLibre's own attribution colours would otherwise win */
.maplibregl-ctrl-attrib, .maplibregl-ctrl-attrib-inner { background: rgba(10, 11, 13, 0.8) !important; color: var(--es-muted) !important;
                                                         font: 400 10px var(--es-mono); }
.maplibregl-ctrl-attrib a { color: var(--es-text) !important; }
.maplibregl-ctrl-attrib-button { filter: invert(1); }

.maplibregl-popup-content { background: #0c0e12; color: var(--es-text); border: 1px solid var(--es-line); border-radius: var(--es-radius);
                            box-shadow: none; padding: 10px 12px; font-family: var(--es-font); }
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip, .maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip { border-top-color: #0c0e12; }
.maplibregl-popup-anchor-top .maplibregl-popup-tip, .maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
.maplibregl-popup-anchor-top-right .maplibregl-popup-tip { border-bottom-color: #0c0e12; }
.maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: #0c0e12; }
.maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: #0c0e12; }
.road-popup { font-size: 12px; line-height: 1.4; }
.road-popup .affected { color: var(--es-road-affected); font-weight: 600; }   /* red = affected roads */
.road-popup .small { font-size: 11px; color: var(--es-muted); margin-top: 3px; }

/* Satellite / Streets toggle: the active side is off-white, never orange */
.basemap-toggle { display: flex; }
.basemap-toggle button { width: auto; padding: 0 10px; font: 400 11px var(--es-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--es-text-soft); }
/* !important: MapLibre's own hover style would otherwise override the active colour */
.basemap-toggle button.active { background-color: var(--es-text) !important; color: var(--es-bg); }

/* The satellite imagery shows on the landing globe, so its credit line stays visible there, above the left column */
body.landing .maplibregl-ctrl-bottom-right { z-index: 30; }

/* While the camera flies to Summerland the map ignores the mouse, so a stray drag cannot cut the flight short */
body.flying #map { pointer-events: none; }

/* ----- Narrow screens: the landing stacks, the panel docks to the bottom ----- */
@media (max-width: 800px) {
  #landing { width: 100vw; bottom: auto; padding: 24px; }
  #landing .es-copy { margin: 24px 0; }
  .es-title { font-size: clamp(30px, 9vw, 44px); }
}
@media (max-width: 700px) {
  #legend { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  #landing, #loading, #panel, #legend { transition: none; }
}

.es-block-label { margin-bottom: 6px; }
.es-section > .es-row { padding: 3px 0; }