/* Layout: shop-drawing sheet — title strip, big 3D viewport, spec panel at right (stacks below on phones) */
:root{
  --bg:#eef0f1; --panel:#ffffff; --fg:#1d2328; --muted:#5d6871; --line:#d3d8dc;
  --steel:#b7bfc5; --steel2:#a3adb4; --layout:#2346c9; --open:#c77a12; --viewport:#e3e7ea;
  --conn:#8a959d; --conn2:#5f6b74; --weld:#a8692a; --fabric:#3d4247; --ok:#1d7a4a; --okfg:#ffffff;
  --display:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --body:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#14181b; --panel:#1c2125; --fg:#e4e8eb; --muted:#97a2ab; --line:#2f363c;
  --steel:#8c979f; --steel2:#76828b; --layout:#7d96ff; --open:#f0a03a; --viewport:#191e22;
  --conn:#68747d; --conn2:#4b565e; --weld:#d9954f; --fabric:#5b6168; --ok:#2fa36b; --okfg:#0b1a12; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#14181b; --panel:#1c2125; --fg:#e4e8eb; --muted:#97a2ab; --line:#2f363c;
  --steel:#8c979f; --steel2:#76828b; --layout:#7d96ff; --open:#f0a03a; --viewport:#191e22;
  --conn:#68747d; --conn2:#4b565e; --weld:#d9954f; --fabric:#5b6168; --ok:#2fa36b; --okfg:#0b1a12; color-scheme:dark}
html,body{height:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:15px;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:16px;box-sizing:border-box}
*{box-sizing:border-box}
.sheet{max-width:1280px;margin:0 auto;display:grid;gap:14px}
header{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 20px;border-bottom:2px solid var(--fg);padding-bottom:8px}
h1{font-family:var(--display);font-weight:700;font-size:30px;letter-spacing:.01em;margin:0;text-wrap:balance}
h1 span{color:var(--muted);font-weight:500}
.meta{font-family:var(--mono);font-size:12px;color:var(--muted);display:flex;gap:16px;flex-wrap:wrap}
.main{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:14px;align-items:start}
/* side panel: same height as the 3D view and scrolls on its own, so the cart sits right under both */
@media (min-width:861px){aside#panel{height:min(72vh,640px);min-height:360px;overflow-y:auto;overscroll-behavior:contain;align-content:start;scrollbar-gutter:stable}}
@media (max-width:860px){.main{grid-template-columns:minmax(0,1fr)}}
.view{position:relative;background:var(--viewport);border:1px solid var(--line);height:min(72vh,640px);min-height:360px;overflow:hidden}
.view canvas{display:block;width:100%;height:100%;touch-action:none}
.lbl{position:absolute;transform:translate(-50%,-50%);font-family:var(--mono);font-size:12px;font-weight:500;white-space:nowrap;pointer-events:none;
  background:var(--panel);color:var(--layout);padding:1px 6px;border:1px solid var(--layout);border-radius:2px}
.lbl.open{color:var(--open);border-color:var(--open);font-family:var(--display);font-weight:600;letter-spacing:.08em;font-size:12px}
.tools{position:absolute;top:10px;right:10px;display:flex;gap:6px}
.tools button,.tools label{font:500 12px var(--body);background:var(--panel);color:var(--fg);border:1px solid var(--line);padding:6px 10px;border-radius:3px;cursor:pointer;display:flex;align-items:center;gap:6px}
.tools button:hover,.tools label:hover{border-color:var(--fg)}
.hint{position:absolute;left:10px;bottom:8px;font-size:12px;color:var(--muted)}
aside{background:var(--panel);border:1px solid var(--line);display:grid}
aside section{padding:14px 16px;border-bottom:1px solid var(--line);display:grid;gap:10px}
aside section:last-child{border-bottom:0}
h2{font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin:0;color:var(--muted)}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.f{display:grid;gap:4px}
.f label{font-size:13px;font-weight:500}
.f .in{display:flex;align-items:center;border:1px solid var(--line);border-radius:3px;background:var(--bg)}
.f input{width:100%;min-width:0;border:0;background:transparent;color:var(--fg);font:500 15px var(--mono);padding:7px 8px;font-variant-numeric:tabular-nums}
.f input:focus{outline:none}
.f .in:focus-within{border-color:var(--layout);box-shadow:0 0 0 2px color-mix(in srgb,var(--layout) 25%,transparent)}
.f .u{font:13px var(--mono);color:var(--muted);padding-right:8px}
.f.fixed .in{opacity:.7}
.f select{width:100%;border:1px solid var(--line);border-radius:3px;background:var(--bg);color:var(--fg);font:500 14px var(--body);padding:7px 8px;cursor:pointer}
.f select:focus{outline:none;border-color:var(--layout);box-shadow:0 0 0 2px color-mix(in srgb,var(--layout) 25%,transparent)}
dl{margin:0;display:grid;grid-template-columns:1fr auto;gap:6px 12px;font-size:14px}
dt{color:var(--muted)}
dd{margin:0;font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right}
dd.total{font-weight:600}
.rule{grid-column:1/-1;border-top:1px dashed var(--line)}
table{width:100%;border-collapse:collapse;font-size:13px}
#slots td{padding:4px 0;border-bottom:1px solid var(--line)}
#slots td:first-child{font-family:var(--mono);color:var(--muted);width:34px}
#slots td:last-child{font-family:var(--mono);text-align:right;font-variant-numeric:tabular-nums}
#slots tr.guess td:nth-child(2){color:var(--muted);font-style:italic}

/* ordering */
.btn{font:600 14px var(--body);border:1px solid var(--line);background:var(--panel);color:var(--fg);padding:9px 14px;border-radius:3px;cursor:pointer}
.btn:hover{border-color:var(--fg)}
.btn:focus-visible,.cartlink:focus-visible,.lt button:focus-visible{outline:2px solid var(--layout);outline-offset:2px}
.btn.primary{background:var(--layout);border-color:var(--layout);color:var(--panel)}
.btn.primary:hover{filter:brightness(1.08)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.addrow{display:grid;grid-template-columns:88px 1fr;gap:10px;align-items:end}
.addrow .btn{width:100%}
.flash{font-size:14px;font-weight:600;margin:0;min-height:0;border-radius:3px;padding:0;color:var(--ok)}
.flash:not(:empty){padding:9px 12px;background:var(--ok);color:var(--okfg);animation:qtpop .25s ease-out}
.flash:not(:empty)::before{content:"✓  "}
.flash.info:not(:empty){background:var(--layout);color:var(--panel)}
.flash.info:not(:empty)::before{content:"✎  "}
/* big confirmation over the 3D view */
.toast{position:absolute;left:50%;top:14px;transform:translate(-50%,-8px);z-index:5;background:var(--ok);color:var(--okfg);border-radius:4px;
  padding:12px 18px;box-shadow:0 8px 24px rgba(0,0,0,.25);display:flex;gap:12px;align-items:center;max-width:calc(100% - 28px);
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast .ck{font:700 22px var(--display);width:30px;height:30px;border-radius:50%;background:var(--okfg);color:var(--ok);display:grid;place-items:center;flex:none}
.toast b{display:block;font:700 18px var(--display);letter-spacing:.02em}
.toast span{font-size:13px;opacity:.9}
.cartlink.bump{animation:qtbump .5s ease-out}
.cartlink.bump b{background:var(--ok)}
@keyframes qtpop{from{transform:scale(.97);opacity:.4}to{transform:none;opacity:1}}
@keyframes qtbump{0%{transform:scale(1)}30%{transform:scale(1.18)}100%{transform:scale(1)}}
@media (prefers-reduced-motion: reduce){.toast,.flash,.cartlink.bump{animation:none!important;transition:none!important}}
.cartlink{font:600 14px var(--body);color:var(--fg);background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:6px 12px;text-decoration:none;display:inline-flex;gap:8px;align-items:center}
.cartlink b{font-family:var(--mono);background:var(--layout);color:var(--panel);border-radius:10px;padding:0 7px;font-size:12px}
.band{background:var(--panel);border:1px solid var(--line);padding:16px;display:grid;gap:14px}
.bandhead{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px;border-bottom:2px solid var(--fg);padding-bottom:6px}
.bandhead h2{font-size:22px;letter-spacing:.02em;text-transform:none;color:var(--fg);font-weight:700}
.bandhead span{font:13px var(--mono);color:var(--muted)}
.cartgrid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
@media (max-width:860px){.cartgrid{grid-template-columns:minmax(0,1fr)}}
.tablewrap{overflow-x:auto;min-width:0}
.lt{min-width:560px}
.lt th{font:600 11px var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:left;padding:6px 8px 6px 0;border-bottom:1px solid var(--fg)}
.lt td{padding:10px 8px 10px 0;border-bottom:1px solid var(--line);vertical-align:top}
.lt .cfg{font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:3px;line-height:1.5}
.lt .num{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
[hidden]{display:none!important}
.lt .ln{width:2.5em;color:var(--muted);text-align:right;padding-right:12px}
.lt input{width:64px;font:500 14px var(--mono);border:1px solid var(--line);border-radius:3px;background:var(--bg);color:var(--fg);padding:5px 6px}
.lt .acts{white-space:nowrap;text-align:right}
.lt .acts button{font:500 13px var(--body);background:none;border:0;color:var(--layout);cursor:pointer;padding:2px 4px}
.lt tr.editing td{background:color-mix(in srgb,var(--layout) 8%,transparent)}
.rfq{display:grid;gap:10px;align-content:start}
.rfq .f input,.rfq .f textarea{width:100%;border:1px solid var(--line);border-radius:3px;background:var(--bg);color:var(--fg);font:15px var(--body);padding:7px 8px}
.rfq .f textarea{min-height:70px;resize:vertical}
.rfq .f input:focus,.rfq .f textarea:focus{outline:none;border-color:var(--layout)}
.rfq .f.bad input{border-color:#c0392b}
.req{color:var(--open)}
.actions{display:flex;flex-wrap:wrap;gap:8px}
.result{border:1px solid var(--layout);padding:12px;display:grid;gap:8px;font-size:14px}
.result pre{margin:0;max-height:220px;overflow:auto;font:12px/1.5 var(--mono);background:var(--bg);padding:8px;white-space:pre-wrap}
.req-card{border:1px solid var(--line);padding:0}
.req-card summary{cursor:pointer;padding:10px 12px;display:grid;grid-template-columns:auto 1fr auto;gap:4px 14px;align-items:baseline}
.req-card summary .ref{font:600 13px var(--mono)}
.req-card summary .who{min-width:0}
.req-card .body{padding:0 12px 12px;display:grid;gap:8px}
.pill{font:600 11px var(--display);letter-spacing:.1em;text-transform:uppercase;padding:2px 8px;border-radius:10px;border:1px solid currentColor}
.pill.new{color:var(--open)} .pill.priced{color:var(--layout)} .pill.closed{color:var(--muted)}
.inboxlist{display:grid;gap:8px}
kbd{font:600 11px var(--mono);border:1px solid var(--line);border-bottom-width:2px;border-radius:3px;padding:0 4px;background:var(--bg)}
.note{font-size:12.5px;color:var(--muted);line-height:1.45;margin:0}
.key{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.key i{display:inline-block;width:14px;height:3px;vertical-align:middle;margin-right:5px}
@media (prefers-reduced-motion: reduce){*{transition:none!important}}

/* library navigation */
.titleblock{display:grid;gap:2px}
.eyebrow{font:600 12px var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.lib{display:grid;gap:10px}
.tabs{display:flex;flex-wrap:wrap;gap:0;border-bottom:1px solid var(--line)}
.tabs button{font:600 15px var(--display);letter-spacing:.06em;text-transform:uppercase;background:none;border:0;border-bottom:3px solid transparent;color:var(--muted);padding:8px 14px 7px;cursor:pointer;display:flex;gap:7px;align-items:baseline}
.tabs button span{font:500 11px var(--mono);color:var(--muted)}
.tabs button:hover{color:var(--fg)}
.tabs button[aria-selected="true"]{color:var(--fg);border-bottom-color:var(--layout)}
.tabs button:focus-visible,.chip:focus-visible{outline:2px solid var(--layout);outline-offset:2px}
.chips{display:flex;flex-wrap:wrap;gap:8px;min-height:36px;align-items:center}
.chip{font:500 14px var(--body);background:var(--panel);color:var(--fg);border:1px solid var(--line);border-radius:3px;padding:7px 12px;cursor:pointer;display:flex;gap:8px;align-items:baseline}
.chip b{font:600 12px var(--mono);color:var(--muted)}
.chip{align-items:center;padding:5px 12px 5px 8px}
.ic{width:32px;height:32px;flex:none;color:var(--fg)}
.ic .o{fill:none;stroke:currentColor;stroke-width:8;stroke-linejoin:miter}
.ic .i{fill:none;stroke:var(--panel);stroke-width:5;stroke-linejoin:miter}
.ic .t{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ic .g{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.chip[aria-pressed="true"] .ic{color:var(--layout)}
.lt .ic{width:24px;height:24px;vertical-align:middle;margin-right:8px}
.itemcell{display:flex;align-items:flex-start;gap:0}
.chip:hover{border-color:var(--fg)}
.chip[aria-pressed="true"]{border-color:var(--layout);box-shadow:inset 0 0 0 1px var(--layout)}
.chip[aria-pressed="true"] b{color:var(--layout)}

/* account-hosted additions */
[hidden]{display:none!important}
.topbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 20px;padding:10px max(16px,env(safe-area-inset-left));border-bottom:2px solid var(--fg);background:var(--panel)}
.brand{font:700 20px var(--display);color:var(--fg);text-decoration:none;letter-spacing:.01em}
.brand span{color:var(--layout)}
.topbar nav{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px}
.topbar nav a{font-weight:600;text-decoration:none;color:var(--fg)}
.topbar nav a[aria-current="page"]{color:var(--layout);text-decoration:underline;text-underline-offset:4px}
.topbar nav a.cta{background:var(--layout);color:var(--panel);padding:6px 12px;border-radius:3px}
.topbar a:focus-visible,.linkbtn:focus-visible{outline:2px solid var(--layout);outline-offset:2px}
.inline{display:inline;margin:0}
.linkbtn{background:none;border:0;padding:0;font:600 15px var(--body);color:var(--fg);cursor:pointer}
.who{font-size:14px;line-height:1.5;padding:10px 12px;background:var(--bg);border-left:3px solid var(--layout)}
.who a{color:var(--layout)}
.cartstate{font-size:13px;color:var(--muted);margin:0;min-height:1.2em}
.cartstate .unsaved{color:var(--open);font-weight:600}
.cartstate .editrfq{display:block;color:var(--fg);background:color-mix(in srgb,var(--layout) 12%,transparent);border-left:3px solid var(--layout);padding:8px 10px;font-size:14px}
.result.bad{border-color:#c0392b}
.result a{color:var(--layout)}