/* Copyright (C) 2026 remrekoc. SPDX-License-Identifier: GPL-3.0-or-later (see LICENSE) */
/* Layout: a full-bleed map; the panel on the left (it folds away, leaving a tab), the city buttons along the top, the legend
   top right and the map controls bottom right (on phones the panel becomes a bottom sheet and the legend opens from the controls).
   Intercity trains read in fixed colours (YHT red, ana hat navy, bölgesel slate); urban lines in their own. */
:root {
  --paper: #fff; --panel: rgba(255, 255, 255, .97);
  --ink: #1a1a1a; --ink-2: #4d4d4d; --ink-3: #747779; --ink-4: #969499; --rule: #e4e4e4; --rule-2: #f3f3f3;
  --accent: #c65100; --accent-2: #ee7f00; --accent-soft: rgba(198, 81, 0, .09);
  --open: #1a1a1a; --construction: #e07000; --planned: #9a9da0;
  --shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 10px 30px rgba(0, 0, 0, .10);
  --f-ui: "Open Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ease: cubic-bezier(.2, .75, .2, 1);
  --panel-w: clamp(360px, 28vw, 410px); --legend-w: 252px; --gut: max(16px, env(safe-area-inset-left, 0px)); --gut-r: max(16px, env(safe-area-inset-right, 0px));
  color-scheme: light;
}
html, body { height: 100%; }
body { margin: 0; background: #e8eaea; color: var(--ink); font: 14px/1.5 var(--f-ui); -webkit-font-smoothing: antialiased; overflow: hidden; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }

#app { position: relative; height: 100%; overflow: hidden; --sheet: 190px; }
#map { position: absolute; inset: 0; }
#map canvas { outline: none; }
/* the map stays hidden until the basemap is fully drawn, then fades in; until then a quiet ground in its own tone */
#map .maplibregl-canvas-container { opacity: 0; transition: opacity .5s ease; }
#map.ready .maplibregl-canvas-container { opacity: 1; }
#map.dark { background: #15181c; }
@media (prefers-reduced-motion: reduce) { #map .maplibregl-canvas-container { transition: none; } }
/* the opening's growing lines, laid over the map until it draws its own */
#map canvas.grow { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; transition: opacity .6s ease; }

/* line badge: the code on the line's colour, like the station signs */
.bd { display: inline-grid; place-items: center; flex: none; min-width: 26px; height: 26px; padding: 0 5px; box-sizing: border-box; border-radius: 6px;
  background: var(--c); color: var(--on, #fff); font: 800 12px/1 var(--f-ui); letter-spacing: -.02em; white-space: nowrap; }
.bd.lg { min-width: 44px; height: 44px; border-radius: 10px; font-size: 15px; }
.bd.sm { min-width: 22px; height: 18px; padding: 0 4px; border-radius: 4px; font-size: 10px; }
.bd.ghost { background: var(--paper); color: var(--c); box-shadow: inset 0 0 0 1.5px var(--c); }
.bd.ic { color: #fff; }
.bd.ic svg { display: block; }
.bd.lg.ic svg { width: 22px; height: 20px; }
.bd.sm.ic { font-size: 9px; letter-spacing: 0; }
.bd.sm.ic svg { width: 11px; height: 11px; }

/* hover card */
.tip { position: absolute; z-index: 8; left: 0; top: 0; width: 250px; background: var(--paper); border-radius: 4px; box-shadow: var(--shadow); pointer-events: none; opacity: 0; transition: opacity .15s; padding: 10px 12px 11px; box-sizing: border-box; }
.tip.on { opacity: 1; }
.tip .th { display: flex; align-items: center; gap: 9px; }
.tip b { display: block; font: 600 14px/1.25 var(--f-ui); }
.tip .ts { display: block; margin-top: 5px; font-size: 12px; color: var(--ink-3); }
.tip .tl { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.tip .ta { display: block; font-size: 12px; color: var(--ink-3); margin-top: 1px; }
.tip .tr { display: block; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--rule-2); font-size: 12px; color: var(--ink-2); }
.tip .tr b { display: inline; font-size: 12.5px; }

/* map controls */
.ctl { position: absolute; z-index: 4; right: var(--gut-r); bottom: 44px; display: flex; flex-direction: column; background: var(--panel); border-radius: 4px; box-shadow: var(--shadow); overflow: hidden; }
.ctl button { width: 36px; height: 36px; display: grid; place-items: center; color: var(--ink-2); }
.ctl button:hover { color: var(--ink); background: var(--rule-2); }
.ctl button + button { border-top: 1px solid var(--rule); }
.ctl b { font: 800 11.5px/1 var(--f-ui); letter-spacing: .02em; }
.ctl button[aria-pressed="true"] { color: #fff; background: var(--ink); }
#layers { display: none; }

/* legend: basemap switch and the status keys, which double as the filter */
.legend { position: absolute; z-index: 4; top: 16px; right: var(--gut-r); width: var(--legend-w); max-height: calc(100% - 200px); overflow-y: auto; scrollbar-width: thin; background: var(--panel); border-radius: 4px; box-shadow: var(--shadow); padding: 12px 12px 10px; box-sizing: border-box; }
.legend .lg-close { display: none; }
.legend .lh { display: flex; align-items: baseline; justify-content: space-between; margin: 0 2px 8px; }
.legend .lh b { font: 700 11px/1 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.legend .lh button { font-size: 12px; color: var(--ink-3); }
.legend .lh button:hover { color: var(--accent); }
.legend .lh #lg-reset { align-self: center; padding: 3px 11px; border: 1px solid var(--rule); border-radius: 12px; font-weight: 600; color: var(--ink-4); transition: background .15s, color .15s, border-color .15s; }
.legend .lh #lg-reset:disabled { cursor: default; }
.legend .lh #lg-reset:not(:disabled) { background: var(--ink); border-color: var(--ink); color: #fff; }
.legend .lh #lg-reset:not(:disabled):hover { background: #3d3d3d; }
.legend .lnote { margin: 8px 2px 0; font-size: 11.5px; line-height: 1.45; color: var(--ink-4); }
.by { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--rule-2); border-radius: 3px; padding: 2px; gap: 2px; }
.by button { padding: 5px 0; font-size: 11.5px; font-weight: 600; color: var(--ink-3); border-radius: 2px; }
.by button:hover { color: var(--ink); }
.by button[aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.keys { list-style: none; margin: 8px 0 0; padding: 0; }
.keys button, .keys .k { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 4px; margin: 0 -4px; box-sizing: content-box; border-radius: 3px; font-size: 12.5px; color: var(--ink); }
.keys button:hover { background: var(--rule-2); }
.keys .n { font-size: 11.5px; color: var(--ink-3); }
.keys button.off { color: var(--ink-4); }
.keys button.off svg { opacity: .3; }
.keys button.off .n { color: var(--rule); }
.keys button.sel, .ty.sel { background: var(--rule-2); box-shadow: inset 2.5px 0 0 var(--ink); font-weight: 600; }
.keys .k { color: var(--ink-3); }
.keys .sep { height: 1px; background: var(--rule); margin: 6px 0; }
/* legend groups: a group header switches all of its types; the keys switch one type each */
.kg { margin-top: 10px; }
.kg-h { display: flex; align-items: center; gap: 8px; width: 100%; padding: 3px 2px; text-align: left; }
.kg-h b { font: 700 11px/1 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.kg-h:hover b { color: var(--accent); }
.kg.off .keys { opacity: .6; }
.keys.extra { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--rule); }
.ck { position: relative; flex: none; width: 15px; height: 15px; border-radius: 3px; border: 1.5px solid var(--ink); box-sizing: border-box; background: var(--paper); }
.on > button > .ck, .on > .ck, .sg.on .ck, .kg.on .ck { background: var(--ink); }
.on > button > .ck::after, .sg.on .ck::after, .kg.on .ck::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.sg.part .ck::after, .kg.part .ck::after { content: ""; position: absolute; left: 2.5px; right: 2.5px; top: 5px; height: 2px; background: var(--ink); }
.switch { display: flex; align-items: center; gap: 9px; margin: 10px 2px 2px; padding-top: 10px; border-top: 1px solid var(--rule); font-size: 12.5px; cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.sw-track { position: relative; flex: none; width: 30px; height: 17px; border-radius: 9px; background: var(--rule); transition: background .2s; }
.sw-track i { position: absolute; left: 2px; top: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .25s var(--ease); }
.switch input:checked + .sw-track { background: var(--ink); }
.switch input:checked + .sw-track i { transform: translateX(13px); }
.switch input:focus-visible + .sw-track { outline: 2px solid var(--accent); outline-offset: 2px; }
.ride-scale { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 4px 14px; margin: 8px 2px 0; font-size: 11.5px; color: var(--ink-2); }
.ride-scale span { display: inline-flex; align-items: center; gap: 6px; }
.ride-scale i { display: block; width: 34px; border-radius: 12px; background: var(--ink-2); }
.ride-scale small { flex-basis: 100%; font-size: 11px; color: var(--ink-4); }
/* the arrow at the foot of the legend folds the filters away, leaving the header and the basemap switch */
.lg-fold { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .34s var(--ease); }
.lg-fold > div { min-height: 0; overflow: hidden; margin: 0 -6px; padding: 0 6px; transition: opacity .26s .06s, visibility 0s; }
.legend.folded .lg-fold { grid-template-rows: 0fr; }
.legend.folded .lg-fold > div { opacity: 0; visibility: hidden; transition: opacity .18s, visibility 0s .34s; }
.lg-tog { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 22px; margin: 8px 0 -10px; padding: 6px 0 10px; border-top: 1px solid var(--rule); background: var(--panel); color: var(--ink-3); font-size: 11.5px; }
.lg-tog:hover { color: var(--ink); }
.lg-tog svg { flex: none; transition: transform .34s var(--ease); }
.legend.folded .lg-tog svg { transform: rotate(180deg); }
.lg-cue { display: none; align-items: center; gap: 6px; font-weight: 600; color: var(--ink); }
.lg-cue::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.legend.folded .lg-cue:not(:empty) { display: inline-flex; }

/* city buttons along the top of the map */
.presets { position: absolute; z-index: 6; top: 16px; left: calc(var(--gut) + var(--panel-w) + 16px); right: calc(var(--gut-r) + var(--legend-w) + 16px); display: flex; justify-content: center; pointer-events: none; }
.pr-row { display: flex; gap: 2px; padding: 3px; background: var(--panel); border-radius: 6px; box-shadow: var(--shadow); pointer-events: auto; max-width: 100%; overflow: hidden; }
.pr-row button, .pr-more-b { flex: none; height: 32px; padding: 0 11px; border-radius: 4px; font-size: 13px; font-weight: 600; color: var(--ink-2); white-space: nowrap; transition: background .15s, color .15s; }
.pr-row button:hover, .pr-more-b:hover { background: var(--rule-2); color: var(--ink); }
.pr-row button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.pr-row button[data-city=""] { display: inline-flex; align-items: center; gap: 6px; }
.pr-row button[data-city=""]::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .5; }
.pr-more { position: relative; margin-left: 4px; pointer-events: auto; }
.pr-more-b { display: inline-flex; align-items: center; gap: 6px; background: var(--panel); box-shadow: var(--shadow); height: 38px; border-radius: 6px; }
.pr-more-b.on { background: var(--ink); color: #fff; }
.pr-menu { display: none; position: absolute; right: 0; top: 44px; min-width: 160px; padding: 4px; background: var(--paper); border-radius: 6px; box-shadow: var(--shadow); }
.presets.menu .pr-menu { display: block; }
.pr-menu button { display: block; width: 100%; padding: 7px 10px; border-radius: 3px; text-align: left; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.pr-menu button:hover { background: var(--rule-2); color: var(--ink); }

/* panel */
#panel { position: absolute; z-index: 5; top: 16px; bottom: 16px; left: var(--gut); width: var(--panel-w); display: flex; flex-direction: column; background: var(--panel); border-radius: 6px; box-shadow: var(--shadow); overflow: hidden; }
/* the tab on the panel's right edge, tucked under it, folds the panel away to the left; folded, it waits at the screen edge */
.ptab { position: absolute; z-index: 4; top: 50%; left: calc(var(--gut) + var(--panel-w) - 6px); width: 28px; height: 48px; margin-top: -24px; padding-left: 6px; box-sizing: border-box; display: grid; place-items: center;
  background: var(--panel); border: 1px solid var(--rule); border-radius: 0 6px 6px 0; box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 4px 12px rgba(0, 0, 0, .08); color: var(--ink-3); transition: transform .38s var(--ease); }
.ptab:hover { color: var(--ink); }
@media (min-width: 761px) {
  #panel { transition: transform .38s var(--ease); }
  .folded #panel { transform: translateX(calc(-100% - var(--gut) - 40px)); visibility: hidden; transition: transform .38s var(--ease), visibility 0s .38s; }
  .folded .ptab { transform: translateX(calc(env(safe-area-inset-left, 0px) - var(--gut) - var(--panel-w))); }
  .folded .ptab svg { transform: scaleX(-1); }
  /* the city buttons move into the freed room once the panel has slid past them, and give it back before it returns */
  .folded .presets { left: var(--gut); transition: left .3s var(--ease) .18s; }
}
.still #panel, .still .ptab, .still .presets { transition: none; }
.grab { display: none; }
.p-head { padding: 20px 24px 0; flex: none; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand .mark { width: 34px; height: 34px; flex: none; }
.brand h1 { margin: 0; font: 700 15px/1.15 var(--f-ui); letter-spacing: -.005em; }
.brand p { margin: 2px 0 0; font-size: 12px; color: var(--ink-3); }
.tabs { display: flex; gap: 22px; margin-top: 18px; border-bottom: 1px solid var(--rule); }
.tabs button { position: relative; padding: 0 0 10px; font-size: 14px; font-weight: 600; color: var(--ink-3); }
.tabs button:hover { color: var(--ink-2); }
.tabs button[aria-selected="true"] { color: var(--ink); }
.tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ink); }
.p-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.view { padding: 18px 24px 28px; }
.view.enter { animation: enter .3s var(--ease); }
@keyframes enter { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

/* tally */
.tally-main { display: flex; align-items: baseline; gap: 8px; font-size: 14px; color: var(--ink-2); }
.tally-main b { font: 600 34px/1 var(--f-ui); letter-spacing: -.02em; color: var(--ink); }
.sbar { display: flex; gap: 2px; height: 6px; margin: 12px 0 7px; }
.sbar i { display: block; height: 100%; background: var(--c); border-radius: 1px; min-width: 2px; transition: flex-grow .6s var(--ease); }
.slegend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--ink-3); }
.slegend button { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); }
.slegend button:hover { color: var(--ink); }
.slegend button.off { color: var(--ink-4); text-decoration: line-through; text-decoration-color: var(--rule); }
.slegend button.off i { background: var(--rule); }
.slegend i { width: 8px; height: 8px; border-radius: 2px; background: var(--c); }
.slegend b { font-weight: 600; color: var(--ink); }

/* the two-group switch: Şehirlerarası and Şehir içi, each with its types */
.scope { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.sg { border: 1px solid var(--rule); border-radius: 5px; padding: 3px; transition: border-color .2s, background .2s; }
.sg.on, .sg.part { border-color: var(--ink-4); }
.sg.off { background: var(--rule-2); }
.sg-h { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 7px 8px; text-align: left; border-radius: 3px; }
.sg-h:hover { background: var(--rule-2); }
.sg-t { display: flex; flex-direction: column; min-width: 0; }
.sg-t b { font: 700 13.5px/1.2 var(--f-ui); }
.sg-t small { font-size: 11.5px; color: var(--ink-3); }
.sg.off .sg-t b { color: var(--ink-3); }
.sg-ty { display: flex; flex-direction: column; padding: 2px 0 2px; border-top: 1px solid var(--rule-2); }
.ty { display: grid; grid-template-columns: 9px 1fr auto; align-items: center; gap: 8px; padding: 4px 7px; border-radius: 3px; text-align: left; font-size: 12.5px; color: var(--ink); }
.ty:hover { background: var(--rule-2); }
.ty i { width: 9px; height: 9px; border-radius: 2px; background: var(--c); }
.ty em { font-style: normal; font-size: 11.5px; color: var(--ink-3); }
.ty.off { color: var(--ink-4); }
.ty.off i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--rule); }
.ty.none { display: none; }
.sc-reset { grid-column: 1 / -1; justify-self: start; margin-top: -2px; font-size: 12.5px; font-weight: 600; color: var(--accent); }
.sc-reset:hover { text-decoration: underline; }

.search { position: relative; display: block; margin-top: 16px; }
.search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.search input { width: 100%; box-sizing: border-box; height: 40px; padding: 0 36px; border-radius: 3px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); font: inherit; font-size: 14.5px; outline: none; transition: border-color .2s, box-shadow .2s; }
.search input::placeholder { color: var(--ink-4); }
.search input:focus { border-color: var(--ink-3); box-shadow: 0 0 0 3px var(--rule-2); }
.search input::-webkit-search-cancel-button { display: none; }
.search kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font: 11px var(--f-ui); color: var(--ink-4); border: 1px solid var(--rule); border-radius: 3px; padding: 1px 6px; }

.chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 27px; padding: 0 9px; border-radius: 3px; border: 1px solid var(--rule); font-size: 12.5px; color: var(--ink-2); background: var(--paper); transition: border-color .15s, background .15s; }
.chip:hover { border-color: var(--ink-4); color: var(--ink); }
.chip[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: #fff; }
.chip span { font-size: 11px; color: var(--ink-4); }
.chip[aria-pressed="true"] span { color: rgba(255, 255, 255, .6); }

/* list */
.grp { margin-top: 24px; }
.grp-head { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 6px 0 8px; border-bottom: 1px solid var(--rule); }
.grp-head .sw { width: 22px; height: 8px; color: var(--c); }
.grp-head .h { font: 700 12px/1 var(--f-ui); letter-spacing: .07em; text-transform: uppercase; }
.grp-head .n { margin-left: auto; font-size: 12px; color: var(--ink-3); }
.plist { list-style: none; margin: 4px 0 0; padding: 0; }
.row { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 13px; width: 100%; text-align: left; padding: 6px 8px; margin: 0 -8px; border-radius: 4px; box-sizing: content-box; transition: background .15s; }
.row:hover, .row.hl { background: var(--rule-2); }
.row .rn { display: block; font: 600 14.5px/1.25 var(--f-ui); min-width: 0; }
.row .ra { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.row .rc { font-size: 12px; color: var(--ink-3); text-align: right; white-space: nowrap; }
.row .bds { display: flex; flex-wrap: wrap; gap: 3px; justify-content: flex-end; max-width: 120px; }
.row .sti { width: 44px; height: 44px; display: grid; place-items: center; }
.row .sti i { width: 14px; height: 14px; border-radius: 50%; border: 3px solid var(--ink); background: #fff; }
.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.mini { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--ink-2); }
.mini s { display: block; width: 44px; height: 4px; border-radius: 2px; background: var(--rule); overflow: hidden; text-decoration: none; }
.mini s::before { content: ""; display: block; height: 100%; width: var(--p); background: var(--construction); }
.row .rv { display: inline-flex; align-items: baseline; gap: 1px; font-size: 13px; font-weight: 600; color: var(--ink); }
.row .rv small { font-size: 11px; font-weight: 400; color: var(--ink-3); }
.row.city .ctile { width: 44px; height: 44px; box-sizing: border-box; border-radius: 10px; border: 1.5px solid var(--ink); display: grid; place-content: center; text-align: center; line-height: 1; }
.row.city .ctile b { font-size: 15px; font-weight: 700; }
.row.city .ctile small { display: block; font-size: 9.5px; color: var(--ink-3); margin-top: 2px; }
.row.city.dim { opacity: .45; }
.row .bds .more, .strip .more { font-size: 11px; color: var(--ink-3); align-self: center; }
.empty { margin-top: 24px; color: var(--ink-2); font-size: 14px; }
.empty button { color: var(--accent); font-weight: 600; }

/* line and station pages */
/* one way back to the list, held at the top while the page scrolls */
.homebar { position: sticky; top: 0; z-index: 3; margin: -18px -24px 6px; padding: 12px 24px 10px; background: var(--paper); }
.home { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 16px 0 11px; border-radius: 17px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .14); transition: background .15s; }
.home:hover { background: #3d3d3d; }
.home svg { flex: none; }
.route { margin: 0 -24px 16px; height: 150px; background: linear-gradient(180deg, var(--rule-2), var(--paper)); border-top: 1px solid var(--rule-2); border-bottom: 1px solid var(--rule-2); }
.route svg { display: block; width: 100%; height: 100%; overflow: visible; }
.route path { fill: none; stroke: var(--c); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.route path.cons { stroke-dasharray: 9 6; }
.route path.plan { stroke-dasharray: .1 8; stroke-width: 5; }
.route path.closed { stroke-opacity: .35; }
.route circle { fill: #fff; stroke: var(--c); stroke-width: 2; }
.route circle.x { stroke: var(--ink); stroke-width: 2.5; }
.route.draw path:not(.cons):not(.plan) { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: draw 1.1s var(--ease) forwards; }
.route.draw path.cons, .route.draw path.plan { animation: pop .8s var(--ease) backwards; }
.route.draw circle { opacity: 0; animation: pop .3s var(--ease) forwards; animation-delay: calc(.35s + var(--i) * .03s); }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
.route circle { transform-box: fill-box; transform-origin: center; }
.eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; font: 700 11px/1.3 var(--f-ui); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.eyebrow .bd { letter-spacing: -.02em; }
.det h2 { margin: 10px 0 2px; font: 600 26px/1.15 var(--f-ui); letter-spacing: -.015em; text-wrap: balance; }
.det-sub { margin: 0; font-size: 13.5px; color: var(--ink-2); }
.state { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 14px; padding: 10px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font-size: 13px; color: var(--ink-2); }
.state .pill { font-size: 12.5px; color: var(--ink); }
.state b { font-weight: 600; color: var(--ink); }
.state .warn { color: var(--accent); font-weight: 600; }
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 14px 16px; margin-top: 16px; }
.stat b { display: block; font: 600 20px/1.1 var(--f-ui); letter-spacing: -.01em; }
.stat span { display: block; margin-top: 3px; font-size: 11.5px; color: var(--ink-3); line-height: 1.3; }
/* ridership */
.rsec { margin-top: 18px; }
.ride .rbs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.ride .rb b { display: block; font: 600 28px/1.05 var(--f-ui); letter-spacing: -.02em; }
.ride .rb span { display: block; margin-top: 5px; font-size: 12px; color: var(--ink-3); line-height: 1.3; }
.rsrc { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: var(--ink-3); }
.rsrc a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
.rsrc a:hover { color: var(--accent); text-decoration-color: currentColor; }
.rsrc + .rsrc { margin-top: 4px; }
.nodata b { display: block; font: 600 20px/1.2 var(--f-ui); color: var(--ink-3); }
.nodata span { display: block; margin-top: 4px; font-size: 12.5px; color: var(--ink-3); }
.gfig { margin-top: 14px; padding: 10px 12px; background: var(--rule-2); border-radius: 4px; }
.gfig .gl { display: block; font: 700 10.5px/1 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.gfig p { margin: 0; font-size: 13px; color: var(--ink-2); }
.gfig p b { font-size: 15px; color: var(--ink); }
.gfig .rsrc { margin-top: 5px; }
.stats.big { margin-top: 14px; }
.stats.big .stat b { font-size: 24px; }
.det .scope { margin-top: 18px; }
.prog { margin-top: 18px; }
.prog .pv { display: flex; align-items: baseline; gap: 8px; font-size: 13px; color: var(--ink-2); }
.prog .pv b { font: 600 34px/1 var(--f-ui); letter-spacing: -.02em; color: var(--ink); }
.prog .bar { height: 8px; margin-top: 10px; border-radius: 4px; background: var(--rule-2); overflow: hidden; }
.prog .bar i { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--construction); transition: width 1.1s var(--ease); }
.dates { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin-top: 14px; }
.dates b { display: block; font: 600 16px/1.2 var(--f-ui); }
.dates span { display: block; margin-top: 3px; font-size: 11.5px; color: var(--ink-3); }
.note { margin-top: 18px; padding: 10px 12px; border-left: 2px solid var(--accent-2); background: var(--accent-soft); font-size: 13px; line-height: 1.55; color: var(--ink-2); }
.note b { display: block; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: 3px; }
.note b span { color: var(--ink-3); }
.note p { margin: 0; }
.sec { margin-top: 26px; }
.sec > h3 { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--rule); font: 700 11px/1 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.sec > h3 span { font: 400 12px var(--f-ui); letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; margin: 0; font-size: 13.5px; }
.dl dt { color: var(--ink-3); }
.dl dd { margin: 0; color: var(--ink); }
.dl dd small { display: block; font-size: 12px; color: var(--ink-3); }
.dl .lnk { text-align: left; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
.dl .lnk:hover { color: var(--accent); text-decoration-color: currentColor; }
.parts { list-style: none; margin: 0; padding: 0; }
.parts li { padding: 9px 0; border-bottom: 1px solid var(--rule-2); }
.parts li:last-child { border-bottom: 0; }
.parts b { display: block; font-size: 13.5px; font-weight: 600; }
.parts span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-3); }

/* stations as a strip map: the line runs down the left, transfers on the right */
.strip { list-style: none; margin: 0; padding: 0; }
.strip li { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 10px; min-height: 32px; padding: 0 6px; margin: 0 -6px; border-radius: 3px; }
.strip li:hover { background: var(--rule-2); }
.strip .sn { text-align: left; }
.strip .sn:hover { color: var(--accent); }
.strip .bds button.bd:hover { filter: brightness(1.12); }
.strip .dot { position: relative; align-self: stretch; }
.strip .dot::before { content: ""; position: absolute; left: 9px; top: 0; bottom: 0; width: 4px; background: var(--c); }
.strip.cons .dot::before { background: repeating-linear-gradient(to bottom, var(--c) 0 7px, transparent 7px 11px); }
.strip.plan .dot::before { left: 9px; background: radial-gradient(circle, var(--c) 1.8px, transparent 2.2px) center top / 4px 7px repeat-y; }
.strip li:first-child .dot::before { top: 50%; }
.strip li:last-child .dot::before { bottom: 50%; }
.strip .dot::after { content: ""; position: absolute; left: 5px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: #fff; border: 2.5px solid var(--c); box-sizing: border-box; }
.strip .x .dot::after { left: 4px; width: 14px; height: 14px; margin-top: -7px; border: 3px solid var(--ink); }
.strip .sn { font-size: 13.5px; line-height: 1.25; padding: 6px 0; }
.strip .old .sn { color: var(--ink-3); }
.strip .old .sn em { font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-4); margin-left: 6px; }
.strip .bds { display: flex; flex-wrap: wrap; gap: 3px; justify-content: flex-end; }
.strip .gap .dot::after { display: none; }
.strip .gap .dot::before { background: repeating-linear-gradient(to bottom, var(--c) 0 3px, transparent 3px 7px); }
.strip .sn.more { font-size: 12.5px; color: var(--ink-3); }
.strip .sn.more:hover { color: var(--accent); }
/* journey times: a minutes column in the station list, and a strip with the stops spaced by timetable minutes */
.strip.timed li { grid-template-columns: 22px 1fr auto auto; }
.strip .tm { min-width: 46px; padding: 6px 0; text-align: right; font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.strip button.tm:hover { color: var(--accent); }
.strip .tm.on { font-weight: 600; color: var(--ink); }
.dur .rb b small { font-size: 14px; font-weight: 600; color: var(--ink-3); margin-left: 3px; letter-spacing: 0; }
.tstrip { margin-top: 18px; }
.ts-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; margin: 0 0 8px; font-size: 12.5px; color: var(--ink-3); }
.ts-h b { font-weight: 600; color: var(--ink); }
.ts-h span { margin-left: auto; font-weight: 600; color: var(--ink); }
.ts-bar { position: relative; height: 18px; margin: 0 7px; }
.ts-bar::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 4px; border-radius: 2px; background: var(--rule); }
.ts-run { position: absolute; right: 0; top: 7px; height: 4px; border-radius: 2px; background: var(--c); }
.ts-d { position: absolute; top: 0; width: 14px; height: 18px; margin-left: -7px; }
.ts-d::before { content: ""; position: absolute; left: 3px; top: 5px; width: 8px; height: 8px; box-sizing: border-box; border-radius: 50%; background: var(--paper); border: 2px solid var(--c); }
.ts-d.pre::before { border-color: var(--ink-4); }
.ts-d.on::before { left: 1px; top: 3px; width: 12px; height: 12px; border: 3px solid var(--ink); }
.ts-d:hover::before { background: var(--c); }
.ts-ax { position: relative; height: 15px; margin: 3px 7px 0; font-size: 11px; color: var(--ink-3); }
.ts-ax span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.ts-ax .end { right: -7px; transform: none; }
.ts-tip { margin: 6px 0 0; font-size: 11.5px; line-height: 1.4; color: var(--ink-4); }
.showall { margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--ink-2); padding: 6px 0; }
.showall:hover { color: var(--accent); }
.state .lnk { font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
.state .lnk:hover { color: var(--accent); text-decoration-color: currentColor; }
.hist { list-style: none; margin: 0; padding: 0; }
.hist li { display: grid; grid-template-columns: 104px 1fr; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--rule-2); font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.hist li:last-child { border-bottom: 0; }
.srcs { list-style: none; margin: 0; padding: 0; }
.srcs li { padding: 6px 0; border-bottom: 1px solid var(--rule-2); font-size: 13px; line-height: 1.45; }
.srcs li:last-child { border-bottom: 0; }
.srcs a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 2px; }
.srcs a:hover { text-decoration-color: var(--ink-3); }
.srcs span { display: block; font-size: 12px; color: var(--ink-3); }
.hist time { color: var(--ink); font-weight: 600; font-size: 12.5px; }
.links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--rule); font-size: 13px; }
.links a { color: var(--ink-2); text-decoration: none; }
.links a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* insights */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 12px; }
.tile b { display: block; font: 600 24px/1 var(--f-ui); letter-spacing: -.02em; }
.tile b small { font-size: 14px; font-weight: 600; color: var(--ink-3); margin-left: 2px; }
.tile span { display: block; margin-top: 6px; font-size: 12px; color: var(--ink-3); line-height: 1.3; }
.tile.s span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--c); margin-right: 6px; vertical-align: 0; }
.bars { list-style: none; margin: 0; padding: 0; }
.bars button { display: grid; grid-template-columns: 40px minmax(0, 1fr) 54px; align-items: center; gap: 3px 10px; width: 100%; text-align: left; padding: 6px; margin: 0 -6px; box-sizing: content-box; border-radius: 3px; }
.bars button:hover { background: var(--rule-2); }
.bars .bd { grid-row: 1 / 3; }
.bars .k { font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bars .v { grid-row: 1 / 3; grid-column: 3; font-size: 12.5px; font-weight: 600; text-align: right; }
.bars .track { grid-column: 2; display: flex; gap: 2px; height: 7px; border-radius: 2px; background: var(--rule-2); overflow: hidden; }
.bars .track i { display: block; height: 100%; background: var(--c); }
.bars .s { grid-column: 2; font-size: 11.5px; color: var(--ink-3); }
.bars.modes button { grid-template-columns: minmax(0, 1fr) 56px; }
.bars.modes .v { grid-column: 2; }
.bars.modes .track, .bars.modes .k, .bars.modes .s { grid-column: 1; }
.bars .k em { font-style: normal; color: var(--ink-3); font-size: 12px; margin-left: 4px; }
.bars.plain button { grid-template-columns: minmax(0, 1fr) 60px; }
.bars.plain .v { grid-column: 2; }
.bars.plain .track, .bars.plain .k, .bars.plain .s { grid-column: 1; }
.bars.times button { grid-template-columns: 40px minmax(0, 1fr) 78px; }
.tb-h { margin: 12px 0 2px; font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.tb-h:first-of-type { margin-top: 0; }
.natl { list-style: none; margin: 0; padding: 0; }
.natl li { padding: 8px 0; border-bottom: 1px solid var(--rule-2); }
.natl li:last-child { border-bottom: 0; }
.natl b { display: block; font: 600 20px/1.1 var(--f-ui); }
.natl span { display: block; margin-top: 3px; font-size: 12px; color: var(--ink-3); }
.natl a { color: var(--ink-2); }
.chart-key { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: -2px 0 10px; font-size: 11.5px; color: var(--ink-3); }
.chart-key span { display: inline-flex; align-items: center; gap: 6px; }
.chart-key i { width: 8px; height: 8px; border-radius: 2px; background: var(--c); }
.muted { color: var(--ink-3); font-size: 12.5px; margin: 10px 0 0; line-height: 1.5; }

/* toast */
.toast { position: absolute; z-index: 9; left: 50%; bottom: 44px; transform: translate(-50%, 16px); padding: 9px 14px; border-radius: 3px; background: var(--ink); color: #fff; font-size: 13px; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: opacity .25s, transform .35s var(--ease); }
.toast.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast button { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; margin-left: 4px; }
@media (min-width: 761px) { .toast { left: calc(50% + var(--panel-w) / 2 + 8px); } .folded .toast { left: 50%; } }

/* MapLibre furniture, quietened to match */
.maplibregl-ctrl-attrib { font: 11px var(--f-ui); background: rgba(255, 255, 255, .8) !important; }
.maplibregl-ctrl-scale { border-color: var(--ink-3); color: var(--ink-3); background: rgba(255, 255, 255, .7); font: 10.5px var(--f-ui); }
.maplibregl-ctrl-bottom-right { right: calc(var(--gut-r) + 46px); }

@media (max-width: 1180px) { #app { --legend-w: 224px; } .legend .keys .n { display: none; } }
/* phones: panel becomes a bottom sheet */
@media (max-width: 760px) {
  #panel { top: auto; left: 0; right: 0; bottom: 0; width: auto; height: var(--sheet); border-radius: 10px 10px 0 0; transition: height .38s var(--ease); }
  #panel.drag { transition: none; }
  .ptab { display: none; }
  .grab { display: block; flex: none; height: 20px; touch-action: none; cursor: grab; position: relative; }
  .grab::after { content: ""; position: absolute; left: 50%; top: 8px; width: 38px; height: 4px; margin-left: -19px; border-radius: 4px; background: var(--rule); }
  .p-head { padding: 0 max(18px, env(safe-area-inset-right, 0px)) 0 max(18px, env(safe-area-inset-left, 0px)); touch-action: none; }
  .brand .mark { width: 28px; height: 28px; }
  .tabs { margin-top: 12px; }
  .view { padding: 14px max(18px, env(safe-area-inset-right, 0px)) 28px max(18px, env(safe-area-inset-left, 0px)); }
  .route { margin-left: -18px; margin-right: -18px; height: 120px; }
  .homebar { margin: -14px -18px 6px; padding: 10px 18px 8px; }
  .presets { top: 10px; left: 8px; right: 8px; justify-content: flex-start; }
  .pr-row { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .pr-row::-webkit-scrollbar { display: none; }
  .pr-more { display: none; }
  .legend { display: none; top: 58px; right: 52px; left: 8px; width: auto; max-height: calc(100% - var(--sheet) - 80px); }
  .legend.open { display: block; }
  .legend .lg-close { display: block; font-size: 20px; line-height: 1; color: var(--ink-3); margin-left: 8px; }
  .legend .lh button#lg-reset { margin-left: auto; }
  #layers { display: grid; }
  .ctl { bottom: auto; top: 58px; right: 8px; }
  .ctl #zin, .ctl #zout { display: none; }
  .maplibregl-ctrl-bottom-right { display: none; }
  .maplibregl-ctrl-bottom-left { bottom: calc(var(--sheet) - 4px); transition: bottom .38s var(--ease); }
  .toast { bottom: auto; top: 58px; transform: translate(-50%, -16px); }
  .scope { gap: 8px; }
  .ride .rb b { font-size: 24px; }
  .det h2 { font-size: 23px; }
  .search kbd { display: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; animation-delay: 0s !important; } }