/* ============================================================================
   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: #111827;
  --tl-black-soft: #f3f5f7;
  /* Monochrome chrome: the former brand reds are now neutral charcoals so the
     whole UI reads white + black with no hues. (Functional material colors
     below, --c-*, are intentionally left in color.) */
  --tl-red: #374151;
  --tl-red-hot: #111827;
  --tl-red-deep: #1f2937;
  --tl-ink: #111827;
  --tl-muted: #4b5563;
  --tl-dim: #6b7280;
  --tl-line: rgba(17, 24, 39, 0.14);
  --tl-primary-rgb: 17, 24, 39;
  --tl-secondary-rgb: 36, 52, 71;
  --tl-surface: #ffffff;
  --tl-surface-hover: rgba(17, 24, 39, 0.05);

  /* 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 formal workspace background; content sits on crisp surfaces. */
html {
  background:
    linear-gradient(90deg, rgba(17, 24, 39, 0.028) 1px, transparent 1px),
    linear-gradient(180deg, rgba(17, 24, 39, 0.028) 1px, transparent 1px),
    #ffffff;
  background-size: 44px 44px, 44px 44px, auto;
  background-color: #ffffff;
  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.22em;
  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 {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  isolation: isolate;
}
.app::before {
  content: "";
  position: fixed;
  top: 72px;
  right: clamp(-160px, -6vw, -80px);
  width: min(42vw, 460px);
  aspect-ratio: 535 / 854;
  background: url("assets/jellyfish.svg") center / contain no-repeat;
  filter: grayscale(1);
  opacity: 0.04;
  pointer-events: none;
  z-index: -1;
}

/* Formal application nav */
.nav {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 14px clamp(18px, 3vw, 36px);
  background: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid var(--tl-line);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(14px);
}
.nav__logo { width: 30px; height: 45px; object-fit: contain; filter: grayscale(1); }
.nav__wordmark {
  font-weight: 760;
  letter-spacing: 0.01em;
  font-size: 1rem;
  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;
}

/* ─── Marked Areas: stage | review rail ────────────────────────────────── */
.marked {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(14px, 1.6vw, 28px);
  padding: 4px clamp(18px, 3vw, 36px) clamp(18px, 3vw, 36px);
}
.review {
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.review__hint { margin: 0; font-size: 0.84rem; color: var(--tl-muted); line-height: 1.5; }
.review .btn-primary { margin-top: auto; }

/* Surfaces: clean white panels with understated rules. */
.surface {
  background: var(--tl-surface);
  border: 1px solid var(--tl-line);
  border-radius: 8px;
  box-shadow: 0 18px 45px rgba(17, 24, 39, 0.08);
  backdrop-filter: blur(10px);
}

/* ─── Review-rail panel head ───────────────────────────────────────────── */
.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; }

/* scale calibration readout */
.scale {
  padding: 14px 0 0;
  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: #ffffff;
  border: 1px solid var(--tl-line);
  border-radius: 6px;
  padding: 8px 14px;
  min-height: 38px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.05);
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.btn-pill:hover { color: var(--tl-ink); background: var(--tl-surface-hover); border-color: rgba(var(--tl-primary-rgb), 0.3); }
.btn-pill:active { transform: translateY(1px); }
.btn-pill:disabled { opacity: 0.4; cursor: default; pointer-events: none; }

.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.46; }
.poly.is-selected { stroke-width: 3; }

/* Room cells: white-cased body + material-color edge so adjacent same-material
   cells show a crisp seam instead of blending into one blob. */
.room-poly .poly-body { transition: fill-opacity 160ms ease; }
.room-poly .poly-edge { pointer-events: none; transition: stroke-width 160ms ease; }
.room-poly:hover .poly-body { fill-opacity: 0.44; }
/* Selected cell: emphasized fill + heavier edge (overrides presentation attrs). */
.room-poly.is-selected .poly-body { fill-opacity: 0.5; }
.room-poly.is-selected .poly-edge { stroke-width: 3.4; }

/* Segment-level handles: light white grips, not a black vertex swarm.
   Corner = circle (drag/move), side = square (shift the whole edge). */
