/* ============================================================
   ATLAS - coverage-map.css
   Zone coverage map section. Loaded only on the homepage, so the
   other 15 pages don't carry it.

   Depends on the tokens in style.css (--brand, --border, --text-*,
   --mono, --r-*, --shadow-*, --ease-out).
   ============================================================ */

/* ------------------------------------------------------------
   Section shell
   ------------------------------------------------------------ */
.coverage-section {
  padding: 88px var(--pad-x) 96px;
  background:
    radial-gradient(120% 80% at 50% 0%, #eef4f2 0%, rgba(238,244,242,0) 62%),
    var(--bg);
  border-block: 1px solid var(--border);
}

.coverage-inner {
  max-width: var(--max-w);
  margin-inline: auto;
}

.coverage-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px 40px;
  margin-bottom: 26px;
}

.coverage-header .section-title { margin-bottom: 10px; }
.coverage-header .section-sub   { max-width: 56ch; margin: 0; }

/* Sample-data disclosure. Deliberately visible: the roster is
   illustrative, and the UI should not imply otherwise. */
.cov-sample {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 6px 13px;
  white-space: nowrap;
}
.cov-sample svg { flex: none; color: var(--text-3); }

/* ------------------------------------------------------------
   Control bar: workstream chips + market segmented control
   ------------------------------------------------------------ */
.cov-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  margin-bottom: 18px;
}

.cov-controls__label {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  flex: none;
}

.cov-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.cov-chip {
  --uc: var(--brand);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-1);
  background: var(--surface);
  border: 1.5px solid var(--border-2);
  border-radius: var(--r-pill);
  padding: 7px 14px 7px 12px;
  cursor: pointer;
  transition: border-color 180ms var(--ease-out),
              background 180ms var(--ease-out),
              color 180ms var(--ease-out),
              opacity 180ms var(--ease-out);
}
.cov-chip__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--uc);
  flex: none;
  transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}
.cov-chip__count {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--text-3);
  padding-left: 2px;
}
.cov-chip:hover        { border-color: var(--uc); background: #fbfbfd; }
.cov-chip:hover .cov-chip__dot { transform: scale(1.18); }
.cov-chip:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.cov-chip[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--uc) 55%, transparent);
  background: color-mix(in srgb, var(--uc) 8%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--uc) 16%, transparent);
}
.cov-chip[aria-pressed="true"] .cov-chip__dot {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--uc) 20%, transparent);
}
.cov-chip.is-off {
  opacity: 0.44;
  border-color: var(--border);
  background: var(--surface);
}
.cov-chip.is-off .cov-chip__dot { background: var(--text-3); }
.cov-chip.is-off:hover { opacity: 0.8; }

.cov-controls__spacer { flex: 1 1 auto; }

.cov-seg-wrap {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--bg-2);
  border-radius: var(--r-pill);
}
.cov-seg {
  font-family: var(--font);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-2);
  background: transparent;
  border: none;
  border-radius: var(--r-pill);
  padding: 6px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 180ms var(--ease-out), color 180ms var(--ease-out),
              box-shadow 180ms var(--ease-out);
}
.cov-seg:hover { color: var(--text-1); }
.cov-seg:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.cov-seg.is-active {
  color: var(--text-1);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.cov-reset {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-2);
  background: none;
  border: none;
  border-bottom: 1px solid var(--border-2);
  padding: 3px 1px;
  cursor: pointer;
  transition: color 180ms var(--ease-out), border-color 180ms var(--ease-out);
}
.cov-reset:hover { color: var(--brand-dark); border-color: var(--brand); }
.cov-reset:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ------------------------------------------------------------
   Summary line
   ------------------------------------------------------------ */
.cov-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 0.86rem;
  color: var(--text-2);
  margin-bottom: 16px;
  padding-inline: 2px;
}
.cov-sum__item b {
  font-family: var(--mono);
  font-weight: 600;
  color: var(--text-1);
}
.cov-sum__item.is-gap b { color: var(--red); }
.cov-sum__sep { color: var(--text-3); }

/* ------------------------------------------------------------
   Map + panel split
   ------------------------------------------------------------ */
.cov-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.62fr) minmax(320px, 0.98fr);
  gap: 18px;
  align-items: stretch;
}

/* The wrap is a column: canvas on top, legend as a real row beneath it,
   so the legend can never cover a zone. */
