/* Quiver Blueprint - the Trail & Workshop look shared with Rocket Builder (rocket-builder-web
   server/static/brand.css): same tokens, Barlow fonts, dark by default, one orange main action
   per screen. The ☾/☀ button in the top bar picks light or dark (localStorage "shedcad.theme"). */

/* Self-hosted (OFL, static/fonts/LICENSE-barlow.txt): no third-party request. */
@font-face { font-family:"Barlow"; src:url(fonts/barlow-400.woff2) format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Barlow"; src:url(fonts/barlow-500.woff2) format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Barlow"; src:url(fonts/barlow-600.woff2) format("woff2"); font-weight:600 900; font-style:normal; font-display:swap; }
@font-face { font-family:"Barlow Condensed"; src:url(fonts/barlow-condensed-500.woff2) format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Barlow Condensed"; src:url(fonts/barlow-condensed-600.woff2) format("woff2"); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Barlow Condensed"; src:url(fonts/barlow-condensed-700.woff2) format("woff2"); font-weight:700 900; font-style:normal; font-display:swap; }

:root {
  --rb-night:#1D1A15; --rb-paper:#EFE9DC; --rb-orange:#E0A93B; --rb-sky:#7AB0DE; --rb-red:#E0573F; --rb-green:#6FAE68; --rb-grey:#6B6355;
  --font-head:"Barlow Condensed", "Arial Narrow", ui-sans-serif, system-ui, sans-serif;
  --font-body:"Barlow", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --chamfer:polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px);

  color-scheme: light;
  --bg:#F4F0E6; --panel:#FBF8F1; --card:#EFE9DC; --ink:#1D1A15; --muted:#6B6355; --line:#DDD4C2; --rowline:#EBE4D6;
  --field:#FBF8F1; --accent:#8A5A00; --accent-ink:#fff; --err:#B83A26; --errbg:#F8E1D9;
  --ok:#3F7A3A; --okbg:#E3EFD9; --warn:#8A5A00; --warnbg:#FBEFD6; --ref:#6B7A88; --refbg:#E4E8EC;
  --cta:var(--rb-orange); --cta-ink:var(--rb-night); --sky:#2F6A9E;
  --view-top:#EFE9DC; --view-bot:#E6DFD0; --chip:rgba(251,248,241,.92);
  --hover:rgba(21,19,15,.06); --shadow:0 12px 32px rgba(21,19,15,.16);
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px); --safe-r:env(safe-area-inset-right,0px);
  --side-w:380px;
}
@media screen {
  :root:not([data-theme=light]) {
    color-scheme: dark;
    --bg:#15130F; --panel:#1D1A15; --card:#27231C; --ink:#EFE9DC; --muted:#A89F8E; --line:#342F27; --rowline:#27231C;
    --field:#27231C; --accent:#E0A93B; --accent-ink:#1A1408; --err:#F08A6E; --errbg:#3A1F17;
    --ok:#8FC98A; --okbg:#1F2E1C; --warn:#F0BB4E; --warnbg:#3A2C0E; --ref:#9AA8B5; --refbg:#232A30;
    --sky:#7AB0DE; --view-top:#27231C; --view-bot:#15130F; --chip:rgba(21,19,15,.9);
    --hover:rgba(239,233,220,.07); --shadow:0 14px 36px rgba(0,0,0,.45);
  }
}
:root[data-theme=dark] {
  color-scheme: dark;
  --bg:#15130F; --panel:#1D1A15; --card:#27231C; --ink:#EFE9DC; --muted:#A89F8E; --line:#342F27; --rowline:#27231C;
  --field:#27231C; --accent:#E0A93B; --accent-ink:#1A1408; --err:#F08A6E; --errbg:#3A1F17;
  --ok:#8FC98A; --okbg:#1F2E1C; --warn:#F0BB4E; --warnbg:#3A2C0E; --ref:#9AA8B5; --refbg:#232A30;
  --sky:#7AB0DE; --view-top:#27231C; --view-bot:#15130F; --chip:rgba(21,19,15,.9);
  --hover:rgba(239,233,220,.07); --shadow:0 14px 36px rgba(0,0,0,.45);
}

/* ---------- base ---------- */
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
html, body { margin:0; height:100%; }
body { font:14px/1.45 var(--font-body); color:var(--ink); background:var(--bg); font-variant-numeric:tabular-nums;
  -webkit-tap-highlight-color:transparent; display:flex; flex-direction:column; height:100vh; height:100dvh; }
a { color:var(--accent); text-underline-offset:2px; }
button, input, select, textarea { font:inherit; color:inherit; }
button { background:transparent; border:1px solid var(--line); border-radius:8px; padding:6px 12px; cursor:pointer; color:var(--ink); }
button:hover { background:var(--hover); }
button:disabled { opacity:.45; cursor:default; }
button:disabled:hover { background:transparent; }
/* The one main action on a screen: Launch orange with Night text. */
button.primary { background:var(--cta); color:var(--cta-ink); border-color:var(--cta); font-weight:600; box-shadow:inset 0 -3px 0 rgba(21,19,15,.18); }
button.primary:hover { filter:brightness(1.06); background:var(--cta); }
/* Next / OK buttons: ink, so they never compete with the orange one. */
button.ink { background:var(--ink); color:var(--panel); border-color:var(--ink); font-weight:600; }
button.ink:hover { background:var(--ink); filter:brightness(1.1); }
button.link { border:0; padding:6px 4px; color:var(--muted); text-decoration:underline; text-underline-offset:3px; }
button.link:hover { color:var(--ink); background:transparent; }
button.toggle.on, .seg button.toggle.on { background:var(--card); color:var(--accent); border-color:var(--accent); }
button.small, .small-btn { font-size:12px; padding:3px 9px; }
input[type=checkbox], input[type=radio], input[type=range] { accent-color:var(--accent); }
input[type=checkbox] { width:16px; height:16px; margin:0; }
input[type=number], input[type=text], input[type=email], input[type=password], select, textarea {
  padding:5px 7px; border:1px solid var(--line); border-radius:7px; background:var(--field); color:var(--ink); min-width:0; }
input[type=number] { font-variant-numeric:tabular-nums; }
input:hover, select:hover { border-color:color-mix(in srgb, var(--ink) 30%, var(--line)); }
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
h1, h2, h3, h4 { font-family:var(--font-head); letter-spacing:-.01em; line-height:1.2; }
code { font:.88em var(--mono); background:var(--card); padding:1px 5px; border-radius:4px; }
[hidden] { display:none !important; }
.grow { flex:1; }
.chk { display:inline-flex; align-items:center; gap:6px; color:var(--muted); cursor:pointer; }
.hint { color:var(--muted); font-size:12.5px; margin:4px 0 10px; }
.missing { color:var(--err); }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- top bar ---------- */
.top { flex:none; display:flex; align-items:center; gap:8px 12px; min-height:52px; position:relative; z-index:20;
  padding:calc(6px + var(--safe-t)) calc(14px + var(--safe-r)) 6px calc(14px + var(--safe-l));
  background:var(--panel); border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:8px; font:700 1.2rem/1 var(--font-head); letter-spacing:-.01em; white-space:nowrap; color:var(--ink); }
.brand svg { width:28px; height:28px; flex:none; display:block; }
.design-wrap { position:relative; min-width:0; }
.design-btn { display:flex; align-items:center; gap:6px; max-width:34vw; padding:5px 10px; border-color:var(--line); color:var(--muted); font-weight:500; }
.design-btn #designName { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink); }
.design-btn .caret { font-size:10px; }
.chip { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; border:1px solid var(--line);
  background:var(--card); font-size:13px; white-space:nowrap; color:var(--ink); }
.chip.cost b { font-family:var(--font-head); font-size:15px; color:var(--accent); font-weight:700; }
.chip.cost b.split { color:var(--ink); font-size:13.5px; margin-right:4px; }
@media (max-width: 1359px) { .chip.cost .split { display:none; } }   /* room for it beside the design name and permit chip */
.chip.permit { cursor:pointer; }
.chip.permit.ok { color:var(--ok); border-color:color-mix(in srgb, var(--ok) 40%, var(--line)); background:var(--okbg); }
.chip.permit.over { color:var(--warn); border-color:color-mix(in srgb, var(--warn) 45%, var(--line)); background:var(--warnbg); }
.icon-btn { border:0; background:transparent; color:var(--muted); font-size:17px; line-height:1; padding:6px 8px; min-width:34px; min-height:34px; }
.icon-btn:hover { color:var(--ink); background:var(--hover); }
#helpBtn { font:700 16px var(--font-head); }
.qdw { color:var(--muted); text-decoration:none; font-size:13.5px; white-space:nowrap; padding:6px 2px; }
.qdw:hover { color:var(--ink); text-decoration:underline; text-underline-offset:5px; }
.warn-btn { background:var(--warnbg); border-color:color-mix(in srgb, var(--warn) 45%, var(--line)); color:var(--warn); font-weight:600; padding:4px 10px; }
.warn-btn.quiet { background:var(--card); color:var(--muted); border-color:var(--line); font-weight:500; }
.pop { position:absolute; right:12px; top:calc(100% + 4px); width:min(460px, 92vw); max-height:60vh; overflow:auto; z-index:30;
  background:var(--panel); color:var(--ink); border:1px solid var(--line); border-radius:12px; padding:10px 14px; box-shadow:var(--shadow); }
