/* ============================================================
   National Lumber — /estimate  ·  "The estimating desk"
   Page styles for the AI plan read (NL-09) and the planning
   estimator (NL-08). Loads after styles.css; the phone block at
   the end of this file wins over everything above it.
   Every selector the scripts rely on (ids, .ai-*, .ps-*, .est-*,
   .takeoff-sheet, .dropzone, .file-list …) keeps its name.
   ============================================================ */

:root {
  --est-ease:cubic-bezier(.22,.61,.2,1);
  --est-grid:rgba(16,36,65,.075);
}

/* ------------------------------------------------------------
   1. HERO — sheet index on navy, a plan drawing itself
   ------------------------------------------------------------ */
.est-hero {
  background:var(--navy-900);
  border-bottom:1px solid rgba(217,179,106,.28);
}
.est-hero.grid-paper {
  background-image:
    linear-gradient(var(--line-paper-faint) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-paper-faint) 1px, transparent 1px);
  background-size:36px 36px, 36px 36px;
}
.est-hero .inner { padding-block:clamp(26px, 3.4vw, 40px) clamp(22px, 3vw, 34px); }
.est-hero-grid {
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(300px,.95fr);
  gap:clamp(24px,4vw,64px); align-items:center; position:relative; z-index:2;
}
.est-hero h1 { max-width:14ch; font-size:clamp(2.1rem, 4.2vw, 3.4rem); line-height:.98; letter-spacing:.005em; }
.est-hero h1 em { font-style:normal; color:var(--gold-300); }
.est-hero .lead { max-width:56ch; margin-top:10px; }
.est-hero .lead a { color:var(--paper); text-decoration-color:rgba(217,179,106,.6); text-underline-offset:3px; }
.est-hero .lead a:hover { color:var(--gold-300); }

/* the plan in the background — drawn by code, decorative only */
.est-hero-plan {
  position:absolute; z-index:1; pointer-events:none;
  right:clamp(-200px, -9vw, -60px); top:54%; transform:translateY(-50%);
  width:clamp(560px, 56vw, 820px); height:auto;
  color:var(--paper); opacity:.95;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 26%, #000 100%);
  mask-image:linear-gradient(90deg, transparent 0%, #000 26%, #000 100%);
}
.est-hero-plan * { vector-effect:non-scaling-stroke; }
.est-hero-plan .w { fill:none; stroke:currentColor; stroke-opacity:.22; stroke-width:4.5; stroke-linejoin:miter; }
.est-hero-plan .p { fill:none; stroke:currentColor; stroke-opacity:.18; stroke-width:1.4; }
.est-hero-plan .d { fill:none; stroke:var(--gold-300); stroke-opacity:.55; stroke-width:1; }
.est-hero-plan .g { fill:none; stroke:currentColor; stroke-opacity:.22; stroke-width:1.2; stroke-dasharray:6 5; }
.est-hero-plan text { font-family:var(--font-mono); font-size:9px; letter-spacing:.14em; fill:currentColor; fill-opacity:.42; text-transform:uppercase; }
.est-hero-plan text.dm { fill:var(--gold-300); fill-opacity:.8; font-size:8.5px; }
/* the walls ink themselves in on load */
.js .est-hero-plan .w { stroke-dasharray:2400; stroke-dashoffset:2400; animation:estInk 2.6s var(--est-ease) .15s forwards; }
.js .est-hero-plan .p, .js .est-hero-plan .g, .js .est-hero-plan .d, .js .est-hero-plan text { opacity:0; animation:estFade .9s var(--est-ease) 1.3s forwards; }
@keyframes estInk { to { stroke-dashoffset:0; } }
@keyframes estFade { to { opacity:1; } }

/* process rail under the lead */
.est-rail {
  list-style:none; margin:clamp(14px,2vw,22px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0;
  border-top:1px solid rgba(246,244,238,.18);
}
.est-rail li { position:relative; padding:10px 14px 0 0; display:grid; gap:2px; }
.est-rail .ico { width:34px; height:34px; margin:2px 0 4px; opacity:.92; }
.est-rail li + li { padding-left:14px; border-left:1px solid rgba(246,244,238,.12); }
.est-rail .n { font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; color:var(--gold-300); }
.est-rail b { font-family:var(--font-display); font-weight:700; font-size:.96rem; letter-spacing:.04em; text-transform:uppercase; color:var(--paper); line-height:1.1; }
.est-rail span:not(.n) { font-size:.8rem; line-height:1.38; color:rgba(237,241,247,.68); }
.est-rail li::before {
  content:""; position:absolute; top:-1px; left:0; width:38px; height:1px; background:var(--gold);
}
.est-rail li + li::before { left:14px; }

/* the two sheet tabs */
.est-hero-tools { display:grid; gap:12px; }
.est-tab {
  position:relative; display:grid; grid-template-columns:1fr auto; gap:6px 14px; align-items:start;
  padding:14px 18px 13px 20px; text-decoration:none; color:var(--paper);
  background:rgba(10,20,40,.8); border:1px solid rgba(246,244,238,.16); border-radius:var(--r);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); box-shadow:0 18px 40px rgba(5,12,26,.35);
  transition:transform .28s var(--est-ease), border-color .28s var(--est-ease), background .28s var(--est-ease);
  overflow:hidden;
}
.est-tab::before {
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--gold);
  transform:scaleY(.35); transform-origin:top; transition:transform .35s var(--est-ease);
}
.est-tab:hover, .est-tab:focus-visible { transform:translateY(-2px); border-color:rgba(217,179,106,.55); background:rgba(16,36,65,.9); outline:none; }
.est-tab:hover::before, .est-tab:focus-visible::before { transform:scaleY(1); }
.est-tab .no { grid-column:1; font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:rgba(237,241,247,.6); }
.est-tab .st {
  grid-column:2; grid-row:1; display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-300); white-space:nowrap;
}
.est-tab .st i { width:7px; height:7px; border-radius:50%; background:var(--gold-300); box-shadow:0 0 0 0 rgba(217,179,106,.6); }
.est-tab .st.live i { animation:estPulse 2.2s ease-out infinite; }
@keyframes estPulse { 0% { box-shadow:0 0 0 0 rgba(217,179,106,.55); } 70% { box-shadow:0 0 0 9px rgba(217,179,106,0); } 100% { box-shadow:0 0 0 0 rgba(217,179,106,0); } }
.est-tab .t { grid-column:1 / -1; margin:0; font-family:var(--font-display); font-weight:700; font-size:clamp(1.35rem, 1.9vw, 1.6rem); text-transform:uppercase; letter-spacing:.02em; color:var(--paper); line-height:1; }
.est-tab p { grid-column:1 / -1; margin:0; font-size:.9rem; line-height:1.42; color:rgba(237,241,247,.74); max-width:44ch; }
.est-tab .go {
  grid-column:1 / -1; margin-top:6px; font-family:var(--font-display); font-weight:600; font-size:.92rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--gold-300);
  display:inline-flex; align-items:center; gap:8px;
}
.est-tab .go::after { content:"→"; }

