:root{
  --display:"Futura","Avenir Next","Century Gothic","Trebuchet MS",system-ui,sans-serif;
  --body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --bg:#E8EBE7; --surface:#FFFFFF; --surface-2:#F4F6F3; --ink:#15222A; --muted:#55656D;
  --rule:#CBD3CE; --map-bg:#F7F8F5; --alert:#CF2530; --alert-soft:#FBE3E4; --ok:#1C7444; --ok-soft:#DDF0E4;
  --l1:#F2B705; --l2:#00843D; --l4:#A0186A; --sign:#15222A; --sign-ink:#FFFFFF;
  --tile-a:#B9C9C3; --tile-b:#A9BBB4; --focus:#1F6FD1;
  color-scheme:light;
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#10161A; --surface:#182126; --surface-2:#1E282E; --ink:#E6ECE9; --muted:#9AA9AF;
    --rule:#2D3A41; --map-bg:#141C20; --alert:#F0525B; --alert-soft:#3A1C20; --ok:#5CC98A; --ok-soft:#173025;
    --sign:#000000; --sign-ink:#F3F5F4; --tile-a:#26343A; --tile-b:#2E3E45; --focus:#6FA8F0;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#10161A; --surface:#182126; --surface-2:#1E282E; --ink:#E6ECE9; --muted:#9AA9AF;
  --rule:#2D3A41; --map-bg:#141C20; --alert:#F0525B; --alert-soft:#3A1C20; --ok:#5CC98A; --ok-soft:#173025;
  --sign:#000000; --sign-ink:#F3F5F4; --tile-a:#26343A; --tile-b:#2E3E45; --focus:#6FA8F0;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:15px/1.5 var(--body);-webkit-font-smoothing:antialiased}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* Header: a station wall — tile band with a name sign */
.wall{background:
  linear-gradient(var(--tile-a),var(--tile-a)) 0 0/100% 100%;
  background-image:
    linear-gradient(90deg,transparent 0 47%,var(--tile-b) 47% 53%,transparent 53%),
    linear-gradient(transparent 0 47%,var(--tile-b) 47% 53%,transparent 53%);
  background-size:22px 22px; background-color:var(--tile-a); padding:18px 20px 16px}
.sign{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;background:var(--sign);color:var(--sign-ink);padding:10px 18px 12px;max-width:1280px;margin:0 auto}
.sign h1{font:700 clamp(26px,4.4vw,40px)/1 var(--display);letter-spacing:.01em;margin:0}
.sign p{margin:0;font-size:14px;opacity:.82}
.sign .live{margin-left:auto;font-size:13px;display:flex;align-items:center;gap:8px;opacity:.9}
.dot{width:8px;height:8px;border-radius:50%;background:#9AA9AF}
.dot.on{background:#3DDC84}

.app{max-width:1280px;margin:0 auto;padding:16px 20px 40px;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(320px,1fr);gap:16px;align-items:start}
@media (max-width:880px){.app{grid-template-columns:1fr;padding:12px 12px 32px}}

/* Map */
.mapcard{background:var(--map-bg);border:1px solid var(--rule);position:relative}
@media (min-width:881px){.mapcard{position:sticky;top:12px}}
.mapwrap{position:relative;aspect-ratio:16/11;max-height:72vh;overflow:hidden}
@media (max-width:880px){.mapwrap{aspect-ratio:auto;height:56vh}}
#map{width:100%;height:100%;display:block;touch-action:none;cursor:grab;user-select:none}
#map.dragging{cursor:grabbing}
.mapctl{position:absolute;right:10px;top:10px;display:flex;flex-direction:column;gap:6px}
.mapctl button{width:36px;height:36px;border:1px solid var(--rule);background:var(--surface);font-size:18px;line-height:1;cursor:pointer}
.mapctl button.fit{font-size:12px}
.legend{display:flex;gap:14px;flex-wrap:wrap;padding:10px 12px;border-top:1px solid var(--rule);font-size:13px;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.sw{width:18px;height:6px;display:inline-block}
.surface-strip{border-top:1px solid var(--rule);padding:10px 12px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:13px}
.surface-strip strong{font-weight:600;margin-right:4px}
.chip{border:1px solid var(--rule);background:var(--surface);padding:3px 10px;cursor:pointer;font-size:13px}
.chip.alert{border-color:var(--alert);color:var(--alert);font-weight:600}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}

.pulse{fill:var(--alert);opacity:.25;transform-box:fill-box;transform-origin:center;animation:pulse 2.2s ease-out infinite}
@keyframes pulse{0%{transform:scale(.6);opacity:.45}100%{transform:scale(1.8);opacity:0}}
@media (prefers-reduced-motion:reduce){.pulse{animation:none;opacity:.25}}
.pin{fill:var(--alert)}
.pin-n{font-weight:700;font-family:var(--body);fill:#fff;text-anchor:middle}

/* Panel */
.panel{background:var(--surface);border:1px solid var(--rule)}
.tabs{display:flex;border-bottom:1px solid var(--rule)}
.tabs button{flex:1;background:none;border:0;border-bottom:3px solid transparent;padding:12px 8px 10px;font:600 15px var(--display);cursor:pointer;color:var(--muted)}
.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--ink)}
.tabs .count{display:inline-block;min-width:20px;padding:0 6px;margin-left:6px;background:var(--alert);color:#fff;font:600 12px/20px var(--body);border-radius:10px}
.pane{padding:16px}
.pane[hidden]{display:none}
.notice{background:var(--surface-2);border-left:3px solid var(--muted);padding:10px 12px;font-size:14px;margin-bottom:14px}
.notice.warn{border-left-color:var(--alert)}
.filterbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px;font-size:14px}
.filterbar .grow{flex:1}
.linkbtn{background:none;border:0;padding:0;color:var(--focus);cursor:pointer;text-decoration:underline;text-underline-offset:2px;font-size:14px}
.toggle{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);cursor:pointer}

.empty{padding:28px 8px;text-align:center;color:var(--muted)}
.empty h3{font:600 18px var(--display);color:var(--ink);margin:0 0 6px}

.alert-card{border-top:1px solid var(--rule);padding:14px 0}
.alert-card:first-of-type{border-top:0;padding-top:4px}
.ac-head{display:flex;gap:10px;align-items:flex-start}
.badge{flex:none;min-width:34px;height:24px;padding:0 6px;display:inline-flex;align-items:center;justify-content:center;font:700 13px var(--display);color:#fff}
.badge.l1{background:var(--l1);color:#15222A}.badge.l2{background:var(--l2)}.badge.l4{background:var(--l4)}
.badge.surf{background:var(--surface-2);color:var(--ink);border:1px solid var(--rule)}
.ac-title{font:600 17px/1.25 var(--display);margin:0}
.ac-sub{color:var(--muted);font-size:13.5px;margin-top:2px}
.ac-meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;color:var(--muted);margin:8px 0}
.rel{display:flex;align-items:center;gap:10px;margin:8px 0}
.rel .bar{flex:1;height:6px;background:var(--surface-2);border:1px solid var(--rule);position:relative;max-width:180px}
.rel .bar i{position:absolute;inset:0 auto 0 0;background:var(--ink)}
.rel b{font-weight:600;font-size:13.5px}
.rel b.confirmed{color:var(--alert)}
.who{font-size:13px;color:var(--muted)}
.who .name{color:var(--ink);font-weight:600}
.rank{display:inline-block;font-size:11.5px;font-weight:600;padding:1px 7px;margin-left:6px;border:1px solid currentColor}
.rank.flagged{color:var(--alert)}.rank.new{color:var(--muted)}.rank.regular{color:var(--ink)}
.rank.trusted{color:var(--ok)}.rank.veteran{color:var(--ok);background:var(--ok-soft)}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.btn{border:1px solid var(--ink);background:var(--surface);padding:7px 12px;cursor:pointer;font-weight:500;font-size:14px}
.btn.primary{background:var(--ink);color:var(--bg)}
.btn.on-confirm{background:var(--alert);border-color:var(--alert);color:#fff}
.btn.on-deny{background:var(--ink);color:var(--bg)}
.btn.quiet{border-color:var(--rule)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.big{width:100%;padding:12px;font:600 16px var(--display)}

form .field{margin-bottom:14px}
form label.lbl,.lbl{display:block;font-weight:600;font-size:14px;margin-bottom:6px}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label{border:1px solid var(--rule);padding:6px 12px;cursor:pointer;font-size:14px;background:var(--surface)}
.seg input:checked+label{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.seg input:focus-visible+label{outline:2px solid var(--focus);outline-offset:2px}
select,input[type=text]{width:100%;padding:9px 10px;border:1px solid var(--rule);background:var(--surface);border-radius:0}
.hint{font-size:13px;color:var(--muted);margin-top:4px}
.err{color:var(--alert);font-size:14px;margin:8px 0 0}

.you-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.you-head h2{font:700 22px var(--display);margin:0}
.scoreline{display:flex;gap:18px;flex-wrap:wrap;margin:12px 0;font-size:14px}
.scoreline div b{display:block;font:700 22px var(--display)}
.progress{height:8px;background:var(--surface-2);border:1px solid var(--rule);position:relative;margin:6px 0 4px}
.progress i{position:absolute;inset:0 auto 0 0;background:var(--ok)}
.how{font-size:14px;color:var(--muted);border-top:1px solid var(--rule);margin-top:16px;padding-top:12px}
.how h3,.leader h3{font:600 16px var(--display);color:var(--ink);margin:0 0 6px}
.how p{margin:0 0 8px}
.leader{border-top:1px solid var(--rule);margin-top:14px;padding-top:12px}
.leader ol{margin:0;padding-left:22px;font-size:14px}
.leader li{padding:3px 0}

dialog{border:1px solid var(--rule);background:var(--surface);color:var(--ink);padding:0;max-width:min(720px,94vw);width:100%}
dialog::backdrop{background:rgba(10,15,18,.6)}
.dlg-head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--rule)}
.dlg-head h2{font:600 18px var(--display);margin:0}
.dlg-body{padding:14px 16px}
.dlg-foot{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:12px 16px;border-top:1px solid var(--rule)}
.dlg-foot .grow{flex:1}
.foot{max-width:1280px;margin:0 auto;padding:0 20px 28px;font-size:12.5px;color:var(--muted)}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;font-size:14px;z-index:20;max-width:90vw}
.toast[hidden]{display:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* v2: network map */
:root{--bus:#5E7C8C;--car:#D2232A}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bus:#7F9DAD;--car:#F0525B}}
:root[data-theme="dark"]{--bus:#7F9DAD;--car:#F0525B}
.searchbar{position:relative;padding:10px 12px;border-bottom:1px solid var(--rule);background:var(--surface)}
.searchbar input{padding-left:12px}
.results{position:absolute;left:12px;right:12px;top:100%;margin-top:-6px;background:var(--surface);border:1px solid var(--ink);z-index:5;max-height:320px;overflow:auto}
.results[hidden]{display:none}
.results button{display:flex;gap:10px;align-items:center;width:100%;text-align:left;background:none;border:0;border-top:1px solid var(--rule);padding:9px 12px;cursor:pointer;font-size:14px}
.results button:first-child{border-top:0}
.results button:hover,.results button.active{background:var(--surface-2)}
.results .rsub{color:var(--muted);font-size:12.5px}
.layers{display:flex;gap:14px;flex-wrap:wrap;padding:8px 12px;border-top:1px solid var(--rule);font-size:13px}
.r-bus{stroke:var(--bus)}.r-car{stroke:var(--car)}
.routes path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.routes.dim path:not(.hl){opacity:.18}
.routes path.hl{stroke-width:5px}
.rhit path{fill:none;stroke:transparent;stroke-width:14px;pointer-events:stroke;cursor:pointer}
.stop{fill:var(--surface);stroke:var(--bus);cursor:pointer}
.stn{fill:var(--surface);stroke:var(--ink);cursor:pointer}
.mlbl{font-family:var(--body);font-weight:500;fill:var(--ink);paint-order:stroke;stroke:var(--map-bg);stroke-linejoin:round}
.mlbl.stn-l{font-weight:600}
.badge.bus{background:var(--bus)}.badge.car{background:var(--car)}
.picked{display:flex;justify-content:space-between;align-items:center;gap:10px;border:1px solid var(--ink);padding:8px 10px;background:var(--surface-2)}
.picked b{font-weight:600}
.pickwrap{position:relative}
.pickwrap .results{left:0;right:0;margin-top:0}


/* hosted build additions */
.sw-rapid{background:linear-gradient(90deg,#D5C82B 0 20%,#008000 20% 40%,#B300B3 40% 60%,#FF8000 60% 80%,#808080 80%)}
.sw-car{background:var(--car);height:3px}
.sw-bus{background:var(--bus);height:2px}
.acct{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:13px}
.acct .live{margin-left:0}
.acct button{background:transparent;color:var(--sign-ink);border:1px solid rgba(255,255,255,.55);padding:4px 10px;cursor:pointer;font-size:13px}
.subtabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.subtabs button{border:1px solid var(--rule);background:var(--surface);padding:6px 12px;cursor:pointer;font-size:14px}
.subtabs button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
input[type=email],input[type=password]{width:100%;padding:9px 10px;border:1px solid var(--rule);background:var(--surface);border-radius:0}
.captcha{margin:4px 0 14px;min-height:0}
.ok{color:var(--ok);font-size:14px;margin:8px 0 0}
.acct-actions{display:flex;gap:8px;flex-wrap:wrap;border-top:1px solid var(--rule);margin-top:16px;padding-top:12px}
.btn.danger{border-color:var(--alert);color:var(--alert)}
.foot a{color:inherit}
.page{max-width:720px;margin:0 auto;padding:24px 20px 48px;background:var(--surface);border:1px solid var(--rule);margin-top:16px}
.page h1{font:700 30px/1.15 var(--display);margin:0 0 6px}
.page h2{font:600 19px/1.3 var(--display);margin:26px 0 6px}
.page p,.page li{max-width:68ch}
.page .hint{margin-top:0}
.acct-actions .grow{flex:1}
.homelink{color:inherit;text-decoration:none}
.rank.founder{background:var(--sign);color:var(--sign-ink);border-color:var(--sign);display:inline-flex;align-items:center;gap:5px;
  background-image:linear-gradient(90deg,transparent 0 47%,rgba(255,255,255,.07) 47% 53%,transparent 53%),linear-gradient(transparent 0 47%,rgba(255,255,255,.07) 47% 53%,transparent 53%);background-size:8px 8px}
.founder-icon{font-size:14px;line-height:1;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.sign h1,.sign h1 .homelink{display:inline-flex;align-items:center;gap:.32em}
.sign .logo{width:1.75em;height:1.1em;flex:none}
.ac-note{margin:8px 0 0;font-size:15px;line-height:1.4;background:var(--surface-2);padding:8px 10px;overflow-wrap:anywhere}
.note-edit{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}
.note-edit input{flex:1 1 220px;padding:9px 10px;border:1px solid var(--rule);background:var(--surface);border-radius:0}
.iglink{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--ink);text-decoration:none;border:1px solid var(--rule);padding:8px 14px;background:var(--surface)}
.iglink:hover{border-color:var(--ink)}
.iglink .ig{width:20px;height:20px;flex:none}
.btn.on-star{background:#F2B705;border-color:#F2B705;color:#15222A;font-weight:700}
.mystops{color:var(--ink)}
.starchips{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 12px}
.starchip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--rule);background:var(--surface-2);padding:5px 6px 5px 10px}
.starchip .linkbtn{color:var(--ink);text-decoration:none;font-weight:600}
.starchip .x{background:none;border:0;cursor:pointer;font-size:18px;line-height:1;color:var(--muted);padding:0 4px}
.starchip .badge{min-width:30px;height:22px;font-size:12px}
.pushrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border:1px solid var(--rule);padding:12px;background:var(--surface-2);color:var(--ink);font-size:14px}
.pushrow .grow{flex:1;min-width:180px}
.pushdot{width:10px;height:10px;border-radius:50%;background:var(--muted);flex:none}
.pushdot.on{background:#2EA043}