:root{
  --yellow:#FFD200;
  --ink:#0A0A0A;
  --paper:#FFFFFF;
  --grey-1:#F2F4F6;
  --grey-2:#E4E8EC;
  --grey-3:#8A9199;
  --grey-4:#4A5057;
  --route:#1B6EF3;
  --pin-a:#12A150;
  --pin-b:#E0331E;
  --f-display:"Archivo Black","Arial Black",system-ui,sans-serif;
  --f-ui:"Barlow","Helvetica Neue",Arial,sans-serif;
  --f-cond:"Barlow Condensed","Barlow",Arial,sans-serif;
  --f-native:"Noto Sans Kannada","Noto Sans Devanagari","Barlow",sans-serif;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  color-scheme:light;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* author display rules below beat the UA [hidden] rule, so restate it with force */
[hidden]{display:none!important}
html,body{margin:0;height:100%;overscroll-behavior:none}
body{
  font-family:var(--f-ui);color:var(--ink);background:var(--grey-1);
  -webkit-font-smoothing:antialiased;
}
#app{position:fixed;inset:0;overflow:hidden}
.view{position:absolute;inset:0;display:flex;flex-direction:column}
button{font-family:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--route);outline-offset:2px}

/* ================= SETUP ================= */
#setup{background:var(--grey-1)}
.setup-map{position:absolute;inset:0;z-index:0;filter:saturate(.85)}
.topbar{
  position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;
  padding:calc(var(--safe-t) + 10px) 14px 10px;
}
.brand{
  display:inline-flex;align-items:center;gap:9px;background:var(--ink);color:#fff;
  font-family:var(--f-cond);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:13px;
  padding:7px 13px;border-radius:99px;
}
.brand i{width:13px;height:13px;background:var(--yellow);border-radius:3px;display:block}
.iconbtn{
  width:42px;height:42px;border-radius:50%;border:2px solid var(--ink);background:#fff;color:var(--ink);
  display:grid;place-items:center;font-size:16px;flex:none;
}
.iconbtn svg{width:20px;height:20px}

