:root{--bg:#f6f5f1;--surface:#ffffff;--text:#1d1d1b;--muted:#6b6a64;--line:#d9d6cc;--accent:#0b6e4f;--accent-soft:#dff1e9;--warn:#b45309;--warn-soft:#fdf0dc;--start:#c2410c}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:#15171a;--surface:#1e2125;--text:#ece9e1;--muted:#9a978d;--line:#34373c;--accent:#4ad295;--accent-soft:#17352b;--warn:#f0b34a;--warn-soft:#3a2d14;--start:#f59e63}}
:root[data-theme="dark"]{--bg:#15171a;--surface:#1e2125;--text:#ece9e1;--muted:#9a978d;--line:#34373c;--accent:#4ad295;--accent-soft:#17352b;--warn:#f0b34a;--warn-soft:#3a2d14;--start:#f59e63}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.wrap{max-width:860px;margin:0 auto;padding:max(16px,env(safe-area-inset-top)) 16px 48px}
h1{font-size:1.6rem;margin:6px 0 4px;letter-spacing:-.01em}
.sub{color:var(--muted);margin:0 0 8px;max-width:62ch}
.status{margin:0 0 14px;color:var(--muted);font-size:.85rem}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:14px}
.controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px 12px}
.controls .wide{grid-column:span 2}
@media (max-width:480px){.controls .wide{grid-column:span 1}}
label{display:flex;flex-direction:column;gap:3px;font-size:.8rem;color:var(--muted)}
input,select{font:inherit;font-size:16px;color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:8px 9px;min-height:40px;width:100%}
.pick{position:relative;display:block}
.sugg{position:absolute;left:0;right:0;top:100%;z-index:20;margin:2px 0 0;padding:4px;list-style:none;background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.18);max-height:260px;overflow:auto}
.sugg li{padding:8px 10px;border-radius:6px;cursor:pointer;color:var(--text);font-size:.95rem}
.sugg li.on,.sugg li:hover{background:var(--accent-soft)}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
button{font:inherit;cursor:pointer;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:7px 14px;min-height:40px}
button.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
button:hover{filter:brightness(.97)}
.tabs{display:flex;gap:6px;margin:0}
.tabs button{border-radius:8px 8px 0 0;border-bottom:none;color:var(--muted)}
.tabs button[aria-selected="true"]{position:relative;z-index:1;margin-bottom:-1px;background:var(--surface);border-color:var(--line);box-shadow:inset 0 2px 0 var(--accent);color:var(--text);font-weight:600}
[role="tabpanel"]{border-top-left-radius:0}
.sum{display:flex;flex-wrap:wrap;gap:6px 22px;margin:0 0 12px}
.sum b{font-size:1.2rem}
.sum span{color:var(--muted);font-size:.85rem}
ol.chain{list-style:none;margin:0;padding:0 0 0 6px;border-left:3px solid var(--accent)}
ol.chain li{position:relative;padding:6px 0 6px 16px}
ol.chain li.leg::before{content:"";position:absolute;left:-9px;top:14px;width:12px;height:12px;border-radius:50%;background:var(--accent)}
ol.chain li.walk::before{background:var(--muted)}
ol.chain li.wait{color:var(--muted);font-size:.9rem}
ol.chain li.tight{color:var(--warn)}
ol.chain li.stay{background:var(--accent-soft);border-radius:8px;margin:4px 0 4px 10px;padding:6px 10px}
.t{font-variant-numeric:tabular-nums;font-weight:600}
.line{display:inline-block;background:var(--accent-soft);border:1px solid var(--accent);border-radius:6px;padding:0 6px;font-size:.8rem;font-weight:600;margin:0 4px}
.mute{color:var(--muted)}
.err{background:var(--warn-soft);border:1px solid var(--warn);border-radius:8px;padding:10px 12px}
details{margin-top:12px}
summary{cursor:pointer;color:var(--accent);font-weight:600}
.stop{margin:10px 0 0}
.stop h3{font-size:.92rem;margin:0 0 4px}
.stop ul{list-style:none;margin:0;padding:0;font-size:.88rem}
.stop li{padding:2px 0;display:flex;gap:8px;flex-wrap:wrap}
.stop li.mine{font-weight:600}
.stop li.mine::after{content:"your train";color:var(--accent);font-size:.75rem;border:1px solid var(--accent);border-radius:999px;padding:0 6px;align-self:center}
.reachbar{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:end;justify-content:space-between;margin-bottom:10px}
.reachbar label{display:block}
.reachbar input[type=range]{min-height:28px;padding:0;margin-top:4px}
.legend{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--muted)}
.legend i,.legend em{display:inline-block;width:14px;height:14px;border-radius:50%}
.legend i{background:hsl(130 70% 45%)}.legend em{background:hsl(0 70% 45%)}
.mapbox{position:relative}
canvas{display:block;width:100%;background:var(--bg);border:1px solid var(--line);border-radius:10px;touch-action:manipulation}
.tip{position:absolute;pointer-events:none;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:4px 8px;font-size:.8rem;white-space:nowrap;box-shadow:0 4px 12px rgba(0,0,0,.18)}
.note{color:var(--muted);font-size:.82rem;margin:10px 0 0}
table{width:100%;border-collapse:collapse;font-size:.9rem}
td,th{text-align:left;padding:5px 6px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--muted);font-weight:500}

