:root {
  --bp-mobile: 768px; /* sheet breakpoint; media queries use 767.98px */
  --sheet-peek: 24vh; /* mobile bottom-sheet peek height (JS mirrors PEEK_VH=0.24) */
  --sheet-gap: 44px; /* map sliver above the full sheet (JS mirrors SHEET_GAP_PX=44) */
  --bg: #0c0d14;
  --bg-2: #0d0d1a;
  --surface-0: rgba(255, 255, 255, 0.025);
  --surface-1: rgba(255, 255, 255, 0.04);
  --surface-2: rgba(255, 255, 255, 0.07);
  --surface-3: rgba(255, 255, 255, 0.12);
  --panel-bg: rgba(12, 13, 20, 0.92);
  --border: rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.14);
  --mint: #39d98a;
  --mint-soft: rgba(57, 217, 138, 0.14);
  --mint-glow: rgba(57, 217, 138, 0.45);
  --amber: #f59e0b;
  --amber-soft: rgba(245, 158, 11, 0.14);
  --red: #e74c3c;
  --blue: #44aaff;
  --uncovered: #333340;
  --text-hi: #f0f4ff;
  --text: #e4e8f0;
  --text-med: #b0bcd0;
  --text-dim: #6a7a8a;
  --text-dimmer: #4a5a6a;
  --text-dimmest: #3a4a5a;
  --text-ghost: #2e3a48;
  --mono: "JetBrains Mono", "Monaco", monospace;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  min-height: 100%;
}

body {
  font-family: "Space Grotesk", system-ui, sans-serif;
  background:
    radial-gradient(circle at top left, rgba(57, 217, 138, 0.08), transparent 28%),
    radial-gradient(circle at top right, rgba(68, 170, 255, 0.08), transparent 24%),
    var(--bg);
  color: var(--text);
}

button,
input,
textarea {
  font: inherit;
}

a {
  color: inherit;
}

/* Keyboard focus ring — only for keyboard nav (:focus-visible), so mouse
   clicks stay clean. Applies to buttons, links, inputs, and the role="button"
   rows (run-row, parish-row, milestone-card). */
:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 2px;
  border-radius: 4px;
}

.hidden {
  display: none !important;
}

/* Micro-help affordance (HelpTip component): a small "?" with a bubble shown
   on hover/focus. CSS-only; bubble is aria-hidden (button carries aria-label). */
.help-tip {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}

.help-tip-btn {
  width: 16px;
  height: 16px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--surface-1);
  color: var(--text-dim);
  font-size: 0.62rem;
  line-height: 1;
  cursor: help;
}

.help-tip-btn:hover {
  color: var(--mint);
  border-color: var(--mint);
}

.help-tip-bubble {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  width: max-content;
  max-width: 220px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  background: var(--panel-bg);
  color: var(--text-med);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.4;
  text-align: left;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease;
  pointer-events: none;
}

.help-tip:hover .help-tip-bubble,
.help-tip:focus-within .help-tip-bubble {
  opacity: 1;
  visibility: visible;
}

.view {
  min-height: 100vh;
  padding-top: 52px;
}

.route-view.hidden {
  display: none;
}

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  background: var(--bg);
  border-bottom: 1px solid rgba(57, 217, 138, 0.12);
}

.topbar-left,
.topbar-right {
  display: flex;
  align-items: center;
}

.topbar-left {
  gap: 28px;
}

.topbar-right {
  gap: 14px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.brand-mark {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  display: block;
  object-fit: contain;
}

.brand b {
  color: var(--mint);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: lowercase;
}

.nav {
  display: flex;
  gap: 2px;
}

.nav-btn {
  position: relative;
  border: none;
  background: none;
  color: var(--text-dimmer);
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

.nav-btn:hover {
  color: var(--text-med);
}

a.nav-btn {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.nav-btn.active {
  color: var(--text-hi);
  background: rgba(255, 255, 255, 0.04);
}

.nav-btn.active::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -1px;
  height: 2px;
  background: var(--mint);
  border-radius: 999px;
}

.sync-dot {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.04em;
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--mint);
  box-shadow: 0 0 8px var(--mint-glow);
}

.topbar-logrun,
.topbar-share,
.overlay-actions button,
.new-runs-btn,
.share-template,
.share-side-card textarea {
  appearance: none;
}

.topbar-logrun {
  border: 1px solid rgba(57, 217, 138, 0.28);
  background: rgba(57, 217, 138, 0.12);
  color: var(--mint);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

.topbar-share,
.overlay-actions button,
.inspector-toggle,
.panel-btn,
.loc-actions button,
.rank-toggle button,
.timeline-reset,
.share-template {
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-med);
  border-radius: 8px;
  cursor: pointer;
}

.topbar-share {
  padding: 7px 12px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.topbar-share:hover,
.overlay-actions button:hover,
.panel-btn:hover,
.loc-actions button:hover,
.rank-toggle button:hover,
.timeline-reset:hover,
.share-template:hover {
  color: var(--text-hi);
  background: var(--surface-2);
}

.logrun-wrap {
  position: relative;
}

.logrun-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 280px;
  padding: 10px;
  background: rgba(15, 17, 26, 0.98);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.7);
}

/* Mobile-only overflow menu trigger (one-row topbar); hidden on desktop. */
.topbar-more {
  display: none;
}

.more-menu {
  width: 240px;
}

.lr-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: none;
  background: none;
  border-radius: 8px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.lr-item:hover {
  background: var(--surface-1);
}

.lr-item span:last-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lr-item b {
  font-size: 0.74rem;
  color: var(--text-hi);
}

.lr-item i {
  font-size: 0.65rem;
  color: var(--text-dim);
  font-style: normal;
}

.lr-glyph {
  width: 18px;
  flex: 0 0 18px;
  text-align: center;
  color: var(--mint);
}

.lr-strava {
  color: #fc4c02;
}

.lr-sep {
  height: 1px;
  margin: 8px 4px;
  background: var(--border);
}

.lr-last,
.lr-status {
  padding: 4px 12px 6px;
}

.lr-last-head {
  color: var(--text-med);
  font-size: 0.68rem;
}

.lr-last-meta,
.lr-status {
  color: var(--text-ghost);
  font-family: var(--mono);
  font-size: 0.62rem;
  line-height: 1.5;
}

#new-runs-banner {
  position: fixed;
  top: 52px;
  left: 0;
  right: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 10px 20px;
  background: rgba(30, 35, 48, 0.97);
  border-bottom: 1px solid rgba(245, 158, 11, 0.35);
}

.new-runs-msg {
  color: var(--text-hi);
  font-size: 0.82rem;
}

.new-runs-actions {
  display: flex;
  gap: 8px;
}

.new-runs-btn {
  padding: 8px 14px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.new-runs-btn.primary {
  border-color: rgba(57, 217, 138, 0.45);
  color: var(--mint);
}

.map-stage {
  display: grid;
  grid-template-columns: 340px 1fr;
  /* Fixed height + a bounded row so a tall panel (long parish / plan lists)
     scrolls WITHIN the panel rather than growing the page past the map. */
  grid-template-rows: minmax(0, 1fr);
  height: calc(100vh - 52px);
}

.panel {
  position: relative;
  min-height: 0; /* allow the grid item to shrink so overflow-y can scroll */
  overflow-y: auto;
  background: rgba(15, 17, 26, 0.96);
  border-right: 1px solid var(--border);
  padding: 20px 20px 18px;
}

.panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--mint-glow), transparent);
}

.panel-hero {
  padding: 14px 18px;
  background: var(--surface-1);
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  /* 11px + the LAYERS header's 9px top padding = 20px, matching the panel's
     20px top padding so the gap above and below the hero card is uniform. */
  margin-bottom: 11px;
}

.ph-main {
  display: flex;
  align-items: center;
  gap: 18px;
}

.ph-num {
  color: var(--text-hi);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.ph-num small {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-dim);
  margin-left: 1px;
}

