/* ===== TNT Now — brand system (from live sell-my-car) ===== */
:root{
  --black:#0A0E1A; --surface:#131A29; --surface-2:#1B2336; --surface-3:#2A3247;
  --hairline:rgba(212,165,55,.18); --hairline-soft:rgba(250,250,249,.08);
  --gold:#D4A537; --gold-bright:#E8B94A; --gold-deep:#A8801D; --gold-ink:#2A1810; --gold-glow:rgba(212,165,55,.35);
  --teal:#2A9D8F; --teal-bright:#3CBBA8;
  --paper:#FAFAF9; --paper-mute:#E7E5E4; --mute:#A8A29E; --mute-2:#78716C;
  --light-bg:#F5F5F4; --light-ink:#0C0A09; --light-mute:#57534E; --light-hairline:#E7E5E4;
  --r-sm:6px; --r-md:10px; --r-lg:18px; --r-xl:28px;
  --ok:#22C55E; --err:#EF4444;
  --display:'Bebas Neue','Impact',sans-serif;
  --body:'Satoshi','SF Pro Text',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font-family:var(--body);background:var(--black);color:var(--paper);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.5}
.display{font-family:var(--display);font-weight:400;letter-spacing:.005em;line-height:.92;text-transform:uppercase}
button,input,select,textarea{font-family:inherit;font-size:16px;color:inherit}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* App shell */
.app{max-width:520px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;
  background:var(--black);position:relative}
.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;background:rgba(10,14,26,.92);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--hairline)}
.brand{display:flex;align-items:center;gap:11px}
.brand-mark{width:38px;height:38px;border-radius:10px;
  background:linear-gradient(135deg,var(--gold) 0%,var(--gold-deep) 100%);color:var(--gold-ink);
  display:grid;place-items:center;font-family:var(--display);font-size:17px;letter-spacing:.04em;
  box-shadow:0 4px 12px var(--gold-glow)}
.brand-logo{width:40px;height:40px;border-radius:10px;object-fit:contain;background:#fff;
  padding:2px;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.brand-name{font-family:var(--display);font-size:19px;letter-spacing:.05em;line-height:1}
.brand-tag{font-size:9px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-top:2px}
.tel-pill{display:inline-flex;align-items:center;gap:7px;background:var(--gold);color:var(--gold-ink);
  font-weight:800;font-size:13px;padding:9px 14px;border-radius:999px;box-shadow:0 6px 18px var(--gold-glow)}
.main{flex:1;padding:20px 18px 120px}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--gold)}
h1.hero{font-family:var(--display);font-size:clamp(38px,11vw,54px);text-transform:uppercase;
  line-height:.94;margin:12px 0 8px}
h1.hero .accent{color:var(--gold)}
.lede{color:var(--paper-mute);font-size:15px;margin-bottom:24px}

/* Big choice cards (home) */
.choice{display:block;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-lg);
  padding:22px;margin-bottom:16px;position:relative;overflow:hidden;transition:transform .15s,border-color .15s}
.choice:active{transform:scale(.985)}
.choice .ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:24px;margin-bottom:14px}
.choice.haul .ic{background:rgba(212,165,55,.14);color:var(--gold)}
.choice.car .ic{background:rgba(42,157,143,.16);color:var(--teal-bright)}
.choice h3{font-family:var(--display);font-size:26px;letter-spacing:.02em;text-transform:uppercase;margin-bottom:6px}
.choice p{color:var(--mute);font-size:14px;line-height:1.5;margin-bottom:14px}
.choice .go{display:inline-flex;align-items:center;gap:7px;font-weight:800;font-size:14px;color:var(--gold)}
.choice .corner{position:absolute;top:14px;right:16px;font-size:11px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gold-ink);background:var(--gold);padding:4px 9px;border-radius:999px}

/* Views */
.view{display:none;animation:fade .25s ease}
.view.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Steps / wizard */
.prog{height:4px;background:var(--surface-2);border-radius:99px;overflow:hidden;margin-bottom:22px}
.prog > span{display:block;height:100%;background:linear-gradient(90deg,var(--gold-deep),var(--gold-bright));
  width:0;transition:width .35s ease}
