/* === TrueMile — night-cab instrument panel, demo palette === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  /* palette lifted straight from the approved demo (truemile_demo.html) */
  --bg:#0f1419;
  --panel:#1a2129;
  --panel2:#212a34;
  --line:#2e3a46;
  --ink:#e8edf2;
  --muted:#8fa1b3;
  --amber:#f5a623;
  --amber-dim:#c78514;
  --green:#3ddc84;
  --red:#ff5c5c;
  --radius:14px;
  --tabbar-h:64px;
}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Barlow',sans-serif;
  background:var(--bg);
  color:var(--ink);
  min-height:100dvh;
  padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  background-image:
    radial-gradient(1200px 400px at 50% -200px, rgba(245,166,35,.06), transparent 70%),
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.006) 3px 4px);
}
::selection{background:var(--amber);color:#000}

/* --- top bar --- */
.topbar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  padding:calc(12px + env(safe-area-inset-top)) 16px 12px;
  background:rgba(15,20,25,.92);backdrop-filter:blur(12px);
}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{
  width:34px;height:34px;border-radius:9px;flex:none;
  background:
    linear-gradient(135deg, var(--amber) 0 55%, transparent 55%),
    repeating-linear-gradient(-45deg, var(--amber) 0 5px, #0f1419 5px 10px);
  box-shadow:0 0 18px rgba(245,166,35,.35);
}
.brand-name{
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:1.45rem;
  letter-spacing:.04em;line-height:1;
}
.brand-name em{font-style:normal;color:var(--amber)}
.brand-tag{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.account-btn{
  width:42px;height:42px;border-radius:50%;border:1.5px solid var(--line);
  background:var(--panel);color:var(--amber);cursor:pointer;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.1rem;
  transition:border-color .2s, box-shadow .2s;
}
.account-btn.signed-in{border-color:var(--amber);box-shadow:0 0 12px rgba(245,166,35,.25)}
.topbar-right{display:flex;align-items:center;gap:10px}
.pro-pill{
  height:34px;padding:0 14px;border-radius:99px;cursor:pointer;
  border:1.5px solid var(--amber);background:rgba(245,166,35,.12);color:var(--amber);
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.92rem;
  letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
  animation:pillGlow 2.6s ease-in-out infinite;
}
@keyframes pillGlow{0%,100%{box-shadow:0 0 4px rgba(245,166,35,.15)}50%{box-shadow:0 0 14px rgba(245,166,35,.45)}}
.pro-pill:active{background:var(--amber);color:#14100a}

/* hazard chevron divider — the signature */
.hazard-line{
  height:5px;
  background:repeating-linear-gradient(-45deg, var(--amber) 0 12px, #1a2129 12px 24px);
  opacity:.85;
}

/* --- screens --- */
main{max-width:520px;margin:0 auto;padding:18px 16px 32px}
.screen{display:none;animation:screenIn .3s ease}
.screen.active{display:block}
@keyframes screenIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* --- result card (costs) --- */
.result-card{
  background:linear-gradient(160deg, var(--panel2), var(--panel));
  border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 20px 18px;text-align:center;margin-bottom:22px;
  position:relative;overflow:hidden;
}
.result-card::before{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:repeating-linear-gradient(-45deg, var(--amber) 0 10px, transparent 10px 20px);
}
.result-label{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.result-big{
  font-family:'Barlow Condensed',sans-serif;font-weight:800;
  font-size:clamp(3.4rem,17vw,4.6rem);line-height:1.05;color:var(--amber);
  text-shadow:0 0 30px rgba(245,166,35,.35);
  font-variant-numeric:tabular-nums;
}
.result-big .pound{font-size:.5em;vertical-align:.45em;margin-right:2px;color:var(--amber-dim)}
.result-sub{font-size:.82rem;color:var(--muted);margin-top:2px}
.result-row{display:flex;gap:8px;margin-top:16px}
.mini-stat{flex:1;background:rgba(0,0,0,.25);border-radius:10px;padding:10px 6px}
.mini-val{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.25rem;font-variant-numeric:tabular-nums}
.mini-lab{font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:2px}

/* --- vehicle preset picker --- */
.preset-bar{margin-bottom:18px}
.preset-label{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.02rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:9px;
}
.preset-chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  flex:none;height:40px;padding:0 16px;border-radius:99px;cursor:pointer;
  border:1.5px solid var(--line);background:var(--panel);color:var(--muted);
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.95rem;
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  transition:border-color .15s,color .15s,background .15s;
}
.chip.active{
  border-color:var(--amber);background:rgba(245,166,35,.14);color:var(--amber);
  box-shadow:0 0 12px rgba(245,166,35,.2);
}
.chip.add{border-style:dashed;color:var(--amber)}
.btn-lock{
  width:100%;height:48px;border-radius:12px;cursor:pointer;
  border:1.5px dashed var(--line);background:rgba(245,166,35,.05);
  color:var(--muted);font-family:'Barlow',sans-serif;font-weight:600;font-size:.9rem;
  transition:border-color .2s;
}
.btn-lock strong{color:var(--amber)}
.btn-lock:active{border-color:var(--amber)}

/* --- forms --- */
.group{
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--panel);padding:16px 14px 6px;margin-bottom:16px;
}
.group legend{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.02rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--amber);
  padding:0 8px;margin-left:2px;
}
.group-note{color:var(--muted);font-size:.78rem;margin:-4px 2px 12px}
.field{display:block;margin-bottom:12px}
.field span{display:block;font-size:.82rem;font-weight:600;margin-bottom:6px}
.field small{color:var(--muted);font-weight:400;font-size:.74rem}
.field input{
  width:100%;height:52px;border-radius:10px;border:1.5px solid var(--line);
  background:#12181f;color:var(--ink);padding:0 14px;
  font-family:'Barlow',sans-serif;font-size:1.15rem;font-weight:600;
  font-variant-numeric:tabular-nums;
  transition:border-color .15s, box-shadow .15s;
}
.field input:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px rgba(245,166,35,.15)}
.field input::placeholder{color:#55657a;font-weight:400}
/* stop browser autofill turning fields white */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--ink);
  -webkit-box-shadow:0 0 0 1000px #12181f inset;
  box-shadow:0 0 0 1000px #12181f inset;
  caret-color:var(--ink);
}
input[type=date]{color-scheme:dark}