.ph-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ph-eyebrow,
.hero-eyebrow,
.h-section,
.replay-eyebrow,
.rd-headline .eyebrow,
.annot-meta,
.cat-title,
.psection-title,
.loc-title,
.insp-grid .k {
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.ph-eyebrow {
  color: var(--text-dim);
  font-size: 0.6rem;
  font-weight: 700;
}

.ph-detail {
  color: var(--text-med);
  font-family: var(--mono);
  font-size: 0.72rem;
}

.ph-detail b {
  color: var(--text-hi);
  font-weight: 500;
}

.ph-runs {
  color: var(--mint);
  font-size: 0.74rem;
  font-weight: 600;
}

.ptabs {
  display: flex;
  gap: 2px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.ptab,
.subtabs button,
.seg.vertical button {
  border: none;
  background: none;
  cursor: pointer;
}

.ptab {
  flex: 1;
  padding: 7px 0;
  border-radius: 5px;
  color: var(--text-dimmest);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ptab.active {
  color: var(--mint);
  background: rgba(57, 217, 138, 0.09);
}

.psection {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.psection-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  color: var(--text-dimmer);
  font-size: 0.64rem;
  font-weight: 700;
}

.psection-title.flush {
  margin-bottom: -6px;
}

.muted {
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
}

.seg.vertical {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.seg.vertical button {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--surface-0);
  border: 1px solid var(--border);
}

.seg-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
}

/* Row icon shared by layer rows + tool cards. Dim by default, mint when the
   row/card is active. */
.row-icon {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  color: var(--text-dim);
}

.seg.vertical button.active .row-icon,
.tool-card.active .row-icon {
  color: var(--mint);
}

/* Trailing active dot (mint, glowing) — CSS-only, keyed on .active. */
.seg-dot {
  flex: 0 0 auto;
  margin-left: auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: transparent;
}

.seg.vertical button.active .seg-dot,
.tool-card.active .seg-dot {
  background: var(--mint);
  box-shadow: 0 0 6px var(--mint-glow);
}

.seg.vertical button.active {
  background: var(--mint-soft);
  border-color: rgba(57, 217, 138, 0.26);
}

.seg-label {
  color: var(--text-hi);
  font-size: 0.75rem;
  font-weight: 600;
}

.seg-sub {
  color: var(--text-med);
  font-size: 0.66rem;
}

.seg.vertical button.active .seg-label {
  color: var(--mint);
}

.seg.vertical button.active .seg-sub {
  color: rgba(176, 188, 208, 0.9);
}

.psection-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}

.panel-btn {
  width: 100%;
  padding: 11px 12px;
  text-align: left;
  font-size: 0.72rem;
}

/* Collapsible "Tools & filters" disclosure — demotes Node Hunter + the
   time-range filter out of prime panel space. */
.tools-disclosure {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 9px 4px;
  background: none;
  border: none;
  color: var(--text-med);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.tools-disclosure:hover {
  color: var(--mint);
}

.disclosure-chevron {
  flex: 0 0 auto;
  color: var(--text-med);
  transition: transform 0.18s ease;
}

.disclosure-chevron.open {
  transform: rotate(180deg);
}

.tools-disclosure:hover .disclosure-chevron {
  color: var(--mint);
}

/* Right cluster of a section header: active-state chips + chevron. */
.td-right {
  display: flex;
  align-items: center;
  gap: 9px;
}

.td-active {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Collapsed-section active chip: mint icon on a soft-mint rounded square. */
.td-active-icon {
  box-sizing: border-box;
  width: 26px;
  height: 26px;
  padding: 5px;
  border-radius: 7px;
  background: var(--mint-soft);
  color: var(--mint);
}

/* Tool cards (Node Hunter / Location / Time range) — cohesive with layer rows. */
.tool-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 11px 13px;
  border-radius: 10px;
  background: var(--surface-0);
  border: 1px solid var(--border);
}

button.tool-card {
  cursor: pointer;
}

.tool-card.active {
  background: var(--mint-soft);
  border-color: rgba(57, 217, 138, 0.26);
}

.tool-card-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 11px;
}

.tool-card.active .seg-label {
  color: var(--mint);
}

/* Compact the relocated Location card — drop the extra top margin the buttons
   carried in their old standalone card; the tool-card gap already spaces them. */
.tool-card .loc-actions {
  margin-top: 2px;
}

/* Reset pinned to the top-right of the Time-range card head (saves vertical
   space), mirroring the Location card's × button. */
.card-reset {
  margin-left: auto;
  align-self: center;
  flex: 0 0 auto;
}

.tools-disclosure-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 4px;
}

.tools-subhead {
  margin-top: 4px;
}

.timeline-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tr-track {
  position: relative;
  height: 8px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 999px;
}

.tr-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(90deg, rgba(57, 217, 138, 0.24), rgba(57, 217, 138, 0.75));
  border-radius: 999px;
}

.tr-h {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  background: var(--mint);
  box-shadow: 0 0 0 3px rgba(57, 217, 138, 0.15);
}

.tr-labels {
  display: flex;
  justify-content: space-between;
  color: var(--text-ghost);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.05em;
}

.timeline-reset {
  align-self: flex-start;
  padding: 6px 10px;
  font-size: 0.63rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-0);
}

.tr-lbl {
  color: var(--text-med);
  font-size: 0.74rem;
}

.switch {
  position: relative;
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.switch i {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--text-med);
}

.toggle-row.active .switch {
  background: rgba(57, 217, 138, 0.25);
}

.toggle-row.active .switch i {
  left: 16px;
  background: var(--mint);
}

.scrollable {
  max-height: 380px;
  overflow-y: auto;
}

.parish-mini {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.parish-mini-row {
  display: grid;
  grid-template-columns: 26px 1fr 60px 56px;
  gap: 10px;
  align-items: center;
  padding: 9px 8px;
  border-radius: 10px;
  color: var(--text-med);
  cursor: pointer;
}

.parish-mini-row:hover {
  background: var(--surface-1);
}

.parish-mini-row:hover .parish-mini-name {
  color: var(--mint);
}

.parish-mini-rank,
.parish-mini-pct,
.run-date,
.run-pace,
.run-delta,
.activity-labels,
.achievement-progress-pct,
.cat-title .got {
  font-family: var(--mono);
}

.parish-mini-rank,
.parish-mini-pct {
  color: var(--text-ghost);
  font-size: 0.62rem;
}

.parish-mini-name {
  font-size: 0.74rem;
}

.parish-mini-bar {
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

.parish-mini-bar b {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--mint);
}

/* ── Parish choropleth: ring badges ──────────────────────────────────────── */

/* Leaflet ships `.leaflet-container { font: ...Helvetica }`, so anything we
   inject into the map (badges, focus card, legend pill) inherits Helvetica.
   Set the app font once here instead of per-element. */
.leaflet-container {
  font-family: "Space Grotesk", system-ui, sans-serif;
}

/* Leaflet DivIcon wrapper — reset default leaflet-div-icon styles */
.parish-ring-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  text-align: center;
  transition: transform 0.16s ease;
}
.parish-ring-badge:hover,
.parish-ring-badge.parish-ring-hot {
  transform: scale(1.06);
}

.parish-ring-disc {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(8, 10, 16, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.parish-ring-pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text-hi);
  pointer-events: none;
  white-space: nowrap;
}
.parish-ring-pct small {
  font-size: 8px;
  font-weight: 600;
  color: var(--text-med);
  margin-left: 1px;
}

/* Drop-shadow glow on ring SVG when hot */
.parish-ring-hot .parish-ring-disc svg circle:last-child {
  filter: drop-shadow(0 0 5px rgba(57, 217, 138, 0.8));
}

.parish-ring-label {
  padding: 2px 8px;
  border-radius: 7px;
  background: rgba(8, 10, 16, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-med);
  white-space: nowrap;
}

/* ── Parish focus card (top-left of map container) ───────────────────────── */

.parish-focus-card {
  position: absolute;
  top: 12px;
  /* Sit just to the right of the top-left zoom/home control stack. */
  left: 56px;
  width: 250px;
  z-index: 800;
  pointer-events: auto;
  background: rgba(11, 13, 20, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  padding: 14px 15px 15px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  /* rise-in animation */
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.parish-focus-card--visible {
  opacity: 1;
  transform: translateY(0);
}

.pfc-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 13px;
}
.pfc-rank {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-dimmer);
}
.pfc-name {
  flex: 1;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--text-hi);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pfc-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-dim);
  font-size: 17px;
  line-height: 1;
  padding: 0 2px;
  flex: 0 0 auto;
}
.pfc-close:hover {
  color: var(--text);
}

.pfc-body {
  display: flex;
  align-items: center;
  gap: 15px;
}
.pfc-ring {
  position: relative;
  flex: 0 0 auto;
}
.pfc-ring svg {
  display: block;
}
.pfc-ring-pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-hi);
  line-height: 1;
  white-space: nowrap;
}
.pfc-ring-pct small {
  font-size: 8px;
  color: var(--text-med);
  font-weight: 600;
  margin-left: 1px;
}

.pfc-streets {
  min-width: 0;
}
.pfc-eyebrow {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-dimmer);
  margin-bottom: 4px;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.pfc-street-count {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: -0.01em;
}
.pfc-complete,
.pfc-total {
  color: var(--text-hi);
}

.pfc-divider {
  height: 1px;
  background: var(--border);
  margin: 13px 0 11px;
}

.pfc-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  white-space: nowrap;
  gap: 8px;
}
.pfc-partial,
.pfc-almost {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-med);
}
.pfc-partial b {
  color: var(--amber);
  font-weight: 700;
}
.pfc-almost b {
  color: var(--text-hi);
  font-weight: 700;
}

/* ── Parish legend pill (bottom of map) ──────────────────────────────────── */

/* Match the coverage legend chip exactly (same height, baseline, font, colour)
   so the two map chips read as a cohesive pair. */
.parish-legend-pill {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-dim);
  z-index: 500;
  pointer-events: none;
  white-space: nowrap;
}
.plp-ring {
  display: flex;
  align-items: center;
}
.plp-divider {
  color: var(--text-dimmer);
}

/* ── Parish leaderboard (inside React panel, choropleth mode) ────────────── */

.parish-leaderboard {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.pl-milestone {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  border-radius: 11px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  margin-bottom: 16px;
}
.pl-milestone-icon {
  font-size: 20px;
  flex: 0 0 auto;
}
.pl-milestone-eyebrow {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--mint);
  text-transform: uppercase;
  margin-bottom: 3px;
}
.pl-milestone-body {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-hi);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pl-milestone-gap {
  color: var(--text-dim);
  font-weight: 400;
}

.pl-section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}
.pl-section-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  text-transform: uppercase;
}
.pl-section-sub {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-dimmer);
}

.pl-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pl-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 10px;
  border-radius: 9px;
  cursor: pointer;
  transition: background 0.14s ease;
}
.pl-row:hover,
.pl-row--hot {
  background: var(--surface-1);
}
.pl-row--selected {
  background: rgba(57, 217, 138, 0.12);
}
.pl-row--selected .pl-name {
  color: var(--mint);
}

.pl-rank {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-dimmer);
  width: 18px;
  flex: 0 0 auto;
  font-weight: 600;
}
.pl-rank--mint {
  color: var(--mint);
}

.pl-name {
  flex: 1;
  font-size: 0.75rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pl-pct {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-hi);
  white-space: nowrap;
}
.pl-pct-unit {
  font-size: 9px;
  color: var(--text-dim);
  font-weight: 400;
  margin-left: 1px;
}



.loc-card,
.chart-card,
.par-card,
.impact-card,
.splits,
.annot,
.replay-cta,
.bignum,
.stats-card-shell,
.overlay-card {
  background: var(--surface-0);
  border: 1px solid var(--border);
}

.loc-card {
  padding: 16px;
  border-radius: 12px;
  margin-bottom: 16px;
}

.loc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.loc-title {
  color: var(--text-dimmer);
  font-size: 0.62rem;
  font-weight: 700;
}

.loc-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--mint);
  box-shadow: 0 0 8px var(--mint-glow);
}