.step{display:none}
.step.active{display:block;animation:fade .25s ease}
.step h2{font-family:var(--display);font-size:30px;letter-spacing:.02em;text-transform:uppercase;margin-bottom:6px}
.step .hint{color:var(--mute);font-size:14px;margin-bottom:18px}

/* Option grid */
.opts{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:6px}
.opts.three{grid-template-columns:1fr 1fr 1fr}
.opt{background:var(--surface);border:1.5px solid var(--hairline);border-radius:var(--r-md);
  padding:16px 12px;text-align:center;cursor:pointer;transition:.12s;font:inherit;font-weight:700;font-size:14px;color:inherit}
.opt:active{transform:scale(.97)}
.opt.sel{border-color:var(--gold);background:rgba(212,165,55,.12);box-shadow:0 0 0 3px var(--gold-glow)}
.opt .oi{font-size:24px;display:block;margin-bottom:7px}
.opt .os{display:block;font-size:11px;font-weight:600;color:var(--mute);margin-top:3px}

/* Tier cards (junk removal) */
.tier{display:flex;align-items:center;gap:14px;background:var(--surface);border:1.5px solid var(--hairline);
  border-radius:var(--r-md);padding:16px;margin-bottom:11px;cursor:pointer;transition:.12s;width:100%;
  font:inherit;color:inherit;text-align:left}
.tier:active{transform:scale(.99)}
.tier.sel{border-color:var(--gold);background:rgba(212,165,55,.1);box-shadow:0 0 0 3px var(--gold-glow)}
.tier .tnum{font-family:var(--display);font-size:30px;color:var(--gold);min-width:64px}
.tier .tbody{flex:1;display:block}
.tier .tname{display:block;font-family:var(--display);font-size:18px;letter-spacing:.03em;text-transform:uppercase}
.tier .tdesc{display:block;font-size:12.5px;color:var(--mute);margin-top:2px}

/* Inputs */
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--mute);margin-bottom:7px}
.field input,.field select,.field textarea{width:100%;background:var(--surface);border:1.5px solid var(--hairline);
  border-radius:var(--r-md);padding:14px;color:var(--paper);transition:border-color .15s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold)}
.field textarea{min-height:72px;resize:vertical}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.err{color:var(--err);font-size:13px;margin-top:6px;min-height:18px}
.sms-consent{display:flex;align-items:flex-start;gap:9px;margin:2px 0 8px;color:var(--s-mute);
  font-size:11px;line-height:1.35;cursor:pointer;text-align:left}
.sms-consent input{flex:0 0 17px;width:17px;height:17px;margin:1px 0 0;accent-color:var(--gold)}
.sms-consent span{min-width:0}

/* Buttons */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  background:var(--gold);color:var(--gold-ink);font-weight:800;font-size:16px;letter-spacing:.01em;
  border:none;border-radius:999px;padding:17px;cursor:pointer;box-shadow:0 8px 22px var(--gold-glow);transition:.15s}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.6;cursor:default}
.btn.ghost{background:transparent;color:var(--paper);border:1.5px solid var(--hairline);box-shadow:none}
.btn-row{display:flex;gap:11px;margin-top:18px}
.btn-row .btn{flex:1}
.btn-row .btn.ghost{flex:0 0 96px}

/* Offer reveal */
.offer-wrap{text-align:center;padding:8px 0}
.offer-badge{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);background:rgba(212,165,55,.12);padding:7px 14px;border-radius:999px;margin-bottom:18px}
.offer-amt{font-family:var(--display);font-weight:400;font-size:clamp(54px,17vw,80px);line-height:.9;color:var(--paper)}
.offer-amt .to{color:var(--mute);font-size:.32em;vertical-align:middle;margin:0 8px;letter-spacing:.1em}
.offer-veh{color:var(--paper-mute);font-weight:700;font-size:16px;margin:12px 0 4px}
.offer-note{color:var(--mute);font-size:13px;max-width:380px;margin:0 auto 22px}
.quote-amt{font-family:var(--display);font-size:clamp(56px,18vw,84px);color:var(--gold);line-height:.9}

/* Success / confirm */
.confirm{text-align:center;padding:30px 8px}
.confirm .ring{width:84px;height:84px;border-radius:50%;background:rgba(34,197,94,.14);
  display:grid;place-items:center;margin:0 auto 20px;font-size:40px;color:var(--ok)}
