/* ==========================================================================
   Gambia Happening Map — application styles

   Identity: the country itself is the hero. Land is drawn as warm sand on a
   pale river ground, framed by a deep river-forest green. Ochre marks the
   present, clay red marks what has stopped. Light theme only; every surface
   is painted explicitly so nothing borrows a host background.
   ========================================================================== */

/* Display typeface, vendored into site/fonts so the page needs no third-party
   stylesheet — the standalone build inlines this file as a data: URI.
   Newsreader by Production Type, SIL Open Font License 1.1. */
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/newsreader-latin-var.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* --- ground and ink ------------------------------------------------- */
  --paper:      #F4F1E8;
  --paper-2:    #EBE6D8;
  --paper-3:    #E0D9C5;
  --sand:       #DCCFAE;
  --ink:        #1C2721;
  --ink-2:      #46534C;
  --ink-3:      #5E6961;
  /* Used where something is empty or unavailable: quiet, but still AA on paper. */
  --ink-muted:  #586259;

  /* --- accents -------------------------------------------------------- */
  --forest:     #0F3529;
  --forest-2:   #1C4A39;
  --green:      #2C6B4F;
  /* Ochre used to be both the brand accent and the stalled status colour, so a
     selected active marker read as stalled. The accent is now a darker ochre
     (>= 4.5:1 on paper at small sizes) and selection has its own deep green. */
  --ochre:      #8A5F0C;
  --ochre-lt:   #E7C978;
  --ochre-rule: #C9A24A;
  --select:     #123D2C;
  --clay:       #A33B22;
  --river:      #6E9CB2;
  --river-deep: #40708A;

  /* --- status --------------------------------------------------------- */
  --st-active:    #2E7D4F;
  --st-planned:   #2C6E9B;
  --st-completed: #646E67;
  --st-ended:     #B03A20;
  --st-stalled:   #CE8318;
  --st-unknown:   #A9AFA6;

  /* --- structure ------------------------------------------------------ */
  --line:       rgba(28, 39, 33, 0.16);
  --line-soft:  rgba(28, 39, 33, 0.09);
  --shadow-lo:  0 1px 2px rgba(23, 38, 30, 0.07);
  --shadow-md:  0 10px 30px -14px rgba(15, 53, 41, 0.45);
  --shadow-hi:  -18px 0 48px -22px rgba(15, 53, 41, 0.5);

  --r-sm: 3px;
  --r-md: 6px;
  --r-lg: 10px;

  --display: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;

  --filters-w: 274px;
  --feed-w: 372px;
  --topbar-h: 62px;
  --drawer-w: 448px;
}

/* ---------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }

/* Several elements below are laid out with flex, which would otherwise beat the
   user-agent rule for [hidden]. Keep the attribute authoritative. */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; }
p { margin: 0 0 0.7em; }
p:last-child { margin-bottom: 0; }
ul, ol, dl { margin: 0; padding: 0; }
li { list-style: none; }

a { color: var(--forest-2); text-decoration-color: var(--river); text-underline-offset: 2px; }
a:hover { color: var(--clay); }

button, input, select { font: inherit; color: inherit; }

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

/* The wrapper is absolutely positioned and holds nothing but absolutely
   positioned children, so it is zero-wide: without nowrap the links wrap to
   three lines, grow past their -60px parking spot and print over the masthead. */
.skiplinks { position: absolute; top: 0; left: 0; width: 100%; height: 0; z-index: 2000; }
.skiplink {
  position: absolute; left: 8px; top: -80px; z-index: 2000;
  white-space: nowrap;
  background: var(--forest); color: var(--paper);
  padding: 9px 14px; border-radius: var(--r-md); text-decoration: none;
  transition: top .15s ease;
}
.skiplink:focus { top: 8px; color: var(--paper); }

