:root{
  --bg:#070c18;
  --panel:#0f1730;
  --panel-2:#16203c;
  --line:#24305c;
  --ink:#eef2ff;
  --ink-dim:#9aa7c7;
  --ink-faint:#66719a;
  --accent:#12308f;
  --accent-bright:#4a7cf0;
  --sun:#FCD400;
  --amber:#e0a83c;
  --red:#e0453c;
  --green:#3ecf7e;
  --ka:'Noto Sans Georgian',sans-serif;
  --en:'Barlow',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);
  font-family:var(--ka);overflow:hidden;-webkit-tap-highlight-color:transparent;user-select:none}
body{display:flex;flex-direction:column}

/* ===== header ===== */
.hd{
  flex:0 0 auto;display:flex;align-items:center;gap:14px;
  padding:8px 16px;background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border-bottom:1px solid var(--line);
}
.hd-left{display:flex;align-items:center;gap:10px}
.hd-logo{height:24px;width:auto}
.hd-plate{font-family:var(--en);font-weight:700;font-size:13px;color:var(--ink-dim);
  letter-spacing:.03em;padding:2px 8px;border:1px solid var(--line);border-radius:5px}
.hd-svc{flex:1;display:flex;align-items:baseline;gap:10px;justify-content:center;min-width:0}
.hd-code{font-family:var(--en);font-weight:700;font-size:14px;color:#fff;
  background:var(--accent);border-radius:5px;padding:2px 9px;flex:0 0 auto}
