:root {
  --surround: #000000;
  /* Map controls: dark glass panels with light grey text; whatever is
     selected is filled light grey, with near-black on top of it. */
  --control: #e6e6e6;
  --panel: rgba(16, 18, 23, 0.82);
  --panel-border: rgba(255, 255, 255, 0.14);
  --accent: #e6e6e6;
  --accent-ink: #111317;
  --pad: clamp(24px, 3vw, 32px);
  --pad-top: calc(8px + env(safe-area-inset-top, 0px));
  --pad-right: calc(var(--pad) + env(safe-area-inset-right, 0px));
  --pad-bottom: calc(var(--pad) + env(safe-area-inset-bottom, 0px));
  --pad-left: calc(var(--pad) + env(safe-area-inset-left, 0px));
}

/* Arial scaled to Montserrat's metrics, so if the web font is slow the
   text keeps the same size when it swaps in instead of jumping. */
@font-face {
  font-family: "Montserrat Fallback";
  src: local("Arial"), local("ArialMT");
  size-adjust: 113.4%;
  ascent-override: 85.3%;
  descent-override: 22.1%;
  line-gap-override: 0%;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* One fixed screen filled by the map: the page itself never scrolls,
   pans or rubber-bands on touch. */
html {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background-color: var(--surround);
}

body {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  font-family: "Montserrat", "Montserrat Fallback", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-weight: 300;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------------------------------------------------------------- map */
/* The map fills the screen edge to edge with the text on top. */
.map-section {
  position: fixed;
  inset: 0;
  background: var(--surround);
  color: #ffffff;
}

.map-inner {
  position: relative;
  height: 100%;
}

.map-head,
.map-foot {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  margin: 0;
  pointer-events: none;
}

.map-head {
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  padding: calc(12px + env(safe-area-inset-top, 0px)) var(--pad-right) 2.5rem var(--pad-left);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

.map-date {
  font-size: 0.85rem;
  font-weight: 400;
  color: #ffffff;
}

.map-frame {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: #0b0d12;
}

#map-gl {
  position: absolute;
  inset: 0;
}

/* The i: its own small box beside the style picker, in the same dark
   glass as the other controls, with a light grey i. Its credits
   open inside the same box, which grows to the left from the i (the
   panel is drawn behind the i, anchored to its right edge). */
#map-gl .maplibregl-ctrl.maplibregl-ctrl-attrib,
#map-gl .maplibregl-ctrl.maplibregl-ctrl-attrib.maplibregl-compact,
#map-gl .maplibregl-ctrl.maplibregl-ctrl-attrib.maplibregl-compact-show {
  --i-size: 30px;
  position: relative;
  box-sizing: border-box;
  width: var(--i-size);
  height: var(--i-size);
  min-height: 0;
  padding: 0;
  margin-right: 6px;
  background: var(--panel);
  color: var(--control);
  border: 1px solid var(--panel-border);
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: 11px;
  visibility: visible;
}
#map-gl .maplibregl-ctrl-attrib .maplibregl-ctrl-attrib-button,
#map-gl .maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-button {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  filter: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='6.6' r='1.5' fill='%23e6e6e6'/%3E%3Crect x='10.9' y='9.6' width='2.2' height='8.6' rx='0.5' fill='%23e6e6e6'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
  background-color: transparent;
  border-radius: 3px;
  cursor: pointer;
  transition: background-color 0.15s;
}
#map-gl .maplibregl-ctrl-attrib .maplibregl-ctrl-attrib-button:hover { background-color: rgba(255, 255, 255, 0.08); }
#map-gl .maplibregl-ctrl-attrib .maplibregl-ctrl-attrib-button:focus-visible {
  outline: 2px solid var(--control);
  outline-offset: -3px;
}
#map-gl .maplibregl-ctrl-attrib .maplibregl-ctrl-attrib-inner {
  position: absolute;
  right: -1px;
  bottom: -1px;
  box-sizing: border-box;
  width: max-content;
  max-width: calc(100vw - 32px);
  min-height: calc(100% + 2px);
  padding: calc((var(--i-size) - 18px) / 2) calc(var(--i-size) + 6px) calc((var(--i-size) - 18px) / 2) 10px;
  /* The same glass as the closed box; a stronger blur keeps whatever it
     opens over (Names, the legend) from showing through sharply. */
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  line-height: 16px;
}
/* MapLibre gives focused controls a blue glow, even after a tap; use the
   controls' own outline, for keyboard focus only. */
