/* Fake NextBus — public map (/). Design tokens and primitives are ported
   verbatim from the design mockup; the mockup-only gallery chrome
   (.phone/.screen/.rack/.anno) is dropped and a real full-viewport map
   layout plus Leaflet control overrides are added below. */

:root{
  --stage:#e6e7ea; --stage-ink:#14181f; --stage-sub:#5c626b; --stage-hair:#d0d2d7;
  --scr:#e9ebef; --tk:#ffffff; --ink:#14181f; --sub:#6a7280; --faint:#98a1ab; --hair:#e8eaee;
  --go:#0d9b6c; --go-ink:#0a7d57; --warn:#b97a00; --warnbg:#fdf3df; --bad:#d9503a;
  --A1:#d81f34; --A2:#e0b000; --D1:#c6168d; --D2:#6d2077;
  --K:#1b5ba8; --R1:#ef7d00; --R2:#0f8a45; --P:#5b6068;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","Roboto Mono",Menlo,Consolas,monospace;
}
:root[data-theme="dark"]{
  --stage:#0a0c10; --stage-ink:#eef1f5; --stage-sub:#8b94a1; --stage-hair:#20242c;
  --scr:#0e1116; --tk:#171b22; --ink:#eef1f5; --sub:#8b94a1; --faint:#5f6875; --hair:#242a33;
  --go:#22c48a; --go-ink:#22c48a; --warn:#e0a020; --warnbg:#2a2314; --bad:#f2735a;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --stage:#0a0c10; --stage-ink:#eef1f5; --stage-sub:#8b94a1; --stage-hair:#20242c;
  --scr:#0e1116; --tk:#171b22; --ink:#eef1f5; --sub:#8b94a1; --faint:#5f6875; --hair:#242a33;
  --go:#22c48a; --go-ink:#22c48a; --warn:#e0a020; --warnbg:#2a2314; --bad:#f2735a;
}}

