/* Metro page — complements the shared Warm Graphite site stylesheet */

.metro-page { background: var(--bg); }

.nav-current {
  color: var(--text) !important;
  font-weight: 800;
}

.map-hero {
  padding: clamp(4.5rem, 9vw, 8rem) 0 clamp(3rem, 6vw, 5rem);
}

.map-hero-inner { max-width: 62rem; }

.map-hero h1 {
  max-width: 11ch;
  margin-bottom: 1.35rem;
  font-size: clamp(3.2rem, 8vw, 7rem);
}

.map-lede {
  max-width: 48rem;
  margin-bottom: .8rem;
  font-size: clamp(1.2rem, 2vw, 1.55rem);
}

.map-intro {
  max-width: 45rem;
  margin-bottom: 0;
  color: var(--muted);
}

.map-actions { margin-top: 1.8rem; }

.map-content-section {
  padding: 0 0 clamp(4rem, 8vw, 7rem);
}

.map-wide-shell {
  width: min(calc(100% - 2.5rem), 96rem);
  margin-inline: auto;
}

.legend-panel {
  margin-bottom: 1.2rem;
  padding: clamp(1.2rem, 3vw, 1.7rem);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + .25rem);
  background: var(--surface);
  box-shadow: 0 .7rem 2.5rem rgba(55,47,34,.05);
}

.legend-heading {
  display: grid;
  grid-template-columns: 1fr minmax(18rem, .7fr);
  gap: 2rem;
  align-items: end;
  margin-bottom: 1rem;
}

.legend-heading .eyebrow { margin-bottom: .35rem; }
.legend-heading h2 {
  margin: 0;
  font-size: clamp(1.45rem, 2.7vw, 2.2rem);
}
.legend-heading > p {
  margin: 0;
  color: var(--muted);
  font-size: .9rem;
}

.metro-legend {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .65rem 1rem;
}

.legend-item {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: .55rem;
}

.legend-symbol {
  width: 4.3rem;
  height: 2rem;
  flex: 0 0 auto;
  overflow: visible;
}

.legend-label {
  color: var(--text);
  font-size: .86rem;
  font-weight: 680;
  line-height: 1.2;
}

.map-shell {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + .35rem);
  background: #ffffff;
  box-shadow: var(--shadow);
}

.map-scroll {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  background: #ffffff;
}

.map-shell > .map-scroll > svg {
  display: block;
  width: 100%;
  height: auto;
  min-width: 72rem;
  background: #ffffff !important;
}

.map-note {
  margin: .9rem .25rem 0;
  color: var(--muted);
  font-size: .86rem;
}

/* Clickable SVG station overlays */
.station-link {
  cursor: pointer;
  outline: none;
}

.station-hit {
  fill: rgba(255,255,255,0);
  stroke: rgba(20,20,20,0);
  stroke-width: 1.5;
  transition: fill .14s ease, stroke .14s ease, filter .14s ease;
  pointer-events: all;
}

.station-link:hover .station-hit,
.station-link:focus .station-hit {
  fill: rgba(255,255,255,.18);
  stroke: rgba(20,20,20,.55);
  filter: drop-shadow(0 0 4px rgba(0,0,0,.14));
}

.station-link:focus-visible .station-hit {
  stroke: #111;
  stroke-width: 2.5;
}

/* CSS-only station dialogs */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  place-items: center;
  padding: 1.25rem;
}

.modal:target { display: grid; }

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(24,24,20,.62);
  backdrop-filter: blur(8px);
}

.modal-card {
  position: relative;
  z-index: 1;
  width: min(40rem, 100%);
  max-height: min(85vh, 48rem);
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  border-radius: calc(var(--radius) + .15rem);
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 2rem 6rem rgba(20,18,13,.28);
  animation: modal-in .18s ease-out;
}

.modal-accent {
  height: .42rem;
  background: var(--station-accent, var(--accent));
}

.modal-content { padding: clamp(1.3rem, 4vw, 2.25rem); }

.modal-topline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.15rem;
}

.area-tag {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: .25rem .65rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.close-button {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  color: var(--muted);
  font-size: 1.7rem;
  line-height: 1;
  text-decoration: none;
}

.close-button:hover,
.close-button:focus-visible {
  background: var(--surface-2);
  color: var(--text);
  outline: none;
}

.modal h2 {
  margin: 0 0 .65rem;
  font-size: clamp(1.7rem, 4vw, 2.55rem);
  line-height: 1.05;
  letter-spacing: -.035em;
}

.hook {
  margin: 0 0 1rem;
  color: var(--accent);
  font-size: clamp(1.08rem, 2.2vw, 1.28rem);
  font-weight: 780;
  line-height: 1.35;
}

.story {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
}

.back-link {
  display: inline-flex;
  gap: .45rem;
  align-items: center;
  margin-top: 1.5rem;
  color: var(--text);
  font-weight: 730;
  text-decoration: none;
}

.back-link:hover { text-decoration: underline; }

@keyframes modal-in {
  from { transform: translateY(.5rem) scale(.985); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@supports selector(body:has(.modal:target)) {
  body:has(.modal:target) { overflow: hidden; }
}

@media (max-width: 72rem) {
  .metro-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 62rem) {
  .map-wide-shell { width: min(calc(100% - 1.5rem), 96rem); }
  .legend-heading { grid-template-columns: 1fr; gap: .6rem; }
}

@media (max-width: 44rem) {
  .map-hero { padding-top: 3.5rem; }
  .map-hero h1 { font-size: clamp(3rem, 16vw, 4.7rem); }
  .metro-legend { grid-template-columns: 1fr; gap: .45rem; }
  .map-shell > .map-scroll > svg { min-width: 76rem; }
}

@media (prefers-reduced-motion: reduce) {
  .modal-card { animation: none; }
  .station-hit { transition: none; }
}

/* User-supplied metro-map overrides — intentionally last so they take precedence */
svg {
  font-size: 8pt !important;
  font-family: Helvetica, 'Open Sans', sans-serif !important;
  margin: 0;
  background-color: transparent !important;
}

.metroMap-legend {
  text-align: left;
}

.metroMap-area-label {
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: bold;
  pointer-events: none;
  font-size: 8pt;
}

/* TODO remove hack */
.hub-label {
  font-size: 8pt;
  font-weight: bold;
}