/* ============================================================================
   litan-map.css — the shared map instrument (wave 3, N0903-CLA-CONSOLE-V3-REDESIGN-PROGRAM-R2)

   One component behind venues.html, circuits.html and exposure.html: projection,
   interaction, legend, readout, states. SVG only — anti-aliased vector at DPR<=2,
   real DOM hit-testing, every clickable region an <a>.

   EVERY visual value is a custom property under --lm-*, so wave3/ELEGANCE.md (or a
   later token pass) can re-token the whole instrument without touching a selector.
   The --lm-* block below is the ONLY place a literal colour, size or duration lives.

   Inherits the V4 shell tokens (--ground, --ink, --blue, --edge, --d-*, --e-*) when the
   host page defines them; every one has a fallback so the sheet stands alone.
   ========================================================================== */

.lm {
  /* ---- ground and ink ------------------------------------------------- */
  --lm-ground:        var(--ground-2, #0B0D11);
  --lm-ink:           var(--ink, #EEF2F7);
  --lm-ink-2:         var(--ink-2, #B7C1CE);
  --lm-muted:         var(--muted, #7D8896);
  --lm-edge:          var(--edge, rgba(255,255,255,.12));
  --lm-edge-soft:     var(--edge-soft, rgba(255,255,255,.07));
  --lm-fill-1:        var(--fill-1, rgba(255,255,255,.035));
  --lm-fill-2:        var(--fill-2, rgba(255,255,255,.06));
  --lm-blue:          var(--blue, #5EA0FF);
  --lm-blue-2:        var(--blue-2, #9CC4FF);
  --lm-glow:          var(--glow-ring, rgba(94,160,255,.30));
  --lm-glow-strong:   var(--glow-ring-strong, rgba(94,160,255,.48));

  /* ---- the sequential scale: ONE hue, six steps, stated ----------------
     Dark -> light in LIGHTNESS, because a near-black ground reads lightness and
     not saturation. The steps are a COOL NEUTRAL (saturation ~.06), not blue —
     ELEGANCE R-1/R-2 ration chroma by AREA (largest connected chromatic region
     <= 1.2% of the frame; no blue fill above alpha .20 over 2,000 px2), and a
     choropleth class is nothing but area. So the ramp carries the data in value,
     and the blue is spent where R-3 wants it: on the ONE thing the eye should
     find first — the selected region, its ring and its tick on the legend.
     Step 0 is the lowest class, step 5 the highest. -------------------- */
  --lm-step-0: #1C2129;
  --lm-step-1: #272E38;
  --lm-step-2: #363E4A;
  --lm-step-3: #4A535F;
  --lm-step-4: #6A727E;
  --lm-step-5: #98A0AA;
  --lm-steps: 6;

  /* ---- the two non-data region states, drawn so they cannot be mistaken
     for a low class: no-data is a hatch on the ground, withheld is a hatch
     plus the frame of a value that is not there. Neither is step 0. ---- */
  --lm-nodata-fill:   #0A0E14;
  --lm-nodata-hatch:  rgba(255,255,255,.09);
  --lm-withheld-fill: #12151B;
  --lm-withheld-hatch:rgba(156,196,255,.16);

  /* ---- borders. The rule: no border out-contrasts the data ------------ */
  --lm-seam-inner:    rgba(255,255,255,.16);   /* between two data regions */
  --lm-seam-inner-w:  0.7px;
  --lm-seam-state:    rgba(255,255,255,.055);  /* state lines inside a region */
  --lm-seam-state-w:  0.5px;
  --lm-rim:           rgba(160,190,230,.30);   /* the national coastline    */
  --lm-rim-w:         0.9px;
  --lm-hover-ring:    var(--lm-blue);
  --lm-hover-ring-w:  1.4px;
  --lm-select-ring:   #9CC4FF;   /* R-3: the one accent per view */
  --lm-select-ring-w: 2px;

  /* ---- labels --------------------------------------------------------- */
  --lm-label-size:    11.5px;
  --lm-label-weight:  560;
  --lm-label-ink:     rgba(238,242,247,.88);
  --lm-label-halo:    rgba(5,6,8,.85);
  --lm-label-halo-w:  2.6px;
  --lm-leader:        rgba(255,255,255,.30);

  /* ---- legend --------------------------------------------------------- */
  --lm-legend-h:      54px;   /* the distribution's plot height */
  --lm-legend-w:      100%;
  --lm-legend-tick:   rgba(255,255,255,.22);
  --lm-legend-bar:    rgba(255,255,255,.20);

  /* ---- geometry / motion ---------------------------------------------- */
  --lm-radius:        6px;    /* ELEGANCE 2.1: L1 = 6px */
  --lm-radius-l2:     8px;
  --lm-radius-ctl:    4px;    /* the pill is the loudest consumer signal */
  --lm-pad:           var(--s-3, 24px);
  --lm-gap:           var(--s-3, 24px);
  --lm-rail-w:        332px;
  --lm-d-fast:        var(--d-fast, 160ms);
  --lm-d-med:         var(--d-med, 240ms);
  --lm-d-slow:        var(--d-slow, 400ms);
  --lm-ease:          var(--e-out, cubic-bezier(.23,1,.32,1));
}

/* ============================ frame ====================================== */
/* §6.4: a map sits ON THE GROUND (L0) inside an L1 frame — never glass behind
   a map. So .lm__plot has no backdrop-filter and no glass fill; the frame does. */

.lm {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--lm-rail-w);
  gap: var(--lm-gap);
  align-items: start;
}
.lm--norail { grid-template-columns: minmax(0, 1fr); }

.lm__stage {
  position: relative;
  border-radius: var(--lm-radius);
  border: 1px solid var(--lm-edge);
  background: var(--lm-ground);
  box-shadow: inset 0 1px 0 var(--lm-edge-soft),
              0 4px 12px rgba(0,0,0,.5),
              0 34px 72px -22px rgba(0,0,0,.78);
  overflow: hidden;
}
/* the hairline that lights the top edge of every L1 surface in the system */
.lm__stage::before {
  content: ""; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; z-index: 3;
  background: linear-gradient(90deg, transparent, var(--lm-glow-strong), transparent);
  pointer-events: none;
}

.lm__head {
  display: flex; align-items: baseline; gap: var(--s-2, 16px); flex-wrap: wrap;
  padding: 18px var(--lm-pad) 0;
}
.lm__title { margin: 0; font-size: var(--t-h2, 1.5rem); font-weight: 620; letter-spacing: -.022em; }
.lm__sub   { margin: 0; font-size: var(--t-cap, .8125rem); color: var(--lm-ink-2); font-weight: 500; }

/* the metric switch: which share is on the map. Words, never colour. */
.lm__switch { margin-left: auto; display: inline-flex; gap: 2px; padding: 3px;
  border-radius: var(--lm-radius-ctl); border: 1px solid var(--lm-edge); background: var(--lm-fill-1); }
.lm__switch button {
  appearance: none; border: 0; background: none; cursor: pointer;
  height: 28px; padding: 0 12px; border-radius: var(--lm-radius-ctl);
  font-size: 12.5px; font-weight: 540; color: var(--lm-muted);
  transition: color var(--lm-d-fast) var(--lm-ease), background var(--lm-d-fast) var(--lm-ease);
}
.lm__switch button:hover { color: var(--lm-ink-2); }
.lm__switch button[aria-pressed="true"] {
  color: var(--lm-ink); background: var(--lm-fill-2);
  box-shadow: inset 0 1px 0 var(--lm-edge-soft), 0 0 0 1px var(--lm-glow);
}

/* ============================ the plot =================================== */

.lm__plot { display: block; width: 100%; height: auto; }
.lm__plot text { font-family: inherit; }

.lm__region {
  stroke: var(--lm-seam-inner);
  stroke-width: var(--lm-seam-inner-w);
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: fill var(--lm-d-med) var(--lm-ease), stroke var(--lm-d-fast) var(--lm-ease);
  cursor: pointer;
}
.lm__a { outline: none; }
.lm__a:hover .lm__region,
.lm__a:focus-visible .lm__region {
  stroke: var(--lm-hover-ring);
  stroke-width: var(--lm-hover-ring-w);
}
.lm__a:focus-visible .lm__region { filter: drop-shadow(0 0 6px var(--lm-glow-strong)); }
.lm__a[data-selected="true"] .lm__region {
  stroke: var(--lm-select-ring);
  stroke-width: var(--lm-select-ring-w);
  filter: drop-shadow(0 0 10px var(--lm-glow-strong));
}
/* when a region is selected everything else falls off — one lit thing (§7.5) */
.lm[data-has-selection="true"] .lm__a:not([data-selected="true"]) .lm__region { opacity: .58; }

.lm__region[data-state="nodata"]   { fill: url(#lm-hatch-nodata); }
.lm__region[data-state="withheld"] { fill: url(#lm-hatch-withheld); }

.lm__seam-state { fill: none; stroke: var(--lm-seam-state); stroke-width: var(--lm-seam-state-w);
  vector-effect: non-scaling-stroke; pointer-events: none; }
.lm__rim { fill: none; stroke: var(--lm-rim); stroke-width: var(--lm-rim-w);
  stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: none; }

/* placed labels — a curated set, never auto-scattered */
.lm__label {
  font-size: var(--lm-label-size); font-weight: var(--lm-label-weight);
  fill: var(--lm-label-ink); paint-order: stroke fill;
  stroke: var(--lm-label-halo); stroke-width: var(--lm-label-halo-w); stroke-linejoin: round;
  pointer-events: none; letter-spacing: .005em;
}
.lm__leader { stroke: var(--lm-leader); stroke-width: .8px; fill: none; pointer-events: none; }

/* the inset frames Albers USA composites in (AK, HI) — drawn, so the reader
   knows those two are at their own scale and not part of the continent */
.lm__inset { fill: none; stroke: rgba(255,255,255,.13); stroke-width: .8px;
  stroke-dasharray: 3 3; pointer-events: none; }
.lm__inset-tag { font-size: 9.5px; font-weight: 560; letter-spacing: .09em;
  text-transform: uppercase; fill: var(--lm-muted); pointer-events: none; }

/* ============================ legend ===================================== */
/* A real scale: the 94 values as a distribution along the axis, the class
   breaks as numbers, and the hovered region as a tick on that axis.        */

.lm__legend { padding: 2px var(--lm-pad) 16px; }
.lm__legend-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.lm__legend-title { font-size: var(--t-cap, .8125rem); font-weight: 580; color: var(--lm-ink); }
.lm__legend-unit  { font-size: var(--t-cap, .8125rem); color: var(--lm-muted); font-weight: 500; }
.lm__legend-n     { margin-left: auto; font-size: var(--t-cap, .8125rem); color: var(--lm-muted); font-weight: 500;
  font-variant-numeric: tabular-nums; }
/* fixed height: the legend is an instrument part with a designed size, not a
   band that grows with the container width. */
.lm__legend-svg   { display: block; width: 100%; height: 92px; overflow: visible; }

.lm__dist-bar   { fill: var(--lm-legend-bar); transition: fill var(--lm-d-fast) var(--lm-ease); }
.lm__class-band { transition: opacity var(--lm-d-fast) var(--lm-ease); }
.lm__axis-line  { stroke: var(--lm-legend-tick); stroke-width: 1px; }
.lm__axis-tick  { stroke: var(--lm-legend-tick); stroke-width: 1px; }
.lm__axis-num   { font-size: 11px; font-weight: 540; fill: var(--lm-ink-2);
  font-variant-numeric: tabular-nums; }
.lm__class-n    { font-size: 10px; font-weight: 540; fill: var(--lm-muted);
  font-variant-numeric: tabular-nums; }
.lm__cursor     { stroke: var(--lm-select-ring); stroke-width: 1.5px; opacity: 0;
  transition: opacity var(--lm-d-fast) var(--lm-ease); }
.lm__cursor-cap { fill: var(--lm-select-ring); opacity: 0;
  transition: opacity var(--lm-d-fast) var(--lm-ease); }
.lm[data-cursor="on"] .lm__cursor,
.lm[data-cursor="on"] .lm__cursor-cap { opacity: 1; }

/* the two off-scale keys, stated as words beside the scale */
.lm__offscale { display: flex; gap: 16px; margin-top: 10px; flex-wrap: wrap; }
.lm__offscale span { display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--t-cap, .8125rem); color: var(--lm-ink-2); font-weight: 500; }
.lm__swatch { width: 15px; height: 15px; border-radius: 2px; border: 1px solid var(--lm-edge);
  display: inline-block; }

/* ============================ readout rail =============================== */

.lm__rail {
  position: relative; border-radius: var(--lm-radius-l2);
  border: 1px solid var(--lm-edge); background: var(--lm-fill-1);
  -webkit-backdrop-filter: blur(20px) saturate(1.35); backdrop-filter: blur(20px) saturate(1.35);
  box-shadow: inset 0 1px 0 var(--lm-edge-soft), 0 4px 12px rgba(0,0,0,.5),
              0 34px 72px -22px rgba(0,0,0,.78);
  padding: 20px 20px 18px; min-height: 340px;
}
.lm__rail::before { content: ""; position: absolute; top: 0; left: 14%; right: 14%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--lm-glow), transparent); }

.lm__rail-eyebrow { font-size: var(--t-eyebrow, .72rem); letter-spacing: .12em; text-transform: uppercase;
  color: var(--lm-muted); font-weight: 600; }
.lm__rail-name { margin: 8px 0 2px; font-size: var(--t-h2, 1.5rem); font-weight: 620; letter-spacing: -.02em;
  line-height: 1.15; }
.lm__rail-place { font-size: var(--t-cap, .8125rem); color: var(--lm-muted); font-weight: 500; }

.lm__rail-lead { margin-top: 16px; }
.lm__rail-fig { font-size: var(--f-3, 1.75rem); font-weight: 640; letter-spacing: -.03em; line-height: 1;
  font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 9px; }
.lm__rail-fig small { font-size: var(--t-cap, .8125rem); font-weight: 500; color: var(--lm-ink-2);
  letter-spacing: 0; }

/* the share stack — the disposition split drawn, not just listed */
.lm__shares { margin-top: 16px; display: grid; gap: 9px; }
.lm__share { display: grid; grid-template-columns: 74px 1fr 52px; align-items: center; gap: 10px;
  font-size: var(--t-cap, .8125rem); color: var(--lm-ink-2); font-weight: 500; }
/* ELEGANCE 3.7 — a 1px hair track the full width, quarter ticks, the measured
   extent at 2px in --ink-2 and a 1px x 11 tick at the value. No filled track,
   no rounded bar, no gradient. */
.lm__share-bar { position: relative; height: 11px; }
.lm__share-bar::before { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 1px;
  background: var(--lm-edge); }
.lm__share-bar::after { content: ""; position: absolute; left: 0; top: 5px; height: 1px;
  width: var(--w, 0%); background: var(--lm-ink-2); transform: scaleY(2); transform-origin: top;
  transition: width var(--lm-d-slow) var(--lm-ease); }
.lm__share-bar i { position: absolute; top: 0; left: var(--w, 0%); width: 1px; height: 11px;
  background: var(--lm-ink); transition: left var(--lm-d-slow) var(--lm-ease); }
.lm__share[data-active="true"] .lm__share-bar i { background: var(--lm-blue);
  box-shadow: 0 0 6px var(--lm-glow-strong); }
.lm__share[data-active="true"] { color: var(--lm-ink); }
.lm__share-val { text-align: right; color: var(--lm-ink); font-variant-numeric: tabular-nums;
  font-weight: 600; }

.lm__rows { margin-top: 16px; border-top: 1px solid var(--lm-edge-soft); }
.lm__row { display: flex; align-items: baseline; gap: 10px; padding: 9px 0;
  border-bottom: 1px solid var(--lm-edge-soft); font-size: var(--t-cap, .8125rem); }
.lm__row-k { color: var(--lm-muted); font-weight: 500; }
.lm__row-v { margin-left: auto; color: var(--lm-ink); font-weight: 600;
  font-variant-numeric: tabular-nums; text-align: right; }
.lm__row-v[data-withheld="true"] { color: var(--lm-ink-2); font-weight: 500; text-align: right;
  max-width: 20ch; line-height: 1.35; }

/* gate: the WORD, with the hue only on a 6px dot (§6.2) */
.lm__gate { display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-eyebrow, .72rem); letter-spacing: .1em; text-transform: uppercase;
  color: var(--lm-muted); font-weight: 600; }
/* ELEGANCE 2.5 — the default gate is the WORD and nothing else: no dot, no glow.
   Only a non-default gate earns a mark, and the mark is a 1x9px hairline. */
.lm__gate-dot { width: 1px; height: 9px; border-radius: 0; background: transparent; }
.lm__gate[data-gate="pass"] .lm__gate-dot { display: none; }
.lm__gate[data-gate="watch"]      .lm__gate-dot { background: var(--warn, #E2B94B); }
.lm__gate[data-gate="stale"]      .lm__gate-dot { background: var(--warn, #E2B94B); }
.lm__gate[data-gate="withheld"]   .lm__gate-dot { background: var(--lm-ink-2); }
.lm__gate[data-gate="structural"] .lm__gate-dot { background: var(--lm-ink-2); }
.lm__gate[data-gate="watch"], .lm__gate[data-gate="stale"] { color: var(--warn, #E2B94B); }
.lm__gate[data-gate="withheld"], .lm__gate[data-gate="structural"] { color: var(--lm-ink-2); }

.lm__rail-foot { margin-top: 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lm__open { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px;
  border-radius: var(--lm-radius-ctl); border: 1px solid var(--lm-edge); background: var(--lm-fill-2);
  color: var(--lm-ink); font-size: 13.5px; font-weight: 540; text-decoration: none;
  box-shadow: inset 0 1px 0 var(--lm-edge-soft);
  transition: border-color var(--lm-d-fast) var(--lm-ease), transform var(--lm-d-fast) var(--lm-ease); }
.lm__open:hover { border-color: var(--lm-glow); transform: translateY(-1px); }
.lm__receipt { font-size: var(--t-eyebrow, .72rem); color: var(--lm-muted); font-weight: 500;
  line-height: 1.45; }

/* the rest state of the rail: not blank — it says what a click will do */
.lm__rail[data-state="rest"] .lm__rail-name { color: var(--lm-ink-2); font-weight: 560; }

/* ---- withheld inside the rail (§6.3): a sentence at h2 weight, and the
   FRAME of the visual with nothing filled ------------------------------- */
.lm__withheld-line { font-size: var(--t-body, 1.03rem); font-weight: 500; color: var(--lm-ink-2);
  line-height: 1.45; margin-top: 14px; }
.lm__frame-only { margin-top: 14px; height: 62px; border-radius: var(--lm-radius-ctl);
  border: 1px dashed var(--lm-edge); background:
    repeating-linear-gradient(135deg, transparent 0 7px, var(--lm-edge-soft) 7px 8px); }

/* ---- loading (§6.3): the frame at rest + one hairline that travels once -- */
.lm__rail[data-state="loading"] { overflow: hidden; }
.lm__rail[data-state="loading"]::after {
  content: ""; position: absolute; top: 0; left: -40%; width: 40%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--lm-blue-2), transparent);
  animation: lm-travel var(--lm-d-slow) linear infinite;
}
@keyframes lm-travel { to { left: 100%; } }

/* ============================ tooltip ==================================== */

.lm__tip {
  position: absolute; z-index: 8; pointer-events: none; opacity: 0;
  padding: 9px 12px; border-radius: var(--lm-radius-l2);
  border: 1px solid var(--lm-edge); background: rgba(11,13,17,.86);
  -webkit-backdrop-filter: blur(20px) saturate(1.35); backdrop-filter: blur(20px) saturate(1.35);
  box-shadow: 0 10px 30px -8px rgba(0,0,0,.8), inset 0 1px 0 var(--lm-edge-soft);
  transform: translate(14px, -50%);
  transition: opacity var(--lm-d-fast) var(--lm-ease);
  min-width: 178px; max-width: 250px;
}
.lm__tip[data-on="true"] { opacity: 1; }
.lm__tip-name { font-size: 13.5px; font-weight: 600; color: var(--lm-ink); letter-spacing: -.01em; }
.lm__tip-place { font-size: 11px; color: var(--lm-muted); font-weight: 500; margin-top: 1px; }
.lm__tip-fig { margin-top: 7px; font-size: 19px; font-weight: 640; letter-spacing: -.02em;
  color: var(--lm-ink); font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 7px; }
.lm__tip-fig small { font-size: 11px; font-weight: 500; color: var(--lm-ink-2); letter-spacing: 0; }
.lm__tip-rows { margin-top: 6px; display: grid; gap: 3px; }
.lm__tip-row { display: flex; gap: 10px; font-size: 11.5px; color: var(--lm-ink-2); font-weight: 500; }
.lm__tip-row b { margin-left: auto; color: var(--lm-ink); font-weight: 600;
  font-variant-numeric: tabular-nums; }

/* ============================ states sheet =============================== */

.lm--empty .lm__plot,
.lm--error .lm__plot { opacity: .5; }

.lm__overlay { position: absolute; inset: 0; display: grid; place-items: center; z-index: 4;
  padding: 24px; text-align: center; pointer-events: none; }
.lm__overlay p { margin: 0; max-width: 34ch; font-size: var(--t-body, 1.03rem); color: var(--lm-ink-2);
  line-height: 1.5; font-weight: 500; }
.lm__overlay .lm__overlay-act { margin-top: 14px; pointer-events: auto; }

/* ============================ responsive ================================= */

@media (max-width: 1080px) {
  .lm { grid-template-columns: minmax(0, 1fr); }
  .lm { --lm-rail-w: auto; }
}
@media (max-width: 620px) {
  .lm { --lm-pad: 16px; --lm-gap: 16px; --lm-radius: 16px; --lm-label-size: 10px; }
  .lm__head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .lm__switch { margin-left: 0; }
  .lm__legend { padding-bottom: 16px; }
  /* below 620 the placed labels are noise — the tap readout carries the name */
  .lm__label, .lm__leader { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lm *, .lm *::before, .lm *::after {
    transition-duration: 1ms !important; animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ============================================================================
   POINTS MODE — the graduated-symbol instrument.
   Used where the unit is a court and the estate publishes no boundary for it:
   the base is geography as GROUND carrying no datum, and the mark sits at the
   court's real seat. Area is a count; fill is the class.
   ========================================================================== */

.lm { --lm-base-fill: #070A0E; --lm-seat-stroke: rgba(5,6,8,.72); --lm-seat-stroke-w: .9px;
      --lm-zero-stroke: rgba(183,193,206,.42); }

.lm__basepoly { fill: var(--lm-base-fill); stroke: none; }

.lm__seat {
  stroke: var(--lm-seat-stroke); stroke-width: var(--lm-seat-stroke-w);
  transition: fill var(--lm-d-med) var(--lm-ease), stroke var(--lm-d-fast) var(--lm-ease),
              r var(--lm-d-med) var(--lm-ease);
}
/* a measured zero: an open ring, so it is present and countable but obviously
   carries no magnitude. It is NOT step 0 and it is NOT the no-data hatch. */
.lm__seat[data-state="zero"]     { fill: none; stroke: var(--lm-zero-stroke); stroke-width: 1px; }
.lm__seat[data-state="nodata"]   { fill: none; stroke: var(--lm-nodata-hatch); stroke-width: 1px;
                                   stroke-dasharray: 2 2; }
.lm__seat[data-state="withheld"] { fill: var(--lm-withheld-fill);
                                   stroke: var(--lm-withheld-hatch); stroke-width: 1.2px; }

.lm__swatch--zero { background: none; border-color: var(--lm-zero-stroke); border-radius: 50%; }

/* the size key — three stated counts at the exact radii the map draws */
/* the size key and the off-scale words sit on ONE row: both are keys to the
   same scale, and stacking them pushed the legend out of the fold. */
.lm__legend-foot { display: flex; align-items: flex-start; gap: 34px; flex-wrap: wrap;
  margin-top: 10px; }
.lm__sizekey { flex: 0 0 auto; }
.lm__legend-foot .lm__offscale { flex: 1 1 260px; margin-top: 0; flex-direction: column; gap: 6px; }
.lm__sizekey .lm__legend-head { margin-bottom: 4px; }
.lm__sizekey-svg { display: block; width: 100%; max-width: 330px; height: 54px; overflow: visible; }
.lm__sizekey-c { fill: var(--lm-step-3); stroke: var(--lm-seat-stroke); stroke-width: .9px; }
.lm__sizekey-l { stroke: var(--lm-leader); stroke-width: .8px; }
.lm__sizekey-t { font-size: 10.5px; font-weight: 540; fill: var(--lm-ink-2);
  font-variant-numeric: tabular-nums; }

/* in points mode the state polygons carry no datum, so the seams may be a touch
   brighter than in the choropleth without competing with anything */
.lm[data-mode="points"] { --lm-seam-state: rgba(255,255,255,.10); }

/* off the projection: a court Albers USA has no frame for. Named, with its real
   figure, beside the scale — never dropped and never drawn somewhere it is not. */
.lm__swatch--off { background: none; border-style: dashed; border-color: var(--lm-leader);
  border-radius: 50%; }
.lm__offproj { color: var(--lm-ink-2); }

/* narrow: the legend head is three flex children with an auto-margin on the
   count, which at 390px broke into three ragged columns. Stack it instead. */
@media (max-width: 700px) {
  .lm__legend-head { display: block; }
  .lm__legend-title { display: block; }
  .lm__legend-unit, .lm__legend-n { display: inline; margin-left: 0; }
  .lm__legend-n::before { content: " · "; }
  .lm__legend-foot { gap: 18px; }
  .lm__legend-svg { height: 104px; }
}