/* ==========================================================================
   Philippine Flood-Risk Map Application Stylesheet
   ========================================================================== */

/* --- Custom Properties & Palette --- */
:root {
  --bg: #0a0e14;
  --panel: #111720;
  --panel-2: #161e29;
  --border: #1e2733;
  --text: #e6edf3;
  --muted: #8b98a9;
  --accent: #4cc9f0;
  --pin: #f72585;

  /* 5-class risk ramp */
  --r1: #2892c7;
  --r2: #a0c29b;
  --r3: #fafa64;
  --r4: #e88d34;
  --r5: #e81014;

  /* Not assessed */
  --na: #39414d;
  --na-line: #4a5563;

  /* Surface translucency & blur effects */
  --surface-glass: color-mix(in srgb, var(--panel) 88%, transparent);
  --surface-glass-subtle: color-mix(in srgb, var(--panel-2) 75%, transparent);
  /* Frosted glass for boxes that sit over the map (legend, map buttons): more of the map shows through. */
  --surface-frost: color-mix(in srgb, var(--panel) 80%, transparent);
  --shadow-float: 0 8px 32px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-dropdown: 0 12px 36px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.35);

  /* Typography Stacks */
  --font-sans: ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* Motion & Easing */
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --transition-speed: 260ms;
}

/* --- Global Reset & Base Styles --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Text is not selectable, so a press or drag on a label does not select words while panning.
   Form fields and the place panel stay selectable for typing and copying. */
body {
  -webkit-user-select: none;
  user-select: none;
}

input, textarea, #panel {
  -webkit-user-select: text;
  user-select: text;
}

/* Interactive elements base */
button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: transparent;
  border: none;
}

button {
  cursor: pointer;
  touch-action: manipulation;
}

/* Accessibility Focus States */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Custom Thin Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--muted);
}

/* Standard visually hidden utility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* --- Fullscreen Map --- */
#map {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  background-color: var(--bg);
  background: linear-gradient(180deg, #0a0e14 0%, #0b1420 45%, #0d1826 100%);
}

#map::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(0, 0, 0, 0.45) 100%);
}

.maplibregl-canvas {
  filter: drop-shadow(0 2px 18px rgba(0, 0, 0, 0.55));
}

/* --- Loading Overlay & Spinner --- */
#loading {
  position: fixed;
  inset: 0;
  z-index: 50;
  background-color: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  transition: opacity 300ms ease, visibility 300ms ease;
}

#loading.is-hidden,
#loading[hidden] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* --- Floating Map UI (Top-Left Controls) --- */
.map-ui {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 10;
  width: 380px;
  max-width: calc(100vw - 32px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Search Container & Input */
.search-container,
#search-container {
  position: relative;
  width: 100%;
}

#search {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  background: var(--surface-glass);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 13px;
  box-shadow: var(--shadow-float);
  transition: border-color 150ms ease, background-color 150ms ease;
}

#search::placeholder {
  color: var(--muted);
}

#search:focus {
  background: var(--panel);
  border-color: var(--accent);
  outline: none;
}

/* Search Autocomplete Results */
#search-results {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 280px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--surface-glass);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-dropdown);
  display: flex;
  flex-direction: column;
  z-index: 20;
}

#search-results[hidden],
#search-results:empty {
  display: none;
}

.result-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  font-size: 12.5px;
  cursor: pointer;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  transition: background-color 120ms ease;
  user-select: none;
}

.result-row:last-child {
  border-bottom: none;
}

.result-row .lgu-name,
.result-row > span:first-child {
  font-weight: 500;
  color: var(--text);
}

.result-row .province-name,
.result-row > span:last-child {
  font-size: 11px;
  color: var(--muted);
}

.result-row:hover,
.result-row.sel {
  background-color: var(--panel-2);
}

.result-row.sel .lgu-name,
.result-row.sel > span:first-child {
  color: var(--accent);
}