.handle-corner, .vertex {
  fill: #ffffff; stroke: var(--tl-ink); stroke-width: 1.6; cursor: grab;
}
.handle-corner:hover { fill: var(--tl-ink); }
/* Per-vertex grips: EVERY vertex of the selected ring, light + small (white
   fill, thin ink stroke) so dense detail reads as outlined dots, never a black
   mass. Hover grows the dot (scaled about its own center) and darkens it. */
.handle-vert {
  fill: #ffffff; stroke: var(--tl-ink); stroke-width: 1.4; cursor: grab;
  transform-box: fill-box; transform-origin: center;
  transition: transform 90ms ease, fill 90ms ease;
}
.handle-vert:hover { fill: var(--tl-ink); transform: scale(1.65); }
/* Corners emphasized: heavier stroke so the boundary structure stands out. */
.handle-vert--corner { stroke-width: 2; stroke: var(--tl-ink); }
.handle-side {
  fill: #ffffff; stroke: var(--tl-ink); stroke-width: 1.8; cursor: grab;
  transform-box: fill-box; transform-origin: center;
  transition: transform 90ms ease, fill 90ms ease;
}
.handle-side:hover { fill: var(--tl-ink); transform: scale(1.2); }
/* Snapped-to-curb cue: fill solid ink to read as "locked on the line". */
.vertex--snapped { fill: var(--tl-ink); stroke: var(--tl-ink); }

/* Material label sitting on the region (white halo via paint-order:stroke). */
.rlabel text {
  font-family: var(--font-mono);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ─── Tonnage headline (Takeoff) ───────────────────────────────────────── */
.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);
  color: #ffffff;
  background: linear-gradient(135deg, var(--tl-red-deep) 0%, var(--tl-red-hot) 100%);
  border: none;
  border-radius: 6px;
  padding: 13px 26px;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 10px 26px rgba(var(--tl-primary-rgb), 0.18);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 14px 34px rgba(var(--tl-primary-rgb), 0.24); }

/* ─── 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(2.5rem, 5.2vw, 4.8rem); line-height: 1; font-weight: 760; 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: 8px;
  text-align: center;
  background: var(--tl-surface);
  box-shadow: 0 18px 45px rgba(17, 24, 39, 0.08);
  backdrop-filter: blur(10px);
  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);
  background: #ffffff;
}
.mode-pill.is-live {
  color: var(--tl-red-hot);
  border-color: var(--tl-red-hot);
  background: rgba(var(--tl-primary-rgb), 0.08);
}
.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: #ffffff;
  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: rgba(17, 24, 39, 0.12);
  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: #ffffff;
  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__headline-tons {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  text-align: right;
}

.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: 8px;
  background: #ffffff;
}
.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(--tl-ink); border-color: var(--tl-ink); }
.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: #ffffff;
  border: 1px solid var(--tl-line);
  border-radius: 6px;
  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;
}

/* ─── Per-type editable thickness (Takeoff quote table) ───────────────── */
.thk-input {
  width: 62px;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--tl-ink);
  background: #ffffff;
  border: 1px solid var(--tl-line);
  border-radius: 6px;
  padding: 5px 8px;
}
.thk-input:focus { outline: none; border-color: var(--tl-red-hot); }

/* ─── Decision banner (accept | abstain) ──────────────────────────────── */
.decision {
  margin: 0 clamp(18px, 3vw, 36px) 4px;
  padding: 14px 18px;
  border-radius: 8px;
  border: 1px solid var(--tl-line);
  backdrop-filter: blur(10px);
}
/* ACCEPT: quiet, confident strip. */
.decision--accept {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  background: #fafafa;
  border-color: var(--tl-line);
}
/* ABSTAIN: loud "needs review" — monochrome emphasis via a heavier dark border. */
.decision--abstain {
  background: #ffffff;
  border-color: var(--tl-ink);
  box-shadow: 0 10px 24px rgba(var(--tl-primary-rgb), 0.08);
}
.decision__head { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.decision__tag {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 6px;
  border: 1px solid var(--tl-red-hot);
  color: var(--tl-red-hot);
  background: rgba(var(--tl-primary-rgb), 0.08);
  white-space: nowrap;
}
.decision__tag.is-ok {
  border-color: var(--tl-ink);
  color: var(--tl-ink);
  background: rgba(17, 24, 39, 0.06);
}
.decision__headline { font-size: 0.92rem; font-weight: 700; }
.decision__sub { margin: 8px 0 0; font-size: 0.84rem; color: var(--tl-muted); line-height: 1.5; }
.decision__reasons {
  margin: 10px 0 0;
  padding: 0 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.84rem;
  color: var(--tl-ink);
  line-height: 1.45;
}
.decision__reasons li::marker { color: var(--tl-red-hot); }
.decision__scale-prompt {
  margin: 10px 0 0;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--tl-red-hot);
}
.decision--accept .decision__scale-prompt {
  margin: 0;
  color: var(--tl-dim);
}