*{box-sizing:border-box}
html,body{height:100%}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--scr);color:var(--ink);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;overflow:hidden}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---- route pills (all eight 2026 routes) ---- */
.rp{display:inline-flex;align-items:center;justify-content:center;min-width:27px;height:21px;padding:0 7px;
  border-radius:5px;color:#fff;font-weight:800;font-size:12px;letter-spacing:.02em}
.rp.A1{background:var(--A1)} .rp.A2{background:var(--A2);color:#2e2400} .rp.D1{background:var(--D1)}
.rp.D2{background:var(--D2)} .rp.K{background:var(--K)} .rp.R1{background:var(--R1)}
.rp.R2{background:var(--R2)} .rp.P{background:var(--P)}

/* ---- ticket / perforation ---- */
.ticket{background:var(--tk);border-radius:9px;position:relative;box-shadow:0 1px 2px rgba(20,24,31,.05)}
.perf{position:relative;height:1px}
.perf::before,.perf::after{content:"";position:absolute;top:50%;transform:translateY(-50%);width:14px;height:14px;
  border-radius:50%;background:var(--scr)}
.perf::before{left:-7px} .perf::after{right:-7px}
.perf .l{border-top:1.5px dashed var(--hair);margin:0 11px}

/* ---- search + results ---- */
.search{flex:1;display:flex;align-items:center;gap:8px;background:var(--tk);border:1px solid var(--hair);
  border-radius:9px;padding:9px 12px;font-size:13px;color:var(--ink)}
.search svg{width:14px;height:14px;stroke:var(--faint);fill:none;stroke-width:2.2;flex:0 0 auto}
.search input{flex:1;border:0;outline:none;background:transparent;font:inherit;color:var(--ink);padding:0}
.search input::placeholder{color:var(--faint)}
.sresults{display:flex;flex-direction:column;background:var(--tk);border:1px solid var(--hair);border-top:0;
  border-radius:0 0 9px 9px;overflow:hidden;max-height:46vh;overflow-y:auto}
.sresults:empty{display:none}
.sres{display:flex;align-items:center;gap:10px;padding:11px 14px;border-top:1px solid var(--hair);cursor:pointer}
.sres:first-child{border-top:0}
.sres .nm{font-weight:800;font-size:14px;letter-spacing:-.01em}
.sres .nm small{display:block;font-weight:400;font-size:11px;color:var(--sub);margin-top:1px}
.sres .routes{margin-left:auto;display:flex;gap:4px}
.sres .routes .rp{min-width:22px;height:18px;font-size:10px;border-radius:4px}
.sres.hit{background:color-mix(in srgb,var(--go) 7%,transparent)}
.sres .nm mark{background:transparent;color:var(--go-ink);font-weight:800}

/* ---- bottom sheet (ticket-styled) ---- */
.sheet{position:absolute;left:10px;right:10px;bottom:10px;background:var(--tk);border-radius:11px;
  box-shadow:0 16px 40px -14px rgba(0,0,0,.4);max-width:460px;margin:0 auto;z-index:600;
  max-height:70vh;overflow:hidden;display:flex;flex-direction:column}
.sheet[hidden]{display:none}
.sheet.peek .arow,.sheet.peek .walkhint,.sheet.peek .perf{display:none}
.sheet .grab{width:32px;height:4px;border-radius:2px;background:var(--hair);margin:8px auto 2px;cursor:pointer;flex:0 0 auto}
.sheet .sh{display:flex;align-items:center;gap:8px;padding:5px 14px 3px;cursor:pointer}
.sheet .sh .nm{font-weight:800;font-size:16px;letter-spacing:-.01em}
.sheet .rows{overflow-y:auto}
.walkhint{padding:0 14px 8px;font-size:11.5px;color:var(--sub)}
.walkhint b{color:var(--go-ink);font-weight:700}

/* ---- arrival rows ---- */
.arow{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:10px;padding:9px 14px}
.arow+.arow{border-top:1px solid var(--hair)}
.arow .dest{font-weight:600;font-size:13px}
.arow .cr{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase}
.cr.lo{color:var(--go-ink)} .cr.md{color:var(--warn)} .cr.hi{color:var(--bad)}
.arow .eta{font-family:var(--mono);font-weight:700;font-size:19px;letter-spacing:-.01em;text-align:right;min-width:50px}
.arow .eta small{font-size:10px;color:var(--faint);font-weight:400}
.arow .eta em{display:block;font-style:normal;font-weight:400;font-size:9.5px;color:var(--faint);
  letter-spacing:.03em;margin-top:1px}

/* ---- stale / cold banner ---- */
.banner{display:flex;align-items:center;gap:8px;background:var(--warnbg);color:var(--warn);border-radius:7px;
  padding:8px 10px;font-size:11.5px;font-weight:600}
.banner[hidden]{display:none}

/* ---- full-viewport map layout (real build, not mockup gallery) ---- */
#map{position:absolute;inset:0;background:var(--scr)}
.mtop{position:absolute;top:0;left:0;right:0;z-index:600;display:flex;flex-direction:column;
  gap:0;padding:10px;max-width:460px;margin:0 auto}
.mtop .searchrow{display:flex;align-items:center;gap:10px}

/* ---- Leaflet control overrides to match the token palette ---- */
.leaflet-container{background:var(--scr);font-family:var(--sans)}
.leaflet-bar,.leaflet-bar a{background:var(--tk);color:var(--ink);border-color:var(--hair)}
.leaflet-bar a:hover{background:var(--scr)}
.leaflet-control-attribution{background:color-mix(in srgb,var(--tk) 82%,transparent)!important;
  color:var(--sub)!important;font-family:var(--mono);font-size:9px}
.leaflet-control-attribution a{color:var(--go-ink)!important}
.leaflet-control-attribution img{height:10px;width:auto;vertical-align:-1px;margin-right:3px}
.leaflet-tooltip{background:var(--tk);color:var(--ink);border:1px solid var(--hair);
  box-shadow:0 1px 2px rgba(20,24,31,.12);font-weight:700;font-size:11px}
.leaflet-tooltip-top:before{border-top-color:var(--hair)}
/* Bus markers colour by route class (not an inline style attribute, which the
   style-src 'self' CSP would drop). */
.busmark{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;
  background:var(--P);color:#fff;font-weight:800;font-size:9px;box-shadow:0 1px 3px rgba(0,0,0,.4);
  border:1.5px solid rgba(255,255,255,.85)}
.busmark.A1{background:var(--A1)} .busmark.A2{background:var(--A2);color:#2e2400} .busmark.D1{background:var(--D1)}
.busmark.D2{background:var(--D2)} .busmark.K{background:var(--K)} .busmark.R1{background:var(--R1)}
.busmark.R2{background:var(--R2)} .busmark.P{background:var(--P)}

/* ================================================================
   Mini App (Task 9) — dashboard (/app) and ways editor (/app/overrides).
   Blocks ported from the design mockup (screens
   02–03), stripped of the gallery-only chrome. Design tokens/primitives above
   (.rp/.ticket/.perf/.arow/.cr) are reused, not re-declared.
   ================================================================ */

/* The Mini App pages scroll their own body (unlike the fixed map). */
body.mini{overflow:hidden auto;background:var(--scr);height:auto;min-height:100%}
.mini .flow,.mini .oflow{max-width:460px;margin:0 auto}
.mini .flow{padding:12px 14px 44px}
.mini .oflow{padding:2px 14px 44px}

/* ---- greeting ---- */
.greet{display:flex;align-items:center;gap:8px;padding:2px 4px 10px}
.greet .k{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--sub)}

/* ---- next-bus hero ticket ---- */
.hero{border:1.6px solid var(--go);border-radius:11px;background:var(--tk);margin-bottom:12px;position:relative}
.hero .top{padding:12px 15px 12px}
.hero .eyebrow{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--go-ink);
  display:flex;align-items:center;gap:6px}
.hero .bc{width:52px;height:13px;margin-left:auto;opacity:.3;color:var(--ink);
  background:repeating-linear-gradient(90deg,currentColor 0 1.5px,transparent 1.5px 3px,currentColor 3px 5.5px,transparent 5.5px 7px)}
.hero h3{margin:6px 0 3px;font-size:24px;font-weight:800;letter-spacing:-.025em;line-height:1;display:flex;align-items:center;gap:5px}
.hero h3 .rp{vertical-align:baseline}
.hero h3 .wk{font-weight:800;color:var(--go-ink)}
.hero .sub{font-size:12.5px;color:var(--sub);line-height:1.5}
.hero .sub b{color:var(--ink);font-weight:600}
.hero .deps{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;padding:11px 15px 2px;
  font-family:var(--mono);font-size:11.5px;line-height:1.4;color:var(--sub)}
.hero .deps b{color:var(--ink);font-weight:700}
.hero .deps .cr{font-size:9px}
.hero .perf::before,.hero .perf::after{background:var(--scr);box-shadow:inset 0 0 0 1.6px var(--go)}
.hero .perf::before{left:-8.6px} .hero .perf::after{right:-8.6px}

/* "Other ways" chips + Adjust link */
.alts{display:flex;align-items:center;gap:7px;padding:9px 15px;border-top:1px solid var(--hair);flex-wrap:wrap}
.alts .k{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.alt{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--hair);border-radius:6px;
  height:31px;padding:0 8px 0 5px;font-family:var(--mono);font-size:11px;color:var(--sub);background:var(--tk);
  cursor:pointer;text-decoration:none}
.alt b{color:var(--ink);font-weight:700}
.alt .wk{font-weight:800;color:var(--go-ink);font-family:var(--sans)}
.alt.edit{border-style:dashed;color:var(--go-ink);font-family:var(--sans);font-weight:700}

/* ---- NOW hairline — quiet current-time divider (no glow/pulse) ---- */
.nowline{display:flex;align-items:center;gap:9px;margin:11px 2px}
.nowline .ln{flex:1;height:1px;background:var(--go-ink);opacity:.3}
.nowline .tag{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.14em;color:var(--go-ink);opacity:.85}

/* ---- used / stamped lesson tickets ---- */
.ticket.used{opacity:.55}
.ticket.used .seg .mod,.ticket.used .seg .ven{color:var(--sub)}
.stamp{position:absolute;right:12px;top:55%;transform:translateY(-50%) rotate(-7deg);border:1.5px solid var(--faint);
  color:var(--faint);font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;
  padding:3px 8px;border-radius:4px;background:var(--tk)}

/* ---- lesson segment + hop lines ---- */
.seg{padding:12px 15px}
.seg .tm{font-family:var(--mono);font-size:11px;color:var(--faint);letter-spacing:.04em;float:right}
.seg .mod{font-weight:800;font-size:15px;letter-spacing:-.01em}
.seg .ven{font-size:12px;color:var(--sub);margin-top:2px}
.hop{display:flex;align-items:center;gap:9px;padding:10px 15px}
.hop .ac{width:3px;align-self:stretch;border-radius:2px;background:var(--D1)}
.hop.walk .ac{background:var(--go)}
.hop .vb{font-weight:700;font-size:13px}
.hop .vb-walk{color:var(--go-ink)}
.hop .d{font-family:var(--mono);font-size:11px;color:var(--sub);margin-left:auto}
.hop .d b{color:var(--ink);font-weight:700}
.hop .car{color:var(--faint)}
.spacer{height:10px}
.noterow{display:flex;align-items:center;gap:8px;margin-top:12px;padding:11px 14px;border:1px solid var(--hair);
  border-radius:9px;font-size:12px;color:var(--sub)}
.noterow b{color:var(--ink);font-weight:600}
.noterow .car{margin-left:auto;color:var(--faint)}

/* ---- ways editor header ---- */
.oh{display:flex;align-items:center;gap:10px;padding:8px 16px 10px;max-width:460px;margin:0 auto}
.oh[hidden]{display:none}
.oh .t{font-weight:800;font-size:16px;letter-spacing:-.01em}
.oh .t small{display:block;font-family:var(--mono);font-size:9.5px;font-weight:400;color:var(--sub);
  letter-spacing:.1em;text-transform:uppercase;margin-top:2px}

/* ---- segmented Auto / Choose ---- */
.segauto{display:flex;border:1px solid var(--hair);border-radius:8px;padding:3px;background:var(--tk)}
.segauto button{flex:1;border:0;background:transparent;font:inherit;font-weight:700;font-size:12.5px;padding:9px;
  border-radius:5px;cursor:pointer;color:var(--sub)}
.segauto button[aria-pressed="true"]{background:var(--ink);color:var(--scr)}

/* ---- ranked / pooled ways ---- */
.ways{margin-top:10px;display:flex;flex-direction:column;gap:7px}
.way{background:var(--tk);border:1px solid var(--hair);border-radius:9px;overflow:hidden}
.way .row{display:flex;align-items:center;gap:9px;padding:11px 12px;cursor:pointer}
.way .ck{width:19px;height:19px;border-radius:6px;border:1.6px solid var(--hair);display:grid;place-items:center;
  font-size:12px;color:#fff;flex:0 0 auto}
.way.on{border-color:var(--go)}
.way.on .ck{background:var(--go);border-color:var(--go)}
.rank{width:19px;height:19px;border-radius:6px;background:var(--go);color:#fff;font-family:var(--mono);
  font-weight:700;font-size:11px;display:grid;place-items:center;flex:0 0 auto}
.reorder{display:flex;flex-direction:column;gap:1px;margin-left:2px;flex:0 0 auto}
.reorder button{border:0;background:transparent;color:var(--faint);cursor:pointer;font-size:10px;line-height:1;padding:1px 2px}
.reorder button:disabled{opacity:.25;cursor:default}
.untick{border:0;background:var(--go);color:#fff;width:19px;height:19px;border-radius:6px;font-size:12px;
  cursor:pointer;flex:0 0 auto;display:grid;place-items:center}
.way .wk{font-weight:800;color:var(--go-ink);font-size:12.5px;min-width:34px}
.way .wn{color:var(--sub);flex:1;font-size:12.5px}
.way .row>b{font-family:var(--mono);font-weight:700;font-size:14px}
.stops{display:flex;gap:8px;padding:9px 12px 11px;border-top:1px solid var(--hair);background:var(--scr)}
.stops .sel{flex:1;display:flex;align-items:center;justify-content:space-between;background:var(--tk);
  border:1px solid var(--hair);border-radius:7px;padding:6px 10px;font-size:12px;font-weight:700}
.stops .sel small{font-family:var(--mono);font-size:8.5px;font-weight:400;color:var(--faint);letter-spacing:.1em;
  text-transform:uppercase;display:block;margin-bottom:2px}
.stops .sel select{border:0;outline:none;background:transparent;font:inherit;font-weight:700;color:var(--ink);
  width:100%;padding:0}
.hint{margin-top:10px;font-size:11.5px;color:var(--sub);line-height:1.45}
.hint b{color:var(--ink);font-weight:600}

/* ---- edge-state cards (opened outside Telegram / no timetable / empty) ---- */
.mini .ecard{background:var(--tk);border-radius:11px;overflow:hidden;box-shadow:0 1px 2px rgba(20,24,31,.06);
  margin:16px auto;max-width:460px}
.ecard .eb{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
  padding:11px 14px 0}
.ecard .body{padding:12px 16px 16px}
.ecard h4{margin:2px 0 6px;font-size:16px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.ecard p{margin:0;font-size:12.5px;line-height:1.55;color:var(--sub)}
.ecard p b{color:var(--ink);font-weight:600}
.ecard .btn{display:inline-block;margin-top:12px;background:var(--ink);color:var(--scr);border-radius:7px;
  padding:9px 14px;font-size:12.5px;font-weight:700;text-decoration:none}
.ecard .ghost{display:inline-block;margin-top:12px;border:1px solid var(--hair);border-radius:7px;color:var(--go-ink);
  padding:9px 14px;font-size:12.5px;font-weight:700;text-decoration:none}