/* ================================================================ topbar */
.topbar {
  height: var(--topbar-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 0 18px;
  background: var(--forest);
  color: #EFEADC;
  border-bottom: 3px solid var(--ochre);
  position: relative; z-index: 900;
}

.brand { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.brand__place {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ochre-lt); white-space: nowrap;
}
.brand__name {
  font-family: var(--display);
  font-size: 27px; font-weight: 500; line-height: 1;
  letter-spacing: -0.015em;
  color: #F6F2E6;
  white-space: nowrap;
}

.topbar__tools { display: flex; align-items: center; gap: 10px; }

.viewtoggle {
  display: inline-flex;
  background: rgba(0, 0, 0, 0.22);
  border-radius: var(--r-md);
  padding: 3px;
}
.viewtoggle__btn {
  appearance: none; border: 0; background: transparent;
  color: #C9D6CD; padding: 5px 13px; border-radius: 4px;
  font-size: 13px; cursor: pointer; transition: background .14s ease, color .14s ease;
}
.viewtoggle__btn[aria-pressed="false"]:hover:not([disabled]) { color: #F2EDE0; }
.viewtoggle__btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.viewtoggle__btn[aria-pressed="true"] {
  background: var(--paper); color: var(--forest); font-weight: 600;
}

.btn {
  appearance: none; cursor: pointer;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  padding: 6px 12px;
  border-radius: var(--r-md);
  font-size: 13px;
  transition: background .14s ease, border-color .14s ease;
}
.btn:hover { background: var(--paper-2); }
.btn--ghost {
  background: transparent; border-color: rgba(255, 255, 255, 0.28); color: #DCE6DD;
}
.btn--ghost:hover { background: rgba(255, 255, 255, 0.1); color: #F6F2E6; }

.filters-toggle { display: none; }
#aboutBtn .lbl-short, #shareBtn .lbl-short { display: none; }

/* ============================================================= workspace */
.workspace {
  display: flex;
  height: calc(100% - var(--topbar-h));
  background: var(--paper);
}

/* =============================================================== filters */
.filters {
  width: var(--filters-w); flex: 0 0 var(--filters-w);
  border-right: 1px solid var(--line);
  background: var(--paper-2);
  display: flex; flex-direction: column;
  overscroll-behavior: contain;
}
.filters__inner { padding: 16px 16px 26px; overflow-y: auto; flex: 1 1 auto; }

/* The head and the sticky action bar only exist when the panel is an overlay;
   on a wide screen the panel is part of the page and needs neither. */
.filters__head, .filters__bar { display: none; }
.filters-scrim { display: none; }

.quick { display: grid; gap: 6px; margin-bottom: 18px; }
.quick__btn {
  appearance: none; text-align: left; cursor: pointer;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: var(--r-md);
  padding: 8px 11px;
  display: block;
  transition: border-color .14s ease, background .14s ease, box-shadow .14s ease;
}
.quick__btn:hover { border-color: var(--green); }
.quick__label { display: block; font-weight: 600; font-size: 13.5px; }
.quick__sub { display: block; font-size: 11.5px; color: var(--ink-3); }
.quick__btn[aria-pressed="true"] {
  background: var(--forest); border-color: var(--forest);
  box-shadow: var(--shadow-lo);
}
.quick__btn[aria-pressed="true"] .quick__label { color: #F4F0E4; }
.quick__btn[aria-pressed="true"] .quick__sub { color: var(--ochre-lt); }

.field { margin-bottom: 18px; }
.field__label, .fgroup__title {
  display: block;
  font-family: var(--display);
  font-size: 15px; font-weight: 600; letter-spacing: -0.005em;
  margin-bottom: 7px;
  color: var(--forest);
}

.input {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: var(--r-md);
  padding: 7px 10px;
  font-size: 13px;
}
.input:focus { border-color: var(--green); }
select.input { cursor: pointer; }

.fgroup { margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line-soft); }
.fgroup:last-of-type { border-bottom: 0; }

.checks { display: grid; gap: 1px; }
.check {
  display: grid; grid-template-columns: 16px 1fr auto; align-items: center;
  gap: 8px; cursor: pointer; padding: 3px 4px; border-radius: var(--r-sm);
  font-size: 13px;
}
.check:hover { background: rgba(255, 255, 255, 0.6); }
.check input { margin: 0; accent-color: var(--forest-2); width: 15px; height: 15px; cursor: pointer; }
.check__count {
  font-variant-numeric: tabular-nums;
  font-size: 11.5px; color: var(--ink-3);
}
.check--zero { color: var(--ink-muted); }
.check--zero .check__count { color: var(--ink-muted); }
.check--inline { grid-template-columns: 16px 1fr; font-size: 12.5px; }

.check__swatch {
  display: inline-flex; align-items: center; gap: 7px; min-width: 0;
}
.check__dot { flex: 0 0 auto; }

.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip {
  appearance: none; cursor: pointer;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  display: inline-flex; align-items: center; gap: 5px;
  transition: background .13s ease, border-color .13s ease, color .13s ease;
}
.chip:hover { border-color: var(--green); }
.chip__n { font-variant-numeric: tabular-nums; color: var(--ink-3); font-size: 11px; }
.chip[aria-pressed="true"] {
  background: var(--forest); border-color: var(--forest); color: #F2EEE2;
}
.chip[aria-pressed="true"] .chip__n { color: var(--ochre-lt); }
.chip--zero { color: var(--ink-muted); }
.chip--zero .chip__n { color: var(--ink-muted); }
.chip[aria-pressed="true"].chip--zero { color: #F2EEE2; }
.chips__more {
  background: transparent; border: 0; color: var(--forest-2);
  font-size: 12px; cursor: pointer; text-decoration: underline; padding: 3px 2px;
}

.yearrow { display: flex; align-items: center; gap: 7px; margin-top: 8px; }
.yearrow__end {
  font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}
.range { flex: 1; accent-color: var(--ochre); }
.yearrow__out {
  font-family: var(--display); font-size: 18px; font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--forest); min-width: 2.6em;
}

.filters__foot { margin-top: 20px; }
.btn--reset {
  width: 100%; background: var(--paper); border-color: var(--line);
  font-weight: 500;
}
.btn--reset:hover { background: var(--sand); border-color: var(--ochre); }
.builtnote { margin-top: 10px; font-size: 12.5px; color: var(--ink-3); line-height: 1.45; }

/* ================================================================= stage */
.stage { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.statsbar {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 9px 18px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.statsbar__total { display: flex; align-items: baseline; gap: 7px; }
.statsbar__num {
  font-family: var(--display); font-size: 30px; font-weight: 600; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--forest);
}
.statsbar__cap { font-size: 12.5px; color: var(--ink-2); }

.statsbar__list { display: flex; gap: 4px; flex-wrap: wrap; }
.statsbar__list li {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  background: var(--paper-2);
  border: 1px solid var(--line-soft);
  font-size: 12px;
}
.statsbar__list .n { font-weight: 600; font-variant-numeric: tabular-nums; }
.statsbar__list li[data-empty="1"] { color: var(--ink-muted); background: var(--paper); }
.statsbar__note {
  margin: 0 0 0 auto; font-size: 12px; color: var(--ink-3); font-style: italic;
}
/* Only ever shown on narrow screens; see the responsive block at the foot. */
.statsbar__toggle { display: none; }

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

/* The mask that greys out the neighbours only covers a bounding box; painting
   the pane the same colour means no seam where the mask stops. */
.mapwrap { position: relative; flex: 1 1 auto; min-width: 0; background: #E8EADE; }
#map { position: absolute; inset: 0; background: #E9ECE2; }

.feedwrap {
  width: var(--feed-w); flex: 0 0 var(--feed-w);
  border-left: 1px solid var(--line);
  background: var(--paper);
  display: flex; flex-direction: column; min-height: 0;
}

/* view modes */
.stage[data-view="map"] .feedwrap { display: none; }
.stage[data-view="feed"] .mapwrap { display: none; }
.stage[data-view="feed"] .feedwrap { width: auto; flex: 1 1 auto; border-left: 0; }

/* ================================================================== feed */
.feedhead {
  padding: 10px 14px 9px;
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
}
.feedtoggle { display: inline-flex; gap: 2px; background: var(--paper-3); border-radius: var(--r-md); padding: 3px; }
.feedtoggle__btn {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  padding: 4px 11px; border-radius: 4px; font-size: 12.5px; color: var(--ink-2);
}
.feedtoggle__btn[aria-pressed="true"] { background: var(--paper); color: var(--forest); font-weight: 600; box-shadow: var(--shadow-lo); }
.feedhead__hint { margin: 7px 0 0; font-size: 12.5px; color: var(--ink-3); }
.feedhead__row { display: flex; align-items: center; gap: 8px; margin-top: 7px; flex-wrap: wrap; }

.feed { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 6px 0 30px; }
/* Feed-only view is as wide as the window; without a cap the summary line runs
   to 180 characters and the editorial voice collapses into a wall. */
.stage[data-view="feed"] .feed__inner { max-width: 860px; margin: 0 auto; }

.card {
  position: relative;
  padding: 12px 15px 13px 18px;
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
  transition: background .12s ease;
}
.card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--st, var(--st-unknown));
}
.card:hover { background: var(--paper-2); }
.card.is-selected { background: #F0EEDF; }
.card.is-selected::before { width: 6px; }

.card__top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 5px; }
.card__name {
  font-family: var(--display); font-size: 17px; font-weight: 600;
  line-height: 1.25; letter-spacing: -0.01em; margin: 0 0 4px;
}
.card__name button {
  appearance: none; background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: var(--forest); text-align: left; cursor: pointer;
}
.card__name button:hover { color: var(--clay); }
.card__meta { font-size: 12px; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 3px 9px; margin-bottom: 5px; max-width: 88ch; }
.card__meta span { display: inline-flex; align-items: center; gap: 4px; }
/* A visible rule between fields, so actors, places and dates do not read as one
   continuous run of words. */
.card__meta > span + span { border-left: 1px solid var(--line); padding-left: 9px; }
.card__sum { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; max-width: 68ch; }
/* Why it stopped, on the card itself: the most useful line on an ended or
   stalled entry, and it used to be one click away. */
.card__why {
  font-size: 12.5px; line-height: 1.5; margin: 0 0 4px;
  color: var(--ink); max-width: 68ch;
  border-left: 3px solid var(--st, var(--st-unknown));
  padding-left: 9px;
}
.card__why b { color: var(--st, var(--ink)); font-weight: 600; }
.card__dates { font-variant-numeric: tabular-nums; }

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  border-radius: 3px;
  padding: 1px 7px 2px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  color: #fff; background: var(--st-unknown);
  white-space: nowrap;
}
.badge--sm { font-size: 10.5px; padding: 0 6px 1px; }
.badge[data-status="active"] { background: var(--st-active); }
.badge[data-status="planned"] { background: var(--st-planned); }
.badge[data-status="completed"] { background: var(--st-completed); }
.badge[data-status="ended"] { background: var(--st-ended); }
.badge[data-status="stalled"] { background: var(--st-stalled); }
.badge[data-status="unknown"] { background: var(--st-unknown); color: #262D28; }
/* Ochre and light grey are too pale to carry white text at badge size. */
.badge[data-status="stalled"] { color: #2A2113; }

.catlabel {
  font-size: 11px; color: var(--ink-3);
  border: 1px solid var(--line); border-radius: 3px; padding: 0 6px 1px;
  background: var(--paper);
}

.monthhead {
  position: sticky; top: 0; z-index: 3;
  background: var(--paper-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 5px 15px;
  font-family: var(--display); font-size: 13.5px; font-weight: 600;
  color: var(--forest);
  letter-spacing: 0.01em;
}
.monthhead:first-child { border-top: 0; }

.evrow {
  display: grid; grid-template-columns: 26px 1fr; gap: 12px;
  padding: 9px 15px 10px 18px;
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer; position: relative;
  transition: background .12s ease;
}
.evrow::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--st, var(--st-unknown));
}
.evrow:hover { background: var(--paper-2); }
.evrow.is-selected { background: #F0EEDF; }
.evrow__date {
  font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--ink-3);
  padding-top: 1px; text-align: right; font-weight: 600;
}
.evrow__text { font-size: 13px; line-height: 1.45; max-width: 76ch; }
.evrow__entry {
  display: block; margin-top: 4px; font-size: 11.5px; color: var(--ink-3);
}
.evrow__entry b { font-weight: 600; color: var(--ink-2); }

.empty { padding: 40px 24px; text-align: center; color: var(--ink-3); }
.empty h3 { font-family: var(--display); font-size: 18px; color: var(--forest); margin-bottom: 6px; }
.empty .btn { margin-top: 12px; }

/* ================================================================ legend */
/* Top right: the country is a horizontal band across the middle of the pane,
   so the corners above it are empty. The bottom left, where this used to sit,
   covers the Greater Banjul cluster and collides with Leaflet's attribution. */
/* The panel itself swallows clicks only where it actually has content: with
   the body folded away, the map underneath — and the cluster sitting there —
   stays clickable right up to the edge of the header. */
.legend { pointer-events: none; }
.legend > * { pointer-events: auto; }
.legend {
  position: absolute; right: 12px; top: 12px; z-index: 620;
  width: 240px; max-height: calc(100% - 24px);
  display: flex; flex-direction: column;
  background: rgba(244, 241, 232, 0.95);
  backdrop-filter: blur(3px);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.legend__head {
  width: 100%; appearance: none; border: 0; cursor: pointer;
  background: var(--paper-2);
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px;
  font-family: var(--display); font-size: 14px; font-weight: 600; color: var(--forest);
  border-bottom: 1px solid var(--line-soft);
}
.legend__chev {
  width: 8px; height: 8px; border-right: 1.5px solid var(--ink-2); border-bottom: 1.5px solid var(--ink-2);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .18s ease;
}
.legend__head[aria-expanded="false"] .legend__chev { transform: rotate(-135deg) translate(-1px, -1px); }
.legend__body { padding: 8px 10px 9px; overflow-y: auto; }
.legend__h {
  font-family: var(--display); font-size: 12.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ochre); margin: 0 0 5px;
}
.legend__h + .legend__list { margin-bottom: 7px; }
/* The symbol key folds away: open, it is taller than the country is deep, and
   the default map view has to stay clear of it. */
.legend__more {
  appearance: none; border: 0; background: none; cursor: pointer; padding: 4px 0 6px;
  display: flex; align-items: center; gap: 6px; width: 100%;
  font-family: var(--display); font-size: 12.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--ochre);
}
.legend__more .legend__chev { border-color: var(--ochre); }
.legend__more[aria-expanded="false"] .legend__chev { transform: rotate(-45deg) translate(-1px, -1px); }
.legend__cats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; margin-bottom: 8px;
}
.legend__cats li { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--ink-2); line-height: 1.35; }
.legend__cats .check__dot { flex: 0 0 auto; }
.legend__head[aria-expanded="false"] + .legend__body { display: none; }
.legend__list { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; margin-bottom: 7px; }
.legend__list li { display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
.legend__hint { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; margin-bottom: 7px; }
.legend__tiles { padding-left: 0; }
/* Not an error — the hosted copy is expected to run without tiles. */
.legend__offline { font-size: 12.5px; color: var(--ink-2); margin: 5px 0 0; }
.legend__tiles.is-off { color: var(--ink-muted); }

/* Shown over the map when a filter leaves nothing to draw. */
.mapnote {
  position: absolute; left: 50%; top: 16px; transform: translateX(-50%);
  z-index: 610; margin: 0;
  background: rgba(244, 241, 232, 0.95); border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 14px; font-size: 12px; color: var(--ink-2);
  box-shadow: var(--shadow-lo); max-width: calc(100% - 24px); text-align: center;
}

/* =============================================================== markers */
.gm-marker { background: none; border: 0; }
.gm-marker svg { display: block; overflow: visible; }
.gm-marker.is-selected svg .halo { opacity: 1; }
.leaflet-marker-icon.gm-marker { transition: transform .1s ease; }

/* A circle carrying a "stopped" tag is the one thing on the map that must not
   be half-covered by a neighbouring circle, so it is lifted above them.
   Leaflet writes z-index inline per marker, hence !important. */
.leaflet-marker-icon.gm-cluster.has-stopped { z-index: 660 !important; }
.gm-cluster { background: none; border: 0; }
.gm-cluster svg { display: block; }
.gm-cluster text {
  font-family: var(--sans); font-weight: 700; fill: var(--forest);
  font-variant-numeric: tabular-nums;
}

.gm-label { background: none; border: 0; pointer-events: none; }
/* A label that would print under a cluster circle is dropped: the number in the
   circle is the more important of the two. */
.gm-label.is-covered { display: none; }
/* First try moving a colliding name clear of the circle; only a name that is
   still buried after the nudge is dropped, so the country keeps its labels. */
.gm-label.is-nudged .gm-label__town { transform: translate(-4px, 26px); }
.gm-label.is-nudged .gm-label__town--above { transform: translate(-4px, -230%); }
.gm-label.is-nudged .gm-label__town--left { transform: translate(calc(-100% + 4px), 26px); }
.gm-label.is-nudged .gm-label__adm1 { transform: translate(-50%, 34px); }
.gm-label__adm1 {
  font-family: var(--display);
  font-size: 12px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
  color: #465236;
  text-shadow: 0 1px 0 rgba(248, 246, 238, 0.9), 0 0 4px rgba(248, 246, 238, 0.9);
  white-space: nowrap; transform: translate(-50%, -50%);
  opacity: 0.9;
}
.gm-label__town {
  display: flex; align-items: center; gap: 4px;
  font-size: 11px; color: #33403A; white-space: nowrap;
  text-shadow: 0 1px 0 rgba(248, 246, 238, 0.95), 0 0 4px rgba(248, 246, 238, 0.95);
  transform: translate(-4px, -50%);
}
.gm-label__town::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: #4A574F; flex: 0 0 auto;
}
.gm-label__town--big { font-weight: 700; font-size: 11.5px; }
/* The vector base has to carry place names on its own, because the hosted copy
   never gets street tiles. So the big towns are drawn from the default view
   down; only the smaller ones wait for a closer zoom. */