/* staggered entrance */
.js .est-hero-copy > *, .js .est-hero-tools > * { opacity:0; transform:translateY(12px); animation:estRise .7s var(--est-ease) forwards; }
.js .est-hero-copy > :nth-child(1) { animation-delay:.05s; }
.js .est-hero-copy > :nth-child(2) { animation-delay:.14s; }
.js .est-hero-copy > :nth-child(3) { animation-delay:.24s; }
.js .est-hero-copy > :nth-child(4) { animation-delay:.36s; }
.js .est-hero-tools > :nth-child(1) { animation-delay:.3s; }
.js .est-hero-tools > :nth-child(2) { animation-delay:.42s; }
@keyframes estRise { to { opacity:1; transform:none; } }

/* ------------------------------------------------------------
   2. TOOL TITLE BLOCK — a sheet number and a status lamp
   ------------------------------------------------------------ */
.est-tool { padding-block:clamp(28px, 3.4vw, 44px) clamp(30px, 4vw, 54px); }
.est-tool.grid-paper {
  background-image:
    linear-gradient(var(--est-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--est-grid) 1px, transparent 1px);
  background-size:24px 24px;
}
.tool-head {
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:0 clamp(16px,2.4vw,28px); align-items:start;
  margin-bottom:clamp(18px, 2.4vw, 28px) !important;
  padding-bottom:clamp(14px, 1.8vw, 20px); border-bottom:1px solid var(--line-strong);
}
.tool-no {
  display:flex; flex-direction:column; justify-content:center; align-items:center; align-self:start;
  min-width:84px; padding:12px 12px 10px; margin-top:2px; background:var(--navy-900); color:var(--gold-300); border-radius:var(--r);
  font-family:var(--font-mono); font-size:10px; letter-spacing:.2em; line-height:1;
  box-shadow:var(--shadow-1);
}
.tool-no b { display:block; margin-top:4px; font-family:var(--font-display); font-weight:700; font-size:1.7rem; letter-spacing:.02em; color:var(--paper); line-height:.95; }
.tool-txt { min-width:0; }
.tool-head .sheet-eyebrow { margin-bottom:6px; }
.tool-head h2 { font-size:clamp(1.55rem, 2.6vw, 2.1rem); max-width:30ch; }
.tool-head .lead { margin-top:8px; max-width:74ch; font-size:clamp(.94rem, 1.15vw, 1rem); }
.tool-head .lamp {
  display:inline-flex; align-items:center; gap:7px; color:var(--gold-600);
}
.tool-head .lamp i { width:7px; height:7px; border-radius:50%; background:var(--gold); animation:estLamp 2.2s ease-out infinite; }
@keyframes estLamp { 0% { box-shadow:0 0 0 0 rgba(186,139,55,.55); } 70% { box-shadow:0 0 0 8px rgba(186,139,55,0); } 100% { box-shadow:0 0 0 0 rgba(186,139,55,0); } }

.est-split { align-items:start; gap:clamp(28px, 4vw, 60px); }
@media (min-width:1100px) { .est-split { grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); } }

/* ------------------------------------------------------------
   3. THE FORM — numbered like a set of instructions
   ------------------------------------------------------------ */
.est-status { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin:0 0 10px; min-height:1em; display:flex; align-items:center; gap:8px; }
.est-status::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--gold); flex:none; }
.est-status:empty::before { display:none; }

#ai-form legend, #est-form legend, .est-sr {
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
.ai-step {
  display:flex; align-items:center; gap:10px; margin:0 0 12px;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
}
.ai-step b { font-weight:400; color:var(--navy-900); }
.ai-step::after { content:""; flex:1; height:1px; background:var(--line); }
#ai-step-2 { margin-top:22px; }
.est-step-3 { margin-top:22px; }
.field label { color:var(--ink-2); }
.field input, .field select, .field textarea { min-height:48px; }
.field select { padding-right:38px; }
#ai-form .form-grid { gap:14px; }
#ai-form .form-grid .field:first-child { grid-column:1 / -1; }
#ai-form .ai-notes { margin-top:0; }
#ai-form .ai-notes > summary { display:none; }
#ai-form textarea { min-height:96px; }
#ai-form .ai-notes .field > label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }

/* -- the dropzone as a sheet of paper -- */
#ai-field-files { position:relative; }
#ai-dropzone {
  position:relative; isolation:isolate;
  padding:26px 24px 22px; min-height:176px;
  display:flex; flex-direction:column; justify-content:center; align-items:center; gap:2px;
  border:1.5px dashed var(--line-strong); border-radius:var(--r); background:var(--white);
  background-image:
    linear-gradient(var(--est-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--est-grid) 1px, transparent 1px);
  background-size:18px 18px; background-position:center;
  box-shadow:var(--shadow-1);
  transition:border-color .25s var(--est-ease), background-color .25s var(--est-ease), box-shadow .25s var(--est-ease), transform .25s var(--est-ease);
}
#ai-dropzone:hover, #ai-dropzone:focus-visible, #ai-dropzone.drag {
  border-color:var(--gold); background-color:#FFFDF7; box-shadow:0 2px 6px rgba(16,36,65,.08), 0 18px 44px rgba(186,139,55,.18);
  outline:none;
}
#ai-dropzone.drag { transform:scale(1.01); border-style:solid; }
/* crop marks on the sheet */
#ai-dropzone .dz-cm, #ai-dropzone .dz-cm::before, #ai-dropzone .dz-cm::after,
#ai-dropzone::before, #ai-dropzone::after {
  content:""; position:absolute; width:14px; height:14px; pointer-events:none; border:0 solid var(--line-strong); z-index:1;
}
#ai-dropzone::before { top:8px; left:8px; border-top-width:1px; border-left-width:1px; }
#ai-dropzone::after { top:8px; right:8px; border-top-width:1px; border-right-width:1px; }
#ai-dropzone .dz-cm { inset:0; width:auto; height:auto; border:0; }
#ai-dropzone .dz-cm::before { bottom:8px; left:8px; border-bottom-width:1px; border-left-width:1px; }
#ai-dropzone .dz-cm::after { bottom:8px; right:8px; border-bottom-width:1px; border-right-width:1px; }
/* a stack of sheets that fans open on hover */
#ai-dropzone .dz-icon {
  position:relative; margin:0 auto 14px; width:50px; height:60px; border-radius:2px;
  background:var(--navy-900); color:var(--gold-300); display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 16px rgba(16,36,65,.22);
  transition:transform .35s var(--est-ease);
}
#ai-dropzone .dz-icon::before, #ai-dropzone .dz-icon::after {
  content:""; position:absolute; inset:0; z-index:-1; border-radius:2px;
  background:var(--paper-3); border:1px solid var(--line-strong);
  transition:transform .4s var(--est-ease);
}
#ai-dropzone .dz-icon::before { transform:translate(-6px, 4px) rotate(-7deg); background:var(--paper-2); }
#ai-dropzone .dz-icon::after { transform:translate(6px, 4px) rotate(6deg); }
#ai-dropzone:hover .dz-icon, #ai-dropzone.drag .dz-icon { transform:translateY(-4px); }
#ai-dropzone:hover .dz-icon::before, #ai-dropzone.drag .dz-icon::before { transform:translate(-16px, 8px) rotate(-14deg); }
#ai-dropzone:hover .dz-icon::after, #ai-dropzone.drag .dz-icon::after { transform:translate(16px, 8px) rotate(13deg); }
#ai-dropzone .dz-icon svg { width:22px; height:22px; }
#ai-dropzone b { font-size:1.28rem; letter-spacing:.03em; }
#ai-dropzone span { font-size:.88rem; max-width:42ch; line-height:1.4; }
#ai-dropzone .dz-spec {
  max-width:none; display:inline-flex !important; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:12px !important;
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3);
}
#ai-dropzone .dz-spec i { font-style:normal; padding:4px 8px 3px; border:1px solid var(--line); border-radius:2px; background:var(--paper); }

