/* Keep the document's native typography and controls. */
.site-logo { display: block; width: 405px; max-width: 100%; height: auto; }
#network { max-width: 1440px; }
#network a { color: #000; }
#network-filters { width: fit-content; }
#network-filters label, .network-legend span { display: inline-block; margin-right: 1rem; }
.network-layout { display: flex; align-items: flex-start; gap: 1.5rem; }
.network-scroll { flex: 1; min-width: 0; overflow-x: auto; }
#rail-map { display: block; width: 100%; min-width: 740px; height: auto; color: #000; background: #fff; }
.rail-route { fill: none; stroke: #000; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.rail-route.night { stroke-dasharray: 6 6; }
.rail-route.emphasized { stroke-width: 4; }
.rail-route.muted { opacity: .12; }
.rail-route[hidden] { display: none; }
.station { cursor: pointer; outline: none; }
.station .hit-area { fill: transparent; }
.station .stop, .station .hub-ring { fill: #fff; stroke: #000; stroke-width: 2; }
.station text { fill: #000; font-family: inherit; font-size: 16px; paint-order: stroke; stroke: #fff; stroke-width: 5px; stroke-linejoin: round; }
.station.hub text { font-weight: bold; }
.station:hover .stop, .station[aria-pressed="true"] .stop { fill: #000; }
.station:focus-visible .hit-area { stroke: #000; stroke-width: 1; stroke-dasharray: 3 3; }
#city-details { width: 240px; flex-shrink: 0; border-top: 1px solid #000; }
#city-details h3 { margin-bottom: .4rem; }
#city-details ul { padding-left: 1.2rem; }
#city-details li { margin-bottom: .4rem; }
#city-details button { margin-top: .5rem; }
@media (max-width: 900px) {
  .network-layout { flex-direction: column; gap: .5rem; }
  .network-scroll { width: 100%; }
  #city-details { width: 100%; }
}