/* --- Segmented Control (Level Switch) --- */
#level-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  background: var(--surface-glass);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 3px;
  box-shadow: var(--shadow-float);
  gap: 2px;
  row-gap: 3px;
}

#level-switch button,
#level-switch .toggle-btn {
  flex: 1;
  padding: 6px 6px;
  font-size: 11.5px;
  letter-spacing: -0.015em;
  font-weight: 500;
  color: var(--muted);
  text-align: center;
  border-radius: 6px;
  position: relative;
  transition: color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
  white-space: nowrap;
}

#level-switch button:hover,
#level-switch .toggle-btn:hover {
  color: var(--text);
  background-color: color-mix(in srgb, var(--panel-2) 60%, transparent);
}

#level-switch button.active,
#level-switch .toggle-btn.active {
  color: var(--text);
  background-color: var(--panel-2);
  box-shadow: inset 0 -2px 0 0 var(--accent), 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* --- Flood switch above the level switch: the open municipality's flood stays drawn on every tab --- */
#flood-row {
  display: grid;
  gap: 6px;
  padding: 8px;
  background: var(--surface-glass);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-float);
}

.flood-label {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

#flood-switch {
  display: flex;
  gap: 2px;
}

#flood-switch button {
  flex: 1;
  padding: 6px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--muted);
  border-radius: 6px;
  white-space: nowrap;
  transition: color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

#flood-switch button:hover:not(:disabled) {
  color: var(--text);
  background-color: color-mix(in srgb, var(--panel-2) 60%, transparent);
}

#flood-switch button[aria-pressed="true"] {
  color: var(--text);
  background-color: var(--panel-2);
  box-shadow: inset 0 -2px 0 0 var(--accent), 0 1px 3px rgba(0, 0, 0, 0.4);
}

#flood-switch button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* The title, colour key and note fold into a dropdown that starts closed, leaving the map more room. */
#flood-about summary {
  cursor: pointer;
  user-select: none;
}

#flood-about summary:hover {
  color: var(--text);
}

#flood-key {
  display: flex;
  margin-top: 6px;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 11.5px;
  color: var(--muted);
}

#flood-key[hidden] {
  display: none;
}

#flood-key i {
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 5px;
  border-radius: 2px;
  vertical-align: -1px;
}

#flood-note {
  margin: 6px 0 0;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--muted);
}

#flood-note:empty {
  display: none;
}

/* --- Home Button (also the Life page's, so the two match) --- */
#home-btn,
#life-back {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--surface-glass);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-float);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

#home-btn:hover,
#life-back:hover {
  border-color: var(--accent);
}

#home-btn:focus-visible,
#life-back:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* --- Floating Legend (Bottom-Left) --- */
#legend {
  position: fixed;
  bottom: 16px;
  left: 16px;
  z-index: 10;
  width: 240px;
  background: var(--surface-frost);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  box-shadow: var(--shadow-float);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#legend[hidden] {
  display: none;
}

.legend-title,
#legend h4 {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 2px;
}

.legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 1;
}

.swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, 0.3);
}

.legend-label {
  flex: 1;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.legend-count {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  text-align: right;
  margin-left: auto;
}

/* --- Tooltip --- */
#tooltip {
  position: fixed;
  z-index: 100;
  pointer-events: none;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--text);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
  transform: translate(12px, 12px);
  transition: opacity 80ms ease;
}

#tooltip[hidden] {
  display: none;
}

/* --- Risk Badges --- */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.badge.c1 {
  background-color: var(--r1);
  color: #ffffff;
}

.badge.c2 {
  background-color: var(--r2);
  color: #12200f;
}

.badge.c3 {
  background-color: var(--r3);
  color: #23230a;
}

.badge.c4 {
  background-color: var(--r4);
  color: #241200;
}

.badge.c5 {
  background-color: var(--r5);
  color: #ffffff;
}

.badge.na {
  background-color: var(--na);
  color: var(--muted);
  border: 1px solid var(--na-line);
}