.loc-status,
.loc-coords {
  font-size: 0.78rem;
}

.loc-status {
  color: var(--text-med);
}

.loc-detail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  min-height: 28px;
}

.loc-coords {
  color: var(--mint);
  font-family: var(--mono);
  font-size: 0.78rem;
}

.loc-remove {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-dim);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s ease;
  margin-left: auto;
}

.loc-remove:hover {
  background: var(--surface-2);
  border-color: var(--red);
  color: var(--red);
}

.loc-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 14px;
}

.loc-actions button {
  padding: 9px 10px;
  font-size: 0.7rem;
  border-radius: 8px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  color: var(--text-hi);
  cursor: pointer;
}

.loc-actions button:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
}

.subtabs {
  display: flex;
  gap: 18px;
  padding-top: 2px;
  border-bottom: 1px solid var(--border);
}

.subtabs button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0 12px;
  color: var(--text-dim);
  font-size: 0.7rem;
  font-weight: 600;
}

.subtabs button.active {
  color: var(--text-hi);
}

.subtabs button.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--mint);
}

.ct {
  min-width: 18px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-ghost);
  font-family: var(--mono);
  font-size: 0.6rem;
}

.subtabs button.active .ct {
  background: var(--mint-soft);
  color: var(--mint);
}

.subpane {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.plan-empty,
.empty-line,
.ep-desc {
  color: var(--text-med);
  font-size: 0.72rem;
  line-height: 1.5;
}

.finder-list,
.almost-list,
.pinned-pane {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.island-row,
.almost-done-row,
.pinned-row {
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--surface-0);
  border: 1px solid rgba(255, 255, 255, 0.04);
  cursor: pointer;
}

.island-row:hover,
.almost-done-row:hover,
.pinned-row:hover {
  background: var(--surface-1);
}

.almost-done-name,
.island-names {
  display: block;
}

.almost-done-name {
  color: var(--text-med);
  font-size: 0.74rem;
  line-height: 1.5;
}

.island-names {
  margin-top: 4px;
  color: var(--text-ghost);
  font-size: 0.66rem;
}

.rank-toggle {
  display: flex;
  gap: 6px;
}

.rank-toggle button {
  padding: 7px 12px;
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.rank-toggle button.active {
  border-color: rgba(57, 217, 138, 0.28);
  color: var(--mint);
  background: var(--mint-soft);
}

.empty-pinned {
  padding: 28px 16px;
  border-radius: 12px;
  border: 1px dashed var(--border-strong);
  text-align: center;
}

.ep-icon {
  color: var(--text-ghost);
  font-size: 1.8rem;
}

.ep-title {
  color: var(--text-hi);
  margin-top: 8px;
  margin-bottom: 6px;
}

.footnote {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 0.66rem;
  line-height: 1.5;
}

.map-canvas {
  position: relative;
  overflow: hidden;
  background: #070910;
}

#map {
  width: 100%;
  height: calc(100vh - 52px);
}

.pulse,
.legend-chip,
.inspector,
.inspector-toggle,
.replay-card {
  position: absolute;
  z-index: 500;
}

.pulse {
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  color: var(--text-med);
  font-size: 0.74rem;
}

.pulse b {
  color: var(--mint);
}

.legend-chip {
  left: 20px;
  bottom: 20px;
  display: flex;
  gap: 4px;
  padding: 5px 6px;
  border-radius: 999px;
  background: var(--panel-bg);
  border: 1px solid var(--border);
}

.legend-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.legend-pill:hover,
.legend-pill.dimmed {
  background: var(--surface-1);
}

.legend-pill.dimmed {
  opacity: 0.35;
}

.sw {
  width: 8px;
  height: 8px;
  border-radius: 999px;
}

.legend-pill.complete .sw {
  background: var(--mint);
}

.legend-pill.partial .sw {
  background: var(--amber);
}

.legend-pill.uncovered .sw {
  background: #555a6a;
}

/* Gradient Legend */
.gradient-legend {
  width: 200px;
  padding: 10px 14px;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.gl-bar {
  height: 8px;
  border-radius: 999px;
  margin-bottom: 8px;
}

.staleness-gradient .gl-bar {
  background: linear-gradient(to right, rgb(68, 170, 255), rgb(45, 0, 75));
}

.heatmap-gradient .gl-bar {
  background: linear-gradient(to right, rgb(68, 17, 17), rgb(255, 204, 68));
}

.gl-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}


.replay-overlay {
  position: absolute;
  inset: 0;
  z-index: 700;
}

.replay-letterbox {
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
}

.replay-letterbox.top {
  top: 0;
  height: 130px;
  background: linear-gradient(180deg, rgba(12, 13, 20, 0.95), rgba(12, 13, 20, 0));
}

.replay-letterbox.bottom {
  bottom: 0;
  height: 220px;
  background: linear-gradient(0deg, rgba(12, 13, 20, 0.96), rgba(12, 13, 20, 0));
}

.replay-card {
  background: rgba(9, 11, 18, 0.84);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  backdrop-filter: blur(16px);
}

.replay-date-card {
  top: 24px;
  left: 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
}

.rp-month {
  color: var(--mint);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.rp-day {
  color: var(--text-hi);
  font-size: 2.8rem;
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 0.95;
}

.rp-micro,
.rp-eyebrow {
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 0.62rem;
}

.replay-cov-card {
  top: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
}

.rp-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.rp-cov-value {
  color: var(--text-hi);
  font-size: 2rem;
  font-weight: 700;
}

.replay-controls {
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 14px;
}

.replay-btn {
  border: none;
  cursor: pointer;
}

/* Secondary controls (Replay, Close) — quiet pill buttons. */
.replay-controls button {
  padding: 8px 14px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-hi);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.replay-controls button:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
}

/* Primary control (Play / Pause) — mint, leads the cluster. */
.replay-controls .rp-primary-btn,
.replay-controls #replay-play-btn,
.replay-btn,
.overlay-actions .primary {
  background: var(--mint);
  border-color: transparent;
  color: #0c0d14;
}

.replay-controls .rp-primary-btn:hover {
  background: #48e89a;
  border-color: transparent;
}

/* Speed: a segmented control mirroring the unit-toggle pattern. */
.rp-speed-controls {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  overflow: hidden;
}

.rp-speed-btn {
  border: none;
  background: none;
  color: var(--text-dim);
  padding: 8px 10px;
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.rp-speed-btn + .rp-speed-btn {
  border-left: 1px solid var(--border);
}

.rp-speed-btn:hover {
  color: var(--text-hi);
}

.rp-speed-btn--active {
  background: var(--mint-soft);
  color: var(--mint);
}

.stats-wrap,
.rd-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 32px 28px 80px;
}

.hero {
  padding: 8px 0 32px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 32px;
}

.hero-eyebrow {
  color: var(--mint);
  font-size: 0.65rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.hero-sentence {
  max-width: 920px;
  margin-bottom: 16px;
  color: var(--text-hi);
  font-size: 2.6rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.hero-sentence b,
.hero-sentence a {
  color: var(--mint);
  text-decoration: none;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

.hero-meta b {
  color: var(--text-med);
  font-weight: 500;
}

.bignum-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 36px;
}

.bignum {
  position: relative;
  padding: 18px 18px 16px;
  border-top: 2px solid rgba(57, 217, 138, 0.22);
  border-radius: 10px;
}

.bignum:hover {
  border-top-color: var(--mint-glow);
}

.bignum .v {
  color: var(--text-hi);
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.bignum .v small {
  margin-left: 2px;
  color: var(--text-dim);
  font-size: 0.9rem;
  font-weight: 500;
}

.bignum .l {
  margin-top: 10px;
  color: var(--text-dimmer);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.bignum .delta {
  position: absolute;
  top: 16px;
  right: 16px;
  color: var(--mint);
  font-family: var(--mono);
  font-size: 0.62rem;
}

.bignum .delta.down {
  color: var(--text-dim);
}

.h-section {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
  color: var(--text-dimmer);
  font-size: 0.7rem;
  font-weight: 700;
}

.tally {
  color: var(--text-ghost);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.05em;
}

.parishes-block {
  margin-bottom: 36px;
}

.parish-row {
  display: grid;
  grid-template-columns: 24px 1fr 220px 80px 70px 12px;
  gap: 16px;
  align-items: center;
  padding: 11px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  cursor: pointer;
}

.parish-row:hover {
  background: rgba(255, 255, 255, 0.02);
}

.parish-row:hover .parish-name,
.parish-row:hover .arrow {
  color: var(--mint);
}

.parish-row:hover .arrow {
  transform: translateX(2px);
}

.parish-rank,
.parish-left,
.arrow {
  color: var(--text-ghost);
}

.parish-rank,
.parish-left {
  font-family: var(--mono);
  font-size: 0.64rem;
}

.parish-name {
  color: var(--text-med);
  font-size: 0.85rem;
}

.parish-bar {
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.parish-fill {
  height: 100%;
  background: var(--mint);
}

.parish-pct {
  color: var(--text-hi);
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.arrow {
  text-align: right;
  transition: transform 0.15s;
}

.charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 36px;
}

.chart-card {
  padding: 24px;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  height: 400px;
  width: 100%;
  overflow: hidden;
}

.chart-canvas-wrapper {
  flex: 1;
  position: relative;
  width: 100%;
  min-height: 0;
}

.chart-card canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

.chart-title {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}

.chart-title h4 {
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
}

.chart-footer {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.proj {
  color: var(--text-dim);
  font-size: 0.72rem;
}

.chart-empty-state {
  color: var(--text-dim);
  font-size: 0.82rem;
  text-align: center;
  padding: 32px 16px;
}

.proj b {
  color: var(--text-hi);
}

.activity-ribbon {
  display: grid;
  grid-template-columns: repeat(60, 1fr);
  gap: 3px;
}

.activity-day {
  height: 18px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
}

.activity-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  margin-bottom: 36px;
  color: var(--text-ghost);
  font-size: 0.62rem;
  letter-spacing: 0.05em;
}

.runs-list {
  display: flex;
  flex-direction: column;
}

.run-row {
  display: grid;
  grid-template-columns: 92px 1fr 92px 82px 88px 16px;
  gap: 14px;
  align-items: center;
  padding: 13px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  cursor: pointer;
}

.run-row:hover {
  background: rgba(255, 255, 255, 0.02);
}

.run-row:hover .run-title {
  color: var(--mint);
}

.run-date,
.run-pace {
  color: var(--text-dim);
  font-size: 0.72rem;
}

.run-title {
  color: var(--text-med);
  font-size: 0.84rem;
  transition: color 0.15s;
}

.run-dist {
  color: var(--text-hi);
  text-align: right;
  font-weight: 700;
}

.run-pace {
  text-align: right;
}

.run-delta {
  color: var(--mint);
  text-align: right;
  font-size: 0.72rem;
}

.run-arrow {
  color: var(--text-ghost);
  text-align: right;
}

.replay-cta {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  margin-bottom: 40px;
  padding: 28px;
  border-top: 2px solid var(--mint-glow);
  border-radius: 14px;
}

.replay-eyebrow {
  color: var(--mint);
  font-family: var(--mono);
  font-size: 0.65rem;
  margin-bottom: 8px;
}

.replay-title {
  color: var(--text-hi);
  font-size: 1.6rem;
  font-weight: 500;
  margin-bottom: 6px;
}

.replay-desc {
  color: var(--text-dim);
  font-size: 0.85rem;
}

.replay-btn {
  padding: 14px 28px;
  border-radius: 10px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.achievement-count {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  color: var(--text-dimmer);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.achievement-count b {
  color: var(--mint);
}

.progress-bar {
  flex: 1;
  max-width: 240px;
  height: 3px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
}

.progress-fill {
  display: block;
  width: 0;
  height: 100%;
  background: var(--mint);
}

.achievement-progress-pct {
  color: var(--text-ghost);
  font-size: 0.66rem;
}

/* ── Goals section ──────────────────────────────────────────────────────── */

.goals-section {
  margin-bottom: 36px;
}

.goals-add-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 0.72rem;
  padding: 4px 10px;
}

.goals-add-btn:hover {
  border-color: var(--mint);
  color: var(--mint);
}

.goals-loading,
.goals-error,
.goals-empty,
.history-loading,
.history-error,
.history-empty,
.stats-loading,
.stats-error {
  color: var(--text-med);
  font-size: 0.82rem;
  padding: 12px 0;
}

.goals-add-inline {
  background: none;
  border: none;
  color: var(--mint);
  cursor: pointer;
  font-size: inherit;
  padding: 0;
  text-decoration: underline;
}

.goal-card {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  border-top: 2px solid rgba(57, 217, 138, 0.18);
  margin-bottom: 12px;
  padding: 18px 20px 16px;
}

.goal-card-head {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

.goal-card-title {
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
}

.goal-dismiss {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0 4px;
}

.goal-dismiss:hover {
  color: var(--text);
}

.goal-progress-bar {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  height: 4px;
  margin-bottom: 10px;
  overflow: hidden;
}

.goal-progress-fill {
  background: var(--mint);
  border-radius: 999px;
  height: 100%;
  transition: width 0.3s ease;
}

.goal-card-body {
  align-items: center;
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}

.goal-pct {
  color: var(--text-hi);
  font-family: var(--mono);
  font-size: 0.85rem;
  font-weight: 600;
}

.goal-proj {
  color: var(--text-dim);
  font-size: 0.75rem;
}

.goal-badge {
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  text-transform: uppercase;
}

.goal-badge.on-track {
  background: rgba(57, 217, 138, 0.15);
  color: var(--mint);
}

.goal-badge.off-track {
  background: rgba(255, 100, 80, 0.15);
  color: #ff6450;
}

.goal-streak-num {
  color: var(--text-hi);
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 6px;
}

.goal-streak-unit {
  color: var(--text-dim);
  font-size: 1rem;
  font-weight: 500;
}

.goal-streak-sub {
  color: var(--text-dim);
  font-size: 0.78rem;
  margin-bottom: 4px;
}

.goal-card-edit {
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
}

.goal-edit-label {
  align-items: center;
  color: var(--text-dimmer);
  display: flex;
  font-size: 0.66rem;
  font-weight: 700;
  gap: 6px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.goal-date-input,
.goal-parish-select {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  color-scheme: dark;
  font-size: 0.72rem;
  padding: 5px 8px;
}

.goal-picker {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-top: 8px;
  padding: 12px;
}

.goal-picker-title {
  color: var(--text-dim);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.goal-picker-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.goal-picker-option {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
  font-size: 0.78rem;
  padding: 8px 14px;
}

.goal-picker-option:hover {
  border-color: var(--mint);
  color: var(--mint);
}

.achievement-category {
  margin-bottom: 36px;
}

.cat-title {
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  color: var(--text-dimmer);
  font-size: 0.65rem;
  font-weight: 700;
}

.achievement-cards {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 10px;
}

.achievement-card {
  position: relative;
  min-height: 130px;
  padding: 16px 12px 14px;
  border-radius: 10px;
  background: var(--surface-0);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}

.achievement-card.unlocked {
  border-color: rgba(57, 217, 138, 0.22);
}

.achievement-card.unlocked::before {
  content: "";
  position: absolute;
  top: 0;
  left: 16px;
  right: 16px;
  height: 1px;
  background: var(--mint-glow);
}

.achievement-card.locked {
  opacity: 0.42;
}

.achievement-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(57, 217, 138, 0.08);
  color: var(--mint);
}

.achievement-card.locked .achievement-icon {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-dimmer);
}

.achievement-icon svg {
  width: 18px;
  height: 18px;
}

.achievement-name {
  color: var(--text-hi);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.25;
}

.achievement-desc {
  color: var(--text-dim);
  font-size: 0.62rem;
  line-height: 1.35;
  flex: 1;
}

.achievement-date,
.achievement-progress {
  color: var(--mint);
  font-family: var(--mono);
  font-size: 0.6rem;
}

.rd-wrap,
.par-wrap {
  max-width: 1100px;
}

.rd-crumb,
.par-crumb {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: var(--text-dim);
  font-size: 0.72rem;
}

.rd-crumb a,
.par-crumb a {
  text-decoration: none;
}

.rd-crumb .sep,
.par-crumb .sep {
  color: var(--text-ghost);
}

.rd-hero {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 28px;
  margin-bottom: 32px;
}

.rd-headline .eyebrow {
  color: var(--mint);
  font-size: 0.65rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.rd-headline h1,
.par-head h1 {
  color: var(--text-hi);
  letter-spacing: -0.02em;
}

.rd-headline h1 {
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 1.15;
  margin-bottom: 14px;
}

.rd-headline h1 b,
.par-head .left .eyebrow b {
  color: var(--mint);
}

.rd-headline .sub {
  max-width: 520px;
  color: var(--text-dim);
  font-size: 0.95rem;
  line-height: 1.55;
}

.rd-headline .strava {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid rgba(252, 76, 2, 0.3);
  color: #fc4c02;
  font-size: 0.72rem;
  text-decoration: none;
}

.rd-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 24px;
  padding: 22px 24px;
  border-radius: 12px;
  border-top: 2px solid rgba(57, 217, 138, 0.22);
}

.rd-stats .k {
  display: block;
  margin-bottom: 4px;
  color: var(--text-dimmer);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.rd-stats .v {
  color: var(--text-hi);
  font-size: 1.4rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.annot {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 28px;
  padding: 18px 20px;
  border-radius: 12px;
}

.quote {
  color: var(--mint);
  font-size: 1.6rem;
  line-height: 1;
}

.note {
  color: var(--text-hi);
  font-size: 0.95rem;
  font-style: italic;
  line-height: 1.5;
}

.annot-meta {
  margin-top: 8px;
  color: var(--text-ghost);
  font-family: var(--mono);
  font-size: 0.65rem;
}

.annot .edit {
  border: none;
  background: none;
  color: var(--text-dim);
  cursor: pointer;
}

.annot-editor {
  width: 100%;
  margin-top: 10px;
}

.annot-editor textarea,
.share-side-card textarea {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.22);
  color: var(--text);
  padding: 12px;
  resize: vertical;
}

.annot-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.annot-actions button {
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-med);
  cursor: pointer;
}

.annot-actions .primary {
  background: var(--mint);
  border-color: transparent;
  color: #0c0d14;
}

.rd-map {
  height: 320px;
  margin-bottom: 32px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.rd-map canvas,
.rd-map .leaflet-container {
  width: 100%;
  height: 100%;
}

.impact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}

.impact-card {
  padding: 18px 20px;
  border-radius: 10px;
}

.impact-card .head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}

.impact-card .head h4 {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.impact-card .count {
  font-family: var(--mono);
  font-size: 1.1rem;
  font-weight: 700;
}

.impact-card.completed h4,
.impact-card.completed .count {
  color: var(--mint);
}

.impact-card.progressed h4,
.impact-card.progressed .count {
  color: var(--amber);
}

.impact-card.revisited h4,
.impact-card.revisited .count {
  color: var(--text-med);
}

.impact-card ul {
  list-style: none;
}

.impact-card li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  color: var(--text-med);
  font-size: 0.78rem;
}

.impact-card li:last-child {
  border-bottom: none;
}

.impact-card .frac {
  color: var(--text-ghost);
  font-family: var(--mono);
  font-size: 0.7rem;
}

.splits {
  padding: 20px 24px;
  border-radius: 10px;
}

.splits-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
}

.splits-head h3 {
  color: var(--text-dimmer);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.splits-empty {
  color: var(--text-dim);
  font-size: 0.78rem;
  line-height: 1.6;
}

.par-wrap {
  max-width: 1180px;
  padding: 24px 28px 80px;
}

.par-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 16px 0 24px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 28px;
}

.par-head .left .eyebrow {
  margin-bottom: 8px;
  color: var(--text-dimmer);
  font-size: 0.68rem;
  font-weight: 700;
}

.par-head h1 {
  font-size: 2.6rem;
  font-weight: 500;
}

.par-head .right {
  display: flex;
  align-items: baseline;
  gap: 24px;
}

.par-head .big {
  color: var(--mint);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
}

.par-head .ctx {
  color: var(--text-dim);
  font-size: 0.72rem;
}

.par-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 24px;
  margin-bottom: 28px;
}

.par-map {
  height: 480px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.par-map .leaflet-container {
  width: 100%;
  height: 100%;
}

.par-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.par-card {
  padding: 18px 20px;
  border-radius: 12px;
}

.par-card h4 {
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
  color: var(--text-dimmer);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.par-card .tally {
  color: var(--text-ghost);
}

.par-progress-bar {
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.par-progress-bar b {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, rgba(57, 217, 138, 0.25), var(--mint));
}

.par-progress-meta {
  margin-top: 12px;
  color: var(--text-dim);
  font-size: 0.74rem;
}

.par-list {
  list-style: none;
}

.par-list li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  color: var(--text-med);
  font-size: 0.78rem;
}

.par-list li:last-child {
  border-bottom: none;
}

.par-badge {
  border-radius: 4px;
  padding: 2px 6px;
  background: var(--amber-soft);
  color: var(--amber);
  font-family: var(--mono);
  font-size: 0.66rem;
}

.neighbour-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.neighbour-card {
  padding: 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-0);
  cursor: pointer;
}

.neighbour-card:hover {
  background: var(--surface-1);
}

.neighbour-card h5 {
  margin-bottom: 8px;
  color: var(--text-hi);
  font-size: 0.85rem;
  font-weight: 600;
}

.neighbour-card .meta {
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 0.64rem;
  margin-top: 8px;
}

.overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
}

.overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 13, 20, 0.85);
}

.overlay-card {
  position: relative;
  z-index: 1;
  width: min(1180px, calc(100vw - 32px));
  margin: 70px auto 0;
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.7);
}

.overlay-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}

