/* =========================================================================
   Landing (upload) page
   Editorial, asymmetric: copy on 5/12, a real map as the hero on 7/12 bleeding
   to the edge. Off-white ground, deep navy ink, one blue-violet accent, hairlines.
   ========================================================================= */
:root {
  --lp-bg: #f7f7f4;
  --lp-ink: #0b1633;
  --lp-ink-2: #3a4560;
  --lp-muted: #5d667a;           /* 5.3:1 on --lp-bg */
  --lp-line: rgba(11, 22, 51, .09);
  --lp-line-2: rgba(11, 22, 51, .16);
  --lp-accent: linear-gradient(100deg, #1d3fbf 0%, #3b3fd6 45%, #6d2ee0 100%);
  --lp-blue: #2549d9;
  --lp-surface: #ffffff;
  --lp-card: rgba(255, 255, 255, .9);
  --lp-land: #ffffff;
  --lp-sea: #eef0f4;
  --lp-upz: rgba(11, 22, 51, .11);
  --lp-dist: rgba(11, 22, 51, .30);
  --lp-grat: rgba(11, 22, 51, .07);
  --lp-h1c: #edf1ff; --lp-h2c: #dce4fd; --lp-h3c: #c2cffa; --lp-h4c: #a3b6f4; --lp-h5c: #849cec;
  --lp-route: #0b1633;             /* the route reads in ink over the blue heat */
  --lp-display: "Geist", "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --lp-serif: "Instrument Serif", "Playfair Display", Georgia, serif;
  --lp-mono: "Geist Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  --lp-shadow: 0 1px 1px rgba(11, 22, 51, .04), 0 12px 32px -12px rgba(11, 22, 51, .16), 0 40px 80px -40px rgba(37, 73, 217, .22);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --lp-bg: #050505; --lp-ink: #f2f3f5; --lp-ink-2: #c3c7d0; --lp-muted: #9097a6;
    --lp-line: rgba(255, 255, 255, .09); --lp-line-2: rgba(255, 255, 255, .16);
    --lp-accent: linear-gradient(100deg, #9db6ff 0%, #a9a3ff 50%, #c4a2ff 100%);
    --lp-blue: #7ea0ff; --lp-surface: #111111; --lp-card: rgba(20, 20, 20, .9);
    --lp-land: #101010; --lp-sea: #070707; --lp-upz: rgba(255, 255, 255, .09); --lp-dist: rgba(255, 255, 255, .26); --lp-grat: rgba(255, 255, 255, .06);
    --lp-h1c: #0f1629; --lp-h2c: #131f45; --lp-h3c: #1a2c66; --lp-h4c: #213a8a; --lp-h5c: #2b4bb0;
    --lp-route: #e8ecf8;
    --lp-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 30px 80px -30px rgba(0, 0, 0, .9);
  }
}
:root[data-theme="dark"] {
  --lp-bg: #050505; --lp-ink: #f2f3f5; --lp-ink-2: #c3c7d0; --lp-muted: #9097a6;
  --lp-line: rgba(255, 255, 255, .09); --lp-line-2: rgba(255, 255, 255, .16);
  --lp-accent: linear-gradient(100deg, #9db6ff 0%, #a9a3ff 50%, #c4a2ff 100%);
  --lp-blue: #7ea0ff; --lp-surface: #111111; --lp-card: rgba(20, 20, 20, .9);
  --lp-land: #101010; --lp-sea: #070707; --lp-upz: rgba(255, 255, 255, .09); --lp-dist: rgba(255, 255, 255, .26); --lp-grat: rgba(255, 255, 255, .06);
  --lp-h1c: #0f1629; --lp-h2c: #131f45; --lp-h3c: #1a2c66; --lp-h4c: #213a8a; --lp-h5c: #2b4bb0;
  --lp-route: #e8ecf8;
  --lp-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 30px 80px -30px rgba(0, 0, 0, .9);
}

body[data-view="upload"] { background: var(--lp-bg); }
body[data-view="upload"] .bg-mesh { display: none; }
body[data-view="upload"] .topbar { background: color-mix(in srgb, var(--lp-bg) 80%, transparent); border-bottom-color: var(--lp-line); }

/* ---------------------------------------------------------------- grid */
.view-upload { display: block; max-width: none; padding: 0; gap: 0; }
.lp {
  position: relative; max-width: none; margin: 0;               /* full window width; the map bleeds to the right edge */
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto auto auto; align-content: center;
  column-gap: clamp(28px, 4vw, 64px);
  padding: 22px 0 24px clamp(28px, 5vw, 80px);
  min-height: calc(100vh - var(--topbar-h));
  color: var(--lp-ink); font-family: var(--lp-display);
}
.lp::before { /* one soft light source behind the map, nothing else */
  content: ""; position: absolute; z-index: -1; right: 8%; top: 14%; width: 46%; height: 60%;
  background: radial-gradient(closest-side, rgba(79, 70, 229, .12), rgba(37, 99, 235, .05) 55%, transparent);
  filter: blur(10px); pointer-events: none;
}

/* ---------------------------------------------------------------- top line */
.lp-top { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding-right: clamp(28px, 5vw, 80px);
  font: 500 11.5px/1 var(--lp-mono); letter-spacing: .02em; color: var(--lp-muted); }
.lp-eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--lp-ink-2); }
.lp-eyebrow i { width: 18px; height: 1px; background: var(--lp-ink-2); }
.lp-meta em { font-style: normal; opacity: .45; margin: 0 6px; }

