/* Proto Configurator — product theme (Linear-leaning: neutral ramp + indigo accent, hairline
   borders, tabular numerals, minimal shadow). The generated quote DOCUMENT keeps DESIGN.md; this
   is the TOOL. */
:root {
  --bg: #fcfcfd; --surface: #fff; --surface-2: #f7f7f8; --surface-3: #f1f1f3;
  --border: #ececee; --border-2: #e0e0e3;
  --ink: #18181b; --ink-2: #51525c; --ink-3: #8a8a94;
  --accent: #5e6ad2; --accent-hov: #4d59c9; --accent-bg: #f1f2fc; --accent-ink: #454fbf;
  --ok: #15803d; --ok-bg: #f0fdf4; --ok-bd: #bbf7d0;
  --warn: #b45309; --warn-bg: #fffbeb; --warn-bd: #fde68a;
  --err: #dc2626; --err-bg: #fef2f2; --err-bd: #fecaca;
  --r-sm: 5px; --r: 7px; --r-lg: 10px;
  --sh: 0 1px 2px rgba(24,24,27,.05), 0 1px 1px rgba(24,24,27,.03);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --num: 'Inter', ui-monospace, monospace; font-feature-settings: 'tnum' 1, 'cv05' 1;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg); font-size: 13.5px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
.tiny { font-size: 12px; } .muted { color: var(--ink-3); } .grow { flex: 1; }

/* top bar — thin, light, hairline */
.bar { background: var(--surface); border-bottom: 1px solid var(--border); padding: 0 20px; height: 50px; display: flex; align-items: center; gap: 14px; }
.logo { font-weight: 600; letter-spacing: -.01em; color: var(--ink); font-size: 14px; }
.pill { background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--border); border-radius: 6px; padding: 3px 10px; font-size: 12px; font-weight: 500; }
.spacer { flex: 1; }
.viewseg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 7px; padding: 2px; gap: 2px; }
.viewseg button { border: none; background: transparent; color: var(--ink-2); padding: 4px 11px; cursor: pointer; font-family: var(--font); font-size: 12px; font-weight: 500; border-radius: 5px; }
.viewseg button.on { background: var(--surface); color: var(--ink); box-shadow: var(--sh); }
/* internal mode = a quiet tint, not a loud banner */
.modebanner { display: none; }
body[data-view=internal] { --bg: #faf9fc; }
body[data-view=internal] .bar { box-shadow: inset 0 -2px 0 var(--accent); }
body[data-view=internal] #viewtag { background: var(--accent-bg); color: var(--accent-ink); border-color: transparent; }
/* Anon lead-gen: no view toggles, no internal/scope chrome — just a clean public builder. */
body[data-anon] .viewseg, body[data-anon] #viewtag { display: none; }
/* Account + saved-quotes */
.acct { display: inline-flex; align-items: center; gap: 8px; }
.acctbtn { border: 1px solid var(--border-2); background: var(--surface); color: var(--ink-2); border-radius: 6px; padding: 3px 10px; font-size: 12px; cursor: pointer; font-family: var(--font); }
.acctbtn:hover { border-color: var(--accent); color: var(--accent-ink); } .acctbtn.ghost { border-color: transparent; color: var(--ink-3); }
.acctu { font-size: 12px; color: var(--ink-2); max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qpanel { border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); margin-bottom: 11px; overflow: hidden; }
.qph { background: var(--surface-2); padding: 6px 11px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-2); display: flex; justify-content: space-between; align-items: center; }
.qrow { display: flex; justify-content: space-between; align-items: center; padding: 6px 11px; border-top: 1px solid var(--border); font-size: 12.5px; } .qrow.cur { background: var(--accent-bg); }
.qrow .ql { color: var(--ink); } .qst { font-style: normal; font-size: 10px; text-transform: uppercase; letter-spacing: .03em; padding: 1px 5px; border-radius: 4px; background: var(--surface-3); color: var(--ink-2); }
.qst.s-submitted, .qst.s-priced { background: var(--accent-bg); color: var(--accent-ink); } .qst.s-won { background: var(--ok-bg); color: var(--ok); } .qst.s-lost { background: var(--surface-3); color: var(--ink-3); }

.layout { max-width: 1180px; margin: 22px auto; padding: 0 20px; display: grid; grid-template-columns: 1fr 296px; gap: 20px; align-items: start; }
@media (max-width: 920px) { .layout { grid-template-columns: 1fr; } }