.overlay-head h2 {
  color: var(--text-hi);
  font-size: 1.4rem;
}

.overlay-head p {
  color: var(--text-dim);
  font-size: 0.82rem;
}

.overlay-actions {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.overlay-actions button {
  padding: 9px 12px;
  font-size: 0.72rem;
  font-weight: 600;
}

.share-body {
  display: block;
}

.share-preview {
  display: grid;
  place-items: center;
  padding: 20px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.22);
}

.share-canvas {
  width: min(520px, 68vh);
  max-width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.leaflet-control-zoom a,
.leaflet-control-fit a {
  background-color: var(--panel-bg) !important;
  color: var(--text-hi) !important;
  border-bottom: 1px solid var(--border) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.leaflet-control-zoom a:hover,
.leaflet-control-fit a:hover {
  background-color: var(--surface-2) !important;
  color: var(--mint) !important;
}

.leaflet-bar {
  border: 1px solid var(--border) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}

.leaflet-control-fit {
  margin-top: 10px !important;
}

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  background: rgba(15, 17, 26, 0.96);
  color: var(--text);
  border: 1px solid var(--border);
}

.street-popup {
  min-width: 220px;
}

/* "Remove start point" button inside the location-pin popup. */
.island-remove-start {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface-1);
  color: var(--text-med);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
}