/* ---------------------------------------------------------------- copy */
.lp-copy { grid-column: 1; grid-row: 2; align-self: center; padding: 28px 0 32px; max-width: 600px; }
.lp-h1 { margin: 0; font-family: var(--lp-display); font-weight: 600; font-size: clamp(34px, 3.25vw, 58px); line-height: .98; letter-spacing: -.045em; color: var(--lp-ink); text-wrap: balance; }
.lp-h1 .ln { display: block; overflow: hidden; padding-bottom: .08em; }
.lp-h1 .ln > span { display: inline-block; text-wrap: balance; animation: lp-line .9s cubic-bezier(.16, 1, .3, 1) backwards; }
.lp-h1 .ln:nth-child(2) > span { animation-delay: .09s; }
@keyframes lp-line { from { transform: translateY(105%); } to { transform: none; } }
.lp-accent { font-family: var(--lp-serif); font-style: italic; font-weight: 400; letter-spacing: -.02em; font-size: 1.08em; line-height: 1;
  background: var(--lp-accent); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; }
.lp-lead { margin: 26px 0 30px; max-width: 520px; font-size: 16px; line-height: 1.6; color: var(--lp-ink-2); animation: lp-fade .8s ease .25s backwards; }
.lp-lead b { font-weight: 600; color: var(--lp-ink); }
@keyframes lp-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* drop zone: one clear action, no ornament */
.lp-drop { position: relative; display: flex; align-items: center; gap: 16px; padding: 14px 14px 14px 16px; border-radius: 12px; cursor: pointer;
  background: var(--lp-surface); border: 1px solid var(--lp-line-2); box-shadow: 0 1px 2px rgba(11, 22, 51, .04);
  transition: border-color .25s ease, box-shadow .3s ease, transform .3s cubic-bezier(.16, 1, .3, 1); animation: lp-fade .8s ease .35s backwards; }