/* staged files read like a sheet index */
#ai-file-list { margin-top:10px; gap:6px; }
#ai-file-list li { padding:9px 10px 9px 12px; border-left:3px solid var(--gold); }
#ai-file-list .fglyph { color:var(--gold-600); font-size:14px; }
#ai-file-list .fthumb { display:none; }
#ai-file-list .fname { font-weight:500; color:var(--ink); }
#ai-file-msg { margin:8px 0 0; }
#ai-file-msg:empty { display:none; }

/* run bar (static on wide screens) */
.ai-bar { margin-top:24px; padding-top:18px; border-top:1px solid var(--line); }
.ai-bar-cta { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
#ai-run { padding:14px 26px 13px; font-size:1.05rem; box-shadow:0 8px 22px rgba(186,139,55,.28); }
#ai-run:hover { box-shadow:0 8px 22px rgba(16,36,65,.22); }
.ai-bar-note { display:none; }
.est-consent { margin-top:12px; max-width:64ch; font-size:11px; line-height:1.55; }
.est-honest { margin-top:16px; position:relative; }
.est-honest.has-seal { padding-right:150px; }
.est-honest .seal { position:absolute; right:14px; top:50%; width:120px; height:auto; transform:translateY(-50%) rotate(6deg); opacity:.9; }
@media (max-width:1180px) and (min-width:861px) { .est-honest.has-seal { padding-right:16px; padding-bottom:96px; } .est-honest .seal { top:auto; bottom:10px; transform:rotate(6deg); } }
#ai-actions[hidden], #ai-cancel[hidden], #ai-share[hidden], #ai-pdf[hidden],
#ps-share[hidden], #ps-expand[hidden], #ps-dl-dxf[hidden],
#ps-full-share[hidden], #ps-full-dxf[hidden], #est-tiers[hidden],
#ps-wrap[hidden], #ps-dl[hidden], #ps-note[hidden] { display:none !important; }

/* desktop keeps the phone chrome off */
.nl-seg { display:none; }
.ai-capture { display:none; }
.nl-narrow { display:none; }
.ps-full:not([open]) { display:none; }

/* ------------------------------------------------------------
   4. THE RESULT SHEET (aside)
   ------------------------------------------------------------ */
.est-aside { position:relative; }
.est-aside .takeoff-sheet { box-shadow:0 1px 2px rgba(16,36,65,.06), 0 14px 40px rgba(16,36,65,.12); }
.est-aside .takeoff-sheet td.qty { white-space:nowrap; }
.ai-sheet .ts-head { background:var(--paper); }
.ai-sheet .ts-foot { align-items:flex-start; }
.ai-sheet .ts-foot .s { flex:none; padding-top:2px; }
.ai-sheet .ts-foot .v {
  font-family:var(--font-mono); font-weight:400; font-size:10.5px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--gold-300); text-align:right; max-width:36ch; line-height:1.55;
}

/* what comes back — painted before the first read, replaced by the read */
.ai-idle { padding:0; }
.ai-idle-plan { position:relative; aspect-ratio:16/6.2; background:var(--paper-2); border-bottom:1px solid var(--line); overflow:hidden; }
.ai-idle-plan svg { position:absolute; inset:0; width:100%; height:100%; color:var(--navy-900); }
.ai-idle-plan .w { fill:none; stroke:currentColor; stroke-opacity:.34; stroke-width:3; stroke-dasharray:7 5; }
.ai-idle-plan .p { fill:none; stroke:currentColor; stroke-opacity:.22; stroke-width:1; stroke-dasharray:4 4; }
.ai-idle-plan .d { fill:none; stroke:var(--gold-600); stroke-opacity:.7; stroke-width:1; }
.ai-idle-plan text { font-family:var(--font-mono); font-size:8px; letter-spacing:.14em; fill:currentColor; fill-opacity:.45; text-transform:uppercase; }
.ai-idle-plan .seal { position:absolute; right:14px; top:10px; width:108px; height:auto; transform:rotate(-9deg); opacity:.92; filter:drop-shadow(0 1px 0 rgba(255,255,255,.6)); }
.ai-idle-plan .tag {
  position:absolute; left:12px; bottom:10px; margin:0;
  font-family:var(--font-mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
  background:rgba(255,255,255,.85); padding:4px 7px 3px; border:1px solid var(--line);
}
.ai-idle-plan .scan {
  position:absolute; left:0; right:0; top:0; height:1px; background:linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold) 70%, transparent);
  opacity:.75; animation:estScanY 4.8s ease-in-out infinite alternate;
}
@keyframes estScanY { from { top:8%; } to { top:92%; } }
.ai-idle-list { list-style:none; margin:0; padding:0; }
.ai-idle-list li {
  display:grid; grid-template-columns:44px auto minmax(0,1fr); grid-template-areas:"ico n b" "ico d d"; gap:3px 14px; align-items:start;
  padding:12px 18px; border-bottom:1px solid var(--line-faint);
}
.ai-idle-list .ico { grid-area:ico; width:40px; height:40px; margin-top:2px; }
.ai-idle-list .n { grid-area:n; align-self:center; font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; color:var(--gold-600); }
.ai-idle-list b { grid-area:b; }
.ai-idle-list span:not(.n) { grid-area:d; }
.ai-idle-list b { font-family:var(--font-display); font-weight:600; font-size:1.04rem; letter-spacing:.04em; text-transform:uppercase; color:var(--navy-900); line-height:1.1; }
.ai-idle-list span:not(.n) { grid-area:d; font-size:.86rem; line-height:1.42; color:var(--ink-2); }
.ai-idle-meta { margin:0; padding:11px 18px; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); background:var(--paper); }

/* blocks the read paints */
.ai-chip {
  display:inline-block; font-family:var(--font-mono); font-size:9px; letter-spacing:.12em; line-height:1;
  text-transform:uppercase; padding:4px 6px 3px; border-radius:2px; border:1px solid transparent; white-space:nowrap;
}
.ai-chip.c-high { background:var(--gold); border-color:var(--gold); color:var(--navy-950); }
.ai-chip.c-med  { background:var(--ink); border-color:var(--ink); color:var(--paper); }
.ai-chip.c-low  { background:transparent; border-color:var(--line-strong); color:var(--ink-2); }
.ai-sheet td.conf { text-align:right; padding-left:0; }
.ai-block { padding:14px 18px; border-bottom:1px solid var(--line-faint); }
.ai-block .k { display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:6px; }
.ai-block p { margin:0; font-size:.92rem; color:var(--ink); }
.ai-block p + p { margin-top:8px; }
.ai-block ul { margin:0; padding-left:18px; font-size:.9rem; color:var(--ink-2); }
.ai-block li { margin-top:5px; }
.ai-block.qs { border-left:3px solid var(--gold); background:var(--gold-100); }
.ai-block.qs p, .ai-block.qs li { color:var(--ink); }
.ai-scope { font-family:var(--font-mono); font-size:.78rem; letter-spacing:.04em; color:var(--ink-2); overflow-wrap:anywhere; }
.ai-note-sm { font-size:.82rem !important; color:var(--ink-3) !important; }
.ai-rownote { display:block; color:var(--gold-600); font-size:.8rem; margin-top:2px; }
.ai-err-code { display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--err); margin-bottom:6px; }
/* honest indeterminate progress — a scan line, never a fake percentage */
.ai-progress { height:3px; background:var(--paper-3); overflow:hidden; margin:12px 0 10px; }
.ai-progress i { display:block; height:100%; width:34%; background:var(--gold); animation:aiScan 1.8s cubic-bezier(.45,.05,.55,.95) infinite alternate; }
@keyframes aiScan { from { transform:translateX(-100%); } to { transform:translateX(295%); } }
.ai-elapsed { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-top:8px !important; }
.ai-method { border-left:3px solid var(--navy-900); background:var(--white); }
.ai-method dl { display:grid; grid-template-columns:auto 1fr; gap:3px 12px; margin:8px 0 0; font-size:.84rem; }
.ai-method dt { font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); padding-top:2px; }
.ai-method dd { margin:0; color:var(--ink-2); }