.searchcard{
  position:relative;z-index:5;margin:0 12px;background:#fff;border-radius:18px;padding:12px 14px;
  box-shadow:0 10px 30px rgba(16,24,40,.20);
}
.fieldrow{display:grid;grid-template-columns:22px 1fr;align-items:center;gap:10px}
.dotcol{display:flex;flex-direction:column;align-items:center;gap:4px}
.dot{width:11px;height:11px;border-radius:50%;background:var(--pin-a);flex:none}
.sq{width:11px;height:11px;background:var(--pin-b);border-radius:2px;flex:none}
.dashes{width:2px;height:24px;background:repeating-linear-gradient(var(--grey-2) 0 3px,transparent 3px 6px)}
.fields{min-width:0}
.fieldwrap{display:flex;align-items:center;gap:6px;border-bottom:1px solid var(--grey-2)}
.fieldwrap:last-child{border-bottom:0}
.field{
  flex:1;min-width:0;border:0;background:transparent;padding:11px 2px;
  font-family:var(--f-ui);font-size:16px;font-weight:600;color:var(--ink);
}
.field::placeholder{color:var(--grey-3);font-weight:400}
.field:focus{outline:none}
.gpsbtn{width:34px;height:34px;border-radius:50%;border:0;background:var(--grey-1);color:var(--route);display:grid;place-items:center;flex:none}
.gpsbtn svg{width:18px;height:18px}
.gpsbtn.busy{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.suggests{list-style:none;margin:10px 0 0;padding:8px 0 0;border-top:1px solid var(--grey-2);display:grid;gap:2px;max-height:38vh;overflow-y:auto}
.suggests li button{
  display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;border:0;background:transparent;
  padding:10px 6px;border-radius:10px;font-family:var(--f-ui);font-size:15px;color:var(--ink);
}
.suggests li button:hover,.suggests li button:focus-visible{background:var(--grey-1);outline:none}
.suggests svg{width:18px;height:18px;flex:none;margin-top:2px;color:var(--grey-3)}
.suggests small{display:block;color:var(--grey-3);font-size:13px;font-weight:400;margin-top:1px}
.suggests .empty{padding:12px 6px;color:var(--grey-3);font-size:14px}

.tripbar{
  position:relative;z-index:5;margin-top:auto;background:#fff;
  border-radius:22px 22px 0 0;padding:16px 16px calc(var(--safe-b) + 16px);
  box-shadow:0 -8px 30px rgba(16,24,40,.14);
}
.tripmeta{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.tripmeta .big{font-family:var(--f-display);font-size:26px;line-height:1}
.tripmeta .sub{font-size:14px;color:var(--grey-4);font-weight:600}
.tripmeta .engine{
  margin-left:auto;font-family:var(--f-cond);font-weight:700;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;background:var(--grey-1);color:var(--grey-4);padding:5px 10px;border-radius:99px;
}
.setupmsg{margin:0 0 12px;font-size:14px;color:var(--grey-4);line-height:1.45}
.setupmsg.err{color:var(--pin-b);font-weight:600}
.start{
  width:100%;border:3px solid var(--ink);background:var(--yellow);color:var(--ink);
  font-family:var(--f-display);font-size:24px;
  padding:16px;border-radius:15px;display:flex;align-items:center;justify-content:center;gap:11px;
  box-shadow:0 5px 0 var(--ink);transition:transform .08s,box-shadow .08s,opacity .15s;
}
.start:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}
.start[disabled]{opacity:.35;box-shadow:0 5px 0 var(--ink);pointer-events:none}
.start .native{font-family:var(--f-native);font-size:16px;font-weight:700}

/* ================= NAV ================= */
#nav{background:var(--grey-2)}
.mapstage{position:absolute;inset:0;overflow:hidden;z-index:0}
#maprot{
  position:absolute;left:50%;top:62%;width:1000px;height:1000px;
  transform:translate(-50%,-50%) rotate(0deg);transform-origin:50% 50%;
  transition:transform .45s cubic-bezier(.33,.7,.4,1);will-change:transform;
}
#map{width:100%;height:100%;background:var(--grey-2)}
.leaflet-container{background:var(--grey-2);font-family:var(--f-ui)}
.leaflet-control-attribution{font-size:9px;opacity:.7}
.mapfade{position:absolute;inset:0 0 auto 0;height:230px;pointer-events:none;
  background:linear-gradient(#F2F4F6 4%,rgba(242,244,246,.55) 55%,rgba(242,244,246,0))}
.me-dot{filter:drop-shadow(0 2px 4px rgba(0,0,0,.35))}

/* instruction pill */
.pilldock{position:absolute;top:calc(var(--safe-t) + 10px);left:10px;right:10px;z-index:20}
.pill{
  position:relative;background:var(--p-bg);color:var(--p-fg);
  border:5px solid var(--p-line);border-radius:28px;padding:13px 16px;
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 14px;align-items:center;
  box-shadow:0 14px 30px -8px rgba(0,0,0,.5);
}
.pill.light{--p-bg:#FFD200;--p-fg:#000;--p-line:#000;--p-acc:#000}
.pill.dark{--p-bg:#000;--p-fg:#FFF;--p-line:#FFD200;--p-acc:#FFD200}
.pill .pcount{
  position:absolute;top:-10px;right:18px;background:var(--p-line);color:var(--p-bg);
  font-family:var(--f-cond);font-weight:700;font-size:12px;letter-spacing:.1em;padding:2px 9px;border-radius:99px;
}
.pglyph{width:64px;height:64px;display:grid;place-items:center;flex:none}
.pglyph svg{width:64px;height:64px;color:var(--p-fg)}
.pbody{min-width:0}
.pread{display:flex;align-items:flex-end;gap:4px;line-height:.82}
.pmet{font-family:var(--f-display);font-size:50px;color:var(--p-acc);font-variant-numeric:tabular-nums;letter-spacing:-.04em}
.punit{font-family:var(--f-display);font-size:22px;padding-bottom:4px}
.plabel{font-family:var(--f-native);font-weight:700;font-size:17px;line-height:1.18;margin-top:5px;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.plabel em{display:block;font-style:normal;font-family:var(--f-cond);font-weight:700;font-size:15px;
  text-transform:uppercase;letter-spacing:.05em;opacity:.72}
.pdrain{grid-column:1/-1;height:10px;border:3px solid var(--p-fg);border-radius:3px;overflow:hidden;margin-top:8px}
.pdrain i{display:block;height:100%;width:100%;background:var(--p-fg);transition:width .35s linear}
.pill.near{animation:pillflash .5s steps(1) infinite}
@keyframes pillflash{
  0%{box-shadow:0 14px 30px -8px rgba(0,0,0,.5),0 0 0 9px var(--p-line)}
  50%{box-shadow:0 14px 30px -8px rgba(0,0,0,.5),0 0 0 9px transparent}
}

.gpsbadge{
  position:absolute;left:12px;top:calc(var(--safe-t) + 178px);z-index:18;
  display:inline-flex;align-items:center;gap:7px;background:rgba(10,10,10,.82);color:#fff;
  font-family:var(--f-cond);font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  padding:6px 11px;border-radius:99px;
}
.gpsbadge .pulse{width:8px;height:8px;border-radius:50%;background:#FFB020;animation:blip 1.4s ease-in-out infinite}
.gpsbadge.ok .pulse{background:#37D67A;animation:none}
.gpsbadge.bad .pulse{background:#E0331E;animation:none}
.gpsbadge.hide{display:none}
@keyframes blip{0%,100%{opacity:.35}50%{opacity:1}}

.navfoot{
  position:relative;z-index:20;margin-top:auto;background:#fff;
  padding:11px 10px calc(var(--safe-b) + 11px);
  display:flex;align-items:center;gap:9px;box-shadow:0 -6px 22px rgba(16,24,40,.16);
}
.footbtn{border-radius:12px;font-family:var(--f-display);font-size:14px;padding:11px 12px;border:3px solid var(--ink);white-space:nowrap}
.footbtn.primary{background:var(--yellow);color:var(--ink);box-shadow:0 4px 0 var(--ink);margin-left:auto}
.footbtn.primary:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.footbtn.ghost{background:#fff;color:var(--ink);padding:12px 15px}
.thenwrap{display:flex;align-items:center;gap:8px;min-width:0}
.thenwrap b{font-family:var(--f-cond);font-weight:700;text-transform:uppercase;letter-spacing:.13em;font-size:11px;color:var(--grey-3)}
.thenwrap svg{width:26px;height:26px;color:var(--ink);flex:none}
.thenwrap .td{font-family:var(--f-display);font-size:15px;font-variant-numeric:tabular-nums;white-space:nowrap}
.etawrap{display:flex;flex-direction:column;line-height:1.15;font-variant-numeric:tabular-nums;white-space:nowrap}
.etawrap span:first-child{font-family:var(--f-display);font-size:15px}
.etawrap span:last-child{font-family:var(--f-cond);font-weight:700;font-size:12px;color:var(--grey-3);letter-spacing:.08em;text-transform:uppercase}

/* ================= BIG VIEW ================= */
.bigview{
  z-index:50;padding:calc(var(--safe-t) + 16px) 20px calc(var(--safe-b) + 16px);
  display:grid;grid-template-rows:auto 1fr auto auto;gap:0;
  background:var(--b-bg);color:var(--b-fg);
}
.bigview.light{--b-bg:#FFD200;--b-fg:#000;--b-acc:#000;--b-faint:rgba(0,0,0,.22)}
.bigview.dark{--b-bg:#000;--b-fg:#FFF;--b-acc:#FFD200;--b-faint:rgba(255,255,255,.26)}
.bigview.near{animation:bigflash .5s steps(1) infinite}
@keyframes bigflash{0%{box-shadow:inset 0 0 0 14px var(--b-acc)}50%{box-shadow:inset 0 0 0 14px transparent}}
.pbar{display:flex;gap:5px;align-items:center}
.pbar span{flex:1;height:9px;border-radius:2px;background:var(--b-faint)}
.pbar span.done{background:var(--b-fg)}
.bigglyph{display:flex;align-items:center;justify-content:center;min-height:0;padding:8px 0}
.bigglyph svg{width:min(74%,260px);height:auto;max-height:100%;color:var(--b-fg)}
.bigread{display:flex;align-items:flex-end;justify-content:center;gap:6px;line-height:.82}
.bigmet{font-family:var(--f-display);font-size:min(30vw,124px);color:var(--b-acc);font-variant-numeric:tabular-nums;letter-spacing:-.04em}
.bigunit{font-family:var(--f-display);font-size:min(11vw,42px);padding-bottom:9px}
.bigdrain{height:14px;border:3px solid var(--b-fg);border-radius:3px;margin:14px 0 14px;overflow:hidden}
.bigdrain i{display:block;height:100%;width:100%;background:var(--b-fg);transition:width .35s linear}
.bigverb{font-family:var(--f-display);font-size:min(8vw,32px);text-align:center;line-height:1.05}
.bigverb .native{display:block;margin-top:8px;font-family:var(--f-native);font-size:min(6.5vw,25px);font-weight:700}
.biglabel{
  display:flex;align-items:center;gap:13px;justify-content:center;
  border:4px solid var(--b-fg);border-radius:14px;padding:11px 14px;margin-bottom:12px;
  font-family:var(--f-cond);font-weight:700;font-size:21px;text-transform:uppercase;line-height:1.1;text-align:center;
}
.bigbuzz{display:flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--f-cond);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:13px;opacity:.5}
.bigbuzz svg{width:20px;height:20px}
.bigview.near .bigbuzz{opacity:1}
.closebig{
  position:absolute;top:calc(var(--safe-t) + 14px);right:16px;
  border:3px solid var(--b-fg);background:transparent;color:var(--b-fg);
  font-family:var(--f-cond);font-weight:700;letter-spacing:.12em;font-size:13px;text-transform:uppercase;
  padding:8px 12px;border-radius:99px;
}

/* ================= SETTINGS ================= */
.sheet{position:absolute;inset:0;z-index:80;background:rgba(10,10,10,.55);display:flex;align-items:flex-end}
.sheetcard{
  width:100%;max-height:92%;overflow-y:auto;background:#fff;border-radius:22px 22px 0 0;
  padding:18px 18px calc(var(--safe-b) + 22px);
}
.sheethead{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.sheethead h2{margin:0;font-family:var(--f-display);font-size:21px}
.setlabel{display:block;font-family:var(--f-cond);font-weight:700;text-transform:uppercase;
  letter-spacing:.13em;font-size:12px;color:var(--grey-3);margin:18px 0 8px}
.setlabel small{text-transform:none;letter-spacing:0}
.setinput{width:100%;border:2px solid var(--grey-2);border-radius:11px;padding:12px;
  font-family:ui-monospace,Menlo,monospace;font-size:14px}
.sethint{margin:9px 0 0;font-size:13px;line-height:1.55;color:var(--grey-4)}
.sethint.attrib{margin-top:22px;font-size:11px;color:var(--grey-3)}
.setrow{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.ctl{border:2px solid var(--ink);background:var(--yellow);color:var(--ink);border-radius:10px;
  font-family:var(--f-cond);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:14px;padding:11px 14px}
.ctl.ghost{background:#fff}
.ctl[aria-pressed="true"]{background:var(--ink);color:var(--yellow)}
.langset{display:flex;border:2px solid var(--ink);border-radius:11px;overflow:hidden}
.langset button{flex:1;border:0;border-right:2px solid var(--ink);background:#fff;color:var(--ink);
  font-family:var(--f-cond);font-weight:700;font-size:15px;letter-spacing:.06em;padding:12px 8px}
.langset button:last-child{border-right:0}
.langset button[aria-pressed="true"]{background:var(--ink);color:var(--yellow)}

@media (prefers-reduced-motion: reduce){
  #maprot{transition:none}
  .pill.near,.bigview.near{animation:none}
  .pill.near{box-shadow:0 14px 30px -8px rgba(0,0,0,.5),0 0 0 9px var(--p-line)}
}