.island-remove-start:hover {
  border-color: #d9534f;
  color: #ff7b75;
}

.sp-name {
  color: var(--text-hi);
  font-weight: 700;
  margin-bottom: 6px;
}

.sp-meta,
.sp-stat,
.sp-run-row,
.sp-run-more {
  color: var(--text-dim);
  font-size: 0.72rem;
  line-height: 1.5;
}

.sp-status {
  text-transform: capitalize;
}

.sp-status.complete {
  color: var(--mint);
}

.sp-status.partial {
  color: var(--amber);
}

.sp-pin-btn,
.pinned-unpin-btn {
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-1);
  color: var(--text-med);
  cursor: pointer;
}

.sp-pin-btn {
  width: 100%;
  padding: 8px 10px;
}

.sp-pin-btn.pinned {
  border-color: rgba(245, 158, 11, 0.32);
  background: var(--amber-soft);
  color: var(--amber);
}

.pinned-unpin-btn {
  padding: 2px 8px;
}

.goal-on-track {
  color: var(--mint);
}

.goal-off-track {
  color: var(--amber);
}

/* Milestones surface removed — .milestone-* rules deleted with it. */

@media (max-width: 1100px) {
  .bignum-row {
    grid-template-columns: repeat(3, 1fr);
  }

  .achievement-cards {
    grid-template-columns: repeat(4, 1fr);
  }

  .par-grid,
  .rd-hero,
  .impact-grid,
  .share-body {
    grid-template-columns: 1fr;
  }

  .neighbour-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 860px) {
  .charts,
  .replay-cta,
  .overlay-head,
  .topbar {
    grid-template-columns: 1fr;
  }

  .topbar {
    height: auto;
    padding: 12px 16px;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .view {
    padding-top: var(--topbar-h, 92px);
  }

  .hero-sentence,
  .par-head h1 {
    font-size: 2rem;
  }

  .run-row {
    grid-template-columns: 72px 1fr 72px;
  }

  .run-pace,
  .run-delta {
    display: none;
  }
}

@media (max-width: 640px) {
  .stats-wrap,
  .rd-wrap,
  .par-wrap {
    padding-inline: 18px;
  }

  .bignum-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .achievement-cards,
  .neighbour-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .parish-row {
    grid-template-columns: 24px 1fr 70px 12px;
  }

  .parish-bar,
  .parish-left {
    display: none;
  }

  .overlay-card {
    width: calc(100vw - 20px);
    padding: 18px;
  }

}

/* --- Block 8: Map panel as mobile bottom sheet (pairs with --bp-mobile: 768px) --- */
@media (max-width: 767.98px) {
  /* The Map tab is a fixed, non-scrolling layer. Because it can't scroll,
     nothing (anchor jumps, the iOS dynamic toolbar, focus, tab round-trips)
     can slide the map under the fixed topbar and hide the zoom controls.
     Stats/History stay normal scrollable views. */
  #map-view.view {
    position: fixed;
    inset: 0;
    min-height: 0; /* padding-top (topbar height) comes from the .view rule */
  }

  .map-stage {
    display: block;
    height: 100%;
    min-height: 0;
  }

  .map-canvas {
    height: 100%;
  }

  #map {
    height: 100%;
  }

  /* The wrapping mobile topbar sits at z 1000; keep Leaflet controls below the
     sheet so zoom/home/attribution don't float over the card when it's open. */
  .leaflet-top,
  .leaflet-bottom {
    z-index: 600;
  }

  /* One-row topbar: brand mark + nav + a single overflow (⋯) menu.
     Overrides the two-row column layout from the 860px block. */
  .topbar {
    flex-direction: row;
    align-items: center;
    height: auto;
    min-height: 52px;
    /* Account for the notch/Dynamic Island so the bar isn't taller than measured. */
    padding: env(safe-area-inset-top, 0px) 12px 0;
    gap: 8px;
  }

  .topbar-left {
    flex: 1;
    min-width: 0;
    gap: 10px;
  }

  .brand b {
    display: none; /* keep the "e" mark, drop the wordmark */
  }

  .nav .nav-link {
    display: none; /* About moves into the ☰ menu on mobile (beats a.nav-btn) */
  }

  .nav {
    gap: 3px;
  }

  .nav-btn {
    padding: 6px 5px;
    font-size: 0.7rem;
  }

  .topbar-right {
    position: relative;
    gap: 8px;
  }

  #sync-status-text {
    display: none; /* keep the status dot, drop the "synced · 5 days ago" text */
  }

  .logrun-wrap,
  .topbar-share {
    display: none; /* moved into the ⋯ menu */
  }

  .topbar-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: none;
    color: var(--text-med);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
  }

  /* Compact, chrome-less hero — present but not forced down your throat. */
  .panel-hero {
    padding: 2px 2px 0;
    margin-bottom: 12px;
    background: none;
    border: none;
    border-radius: 0;
  }

  .ph-num {
    font-size: 1.5rem;
  }

  .ph-eyebrow {
    display: none; /* drop the "ISLAND COVERED" label on mobile */
  }

  /* Lay the hero out as one line: %  ·  covered/total  ·  runs */
  .ph-main {
    gap: 16px;
  }

  .ph-info {
    flex-direction: row;
    align-items: baseline;
    gap: 16px;
  }

  .sheet-grab {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    margin: -6px 0 6px;
    cursor: grab;
    touch-action: none; /* JS owns the drag; stop the browser scrolling instead */
  }

  .sheet-grab::before {
    content: "";
    width: 48px;
    height: 5px;
    border-radius: 99px;
    background: var(--text-dim);
    opacity: 0.8;
  }

  .panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--sheet-peek);
    max-height: calc(100vh - var(--topbar-h, 92px) - var(--sheet-gap));
    border-right: none;
    border-top: 1px solid var(--border);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.45);
    z-index: 800; /* above Leaflet controls (600), below the topbar (1000) */
    transition: height 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  }

  /* Full height leaves a sliver of map above the sheet, so it reads as a
     draggable card layered over the map (and the handle has room to breathe). */
  .panel.sheet-open {
    height: calc(100vh - var(--topbar-h, 92px) - var(--sheet-gap));
  }

  /* Legend pinned to the top of the map (below the topbar); attribution stays
     just above the peek where the sheet covers it when expanded. */
  .legend-chip {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    top: 10px;
    bottom: auto;
  }

  .leaflet-control-attribution {
    bottom: calc(var(--sheet-peek) + 10px) !important;
    font-size: 0.55rem !important;
  }

  /* Thumb-sized hit areas on mobile (desktop keeps its tighter sizing). */
  .ptab {
    min-height: 44px;
  }

  .subtabs button {
    min-height: 44px;
  }
}

@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
  .panel {
    transition: none;
  }
}