/* preliminary pricing — painted from the server's price-book arithmetic */
.ai-price { border-top:1px solid var(--line); background:var(--paper); }
.ai-tiers { display:flex; gap:0; flex-wrap:wrap; margin:2px 0 10px; border:1px solid var(--line-strong); border-radius:var(--r); overflow:hidden; width:max-content; max-width:100%; background:var(--white); }
.ai-tier {
  font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; padding:0 14px;
  border:0; border-right:1px solid var(--line); background:transparent; color:var(--navy-900); cursor:pointer; min-height:38px;
  transition:background .2s var(--est-ease), color .2s var(--est-ease);
}
.ai-tier:last-child { border-right:0; }
.ai-tier:hover { background:var(--paper-2); }
.ai-tier[aria-pressed="true"] { background:var(--navy-900); color:var(--paper); }
.ai-tier:focus-visible { outline:2px solid var(--gold-600); outline-offset:-2px; }
.ai-tier-note { font-size:.82rem !important; color:var(--ink-3) !important; margin:0 0 10px !important; }
.ai-price-rows { border:1px solid var(--line); background:var(--white); }
.ai-price-row, .ai-price-head {
  display:grid; grid-template-columns:minmax(0,1fr) auto auto auto; column-gap:12px; align-items:baseline;
  padding:8px 12px; border-bottom:1px solid var(--line-faint);
}
.ai-price-head { font-family:var(--font-mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); background:var(--paper-2); }
.ai-price-head span:not(:first-child) { text-align:right; }
.ai-price-row:last-child { border-bottom:0; }
.ai-price-row .pi { min-width:0; }
.ai-price-row .pi b { display:block; font-weight:500; font-size:.9rem; color:var(--ink); line-height:1.3; }
.ai-price-row .pi small { display:block; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.02em; color:var(--ink-3); overflow-wrap:anywhere; margin-top:2px; }
.ai-price-row .pq, .ai-price-row .pu, .ai-price-row .pt { font-family:var(--font-mono); font-size:.82rem; text-align:right; white-space:nowrap; color:var(--navy-900); }
.ai-price-row .pt { font-weight:500; }
.ai-price-row.is-flag .pi b::after { content:" · review"; font-family:var(--font-mono); font-size:.66rem; color:var(--gold-600); letter-spacing:.1em; text-transform:uppercase; }
.ai-price-sum { display:flex; justify-content:space-between; gap:12px; align-items:baseline; padding:14px 14px; margin-top:8px; background:var(--navy-900); color:var(--paper); border-left:4px solid var(--gold); }
.ai-price-sum span { font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:rgba(237,241,247,.7); }
.ai-price-sum b { font-family:var(--font-display); font-weight:700; font-size:1.6rem; letter-spacing:.03em; color:var(--gold-300); white-space:nowrap; line-height:1; }
.ai-price details { margin-top:8px; }
.ai-price summary { cursor:pointer; font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); }
.ai-price details ul { margin-top:6px; }
.ai-price details li[data-line] { display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center; }
.ai-price-row.is-edited .pi b::before { content:"edited · "; font-family:var(--font-mono); font-size:.66rem; color:var(--gold-600); letter-spacing:.1em; text-transform:uppercase; }
.ai-price-row .ai-edit { grid-column:1 / -1; display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-top:6px; }
.ai-edit-qty { width:7ch; min-height:36px; padding:4px 8px; border:1px solid var(--line-strong); border-radius:2px; font-family:var(--font-mono); font-size:.82rem; color:var(--navy-900); background:var(--white); }
.ai-edit-qty:focus-visible { outline:2px solid var(--gold-600); outline-offset:1px; }
.ai-edit-btn { font-family:var(--font-mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; padding:0 10px; min-height:36px; border:1px solid var(--line-strong); background:var(--white); color:var(--navy-900); border-radius:2px; cursor:pointer; }
.ai-edit-btn:hover, .ai-edit-btn:focus-visible { border-color:var(--navy-900); outline:none; }
.ai-edit-rm { color:var(--err); }
.ai-edit-inline { display:inline-flex; }
.ai-sku-search { grid-column:1 / -1; flex-basis:100%; margin-top:8px; padding:10px 12px; border:1px solid var(--line-strong); border-left:3px solid var(--gold); background:var(--paper); }
.ai-sku-label { display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:6px; }
.ai-sku-search input[type="search"] { width:100%; min-height:44px; padding:8px 10px; border:1px solid var(--line-strong); border-radius:2px; font-size:16px; background:var(--white); }
.ai-sku-results { display:grid; gap:4px; margin-top:8px; }
.ai-sku-hit { display:block; width:100%; text-align:left; padding:8px 10px; border:1px solid var(--line); background:var(--white); cursor:pointer; border-radius:2px; min-height:44px; }
.ai-sku-hit:hover, .ai-sku-hit:focus-visible { border-color:var(--navy-900); outline:none; }
.ai-sku-hit b { display:block; font-weight:500; font-size:.88rem; color:var(--ink); }
.ai-sku-hit small { display:block; font-family:var(--font-mono); font-size:.68rem; color:var(--ink-3); margin-top:2px; }
.ai-price-edited { display:flex; justify-content:space-between; gap:10px; align-items:center; flex-wrap:wrap; margin:6px 0 4px; font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-600); }

/* actions under the sheet */
#ai-actions { margin-top:16px; gap:10px; }
#ai-actions .btn-line { background:var(--white); }

/* ------------------------------------------------------------
   5. PLAN STUDIO — the sheet viewer (drawn from geometry, never an AI image)
   ------------------------------------------------------------ */
