/* ============================================================================
   Asphalt Takeoff — shared stylesheet
   Visual system lifted from tensorlab.org "signal" direction.
   This file is IDENTICAL across the Leptos / Dioxus / Yew prototypes so the
   only variable in the comparison is the framework. Do not fork it per app.
   ============================================================================ */

:root {
  --tl-black: #050203;
  --tl-black-soft: #0c0305;
  --tl-red: #b61225;
  --tl-red-hot: #ef233c;
  --tl-red-deep: #3d050d;
  --tl-ink: #fff5ef;
  --tl-muted: #ead1ca;
  --tl-dim: #c28d87;
  --tl-line: rgba(182, 18, 37, 0.34);
  --tl-primary-rgb: 239, 35, 60;
  --tl-secondary-rgb: 182, 18, 37;
  --tl-surface: rgba(5, 2, 3, 0.42);
  --tl-surface-hover: rgba(182, 18, 37, 0.12);

  /* asphalt-type swatch colors (overlay legend) */
  --c-std: #ef233c;   /* Standard Duty Asphalt */
  --c-dot: #4673a0;   /* DOT Asphalt          */
  --c-conc: #c9a227;  /* Concrete             */
  --c-land: #3f9c6a;  /* Landscaping          */

  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  color: var(--tl-ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

/* Full-viewport atmospheric background; content floats over it. */
html {
  background:
    radial-gradient(circle at 50% -12%, rgba(35, 74, 99, 0.28), transparent 34rem),
    radial-gradient(circle at 12% 22%, rgba(239, 35, 60, 0.08), transparent 28rem),
    radial-gradient(circle at 84% 16%, rgba(70, 115, 132, 0.14), transparent 32rem),
    linear-gradient(180deg, #111824 0%, #08111a 42%, #03070d 100%);
  background-color: #08111a;
  background-attachment: fixed;
}

body { background: transparent; }

a { color: inherit; text-decoration: none; }

/* ─── Kicker / eyebrow motif ───────────────────────────────────────────── */
.kicker {
  margin: 0 0 14px;
  color: var(--tl-red-hot);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.mono-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tl-dim);
}

/* ─── App shell ────────────────────────────────────────────────────────── */
.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Floating transparent nav */
.nav {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 14px clamp(18px, 3vw, 36px);
}
.nav__logo { width: 34px; height: 51px; object-fit: contain; }
.nav__wordmark {
  font-weight: 800;
  letter-spacing: 0.02em;
  font-size: 1.04rem;
  text-transform: uppercase;
}
.nav__menu { display: flex; gap: 1.4rem; margin-left: 2rem; }
.nav__menu a {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tl-muted);
  transition: color 160ms ease;
}
.nav__menu a:hover, .nav__menu a.is-active { color: var(--tl-red-hot); }
.nav__project {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--tl-dim);
  text-transform: uppercase;
}

/* ─── Workspace grid: layers | stage | takeoff ─────────────────────────── */
.workspace {
  flex: 1;
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: clamp(14px, 1.6vw, 28px);
  padding: 4px clamp(18px, 3vw, 36px) clamp(18px, 3vw, 36px);
}
.layers   { grid-row: 1 / 3; }
.stage    { grid-column: 2; grid-row: 1; }
.takeoff  { grid-column: 2; grid-row: 2; }

/* Surfaces: semi-transparent, hairline red rule, soft blur. No opaque cards. */
.surface {
  background: var(--tl-surface);
  border: 1px solid var(--tl-line);
  border-radius: 14px;
  backdrop-filter: blur(18px);
}

/* ─── Layers panel ─────────────────────────────────────────────────────── */
.layers { padding: 20px 18px; display: flex; flex-direction: column; gap: 18px; }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; }
.panel-head h2 { margin: 0; font-size: 0.95rem; font-weight: 800; letter-spacing: 0.02em; }

.layer-list { display: flex; flex-direction: column; gap: 2px; }
.layer {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 10px;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 160ms ease, border-color 160ms ease;
}
.layer:hover { background: var(--tl-surface-hover); }
.layer.is-selected { border-color: var(--tl-line); background: var(--tl-surface-hover); }
.layer.is-hidden { opacity: 0.4; }
.layer__num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--tl-dim);
}
.layer__swatch { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.layer__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.layer__name { font-size: 0.9rem; font-weight: 600; }
.layer__area { font-family: var(--font-mono); font-size: 0.74rem; color: var(--tl-muted); }
.layer__toggle {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--tl-dim);
  text-transform: uppercase;
}

