/* 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}
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{text-align:center; padding:8px 0 2px; line-height:.98;
  font-family:"Comic Sans MS","Comic Sans","Chalkboard SE",system-ui,cursive; color:var(--aus); font-weight:700;}
.wordmark .l1{font-size:26px; letter-spacing:.5px} .wordmark .l2{font-size:32px; letter-spacing:.5px}

.header{display:flex; align-items:center; gap:10px; padding:8px 4px 12px}
.hamburger{width:40px;height:40px;flex:0 0 auto;border:0;background:transparent;color:var(--ink);font-size:24px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.trackbtn{flex:1; min-height:56px; border:0; border-radius:12px; background:var(--aus); color:#fff; font-weight:800; font-size:15px;
  display:flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; line-height:1.05; text-align:center;}
.logobtn{width:44px;height:44px;flex:0 0 auto;border:0;border-radius:10px;background:var(--aus);color:#fff;font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center}

/* ---- 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 .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}
: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}
.mapctrls{position:absolute;top:12px;left:12px;right:12px;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none}
.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}
.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}

/* ---- 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)}