.leaflet-container.z-low .gm-label__town { display: none; }
.leaflet-container.z-low .gm-label__town--big { display: flex; font-size: 11px; }
.leaflet-container.z-tiny .gm-label__town--big { font-size: 10.5px; }
.leaflet-container.z-tiny .gm-label__town--big::before { width: 3px; height: 3px; }
/* Street tiles only start printing town names of their own once you are well
   zoomed in; that is the only place the two sets collide, so that is the only
   place ours step aside. */
.leaflet-container.tiles-live.z-high .gm-label__town { display: none; }
/* Greater Banjul is too small to hold an area name until you are zoomed in. */
.gm-label__adm1--small { display: none; }
.leaflet-container.z-high .gm-label__adm1--small { display: block; }
/* Zoomed right out the country is a sliver; area names would only pile up. */
.leaflet-container.z-tiny .gm-label__adm1 { display: none; }
/* Placement variants keep close pairs (Soma and Mansakonko) apart. */
.gm-label__town--above { transform: translate(-4px, -140%); }
.gm-label__town--below { transform: translate(-4px, 40%); }
.gm-label__town--left { flex-direction: row-reverse; transform: translate(calc(-100% + 4px), -50%); }
.leaflet-container.z-high .gm-label__adm1 { opacity: 0.45; }