/* --- Sliding Right-Hand Detail Panel --- */
#panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--panel-w, 420px);
  height: 100%;
  z-index: 30;
  /* Solid, not glass: the map showing through washed out the radar grid. */
  background: var(--panel);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-left: 1px solid var(--accent);
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.5);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  transform: translateX(100%);
  pointer-events: none;
  transition: transform var(--transition-speed) var(--ease-out-quint);
}

#panel.open {
  transform: translateX(0);
  pointer-events: auto;
}

/* Panel Resizer */
#panel-resize {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 12px;
  transform: translateX(-50%);
  cursor: col-resize;
  z-index: 5;
  touch-action: none;
  background: transparent;
}

#panel-resize::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background-color: transparent;
  transition: background-color 150ms ease;
}

#panel-resize::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* An always-visible grip (two columns of dots on a pill), so the divider reads as something to drag. */
  width: 8px;
  height: 40px;
  background: radial-gradient(circle, var(--muted) 1px, transparent 1.5px) center / 4px 6px, var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  transition: border-color 150ms ease;
}

#panel-resize:hover::before,
#panel-resize:focus-visible::before,
#panel-resize.dragging::before {
  background-color: var(--accent);
}

#panel-resize:hover::after,
#panel-resize:focus-visible::after,
#panel-resize.dragging::after {
  background: radial-gradient(circle, var(--accent) 1px, transparent 1.5px) center / 4px 6px, var(--panel-2);
  border-color: var(--accent);
}

#panel-resize:focus-visible {
  outline: none;
}

/* Phone sheet handle: only shown in the bottom-sheet layout below. */
#sheet-toggle {
  display: none;
}

/* Global Resizing State */
body.resizing,
body.resizing * {
  cursor: col-resize !important;
  user-select: none !important;
}

body.resizing #map,
body.resizing .maplibregl-canvas,
body.resizing canvas {
  pointer-events: none;
}



/* --- Responsive Bottom Sheet Layout (< 900px) --- */
@media (max-width: 899px) {
  .map-ui {
    top: 12px;
    left: 12px;
    width: calc(100vw - 24px);
    max-width: 380px;
  }

  #legend {
    bottom: 12px;
    left: 12px;
    width: calc(100vw - 24px);
    max-width: 280px;
  }

  #panel {
    top: auto;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 40%;
    border-left: none;
    border-top: 1px solid var(--border);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.6);
    padding: 16px;
    padding-top: 36px;
    transform: translateY(100%);
    transition: transform var(--transition-speed) var(--ease-out-quint), height 220ms ease-out;
  }

  #panel.open {
    transform: translateY(0);
  }

  #panel.full {
    height: 88%;
  }

  @media (prefers-reduced-motion: reduce) {
    #panel {
      transition: transform var(--transition-speed) var(--ease-out-quint);
    }
  }

  #sheet-toggle {
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 36px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
  }

  #sheet-toggle::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    background-color: var(--border);
    border-radius: 2px;
  }

  #sheet-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  #panel-resize {
    display: none;
  }

  /* Touch targets: the icon buttons were 14-24px, well under the 44px
     guidance, and the level pills were 27px tall. */
  #level-switch button,
  #flood-switch button {
    min-height: 44px;
  }

  #flood-row {
    padding: 4px;
  }

  #search {
    min-height: 44px;
  }

  .result-row {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  /* Leaves room for the phone keyboard, which covers about half the screen. */
  #search-results {
    max-height: min(280px, 35vh);
  }
}


.result-row .code {
  margin-left: auto;
  padding-left: 10px;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 10px;
  letter-spacing: 0.02em;
  opacity: 0.75;
}

/* --- Street View Card (Top-Right of the Map) --- */
#sv-card {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 12;
  /* --sv-w and --sv-h come from the resize grip (app.js). */
  width: min(var(--sv-w, 400px), 70vw);
  height: min(var(--sv-h, 300px), 70vh);
  display: flex;
  flex-direction: column;
  background: var(--surface-glass);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-float);
  overflow: hidden;
}

