:root{
  --paper:#F7F6F2; --card:#FFFFFF; --ink:#191C20; --ink2:#5A6068; --ink3:#8B9097;
  --rail:#C9CBCE; --line:#E4E4DF;
  --tgv:#B01E28;          /* now / hard constraints */
  --transit:#1E4E79;      /* transit legs */
  --ok:#2E7D4F;
  --amber:#9A6A00; --amberbg:#FBF3DF;
  --altbg:#F1F3F6;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --disp:'Archivo Narrow','Arial Narrow',sans-serif;
  --body:'IBM Plex Sans',-apple-system,system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html,body{height:100%;overflow:hidden}
body{font-family:var(--body);background:var(--paper);color:var(--ink);font-size:15px;line-height:1.45;display:flex;flex-direction:column}
main{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:60px}
button{font:inherit;background:none;border:none;cursor:pointer;color:inherit;-webkit-tap-highlight-color:transparent}

/* ---------- header / departure board ---------- */
header{background:var(--ink);color:#EDEDE8;padding:14px 16px 0;flex:none;z-index:1000}
.brand{display:flex;align-items:baseline;gap:10px}
.brand h1{font-family:var(--disp);font-weight:700;font-size:22px;letter-spacing:.04em}
.brand h1 .accent{color:#E8747C}
.brand .sub{font-family:var(--mono);font-size:11px;color:#9DA3AA;letter-spacing:.06em}
.clock{margin-left:auto;font-family:var(--mono);font-size:13px;font-weight:600;color:#F4C64D}
.daytabs{display:flex;gap:2px;margin-top:12px;overflow-x:auto;scrollbar-width:none}
.daytabs::-webkit-scrollbar{display:none}
.daytab{flex:0 0 auto;padding:8px 12px 10px;text-align:center;color:#9DA3AA;border-bottom:3px solid transparent}
.daytab .code{font-family:var(--mono);font-size:14px;font-weight:600;display:block}
.daytab .d{font-size:10.5px;letter-spacing:.05em;text-transform:uppercase}
.daytab.active{color:#fff;border-bottom-color:var(--tgv)}
.daytab.today .code::after{content:"●";color:#F4C64D;font-size:8px;vertical-align:super;margin-left:3px}

/* ---------- view switcher ---------- */
.views{display:flex;gap:8px;padding:12px 2px 12px;background:var(--ink)}
.vbtn{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.05em;padding:7px 14px;border:1.5px solid #3A3F45;border-radius:999px;color:#9DA3AA;background:transparent}
.vbtn.active{background:#F4C64D;border-color:#F4C64D;color:var(--ink)}
.vbtn .badge{display:inline-block;min-width:17px;text-align:center;background:var(--tgv);color:#fff;border-radius:999px;font-size:10px;padding:1px 4px;margin-left:5px}

/* ---------- day header strip ---------- */
.daymeta{padding:10px 16px 2px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.daymeta h2{font-family:var(--disp);font-size:19px;font-weight:700}
.daymeta .hotel{font-size:12.5px;color:var(--ink2)}
.daymeta .hotel b{color:var(--ink);font-weight:600}

/* ---------- timeline ---------- */
.timeline{padding:8px 16px 24px;position:relative}
.slot{position:relative;padding:0 0 4px 58px;min-height:52px}
.slot::before{content:"";position:absolute;left:44px;top:0;bottom:0;width:2px;background:var(--rail)}
.slot:first-child::before{top:14px}
.slot:last-child::before{bottom:auto;height:14px}
.stop{position:absolute;left:38px;top:10px;width:14px;height:14px;border-radius:50%;background:var(--card);border:2.5px solid var(--ink);z-index:2}
.slot.transit .stop{border-color:var(--transit);border-radius:3px}
.slot.past .stop{border-color:var(--ink3);background:var(--ink3)}
.slot.past::before{background:var(--line)}
.slot.now .stop{border-color:var(--tgv);background:var(--tgv);box-shadow:0 0 0 4px rgba(176,30,40,.15)}
.slot .t{position:absolute;left:0;top:9px;width:36px;text-align:right;font-family:var(--mono);font-size:12px;font-weight:600;color:var(--ink2)}
.slot.past .t{color:var(--ink3)}
.slot.now .t{color:var(--tgv)}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:8px}
.slot.past .card{opacity:.55}
.slot.now .card{border-color:var(--tgv);box-shadow:0 1px 6px rgba(176,30,40,.12)}
.chead{display:flex;align-items:flex-start;gap:8px}
.chead .name{font-weight:600;font-size:15px;flex:1}
.chead .name .rating{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--ok);margin-left:6px}
.wx{font-family:var(--mono);font-size:10px;font-weight:600;color:var(--ink3);white-space:nowrap;align-self:center}
.tag{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.04em;padding:2px 7px;border-radius:4px;white-space:nowrap}
.tag.goal{background:#EAF3EC;color:var(--ok)}
.tag.hard{background:#F8E7E8;color:var(--tgv)}
.tag.transit{background:#E8EEF5;color:var(--transit)}
.hours{font-family:var(--mono);font-size:11.5px;color:var(--ink2);margin-top:3px}
.hours .hard{color:var(--tgv);font-weight:600}
.note{font-size:13.5px;color:var(--ink2);margin-top:6px}
.warn{display:flex;gap:6px;font-size:13px;color:var(--amber);background:var(--amberbg);border-radius:6px;padding:6px 9px;margin-top:7px}
.order{font-size:13.5px;margin-top:7px;padding:7px 9px;background:#F4F7F4;border-left:3px solid var(--ok);border-radius:0 6px 6px 0}
.order b{font-weight:600}
.crow{display:flex;gap:14px;margin-top:8px}
.link{font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--transit);text-decoration:none;letter-spacing:.03em}
.exp{font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--ink3);margin-left:auto}
.startbtn{font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--ok)}
.startbtn.on{color:var(--amber)}
.slot .t.shifted{color:var(--amber)}
.shiftnote{margin:8px 16px 0;padding:7px 10px;background:var(--amberbg);color:var(--amber);border-radius:8px;font-size:12.5px}
.details{display:none;margin-top:2px}
.card.open .details{display:block}

/* alt / plan B branch */
.altwrap{margin:2px 0 10px 0}
.altbtn{width:100%;text-align:left;font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--ink2);padding:6px 10px;background:var(--altbg);border:1px dashed var(--rail);border-radius:8px}
.altbtn::before{content:"⑂ ";color:var(--transit)}
.altbody{display:none;background:var(--altbg);border:1px dashed var(--rail);border-top:none;border-radius:0 0 8px 8px;padding:9px 12px;font-size:13.5px;color:var(--ink2)}
.altwrap.open .altbtn{border-radius:8px 8px 0 0}
.altwrap.open .altbody{display:block}
.altbody b{color:var(--ink);font-weight:600}

/* ---------- actions ---------- */
.actions{padding:8px 16px 24px}
.acthead{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--ink3);text-transform:uppercase;margin:14px 0 6px}
.actlegend{font-size:11.5px;color:var(--ink3);margin:-2px 0 8px}
.critswatch{display:inline-block;width:4px;height:12px;background:var(--tgv);border-radius:2px;vertical-align:-1px;margin-right:6px}
.act{display:flex;gap:10px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:8px}
.act.crit{border-left:4px solid var(--tgv)}
.act input{width:19px;height:19px;margin-top:1px;accent-color:var(--ok);flex:none}
.act .atext{flex:1;font-size:14px}
.act .awhen{font-family:var(--mono);font-size:11px;color:var(--tgv);font-weight:600;display:block;margin-bottom:2px}
.act.done .atext{text-decoration:line-through;color:var(--ink3)}
.persistnote{font-size:12px;color:var(--ink3);padding:4px 2px 0}

/* ---------- map (Leaflet) ---------- */
.mapwrap{margin:8px 16px 16px}
.mnote{padding:0 16px 8px;font-size:12px;color:var(--ink3)}
#lmap{height:56vh;border:1px solid var(--line);border-radius:12px;z-index:1}
.lpin{background:var(--ink);color:#fff;border:2px solid #fff;border-radius:50%;width:26px;height:26px;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:11px;font-weight:600;box-shadow:0 1px 4px rgba(0,0,0,.35)}
.lpin.now{background:var(--tgv)}
.lpin.next{background:#F4C64D;color:var(--ink);animation:nextpulse 1.6s ease-in-out infinite}
.lpin.past{background:#B4B8BD;opacity:.7}
@keyframes nextpulse{0%,100%{box-shadow:0 1px 4px rgba(0,0,0,.35)}50%{box-shadow:0 0 0 7px rgba(244,198,77,.4)}}
.lpin.hpin{background:var(--transit);border-radius:6px}
.leaflet-popup-content{font-family:var(--body);font-size:13px;margin:10px 12px}
.leaflet-popup-content .md-t{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--tgv)}
.leaflet-popup-content .md-n{font-weight:600;font-size:14px}
.leaflet-popup-content .md-a{color:var(--ink2);margin:1px 0 6px}

/* ---------- schematic map (offline fallback) ---------- */
.schematic{width:100%;max-height:56vh;background:var(--card);border:1px solid var(--line);border-radius:12px;display:block;touch-action:manipulation}
.spin{cursor:pointer}
.spin circle{fill:var(--ink);stroke:#fff;stroke-width:2}
.spin.now circle{fill:var(--tgv)}
.spin.next circle{fill:#F4C64D}
.spin.next text{fill:var(--ink)}
.spin.past circle{fill:#B4B8BD}
.spin.hpin rect{fill:var(--transit);stroke:#fff;stroke-width:2}
.spin.sel circle,.spin.sel rect{stroke:#F4C64D;stroke-width:3}
.spin text{fill:#fff;font-family:var(--mono);font-size:9px;font-weight:600;text-anchor:middle;dominant-baseline:central;pointer-events:none}
.slabel{fill:var(--ink2);font-family:var(--body);font-size:7.5px;pointer-events:none}
.route{stroke:var(--tgv);stroke-width:1.2;stroke-dasharray:3 3;fill:none;opacity:.5}
.scalebar line{stroke:var(--ink3);stroke-width:1}
.scalebar text{fill:var(--ink3);font-family:var(--mono);font-size:7px}
.mapdetail{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:11px 13px;margin-top:10px;min-height:64px}
.mapdetail .md-t{font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--tgv)}
.mapdetail .md-n{font-weight:600;font-size:15px}
.mapdetail .md-a{font-size:13px;color:var(--ink2);margin:2px 0 7px}
.mapdetail .empty{color:var(--ink3);font-size:13.5px;padding-top:10px}
.cchips{display:flex;gap:8px;margin-bottom:10px}
.cchip{font-family:var(--mono);font-size:11.5px;font-weight:600;padding:6px 12px;border:1.5px solid var(--rail);border-radius:999px;background:var(--card);color:var(--ink2)}
.cchip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.offmap{font-family:var(--mono);font-size:11px;color:var(--ink3);padding:6px 2px 0}
@media(min-width:700px){body{max-width:680px;margin:0 auto}}