/* FireWatch Europe — basisstijl, mobiel-eerst, geen frameworks */

:root {
  --color-bg: #14171c;
  --color-surface: #1e2229;
  --color-surface-raised: #262b33;
  --color-border: #333a44;
  --color-text: #f2f4f7;
  --color-text-muted: #9aa3b1;
  --color-accent: #ff6b35;
  --color-accent-contrast: #14171c;

  --color-frp-low: #f7d33c;      /* frp < 5 */
  --color-frp-medium: #f28c28;   /* 5-20 */
  --color-frp-high: #e6432b;     /* 20-50 */
  --color-frp-extreme: #9c1c1c;  /* > 50 */
  --color-industrial: #8a93a6;   /* waarschijnlijk industriële bron, bewust neutraal i.p.v. FRP-schaal */

  /* EFFIS Fire Weather Index-klassen, groen (veilig) naar donkerrood (extreem) */
  --color-fwi-verylow: #2e7d32;
  --color-fwi-low: #8bc34a;
  --color-fwi-moderate: #f2c744;
  --color-fwi-high: #f28c28;
  --color-fwi-veryhigh: #e6432b;
  --color-fwi-extreme: #7b1c1c;

  /* PM2.5-luchtkwaliteitsklassen (Open-Meteo/CAMS), groen naar donkerrood */
  --color-pm-good: #2e7d32;
  --color-pm-fair: #c9c744;
  --color-pm-moderate: #f28c28;
  --color-pm-poor: #e6432b;
  --color-pm-verypoor: #7b1c1c;

  --color-danger-bg: #3a1f1f;
  --color-danger-text: #ffb4a2;

  --tab-bar-height: 60px;
  --header-height: 56px;
  --radius: 10px;
  --radius-sm: 6px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Spacing- en typografieschaal — voor consistentie, niet overal met terugwerkende kracht toegepast */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.45);

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 220ms;

  /* Semantische z-index-schaal. Leaflet's eigen controls (.leaflet-top/
     .leaflet-bottom) staan op z-index 1000 in de standaard-CSS — alles dat
     over de kaart moet verschijnen staat daarom ruim daarboven, niet alleen
     boven de tile/marker/popup-panes (~200-700). */
  --z-header: 10;
  --z-map-overlay: 750;
  --z-app-banner: 1050;
  --z-cookie-banner: 1100;
  --z-modal: 1200;
}

/* Merkkleur voor native form-controls (radiobuttons, sliders) i.p.v. de blauwe browserstandaard */
input {
  accent-color: var(--color-accent);
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}


* {
  box-sizing: border-box;
}

::selection {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
}

* {
  scrollbar-color: var(--color-border) var(--color-bg);
  scrollbar-width: thin;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  background: var(--color-bg);
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  overscroll-behavior: none;
}

button {
  font-family: inherit;
  color: inherit;
}

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

/* --- Header --- */

.app-header {
  height: var(--header-height);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  z-index: var(--z-header);
}

.app-header__title {
  font-size: 1.1rem;
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.app-header__title a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: inherit;
  text-decoration: none;
}

.app-header__logo {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: 6px;
}

.app-header__status {
  display: flex;
  align-items: center;
  gap: 8px;
}

.app-header__updated {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.icon-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  transition: background var(--duration-fast) var(--ease-out-expo);
}

.icon-btn svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.icon-btn:hover {
  background: var(--color-surface-raised);
}

.icon-btn:active {
  background: var(--color-border);
}

.icon-btn.is-loading svg {
  animation: spin 0.8s linear infinite;
}

/* --- Verkennerbalk: plaats zoeken en huidige analyse delen --- */

.explorer-toolbar {
  position: relative;
  z-index: calc(var(--z-header) - 1);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.place-search {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 520px;
}

.place-search__field {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-inline: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  transition: border-color var(--duration-fast) var(--ease-out-expo), background var(--duration-fast) var(--ease-out-expo);
}

.place-search__field:focus-within {
  border-color: var(--color-accent);
  background: var(--color-surface-raised);
}

.place-search__field svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  fill: var(--color-text-muted);
}

