/* ════════════════════════════════════════════════════════
   coveragemap.css — THE COVERAGE MAP

   The site's first actual picture. Markup:
     templates/website/_coverage_map.html   (the section)
     templates/website/includes/coverage_map.html  (GENERATED — rebuild
       with scripts/build_coverage_map.py, never hand-edit)

   Kept in its own file for the reason regtimeline.css exists: the
   jurisdiction pages load aipolicy.css, not landing.css, and a graphic
   trapped in landing.css can only ever appear on the homepage. That is
   how the site's one drawing stayed on one page while the pages that
   were nothing but words had none.

   Contrast, measured on #0a1628:
     white               15.9:1
     white 65%            8.1:1
     amber #f59e0b       8.44:1
     white 55% (labels)   6.1:1  — above AA for the size it carries
   ════════════════════════════════════════════════════════ */

.cmap {
  background: #0a1628;
  padding: clamp(64px, 9vw, 104px) 24px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.cmap-inner { max-width: 1180px; margin: 0 auto; }

.cmap-header { max-width: 720px; margin-bottom: clamp(32px, 4vw, 48px); }

.cmap-title {
  font-size: clamp(1.75rem, 3.8vw, 2.75rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: #ffffff;
  text-wrap: balance;
  margin: 0 0 18px;
}

.cmap-sub {
  font-size: clamp(0.98rem, 1.3vw, 1.075rem);
  line-height: 1.65;
  color: rgba(255,255,255,0.65);
  max-width: 62ch;
  text-wrap: pretty;
  margin: 0;
}

.cmap-figure { margin: 0; }

.cmap-svg {
  display: block;
  width: 100%;
  height: auto;
  /* The ocean. Deliberately a shade off the section background so the
     map reads as an object on the page rather than as land floating in
     nothing — 0px corners, because the brand has no rounded corners. */
  background: #08111f;
  border: 1px solid rgba(255,255,255,0.08);
}

/* ── The land ────────────────────────────────────────────────── */
/* Three tiers, and the ranking has to survive being seen at a glance:
   covered is the only saturated thing on the map, served-on-request is
   clearly lighter than the sea, everything else recedes without
   disappearing. A world map that hides the countries we do not cover is
   not a map, it is a logo. */
/* `path, rect` and not `path`: Malta and Singapore are below the resolution of
   the 1:110m geometry, so the generator emits them as marks in their own
   tier's group rather than letting a country we cover render in the "not
   covered" fill. Styling only `path` would have put them back there. */
.cmap-rest   path, .cmap-rest   rect { fill: #16233a; stroke: #08111f; stroke-width: 1; }
.cmap-second path, .cmap-second rect { fill: #3d5170; stroke: #08111f; stroke-width: 1; }
.cmap-core   path, .cmap-core   rect { fill: #f59e0b; stroke: #08111f; stroke-width: 1; }

/* ── Pins and leaders ────────────────────────────────────────── */
.cmap-leader { stroke: rgba(255,255,255,0.32); stroke-width: 1.5; }

.cmap-pin { stroke: #0a1628; stroke-width: 2; }
.cmap-pin--core   { fill: #ffffff; }
.cmap-pin--second { fill: rgba(255,255,255,0.7); }

/* ── Labels ──────────────────────────────────────────────────── */
/* Sized in user units against a 1600-unit viewBox, so they scale with
   the map instead of drifting off their pins the way px-sized SVG text
   does when the drawing is responsive. */
/* The halo is not decoration. Four of the eight labels sit over land, and
   white-on-#3d5170 is 4.9:1 while white-on-#f59e0b is 2.0:1 — below AA. A
   stroke of the ocean colour drawn UNDER the glyphs (paint-order) keeps every
   label on the same background regardless of what it happens to be over. */
.cmap-labels text {
  paint-order: stroke;
  stroke: #08111f;
  stroke-width: 7px;
  stroke-linejoin: round;
}

.cmap-label {
  fill: #ffffff;
  font-weight: 700;
  font-size: 27px;
  letter-spacing: -0.01em;
}
.cmap-label--sm { font-size: 22px; fill: rgba(255,255,255,0.82); }

.cmap-note {
  fill: rgba(255,255,255,0.62);
  font-weight: 500;
  font-size: 21px;
}

/* ── Legend ──────────────────────────────────────────────────── */
.cmap-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin-top: 18px;
}

.cmap-key {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255,255,255,0.65);
}

.cmap-key::before {
  content: "";
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
}
.cmap-key--core::before   { background: #f59e0b; }
.cmap-key--second::before { background: #3d5170; }

/* ── The readable version ────────────────────────────────────── */
/* In the document at every width, never toggled against the drawing.
   On a phone it IS the graphic; on a desktop it is what a screen reader
   and a crawler get instead of a bag of positioned <text> fragments. */
.cmap-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 0;
  margin: clamp(28px, 4vw, 44px) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.cmap-item {
  padding: 20px 24px 22px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.cmap-item-place {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 7px;
}

.cmap-item-law {
  display: block;
  font-size: 0.88rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.65);
  max-width: 42ch;
}

/* ── Small screens ───────────────────────────────────────────── */
/* The pinned labels go, the map stays. A world at 360px wide is still
   legible as a shape — which is the job — but 27-unit text pinned to
   Singapore is not, and four labels overlapping each other looks like a
   bug rather than a design. */
@media (max-width: 900px) {
  .cmap-labels, .cmap-leaders { display: none; }
  .cmap-pin { stroke-width: 3; }
}