input[type=range]{
  width:100%;margin:6px 0 4px;accent-color:var(--amber);height:32px;
}
.amber{color:var(--amber)}
.suggest{font-size:.85rem;color:var(--muted);padding-bottom:10px;line-height:1.5}
.suggest strong{color:var(--ink)}

.btn-primary{
  width:100%;height:56px;border:none;border-radius:12px;cursor:pointer;
  background:var(--amber);color:#14100a;
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:1.2rem;
  letter-spacing:.08em;text-transform:uppercase;
  box-shadow:0 4px 20px rgba(245,166,35,.25);
  transition:transform .12s, box-shadow .2s, filter .2s;
}
.btn-primary:active{transform:scale(.98)}
.btn-primary:disabled{filter:grayscale(.7) brightness(.6);cursor:default}
.btn-ghost{
  width:100%;height:48px;margin-top:10px;border-radius:12px;cursor:pointer;
  background:transparent;border:1.5px solid var(--line);color:var(--muted);
  font-family:'Barlow',sans-serif;font-weight:600;font-size:.9rem;
  transition:border-color .2s,color .2s;
}
.btn-ghost:active{border-color:var(--amber);color:var(--ink)}
.btn-ghost.danger:active{border-color:var(--red);color:var(--red)}
.save-note{font-size:.8rem;color:var(--muted);text-align:center;margin-top:10px;min-height:1.2em}
.save-note.ok{color:var(--green)}
.foot-note{font-size:.78rem;color:var(--muted);line-height:1.6;margin-top:16px;padding:0 4px}