/* recon */
.recon { border: 1px solid var(--warn-bd); background: var(--warn-bg); border-radius: var(--r-lg); padding: 12px 14px; margin-bottom: 14px; }
.recon .rh { font-weight: 600; color: var(--warn); font-size: 12.5px; margin-bottom: 9px; }
.dgrid { background: var(--surface); border: 1px solid var(--warn-bd); border-radius: var(--r); padding: 9px 11px; margin-bottom: 10px; }
.dgrid .dlbl { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); margin-bottom: 5px; }
.drow { display: flex; justify-content: space-between; font-size: 12.5px; padding: 2px 0; color: var(--ink-2); }
.drow .amt { font-variant-numeric: tabular-nums; color: var(--ink-3); }
.tray .tlbl { font-size: 11px; font-weight: 600; color: var(--warn); display: block; margin-bottom: 7px; text-transform: uppercase; letter-spacing: .03em; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--warn-bd); border-radius: 7px; padding: 4px 10px; margin: 0 6px 6px 0; font-size: 12.5px; cursor: pointer; }
.chip:hover { border-color: var(--warn); } .chip.used { opacity: .4; } .chip .rem { font-variant-numeric: tabular-nums; color: var(--warn); font-size: 11px; }

/* library palette — a recessed source bin */
.librow { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 9px 12px; margin-bottom: 14px; }
.librow .lbl { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.mdl { border: 1px solid var(--border-2); background: var(--surface); border-radius: 6px; padding: 4px 10px; font-size: 12px; cursor: pointer; color: var(--ink-2); font-weight: 500; }
.mdl:hover { border-color: var(--accent); color: var(--accent-ink); } .mdl.new { border-style: dashed; color: var(--accent-ink); }

/* locations — accordion */
.loc { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); margin-bottom: 10px; overflow: hidden; box-shadow: var(--sh); }
.lhead { display: flex; align-items: center; gap: 9px; padding: 11px 13px; cursor: pointer; }
.lhead:hover { background: var(--surface-2); } .lhead.open { border-bottom: 1px solid var(--border); }
.lhead .tw { color: var(--ink-3); font-size: 11px; width: 10px; }
.lname { border: 1px solid transparent; background: transparent; font-weight: 600; font-size: 13.5px; color: var(--ink); border-radius: 5px; padding: 2px 6px; font-family: var(--font); min-width: 200px; }
.lname:hover { background: var(--surface-2); } .lname:focus { outline: none; box-shadow: 0 0 0 2px var(--accent-bg); border-color: var(--accent); }
.badge { background: var(--surface-3); color: var(--ink-2); border-radius: 20px; font-size: 11px; font-weight: 600; padding: 1px 8px; }
.warn { color: var(--warn); font-size: 13px; } .lsum { font-weight: 600; color: var(--ink); font-size: 13px; font-variant-numeric: tabular-nums; }
body[data-view=scope] .lsum, body[data-view=scope] .v, body[data-view=scope] .recwrap { visibility: hidden; }
.lbody { padding: 13px; background: var(--surface-2); }

/* assembly — hairline card with an accent left rail, not a heavy blue box */
.asm { border: 1px solid var(--border-2); border-left: 3px solid var(--accent); border-radius: var(--r); background: var(--surface); margin-bottom: 11px; }
.asm.locked { border-left-color: var(--warn); }
/* Locked = fully read-only: freeze every layer (inputs, selects, checkboxes, app + assign blocks).
   The header stays live so you can unlock/clone/adjust qty (add-only). */
.asm.locked .layer { pointer-events: none; opacity: .72; }
.lockbtn.disabled { opacity: .4; cursor: not-allowed; }
.ah { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.nm { font-weight: 600; font-size: 13.5px; border: 1px solid transparent; border-radius: 5px; padding: 2px 6px; background: transparent; min-width: 190px; font-family: var(--font); color: var(--ink); }
.nm:hover { background: var(--surface-2); } .nm:focus { outline: none; box-shadow: 0 0 0 2px var(--accent-bg); }
.id { font-size: 10.5px; color: var(--ink-3); font-family: var(--num); }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--border-2); border-radius: 6px; background: var(--surface); font-size: 12.5px; }
.qty button { border: none; background: none; cursor: pointer; padding: 1px 9px; color: var(--ink-2); font-weight: 600; } .qty button:hover { color: var(--accent); } .qty .n { padding: 0 3px; font-variant-numeric: tabular-nums; }
.lockbtn { font-size: 11.5px; border: 1px solid var(--border-2); border-radius: 6px; padding: 2px 9px; cursor: pointer; background: var(--surface); color: var(--ink-3); }
.lockbtn.on { background: var(--warn-bg); border-color: var(--warn-bd); color: var(--warn); }
.btnx { border: none; background: none; cursor: pointer; color: var(--ink-3); font-size: 14px; padding: 1px 5px; border-radius: 4px; } .btnx:hover { color: var(--err); background: var(--err-bg); }