#sv-card[hidden] {
  display: none;
}

body:has(#panel.open) #sv-card {
  right: calc(var(--panel-w, 420px) + 16px);
}

#sv-card.full,
body:has(#panel.open) #sv-card.full {
  inset: 0;
  width: auto;
  height: auto;
  z-index: 60;
  border-radius: 0;
}

.sv-head {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 6px 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

.sv-head span {
  flex: 1;
}

.sv-head button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

/* Google's terms forbid Street View beside a non-Google map, so it opens in a new tab. */
.sv-head a {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 8px;
  border-radius: 6px;
  color: inherit;
  text-decoration: none;
}

.sv-head button:hover,
.sv-head a:hover {
  background: rgba(255, 255, 255, 0.1);
}

.sv-head button:focus-visible,
.sv-head a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

#sv-view {
  position: relative;
  flex: 1;
  min-height: 0;
  isolation: isolate;
}

#sv-note {
  position: absolute;
  inset: 40px 0 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 16px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted, var(--text));
  background: var(--surface-glass);
}

#sv-note.banner {
  inset: 40px 0 auto;
  z-index: 1;
  padding: 6px 12px;
  font-size: 12px;
  pointer-events: none;
}

#sv-note[hidden] {
  display: none;
}

/* The street view card's resize grip, bottom left (app.js); not in full screen or on a phone. */
.sv-grip {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 4;
  width: 18px;
  height: 18px;
  cursor: nesw-resize;
  touch-action: none;
  background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.55) 30% 38%, transparent 38% 52%,
    rgba(255, 255, 255, 0.55) 52% 60%, transparent 60%);
  border-top-right-radius: 4px;
}

#sv-card.full .sv-grip {
  display: none;
}

/* A water name on the map (waternames.js): an HTML marker, so it turns along the water and hides when far out. */
.water-name {
  color: #bfe6ff;
  font-style: italic;
  font-size: 12px;
  white-space: nowrap;
  text-shadow: 0 0 2px rgba(6, 18, 32, 0.9), 1px 1px 0 rgba(6, 18, 32, 0.9), -1px -1px 0 rgba(6, 18, 32, 0.9),
    1px -1px 0 rgba(6, 18, 32, 0.9), -1px 1px 0 rgba(6, 18, 32, 0.9);
  pointer-events: none;
  user-select: none;
}

.water-name-sea,
.water-name-lake {
  font-size: 13px;
  letter-spacing: 0.02em;
}

.water-name.far {
  visibility: hidden;
}

/* On a border river the name sits on the picked municipality's side of the line. */
.water-name span {
  display: block;
}

.water-name.up span {
  transform: translateY(-0.8em);
}

.water-name.down span {
  transform: translateY(0.8em);
}

/* The nearby water names lying on a replay's 3D water near the middle of the map (waternames.js). */
.water-tag {
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(10, 14, 22, 0.62);
  color: #e6f4ff;
  font-size: 12px;
  font-style: italic;
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.water-tag span {
  display: block;
}

/* Go under, beside Play; under the water it takes Play's place and the arrows hide. */
#sv-dive {
  position: absolute;
  left: 58px;
  bottom: calc(34px + var(--sv-strip, 0px));
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px;
  border-radius: 18px;
  background: rgba(10, 14, 22, 0.62);
  color: #ffffff;
  font-size: 12px;
}

#sv-dive[hidden],
#sv-eye-row[hidden],
#sv-card.diving .svnav {
  display: none;
}

#sv-card.diving #sv-dive {
  left: 10px;
}

#sv-dive button {
  height: 28px;
  padding: 0 12px;
  border: 0;
  border-radius: 14px;
  background: var(--accent);
  color: #0b1220;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

#sv-dive button:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

#sv-eye-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-right: 8px;
  white-space: nowrap;
}

#sv-eye {
  width: 90px;
  accent-color: var(--accent);
}