/* Leaflet chrome, re-skinned to match the page */
.leaflet-container { font-family: var(--sans); }
.leaflet-bar a {
  background: var(--paper); color: var(--forest); border-bottom-color: var(--line);
}
.leaflet-bar a:hover { background: var(--paper-2); color: var(--clay); }
.leaflet-control-attribution {
  background: rgba(244, 241, 232, 0.88) !important;
  color: var(--ink-2); font-size: 12px;
}
.leaflet-control-attribution a { color: var(--ink-2); }

.leaflet-popup-content-wrapper {
  background: var(--paper); border-radius: var(--r-md);
  box-shadow: var(--shadow-md); border: 1px solid var(--line);
}
.leaflet-popup-tip { background: var(--paper); border: 1px solid var(--line); }
.leaflet-popup-content { margin: 11px 13px; font-size: 13px; width: 232px !important; }
.pop__name { font-family: var(--display); font-size: 16px; font-weight: 600; line-height: 1.25; margin: 5px 0 6px; }
.pop__meta { font-size: 11.5px; color: var(--ink-2); margin-bottom: 7px; }
/* A placement note is information, not a warning; clay red is reserved for
   things that have stopped. */
.pop__note { font-size: 11.5px; color: var(--ink-2); margin-bottom: 7px; }
.pop__note--status { color: var(--clay); }
.pop__btn {
  appearance: none; cursor: pointer; width: 100%;
  background: var(--forest); color: #F2EEE2; border: 0;
  padding: 5px 10px; border-radius: var(--r-sm); font-size: 12.5px; font-weight: 600;
}
.pop__btn:hover { background: var(--forest-2); }

/* ================================================================ drawer */
.drawer-scrim {
  position: fixed; inset: 0; z-index: 1400;
  background: rgba(15, 40, 31, 0.22);
  animation: fade .18s ease;
}
@keyframes fade { from { opacity: 0; } }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 1500;
  width: var(--drawer-w); max-width: 100%;
  background: var(--paper);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow-hi);
  display: flex; flex-direction: column;
  animation: slidein .24s cubic-bezier(.2, .7, .3, 1);
}
@keyframes slidein { from { transform: translateX(26px); opacity: 0; } }

/* A slim bar that stays put: it keeps saying which entry and which state you
   are reading once the band has scrolled away, and it owns the close button so
   nothing floats on top of the text. */