.place-search.is-loading .place-search__field svg {
  animation: search-pulse 0.85s ease-in-out infinite alternate;
}

@keyframes search-pulse {
  to {
    fill: var(--color-accent);
    transform: scale(0.88);
  }
}

.place-search__field input {
  min-width: 0;
  width: 100%;
  min-height: 42px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--color-text);
  caret-color: var(--color-accent);
  font: inherit;
  font-size: 1rem;
}

.place-search__field input::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

.place-search__field input::-webkit-search-cancel-button {
  filter: invert(1);
  opacity: 0.72;
}

.place-search__results {
  position: absolute;
  inset-block-start: calc(100% + var(--space-2));
  inset-inline: 0;
  z-index: var(--z-app-banner);
  max-height: min(360px, 55vh);
  overflow-y: auto;
  margin: 0;
  padding: var(--space-1);
  list-style: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-lg);
}

.place-search__results[hidden] {
  display: none;
}

.place-search__option {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  text-align: start;
  cursor: pointer;
}

.place-search__option:hover,
.place-search__option.is-active {
  background: var(--color-border);
}

.place-search__name {
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 650;
}

.place-search__meta {
  flex: 0 0 auto;
  color: var(--color-text-muted);
  font-size: 0.75rem;
}

.place-search__empty {
  margin: 0;
  padding: var(--space-3);
  color: var(--color-text-muted);
  font-size: 0.85rem;
  line-height: 1.45;
}

.explorer-toolbar__action {
  flex: 0 0 auto;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding-inline: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  font-size: 0.84rem;
  font-weight: 650;
  transition: background var(--duration-fast) var(--ease-out-expo), border-color var(--duration-fast) var(--ease-out-expo);
}

.explorer-toolbar__action:hover {
  background: var(--color-surface-raised);
  border-color: var(--color-text-muted);
}

.explorer-toolbar__action:active {
  background: var(--color-border);
}

.explorer-toolbar__action:disabled {
  cursor: wait;
  opacity: 0.58;
}

.explorer-toolbar__action svg {
  width: 19px;
  height: 19px;
  fill: currentColor;
}

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

/* --- Main / views --- */

.app-main {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
}

.view {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.map {
  flex: 1 1 auto;
  min-height: 0;
}

/* Positionering (absoluut + z-index) zit op de wrapper, zie .map-controls
   hieronder — dat voorkomt handmatig bottom-offset-gereken zodra er meerdere
   knoppen/legenda's in dezelfde hoek stapelen. */
.map-controls {
  position: absolute;
  z-index: var(--z-map-overlay);
  display: flex;
}

.map-controls--fab {
  right: 16px;
  bottom: 16px;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 10px;
}

.map-controls--legend {
  left: 10px;
  bottom: 10px;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  max-width: calc(100% - 90px); /* laat ruimte voor de FAB-kolom rechts */
}

.fab {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: var(--color-surface-raised);
  color: var(--color-text);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--duration-fast) var(--ease-out-expo), transform var(--duration-fast) var(--ease-out-expo);
}

.fab:hover {
  background: var(--color-border);
}

.fab:active {
  transform: scale(0.94);
}

.fab svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.fab.is-active {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
}