/* The Year strip under the photo (app.js): the chosen year, a wide slider and the years under it, a click on one
   picks it. It sits in the card's column below #sv-view, so the photo is that much shorter; it hides with one year
   and under the water. */
#sv-time {
  flex: none;
  box-sizing: border-box;
  height: 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3px 24px 4px;
  border-top: 1px solid var(--border);
  color: var(--text);
  font-size: 12px;
}

#sv-time[hidden],
#sv-card.diving #sv-time {
  display: none;
}

/* The strip's height while it shows, so Go under and the full-screen replay bar sit above it. */
#sv-card:not(.diving):has(#sv-time:not([hidden])) {
  --sv-strip: 64px;
}

.sv-year-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  line-height: 14px;
  white-space: nowrap;
}

.sv-year-head label {
  opacity: 0.75;
}

/* The photo's date pill, at the top left of the photo (app.js): the date and time, and during a storm replay how far from the storm. */
#sv-date {
  position: absolute;
  left: 10px;
  top: 48px;
  z-index: 2;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 4px 10px;
  border-radius: 10px;
  background: rgba(10, 14, 22, 0.62);
  color: #ffffff;
  font-size: 12px;
  pointer-events: none;
}

#sv-date[hidden],
#sv-date-storm[hidden] {
  display: none;
}

#sv-date-storm {
  color: #fde68a;
}

/* Below a banner note when one shows. */
#sv-card:has(#sv-note.banner:not([hidden])) #sv-date {
  top: 92px;
}

#sv-year-out {
  font-weight: 600;
}

/* The years under the Year slider: each mark sits under its stop (10px is half the thumb, as for the replay's
   bands), the first and last are pinned to the ends, and a mark too close to another keeps only its tick. */
#sv-year-marks {
  position: relative;
  height: 18px;
  font-size: 11px;
  line-height: 14px;
}

#sv-year-marks button {
  position: absolute;
  top: 0;
  left: calc(10px + (100% - 20px) * var(--at, 0));
  transform: translateX(-50%);
  padding: 4px 2px 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
}

#sv-year-marks button:first-child {
  left: 0;
  transform: none;
}

#sv-year-marks button:last-child {
  left: auto;
  right: 0;
  transform: none;
}

#sv-year-marks button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 3px;
  background: rgba(255, 255, 255, 0.45);
}

#sv-year-marks button:first-child::before {
  left: 10px;
}

#sv-year-marks button:last-child::before {
  left: auto;
  right: 10px;
}

#sv-year-marks button[aria-pressed="true"] {
  color: var(--accent);
  font-weight: 600;
}

/* A year found only farther than 30 m, up to 100 m away. */
#sv-year-marks button.far {
  opacity: 0.6;
}

#sv-year-marks button.quiet {
  color: transparent;
  pointer-events: none;
}

/* The replay bar in full-screen street view (clouds.js): it shows only while the card is full and a replay runs. */
.sv-replay {
  position: absolute;
  left: 50%;
  bottom: calc(34px + var(--sv-strip, 0px));
  transform: translateX(-50%);
  z-index: 4;
  width: max(300px, min(620px, calc(100% - 600px)));
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-glass);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: var(--shadow-float);
  color: var(--text);
  font-size: 12px;
}

.sv-replay[hidden],
#sv-card:not(.full) .sv-replay {
  display: none;
}

@media (max-width: 900px) {
  .sv-replay {
    bottom: calc(84px + var(--sv-strip, 0px));
    width: calc(100% - 24px);
  }
}

.svr-now {
  margin: 0;
  display: flex;
  gap: 8px;
  align-items: baseline;
}

.svr-name {
  font-size: 14px;
  font-weight: 600;
}

.svr-time {
  margin-left: auto;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* The replay bar at the bottom of the map (clouds.js): centred between the left column and the panel, above the
   map credits. 296px clears the map buttons and the 210px cloud key beside them. */
#replay-bar {
  position: fixed;
  left: 296px;
  right: 16px;
  bottom: 40px;
  z-index: 11;
  width: auto;
  max-width: 760px;
  margin: 0 auto;
  transform: none;
  padding: 10px 14px;
  font-size: 13px;
}

