/* ============================================================
   Subway map page — long scroll, editorial polish
   ============================================================ */

.sm-root {
  background: var(--surface-base);
  color: var(--fg-body-strong);
  padding-bottom: 80px;
}

/* ─── HERO ───────────────────────────────────────────────────── */
.sm-hero {
  max-width: 1240px;
  margin: 0 auto;
  padding: 56px 56px 32px;
}
.sm-hero-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.sm-hero-eyebrow {
  font: 700 11px/1 var(--font-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-body-light);
}
.sm-hero-title {
  font: 800 64px/1.02 var(--font-body);
  color: var(--fg-heading-strong);
  letter-spacing: -0.025em;
  margin: 0 0 20px;
  max-width: 920px;
}
.sm-hero-title em {
  font-style: normal;
  background: linear-gradient(120deg, var(--ut-teal-500) 0%, var(--ut-blue-500) 55%, var(--ut-yellow-500) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sm-hero-dek {
  font: 400 18px/1.55 var(--font-body);
  color: var(--fg-body);
  max-width: 740px;
  margin: 0;
}
.sm-hero-modes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 36px;
}
.sm-mode-card {
  border: 1.5px solid var(--mode-line);
  background: var(--mode-bg);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: start;
}
.sm-mode-card .num {
  font: 800 32px/1 var(--font-body);
  color: var(--mode-fg);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.sm-mode-card .label {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 700 16px/1.2 var(--font-body);
  color: var(--mode-fg);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.sm-mode-card .label .swatch {
  width: 26px; height: 6px;
  border-radius: 3px;
  background: var(--mode-mark);
}
.sm-mode-card .short {
  font: 600 12px/1.3 var(--font-body);
  color: var(--mode-fg);
  opacity: 0.85;
  margin-bottom: 4px;
}
.sm-mode-card .blurb {
  font: 400 13px/1.45 var(--font-body);
  color: var(--mode-fg);
  opacity: 0.8;
}

/* ─── THE MAP ────────────────────────────────────────────────── */
.sm-map-wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 24px 56px 64px;
}
.sm-map-frame {
  background: var(--surface-base);
  border: 1px solid var(--border-divider);
  border-radius: var(--radius-xl);
  padding: 32px 16px 28px;
  position: relative;
  overflow: hidden;
}
.sm-map-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 10% 20%, rgba(12, 223, 160, 0.05), transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(253, 202, 64, 0.05), transparent 40%);
  pointer-events: none;
}
.sm-map-caption {
  max-width: 1240px;
  margin: 14px auto 0;
  padding: 0 56px;
  font: 400 13px/1.5 var(--font-body);
  color: var(--fg-body-light);
  font-style: italic;
}
.sm-map-caption strong { color: var(--fg-body); font-weight: 700; font-style: normal; }

.sm-map-svg-container {
  position: relative;
  z-index: 1;
}

/* SVG-internal text — kept here for consistency */
.sm-svg-phase-label {
  font: 700 11px/1 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  fill: var(--fg-body-light);
}
.sm-svg-phase-num {
  font: 800 13px/1 var(--font-body);
  fill: var(--fg-heading-strong);
  letter-spacing: -0.01em;
}
.sm-svg-mode-name {
  font: 700 14px/1 var(--font-body);
  letter-spacing: -0.005em;
}
.sm-svg-mode-short {
  font: 600 10px/1 var(--font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.sm-svg-tool-name {
  font: 600 11px/1.15 var(--font-body);
  fill: var(--fg-heading-strong);
  letter-spacing: -0.005em;
}
.sm-svg-tool-sym {
  font: 800 9px/1 var(--font-body);
  fill: var(--surface-base);
  letter-spacing: 0.04em;
}

/* ─── PHASE SECTIONS ─────────────────────────────────────────── */
.sm-phase {
  max-width: 1240px;
  margin: 0 auto;
  padding: 48px 56px;
  border-top: 1px solid var(--border-divider);
}
.sm-phase-head {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 48px;
  margin-bottom: 32px;
  align-items: end;
}
.sm-phase-num {
  font: 800 14px/1 var(--font-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-body-light);
  margin-bottom: 12px;
}
.sm-phase-name {
  font: 800 48px/1 var(--font-body);
  color: var(--fg-heading-strong);
  letter-spacing: -0.025em;
  margin: 0;
}
.sm-phase-blurb {
  font: 400 17px/1.55 var(--font-body);
  color: var(--fg-body);
  margin: 0;
  max-width: 640px;
  padding-bottom: 8px;
}

.sm-tools {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.sm-tool {
  background: var(--surface-base);
  border: 1px solid var(--border-divider);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
.sm-tool:hover {
  border-color: var(--mode-line);
  box-shadow: var(--shadow-sm);
}
.sm-tool-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border-divider);
}
.sm-tool-sym {
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  background: var(--mode-bg);
  color: var(--mode-fg);
  display: grid;
  place-items: center;
  font: 800 13px/1 var(--font-body);
  letter-spacing: -0.005em;
  flex: 0 0 auto;
}
.sm-tool-title {
  font: 700 18px/1.2 var(--font-body);
  color: var(--fg-heading-strong);
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}
.sm-tool-mode {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 700 10px/1 var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--mode-fg);
}
.sm-tool-mode .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--mode-mark);
}
.sm-tool-body {
  padding: 14px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sm-tool-def {
  font: 400 13px/1.55 var(--font-body);
  color: var(--fg-body);
  margin: 0;
}
.sm-tool-banner {
  background: var(--mode-bg);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font: 400 12px/1.5 var(--font-body);
  color: var(--mode-fg);
  border-left: 3px solid var(--mode-mark);
}
.sm-tool-banner strong { font-weight: 700; }
.sm-tool-metaline {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  font: 400 12px/1.4 var(--font-body);
}
.sm-tool-meta-label {
  font: 700 10px/1 var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-body-light);
  margin-bottom: 4px;
}
.sm-tool-meta-value { color: var(--fg-body-strong); }

