.legend[hidden] { display: none; }

/* Until an origin exists, geography and origin choice are the whole task.
   Time Rings and transport comparisons become meaningful only after that
   first decision, so keep them out of both the visual and a11y trees. */
body.is-map-active.is-reach-mode:not(.has-origin) .map-surface-rail,
body.is-map-active.is-reach-mode:not(.has-origin) .map-frame .spatial-view-guide,
body.is-map-active.is-reach-mode:not(.has-origin) .mobile-sheet .mobile-spatial-view-guide {
  display: none;
}

/* Functional chrome should remain comfortably legible even where the broader
   atlas uses deliberately fine editorial microtype. */
@media (min-width: 981px) {
  body.is-map-active .command-mast .mode-control-lenses .mode-button strong,
  body.is-map-active .map-origin-search .search-row button {
    font-size: max(var(--type-label), 0.8125rem);
  }

  body.is-map-active .command-mast .mode-control-lenses .mode-button em,
  body.is-map-active .command-mast .share-button,
  body.is-map-active .command-mast .layers-button,
  body.is-map-active .map-origin-search .search-card-top label,
  body.is-map-active .mobile-map-control-rail .spatial-view-button,
  body.is-map-active .map-surface-rail .surface-story-button,
  body.is-map-active .map-surface-rail .surface-story-button.is-active {
    font-size: max(var(--type-micro), 0.75rem);
  }
}

/* Compact desktop: at tablet-landscape widths the permanent dossier used to
   leave the map with barely 640px and forced the command sentence to wrap.
   Search already carries the empty-state task, so let the map own the frame;
   the dossier returns as soon as a station creates real detail to inspect. */
@media (min-width: 981px) and (max-width: 1120px) {
  body.is-map-active:not(.has-origin) .workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  body.is-map-active:not(.has-origin) .side-panel {
    display: none;
  }

  body.is-map-active:not(.has-origin) .map-panel {
    grid-column: 1 / -1;
  }
}

.station-reach-groups {
  display: grid;
  gap: 0.65rem;
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
}

.station-reach-groups.is-compact > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.station-reach-groups.is-compact > summary {
  gap: 0.55rem;
  min-height: 40px;
  list-style: none;
}

.station-reach-groups.is-compact > summary::-webkit-details-marker {
  display: none;
}

.station-reach-groups.is-compact > summary small {
  margin-left: auto;
}

.station-reach-groups.is-compact > summary::after {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin: -3px 3px 0 1px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  opacity: 0.62;
  transform: rotate(45deg);
  transition: transform var(--motion-duration-fast) var(--motion-ease-standard), margin var(--motion-duration-fast) var(--motion-ease-standard);
}

.station-reach-groups.is-compact[open] > summary::after {
  margin-top: 3px;
  transform: rotate(225deg);
}

.station-reach-groups.is-compact > summary small {
  color: var(--muted);
  font-size: 0.65rem;
}

.station-reach-highlights-body {
  display: grid;
  gap: 0.72rem;
}

.station-reach-highlights-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.station-reach-highlights-head > small {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  letter-spacing: 0.055em;
  text-transform: uppercase;
  white-space: nowrap;
}

.station-reach-highlights-body.has-compass {
  grid-template-columns: minmax(0, 1fr) minmax(92px, 0.46fr);
  align-items: center;
  gap: 0.65rem;
}

.station-reach-compass {
  position: relative;
  display: grid;
  min-width: 0;
  place-items: center;
}

.station-reach-compass .reach-clock {
  display: grid;
  gap: 0.25rem;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  justify-items: center;
}

/*
 * The viewBox now contains the bearing labels rather than letting them hang
 * outside on overflow, so this box is the figure's true extent — it can give
 * back the margin that used to be reserved for the spill without the ring
 * itself getting any smaller on screen.
 */
.station-reach-compass .reach-clock-svg {
  display: block;
  width: 100%;
  max-width: 196px;
  height: auto;
  margin: 0 auto;
  overflow: visible;
}

.station-reach-compass .reach-clock-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem 0.7rem;
  margin: -0.2rem 0 0;
  padding: 0;
  border: 0;
  color: var(--ink-label);
  font-family: var(--font-ui);
  font-size: var(--panel-label);
  letter-spacing: 0;
}

.station-reach-compass .reach-clock-foot span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.station-reach-compass .reach-clock-dot {
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  border: 1px solid color-mix(in srgb, var(--ink) 38%, transparent);
}

.station-reach-compass .reach-clock-dot-stations {
  background: var(--plate-rail-red);
}