body:has(#panel.open) #replay-bar {
  right: calc(var(--panel-w, 420px) + 16px);
}

/* On a phone the bar spans the screen, above the bottom sheet and its credits while the panel is open, and
   steps aside while the sheet fills the screen. */
@media (max-width: 899px) {
  #replay-bar,
  body:has(#panel.open) #replay-bar {
    left: 12px;
    right: 12px;
    bottom: 36px;
    max-width: none;
  }

  body:has(#panel.open) #replay-bar {
    bottom: calc(40% + 36px);
  }

  body:has(#panel.open.full) #replay-bar {
    display: none;
  }
}

.sv-marker {
  width: 16px;
  height: 16px;
  border: 3px solid #ffffff;
  border-radius: 50%;
  background: #05cb63;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.45);
}

@media (max-width: 899px) {
  #sv-card,
  body:has(#panel.open) #sv-card {
    top: 120px;
    right: 12px;
    left: 12px;
    width: auto;
    height: 260px;
  }

  .sv-grip {
    display: none;
  }
}

/* Map buttons (back to default view, zoom, compass) under the Bird guide checkbox, in frosted glass. */
#map-ctrls {
  position: relative;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#map-ctrls .maplibregl-ctrl-group {
  background: var(--surface-frost);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-float);
  overflow: hidden;
}

#map-ctrls .maplibregl-ctrl-group button {
  color: var(--text);
}

#map-ctrls .maplibregl-ctrl-group button + button {
  border-top-color: var(--border);
}

#map-ctrls .maplibregl-ctrl-group button[aria-pressed="true"] {
  color: var(--accent);
}

#map-ctrls .tilt-btn span {
  font: 600 12px/1 system-ui, sans-serif;
  letter-spacing: 0.02em;
}

/* The keys sit beside the map buttons, level with the top one, side by side, and wrap under each other when the screen is too narrow for both. */
#map-keys {
  position: absolute;
  top: 0;
  left: calc(100% + 8px);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
  width: max-content;
  max-width: calc(100vw - 80px);
}

/* Cloud tops key in the keys container beside the map buttons, so it fits a 720 px tall screen: the
   colour bar with heights on the left and temperatures on the right, then the picture's time and
   source. The risk legend steps aside while it is open, since both would share the bottom-left.
   clouds.js sets its max-height so a storm's water key and places scroll inside it. */
#cloud-key {
  flex: none;
  width: 210px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px 10px;
  background: var(--surface-frost);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-float);
  color: var(--text);
  font-size: 12px;
}

#cloud-key[hidden] {
  display: none;
}

body:has(#cloud-key:not([hidden])) #legend {
  display: none;
}

#cloud-key h4 {
  margin: 0 0 6px;
  font-size: 12px;
}

#cloud-key .ck-scale {
  display: grid;
  grid-template-columns: 1fr 12px 1fr;
  gap: 8px;
  height: 170px;
  margin: 10px 0 8px;
}

#cloud-key .ck-scale div {
  position: relative;
}

#cloud-key .ck-scale span {
  position: absolute;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

#cloud-key .ck-scale div:first-child span {
  right: 0;
}

#cloud-key .ck-scale i {
  border-radius: 3px;
}

/* The two looks of the clouds; [hidden] needs its own rule, since .ck-scale's grid would show it. */
#cloud-key [hidden] {
  display: none;
}

#cloud-key .ck-opts {
  display: grid;
  gap: 4px;
  margin: 0 0 8px;
}

#cloud-key .ck-opts label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

#cloud-key .ck-opts input {
  margin: 0;
  accent-color: var(--accent);
}

/* The time-lapse button, and the time of the picture playing beside it. */
#cloud-key .ck-play {
  display: flex;
  align-items: center;
  gap: 8px;
}