/* abstain warning on scale badge */
.scale__badge.is-warn { color: var(--tl-red-hot); border-color: var(--tl-red-hot); }

/* draft-only flag on the quote sheet */
.quote__review-flag {
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid var(--tl-red-hot);
  background: #ffffff;
  color: var(--tl-ink);
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.5;
}

@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; }
}

/* ─── Editing controls (Marked Areas review + stage) ───────────────────── */
.stage__tools { margin-left: auto; display: flex; align-items: center; gap: 6px; pointer-events: auto; }
.stage__zoom { margin-left: 10px; }
.stage__mode {
  font-family: var(--font-mono); font-size: 0.6rem; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--tl-ink);
  border: 1px solid var(--tl-ink); border-radius: 999px; padding: 4px 10px; background: #fff;
}
.btn-pill--danger { color: var(--tl-muted); }
.btn-pill--danger:hover { color: var(--tl-red-hot); border-color: var(--tl-red-hot); background: var(--tl-surface-hover); }
/* active edit tool */
.btn-pill.is-active { color: #fff; background: var(--tl-ink); border-color: var(--tl-ink); }
.stage__sep { width: 1px; align-self: stretch; margin: 2px 4px; background: var(--tl-line); }

.viewport.is-drawing { cursor: crosshair; }

/* live rectangle preview while boxing a Fill / Cut / New region */
.box-preview {
  fill: rgba(17, 24, 39, 0.10);
  stroke: var(--tl-ink);
  stroke-width: 1.6;
  stroke-dasharray: 6 4;
  pointer-events: none;
}
.box-preview.is-cut {
  fill: rgba(17, 24, 39, 0.04);
  stroke-dasharray: 4 4;
}
.poly-fill { pointer-events: auto; }

/* edge "add point" dots + in-progress draft handles */
.edge-add {
  fill: #ffffff; stroke: var(--tl-ink); stroke-width: 1.5;
  opacity: 0.45; cursor: copy; transition: opacity 120ms ease;
}
.edge-add:hover { opacity: 1; }
.vertex--draft { fill: #ffffff; stroke: var(--tl-ink); cursor: default; }
/* snapped vertex + detected-curb snap lines + contested-edge band */
.vertex--snapped { fill: var(--tl-ink); stroke: var(--tl-ink); }
.snapline { stroke: var(--tl-ink); opacity: 0.32; stroke-dasharray: 5 6; pointer-events: none; }
.dgband { pointer-events: none; }

/* candidate picker — propose N, pick one */
.candpick { display: flex; flex-direction: column; gap: 9px;
  padding-bottom: 14px; border-bottom: 1px solid var(--tl-line); }
.candpick__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cand {
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  border: 1px solid var(--tl-line); border-radius: 8px; background: #ffffff;
  padding: 7px 8px 8px; cursor: pointer; font: inherit;
  transition: border-color 130ms ease, transform 80ms ease;
}
.cand:hover { border-color: rgba(17, 24, 39, 0.4); }
.cand:active { transform: translateY(1px); }
.cand.sel { border-color: var(--tl-ink); box-shadow: inset 0 0 0 1px var(--tl-ink); }
.cand svg { display: block; width: 100%; height: 42px; }
.cand svg polygon { fill: rgba(17, 24, 39, 0.08); stroke: var(--tl-ink); stroke-width: 2; }
.cand__nm { font-family: var(--font-mono); font-size: 0.58rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--tl-ink); }
.cand__cf { font-family: var(--font-mono); font-size: 0.56rem; color: var(--tl-dim); }
.candpick__agree { display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.04em; color: var(--tl-muted); }
.candpick__agree b { color: var(--tl-ink); }

/* material reassignment — selected-region picker + takeoff inline dropdown */
.matpick { display: flex; flex-direction: column; gap: 8px; }
.matpick__row { display: flex; align-items: center; gap: 9px; }
.matpick__hint { margin: 0; font-size: 0.82rem; color: var(--tl-muted); line-height: 1.5; }
.matpick__select, .qt-type-select {
  font-family: var(--font-sans); font-size: 0.84rem; font-weight: 600;
  color: var(--tl-ink); background: #ffffff;
  border: 1px solid var(--tl-line); border-radius: 6px; padding: 7px 9px; cursor: pointer;
}
.matpick__select { flex: 1; }
.matpick__select:focus, .qt-type-select:focus { outline: none; border-color: var(--tl-ink); }
.qt-type-cell { display: inline-flex; align-items: center; gap: 8px; }
.qt-type-select { min-width: 132px; padding: 5px 8px; }

/* ─── Rooms panel (per-cell keep / remove) ─────────────────────────────── */
.rooms { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--tl-line); padding-top: 14px; }
.rooms__hint { margin: 0; font-size: 0.8rem; color: var(--tl-muted); line-height: 1.45; }
.rooms__list { display: flex; flex-direction: column; gap: 7px; }
.room {
  display: flex; align-items: flex-start; gap: 9px;
  border: 1px solid var(--tl-line); border-radius: 8px; padding: 8px 9px;
  cursor: pointer; transition: border-color 140ms ease, background 140ms ease;
}
.room:hover { border-color: rgba(17,24,39,0.3); }
.room.is-sel { border-color: var(--tl-ink); box-shadow: inset 0 0 0 1px var(--tl-ink); }
.room.is-excl { background: rgba(17,24,39,0.04); }
.room.is-excl .room__name { color: var(--tl-dim); text-decoration: line-through; }
.room__sw { width: 12px; height: 12px; border-radius: 3px; flex: none; margin-top: 2px; }
.room.is-excl .room__sw { opacity: 0.4; }
.room__body { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.room__name { font-size: 0.84rem; font-weight: 650; }
.room__meta { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.04em; color: var(--tl-dim); }
.room__reason { font-size: 0.72rem; color: var(--tl-red-hot); line-height: 1.35; margin-top: 2px; }
.room__toggle {
  flex: none; align-self: center;
  font-family: var(--font-mono); font-size: 0.58rem; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--tl-ink);
  background: #ffffff; border: 1px solid var(--tl-ink); border-radius: 6px;
  padding: 5px 9px; cursor: pointer; white-space: nowrap;
}
.room__toggle:hover { background: var(--tl-ink); color: #ffffff; }
.room__toggle.is-excl { color: var(--tl-muted); border-color: var(--tl-line); }
.room__toggle.is-excl:hover { color: #ffffff; background: var(--tl-dim); border-color: var(--tl-dim); }

/* excluded room polygon on the plan */
.poly.is-excluded { cursor: pointer; }

/* ============================================================================
   MODE TOGGLE (Simple ⇄ Developer) — sits in the nav
   ============================================================================ */
.mode-toggle {
  display: inline-flex;
  margin-left: auto;
  border: 1px solid var(--tl-line);
  border-radius: 999px;
  padding: 2px;
  background: var(--tl-black-soft);
}
.mode-toggle__btn {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tl-dim);
  padding: 6px 14px;
  border-radius: 999px;
  transition: background 0.15s, color 0.15s;
}
.mode-toggle__btn.is-active {
  background: var(--tl-ink);
  color: #fff;
}
/* nav__project should no longer auto-push; toggle owns the margin-left:auto */
.nav .nav__project { margin-left: 18px; }

/* ============================================================================
   SIMPLE MODE — estimator-facing takeoff sheet
   ============================================================================ */
.simple {
  width: min(960px, 94vw);
  margin: 0 auto;
  padding: 28px 0 80px;
}
.simple__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 16px;
}
.simple-sheet {
  padding: clamp(22px, 3vw, 40px);
  border-radius: 14px;
}
.simple-sheet__flag {
  margin: 0 0 22px;
  padding: 12px 16px;
  border: 1px solid #e6c200;
  background: #fffbe6;
  border-radius: 8px;
  font-size: 0.86rem;
  color: #6b5800;
}