.pop h4 { margin:6px 0; font:600 12px var(--font-head); text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.pop li { margin:4px 0; }
.settings-pop { width:auto; min-width:240px; }
.settings-pop .chk { color:var(--ink); padding:4px 0; }
/* thin progress line under the top bar while the model rebuilds */
.buildbar { flex:none; height:3px; background:transparent; overflow:hidden; position:relative; z-index:19; }
.buildbar i { display:block; height:100%; width:30%; background:var(--cta); transform:translateX(-110%); opacity:0; }
.buildbar.on i { opacity:1; animation:bb 1s ease-in-out infinite; }
@keyframes bb { from { transform:translateX(-110%); } to { transform:translateX(360%); } }

/* menus (design menu, Site Plan right-click menus) */
.menu { position:fixed; z-index:40; background:var(--panel); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow);
  padding:4px; display:flex; flex-direction:column; min-width:200px; }
.menu button { border:0; text-align:left; padding:8px 12px; border-radius:6px; }
.menu button:hover { background:var(--hover); }
.menu hr { border:0; border-top:1px solid var(--line); margin:4px 0; }
.design-menu { position:absolute; left:0; top:calc(100% + 4px); min-width:250px; }
.design-menu .recent { display:flex; flex-direction:column; }
.design-menu .recent[hidden] { display:none; }
.design-menu .menu-label { font:600 11px var(--font-head); text-transform:uppercase; letter-spacing:.08em; color:var(--muted); padding:8px 12px 2px; border-top:1px solid var(--line); margin-top:4px; }
.design-menu .recent-item { display:flex; align-items:baseline; gap:10px; }
.design-menu .recent-item .nm { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:220px; }
.design-menu .recent-item .dt { flex:none; font-size:12px; color:var(--muted); }
.design-menu .recent-item.cur .nm { color:var(--accent); font-weight:600; }
.design-menu .account { display:flex; flex-direction:column; border-top:1px solid var(--line); margin-top:4px; padding-top:4px; }
.design-menu .account[hidden] { display:none; }
.design-menu .menu-note { padding:6px 12px 2px; font-size:12.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:280px; }
.design-menu .menu-note b { color:var(--ink); font-weight:500; }
.signin-box { width:min(400px, 100%); }
.sp-menu { max-height:calc(100vh - 16px); overflow-y:auto; }
.sp-menu .sp-menu-h { font:600 11px var(--font-head); text-transform:uppercase; letter-spacing:.08em; color:var(--muted); padding:6px 10px 1px; }
.sp-menu .sp-menu-row { display:flex; gap:2px; padding:0 4px 2px; }
.sp-menu .sp-menu-row button { flex:1; text-align:center; padding:6px 8px; border:1px solid var(--line); }
.sp-menu button:disabled { color:var(--muted); background:transparent; }

/* ---------- layout ---------- */
.layout { flex:1; min-height:0; display:flex; }
/* Drag handle between the steps panel and the view (as in Rocket Builder): wider screens only. */
.splitter { position:relative; z-index:6; flex:none; width:0; cursor:col-resize; touch-action:none; }
.splitter::before { content:""; position:absolute; top:0; bottom:0; left:-5px; width:10px; }
.splitter::after { content:""; position:absolute; top:50%; left:-3px; width:6px; height:44px; margin-top:-22px; border-radius:3px;
  background:var(--line); border:1px solid var(--panel); transition:background .15s; }
.splitter:hover::after, .splitter.drag::after, .splitter:focus-visible::after { background:var(--accent); }
.splitter:focus-visible { outline:none; }
body.dragging, body.dragging * { cursor:col-resize !important; user-select:none !important; }
body.dragging canvas, body.dragging iframe { pointer-events:none; }
.side { width:var(--side-w); flex:none; background:var(--panel); border-right:1px solid var(--line); display:flex; flex-direction:column; min-height:0; }
.main { flex:1; display:flex; flex-direction:column; min-width:0; min-height:0; }
.tabs { display:flex; gap:2px; padding:6px 10px 0; border-bottom:1px solid var(--line); background:var(--panel); overflow-x:auto; scrollbar-width:none; flex:none; }
.tabs::-webkit-scrollbar { display:none; }
.tabs button { border:0; border-bottom:2px solid transparent; border-radius:0; background:transparent; padding:8px 12px; color:var(--muted); font:600 14.5px var(--font-head); letter-spacing:.01em; white-space:nowrap; }
.tabs button:hover { color:var(--ink); background:transparent; }
.tabs button.on { border-bottom-color:var(--accent); color:var(--ink); }
.view { display:none; flex:1; position:relative; min-height:0; background:var(--bg); }
.view.on { display:block; }
.view.scroll { overflow:auto; }

/* ---------- the steps panel ---------- */
.walkbar { flex:none; display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; padding:10px 16px 8px; border-bottom:1px solid var(--line); background:var(--panel); }
.walkcount { font:700 15px var(--font-head); }
.walkbar .prog { flex:1 1 100%; height:6px; border-radius:3px; background:var(--line); overflow:hidden; }
.walkbar .prog i { display:block; height:100%; width:0; background:var(--cta); transition:width .25s; }
.resume { flex:none; display:flex; align-items:center; gap:6px; padding:8px 10px 8px 16px; font-size:13px;
  background:var(--card); border-bottom:1px solid var(--line); }
.resume .dt { color:var(--muted); }
.resume .x { border:0; color:var(--muted); }
.steps { list-style:none; margin:0; padding:6px 0 40px; overflow-y:auto; -webkit-overflow-scrolling:touch; flex:1; min-height:0; }
.step { border-bottom:1px solid var(--line); }
.step-head { display:flex; align-items:center; gap:10px; width:100%; border:0; border-radius:0; padding:12px 16px; text-align:left; background:transparent; }
.step-head:hover { background:var(--hover); }
.step .n { flex:none; display:grid; place-items:center; width:28px; height:28px; clip-path:var(--chamfer);
  background:var(--card); color:var(--muted); font:700 14px/1 var(--font-head); }