.dataage{margin:0 0 14px;color:var(--muted);font-size:.85rem}
.dataage[data-level="soon"]{color:var(--warn)}
.dataage[data-level="expired"]{color:var(--warn);background:var(--warn-soft);padding:8px 10px;border-radius:8px;font-weight:600}

/* Plan B: good, late and much later against the plan. Colour is never the only carrier: every way also says it in words. */
:root{--good:#1a7f4b;--mid:#b45309;--bad:#b3261e;--ghost:#8a877d}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--good:#4ad295;--mid:#f0b34a;--bad:#f27b6b;--ghost:#9a978d}}
:root[data-theme="dark"]{--good:#4ad295;--mid:#f0b34a;--bad:#f27b6b;--ghost:#9a978d}
.tabs{flex-wrap:wrap}
@media (max-width:480px){.tabs{flex-wrap:nowrap;gap:3px}.tabs button{flex:1 1 auto;min-width:0;padding:6px 4px;font-size:.85rem;line-height:1.2;overflow-wrap:anywhere}}
button.out{min-height:26px;padding:1px 10px;font-size:.76rem;margin-left:4px;color:var(--bad);border-color:var(--bad);background:transparent}
.lead{margin:0 0 12px}
.lead2{margin:12px 0 8px;font-weight:600}
#ldeps h3{font-size:.92rem;margin:14px 0 2px}
.outs{list-style:none;margin:6px 0 0;padding:0}
.outl{display:flex;flex-direction:row;align-items:center;gap:8px;font-size:.9rem;color:var(--text);padding:3px 0;cursor:pointer}
.outl input{width:auto;min-height:0;margin:0}
.pb{display:block;width:100%;height:auto;background:var(--bg);border:1px solid var(--line);border-radius:10px}
.pb .e{fill:none;stroke-linecap:round;stroke-linejoin:round}
.pb .e.good{stroke:var(--good)}.pb .e.mid{stroke:var(--mid)}.pb .e.bad{stroke:var(--bad)}
.pb .e.walk{stroke-dasharray:6 6}
.pb .e.ghost{stroke:var(--text);opacity:.7;stroke-width:2;stroke-dasharray:1 6}
.pb .n{fill:var(--surface);stroke:var(--muted);stroke-width:2.5}
.pb .n.good{stroke:var(--good)}.pb .n.mid{stroke:var(--mid)}.pb .n.bad{stroke:var(--bad)}
.pb .n.src{fill:var(--start);stroke:var(--start)}
.pb .n.dst{stroke-width:3.5}
.pb .n.dst.good{fill:var(--good)}.pb .n.dst.mid{fill:var(--mid)}.pb .n.dst.bad{fill:var(--bad)}
.pb text{font:12px system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;fill:var(--text);paint-order:stroke;stroke:var(--bg);stroke-width:3px;stroke-linejoin:round}
.pb .nm.key{font-weight:700}
.pb .tm{fill:var(--muted);font-size:11px;font-variant-numeric:tabular-nums}
.legend2{color:var(--muted);font-size:.82rem;margin:8px 0 0}
.chip{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:0 8px;font-size:.78rem;font-weight:600}
.chip.good{color:var(--good);border-color:var(--good)}.chip.mid{color:var(--mid);border-color:var(--mid)}.chip.bad{color:var(--bad);border-color:var(--bad)}
.tag{display:inline-block;font-size:.74rem;color:var(--accent);border:1px solid var(--accent);border-radius:999px;padding:0 7px}
.opts{list-style:none;margin:14px 0 0;padding:0}
.opt{border:1px solid var(--line);border-left:6px solid var(--line);border-radius:10px;padding:10px 12px;margin:0 0 10px}
.opt.good{border-left-color:var(--good)}.opt.mid{border-left-color:var(--mid)}.opt.bad{border-left-color:var(--bad)}
.opt .head{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline}
.mini{list-style:none;margin:8px 0 0;padding:0;font-size:.88rem}
.mini li{padding:2px 0}
.mini li.walk{color:var(--muted)}
.where{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:12px 0 0}
.where .note{margin:0;flex:1 1 240px}
button.near{min-height:30px;padding:2px 10px;font-size:.85rem;margin:2px 0}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.top h1{margin:0}
.langsel{font:inherit;font-size:.85rem;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:6px 10px;min-height:36px;max-width:10.5rem}
.pb .cl{fill:none;stroke:var(--muted);stroke-width:1;opacity:.35}
.pb .cx{fill:var(--muted);opacity:.5}
.pb text.hub{fill:var(--muted);font-size:10px}
.navcard{border-color:var(--accent);background:var(--accent-soft)}
.navhead{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.navhead .mini-btn{margin-left:auto}
.navnow{font-size:1.15rem;font-weight:600;margin:10px 0 4px}
.navbtns{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0}
.navbanner{margin:8px 0}
.navstart{margin:10px 0 0}
.navtest{margin:6px 2px 12px}
button.mini-btn,button.follow{min-height:32px;padding:2px 12px;font-size:.85rem}
button.follow{margin-top:8px}
.pb .e.act{stroke:var(--accent);opacity:.95}
.pb .me{fill:var(--accent);stroke:var(--bg);stroke-width:2}
.pb .me.halo{fill:var(--accent);fill-opacity:.25;stroke:none}
.pb text.me{fill:var(--accent)}
.navgraph{margin:10px 0 0}
/* the map behind the graphs (Natural Earth, public domain) and the controls of the graph */
:root{--water:#d5e5ee;--land:#e9e6d9;--land-de:#faf8f1;--border:#aaa48f;--river:#86b0c8}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--water:#0f171d;--land:#1d2228;--land-de:#2a3037;--border:#555c66;--river:#34556c}}
:root[data-theme="dark"]{--water:#0f171d;--land:#1d2228;--land-de:#2a3037;--border:#555c66;--river:#34556c}
.pb.hasmap{background:var(--water)}
.pb .bm path{stroke-linejoin:round;stroke-linecap:round}
.pb .bm-other{fill:var(--land);stroke:var(--border);stroke-width:.8}
.pb .bm-de{fill:var(--land-de);stroke:var(--border);stroke-width:1.4}
.pb .bm-state{fill:none;stroke:var(--border);stroke-width:.8}
.pb .bm-lake{fill:var(--water);stroke:var(--river);stroke-width:.6}
.pb .bm-river{fill:none;stroke:var(--river);stroke-width:1}
.pb.hasmap text{stroke:var(--land-de);stroke-opacity:.8}
.pb text.hub.city{font-style:italic;font-size:10.5px;letter-spacing:.02em}
.zoomwrap{position:relative;outline:none;touch-action:pan-y}
.zoomwrap.zoomed{touch-action:none}
.zoomwrap:focus-visible .zpic{outline:2px solid var(--accent);outline-offset:2px;border-radius:10px}
.zpic{cursor:grab;user-select:none;-webkit-user-select:none}
.zoomwrap.grab .zpic{cursor:grabbing}
.zbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:8px 0 0}
.zbtn{min-width:40px;min-height:36px;padding:2px 12px}
.zmap{flex-direction:row;align-items:center;gap:6px;margin-left:auto;font-size:.85rem;color:var(--text);cursor:pointer}
.zmap input{width:auto;min-height:0;margin:0}
.zhint{margin:6px 0 0}
/* the bar every tab shares: where you are, where you go, the day and the time (which can follow the clock) */
.herecard .controls{align-items:end}
.herecard .nowbox{color:var(--text);font-size:.9rem}
.herecard .where{margin-top:12px}
.herecard .where .note{flex-basis:100%}
.herecard .moreopts{margin-top:8px}
.herecard .moreopts input{max-width:8rem;margin-top:6px}
@media (max-width:480px){.herecard .controls{grid-template-columns:1fr 1fr}.herecard .controls .wide{grid-column:span 2}}
/* a phone: a grid column may be narrower than the content of its widest item (iOS gives a time field a width of its own),
   so the columns can shrink and the fields fit the card */
@media (max-width:480px){.herecard .controls{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.controls>label{min-width:0}
input[type="time"],input[type="date"]{min-width:0;max-width:100%;-webkit-appearance:none;appearance:none;text-align:left}
input[type="time"]::-webkit-date-and-time-value{text-align:left}
/* the departures: four columns that share the width of the card and wrap, instead of a table wider than the screen */
table.deps{table-layout:fixed}
table.deps td{overflow-wrap:anywhere}
table.deps th{overflow-wrap:normal}
table.deps .dt{width:4rem}
table.deps .dl{width:4.6rem}
@media (max-width:480px){table.deps td,table.deps th{padding:5px 3px;font-size:.85rem}table.deps .dt{width:3.7rem}table.deps .dl{width:3.9rem}table.deps .line{margin:0}}
/* the light/dark switch: the native controls follow the theme, and the button shows the theme it would switch to */
:root{color-scheme:light dark}
:root[data-theme="light"]{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}
.topctl{display:flex;align-items:center;gap:8px}
.themebtn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;min-height:36px;padding:0;flex:0 0 auto}
.themebtn .sun{display:none}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .themebtn .sun{display:block}:root:not([data-theme="light"]) .themebtn .moon{display:none}}
:root[data-theme="dark"] .themebtn .sun{display:block}
:root[data-theme="dark"] .themebtn .moon{display:none}