: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: 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); }

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

/* 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: 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-reset { min-height: 30px; padding: 3px 10px; }
  .gm-chips button { min-height: 32px; }
  .gm-chips button[aria-pressed="true"] { border-color: var(--red); color: var(--text); }
  .gm-close { min-width: 40px; min-height: 40px; }
}
@media (pointer: coarse) { #iris-q, .gm-form input, .gm-form textarea, .gm-form select { font-size: 16px; } }
.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; }
  .gm-navbtn, .gm-top .gm-btn { padding: 8px 10px; font-size: 13px; min-height: 38px; }
}
@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"); }