.drawer__bar {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px 8px 16px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
}
.drawer__title {
  font-family: var(--display); font-size: 14px; font-weight: 600;
  color: var(--forest); flex: 1 1 auto; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.drawer__close {
  flex: 0 0 auto;
  appearance: none; border: 1px solid var(--line); background: var(--paper);
  width: 32px; height: 32px; border-radius: 50%;
  font-size: 21px; line-height: 1; cursor: pointer; color: var(--ink-2);
}
.drawer__close:hover { background: var(--sand); color: var(--clay); }
.drawer__scroll { overflow-y: auto; overscroll-behavior: contain; flex: 1 1 auto; min-height: 0; }

.dt__band {
  padding: 14px 20px;
  color: #fff; background: var(--st-unknown);
}
.dt__band[data-status="unknown"] { color: #23291F; }
.dt__band[data-status="unknown"] .dt__statusnote { opacity: 1; }
.dt__status {
  font-family: var(--display);
  font-size: 22px; font-weight: 700; letter-spacing: 0.04em; line-height: 1;
  text-transform: uppercase;
}
.dt__statusnote { margin: 7px 0 0; font-size: 12.5px; line-height: 1.5; opacity: 0.95; }

.dt__head { padding: 16px 20px 14px; border-bottom: 1px solid var(--line); }
.dt__name {
  font-family: var(--display); font-size: 25px; font-weight: 600;
  line-height: 1.18; letter-spacing: -0.015em; color: var(--forest);
  margin-bottom: 8px;
}
.dt__tagline { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* The kind of effort is a fixed taxonomy; sectors are free text. Different
   things, so they are drawn differently. */
.catlabel--cat {
  background: var(--forest); border-color: var(--forest); color: #F1EDE1;
  font-weight: 600;
}
.dt__sectors { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; margin-top: 7px; }
.dt__sectors__lbl { font-size: 11px; color: var(--ink-3); }
.sector {
  font-size: 11px; color: var(--ink-2); background: var(--paper-2);
  border: 1px solid var(--line-soft); border-radius: 999px; padding: 1px 8px 2px;
}

.dt__sec { padding: 14px 20px; border-bottom: 1px solid var(--line-soft); }
.dt__sec:last-child { border-bottom: 0; }
.dt__h {
  font-family: var(--display); font-size: 15px; font-weight: 600;
  color: var(--ochre); margin-bottom: 9px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--ochre-rule);
  display: inline-block;
}
.dt__body { font-size: 13.5px; line-height: 1.62; color: var(--ink); max-width: 62ch; }
.dt__body p { margin-bottom: 0.75em; }

.dl { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; font-size: 13px; }
.dl dt { color: var(--ink-3); font-size: 12px; padding-top: 1px; }
.dl dd { margin: 0; }

.actorlist li, .loclist li { padding: 4px 0; border-bottom: 1px dotted var(--line-soft); font-size: 13px; }
.actorlist li:last-child, .loclist li:last-child { border-bottom: 0; }
.actor__type { color: var(--ink-3); font-size: 11.5px; }
.loclist button {
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--forest-2); text-align: left;
  text-decoration: underline; text-decoration-color: var(--river);
}
.loclist button:hover { color: var(--clay); }
.loc__meta { color: var(--ink-3); font-size: 11.5px; }

.tl { position: relative; padding-left: 17px; }
.tl::before {
  content: ""; position: absolute; left: 4px; top: 5px; bottom: 5px;
  width: 1px; background: var(--line);
}
.tl li { position: relative; padding: 0 0 12px; font-size: 13px; line-height: 1.5; }
.tl li:last-child { padding-bottom: 0; }
.tl li::before {
  content: ""; position: absolute; left: -16px; top: 6px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--green);
}
.tl li:last-child::before { background: var(--green); }
.tl__date {
  display: block; font-variant-numeric: tabular-nums;
  font-size: 11.5px; color: var(--ink-3); letter-spacing: 0.02em;
}

.srclist li { padding: 7px 0; border-bottom: 1px dotted var(--line-soft); font-size: 13px; }
.srclist li:last-child { border-bottom: 0; }
.src__meta { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }

.taglist { display: flex; flex-wrap: wrap; gap: 5px; }
.taglist li {
  font-size: 11.5px; background: var(--paper-2); border: 1px solid var(--line-soft);
  border-radius: 999px; padding: 2px 9px; color: var(--ink-2);
}

.amount {
  font-family: var(--display); font-size: 21px; font-weight: 600; color: var(--forest);
  font-variant-numeric: tabular-nums;
}

/* ================================================================= modal */
.modal {
  position: fixed; inset: 0; z-index: 1700;
  background: rgba(15, 40, 31, 0.34);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: fade .16s ease;
}
.modal__card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 4px solid var(--ochre);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  max-width: 620px; width: 100%; max-height: 84vh; overflow-y: auto;
  overscroll-behavior: contain; scrollbar-gutter: stable;
  padding: 22px 26px 32px;
  /* Scroll shadows: the last paragraph used to sit flush against the bottom
     edge and read as a rendering fault rather than as more to come. */
  background-image:
    linear-gradient(rgba(244, 241, 232, 0), rgba(244, 241, 232, 0.98) 78%),
    radial-gradient(farthest-side at 50% 100%, rgba(28, 39, 33, 0.16), rgba(28, 39, 33, 0));
  background-position: bottom, bottom;
  background-size: 100% 26px, 100% 12px;
  background-repeat: no-repeat;
  background-attachment: local, scroll;
  font-size: 13.5px; line-height: 1.62;
}
.modal__title {
  font-family: var(--display); font-size: 27px; font-weight: 600;
  color: var(--forest); margin-bottom: 12px; letter-spacing: -0.015em;
}
.modal__card h3 {
  font-family: var(--display); font-size: 16px; color: var(--forest);
  margin: 18px 0 7px;
}
.modal__close {
  position: absolute; top: 12px; right: 14px;
  appearance: none; border: 1px solid var(--line); background: var(--paper);
  width: 30px; height: 30px; border-radius: 50%; font-size: 21px; line-height: 1;
  cursor: pointer; color: var(--ink-2);
}
.modal__close:hover { background: var(--sand); color: var(--clay); }
.modal__foot { margin-top: 18px; font-size: 11.5px; color: var(--ink-3); }

.catdefs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 16px; margin: 10px 0 4px; }
.catdefs li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }

.statedefs { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; align-items: start; }
.statedefs dt { padding-top: 1px; }
.statedefs dd { margin: 0; font-size: 13px; }


