/* Trip Planner by LaneIQ — clean light SaaS theme. No frameworks. */
:root{
  --bg:#f5f5f7;        /* page background — Apple gray */
  --panel:#ffffff;     /* cards / rail / surfaces */
  --panel-2:#ffffff;   /* result cards */
  --surface-2:#f0f2f5; /* inputs / inset panels */
  --line:#e6e8ec;      /* borders */
  --text:#0a1018;      /* primary ink — LaneIQ brand black */
  --text-2:#5b6472;    /* muted */
  --text-3:#9aa1ad;    /* faint / hints */
  --accent:#2557D6;       /* brand blue */
  --accent-press:#1B45B0;
  --accent-soft:#EBF0FB;
  --green:#1f9d63;
  --amber:#caa12a;        /* medium-confidence — own token, survives the accent swap */
  --gray:#9aa1ad;
  --red:#d92d20;
  --radius:12px;
  --shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.10);
  --card-shadow:0 1px 2px rgba(10,16,24,.04),0 12px 40px -16px rgba(10,16,24,.12);
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --sans:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}   /* beat .field-row{display:flex} so destRow truly hides */
html,body{height:100%}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.hidden{display:none!important}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
em{font-style:normal;color:var(--text-3)}

/* ============ GATE ============ */
.gate{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:radial-gradient(1100px 700px at 70% 20%,#ffffff 0%,var(--bg) 60%)}
.gate-card{width:min(400px,calc(100vw - 48px));background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:42px 36px 34px;text-align:center;box-shadow:0 20px 60px rgba(16,24,40,.12)}
.brand-mark{margin-bottom:18px}
.gate-card h1{font-size:26px;font-weight:700;letter-spacing:-.02em}
.gate-sub{color:var(--accent);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin:4px 0 22px}
.gate-copy{color:var(--text-2);font-size:14px;margin-bottom:20px}
#gateKey{width:100%;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;color:var(--text);font-family:var(--mono);font-size:14px;letter-spacing:.06em;padding:13px 14px;text-align:center;outline:none;transition:border-color .15s,box-shadow .15s}
#gateKey:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
#gateBtn{width:100%;margin-top:12px;background:var(--accent);color:#fff;border:0;border-radius:10px;font-weight:600;font-size:14px;letter-spacing:.01em;padding:13px;cursor:pointer;transition:transform .12s,background .15s}
#gateBtn:hover{background:var(--accent-press)}
#gateBtn:active{transform:scale(.985)}
#gateBtn[disabled]{opacity:.55;cursor:wait}
.gate-err{min-height:38px;margin-top:14px;color:var(--red);font-size:13px}
.gate-err a{color:var(--accent)}

/* ============ SHELL ============ */
.shell{position:relative;height:100vh;height:100dvh}
/* floating glass panel over a full-bleed map */
.rail{position:fixed;top:0;left:0;z-index:10;display:flex;flex-direction:column;width:340px;max-width:340px;height:100vh;height:100dvh;overflow-y:auto;background:rgba(255,255,255,0.72);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-right:1px solid rgba(255,255,255,0.3);box-shadow:4px 0 24px rgba(0,0,0,0.06);scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.rail-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 8px}
.rail-title{font-size:19px;font-weight:700;letter-spacing:-.02em}
.rail-by{color:var(--accent);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin-left:8px}
.key-btn{background:none;border:1px solid var(--line);border-radius:8px;color:var(--text-3);width:32px;height:32px;display:grid;place-items:center;cursor:pointer;transition:color .15s,border-color .15s}
.key-btn:hover{color:var(--accent);border-color:var(--accent)}

/* ============ FORM ============ */
.plan-form{padding:4px 20px 14px;display:flex;flex-direction:column;gap:10px;border-bottom:1px solid var(--line)}
.seg{display:grid;grid-template-columns:1fr 1fr 1fr;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:3px;gap:3px}
.seg-btn{background:none;border:0;border-radius:8px;color:var(--text-2);font-family:var(--sans);font-size:12px;font-weight:600;padding:7px 0;cursor:pointer;transition:background .15s,color .15s}
.seg-btn.active{background:var(--accent-soft);color:var(--accent)}
.field label{display:block;color:var(--text-3);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin-bottom:5px}
.field-row{display:flex;gap:10px}
.field.grow{flex:1}
.field.state{width:92px}
.field input[type=text],.field select{width:100%;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;color:var(--text);font-family:var(--sans);font-size:14px;padding:9px 11px;outline:none;transition:border-color .15s,box-shadow .15s;appearance:none}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235b6472' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}
.field input:focus,.field select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
/* ---- city autocomplete dropdown ---- */
.ac-wrap{position:relative}
.ac-list{position:absolute;top:100%;left:0;right:0;margin-top:6px;z-index:60;background:var(--panel-2);border:1px solid var(--line);border-radius:11px;overflow:hidden;box-shadow:0 12px 32px rgba(16,24,40,.14)}
.ac-row{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;padding:8px 13px;cursor:pointer;border-bottom:1px solid var(--line)}
.ac-row:last-child{border-bottom:0}
.ac-row.active,.ac-row:hover{background:var(--accent-soft)}
.ac-row.active .ac-city{color:var(--accent)}
.ac-city{font-size:14px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-city b{color:var(--accent);font-weight:700}
.ac-row.active .ac-city b{color:var(--accent)}
.ac-mkt{font-family:var(--mono);font-size:10.5px;color:var(--text-3);white-space:nowrap;flex-shrink:0}
.ac-empty{padding:13px;font-size:12.5px;color:var(--text-3);text-align:center}

.dest-row{animation:slideIn .22s ease}
@keyframes slideIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.days-top{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:5px}
.days-val{color:var(--accent);font-size:18px;font-weight:700}
input[type=range]{width:100%;height:34px;background:transparent;-webkit-appearance:none;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(to right,var(--accent) 0%,var(--accent) var(--fill,60%),var(--line) var(--fill,60%))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--accent);border:4px solid var(--panel);box-shadow:0 0 0 1px var(--accent);margin-top:-8px}
input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:var(--line)}
input[type=range]::-moz-range-progress{height:6px;border-radius:3px;background:var(--accent)}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--accent);border:4px solid var(--panel);box-shadow:0 0 0 1px var(--accent)}
/* stops segmented control */
.stops-top{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:6px}
.stops-hint{color:var(--text-3);font-size:11px;font-weight:500;letter-spacing:0;text-transform:none}
/* stops — Option A: Auto pill + slider */
.stops-ctl{display:flex;align-items:center;gap:12px}
.auto-pill{flex-shrink:0;background:none;border:1px solid var(--line);border-radius:9px;color:var(--text-2);font-family:var(--sans);font-size:12px;font-weight:600;padding:7px 13px;cursor:pointer;transition:all .15s}
.auto-pill.active{background:var(--accent-soft);border-color:var(--accent-soft);color:var(--accent)}
#stopsRange{flex:1;min-width:0}
#stopsRange.dimmed{opacity:.4}
.stops-val{color:var(--accent);font-size:15px;font-weight:700;min-width:60px;text-align:right}
/* leg-length dual-range slider */
.lr-top{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px}
.lr-val{color:var(--accent);font-size:14px;font-weight:600}
.lr-track{position:relative;height:24px}
.lr-track::before{content:"";position:absolute;left:0;right:0;top:9px;height:6px;border-radius:3px;background:var(--line)}
.lr-fill{position:absolute;top:9px;height:6px;border-radius:3px;background:var(--accent);pointer-events:none;z-index:1}
.lr-track input[type=range]{position:absolute;left:0;top:0;width:100%;height:24px;margin:0;-webkit-appearance:none;background:none;pointer-events:none;z-index:2}
.lr-track input[type=range]::-webkit-slider-runnable-track{height:6px;background:transparent}
.lr-track input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:22px;height:22px;border-radius:50%;background:var(--accent);border:4px solid var(--panel);box-shadow:0 0 0 1px var(--accent);margin-top:-8px;cursor:pointer}
.lr-track input[type=range]::-moz-range-track{height:6px;background:transparent}
.lr-track input[type=range]::-moz-range-thumb{pointer-events:auto;width:14px;height:14px;border-radius:50%;background:var(--accent);border:4px solid var(--panel);box-shadow:0 0 0 1px var(--accent);cursor:pointer}
/* market-knowledge direction tag (NOT data-derived — distinct from the confidence dots) */
.dir-tag{display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:1px 6px;border-radius:4px;border:1px solid;margin-left:7px;vertical-align:1px;cursor:help}
.dir-headhaul{color:#1f9d63;border-color:#bfe3d0}
.dir-backhaul{color:#2563eb;border-color:#c7d6f5}
.dir-balanced{color:var(--text-3);border-color:var(--line)}

/* ---- 4-segment mode toggle (adds Build) ---- */
.seg4{grid-template-columns:repeat(4,1fr)}
.seg4 .seg-btn{font-size:12px;padding:9px 2px}

/* ---- Build My Own: stop-list builder ---- */
.build-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px}
#stopList{display:flex;flex-direction:column;gap:8px}
.stop-row{display:flex;align-items:center;gap:8px}
.stop-num{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-3);width:46px;flex-shrink:0}
.stop-row .field.grow{flex:1}
.stop-state{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;color:var(--text);font-family:var(--sans);font-size:14px;padding:11px 6px;outline:none;appearance:none;width:62px;flex-shrink:0}
.stop-state:focus{border-color:var(--accent)}
.stop-rm{background:none;border:0;color:var(--text-3);font-size:20px;line-height:1;cursor:pointer;width:22px;flex-shrink:0;transition:color .15s}
.stop-rm:hover{color:var(--red)}
.add-stop{margin-top:10px;width:100%;background:var(--surface-2);border:1px dashed var(--line);border-radius:10px;color:var(--text-2);font-family:var(--sans);font-size:13px;font-weight:600;padding:11px;cursor:pointer;transition:all .15s}
.add-stop:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.add-stop:disabled{opacity:.4;cursor:not-allowed}
.return-toggle{display:flex;align-items:center;gap:9px;margin-top:13px;font-size:13px;color:var(--text-2);cursor:pointer}
.return-toggle input{accent-color:var(--accent);width:16px;height:16px;cursor:pointer}