.confirm h2{font-family:var(--display);font-size:34px;text-transform:uppercase;margin-bottom:10px}
.confirm p{color:var(--paper-mute);font-size:15px;margin-bottom:6px}
.form-msg{font-size:14px;margin-top:14px;min-height:20px;text-align:center}
.form-msg.ok{color:var(--ok)} .form-msg.err{color:var(--err)}

/* Summary chips */
.summary{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-md);
  padding:16px;margin-bottom:18px}
.summary .srow{display:flex;justify-content:space-between;padding:7px 0;font-size:14px;border-bottom:1px solid var(--hairline-soft)}
.summary .srow:last-child{border:none}
.summary .srow .k{color:var(--mute)} .summary .srow .v{font-weight:700;text-align:right}

/* Bottom nav (role switch) */
.botnav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:520px;
  display:flex;background:rgba(10,14,26,.96);backdrop-filter:blur(12px);border-top:1px solid var(--hairline);z-index:45}
.botnav a{flex:1;text-align:center;padding:11px 0 14px;font-size:10px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mute)}
.botnav a .ni{display:block;font-size:21px;margin-bottom:3px}
.botnav a.on{color:var(--gold)}

/* Map */
#map{height:240px;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--hairline);margin-bottom:16px}
.track-status{display:flex;gap:10px;align-items:center;background:var(--surface);border:1px solid var(--hairline);
  border-radius:var(--r-md);padding:14px;margin-bottom:12px}
.track-status .dot{width:12px;height:12px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px var(--gold-glow);
  animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.timeline{list-style:none;padding-left:8px}
.timeline li{position:relative;padding:0 0 22px 26px;color:var(--mute);font-size:14px}
.timeline li::before{content:"";position:absolute;left:0;top:3px;width:13px;height:13px;border-radius:50%;
  border:2px solid var(--hairline);background:var(--surface)}
.timeline li::after{content:"";position:absolute;left:6px;top:16px;bottom:0;width:1px;background:var(--hairline)}
.timeline li:last-child::after{display:none}
.timeline li.done{color:var(--paper)} .timeline li.done::before{background:var(--ok);border-color:var(--ok)}
.timeline li.now{color:var(--gold)} .timeline li.now::before{background:var(--gold);border-color:var(--gold)}

.center-note{text-align:center;color:var(--mute);font-size:13px;margin-top:14px}
.center-note a{color:var(--gold);font-weight:700}
.skel{background:linear-gradient(90deg,var(--surface) 25%,var(--surface-2) 50%,var(--surface) 75%);
  background-size:200% 100%;animation:sk 1.3s infinite;border-radius:var(--r-md)}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ===== SVG icons (Lucide-style; replaces emoji) ===== */
.li{display:inline-block;vertical-align:middle;flex:none}
.ic-inline{display:inline-flex;align-items:center;vertical-align:middle}
.opt .oi{display:flex;justify-content:center;align-items:center;margin-bottom:8px;color:var(--paper-mute)}
.opt.sel .oi{color:var(--gold)}
.choice .ic .li,.ring .li,.botnav a .ni .li{display:block}
.opt-lbl{display:block;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--mute);margin:18px 0 9px}

/* ===== Booking mini-map (Uber feel) ===== */
.map-mini{height:190px;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--hairline);margin:4px 0 8px;background:var(--surface-2)}
.map-cap{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--mute);margin:0 2px 16px;font-weight:600}
.map-cap .ic-inline{color:var(--gold)}
.leaflet-control-attribution{display:none!important}