#map-gl .maplibregl-ctrl button:focus,
#map-gl .maplibregl-ctrl summary:focus { box-shadow: none; }
#map-gl .maplibregl-ctrl-attrib a { color: var(--control); }
/* The embed has no picker: its i keeps MapLibre's gap from the edge. */
.embed #map-gl .maplibregl-ctrl.maplibregl-ctrl-attrib { margin-right: 10px; }
/* In the bottom-right corner, clear of the phone's home bar. The i and
   the style picker sit in a row; MapLibre puts the last-added control
   first, so reverse the row to keep the picker on the right. */
#map-gl .maplibregl-ctrl-bottom-right {
  bottom: env(safe-area-inset-bottom, 0px);
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-end;
}

/* Map controls (style picker and Names): dark glass panels, like a live
   tracking site's, so they read the same over all three maps. A
   translucent near-black panel with a soft blur and shadow, a thin light
   border and 4px corners; light grey text and line icons; the current
   style filled light grey with dark text. */
#map-gl .style-picker {
  display: flex;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
#map-gl .style-picker button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 11px;
  background: transparent;
  color: var(--control);
  border: 0;
  font: 400 11.5px/28px "Montserrat", system-ui, sans-serif;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
#map-gl .style-picker button + button { border-left: 1px solid rgba(255, 255, 255, 0.1); }
#map-gl .style-picker button:hover { background: rgba(255, 255, 255, 0.08); }
#map-gl .style-picker .icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#map-gl .style-picker button[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}
#map-gl .style-picker button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
#map-gl .style-picker button[aria-pressed="true"]:focus-visible { outline-color: var(--accent-ink); }
/* The Names box sits just right of the basemaps (MapLibre's 10px gap is
   too wide for two boxes that belong together). */
#map-gl .maplibregl-ctrl-bottom-right .maplibregl-ctrl.style-picker.basemaps { margin-right: 6px; }

/* Names: icon, word and a small on/off switch. Off, an outlined dark
   track with a light grey knob on the left; on, the track fills light
   grey and a dark knob sits on the right. */
#map-gl .names-toggle .switch {
  position: relative;
  width: 26px;
  height: 14px;
  border: 1px solid rgba(230, 230, 230, 0.55);
  border-radius: 2px;
  background: transparent;
  transition: background-color 0.15s, border-color 0.15s;
}
#map-gl .names-toggle .switch::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 10px;
  height: 10px;
  border-radius: 1px;
  background: var(--control);
  transition: transform 0.15s, background-color 0.15s;
}
#map-gl .names-toggle button[aria-checked="true"] .switch {
  background: var(--accent);
  border-color: var(--accent);
}
#map-gl .names-toggle button[aria-checked="true"] .switch::after {
  transform: translateX(12px);
  background: var(--accent-ink);
}
@media (prefers-reduced-motion: reduce) {
  #map-gl .style-picker button,
  #map-gl .names-toggle .switch,
  #map-gl .names-toggle .switch::after { transition: none; }
}

/* Hex stats popup. */
.hex-popup .maplibregl-popup-content {
  background: #000000;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 4px;
  padding: 10px 40px 10px 14px;
  font: 400 0.8rem/1.5 "Montserrat", system-ui, sans-serif;
  box-shadow: none;
}
.hex-popup .maplibregl-popup-content strong { font-weight: 600; }
.hex-popup .hex-popup-note { margin-top: 2px; }
.hex-popup .hex-popup-cause { white-space: nowrap; }
.hex-popup a {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.hex-popup .maplibregl-popup-close-button {
  width: 36px;
  height: 36px;
  color: #ffffff;
  font-size: 26px;
  line-height: 1;
}
.hex-popup .maplibregl-popup-close-button:hover { background: transparent; }
.hex-popup .maplibregl-popup-tip { display: none; }


.map-status {
  pointer-events: none;
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  padding: 1rem;
}

.map-status:empty { display: none; }

.map-foot {
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  padding: 3rem var(--pad-right) calc(6px + env(safe-area-inset-bottom, 0px)) var(--pad-left);
  font-size: 0.8rem;
  color: #ffffff;
  /* Fixed-height fade: sized to the closed footer, so opening the causes
     panel doesn't darken more of the map. */
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0)) left bottom / 100% 144px no-repeat;
}

.map-note {
  font-size: 0.75rem;
  line-height: 1.4;
  color: #ffffff;
}

.map-credits {
  align-self: stretch;
}

/* The footer questions sit side by side. Opening one hides the other
   until it is closed. */
.questions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.45rem 1.1rem;
}
.questions:has(.causes[open]) .causes:not([open]) { display: none; }

/* Expandable causes: a link-style toggle opening a panel styled like the
   i button's, only larger. */
.causes {
  pointer-events: auto;
  font-size: 0.75rem;
  line-height: 1.4;
  color: #ffffff;
}

