.transit-diagram-page #main { max-width:none; width:100%; margin:0; padding:0; font:var(--t-dense)/var(--lh-dense) var(--sans); }
.diagram-heading { display:flex; align-items:center; justify-content:space-between; gap:var(--s-5); padding:var(--s-5) var(--gutter); }
.diagram-heading h1 { font-size:var(--t-title); line-height:var(--lh-title); margin:0 0 var(--s-2); }
.diagram-heading p { margin:0; color:var(--ink-2); }
.diagram-search { position:relative; width:calc(var(--rail) * 1.3); min-width:0; }
.diagram-search label { display:block; margin:0 0 var(--s-1); font-weight:600; }
.diagram-results { position:absolute; top:100%; right:0; left:0; z-index:20; max-height:calc(var(--s-9) * 3.5); overflow:auto; overscroll-behavior:contain; background:var(--lime-raised); border:1px solid var(--rule-strong); box-shadow:var(--shadow-overlay); }
.diagram-results .g-button { width:100%; flex-direction:column; align-items:flex-start; text-align:left; gap:var(--s-1); padding:var(--s-3) var(--s-4); border-bottom:1px solid var(--rule); }
.diagram-results small { font-size:var(--t-dense); color:var(--ink-2); }
.diagram-results p { padding:var(--s-4); margin:0; }
.diagram-workspace { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,calc(var(--rail) * 1.3)); height:max(calc(var(--s-9) * 6.5),calc(100dvh - var(--s-9) * 2.5)); border-top:1px solid var(--rule); border-bottom:var(--zocalo-h) solid var(--zocalo-band); }
.diagram-stage { position:relative; min-width:0; min-height:0; overflow:hidden; background:var(--lime-raised); cursor:grab; touch-action:none; }
.diagram-stage.is-dragging { cursor:grabbing; }
#diagram-map { position:absolute; inset:0; width:100%; height:100%; display:block; }
.diagram-route,.diagram-halo { fill:none; stroke-linecap:round; stroke-linejoin:round; }
.diagram-route { stroke-width:4.1; }
.diagram-halo { stroke:var(--lime-raised); stroke-width:6.6; opacity:.6; }
.diagram-tick { fill:var(--ink-3); }
.diagram-dot { fill:var(--lime-raised); stroke:var(--ink); cursor:pointer; }
.diagram-dot.minor { fill:var(--ink); stroke:none; }
.diagram-cap-dot { fill:var(--lime-raised); stroke:var(--ink); stroke-width:2; }
.diagram-station-label,.diagram-term-name { font:600 var(--t-dense)/var(--lh-dense) var(--sans); fill:var(--ink); paint-order:stroke; stroke:var(--lime-raised); stroke-width:4px; stroke-linejoin:round; }
.diagram-term-name { font-weight:700; }
.diagram-term-badge { font:700 var(--t-dense)/var(--lh-dense) var(--sans); fill:var(--bus-ink); }
#diagram-labels { pointer-events:none; }
.diagram-leader { stroke:var(--ink-3); stroke-width:1; }
.diagram-term-bg { fill:var(--bus-color); }
.diagram-dimmed { opacity:.09; }
.diagram-route-group.is-selected .diagram-route { stroke-width:5.2; }
.diagram-focus-ring { fill:none; stroke:var(--celeste); stroke-width:3; }
.diagram-zoom { position:absolute; top:var(--s-4); left:var(--s-4); z-index:2; display:flex; gap:var(--s-2); }
.diagram-zoom .g-button { color:var(--ink); }
.diagram-zoom :is(#diagram-zoom-in,#diagram-zoom-out) { font-size:var(--t-sub); padding:var(--s-2); }
.diagram-loading,.diagram-error { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:var(--lime-raised); border:1px solid var(--rule); padding:var(--s-5); max-width:calc(100% - var(--s-6)); }
.diagram-error .g-button { margin-top:var(--s-2); }
.diagram-rail { display:flex; flex-direction:column; min-height:0; min-width:0; background:var(--lime); border-left:1px solid var(--rule); }
.diagram-rail-heading { display:flex; align-items:center; justify-content:space-between; gap:var(--s-2); padding:var(--s-3) var(--s-4); border-bottom:1px solid var(--rule); }
.diagram-rail-heading h2 { font:700 var(--t-sub)/var(--lh-head) var(--sans); margin:0; }
.diagram-rail-heading h2 span { font-weight:400; color:var(--ink-2); }
.diagram-lines { list-style:none; padding:var(--s-2); margin:0; overflow:auto; overscroll-behavior:contain; flex:1; min-height:0; }
.diagram-lines li { margin:0; padding:0; border-bottom:1px solid var(--rule); }
.diagram-lines .diagram-line { display:grid; grid-template-columns:var(--hit) minmax(0,1fr) auto; gap:var(--s-2); width:100%; padding:var(--s-3) var(--s-2); text-align:left; font-weight:500; }
.diagram-lines .diagram-line[aria-pressed="true"] { background:var(--ochre-pale); border-left:3px solid var(--celeste); }
.diagram-badge { display:inline-grid; place-items:center; min-width:var(--s-6); min-height:var(--s-5); background:var(--bus-color); color:var(--bus-ink); font-weight:700; border-radius:var(--radius-ctl); }
.diagram-line-name { min-width:0; overflow-wrap:anywhere; }
.diagram-distance { white-space:nowrap; font-size:var(--t-dense); color:var(--ink-2); font-variant-numeric:tabular-nums; }
.diagram-selection { padding:var(--s-4); border-bottom:1px solid var(--rule); background:var(--lime-raised); }
.diagram-selection h3 { font:700 var(--t-sub)/var(--lh-head) var(--sans); margin:0 0 var(--s-2); }
.diagram-selection p { margin:0 0 var(--s-2); color:var(--ink-2); }
.diagram-selection-links { display:flex; flex-wrap:wrap; gap:0 var(--s-4); }
.diagram-selection a { display:flex; align-items:center; min-height:var(--hit); }
.diagram-tooltip { position:absolute; z-index:3; max-width:min(calc(var(--s-9) * 3),calc(100% - var(--s-6))); pointer-events:none; padding:var(--s-3) var(--s-4); background:var(--lime-raised); border:1px solid var(--rule-strong); box-shadow:var(--shadow-overlay); }
.diagram-tooltip strong { display:block; font-size:var(--t-body); }
.diagram-tooltip .diagram-tip-lines { display:flex; flex-wrap:wrap; gap:var(--s-1); margin-top:var(--s-2); }
.diagram-caption { display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--s-3) var(--s-5); padding:var(--s-4) var(--gutter); color:var(--ink-2); }
.diagram-caption p { margin:0; }
.diagram-caption p:last-child { font-size:var(--t-micro); }
.diagram-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.diagram-noscript { padding:var(--s-5) var(--gutter); }
@media (max-width:900px) {
  .diagram-heading { flex-direction:column; align-items:stretch; gap:var(--s-4); padding:var(--s-4); }
  .diagram-search { width:100%; }
  .diagram-workspace { display:flex; flex-direction:column; height:auto; }
  .diagram-stage { flex:none; height:58svh; min-height:calc(var(--s-9) * 4); }
  .diagram-rail { border-left:0; border-top:1px solid var(--rule); }
  .diagram-lines { flex:auto; max-height:calc(var(--s-9) * 4); }
  .diagram-caption { padding:var(--s-4); }
}
@media (prefers-reduced-motion:no-preference) {
  .diagram-route-group { transition:opacity var(--dur) var(--ease); }
}