/* sheet header */
.sheet-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding-bottom: 22px;
  border-bottom: 2px solid var(--tl-ink);
}
.sheet-head__title {
  margin: 2px 0 6px;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  letter-spacing: -0.01em;
}
.sheet-head__total {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sheet-head__total-num {
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  font-weight: 780;
  line-height: 1;
  letter-spacing: -0.02em;
}

/* contractor inputs row */
.sheet-inputs {
  display: flex;
  gap: 18px;
  margin: 22px 0 8px;
  flex-wrap: wrap;
}
.field { display: flex; flex-direction: column; gap: 5px; flex: 1 1 220px; }
.field--narrow { flex: 0 0 120px; position: relative; }
.field__label {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tl-dim);
}
.field__input {
  font: inherit;
  font-size: 0.95rem;
  padding: 9px 12px;
  border: 1px solid var(--tl-line);
  border-radius: 8px;
  background: #fff;
  color: var(--tl-ink);
}
.field__input:focus { outline: 2px solid var(--tl-ink); outline-offset: -1px; }
.field__hint {
  position: absolute;
  right: 10px;
  bottom: 9px;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tl-dim);
  pointer-events: none;
}

/* takeoff table */
.takeoff-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 18px;
  font-size: 0.9rem;
}
.takeoff-table thead th {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tl-dim);
  padding: 0 10px 10px;
  border-bottom: 1px solid var(--tl-line);
}
.takeoff-table th.tk-type { text-align: left; }
.csi-head td {
  padding: 16px 10px 7px;
  border-bottom: 1px solid var(--tl-line);
}
.csi-code {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--tl-ink);
  background: var(--tl-black-soft);
  padding: 3px 8px;
  border-radius: 5px;
  margin-right: 10px;
}
.csi-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--tl-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.takeoff-table td {
  padding: 9px 10px;
  text-align: right;
  border-bottom: 1px solid rgba(17,24,39,0.06);
}
.takeoff-table td.tk-type { text-align: left; }
.tk-type-cell { display: inline-flex; align-items: center; gap: 9px; }
.tk-sw { width: 14px; height: 14px; border-radius: 3px; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15); }
.tk-linetotal { font-variant-numeric: tabular-nums; font-weight: 600; }
.takeoff-table .tk-num { font-variant-numeric: tabular-nums; }
.cell-input {
  width: 62px;
  font: inherit;
  font-size: 0.88rem;
  text-align: right;
  padding: 5px 7px;
  border: 1px solid var(--tl-line);
  border-radius: 6px;
  background: #fff;
}
.cell-input:focus { outline: 2px solid var(--tl-ink); outline-offset: -1px; }
.cell-price { display: inline-flex; align-items: center; gap: 1px; justify-content: flex-end; }
.cell-input--price { width: 70px; }
.cell-unit { color: var(--tl-dim); font-size: 0.78rem; }
.takeoff-table tr.is-excluded { color: var(--tl-dim); }
.takeoff-table tr.is-excluded .tk-type-cell { text-decoration: line-through; }