#stats-cards:empty::before,
#parishes-table:empty::before,
#runs-list:empty::before,
#achievement-grid:empty::before,
#parish-list:empty::before,
#islandfinder-list:empty::before,
#activity-calendar:empty::before,
#stats-hero-sentence:empty::before {
  content: "";
  display: block;
  height: 140px;
  border-radius: 12px;
  background: var(--border);
  animation: el-skeleton-pulse 1.6s ease-in-out infinite;
}

#stats-hero-sentence:empty::before {
  height: 60px;
  max-width: 720px;
}

#activity-calendar:empty::before {
  height: 40px;
}

@keyframes el-skeleton-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.8; }
}

.leaflet-control-attribution {
  background: rgba(15, 17, 26, 0.78) !important;
  color: var(--text-dim) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px 0 0 0 !important;
  font-family: var(--mono) !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.02em !important;
  padding: 3px 8px !important;
}

.leaflet-control-attribution a {
  color: var(--text-med) !important;
}

.leaflet-control-attribution a:hover {
  color: var(--mint) !important;
}

/* Settings */
.topbar-gear { background: none; border: none; color: inherit; font-size: 18px; cursor: pointer; padding: 4px 8px; }
.settings-shell { max-width: 480px; width: 100%; }
.settings-body { display: flex; flex-direction: column; gap: 22px; padding: 4px 2px; }
.settings-section > h3 { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; opacity: .6; margin: 0 0 10px; }
.settings-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.06); }
.settings-row:first-of-type { border-top: none; }
.settings-row .sr-label { font-size: 14px; }
.settings-row .sr-sub { font-size: 12px; opacity: .55; }

/* segmented unit toggle */
.unit-toggle { display: inline-flex; border: 1px solid rgba(255,255,255,.15); border-radius: 8px; overflow: hidden; }
.unit-toggle button { background: none; border: none; color: inherit; padding: 6px 14px; cursor: pointer; font-size: 13px; opacity: .6; }
.unit-toggle button.active { background: rgba(255,255,255,.12); opacity: 1; }

/* coming-soon placeholders */
.settings-row.placeholder { opacity: .55; }
.soon-pill { font-size: 10px; letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,.08); opacity: .8; }

/* privacy sub-view */
.privacy-view { display: flex; flex-direction: column; gap: 14px; max-height: 60vh; overflow-y: auto; font-size: 13px; line-height: 1.55; }
.privacy-view h4 { margin: 0 0 4px; font-size: 13px; }
.privacy-view p { margin: 0; opacity: .85; }
.privacy-back { background: none; border: none; color: inherit; cursor: pointer; font-size: 13px; opacity: .7; padding: 0; }

/* mobile: full-screen modal */
@media (max-width: 768px) {
  #settings-overlay .settings-shell {
    max-width: none; width: 100%; height: 100%; border-radius: 0;
    padding-top: calc(env(safe-area-inset-top) + 8px);
    padding-bottom: calc(env(safe-area-inset-bottom) + 8px);
  }
  .privacy-view { max-height: none; }
}

/* ── Auth login view ── */
#login-view {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}
#login-view[hidden] { display: none; }
.login-card {
  text-align: center;
  padding: 2.5rem;
  max-width: 22rem;
}
.login-card h1 { margin: 0 0 0.5rem; }
.login-card p { opacity: 0.8; margin: 0 0 1.5rem; }
.strava-connect {
  display: inline-block;
  background: #fc4c02; /* Strava orange */
  color: #fff;
  text-decoration: none;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
}

/* ── Import overlay ── */
#import-overlay {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(12, 13, 20, 0.92);
}
#import-overlay[hidden] { display: none; }
.import-card { text-align: center; padding: 2rem; }
.import-spinner {
  margin: 1.25rem auto 0;
  width: 36px; height: 36px;
  border: 3px solid rgba(255,255,255,0.2);
  border-top-color: var(--mint);
  border-radius: 50%;
  animation: el-spin 0.9s linear infinite;
}
@keyframes el-spin { to { transform: rotate(360deg); } }

/* ===== Stats redesign — The Complete Picture ===== */
/* Palette system: mint = data/progress, gold = live/interactive affordances (hover,
   selection). Gold is used sparingly, only where the page responds to the cursor. */
.stats-redesign { --gold:#f5b942; --gold-dim:rgba(245,185,66,.45); --gold-soft:rgba(245,185,66,.12);
  max-width: 1080px; margin: 0 auto; padding: 30px 28px 64px; }
.stats-page-eyebrow { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:26px;
  color: var(--mint); font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; }

.stats-card { background: var(--surface-0); border:1px solid var(--border); border-radius:14px; padding:22px 26px 20px; margin-bottom:32px; }
.stats-card-accent { border-top:2px solid rgba(57,217,138,.22); }
.stats-empty { color: var(--text-med); font-size:.9rem; padding:18px 0; }

