:root {
  --bg: #0e0f12; --panel: #15171c; --panel2: #1c1f26; --line: #2a2e37; --text: #e8e8ea;
  --dim: #9aa0aa; --red: #d32f32; --pin: #ff2e2e; --prop: #ffd23d; --fac: #c9a27a;
  --area: #e5383b; --ext: #2ec4b6; --disp: #c77dff;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Arabic", sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 14px/1.45 var(--sans); }
button { font: inherit; color: inherit; }

.gm-top { position: fixed; inset: 0 0 auto 0; height: 56px; z-index: 20; display: flex; align-items: center;
  gap: 16px; padding: 0 16px; background: rgba(14,15,18,.94); border-bottom: 1px solid var(--line); }
.gm-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.gm-brand h1 { font-size: 16px; margin: 0; white-space: nowrap; font-weight: 650; }
.gm-sub { color: var(--dim); font-weight: 400; }
.gm-badge { font: 600 10px var(--mono); letter-spacing: .06em; color: #fff; background: var(--red); padding: 3px 6px; border-radius: 3px; white-space: nowrap; }
.gm-truth { flex: 1; min-width: 0; font: 12px var(--mono); color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-truth b { color: var(--text); font-weight: 600; }
.gm-btn { background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 7px 12px; cursor: pointer; }
.gm-btn:hover { border-color: #444a56; }
.gm-btn.primary { background: var(--red); border-color: var(--red); color: #fff; }

/* The caption-language picker. A real <select> inside the button shell: reachable by keyboard and
   by a screen reader for nothing, and on a phone the native picker is what the device already
   knows how to show. The globe is there because with only the chosen language as its text the
   control reads as one more filter, and the one thing a reader scanning this header cannot tell
   is that it changes the language. */
.gm-caplang { display: inline-flex; align-items: center; gap: 4px; padding: 0 8px 0 10px; }
.gm-caplang[hidden] { display: none; }
.gm-globe { font-size: 13px; line-height: 1; opacity: .85; }
.gm-caplang select { background: transparent; border: 0; color: inherit; font: inherit;
  padding: 7px 2px; cursor: pointer; max-width: 11rem; }
.gm-caplang select:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.gm-caplang option { background: var(--panel2); color: inherit; }
/* the translated caption says so, every time it is shown */
.gm-caplnote { font-size: 11px; opacity: .72; margin: 4px 0 0; }
.gm-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

.gm-main { position: fixed; inset: var(--gm-top-h, 56px) 0 0 0; }
.gm-map { position: absolute; inset: 0; }

.gm-filters { position: absolute; top: 12px; left: 12px; width: 320px; max-height: calc(100% - 24px); overflow: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 6px 14px 14px; z-index: 10; }
.gm-filters h2 { font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); margin: 14px 0 8px; }
.gm-lvl { display: flex; gap: 8px; align-items: flex-start; padding: 5px 0; cursor: pointer; font-size: 13px; color: var(--dim); }
.gm-lvl b { color: var(--text); font-weight: 600; display: block; }
.gm-lvl input { margin-top: 3px; }
.gm-note { color: var(--dim); font-size: 11.5px; margin: 6px 0 0; }
.gm-dim { color: var(--dim); text-transform: none; letter-spacing: 0; font-family: var(--sans); font-weight: 400; }
.gm-range { position: relative; height: 28px; }
.gm-range input { position: absolute; inset: 0; width: 100%; pointer-events: none; background: none; -webkit-appearance: none; appearance: none; }
.gm-range input::-webkit-slider-thumb { pointer-events: all; -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--red); border: 2px solid #fff; cursor: pointer; }
.gm-range input::-moz-range-thumb { pointer-events: all; width: 14px; height: 14px; border-radius: 50%; background: var(--red); border: 2px solid #fff; cursor: pointer; }
.gm-range::before { content: ""; position: absolute; left: 0; right: 0; top: 13px; height: 2px; background: var(--line); }
.gm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gm-chips button { border: 1px solid var(--line); background: var(--panel2); border-radius: 999px; padding: 3px 9px; font-size: 12px; cursor: pointer; }
.gm-chips button[aria-pressed="false"] { opacity: .62; }
.gm-seg { display: flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.gm-seg button { flex: 1; background: var(--panel2); border: 0; padding: 6px 4px; font-size: 12px; cursor: pointer; }
.gm-seg button[aria-pressed="true"] { background: var(--red); color: #fff; }

.sw { display: inline-block; width: 12px; height: 12px; flex: 0 0 12px; margin-top: 3px; border-radius: 50%; }
.sw-pin { background: var(--pin); border: 2px solid #fff; }
.sw-prop { border-color: var(--prop); }
.sw-fac { background: var(--fac); border-radius: 2px; }
.sw-area1 { background: rgba(229,56,59,.18); border: 1px dashed var(--area); }
.sw-area2 { background: rgba(229,56,59,.32); border: 1px dashed var(--area); }
.sw-ext { background: var(--ext); transform: rotate(45deg); border-radius: 1px; width: 10px; height: 10px; flex-basis: 10px; }
.sw-disp { background: var(--pin); box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--disp); }

.gm-legend { position: absolute; right: 12px; bottom: 30px; z-index: 5; background: rgba(21,23,28,.92); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 10px; font-size: 11.5px; display: grid; gap: 4px; }
.gm-legend div { display: flex; gap: 7px; align-items: center; }
.gm-legend .sw { margin: 0; }

/* smooth, not a jump, whenever anything moves this sheet — and it always opens at the top of the
   card (7 Oct, operator on a phone). overscroll-behavior stops a flick at the end of the card
   dragging the map underneath it. */
.gm-panel { position: absolute; top: 12px; right: 12px; bottom: 12px; width: 420px; z-index: 15; overflow: auto;
  scroll-behavior: smooth; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  /* a reader who has asked their device for less motion gets none of it */
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 16px 16px 24px; }
.gm-close { position: sticky; top: 0; float: right; background: var(--panel2); border: 1px solid var(--line); border-radius: 50%;
  width: 30px; height: 30px; font-size: 18px; line-height: 1; cursor: pointer; z-index: 2; }
.gm-panel h2 { font-size: 17px; margin: 2px 40px 2px 0; }
.gm-panel h3 { font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); margin: 18px 0 8px; }
.gm-ar { direction: rtl; color: var(--dim); font-size: 15px; }
.gm-kicker { font: 600 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.k-pin { color: var(--pin); } .k-prop { color: var(--prop); } .k-fac { color: var(--fac); } .k-area { color: #ff8a8c; } .k-ext { color: var(--ext); }
.gm-explain { background: var(--panel2); border-left: 3px solid var(--line); padding: 8px 10px; border-radius: 4px; font-size: 12.5px; color: #cfd2d8; margin: 10px 0; }
.gm-explain.warn { border-left-color: var(--prop); }
.gm-explain.disp { border-left-color: var(--disp); }

.gm-list { display: grid; gap: 8px; }
.gm-item { display: grid; grid-template-columns: 72px 1fr; gap: 10px; background: var(--panel2); border: 1px solid var(--line);
  border-radius: 8px; padding: 6px; cursor: pointer; text-align: left; }
.gm-item:hover { border-color: #444a56; }
.gm-thumb { width: 72px; height: 54px; object-fit: cover; border-radius: 4px; background: #000; display: block; }
.gm-item .meta { font: 11px var(--mono); color: var(--dim); }
.gm-item .cap { font-size: 12.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gm-more { margin-top: 10px; width: 100%; }

.gm-media { width: 100%; max-height: 300px; background: #000; border-radius: 6px; display: block; }
.gm-cap { white-space: pre-wrap; font-size: 13px; margin: 10px 0; }
.gm-cap[dir="rtl"] { text-align: right; }
.gm-kv { display: grid; grid-template-columns: 110px 1fr; gap: 4px 10px; font-size: 12.5px; }
.gm-kv dt { color: var(--dim); }
.gm-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.gm-prov { display: grid; gap: 6px; }
.gm-prov div { background: var(--panel2); border-radius: 6px; padding: 7px 9px; font-size: 12.5px; }
.gm-prov .who { font-weight: 600; }
a { color: #8ab4ff; }

.gm-form { display: grid; gap: 8px; margin-top: 10px; }
.gm-form select, .gm-form textarea, .gm-form input { width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 7px; font: inherit; }
.gm-suggest-bar { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); z-index: 30; background: var(--prop); color: #111;
  padding: 8px 10px 8px 14px; border-radius: 8px; display: flex; gap: 12px; align-items: center; font-weight: 600; }
.gm-suggest-bar .gm-btn { background: #111; color: #fff; border-color: #111; }

.maplibregl-popup-content { background: var(--panel); color: var(--text); border: 1px solid var(--line); font-size: 12px; padding: 6px 9px; }
.maplibregl-popup-tip { display: none; }

@media (max-width: 760px) {
  .gm-top { gap: 10px; padding: 0 12px; }
  .gm-brand h1 .gm-sub, .gm-badge { display: none; }
  .gm-truth { font-size: 11px; }
  .gm-filters { left: 8px; right: 8px; width: auto; top: 8px; max-height: 70%; }
  .gm-panel { left: 0; right: 0; bottom: 0; top: auto; width: auto; max-height: 62%; border-radius: 14px 14px 0 0;
    padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
  .gm-legend { display: none; }
}

.gm-styles { display: grid; gap: 4px; }
.gm-styles button { text-align: left; background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 6px 9px; cursor: pointer; font-size: 12.5px; }
.gm-styles button[aria-pressed="true"] { background: var(--red); border-color: var(--red); color: #fff; }
.gm-styles button[aria-pressed="true"] .gm-dim { color: #ffd9d9; }
.sw-adot { background: #d63a3d; opacity: .75; width: 9px; height: 9px; flex-basis: 9px; margin: 4px 1px 0; }
.sw-bdot { background: #c0661c; opacity: .85; width: 9px; height: 9px; flex-basis: 9px; margin: 4px 1px 0; }

/* Google-style satellite switch, bottom-left above the zoom buttons */
.gm-sat { position: absolute; left: 10px; bottom: 96px; z-index: 6; width: 74px; height: 74px; padding: 0; border-radius: 10px;
  border: 2px solid #fff; box-shadow: 0 1px 6px rgba(0,0,0,.45); cursor: pointer; overflow: hidden; background: #333; }
.gm-sat i { position: absolute; inset: 0; background: url("../sat/13/4879/3339.jpg") center / cover no-repeat; }
.gm-sat.on i { background: url("../basemap/thumb_map.jpg") center / cover no-repeat; }
.gm-sat span { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 0 4px; font-size: 11.5px; font-weight: 600;
  color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.75)); }
.gm-sat:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
@media (max-width: 760px) { .gm-sat { width: 60px; height: 60px; bottom: 90px; } }

/* exact research sites (2026-10-05) */
.sw-site { background: #ff2e2e; border: 2px solid #fff; border-radius: 50%; width: 12px; height: 12px; }
.sw-site.sw-filmed { border-color: #ffb020; }

/* ---- Iris (js/iris-geomap.js) ------------------------------------------------------------- */
.gm-iris { flex: 0 1 540px; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 4px 0 12px;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 999px; transition: border-color .15s, box-shadow .15s; }
.gm-iris:focus-within { border-color: var(--red); box-shadow: 0 0 0 3px rgba(229,56,59,.18); }
.gm-iris-eye { color: var(--red); flex: 0 0 auto; }
.gm-iris input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--text); font: 14px var(--sans); }
.gm-iris input::placeholder { color: var(--dim); }
.gm-iris-go { flex: 0 0 auto; background: var(--red); color: #fff; border: 0; border-radius: 999px; padding: 6px 14px; font-weight: 600; cursor: pointer; }
.gm-iris-status { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 13; background: var(--panel);
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-size: 12.5px; color: var(--dim); }

.gm-ia { position: absolute; top: 12px; left: 12px; width: 380px; max-height: calc(100% - 24px); overflow: auto; z-index: 12;
  background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--red); border-radius: 10px;
  padding: 10px 14px 14px; box-shadow: 0 8px 28px rgba(0,0,0,.45); }
.gm-filters:not([hidden]) ~ .gm-ia { left: 344px; }
.ia-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ia-who { display: inline-flex; align-items: center; gap: 5px; font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--red); }
.ia-q { flex: 1; min-width: 0; color: var(--dim); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ia-x { margin-left: auto; background: transparent; border: 0; color: var(--dim); font-size: 20px; line-height: 1; cursor: pointer; }
.ia-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0 10px; }
.ia-chip { display: inline-flex; align-items: center; gap: 4px; background: rgba(229,56,59,.14); border: 1px solid rgba(229,56,59,.45);
  border-radius: 999px; padding: 2px 4px 2px 10px; font-size: 12px; }
.ia-chip.neg { background: transparent; border-style: dashed; text-decoration: line-through; }
.ia-chip button { background: transparent; border: 0; color: var(--dim); font-size: 14px; line-height: 1; cursor: pointer; padding: 0 4px; }
.ia-count { font-size: 15px; } .ia-count b { font-size: 22px; font-weight: 700; color: #fff; } .ia-count span { color: var(--dim); font-size: 13px; }
.ia-meter { height: 5px; background: var(--panel2); border-radius: 3px; margin: 8px 0 5px; overflow: hidden; }
.ia-meter i { display: block; height: 100%; background: var(--pin); }
.ia-sub { font-size: 12px; color: var(--dim); } .ia-sub b { color: var(--text); }
.ia-line { margin: 6px 0; font-size: 13.5px; }
.gm-ia[dir=rtl] h4, .gm-ia[dir=rtl] summary { letter-spacing: 0; text-transform: none; font-family: var(--sans); }
.ia-sites { margin-top: 12px; } .ia-sites h4 { font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); margin: 0 0 6px; }
.ia-site { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: transparent; border: 0;
  border-top: 1px solid var(--line); padding: 7px 2px; cursor: pointer; color: var(--text); font-size: 13px; }
.ia-site:hover { background: var(--panel2); }
.ia-site span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ia-site em { font: 12px var(--mono); color: var(--dim); font-style: normal; }
.ia-site .sw { margin: 0; }
.ia-notes { margin-top: 10px; font-size: 12.5px; color: var(--dim); } .ia-notes summary { cursor: pointer; } .ia-notes p { margin: 6px 0; }
.ia-try { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ia-ex { background: var(--panel2); border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; font-size: 12.5px; cursor: pointer; color: var(--text); }
.ia-ex:hover { border-color: var(--red); }
.ia-act { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.ia-btn { display: inline-block; text-decoration: none; background: var(--panel2); color: var(--text); border: 1px solid var(--line);
  border-radius: 7px; padding: 7px 11px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.ia-btn.primary { background: var(--red); border-color: var(--red); color: #fff; }
.ia-btn.ghost { background: transparent; }
.gm-links { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.gm-link { display: inline-block; text-decoration: none; color: var(--text); background: var(--panel2); border: 1px solid var(--line);
  border-radius: 7px; padding: 6px 10px; font-size: 12.5px; font-weight: 600; }
.gm-link:hover { border-color: var(--red); }

/* The Ask button only exists to collapse Iris on a phone; the desktop header has room. */
.gm-askbtn { display: none; }

@media (max-width: 760px) {
  .gm-top { height: auto; min-height: 56px; flex-wrap: wrap; padding: 8px 12px; row-gap: 8px; }
  .gm-truth { display: none; }
  .gm-main { top: var(--gm-top-h, 104px); }
  .gm-ia { left: 8px; right: 8px; width: auto; top: 8px; max-height: 48%; }
  .gm-filters:not([hidden]) ~ .gm-ia { left: 8px; }

  /* 2026-10-17: the header was four rows / 160px on a 390px phone - a fifth of the screen -
     because Iris sat permanently on its own full-width row. It now hides behind the Ask
     button and opens on demand, which drops the header to two rows. --gm-top-h measures the
     header either way, so the map resizes itself when Iris opens. */
  .gm-askbtn { display: inline-flex; align-items: center; }
  .gm-iris { display: none; }
  body.iris-open .gm-iris { display: flex; order: 3; flex: 1 0 100%; height: 44px; }

  /* WCAG 2.5.5 / Apple HIG: every header control was 32-38px, and the Iris field only 23px.
     The .gm-btn / .gm-navbtn height is set further down (the rule that wins); these cover the
     controls that rule does not reach. */
  /* The <label> IS the 44px touch target. Giving the inner <select> its OWN 44px on top of
     the label's vertical padding stacked into a 62px control standing visibly taller than
     the 44px buttons beside it - the "menus look off" report of 2026-10-18.
     Drop the label's VERTICAL padding and stretch the select into it, so the select fills
     the 44px control and a tap anywhere on it opens the picker.
     ⚠ SPECIFICITY, not source order: `.gm-top .gm-btn { padding: 8px 10px }` further down
     has the same weight (0,2,0) as `.gm-top .gm-caplang` and comes LATER, so a plain
     `.gm-top .gm-caplang { padding: 0 10px }` silently lost - the select stayed 26px and
     WebKit drew the control 45px. A first test injected these rules last and so hid the
     loss; the real engines found it. `.gm-btn.gm-caplang` (0,3,0) wins wherever it sits.
     Only top/bottom are zeroed, so the sideways spacing is exactly what it was. */
  .gm-top .gm-btn.gm-caplang { min-height: 44px; padding-top: 0; padding-bottom: 0; }
  .gm-top .gm-caplang select { min-height: 0; align-self: stretch; padding: 0 2px;
    /* Long names ("Português brasileiro") grow the select enough to wrap the row badly.
       Cap it - the full name is still readable in the open dropdown. */
    max-width: 8.5rem; }
  #iris-q { min-height: 44px; }
  .gm-iris-go { min-height: 44px; padding: 0 14px; }
  .gm-askbtn { min-width: 44px; }
  .maplibregl-ctrl button { width: 44px !important; height: 44px !important; }
  .gm-close { min-width: 44px; min-height: 44px; }
  #layers-btn, .gm-layers { min-height: 44px; }
  /* Iris's answer panel: the close control was 26x22, too small to hit reliably. The example
     chips are many and sit in a scrolling panel, so 40px rather than 44 keeps it usable while
     clearing the 24px AA floor comfortably. */
  .ia-x { min-width: 44px; min-height: 44px; }
  .ia-ex { min-height: 40px; }
}

/* the Node Map's dossier for the open clip, on the left (js: showNodeMap) */
.gm-nm { position: absolute; top: 12px; left: 12px; bottom: 12px; width: 440px; z-index: 16; display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.gm-nm[hidden] { display: none; }
.gm-nm-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; border-bottom: 1px solid var(--line);
  font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.gm-nm-head span { flex: 1; }
.gm-nm-full { color: var(--dim); text-transform: none; letter-spacing: 0; font: 12px var(--sans, inherit); }
.gm-nm-head .gm-close { position: static; float: none; }
.gm-nm-frame { flex: 1; width: 100%; border: 0; background: #0b0c0f; }
.gm-nm-local { padding: 16px; color: var(--dim); font-size: 13px; }
body.nm-open .gm-ia { left: 464px; }
body.nm-open .gm-filters { left: 464px; }
.gm-nm-btn { margin-top: 6px; }
@media (max-width: 760px) {
  /* inside the clip sheet, below its last section: the reader scrolls on from Suggest a location into it */
  .gm-nm { position: static; width: auto; left: auto; right: auto; top: auto; bottom: auto; margin: 14px 0 0;
    border-radius: 10px; border: 1px solid var(--line); height: 78vh; min-height: 420px; z-index: auto; }
  .gm-nm-frame { min-height: 360px; }
  body.nm-open .gm-ia, body.nm-open .gm-filters { left: 8px; }
}

/* districts + dark map buttons, above the Satellite switch (2026-10-05) */
.gm-tools { position: absolute; left: 10px; bottom: 180px; z-index: 6; display: flex; flex-direction: column; gap: 6px; }
.gm-tool { display: flex; align-items: center; gap: 6px; width: 74px; padding: 6px 7px; border-radius: 9px; cursor: pointer;
  background: rgba(21,23,28,.92); color: #fff; border: 2px solid #fff; box-shadow: 0 1px 6px rgba(0,0,0,.45);
  font-size: 11px; font-weight: 600; line-height: 1.1; text-align: left; }
.gm-tool i { font-style: normal; font-size: 14px; }
.gm-tool.on { background: var(--red); border-color: #fff; }
.gm-tool:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.gm-dzchip { margin-left: 8px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--red); background: rgba(229,56,59,.15);
  color: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; }
.gm-dzchip[hidden] { display: none; }
/* desktop: the district / radius chips sit under the header instead of squeezing the count and Clear filters out of it */
@media (min-width: 761px) {
  .gm-top .gm-dzchip { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); margin: 0; z-index: 19;
    box-shadow: 0 2px 10px rgba(0,0,0,.3); background: var(--panel); }
  .gm-top .gm-dzchip.gm-radchip { top: 64px; }
  .gm-top .gm-dzchip:not([hidden]) ~ .gm-dzchip.gm-radchip { top: 100px; }
}
.gm-dzchip span { margin-left: 4px; font-weight: 700; }
@media (max-width: 760px) {
  .gm-tools { bottom: 160px; }
  .gm-tool { width: 60px; padding: 5px; font-size: 10px; }
}
@media (min-width: 761px) { body.nm-open .gm-tools { left: 464px; } }

/* clip panel: sources as links only (2026-10-05) */
.gm-src { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.gm-src .who { color: var(--dim); }
.gm-src a { white-space: nowrap; }

/* ---- one control group: a column on desktop, the "Layers" sheet on phones (2026-10-05) ---- */
.gm-tools { bottom: 96px; }
.gm-tools .gm-sat { position: relative; left: auto; bottom: auto; }
.gm-layers-btn, .gm-done { display: none; }
@media (max-width: 760px) {
  /* Layers: Districts / Dark map / Satellite + the legend, behind one button */
  .gm-layers-btn { display: flex; align-items: center; gap: 6px; position: absolute; left: 10px; bottom: 96px; z-index: 6;
    height: 44px; padding: 0 14px; border-radius: 22px; border: 2px solid #fff; background: rgba(21,23,28,.94); color: #fff;
    font-weight: 600; font-size: 14px; box-shadow: 0 1px 6px rgba(0,0,0,.45); cursor: pointer; }
  .gm-layers-btn i { font-style: normal; font-size: 18px; }
  .gm-tools { display: none; }
  body.layers-open .gm-tools { display: flex; flex-direction: row; gap: 8px; position: absolute; left: 8px; right: 8px; bottom: 150px;
    z-index: 21; padding: 10px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
  body.layers-open .gm-tools > * { flex: 1; width: auto; height: 64px; }
  body.layers-open .gm-tools .gm-tool { flex-direction: column; justify-content: center; text-align: center; font-size: 12px; }
  body.layers-open .gm-legend { display: block; position: absolute; left: 8px; right: 8px; bottom: 236px; top: auto; z-index: 21; }
  body.layers-open .gm-layers-btn { background: var(--red); }

  /* Filters: a bottom sheet with short labels and a Done button */
  .gm-filters { left: 0; right: 0; top: auto; bottom: 0; width: auto; max-height: 78%; border-radius: 14px 14px 0 0;
    padding-bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 22; }
  .gm-done { display: block; position: sticky; top: 0; margin-left: auto; z-index: 2; }
  .gm-lvl span { font-size: 0; }
  .gm-lvl span b { font-size: 14px; }
  .gm-filters section:last-child { display: none; }
  .gm-filters .gm-range input { height: 36px; }

  /* the clip sheet a little lower so more map shows; tap targets */
  .gm-panel { max-height: 55%; }
  .maplibregl-ctrl-group button { width: 40px; height: 40px; }
}
/* before tiles paint (a zoom on a slow phone), show land colour rather than a black box */
.gm-map { background: #e9e6e1; }
body.theme-dark .gm-map { background: #2b2b2b; }

/* open this spot elsewhere (2026-10-05) */
.gm-else { display: flex; flex-wrap: wrap; gap: 6px; }
.gm-else a, .gm-copy { padding: 5px 9px; border: 1px solid var(--line); border-radius: 7px; font-size: 12.5px; text-decoration: none;
  color: inherit; background: var(--panel2); cursor: pointer; }
.gm-copy { font-family: var(--mono, monospace); font-size: 11.5px; }

/* ---- research tools (js/geomap-tools.js, 2026-10-05) ---- */
/* Layers on every screen: the toggles stay out of sight until asked for (desktop: a small panel above the button) */
.gm-layers-btn { display: flex; align-items: center; gap: 6px; position: absolute; left: 10px; bottom: 96px; z-index: 6;
  height: 40px; padding: 0 14px; border-radius: 20px; border: 2px solid #fff; background: rgba(21,23,28,.94); color: #fff;
  font-weight: 600; font-size: 13.5px; box-shadow: 0 1px 6px rgba(0,0,0,.45); cursor: pointer; }
.gm-layers-btn i { font-style: normal; font-size: 17px; }
body.layers-open .gm-layers-btn { background: var(--red); }
.gm-tools { display: none; }
@media (min-width: 761px) {
  body.layers-open .gm-tools { display: grid; grid-template-columns: repeat(3, 84px); gap: 6px; position: absolute; left: 10px;
    bottom: 144px; z-index: 21; padding: 8px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
  body.layers-open .gm-tools > * { width: 84px; height: 64px; }
  body.layers-open .gm-tools .gm-tool { flex-direction: column; justify-content: center; text-align: center; }
  body.nm-open .gm-layers-btn { left: 464px; }
}
.gm-tool { line-height: 1.15; }
/* chips in the header */
.gm-radchip button { margin: 0 2px; padding: 1px 6px; border-radius: 6px; border: 1px solid var(--line); background: transparent; color: inherit; cursor: pointer; font-size: 11.5px; }
.gm-radchip button.on { background: #2ec4b6; color: #0e0f12; border-color: #2ec4b6; }
.gm-radchip { border-color: #2ec4b6; background: rgba(46,196,182,.12); cursor: default; }
/* time histogram */
.gm-hist { display: flex; align-items: flex-end; gap: 1px; height: 42px; margin: 6px 0 2px; }
.gm-hist i { flex: 1; background: #4a4d55; border-radius: 1px 1px 0 0; min-height: 1px; }
.gm-hist i.in { background: var(--red); }
.gm-play { margin-top: 6px; }
.gm-disagree { margin-top: 8px; }
/* data panel */
.gm-datap { position: absolute; top: 12px; right: 12px; width: 380px; max-height: calc(100% - 24px); overflow: auto; z-index: 18;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 16px; }
.gm-datap[hidden] { display: none; }
.gm-datap h2 { font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); margin: 6px 0 8px; }
.gm-datap .gm-close { float: right; position: static; }
.gm-dl { display: inline-block; margin: 6px 0 10px; text-decoration: none; }
.gm-dlist { margin: 0 0 8px 18px; padding: 0; font-size: 13px; }
.gm-mono { font-family: var(--mono, monospace); }
@media (max-width: 760px) {
  .gm-datap { left: 0; right: 0; top: auto; bottom: 0; width: auto; max-height: 75%; border-radius: 14px 14px 0 0; z-index: 22; }
  #btn-data { padding: 6px 10px; }
  body.layers-open .gm-tools { flex-wrap: wrap; }
  body.layers-open .gm-tools > * { flex: 1 1 30%; }
  body.layers-open .gm-legend { bottom: 300px; }
}
#legend [hidden] { display: none; }

.gm-nm-miss { padding: 16px; color: var(--text); font-size: 13px; line-height: 1.5; }
.gm-nm-miss p { margin: 0 0 12px; }
.gm-nm-miss .gm-link { margin-right: 10px; }

/* content warning (same as the archive's) */
.gm-cw { position: fixed; inset: 0; z-index: 100000; background: rgba(5,6,8,.92); display: flex; align-items: center; justify-content: center; padding: 20px; }
.gm-cw[hidden] { display: none; }
.gm-cw-box { max-width: 520px; background: var(--panel); border: 1px solid var(--red); border-radius: 12px; padding: 28px 26px; text-align: center; }
.gm-cw-icon { font-size: 34px; }
.gm-cw-box h2 { margin: 8px 0 12px; font-size: 22px; }
.gm-cw-box p { color: var(--text); line-height: 1.55; margin: 0 0 20px; }
.gm-cw-buttons { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.gm-cw-buttons .gm-btn { padding: 10px 18px; font-size: 14px; }
.sw-mine { border-radius: 50%; background: rgba(255,210,61,.15); border: 3px solid #ffd23d; }
#legend [data-mine][hidden] { display: none; }

/* 2026-10-06 visitor test: header buttons never wrap; landscape phones get the compact header; the filtered count
   ("Showing N of … · Clear filters") stays visible on phones as a chip under the header */
.gm-top .gm-btn { white-space: nowrap; flex-shrink: 0; }
.gm-reset { margin-left: 8px; background: transparent; border: 1px solid var(--red); color: var(--text); border-radius: 5px;
  padding: 1px 8px; font: 600 11.5px var(--sans); cursor: pointer; }
.gm-reset:hover { background: var(--red); }
@media (max-width: 760px) {
  .gm-truth.filt { display: block; position: fixed; bottom: calc(40px + env(safe-area-inset-bottom)); right: 10px; z-index: 15; width: auto;
    max-width: calc(100% - 120px); white-space: normal; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 5px 6px 5px 12px;
    font-size: 12px; box-shadow: 0 2px 10px rgba(0,0,0,.35); }
}
@media (max-height: 480px) and (min-width: 761px) {
  .gm-top { gap: 8px; padding: 0 10px; height: 48px; }
  .gm-main { top: var(--gm-top-h, 48px); }
  .gm-brand h1 .gm-sub, .gm-badge { display: none; }
  .gm-brand h1 { font-size: 14px; }
  .gm-truth:not(.filt) { display: none; }
  .gm-legend { display: none; }
}

/* 2026-10-06 journalist test */
.gm-share { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.gm-share .gm-btn { font-size: 12.5px; padding: 6px 10px; }
.gm-sharebox { width: 100%; box-sizing: border-box; background: var(--panel2); color: var(--text); border: 1px solid var(--line);
  border-radius: 6px; font: 12px var(--mono); padding: 6px; margin: 6px 0; }
@media (max-width: 760px) {
  body.panel-open .gm-truth.filt, body.sheet-open .gm-truth.filt { display: none; }
  .gm-chips button[aria-pressed="true"] { border-color: var(--red); color: var(--text); }

  /* 2026-10-17: the Filters sheet still had 30-36px controls. These are not ordinary buttons -
     a precision row toggles what footage the map shows, and a mis-tap on a neighbouring 30px
     row changes the dataset silently, with nothing on screen to say so. On a research tool a
     quiet wrong subset costs more than the ~100px of extra scroll. The sheet already scrolls. */
  .gm-lvl { min-height: 44px; align-items: center; padding: 6px 0; }
  .gm-lvl input { width: 20px; height: 20px; margin-top: 0; flex: none; }
  .gm-done, .gm-play { min-height: 44px; }
  .gm-close { min-width: 44px; min-height: 44px; }
  /* Chips and Reset are many and secondary: 40px clears the AA floor without bloating the sheet. */
  .gm-reset { min-height: 40px; padding: 3px 10px; }
  .gm-chips button { min-height: 40px; }

  /* The date range is two sliders whose thumbs were 16px (WebKit) and 14px (Firefox). Track
     height is irrelevant here - the thumb is what a finger has to catch. */
  .gm-filters .gm-range { height: 44px; }
  .gm-filters .gm-range input { height: 44px; }
  .gm-filters .gm-range input::-webkit-slider-thumb { width: 28px; height: 28px; }
  .gm-filters .gm-range input::-moz-range-thumb { width: 26px; height: 26px; }
  .gm-filters .gm-range::before { top: 21px; }
}
@media (pointer: coarse) { #iris-q, .gm-form input, .gm-form textarea, .gm-form select { font-size: 16px; } }

/* A phone in landscape is 844px wide, so the <=760px rules never reach it and it was left with
   desktop-sized 32-37px controls on a touch screen. Size by INPUT TYPE, not by width, so any
   touch device gets a 44px target wherever the layout puts it. (2026-10-17) */
@media (pointer: coarse) {
  .gm-top .gm-btn, .gm-top .gm-navbtn, .gm-top .gm-caplang { min-height: 44px; }
  /* Same stacking fix as the <=760px block above - this is the rule that wins on a touch
     screen in landscape (844px wide, so the width query never reaches it), and it has to
     carry the fix too or the control is tall again there. */
  .gm-top .gm-btn.gm-caplang { padding-top: 0; padding-bottom: 0; }
  .gm-top .gm-caplang select { min-height: 0; align-self: stretch; padding: 0 2px; }
  #iris-q { min-height: 44px; }
  .gm-iris-go { min-height: 44px; }
  #layers-btn, .gm-layers { min-height: 44px; }
  .maplibregl-ctrl button { width: 44px !important; height: 44px !important; }
  .ia-x { min-width: 44px; min-height: 44px; }
  .ia-ex { min-height: 40px; }
  /* Filters sheet, for a landscape phone that the width rules never reach. */
  .gm-lvl { min-height: 44px; align-items: center; }
  .gm-lvl input { width: 20px; height: 20px; margin-top: 0; flex: none; }
  .gm-done, .gm-play, .gm-close { min-height: 44px; }
  .gm-reset, .gm-chips button { min-height: 40px; }
  .gm-filters .gm-range, .gm-filters .gm-range input { height: 44px; }
  .gm-filters .gm-range input::-webkit-slider-thumb { width: 28px; height: 28px; }
  .gm-filters .gm-range input::-moz-range-thumb { width: 26px; height: 26px; }
  .gm-filters .gm-range::before { top: 21px; }
}
.gm-intro { position: fixed; left: 10px; right: 10px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 30; background: var(--panel);
  border: 1px solid var(--line); border-left: 3px solid var(--red); border-radius: 10px; padding: 12px 14px; font-size: 13.5px; line-height: 1.45;
  box-shadow: 0 6px 24px rgba(0,0,0,.45); }
.gm-intro p { margin: 0 0 6px; } .gm-intro b { color: var(--text); }
.gm-intro .gm-btn { margin-top: 6px; min-height: 40px; min-width: 88px; }
.gm-panel h2 { unicode-bidi: plaintext; }

/* 2026-10-06 operator: "i dont like the hand icon, its hard to click on things, switch to a clean pointer" -- a plain
   arrow on the map at rest, while dragging and over clickable dots (suggest/radius mode keep the crosshair) */
.maplibregl-canvas-container.maplibregl-interactive,
.maplibregl-canvas-container.maplibregl-interactive:active,
.maplibregl-canvas-container.maplibregl-interactive .maplibregl-canvas { cursor: default; }

/* focus is moved to the opened clip's title for keyboard and screen-reader users; no ring needed on a heading */
#panel-body h2:focus, .gm-brand h1:focus { outline: none; }


/* the filtered count line ("Showing N of M clips  Clear filters") is short: never cut its button off */
@media (min-width: 761px) { .gm-truth.filt { flex: 0 1 auto; overflow: visible; } }

/* 2026-10-06 operator: navigation to the archive and the Node Map, on phones too */
.gm-nav { display: flex; gap: 6px; flex-shrink: 0; }
.gm-navbtn { text-decoration: none; color: var(--text); white-space: nowrap; font-size: 13px; padding: 7px 11px; }
@media (max-width: 760px) {
  .gm-top .gm-brand { display: none; }
  .gm-nav { gap: 6px; }
  /* 2026-10-17: was 38px. Every header control measured 32-38px on a phone, under the 44px
     guideline. This is the rule that actually wins - an earlier .gm-top .gm-btn block is
     overridden by this one, so raise it here rather than stacking a competing rule. */
  .gm-navbtn, .gm-top .gm-btn { padding: 8px 10px; font-size: 13px; min-height: 44px; }
}
@media (max-width: 360px) { .gm-navbtn, .gm-top .gm-btn { padding: 8px 7px; font-size: 12.5px; } }

/* mid-size windows: the title gives way to the Archive / Node Map buttons rather than sliding under them */
.gm-brand { flex-shrink: 0; }
@media (max-width: 1150px) and (min-width: 761px) { .gm-brand h1 .gm-sub, .gm-badge { display: none; } }
@media (max-width: 960px) and (min-width: 761px) { .gm-top .gm-brand { display: none; } }

/* the damage layer's own legend block (blue scale) */
.gm-legend-dmg { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 3px 10px; max-width: 340px; }
.gm-legend-dmg b { flex: 1 0 100%; font-weight: 600; font-size: 11.5px; }
.gm-legend-dmg span { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; }
.gm-legend-dmg i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

/* phones: the remove-x on filter chips and the radius chip were ~18 px; make them comfortable to tap */
@media (max-width: 760px) {
  .gm-chip button, .gm-iris-chip button, [data-rm] { min-width: 32px; min-height: 32px; }
}

/* Phones: the radius chip (name + four distances + x) is wider than the screen. It sat in the header row, so it
   pushed Filters/Data onto a third row and its x was cut off. Float it under the header, wrapping if it must. */
@media (max-width: 760px) {
  .gm-top .gm-dzchip.gm-radchip { position: fixed; top: 58px; left: 8px; right: 8px; margin: 0; z-index: 19;
    display: flex; flex-wrap: wrap; align-items: center; gap: 3px; justify-content: center;
    box-shadow: 0 2px 10px rgba(0,0,0,.3); background: var(--panel); }
  .gm-top .gm-dzchip:not(.gm-radchip):not([hidden]) ~ .gm-dzchip.gm-radchip { top: 96px; }
  .gm-radchip button { min-width: 34px; min-height: 30px; }
}

/* Respect the system setting: smooth scrolling is a comfort, not something to impose. */
@media (prefers-reduced-motion: reduce) { .gm-panel { scroll-behavior: auto; } }

/* live: the switch thumbnail comes from the archive's own tiles */
.gm-sat i { background-image: url("https://media.archivegenocide.com/tiles/13/4879/3339.jpg"); }