/* ============================================================= map tools */
/* Framing and "what has stopped" belong on the map itself: on a phone the
   filter column is behind a button, and the map is the whole screen. */
.maptools { pointer-events: none; }
.maptools > * { pointer-events: auto; }
.maptools {
  position: absolute; left: 12px; top: 84px; z-index: 615;
  display: flex; flex-direction: column; gap: 5px; align-items: flex-start;
  max-width: calc(100% - 24px);
}
.maptool {
  appearance: none; cursor: pointer;
  border: 1px solid var(--line);
  background: rgba(244, 241, 232, 0.95);
  color: var(--ink);
  border-radius: var(--r-md);
  padding: 5px 10px; font-size: 12px;
  box-shadow: var(--shadow-lo); white-space: nowrap;
  transition: background .13s ease, border-color .13s ease;
}
.maptool:hover { background: var(--paper-2); border-color: var(--green); }
/* Which frame you are looking at, so "Whole country" and "Greater Banjul" read
   as a pair of states rather than two identical buttons. */
.maptool[aria-pressed="true"]:not(.maptool--stop) {
  background: var(--sand); border-color: var(--green); font-weight: 600;
}
.maptool--stop[aria-pressed="true"] {
  background: var(--st-ended); border-color: var(--st-ended);
  color: #FDF1EC; font-weight: 600;
}
.maptool .lbl-short { display: none; }

/* ======================================================= nationwide tray */
/* Efforts that cover the whole country have no honest coordinate. Scattering
   placeholder pins around the middle put them in Senegal and in the sea, and
   piled them into a cluster that read as a hotspot. They live here instead. */
.ntray { pointer-events: none; }
.ntray > * { pointer-events: auto; }
.ntray {
  position: absolute; left: 12px; bottom: 26px; z-index: 618;
  width: 276px; max-width: calc(100% - 24px); max-height: 54%;
  display: flex; flex-direction: column;
  background: rgba(244, 241, 232, 0.96);
  backdrop-filter: blur(3px);
  border: 1px solid var(--line); border-left: 4px solid var(--forest);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.ntray__head {
  appearance: none; border: 0; cursor: pointer; width: 100%;
  background: var(--paper-2); text-align: left;
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  font-family: var(--display); font-size: 13.5px; font-weight: 600; color: var(--forest);
  border-bottom: 1px solid var(--line-soft);
}
.ntray__title { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ntray__stopped {
  font-size: 10.5px; font-weight: 700; font-family: var(--sans); white-space: nowrap;
  background: var(--st-ended); color: #FFF3EE; border-radius: 999px; padding: 1px 7px;
}
.ntray__n {
  font-variant-numeric: tabular-nums; font-weight: 700; font-size: 12px;
  background: var(--forest); color: #F2EEE2; border-radius: 999px; padding: 1px 9px;
  font-family: var(--sans);
}
.ntray__body { padding: 7px 10px 9px; overflow-y: auto; }
.ntray__note { font-size: 12.5px; color: var(--ink-2); margin-bottom: 5px; line-height: 1.4; }
.ntray__list li + li { border-top: 1px dotted var(--line-soft); }
.ntray__list button {
  appearance: none; background: none; border: 0; cursor: pointer; font: inherit;
  text-align: left; width: 100%; padding: 5px 0;
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--ink); line-height: 1.35;
}
.ntray__list button:hover { color: var(--clay); }
.ntray__list .ntray__nm { flex: 1 1 auto; min-width: 0; }
.ntray__more {
  background: none; border: 0; cursor: pointer; color: var(--forest-2);
  font-size: 12px; text-decoration: underline; padding: 6px 0 2px;
}

/* ================================================================= toast */
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 1900;
  background: var(--forest); color: #F3EFE3;
  padding: 9px 17px; border-radius: 999px; font-size: 13px;
  box-shadow: var(--shadow-md);
  animation: fade .18s ease;
}

/* ======================================================== feed additions */
.feedsort { display: inline-flex; align-items: center; gap: 6px; }
.feedsort__lbl { font-size: 11.5px; color: var(--ink-3); }
.input--sm { width: auto; padding: 4px 6px; font-size: 12px; }
.btn--sm { padding: 4px 9px; font-size: 12px; }
/* Paging beats one 97,000 px scroll: the reader gets a page at a time and is
   told how much is left. */
.showmore {
  display: block; width: calc(100% - 30px); margin: 14px 15px 8px;
  padding: 10px 12px; text-align: center; font-weight: 600;
}
.feedend {
  padding: 12px 15px 6px; font-size: 11.5px; color: var(--ink-3); text-align: center;
}
.card__conf { color: var(--ink-3); }
/* The card says which date the current sort is on, so the order makes sense. */
.card__conf b { font-weight: 600; color: var(--ink-2); }

/* Month groups in the event stream fold away. */
.monthhead {
  width: 100%; appearance: none; border-left: 0; border-right: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  cursor: pointer; text-align: left;
}
/* Holds one month's rows so the heading can fold them away. */
.monthgroup { display: block; }
.monthhead__n { font-size: 12.5px; color: var(--ink-3); font-weight: 400; font-family: var(--sans); }
.monthhead .legend__chev { border-color: var(--ink-2); }
.monthhead[aria-expanded="false"] .legend__chev { transform: rotate(-45deg) translate(-1px, -1px); }

