:root{--a:#20b982;--a2:#38d6a0;--deep:#071817;--panel:#0b201ef0;--ink:#f4fbf8;--muted:#9fb8af;--line:#ffffff1a;--shadow:0 22px 56px #0007;--warn:#f4b860}
*{box-sizing:border-box}html,body,#map{height:100%;margin:0;font-family:Inter,"Segoe UI",system-ui,sans-serif}body{overflow:hidden;color:var(--ink);background:#e9efec}button,input,select{font:inherit}.svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}#map{background:linear-gradient(135deg,#edf3f0 25%,#e4ece8 25% 50%,#edf3f0 50% 75%,#e4ece8 75%);background-size:42px 42px}.leaflet-tile-pane{filter:saturate(.7) brightness(1.04)}.leaflet-control-attribution{font-size:9px}
#railNav{position:absolute;z-index:1100;left:20px;top:20px;bottom:20px;width:68px;padding:12px 7px;border:1px solid var(--line);border-radius:21px;background:#0a201ef2;box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;gap:9px}.brandmark{width:48px;height:48px;border:0;border-radius:15px;background:linear-gradient(145deg,var(--a2),#168b62);color:white;display:grid;place-items:center}.navbtn{width:54px;min-height:56px;border:0;border-radius:15px;color:var(--muted);background:transparent;display:grid;place-items:center;font-size:10px;cursor:pointer}.navbtn:hover,.navbtn.on,.navbtn:focus-visible{color:var(--a2);background:#133d35;outline:2px solid var(--a2)}.navbtn .svg{width:23px;height:23px}.navbottom{margin-top:auto}
#panel{position:absolute;z-index:1050;left:104px;top:20px;bottom:20px;width:390px;border:1px solid var(--line);border-radius:24px;background:var(--panel);box-shadow:var(--shadow);backdrop-filter:blur(18px);display:flex;flex-direction:column;overflow:hidden}.head{padding:16px 18px 13px;border-bottom:1px solid var(--line)}.top{display:flex;align-items:center;gap:9px}.brand{font-size:24px;font-weight:800;letter-spacing:-1px;flex:1}.live{font-size:10px;font-weight:700;letter-spacing:.8px;color:var(--a2)}.live:before{content:"";display:inline-block;width:7px;height:7px;margin-right:5px;border-radius:50%;background:var(--a);box-shadow:0 0 0 4px #20b98222}.lang{display:flex;border:1px solid var(--line);border-radius:11px;overflow:hidden}.lang button{border:0;background:transparent;color:var(--muted);padding:7px 6px;font-size:10px}.lang button.on{background:#ffffff12;color:white}.searchbox{display:flex;align-items:center;gap:8px;margin-top:14px;padding:0 9px 0 13px;border:1px solid var(--line);border-radius:16px;background:#06171499}.searchbox>.svg{color:var(--a2)}.searchbox input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:white;padding:13px 0}.searchbox button{border:0;border-radius:11px;background:linear-gradient(145deg,var(--a2),#168b62);color:white;width:36px;height:36px}.filterrow{margin-top:10px}.filterrow select{width:100%;border:1px solid var(--line);border-radius:11px;background:#102724;color:var(--ink);padding:8px}.counts{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:10px}.count{border:1px solid var(--line);border-radius:13px;background:#ffffff08;color:var(--muted);padding:8px 5px;font-size:10px;text-align:left}.count strong{display:block;color:white;font-size:18px}.count.active{border-color:#20b982aa;background:#20b98217}.count.transit strong{color:var(--a2)}.count.future strong{color:var(--warn)}.statusline{font-size:10px;color:var(--muted);margin-top:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.stale{color:var(--warn)}
#stationHits{max-height:115px;overflow:auto}.station-hit{width:100%;display:flex;align-items:center;gap:9px;padding:10px 16px;border:0;border-bottom:1px solid var(--line);background:#20b9820c;color:var(--ink);cursor:pointer;text-align:left;font-size:12px}.station-hit .svg{color:var(--a2)}#list{list-style:none;padding:0 8px 12px;margin:0;overflow:auto;flex:1}.row{display:grid;grid-template-columns:50px 1fr auto;gap:9px;align-items:center;margin-top:7px;padding:11px;border:1px solid transparent;border-radius:14px;background:#ffffff06;cursor:pointer}.row:hover,.row.active,.row:focus-visible{border-color:#20b98277;background:#20b98213;outline:none}.num{font-size:15px;font-weight:800}.route{font-size:12px;font-weight:650}.sub{font-size:10px;color:var(--muted);margin-top:4px;line-height:1.4}.where{display:flex;align-items:center;gap:4px;color:#cbe5dc}.where .svg{width:12px;height:12px;color:var(--a2)}.state{display:inline-block;font-size:9px;border-radius:9px;padding:4px 6px;background:#ffffff0c;color:var(--muted);white-space:nowrap}.state.transit{background:#20b98220;color:var(--a2)}.state.future{background:#f4b8601c;color:var(--warn)}.star{color:var(--warn)}.empty{padding:35px;color:var(--muted);text-align:center}
#detail{display:none;position:absolute;inset:0;z-index:4;background:#0b201efa;overflow:auto}.detailHead{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line);background:#0b201ef7}.detailHead b{flex:1}.close,.action{border:1px solid var(--line);background:#ffffff0a;color:var(--ink);border-radius:11px;padding:8px;cursor:pointer}.action{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:0}.action.primary{border:0;background:linear-gradient(145deg,var(--a2),#168b62);color:#041511}.detailBody{padding:17px}.detailBody h2{margin:2px 0 5px;font-size:25px}.detailBody h3{margin:22px 0 10px}.heroIcon{width:46px;height:46px;border-radius:14px;background:linear-gradient(145deg,var(--a2),#168b62);display:grid;place-items:center;float:right}.actions{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0}.meta{font-size:12px;line-height:1.8;color:#bad0c8}.positionCard{border:1px solid #20b98244;border-radius:14px;background:#20b9820e;padding:11px 12px;margin:12px 0}.positionCard b{display:flex;gap:6px;color:var(--a2);font-size:12px}.positionCard p{margin:5px 0 0;color:#d3e6df;font-size:12px}.positionCard .nextTime{color:var(--muted);font-size:11px}.sourceNote{font-size:10px;padding:8px;border-radius:9px;background:#ffffff08;color:var(--muted)}.jump{width:100%;margin-top:8px}.stops{border-left:2px solid var(--a);margin:12px 0 0 7px;padding-left:16px}.stop{position:relative;width:100%;border:0;background:transparent;color:var(--ink);text-align:left;font-size:12px;margin:0 0 15px;padding:0;cursor:pointer}.stop:before{content:"";position:absolute;width:9px;height:9px;border-radius:50%;background:var(--a2);left:-21px;top:3px}.stop small{display:block;color:var(--muted);margin-top:3px}.stop.next{padding:9px;border:1px solid #20b98266;border-radius:10px;background:#20b98214}.stop.next:before{width:13px;height:13px;left:-25px;box-shadow:0 0 0 5px #20b98225}.stop.passed{opacity:.56}.board{width:100%;border-collapse:collapse;font-size:11px}.board td{padding:9px 4px;border-bottom:1px solid var(--line)}.board tr{cursor:pointer}.board tr:focus-visible{outline:2px solid var(--a)}
.maptools{position:absolute;right:20px;bottom:28px;z-index:1000;display:grid;gap:8px}.maptool{width:43px;height:43px;border:1px solid var(--line);border-radius:13px;background:#0a201ef2;color:var(--ink);box-shadow:0 9px 25px #0004}.layersPop{display:none;position:absolute;right:52px;bottom:0;width:150px;padding:9px;border:1px solid var(--line);border-radius:14px;background:#0a201ef2;color:white}.layersPop.open{display:block}.layersPop label{display:block;padding:5px;font-size:11px}.toast{position:absolute;z-index:2000;left:50%;bottom:25px;transform:translateX(-50%);background:#071817ee;color:white;padding:10px 14px;border:1px solid var(--line);border-radius:11px;font-size:12px;opacity:0;pointer-events:none;transition:.2s}.toast.show{opacity:1}.offline{position:absolute;z-index:900;top:20px;left:50%;transform:translateX(-50%);padding:8px 12px;border-radius:10px;background:#6b4a16e8;color:#fff;font-size:11px;display:none}.offline.show{display:block}.station-label{background:#f4fbf8ee!important;border:1px solid #0b5d4c33!important;border-radius:6px!important;box-shadow:0 2px 9px #18352d22!important;color:#123c34!important;font-size:10px!important;font-weight:700!important;padding:2px 5px!important}.station-label:before{display:none}.train-div{background:transparent;border:0}.train-marker{width:30px;height:30px;border:2px solid white;border-radius:10px;background:#d78528;color:white;display:grid;place-items:center;box-shadow:0 6px 16px #0005;transform:rotate(45deg)}.train-marker .svg{width:17px;transform:rotate(-45deg)}.train-marker.gps{background:#2184c6}.train-marker.selected{width:36px;height:36px;background:var(--a);box-shadow:0 0 0 7px #20b9822b,0 8px 20px #0005}
@media(max-width:720px){#railNav{left:10px;right:10px;top:auto;bottom:8px;width:auto;height:64px;border-radius:19px;flex-direction:row;padding:5px 8px}.brandmark{width:48px;height:48px}.navbtn{flex:1;min-height:48px;width:auto}.navbottom{margin:0}#panel{left:8px;right:8px;top:auto;bottom:80px;width:auto;height:min(56%,540px)}.head{padding:12px}.brand{font-size:20px}.counts,.lang{display:none}.maptools{right:12px;bottom:calc(min(56%,540px) + 94px)}.toast{bottom:87px}.actions .action{flex:1 1 calc(50% - 4px);white-space:normal}.actions .action.primary{flex-basis:100%}.detailBody{padding:14px}.offline{top:10px;max-width:calc(100% - 24px);text-align:center}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
/* ---- TrainWatch 3: accessibility, freshness, board, card, sheet, about (same tokens as above) ---- */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;z-index:3000;left:12px;top:-60px;padding:10px 14px;border-radius:11px;background:var(--deep);color:var(--ink);border:1px solid var(--a2);text-decoration:none;font-size:13px}.skip:focus{top:12px}
.noscript{position:absolute;z-index:3000;inset:auto 20px 20px;padding:12px;border-radius:12px;background:var(--deep);color:var(--ink)}
a.brandmark,a.navbtn{text-decoration:none}
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,.board tr:focus-visible,.stop:focus-visible{outline:2px solid var(--a2);outline-offset:2px}
.searchbox:focus-within{border-color:#20b98288}
.live{white-space:nowrap;cursor:default}.live.warn{color:var(--warn)}.live.warn:before{background:var(--warn);box-shadow:0 0 0 4px #f4b86022}.live.bad{color:#ff8a7a}.live.bad:before{background:#ff6b5b;box-shadow:0 0 0 4px #ff6b5b22}
.kind{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;letter-spacing:.3px;border-radius:9px;padding:3px 7px;background:#ffffff0c;color:var(--muted);white-space:nowrap}.kind.estimated{background:#f4b8601c;color:var(--warn)}.kind.gps{background:#2184c62a;color:#7cc4f2}.kind.stale{background:#ff6b5b1f;color:#ff9d90}.kind.unknown{background:#ffffff0c;color:var(--muted)}
.badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.age{font-size:10px;color:var(--muted);display:inline-flex;align-items:center;gap:4px}.age .svg{width:12px;height:12px}
.progress{margin:12px 0 4px}.progressBar{height:8px;border-radius:5px;background:#ffffff12;overflow:hidden}.progressBar span{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#168b62,var(--a2))}.progressMeta{display:flex;justify-content:space-between;gap:8px;margin-top:6px;font-size:11px;color:var(--muted)}
.segment{margin:8px 0 2px;font-size:12px;color:#d3e6df}.eta{font-size:12px;color:#d3e6df;margin:6px 0 0}.eta .late,.board .late{color:var(--warn)}.eta .ontime,.board .ontime{color:var(--a2)}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:12px 0 8px;padding:4px;border:1px solid var(--line);border-radius:13px;background:#06171499}.seg button{border:0;border-radius:10px;padding:8px;background:transparent;color:var(--muted);font-size:12px;cursor:pointer}.seg button[aria-pressed="true"]{background:#20b98222;color:var(--a2);font-weight:700}
.board th{font-size:10px;font-weight:600;text-align:left;color:var(--muted);padding:6px 4px;border-bottom:1px solid var(--line)}.board .t{white-space:nowrap;font-variant-numeric:tabular-nums}.board .t b{display:block;font-size:13px}.board .t s{color:var(--muted);font-size:10px}.board tr.past{opacity:.5}.board tr.divider td{padding:10px 4px 4px;font-size:10px;color:var(--muted);cursor:default;border-bottom:0}.board .bnum{font-weight:800}
.stop small .late{color:var(--warn)}
.train-tip .calc{color:#8a6a2a;font-weight:600}
.sheetHandle{display:none}
.lang button{min-width:26px;min-height:26px}
.top .lang{flex:none}.top .live{min-width:0;overflow:hidden;text-overflow:ellipsis}
@media(max-width:720px){
 .lang{display:flex}.top{gap:6px}.lang button{padding:7px 5px}
 #panel{height:var(--sheet-h,min(56%,540px));transition:height .2s}.maptools{bottom:calc(var(--sheet-h,min(56%,540px)) + 94px)}
 #panel.sheet-collapsed{--sheet-h:150px}#panel.sheet-full{--sheet-h:calc(100% - 100px)}
 #panel.sheet-collapsed #list,#panel.sheet-collapsed #stationHits,#panel.sheet-collapsed .filterrow,#panel.sheet-collapsed .statusline{display:none}
 .sheetHandle{display:grid;place-items:center;width:100%;height:20px;border:0;background:transparent;cursor:grab;touch-action:none;flex:none}.sheetHandle span{width:42px;height:5px;border-radius:3px;background:#ffffff33}
 .head{padding-top:2px}
}
body.aboutPage{overflow:auto;background:var(--deep)}
.aboutPanel{position:relative;margin:20px 20px 20px 104px;max-width:760px;border:1px solid var(--line);border-radius:24px;background:var(--panel);box-shadow:var(--shadow);overflow:hidden}
.aboutBody{padding:6px 24px 24px;font-size:14px;line-height:1.6;color:#d3e6df}.aboutBody h1{margin:14px 0 6px;font-size:28px;letter-spacing:-.5px;color:var(--ink)}.aboutBody h2{margin:24px 0 8px;font-size:17px;color:var(--ink)}.aboutBody .lead{font-size:15px;color:var(--ink)}.aboutBody a{color:var(--a2)}.aboutBody ul{padding-left:20px}.aboutBody .kinds p{display:grid;grid-template-columns:96px 1fr;gap:10px;align-items:start;margin:8px 0}.aboutBody .kinds .kind{justify-content:center}.aboutBody .action.primary{text-decoration:none;display:inline-flex;margin-top:12px}
.contact.hidden{display:none}.contact:not(.hidden)+.contact-none{display:none}.contact-none{color:var(--muted)}
html[lang="ru"] [data-l]:not([data-l="ru"]),html[lang="kk"] [data-l]:not([data-l="kk"]),html[lang="en"] [data-l]:not([data-l="en"]){display:none}
body.aboutPage #railNav{position:fixed}
@media(max-width:720px){.aboutPanel{margin:10px 10px 90px}.aboutBody{padding:4px 16px 20px}.aboutBody .kinds p{grid-template-columns:1fr}}
/* Train markers: moving = green, standing at a station = orange; GPS keeps a blue outline; selection keeps its state colour. */
.train-marker.moving{background:var(--a)}.train-marker.stopped{background:#d78528}
.train-marker.gps{border-color:#7cc4f2}
.train-marker.selected.moving{background:var(--a)}.train-marker.selected.stopped{background:#d78528;box-shadow:0 0 0 7px #d785282b,0 8px 20px #0005}
/* base map switcher + zoom-dependent train icon size */
.layersHead{padding:2px 5px 4px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;opacity:.7}
.layersSep{border:0;border-top:1px solid #ffffff26;margin:6px 0}
#map.no-basemap{background:#eef3f1}
.train-marker{scale:var(--train-scale,1);transition:scale .2s}
@media (prefers-reduced-motion:reduce){.train-marker{transition:none}}