/* ===================================================================
   MAP-FIRST APP (Uber-style) — persistent map + bottom sheet
=================================================================== */
.mapapp{position:fixed;inset:0;overflow:hidden;background:#EAE8E4} /* voyager land tone — no black flash while tiles load */
#bigmap{position:absolute;inset:0;z-index:0;background:#0c1322}
.leaflet-container{background:#0c1322}
.leaflet-control-attribution,.leaflet-control-zoom{display:none!important}

/* Top bar (translucent over map) */
.map-topbar{position:absolute;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;gap:10px;
  padding:14px 16px;padding-top:max(14px,env(safe-area-inset-top));
  background:linear-gradient(180deg,rgba(10,14,26,.94) 0%,rgba(10,14,26,.78) 70%,transparent 100%)}
.map-topbar .brand{display:flex;align-items:center;gap:10px;flex:1}
.mt-back{width:40px;height:40px;border-radius:12px;border:1px solid var(--hairline);background:rgba(19,26,41,.9);
  color:var(--paper);display:grid;place-items:center;cursor:pointer}
.mt-call{width:42px;height:42px;border-radius:50%;background:var(--gold);color:var(--gold-ink);
  display:grid;place-items:center;box-shadow:0 6px 18px var(--gold-glow)}

/* Center pickup pin (HTML overlay, stays centered) */
.centerpin{position:absolute;left:50%;top:42%;transform:translate(-50%,-100%);z-index:20;
  pointer-events:none;display:none;text-align:center}
.centerpin.show{display:block;animation:pindrop .4s cubic-bezier(.2,.8,.3,1)}
@keyframes pindrop{0%{transform:translate(-50%,-160%)}60%{transform:translate(-50%,-92%)}100%{transform:translate(-50%,-100%)}}
.cp-pin{color:var(--gold);filter:drop-shadow(0 6px 10px rgba(0,0,0,.5));animation:pinbob 2s ease-in-out infinite}
@keyframes pinbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.cp-shadow{width:16px;height:6px;border-radius:50%;background:rgba(0,0,0,.45);margin:2px auto 0;
  animation:shbob 2s ease-in-out infinite}
@keyframes shbob{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(.7);opacity:.3}}

/* Radar (finding a crew) */
.radar{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);z-index:20;display:none;pointer-events:none}
.radar.show{display:block}
.radar span{position:absolute;left:50%;top:50%;width:30px;height:30px;border-radius:50%;
  border:2px solid var(--gold);transform:translate(-50%,-50%);opacity:0;animation:ring 2.4s ease-out infinite}
.radar span:nth-child(2){animation-delay:.8s}.radar span:nth-child(3){animation-delay:1.6s}
@keyframes ring{0%{width:30px;height:30px;opacity:.8}100%{width:240px;height:240px;opacity:0}}
.radar-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:var(--gold-ink);display:grid;place-items:center;
  box-shadow:0 8px 24px var(--gold-glow)}