.plan-studio { background:var(--white); border:1px solid var(--line-strong); border-radius:var(--r); box-shadow:var(--shadow-1); overflow:hidden; margin-bottom:18px; }
.ps-head { display:flex; justify-content:space-between; gap:10px; align-items:center; padding:12px 16px; background:var(--navy-900); }
.ps-head .t { font-family:var(--font-display); font-weight:700; font-size:1rem; letter-spacing:.06em; text-transform:uppercase; color:var(--paper); }
.ps-head .r { font-family:var(--font-mono); font-size:9.5px; letter-spacing:.12em; color:var(--gold-300); text-transform:uppercase; text-align:right; flex:none; }
.ps-expand { display:none; }
.ps-stage { position:relative; aspect-ratio:3/2; background:var(--paper-2); touch-action:none; cursor:grab; }
.ps-stage:focus-visible { outline:2px solid var(--gold-600); outline-offset:-3px; }
.ps-stage.dragging { cursor:grabbing; }
.ps-stage svg { display:block; width:100%; height:100%; }
.ps-ctl { position:absolute; right:10px; bottom:10px; display:flex; gap:6px; }
.ps-ctl button { width:36px; height:36px; border:1px solid var(--line-strong); background:var(--white); color:var(--navy-900); font-family:var(--font-mono); font-size:16px; line-height:1; cursor:pointer; border-radius:2px; padding:0; }
.ps-ctl button:hover, .ps-ctl button:focus-visible { background:var(--navy-900); color:var(--paper); }
.ps-skel { position:absolute; inset:14px; border:1px solid var(--line-strong); background:var(--white); display:flex; flex-direction:column; justify-content:center; align-items:center; gap:12px; }
.ps-skel .bar { width:56%; height:3px; background:var(--paper-3); overflow:hidden; }
.ps-skel .bar i { display:block; height:100%; width:34%; background:var(--gold); animation:aiScan 1.8s cubic-bezier(.45,.05,.55,.95) infinite alternate; }
.ps-skel .k { font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); text-align:center; padding:0 14px; }
.ps-stamp { margin:0; padding:10px 16px; border-top:1px solid var(--line); font-family:var(--font-mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); background:var(--gold-100); }
.ps-dl { display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:12px 16px 14px; border-top:1px solid var(--line-faint); }
.ps-btn { padding:9px 16px 8px !important; font-size:.85rem !important; }
.ps-dl-note { font-family:var(--font-mono); font-size:9px; letter-spacing:.06em; color:var(--ink-3); text-transform:uppercase; flex-basis:100%; }
.ps-note-blk { margin:0 0 18px; padding:12px 16px; border:1px solid var(--line-strong); border-left:4px solid var(--gold); background:var(--white); font-size:.88rem; color:var(--ink-2); }
.ps-note-blk b { font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); display:block; margin-bottom:4px; }

/* ------------------------------------------------------------
   6. BALLPARK — the model draws itself, the total reads from across the room
   ------------------------------------------------------------ */
#est-form .form-grid { gap:14px; }
#est-form .form-grid .field:first-child { grid-column:1 / -1; }
#est-form .field .hint { font-size:.8rem; }
.est-opts { margin-top:20px; }
.est-opts .opt-grid { grid-template-columns:repeat(2,1fr); }
@media (min-width:1180px) { .est-opts .opt-grid { grid-template-columns:repeat(4,1fr); } }
.opt { min-height:48px; }
.est-form-foot { margin-top:20px; padding-top:16px; border-top:1px solid var(--line); display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.est-live { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; color:var(--ink-3); text-transform:uppercase; }
.est-live i { width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 0 rgba(46,125,79,.5); animation:estOk 2.4s ease-out infinite; }
@keyframes estOk { 0% { box-shadow:0 0 0 0 rgba(46,125,79,.45); } 70% { box-shadow:0 0 0 8px rgba(46,125,79,0); } 100% { box-shadow:0 0 0 0 rgba(46,125,79,0); } }

/* the model card: plan + gable elevation, redrawn from the form */
.est-model {
  position:relative; margin-bottom:14px; background:var(--white); border:1px solid var(--line-strong); border-radius:var(--r);
  box-shadow:var(--shadow-1); overflow:hidden;
}
.est-model-head { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:9px 14px; background:var(--paper); border-bottom:1px solid var(--line); }
.est-model-head .t { font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); }
.est-model-head .r { font-family:var(--font-mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-600); white-space:nowrap; }
.est-model-stage {
  position:relative; height:clamp(150px, 15vw, 196px);
  background-image:
    linear-gradient(var(--est-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--est-grid) 1px, transparent 1px);
  background-size:18px 18px; background-position:center;
}
.est-model-stage svg { position:absolute; inset:0; width:100%; height:100%; color:var(--navy-900); }
.est-model-stage .wall { fill:rgba(16,36,65,.05); stroke:currentColor; stroke-width:2.4; stroke-linejoin:miter; transition:d .45s var(--est-ease); }
.est-model-stage .thin { fill:none; stroke:currentColor; stroke-opacity:.45; stroke-width:1; }
.est-model-stage .floor { fill:none; stroke:currentColor; stroke-opacity:.35; stroke-width:1; stroke-dasharray:3 3; }
.est-model-stage .dim { fill:none; stroke:var(--gold-600); stroke-width:1; }
.est-model-stage .ridge { fill:none; stroke:currentColor; stroke-opacity:.55; stroke-width:1; stroke-dasharray:8 4; }
.est-model-stage .glz { fill:var(--white); stroke:currentColor; stroke-opacity:.7; stroke-width:1; }
.est-model-stage text { font-family:var(--font-mono); font-size:8.5px; letter-spacing:.1em; fill:var(--ink-2); text-transform:uppercase; }
.est-model-stage text.dm { fill:var(--gold-600); font-size:8.5px; letter-spacing:.06em; }
.est-model-stage text.lbl { fill:var(--ink-3); font-size:7.5px; letter-spacing:.16em; }
.est-model-stage .g path, .est-model-stage .g rect, .est-model-stage .g line, .est-model-stage .g polygon { transition:all .45s var(--est-ease); }
.est-model-foot {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--line);
}
.est-model-foot div { padding:9px 14px; border-right:1px solid var(--line-faint); }
.est-model-foot div:last-child { border-right:0; }
.est-model-foot .k { display:block; font-family:var(--font-mono); font-size:8.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }
.est-model-foot .v { display:block; font-family:var(--font-display); font-weight:700; font-size:1.1rem; letter-spacing:.03em; color:var(--navy-900); margin-top:1px; white-space:nowrap; }

/* the sheet itself */
#est-tiers { margin:0 0 10px; }
#est-body tr.est-head td { padding-top:10px; padding-bottom:6px; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); background:var(--paper-2); border-bottom:1px solid var(--line); }
#est-body td.price { color:var(--navy-900); font-weight:500; }
#est-body td.price small { display:block; font-weight:400; font-size:.68rem; color:var(--ink-3); white-space:normal; max-width:18ch; margin-top:2px; line-height:1.3; }
#est-price-note:empty { display:none; }
#est-price-note { margin:8px 0 0; }
@media (min-width:701px) {
  #ballpark .est-aside .takeoff-sheet { max-height:64vh; overflow:auto; }
  #ballpark .est-aside .takeoff-sheet .ts-head { position:sticky; top:0; z-index:2; }
}
/* the total band */
#ballpark .ts-foot { flex-direction:column; align-items:flex-start; gap:2px; padding:14px 18px 16px; border-left:4px solid var(--gold); position:sticky; bottom:0; z-index:2; }
#ballpark .ts-foot .s { font-size:10px; }
#ballpark .ts-foot .v { font-size:clamp(1.5rem, 2.2vw, 1.9rem); line-height:1; letter-spacing:.02em; }
.est-assump { margin-top:14px; border:1px solid var(--line); background:var(--white); border-radius:var(--r); }
.est-assump summary { cursor:pointer; padding:13px 16px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); list-style:none; display:flex; justify-content:space-between; align-items:center; gap:10px; }
.est-assump summary::-webkit-details-marker { display:none; }
.est-assump summary::after { content:"+"; font-family:var(--font-mono); color:var(--gold-600); font-size:1.1rem; transition:transform .25s var(--est-ease); }
.est-assump[open] summary::after { transform:rotate(45deg); }
.est-assump ul { margin:0; padding:0 18px 14px 34px; color:var(--ink-2); font-size:.9rem; }
.est-assump li { margin-top:6px; }
.est-ctas { margin-top:16px; }
.est-ctas + .est-ctas { margin-top:10px; }
.est-ctas .btn-line { background:var(--white); }