.causes summary {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  list-style: none;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.causes summary::-webkit-details-marker { display: none; }

.causes summary:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

.causes-box {
  margin-top: 0.45rem;
  max-width: 27rem;
  background: #141414; /* dataviz-dark sea colour, hsl(0, 0%, 8%) */
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 0;
  position: relative;
  padding: 12px 46px 12px 16px;
  font-size: 0.8rem;
  line-height: 1.5;
}

/* While open, the panel replaces the link and closes from its x. */
.causes[open] > summary { display: none; }
.causes[open] .causes-box { margin-top: 0; }

.causes-close {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  background: transparent;
  color: #ffffff;
  border: 0;
  cursor: pointer;
}
.causes-close svg { width: 16px; height: 16px; display: block; }
.causes-close:focus-visible { outline: 2px solid #ffffff; outline-offset: 1px; }

.causes-box ul { list-style: none; }
.causes-box li + li { margin-top: 0.4rem; }
.causes-box strong { font-weight: 600; }
.causes-more { margin-top: 0.7rem; }
.causes-box a {
  color: #ffffff;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

/* The key: a dark glass panel like the map controls, with light grey
   labels and hexagon swatches drawn the way the map draws its hexes (a
   translucent fill inside a solid outline, in the same colours). */
.legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.9rem;
  list-style: none;
  box-sizing: border-box;
  min-height: 28px;
  padding: 0 11px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--control);
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.legend li {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.legend i {
  display: inline-block;
  width: 14px;
  height: 12px;
  background: center / contain no-repeat;
}

.legend .g { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 21'%3E%3Cpolygon points='6,1 18,1 23,10.5 18,20 6,20 1,10.5' fill='%233cc85a' fill-opacity='0.5' stroke='%233cc85a' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.legend .y { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 21'%3E%3Cpolygon points='6,1 18,1 23,10.5 18,20 6,20 1,10.5' fill='%23f0c828' fill-opacity='0.5' stroke='%23f0c828' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.legend .r { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 21'%3E%3Cpolygon points='6,1 18,1 23,10.5 18,20 6,20 1,10.5' fill='%23eb463c' fill-opacity='0.5' stroke='%23eb463c' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E"); }

.small {
  font-size: 0.75rem;
  line-height: 1.4;
  text-wrap: balance;
}

.copyright { text-align: left; }
/* The footer ignores clicks so the map stays usable under it; the link opts back in. */
.copyright a {
  pointer-events: auto;
  color: inherit;
  text-decoration: none;
}
/* Underlined only on hover or keyboard focus, like the embed's link. */
.copyright a:hover,
.copyright a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

/* The note and the copyright line share the bottom edge with the i, the
   style picker and Names (about 410px together), so they shrink rather than
   run under them: the copyright line, the longer of the two, is about
   26em wide. */
.map-foot .map-note,
.map-foot .copyright { font-size: min(0.75rem, calc((100vw - var(--pad-left) - 440px) / 27)); }

@media (max-width: 700px), (max-width: 900px) and (orientation: portrait) {
  /* No room on phones: the map keeps the space instead. */
  .map-credits { display: none; }

  .map-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 2.5rem 16px;
  }
  /* Phones: the update time stays at the top, and the map options become
     a full-width control bar at the bottom, within thumb reach: Base, Dark
     and Satellite sharing the width, then Names, then the i (opening its
     credits clears the rest of the bar), every button at least 36px tall.
     The legend sits just above the bar. */
  .legend { min-height: 30px; font-size: 12px; }
  /* The footer keeps only the legend: the questions and the "Based on"
     note go. */
  .map-foot .questions,
  .map-foot .map-note { display: none; }
  #map-gl .maplibregl-ctrl-bottom-right {
    top: auto;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    left: calc(16px + env(safe-area-inset-left, 0px));
    right: calc(16px + env(safe-area-inset-right, 0px));
    flex-direction: row;
    align-items: stretch;
    gap: 0;
  }
  #map-gl .maplibregl-ctrl-bottom-right .maplibregl-ctrl,
  #map-gl .maplibregl-ctrl-bottom-right .maplibregl-ctrl.style-picker.basemaps { margin: 0; }
  #map-gl .maplibregl-ctrl-bottom-right .basemaps { order: 1; flex: 1; }
  #map-gl .maplibregl-ctrl-bottom-right .names-toggle { order: 2; margin-left: 6px; }
  #map-gl .maplibregl-ctrl-bottom-right .style-picker button {
    min-height: 36px;
    padding: 0 8px;
    gap: 5px;
    font-size: 12px;
    line-height: 36px;
  }
  #map-gl .maplibregl-ctrl-bottom-right .basemaps button { flex: 1 1 auto; }
  #map-gl .maplibregl-ctrl-bottom-right .maplibregl-ctrl.maplibregl-ctrl-attrib {
    --i-size: 38px;
    order: 3;
    margin: 0 0 0 6px;
  }
  /* With the credits open, the rest of the bar steps aside so they sit
     over the map, as on desktop, instead of over the buttons. */
  #map-gl .maplibregl-ctrl-bottom-right:has(.maplibregl-compact-show) .style-picker { visibility: hidden; }
  /* The embed's lone i stays in the bottom-right corner; it shares the
     bottom row with the legend, which steps aside while the credits are
     open. */
  .embed #map-gl .maplibregl-ctrl-bottom-right { left: auto; }
  .embed .map-section:has(.maplibregl-compact-show) .legend { visibility: hidden; }
  .embed #map-gl .maplibregl-ctrl-bottom-right .maplibregl-ctrl.maplibregl-ctrl-attrib { --i-size: 30px; margin: 0; }
  .map-foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    /* Room underneath for the control bar (36px tall, 10px up). */
    padding: 5rem 16px calc(56px + env(safe-area-inset-bottom, 0px));
    /* Taller than the closed footer's text, with an eased fade, so the
       darkness melts into the map instead of ending in a line. */
    background: linear-gradient(to top,
      rgba(0, 0, 0, 0.85) 0%,
      rgba(0, 0, 0, 0.8) 35%,
      rgba(0, 0, 0, 0.6) 55%,
      rgba(0, 0, 0, 0.35) 72%,
      rgba(0, 0, 0, 0.14) 87%,
      rgba(0, 0, 0, 0) 100%) left bottom / 100% 140px no-repeat;
  }
}