.cov-mapwrap {
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(165deg, #eef4f2, #e6eeeb);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

#cov-map { flex: 1 1 auto; min-height: 500px; }

/* MapLibre creates its own stacking context inside the canvas container;
   keep our overlay chrome above it without absurd z-index values. */
.cov-mapwrap > .cov-livetag,
.cov-mapwrap > .cov-ridertag,
.cov-mapwrap > .cov-notice,
.cov-mapwrap > .cov-loading { z-index: 2; }

.cov-livetag {
  position: absolute;
  top: 14px; left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 0.63rem;
  color: var(--text-2);
  background: rgba(255,255,255,0.86);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 6px 12px;
}

/* Legend: a row under the canvas, wrapping on narrow screens. */
.cov-legend {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 11px 16px;
}
.cov-legend__title {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-3);
  flex: none;
}
.cov-legend__row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  color: var(--text-2);
  line-height: 1.35;
}
.cov-legend__swatch {
  width: 16px; height: 10px;
  border-radius: 2px;
  flex: none;
  border: 1px solid rgba(13,21,32,0.12);
}
.cov-legend__swatch.is-deep { background: rgba(21,160,135,0.40); }
.cov-legend__swatch.is-gap  { background: rgba(209,73,91,0.10); border-color: rgba(209,73,91,0.65); }
.cov-legend__swatch.is-rider {
  border: none;
  background: radial-gradient(circle 3.2px at 9px 5px, #15a087 60%, rgba(21,160,135,0.22) 62%, transparent 100%);
}
/* Three overlapping dots standing in for the per-person markers */
.cov-legend__swatch.is-dots {
  border: none;
  background:
    radial-gradient(circle 2.6px at 3.5px 5px, #15a087 98%, transparent 100%),
    radial-gradient(circle 2.6px at 9px 5px, #e0703a 98%, transparent 100%),
    radial-gradient(circle 2.6px at 14.5px 5px, #2f6fed 98%, transparent 100%);
}

/* Loading + fallback states */
.cov-loading,
.cov-notice {
  position: absolute;
  inset: auto 14px 14px auto;
  max-width: 320px;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--text-2);
  background: rgba(255,255,255,0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 11px 14px;
}
.cov-notice { border-left: 3px solid var(--amber); }
.cov-loading { display: none; }
.coverage-section.is-loading .cov-loading { display: block; }

/* No basemap: the wrap collapses to a compact explainer and the
   zone strip plus panel carry the whole story. */
.coverage-section.is-mapless .cov-mapwrap {
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 34px;
  background:
    repeating-linear-gradient(135deg, #eef4f2 0 12px, #e9f1ee 12px 24px);
}
.coverage-section.is-mapless .cov-livetag,
.coverage-section.is-mapless .cov-legend { display: none; }
.coverage-section.is-mapless .cov-notice {
  position: static;
  inset: auto;
  max-width: 420px;
  text-align: center;
  border-left: none;
  border-top: 3px solid var(--amber);
}
.coverage-section.is-mapless .cov-grid {
  grid-template-columns: minmax(0, 1fr);
}

/* ------------------------------------------------------------
   Zone badges (map overlay)

   Each badge carries one dot per person, so every individual is on the
   map at the default zoom without needing pins that would collide.
   Below BADGE_DETAIL_ZOOM the badge drops to `.is-compact`: a count-only
   pill, because eight full badges cannot coexist at 900km across.
   ------------------------------------------------------------ */
/* MapLibre writes `transform` on the element it is handed, so the styled
   badge/pin sits one level inside this wrapper and keeps its own
   transform free for hover and entry animation. */
.cov-marker { line-height: 0; }
.cov-marker > * { line-height: 1.75; }

.cov-badge {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font);
  background: var(--surface);
  border: 1.5px solid var(--brand-border);
  border-radius: var(--r);
  padding: 7px 9px 8px;
  box-shadow: 0 1px 2px rgba(16,24,40,0.06), 0 6px 18px rgba(16,24,40,0.10);
  transition: transform 200ms var(--ease-spring), box-shadow 200ms var(--ease-out),
              border-color 180ms var(--ease-out), opacity 180ms var(--ease-out);
  white-space: nowrap;
}
.cov-badge:hover,
.cov-badge.is-hover {
  transform: scale(1.05);
  box-shadow: 0 2px 4px rgba(16,24,40,0.08), 0 12px 30px rgba(21,160,135,0.22);
  border-color: var(--brand);
}
.cov-badge.is-dim { opacity: 0.42; }
.cov-badge.is-selected { border-color: var(--brand); }
.cov-badge.is-gap { border-color: rgba(209,73,91,0.5); }
.cov-badge.is-gap:hover, .cov-badge.is-gap.is-hover { border-color: var(--red); }

/* Zone header: selects the zone */
.cov-badge__zone {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
}
.cov-badge__zone:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: var(--r-xs); }

.cov-badge__count {
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 600;
  color: #fff;
  background: var(--brand);
  flex: none;
}
.cov-badge.is-thin .cov-badge__count { background: var(--amber); }
.cov-badge.is-gap  .cov-badge__count { background: var(--red); }

.cov-badge__meta { display: flex; flex-direction: column; line-height: 1.2; }
.cov-badge__code {
  font-family: var(--mono);
  font-size: 0.54rem;
  letter-spacing: 0.07em;
  color: var(--text-3);
}
.cov-badge__name { font-size: 0.78rem; font-weight: 600; color: var(--text-1); }

/* One dot per person */
.cov-badge__dots {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 104px;
  padding-top: 1px;
}
.cov-badge__dot {
  position: relative;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--uc);
  border: 1.5px solid #fff;
  box-shadow: 0 1px 3px rgba(16,24,40,0.22);
  padding: 0;
  cursor: pointer;
  flex: none;
  transition: transform 180ms var(--ease-spring), box-shadow 180ms var(--ease-out),
              opacity 180ms var(--ease-out);
}
.cov-badge__dot:hover,
.cov-badge__dot.is-selected {
  transform: scale(1.35);
  box-shadow: 0 2px 6px rgba(16,24,40,0.3);
  z-index: 1;
}
.cov-badge__dot.is-selected { border-color: var(--uc); outline: 1.5px solid #fff; }
.cov-badge__dot.is-dim { opacity: 0.34; }
.cov-badge__dot:focus-visible { outline: 2px solid var(--text-1); outline-offset: 2px; }

.cov-badge__nocover {
  font-family: var(--mono);
  font-size: 0.55rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8f2f3c;
  background: #fbeaec;
  border-radius: var(--r-xs);
  padding: 3px 7px;
  align-self: flex-start;
}

/* Person tooltip on a dot. Same treatment as the pin tooltip. */
.cov-badge__tip {
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  transform: translate(-50%, 4px);
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 146px;
  text-align: left;
  background: var(--dark);
  color: #fff;
  border-radius: var(--r-sm);
  padding: 8px 11px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms var(--ease-out), transform 200ms var(--ease-out);
}
.cov-badge__tip b { font-size: 0.79rem; font-weight: 600; line-height: 1.3; white-space: nowrap; }
.cov-badge__tip span { font-size: 0.68rem; color: rgba(255,255,255,0.62); line-height: 1.35; }
.cov-badge__tipuc {
  font-family: var(--mono);
  font-size: 0.57rem !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--uc) !important;
  margin-top: 3px;
}
.cov-badge__dot:hover .cov-badge__tip,
.cov-badge__dot:focus-visible .cov-badge__tip,
.cov-badge__dot.is-selected .cov-badge__tip {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Zoomed-out density: count only */
.cov-badge.is-compact {
  flex-direction: row;
  border-radius: var(--r-pill);
  padding: 4px;
  gap: 0;
}
.cov-badge.is-compact .cov-badge__dots,
.cov-badge.is-compact .cov-badge__nocover,
.cov-badge.is-compact .cov-badge__meta { display: none; }

/* ------------------------------------------------------------
   Person pins (map overlay)
   ------------------------------------------------------------ */
.cov-pin {
  --uc: var(--brand);
  position: relative;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  animation: cov-pin-in 320ms var(--ease-spring) both;
  transition: opacity 180ms var(--ease-out);
}
@keyframes cov-pin-in {
  from { opacity: 0; transform: scale(0.5) }
  to   { opacity: 1; transform: scale(1) }
}
.cov-pin.is-dim { opacity: 0.34; }

.cov-pin__dot {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50% 50% 50% 2px;
  transform: rotate(-45deg);
  background: var(--uc);
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(16,24,40,0.22), 0 8px 20px rgba(16,24,40,0.14);
  transition: transform 220ms var(--ease-spring), box-shadow 200ms var(--ease-out);
}
.cov-pin__initials {
  transform: rotate(45deg);
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.01em;
}
.cov-pin:hover .cov-pin__dot,
.cov-pin.is-selected .cov-pin__dot {
  transform: rotate(-45deg) scale(1.16);
  box-shadow: 0 3px 10px rgba(16,24,40,0.26), 0 12px 28px rgba(16,24,40,0.18);
}
.cov-pin.is-selected .cov-pin__dot {
  border-color: var(--uc);
  outline: 2px solid #fff;
}
.cov-pin:focus-visible { outline: none; }
.cov-pin:focus-visible .cov-pin__dot {
  outline: 2px solid var(--text-1);
  outline-offset: 3px;
}

/* Pin tooltip: hover reveal, no layout shift, never blocks the pointer */
.cov-pin__tip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translate(-50%, 4px);
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 148px;
  text-align: left;
  background: var(--dark);
  color: #fff;
  border-radius: var(--r-sm);
  padding: 8px 11px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms var(--ease-out), transform 200ms var(--ease-out);
}
.cov-pin__tip b { font-size: 0.79rem; font-weight: 600; line-height: 1.3; }
.cov-pin__tip span { font-size: 0.68rem; color: rgba(255,255,255,0.62); line-height: 1.35; }
.cov-pin__tipuc {
  font-family: var(--mono);
  font-size: 0.58rem !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--uc) !important;
  margin-top: 3px;
}
.cov-pin:hover .cov-pin__tip,
.cov-pin:focus-visible .cov-pin__tip,
.cov-pin.is-selected .cov-pin__tip {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ------------------------------------------------------------
   Inspector panel
   ------------------------------------------------------------ */
.cov-panel {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px;
  box-shadow: var(--shadow-md);
  max-height: 620px;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Fade the last few pixels so overflowing content reads as scrollable
     rather than cut off mid-row. */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent 100%);
}

.cov-panel__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.cov-panel__eyebrow,
.cov-panel__scope {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cov-panel__eyebrow { color: var(--text-1); font-weight: 500; }
.cov-panel__scope   { color: var(--text-3); text-align: right; }

.cov-back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-dark);
  background: none;
  border: none;
  padding: 2px 0;
  cursor: pointer;
  transition: gap 180ms var(--ease-out), color 180ms var(--ease-out);
}
.cov-back:hover { gap: 8px; color: var(--brand); }
.cov-back:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.cov-panel__zonehead {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}
.cov-panel__zonecode {
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--brand-dark);
  background: var(--brand-soft);
  border-radius: var(--r-xs);
  padding: 3px 8px;
}
.cov-panel__zonename {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-1);
  margin: 0;
}
.cov-panel__badge {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  padding: 4px 10px;
  margin-left: auto;
  white-space: nowrap;
}
.cov-panel__badge.is-covered { background: var(--brand-soft); color: var(--brand-dark); }
.cov-panel__badge.is-thin    { background: #fdf3e2; color: #8a5a10; }
.cov-panel__badge.is-gap     { background: #fbeaec; color: #8f2f3c; }

.cov-panel__areas {
  font-size: 0.8rem;
  color: var(--text-3);
  margin-top: 8px;
  line-height: 1.6;
}

.cov-panel__big { margin: 22px 0 4px; }
.cov-panel__bignum {
  display: block;
  font-size: 3.1rem;
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}
.cov-panel__bigcap {
  display: block;
  font-size: 0.8rem;
  color: var(--text-3);
  margin-top: 8px;
  line-height: 1.55;
}
.cov-panel__bigcap em { font-style: normal; color: var(--text-2); }

.cov-panel__rows { display: flex; flex-direction: column; margin-top: 18px; }
.cov-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.86rem;
  color: var(--text-2);
}
.cov-row b {
  font-family: var(--mono);
  font-weight: 600;
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
}
.cov-row b.is-gap { color: var(--red); }

.cov-panel__h {
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 24px 0 12px;
}
.cov-panel__empty {
  font-size: 0.84rem;
  color: var(--text-2);
  line-height: 1.65;
  background: var(--bg-2);
  border-radius: var(--r-sm);
  padding: 12px 14px;
}
.cov-panel__hint {
  font-size: 0.76rem;
  color: var(--text-3);
  margin-top: auto;
  padding-top: 20px;
  line-height: 1.6;
}

/* Workstream distribution bars */
.cov-bars { display: flex; flex-direction: column; gap: 9px; }
.cov-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px 26px;
  align-items: center;
  gap: 10px;
}
.cov-bar__label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8rem;
  color: var(--text-2);
  min-width: 0;
}
.cov-bar__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cov-bar__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--uc);
  flex: none;
}
.cov-bar__track {
  height: 6px;
  border-radius: 3px;
  background: var(--bg-2);
  overflow: hidden;
}
.cov-bar__fill {
  display: block;
  height: 100%;
  width: var(--pct, 0%);
  border-radius: 3px;
  background: var(--uc);
  transition: width 420ms var(--ease-out);
}
.cov-bar__val {
  font-family: var(--mono);
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-1);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Gap shortcuts */
.cov-gaps { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.cov-gaplink {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  font-family: var(--font);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-1);
  text-align: left;
  background: #fdf6f7;
  border: 1px solid rgba(209,73,91,0.2);
  border-radius: var(--r-sm);
  padding: 9px 12px;
  cursor: pointer;
  transition: border-color 180ms var(--ease-out), background 180ms var(--ease-out);
}
.cov-gaplink:hover { border-color: rgba(209,73,91,0.55); background: #fbeaec; }
.cov-gaplink:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.cov-gaplink__code {
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: #8f2f3c;
  background: #fbeaec;
  border-radius: var(--r-xs);
  padding: 2px 6px;
  flex: none;
}
.cov-gaplink__areas {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 400;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* People list */
.cov-people { list-style: none; display: flex; flex-direction: column; gap: 5px; }
.cov-person {
  --uc: var(--brand);
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 9px 11px;
  cursor: pointer;
  transition: border-color 180ms var(--ease-out), background 180ms var(--ease-out),
              transform 180ms var(--ease-out);
}
.cov-person:hover {
  border-color: color-mix(in srgb, var(--uc) 45%, transparent);
  background: #fbfbfd;
  transform: translateX(2px);
}
.cov-person:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.cov-person.is-selected {
  border-color: var(--uc);
  background: color-mix(in srgb, var(--uc) 6%, var(--surface));
}
.cov-person__avatar {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 600;
  color: #fff;
  background: var(--uc);
  flex: none;
}
.cov-person__body { display: flex; flex-direction: column; min-width: 0; line-height: 1.32; }
.cov-person__name {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cov-person__role {
  font-size: 0.72rem;
  color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cov-person__uc {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--uc);
  background: color-mix(in srgb, var(--uc) 10%, transparent);
  border-radius: var(--r-xs);
  padding: 3px 7px;
  flex: none;
}

/* ------------------------------------------------------------
   Zone strip
   ------------------------------------------------------------ */
.cov-strip-wrap { margin-top: 18px; }
.cov-strip-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 10px;
}

.cov-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(168px, 1fr);
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: thin;
  /* Fade the right edge so a clipped card reads as "scroll for more". */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent 100%);
}
/* Once everything fits, the fade would be a lie. */
@media (min-width: 1500px) {
  .cov-strip { -webkit-mask-image: none; mask-image: none; }
}