/* scale calibration readout */
.scale {
  margin-top: auto;
  padding: 14px;
  border-top: 1px solid var(--tl-line);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.scale__value { font-family: var(--font-mono); font-size: 1.1rem; font-weight: 700; }
.scale__conf { font-family: var(--font-mono); font-size: 0.72rem; color: var(--tl-red-hot); }

/* ─── Plan stage ───────────────────────────────────────────────────────── */
.stage { position: relative; overflow: hidden; min-height: 420px; padding: 0; }
.stage__bar {
  position: absolute; top: 14px; left: 14px; right: 14px; z-index: 5;
  display: flex; align-items: center; gap: 12px; pointer-events: none;
}
.stage__bar .kicker { margin: 0; pointer-events: none; }
.stage__zoom { margin-left: auto; display: flex; gap: 6px; pointer-events: auto; }
.btn-pill {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tl-muted);
  background: var(--tl-surface);
  border: 1px solid var(--tl-line);
  border-radius: 999px;
  padding: 8px 14px;
  min-height: 38px;
  cursor: pointer;
  backdrop-filter: blur(18px);
  transition: color 160ms ease, background 160ms ease, transform 160ms ease;
}
.btn-pill:hover { color: var(--tl-ink); background: var(--tl-surface-hover); }
.btn-pill:active { transform: translateY(1px); }

.viewport { position: absolute; inset: 0; }
.viewport svg { width: 100%; height: 100%; display: block; }

/* polygon overlay */
.poly { cursor: pointer; transition: fill-opacity 160ms ease; }
.poly:hover { fill-opacity: 0.42; }
.poly.is-selected { stroke-width: 2.5; }
.vertex { fill: var(--tl-ink); stroke: var(--tl-red-hot); stroke-width: 2; cursor: grab; }

/* ─── Takeoff bar ──────────────────────────────────────────────────────── */
.takeoff { padding: 18px 22px; display: grid; grid-template-columns: 1fr auto; gap: 22px; align-items: start; }
.schedule { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.schedule__rows { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.sched-item { display: flex; align-items: center; gap: 9px; }
.sched-item__sw { width: 10px; height: 10px; border-radius: 2px; }
.sched-item__name { font-size: 0.82rem; color: var(--tl-muted); }
.sched-item__area { font-family: var(--font-mono); font-size: 0.92rem; font-weight: 700; }

.takeoff__right { display: flex; flex-direction: column; align-items: stretch; gap: 14px; min-width: 200px; }
.volume { display: flex; flex-direction: column; gap: 4px; }
.volume__value { font-family: var(--font-mono); font-size: 1.35rem; font-weight: 800; color: var(--tl-ink); }

.btn-primary {
  font-family: var(--font-mono);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: var(--tl-ink);
  background: linear-gradient(135deg, var(--tl-red) 0%, var(--tl-red-hot) 100%);
  border: none;
  border-radius: 999px;
  padding: 13px 26px;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(var(--tl-primary-rgb), 0.4), 0 10px 30px rgba(var(--tl-primary-rgb), 0.18);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(var(--tl-primary-rgb), 0.6), 0 14px 40px rgba(var(--tl-primary-rgb), 0.28); }

/* ─── Upload hero (alt view) ───────────────────────────────────────────── */
.hero { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 0 clamp(18px, 3vw, 36px) 8vh; }
.hero h1 { margin: 0; font-size: clamp(3rem, 7vw, 6rem); line-height: 0.92; font-weight: 800; max-width: 760px; }
.hero .lede { max-width: 520px; margin: 24px 0 36px; color: var(--tl-muted); font-size: clamp(1rem, 1.4vw, 1.24rem); line-height: 1.55; font-weight: 500; }
.dropzone {
  max-width: 620px;
  padding: 48px;
  border: 1.5px dashed var(--tl-line);
  border-radius: 18px;
  text-align: center;
  background: var(--tl-surface);
  backdrop-filter: blur(18px);
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease;
}
.dropzone:hover { border-color: var(--tl-red-hot); background: var(--tl-surface-hover); }
.dropzone__big { font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; }

/* footer build tag */
.buildtag {
  padding: 10px clamp(18px, 3vw, 36px) 18px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tl-dim);
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ─── Data-layer mode indicator + live error banner ─────────────────────── */
.mode-pill {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--tl-line);
  color: var(--tl-dim);
}
.mode-pill.is-live {
  color: var(--tl-ink);
  border-color: var(--tl-red-hot);
  background: rgba(var(--tl-primary-rgb), 0.16);
}
.live-error {
  margin: 0 clamp(18px, 3vw, 36px);
  padding: 8px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--tl-red-hot);
  background: rgba(var(--tl-primary-rgb), 0.12);
  border-radius: 8px;
  color: var(--tl-ink);
  font-size: 0.8rem;
}
.sync-status {
  margin-left: 6px;
  align-self: center;
}