/* -------------------------------------------------------------- embed */
/* /embed: the map alone for other sites' iframes. A link back to the
   site and the date at the top, the legend at the bottom, the i in a
   corner; no questions, credits or style picker. These follow the phone
   rules above, since embeds are often phone-width. */
.embed .map-head {
  gap: 0.1rem;
  padding: 8px 10px 1.6rem;
}
.embed .embed-brand {
  pointer-events: auto;
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
}
.embed .embed-brand:hover,
.embed .embed-brand:focus-visible { text-decoration: underline; text-underline-offset: 0.2em; }
.embed .map-date { font-size: 0.7rem; }
.embed .map-foot {
  padding: 1.6rem 10px 8px;
  font-size: 0.7rem;
}
.embed .legend { gap: 0.3rem 0.8rem; min-height: 26px; padding: 0 9px; font-size: 11px; }
.embed .legend i { width: 12px; height: 10px; }

/* ---------------------------------------------------- satellite and base */
/* Satellite and Base show the map right to the edges: the dark fades
   behind the top and bottom text are only for the Dark map. The i button,
   its panel and the style picker look the same on every map. */
.map-section[data-basemap="hybrid-v4"] .map-head,
.map-section[data-basemap="hybrid-v4"] .map-foot,
.map-section[data-basemap="base-v4"] .map-head,
.map-section[data-basemap="base-v4"] .map-foot { background: none; }

/* Base is the one light map: its text turns black, a step heavier than the
   usual light weight so it holds up over the pale land. The causes panel
   keeps its own white-on-black look. */
.map-section[data-basemap="base-v4"] .map-head,
.map-section[data-basemap="base-v4"] .map-foot,
.map-section[data-basemap="base-v4"] .map-date,
.map-section[data-basemap="base-v4"] .map-note,
.map-section[data-basemap="base-v4"] .causes,
.map-section[data-basemap="base-v4"] .embed-brand { color: #000000; }
.map-section[data-basemap="base-v4"] .map-head,
.map-section[data-basemap="base-v4"] .map-foot { font-weight: 400; }
.map-section[data-basemap="base-v4"] .causes-box { font-weight: 300; }
.map-section[data-basemap="base-v4"] .causes summary:focus-visible { outline-color: #000000; }

/* Most phones: the buttons drop their icons and tighten so the control
   bar, with the i at its end, still fits on one row. */
@media (max-width: 430px) {
  #map-gl .maplibregl-ctrl-bottom-right .style-picker .icon { display: none; }
  #map-gl .maplibregl-ctrl-bottom-right .style-picker button { padding: 0 7px; }
}

/* The narrowest phones: tighter still, and a slimmer i, so every label
   still shows in full. */
@media (max-width: 360px) {
  #map-gl .maplibregl-ctrl-bottom-right .style-picker button { padding: 0 6px; }
  #map-gl .maplibregl-ctrl-bottom-right .maplibregl-ctrl.maplibregl-ctrl-attrib { width: 32px; }
}

/* The embed never has the text fades, on any map. */
.embed .map-section .map-head,
.embed .map-section .map-foot { background: none; }