.cov-zonecard {
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-align: left;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  padding: 13px 14px 12px;
  cursor: pointer;
  transition: border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out),
              transform 180ms var(--ease-out);
}
.cov-zonecard:hover,
.cov-zonecard.is-hover {
  border-color: var(--brand-border);
  box-shadow: 0 2px 4px rgba(16,24,40,0.04), 0 10px 24px rgba(21,160,135,0.12);
  transform: translateY(-2px);
}
.cov-zonecard:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.cov-zonecard.is-selected {
  border-color: var(--brand);
  box-shadow: 0 2px 4px rgba(16,24,40,0.05), 0 12px 28px rgba(21,160,135,0.18);
}
.cov-zonecard.is-gap { border-color: rgba(209,73,91,0.28); background: #fdf8f9; }
.cov-zonecard.is-gap:hover, .cov-zonecard.is-gap.is-hover { border-color: rgba(209,73,91,0.6); }
.cov-zonecard.is-gap.is-selected { border-color: var(--red); }

.cov-zonecard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.cov-zonecard__code {
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  color: var(--text-3);
}
.cov-zonecard__state {
  font-family: var(--mono);
  font-size: 0.53rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--brand-dark);
  background: var(--brand-soft);
  border-radius: var(--r-xs);
  padding: 2px 6px;
  white-space: nowrap;
}
.cov-zonecard.is-thin .cov-zonecard__state { color: #8a5a10; background: #fdf3e2; }
.cov-zonecard.is-gap  .cov-zonecard__state { color: #8f2f3c; background: #fbeaec; }

.cov-zonecard__name {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-1);
}
.cov-zonecard__num {
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-family: var(--mono);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-1);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.cov-zonecard.is-gap .cov-zonecard__num { color: var(--red); }
.cov-zonecard__unit {
  font-family: var(--font);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-3);
}