.layer { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; padding: 8px 12px; border-top: 1px solid var(--border); }
.layer:first-of-type { border-top: none; }
.gut { width: 16px; flex-shrink: 0; text-align: center; font-weight: 700; font-size: 12px; }
.gut.ok { color: var(--ok); } .gut.warn { color: var(--warn); } .gut.err { color: var(--err); }
.ll { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); width: 64px; }
.blk { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--border); border-radius: 6px; padding: 3px 8px; background: var(--surface); font-size: 12.5px; color: var(--ink-2); }
.blk[data-tt] { cursor: pointer; } .blk[data-tt]:hover { border-color: var(--accent); } .blk.tgt { box-shadow: 0 0 0 2px var(--accent-bg); border-color: var(--accent); }
.blk .x { color: var(--ink-3); cursor: pointer; } .blk .x:hover { color: var(--err); } .amber { color: var(--warn); font-style: normal; font-weight: 600; }
.blk .cov { color: var(--ok); font-weight: 600; font-size: 11px; font-variant-numeric: tabular-nums; }
.ro { color: var(--ink-3); font-style: normal; font-size: 11px; } /* read-only catalog value */
.okm { color: var(--ok); font-style: normal; font-weight: 600; font-size: 10.5px; }
.soon { color: var(--accent-ink); font-style: normal; font-size: 10.5px; background: var(--accent-bg); border-radius: 4px; padding: 0 4px; }
.appamt { color: var(--ink-2); font-style: normal; font-size: 11px; font-variant-numeric: tabular-nums; }
.mini.xs { width: 42px; }
.lchip { display: inline-flex; align-items: center; gap: 4px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; font-size: 11.5px; margin-right: 3px; }
.lchip .x { color: var(--ink-3); cursor: pointer; } .lchip .x:hover { color: var(--err); }
.addsel.sm { padding: 2px 6px; font-size: 11.5px; }
.addsel.wide { width: 100%; padding: 7px 9px; margin-top: 2px; }
.litoggle { margin-top: 10px; }
.lipanel { border: 1px solid var(--border); border-radius: var(--r); margin-top: 6px; overflow: hidden; }
.lph { background: var(--surface-2); padding: 6px 11px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-2); }
.lirow { display: flex; justify-content: space-between; gap: 10px; padding: 5px 11px; border-top: 1px solid var(--border); font-size: 12px; }
.lirow.src { cursor: pointer; } .lirow.src:hover { background: var(--accent-bg); }
.customwork { border: 1px solid var(--border); border-radius: var(--r); margin-top: 11px; overflow: hidden; }
.cwh { background: var(--surface-2); padding: 6px 11px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-2); }
.cline { display: flex; align-items: center; gap: 6px; padding: 6px 11px; border-top: 1px solid var(--border); }
.cline .appamt { margin-left: auto; }
.customwork .addbtn { margin: 7px 11px; }
.lirow .lil { color: var(--ink-2); } .lirow .lia { font-variant-numeric: tabular-nums; color: var(--ink); }
/* Line-item → source highlight: applies to the ACTUAL component (.blk / .layer / .loc / .asm). */
.hl { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 5px; position: relative; z-index: 1; }
.flash { animation: flash 1.5s ease-out; border-radius: 5px; }
@keyframes flash { 0% { box-shadow: 0 0 0 3px var(--accent); } 55% { box-shadow: 0 0 0 3px var(--accent-bg); } 100% { box-shadow: 0 0 0 0 transparent; } }
.addsel { border: 1px dashed var(--border-2); color: var(--accent-ink); background: var(--surface); border-radius: 6px; padding: 4px 8px; font-size: 12.5px; font-family: var(--font); cursor: pointer; }
.addsel:hover { border-color: var(--accent); }
.blk.app.off { opacity: .5; border-style: dashed; }
.optt { font-size: 10.5px; letter-spacing: .02em; text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--border); border-radius: 4px; padding: 0 5px; cursor: pointer; }
.optt:hover { border-color: var(--accent); color: var(--accent-ink); } .optt.is { color: var(--accent-ink); border-color: var(--accent); background: var(--accent-bg); }
.inc { font-size: 11px; cursor: pointer; border-radius: 4px; padding: 0 6px; border: 1px solid var(--border); color: var(--ink-3); } .inc.on { color: var(--ok); border-color: var(--ok-bd); background: var(--ok-bg); }
.effpanel { border: 1px solid var(--border); border-radius: var(--r); margin-top: 11px; overflow: hidden; }
.effh { background: var(--surface-2); padding: 6px 11px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-2); display: flex; gap: 8px; align-items: baseline; }
.effstat { padding: 8px 11px; font-size: 12.5px; color: var(--ink); border-top: 1px solid var(--border); } .effstat b { font-variant-numeric: tabular-nums; }
.effsave { display: flex; justify-content: space-between; padding: 8px 11px; border-top: 1px solid var(--border); font-size: 13px; font-weight: 600; background: var(--ok-bg); }
.effrow { display: flex; justify-content: space-between; padding: 5px 11px 5px 18px; border-top: 1px solid var(--border); font-size: 12px; color: var(--ink-2); }
.effrow .amt, .effsave .amt { font-variant-numeric: tabular-nums; } .amt.ok { color: var(--ok); }
.optpanel { border: 1px solid var(--border); border-radius: var(--r); margin-top: 11px; overflow: hidden; }
.oph { background: var(--surface-2); padding: 6px 11px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-2); }
.optrow { display: flex; align-items: center; gap: 8px; padding: 7px 11px; border-top: 1px solid var(--border); font-size: 12.5px; }
.optrow .ol { flex: 1; color: var(--ink); } .optrow .ol em { color: var(--ink-3); font-style: normal; font-size: 11px; }
.optrow .od { font-variant-numeric: tabular-nums; color: var(--ink-2); } .optrow.on .od { color: var(--ink); font-weight: 600; }
.osw { cursor: pointer; font-size: 11px; text-transform: uppercase; border-radius: 4px; padding: 1px 8px; border: 1px solid var(--border); color: var(--ink-3); min-width: 30px; text-align: center; }
.osw.on { color: #fff; background: var(--accent); border-color: var(--accent); }
.chip.pick { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-bg); color: var(--accent-ink); }
body.picking .blk[data-tt]:not(.tgt) { opacity: .4; } body.picking .blk.tgt { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 2px var(--accent-bg); } 50% { box-shadow: 0 0 0 4px var(--accent-bg); } }
.mini { width: 74px; border: 1px solid var(--border); border-radius: 5px; padding: 2px 6px; font-family: var(--font); font-size: 12.5px; color: var(--ink); } .mini.wide { width: 116px; } .mini:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-bg); }
select[data-path] { border: 1px solid var(--border); border-radius: 5px; padding: 2px 6px; font-family: var(--font); font-size: 12.5px; background: var(--surface); color: var(--ink); }
.chk { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-2); } .chk input { accent-color: var(--accent); }
.addbtn { border: 1px dashed var(--border-2); color: var(--accent-ink); background: var(--surface); border-radius: 6px; padding: 5px 11px; font-size: 12.5px; cursor: pointer; font-weight: 500; }
.addbtn:hover { border-color: var(--accent); background: var(--accent-bg); } .addbtn.sm { padding: 3px 9px; font-size: 12px; } .addbtn.wide { width: 100%; padding: 9px; }