.step.done .n { background:var(--okbg); color:var(--ok); }
.step.open .n { background:var(--cta); color:var(--cta-ink); }
.step .st-title { display:flex; flex-direction:column; min-width:0; flex:1; }
.step .st-title b { font:700 16.5px/1.2 var(--font-head); letter-spacing:-.005em; }
.step .st-sum { font-size:12.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.step.skipped .st-sum { font-style:italic; }
.step .chev { color:var(--muted); font-size:11px; }
.step.open .chev { transform:rotate(90deg); }
.step-body { padding:2px 16px 16px; }
.step-body > p.why, .why { margin:0 0 10px; font-size:13.5px; line-height:1.45; color:var(--muted); }
.why b { color:var(--ink); font-weight:600; }
.step-foot { display:flex; align-items:center; gap:10px; margin-top:16px; padding-top:12px; border-top:1px solid var(--line); }
.step-foot .ink { min-width:120px; min-height:40px; }
.sub-h { margin:16px 0 6px; font:600 12px var(--font-head); text-transform:uppercase; letter-spacing:.09em; color:var(--muted);
  display:flex; align-items:center; gap:8px; }
.sub-h .count { font:500 12px var(--font-body); letter-spacing:0; text-transform:none; }
.sub-h.ref::before, .sub-h.build::before { content:""; width:10px; height:10px; border-radius:2px; flex:none; }
.sub-h.ref::before { background:var(--ref); }
.sub-h.build::before { background:var(--cta); }
.row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.row.tight { gap:6px; }
.stack { display:flex; flex-direction:column; gap:8px; }
.addr-row { display:flex; gap:8px; }
.addr-row input { flex:1; padding:8px 10px; font-size:15px; }
.addr-row button { flex:none; }
.status-box { margin-top:10px; font-size:13px; background:var(--card); border-radius:8px; padding:8px 10px; white-space:pre-wrap; }
.status-box.err { background:var(--errbg); color:var(--err); }
.status-box.ok { background:var(--okbg); color:var(--ok); }
.ask { margin-top:12px; padding:12px; border-radius:10px; background:var(--card); border-left:4px solid var(--cta); }
.ask > b { display:block; font:700 15.5px var(--font-head); margin-bottom:8px; }
.facts { margin:6px 0 0; font-size:13px; color:var(--muted); }
.facts b { color:var(--ink); font-weight:600; }
details.more { margin-top:12px; border-top:1px dashed var(--line); padding-top:6px; }
details.more > summary { cursor:pointer; color:var(--muted); font-size:13px; padding:4px 0; list-style:none; }
details.more > summary::before { content:"\25B8  "; font-size:10px; }
details.more[open] > summary::before { content:"\25BE  "; }
details.more > summary:hover { color:var(--ink); }
details.more > .more-body { padding-top:6px; }

/* item cards: existing things (grey) and builds (orange) */
.cards { display:flex; flex-direction:column; gap:6px; }
.icard { border:1px solid var(--line); border-left:4px solid var(--ref); border-radius:10px; background:var(--card); }
.icard.build { border-left-color:var(--cta); }
.icard.sel { box-shadow:0 0 0 2px var(--sky); border-color:var(--sky); }
.icard-head { display:flex; align-items:center; gap:6px; padding:6px 6px 6px 10px; cursor:pointer; min-height:44px; }
.icard-head .nm { flex:1; min-width:0; display:flex; flex-direction:column; }
.icard-head .nm b { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.icard-head .nm span { font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.icard-head button { padding:5px 9px; font-size:12.5px; flex:none; }
.icard-head .x { border:0; color:var(--muted); font-size:16px; padding:4px 8px; }
.icard-head .x:hover { color:var(--err); }
.icard-body { padding:4px 12px 12px; border-top:1px solid var(--line); }
.empty-note { font-size:13px; color:var(--muted); border:1px dashed var(--line); border-radius:10px; padding:10px 12px; }
.add-row-btns { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:8px; }
.add-row-btns .unit { color:var(--muted); font-size:12.5px; margin-right:4px; }
.add-row-btns button { font-size:13px; }

/* shed cards: three parts A / B / C */
.shed-card { border:1px solid var(--line); border-left:4px solid var(--cta); border-radius:12px; background:var(--card); margin-bottom:10px; }
.shed-card.sel { box-shadow:0 0 0 2px var(--sky); }
.shed-card > .icard-head .nm b { font:700 16px var(--font-head); }
.parts-tabs { display:flex; gap:2px; margin:0 10px; padding:3px; border-radius:10px; background:var(--panel); }
.parts-tabs button { flex:1; border:0; border-radius:7px; padding:7px 6px; font:600 13px var(--font-body); color:var(--muted); line-height:1.15; }
.parts-tabs button small { display:block; font-weight:500; font-size:11px; }
.parts-tabs button[aria-pressed=true] { background:var(--ink); color:var(--panel); }
.shed-body { padding:10px 12px 12px; }
.choices { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; margin:6px 0 4px; }
.choices button { display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 4px 6px; border:1.5px solid var(--line);
  border-radius:10px; background:var(--field); font:600 13px var(--font-body); }
.choices button[aria-pressed=true] { border-color:var(--ink); background:var(--panel); box-shadow:inset 0 0 0 1px var(--ink); }
.choices svg { width:84px; height:50px; display:block; color:var(--ink); }
.choices .accent { color:var(--rb-orange); }
.presets-row { display:flex; flex-wrap:wrap; gap:6px; margin:6px 0; }
.presets-row button { padding:7px 10px; font:600 14px var(--font-head); min-width:58px; background:var(--field); }
.presets-row button[aria-pressed=true] { background:var(--ink); color:var(--panel); border-color:var(--ink); }
.checks { display:flex; flex-direction:column; gap:4px; margin:10px 0 4px; }
.check { display:flex; align-items:flex-start; gap:8px; font-size:13px; padding:6px 9px; border-radius:8px; background:var(--panel); }
.check .ic { flex:none; width:18px; height:18px; border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:700; margin-top:1px; }
.check.ok .ic { background:var(--okbg); color:var(--ok); }
.check.bad .ic { background:var(--errbg); color:var(--err); }
.check.na .ic { background:var(--line); color:var(--muted); }
.check.bad { color:var(--ink); }
.colorctl { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.colorctl input[type=color] { width:34px; height:28px; padding:0 2px; border-radius:6px; cursor:pointer; }
.field .colorctl input.hex { width:96px; flex:none; font-family:ui-monospace, monospace; }
.field .colorctl input[type=color] { flex:none; }
.colorctl .paint-name { font-size:12px; color:var(--muted); }
.colorctl .swatches { flex-basis:100%; display:flex; flex-wrap:wrap; gap:5px; }
.colorctl .sw { width:22px; height:22px; min-height:0; padding:0; border-radius:50%; border:1px solid var(--line); }
.field.wide .colorctl { margin-top:2px; }
.check-lines { list-style:none; margin:6px 0 0; padding:0; font-size:12px; color:var(--muted); }
.check-lines li { display:flex; justify-content:space-between; gap:10px; padding:2px 0; border-top:1px solid var(--line); }
.check-lines b { font-weight:600; white-space:nowrap; color:var(--ink); }
.group-tabs { display:flex; flex-wrap:wrap; gap:6px; margin:2px 0 10px; }
.group-tabs button { font-size:13px; padding:6px 10px; background:var(--field); }
.group-tabs button[aria-pressed=true] { background:var(--ink); color:var(--panel); border-color:var(--ink); }
.group-tabs.tight { margin:0; flex-wrap:nowrap; }
.group-tabs.tight button { flex:1; padding:5px 8px; }
.surface-row { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:6px; margin:6px 0 8px; }
.surface-row button { display:flex; flex-direction:column; align-items:center; gap:4px; padding:7px 4px; font-size:12.5px; font-weight:600; background:var(--field); }
.surface-row button i { width:34px; height:22px; border-radius:4px; display:block; border:1px solid rgba(0,0,0,.25); }
.surface-row button[aria-pressed=true] { border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); background:var(--panel); }
.sw-none { background:repeating-linear-gradient(45deg, transparent, transparent 4px, var(--line) 4px, var(--line) 6px); }
.sw-gravel { background:#9a948a; } .sw-pavement { background:#b9b8b3; } .sw-wood { background:#8a5a36; }
.suggest { font-size:12.5px; color:var(--muted); margin:0 0 6px; }
.suggest b { color:var(--accent); font-weight:600; }
.side-note { font-size:12.5px; color:var(--muted); margin-top:6px; }
.stats-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:6px; margin:8px 0; }
.stats-grid > div { background:var(--card); border-radius:8px; padding:6px 9px; }
.stats-grid .k { font:600 11px var(--font-head); text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.stats-grid .v { font:700 16px var(--font-head); }
.stats-grid .grand { grid-column:1 / -1; background:var(--warnbg); }
.stats-grid .grand .v { color:var(--accent); font-size:20px; }
.btn-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:6px; }
.btn-grid button { min-height:40px; }

/* ---------- schema forms (form.js) ---------- */
details.sec { border:1px solid var(--line); border-radius:10px; background:var(--panel); margin-bottom:8px; }
details.sec > summary { cursor:pointer; padding:9px 12px; font:600 15px var(--font-head); list-style:none; display:flex; align-items:center; gap:8px; }
details.sec > summary::-webkit-details-marker { display:none; }
details.sec > summary::before { content:"\25B8"; color:var(--muted); font-size:10px; transition:transform .15s; }
details.sec[open] > summary::before { transform:rotate(90deg); }
details.sec > .body { padding:2px 12px 10px; border-top:1px solid var(--line); }
.form.flat details.sec { border:0; background:transparent; margin:0; }
.form.flat details.sec > summary { display:none; }
.form.flat details.sec > .body { padding:0; border:0; }
.dsec .form.flat .field.wide > label { display:none; }   /* the section heading already names the list */
.field { display:grid; grid-template-columns:1fr 132px; align-items:center; gap:8px; padding:3px 0; }
.field label { color:var(--muted); font-size:13.5px; }
.field label .q { color:var(--muted); cursor:help; margin-left:4px; font-size:11px; border:1px solid var(--line); border-radius:50%; display:inline-grid; place-items:center; width:15px; height:15px; }
.field .ctl { display:flex; align-items:center; gap:4px; min-width:0; }
.field input[type=number], .field input[type=text], .field select { width:100%; }
.field input[type=number] { text-align:right; }
.field .unit { color:var(--muted); font-size:11.5px; min-width:18px; white-space:nowrap; }
.field.wide { grid-template-columns:1fr; }
/* feet + inches: two boxes with their units ("8 ft 6 in") */
.field.has-ftin { grid-template-columns:1fr 176px; }
.ftin { display:flex; align-items:center; gap:4px; width:100%; min-width:0; }
.ftin input { flex:1 1 0; min-width:0; width:100%; text-align:right; }
.ftin input + span { color:var(--muted); font-size:11.5px; }
.ftin input:nth-of-type(2) { flex-grow:1.4; }
/* a value worked out by the app, shown for reference */
.field.readonly label { color:var(--muted); }
.ro { display:block; width:100%; padding:5px 8px; border:1px dashed var(--line); border-radius:7px; color:var(--muted);
  text-align:right; font-variant-numeric:tabular-nums; background:transparent; }
.ro-note { grid-column:1 / -1; font-size:12px; color:var(--muted); margin:-2px 0 4px; }
.field.bool { display:flex; align-items:center; gap:8px; padding:5px 0; cursor:pointer; }
.field.bool span { color:var(--ink); font-size:13.5px; }
.sec-desc { margin:6px 0 4px; }
.list-editor { min-width:0; }
.lrow { padding:4px 8px 6px; border:1px solid var(--line); border-radius:8px; margin-top:6px; background:var(--field); }
.lrow .lhead { display:flex; align-items:center; gap:8px; min-height:36px; cursor:pointer; }
.lrow .lhead:hover .lsum { color:var(--ink); }
/* a clear open / close arrow: a bordered square, pointing down when open */
.lrow .ltoggle { flex:none; display:grid; place-items:center; width:28px; height:28px; min-height:28px; padding:0;
  border:1px solid var(--line); border-radius:7px; background:var(--panel); color:var(--ink); font-size:15px; line-height:1; }
.lrow .ltoggle::before { content:"\25B8"; transition:transform .15s; }
.lrow:not(.collapsed) .ltoggle::before { transform:rotate(90deg); }
.lrow .lhead:hover .ltoggle { border-color:var(--accent); color:var(--accent); }
.lrow.collapsed > .lbody { display:none; }
.lrow:not(.collapsed) { border-color:color-mix(in srgb, var(--ink) 25%, var(--line)); }
.lhint { font-size:12px; color:var(--muted); margin:2px 0 2px; }
.lrow .lsum { flex:1; min-width:0; font-size:12.5px; line-height:1.35; color:var(--muted); overflow:hidden;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; }
.lrow .lsum b { color:var(--ink); }
.lrow .lbody { display:grid; grid-template-columns:repeat(auto-fill, minmax(118px, 1fr)); gap:4px 8px; padding-top:4px; }
.lrow .lbody > .field { display:flex; flex-direction:column; align-items:stretch; gap:1px; padding:0; font-size:12px; min-width:0; }
.lrow .lbody > .field > label { font-size:11.5px; }
.lrow .lbody > .field.bool { flex-direction:row; align-items:center; gap:6px; grid-column:1 / -1; }
.lrow .lbody > .field.has-ftin { grid-column:span 2; }
.lrow .lbody input[type=number], .lrow .lbody input[type=text], .lrow .lbody select { width:100%; padding:4px 6px; font-size:12.5px; }
.lrow .lbody input[type=number] { text-align:right; }
.lrow .lbody > .presets, .lrow .lbody > .nested-list { grid-column:1 / -1; min-width:0; }
.lrow .nested-list { border-top:1px solid var(--line); padding-top:5px; }
.lrow.nested { background:var(--panel); }
.nested-list-label { margin:2px 0 4px; color:var(--muted); font-size:12px; font-weight:700; }
.rowbtns { white-space:nowrap; }
.rowbtns button { padding:0 6px; font-size:11.5px; line-height:20px; border-radius:5px; }
.add-row { margin-top:6px; font-size:12.5px; }
.presets { display:flex; gap:4px; align-items:center; margin:2px 0 6px; font-size:12px; }
.presets button { flex:1; padding:3px 6px; font-size:12px; }
.btnrow { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.btnrow.col { flex-direction:column; align-items:stretch; }
.btnrow.col button { text-align:left; }
.meta { color:var(--muted); font-size:12.5px; margin:6px 0; }
.meta.note { color:var(--warn); }
table.meta td { padding:1px 8px 1px 0; vertical-align:top; }

/* ---------- 3D model ---------- */
.view[data-view=model].on { display:flex; flex-direction:column; }
.model-tools { display:flex; flex-wrap:wrap; gap:6px; padding:7px 10px; background:var(--panel); border-bottom:1px solid var(--line); flex:none; }
.seg { display:flex; background:var(--field); border:1px solid var(--line); border-radius:10px; overflow:hidden; flex:none; }
.seg button { border:0; border-right:1px solid var(--line); border-radius:0; padding:5px 10px; font-size:12.5px; white-space:nowrap; }
.seg button:last-child { border-right:0; }
.seg button.toggle.on { border-color:var(--line); }
.model-wrap { position:relative; flex:1; min-height:0; overflow:hidden; background:linear-gradient(var(--view-top), var(--view-bot)); }
#gl { position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; cursor:grab; }
#gl:active { cursor:grabbing; }
.gl-overlay { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
#gl.measuring { cursor:crosshair; }
#gl.measuring:active { cursor:grabbing; }
.seg button.caret { padding:5px 7px; font-size:11px; color:var(--muted); }
.seg button.caret[aria-expanded=true] { color:var(--accent); background:var(--card); }
.dims-pop { right:auto; width:auto; min-width:210px; max-width:min(320px, calc(100vw - 24px)); padding:8px 12px 10px; }
.dims-pop label { display:flex; gap:8px; align-items:center; padding:5px 0; cursor:pointer; }
.dims-pop label.all { font-weight:600; border-bottom:1px solid var(--line); padding-bottom:7px; margin-bottom:2px; }
.dims-pop .tag { margin-left:auto; padding-left:10px; font-size:11.5px; color:var(--muted); }
.dims-pop .meta { margin:4px 0 0; }
.measure-hint { position:absolute; left:50%; bottom:10px; transform:translateX(-50%); display:flex; align-items:center; gap:10px;
  background:var(--chip); border:1px solid var(--line); border-radius:10px; padding:4px 4px 4px 12px; font-size:12.5px; color:var(--ink);
  backdrop-filter:blur(4px); white-space:nowrap; max-width:calc(100% - 20px); }
.measure-hint .txt { overflow:hidden; text-overflow:ellipsis; }
.measure-hint button { padding:4px 10px; font-size:12px; }
.layers { position:absolute; top:10px; left:10px; background:var(--chip); border:1px solid var(--line); border-radius:10px; font-size:12.5px;
  max-height:calc(100% - 20px); overflow:auto; padding:0; min-width:140px; backdrop-filter:blur(4px); }
.layers-head { display:flex; align-items:center; gap:8px; width:100%; border:0; background:transparent; padding:6px 10px; font:600 11.5px var(--font-head);
  text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.layers-head::before { content:"\25BE"; font-size:10px; }
.layers.collapsed .layers-head::before { content:"\25B8"; }
.layers-head .count { margin-left:auto; font-weight:400; letter-spacing:0; }
.layers-list { padding:0 10px 6px; }
.layers label { display:flex; gap:6px; align-items:center; padding:2px 0; text-transform:capitalize; cursor:pointer; }
.layers label.locked { color:var(--muted); cursor:default; }
.layers label.all { font-weight:600; border-bottom:1px solid var(--line); padding-bottom:5px; margin-bottom:3px; }
.part-info { position:absolute; top:10px; right:10px; width:290px; max-height:calc(100% - 60px); overflow:auto; background:var(--panel);
  border:1px solid var(--line); border-radius:12px; padding:10px 12px; box-shadow:var(--shadow); }
.part-info h3 { margin:0 24px 2px 0; font-size:16px; }
.part-info .sub { color:var(--muted); font-size:12px; margin-bottom:8px; text-transform:capitalize; }
.part-info table { width:100%; border-collapse:collapse; font-size:13px; }
.part-info td { padding:3px 0; border-top:1px solid var(--line); vertical-align:top; }
.part-info td:first-child { color:var(--muted); width:45%; padding-right:8px; }
.part-info .x { position:absolute; top:6px; right:6px; border:0; font-size:18px; color:var(--muted); padding:2px 6px; }
.help-chip { position:absolute; bottom:10px; left:10px; font-size:11.5px; color:var(--muted); background:var(--chip); padding:4px 9px; border-radius:6px; pointer-events:none; }
.nav-box { position:absolute; bottom:10px; left:10px; background:var(--chip); border:1px solid var(--line); border-radius:10px; font-size:12px;
  color:var(--muted); min-width:140px; backdrop-filter:blur(4px); }
.nav-box.collapsed .layers-head::before { content:"\25B8"; }
.nav-body { display:grid; gap:2px; padding:0 10px 8px; }
.nav-body b { color:var(--ink); font-weight:500; }
.nav-body .chk { display:flex; margin-top:4px; padding-top:6px; border-top:1px solid var(--line); color:var(--ink); }
.touch-only { display:none; }
@media (pointer: coarse) { .touch-only { display:block; } .mouse-only { display:none; } }
.model-wrap.measuring .help-chip { display:none; }

/* ---------- Show row (show.js): one toggle per group, shared by the 3D view and the Site Plan ---------- */
.show-bar { display:flex; align-items:center; flex-wrap:wrap; gap:5px; padding:5px 10px; background:var(--panel); border-bottom:1px solid var(--line); flex:none; }
.show-bar .lbl { font:600 11.5px var(--font-head); text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-right:3px; }
.show-bar button.cat { display:inline-flex; align-items:center; gap:6px; padding:3px 10px 3px 8px; font-size:12.5px; line-height:1.35;
  border-radius:999px; white-space:nowrap; flex:none; color:var(--muted); border-style:dashed; }
.show-bar button.cat.on { color:var(--ink); border-style:solid; background:var(--card); }
.show-bar .dot { width:9px; height:9px; border-radius:50%; flex:none; border:1.5px solid var(--c); background:transparent; }
.show-bar button.cat.on .dot { background:var(--c); }
.cat-lot { --c:#d84a3a; } .cat-existing { --c:#8C96A0; } .cat-landscape { --c:#6FAE68; }
.cat-structures { --c:var(--rb-orange); } .cat-ground { --c:#c8b48a; } .cat-fences { --c:#a07a4a; }
body.viewer #modelShow { display:none !important; }

/* ---------- patios & driveways (Step 4) ---------- */
.pave-totals { display:grid; grid-template-columns:1fr 1fr; gap:6px 12px; margin:8px 0; padding:8px 10px; border-radius:8px; background:var(--panel); border:1px solid var(--line); }
.pave-totals div { display:flex; flex-direction:column; font-size:12px; color:var(--muted); }
.pave-totals b { font-size:14px; color:var(--ink); }
.pave-sec { margin-top:10px; padding-top:8px; border-top:1px solid var(--line); gap:6px; }
.pave-sides { padding-left:8px; }

/* ---------- share-link viewer: just the 3D model (share.js) ---------- */
.viewer-bar { display:none; }
body.viewer .viewer-bar { display:flex; align-items:center; gap:12px; min-width:0; }
.viewer-title { display:flex; flex-direction:column; min-width:0; line-height:1.15; }
.viewer-title small { font:600 10.5px var(--font-head); text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.viewer-title b { font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:42vw; }
#viewerEdit { flex:none; white-space:nowrap; }
body.viewer #side, body.viewer #splitter, body.viewer #mainTabs, body.viewer .design-wrap, body.viewer #helpBtn,
body.viewer #warnBtn, body.viewer #warnPop, body.viewer #layers, body.viewer #siteViewBtn, body.viewer #onlyStructBtn,
body.viewer #fenceDimsBtn, body.viewer #openGatesBtn, body.viewer #resume, body.viewer #sharedBar { display:none !important; }
body.viewer #permitChip { pointer-events:none; }
@media (max-width: 800px) {
  body.viewer .main { flex:1; height:auto; min-height:0; border-bottom:0; }
  body.viewer .viewer-bar { flex:1 1 40%; }
  .viewer-title b { max-width:none; }
}
@media (pointer: coarse) { body.viewer .help-chip.touch-only { display:block; } }

/* ---------- site plan ---------- */
.view[data-view=site].on { display:flex; flex-direction:column; }
.site-tools { display:flex; align-items:center; flex-wrap:wrap; gap:6px; padding:7px 10px; background:var(--panel); border-bottom:1px solid var(--line); flex:none; }
.site-tools button { font-size:12.5px; padding:5px 10px; }
.legend { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); }
.legend i { width:12px; height:12px; border-radius:2px; display:inline-block; margin-left:6px; }
.lg-build { background:var(--rb-orange); }
.lg-ref { background:#8C96A0; }
.site-wrap { position:relative; flex:1; min-height:0; }
#siteCanvas { position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; }
#siteCanvas:focus { outline:none; }
.site-hint { position:absolute; left:10px; top:10px; max-width:min(560px, 70%); background:rgba(21,19,15,.88); color:#EFE9DC; font-size:12.5px;
  padding:7px 11px; border-radius:8px; pointer-events:none; }
.site-hint:empty { display:none; }
.sel-pop { position:absolute; z-index:4; display:flex; align-items:center; gap:4px; padding:4px 4px 4px 10px; border-radius:10px;
  background:var(--panel); border:1px solid var(--line); box-shadow:var(--shadow); white-space:nowrap; transform:translate(-50%, -100%); }
.sel-pop .nm { font-size:12.5px; font-weight:600; max-width:160px; overflow:hidden; text-overflow:ellipsis; margin-right:4px; }
.sel-pop button { padding:5px 10px; font-size:12.5px; }
.sp-modebar { position:absolute; left:50%; bottom:14px; transform:translateX(-50%); display:flex; align-items:center; gap:6px;
  background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:6px 8px; box-shadow:var(--shadow); white-space:nowrap; z-index:5; }
.sp-modebar span { font-size:13px; color:var(--muted); margin-right:4px; }

/* ---------- dialogs ---------- */
.dlg { position:fixed; inset:0; background:rgba(10,9,7,.6); z-index:60; display:flex; align-items:center; justify-content:center; padding:16px; }
.dlg-box { background:var(--panel); color:var(--ink); border:1px solid var(--line); border-radius:14px; width:min(520px, 100%); max-height:92vh; overflow:auto;
  padding:16px 18px; box-shadow:var(--shadow); }
.dlg-box.wide { width:min(920px, 100%); }
.share-row { display:flex; gap:8px; }
.share-row .share-url { flex:1; min-width:0; font-family:var(--font-mono, ui-monospace, monospace); font-size:13px; }
.share-status { font-size:13px; margin:8px 0 4px; min-height:1.3em; }
button.danger { color:var(--err); }
button.danger:hover { border-color:var(--err); }
.dlg-box h3 { margin:0 0 10px; font-size:19px; }
.dlg-box label.row { display:block; margin:8px 0; font-size:13px; color:var(--muted); }
.dlg-box label.row input[type=text], .dlg-box label.row input[type=email], .dlg-box label.row input[type=password], .dlg-box label.row select { display:block; width:100%; margin-top:3px; padding:7px 9px; font-size:14px; }
.dlg-box .two { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.dlg-box .status { margin-top:10px; font-size:13px; background:var(--card); border-radius:8px; padding:8px 10px; white-space:pre-wrap; min-height:18px; }
.dlg-box .status.err { background:var(--errbg); color:var(--err); }
.dlg-box .actions { display:flex; justify-content:flex-end; gap:8px; margin-top:14px; }
.dlg-box .small { font-size:12px; color:var(--muted); }
.sp-ask .field { grid-template-columns:1fr 150px; }
.sp-ask .sp-ask-msg { font-size:14px; color:var(--muted); margin-bottom:8px; white-space:pre-wrap; }
.pane-tools { display:flex; align-items:center; gap:8px; margin-bottom:10px; flex-wrap:wrap; }
.subtabs { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:8px; }
.subtabs button { padding:4px 10px; font-size:12.5px; }
.subtabs button.on { background:var(--ink); color:var(--panel); border-color:var(--ink); }
.mat-table { width:100%; border-collapse:collapse; }
.mat-table th { text-align:left; font-weight:600; color:var(--muted); font-size:12px; padding:3px; }
.mat-table td { padding:2px; }
.mat-table input, .mat-table select { width:100%; padding:3px 5px; font-size:12.5px; }
.table-scroll { overflow-x:auto; }
.design-list { list-style:none; padding:0; margin:0; }
.design-list li { display:flex; align-items:center; gap:8px; padding:9px 10px; border:1px solid var(--line); border-radius:8px; background:var(--card); margin-bottom:6px; cursor:pointer; }
.design-list li:hover { border-color:var(--accent); }
.design-list li.cur { border-color:var(--accent); box-shadow:inset 3px 0 0 var(--accent); }
.design-list .nm { flex:1; font-weight:500; }
.design-list .dt { color:var(--muted); font-size:12px; }
.design-list .del { border:0; color:var(--muted); padding:0 6px; }
.design-list .del:hover { color:var(--err); }
.design-list li.empty { cursor:default; border-style:dashed; background:transparent; }
.list-title { margin:16px 0 6px; font:600 12px var(--font-head); text-transform:uppercase; letter-spacing:.08em; color:var(--muted); display:flex; align-items:center; gap:8px; }
.list-title button.small { text-transform:none; letter-spacing:0; }

/* ---------- plans ---------- */
.plans { display:block; padding:0; }
.plan-groups { padding:12px 14px 0; margin:0; }
.plan-groups button .n { margin-left:6px; font-size:11px; opacity:.65; }
.plans-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(520px, 100%), 1fr)); gap:14px; padding:14px; }
/* drawings are black-on-white sheets in either theme */
.plan-card { background:#fff; color:#1D1A15; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.plan-card header { display:flex; align-items:center; justify-content:space-between; padding:7px 10px; border-bottom:1px solid #e6e1d6; font-weight:600; background:#FBF8F1; }
.plan-card header .ttl { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.plan-card header .btns { display:flex; gap:6px; flex:none; margin-left:8px; }
.plan-card header button { font-size:11.5px; padding:2px 8px; font-weight:500; color:#1D1A15; border-color:#d9d1bf; }
.plan-card .svgwrap { padding:6px; cursor:zoom-in; }
.plan-card svg { width:100%; height:auto; display:block; }
.modal { position:fixed; inset:0; background:rgba(10,9,7,.7); z-index:50; display:flex; align-items:center; justify-content:center; padding:20px; }
.modal-inner { background:#fff; color:#1D1A15; border-radius:10px; width:100%; height:100%; overflow:auto; display:flex; flex-direction:column; padding:0; }
.modal-tools { display:flex; align-items:center; gap:8px; padding:8px 12px; border-bottom:1px solid #e6e1d6; background:#FBF8F1; }
.modal-tools button { color:#1D1A15; border-color:#d9d1bf; }
.modal-svg { flex:1; overflow:auto; padding:10px; cursor:zoom-out; }
.modal-svg svg { width:100%; min-width:900px; height:auto; display:block; }

/* ---------- materials & cost ---------- */
.bom { padding:6px 18px 60px; max-width:1100px; }
.bom-tabs { position:sticky; top:0; z-index:2; background:var(--bg); padding:12px 0 8px; margin:0; border-bottom:1px solid var(--line); }
.bom h2 { font-size:18px; margin:22px 0 8px; display:flex; align-items:center; gap:10px; }
.bom h2 > span:first-child { min-width:0; }
.bom h2 .tot { margin-left:auto; font-family:var(--font-head); font-weight:700; color:var(--accent); }
.bom h2 button { font-size:12px; font-weight:500; padding:3px 9px; font-family:var(--font-body); }
.bom .sec-intro { margin:-4px 0 6px; }
table.t { width:100%; border-collapse:collapse; background:var(--panel); border:1px solid var(--line); border-radius:8px; overflow:hidden; }
table.t th { text-align:left; background:var(--card); font:600 12px var(--font-head); text-transform:uppercase; letter-spacing:.06em; color:var(--muted); padding:6px 8px; }
table.t td { padding:5px 8px; border-top:1px solid var(--line); vertical-align:top; }
table.t td.n, table.t th.n { text-align:right; white-space:nowrap; }
table.t td.n { font-family:var(--font-head); font-size:14px; }
table.t td.dim { color:var(--muted); font-size:12.5px; }
table.t tr.grp td { font-weight:600; background:var(--card); }
table.t tr.sub td:first-child { padding-left:22px; color:var(--muted); }
table.t tr.sub td { font-size:12.5px; }
table.t tr.total-row td { font-weight:700; border-top:2px solid var(--muted); }
.totals { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:8px; }
.totals .card { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:8px 10px; }
.totals .card .k { color:var(--muted); font:600 11.5px var(--font-head); text-transform:uppercase; letter-spacing:.07em; }
.totals .card .v { font:700 19px var(--font-head); }
.totals .card.grand { background:var(--warnbg); border-color:color-mix(in srgb, var(--warn) 40%, var(--line)); }
.totals .card.grand .v { color:var(--accent); }
.totals .card.split { border-color:color-mix(in srgb, var(--accent) 45%, var(--line)); }
.totals .card.sub { background:transparent; }
.totals .card.sub .v { font-size:15px; font-weight:600; }
details.plan-list { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:6px 10px; }
details.plan-list summary { cursor:pointer; font-weight:600; }
.boardplan { font-family:var(--mono); font-size:12px; padding:3px 0; border-top:1px solid var(--line); }
.boardplan .bar { display:flex; height:14px; margin-top:3px; border:1px solid #b9a27e; border-radius:2px; overflow:hidden; background:repeating-linear-gradient(45deg, #f2ece1, #f2ece1 4px, #e6dccb 4px, #e6dccb 8px); }
.boardplan .bar span { background:#d9b98a; border-right:2px solid #fff; }
.note { color:var(--muted); font-size:12.5px; margin-top:6px; }

/* ---------- report ---------- */
/* The report view: the tools, then the report (scrolls) beside the editor panel (Edit report). */
.view[data-view=report].on { display:flex; flex-direction:column; }
.report-tools { flex:none; padding:10px 18px; display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; border-bottom:1px solid var(--line); }
.report-body { flex:1; min-height:0; display:flex; }
.report-scroll { flex:1; min-width:0; overflow:auto; }
.report { padding:14px 18px 60px; max-width:1000px; }
.report h1 { font-size:24px; margin:0 0 4px; }
.report h2 { font-size:18px; margin:22px 0 6px; border-bottom:2px solid var(--ink); padding-bottom:3px; }
.report h3 { font-size:15px; margin:14px 0 4px; }
.report .meta { color:var(--muted); margin-bottom:10px; }
.report .params { columns:2; column-gap:24px; font-size:12.5px; }
.report .params .grp { break-inside:avoid; margin-bottom:8px; }
.report .params .grp b { display:block; margin-bottom:2px; }
.report .params .kv { display:flex; justify-content:space-between; border-bottom:1px dotted var(--line); }
.report .rep-st { margin-bottom:14px; }
.report .rep-st > h3 .kind { font-weight:400; color:var(--muted); font-size:13px; margin-left:6px; }
.report .permit { font-size:13px; color:var(--muted); margin-bottom:6px; }
.report .permit.over { color:var(--err); font-weight:600; }
.report .rep-total { font-size:14px; margin-top:10px; }
.report .dwg svg { width:100%; height:auto; display:block; background:#fff; border-radius:6px; }
/* each part is a sheet: its own page in print, a card-like block on screen */
.rep-sec { margin-top:26px; padding-top:4px; border-top:1px dashed var(--line); }
.rep-sec:first-child { margin-top:0; border-top:0; }
.rep-sec .sec-body, .rep-sec { position:relative; }
.report h2.sec-h { display:flex; align-items:baseline; gap:12px; margin-top:12px; }
.report h2.sec-h > span:first-child { flex:1; }
.sheet-no { font:500 12.5px var(--font-body); color:var(--muted); white-space:nowrap; }
.sec-note { margin-top:10px; padding:8px 12px; border:1px solid var(--line); border-radius:8px; font-size:13px; }
.sec-note ul { margin:4px 0 0; padding-left:18px; }
/* the cover */
.cover-top { display:flex; justify-content:space-between; gap:12px; font:600 12px var(--font-head); text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.cover-top .sheet-no { text-transform:none; letter-spacing:0; }
.report .cover h1 { font-size:30px; margin:6px 0 4px; }
.cover-sub { color:var(--muted); }
.cover-info { font-size:15px; margin:6px 0; }
.cover-notes { margin:4px 0 0; padding-left:20px; font-size:14px; }
.cover-notes li { margin:3px 0; }
table.toc { width:auto; min-width:min(420px, 100%); }
table.toc td.n { width:44px; color:var(--muted); }

/* ---------- the report editor (screen only) ---------- */
.ed-only { display:none; }
.report.editing .ed-only { display:block; }
.report.editing .sec-tools.ed-only { display:flex; }
.rep-editor { flex:none; width:340px; overflow:auto; border-left:1px solid var(--line); background:var(--panel); padding:10px 14px 40px; }
.ed-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
.ed-head b { font:700 17px var(--font-head); }
.ed-sec { border-top:1px solid var(--line); padding:6px 0 10px; }
.ed-sec > summary { cursor:pointer; font:600 12px var(--font-head); text-transform:uppercase; letter-spacing:.09em; color:var(--muted); padding:6px 0; }
.ed-field { display:flex; flex-direction:column; gap:3px; margin:6px 0 8px; font-size:13px; color:var(--muted); }
.ed-field input, .ed-field textarea { width:100%; color:var(--ink); font-size:14px; }
.ed-field textarea, .sec-notes textarea { resize:vertical; padding:6px 8px; border:1px solid var(--line); border-radius:7px; background:var(--field); color:var(--ink); }
.ed-chk { color:var(--ink); margin-top:4px; align-items:flex-start; }
.ed-chk input { margin-top:2px; }
.ed-tip { font-size:12.5px; color:var(--muted); margin:4px 0 8px; }
.grip-ic { font-size:14px; }
.sl-fixed { display:flex; align-items:center; gap:8px; padding:5px 6px 5px 30px; font-size:13.5px; }
.sl-fixed small { color:var(--muted); margin-left:auto; }
.sheet-list { list-style:none; margin:0 0 8px; padding:0; display:flex; flex-direction:column; gap:3px; }
.sl-row { border:1px solid var(--line); border-radius:8px; background:var(--card); }
.sl-row.off .nm { color:var(--muted); }
.sl-row.dragging { border-color:var(--accent); box-shadow:var(--shadow); position:relative; z-index:2; }
.sl-line { display:flex; align-items:center; gap:6px; padding:3px 4px 3px 2px; min-height:36px; }
.sl-line .grip { flex:none; width:22px; text-align:center; color:var(--muted); cursor:grab; touch-action:none; user-select:none; font-size:15px; padding:6px 0; }
.sl-line .grip:hover { color:var(--ink); }
.sl-line .nm { flex:1; min-width:0; text-align:left; border:0; padding:4px 2px; font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sl-line .nm:hover { background:transparent; text-decoration:underline; text-underline-offset:3px; }
.sl-line .mv { flex:none; border:0; padding:4px 7px; color:var(--muted); font-size:14px; }
.sl-line .mv:hover:not(:disabled) { color:var(--ink); }
.sl-line .more { flex:none; color:var(--muted); }
.sl-sub { list-style:none; margin:0; padding:2px 8px 8px 58px; display:flex; flex-direction:column; gap:3px; font-size:13px; }
.sl-sub .chk { color:var(--ink); }
body.sorting, body.sorting * { cursor:grabbing !important; user-select:none !important; }
/* per-sheet tools above each part and the notes box under it */
.sec-tools { position:sticky; top:0; z-index:3; align-items:center; flex-wrap:wrap; gap:6px 8px; padding:6px 0; background:var(--bg); }
.sec-tools button.on { border-color:var(--accent); color:var(--accent); }
.sec-hint { font-size:12.5px; color:var(--muted); }
.sec-notes { margin-top:8px; font-size:12.5px; color:var(--muted); }
.sec-notes span { display:block; margin-bottom:3px; }
.sec-notes textarea { width:100%; font-size:14px; }
/* on a sheet: labels can be dragged, your dimensions clicked, new ones placed */
.report.editing .dwg svg [data-label] { cursor:move; touch-action:none; }
.report.editing .dwg svg .lbl-hit { fill:transparent; stroke:none; }
.report.editing .dwg svg [data-label]:hover .lbl-hit, .report.editing .dwg svg [data-label].dragging .lbl-hit { fill:rgba(224,169,59,.12); stroke:#E0A93B; stroke-width:1; stroke-dasharray:3 2; }
@media (hover: none) { .report.editing .dwg svg .lbl-hit { stroke:rgba(224,169,59,.55); stroke-width:.8; stroke-dasharray:2 2; } }
.report.editing .dwg svg [data-dim] { cursor:pointer; }
.report.editing .dwg svg .dim-hit { stroke:transparent; stroke-width:12px; }
.report.editing .dwg svg [data-dim]:hover > line:not(.dim-hit), .report.editing .dwg svg [data-dim].picked > line:not(.dim-hit) { stroke:#E0A93B; }
/* zoom and pan (Ctrl + wheel, pinch, - / +, double-click; drag the paper) and drawn areas to restyle */
.report.editing .dwg svg[data-sheet] { touch-action:pan-y; }
.report.editing .dwg svg[data-sheet].zoomed { touch-action:none; cursor:grab; outline:1px solid var(--line); }
.report.editing .dwg svg [data-el] { cursor:pointer; }
.report.editing .dwg svg [data-el]:hover, .report.editing .dwg svg [data-el].picked { filter:drop-shadow(0 0 1.2px #E0A93B) drop-shadow(0 0 1.2px #E0A93B); }
body.report-wide.on-report .side, body.report-wide.on-report .splitter { display:none; }
.zoom-ctl { display:inline-flex; gap:2px; }
.zoom-ctl[hidden] { display:none; }
.zoom-ctl { align-items:center; }
.zoom-ctl .zlbl { width:62px; padding:4px 6px; text-align:center; font-size:12.5px; }
.zoom-ctl .zstep { width:auto; padding:4px 4px; font-size:12px; margin-left:2px; }
.zoom-ctl .crop-btn { margin-left:6px; }
.el-pop { position:absolute; z-index:5; width:296px; max-width:calc(100% - 8px); padding:8px 10px 4px; background:var(--panel); border:1px solid var(--line);
  border-radius:10px; box-shadow:var(--shadow); font-size:13px; }
.el-pop .pop-head { display:flex; justify-content:space-between; align-items:center; gap:8px; margin:-8px -10px 2px; padding:8px 10px 2px;
  cursor:move; touch-action:none; user-select:none; border-radius:10px 10px 0 0; }
.el-pop .pop-head b::before { content:"⠿"; margin-right:6px; color:var(--muted); font-weight:400; }
.el-pop.floating { position:fixed; z-index:40; max-height:calc(100vh - 8px); overflow:auto; }
.el-pop.moving { opacity:.85; }
.el-pop .pop-head b { font:700 14px var(--font-head); }
.swatches { display:flex; flex-wrap:wrap; gap:4px; align-items:center; }
.swatches .sw { width:22px; height:22px; min-height:0; padding:0; border:1px solid var(--line); border-radius:5px; }
.swatches .sw.on { outline:2px solid var(--accent); outline-offset:1px; }
.swatches input[type=color] { width:30px; height:24px; padding:0; border:0; background:none; cursor:pointer; }
.seg.pats { display:flex; flex-wrap:wrap; gap:3px; }
.seg.pats button.on { border-color:var(--accent); color:var(--accent); }
/* a label's box: show it, turn it, its text size; a picked label keeps its outline */
.el-pop .pop-show { margin:2px 0 4px; }
.el-pop .pop-row { display:flex; flex-wrap:wrap; align-items:center; gap:4px; }
.el-pop .pop-foot { margin:6px 0 2px; }
.el-pop .num-lbl { display:inline-flex; align-items:center; gap:3px; color:var(--muted); }
.el-pop input.num { width:62px; padding:4px 6px; }
.report.editing .dwg svg [data-label].picked .lbl-hit { fill:rgba(224,169,59,.12); stroke:#E0A93B; stroke-width:1; stroke-dasharray:3 2; }
.sec-tools .hid-link { color:var(--accent); }
.show-list .show-head { font-size:12px; color:var(--muted); margin:8px 0 2px; }
.show-grp { list-style:none; margin:0; padding:0 0 0 2px; display:flex; flex-direction:column; gap:3px; font-size:13.5px; }
.show-grp .chk { color:var(--ink); }
.rep-sec.adding .dwg svg, .rep-sec.adding .dwg svg * { cursor:crosshair !important; }
.rep-sec.adding .dwg svg { touch-action:none; outline:2px solid #E0A93B; outline-offset:2px; border-radius:6px; }
.ed-ov { pointer-events:none; }
.ed-ov.placed { opacity:.75; }
.dim-menu { position:absolute; z-index:4; display:flex !important; align-items:center; gap:6px; padding:6px 8px; background:var(--panel); border:1px solid var(--line);
  border-radius:9px; box-shadow:var(--shadow); font-size:13px; white-space:nowrap; }
button.danger { color:var(--err); border-color:color-mix(in srgb, var(--err) 45%, var(--line)); }
.disclaimer { margin-top:20px; padding:10px 12px; background:var(--warnbg); border-left:4px solid var(--warn); border-radius:0 8px 8px 0; font-size:13px; }

/* ---------- user guide ---------- */
.guide { padding:22px 24px 60px; max-width:980px; margin:0 auto; }
.g-hero { padding:6px 0 10px; }
.g-hero h1 { font-size:30px; margin:0 0 6px; }
.g-hero .lead { font-size:16px; color:var(--muted); max-width:720px; margin:0 0 12px; }
.g-actions { display:flex; gap:8px; flex-wrap:wrap; }
.g-actions button { padding:8px 16px; font-size:15px; }
.g-start { margin-top:18px; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px 18px; }
.g-start h2, .g-text h2 { font-size:19px; margin:4px 0 8px; }
.g-steps { margin:0; padding-left:22px; font-size:14.5px; }
.g-steps li { margin:6px 0; }
.g-callout { display:block; margin:14px 0; padding:10px 14px; background:var(--warnbg); border-left:4px solid var(--warn); border-radius:0 8px 8px 0; font-size:13.5px; }
.g-toc { display:flex; flex-wrap:wrap; gap:6px; margin:16px 0; }
.g-toc a { font-size:12.5px; padding:5px 11px; border:1px solid var(--line); border-radius:999px; background:var(--panel); color:var(--muted); text-decoration:none; }
.g-toc a:hover { border-color:var(--accent); color:var(--accent); }
.g-card { display:grid; grid-template-columns:minmax(0, 3fr) minmax(0, 2fr); gap:18px; align-items:start; background:var(--panel); border:1px solid var(--line);
  border-radius:12px; padding:14px 18px; margin-bottom:14px; scroll-margin-top:10px; }
.g-card.no-img { grid-template-columns:1fr; }
.g-text { font-size:14px; line-height:1.55; }
.g-text p { margin:0 0 8px; }
.g-text ul { margin:0 0 8px; padding-left:20px; }
.g-text li { margin:3px 0; }
.g-open { margin-top:4px; font-size:12.5px; }
.g-fig { margin:0; }
.g-fig img { width:100%; height:auto; display:block; border:1px solid var(--line); border-radius:8px; background:#fff; }
.g-foot { color:var(--muted); font-size:12.5px; margin-top:8px; }

/* ---------- phones and small tablets: the view on top, the steps underneath ---------- */
@media (max-width: 800px) {
  #wideReportBtn { display:none; }
  body.report-wide.on-report .side { display:flex; }
  .layout { flex-direction:column; }
  .main { flex:none; height:52svh; min-height:280px; order:-1; border-bottom:1px solid var(--line); }
  .side { width:auto; flex:1; border-right:0; min-height:0; }
  .splitter { display:none; }
  /* two rows: the mark, design name and icons; then the estimate, permit and warnings */
  .top { flex-wrap:wrap; gap:6px 6px; padding-left:calc(10px + var(--safe-l)); padding-right:calc(10px + var(--safe-r)); }
  .top > .grow { display:none; }
  .brand span { display:none; }
  .design-wrap { flex:1 1 40%; }
  .design-btn { max-width:none; width:100%; }
  #helpBtn, #themeBtn, #settingsBtn, .qdw { order:1; }
  .chip, .warn-btn { order:2; }
  .qdw .long, .help-chip, .nav-box { display:none; }
  .chip { padding:3px 8px; font-size:12px; }
  .chip.permit .long { display:none; }
  .model-tools, .site-tools { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding:6px 8px; }
  .model-tools::-webkit-scrollbar, .site-tools::-webkit-scrollbar { display:none; }
  /* the Show row scrolls sideways too, fading at the edge so the rest of it is findable */
  .show-bar { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding:4px 8px;
    -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 22px), transparent); mask-image:linear-gradient(to right, #000 calc(100% - 22px), transparent); }
  .show-bar::-webkit-scrollbar { display:none; }
  .site-tools button { flex:none; white-space:nowrap; }    /* one line each, the row scrolls (like the 3D toolbar) */
  .show-bar button.cat:last-child { margin-right:18px; }
  .seg button { padding:7px 10px; }
  .seg button.caret { padding:7px 14px; }
  .layers { top:8px; left:8px; max-height:45%; }
  .part-info { top:auto; bottom:8px; left:8px; right:8px; width:auto; max-height:42%; }
  .legend { display:none; }
  .plans-grid { grid-template-columns:1fr; }
  .bom { padding:0 10px 50px; }
  .bom h2 { flex-wrap:wrap; }
  table.t { font-size:12.5px; }
  .report .params { columns:1; }
  .report { padding:10px 12px 50px; }
  .view[data-view=report].on { display:block; overflow:auto; }
  .report-tools { padding:8px 12px; }
  .report-body { display:flex; flex-direction:column; }
  .report-scroll { overflow:visible; }
  .rep-editor { order:-1; width:auto; overflow:visible; border-left:0; border-bottom:1px solid var(--line); padding:8px 12px 12px; }
  .guide { padding:14px 12px 50px; }
  .g-card { grid-template-columns:1fr; padding:12px 14px; }
  .g-fig { order:-1; }
  .sp-modebar { bottom:auto; top:8px; }
  .site-hint { max-width:calc(100% - 20px); top:auto; bottom:8px; }
  .modal { padding:6px; }
}
@media (max-width: 420px) {
  .chip.cost .lbl { display:none; }
  .qdw { display:none; }
}
@media (pointer: coarse) {
  button, .tabs button { min-height:40px; }
  .rowbtns button, .presets button { min-height:30px; }
  .show-bar button.cat { min-height:34px; }
  .lrow .ltoggle { width:32px; height:32px; min-height:32px; }
  input[type=number], input[type=text], input[type=email], input[type=password], select { font-size:16px; }
  .sp-menu button { padding:10px 12px; }
}

/* ---------- print: the report only, black on white ---------- */
/* ---- Prices & parts panel (pricepanel.js): a drawer over the right side; full screen on a phone */
.price-panel { position:fixed; top:0; right:0; bottom:0; width:min(440px, 100vw); z-index:45; background:var(--panel); color:var(--ink);
  border-left:1px solid var(--line); box-shadow:-10px 0 30px rgba(0,0,0,.28); overflow:auto; overscroll-behavior:contain;
  padding:0 calc(14px + var(--safe-r)) calc(28px + var(--safe-b)) 14px; }
.pp-head { position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:8px; background:var(--panel);
  padding:calc(10px + var(--safe-t)) 0 8px; border-bottom:1px solid var(--line); }
.pp-head b { font:700 17px var(--font-head); }
.pp-head button { min-height:36px; padding:0 14px; }
.pp-totals { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:6px; margin:10px 0 8px; }
.pp-stat { background:var(--card); border-radius:8px; padding:5px 9px; }
.pp-stat .k { font:600 10.5px var(--font-head); text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.pp-stat .v { font:700 15px var(--font-head); }
.pp-stat.grand { grid-column:1 / -1; background:var(--warnbg); }
.pp-stat.grand .v { color:var(--accent); font-size:18px; }
.pp-mode { margin:0 0 6px; width:100%; }
.pp-mode button { flex:1; min-height:38px; font-size:13.5px; }
.pp-mode button[aria-pressed=true] { background:var(--card); color:var(--accent); font-weight:700; }
.pp-sec { border-top:1px solid var(--line); padding:4px 0; }
.pp-sec > summary { cursor:pointer; padding:10px 0; font:700 14.5px var(--font-head); min-height:24px; }
.pp-estimate .sec > summary { padding:10px 0; }
.pp-group { display:flex; justify-content:space-between; gap:8px; margin:10px 0 4px; font:600 11.5px var(--font-head); text-transform:uppercase;
  letter-spacing:.07em; color:var(--muted); }
.pp-parts { display:flex; flex-direction:column; gap:2px; }
.pp-part { display:flex; align-items:center; gap:10px; min-height:44px; padding:4px 6px; border-radius:8px; cursor:pointer; }
.pp-part:hover { background:var(--card); }
.pp-part input { width:20px; height:20px; flex:none; accent-color:var(--accent); }
.pp-part .t { flex:1; min-width:0; }
.pp-part .t small { color:var(--warn); font-weight:600; }
.pp-part .v { font-variant-numeric:tabular-nums; font-weight:600; }
.pp-part.out .t, .pp-part.out .v { color:var(--muted); text-decoration:line-through; text-decoration-thickness:1px; }
.pp-part.out .t small { text-decoration:none; display:inline-block; }
.pp-lines { display:flex; flex-direction:column; }
.pp-line { display:flex; flex-wrap:wrap; align-items:flex-end; gap:4px 10px; padding:8px 0; border-bottom:1px solid var(--rowline); }
.pp-line .nm { flex:1 1 100%; font-size:13.5px; }
.pp-line .nm small { display:block; color:var(--muted); font-size:12px; }
.pp-line .nm .tyler-flag { margin-left:6px; }
.pp-line .f { display:flex; flex-direction:column; gap:2px; font-size:11px; color:var(--muted); }
.pp-line .c { margin-left:auto; font-variant-numeric:tabular-nums; font-weight:600; padding-bottom:8px; }
.pp-num { width:92px; min-height:38px; font-size:16px; font-variant-numeric:tabular-nums; }
.pp-foot { border-top:1px solid var(--line); margin-top:8px; padding-top:8px; display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.pp-foot button { min-height:40px; }
/* a wide screen makes room for the panel (the report and cost page stay in view beside it) */
@media (min-width: 1200px) { body.prices-open { padding-right:min(440px, 100vw); } .price-panel { box-shadow:none; } }
.parts-here { max-width:620px; }
.parts-here .pp-part { min-height:38px; }
/* the cost page's Show filter */
.kind-filter { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:14px 0 4px; }
.kind-filter .lbl { font:600 11.5px var(--font-head); text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin-right:2px; }
.kind-filter button { border-radius:999px; padding:5px 12px; min-height:34px; font-size:13px; }
.kind-filter button[aria-pressed=true] { background:var(--card); color:var(--accent); border-color:var(--accent); font-weight:700; }
@media (pointer: coarse) { .kind-filter button { min-height:40px; } }
@media print {
  /* :root[data-theme]: the app always sets a theme, and the dark one would print light text */
  :root, :root[data-theme] { color-scheme:light; --ink:#1D1A15; --muted:#555; --line:#ccc; --rowline:#e4e4e4; --panel:#fff; --card:#f3f3f3; --bg:#fff; --field:#fff;
    --accent:#8A5A00; --err:#B83A26; --errbg:#F8E1D9; --ok:#3F7A3A; --okbg:#E3EFD9; --warn:#8A5A00; --warnbg:#fff7e0; --ref:#6B7A88; --refbg:#E4E8EC; --sky:#2F6A9E; }
  body { background:#fff; color:#000; display:block; height:auto; }
  .top, .buildbar, .side, .splitter, .main-tabs, .report-tools, .view:not([data-view=report]) { display:none !important; }
  .layout, .main { display:block; height:auto; }
  .view[data-view=report] { display:block !important; overflow:visible; }
  .report { padding:0; max-width:none; }
  .report-body, .report-scroll { display:block !important; overflow:visible !important; }
  .rep-editor, .report-tools, .ed-only, .print-hide, .dim-menu, .el-pop, .lbl-hit, .dim-hit, .ed-ov, .price-panel { display:none !important; }
  .dwg svg [data-el] { filter:none !important; }
  table.t { font-size:11px; }
  .report h2, .report h3 { break-after:avoid; }
  .report tr, .report .kv { break-inside:avoid; }
  .report .table-scroll { overflow:visible; }
  /* every part on its own page; the site and detail sheets on landscape pages */
  .rep-sec { break-before:page; margin:0; padding:0; border:0; }
  .rep-sec:first-child { break-before:auto; }
  .rep-sec.land { page:land; }
  .rep-sec .dwg { break-inside:avoid; }
  .report .dwg svg { max-height:9in; border-radius:0; }
  /* a sheet is one landscape page: 7.7in high inside the margins; its heading isn't printed (print-hide:
     the sheet's own title block names it) */
  .rep-sec.land .dwg svg { max-height:7.6in; }
  .report h2.sec-h { margin-top:0; }
  /* the summary and materials, denser, so a usual design's fit a portrait page each */
  .report .params { columns:3; column-gap:16px; font-size:10.5px; }
  .report .params .grp { margin-bottom:4px; }
  .report .rep-st { margin-bottom:8px; }
  .report h3 { font-size:13px; margin:8px 0 3px; }
  table.t th { padding:2px 6px; font-size:10px; line-height:1.25; }
  table.t td { padding:2px 6px; line-height:1.25; }
  table.t td.n { font-size:11px; }
  table.t td.dim, table.t tr.sub td { font-size:10px; }
  .pop, .modal, .dlg { display:none !important; }
}
@page { size:letter; margin:0.5in; }                    /* US Letter by default: portrait for the text parts */
@page land { size:letter landscape; margin:0.4in; }    /* the site and detail sheets (landscape Letter) */

/* contractor roadmap: a starting number waiting on Tyler's real figure (TYLER-INPUT) */
.tyler-flag { display:inline-block; font-size:11px; font-weight:600; letter-spacing:.04em; padding:1px 6px; border-radius:3px;
  background:var(--warnbg); color:var(--warn); border:1px solid var(--line); white-space:nowrap; cursor:help; }
.tyler-flag[hidden] { display:none; }
.cost-head { display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; justify-content:space-between; margin:4px 0 10px; }
.cost-head .mode { color:var(--muted); font-size:13px; max-width:60ch; }
.cost-view { display:inline-flex; border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.cost-view button { border:0; background:transparent; color:var(--ink); padding:5px 10px; font:inherit; font-size:13px; cursor:pointer; }
.cost-view button[aria-pressed="true"] { background:var(--ink); color:var(--bg); }
.not-incl { margin:4px 0 12px; padding-left:18px; display:flex; flex-direction:column; gap:4px; }
.not-incl button.link { margin-left:8px; border:0; background:none; color:var(--sky); text-decoration:underline; cursor:pointer; font:inherit; font-size:12px; }
.note.sched b, .note.tyler-note .tyler-flag { margin-right:6px; }
.rep-excl { font-size:12px; color:var(--muted); }

/* contractor roadmap M3: price list dates, surcharges, Import CSV and Paste a yard quote */
#matStatus { margin:0 0 10px; }
.mat-asof { font-size:11.5px; color:var(--muted); white-space:nowrap; }
.mat-asof.old { color:var(--warn); font-weight:600; }
.mat-dates { display:flex; flex-wrap:wrap; gap:4px 18px; font-size:12.5px; color:var(--muted); margin:0 0 8px; }
.mat-dates.old > div:first-child { color:var(--warn); }
.mat-dates input { width:64px; padding:2px 5px; font-size:12.5px; }
.mat-dates .small { font-size:12px; }
.mat-adjust { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0 0 8px; font-size:12.5px; color:var(--muted); }
.mat-adjust .chip.adj { cursor:pointer; background:var(--warnbg); color:var(--warn); font-size:12.5px; padding:2px 9px; }
.subtabs .tab-adj { color:var(--warn); font-weight:600; }
.subtabs button.on .tab-adj { color:inherit; }
.mat-panel { border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin:0 0 10px; background:var(--card); }
.mat-panel h4 { margin:0 0 6px; font-size:15px; }
.mat-panel p { margin:4px 0 8px; font-size:13px; }
.mat-panel .actions { display:flex; justify-content:flex-end; gap:8px; margin-top:10px; }
.mat-panel label.check { display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--muted); }
.mat-panel .quote-text { width:100%; box-sizing:border-box; font-family:var(--mono); font-size:12.5px; padding:6px 8px; }
.mat-panel .status-box ul { margin:4px 0 0; padding-left:18px; }
.mat-panel .small { font-size:12px; color:var(--muted); }
.preview-scroll { max-height:46vh; overflow:auto; }
.mat-table.preview td { vertical-align:top; font-size:12.5px; padding:3px 5px; border-top:1px solid var(--rowline); }
.mat-table.preview select { min-width:180px; }
.mat-table.preview .st { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.mat-table.preview tr.st-added .st, .mat-table.preview tr.st-match .st { color:var(--ok); }
.mat-table.preview tr.st-changed .st, .mat-table.preview tr.st-guess .st { color:var(--warn); }
.mat-table.preview tr.st-removed .st { color:var(--err); }