.cov-stripe {
  display: flex;
  height: 5px;
  border-radius: 3px;
  overflow: hidden;
  margin-top: 3px;
  background: var(--bg-2);
}
.cov-stripe__seg {
  flex: var(--flex, 1);
  background: var(--uc);
  transition: flex-grow 320ms var(--ease-out);
}
.cov-stripe__seg.is-empty { background: repeating-linear-gradient(45deg, #eceef1 0 4px, #e2e5ea 4px 8px); }

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */
@media (max-width: 1080px) {
  .cov-grid { grid-template-columns: minmax(0, 1fr); }
  #cov-map { min-height: 440px; }
  .cov-panel { max-height: none; }
}

@media (max-width: 900px) {
  .coverage-header { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .cov-controls { gap: 12px 14px; }
  .cov-controls__spacer { display: none; }
  .cov-seg-wrap { width: 100%; justify-content: space-between; }
  .cov-seg { flex: 1 1 auto; text-align: center; }
}

@media (max-width: 768px) {
  .coverage-section { padding: 64px var(--pad-x) 72px; }
  #cov-map { min-height: 380px; }
  .cov-legend { gap: 6px 14px; padding: 10px 12px; }
  .cov-legend__row { font-size: 0.66rem; }
  .cov-strip { grid-auto-columns: minmax(152px, 1fr); }
  .cov-panel { padding: 20px; }
  .cov-panel__bignum { font-size: 2.6rem; }
}

@media (max-width: 640px) {
  /* The two map tags collide at this width. The rider count is the live
     one, so it stays; the zone count is already stated in the header. */
  .cov-livetag { display: none; }
}

@media (max-width: 480px) {
  #cov-map { min-height: 320px; }
  .cov-controls { padding: 14px; }
  .cov-controls__label { width: 100%; }
  .cov-chip { font-size: 0.76rem; padding: 6px 12px 6px 10px; }
  .cov-chip__label { max-width: 118px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cov-legend { display: none; }
  .cov-bar { grid-template-columns: minmax(0, 1fr) 52px 22px; }
  .cov-panel__zonename { font-size: 1.2rem; }
}

/* ------------------------------------------------------------
   Reduced motion
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .cov-pin { animation: none; }
  .cov-badge,
  .cov-badge__dot,
  .cov-badge__tip,
  .cov-pin__dot,
  .cov-pin__tip,
  .cov-zonecard,
  .cov-person,
  .cov-bar__fill,
  .cov-stripe__seg,
  .cov-chip,
  .cov-seg { transition: none; }
  .cov-zonecard:hover,
  .cov-zonecard.is-hover { transform: none; }
  .cov-person:hover { transform: none; }
  .cov-badge:hover,
  .cov-badge.is-hover { transform: none; }
  .cov-badge__dot:hover,
  .cov-badge__dot.is-selected { transform: none; }
  .cov-pin:hover .cov-pin__dot,
  .cov-pin.is-selected .cov-pin__dot { transform: rotate(-45deg); }
  .cov-pin { animation: none; }
  .cov-badge__ridedot,
  .cov-zonecard__ridedot,
  .cov-ridertag__pulse { animation: none !important; }
}

/* ------------------------------------------------------------
   Live riders
   ------------------------------------------------------------ */
@keyframes cov-ridepulse {
  0%, 100% { opacity: 1;    transform: scale(1) }
  50%      { opacity: 0.45; transform: scale(0.72) }
}

.cov-badge__riders,
.cov-zonecard__riders {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 0.55rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-2);
}
.cov-zonecard__riders {
  font-size: 0.58rem;
  margin-top: 4px;
  padding-top: 7px;
  border-top: 1px solid var(--border);
  width: 100%;
}
.cov-badge__ridedot,
.cov-zonecard__ridedot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand);
  flex: none;
  animation: cov-ridepulse 1.8s var(--ease-out) infinite;
}
.cov-badge.is-compact .cov-badge__riders { display: none; }

/* Riders toggle */
.cov-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font);
  font-size: 0.79rem;
  font-weight: 600;
  color: var(--text-2);
  background: var(--surface);
  border: 1.5px solid var(--border-2);
  border-radius: var(--r-pill);
  padding: 6px 14px 6px 10px;
  cursor: pointer;
  transition: border-color 180ms var(--ease-out), color 180ms var(--ease-out),
              background 180ms var(--ease-out);
}
.cov-toggle:hover { border-color: var(--brand); color: var(--text-1); }
.cov-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.cov-toggle.is-on {
  color: var(--brand-dark);
  border-color: color-mix(in srgb, var(--brand) 55%, transparent);
  background: color-mix(in srgb, var(--brand) 8%, var(--surface));
}
.cov-toggle__track {
  position: relative;
  width: 26px; height: 15px;
  border-radius: var(--r-pill);
  background: var(--border-2);
  flex: none;
  transition: background 180ms var(--ease-out);
}
.cov-toggle.is-on .cov-toggle__track { background: var(--brand); }
.cov-toggle__track::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: #fff;
  transition: transform 200ms var(--ease-spring);
}
.cov-toggle.is-on .cov-toggle__track::after { transform: translateX(11px); }