/* summary */
.sum-col { position: sticky; top: 18px; }
.sumcard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px; box-shadow: var(--sh); }
.sumcard h3 { margin: 0 0 12px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); font-weight: 600; }
.total { border: 1px solid var(--border); border-radius: var(--r); padding: 12px 14px; margin-bottom: 8px; }
.total .l { font-size: 11.5px; font-weight: 500; color: var(--ink-3); } .total .v { font-size: 24px; font-weight: 700; color: var(--ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.total.amber { background: var(--warn-bg); border-color: var(--warn-bd); } .total.amber .l { color: var(--warn); } .total.amber .v { color: var(--warn); }
.total.brand { background: var(--accent); border-color: var(--accent); } .total.brand .l { color: #d9ddf7; } .total.brand .v { color: #fff; }
.recwrap { display: flex; gap: 8px; margin-bottom: 8px; } .rec { flex: 1; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); padding: 8px 10px; }
.rec .l { font-size: 10.5px; font-weight: 500; color: var(--ink-3); } .rec .v { font-size: 14px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.note { background: var(--accent-bg); border-radius: var(--r); padding: 9px 12px; font-size: 12px; color: var(--accent-ink); margin-bottom: 9px; }
.gate { font-size: 12px; border-radius: var(--r); padding: 8px 11px; margin: 9px 0; } .gate.err { background: var(--err-bg); color: var(--err); border: 1px solid var(--err-bd); }
.btn { width: 100%; background: var(--accent); color: #fff; border: none; border-radius: var(--r); padding: 9px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: var(--font); margin-top: 4px; }
.btn:hover { background: var(--accent-hov); } .btn.disabled { background: var(--surface-3); color: var(--ink-3); cursor: not-allowed; }
.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--r); font-size: 13px; box-shadow: 0 4px 16px rgba(0,0,0,.2); }
.own { display: none; } body[data-view=internal] .own { display: inline-block; font-size: 9px; font-weight: 600; border-radius: 4px; padding: 1px 5px; background: var(--surface-3); color: var(--ink-3); }