#cloud-key .ck-play button,
.sv-replay .ck-scrub button {
  padding: 5px 10px;
  border: 0;
  border-radius: 6px;
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}

#cloud-key .ck-play button[aria-pressed="true"] {
  box-shadow: inset 0 -2px 0 0 var(--accent);
}

#cloud-key .ck-play button:focus-visible,
.sv-replay .ck-scrub button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

#cloud-key .ck-play span {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* The slider block in the replay bars (.sv-replay, made by clouds.js): Pause, the speed buttons and the water
   note on a row, then the slider on a row of its own with its bands of flood water under it, then its marks. */
.sv-replay .ck-scrub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

.sv-replay .ck-track {
  position: relative;
  flex: 1 1 100%;
}

/* A bigger slider than the browser's own: an 8px track and a 20px thumb (the replay's and the Year slider). */
.sv-replay .ck-track input,
#sv-year {
  display: block;
  width: 100%;
  height: 28px;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.sv-replay .ck-track input::-webkit-slider-runnable-track,
#sv-year::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.22);
}

.sv-replay .ck-track input::-moz-range-track,
#sv-year::-moz-range-track {
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.22);
}

.sv-replay .ck-track input::-webkit-slider-thumb,
#sv-year::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  margin-top: -6px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.sv-replay .ck-track input::-moz-range-thumb,
#sv-year::-moz-range-thumb {
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.sv-replay .ck-track input:focus-visible,
#sv-year:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* The Year slider is a little shorter than the replay's, to fit its 64px strip. */
#sv-year {
  height: 24px;
}

/* A strip under the track; 10px is half the thumb, so a band lines up with the thumb's centre. */
.sv-replay .ck-bands {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 0;
  height: 4px;
  border-radius: 2px;
  pointer-events: none;
}

.ck-speed {
  display: flex;
  gap: 3px;
}

.sv-replay .ck-scrub .ck-speed button {
  flex: none;
  padding: 3px 8px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.sv-replay .ck-scrub .ck-speed button[aria-pressed="true"] {
  box-shadow: inset 0 -2px 0 0 var(--accent);
  color: var(--text);
}

.sv-replay .ck-scrub .ck-speed button[aria-pressed="false"] {
  color: var(--muted);
}

/* The note for the blue bands, at the right of the speed buttons; shown only while the slider has bands. */
.sv-replay .ck-water {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  color: var(--muted);
  font-size: 11px;
}

.sv-replay .ck-water[hidden] {
  display: none;
}

.sv-replay .ck-water i {
  width: 14px;
  height: 4px;
  border-radius: 2px;
  background: #4292c6;
}

/* The marks under the slider (clouds.js marks()): the first and last times and each midnight's date, then a
   storm's start and end in amber on a line of their own. The row is inset by half the thumb, like the bands. */
.sv-replay .ck-ticks {
  position: relative;
  flex: 1 1 100%;
  height: 20px;
  margin: 0 10px;
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.sv-replay .ck-ticks:has(.ck-storm) {
  height: 34px;
}

.ck-mark {
  position: absolute;
  top: 0;
  font-style: normal;
  white-space: nowrap;
}

.ck-mark::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 5px;
  background: currentColor;
}

.ck-mark span {
  position: absolute;
  top: 5px;
  left: 0;
  transform: translateX(-50%);
}

.ck-mark.ck-l span {
  transform: none;
}

.ck-mark.ck-r span {
  transform: translateX(-100%);
}

.ck-mark.ck-storm {
  color: #f59e0b;
}

.ck-mark.ck-storm::before {
  width: 2px;
  height: 19px;
}

.ck-mark.ck-storm span {
  top: 19px;
  font-weight: 600;
}

/* The day and storm pickers: replay a past day's or a past storm's pictures. */
#cloud-key .ck-day {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 8px;
  margin-top: 6px;
  color: var(--muted);
}