/* ─── Processing view ──────────────────────────────────────────────────── */
.processing {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(18px, 3vw, 36px) 8vh;
}
.processing__inner {
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.processing .kicker { margin: 0; font-size: 0.9rem; letter-spacing: 0.3em; }
.processing__meta { display: flex; flex-direction: column; gap: 6px; }

.proc-progress {
  height: 3px;
  background: var(--tl-line);
  border-radius: 999px;
  overflow: hidden;
}
.proc-progress__bar {
  height: 100%;
  background: linear-gradient(90deg, var(--tl-red) 0%, var(--tl-red-hot) 100%);
  box-shadow: 0 0 12px rgba(var(--tl-primary-rgb), 0.6);
  transition: width 420ms ease;
}

/* line-and-node pipeline checklist */
.pipeline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 4px;
  display: flex;
  flex-direction: column;
}
.pstep {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 0;
  font-family: var(--font-mono);
  font-size: 0.84rem;
  letter-spacing: 0.04em;
}
/* connecting line between nodes */
.pstep::before {
  content: "";
  position: absolute;
  left: 12px;
  top: -50%;
  height: 100%;
  width: 1px;
  background: var(--tl-line);
}
.pstep:first-child::before { display: none; }
.pstep__node {
  flex: none;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--tl-line);
  background: rgba(5, 2, 3, 0.6);
  font-size: 0.72rem;
  z-index: 1;
}
.pstep.is-pending { color: var(--tl-dim); opacity: 0.55; }
.pstep.is-complete { color: var(--tl-ink); }
.pstep.is-complete .pstep__node {
  color: var(--tl-red-hot);
  border-color: var(--tl-red-hot);
}
.pstep.is-running { color: var(--tl-red-hot); }
.pstep.is-running .pstep__node {
  color: var(--tl-red-hot);
  border-color: var(--tl-red-hot);
  box-shadow: 0 0 0 4px rgba(var(--tl-primary-rgb), 0.14), 0 0 18px rgba(var(--tl-primary-rgb), 0.55);
  animation: pulse-node 1s ease-in-out infinite;
}
@keyframes pulse-node {
  0%, 100% { box-shadow: 0 0 0 3px rgba(var(--tl-primary-rgb), 0.1), 0 0 12px rgba(var(--tl-primary-rgb), 0.4); }
  50%      { box-shadow: 0 0 0 6px rgba(var(--tl-primary-rgb), 0.18), 0 0 22px rgba(var(--tl-primary-rgb), 0.7); }
}

/* ─── Quote view ───────────────────────────────────────────────────────── */
.quote {
  flex: 1;
  display: flex;
  justify-content: center;
  padding: 4px clamp(18px, 3vw, 36px) clamp(18px, 3vw, 36px);
}
.quote__sheet {
  width: 100%;
  max-width: 980px;
  padding: 28px clamp(20px, 3vw, 36px) 26px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.quote__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
.quote__head .kicker { margin: 0 0 10px; }
.quote__title { margin: 0 0 8px; font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 800; }
.quote__thumb { flex: none; }
.plan-thumb {
  width: 220px;
  height: 154px;
  border: 1px solid var(--tl-line);
  border-radius: 8px;
  background: rgba(5, 2, 3, 0.4);
  display: block;
}

.quote-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.quote-table th {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tl-dim);
  padding: 0 0 10px;
  border-bottom: 1px solid var(--tl-line);
}
.quote-table th.qt-type { text-align: left; }
.quote-table td {
  padding: 12px 0;
  border-bottom: 1px solid var(--tl-line);
}
.quote-table tbody tr:last-child td { border-bottom: 1px solid var(--tl-line); }
.qt-num {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding-left: 18px !important;
}
.qt-type { color: var(--tl-ink); }
.qt-sw {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 10px;
  vertical-align: middle;
}
.qt-tag {
  margin-left: 10px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tl-dim);
}
.quote-table tr.is-excluded { color: var(--tl-dim); opacity: 0.6; }