/* ====================================================== drawer additions */
.drawer__nav { display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto; }
.drawer__navbtn {
  appearance: none; border: 1px solid var(--line); background: var(--paper);
  width: 28px; height: 28px; border-radius: var(--r-sm);
  font-size: 17px; line-height: 1; cursor: pointer; color: var(--ink-2);
}
.drawer__navbtn:hover:not([disabled]) { background: var(--sand); color: var(--clay); }
.drawer__navbtn[disabled] { opacity: 0.38; cursor: default; }
.drawer__pos {
  font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums;
  min-width: 4.4em; text-align: center;
}
.drawer__link { flex: 0 0 auto; white-space: nowrap; }
/* A link can be shared with filters that hide the very entry it points at. */
.dt__hidden {
  margin: 0; padding: 9px 20px;
  background: #F7E9C6; border-bottom: 1px solid var(--line);
  font-size: 12.5px; color: #4E3A0B; line-height: 1.45;
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.dt__hidden .btn { padding: 3px 9px; font-size: 12px; }

.fgroup__hint { margin: 7px 0 0; font-size: 12.5px; color: var(--ink-3); line-height: 1.45; }

.mapnote--zoom { top: auto; bottom: 12px; max-width: 260px; }

/* ============================================================ responsive */
@media (min-width: 1100px) {
  /* Split view: the drawer stops at the feed column rather than covering it, so
     the list you are working through stays readable and clickable while a
     detail is open. Previous / next in the drawer bar walks the same order. */
  body[data-view="split"] .drawer { right: var(--feed-w); top: var(--topbar-h); }
}

@media (max-width: 1240px) {
  :root { --feed-w: 320px; --filters-w: 250px; --drawer-w: 420px; }
}

@media (max-width: 1099px) {
  .filters-toggle { display: inline-block; }
  .filters {
    position: fixed; top: var(--topbar-h); left: 0; bottom: 0; z-index: 1200;
    width: min(88vw, 340px); flex-basis: auto;
    box-shadow: var(--shadow-md);
    transform: translateX(-104%);
    transition: transform .24s cubic-bezier(.2, .7, .3, 1);
    visibility: hidden;
  }
  .filters.is-open { transform: none; visibility: visible; }

  .filters-scrim {
    display: block; position: fixed; inset: var(--topbar-h) 0 0 0; z-index: 1150;
    background: rgba(15, 40, 31, 0.3);
    animation: fade .18s ease;
  }
  .filters__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 10px 10px 16px;
    background: var(--paper-3); border-bottom: 1px solid var(--line);
    flex: 0 0 auto;
  }
  .filters__headtitle {
    font-family: var(--display); font-size: 17px; font-weight: 600; color: var(--forest);
  }
  .filters__close {
    appearance: none; border: 1px solid var(--line); background: var(--paper);
    width: 44px; height: 44px; border-radius: 50%;
    font-size: 21px; line-height: 1; cursor: pointer; color: var(--ink-2);
  }
  .filters__close:hover { background: var(--sand); color: var(--clay); }

  .filters__bar {
    display: flex; gap: 8px; flex: 0 0 auto;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--paper-3); border-top: 1px solid var(--line);
  }
  .filters__barreset { width: auto; flex: 0 0 auto; padding: 10px 16px; }
  .btn--go {
    flex: 1 1 auto; background: var(--forest); border-color: var(--forest);
    color: #F3EFE3; font-weight: 600; padding: 10px 16px;
  }
  .btn--go:hover { background: var(--forest-2); }
  /* The reset at the foot of the long scroll is redundant once the bar has one. */
  .filters__foot .btn--reset { display: none; }

  /* Touch targets: this is the primary control on a phone. */
  .check { min-height: 44px; padding: 6px 4px; font-size: 14px; }
  .check input { width: 19px; height: 19px; }
  .check--inline { min-height: 40px; }
  .chip { padding: 9px 13px; font-size: 13px; min-height: 40px; }
  .chips { gap: 7px; }
  .chips__more { padding: 10px 2px; min-height: 40px; }
  .input { padding: 10px 10px; font-size: 14px; }
  .quick__btn { padding: 11px 12px; }
  .brand__place { display: none; }
  .brand__name { font-size: 22px; }
  .stage[data-view="split"] .feedwrap { display: none; }
  .drawer { width: 100%; animation: slideup .24s cubic-bezier(.2, .7, .3, 1); }
  @keyframes slideup { from { transform: translateY(24px); opacity: 0; } }

  /* "Both" needs two panes side by side, which a narrow screen does not have. */
  .viewtoggle__btn[data-view="split"] { display: none; }

  /* The strip above the map used to run to three rows of pills and push the map
     off the bottom of a phone. It now folds to one line that still names what
     has stopped, and opens on a tap. */
  .statsbar { flex-wrap: wrap; gap: 6px 12px; padding: 6px 12px; }
  .statsbar__total { flex: 0 0 auto; }
  .statsbar__num { font-size: 22px; }
  .statsbar__toggle {
    display: inline-flex; align-items: center; justify-content: space-between; gap: 8px;
    appearance: none; cursor: pointer;
    border: 1px solid var(--line); background: var(--paper-2);
    border-radius: 999px; padding: 5px 12px;
    font-size: 12px; color: var(--ink-2);
    min-height: 34px; flex: 1 1 auto; max-width: 100%; min-width: 0;
  }
  .statsbar__sum { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .statsbar__toggle[aria-expanded="true"] .legend__chev {
    transform: rotate(-135deg) translate(-1px, -1px);
  }
  .statsbar:not(.is-open) .statsbar__list { display: none; }
  .statsbar:not(.is-open) .statsbar__note { display: none; }
  .statsbar__list { flex-basis: 100%; flex-wrap: wrap; gap: 4px; }
  .statsbar__list li { white-space: nowrap; }
  .statsbar__note { display: none; margin-left: 0; flex-basis: 100%; }
  .statsbar__note.is-filtered { display: block; }
}

