/* ==========================================================================
   EXPRESS Rate Engine — follows the "Midnight projection room" site theme
   ========================================================================== */
:root {
  --color-carbon-vellum: #fcfcfc;
  --color-obsidian: #0a0a13;
  --color-void: #040407;
  --color-graphite: #08080c;
  --color-smoke: #757580;
  --color-ash: #a3a3b3;
  --color-charcoal: #2a2a32;
  --color-iris-glow: #6199f6;
  --color-twilight: #4f4f80;
  --color-specter-lilac: #dedfee;
  --surface-card-halo: #181826;

  --c-van: #6199f6;
  --c-small: #a48bff;
  --c-large: #4fd8c4;

  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --radius-cards: 10px;
  --radius-feature: 24px;
  --radius-pill: 100px;
  --halo: inset 0 0 0 1px var(--color-twilight), 0 0 60px rgba(79, 79, 128, 0.15);
  --line: rgba(222, 223, 238, 0.09);
  --line-strong: rgba(222, 223, 238, 0.16);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --announce-h: 36px;
  --nav-h: 68px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font-sans);
  font-feature-settings: "ss01" on, "cv11" on;
  font-size: 15px;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--color-carbon-vellum);
  background-color: var(--color-obsidian);
  background-image:
    radial-gradient(ellipse 80% 60% at 50% 110%, #000b35 0%, transparent 60%),
    linear-gradient(195deg, #0a0010 0%, #02000a 45%, #0c1d32 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input { font: inherit; color: inherit; }
fieldset { border: 0; min-width: 0; }
.mono { font-family: var(--font-mono); }
:focus-visible { outline: 2px solid var(--color-iris-glow); outline-offset: 3px; border-radius: 6px; }
::selection { background: rgba(97, 153, 246, .35); }

.spotlight {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(600px circle at var(--mx, 30%) var(--my, 20%), rgba(97, 153, 246, .07), transparent 60%);
}
.grain {
  position: fixed; inset: 0; z-index: 2000; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes grain { 0%,100%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-1%)} 80%{transform:translate(3%,3%)} }

.live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--color-iris-glow);
  box-shadow: 0 0 0 0 rgba(97,153,246,.7); animation: livepulse 1.8s infinite; flex: none;
}
@keyframes livepulse { 0%{box-shadow:0 0 0 0 rgba(97,153,246,.7)} 70%{box-shadow:0 0 0 8px rgba(97,153,246,0)} 100%{box-shadow:0 0 0 0 rgba(97,153,246,0)} }