/* --- verdict card (quote) --- */
.verdict-card{
  border-radius:var(--radius);padding:26px 20px;text-align:center;margin-bottom:22px;
  border:1px solid var(--line);background:var(--panel);
  transition:background .3s, border-color .3s, box-shadow .3s;
}
.verdict-word{
  font-family:'Barlow Condensed',sans-serif;font-weight:800;
  font-size:clamp(2.2rem,11vw,3rem);letter-spacing:.06em;line-height:1;
  font-variant-numeric:tabular-nums;
}
.verdict-sub{font-size:.85rem;color:var(--muted);margin-top:6px}
.verdict-grid{display:flex;gap:8px;margin-top:18px}
.verdict-grid>div{flex:1;background:rgba(0,0,0,.28);border-radius:10px;padding:10px 4px}
.v-val{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.35rem;font-variant-numeric:tabular-nums}
.v-lab{font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:2px}
.verdict-card[data-verdict=none] .verdict-word{color:var(--amber)}
.verdict-card[data-verdict=good]{border-color:var(--green);box-shadow:0 0 34px rgba(61,220,132,.16);background:linear-gradient(160deg,#13251c,var(--panel))}
.verdict-card[data-verdict=good] .verdict-word{color:var(--green);text-shadow:0 0 24px rgba(61,220,132,.4)}
.verdict-card[data-verdict=thin]{border-color:var(--amber);box-shadow:0 0 34px rgba(245,166,35,.14);background:linear-gradient(160deg,#251e0f,var(--panel))}
.verdict-card[data-verdict=thin] .verdict-word{color:var(--amber);text-shadow:0 0 24px rgba(245,166,35,.4)}
.verdict-card[data-verdict=bad]{border-color:var(--red);box-shadow:0 0 34px rgba(255,92,92,.16);background:linear-gradient(160deg,#2a1513,var(--panel))}
.verdict-card[data-verdict=bad] .verdict-word{color:var(--red);text-shadow:0 0 24px rgba(255,92,92,.4)}

/* --- gate cards (jobs) --- */
.gate-card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 22px;text-align:center;
}
.gate-icon{font-size:2rem;margin-bottom:10px}
.gate-card h2{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:1.7rem;letter-spacing:.04em;text-transform:uppercase}
.gate-card p{color:var(--muted);font-size:.9rem;line-height:1.6;margin:10px 0 20px}
.gate-list{list-style:none;text-align:left;margin:16px auto 4px;max-width:280px}
.gate-list li{padding:7px 0 7px 26px;position:relative;font-size:.92rem}
.gate-list li::before{content:"\2713";position:absolute;left:0;color:var(--amber);font-weight:700}
.gate-trial{
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:2.6rem;color:var(--amber);
  text-transform:uppercase;letter-spacing:.04em;margin:14px 0 0;
  text-shadow:0 0 24px rgba(245,166,35,.3);
}
.gate-sub{color:var(--muted);font-size:.92rem;margin:2px 0 18px}

/* --- jobs (pro) --- */
.summary-strip{margin-bottom:16px}
.sum-card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 16px;
}
.sum-card.main{
  background:linear-gradient(160deg,var(--panel2),var(--panel));text-align:center;padding:18px;
  position:relative;overflow:hidden;
}
.sum-card.main::before{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:repeating-linear-gradient(-45deg,var(--amber) 0 10px,transparent 10px 20px);
}
.sum-lab{font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.sum-val{
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:2.6rem;
  font-variant-numeric:tabular-nums;line-height:1.15;
}
.sum-val.sm{font-size:1.5rem}
.sum-val.pos{color:var(--green)} .sum-val.neg{color:var(--red)}
.sum-sub{font-size:.78rem;color:var(--muted)}
.sum-pair{display:flex;gap:10px;margin-top:10px}
.sum-pair .sum-card{flex:1}

.job-list{margin-top:18px}
.job-row{
  display:flex;align-items:center;gap:12px;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:13px 14px;margin-bottom:9px;
}
.job-main{flex:1;min-width:0}
.job-cust{font-weight:600;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.job-meta{font-size:.75rem;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.job-profit{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.2rem;
  font-variant-numeric:tabular-nums;text-align:right;
}
.job-profit.pos{color:var(--green)} .job-profit.neg{color:var(--red)}
.job-del{
  width:34px;height:34px;flex:none;border-radius:8px;border:1px solid var(--line);
  background:transparent;color:var(--muted);cursor:pointer;font-size:.9rem;
}
.job-del:active{border-color:var(--red);color:var(--red)}
.empty-note{color:var(--muted);text-align:center;font-size:.88rem;margin-top:24px;line-height:1.6}

/* --- bottom tab bar --- */
.tabbar{
  position:fixed;bottom:0;left:0;right:0;z-index:30;
  height:calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  display:flex;background:rgba(26,33,41,.97);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
}
.tab{
  flex:1;border:none;background:transparent;color:var(--muted);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.82rem;
  letter-spacing:.12em;text-transform:uppercase;
  position:relative;transition:color .2s;
}
.tab svg{width:23px;height:23px;fill:currentColor}
.tab.active{color:var(--amber)}
.tab.active::before{
  content:"";position:absolute;top:0;left:25%;right:25%;height:3px;border-radius:0 0 4px 4px;
  background:var(--amber);box-shadow:0 2px 12px rgba(245,166,35,.5);
}

/* --- sheets --- */
.sheet-backdrop[hidden]{display:none}
.sheet-backdrop{
  position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.6);backdrop-filter:blur(3px);
  display:flex;align-items:flex-end;justify-content:center;
  animation:fade .2s ease;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet{
  width:100%;max-width:520px;background:var(--panel2);
  border-radius:20px 20px 0 0;border:1px solid var(--line);border-bottom:none;
  padding:14px 20px calc(26px + env(safe-area-inset-bottom));
  position:relative;animation:up .28s cubic-bezier(.2,.9,.3,1);
  max-height:88dvh;overflow-y:auto;
}
@keyframes up{from{transform:translateY(60px);opacity:.5}to{transform:none;opacity:1}}
.sheet-grab{width:44px;height:4px;border-radius:2px;background:var(--line);margin:0 auto 16px}
.sheet h2{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:1.5rem;letter-spacing:.04em;text-transform:uppercase;margin-bottom:4px}
.sheet-sub{color:var(--muted);font-size:.85rem;margin-bottom:16px}
.sheet-close{
  position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer;
}
.link-btn{
  background:none;border:none;padding:0;margin:-2px 0 12px;cursor:pointer;
  color:var(--amber);font-family:'Barlow',sans-serif;font-size:.85rem;font-weight:600;
  text-decoration:underline;text-underline-offset:3px;
}
.auth-msg{font-size:.84rem;min-height:1.3em;margin:4px 0 10px}
.auth-msg.err{color:var(--red)} .auth-msg.ok{color:var(--green)}
.acc-row{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:13px 2px;border-bottom:1px solid var(--line);font-size:.9rem;
  margin-bottom:2px;
}
.acc-row span{color:var(--muted)}
.acc-row strong{overflow:hidden;text-overflow:ellipsis}
#accountSheet .btn-primary{margin-top:16px}

/* --- pro upsell sheet --- */
.sheet.upsell{text-align:center;border-top:3px solid var(--amber)}
.sheet.upsell h2{font-size:1.65rem}
.upsell-star{font-size:2.4rem;margin:4px 0 8px;animation:starPop .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes starPop{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
.sheet.upsell .gate-list{margin:14px auto 4px}
.sheet.upsell .gate-price{margin:12px 0 16px}

/* --- toast --- */
.toast{
  position:fixed;left:50%;bottom:calc(var(--tabbar-h) + 18px + env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(20px);z-index:60;
  background:var(--ink);color:#111;font-weight:600;font-size:.88rem;
  padding:11px 20px;border-radius:99px;opacity:0;pointer-events:none;
  transition:opacity .25s, transform .25s;max-width:90vw;text-align:center;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media(min-width:560px){
  .brand-tag{font-size:.68rem}
  .sheet{border-radius:20px;margin-bottom:24px;border-bottom:1px solid var(--line)}
  .sheet-backdrop{align-items:center}
}