/* Intel maps (lib/intel-map.mjs). The SVG scales; labels, cities and markers
   are an HTML layer positioned in percent, so their type stays 9.5 to 11px at
   every width. Tokens come from intel-report.css (.fr-page). */
.map2 {
  --ev-strike: #a7453d; --ev-out: #e8a33d; --ev-ship: #3d9fa8; --ev-talks: var(--muted, #55534e); --ev-other: var(--muted, #55534e);
  --map-sea: #eef1f1; --map-sea-ink: #3d8a91; --map-land: #f7f6f3; --map-land-em: #ffffff; --map-border: #a3a4a7; --map-border-em: var(--ink, #101114);
  --map-hatch: #a7453d; --map-dot: var(--ink, #101114); --map-paper: var(--paper, #ffffff);
  margin: 0; border-top: 1px solid var(--rule, #cfcbc3); padding-top: 9px; display: grid; gap: 7px; min-width: 0;
}
:root[data-theme="dark"] .map2 {
  --ev-strike: #e06b60; --map-sea: #1b2224; --map-sea-ink: #6fb8bf; --map-land: #1e1f22; --map-land-em: #2a2b2f; --map-border: #55575c; --map-hatch: #e06b60;
}
/* The intel page has no dark mode yet; a page that gets one opts in with data-dark="auto" on .fr-page. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fr-page[data-dark="auto"] .map2 {
    --ev-strike: #e06b60; --map-sea: #1b2224; --map-sea-ink: #6fb8bf; --map-land: #1e1f22; --map-land-em: #2a2b2f; --map-border: #55575c; --map-hatch: #e06b60;
  }
}
.map2 [data-kind="strike"] { --c: var(--ev-strike); }
.map2 [data-kind="outage"] { --c: var(--ev-out); }
.map2 [data-kind="shipping"] { --c: var(--ev-ship); }
.map2 [data-kind="talks"] { --c: var(--ev-talks); }
.map2 [data-kind="other"] { --c: var(--ev-other); }

.map2 .map2-title { font-size: 12.5px; font-weight: 700; color: var(--ink, #101114); line-height: 1.35; }

/* Legend: static chips; the bundle turns them into layer toggles. */
.map2 .map2-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.map2 .map2-chip { display: inline-flex; align-items: center; gap: 5px; font: 500 9.5px/1 var(--f-mono, ui-monospace, monospace); letter-spacing: .08em; text-transform: uppercase; color: var(--muted, #55534e); border: 1px solid var(--hair, #e3e1db); border-radius: 3px; padding: 4px 7px; background: var(--map-paper); }
.map2 .map2-chip svg { width: 13px; height: 13px; fill: none; stroke: var(--c); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.map2 .map2-chip[data-kind="other"] svg path { fill: var(--c); }
.map2 .map2-chip.occ-key i { width: 13px; height: 9px; border: 1px dashed var(--map-border-em); border-radius: 1px; background: repeating-linear-gradient(45deg, var(--map-land-em) 0 2px, color-mix(in srgb, var(--map-hatch) 55%, var(--map-land-em)) 2px 3px); }
.map2 .map2-chip[aria-pressed="false"] { opacity: .45; }

/* Plot: scaling SVG plus the HTML layer. */
.map2 .map2-plot { position: relative; container-type: inline-size; border: 1px solid var(--hair, #e3e1db); border-radius: 4px; overflow: hidden; background: var(--map-sea); }
/* The whole map fits the first view (AL31): a tall region at full column width ran past the bottom of the
   screen and hid its southern markers. The renderer sets --map-ar (width / height) on new maps only, and only
   plots that carry it match, so earlier pages keep their layout. */
.map2 .map2-plot[style*="--map-ar"] { width: 100%; max-width: calc((100vh - 200px) * var(--map-ar)); max-width: calc((100svh - 200px) * var(--map-ar)); margin-inline: auto; box-sizing: border-box; }
.map2 .map2-svg { display: block; width: 100%; height: auto; }
.map2 .map2-svg .sea { fill: var(--map-sea); }
.map2 .map2-svg .c { fill: var(--map-land); fill-rule: evenodd; stroke: var(--map-border); stroke-width: .7px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.map2 .map2-svg .c.em { fill: var(--map-land-em); stroke: var(--map-border-em); stroke-width: 1.3px; }
.map2 .map2-svg .occ { fill-rule: evenodd; stroke: var(--map-border-em); stroke-width: 1.3px; stroke-dasharray: 3 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.map2 .map2-svg .occ-pat rect { fill: var(--map-land); }
.map2 .map2-svg .occ-pat.em rect { fill: var(--map-land-em); }
.map2 .map2-svg .occ-pat line { stroke: var(--map-hatch); stroke-width: 1.1; opacity: .55; }
.map2 .map2-svg .rt { fill: none; stroke: var(--c); stroke-width: 1.6px; stroke-dasharray: 5 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.map2 .map2-layer { position: absolute; inset: 0; pointer-events: none; }
.map2 .map2-layer > * { position: absolute; }

.map2 .map2-lbl { transform: translate(-50%, -50%); white-space: nowrap; font: 500 9.5px/1 var(--f-mono, ui-monospace, monospace); letter-spacing: .14em; text-transform: uppercase; color: var(--faint, #6b675f); }
.map2 .map2-lbl.em { font-size: 11px; font-weight: 600; color: var(--ink, #101114); }
.map2 .map2-lbl.sea { color: var(--map-sea-ink); font-style: italic; letter-spacing: .12em; }

.map2 .map2-dot { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: var(--map-dot); box-shadow: 0 0 0 1.5px var(--map-paper); }
.map2 .map2-city { white-space: nowrap; font: 500 10px/1 var(--f-body, sans-serif); color: var(--body, #1a1a1a); text-shadow: 0 0 2px var(--map-paper), 0 0 2px var(--map-paper); transform: translate(6px, -50%); }
.map2 .map2-city.far { transform: translate(16px, -50%); }
.map2 .map2-city.l { transform: translate(calc(-100% - 6px), -50%); }
.map2 .map2-city.l.far { transform: translate(calc(-100% - 16px), -50%); }

/* Markers: 22px paper circle, a 1.5px ring and the icon in the layer colour. */
.map2 .mk { pointer-events: auto; width: 22px; height: 22px; margin: -11px 0 0 -11px; padding: 0; border-radius: 50%; border: 1.5px solid var(--c); background: var(--map-paper); color: var(--c); display: grid; place-items: center; cursor: pointer; box-shadow: 0 0 0 1px var(--map-paper); }
.map2 .mk svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.map2 .mk[data-kind="other"] svg path { fill: currentColor; }
.map2 .mk:focus { outline: none; }
.map2 .mk:focus-visible { outline: 2px solid var(--ink, #101114); outline-offset: 2px; }
.map2 .mk:hover { background: color-mix(in srgb, var(--c) 12%, var(--map-paper)); }
.map2 .mk[hidden] { display: none; }

.map2 .map2-scale { right: 10px; bottom: 10px; height: 0; border-top: 1.5px solid var(--muted, #55534e); min-width: 24px; }
.map2 .map2-scale::before, .map2 .map2-scale::after { content: ''; position: absolute; top: -4.5px; width: 0; height: 6px; border-left: 1.5px solid var(--muted, #55534e); }
.map2 .map2-scale::before { left: 0; }
.map2 .map2-scale::after { right: 0; }
.map2 .map2-scale span { position: absolute; right: 0; bottom: 4px; white-space: nowrap; font: 500 9.5px/1 var(--f-mono, ui-monospace, monospace); color: var(--muted, #55534e); text-shadow: 0 0 2px var(--map-paper), 0 0 2px var(--map-paper); }

.map2 .map2-note { margin: 0; font: 400 9.5px/1.5 var(--f-mono, ui-monospace, monospace); color: var(--faint, #6b675f); }

/* Labels that collide at phone width are hidden there; .narrow variants replace them. */
.map2 .map2-layer .narrow { display: none; }
@container (max-width: 520px) {
  .map2 .map2-layer .wide { display: none; }
  .map2 .map2-layer .narrow { display: block; }
}
@media print { .map2 .mk { box-shadow: none; } }
/* The map's tooltip, so a page with a map and no chart still styles it */
.map2 .tip { position: absolute; pointer-events: none; background: var(--ink, #101114); color: var(--paper, #fff); font: 500 10px/1.45 var(--f-mono, 'IBM Plex Mono', monospace); padding: 6px 8px; border-radius: 2px; transform: translate(-50%, calc(-100% - 10px)); z-index: 4; white-space: normal; width: max-content; max-width: 240px; }
.map2 .tip b { font-weight: 600; color: inherit; }