/* Live rider count, top-right of the map */
.cov-ridertag {
  position: absolute;
  top: 14px; right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 0.63rem;
  color: var(--text-2);
  background: rgba(255,255,255,0.86);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 6px 12px;
}
.cov-ridertag b { color: var(--text-1); font-weight: 600; }
.cov-ridertag__warn { color: var(--accent); }
.cov-ridertag__pulse {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand);
  flex: none;
  animation: cov-ridepulse 1.8s var(--ease-out) infinite;
}
.coverage-section.is-mapless .cov-ridertag { display: none; }

/* Rider list in the zone panel */
.cov-riders { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.cov-riderrow {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--bg-2);
  border-radius: var(--r-sm);
  padding: 8px 11px;
}
.cov-riderrow__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--rs, var(--brand));
  flex: none;
}
.cov-riderrow__code {
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-1);
}
.cov-riderrow__status {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rs, var(--brand));
}

.cov-row b.is-warn { color: var(--accent); }

/* Rider tooltip (MapLibre popup) */
.cov-riderpop .maplibregl-popup-content {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--dark);
  color: #fff;
  border-radius: var(--r-sm);
  padding: 8px 11px;
  box-shadow: 0 4px 16px rgba(16,24,40,0.24);
}
.cov-riderpop .maplibregl-popup-content b { font-family: var(--mono); font-size: 0.76rem; font-weight: 600; }
.cov-riderpop .maplibregl-popup-content span { font-size: 0.67rem; color: rgba(255,255,255,0.62); }
.cov-riderpop__st {
  font-family: var(--mono);
  font-size: 0.56rem !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rs, var(--brand)) !important;
  margin-top: 2px;
}
.cov-riderpop .maplibregl-popup-tip { display: none; }

/* ------------------------------------------------------------
   MapLibre chrome, toned down to match the section
   ------------------------------------------------------------ */
.cov-mapwrap .maplibregl-ctrl-group {
  border-radius: var(--r-sm);
  box-shadow: 0 1px 2px rgba(16,24,40,0.06), 0 6px 18px rgba(16,24,40,0.1);
  border: 1px solid var(--border);
}
.cov-mapwrap .maplibregl-ctrl-group button + button { border-top: 1px solid var(--border); }
.cov-mapwrap .maplibregl-ctrl-attrib {
  font-size: 0.62rem;
  background: rgba(255,255,255,0.82);
  border-radius: var(--r-pill) 0 0 0;
}
.cov-mapwrap .maplibregl-ctrl-attrib a { color: var(--text-3); }
/* Scroll-zoom hint shown by cooperativeGestures */
.cov-mapwrap .maplibregl-cooperative-gesture-screen {
  font-family: var(--font);
  background: rgba(13,21,32,0.42);
}