/* narrative spine */
.stats-phase { display:flex; align-items:center; gap:12px; margin:0 0 16px; }
.stats-phase .idx { font-family:var(--mono); color:var(--mint); font-size:.8rem; }
.stats-phase .bar { width:26px; height:2px; background:linear-gradient(90deg,var(--mint),transparent); }
.stats-phase .tag { color:var(--text-hi); font-size:.74rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
.stats-phase .desc { color:var(--text-dim); font-size:.8rem; }
.stats-phase .line { flex:1; height:1px; background:var(--border); }

.stats-eyebrow { display:flex; align-items:center; gap:6px; color:var(--text-dim); font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; margin-bottom:10px; }
.stats-sec-head { display:flex; align-items:center; gap:8px; color:var(--text-dim); font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; margin:0 0 12px; }
.stats-sec-head .tally { margin-left:auto; color:var(--text-dim); font-weight:500; text-transform:none; letter-spacing:0; }
.stats-sec-head.inline { margin-bottom:8px; }

/* hero */
.stats-hero-top { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:14px; }
.stats-hero-figure { display:flex; align-items:flex-end; gap:16px; }
.stats-bignum { color:var(--text-hi); font-size:3.6rem; font-weight:700; line-height:.9; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.stats-bignum small { font-size:1.4rem; color:var(--text-dim); font-weight:500; }
.stats-chip { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-size:.72rem; background:var(--surface-1); color:var(--text-med); }
.stats-chip.mint { background:var(--mint-soft); color:var(--mint); }
.stats-hero-rail { display:flex; gap:30px; padding-top:6px; }
.stats-hero-rail div { text-align:right; }
.stats-hero-rail b { display:block; color:var(--text-hi); font-size:1.15rem; font-weight:700; font-variant-numeric:tabular-nums; }
.stats-hero-rail span { color:var(--text-dim); font-family:var(--mono); font-size:.62rem; }
.stats-hero-foot { display:flex; gap:22px; margin-top:14px; padding-top:14px; border-top:1px solid var(--border); color:var(--text-dim); font-size:.72rem; }
.stats-hero-foot .muted { margin-left:auto; }

/* momentum */
.stats-rail { display:flex; margin-bottom:22px; }
.stats-rail-cell { flex:1; padding:6px 24px; display:flex; flex-direction:column; gap:4px; border-radius:8px; outline:1.5px solid transparent; outline-offset:-1px; transition:background .12s ease, outline-color .12s ease, transform .12s ease; }
.stats-rail-cell:hover { background:var(--surface-1); outline-color:var(--gold-dim); transform:translateY(-2px); }
.stats-rail-cell .v { color:var(--text-hi); font-size:1.5rem; font-weight:700; font-variant-numeric:tabular-nums; }
.stats-rail-cell .l { display:inline-flex; align-items:center; gap:5px; color:var(--text-dim); font-size:.58rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.stats-heatmap-scroll { overflow-x:auto; }
.stats-card-foot { display:flex; justify-content:space-between; align-items:center; margin-top:16px; padding-top:14px; border-top:1px solid var(--border); color:var(--text-dim); font-size:.72rem; }
.stats-legend { display:flex; align-items:center; gap:3px; }
.stats-legend i { width:11px; height:11px; border-radius:2px; display:inline-block; }

/* efficiency */
.stats-eff-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:22px; }
.stats-eff-tile { padding:16px 18px; margin:0; transition:transform .12s ease, border-color .12s ease; }
.stats-eff-tile:hover { transform:translateY(-2px); border-color:var(--gold-dim); }
.stats-eff-top { display:flex; justify-content:space-between; align-items:flex-start; }
.stats-eff-key { display:flex; align-items:center; gap:4px; color:var(--text-dim); font-size:.58rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.stats-eff-val { font-size:1.9rem; font-weight:700; font-variant-numeric:tabular-nums; margin:6px 0 2px; color:var(--text-hi); }
.stats-eff-label { color:var(--text-med); font-size:.72rem; }
.stats-eff-trend { color:var(--text-dim); font-family:var(--mono); font-size:.66rem; }
.stats-eff-trend.good { color:var(--mint); }
.stats-velocity { margin-top:0; }

/* forecast */
.stats-forecast-grid { display:grid; grid-template-columns:290px 1fr; gap:32px; align-items:center; }
.stats-eta { color:var(--mint); font-size:3.4rem; font-weight:700; line-height:1; font-variant-numeric:tabular-nums; }
.stats-forecast-sub { color:var(--text-med); font-size:.95rem; margin-top:8px; }
.stats-forecast-meta { margin-top:20px; display:flex; flex-direction:column; gap:12px; }
.stats-prog { height:8px; border-radius:999px; background:var(--surface-2); overflow:hidden; }
.stats-prog b { display:block; height:100%; background:linear-gradient(90deg,rgba(57,217,138,.5),var(--mint)); }
.stats-axis { color:var(--text-dim); font-family:var(--mono); font-size:.7rem; }
.stats-goal-note { font-size:.74rem; }
.stats-goal-note.ok { color:var(--mint); }
.stats-goal-note.behind { color:var(--gold); }
.stats-goal-row { display:flex; align-items:center; gap:12px; }
.stats-goal-cur { color:var(--text-hi); font-family:var(--mono); font-size:.74rem; }
.stats-goal-set { align-self:flex-start; background:none; border:none; padding:0; cursor:pointer;
  color:var(--gold); font-size:.74rem; font-family:inherit; }
.stats-goal-set:hover { text-decoration:underline; }
.settings-date { background:var(--surface-1); border:1px solid var(--border-strong); border-radius:8px;
  color:var(--text-hi); font-family:var(--mono); font-size:.8rem; padding:6px 10px; color-scheme:dark; }
.stats-future-grid { display:grid; grid-template-columns:1fr 1.1fr; gap:22px; margin-bottom:32px; align-items:start; }
/* cards inside the grid manage their own internal padding — drop the section
   margin so the gap before "records" matches the other section breaks (#8) */
.stats-future-grid .stats-card { margin-bottom:0; }
.stats-milestones, .stats-scenarios { display:flex; flex-direction:column; }
.stats-milestones { padding:8px 22px 12px; }
.stats-step { display:grid; grid-template-columns:56px 1fr auto; gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid var(--border); }
.stats-step:last-child { border-bottom:none; }
.stats-step .mp { font-family:var(--mono); color:var(--mint); font-size:.8rem; font-weight:700; }
.stats-step .t { color:var(--text-hi); font-size:.82rem; font-weight:600; }
.stats-step .when { font-family:var(--mono); font-size:.72rem; color:var(--mint); text-align:right; }
.stats-scenarios { gap:12px; }
/* All three scenarios share one resting style. Selection is shown by a radio
   dot (left) plus a subtle green top accent — they're a radio group. */
.stats-scenario { display:flex; align-items:center; gap:14px; padding:14px 18px; margin:0; text-align:left; cursor:pointer; transition:background .12s ease, box-shadow .12s ease; }
.stats-scenario:hover { background:var(--surface-1); }
.stats-scenario.selected { background:var(--surface-1); box-shadow:inset 0 2px 0 rgba(57,217,138,.5); }
.stats-scenario-radio { flex:none; width:16px; height:16px; border-radius:50%; border:1.6px solid var(--border-strong); position:relative; transition:border-color .12s ease; }
.stats-scenario:hover .stats-scenario-radio { border-color:var(--text-dim); }
.stats-scenario.selected .stats-scenario-radio { border-color:var(--mint); }
.stats-scenario.selected .stats-scenario-radio::after { content:""; position:absolute; inset:3px; border-radius:50%; background:var(--mint); }
.stats-scenario-main { flex:1; min-width:0; }
.stats-scenario .rk { color:var(--text-hi); font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.stats-scenario .rw { margin-top:5px; font-family:var(--mono); font-size:.66rem; color:var(--text-dim); }
.stats-scenario .eta { display:flex; flex-direction:column; align-items:flex-end; gap:3px; font-size:1.7rem; font-weight:700; line-height:1; font-variant-numeric:tabular-nums; color:var(--mint); }
.stats-scenario-note { margin:4px 2px 0; color:var(--text-dim); font-size:.72rem; line-height:1.45; }

/* records */
.stats-records-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.stats-record { padding:18px 18px; margin:0; text-align:left; cursor:pointer; transition:transform .12s ease, border-color .12s ease; }
.stats-record:hover { transform:translateY(-2px); border-color:var(--gold-dim); }
.stats-record .v { font-size:2rem; font-weight:700; font-variant-numeric:tabular-nums; color:var(--mint); }
.stats-record .sub { color:var(--text-med); font-size:.74rem; margin-top:4px; }
.stats-record .when { color:var(--text-dim); font-family:var(--mono); font-size:.66rem; margin-top:6px; }

/* scrub + calendar tooltips — quiet, mono, not heavy (legibility rule) */
.stats-scrub-tip { position:absolute; top:0; transform:translateX(-50%); pointer-events:none;
  background:var(--panel-bg); border:1px solid var(--border-strong); border-radius:6px; padding:4px 8px;
  font-family:var(--mono); font-size:.66rem; color:var(--text-med); white-space:nowrap; display:flex; flex-direction:column; gap:1px; }
.stats-scrub-tip b { font-weight:500; color:var(--text-hi); }
.stats-scrub-tip span { color:var(--text-dim); }
.stats-cal-tip { position:fixed; transform:translate(-50%, calc(-100% - 6px)); pointer-events:none; z-index:1000;
  background:var(--panel-bg); border:1px solid var(--border-strong); border-radius:6px; padding:4px 8px;
  font-family:var(--mono); font-size:.66rem; color:var(--text-med); white-space:nowrap; display:flex; flex-direction:column; gap:1px; }
.stats-cal-tip.below { transform:translate(-50%, 6px); }
.stats-cal-tip b { font-weight:500; color:var(--text-hi); }
.stats-cal-tip span { color:var(--text-dim); }
.stats-cal-cell { transition:outline-color .1s ease; outline:1.5px solid transparent; outline-offset:1px; }
.stats-cal-cell:hover { outline-color:var(--gold); }

/* entrance animation (reduced-motion safe) */
@media (prefers-reduced-motion: no-preference) {
  .stats-draw-line { stroke-dasharray:1; stroke-dashoffset:1; animation:stats-draw 1.6s ease forwards; }
  .stats-draw-area { opacity:0; animation:stats-fade 1.4s ease .2s forwards; }
}
@keyframes stats-draw { to { stroke-dashoffset:0; } }
@keyframes stats-fade { to { opacity:1; } }

/* responsive */
@media (max-width: 980px) {
  .stats-redesign { padding:18px; }
  .stats-eff-grid, .stats-records-grid { grid-template-columns:1fr 1fr; }
  .stats-forecast-grid, .stats-future-grid { grid-template-columns:1fr; }
  .stats-hero-top { flex-direction:column; gap:14px; }
  .stats-hero-rail { gap:16px; }
}
@media (max-width: 560px) {
  .stats-eff-grid, .stats-records-grid { grid-template-columns:1fr; }
  .stats-rail { flex-wrap:wrap; gap:12px; }
  .stats-rail-cell { flex:1 1 40%; border-left:none !important; padding:0; }
}

/* ===== History Chronicle ===== */

/* ── Category colour system via [data-cat] ───────────────────────────────── */
/* Default: mint. Records → amber. Special → blue. Everything else → mint.   */
.mom-card,
.mom-cat-group,
.tl-tag,
.tl-node,
.tl-pill { --cc: var(--mint); --ccs: var(--mint-soft); }

.mom-card[data-cat="Records"],
.mom-cat-group[data-cat="Records"],
.tl-tag[data-cat="Records"],
.tl-node[data-cat="Records"],
.tl-pill[data-cat="Records"],
.mom-tag[data-cat="Records"] { --cc: var(--amber); --ccs: var(--amber-soft); }

.mom-card[data-cat="Special"],
.mom-cat-group[data-cat="Special"],
.tl-tag[data-cat="Special"],
.tl-node[data-cat="Special"],
.tl-pill[data-cat="Special"],
.mom-tag[data-cat="Special"] { --cc: var(--blue); --ccs: rgba(68, 170, 255, 0.14); }

/* ── Page layout ─────────────────────────────────────────────────────────── */
/* Flat neutral background (matches the stats page) — overrides the global
   body aqua/blue gradient, which read as out of place on this wide layout. */
#history-view { background: var(--bg); }

.history-page {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 28px 130px;
}

/* stretch so the sticky TOC has the full column height to travel within */
.history-grid {
  display: grid;
  grid-template-columns: 212px 1fr;
  gap: 44px;
  align-items: stretch;
}

.history-content {
  min-width: 0;
}

/* Sections scroll-margin so sticky TOC doesn't overlap headings */
#history-replay-section,
#history-journey-section,
#history-runs-section,
#history-moments-section {
  margin-top: 56px;
  scroll-margin-top: 70px;
}

/* ── Table of contents (desktop sidebar) ─────────────────────────────────── */
.history-toc {
  position: relative;
}

.toc-inner {
  position: sticky;
  top: 70px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.toc-lead {
  color: var(--text-dimmer);
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 10px;
  padding-left: 12px;
}

.toc-link {
  display: block;
  padding: 10px 12px;
  border-radius: 9px;
  cursor: pointer;
  border-left: 2px solid transparent;
  border: none;
  background: none;
  color: var(--text-med);
  font-size: 0.84rem;
  font-weight: 600;
  text-align: left;
}

.toc-link:hover { background: var(--surface-0); color: var(--text-hi); }
.toc-link.active { background: var(--mint-soft); border-left: 2px solid var(--mint); color: var(--mint); }

/* ── Mobile anchor strip (hidden on desktop) ─────────────────────────────── */
.history-anchors {
  display: none;
}

.anchor-link {
  white-space: nowrap;
  color: var(--text-dim);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 7px 12px;
  border-radius: 8px;
  border: none;
  background: none;
  cursor: pointer;
}

.anchor-link.active { color: var(--mint); background: var(--mint-soft); }

/* ── Replay hero ─────────────────────────────────────────────────────────── */
/* Override the existing .replay-cta grid for the full Chronicle hero layout  */
.history-page .replay-cta {
  display: block;
  margin: 36px 0 12px;
  padding: 32px 34px 30px;
  border: 1px solid var(--border);
  border-top: 2px solid var(--mint-glow);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(57, 217, 138, 0.06), rgba(255, 255, 255, 0.012) 42%);
  scroll-margin-top: 70px;
}

.replay-eyebrow {
  color: var(--mint);
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.replay-title {
  color: var(--text-hi);
  font-size: 2.5rem;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.08;
  max-width: 18ch;
}

.replay-desc {
  color: var(--text-dim);
  font-size: 0.92rem;
  margin-top: 13px;
  max-width: 52ch;
  line-height: 1.55;
}

.replay-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-top: 28px;
  flex-wrap: wrap;
}

.scale-stats {
  display: flex;
  gap: 34px;
  flex-wrap: wrap;
}

.scale-stat { white-space: nowrap; }

.scale-val {
  color: var(--text-hi);
  font-size: 1.2rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.scale-val small {
  color: var(--text-dim);
  font-size: 0.78rem;
  font-weight: 500;
}

.scale-key {
  color: var(--text-dimmer);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 6px;
  font-family: var(--mono);
}

/* The replay button already has rules; reinforce the key Chronicle values */
.history-page .replay-btn {
  background: var(--mint);
  color: #0c0d14;
  border: none;
  cursor: pointer;
  padding: 15px 28px;
  border-radius: 10px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.history-page .replay-btn:hover { box-shadow: 0 0 0 4px var(--mint-soft); }

/* ── Section head (.shead) ───────────────────────────────────────────────── */
.shead {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 18px;
}

.shead-idx {
  color: var(--text-dimmer);
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 600;
}

.shead-rule {
  display: inline-block;
  width: 26px;
  height: 1px;
  background: var(--border-strong);
  align-self: center;
}

.shead h2 {
  color: var(--text-hi);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.shead-desc {
  color: var(--text-dim);
  font-size: 0.82rem;
}

.shead-tally {
  margin-left: auto;
  color: var(--text-ghost);
  font-family: var(--mono);
  font-size: 0.64rem;
}

/* ── Journey Timeline ────────────────────────────────────────────────────── */
.tl-year {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 30px 0 16px;
  padding-left: 116px;
  scroll-margin-top: 70px;
}

.tl-year:first-of-type { margin-top: 6px; }

.tl-year-num {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-ghost);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.tl-year-count {
  color: var(--text-dimmer);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.05em;
}

/* Row grid: date | rail | body */
.tl-row {
  display: grid;
  grid-template-columns: 100px 30px 1fr;
}

.tl-date {
  text-align: right;
  padding-top: 2px;
  color: var(--text-med);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
}

/* Vertical rail line */
.tl-rail {
  position: relative;
  display: flex;
  justify-content: center;
}

.tl-rail::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--border-strong);
}

/* Timeline nodes — coloured via --cc */
.tl-node {
  position: relative;
  z-index: 1;
  margin-top: 4px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--cc);
}

.tl-node.major {
  width: 15px;
  height: 15px;
  background: var(--cc);
  box-shadow: 0 0 0 4px var(--ccs);
}

/* Major entry body */
.tl-body {
  padding: 0 0 26px 24px;
}

.tl-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--cc);
  font-family: var(--mono);
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 7px;
}

.tl-title {
  color: var(--text-hi);
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.tl-desc {
  color: var(--text-dim);
  font-size: 0.85rem;
  line-height: 1.55;
  margin-top: 7px;
  max-width: 58ch;
  text-wrap: pretty;
}

.tl-run {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 13px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface-0);
  cursor: pointer;
}

.tl-run:hover { border-color: var(--border-strong); background: var(--surface-1); }
.tl-run:hover .tl-run-arrow { color: var(--mint); transform: translateX(2px); }

.tl-run-name {
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

.tl-run-meta {
  color: var(--text-ghost);
  font-family: var(--mono);
  font-size: 0.66rem;
  white-space: nowrap;
}

.tl-run-arrow {
  color: var(--text-dimmer);
  width: 13px;
  height: 13px;
  margin-left: 2px;
  transition: transform 0.15s, color 0.15s;
}

/* Minor entry body */
.tl-min-body {
  display: flex;
  align-items: center;
  gap: 11px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  padding-left: 24px;
}

.tl-min-title {
  color: var(--text-med);
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
}

.tl-pill {
  color: var(--cc);
  font-family: var(--mono);
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--ccs);
}

.tl-min-meta {
  color: var(--text-ghost);
  font-family: var(--mono);
  font-size: 0.66rem;
}

/* Horizon (still-ahead section) — a clean flush-left list, in the main flow */
.tl-horizon {
  margin-top: 14px;
}

.tl-horizon-head {
  color: var(--text-dimmer);
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.hz-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  flex-wrap: wrap;
}

.hz-node {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1.5px dashed var(--text-dimmer);
  flex: 0 0 auto;
  align-self: center;
}

.hz-title {
  color: var(--text-med);
  font-size: 0.88rem;
  font-weight: 600;
}

.hz-desc {
  color: var(--text-dimmer);
  font-size: 0.76rem;
}

.hz-remain {
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 0.68rem;
  margin-left: auto;
}

/* ── Run archive ─────────────────────────────────────────────────────────── */
.run-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.run-search {
  flex: 1;
  min-width: 190px;
  padding: 10px 12px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--surface-0);
  color: var(--text);
  font-size: 0.8rem;
}