.quote-table tfoot td { border-bottom: none; padding: 10px 0 0; }
.qt-foot-label {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tl-muted);
  padding-right: 18px;
}
.qt-total td {
  padding-top: 14px;
  border-top: 1px solid var(--tl-line);
}
.qt-total .qt-foot-label { color: var(--tl-ink); font-weight: 700; }
.qt-total .qt-num { font-size: 1.15rem; font-weight: 800; color: var(--tl-red-hot); }

.quote__actions { display: flex; gap: 14px; align-items: center; }
.btn-primary.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: 0 0 0 1px rgba(var(--tl-primary-rgb), 0.3);
}
.btn-primary.is-disabled:hover { transform: none; }

/* ─── Legend (overlay color key) ──────────────────────────────────────── */
.legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--tl-line);
  border-radius: 10px;
  background: rgba(5, 2, 3, 0.3);
}
.legend__item { display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 9px; }
.legend__sw { width: 12px; height: 12px; border-radius: 3px; }
.legend__label { font-size: 0.82rem; font-weight: 600; }
.legend__kind {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tl-dim);
}

/* ─── Scale panel (confirmable / override) ────────────────────────────── */
.scale__row { display: flex; flex-direction: column; gap: 2px; }
.scale__state { margin-top: 2px; }
.scale__badge {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tl-dim);
  border: 1px solid var(--tl-line);
  border-radius: 999px;
  padding: 3px 9px;
}
.scale__badge.is-ok { color: var(--c-land); border-color: var(--c-land); }
.scale__controls { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.scale__controls .btn-pill { padding: 6px 11px; min-height: 32px; font-size: 0.64rem; }
.scale__input {
  width: 78px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--tl-ink);
  background: rgba(5, 2, 3, 0.5);
  border: 1px solid var(--tl-line);
  border-radius: 8px;
  padding: 6px 9px;
}
.scale__input:focus { outline: none; border-color: var(--tl-red-hot); }

/* scale hint in the corner of the stage */
.stage__scalehint {
  position: absolute;
  bottom: 12px;
  left: 14px;
  z-index: 5;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tl-dim);
  pointer-events: none;
}

/* ─── Takeoff schedule table + per-type thickness ─────────────────────── */
.schedule__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.corrections-pill {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tl-red-hot);
  border: 1px solid var(--tl-line);
  border-radius: 999px;
  padding: 4px 11px;
}
.sched-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; margin-top: 6px; }
.sched-table th {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tl-dim);
  padding: 0 0 8px;
  border-bottom: 1px solid var(--tl-line);
}
.sched-table th.st-type { text-align: left; }
.sched-table td { padding: 8px 0; border-bottom: 1px solid var(--tl-line); }
.st-num {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding-left: 14px !important;
}
.st-type { color: var(--tl-ink); }
.sched-table tr.is-excluded { color: var(--tl-dim); opacity: 0.6; }
.thk-input {
  width: 62px;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--tl-ink);
  background: rgba(5, 2, 3, 0.5);
  border: 1px solid var(--tl-line);
  border-radius: 7px;
  padding: 5px 8px;
}
.thk-input:focus { outline: none; border-color: var(--tl-red-hot); }

.corrections-bar { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.corrections-bar .btn-pill { padding: 7px 12px; min-height: 34px; font-size: 0.64rem; }
.corrections-json {
  margin: 12px 0 0;
  max-height: 240px;
  overflow: auto;
  padding: 12px;
  border: 1px solid var(--tl-line);
  border-radius: 10px;
  background: rgba(5, 2, 3, 0.55);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  line-height: 1.5;
  color: var(--tl-muted);
  white-space: pre;
}

@media (max-width: 880px) {
  .workspace { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
  .layers { grid-row: auto; }
  .stage { grid-column: 1; min-height: 340px; }
  .takeoff { grid-column: 1; grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}