.lp-drop::after { /* gradient hairline appears on hover */
  content: ""; position: absolute; inset: -1px; border-radius: 12px; padding: 1px; background: var(--lp-accent); opacity: 0; transition: opacity .3s ease;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.lp-drop:hover::after, .lp-drop.over::after, .lp-drop:focus-visible::after { opacity: 1; }
.lp-drop:hover, .lp-drop.over { box-shadow: 0 1px 2px rgba(11, 22, 51, .04), 0 18px 40px -24px rgba(37, 73, 217, .55); }
.lp-drop.over { transform: scale(1.012); }
.lp-drop:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(37, 73, 217, .16); }
.lp-drop-ico { width: 42px; height: 42px; flex: none; border-radius: 10px; display: grid; place-items: center; color: var(--lp-ink); background: color-mix(in srgb, var(--lp-ink) 5%, transparent); }
.lp-drop-ico svg { width: 21px; height: 21px; transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.lp-drop:hover .lp-drop-ico svg { transform: translateY(-3px); }
.lp-drop-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.lp-drop-text .t { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.lp-drop-text .s { font-size: 12.5px; color: var(--lp-muted); }
.lp-drop-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 9px; flex: none;
  background: var(--lp-ink); color: var(--lp-bg); font-size: 13.5px; font-weight: 600; letter-spacing: -.005em; }
.lp-drop-btn svg { width: 15px; height: 15px; transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
.lp-drop:hover .lp-drop-btn svg { transform: translateX(3px); }

.lp .csv-hint { margin: 14px 2px 0; opacity: .7; animation: lp-fade .8s ease .45s backwards; }
.lp .csv-hint:hover { opacity: 1; }
.lp .csv-row { font-family: var(--lp-mono); font-size: 11.5px; color: var(--lp-ink-2); }
.lp .csv-row b { color: var(--lp-ink-2); }
.lp .csv-hint:hover .csv-row b { color: var(--lp-blue); }
.lp .csv-note, .lp .csv-row .ln { color: var(--lp-muted); }
.lp .csv-note b { font-family: var(--lp-mono); color: var(--lp-ink-2); }

/* ---------------------------------------------------------------- hero map */
.lp-stage { grid-column: 2; grid-row: 2 / 4; margin: 26px 0 0; align-self: start; perspective: 1800px; }
.lp-frame {
  --mx: 0; --my: 0;
  position: relative; height: clamp(420px, calc(100vh - var(--topbar-h) - var(--lp-chrome, 150px)), 980px); overflow: hidden; /* fills the window height left after the header row, captions and band */
  border-radius: 16px 0 0 16px; background: var(--lp-sea); box-shadow: var(--lp-shadow); border: 1px solid var(--lp-line); border-right: 0;
  transform: rotateY(calc(var(--mx) * -1.6deg)) rotateX(calc(var(--my) * 1.2deg)); transform-origin: 30% 50%;
  transition: transform .6s cubic-bezier(.16, 1, .3, 1); animation: lp-rise 1s cubic-bezier(.16, 1, .3, 1) .15s backwards;
}
@keyframes lp-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.lp-map { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lp-bar { position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px;
  background: color-mix(in srgb, var(--lp-card) 70%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--lp-line);
  font: 500 11.5px var(--lp-mono); color: var(--lp-muted); }
.lp-crumb b { font-weight: 400; opacity: .5; margin: 0 6px; }
.lp-seg { display: inline-flex; padding: 2px; border-radius: 7px; background: color-mix(in srgb, var(--lp-ink) 6%, transparent); }
.lp-seg i { font-style: normal; padding: 4px 10px; border-radius: 5px; font-family: var(--lp-display); font-size: 12px; font-weight: 500; }
.lp-seg i.on { background: var(--lp-surface); color: var(--lp-ink); box-shadow: 0 1px 2px rgba(11, 22, 51, .1); }

/* map layers (drawn by landing-map.js) */
.lp-map .land { fill: var(--lp-land); }
.lp-map .upz { fill: none; stroke: var(--lp-upz); stroke-width: .8; }
.lp-map .dist { fill: none; stroke: var(--lp-dist); stroke-width: 1.2; }
.lp-map .heat { stroke: var(--lp-land); stroke-width: 1; opacity: 0; animation: lp-heat .9s ease forwards; animation-delay: var(--d, 0s); }
.lp-map .heat.h1 { fill: var(--lp-h1c); } .lp-map .heat.h2 { fill: var(--lp-h2c); } .lp-map .heat.h3 { fill: var(--lp-h3c); }
.lp-map .heat.h4 { fill: var(--lp-h4c); } .lp-map .heat.h5 { fill: var(--lp-h5c); }
@keyframes lp-heat { to { opacity: .85; } }
.lp-map .grat { stroke: var(--lp-grat); stroke-width: 1; stroke-dasharray: 2 4; }
.lp-map .coord { font: 500 9.5px var(--lp-mono); fill: var(--lp-muted); opacity: .8; }
.lp-map .dlabel { font: 600 9.5px var(--lp-mono); letter-spacing: .18em; fill: var(--lp-muted); opacity: .75; text-anchor: middle; }
.lp-map .route-case { fill: none; stroke: var(--lp-land); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.lp-map .route { fill: none; stroke: var(--lp-route); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; animation: lp-draw 2.6s linear .5s forwards; }
.lp-map .route-case { stroke-dasharray: 1; stroke-dashoffset: 1; animation: lp-draw 2.6s linear .5s forwards; }
@keyframes lp-draw { to { stroke-dashoffset: 0; } }
.lp-map .stop { opacity: 0; transform-box: fill-box; transform-origin: center; animation: lp-pop .5s cubic-bezier(.34, 1.56, .64, 1) forwards; animation-delay: var(--d); }
@keyframes lp-pop { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: none; } }
.lp-map .stop circle { stroke: var(--lp-land); stroke-width: 2.5; }
.lp-map .stop.s circle { fill: #059669; } .lp-map .stop.e circle { fill: #dc2626; } .lp-map .stop.n circle { fill: #c2410c; }
.lp-map .stop text.num { font: 700 10px var(--lp-display); fill: #fff; text-anchor: middle; dominant-baseline: central; }
.lp-map .stop text.lbl { font: 600 11px var(--lp-display); fill: var(--lp-ink); paint-order: stroke; stroke: var(--lp-land); stroke-width: 3.5px; stroke-linejoin: round; }
.lp-map .stop text.dur { font: 500 9.5px var(--lp-mono); fill: var(--lp-muted); paint-order: stroke; stroke: var(--lp-land); stroke-width: 3px; }
.lp-map .spike { opacity: 0; animation: lp-in .6s ease forwards; animation-delay: var(--d); }
.lp-map .spike line { stroke: #dc2626; stroke-width: 1; stroke-dasharray: 2 3; opacity: .7; }
.lp-map .spike path { stroke: #dc2626; stroke-width: 1.6; stroke-linecap: round; }
.lp-map .note { opacity: 0; animation: lp-in .7s ease forwards; animation-delay: var(--d); }
.lp-map .note line { stroke: var(--lp-ink-2); stroke-width: .8; opacity: .55; }
.lp-map .note circle { fill: var(--lp-ink-2); }
.lp-map .note text { font: 500 10.5px var(--lp-mono); fill: var(--lp-ink-2); paint-order: stroke; stroke: var(--lp-land); stroke-width: 3px; }
@keyframes lp-in { from { opacity: 0; } to { opacity: 1; } }
.lp-map .car { opacity: 0; animation: lp-in .4s ease 3.2s forwards; }
.lp-map .car .halo { fill: var(--lp-route); opacity: .16; }
.lp-map .car .dot { fill: var(--lp-land); stroke: var(--lp-route); stroke-width: 2.5; }
.lp-map .scale line { stroke: var(--lp-ink-2); stroke-width: 1.2; }
.lp-map .scale text, .lp-map .north text { font: 500 9.5px var(--lp-mono); fill: var(--lp-ink-2); }
.lp-map .north path { fill: var(--lp-ink-2); }

/* overlays: one product panel + a legend */
.lp-card { position: absolute; z-index: 2; right: 26px; bottom: 26px; width: 264px; padding: 14px 16px 12px; border-radius: 12px;
  background: var(--lp-card); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid var(--lp-line); box-shadow: 0 1px 2px rgba(11, 22, 51, .05), 0 24px 48px -24px rgba(11, 22, 51, .35);
  transform: translate(calc(var(--mx) * 8px), calc(var(--my) * 6px)); transition: transform .6s cubic-bezier(.16, 1, .3, 1);
  animation: lp-fade .8s ease 1.4s backwards; }
.lp-frame:hover .lp-card { transform: translate(calc(var(--mx) * 8px), calc(var(--my) * 6px)); }
.c-top { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 600; }
.c-tag { font: 500 10px var(--lp-mono); color: var(--lp-muted); letter-spacing: .04em; }
.c-km { margin-top: 6px; display: flex; align-items: baseline; gap: 5px; }
.c-km b { font-size: 34px; font-weight: 600; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.c-km span { font-size: 13px; color: var(--lp-muted); font-weight: 500; }
.c-row { display: flex; gap: 14px; margin-top: 6px; font-size: 11.5px; color: var(--lp-muted); }
.c-row b { color: var(--lp-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.c-tl { position: relative; height: 6px; margin-top: 12px; border-radius: 3px; background: color-mix(in srgb, var(--lp-route) 22%, transparent); overflow: hidden; }
.c-tl i { position: absolute; top: 0; bottom: 0; background: #ea580c; border-radius: 2px; }
.c-ax { display: flex; justify-content: space-between; margin-top: 5px; font: 500 9.5px var(--lp-mono); color: var(--lp-muted); }
.lp-legend { position: absolute; z-index: 2; left: 18px; top: 58px; display: flex; flex-direction: column; gap: 5px; padding: 9px 11px; border-radius: 9px;
  background: color-mix(in srgb, var(--lp-card) 85%, transparent); border: 1px solid var(--lp-line); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  animation: lp-fade .8s ease 1.2s backwards; }
.lp-legend .k { font: 500 10px var(--lp-mono); color: var(--lp-muted); letter-spacing: .04em; }
.lp-legend .ramp { display: flex; gap: 2px; }
.lp-legend .ramp i { width: 20px; height: 7px; }
.lp-legend .ramp i:first-child { border-radius: 2px 0 0 2px; } .lp-legend .ramp i:last-child { border-radius: 0 2px 2px 0; }
.lp-legend .h1 { background: var(--lp-h1c); } .lp-legend .h2 { background: var(--lp-h2c); } .lp-legend .h3 { background: var(--lp-h3c); }
.lp-legend .h4 { background: var(--lp-h4c); } .lp-legend .h5 { background: var(--lp-h5c); }
.lp-legend .ends { display: flex; justify-content: space-between; font: 500 9px var(--lp-mono); color: var(--lp-muted); }

/* processing stages, as a caption under the product shot */
.lp-pipe { display: flex; align-items: center; gap: 10px; padding: 14px clamp(28px, 5vw, 80px) 0 4px; font: 500 11px var(--lp-mono); color: var(--lp-muted); }
.lp-pipe span { white-space: nowrap; transition: color .3s; animation: lp-step 6s ease-in-out infinite; animation-delay: calc(var(--i) * 1.2s); }
.lp-pipe em { flex: 1; height: 1px; min-width: 12px; background: var(--lp-line-2); }
@keyframes lp-step { 0%, 18% { color: var(--lp-blue); } 26%, 100% { color: var(--lp-muted); } }

/* ---------------------------------------------------------------- bottom band */
.lp-band { grid-column: 1; grid-row: 3; display: flex; flex-direction: column; gap: 22px; padding: 22px 0 36px; border-top: 1px solid var(--lp-line); align-self: end;
  animation: lp-fade .8s ease .55s backwards; }
.lp-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.lp-steps li { display: flex; gap: 10px; align-items: baseline; }
.lp-steps .n { font: 500 11px var(--lp-mono); color: var(--lp-blue); }
.lp-steps b { display: block; font-size: 13px; font-weight: 600; letter-spacing: -.01em; color: var(--lp-ink); }
.lp-steps small { display: block; font-size: 12px; color: var(--lp-muted); margin-top: 2px; line-height: 1.4; }
.lp-stats { display: flex; gap: 40px; margin: 0; }
.lp-stats div { display: flex; flex-direction: column; gap: 3px; }
.lp-stats dd { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -.04em; line-height: 1; color: var(--lp-ink); font-variant-numeric: tabular-nums; }
.lp-stats dt { font: 500 10.5px var(--lp-mono); color: var(--lp-muted); letter-spacing: .02em; }

.lp .upload-error { margin-top: 14px; }

@media (max-width: 1180px) {
  .lp { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
  .lp-steps { grid-template-columns: 1fr; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-map .route, .lp-map .route-case { stroke-dashoffset: 0 !important; }
  .lp-map .heat { opacity: .85 !important; }
  .lp-map .stop, .lp-map .note, .lp-map .spike, .lp-map .car { opacity: 1 !important; }
  .lp-frame { transform: none !important; }
}