/* CTA band: the two-ways oval pinned on the desk photo */
.cta-band .est-oval { position:absolute; z-index:3; right:clamp(150px,21vw,320px); bottom:22px; width:clamp(150px,16vw,240px); height:auto; transform:rotate(-7deg); opacity:.95; pointer-events:none; }
.cta-band .media img { object-position:center 40%; }

/* ------------------------------------------------------------
   7. TABLET — one column under 900px but above the phone flow
   ------------------------------------------------------------ */
@media (max-width:980px) {
  .est-hero-grid { grid-template-columns:1fr; }
  .est-hero-plan { width:min(92vw, 680px); right:-22vw; opacity:.55; }
  .est-hero-tools { grid-template-columns:1fr 1fr; }
}
@media (max-width:860px) {
  .est-split { grid-template-columns:1fr; }
}
@media (max-width:700px) { .est-hero-tools { grid-template-columns:1fr; } }

/* ============================================================
   ONE HAND — the /estimate flow on phones (≤700px)
   Camera-first upload, a thumb-reachable action bar, the sheet
   full screen, results as grouped cards. Motion is transform/
   opacity only; every animation defers to prefers-reduced-motion.
   ============================================================ */
@media (max-width:700px) {
  :root { --nl-ease:cubic-bezier(.32,.72,.28,1); --nl-fast:.16s; }

  html {
    scroll-padding-top:calc(var(--nl-head-h, 69px) + var(--nl-seg-h, 54px) + 12px);
    scroll-padding-bottom:calc(var(--nl-bar-h, 92px) + 16px);
  }
  html.nl-tab-ai body { padding-bottom:calc(var(--nl-bar-h, 92px) + 10px); }
  .nl-wide { display:none; }
  .nl-narrow { display:inline; }

  /* ---------- Hero: one screen-width of context, then the tool ---------- */
  .est-hero .inner { padding-block:20px 18px; }
  .est-hero-grid { grid-template-columns:1fr; gap:0; }
  .est-hero .sheet-eyebrow { display:none; }
  .est-hero h1 { font-size:1.75rem; max-width:none; }
  .est-hero .lead { display:none; }
  .est-rail { display:none; }
  .est-hero-tools { display:none; }          /* the segmented control already does this */
  .est-honest.has-seal { padding-right:16px; padding-bottom:90px; }
  .est-honest .seal { top:auto; bottom:8px; right:10px; width:104px; transform:rotate(6deg); }
  .cta-band .est-oval { width:96px; right:12px; bottom:auto; top:12px; }
  .est-hero-plan { width:150vw; right:-58vw; top:58%; opacity:.4; }
  .js .est-hero-plan .w { animation-duration:1.8s; }

  /* The segmented control already says "two ways", so the tool starts sooner. */
  #main > .sec-tight { padding-block:18px 34px; }
  .tool-head { grid-template-columns:1fr; gap:8px; padding-bottom:12px; margin-bottom:16px !important; }
  .tool-no { display:none; }
  .tool-head h2 { font-size:1.5rem; }
  .tool-head .lead { margin-top:8px; font-size:.93rem; }

  /* ---------- Segmented control ---------- */
  .nl-seg {
    display:block; position:sticky; top:var(--nl-head-h, 69px); z-index:90;
    padding:9px var(--gutter) 11px; border-bottom:1px solid var(--line);
  }
  .nl-seg::before {
    content:""; position:absolute; inset:0; z-index:-1;
    background:rgba(246,244,238,.93);
    -webkit-backdrop-filter:blur(12px) saturate(120%); backdrop-filter:blur(12px) saturate(120%);
  }
  .nl-seg-in {
    position:relative; display:grid; grid-template-columns:1fr 1fr;
    background:var(--paper-2); border:1px solid var(--line-strong);
    border-radius:2px; overflow:hidden;
  }
  .nl-seg-in::before {
    content:""; position:absolute; z-index:0; top:0; bottom:0; left:0; width:50%;
    background:var(--navy-900); transition:transform .2s var(--nl-ease);
  }
  .nl-seg[data-on="ballpark"] .nl-seg-in::before { transform:translateX(100%); }
  .nl-seg a {
    position:relative; z-index:1; min-height:44px;
    display:flex; align-items:center; justify-content:center; gap:6px;
    font-family:var(--font-display); font-weight:600; font-size:.98rem;
    letter-spacing:.07em; text-transform:uppercase; text-decoration:none;
    color:var(--ink-2); -webkit-tap-highlight-color:transparent;
    transition:color .2s var(--nl-ease), transform var(--nl-fast) var(--nl-ease);
  }
  .nl-seg a[aria-current="true"] { color:var(--paper); }
  .nl-seg a:active { transform:scale(.97); }

  /* ---------- The form: one step at a time ---------- */
  #ai-form fieldset { display:flex; flex-direction:column; min-inline-size:0; }
  #ai-field-files { order:-1; }
  html.nl-dom-ordered #ai-field-files { order:0; }
  .ai-step { font-size:10px; margin:0 0 10px; }
  #ai-step-2 { margin-top:14px; }
  .est-step-3 { display:none; }
  .ai-step b { color:var(--gold-600); }
  #ai-form .field label { font-size:10px; letter-spacing:.1em; }
  #ai-form input, #ai-form select, #ai-form textarea { font-size:17px; min-height:48px; }
  #ai-form textarea { min-height:96px; }
  #ai-form .form-grid { grid-template-columns:1fr 1fr; gap:12px; }
  #ai-form .form-grid .field:first-child { grid-column:1 / -1; }

  #ai-form .ai-notes { margin-top:16px; border:1px solid var(--line); border-radius:var(--r); background:var(--white); }
  #ai-form .ai-notes > summary {
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    min-height:48px; padding:0 14px; cursor:pointer; list-style:none;
    font-family:var(--font-mono); font-size:11px; letter-spacing:.12em;
    text-transform:uppercase; color:var(--ink-2); -webkit-tap-highlight-color:transparent;
  }
  #ai-form .ai-notes > summary::-webkit-details-marker { display:none; }
  #ai-form .ai-notes > summary::after {
    content:"+"; font-family:var(--font-mono); font-size:1.15rem; color:var(--gold-600);
    transition:transform .2s var(--nl-ease);
  }
  #ai-form .ai-notes[open] > summary::after { transform:rotate(45deg); }
  #ai-form .ai-notes > summary:active { transform:scale(.995); }
  .ai-notes-opt { color:var(--ink-3); letter-spacing:.1em; }
  #ai-form .ai-notes .field { padding:0 14px 14px; }
  #ai-form .ai-notes .field > label { position:static; width:auto; height:auto; overflow:visible; clip:auto; clip-path:none; white-space:normal; }
  #ai-form .ai-notes:not(.is-open) > .field { display:none; }

  /* ---------- Step 1: the sheets, camera first ---------- */
  #ai-dropzone { display:none; }
  .ai-capture {
    display:grid; gap:10px; padding:16px 14px 14px;
    border:1.5px dashed var(--line-strong); border-radius:var(--r); background:var(--white);
    transition:border-color .2s var(--nl-ease), background .2s var(--nl-ease);
  }
  .ai-capture.has-files { border-style:solid; border-color:var(--line); background:var(--paper); }
  .ai-capture .btn { width:100%; -webkit-tap-highlight-color:transparent; }
  .ai-cap-main { min-height:56px; font-size:1.06rem; }
  .ai-cap-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .ai-cap-row .btn { min-height:48px; padding:12px 8px 11px; font-size:.9rem; letter-spacing:.04em; }
  .ai-cap-note { margin:2px 0 0; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); }
  .ai-capture .btn:active { transform:scale(.97); }

  #ai-file-list { gap:10px; }
  #ai-file-list li {
    display:grid; grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:"thumb name del" "thumb size del";
    align-items:center; column-gap:12px; padding:8px 6px 8px 8px; border-left:1px solid var(--line);
  }
  #ai-file-list .fglyph { display:none; }
  #ai-file-list .fthumb {
    display:flex; grid-area:thumb; width:46px; height:46px; align-items:center; justify-content:center;
    border:1px solid var(--line); border-radius:2px; background:var(--paper-2);
    object-fit:cover; overflow:hidden;
    font-family:var(--font-mono); font-size:9px; letter-spacing:.06em; color:var(--ink-3);
  }
  #ai-file-list .fname { grid-area:name; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:.92rem; }
  #ai-file-list .fsize { grid-area:size; font-size:.76rem; }
  #ai-file-list .fdel { grid-area:del; margin:0; }

  /* ---------- Thumb-reachable action bar ---------- */
  .ai-bar {
    position:fixed; left:0; right:0; bottom:0; z-index:95; margin:0; border-top:1px solid var(--line-strong);
    padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .ai-bar::before {
    content:""; position:absolute; inset:0; z-index:-1;
    background:rgba(246,244,238,.97);
    box-shadow:0 -10px 26px rgba(16,36,65,.10);
    -webkit-backdrop-filter:blur(14px) saturate(125%); backdrop-filter:blur(14px) saturate(125%);
  }
  .ai-bar-cta { gap:10px; }
  .ai-bar .btn { flex:1 1 100%; width:100%; min-height:52px; -webkit-tap-highlight-color:transparent; box-shadow:none; }
  .ai-bar .btn:active { transform:scale(.98); }
  .ai-bar.is-busy #ai-run { display:none; }
  /* Read finished: the thumb button becomes the one that starts an order.
     Running it again is still there, demoted to a line of text. */
  .ai-bar.is-done #ai-run {
    flex:1 1 100%; min-height:44px; background:none; border:0; color:var(--ink-3);
    font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
    box-shadow:none; padding:6px;
  }
  .ai-bar.is-done #ai-bar-send { order:-1; }
  .ai-bar-note {
    display:block; margin:8px 0 0; text-align:center;
    font-family:var(--font-mono); font-size:10px; letter-spacing:.09em;
    text-transform:uppercase; color:var(--ink-3);
  }
  .ai-bar-note:empty { display:none; }
  .ai-bar-note b { color:var(--gold-600); font-weight:400; }
  #ai-form.is-locked fieldset { opacity:.5; pointer-events:none; transition:opacity .2s var(--nl-ease); }
  .est-consent { margin-top:14px; }

  /* ---------- Results ---------- */
  #ai-status {
    margin-bottom:12px; padding:10px 12px; background:var(--white);
    border:1px solid var(--line); border-radius:var(--r); font-size:10px; min-height:0;
  }
  #ai-status:empty { display:none; }
  html:not(.nl-has-read) .ai-sheet { display:none; }
  .ai-sheet { overflow:hidden; }
  .ai-sheet .ts-head { flex-wrap:wrap; row-gap:2px; }
  .ai-sheet .ts-head .t { flex:1 1 100%; }
  .ai-sheet table, .ai-sheet tbody { display:block; }
  .ai-sheet tr {
    display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:12px;
    padding:11px 14px; border-bottom:1px solid var(--line-faint); background:var(--white);
  }
  .ai-sheet tr.group {
    display:block; padding:15px 14px 7px; background:var(--paper);
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  }
  .ai-sheet tr.group td { padding:0; border:0; font-size:.9rem; }
  .ai-sheet tr.more, .ai-sheet tr.empty { display:block; padding:12px 14px; }
  .ai-sheet tr.more td, .ai-sheet tr.empty td { padding:0; border:0; }
  .ai-sheet td { padding:0; border:0; }
  .ai-sheet td.item { grid-row:1; grid-column:1; font-size:.95rem; line-height:1.35; color:var(--ink); }
  .ai-sheet td.qty  { grid-row:1; grid-column:2; font-size:.85rem; }
  .ai-sheet td.spec { grid-row:2; grid-column:1; font-size:.8rem; margin-top:3px; }
  .ai-sheet td.conf { grid-row:2; grid-column:2; margin-top:4px; }
  .ai-sheet td.spec:empty { display:none; }
  .ai-rownote { font-size:.78rem; }
  .ai-block { padding:13px 14px; }
  #ai-actions { margin-top:16px !important; }
  #ai-actions .btn { width:100%; min-height:50px; }
  #ai-actions .btn:active { transform:scale(.98); }
  .ai-price-head { display:none; }
  .ai-price-row { grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"pi pt" "pi pq" "pi pu" "ed ed"; row-gap:1px; padding:10px 12px; }
  .ai-price-row .pi { grid-area:pi; }
  .ai-price-row .pt { grid-area:pt; }
  .ai-price-row .pq { grid-area:pq; font-size:.74rem; color:var(--ink-3); }
  .ai-price-row .pu { grid-area:pu; font-size:.74rem; color:var(--ink-3); }
  .ai-price-row .ai-edit { grid-area:ed; }
  .ai-edit-qty { min-height:44px; width:9ch; font-size:16px; }
  .ai-edit-btn { min-height:44px; flex:1 1 auto; }
  .ai-method dl { grid-template-columns:1fr; }
  .ai-tiers { width:100%; display:grid; grid-template-columns:repeat(3,1fr); }
  .ai-tier { min-height:44px; text-align:center; padding:0 6px; }
  /* ballpark sheet reflows to cards too, so the price column never clips */
  #ballpark .takeoff-sheet { overflow-x:visible; }
  #ballpark .takeoff-sheet table, #est-body { display:block; }
  #est-body tr { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:12px; padding:10px 12px; border-bottom:1px solid var(--line-faint); background:var(--white); }
  #est-body tr.group { display:block; padding:14px 12px 6px; background:var(--paper); border-top:1px solid var(--line); }
  #est-body tr.est-head { display:none; }
  #est-body td { padding:0; border:0; }
  #est-body tr.group td { font-size:.9rem; }
  #est-body td:first-child { grid-row:1; grid-column:1; font-size:.95rem; line-height:1.35; }
  #est-body td.spec { grid-row:2; grid-column:1; font-size:.78rem; margin-top:2px; }
  #est-body td.qty:not(.price) { grid-row:1; grid-column:2; font-size:.85rem; }
  #est-body td.price { grid-row:2; grid-column:2; margin-top:2px; }
  #est-body td.price small { max-width:24ch; }
  #est-body td[colspan] { grid-column:1 / -1; }
  #ballpark .ts-foot { position:static; }
  .est-model-stage { height:150px; }
  .est-model-foot .v { font-size:1rem; }
  .est-opts .opt-grid { grid-template-columns:1fr 1fr; }
  .est-form-foot .btn { min-height:48px; }

  /* ---------- Plan Studio: full-bleed preview, real estate on tap ---------- */
  .plan-studio { margin-inline:calc(var(--gutter) * -1); border-inline:0; border-radius:0; }
  .ps-head { flex-wrap:wrap; row-gap:8px; padding:11px 14px; }
  .ps-head .t { flex:1 1 auto; font-size:.95rem; min-width:0; }
  .ps-head .r { order:3; flex:1 0 100%; text-align:left; }
  .ps-expand {
    order:2; flex:none; display:inline-flex; align-items:center; gap:7px;
    min-height:40px; padding:0 14px; border:1px solid var(--gold);
    background:transparent; color:var(--gold-300); border-radius:2px;
    font-family:var(--font-display); font-weight:600; font-size:.86rem;
    letter-spacing:.08em; text-transform:uppercase;
    -webkit-tap-highlight-color:transparent;
    transition:background .2s var(--nl-ease), color .2s var(--nl-ease), transform var(--nl-fast) var(--nl-ease);
  }
  .ps-expand:active { transform:scale(.96); }
  .ps-expand.is-pending { visibility:hidden; }
  .ps-stage { aspect-ratio:16/11; overscroll-behavior:contain; }
  .ps-ctl button { width:44px; height:44px; font-size:18px; -webkit-tap-highlight-color:transparent; }
  .ps-ctl button:active { transform:scale(.94); }
  .ps-stamp { padding:10px 14px; }
  .ps-dl { padding:12px 14px 14px; gap:8px; }
  .ps-dl.is-pending { visibility:hidden; }
  .ps-dl .btn { min-height:46px; }
  #ps-share { flex:1 0 100%; }
  .ps-btn { flex:1; padding:11px 10px 10px !important; }
  .ps-note-blk { margin-inline:0; }

  /* ---------- Full screen sheet ---------- */
  .ps-full {
    position:fixed; top:0; left:0; right:0; bottom:auto;
    width:100%; max-width:100%; height:100vh; height:100dvh; max-height:100dvh;
    margin:0; padding:0; border:0; background:var(--navy-950); color:var(--paper);
    overscroll-behavior:contain;
  }
  .ps-full[open] { display:flex; flex-direction:column; }
  .ps-full::backdrop { background:rgba(10,20,40,.92); }
  .psf-head {
    flex:none; display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:calc(env(safe-area-inset-top, 0px) + 10px) 14px 10px;
    border-bottom:1px solid var(--line-paper-faint);
  }
  .psf-t { font-family:var(--font-mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--gold-300); }
  .psf-x {
    flex:none; min-width:64px; min-height:44px; padding:0 16px;
    background:var(--gold); color:var(--navy-950); border:0; border-radius:2px;
    font-family:var(--font-display); font-weight:700; font-size:1rem;
    letter-spacing:.08em; text-transform:uppercase; -webkit-tap-highlight-color:transparent;
    transition:transform var(--nl-fast) var(--nl-ease);
  }
  .psf-x:active { transform:scale(.96); }
  .psf-stage {
    flex:1 1 auto; min-height:0; position:relative; background:var(--navy-950);
    touch-action:none; overscroll-behavior:contain; cursor:grab;
  }
  .psf-stage svg { display:block; width:100%; height:100%; }
  .psf-stage .ps-ctl { position:absolute; right:12px; bottom:12px; display:flex; gap:8px; }
  .psf-stage .ps-ctl button { width:46px; height:46px; border:1px solid var(--line-strong); background:var(--white); color:var(--navy-900); font-family:var(--font-mono); font-size:18px; line-height:1; border-radius:2px; padding:0; }
  .psf-stamp {
    flex:none; margin:0; padding:9px 14px; background:var(--gold-100); color:var(--navy-950);
    font-family:var(--font-mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase;
  }
  .psf-bar {
    flex:none; display:flex; gap:8px; padding:10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    border-top:1px solid var(--line-paper-faint);
  }
  .psf-bar .btn { flex:1; min-height:48px; padding:12px 8px 11px !important; font-size:.9rem !important; }
  .psf-bar .btn:active { transform:scale(.97); }

  /* One tool at a time */
  html.nl-tab-ai #ballpark { display:none; }
  html.nl-tab-bp #ai { display:none; }
  html.nl-tab-bp .ai-bar { display:none; }
  html.nl-tab-bp #main > .sec-tight { display:none; }
}