/* ---- no-data honesty ---- */
.dot.nodata{background:transparent;border:1.5px solid var(--gray);width:8px;height:8px}
.leg-nodata{opacity:.9}
.leg-money .nodata{font-size:11.5px;color:var(--text-3);font-style:italic;white-space:nowrap}
.card-unpriced{font-family:var(--mono);font-size:11px;color:var(--amber);margin-top:5px}
.mchip.nodata{color:var(--text-3);border-color:var(--gray);border-style:dashed}
.chips{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.chip{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;color:var(--text-2);font-family:var(--sans);font-size:13px;font-weight:600;padding:9px 0;cursor:pointer;transition:all .15s}
.chip:hover{border-color:var(--text-3)}
.chip.active{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.plan-btn{background:var(--accent);color:#fff;border:0;border-radius:14px;font-family:var(--sans);font-weight:600;font-size:14px;letter-spacing:.01em;padding:12px;cursor:pointer;transition:transform .12s,background .15s,box-shadow .2s;box-shadow:0 1px 2px rgba(0,113,227,.18)}
.plan-btn:hover{background:var(--accent-press);box-shadow:0 6px 18px -6px rgba(0,113,227,.5)}
.plan-btn:active{transform:scale(.985)}
.plan-btn[disabled]{opacity:.55;cursor:wait;box-shadow:none}

/* ============ LOADING ============ */
.loading{padding:34px 24px;text-align:center;color:var(--text-2);font-size:14px}
.road{position:relative;height:30px;margin:0 12px 10px;border-bottom:2px dashed var(--line)}
.truck{position:absolute;bottom:1px;left:0;animation:drive 2.1s linear infinite}
@keyframes drive{0%{left:-12%}100%{left:104%}}

/* ============ RESULTS ============ */
.results{padding:14px 20px 12px;display:flex;flex-direction:column;gap:12px;flex:1}
/* negotiate-don't-refuse banner */
.neg-pill{display:flex;gap:9px;align-items:flex-start;border-radius:10px;padding:9px 12px;font-size:12px;line-height:1.4;color:var(--text-2)}
.neg-pill .dot{margin-top:5px;flex-shrink:0}
.neg-pill.time,.neg-pill.leg_range{background:var(--accent-soft);border:1px solid #cfe5fc}
.neg-pill.data{background:#eef0f3;border:1px solid var(--line)}
/* equipment-honesty notice */
.eq-notice{display:flex;gap:10px;align-items:flex-start;background:var(--accent-soft);border:1px solid #cfe5fc;border-radius:11px;padding:11px 13px;font-size:12.5px;line-height:1.4;color:var(--text)}
.eq-notice svg{flex-shrink:0;margin-top:1px}
.eq-notice b{color:var(--accent);font-weight:600}
.res-head{color:var(--text-3);font-size:12px;font-weight:600;display:flex;justify-content:space-between;align-items:baseline}
.res-head .mono{color:var(--text-3)}
.card{background:var(--panel-2);border:1px solid transparent;border-radius:14px;padding:18px;cursor:pointer;box-shadow:var(--card-shadow);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;animation:cardIn .3s ease backwards}
.card:nth-child(2){animation-delay:.06s}.card:nth-child(3){animation-delay:.12s}.card:nth-child(4){animation-delay:.18s}
@keyframes cardIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.card:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(10,16,24,.05),0 22px 50px -20px rgba(10,16,24,.18)}
.card.sel{border-color:var(--accent);background:var(--panel-2)}
/* alternates collapse to clean tap-list rows; the selected winner keeps the full hero + legs */
.card:not(.sel){display:flex;align-items:center;gap:12px;padding:13px 16px;box-shadow:0 1px 2px rgba(10,16,24,.04),0 8px 22px -16px rgba(10,16,24,.12)}
.card:not(.sel) .card-top{order:0;flex:1;min-width:0;margin:0}
.card:not(.sel) .card-hero{order:1}
.card:not(.sel) .card-net{font-size:16px;font-weight:600;letter-spacing:-.01em}
.card:not(.sel) .card-perday,
.card:not(.sel) .card-sub,
.card:not(.sel) .card-secondary,
.card:not(.sel) .card-floor,
.card:not(.sel) .card-unpriced{display:none}
.card:not(.sel)::after{content:"\203A";order:2;color:var(--text-3);font-size:20px;font-weight:400;line-height:1;flex-shrink:0;margin-left:2px}
.card-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.card-label{font-size:14px;font-weight:600;color:var(--text)}
.conf{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;color:var(--text-2);white-space:nowrap}
.conf:has(.dot.high){background:#e7f5ee;color:#1f9d63}
.conf:has(.dot.medium){background:#fbf2e3;color:#b5871d}
.conf:has(.dot.low){background:#eef0f3;color:#5b6472}
.dot{width:8px;height:8px;border-radius:50%}
.dot.high{background:var(--green)}.dot.medium{background:var(--amber)}.dot.low{background:var(--gray)}
.card-hero{display:flex;align-items:baseline;gap:10px;margin-top:2px}
.card-net{font-family:var(--sans);font-size:38px;font-weight:600;color:var(--accent);letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.card-perday{font-family:var(--sans);font-size:16px;font-weight:500;color:var(--text-2);font-variant-numeric:tabular-nums}
.card-sub{font-size:11px;color:var(--text-3);margin-top:5px;letter-spacing:.01em}
.card-secondary{font-family:var(--mono);font-size:11.5px;color:var(--text-3);margin-top:8px;line-height:1.5}
.card-floor{font-family:var(--mono);font-size:11.5px;color:var(--text-3);margin-top:4px}
/* leg list */
.legs{margin-top:14px;border-top:1px solid var(--line);display:flex;flex-direction:column}
.leg{display:grid;grid-template-columns:8px 1fr auto auto;gap:10px;align-items:center;font-size:13px;padding:11px 4px;margin:0 -4px;border-radius:6px;cursor:pointer;transition:background .15s;animation:legIn .25s ease backwards}
.leg + .leg{border-top:1px solid var(--line)}
.leg:nth-child(1){animation-delay:.0s}.leg:nth-child(2){animation-delay:.05s}.leg:nth-child(3){animation-delay:.1s}.leg:nth-child(4){animation-delay:.15s}.leg:nth-child(5){animation-delay:.2s}
@keyframes legIn{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
.leg .dot{width:7px;height:7px}
.leg-lane{color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.leg-lane b{font-weight:600}
.leg-miles{color:var(--text-3);font-family:var(--mono);font-size:12px;white-space:nowrap}
.leg-net{font-family:var(--mono);font-size:14px;font-weight:600;color:var(--text);text-align:right}
.leg-net.nodata{color:var(--text-3);font-weight:400;font-style:italic}
.leg:hover{background:rgba(37,87,214,.04)}
.leg.leg-hl,.leg.leg-hl:hover{background:var(--accent-soft)}
.mchip.leg-detail{font-size:12.5px;padding:5px 10px}
.legs-cite{margin-top:10px;padding-top:9px;border-top:1px solid var(--line);color:var(--text-3);font-size:10.5px;font-family:var(--mono)}

/* empty + error states */
.state-card{background:var(--panel-2);border:1px dashed var(--line);border-radius:var(--radius);padding:28px 22px;text-align:center;animation:cardIn .3s ease}
.state-card .glyph{margin-bottom:12px;opacity:.9}
.state-card h3{font-size:15px;font-weight:600;margin-bottom:7px}
.state-card p{color:var(--text-2);font-size:13px}
.state-card.err{border-color:rgba(248,113,113,.35)}
.state-card.err h3{color:var(--red)}

/* ============ MAP STAGE ============ */
.stage{position:fixed;inset:0;z-index:0;background:var(--bg)}
#map{position:absolute;inset:0}
.map-empty{position:absolute;inset:0;display:grid;place-items:center;color:var(--text-3);font-size:14px;pointer-events:none;z-index:2}
.total-chip{position:fixed;top:20px;right:20px;z-index:11;background:rgba(255,255,255,0.72);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,0.5);border-radius:14px;padding:11px 16px 10px;text-align:right;min-width:160px;box-shadow:0 4px 24px rgba(0,0,0,0.08)}
.tc-label{display:block;color:var(--text-3);font-size:10px;font-weight:700;letter-spacing:.14em}
.tc-num{display:block;font-family:var(--sans);font-size:28px;font-weight:600;color:var(--accent);letter-spacing:-.01em;line-height:1.1;font-variant-numeric:tabular-nums}
.tc-sub{display:block;color:var(--text-2);font-size:11px;margin-top:2px}
/* map $ chips (OverlayView) */
.mchip{position:absolute;transform:translate(-50%,-130%);background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:3px 8px;font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--accent);white-space:nowrap;box-shadow:0 1px 3px rgba(16,24,40,.12);animation:chipDrop .3s cubic-bezier(.2,1.6,.4,1)}
.mchip .city{color:var(--text-2);font-family:var(--sans);font-weight:500;margin-right:5px}
.mchip.start{color:var(--text);border-color:var(--accent)}
@keyframes chipDrop{from{opacity:0;transform:translate(-50%,-180%)}to{opacity:1;transform:translate(-50%,-130%)}}

/* ============ MOBILE ============ */
@media (max-width:1023px){
  /* map stays full-bleed (fixed inset:0); glass panel spans full width over it */
  .rail{width:100%;max-width:100%;border-right:0;box-shadow:0 4px 24px rgba(0,0,0,.06)}
  .total-chip{top:12px;right:12px;padding:9px 14px;min-width:140px}
  .tc-num{font-size:24px}
  .card{padding:16px}
  .card:not(.sel){padding:12px 14px}
  .card-net{font-size:34px}
  .card:not(.sel) .card-net{font-size:16px}
}