/* Locate-me */
.locate-btn{position:absolute;right:16px;z-index:25;bottom:calc(var(--sheet-h,46vh) + 16px);
  width:48px;height:48px;border-radius:50%;border:1px solid #D8D5CF;background:#fff;
  color:#131A29;display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.18);transition:bottom .3s}
.locate-btn.locating{animation:locpulse 1s ease-in-out infinite;color:var(--gold)}
@keyframes locpulse{0%,100%{box-shadow:0 6px 18px rgba(0,0,0,.18)}50%{box-shadow:0 0 0 10px rgba(212,175,55,.25)}}

/* Address autocomplete dropdown */
.ac-box{position:absolute;left:0;right:0;top:100%;margin-top:4px;background:#fff;
  border:1px solid #E5E5E5;border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.14);
  z-index:60;display:none;overflow:hidden}
.ac-item{display:block;width:100%;padding:12px 14px;font-size:14px;color:#111;cursor:pointer;
  border:0;border-bottom:1px solid #F2F2F2;background:#fff;text-align:left}
.ac-item:last-child{border-bottom:none}
.ac-item:hover,.ac-item:active{background:#F6F6F6}

/* Bottom sheet */
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:28;background:var(--surface);
  border-top:1px solid var(--hairline);border-radius:24px 24px 0 0;
  box-shadow:0 -12px 40px rgba(0,0,0,.5);padding:10px 20px calc(22px + env(safe-area-inset-bottom));
  max-height:84vh;overflow-y:auto;-webkit-overflow-scrolling:touch;transition:transform .3s}
.sheet-handle{width:42px;height:5px;border-radius:99px;background:var(--mute-2);opacity:.5;margin:2px auto 14px}
.panel{display:none;animation:fade .25s ease}
.panel.active{display:block}

.sheet-h{font-family:var(--display);font-size:24px;letter-spacing:.02em;text-transform:uppercase;margin:4px 0 4px}
.sheet-hint{color:var(--mute);font-size:13.5px;margin-bottom:14px}
.sheet-note{text-align:center;color:var(--mute);font-size:13px;margin-top:14px}
.sheet-note a{color:var(--gold);font-weight:700}
.sheet-text-btn{border:0;background:none;color:inherit;font:inherit;font-weight:700;text-decoration:underline;
  padding:4px;cursor:pointer}

/* pickup row + search */
.pickup-row{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--surface-2);
  border:1px solid var(--hairline);border-radius:var(--r-md);margin-bottom:11px}
.pin-dot{color:var(--gold);flex:none;display:flex}
.pickup-lbl{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.pickup-addr{font-size:14.5px;font-weight:700;color:var(--paper);line-height:1.3;margin-top:2px}
.addr-search{display:flex;gap:8px;margin-bottom:18px}
.addr-search input{flex:1;background:var(--surface-2);border:1.5px solid var(--hairline);border-radius:var(--r-md);
  padding:13px 14px;color:var(--paper)}
.addr-search input:focus{outline:none;border-color:var(--gold)}
.addr-search button{width:50px;border:none;border-radius:var(--r-md);background:var(--gold);color:var(--gold-ink);
  display:grid;place-items:center;cursor:pointer}
.location-error{min-height:0;color:var(--err);font-size:12.5px;font-weight:600;margin:-9px 2px 10px}
.location-error:not(:empty){min-height:18px}

/* service cards */
.svc-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.svc{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  background:var(--surface-2);border:1px solid var(--hairline);border-radius:var(--r-lg);padding:18px 16px;
  cursor:pointer;text-align:left;transition:.14s}
.svc:active{transform:scale(.97)}
.svc-ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;margin-bottom:8px}
.svc.haul .svc-ic{background:rgba(212,165,55,.14);color:var(--gold)}
.svc.car .svc-ic{background:rgba(42,157,143,.16);color:var(--teal-bright)}
.svc-name{font-family:var(--display);font-size:19px;letter-spacing:.02em;text-transform:uppercase;color:var(--paper)}
.svc-sub{font-size:12px;color:var(--mute)}
.svc-tag{position:absolute;top:12px;right:12px;font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gold-ink);background:var(--gold);padding:3px 7px;border-radius:99px}

/* Labor-only full-width service card */
.svc.svc-full{
  flex-direction:row;align-items:center;gap:14px;width:100%;margin-top:10px;
}
.svc.svc-full .svc-ic{margin-bottom:0;flex:none}
.svc.svc-full .svc-full-txt{display:flex;flex-direction:column;gap:3px}
.svc.labor .svc-ic{background:rgba(99,138,243,.16);color:#638af3}

/* No height cap: a 230px scrollbox hid the bigger tiers behind an invisible
   macOS scrollbar — users thought the options didn't exist. The sheet's own
   scroller handles overflow on short phones. */
.tier-scroll{margin-bottom:12px}

/* finding spinner */
.finding-wrap{text-align:center;padding:26px 0 18px}
.finding-spinner{display:flex;gap:8px;justify-content:center;margin-bottom:20px}
.finding-spinner span{width:14px;height:14px;border-radius:50%;background:var(--gold);animation:bounce 1.2s ease-in-out infinite}
.finding-spinner span:nth-child(2){animation-delay:.18s}.finding-spinner span:nth-child(3){animation-delay:.36s}
@keyframes bounce{0%,80%,100%{transform:scale(.5);opacity:.4}40%{transform:scale(1);opacity:1}}
.finding-title{font-family:var(--display);font-size:24px;text-transform:uppercase;margin-bottom:6px}
.finding-sub{color:var(--mute);font-size:14px}

/* crew matched card */
.crew-card{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,var(--surface-2),var(--surface-3));
  border:1px solid var(--hairline);border-radius:var(--r-lg);padding:16px;margin-bottom:18px;animation:fade .35s ease}
.crew-avatar{width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold-deep));
  color:var(--gold-ink);display:grid;place-items:center;font-family:var(--display);font-size:26px;flex:none}