/* totals */
.tk-foot-label {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tl-muted);
  padding-top: 12px;
}
.tk-sub td { border-bottom: none; padding-top: 10px; }
.tk-internal td { color: var(--tl-dim); }
.tk-total td {
  border-top: 2px solid var(--tl-ink);
  font-size: 1.1rem;
  font-weight: 780;
  color: var(--tl-ink);
  padding-top: 12px;
}
.tk-total .tk-foot-label { color: var(--tl-ink); font-size: 0.8rem; }
.sheet-foot { margin-top: 24px; padding-top: 14px; border-top: 1px solid var(--tl-line); }

/* ============================================================================
   PRINT — PDF export: isolate the sheet, drop all chrome
   ============================================================================ */
@media print {
  html { background: #fff !important; }
  .app::before, .nav, .simple__actions, .buildtag, .live-error { display: none !important; }
  .simple { width: 100%; padding: 0; margin: 0; }
  .simple-sheet { box-shadow: none; border: none; border-radius: 0; padding: 0; }
  .tk-internal { display: none; }            /* margin line is internal-only */
  .cell-input, .field__input { border: none; padding: 0; background: transparent; }
  .field__hint { display: none; }
  @page { margin: 14mm; }
}

/* ============================================================================
   SIMPLE-MODE marked-areas refinements
   ============================================================================ */
/* The PLAN is the product: a big viewport with an IN-FLOW left tool rail that
   never floats over the drawing. Rail | plan are real columns — no overlap. */
.stage--leftrail {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  overflow: hidden;
  min-height: calc(100vh - 188px);   /* fill the viewport so the plan is large */
}
.stage--leftrail .stage__bar {
  position: static;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: 138px;
  flex: none;
  padding: 14px 12px;
  border-right: 1px solid var(--tl-line);
  background: #fff;
  z-index: 2;
}
.stage--leftrail .stage__sheet {
  position: static; margin: 0 0 6px; padding: 0; background: none; border: none;
  font-size: 0.6rem; line-height: 1.3;
}
.stage--leftrail .stage__tools {
  position: static; display: flex; flex-direction: column; align-items: stretch;
  gap: 5px; width: auto; padding: 0; margin: 0; background: none; border: none; box-shadow: none;
}
.stage--leftrail .stage__tools .btn-pill {
  width: 100%; text-align: left; justify-content: flex-start;
  font-size: 0.64rem; padding: 7px 10px; min-height: 0;
}
.stage--leftrail .stage__zoom {
  position: static; margin: auto 0 0; display: flex; gap: 5px;
}
.stage--leftrail .stage__zoom .btn-pill { flex: 1; justify-content: center; text-align: center; padding: 7px 4px; }
.stage--leftrail .stage__sep { width: 100%; height: 1px; background: var(--tl-line); margin: 4px 0; }
.stage--leftrail .viewport { position: static; flex: 1; min-width: 0; padding: 0; }

/* ============================================================================
   DECISION BANNER — "% confident" + plain-language checklist
   ============================================================================ */
.decision__head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.decision__pct {
  font-size: 1.6rem; font-weight: 820; letter-spacing: -0.02em; line-height: 1;
  color: #b25e00;
}
.decision__pct.is-ok { color: #2f7d54; }
.decision .decision__headline { font-weight: 600; font-size: 0.98rem; color: var(--tl-ink); }
.decision__reasons { margin: 11px 0 0; padding-left: 20px; list-style: disc; }
.decision__reasons li { margin: 5px 0; color: var(--tl-muted); font-size: 0.92rem; line-height: 1.4; }

/* decision banner = collapsible dropdown */
.decision__toggle {
  margin-left: auto;
  appearance: none;
  border: 1px solid var(--tl-line);
  background: #fff;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tl-muted);
  padding: 6px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.decision__toggle:hover { background: var(--tl-black-soft); color: var(--tl-ink); }
.decision__reasons { display: none; }
.decision__reasons.is-open { display: block; }

/* decision dropdown v2: details container holds checklist + per-region conf/error */
.decision__reasons { display: block; }   /* override earlier hide rule; visibility now owned by .decision__details */
.decision__details { display: none; margin-top: 12px; }
.decision__details.is-open { display: block; }
.decision__regions { margin-top: 12px; }
.decision__regions-head,
.dregion {
  display: grid;
  grid-template-columns: 1fr 120px 110px;
  gap: 10px;
  align-items: center;
  padding: 6px 0;
}
.decision__regions-head {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tl-dim);
  border-bottom: 1px solid var(--tl-line);
}
.decision__regions-head span:not(:first-child),
.dregion__conf, .dregion__err { text-align: right; font-variant-numeric: tabular-nums; }
.dregion { border-bottom: 1px solid rgba(17,24,39,0.06); font-size: 0.9rem; }
.dregion__name { color: var(--tl-ink); font-weight: 600; }
.dregion__conf { color: var(--tl-muted); }
.dregion__err { color: #b25e00; font-weight: 600; }

/* percent is neutral, not colored */
.decision__pct, .decision__pct.is-ok { color: var(--tl-ink); }

/* ============================================================================
   HERO — centered upload intake
   ============================================================================ */
.hero {
  max-width: 820px;
  margin: 0 auto;
  min-height: calc(100vh - 160px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 20px 80px;
}
.hero .lede { margin-left: auto; margin-right: auto; max-width: 560px; }
.hero .dropzone { width: 100%; max-width: 620px; margin-left: auto; margin-right: auto; cursor: pointer; }
.supporting-files {
  width: 100%;
  max-width: 620px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 24px auto 12px;
}
.supporting-file {
  appearance: none;
  border: 1px solid var(--tl-line);
  border-radius: 8px;
  background: var(--tl-surface);
  color: var(--tl-ink);
  cursor: pointer;
  padding: 12px 14px;
  text-align: left;
}
.supporting-file:hover { border-color: var(--tl-red-hot); background: var(--tl-surface-hover); }
.supporting-file span {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tl-dim);
}
.supporting-file strong {
  display: block;
  margin-top: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.88rem;
}
.hero__sample {
  margin-top: 18px;
  appearance: none;
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tl-dim);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hero__sample:hover { color: var(--tl-ink); }

/* Percent Error label */
.decision__pct-label {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--tl-muted);
  margin-right: 2px;
}

/* ============================================================================
   PRINT page 1 — highlighted site plan (hidden on screen, first page in PDF)
   ============================================================================ */
.print-plan { display: none; }
.print-plan__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
@media print {
  .print-plan {
    display: block;
    page-break-after: always;
  }
  .print-plan__svg {
    display: block;
    width: 100%;
    height: auto;
    max-height: 88vh;
    border: 1px solid #ccc;
  }
  /* the estimate sheet starts on its own (second) page */
  .simple-sheet { page-break-before: always; }
}

/* print-only output table (description · qty · unit) */
.takeoff-print-sheet { display: none; }
.takeoff-print { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 0.95rem; }
.takeoff-print-logo {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 12px 0 10px;
}
.takeoff-print-logo__mark {
  width: 24px;
  height: 22px;
  background: #55bf18;
  clip-path: polygon(0 0, 36% 0, 36% 27%, 100% 27%, 100% 100%, 65% 100%, 65% 57%, 36% 57%, 36% 100%, 0 100%);
}
.takeoff-print-logo__houzz {
  font-size: 1.45rem;
  font-weight: 760;
  letter-spacing: 0;
  color: var(--tl-ink);
}
.takeoff-print-logo__pro {
  font-size: 1.15rem;
  letter-spacing: 0;
  color: var(--tl-muted);
}
.takeoff-print thead th {
  text-align: right;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--tl-ink);
  padding: 0 10px 6px;
  border-bottom: 1px solid #444;
}
.takeoff-print th.tk-type, .takeoff-print td.tk-type { text-align: left; }
.takeoff-print th.tk-unit, .takeoff-print td.tk-unit { text-align: left; width: 58px; }
.takeoff-print th.tk-num, .takeoff-print td.tk-num { width: 110px; }
.takeoff-print td {
  padding: 7px 10px;
  text-align: right;
  border: 1px solid #444;
  font-variant-numeric: tabular-nums;
}
.takeoff-print td.tk-type { font-weight: 400; }
.takeoff-print .tk-type-cell { display: inline-flex; align-items: center; gap: 8px; }
.takeoff-print .tk-sw {
  width: 16px;
  height: 12px;
  border: 1px solid rgba(0,0,0,0.18);
}
.takeoff-print__group td {
  background: #f4f4f4;
  text-align: left;
  font-weight: 400;
}
@media print {
  .screen-only { display: none !important; }
  .sheet-inputs { display: none !important; }
  .sheet-head, .sheet-foot, .simple-sheet__flag { display: none !important; }
  .simple-sheet.surface {
    padding: 0 !important;
    box-shadow: none !important;
    background: #fff !important;
  }
  .takeoff-print-sheet {
    display: block !important;
    max-width: 170mm;
    margin: 8mm auto 0;
  }
  .takeoff-print { display: table !important; }
}

/* hero headline emphasis: action phrases pop, connective dims */
.hero__hl { color: var(--tl-ink); }
.hero__dim { color: var(--tl-dim); font-weight: 600; }