.station-reach-compass .reach-clock-dot-km {
  background: var(--plate-gold);
}

.station-reach-compass.is-loading {
  opacity: 0.62;
}

.station-reach-milestones {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
}

.station-reach-highlights-body.has-compass .station-reach-milestones {
  grid-template-columns: minmax(0, 1fr);
  align-self: stretch;
  gap: 0;
  padding-left: 0.65rem;
  border-left: 1px solid color-mix(in srgb, var(--ink) 13%, transparent);
}

.station-reach-milestone {
  display: grid;
  gap: 0.32rem;
  min-width: 0;
}

.station-reach-highlights-body.has-compass .station-reach-milestone {
  align-content: center;
  padding-block: 0.48rem;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}

.station-reach-highlights-body.has-compass .station-reach-milestone:last-child {
  border-bottom: 0;
}

.station-reach-milestone > span {
  display: grid;
  gap: 0.08rem;
}

.station-reach-milestone strong {
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 720;
  line-height: 1;
}

.station-reach-highlights-body.has-compass .station-reach-milestone strong {
  font-size: 1.18rem;
}

.station-reach-milestone small {
  overflow: hidden;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.station-reach-milestone > i {
  display: block;
  height: 3px;
  overflow: hidden;
  background: color-mix(in srgb, var(--ink) 10%, transparent);
}

.station-reach-milestone > i > b {
  display: block;
  width: var(--reach-milestone-fill);
  height: 100%;
  background: var(--plate-rail-red, var(--accent));
}

body.is-map-active.is-reach-mode.has-origin:not(.is-comparison-surface) :is(.score-card-caption, .reach-caption-headline, #reachValue, .reach-station-count, .reach-station-count span) {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
}

body.is-map-active.is-reach-mode.has-origin:not(.is-comparison-surface) #reachValue .reach-station-count span {
  overflow-wrap: anywhere;
}

body.is-map-active.is-reach-mode.has-origin.is-comparison-surface :is(#stationRoleCard, #stationDetailsCard, #reachNetworkContext) {
  display: none;
}

/*
 * Life From Here shares the dossier with the Station tab, so it uses the same
 * ledger grammar as .life-access-* in daily-life.css: an uppercase
 * rail-label section header with a bilingual gloss, hairline-ruled rows on a
 * px rhythm, mono tabular times, and the accent (not teal) for selection.
 * It previously ran its own editorial-serif heading and a blue-teal hover,
 * which read as a different product from the tab beside it.
 */
.life-opportunity-panel { display: grid; gap: 10px; overflow-anchor: none; }

.life-opportunity-panel > header {
  display: grid;
  gap: 4px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(17, 16, 14, 0.18);
}

.life-opportunity-panel > header strong {
  color: var(--ink);
  font-family: var(--font-rail-label);
  font-size: var(--type-micro);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.1;
  text-transform: uppercase;
}

.life-opportunity-panel > header p,
.life-opportunity-panel > footer,
.life-opportunity-pois p {
  margin: 0;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.45;
}

/* Legend line: mono, matching .life-access-orbit > header > small. */
.life-opportunity-panel > header small {
  margin: 0;
  color: var(--ink-soft);
  font-family: var(--font-ui);
  font-size: var(--type-micro);
  letter-spacing: 0;
  line-height: 1.3;
}

.life-opportunity-list { display: grid; }

.life-opportunity-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) minmax(52px, auto);
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 45px;
  padding: 6px 2px;
  border: 0;
  border-top: 1px solid rgba(17, 16, 14, 0.11);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--motion-duration-fast) var(--motion-ease-standard), outline-color var(--motion-duration-fast) var(--motion-ease-standard);
}

.life-opportunity-row:hover,
.life-opportunity-row:focus-visible {
  background: rgba(17, 16, 14, 0.04);
  outline: 1px solid rgba(17, 16, 14, 0.15);
  outline-offset: -1px;
}

.life-opportunity-row.is-selected {
  background: color-mix(in srgb, var(--primary-line-color, var(--accent)) 8%, transparent);
  box-shadow: inset 3px 0 0 var(--primary-line-color, var(--accent));
  outline: 1px solid color-mix(in srgb, var(--primary-line-color, var(--accent)) 45%, var(--ink));
  outline-offset: -1px;
}

/*
 * Station roundels carry real line livery around a paper center. The offset
 * bead keeps neighborhood character distinct from rail identity.
 * --life-weight arrives square-rooted, so the 15–23px diameter preserves the
 * area-based local-richness encoding without making the livery unreadable.
 */