.sm-tool-when {
  font: 400 12px/1.5 var(--font-body);
  color: var(--fg-body);
  background: var(--surface-canvas);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.sm-tool-when strong {
  font-weight: 700;
  color: var(--fg-body-strong);
}

.sm-tool-prompt {
  border-top: 1px solid var(--border-divider);
  padding: 14px 20px 16px;
  background: var(--ut-neutral-25);
}
.sm-tool-prompt-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.sm-tool-prompt-kind {
  font: 700 9px/1 var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 3px 7px;
  background: var(--ut-blue-50);
  color: var(--ut-blue-800);
  border-radius: var(--radius-xs);
}
.sm-tool-prompt-kind.is-tbd { background: var(--ut-yellow-100); color: var(--ut-yellow-800); }
.sm-tool-prompt-kind.is-none { background: var(--ut-neutral-50); color: var(--fg-body); }
.sm-tool-prompt-name {
  font: 700 11px/1 var(--font-body);
  color: var(--fg-heading-strong);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.sm-tool-prompt-body {
  font: 400 12px/1.55 var(--font-body);
  color: var(--fg-body);
  margin: 0;
}
.sm-tool-prompt-toggle {
  margin-top: 10px;
  border: 1px solid var(--border-divider);
  background: var(--surface-base);
  color: var(--fg-link);
  font: 600 11px/1 var(--font-body);
  padding: 6px 10px;
  border-radius: var(--radius-xs);
  cursor: pointer;
}
.sm-tool-prompt-toggle:hover {
  border-color: var(--border-focus);
}
.sm-tool-prompt-full {
  margin-top: 10px;
  background: var(--surface-base);
  border: 1px solid var(--border-divider);
  border-radius: var(--radius-xs);
  padding: 12px;
  font: 400 11px/1.55 var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
  color: var(--fg-body-strong);
  white-space: pre-wrap;
  max-height: 320px;
  overflow-y: auto;
}

/* ─── FOOTER ─────────────────────────────────────────────────── */
.sm-foot {
  max-width: 1240px;
  margin: 64px auto 0;
  padding: 32px 56px;
  border-top: 1px solid var(--border-divider);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.sm-foot-meta {
  font: 400 13px/1.4 var(--font-body);
  color: var(--fg-body-light);
}
.sm-foot-meta strong { color: var(--fg-body); font-weight: 700; }
.sm-foot-formats {
  display: flex;
  align-items: center;
  gap: 4px;
}
.sm-foot-formats-label {
  font: 700 10px/1 var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-body-light);
  margin-right: 10px;
}
.sm-foot-formats a {
  color: var(--fg-link);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font: 600 13px/1 var(--font-body);
  transition: background var(--duration-fast) var(--ease-out);
}
.sm-foot-formats a:hover { background: var(--hover-bg); }
.sm-foot-formats a.is-current {
  background: var(--selected-bg);
  color: var(--fg-link-hover);
}