/* TransitAI Core · site-specific styles (the home page route map). */
.route-map svg {
  width: 100%;
  overflow: visible;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.route-map path {
  fill: none;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.route-map .in path { stroke: #3a3a3c; }
.route-map .out path { stroke: var(--accent); opacity: 0.85; }
.route-map .trunk { stroke: var(--ink); }
.route-map .stops circle { fill: var(--bg); stroke: #636366; stroke-width: 3; }
.route-map .core circle { fill: var(--bg); stroke: var(--ink); stroke-width: 4; }
.route-map .bus circle { fill: #fff; filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.8)); }
.route-map figcaption { text-align: center; margin-top: clamp(18px, 3vw, 32px); }

@media (prefers-reduced-motion: reduce) {
  .route-map .bus { display: none; }
}

/* Architecture section: the diagram and the field-classification tables. */
.diagram img { width: 100%; border-radius: var(--r-lg); background: #0b0b0d; }
.fields .panel { padding: clamp(14px, 2vw, 22px); overflow-x: auto; }
.fields table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: var(--t-small); line-height: 1.4; }
.fields th, .fields td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.fields th { color: var(--muted); font-weight: 500; }
.fields td:first-child { font: 0.8rem var(--mono); color: var(--ink); white-space: nowrap; }
.fields td:nth-child(2), .fields td:nth-child(3) { white-space: nowrap; }
.fields td:last-child { color: var(--ink-2); }
.c-crit { color: var(--accent); font-weight: 600; }
.c-imp { color: var(--ink-2); }
.c-info { color: var(--muted); }
.s-restricted { color: #ff9f0a; font-weight: 600; }

/* Interactive insights: charts, tooltips, stat tiles, filter chips, matrix. */
.viz { padding: clamp(16px, 2.4vw, 26px); border-radius: var(--r-lg); background: var(--surface); }
.viz + .viz { margin-top: var(--gap); }
.viz-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.viz-title { font-size: var(--t-body); font-weight: 600; color: var(--ink); }
.viz-toggle, .chip, .matrix-btn {
  padding: 5px 12px; border: 1px solid var(--line); border-radius: 980px; background: none;
  color: var(--ink-2); font: 500 var(--t-small) var(--font); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.viz-toggle:hover, .chip:hover, .matrix-btn:hover { color: var(--ink); border-color: var(--muted); }
.viz-toggle[aria-pressed="true"], .chip[aria-pressed="true"] { background: var(--ink); color: #000; border-color: var(--ink); }
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart .tick { font: 11px var(--font); }
.chart .lbl { font: 12px var(--font); }
.chart .val { font: 600 12px var(--font); font-variant-numeric: tabular-nums; }
.chart .mark { cursor: default; outline: none; }
.chart .mark.hot path, .chart .mark.hot rect:not([fill="transparent"]) { filter: brightness(1.18); }
.chart .mark:focus-visible path { outline: 2px solid var(--ink); }
.viz-table { width: 100%; border-collapse: collapse; font-size: var(--t-small); font-variant-numeric: tabular-nums; }
.viz-table th, .viz-table td { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.viz-table th { color: var(--muted); font-weight: 500; }
.viz-table .num { text-align: right; white-space: nowrap; }
.viz figcaption { margin-top: 14px; font-size: var(--t-small); color: var(--muted); }
.tip {
  position: absolute; top: 0; left: 0; z-index: 300; pointer-events: none; opacity: 0;
  min-width: 120px; max-width: 300px; padding: 10px 12px; border-radius: 12px;
  background: rgba(29, 29, 31, 0.94); border: 1px solid var(--line); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  font-size: var(--t-small); color: var(--ink-2); transition: opacity 0.12s var(--ease);
}
.tip.on { opacity: 1; }
.tip-row { display: flex; align-items: baseline; gap: 8px; }
.tip-row + .tip-row { margin-top: 4px; }
.tip-row i { flex: none; width: 10px; height: 3px; border-radius: 2px; translate: 0 -3px; }
.tip-row b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.tip-row span { color: var(--muted); }
.tip-row:first-child b:empty + span { color: var(--ink); font-weight: 600; }
.stats b[data-stat] { font-variant-numeric: normal; }
.stats b[data-stat]:empty::before, .stats b[data-stat][data-pending]::before { content: "—"; color: var(--surface-3); }

.fields-controls { padding-top: 0; }
.fields-controls > * + * { margin-top: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-note { font-size: var(--t-small); color: var(--muted); }
.fields[hidden] { display: none; }
.fields td.n { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.matrix table { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.matrix th, .matrix td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.matrix thead th { color: var(--muted); font-weight: 500; }
.matrix th.num, .matrix td.num { text-align: right; font-variant-numeric: tabular-nums; }
.matrix td.num { color: var(--ink-2); }
.matrix td.total { color: var(--ink); font-weight: 600; }
.matrix td.on, .matrix th.on .matrix-btn { background: var(--accent-soft); }
.matrix th.on .matrix-btn { border-color: var(--accent); color: var(--ink); }
.matrix tbody th { font-weight: 500; }
.matrix-btn { padding: 4px 10px; }

.team { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--gap); padding: 0; list-style: none; }
.team li { padding: clamp(22px, 2.6vw, 30px); border-radius: var(--r-lg); background: var(--surface); }
.team h3 { margin-bottom: 4px; }
.team p { color: var(--muted); }
.team a { display: inline-block; margin-top: 12px; color: var(--accent); font-size: var(--t-small); }
/* Small numbers inside stat captions and prose must not inherit the big-figure style. */
.stats span b.inline, .prose b.inline, .spec b.inline, figcaption b.inline {
  display: inline; margin: 0; font-size: inherit; font-weight: 600; line-height: inherit; letter-spacing: inherit;
  background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--ink); -webkit-text-fill-color: var(--ink);
}