/* ---------- Announce + Nav ---------- */
.announce {
  position: relative; z-index: 5; height: var(--announce-h);
  display: flex; align-items: center; justify-content: center; gap: 14px;
  background: linear-gradient(90deg, #0d1a4a 0%, #1f1f55 50%, #0d1a4a 100%);
  font-size: 12.5px; color: var(--color-specter-lilac); padding: 0 16px; white-space: nowrap; overflow: hidden;
}
.announce-tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; color: #fff; }
.announce-clock { font-size: 11.5px; color: var(--color-ash); }

.nav {
  position: relative; z-index: 5; height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 clamp(16px, 3vw, 32px);
  border-bottom: 1px solid var(--line);
  background: rgba(10,10,19,.55); backdrop-filter: blur(14px);
}
.brand img { height: 34px; width: auto; }
.nav-left { display: flex; align-items: center; gap: 16px; }
.nav-back {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 9px 12px;
  border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px var(--line-strong);
  font-size: 13px; color: var(--color-carbon-vellum);
  transition: background-color .25s var(--ease), color .25s, box-shadow .25s;
}
.nav-back i { font-size: 15px; transition: transform .3s var(--ease); }
.nav-back:hover { background: var(--color-carbon-vellum); color: var(--color-obsidian); box-shadow: none; }
.nav-back:hover i { transform: translateX(-3px); }
.nav-mid { display: flex; gap: 10px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-ash); }
.eyebrow-inline { color: var(--color-iris-glow); }
.sep { color: var(--color-twilight); }
.stat-pill {
  display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px;
  border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px var(--line-strong);
  font-size: 12px; color: var(--color-ash); background: rgba(24,24,38,.6);
}
.stat-pill b { color: #fff; font-weight: 700; }

/* ---------- App layout ---------- */
.app {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(380px, 460px) 1fr;
  gap: 20px; padding: 20px clamp(16px, 2vw, 24px);
  height: calc(100vh - var(--announce-h) - var(--nav-h));
  min-height: 640px;
}

/* ---------- Panel ---------- */
.panel {
  position: relative; border-radius: var(--radius-feature);
  background: linear-gradient(180deg, rgba(24,24,38,.72), rgba(10,10,19,.78));
  box-shadow: var(--halo); overflow: hidden; backdrop-filter: blur(10px);
}
.panel-scroll { height: 100%; overflow-y: auto; padding: 28px 26px 24px; scrollbar-width: thin; scrollbar-color: var(--color-charcoal) transparent; }
.panel-head { margin-bottom: 22px; }
.eyebrow { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-iris-glow); margin-bottom: 14px; }
h1 { font-size: clamp(32px, 3vw, 40px); font-weight: 400; line-height: 1; letter-spacing: -0.045em; }
.glow-text { background: linear-gradient(90deg, #fff 0%, var(--color-iris-glow) 60%, #9db9ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lede { margin-top: 12px; color: var(--color-ash); font-size: 15px; }

.block { margin-bottom: 20px; }
.block-label { display: flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-ash); margin-bottom: 10px; width: 100%; }
.block-label span { color: var(--color-iris-glow); }
.block-label::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.sub-label { font-size: 12px; color: var(--color-ash); margin: 14px 0 8px; }

/* fields */
.field {
  position: relative; border-radius: 14px; background: rgba(4,4,7,.55);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: box-shadow .25s var(--ease), background .25s var(--ease);
  padding: 9px 14px 9px;
}
.field:focus-within { box-shadow: inset 0 0 0 1px var(--color-iris-glow), 0 0 0 4px rgba(97,153,246,.12); background: rgba(4,4,7,.8); }
.field label { display: block; font-size: 10.5px; font-family: var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--color-smoke); }
.field input { width: 100%; background: none; border: 0; outline: none; font-size: 16px; padding: 2px 0 0; color: #fff; }
.field input::placeholder { color: #4b4b58; }
.field .resolved { display: block; font-size: 12px; color: var(--color-iris-glow); min-height: 0; max-height: 0; overflow: hidden; transition: max-height .3s var(--ease), margin .3s; }
.field.ok .resolved { max-height: 20px; margin-top: 2px; }
.field.err .resolved { max-height: 20px; margin-top: 2px; color: #ff8a8a; }
.field.err { box-shadow: inset 0 0 0 1px rgba(255,120,120,.55); }
.field-state { position: absolute; right: 12px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; }
.field.loading .field-state { border: 2px solid rgba(97,153,246,.25); border-top-color: var(--color-iris-glow); border-radius: 50%; animation: spin .7s linear infinite; }
.field.ok .field-state::before { content: "\2713"; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(97,153,246,.18); color: var(--color-iris-glow); font-size: 11px; font-weight: 700; }
@keyframes spin { to { transform: rotate(360deg); } }

.lane { display: grid; grid-template-columns: 22px 1fr 40px; gap: 10px; align-items: stretch; }
.lane-rail { display: flex; flex-direction: column; align-items: center; padding: 16px 0; }
.pin { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-size: 11px; font-weight: 700; flex: none; }
.pin-a { background: var(--color-iris-glow); color: #04122e; box-shadow: 0 0 16px rgba(97,153,246,.6); }
.pin-b { background: #fff; color: var(--color-obsidian); box-shadow: 0 0 16px rgba(255,255,255,.35); }
.rail-line { flex: 1; width: 2px; margin: 4px 0; background: repeating-linear-gradient(to bottom, var(--color-twilight) 0 4px, transparent 4px 8px); background-size: 2px 16px; animation: rail 1s linear infinite; }
@keyframes rail { to { background-position: 0 16px; } }
.lane-fields { display: grid; gap: 8px; }
.swap { align-self: center; width: 40px; height: 40px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-strong); display: grid; place-items: center; font-size: 17px; color: var(--color-ash); transition: all .3s var(--ease); }
.swap:hover { color: #fff; box-shadow: inset 0 0 0 1px var(--color-iris-glow); transform: rotate(180deg); }

/* truck cards */
.trucks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.truck {
  position: relative; text-align: left; border-radius: 14px; padding: 10px 10px 11px;
  background: rgba(4,4,7,.55); box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s;
  overflow: hidden;
}
.truck::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120px circle at 50% 0%, var(--tc), transparent 70%); opacity: 0; transition: opacity .3s; }
.truck:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--color-twilight); }
.truck[aria-checked="true"] { box-shadow: inset 0 0 0 1.5px var(--tc), 0 10px 30px -12px var(--tc); background: rgba(24,24,38,.9); }
.truck[aria-checked="true"]::before { opacity: .22; }
.truck .veh { position: relative; height: 54px; margin: -2px -4px 8px; }
.truck .veh img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 6px 8px rgba(0,0,0,.55)); transition: transform .5s var(--ease); }
.truck[aria-checked="true"] .veh img { transform: translateX(3px) scale(1.04); }
.truck .t-name { position: relative; font-size: 12.5px; font-weight: 500; line-height: 1.15; }
.truck .t-meta { position: relative; display: block; margin-top: 4px; font-family: var(--font-mono); font-size: 10px; color: var(--color-smoke); letter-spacing: .02em; }
.truck .t-near { position: absolute; z-index: 2; top: 6px; right: 6px; font-family: var(--font-mono); font-size: 9.5px; color: var(--tc); background: rgba(10,10,19,.78); padding: 2px 6px; border-radius: 6px; opacity: 0; transition: opacity .3s; }
.truck .t-near.show { opacity: 1; }