/* ------------------------------------------------------------
   Motion off
   ------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce) {
  .js .est-hero-plan .w, .js .est-hero-plan .p, .js .est-hero-plan .g, .js .est-hero-plan .d, .js .est-hero-plan text,
  .js .est-hero-copy > *, .js .est-hero-tools > * { animation:none; opacity:1; transform:none; stroke-dashoffset:0; }
  .est-tab .st i, .tool-head .lamp i, .est-live i, .ai-idle-plan .scan { animation:none; }
  .ai-progress i, .ps-skel .bar i { animation:none; width:100%; opacity:.35; }
  .est-tab, .est-tab::before, .est-tab .go::after, #ai-dropzone, #ai-dropzone .dz-icon, #ai-dropzone .dz-icon::before, #ai-dropzone .dz-icon::after,
  .nl-seg-in::before, .nl-seg a, .ps-expand, .psf-x, .ai-capture, .est-model-stage *,
  #ai-form .ai-notes > summary::after, #ai-form.is-locked fieldset { transition:none !important; }
  .nl-seg a:active, .ai-capture .btn:active, .ai-bar .btn:active, .ps-expand:active, .est-tab:hover,
  .psf-x:active, .ps-ctl button:active, #ai-actions .btn:active, .psf-bar .btn:active { transform:none; }
}

/* ---------- Ballpark: progressive disclosure ----------
   The estimate renders on load. Showing thirteen inputs made a finished
   answer look like an unfinished form, so ten of them fold away behind
   their own defaults, written out in the summary so nothing is hidden. */
.est-more { margin-top:16px; border-top:1px solid var(--line); padding-top:12px; }
.est-more > summary {
  cursor:pointer; list-style:none; min-height:44px;
  display:flex; flex-direction:column; justify-content:center; gap:3px; padding:4px 0;
}
.est-more > summary::-webkit-details-marker { display:none; }
.est-more .em-t {
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--navy-900);
}
.est-more .em-t::after { content:" +"; color:var(--gold-600); }
.est-more[open] .em-t::after { content:" –"; }
.est-more .em-s { font-size:.85rem; color:var(--ink-3); line-height:1.45; }
.est-more[open] .em-s { display:none; }