.life-opportunity-row > .life-station-roundel {
  --life-dot: calc(15px + (var(--life-weight, 0.5) * 8px));
  --roundel-inset: 3px;
  --signature-dot: 6px;
  justify-self: center;
  width: var(--life-dot);
  height: var(--life-dot);
}

.life-opportunity-row > span { display: grid; gap: 2px; min-width: 0; }

.life-opportunity-row strong,
.life-opportunity-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.life-opportunity-row strong {
  font-size: 0.72rem;
  letter-spacing: 0;
  line-height: 1.2;
}

.life-opportunity-row small {
  color: var(--ink-soft);
  font-size: var(--type-micro);
  letter-spacing: 0;
  line-height: 1.3;
}

.life-opportunity-row small > i {
  display: inline-block;
  width: 6px;
  aspect-ratio: 1;
  margin-right: 5px;
  border: 1px solid rgba(255, 253, 247, 0.9);
  border-radius: 50%;
  background: var(--signature-color, #3d858d);
  box-shadow: 0 0 0 1px rgba(17, 16, 14, 0.28);
  vertical-align: .02em;
}

.life-opportunity-row em {
  justify-self: end;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  font-style: normal;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Matches the other dossier disclosures: rail label, ink, no link colour. */
.life-opportunity-more > summary {
  padding: 8px 2px;
  border-top: 1px solid rgba(17, 16, 14, 0.11);
  color: var(--ink-soft);
  font-family: var(--font-rail-label);
  font-size: var(--type-micro);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

.life-opportunity-more > summary:hover,
.life-opportunity-more > summary:focus-visible {
  color: var(--ink);
}

.life-opportunity-more[open] > summary {
  margin-bottom: 0;
}

.life-opportunity-pois {
  display: grid;
  gap: 0.45rem;
  padding: 0.65rem;
  background: color-mix(in srgb, var(--paper) 80%, transparent);
}

.life-opportunity-pois > strong {
  font-size: 0.72rem;
}

.life-opportunity-pois ul {
  display: grid;
  gap: 0.32rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.life-opportunity-pois li {
  display: grid;
}

.life-opportunity-pois li span {
  font-size: 0.72rem;
  font-weight: 680;
}

.life-opportunity-pois li small {
  color: var(--muted);
  font-size: 0.61rem;
}

@media (max-width: 980px) {
  /* Keep the orbit's 27px cartographic mark while making the button itself a
     dependable 44px touch target. The roundel is repainted inside the larger
     transparent hit box, so the analytical spacing and visual weight stay
     unchanged. */
  .mobile-sheet .life-neighborhood-node {
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
  }

  .mobile-sheet .life-neighborhood-node::before {
    inset: 8px;
    border-color: rgba(17, 16, 14, 0.55);
    background:
      radial-gradient(circle, #fffdf7 0 8px, transparent 8.5px),
      var(--station-livery, #777168);
    box-shadow: 0 0 0 2px rgba(255, 253, 247, 0.91);
  }

  .mobile-sheet .life-neighborhood-node::after {
    right: 7px;
    bottom: 7px;
  }

  .mobile-sheet .life-neighborhood-node.is-selected {
    box-shadow: none;
  }

  .mobile-sheet .life-neighborhood-node.is-selected::before {
    box-shadow:
      0 0 0 2px #fffdf7,
      0 0 0 4px var(--ink);
  }

  .mobile-sheet .life-opportunity-more > summary {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    min-height: 44px;
    padding-block: 6px;
  }

  .mobile-sheet .life-opportunity-panel > header strong {
    font-size: var(--mobile-type-reader-title, 20px);
    line-height: 1.16;
  }

  .mobile-sheet .life-opportunity-panel > header p {
    font-size: var(--mobile-type-body, 14px);
    line-height: 1.45;
  }

  .mobile-sheet :is(.life-neighborhood-orbit > header strong, .life-opportunity-section-label strong) {
    font-size: var(--mobile-type-section, 16px);
    line-height: 1.25;
  }

  .mobile-sheet .life-opportunity-row {
    min-height: 44px;
    border-radius: var(--mobile-radius-analytic, 6px);
    box-shadow: none;
  }

  .mobile-sheet .life-opportunity-row.is-selected {
    border-color: color-mix(in srgb, var(--accent) 52%, var(--mobile-edge-floating, rgba(17, 16, 14, 0.16)));
    background: color-mix(in srgb, var(--accent) 9%, var(--mobile-paper-floating-strong, #fffdf7));
    box-shadow: inset 3px 0 0 var(--accent);
  }
}