.crew-info{flex:1}
.crew-name{font-weight:800;font-size:16px}
.crew-meta{font-size:13px;color:var(--mute);display:flex;align-items:center;gap:5px;margin-top:2px}
.crew-meta .stars{color:var(--gold);display:inline-flex}
.crew-eta{text-align:center}
.crew-eta-n{font-family:var(--display);font-size:30px;color:var(--gold);line-height:.9}
.crew-eta-l{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}

/* crew live marker (tracking) */
.crew-divicon{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:var(--gold);color:var(--gold-ink);box-shadow:0 4px 14px var(--gold-glow);border:2px solid var(--paper);
  transition:none} /* rAF owns motion */

/* =================================================================
   UBER-LITERAL MONOCHROME UPGRADE — white sheet + drag + motion
================================================================= */

/* ── Sheet light tokens (never touch :root) ── */
.sheet{
  --s-bg:#fff;--s-ink:#111111;--s-mute:#6B6B6B;--s-line:#E5E5E5;--s-fill:#F6F6F6;
  --ui:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--s-bg);color:var(--s-ink);font-family:var(--ui);
  /* drag */
  touch-action:pan-y;overscroll-behavior:contain;overflow-y:hidden;
  max-height:88vh;max-height:88dvh; /* dvh: iOS toolbar was eating the bottom of the sheet */
  will-change:transform;transition:none;
  display:flex;flex-direction:column; /* handle fixed, scroller flexes — content taller than the sheet now scrolls instead of vanishing off-screen */
}
.sheet.snapping{transition:transform .42s cubic-bezier(.32,.72,0,1)}
.sheet.is-dragging{user-select:none;-webkit-user-select:none}

/* Handle — drag target */
.sheet .sheet-handle{background:#C5C5C5;opacity:1;cursor:grab;touch-action:none}
.sheet.is-dragging .sheet-handle{cursor:grabbing}

/* Inner scroll wrapper */
.sheet-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding-bottom:max(28px,env(safe-area-inset-bottom))}

/* Locate button rides --sheet-vh (set by snapTo) */
.locate-btn{bottom:calc(var(--sheet-vh,46vh) + 14px);transition:bottom .35s}

/* ── Section typography ── */
.sheet .sheet-h{font-family:var(--ui);font-size:20px;font-weight:700;letter-spacing:-.01em;
  text-transform:none;color:var(--s-ink);margin:2px 0 6px}
.sheet .sheet-hint{color:var(--s-mute)}
.sheet .sheet-note{color:var(--s-mute)}
.sheet .sheet-note a{color:var(--s-ink);font-weight:700;text-decoration:underline}
.sheet .sheet-text-btn{color:var(--s-ink)}
.sheet .opt-lbl{color:var(--s-mute)}

/* ── Pickup row ── */
.sheet .pickup-row{background:var(--s-fill);border-color:var(--s-line)}
.sheet .pickup-addr{color:var(--s-ink)}
.sheet .addr-search input{background:var(--s-fill);border-color:var(--s-line);color:var(--s-ink)}
.sheet .addr-search input::placeholder{color:var(--s-mute)}
.sheet .addr-search input:focus{border-color:var(--s-ink);outline:none}

/* ── Service cards ── */
.sheet .svc{background:var(--s-fill);border-color:var(--s-line)}
.sheet .svc-name{color:var(--s-ink)}
.sheet .svc-sub{color:var(--s-mute)}