@media (max-width: 620px) {
  :root { --topbar-h: 54px; }
  .topbar { padding: 0 10px; gap: 6px; }
  .topbar__tools { gap: 5px; }
  .brand { overflow: hidden; }
  .brand__name { font-size: 17.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .viewtoggle { padding: 2px; }
  .viewtoggle__btn { padding: 5px 8px; font-size: 12px; min-height: 44px; }
  .btn--ghost { min-height: 44px; padding: 5px 9px; font-size: 12px; display: inline-flex; align-items: center; }
  #aboutBtn { padding: 6px 13px; }
  #aboutBtn .lbl-long, #shareBtn .lbl-long { display: none; }
  #aboutBtn .lbl-short, #shareBtn .lbl-short { display: inline; }
  #shareBtn { padding: 6px 10px; font-size: 12px; }
  .filters-toggle { padding: 6px 10px; font-size: 12px; }
  .statsbar { gap: 8px; padding: 6px 11px; }
  .statsbar__num { font-size: 21px; }
  .statsbar__cap { font-size: 11.5px; }

  /* Leaflet's own controls are 30 px; a thumb needs more. */
  .leaflet-bar a, .leaflet-touch .leaflet-bar a {
    width: 44px; height: 44px; line-height: 44px; font-size: 20px;
  }
  .maptools { top: 108px; left: 10px; }
  .maptool { padding: 9px 11px; min-height: 44px; }
  .maptool .lbl-long { display: none; }
  .maptool .lbl-short { display: inline; }

  .ntray {
    left: auto; right: 8px; top: 10px; bottom: auto;
    width: auto; max-width: 66%; max-height: 62%;
  }
  .ntray__head { gap: 6px; }
  .ntray__stopped { font-size: 10.5px; padding: 1px 6px; }
  .ntray__head { padding: 9px 11px; min-height: 40px; }

  /* Full width at the foot of the map, but lifted clear of Leaflet's
     attribution, which wraps to two lines at this width; the top of the map is
     taken by the zoom control and the map tools. */
  .legend {
    left: 8px; right: 8px; bottom: 38px; top: auto; width: auto;
    max-height: calc(100% - 70px);
  }
  .legend__head { min-height: 42px; }
  .legend__more { min-height: 40px; }
  /* The legend sits at the foot of the map here, so the high-zoom note has to
     ride above it rather than underneath. */
  .mapnote--zoom { bottom: 90px; }
  .feedwrap { --feed-w: auto; }
  .dt__name { font-size: 22px; }
  .modal__card { padding: 20px 18px 22px; }
  .modal__close { width: 40px; height: 40px; }
  .drawer__close { width: 40px; height: 40px; }
  .drawer__navbtn { width: 36px; height: 36px; }
  .drawer__pos { display: none; }
  .drawer__link { font-size: 11px; padding: 4px 7px; }
  .feedtoggle__btn { min-height: 44px; }
  .btn--sm { min-height: 44px; }
  .input--sm { min-height: 44px; }
  .legend__more { min-height: 44px; }
  .showmore { min-height: 46px; }
}

/* Small phones: the masthead was being truncated by the tool row. Everything
   in the row gives up a few pixels so the site's name survives intact. */
@media (max-width: 440px) {
  .topbar { padding: 0 8px; }
  .topbar__tools { gap: 4px; }
  .brand__name { font-size: 16px; }
  .viewtoggle { padding: 2px; }
  .viewtoggle__btn { padding: 5px 7px; font-size: 11.5px; }
  .btn--ghost { padding: 5px 8px; font-size: 11.5px; }
  .filters-toggle { padding: 6px 8px; font-size: 11.5px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}


/* ==================================================== round-2 additions */

/* Folded, the legend is only its own label: a 240 px panel parked over the map
   put a dead rectangle on top of whatever cluster happened to be under it. */
.legend.is-folded { width: auto; max-width: 200px; }
.legend.is-folded .legend__head { gap: 10px; }

/* The region filter, on the map. Two buttons in one chip: the name re-frames
   the region, the cross clears the filter. */
.maptool--region {
  display: inline-flex; align-items: stretch; padding: 0; overflow: hidden;
  background: var(--sand); border-color: var(--green);
}
.maptool--region button {
  appearance: none; border: 0; background: none; cursor: pointer; color: var(--ink);
  font: inherit; font-size: 12px; padding: 5px 8px 5px 10px;
  min-height: 30px;
}
.maptool--region button:hover { background: rgba(28, 39, 33, 0.07); }
#regionChipZoom { font-weight: 600; }
#regionChipClear {
  padding: 5px 9px; border-left: 1px solid var(--line); font-size: 14px; line-height: 1;
  color: var(--ink-2);
}

/* Feed view on a phone has no map on screen, so a region filter has to say
   where its results are and offer to go there. */
.feedhead__region {
  appearance: none; cursor: pointer; margin-top: 8px;
  display: block; width: 100%; text-align: left;
  border: 1px solid var(--green); border-radius: var(--r-md);
  background: var(--sand); color: var(--forest);
  padding: 8px 12px; font-size: 13px; font-weight: 600; min-height: 40px;
}
.feedhead__region:hover { background: var(--paper-2); }

/* Events feed: the scheduled-items group and the month heading inside it. */
.monthhead--later { background: var(--paper-2); color: var(--ink-2); }
.latermonth {
  margin: 9px 0 2px; padding: 0 15px;
  font-family: var(--display); font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3);
}
.showmore--up { margin-bottom: 6px; }

/* Bookkeeping about the record itself: available, never in the way. */
.dt__notes {
  margin: 4px 20px 22px; padding: 8px 10px;
  border: 1px dashed var(--line); border-radius: var(--r-md);
  background: var(--paper-2);
}
.dt__notes > summary {
  cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--ink-3);
  list-style: none;
}
.dt__notes > summary::-webkit-details-marker { display: none; }
.dt__notes > summary::before { content: '\25B8 '; color: var(--ink-muted); }
.dt__notes[open] > summary::before { content: '\25BE '; }
.dt__noteslist { margin: 7px 0 0; padding-left: 18px; }
.dt__noteslist li {
  font-size: 12.5px; line-height: 1.5; color: var(--ink-2); margin-bottom: 4px;
  list-style: disc;
}

/* A popup carrying twenty lines of note pushed its own title off the screen. */
.pop__note {
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* The nationwide tray is a third of the record; it needs a way in. */
.ntray__tools { display: flex; gap: 6px; margin-bottom: 7px; }
.ntray__tools .input { flex: 1 1 auto; min-width: 0; font-size: 12.5px; padding: 4px 7px; }
.ntray__feed {
  appearance: none; cursor: pointer; flex: 0 0 auto;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper);
  font-size: 12px; color: var(--ochre); font-weight: 600; padding: 4px 8px;
}
.ntray__feed:hover { background: var(--paper-2); border-color: var(--green); }
.ntray__none { font-size: 12.5px; color: var(--ink-3); padding: 4px 2px; }

/* The escape hatch out of the map's marker tab-run. Invisible until focused. */
.skiplink--map {
  position: absolute; left: 12px; top: 12px; z-index: 700;
  background: var(--forest); color: var(--paper);
  padding: 7px 12px; border-radius: var(--r-sm); font-size: 13px;
  text-decoration: none;
  /* Parked out of sight rather than off the top: .mapwrap does not clip, and a
     negative offset printed the link over the statistics strip. */
  opacity: 0; pointer-events: none;
}
.skiplink--map:focus { opacity: 1; pointer-events: auto; color: var(--paper); }

/* Phone: the region chip's two halves are tap targets like every other tool. */
@media (max-width: 780px) {
  /* Side by side, the find box is too narrow to read its own placeholder. */
  .ntray__tools { flex-direction: column; }
  .ntray__tools .input { min-height: 38px; }
  .ntray__feed { min-height: 38px; text-align: left; }
  .maptool--region button { min-height: 44px; padding-left: 12px; padding-right: 10px; }
  #regionChipClear { padding-left: 12px; padding-right: 12px; font-size: 16px; }
  /* Folded, it is a label and a chevron; at 60% of the screen it also took
     taps meant for the markers behind it. */
  .legend.is-folded { max-width: 44%; }
}