/* World map page. Built on the styles.css tokens; the rest of the site has no dark
   theme, so the map page derives its own surface tokens (--map-*) from those tokens
   and swaps them under prefers-color-scheme. The masthead and footer are already
   dark in both themes and are left untouched. No inline styles are needed (site CSP). */
.map-body {
  color-scheme: light dark;
  --map-bg: var(--paper); --map-surface: var(--surface); --map-text: var(--ink); --map-muted: var(--muted); --map-line: var(--line);
  --map-sea: #e6ebe0; --map-stroke: rgb(32 35 31 / 55%); --map-select: #20231f; --map-focus: #0b57d0; --map-ring: #ffffff;
  --hatch: #6b7064;
  --bin-0: #d7d8cc; --bin-1: #d3e49f; --bin-2: #a9cb5f; --bin-3: #6f9f2a; --bin-4: #3f6f14; --bin-5: #1c3a0c;
  background: var(--map-bg); color: var(--map-text);
}
@media (prefers-color-scheme: dark) {
  .map-body {
    --map-bg: #151813; --map-surface: #20231f; --map-text: #f0efe6; --map-muted: #b7bbae; --map-line: #41463b;
    --map-sea: #101410; --map-stroke: rgb(0 0 0 / 65%); --map-select: #ffffff; --map-focus: #8ab4ff; --map-ring: #101410;
    --hatch: #a9ae9d;
    --bin-0: #2e3229; --bin-1: #3f5424; --bin-2: #607f2a; --bin-3: #8fb43a; --bin-4: #c2e05c; --bin-5: #efffb0;
  }
}
.map-page { padding-block: 32px 70px; min-height: 70vh; }
.map-page h1 { font-size: clamp(44px, 7vw, 92px); line-height: .95; }
.map-page h1 span { color: inherit; }
.map-page h2 { font-size: clamp(24px, 3vw, 34px); letter-spacing: -.04em; margin: 0 0 12px; }
.map-page .map-panel h2 { font-size: 26px; }
.map-page .eyebrow { color: var(--map-muted); margin: 0 0 12px; }
.map-lede { max-width: 640px; color: var(--map-muted); font-size: 15px; margin: 20px 0 8px; }
.map-status { min-height: 1.5em; margin: 0 0 6px; font-size: 13px; color: var(--map-muted); }
.map-asof { margin: 0 0 14px; font-size: 13px; color: var(--map-muted); max-width: 760px; }
.map-notice { margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--map-select); border-radius: 3px; background: var(--map-surface); font-size: 13px; }
#map-quality { margin: 0 0 14px; }
/* Messages can quote published values (an unrecognised country, a link parameter) verbatim: a long unbroken one wraps instead of widening the page. */
#map-quality, .map-notice, .map-status, .map-asof { overflow-wrap: anywhere; }
/* Two reserved lines on phones: the status grows on the first selection and must not push the map down under the finger. */
@media (max-width: 460px) { .map-status { min-height: 3em; } }
.map-skip { position: absolute; left: -9999px; top: auto; }
.map-skip:focus { position: static; display: inline-block; margin-bottom: 10px; padding: 10px 14px; background: var(--accent); color: #20231f; }
.map-table-section:focus { outline: none; }
.map-page .empty-state { background: var(--map-surface); border-color: var(--map-line); }
.map-page .empty-state p { color: var(--map-muted); }
.map-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.toggle-group, .zoom-group { display: flex; flex-wrap: wrap; gap: 6px; }
.toggle-group button, .zoom-group button, .retry-button, .chip, .sort-button, .link-button { border: 1px solid var(--map-line); background: var(--map-surface); color: var(--map-text); border-radius: 3px; }
.toggle-group button, .zoom-group button, .retry-button { padding: 8px 14px; font-size: 13px; font-weight: 700; min-height: 44px; }
.zoom-group button { min-width: 44px; }
.toggle-group button[aria-pressed="true"] { background: var(--accent); color: #20231f; border-color: var(--accent-line); box-shadow: inset 0 -3px #20231f; }
.toggle-group button:hover:not([aria-pressed="true"]), .zoom-group button:hover:not(:disabled), .chip:hover, .retry-button:hover { background: var(--accent-soft); color: #20231f; }
.zoom-group button:disabled { opacity: .4; cursor: default; }
.map-page button:focus-visible, .map-page a:focus-visible, .table-scroll:focus-visible { outline: 2px solid var(--map-focus); outline-offset: 3px; }
.map-stage { position: relative; background: var(--map-sea); border: 1px solid var(--map-line); border-radius: 4px; overflow: hidden; }
.world-map { display: block; width: 100%; height: auto; touch-action: pan-x pan-y pinch-zoom; user-select: none; -webkit-user-select: none; }
.map-stage.is-zoomed .world-map { touch-action: none; cursor: grab; }
.country:focus { outline: none; }
.shape { fill: var(--bin-0); stroke: var(--map-stroke); stroke-width: .6px; vector-effect: non-scaling-stroke; fill-rule: evenodd; stroke-linejoin: round; }
.marker { display: none; stroke: var(--map-select); stroke-width: 1.5px; vector-effect: non-scaling-stroke; fill: var(--bin-0); }
.has-listing .marker { display: inline; }
/* Invisible pointer targets for small countries (js/world-map-hits.js). A transparent fill still receives pointer events. */
.hit { fill: transparent; stroke: none; cursor: pointer; }
.country.has-listing { cursor: pointer; }
.country.has-listing:hover .shape, .country.has-listing:hover .marker { stroke: var(--map-select); stroke-width: 1.8px; }
.country.is-selected .shape, .country.is-selected .marker { stroke: var(--map-select); stroke-width: 2.6px; }
.country:focus-visible .shape, .country:focus-visible .marker { stroke: var(--map-focus); stroke-width: 3.2px; }
.shape[data-bin="0"], .marker[data-bin="0"], .swatch[data-bin="0"] { --fill: var(--bin-0); }
.shape[data-bin="1"], .marker[data-bin="1"], .swatch[data-bin="1"] { --fill: var(--bin-1); }
.shape[data-bin="2"], .marker[data-bin="2"], .swatch[data-bin="2"] { --fill: var(--bin-2); }
.shape[data-bin="3"], .marker[data-bin="3"], .swatch[data-bin="3"] { --fill: var(--bin-3); }
.shape[data-bin="4"], .marker[data-bin="4"], .swatch[data-bin="4"] { --fill: var(--bin-4); }
.shape[data-bin="5"], .marker[data-bin="5"], .swatch[data-bin="5"] { --fill: var(--bin-5); }
.shape, .marker { fill: var(--fill, var(--bin-0)); }
/* Organisers listed, none in the selected view: hatched, never the plain "nothing listed" fill. */
.shape[data-bin="listed-zero"], .marker[data-bin="listed-zero"] { fill: url(#map-hatch); }
.swatch[data-bin="listed-zero"] { background: repeating-linear-gradient(135deg, var(--bin-0) 0 3px, var(--hatch) 3px 4px); }
.hatch-bg { fill: var(--bin-0); }
.hatch-line { stroke: var(--hatch); stroke-width: 1.4px; }
.map-tooltip { position: absolute; z-index: 2; left: 0; top: 0; min-width: 150px; max-width: 240px; padding: 10px 12px; background: var(--map-surface); color: var(--map-text); border: 1px solid var(--map-select); border-radius: 3px; box-shadow: 0 6px 18px rgb(0 0 0 / 22%); pointer-events: none; font-size: 12px; }
.tip-title { display: block; font-size: 14px; margin-bottom: 6px; }
.tip-counts { margin: 0; }
.tip-counts div, .detail-counts div { display: flex; justify-content: space-between; gap: 16px; padding-block: 1px; }
.tip-counts .is-current { font-weight: 700; }
.tip-counts dt, .tip-counts dd, .detail-counts dt, .detail-counts dd { margin: 0; }
.tip-empty { margin: 0; color: var(--map-muted); }
.map-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; list-style: none; padding: 0; margin: 12px 0 4px; font-size: 12px; }
.map-legend li { display: inline-flex; align-items: center; gap: 7px; }
.swatch { display: inline-block; width: 26px; height: 14px; border: 1px solid var(--map-stroke); border-radius: 2px; background: var(--fill, var(--bin-0)); }
.map-hint { font-size: 12px; color: var(--map-muted); margin: 4px 0 24px; }
.map-panel { background: var(--map-surface); border: 1px solid var(--map-line); border-radius: 4px; padding: 22px 24px; margin-bottom: 16px; overflow-wrap: anywhere; }
.map-panel h2 { margin: 0 0 12px; letter-spacing: -.04em; }
.map-panel h2:focus { outline: none; }
.map-panel h3 { margin: 22px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--map-muted); }
.map-panel p { margin: 0 0 10px; }
.detail-hint, .entity-meta { color: var(--map-muted); font-size: 13px; }
.detail-counts { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px 28px; margin: 0 0 14px; font-size: 14px; }
.detail-links { display: grid; gap: 4px; margin-bottom: 4px; }
.detail-link-row { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 14px; }
.detail-link-row a, .detail-entities a { display: inline-flex; align-items: center; min-height: 32px; }
.detail-link-row a { flex-wrap: wrap; }
.link-note { color: var(--map-muted); font-size: 13px; margin-left: .3em; }
.detail-entities, .detail-reasons { list-style: none; padding: 0; margin: 0; font-size: 14px; }
.detail-entities li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; padding-block: 4px; border-bottom: 1px solid var(--map-line); }
.detail-reasons { margin-bottom: 14px; color: var(--map-muted); }
.map-warning { padding: 10px 12px; border: 2px solid var(--map-select); border-radius: 3px; font-weight: 700; font-size: 13px; }
.chip-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.chip { padding: 8px 12px; min-height: 40px; font-size: 13px; }
.table-scroll { overflow-x: auto; border: 1px solid var(--map-line); border-radius: 4px; background: var(--map-surface); }
.map-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 14px; }
.map-table th, .map-table td { padding: 8px 12px; border-bottom: 1px solid var(--map-line); text-align: left; white-space: nowrap; }
.map-table th.num, .map-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.map-table tbody th { position: sticky; left: 0; background: var(--map-surface); font-weight: 400; }
.map-table thead th { font-size: 12px; }
.map-table tr.is-selected th, .map-table tr.is-selected td, .map-table tr.is-selected .link-button { background: var(--accent-soft); color: #20231f; }
.map-table tr.is-selected .link-button { background: transparent; }
.map-table tr.unmapped-row th, .map-table tr.unmapped-row td, .map-table tfoot th, .map-table tfoot td { font-weight: 700; }
.sort-button, .link-button { border: 0; background: transparent; padding: 4px 2px; min-height: 32px; font: inherit; font-weight: inherit; text-align: inherit; }
.sort-button { font-weight: 700; }
.link-button { text-decoration: underline; text-underline-offset: 4px; }
.map-credit { font-size: 11px; color: var(--map-muted); max-width: 720px; margin: 28px 0 0; }
@media (max-width: 700px) {
  .map-page { padding-block: 22px 48px; }
  .map-panel { padding: 16px; }
  .map-page .map-panel h2 { font-size: 22px; }
  /* The map is wider than a phone; the stage scrolls sideways instead of shrinking it to unusable target sizes. */
  .map-stage { overflow-x: auto; overflow-y: hidden; }
  .world-map { width: 780px; max-width: none; }
  .toggle-group button { flex: 1 1 auto; padding-inline: 10px; }
  .map-tooltip { max-width: 190px; }
  .map-table th, .map-table td { padding: 8px; }
}
@media (prefers-reduced-motion: no-preference) {
  .shape, .marker { transition: fill 140ms; }
}