/* weight */
.field-weight .suffix { position: absolute; right: 14px; bottom: 12px; font-size: 11px; color: var(--color-smoke); }
.capacity { margin-top: 10px; }
.cap-bar { height: 5px; border-radius: 4px; background: rgba(222,223,238,.07); overflow: hidden; }
.cap-bar span { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, var(--color-twilight), var(--color-iris-glow)); transition: width .6s var(--ease), background .3s; }
.capacity.over .cap-bar span { background: linear-gradient(90deg, #a84b4b, #ff8a8a); }
.cap-text { margin-top: 6px; font-size: 10.5px; color: var(--color-smoke); display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.capacity.over .cap-text { color: #ff9c9c; }
.cap-text button { color: var(--color-iris-glow); text-decoration: underline; text-underline-offset: 2px; font-family: var(--font-mono); font-size: 10.5px; }

/* time frame segments */
.segments { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: var(--radius-pill); background: rgba(4,4,7,.55); box-shadow: inset 0 0 0 1px var(--line-strong); position: relative; }
.seg { position: relative; z-index: 1; padding: 9px 4px; border-radius: var(--radius-pill); font-size: 12.5px; color: var(--color-ash); transition: color .25s; white-space: nowrap; }
.seg[aria-checked="true"] { color: var(--color-obsidian); font-weight: 500; }
.seg-thumb { position: absolute; z-index: 0; top: 4px; bottom: 4px; border-radius: var(--radius-pill); background: var(--color-carbon-vellum); transition: left .4s var(--ease), width .4s var(--ease), opacity .3s; opacity: 0; }
.field-date { margin-top: 8px; }
.field-date input { color-scheme: dark; }

.form-error { min-height: 18px; font-size: 12.5px; color: #ff9c9c; margin: -6px 0 8px; }

/* buttons */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 26px; border-radius: var(--radius-pill); font-size: 14px; font-weight: 500; line-height: 1; white-space: nowrap; transition: background-color .25s var(--ease), color .25s, box-shadow .25s, transform .25s var(--ease); overflow: hidden; }
.btn-primary { background: var(--color-carbon-vellum); color: var(--color-obsidian); }
.btn-primary:hover { background: var(--color-specter-lilac); }
.btn-ghost { box-shadow: inset 0 0 0 1px var(--line-strong); color: #fff; font-weight: 400; }
.btn-ghost:hover { box-shadow: inset 0 0 0 1px var(--color-carbon-vellum); }
.btn:active { transform: scale(.98); }
.btn-calc { width: 100%; padding: 17px; font-size: 15px; }
.btn-calc i { transition: transform .3s var(--ease); }
.btn-calc:hover i { transform: translateX(4px); }
.btn-scan { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(97,153,246,.45), transparent); transform: translateX(-100%); }
.btn-calc.busy .btn-scan { animation: scan 1s var(--ease) infinite; }
.btn-calc.busy { pointer-events: none; }
@keyframes scan { to { transform: translateX(100%); } }

.fine-print { margin-top: 18px; font-size: 11.5px; color: var(--color-smoke); line-height: 1.5; }

/* ---------- Quote card ---------- */
.quote { margin-top: 22px; border-radius: 20px; overflow: hidden; background: linear-gradient(180deg, #121224, #0a0a13); box-shadow: inset 0 0 0 1px var(--color-twilight), 0 30px 80px -30px rgba(97,153,246,.35); animation: rise .7s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(18px) scale(.98); } }
.q-hero { position: relative; height: 150px; overflow: hidden; }
.q-hero img.photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.75) brightness(.55); transform: scale(1.06); animation: kb 8s ease-out both; }
@keyframes kb { to { transform: scale(1); } }
.q-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,19,.1) 0%, rgba(18,18,36,.95) 100%), linear-gradient(90deg, rgba(10,10,19,.85), transparent 70%); }
.q-hero-inner { position: absolute; inset: 0; z-index: 1; padding: 16px 18px; display: flex; flex-direction: column; justify-content: space-between; }
.q-top { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; color: var(--color-ash); text-transform: uppercase; }
.q-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--radius-pill); background: rgba(10,10,19,.6); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--tc); }
.q-veh { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.q-veh .q-vname { font-size: 20px; letter-spacing: -0.02em; }
.q-veh .q-vsub { font-size: 12px; color: var(--color-ash); }
.q-veh .q-veh-img { flex: none; height: 82px; width: auto; max-width: 52%; object-fit: contain; object-position: right bottom; margin: 0 -6px -8px 0; filter: drop-shadow(0 8px 14px rgba(0,0,0,.65)); animation: drive-in .9s var(--ease) both .15s; }
@keyframes drive-in { from { transform: translateX(-60px); opacity: 0; } }

.q-total { padding: 18px 18px 6px; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.q-total .lbl { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; color: var(--color-iris-glow); text-transform: uppercase; }
.q-total .amt { font-size: 50px; letter-spacing: -0.05em; line-height: 1; margin-top: 6px; font-variant-numeric: tabular-nums; }
.q-total .amt sup { font-size: 22px; vertical-align: top; margin-right: 2px; color: var(--color-ash); position: relative; top: 6px; }
.q-total .per { text-align: right; font-size: 12px; color: var(--color-ash); }
.q-total .per b { display: block; font-size: 16px; color: #fff; font-weight: 500; font-variant-numeric: tabular-nums; }

.q-lane { margin: 12px 18px; padding: 12px 14px; border-radius: 14px; background: rgba(4,4,7,.6); box-shadow: inset 0 0 0 1px var(--line); display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; }
.q-lane .end { min-width: 0; }
.q-lane .end:last-child { text-align: right; }
.q-lane .k { font-family: var(--font-mono); font-size: 10px; color: var(--color-smoke); letter-spacing: .06em; }
.q-lane .v { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-lane .mid { display: flex; flex-direction: column; align-items: center; font-family: var(--font-mono); font-size: 10.5px; color: var(--color-iris-glow); }
.q-lane .mid .track { width: 70px; height: 2px; margin: 5px 0; background: linear-gradient(90deg, var(--color-iris-glow), #fff); position: relative; border-radius: 2px; }
.q-lane .mid .track::after { content: ""; position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px var(--color-iris-glow); animation: travel 2.2s var(--ease) infinite; }
@keyframes travel { from { left: 0; } to { left: calc(100% - 8px); } }

.q-rows { padding: 4px 18px 6px; }
.q-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: 13.5px; animation: rowin .5s var(--ease) both; }
.q-row:last-child { border-bottom: 0; }
.q-row .k { color: var(--color-ash); display: flex; align-items: center; gap: 8px; }
.q-row .k i { color: var(--color-twilight); font-size: 15px; }
.q-row .v { font-variant-numeric: tabular-nums; text-align: right; }
.q-row.total { border-top: 1px solid var(--line-strong); border-bottom: 0; margin-top: 4px; padding-top: 12px; font-weight: 500; }
.q-row.total .v { color: var(--color-iris-glow); font-size: 16px; }
.q-row .muted { color: var(--color-smoke); font-size: 12px; }
@keyframes rowin { from { opacity: 0; transform: translateX(-8px); } }

.q-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 8px 18px 4px; }
.q-meta > div { border-radius: 12px; background: rgba(4,4,7,.6); box-shadow: inset 0 0 0 1px var(--line); padding: 10px; }
.q-meta .k { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .06em; color: var(--color-smoke); text-transform: uppercase; }
.q-meta .v { font-size: 13px; margin-top: 3px; }
.q-warn { margin: 10px 18px 0; padding: 10px 12px; border-radius: 12px; background: rgba(255,120,120,.08); box-shadow: inset 0 0 0 1px rgba(255,120,120,.3); color: #ffb3b3; font-size: 12.5px; display: flex; gap: 8px; }
.q-note { margin: 10px 18px 0; font-size: 11.5px; color: var(--color-smoke); display: flex; gap: 6px; align-items: center; }
.q-actions { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; padding: 16px 18px 18px; }
.q-actions .btn { padding: 12px 16px; font-size: 13px; }

/* ---------- Map ---------- */
.map-wrap { position: relative; min-width: 0; }
.map-frame { container-type: inline-size; position: relative; height: 100%; border-radius: var(--radius-feature); overflow: hidden; box-shadow: var(--halo); background: #06060c; }
.map-chrome { position: absolute; top: 0; left: 0; right: 0; z-index: 500; height: 42px; display: flex; align-items: center; gap: 12px; padding: 0 16px; font-size: 11.5px; color: var(--color-ash); background: linear-gradient(180deg, rgba(10,10,19,.92), rgba(10,10,19,.6)); border-bottom: 1px solid var(--line); backdrop-filter: blur(8px); }
.map-chrome .dots { display: flex; gap: 5px; }
.map-chrome .dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--color-charcoal); }
.chip-live { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px var(--line-strong); font-size: 10.5px; color: #fff; }
#map { position: absolute; inset: 42px 0 0 0; background: #06060c; }

.leaflet-container { font-family: var(--font-sans); background: #06060c; }
.leaflet-units-pane { animation: unitsIn .9s ease-out both; }
@keyframes unitsIn { from { opacity: 0; } }
.leaflet-container .leaflet-pane svg { max-width: none !important; max-height: none !important; }
.base-tiles { filter: sepia(.35) hue-rotate(185deg) saturate(1.8) brightness(.78) contrast(1.12); }
.label-tiles { opacity: .7; }
[hidden] { display: none !important; }
.leaflet-control-zoom { border: 0 !important; box-shadow: var(--halo) !important; border-radius: 12px !important; overflow: hidden; margin-top: 64px !important; }
.leaflet-control-zoom a { background: rgba(10,10,19,.85) !important; color: #fff !important; border-bottom: 1px solid var(--line) !important; width: 34px !important; height: 34px !important; line-height: 34px !important; }
.leaflet-control-zoom a:hover { background: rgba(24,24,38,.95) !important; }
.leaflet-control-attribution { background: rgba(10,10,19,.7) !important; color: var(--color-smoke) !important; font-size: 10px; }
.leaflet-control-attribution a { color: var(--color-ash) !important; }
.leaflet-tooltip.unit-tip { background: rgba(10,10,19,.92); color: #fff; border: 0; box-shadow: var(--halo); border-radius: 8px; font-family: var(--font-mono); font-size: 10.5px; padding: 5px 8px; }
.leaflet-tooltip.unit-tip::before { display: none; }

/* unit markers */
.unit { width: 12px; height: 12px; }
.unit .dot { position: absolute; inset: 2px; border-radius: 50%; background: var(--uc); box-shadow: 0 0 8px var(--uc); transition: transform .4s var(--ease), opacity .4s, inset .3s; display: grid; place-items: center; }
.unit .dot i { font-size: 0; color: #050510; transition: font-size .3s; }
.unit.t-van { --uc: var(--c-van); }
.unit.t-small { --uc: var(--c-small); }
.unit.t-large { --uc: var(--c-large); }
.unit .dot { animation: pop .6s var(--ease) backwards; animation-delay: var(--d, 0s); }
@keyframes pop { from { transform: scale(0); opacity: 0; } }
.map-scanning .unit:not(.near) .dot { opacity: .35; transform: scale(.75); }
.map-filter .unit:not(.match) .dot { opacity: .28; }
.unit.near .dot { inset: -3px; }
.unit.near::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--uc); animation: ring 2s infinite; animation-delay: var(--d2, 0s); }
@keyframes ring { from { transform: scale(.6); opacity: .9; } to { transform: scale(2); opacity: 0; } }
.zoom-hi .unit .dot { inset: -5px; }
.zoom-hi .unit .dot i { font-size: 11px; }
.zoom-hi .unit.near .dot { inset: -8px; }
.zoom-hi .unit.near .dot i { font-size: 14px; }

.pin-marker { width: 30px; height: 30px; }
.pin-marker .p { position: absolute; inset: 0; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); display: grid; place-items: center; box-shadow: 0 8px 20px rgba(0,0,0,.5); animation: drop .6s var(--ease) both; }
.pin-marker .p span { transform: rotate(45deg); font-family: var(--font-mono); font-weight: 700; font-size: 12px; }
.pin-marker.a .p { background: var(--color-iris-glow); color: #04122e; }
.pin-marker.b .p { background: #fff; color: var(--color-obsidian); }
@keyframes drop { from { transform: translateY(-40px) rotate(-45deg); opacity: 0; } }
.radar { width: 0; height: 0; }
.radar::before, .radar::after { content: ""; position: absolute; left: -60px; top: -60px; width: 120px; height: 120px; border-radius: 50%; border: 1px solid rgba(97,153,246,.6); animation: radar 2.6s ease-out infinite; }
.radar::after { animation-delay: 1.3s; }
@keyframes radar { from { transform: scale(.1); opacity: 1; } to { transform: scale(2.4); opacity: 0; } }

.route-glow { filter: drop-shadow(0 0 8px rgba(97,153,246,.9)); }
.mover { width: 14px; height: 14px; }
.mover span { position: absolute; inset: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(97,153,246,.35), 0 0 18px #6199f6; }

/* HUDs */
.hud { position: absolute; z-index: 600; border-radius: var(--radius-pill); background: rgba(10,10,19,.82); box-shadow: var(--halo); backdrop-filter: blur(12px); }
.hud-area { top: 58px; left: 50%; translate: -50% 0; display: flex; align-items: center; gap: 10px; padding: 10px 18px; font-size: 13px; color: var(--color-specter-lilac); white-space: nowrap; transition: background .4s, box-shadow .4s; max-width: calc(100% - 120px); }
.hud-area i { color: var(--color-iris-glow); font-size: 16px; }
.hud-area.active { background: linear-gradient(90deg, rgba(31,31,85,.92), rgba(13,26,74,.92)); box-shadow: inset 0 0 0 1px var(--color-iris-glow), 0 10px 40px -10px rgba(97,153,246,.6); }
.hud-area b { color: #fff; font-family: var(--font-mono); font-size: 15px; }
.hud-area span { overflow: hidden; text-overflow: ellipsis; }
.hud-lane { left: 16px; bottom: 16px; border-radius: 16px; display: flex; gap: 0; padding: 0; animation: rise .6s var(--ease) both; }
.hud-lane > div { padding: 12px 18px; border-right: 1px solid var(--line); }
.hud-lane > div:last-child { border-right: 0; max-width: 260px; }
.hud-lane .k { display: block; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-smoke); }
.hud-lane b { font-size: 18px; font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.legend { position: absolute; z-index: 600; right: 16px; bottom: 26px; border-radius: 16px; background: rgba(10,10,19,.82); box-shadow: var(--halo); backdrop-filter: blur(12px); padding: 12px 14px; display: grid; gap: 8px; min-width: 190px; }
.legend .lg-title { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .08em; color: var(--color-smoke); text-transform: uppercase; display: flex; justify-content: space-between; }
.legend .lg-row { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--color-specter-lilac); cursor: pointer; border-radius: 6px; transition: opacity .2s; }
.legend .lg-row.off { opacity: .35; }
.legend .lg-row i.sw { width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); flex: none; }
.legend .lg-row b { margin-left: auto; font-family: var(--font-mono); font-weight: 400; font-size: 11.5px; color: #fff; }

.toast { position: fixed; z-index: 3000; left: 50%; bottom: 28px; translate: -50% 20px; opacity: 0; pointer-events: none; padding: 12px 20px; border-radius: var(--radius-pill); background: var(--color-carbon-vellum); color: var(--color-obsidian); font-size: 13.5px; font-weight: 500; transition: all .4s var(--ease); box-shadow: 0 20px 50px -10px rgba(0,0,0,.6); }
.toast.show { opacity: 1; translate: -50% 0; }

/* ---------- Responsive ---------- */
@container (max-width: 820px) {
  .hud-lane > div:last-child { display: none; }
  .legend { bottom: auto; top: 110px; min-width: 170px; }
}
@container (max-width: 520px) { .legend { display: none; } }
@media (max-width: 1100px) { .nav-mid { display: none; } }
@media (max-width: 960px) {
  .app { grid-template-columns: 1fr; height: auto; min-height: 0; padding: 16px; }
  .panel-scroll { height: auto; overflow: visible; padding: 22px 18px; }
  .map-wrap { order: -1; height: 62vh; min-height: 420px; }
  .announce-text { display: none; }
}
@media (max-width: 520px) {
  .trucks { gap: 6px; }
  .truck { padding: 8px 6px 9px; }
  .truck .t-name { font-size: 11.5px; }
  .seg-thumb { border-radius: 14px; }
  .hud-lane > div { padding: 10px 12px; }
  .hud-lane > div:last-child { display: none; }
  .legend { display: none; }
  .hud-area { font-size: 12px; max-width: calc(100% - 80px); }
  .q-total .amt { font-size: 42px; }
  .q-actions { grid-template-columns: 1fr 1fr; }
  .q-actions .btn:first-child { grid-column: 1 / -1; }
  .stat-pill { padding: 8px 12px; }
  .nav-left { gap: 10px; }
  .nav-back { padding: 9px 11px; }
  .nav-back span { display: none; }
}

/* ---------- Print the quote ---------- */
@media print {
  body { background: #fff; color: #000; }
  .announce, .nav, .map-wrap, form, .grain, .spotlight, .q-actions, .panel-head, .toast { display: none !important; }
  .app { display: block; height: auto; padding: 0; }
  .panel { box-shadow: none; background: #fff; }
  .quote { box-shadow: 0 0 0 1px #ccc; background: #fff; color: #000; }
  .q-row .k, .q-total .per, .q-lane .k { color: #555; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- Pallets / skids ---------- */
.field-weight { margin-top: 12px; }
.field-skids input { padding-right: 90px; }
.stepper { position: absolute; right: 8px; top: 50%; translate: 0 -50%; display: flex; gap: 6px; }
.stepper button { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; color: var(--color-ash); box-shadow: inset 0 0 0 1px var(--line-strong); transition: color .2s, box-shadow .2s, transform .15s; }
.stepper button:hover { color: #fff; box-shadow: inset 0 0 0 1px var(--color-iris-glow); }
.stepper button:active { transform: scale(.92); }
/* one segment per skid position on the selected truck */
.skid-bar { display: grid; grid-template-columns: repeat(var(--slots, 3), 1fr); gap: 3px; background: none; height: 6px; }
.skid-bar i { border-radius: 2px; background: rgba(222,223,238,.08); transition: background .35s var(--ease); }
.skid-bar i.on { background: linear-gradient(90deg, var(--color-twilight), var(--color-iris-glow)); }
.skid-bar i.ideal:not(.on) { background: rgba(97,153,246,.16); }
.capacity.over .skid-bar i.on { background: linear-gradient(90deg, #a84b4b, #ff8a8a); }

/* ---------- Mobile: headline becomes the page header, above the map ---------- */
@media (max-width: 960px) {
  .panel, .panel-scroll { display: contents; }
  .panel-head { order: -2; margin: 0; padding: 4px 4px 0; }
  .panel-head h1 { font-size: clamp(30px, 8vw, 38px); }
  .map-wrap { order: -1; }
  #quoteForm {
    order: 0; padding: 22px 18px 20px; border-radius: var(--radius-feature);
    background: linear-gradient(180deg, rgba(24,24,38,.72), rgba(10,10,19,.78));
    box-shadow: var(--halo);
  }
  .quote { order: 1; margin-top: 0; }
  .fine-print { order: 2; margin-top: -6px; padding: 0 4px; }
}

/* ---------- Optional pickup date / time ---------- */
.when { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-top: 8px; }
.when .field-date { margin-top: 0; }
.field .opt { text-transform: none; letter-spacing: 0; color: #55556a; margin-left: 4px; }

/* ---------- Short lanes: no price, email for quote ---------- */
.q-total .amt.amt-email { font-size: 30px; font-weight: 500; letter-spacing: -0.01em; text-transform: uppercase; color: var(--color-iris-glow); margin-top: 10px; line-height: 1.05; }

/* ---------- Transit: solo / team ---------- */
.segments.segments-2 { grid-template-columns: repeat(2, 1fr); }

/* ---------- Transit total hours (shown when transit runs past a day) ---------- */
.q-meta .v-sub { margin-top: 2px; font-family: var(--font-mono); font-size: 10.5px; color: var(--color-ash); }

/* ---------- Map drive time: total hours line ---------- */
.hud-lane b small { display: block; margin-top: 1px; font-family: var(--font-mono); font-size: 10px; font-weight: 400; letter-spacing: 0; color: var(--color-ash); }

/* ---------- "(estimate)" after the price ---------- */
.q-total .amt .amt-est { margin-left: 8px; font-size: 15px; letter-spacing: 0; color: var(--color-ash); vertical-align: baseline; }