/* ── Tier cards ── */
.sheet .tier{background:var(--s-fill);border-color:var(--s-line)}
.sheet .tier.sel{background:#EFEFEF;border-color:var(--s-ink);box-shadow:0 0 0 2px rgba(17,17,17,.12)}
.sheet .tier .tdesc{color:var(--s-mute)}
/* keep gold price number */
.sheet .tier .tnum{color:var(--gold)}

/* ── Option grid ── */
.sheet .opt{background:var(--s-fill);border-color:var(--s-line);color:var(--s-ink)}
.sheet .opt.sel{background:#EFEFEF;border-color:var(--s-ink);box-shadow:0 0 0 2px rgba(17,17,17,.12)}
.sheet .opt .oi{color:var(--s-mute)}
.sheet .opt.sel .oi{color:var(--s-ink)}
.sheet .opt .os{color:var(--s-mute)}

/* ── Inputs ── */
.sheet .field label{color:var(--s-mute)}
.sheet .field input,.sheet .field select,.sheet .field textarea{
  background:var(--s-fill);border-color:var(--s-line);color:var(--s-ink)}
.sheet .field input::placeholder,.sheet .field textarea::placeholder{color:var(--s-mute)}
.sheet .field input:focus,.sheet .field select:focus,.sheet .field textarea:focus{
  border-color:var(--s-ink);outline:none}

/* ── Buttons — ghost inside sheet uses light palette ── */
.sheet .btn.ghost{background:transparent;color:var(--s-ink);border:1.5px solid var(--s-line);box-shadow:none}

/* ── Finding panel ── */
.sheet .finding-title{font-family:var(--ui);font-weight:700;font-size:21px;text-transform:none;
  letter-spacing:-.01em;color:var(--s-ink)}
.sheet .finding-sub{color:var(--s-mute)}
.sheet .finding-spinner span{background:var(--s-ink)}

/* ── Offer / price panel ── */
.sheet .offer-veh{color:var(--s-mute)}
.sheet .offer-note{color:var(--s-mute)}
/* Keep Bebas+gold for the big number */
.sheet .quote-amt{font-family:var(--display);color:var(--gold)}

/* ── Crew card — flat white with slide-up ── */
.sheet .crew-card{
  background:var(--s-fill);
  border:1px solid var(--s-line);
  animation:cardSlide .38s cubic-bezier(.32,.72,0,1)
}
@keyframes cardSlide{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
.sheet .crew-name{color:var(--s-ink);font-size:17px}
.sheet .crew-meta{color:var(--s-mute)}
.sheet .crew-eta-l{color:var(--s-mute)}
/* Keep Bebas+gold for ETA number */
.sheet .crew-eta-n{font-family:var(--display);color:var(--gold)}

/* Plate chip */
.crew-plate{display:inline-flex;align-items:center;
  background:var(--s-line);color:var(--s-ink);
  font-size:11px;font-weight:700;letter-spacing:.07em;
  padding:3px 9px;border-radius:6px;margin-top:5px}

/* Crew action buttons */
.crew-actions{display:flex;gap:10px;margin:14px 0 6px}
.crew-action-btn{
  flex:1;display:flex;align-items:center;justify-content:center;gap:7px;
  padding:13px 10px;border-radius:14px;font-weight:700;font-size:14px;
  cursor:pointer;text-decoration:none;transition:transform .08s;
  border:1.5px solid transparent
}
.crew-action-btn:active{transform:scale(.95)}
.crew-action-btn.call{background:transparent;border-color:var(--gold);color:var(--gold)}
.crew-action-btn.msg{background:var(--s-fill);border-color:var(--s-line);color:var(--s-ink)}

/* ── Trip progress bar (track panel) ── */
.trip-strip{padding:4px 0 14px}
.trip-bar{height:4px;background:var(--s-line);border-radius:99px;overflow:hidden;margin-bottom:12px}
.trip-bar span{display:block;height:100%;width:8%;border-radius:99px;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold));transition:width .55s ease}
.trip-row{display:flex;justify-content:space-between;align-items:center}
#trip-stage{font-weight:700;font-size:15px;color:var(--s-ink)}
#trip-eta-big{font-family:var(--display);font-size:24px;color:var(--gold);line-height:1}

/* ── Timeline inside sheet ── */
.sheet .timeline li{color:var(--s-mute)}
.sheet .timeline li::before{border-color:var(--s-line);background:var(--s-fill)}
.sheet .timeline li::after{background:var(--s-line)}
.sheet .timeline li.done{color:var(--s-ink)}
.sheet .timeline li.done::before{background:var(--ok);border-color:var(--ok)}
.sheet .timeline li.now{color:var(--s-ink);font-weight:700}
.sheet .timeline li.now::before{background:var(--gold);border-color:var(--gold)}

/* ── Track status row ── */
.sheet .track-status{background:var(--s-fill);border-color:var(--s-line)}

/* ── Confirm / summary ── */
.sheet .summary{background:var(--s-fill);border-color:var(--s-line)}
.sheet .summary .srow{border-color:var(--s-line)}
.sheet .summary .srow .k{color:var(--s-mute)}
.sheet .summary .srow .v{color:var(--s-ink)}
.sheet .confirm h2{color:var(--s-ink)}
.sheet .confirm p{color:var(--s-mute)}

/* ── Skeleton shimmer — light variant ── */
.sheet .skel{
  background:linear-gradient(90deg,#EBEBEB 25%,#F5F5F5 50%,#EBEBEB 75%);
  background-size:200% 100%;animation:sk 1.3s infinite;border-radius:8px
}

/* ── Press states — snappier on touch ── */
.sheet .btn:not(:disabled):active{transform:scale(.96);transition:transform .08s}
.sheet .svc:active,.sheet .tier:active,.sheet .opt:active{transform:scale(.96);transition:transform .08s}
@media(hover:none){
  .sheet .btn:hover{transform:none}
  .sheet .svc:hover,.sheet .tier:hover,.sheet .opt:hover{transform:none}
}

/* ── Safe-area additions ── */
.trip-strip{padding-top:max(4px,env(safe-area-inset-top))}
.crew-actions{padding-bottom:max(0px,calc(env(safe-area-inset-bottom) - 10px))}

/* ── "(optional)" hint inside field labels ── */
.field label .lbl-opt{font-weight:400;text-transform:none;letter-spacing:0;opacity:.7}

/* =================================================================
   DESKTOP (≥861px) — dock the sheet as a fixed left panel.
   The phone peek/drag model made desktop feel broken: a full-width
   sheet you had to drag with a mouse. Here: fixed card, no drag,
   every option on screen. JS collapses peek→full at this width too.
================================================================= */
@media(min-width:861px){
  .sheet{
    left:24px;right:auto;bottom:16px;width:480px;
    border-radius:20px;border:1px solid #E5E5E5;
    max-height:calc(100dvh - 92px); /* clears the fixed header */
    box-shadow:0 18px 60px rgba(0,0,0,.35);
  }
  .sheet .sheet-handle{display:none}
  .sheet-scroll{scrollbar-width:thin;padding-bottom:10px}
  /* locate button no longer rides the sheet height — sheet is beside it */
  .locate-btn{bottom:24px}
  /* mouse hover affordance on choices */
  .sheet .tier:hover,.sheet .svc:hover,.sheet .opt:hover{border-color:var(--s-ink)}
  /* medium density: the whole haul panel fits an 800px-tall laptop */
  .sheet .sheet-h{font-size:19px;margin-top:0}
  .sheet .sheet-hint{margin-bottom:8px}
  .tier{padding:9px 14px;margin-bottom:8px}
  .tier .tnum{font-size:24px;min-width:56px}
  .tier .tname{font-size:16px}
  .tier .tdesc{font-size:12px}
  .field{margin-bottom:10px}
  .field input,.field select{padding:11px 12px}
  .opts{gap:9px}
  .opt{padding:9px 10px}
  .err{min-height:16px;margin-top:2px}
  .btn{padding:13px}
}

/* =================================================================
   SMALL PHONES (≤480px) — compact density so the full haul panel
   (5 tiers + haul field + add-ons + CTA) fits on screen at once,
   no inner scroll needed.
================================================================= */
@media(max-width:480px){
  .sheet{padding-left:16px;padding-right:16px}
  .sheet .sheet-handle{margin-bottom:8px}
  .sheet .sheet-h{font-size:18px;margin-top:0}
  .sheet .sheet-hint{font-size:12.5px;margin-bottom:10px}
  .tier{padding:10px 12px;margin-bottom:8px;gap:12px}
  .tier .tnum{font-size:23px;min-width:52px}
  .tier .tname{font-size:15.5px}
  .tier .tdesc{font-size:11.5px}
  .field{margin-bottom:10px}
  .field label{margin-bottom:5px}
  .field input,.field select{padding:11px 12px}
  .opts{gap:9px}
  .opt{padding:10px 8px;font-size:13px}
  .opt .oi{margin-bottom:4px}
  .err{min-height:16px;margin-top:4px}
  .btn{padding:14px}
  .sheet-scroll{padding-bottom:max(18px,env(safe-area-inset-bottom))}
}