.fab--text {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* --- Banner (offline/foutmelding) --- */

.banner {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  z-index: var(--z-app-banner);
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
  padding: 10px 12px;
  border-radius: var(--radius);
  font-size: 0.85rem;
}

/* --- Filterbalk --- */

.results-toolbar {
  flex: 0 0 auto;
  min-height: 72px;
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.results-toolbar__summary {
  min-width: 0;
}

.results-toolbar__summary h2 {
  margin: 0;
  font-size: 1rem;
  letter-spacing: -0.01em;
}

.results-toolbar__summary p {
  margin: 2px 0 0;
  color: var(--color-text-muted);
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
}

.sort-control {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: 0.76rem;
}

.sort-control select {
  min-height: 44px;
  max-width: 142px;
  padding: 0 34px 0 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface-raised);
  color: var(--color-text);
  font: inherit;
}

.filter-bar {
  flex: 0 0 auto;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.filter-toggle {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: none;
  border: none;
  font-size: 0.9rem;
  transition: background var(--duration-fast) var(--ease-out-expo);
}

.filter-toggle:hover {
  background: var(--color-surface-raised);
}

.filter-toggle svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  transition: transform var(--duration-fast) var(--ease-out-expo);
}

.filter-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

@keyframes filter-panel-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.filter-panel:not([hidden]) {
  animation: filter-panel-in var(--duration-base) var(--ease-out-expo);
}

.filter-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  font-size: 0.7rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.filter-panel {
  padding: 4px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.filter-reset {
  align-self: flex-start;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: none;
  color: var(--color-text);
  font-size: 0.85rem;
  transition: background var(--duration-fast) var(--ease-out-expo), border-color var(--duration-fast) var(--ease-out-expo);
}

.filter-reset:hover {
  background: var(--color-surface-raised);
  border-color: var(--color-text-muted);
}

.filter-reset:active {
  background: var(--color-border);
}

.filter-field {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.85rem;
}

.filter-field legend {
  padding: 0;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-bottom: 2px;
}

fieldset.filter-field label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
}

.filter-field input[type="range"] {
  width: 100%;
}

.filter-field__row {
  margin: 0;
}

.filter-hint {
  margin: 0;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.filter-guidance {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-1);
  border-top: 1px solid var(--color-border);
}

.filter-guidance .filter-hint {
  line-height: 1.5;
}

.filter-guidance strong {
  color: var(--color-text);
}

/* --- Lijst --- */

.fire-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 0;
  -webkit-overflow-scrolling: touch;
}

.fire-list__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  min-height: 44px;
  border-bottom: 1px solid var(--color-border);
  background: none;
  border-left: none;
  border-right: none;
  border-top: none;
  width: 100%;
  text-align: left;
  transition: background var(--duration-fast) var(--ease-out-expo);
}

.fire-list__item:hover {
  background: var(--color-surface);
}

.fire-list__item:active {
  background: var(--color-surface-raised);
}

.fire-list__item.is-selected {
  background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface));
  box-shadow: inset 1px 0 var(--color-accent);
}

.fire-list__dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.fire-list__dot--extreme {
  box-shadow: 0 0 8px 1px var(--color-frp-extreme);
}

/* Kleurklassen voor FRP-buckets, hergebruikt door lijst- en popup-stip */
.frp-low {
  background: var(--color-frp-low);
}

.frp-medium {
  background: var(--color-frp-medium);
}

.frp-high {
  background: var(--color-frp-high);
}

.frp-extreme {
  background: var(--color-frp-extreme);
}

.frp-industrial {
  background: var(--color-industrial);
}

/* --- FRP-legenda: legt de kleurcodering uit, permanent zichtbaar --- */

.frp-legend {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--space-3);
  font-size: 0.7rem;
  color: var(--color-text-muted);
}

.frp-legend li {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.frp-legend__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.frp-legend--map {
  background: var(--color-surface-raised);
  border-radius: var(--radius);
  padding: 6px 10px;
  box-shadow: var(--shadow-sm);
  flex-wrap: wrap;
  row-gap: 2px;
}

/* --- FWI-legenda (Fire Weather Index, EFFIS) — alleen zichtbaar als laag actief is --- */

.fwi-legend {
  width: 280px;
  max-width: 100%;
  background: var(--color-surface-raised);
  border-radius: var(--radius);
  padding: 8px 10px;
  box-shadow: var(--shadow-sm);
  font-size: 0.75rem;
}

.fwi-legend[hidden] {
  display: none;
}

.fwi-legend__header {
  display: flex;
  align-items: center;
  gap: 6px;
}

.fwi-legend__title {
  flex: 1 1 auto;
  font-weight: 600;
}

.fwi-legend__icon-btn {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: none;
  color: var(--color-text-muted);
  font-size: 0.7rem;
  font-style: italic;
  transition: background var(--duration-fast) var(--ease-out-expo);
}

.fwi-legend__icon-btn:hover {
  background: var(--color-surface);
}

.fwi-legend__icon-btn svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
  transition: transform var(--duration-fast) var(--ease-out-expo);
}