.run-search::placeholder { color: var(--text-dimmer); }
.run-search:focus { outline: none; border-color: rgba(57, 217, 138, 0.4); }

/* The toolbar selects have no class — target via run-toolbar select.
   min-width keeps the two dropdowns the same size regardless of label length. */
.run-toolbar select {
  appearance: none;
  min-width: 148px;
  padding: 10px 30px 10px 12px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--surface-0);
  color: var(--text-med);
  font-size: 0.76rem;
  cursor: pointer;
  color-scheme: dark;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a7a8a' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 13px;
}

.run-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* Filter chips — used by both the run archive and the moments catalogue. */
.history-content .chip {
  border: 1px solid var(--border);
  background: var(--surface-0);
  color: var(--text-dim);
  padding: 9px 12px;
  border-radius: 999px;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

.history-content .chip:hover { color: var(--text-med); }
.history-content .chip.active {
  border-color: rgba(57, 217, 138, 0.3);
  background: var(--mint-soft);
  color: var(--mint);
}

.year-group {
  margin-bottom: 6px;
}

.yhead {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 6px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  text-align: left;
  scroll-margin-top: 70px;
}

/* Shared disclosure Chevron, sized to the archive's density (down when
   collapsed, flips up when open — same animation as other app disclosures). */
.yhead .disclosure-chevron { width: 14px; height: 14px; color: var(--text-dim); }

.yhead-year {
  color: var(--text-hi);
  font-size: 1.05rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.yhead-meta {
  color: var(--text-ghost);
  font-family: var(--mono);
  font-size: 0.64rem;
  margin-left: auto;
}

.month-group { /* wrapper for month sub-group */ }

.mhead {
  color: var(--text-dimmer);
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 14px 6px 6px;
}

/* Chronicle run-row: 7 columns — override the general .run-row inside the archive */
.history-content .run-row {
  grid-template-columns: 56px minmax(0, 1.7fr) minmax(0, 1fr) 78px 50px 62px 14px;
  padding: 11px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.history-content .run-row:hover .run-title { color: var(--mint); }
.history-content .run-row:hover .run-arrow { color: var(--mint); transform: translateX(2px); }

.run-badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.55rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 8px;
  vertical-align: middle;
}

.run-badge.is-first { background: var(--mint-soft); color: var(--mint); }
.run-badge.is-mile { background: var(--amber-soft); color: var(--amber); }

.run-parish { color: var(--text-dim); font-size: 0.76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.run-disc { text-align: right; font-family: var(--mono); font-size: 0.72rem; color: var(--mint); }

/* ── Journey Moments ─────────────────────────────────────────────────────── */
.mom-progress {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  color: var(--text-dim);
  font-size: 0.78rem;
}

.mom-progress b { color: var(--mint); }

.mom-bar {
  flex: 1;
  max-width: 220px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.mom-bar-fill {
  display: block;
  height: 100%;
  background: var(--mint);
}

.mom-ahead {
  color: var(--text-dimmer);
  font-family: var(--mono);
  font-size: 0.66rem;
}

.mom-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.mom-cat-group {
  margin-top: 26px;
}

.mom-cat-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 9px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.mom-cat-name {
  color: var(--text-hi);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.mom-cat-blurb {
  color: var(--text-dim);
  font-size: 0.78rem;
}

.mom-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: 12px;
}

/* Moment card — border-top colour driven by --cc */
.mom-card {
  position: relative;
  padding: 16px 17px 15px;
  border: 1px solid var(--border);
  border-top: 2px solid var(--cc);
  border-radius: 11px;
  background: var(--surface-0);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.mom-card:hover { background: var(--surface-1); }

.mom-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 9px;
}

.mom-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--cc);
  font-family: var(--mono);
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.mom-date {
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 0.62rem;
}

.mom-title {
  color: var(--text-hi);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.22;
}

.mom-desc {
  color: var(--text-dim);
  font-size: 0.76rem;
  line-height: 1.45;
  margin-top: 6px;
  text-wrap: pretty;
}

.mom-run {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 11px;
  color: var(--text-ghost);
  font-family: var(--mono);
  font-size: 0.64rem;
}

.mom-card:hover .mom-run { color: var(--cc); }

/* Locked moment card */
.mom-card.locked {
  border-top-style: dashed;
  border-top-color: var(--text-dimmer);
  opacity: 0.72;
  cursor: default;
  background: transparent;
}

.mom-card.locked .mom-tag { color: var(--text-dimmer); }
.mom-card.locked .mom-title { color: var(--text-med); }

.lock-meta {
  display: inline-block;
  margin-top: 10px;
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 0.64rem;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
}

/* ── Responsive breakpoints ──────────────────────────────────────────────── */
@media (max-width: 900px) {
  .history-grid { grid-template-columns: 1fr; }
  .history-toc { display: none; }
  .history-anchors {
    display: flex;
    gap: 4px;
    position: sticky;
    top: 52px;
    z-index: 90;
    margin: 0 -28px 4px;
    padding: 10px 28px;
    overflow-x: auto;
    background: linear-gradient(180deg, var(--bg) 75%, transparent);
    border-bottom: 1px solid var(--border);
  }
  .tl-row { grid-template-columns: 76px 26px 1fr; }
  .tl-year { padding-left: 102px; }
  .replay-title { font-size: 2rem; }
}

@media (max-width: 560px) {
  .history-page { padding: 18px; }
  .tl-row { grid-template-columns: 60px 22px 1fr; }
  .history-content .run-row { grid-template-columns: 50px 1fr 70px 48px; }
  .run-parish, .run-pace, .run-arrow { display: none; }
}