.hd-route{font-weight:700;font-size:15px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hd-right{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.hd-clock{font-family:var(--en);font-weight:700;font-size:18px;color:#fff}
.hd-dot{width:9px;height:9px;border-radius:50%;background:var(--ink-faint)}
.hd-dot.live{background:var(--green);box-shadow:0 0 0 3px rgba(62,207,126,.2)}
.hd-dot.stale{background:var(--amber)}

/* ===== tabs ===== */
/* ===== info-panel tabs (map always stays on) ===== */
.ptabs{flex:0 0 auto;display:flex;background:var(--panel);border:1px solid var(--line);border-radius:9px;overflow:hidden}
.ptab{flex:1;padding:8px 0;background:none;border:none;color:var(--ink-dim);
  font-family:var(--ka);font-weight:700;font-size:13px;border-bottom:3px solid transparent}
.ptab.active{color:#fff;background:var(--panel-2);border-bottom-color:var(--accent-bright)}
.ppane{display:none;flex-direction:column;gap:8px;min-height:0;flex:1}
.ppane.active{display:flex}
#ppane-day{overflow-y:auto}
#ppane-brief{overflow-y:auto;-webkit-overflow-scrolling:touch}
/* info pane scrolls too — next-stop box + pax counts were cropped from the bottom */
#ppane-info{overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:24px}

/* ===== main ===== */
main{flex:1;position:relative;overflow:hidden}
.pane{position:absolute;inset:0;display:none}
.pane.active{display:flex}

/* ===== split: map left, panel right ===== */
.split{display:flex;width:100%;height:100%}
.mapcol{position:relative;flex:2;min-width:0;border-right:1px solid var(--line)}
#map{position:absolute;inset:0}
.maplibregl-ctrl-attrib{background:rgba(15,23,48,.7)!important;color:#66719a!important;font-size:9px}
.maplibregl-ctrl-attrib a{color:#4a7cf0!important}
.maplibregl-ctrl-group{background:var(--panel)!important;border:1px solid var(--line)}
.maplibregl-ctrl-group button{background:transparent!important}
.maplibregl-ctrl-group button span{filter:invert(1) brightness(1.6)}

/* speed — left corner of the map */
.speedbox{
  position:absolute;left:12px;bottom:12px;z-index:5;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:8px 13px;text-align:center;min-width:74px;
}
.speedbox span{font-family:var(--en);font-weight:800;font-size:30px;color:#fff;line-height:1}
.speedbox small{display:block;font-size:10px;color:var(--ink-faint);margin-top:2px}
.speedbox.stale span{color:var(--ink-faint)}

/* follow toggle */
.map-fab{
  position:absolute;right:12px;bottom:12px;z-index:5;
  width:42px;height:42px;border-radius:50%;background:var(--panel);
  border:1px solid var(--line);color:var(--ink);font-size:18px;
  display:flex;align-items:center;justify-content:center;
}
.map-fab.on{background:var(--accent);border-color:var(--accent-bright);color:#fff}

/* ===== right column ===== */
.sidecol{
  flex:1;min-width:300px;display:flex;flex-direction:column;gap:8px;
  padding:8px;background:var(--bg);overflow:hidden;
}

/* delay / on-time box */
.delaybox{
  flex:0 0 auto;background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:10px 13px;text-align:center;
}
.d-status{font-family:var(--en);font-weight:800;font-size:24px;color:var(--green)}
.d-status.late{color:var(--red)}
.d-status.ahead{color:var(--accent-bright)}
.d-status.unk{color:var(--ink-faint);font-size:15px;font-weight:600}
.d-sub{font-size:11px;color:var(--ink-faint);margin-top:2px}

/* route table */
.rtable{
  flex:1;min-height:0;background:var(--panel);border:1px solid var(--line);
  border-radius:10px;display:flex;flex-direction:column;overflow:hidden;
}
.rt-head{
  display:grid;grid-template-columns:1fr 52px 52px;gap:4px;padding:8px 12px;
  font-family:var(--en);font-size:10px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-faint);border-bottom:1px solid var(--line);
}
.rt-head span:nth-child(2),.rt-head span:nth-child(3){text-align:right}
#rtRows{flex:1;overflow-y:auto;padding:4px 0;min-height:0;scrollbar-width:none}
#rtRows::-webkit-scrollbar{display:none}
#rtTop{flex:0 0 auto;border-bottom:1px solid var(--line)}
#rtBottom{flex:0 0 auto;border-top:1px solid var(--line)}
.rrow{
  display:grid;grid-template-columns:1fr 52px 52px;gap:4px;align-items:center;
  padding:8px 12px;border-left:3px solid transparent;
}
.rrow.done{opacity:.42}
/* next stop: bigger and accent-tinted so it reads at a glance */
.rrow.current{
  border-left-color:var(--accent-bright);
  background:rgba(74,124,240,.16);
  padding-top:12px;padding-bottom:12px;
}
.rrow.current .r-name{font-size:17px;color:#fff}
.rrow.current .r-name small{color:var(--accent-bright)}
.rrow.current .r-plan{font-size:14px}
.rrow.current .r-act{font-size:15px}
.rrow.rest .r-name::after{content:" ☕";font-size:10px}
.r-name{font-weight:700;font-size:14px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.r-name small{display:block;font-weight:600;font-size:10px;color:var(--ink-faint)}
.r-plan,.r-act{font-family:var(--en);font-weight:700;font-size:13px;text-align:right}
.r-plan{color:var(--ink-dim)}
.r-act{color:var(--green)}
.r-act.late{color:var(--red)}
.r-act.fut{color:var(--ink-faint);font-weight:600}
.r-act.none{color:var(--ink-faint)}

/* next stop box — the key figure, given weight */
.nextbox{
  flex:0 0 auto;background:var(--panel);border:1px solid var(--accent);border-radius:10px;
  padding:13px 15px;
}
.n-label{font-family:var(--en);font-size:11px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-faint)}
.n-name{font-weight:800;font-size:26px;color:#fff;margin-top:2px}
.n-nums{display:flex;gap:24px;margin-top:6px}
.n-num{font-family:var(--en);font-weight:800;font-size:30px;color:var(--ink)}
.n-num small{font-size:11px;font-weight:600;color:var(--ink-faint);margin-left:4px}
.n-pax{display:flex;gap:16px;margin-top:8px;padding-top:8px;border-top:1px solid var(--line);
  font-size:14px;font-weight:700}
.n-pax[hidden]{display:none}
.n-pax .p-in b{color:var(--green)}
.n-pax .p-out b{color:var(--amber)}

/* rest break */
.breakbox{
  flex:0 0 auto;background:rgba(224,168,60,.12);border:1px solid var(--amber);
  border-radius:10px;padding:9px 13px;text-align:center;
  font-family:var(--en);font-weight:700;font-size:15px;color:var(--amber);
}

/* ===== day page (inside info panel) ===== */
.daylist{display:flex;flex-direction:column;gap:8px;padding-bottom:4px}
.drow{
  background:var(--panel);border:1px solid var(--line);border-radius:8px;
  padding:11px 13px;display:flex;align-items:center;gap:10px;
}
.drow.now{border-color:var(--accent-bright);background:var(--panel-2)}
.d-time{font-family:var(--en);font-weight:800;font-size:16px;width:52px}
.d-route{flex:1;min-width:0}
.d-code{font-family:var(--en);font-weight:700;font-size:12px;color:var(--accent-bright)}
.d-name{font-weight:700;font-size:14px}
.d-tag{font-size:11px;font-weight:700;padding:3px 8px;border-radius:5px;background:var(--line);color:var(--ink-dim)}
.d-tag.now{background:var(--green);color:#04180e}

/* narrow tablet: panel drops below the map */
@media (max-width:820px){
  .split{flex-direction:column}
  .mapcol{flex:2;border-right:none;border-bottom:1px solid var(--line)}
  .sidecol{max-width:none;flex:1;overflow:hidden}
  /* briefing pane becomes a scrollable page — it's the one attendants will use on phones */
  #ppane-brief{overflow-y:auto;-webkit-overflow-scrolling:touch}
  #ppane-brief #briefBody{padding:10px 10px 40px}
}

/* phone: compact everything so tabs fit */
/* phone + brief tab open: map steps aside, briefing gets the full height */
@media (max-width:820px){
  body.brief-open .mapcol{flex:0 0 0;min-height:0;overflow:hidden;border-bottom:none}
  body.brief-open .sidecol{flex:1}
}

/* phone-only header: swap full wordmark for the sun mark, drop driver name */
.hd-mark{display:none;height:24px;width:auto}
@media (max-width:480px){
  .hd{padding:8px 10px;gap:8px}
  .hd-logo{display:none}
  .hd-mark{display:block;height:24px}
  .hd-name{display:none}
  .hd-plate{font-size:12px;padding:3px 8px}
  .hd-code{font-size:15px}
  .hd-route{font-size:12px;max-width:38vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .hd-clock{font-size:16px}
  .ptabs{gap:4px;padding:6px 8px}
  .ptab{min-width:0;flex:1;padding:9px 4px;font-size:12px;border-radius:8px}
  .mapcol{flex:0 0 34vh;min-height:180px}
  .speedbox{font-size:18px}
  .r-name{font-size:12px}
  .rt-row,.rt-head{grid-template-columns:1fr 44px 44px;padding:6px 8px;font-size:12px}
  .d-time{font-size:14px;width:44px}
  .drow{padding:10px 8px;gap:6px}
  .d-code{font-size:13px}
  .d-name{font-size:11px}
  .pin-card{padding:22px 16px}
  .sm-seat{width:30px;height:30px;font-size:12px}
  .sm-aisle{width:30px}
  .sm-door-tile{width:calc(30px*2 + 2px);height:30px}
  .svbtn{min-width:0;padding:8px 10px;font-size:12px}
}

/* ---------------- seat map (51-seat Yutong-style, vertical, front up) ---------- */
#ppane-seats{align-items:stretch;overflow-y:auto}
.seatswrap{display:flex;gap:10px;align-items:flex-start;justify-content:flex-start;
  width:100%}
.seatview{display:flex;flex-direction:column;gap:8px;padding-top:26px;flex-shrink:0}
.svbtn{background:var(--panel);border:1.5px solid var(--line);color:var(--ink);
  border-radius:8px;padding:10px 12px;font-size:13px;font-weight:700;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:118px}
.svbtn.active{border-color:var(--acc);background:var(--panel-2)}
.svcount{font-size:17px;font-weight:800;color:var(--ink);min-width:20px;text-align:right}
.svbig{text-align:center;padding:2px 0 6px}
.svbignum{display:block;font-size:44px;font-weight:800;line-height:1}
.svbiglabel{display:block;font-size:11px;color:var(--ink-dim);letter-spacing:1px;margin-top:2px}
.svbig-join{color:#2ea44f}
.svbig-leave{color:#c9862b}
.svbig-cont{color:#9ca3af}
.seatmap{display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:8px 4px;user-select:none;flex-shrink:0}
.sm-block{display:flex;flex-direction:column;gap:2px}
.sm-row{display:flex;gap:2px;align-items:center}
.sm-aisle{width:34px} /* bus is 5 seats wide; normal rows omit the middle seat (gap = one seat width) */
.sm-door{width:100%;text-align:center;font-size:9px;color:var(--ink-dim);
  letter-spacing:1px;padding:2px 0;border-top:1px dashed var(--line);
  border-bottom:1px dashed var(--line);margin:2px 0}
.sm-door-tile{width:calc(34px*2 + 2px);height:34px;border-radius:6px;margin:0;
  border:1.5px dashed var(--line);display:flex;align-items:center;justify-content:center;
  font-size:9px;line-height:1.1}
.sm-seat{width:34px;height:34px;border-radius:6px;display:flex;align-items:center;
  justify-content:center;font-size:13px;font-weight:700;border:1.5px solid}
.sm-free{background:var(--panel);border-color:var(--line);color:var(--ink-dim)}
.sm-busy{background:#2d6cdf;border-color:#2d6cdf;color:#fff}
.sm-join{background:#2ea44f;border-color:#2ea44f;color:#fff;
  box-shadow:0 0 0 2px rgba(46,164,79,.35)}
.sm-leave{background:#c9862b;border-color:#c9862b;color:#fff}
.sm-cont{background:#6b7280;border-color:#6b7280;color:#fff}
.sm-hostess{background:var(--panel-2);border-color:var(--line);
  color:var(--ink-dim);font-size:10px;font-weight:400}
.sm-front{width:100%;text-align:center;font-size:10px;color:var(--ink-dim);
  letter-spacing:2px;padding:4px 0;border-bottom:2px solid var(--line)}
.seatlegend{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;
  font-size:11px;color:var(--ink-dim);padding:4px 0}
.seatlegend .lg{display:inline-block;width:12px;height:12px;border-radius:3px;
  vertical-align:-1px;margin-right:4px;border:1.5px solid var(--line)}
.lg-busy{background:#2d6cdf;border-color:#2d6cdf}
.lg-join{background:#2ea44f;border-color:#2ea44f}
.lg-leave{background:#c9862b;border-color:#c9862b}
.lg-cont{background:#6b7280;border-color:#6b7280}

/* ---------------- joining-passengers list ------------------------------------ */
#ppane-pax{gap:4px}
.paxhead{font-size:12px;color:var(--ink-dim);letter-spacing:1px;
  text-transform:uppercase;padding:2px 2px}
.paxlist{overflow-y:auto;display:flex;flex-direction:column;gap:3px}
.paxrow{display:flex;align-items:center;gap:8px;background:var(--panel);
  border:1px solid var(--line);border-radius:8px;padding:9px 10px}
.paxrow .p-seat{flex:0 0 auto;width:32px;height:32px;border-radius:6px;
  background:#2ea44f;color:#fff;display:flex;align-items:center;
  justify-content:center;font-size:14px;font-weight:700}
.paxrow .p-name{flex:1;font-size:15px;color:#fff}
.paxrow .p-from{flex:0 0 auto;font-size:11px;color:var(--ink-dim)}
.paxempty{padding:16px;text-align:center;color:var(--ink-dim);font-size:13px}

/* day tab: per-trip bus plate + live location hint */
.d-bus{font-size:12px;font-weight:700;color:var(--ink-dim);text-align:right;white-space:nowrap}
.d-bus.mine{color:var(--green)}
.d-buswhere{font-size:10px;font-weight:600;color:var(--ink-dim);opacity:.85;margin-top:2px;white-space:normal}