.fwi-legend__icon-btn[aria-expanded="false"] svg {
  transform: rotate(-90deg);
}

.fwi-legend__body {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fwi-legend__body[hidden] {
  display: none;
}

.fwi-legend__days {
  display: flex;
  gap: 4px;
}

.fwi-day-btn {
  flex: 1 1 0;
  min-height: 44px;
  padding: 0 4px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: none;
  color: var(--color-text-muted);
  font-size: 0.72rem;
  transition: background var(--duration-fast) var(--ease-out-expo), color var(--duration-fast) var(--ease-out-expo), border-color var(--duration-fast) var(--ease-out-expo);
}

.fwi-day-btn:hover {
  background: var(--color-surface);
}

.fwi-day-btn.is-active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-contrast);
  font-weight: 600;
}

.fwi-legend__classes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: var(--color-text-muted);
}

.fwi-legend__classes li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.fwi-legend__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.fwi-verylow { background: var(--color-fwi-verylow); }
.fwi-low { background: var(--color-fwi-low); }
.fwi-moderate { background: var(--color-fwi-moderate); }
.fwi-high { background: var(--color-fwi-high); }
.fwi-veryhigh { background: var(--color-fwi-veryhigh); }
.fwi-extreme { background: var(--color-fwi-extreme); }

.frp-legend--list {
  flex: 0 0 auto;
  flex-wrap: wrap;
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

/* --- "Air quality near me"-paneel (bovenin de lijst-tab, alleen met locatie) --- */

.aq-panel {
  flex: 0 0 auto;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

.aq-panel[hidden] {
  display: none;
}

.aq-panel__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.aq-panel__badge {
  flex: 0 0 auto;
  min-width: 64px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-raised);
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
}

.aq-panel__badge.aq-good { background: var(--color-pm-good); color: #fff; }
.aq-panel__badge.aq-fair { background: var(--color-pm-fair); color: #14171c; }
.aq-panel__badge.aq-moderate { background: var(--color-pm-moderate); color: #14171c; }
.aq-panel__badge.aq-poor { background: var(--color-pm-poor); color: #14171c; }
.aq-panel__badge.aq-verypoor { background: var(--color-pm-verypoor); color: #fff; }

.aq-panel__text {
  flex: 1 1 auto;
  min-width: 0;
}

.aq-panel__title {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
}

.aq-panel__values {
  margin: 2px 0 0;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

.aq-panel__sparkline {
  display: block;
  width: 100%;
  height: 32px;
  margin-top: var(--space-2);
  color: var(--color-text-muted);
}

.aq-panel__sparkline.aq-good { color: var(--color-pm-good); }
.aq-panel__sparkline.aq-fair { color: var(--color-pm-fair); }
.aq-panel__sparkline.aq-moderate { color: var(--color-pm-moderate); }
.aq-panel__sparkline.aq-poor { color: var(--color-pm-poor); }
.aq-panel__sparkline.aq-verypoor { color: var(--color-pm-verypoor); }

.aq-panel__advisory {
  margin: var(--space-2) 0 0;
  font-size: 0.78rem;
  color: var(--color-danger-text);
}

.aq-panel__advisory[hidden] {
  display: none;
}

.fire-list__info {
  flex: 1 1 auto;
  min-width: 0;
}

.fire-list__title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  overflow: hidden;
}

.fire-list__title-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.fire-list__new-badge {
  flex: 0 0 auto;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.fire-list__meta {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 2px;
}

/* Alleen zichtbaar als de windrichting toevallig al in de cache zit
   (zie buildListItem/peekAirWind) — geen eigen fetch vanuit de lijst. */
.fire-list__wind-arrow {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--color-text-muted);
}

.fire-list__wind-arrow .wind-arrow {
  width: 100%;
  height: 100%;
}

.list-empty {
  text-align: center;
  color: var(--color-text-muted);
  padding: 32px 16px;
}

.load-more {
  flex: 0 0 auto;
  min-height: 44px;
  margin: 12px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  transition: background var(--duration-fast) var(--ease-out-expo), border-color var(--duration-fast) var(--ease-out-expo);
}

.load-more:hover {
  background: var(--color-surface-raised);
  border-color: var(--color-text-muted);
}

/* --- Tabbalk --- */

.tab-bar {
  flex: 0 0 auto;
  height: var(--tab-bar-height);
  display: flex;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding-bottom: env(safe-area-inset-bottom);
}

.tab-bar__btn {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 44px;
  background: none;
  border: none;
  font-size: 0.7rem;
  color: var(--color-text-muted);
  transition: color var(--duration-fast) var(--ease-out-expo);
}

.tab-bar__btn:hover {
  color: var(--color-text);
}

.tab-bar__btn svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
  transition: transform var(--duration-fast) var(--ease-out-expo);
}

.tab-bar__btn.is-active {
  color: var(--color-accent);
}

.tab-bar__btn.is-active svg {
  transform: translateY(-1px);
}

/* --- Modal --- */

.modal {
  position: fixed;
  inset: 0;
  background: rgba(5, 7, 10, 0.82);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: var(--z-modal);
  padding: 16px;
}

.modal__content {
  background: var(--color-surface-raised);
  border-radius: 16px;
  padding: var(--space-5);
  max-width: 520px;
  width: 100%;
  box-shadow: var(--shadow-lg);
}

.modal__content h2 {
  margin: 0 0 var(--space-4);
  font-size: clamp(1.35rem, 5vw, 1.8rem);
  letter-spacing: -0.025em;
}

.onboarding-steps {
  display: grid;
  gap: var(--space-4);
}

.onboarding-step {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: start;
  gap: var(--space-3);
}

.onboarding-step__number {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  font-size: 0.82rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.onboarding-step p {
  margin: 1px 0 0;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.onboarding-step strong {
  color: var(--color-text);
}

.modal__detail-link {
  margin: var(--space-4) 0;
  font-size: 0.85rem;
}

.modal__detail-link a {
  color: var(--color-text);
  text-underline-offset: 3px;
}

.btn {
  min-height: 44px;
  padding: 0 20px;
  border-radius: var(--radius);
  border: none;
  font-size: 0.95rem;
  transition: filter var(--duration-fast) var(--ease-out-expo), transform var(--duration-fast) var(--ease-out-expo);
}

.btn--primary {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  width: 100%;
  font-weight: 600;
}

.btn--primary:hover {
  filter: brightness(1.08);
}

.btn--primary:active {
  transform: scale(0.98);
}

/* --- Leaflet-bediening in appstijl (standaard Leaflet is licht, botst met dark theme) --- */

.leaflet-control-zoom a {
  background: var(--color-surface-raised);
  color: var(--color-text);
  border-color: var(--color-border);
  width: 44px;
  height: 44px;
  line-height: 44px;
  transition: background var(--duration-fast) var(--ease-out-expo);
}

.leaflet-control-zoom a:hover {
  background: var(--color-border);
}

/* Zonder max-width rekt deze lange Esri-attributietekst zich op smalle
   schermen (shrink-to-fit) uit tot de volle breedte en overlapt hij de
   zoomknoppen linksboven — zelfde probleem/oplossing als .map-controls--legend
   hierboven, nu voor de rechtsboven-hoek t.o.v. de zoomknoppen linksboven. */
.leaflet-control-attribution {
  background: rgba(30, 34, 41, 0.8);
  color: var(--color-text-muted);
  max-width: calc(100% - 54px);
  text-align: right;
}

.leaflet-control-attribution a {
  color: var(--color-text);
}

/* --- Leaflet-popup in appstijl --- */

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  background: var(--color-surface-raised);
  color: var(--color-text);
}

/* Popups moeten boven Leaflet-controls en de brede Esri-attributie blijven,
   zodat de sluitknop ook op een smalle telefoon bereikbaar is. */
.leaflet-popup-pane {
  z-index: 1100;
}

.leaflet-popup-close-button {
  color: var(--color-text-muted);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.leaflet-popup-close-button:hover {
  color: var(--color-text);
}

.leaflet-popup-content {
  margin: 5px 42px 5px 16px;
  max-width: min(280px, calc(100vw - 92px));
}

.leaflet-popup-content.leaflet-popup-scrolled {
  padding-right: var(--space-2);
  border-top: none;
  border-bottom: none;
}

.fire-popup__title {
  font-weight: 600;
  margin: 0 0 3px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.fire-popup__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.fire-popup__place {
  margin: 0 0 6px;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.fire-popup__industrial {
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--color-border);
  font-size: 0.78rem;
  font-style: italic;
  color: var(--color-text-muted);
}

.fire-popup__trend-wrap {
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--color-border);
}

.fire-popup__trend-label {
  margin: 0 0 4px;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

.fire-popup__trend {
  display: block;
  width: 100%;
  height: 28px;
  color: var(--color-text-muted);
}

.fire-popup dl {
  margin: 0;
  font-size: 0.85rem;
}

.fire-popup dt {
  color: var(--color-text-muted);
  display: inline;
}

.fire-popup dd {
  display: inline;
  margin: 0 8px 0 4px;
}

/* --- Wind/luchtkwaliteit in de hotspot-popup (Open-Meteo, on-demand geladen) --- */

.fire-popup__airwind {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--color-border);
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.fire-popup__spinner {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-text-muted);
  animation: spin 0.8s linear infinite;
  vertical-align: middle;
}

.fire-popup__wind-row {
  margin: 0 0 2px;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 4px;
}

.fire-popup__drift,
.fire-popup__pm {
  margin: 0 0 2px;
}

/* Groen-naar-rood PM2.5-schaalbalk met marker — legt de kleurcategorie uit
   zonder extra tekst nodig te hebben, ideaal voor de krappe popup. */
.pm-scale {
  position: relative;
  height: 6px;
  border-radius: 3px;
  margin: 3px 0 1px;
  background: linear-gradient(
    to right,
    var(--color-pm-good) 0%,
    var(--color-pm-good) 10%,
    var(--color-pm-fair) 10%,
    var(--color-pm-fair) 25%,
    var(--color-pm-moderate) 25%,
    var(--color-pm-moderate) 50%,
    var(--color-pm-poor) 50%,
    var(--color-pm-poor) 75%,
    var(--color-pm-verypoor) 75%,
    var(--color-pm-verypoor) 100%
  );
}

.pm-scale__marker {
  position: absolute;
  top: -3px;
  width: 2px;
  height: 12px;
  border-radius: 1px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
  transform: translateX(-1px);
}

.wind-arrow {
  width: 14px;
  height: 14px;
  fill: currentColor;
  flex: 0 0 auto;
}

/* --- [hidden] moet display:flex van .modal/.view/.filter-panel verslaan --- */

.modal[hidden],
.view[hidden],
.filter-panel[hidden],
.filter-badge[hidden] {
  display: none;
}

/* --- Tablet en desktop --- */

@media (min-width: 768px) {
  .app-header {
    padding: 0 24px;
  }

  .explorer-toolbar {
    justify-content: center;
    padding-inline: var(--space-5);
  }

  .modal {
    align-items: center;
  }

  .fire-list {
    max-width: 700px;
    margin: 0 auto;
    width: 100%;
  }

  .filter-panel {
    max-width: 700px;
    margin: 0 auto;
    width: 100%;
  }
}

@media (max-width: 420px) {
  .explorer-toolbar__action {
    width: 44px;
    padding-inline: 0;
  }

  .explorer-toolbar__action span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
}

@media (min-width: 1024px) {
  .app-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 420px);
  }

  .view {
    position: relative;
    inset: auto;
    min-width: 0;
  }

  .view--map {
    grid-column: 1;
    grid-row: 1;
  }

  .view--list {
    grid-column: 2;
    grid-row: 1;
    border-left: 1px solid var(--color-border);
    overflow-y: auto;
  }

  .view--list .fire-list {
    flex: 0 0 auto;
    max-width: none;
    margin: 0;
    overflow: visible;
  }

  .view--list .filter-panel {
    max-width: none;
  }

  .tab-bar {
    display: none;
  }

  .cookie-banner {
    bottom: 16px;
  }
}

/* --- Reduced motion: dezelfde selectors herhaald i.p.v. !important, wint via cascade-volgorde --- */

@media (prefers-reduced-motion: reduce) {
  .icon-btn,
  .icon-btn.is-loading svg,
  .fab,
  .filter-toggle,
  .filter-toggle svg,
  .filter-panel:not([hidden]),
  .filter-reset,
  .fire-list__item,
  .load-more,
  .tab-bar__btn,
  .tab-bar__btn svg,
  .btn,
  .fwi-day-btn,
  .fwi-legend__icon-btn,
  .fwi-legend__icon-btn svg,
  .fire-popup__spinner,
  .leaflet-control-zoom a {
    transition-duration: 0.01ms;
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
  }

  .place-search__field,
  .place-search__option,
  .explorer-toolbar__action {
    transition-duration: 0.01ms;
  }

  .place-search.is-loading .place-search__field svg {
    animation: none;
    fill: var(--color-accent);
  }
}

/* --- erwinai-footercredit: vaste woordmerkstijl, gelijk aan andere erwinai-projecten --- */

.app-footer {
  flex: 0 0 auto;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.data-credit {
  margin: 0;
  text-align: center;
  font-size: 0.72rem;
  color: var(--color-text-muted);
}

.data-credit a {
  color: var(--color-text-muted);
}

.footer-credit {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.erwinai-wordmark {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  padding: 5px 9px;
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  color: #0f0f0f;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  transition: transform var(--duration-fast) var(--ease-out-expo);
}

/* Onzichtbaar vergroot tikgebied tot 44px — de vaste woordmerkstijl blijft
   zelf ongewijzigd (consistent met DJR/Top Acts & Events). */
.erwinai-wordmark::before {
  content: '';
  position: absolute;
  inset: -11px 0;
}

.erwinai-wordmark:hover {
  transform: scale(1.05);
}

.erwinai-wordmark__erwin {
  color: #0f0f0f;
}

.erwinai-wordmark__ai {
  color: #1a6ef5;
}

@media (prefers-reduced-motion: reduce) {
  .erwinai-wordmark {
    transition-duration: 0.01ms;
  }
}

/* --- Statische contentpagina's (landengidsen): normale scrollflow i.p.v.
   de vaste-viewport kaart-shell (die rekent op één absoluut-gepositioneerde
   .view die .app-main volledig vult). --- */

body.content-page {
  height: auto;
  min-height: 100%;
}

.content-page .app-main {
  position: static;
  flex: none;
}

.content-page__article {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--space-5) var(--space-4);
  line-height: 1.6;
}

.content-page__article h1 {
  font-size: clamp(1.6rem, 4vw, 2.25rem);
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0 0 var(--space-2);
}

.content-page__article h2 {
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  margin: var(--space-6) 0 var(--space-2);
}

.content-page__article p,
.content-page__article ul {
  margin: 0 0 var(--space-3);
}

.content-page__article a {
  color: var(--color-accent);
}

.content-page__updated {
  color: var(--color-text-muted);
  font-size: 0.82rem;
}

.content-page__action {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-4);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius);
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-weight: 650;
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-out-expo), color var(--duration-fast) var(--ease-out-expo);
}

.content-page__action:hover {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
}

.content-page__action--link {
  color: var(--color-text) !important;
}

.emergency-notice {
  padding: var(--space-4);
  border: 1px solid color-mix(in srgb, var(--color-frp-high) 55%, var(--color-border));
  border-radius: var(--radius);
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
}

.emergency-notice h2 {
  margin-top: 0;
  color: var(--color-text);
}

.emergency-notice p:last-child {
  margin-bottom: 0;
}

.content-page__sources {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.content-page__sources a {
  color: var(--color-text-muted);
  text-decoration: underline;
}

.content-page__map-embed {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  margin: var(--space-3) 0 var(--space-5);
}

.content-page__map-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.content-page__related {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-border);
}

.content-page__related a {
  color: var(--color-accent);
}

/* --- Hub-hero (wildfires.html): één brandmoment bij binnenkomst, i.p.v.
   kale tekst — de vlam-gloed is bewust de enige plek waar de FRP-accentkleur
   drenched wordt ingezet, de rest van de site blijft ingetogen. --- */

.hub-hero {
  position: relative;
  text-align: center;
  padding: var(--space-6) var(--space-4) var(--space-4);
  overflow: hidden;
}

.hub-hero::before {
  content: '';
  position: absolute;
  inset: -30% -10% auto -10%;
  height: 320px;
  background: radial-gradient(ellipse at center, rgba(255, 107, 53, 0.32) 0%, rgba(255, 107, 53, 0) 70%);
  pointer-events: none;
}

.hub-hero__icon {
  position: relative;
  width: 60px;
  height: 60px;
  margin: 0 auto var(--space-3);
  filter: drop-shadow(0 0 22px rgba(255, 107, 53, 0.55));
}

.hub-hero h1 {
  position: relative;
  font-size: clamp(1.75rem, 5vw, 2.75rem);
  letter-spacing: -0.03em;
  text-wrap: balance;
  margin: 0 0 var(--space-3);
}

.hub-hero p {
  position: relative;
  max-width: 52ch;
  margin: 0 auto;
  color: var(--color-text-muted);
}

/* --- Editoriale landenlijst: grote rijen i.p.v. herhaalde identieke
   kaartjes, met een vlag, naam + omschrijving en een pijl die op hover
   verschuift. Rijen verschijnen gestaffeld bij het laden. --- */

.hub-list {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  border-top: 1px solid var(--color-border);
}

.hub-list li {
  border-bottom: 1px solid var(--color-border);
  opacity: 0;
  animation: hub-list-in 0.5s var(--ease-out-expo) forwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}

@keyframes hub-list-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hub-list a {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-2);
  text-decoration: none;
  color: var(--color-text);
}

.hub-list a:hover .hub-list__arrow {
  transform: translateX(4px);
  color: var(--color-accent);
}

.hub-list__flag {
  font-size: 1.8rem;
  line-height: 1;
  flex: 0 0 auto;
}

.hub-list__text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hub-list__name {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.hub-list__desc {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.hub-list__arrow {
  flex: 0 0 auto;
  font-size: 1.2rem;
  color: var(--color-text-muted);
  transition: transform var(--duration-fast) var(--ease-out-expo), color var(--duration-fast) var(--ease-out-expo);
}

@media (prefers-reduced-motion: reduce) {
  .hub-list li {
    animation: none;
    opacity: 1;
  }

  .hub-list a,
  .hub-list__arrow {
    transition-duration: 0.01ms;
  }
}

.content-page__related ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  list-style: none;
  padding: 0;
  margin: var(--space-2) 0;
}

/* --- Cookiebanner (analytics-toestemming) --- */

.cookie-banner {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(var(--tab-bar-height) + env(safe-area-inset-bottom) + 12px);
  z-index: var(--z-cookie-banner);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-4);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cookie-banner[hidden] {
  display: none;
}

.cookie-banner__text {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.cookie-banner__text a {
  color: var(--color-text);
  text-underline-offset: 3px;
}

.cookie-banner__actions {
  display: flex;
  gap: var(--space-2);
}

.cookie-banner__actions .btn {
  width: auto;
  flex: 1 1 0;
}

.cookie-banner__decline {
  background: none;
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

.cookie-banner__decline:hover {
  background: var(--color-surface);
}

@media (min-width: 768px) {
  .cookie-banner {
    max-width: 420px;
    left: auto;
  }
}