/* Aus Taxi Tracker — styling replicated from the iOS app (ausBlue #00205B, iOS grouped
   cards, embossed buttons, Comic-Sans wordmark, green monospaced meter). Mobile-first
   (iPhone 13: 390×844), scales up. */
:root{
  --aus:#00205B; --aus-ink:#00205B;
  --green:#1c9c4c; --green-bright:#22c55e; --red:#e0352b; --orange:#f08a24; --gold:#f6b800;
  --bg:#eef0f4; --card:#ffffff; --group:#f2f2f7; --ink:#1c1c1e; --muted:#6b7280; --line:#e4e6ec;
  --safe-top:env(safe-area-inset-top,0px); --safe-bot:env(safe-area-inset-bottom,0px);
  --card-r:12px;
}
:root[data-theme="dark"]{
  --aus:#4f9dff; --aus-ink:#4f9dff;
  --green:#34c759; --red:#ff6b5e; --orange:#ff9f43; --gold:#ffd23f;
  --bg:#000000; --card:#1c1c1e; --group:#000000; --ink:#f2f2f7; --muted:#98989f; --line:#38383a;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}   /* elements with an explicit display: must still hide when [hidden] */
html,body{height:100%}
body{
  background:var(--bg); color:var(--ink);
  font:16px/1.4 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; display:flex; justify-content:center;
}
.phone{width:100%; max-width:480px; min-height:100dvh; background:var(--bg); display:flex; flex-direction:column; position:relative; overflow:hidden;}
/* Desktop: render EXACTLY as an iPhone 13 (390×844) inside a device frame. */
@media (min-width:520px){
  body{display:block; background:radial-gradient(120% 120% at 50% 0%,#0a2a55 0%,#00122e 60%,#000717 100%); padding:28px 0; min-height:100dvh}
  .phone{
    width:390px; height:844px; min-height:0; margin:0 auto;
    --safe-top:47px; --safe-bot:34px;                 /* simulate the iPhone status bar + home indicator */
    border-radius:54px; background:#000; overflow:hidden;
    box-shadow:0 0 0 12px #0c0c0e, 0 0 0 13px #35353b, 0 0 0 15px #0c0c0e, 0 44px 90px rgba(0,0,0,.65);
  }
  .phone::before{ /* dynamic-island / notch */
    content:""; position:absolute; top:12px; left:50%; transform:translateX(-50%);
    width:120px; height:30px; background:#000; border-radius:999px; z-index:200; pointer-events:none;
  }
  .phone::after{ /* home indicator */
    content:""; position:absolute; bottom:9px; left:50%; transform:translateX(-50%);
    width:130px; height:5px; border-radius:999px; background:rgba(255,255,255,.45); z-index:200; pointer-events:none;
  }
}

/* ---- embossed button treatment (from the Swift .embossed()) ---- */
.emboss{box-shadow:inset 1.5px 1.5px 0 rgba(255,255,255,.28), inset -1.5px -1.5px 0 rgba(0,0,0,.28), 2px 2px 4px rgba(0,0,0,.22);}

/* ---- top: brand wordmark + hamburger/track/logo header ---- */
.screen{flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:calc(var(--safe-top) + 8px) 12px 96px;}
.screen[hidden]{display:none}
.wordmark{display:flex;align-items:center;justify-content:center;gap:12px;padding:10px 0 4px;line-height:1.02;text-align:left}
.wm-logo{width:52px;height:52px;flex:0 0 auto;border-radius:13px;background:var(--aus);display:flex;align-items:center;justify-content:center;font-size:30px;box-shadow:0 4px 12px rgba(0,0,0,.22)}
.wordmark .l1{font-size:15px;font-weight:700;color:var(--ink);letter-spacing:.2px}
.wordmark .l2{font-size:27px;font-weight:800;color:var(--aus);letter-spacing:-.3px} .wordmark sup{font-size:11px;font-weight:600;vertical-align:top;margin-left:1px}

.header{display:flex; align-items:center; gap:10px; padding:10px 4px 14px}
.trackbtn{flex:1; height:54px; border:0; border-radius:14px; color:#fff; font-weight:700; font-size:17px; letter-spacing:.2px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:10px;
  background:linear-gradient(180deg,#1f4a9e 0%,var(--aus) 100%); box-shadow:0 6px 14px rgba(0,32,91,.28), inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .08s ease, box-shadow .08s ease}
.trackbtn:active{transform:translateY(1px) scale(.995); box-shadow:0 3px 8px rgba(0,32,91,.28)}
.trackbtn:disabled{opacity:.7; cursor:default}
.tb-ic{width:26px;height:26px;border-radius:999px;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center}
.tb-ic svg{margin-left:2px}
.logobtn{width:54px;height:54px;flex:0 0 auto;border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);font-size:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.08)}
.logobtn:active{transform:translateY(1px)}

/* ---- iOS GroupBox card ---- */
.gbox{background:var(--card); border:1px solid var(--line); border-radius:var(--card-r); padding:14px; margin:0 0 12px; box-shadow:0 1px 2px rgba(0,0,0,.05);}
.gbox-label{font-size:12px; font-weight:700; color:var(--muted); text-transform:none; letter-spacing:.01em; margin-bottom:8px; display:flex; align-items:center; justify-content:space-between}
.badge{font-size:9px; font-weight:800; padding:2px 7px; border-radius:999px; background:rgba(0,32,91,.12); color:var(--aus);}

/* journey rows */
.jrow{display:flex; align-items:center; gap:10px; padding:6px 0}
.jrow .ic{width:22px;flex:0 0 auto;text-align:center;color:var(--muted)}
.jrow .ic.green{color:var(--green)}
.jrow input{flex:1; border:0; background:transparent; color:var(--ink); font-size:15px; padding:2px 0; outline:none; min-width:0}
.jrow input::placeholder{color:var(--muted)}
.jrow .loc{width:34px;flex:0 0 auto;border:0;background:transparent;color:var(--aus);font-size:17px;cursor:pointer}
.jrow .loc.green{color:var(--green)}
.jdiv{height:1px;background:var(--line);margin:2px 0 2px 32px}
.jmeta{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);padding-top:6px}
.jmeta b{font-weight:600}

/* manual box */
.manual{border-top:1px dashed var(--line); margin-top:8px; padding-top:10px}
.manual .mrow{display:flex; gap:10px}
.manual label{flex:1; font-size:11px; color:var(--muted); font-weight:600}
.manual input{width:100%; margin-top:4px; padding:9px 10px; border:1px solid var(--line); border-radius:9px; font-size:15px; background:var(--card); color:var(--ink)}
.manual .hint{font-size:11px; color:var(--muted); margin-top:6px}

/* tariff disclosure + toggle rows */
.disclose > summary{list-style:none; cursor:pointer; color:var(--aus); font-weight:600; font-size:14px; display:flex; align-items:center; gap:6px; padding:2px 0}
.disclose > summary::-webkit-details-marker{display:none}
.disclose > summary::before{content:"▸"; transition:transform .15s; font-size:12px}
.disclose[open] > summary::before{transform:rotate(90deg)}
.trow{display:flex; align-items:center; justify-content:space-between; padding:9px 0; font-size:14px; border-bottom:1px solid var(--line); cursor:pointer}
.trow:last-child{border-bottom:0}
.trow .tick{font-size:20px; color:#c7c7cc}
.trow.on .tick{color:var(--green)}
.stepper{display:flex; align-items:center; gap:12px}
.stepper button{width:30px;height:30px;border:1px solid var(--line);background:var(--card);color:var(--aus);border-radius:8px;font-size:18px;cursor:pointer;line-height:1}
.fixedfare{display:flex;align-items:center;justify-content:space-between;padding:9px 0;font-size:14px}
.fixedfare input{width:120px;text-align:right;font:600 16px "SF Mono",ui-monospace,Menlo,monospace;border:0;background:var(--group);border-radius:8px;padding:7px 10px;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.deptime{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:10px;margin-top:8px;border-top:1px solid var(--line);font-size:14px}
.deptime input{flex:1;max-width:200px;border:1px solid var(--line);border-radius:8px;padding:7px 9px;font-size:13px;background:var(--card);color:var(--ink)}
.deptime .now{border:0;background:transparent;color:var(--aus);font-weight:700;font-size:14px;cursor:pointer;flex:0 0 auto}

/* estimate card — matches "Estimated Fare Details" */
.est .erow{display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-size:13px; padding:3px 0}
.est .erow .k{color:var(--ink)}
.est .erow .k .sub{font-size:9px;color:var(--muted);margin-left:4px}
.est .erow .v{font-variant-numeric:tabular-nums; white-space:nowrap}
.est .erow .v.muted,.est .erow .k.muted{color:var(--muted)}
.est .accent{color:var(--aus); font-weight:700}
.est .subline{font-size:9px;color:var(--muted);margin-top:-2px;padding-bottom:2px}
.est .ediv{height:1px;background:var(--line);margin:5px 0}
.est .total .k{font-weight:800}
.est .total .v{font-size:19px;font-weight:800;color:var(--green)}
.est .tolls{cursor:pointer}
.est .erow.quoted .v b{font-size:17px;color:var(--green)} .est .erow.quoted.over .v b{color:var(--red)} .est .erow.quoted .k .sub{display:block;margin:2px 0 0;font-size:10px}
.est .tollitem{font-size:12px;color:var(--muted);padding:1px 0 1px 10px}

/* big embossed action buttons */
.bigbtn{width:100%; padding:15px; border:0; border-radius:12px; background:var(--aus); color:#fff; font-size:16px; font-weight:800; cursor:pointer; margin-top:4px}
.bigbtn.green{background:var(--green-bright)}
.ghostbtn{width:100%; padding:12px; border:1px solid var(--line); background:transparent; color:var(--ink); border-radius:12px; font-weight:600; cursor:pointer}
.dangerbtn{width:100%; padding:14px; border:0; border-radius:12px; background:var(--red); color:#fff; font-weight:800; cursor:pointer}

/* ---- live screen ---- */
.map{height:300px; background:#c9d3e0; position:relative; overflow:hidden}
.mapcanvas{position:absolute;inset:0;z-index:0}
:root[data-theme="dark"] .map{background:#12202f}
.mapPlaceholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#5b6b84;font-size:13px;gap:2px;padding:16px}
/* z-index: the Google map injects its own positioned div AFTER these, which otherwise paints over the covert button,
   detour badge and START button (they vanished once the real map loaded) */
.mapctrls{position:absolute;top:12px;left:12px;right:12px;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none;z-index:5}
.mapctrls button{pointer-events:auto}
.eyebtn{width:40px;height:40px;border:0;border-radius:999px;background:rgba(255,255,255,.85);color:var(--aus);font-size:18px;box-shadow:0 1px 4px rgba(0,0,0,.25);cursor:pointer}
.detourbadge{border:0;border-radius:12px;background:rgba(255,255,255,.92);color:var(--aus);font-size:11px;font-weight:800;padding:6px 10px;box-shadow:0 1px 4px rgba(0,0,0,.25);cursor:pointer}
.detourbadge.warn{color:var(--orange)} .detourbadge.breach{color:var(--red)}
.startwrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:5}
.startbtn{width:140px;height:140px;border-radius:999px;border:4px solid #fff;background:var(--green-bright);color:#fff;font-weight:800;font-size:15px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.4);line-height:1.05}
.startbtn .pi{font-size:30px}

.meterbox{padding:16px 14px calc(20px + var(--safe-bot))}
.meterhead{display:flex;align-items:center;gap:10px}
.meterlabel{display:flex;flex-direction:column;line-height:1.05}
.meterlabel .t1{font-size:11px;color:var(--muted)} .meterlabel .t2{font-size:13px;font-weight:700;color:var(--muted)}
.pulse{width:10px;height:10px;border-radius:999px;background:var(--green);animation:pulse 1.4s ease-in-out infinite}
.pulse.paused{animation:none;opacity:.2}
@keyframes pulse{0%,100%{opacity:.15}50%{opacity:1}}
.metergrand{margin-left:auto;font:800 36px "SF Mono",ui-monospace,Menlo,monospace;color:var(--green);letter-spacing:-1px}
.meterrows{margin-top:12px;font-size:13px;color:var(--muted)}
.meterrows .mr{display:flex;justify-content:space-between;padding:2px 0}
.meterrows .paused{color:var(--orange);font-weight:700}
.meterctrls{display:flex;flex-direction:column;gap:9px;margin-top:14px}
.post label{display:block;font-size:12px;color:var(--muted);font-weight:600;margin:2px 0 10px}
.post .fixedfare input{width:150px}

/* ---- history ---- */
.scr-title{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;margin:14px 4px 8px}
.scr-title:first-child{margin-top:2px}
.ride{background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 1px 2px rgba(0,0,0,.05);padding:13px 14px;cursor:pointer;display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:10px}
.ride .r1{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ride .r2{font-size:12px;color:var(--muted);margin-top:2px}
.ride .rf{font-weight:800;font-size:17px;color:var(--green);white-space:nowrap;font-variant-numeric:tabular-nums}
.empty{color:var(--muted);text-align:center;padding:30px 10px;font-size:14px}
.detail .drow{display:flex;justify-content:space-between;font-size:14px;padding:4px 0;border-bottom:1px solid var(--line)}
.detail label{display:block;font-size:12px;color:var(--muted);font-weight:600;margin:12px 0 5px}
.detail input{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:10px;font-size:15px;background:var(--card);color:var(--ink)}

/* ---- More/settings (grouped list feel) ---- */
.gbox .setrow{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--line);font-size:15px}
.gbox .setrow:last-child{border-bottom:0}
.gbox .setrow .sub{font-size:11px;color:var(--muted)}
input[type=range]{width:100%;accent-color:var(--aus)}
.switch{position:relative;width:50px;height:30px;flex:0 0 auto}
.switch input{opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.switch .sl{position:absolute;inset:0;background:#c7c7cc;border-radius:999px;transition:.2s;pointer-events:none}
.switch .sl::before{content:"";position:absolute;width:26px;height:26px;left:2px;top:2px;background:#fff;border-radius:999px;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.switch input:checked + .sl{background:var(--green-bright)} .switch input:checked + .sl::before{transform:translateX(20px)}
.setfld input{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:9px;font-size:15px;background:var(--card);color:var(--ink);margin-top:8px}
.prov{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:11px 13px;display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.prov b{font-size:14px} .prov small{color:var(--muted);display:block;font-size:11px}
.prov a{font-weight:700;color:var(--aus);text-decoration:none;white-space:nowrap}
#regCard a{color:var(--aus);font-weight:700;text-decoration:none}
.about{font-size:13px;color:var(--muted)} .about .ver{margin-top:8px;font-size:11px;opacity:.8}

/* plan-screen route preview map */
.planmap{height:200px;border-radius:12px;overflow:hidden;margin-bottom:12px;background:#c9d3e0;box-shadow:0 1px 2px rgba(0,0,0,.06)}
:root[data-theme="dark"] .planmap{background:#12202f}

/* ---- live: expanded sections ---- */
.livescroll{padding:14px 12px 96px}
.mdiv{height:1px;background:var(--line);margin:12px 0}
.estrow{display:flex;align-items:center;gap:10px}
.estlbl{font-size:13px;font-weight:700;color:var(--muted);line-height:1.05}
.pill{margin-left:auto;border:0;background:var(--aus);color:#fff;font-size:12px;font-weight:800;padding:8px 14px;border-radius:999px;cursor:pointer}
.esttotal{margin-left:auto;font:800 30px "SF Mono",ui-monospace,Menlo,monospace;color:var(--ink);letter-spacing:-1px}
.quotedrow{display:flex;justify-content:space-between;align-items:center;font-size:14px;margin-top:8px}
.quotedrow b{font:800 18px "SF Mono",ui-monospace,Menlo,monospace}
.quotedrow.over b{color:var(--red)}
.warnbanner{background:rgba(224,53,43,.1);color:var(--red);font-weight:800;text-align:center;padding:10px;border-radius:10px;margin-bottom:12px;font-size:14px}
.ctrlrow{display:flex;gap:12px;margin-bottom:12px}
.ctrlbtn{flex:1;min-height:56px;border:0;border-radius:12px;color:#fff;font-size:13px;font-weight:800;cursor:pointer;line-height:1.1}
.ctrlbtn.pause{background:var(--orange)} .ctrlbtn.pause.resumed{background:var(--aus)}
.ctrlbtn.end{background:var(--green-bright)}
.post{margin-bottom:12px}
.finalwrap{display:flex;align-items:center;justify-content:space-between;gap:10px;border:2px solid var(--green-bright);border-radius:12px;padding:10px 14px;margin-bottom:10px}
.finalwrap span{font-size:12px;color:var(--muted);font-weight:700}
.finalwrap input{width:150px;text-align:right;border:0;background:transparent;color:var(--ink);font:800 22px "SF Mono",ui-monospace,Menlo,monospace}
.addr{flex:1;font-size:13px;color:var(--ink);min-width:0}
.selbox{width:100%;margin-bottom:9px;padding:10px 12px;border:1px solid var(--line);border-radius:9px;font-size:14px;background:var(--card);color:var(--ink)}
.compliance{display:flex;gap:6px;margin:4px 0 6px}
.comp{flex:1;text-align:center;font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:10px;padding:8px 2px}
.comp .ctri{display:block;margin:4px auto 0;border:0;background:transparent;font-size:22px;cursor:pointer;color:#c7c7cc}
.comp.yes .ctri{color:var(--green)} .comp.no .ctri{color:var(--red)}
.stars{display:flex;justify-content:center;gap:10px;padding:10px 0 2px}
.stars span{font-size:26px;color:#c7c7cc;cursor:pointer}
.stars span.on{color:var(--gold)}
.actionrow{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.sqbtn{width:56px;height:56px;flex:0 0 auto;border:0;border-radius:12px;background:var(--aus);color:#fff;font-size:24px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.sqbtn.off{background:#9aa0aa}
.photostrip{display:flex;gap:8px;overflow-x:auto;flex:1}
.photostrip figure{position:relative;flex:0 0 auto;margin:0}
.photostrip img{width:56px;height:56px;object-fit:cover;border-radius:8px;display:block}
.photostrip button{position:absolute;top:-6px;right:-6px;width:20px;height:20px;border:0;border-radius:999px;background:rgba(0,0,0,.7);color:#fff;font-size:12px;cursor:pointer;line-height:1}
.notesarea{width:100%;border:1px solid var(--line);border-radius:9px;padding:10px;font:inherit;font-size:14px;background:var(--card);color:var(--ink);resize:vertical}
.bigbtn.assist{background:var(--orange);margin-top:0;margin-bottom:10px}
.bigbtn.cancel{background:#111;margin-top:0}
:root[data-theme="dark"] .bigbtn.cancel{background:#2c2c2e}

/* snooze + covert + assistance modal */
.snooze{position:absolute;left:50%;bottom:80px;transform:translateX(-50%);z-index:250;border:0;border-radius:999px;background:var(--red);color:#fff;font-weight:800;padding:14px 24px;font-size:15px;box-shadow:0 8px 20px rgba(0,0,0,.4);cursor:pointer}
.covert{position:absolute;inset:0;z-index:300;background:#000;display:flex;align-items:flex-end;justify-content:center}
.covertx{position:absolute;top:16px;right:16px;border:0;background:transparent;color:#3a3a3c;font-size:24px;font-weight:800;cursor:pointer}
.covertread{margin-bottom:40px;font:600 15px "SF Mono",ui-monospace,Menlo,monospace;color:rgba(52,199,89,.85);background:rgba(0,0,0,.9);border:1px solid #222;border-radius:8px;padding:10px 16px}
.modal{position:absolute;inset:0;z-index:300;background:rgba(0,0,0,.5);display:flex;align-items:flex-end}
.sheet{background:var(--card);width:100%;max-height:90%;overflow-y:auto;border-radius:18px 18px 0 0;padding:16px 16px calc(20px + var(--safe-bot))}
.sheet-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.sheet-h button{border:0;background:transparent;font-size:20px;cursor:pointer;color:var(--muted)}
.emerg{border:1px solid rgba(224,53,43,.3);background:rgba(224,53,43,.06);border-radius:12px;padding:14px;margin-bottom:12px}
.emerg b{color:var(--red)} .emerg p{font-size:13px;color:var(--ink);margin:6px 0 10px}
.call000{display:block;text-align:center;background:var(--red);color:#fff;font-weight:800;padding:12px;border-radius:10px;text-decoration:none}
.guide{border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:12px}
.guide b{color:var(--aus)} .guide p,.guide li{font-size:13px;color:var(--ink)} .guide ul{margin:8px 0 0 18px}
.hot{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-size:14px}
.hot a{background:var(--aus);color:#fff;font-weight:700;padding:8px 16px;border-radius:8px;text-decoration:none}

/* ---- tab bar ---- */
.tabbar{position:absolute;left:0;right:0;bottom:0;display:flex;background:var(--card);border-top:1px solid var(--line);padding-bottom:var(--safe-bot);z-index:10}
.tab{flex:1;border:0;background:transparent;padding:8px 0 6px;display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--muted);cursor:pointer;font-size:11px;font-weight:600}
.tab .ti{font-size:19px;line-height:1}
.tab.active{color:var(--aus)}

/* ===== terms splash ===== */
.splash{position:absolute;inset:0;z-index:600;background:var(--card);overflow-y:auto;padding:calc(var(--safe-top) + 30px) 22px calc(var(--safe-bot) + 20px)}
.splash-in{max-width:340px;margin:0 auto;text-align:center}
.applogo{width:110px;height:110px;margin:0 auto 12px;border-radius:24px;background:var(--aus);display:flex;align-items:center;justify-content:center;font-size:60px;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.sp-t1{font-size:26px;font-weight:800;line-height:1.05} .sp-t2{font-size:32px;font-weight:800;color:var(--aus);line-height:1.05}
.sp-sub{color:var(--muted);font-size:14px;margin:8px 0 16px}
.sp-box{text-align:left;background:var(--group);border:1px solid var(--line);border-radius:12px;padding:12px;max-height:150px;overflow-y:auto;font-size:11.5px;color:var(--muted)}
.sp-box b{color:var(--ink)} .sp-box p{margin:6px 0}
.sp-prem{margin:16px 0 14px;font-size:14px} .sp-prem small{color:var(--muted);font-size:11px}
.sp-copy{color:var(--muted);font-size:11px;margin-top:22px;text-align:center}

/* ===== live header ===== */
.livehead{display:flex;align-items:center;justify-content:space-between;padding:calc(var(--safe-top) + 8px) 10px 8px;background:var(--card);border-bottom:1px solid var(--line)}
.lh-menu,.lh-logo{width:36px;height:36px;border:0;background:transparent;font-size:22px;cursor:pointer;color:var(--ink)}
.lh-logo{background:var(--aus);border-radius:8px;font-size:18px}
.lh-title{text-align:center;line-height:1.1} .lh-title b{display:block;font-size:16px} .lh-title span{font-size:11px;color:var(--muted)}
.ctrlbtn.close{background:#9aa0aa}
.ctrlbtn:disabled{opacity:.5;cursor:default}
.finalwrap.slim{flex:1;border:2px solid #c7c7cc;padding:8px 14px;margin:0;min-height:56px}
.finalwrap.slim input{width:100%}
.jrow .chev,.menurow .chev{margin-left:auto;color:var(--muted);font-size:18px}
.toastmsg{position:absolute;left:50%;bottom:110px;transform:translateX(-50%);background:rgba(120,120,128,.95);color:#fff;font-size:14px;padding:12px 24px;border-radius:8px;z-index:50}

/* ===== sub-screens / menu ===== */
.subhead{display:flex;align-items:center;justify-content:center;position:relative;padding:calc(var(--safe-top) + 6px) 12px 12px;font-size:17px}
.subhead .back,.subhead .editbtn{position:absolute;top:calc(var(--safe-top) + 4px);border:0;background:transparent;color:var(--aus);font-size:16px;font-weight:600;cursor:pointer;padding:4px 6px}
.subhead .back{left:8px} .subhead .editbtn{right:10px}
.menulist{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.menurow{display:flex;align-items:center;gap:6px;width:100%;text-align:left;padding:14px 14px;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--ink);font-size:15px;cursor:pointer;text-decoration:none}
.menurow:last-child{border-bottom:0}
.sensewrap{display:flex;align-items:center;gap:12px} .sensewrap b{white-space:nowrap;color:var(--aus)}
.testalarm{width:100%;margin-top:10px;padding:12px;border:1px solid rgba(224,53,43,.35);background:rgba(224,53,43,.06);color:var(--red);font-weight:800;border-radius:10px;cursor:pointer}
.linkbtn{display:inline-block;margin-top:8px;padding:8px 12px;border:1px solid var(--line);background:var(--group);border-radius:8px;color:var(--ink);font-size:14px;cursor:pointer}
.body{font-size:14px;color:var(--ink);margin:6px 0}
.feat{display:flex;gap:12px;align-items:flex-start;padding:8px 0}
.feat i{font-style:normal;font-size:22px;width:30px;text-align:center;color:var(--aus)} .feat b{display:block;font-size:14px} .feat small{color:var(--muted);font-size:12px}
.premwrap{text-align:center;padding:20px 16px} .premstar{font-size:80px;line-height:1} .premwrap h2{font-size:28px;margin:10px 0 16px} .premwrap .feat{text-align:left}

/* ===== covert edit + email sheet + alarm test ===== */
.covertedit{position:absolute;left:20px;bottom:40px;border:0;background:transparent;color:#5a5a5e;font-size:30px;cursor:pointer}
.covertpanel{position:absolute;left:20px;right:20px;top:50%;transform:translateY(-50%);background:rgba(28,28,30,.96);border-radius:20px;padding:20px}
.cp-h{display:flex;justify-content:space-between;color:#fff;margin-bottom:12px} .cp-h button{border:0;background:transparent;color:#888;font-size:20px}
.selbox.dark{background:#3a3a3c;color:#fff;border-color:#3a3a3c}
.esheet{width:100%;padding:calc(var(--safe-top) + 10px) 10px 0;align-self:flex-start}
.es-card{background:var(--card);border-radius:14px;overflow:hidden;margin-bottom:8px}
.es-h{font-size:13px;font-weight:700;color:var(--muted);text-align:center;padding:14px 0 4px}
.es-sub{font-size:13px;color:var(--muted);text-align:center;padding:0 16px 12px}
.esfare{display:block;width:calc(100% - 32px);margin:0 16px 16px;height:50px;border:0;background:var(--group);border-radius:8px;text-align:right;padding:0 16px;font:600 26px "SF Mono",ui-monospace,Menlo,monospace;color:var(--ink)}
.es-btn{display:block;width:100%;min-height:56px;border:0;border-top:1px solid var(--line);background:transparent;font-size:18px;cursor:pointer}
.es-btn.blue{color:#0a84ff} .es-btn.red{color:var(--red)} .es-btn.cont{background:var(--card);border-radius:14px;color:#0a84ff;font-weight:700;border-top:0}
.alarmtest{position:absolute;inset:0;z-index:700;background:rgba(224,53,43,.96);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px;gap:10px}
.at-bell{font-size:80px;animation:ring .5s ease-in-out 5} @keyframes ring{0%,100%{transform:rotate(0)}25%{transform:rotate(-15deg)}75%{transform:rotate(15deg)}}
.alarmtest h2{font-size:34px} .alarmtest p{font-size:16px} .alarmtest .small{font-size:14px;opacity:.9}
.alarmtest button{margin-top:16px;width:100%;max-width:300px;padding:14px;border:0;border-radius:12px;background:#fff;color:var(--red);font-weight:800;font-size:16px}

/* ===== history ===== */
.ride{display:block}
.ride .r0{font-weight:700;font-size:15px} .ride .r1{font-size:12px;margin-top:2px} .ride .r2{font-size:12px;color:var(--muted)} .ride .rf{font-size:14px;font-weight:800;color:var(--green);margin-top:4px}
.rdmap{height:300px;background:#c9d3e0;position:relative} :root[data-theme="dark"] .rdmap{background:#12202f}
.bigfare{background:var(--group);border-radius:12px;min-height:60px;display:flex;align-items:center;justify-content:flex-end;padding:0 16px;border:2px solid transparent}
.bigfare.edit{border-color:#c7c7cc;background:var(--card)}
.bigfare input{width:100%;text-align:right;border:0;background:transparent;font:800 36px "SF Mono",ui-monospace,Menlo,monospace;color:var(--green)}
.vt{display:flex;align-items:center;justify-content:space-between;padding:0 10px;height:38px;border:1px solid var(--line);border-radius:8px;margin-bottom:9px;font-size:14px}
.vt.maxi span{color:var(--aus);font-weight:700} .vt .ctri{border:0;background:transparent;font-size:20px;color:#c7c7cc;cursor:pointer} .vt.maxi .ctri{color:var(--green)}
.selbox[readonly]{background:var(--group)}
.bigbtn.sent{background:var(--green-bright)}

/* ===== inline address suggestions (drop down under the box being typed in) ===== */
.gbox{position:relative}
.sugg{position:absolute;left:8px;right:8px;z-index:60;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 24px rgba(0,0,0,.18);max-height:240px;overflow-y:auto}
.sugg-row{display:flex;gap:10px;align-items:center;padding:10px 12px;border-bottom:1px solid var(--line);cursor:pointer;font-size:14px;color:var(--ink)}
.sugg-row:last-child{border-bottom:0} .sugg-row:active{background:var(--group)}
.sugg-row .ic{width:20px;flex:0 0 auto;text-align:center;color:var(--muted)}
.sugg-row b{display:block;font-weight:600} .sugg-row small{display:block;color:var(--muted);font-size:12px}
.jrow .addr{flex:1;min-width:0}

/* ===== iOS-style alert ===== */
.alertwrap{position:absolute;inset:0;z-index:800;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;padding:30px}
.alertbox{width:270px;background:rgba(242,242,247,.97);border-radius:14px;overflow:hidden;text-align:center;color:#000;box-shadow:0 20px 50px rgba(0,0,0,.35);animation:popin .18s ease}
:root[data-theme="dark"] .alertbox{background:rgba(44,44,46,.97);color:#fff}
@keyframes popin{from{transform:scale(1.08);opacity:0}to{transform:scale(1);opacity:1}}
.alertbox h3{font-size:17px;font-weight:600;margin:18px 16px 4px;line-height:1.25} .alertbox p{margin:0 16px 16px;font-size:13px;line-height:1.35}
.alertbox input{display:block;width:calc(100% - 32px);margin:0 16px 14px;height:32px;border:1px solid rgba(60,60,67,.3);border-radius:6px;padding:0 8px;font-size:14px;background:#fff;color:#000}
.ab-btns{display:flex;flex-direction:column} .ab-btns.row{flex-direction:row}
.alertbox button{flex:1;border:0;border-top:1px solid rgba(60,60,67,.29);background:transparent;padding:12px 8px;font-size:17px;color:#0a84ff;cursor:pointer}
.ab-btns.row button+button{border-left:1px solid rgba(60,60,67,.29)}
.alertbox button.destructive{color:#ff3b30} .alertbox button.cancel{font-weight:600}

/* version-toast (slide-up refresh nudge) */
.updbar{position:absolute;left:12px;right:12px;bottom:74px;z-index:400;background:var(--aus);color:#fff;
  border-radius:12px;padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px;
  box-shadow:0 10px 26px rgba(0,0,0,.4);font-weight:700;font-size:14px;animation:slideup .3s ease}
.updbar button{border:0;background:#fff;color:var(--aus);font-weight:800;padding:8px 16px;border-radius:8px;cursor:pointer}
@keyframes slideup{from{transform:translateY(24px);opacity:0}to{transform:translateY(0);opacity:1}}

/* ===== profile sign-in (email + 4-digit PIN) ===== */
.authform{text-align:left;margin-top:6px}
.authlbl{display:block;font-size:12px;font-weight:700;color:var(--muted);margin-top:10px}
.authlbl .selbox{margin:4px 0 0;font-size:16px}
.pinbox{letter-spacing:10px;font:600 22px "SF Mono",ui-monospace,Menlo,monospace;text-align:center}
.autherr{margin:10px 0 0;padding:10px 12px;border-radius:10px;background:rgba(224,53,43,.08);border:1px solid rgba(224,53,43,.3);color:var(--red);font-size:13px;font-weight:600}
.authform .bigbtn{margin-top:14px}
.authform .hint{font-size:11px;color:var(--muted);margin-top:8px}
.ride .rip{display:inline-block;margin-left:6px;font-size:10px;font-weight:800;color:#fff;background:var(--orange);border-radius:999px;padding:1px 7px;vertical-align:middle}

/* ===== unified button system (matches the Track Ride treatment): soft gradient, lift shadow, inner highlight, press state ===== */
.emboss{box-shadow:none}   /* the old bevel is retired; each button below carries its own depth */
.bigbtn,.ctrlbtn,.sqbtn,.pill,.snooze,.call000,.hot a,.updbar button,.startbtn,.es-btn.cont,.testalarm,.linkbtn{
  border:0;font-weight:700;letter-spacing:.2px;cursor:pointer;transition:transform .08s ease,box-shadow .08s ease,opacity .15s ease;
  box-shadow:0 6px 14px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.18)}
.bigbtn:active,.ctrlbtn:not(:disabled):active,.sqbtn:active,.pill:active,.snooze:active,.call000:active,.hot a:active,.updbar button:active,.startbtn:active,.es-btn.cont:active,.testalarm:active,.linkbtn:active{transform:translateY(1px) scale(.995);box-shadow:0 3px 8px rgba(0,0,0,.18)}
/* colour families (light shade → base, so they read as one system) */
.bigbtn,.sqbtn,.pill,.hot a,.ctrlbtn.pause.resumed{background:linear-gradient(180deg,#1f4a9e 0%,#00205B 100%);color:#fff;box-shadow:0 6px 14px rgba(0,32,91,.28),inset 0 1px 0 rgba(255,255,255,.18)}
.bigbtn.green,.bigbtn.sent,.ctrlbtn.end,.startbtn{background:linear-gradient(180deg,#34c95f 0%,#1c9c4c 100%);color:#fff;box-shadow:0 6px 14px rgba(28,156,76,.32),inset 0 1px 0 rgba(255,255,255,.2)}
.bigbtn.assist,.ctrlbtn.pause{background:linear-gradient(180deg,#ffa64d 0%,#f08a24 100%);color:#fff;box-shadow:0 6px 14px rgba(240,138,36,.32),inset 0 1px 0 rgba(255,255,255,.2)}
.snooze,.call000{background:linear-gradient(180deg,#ef5a50 0%,#e0352b 100%);color:#fff;box-shadow:0 8px 18px rgba(224,53,43,.35),inset 0 1px 0 rgba(255,255,255,.2)}
.bigbtn.cancel{background:linear-gradient(180deg,#3a3a3c 0%,#111 100%);color:#fff;box-shadow:0 6px 14px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.12)}
.ctrlbtn.close,.sqbtn.off{background:linear-gradient(180deg,#b0b6bf 0%,#9aa0aa 100%);color:#fff;box-shadow:0 4px 10px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.2)}
/* shapes */
.bigbtn{border-radius:14px;padding:0;height:54px;font-size:17px;display:flex;align-items:center;justify-content:center;gap:8px}
.ctrlbtn{border-radius:14px;min-height:56px;font-size:14px;line-height:1.15}
.ctrlbtn:disabled{opacity:.45;box-shadow:none;transform:none}
.sqbtn{border-radius:14px}
.pill{font-size:12px;padding:9px 16px;border-radius:999px}
.startbtn{border:4px solid rgba(255,255,255,.95);box-shadow:0 12px 30px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.25)}
.updbar button{background:#fff;color:var(--aus);border-radius:10px;padding:9px 16px;box-shadow:0 3px 8px rgba(0,0,0,.2)}
.hot a{border-radius:12px;padding:10px 18px}
.call000{border-radius:12px;padding:13px}
.es-btn.cont{box-shadow:0 6px 14px rgba(0,0,0,.14);color:#0a84ff}
.testalarm{border-radius:12px;box-shadow:none;border:1px solid rgba(224,53,43,.35)}
.testalarm:active{box-shadow:none}
.linkbtn{border-radius:10px;box-shadow:0 2px 6px rgba(0,0,0,.08);border:1px solid var(--line)}
.stepper button{width:32px;height:32px;border-radius:10px;font-weight:700;box-shadow:0 2px 6px rgba(0,0,0,.08)}
.stepper button:active{transform:translateY(1px)}
.deptime .now,.subhead .back,.subhead .editbtn{font-weight:700}
/* secondary "sheet" style buttons keep their flat iOS look on purpose (alerts, e-mail options, search Cancel) */

/* ===== v2 brand: fare-meter logo, hero banner, screens own their background (fixes navy-on-black) ===== */
.screen{background:var(--bg)}
.hero{display:flex;align-items:center;justify-content:center;gap:14px;margin:2px 0 4px;padding:16px 14px;border-radius:16px;
  background:linear-gradient(135deg,#0e3270 0%,#00205B 55%,#001238 100%);box-shadow:0 8px 20px rgba(0,18,56,.35);position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;background:
  radial-gradient(90% 140% at 110% -20%,rgba(143,180,255,.25) 0%,transparent 55%);pointer-events:none}
.wm-logo{width:58px;height:58px;flex:0 0 auto;border-radius:14px;box-shadow:0 4px 12px rgba(0,0,0,.35)}
.wm-type{text-align:left;line-height:1.05}
.wm-type .l1{font-size:12px;font-weight:700;letter-spacing:2.5px;color:#8fb4ff}
.wm-type .l2{font-size:30px;font-weight:800;letter-spacing:.4px;color:#fff}
.wm-type .l3{font-size:10px;color:rgba(255,255,255,.65);margin-top:3px;letter-spacing:.3px}
.gold{color:var(--gold)}
.sp-t2 .gold{color:#c99400}
:root[data-theme="dark"] .sp-t2 .gold{color:var(--gold)}
.applogo{width:110px;height:110px;border-radius:24px;box-shadow:0 6px 18px rgba(0,0,0,.25);background:transparent;display:block;margin:0 auto 12px;font-size:0}
.logobtn img,.lh-logo img{width:100%;height:100%;border-radius:inherit;display:block}
.logobtn{padding:0;background:transparent;border:0;overflow:hidden}
.lh-logo{background:transparent;padding:0;overflow:hidden;border-radius:9px}

/* h1/p inside the hero keep the exact wordmark styling (semantic tags for SEO, no visual change) */
.wm-type p,.wm-type h1{margin:0;font-weight:inherit}