#cloud-key .ck-day :is(input, select) {
  max-width: 100%;
  padding: 3px 6px;
  border: 0;
  border-radius: 6px;
  background: var(--panel-2);
  color: var(--text);
  color-scheme: dark;
  font: inherit;
}

#cloud-key .ck-day :is(input, select):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

#cloud-key p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

/* The evacuation centre key, beside the cloud key: its colour legend, a walk or drive switch, and a status line. */
#evac-key {
  flex: none;
  width: 210px;
  padding: 8px 10px;
  background: var(--surface-frost);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-float);
  color: var(--text);
  font-size: 12px;
}

#evac-key[hidden] {
  display: none;
}

#evac-key h4 {
  margin: 0 0 6px;
  font-size: 12px;
}

#evac-key .ek-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

#evac-key .ek-legend li {
  display: flex;
  align-items: center;
  gap: 6px;
}

#evac-key .ek-legend i {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}

#evac-key .ek-legend .ek-d {
  background: #ff6a00;
}

#evac-key .ek-legend .ek-s {
  background: #ffc400;
}

#evac-key .ek-mode {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

#evac-key .ek-mode button {
  padding: 5px 10px;
  border: 0;
  border-radius: 6px;
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}

#evac-key .ek-mode button[aria-pressed="true"] {
  box-shadow: inset 0 -2px 0 0 var(--accent);
}

#evac-key .ek-mode button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

#evac-key p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

#evac-key .ek-status {
  color: var(--text);
  min-height: 1.35em;
}

#evac-key a {
  color: var(--accent);
}

@media (hover: hover) {
  #map-ctrls .maplibregl-ctrl button:not(:disabled):hover {
    background-color: rgba(255, 255, 255, 0.08);
  }
}

/* MapLibre draws its icons dark grey for a white box; invert them for the dark glass and turn the hue back so the compass needle stays red. */
#map-ctrls .maplibregl-ctrl-icon {
  filter: invert(1) hue-rotate(180deg);
}

/* Keep the imagery credit clear of the open panel. */
body:has(#panel.open) .maplibregl-ctrl-bottom-right {
  right: var(--panel-w, 420px);
}

@media (max-width: 899px) {
  body:has(#panel.open) .maplibregl-ctrl-bottom-right {
    right: 0;
    bottom: 40%;
  }

  body:has(#panel.open.full) .maplibregl-ctrl-bottom-right {
    bottom: 88%;
  }
}

/* Building hazard card (map popup) */
.maplibregl-popup.bld-card .maplibregl-popup-content {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-float);
  padding: 10px 28px 10px 12px;
  font: 13px/1.45 var(--font-sans);
}
.maplibregl-popup-anchor-top.bld-card .maplibregl-popup-tip,
.maplibregl-popup-anchor-top-left.bld-card .maplibregl-popup-tip,
.maplibregl-popup-anchor-top-right.bld-card .maplibregl-popup-tip {
  border-bottom-color: var(--panel);
}
.maplibregl-popup-anchor-bottom.bld-card .maplibregl-popup-tip,
.maplibregl-popup-anchor-bottom-left.bld-card .maplibregl-popup-tip,
.maplibregl-popup-anchor-bottom-right.bld-card .maplibregl-popup-tip {
  border-top-color: var(--panel);
}
.maplibregl-popup-anchor-left.bld-card .maplibregl-popup-tip {
  border-right-color: var(--panel);
}
.maplibregl-popup-anchor-right.bld-card .maplibregl-popup-tip {
  border-left-color: var(--panel);
}
.bld-card .maplibregl-popup-close-button {
  color: var(--muted);
  font-size: 18px;
  padding: 2px 8px;
  background: none;
  border: 0;
}
.bld-card .maplibregl-popup-close-button:hover {
  color: var(--text);
  background: none;
}
.bld-card .bld-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0;
}
.bld-card .bld-sw {
  display: inline-block;
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}
.bld-card .bld-h {
  margin-top: 6px;
}
.bld-card .bld-src {
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--muted);
}