/* KORA configurator styles. Tokens first, then layout, then components. */
/* WorkX Studio brand: orange #FC6C01, charcoal #1E2123, black, white.
   --accent drives the interface; --cut stays blue so cut lines in the drawings read clearly on plywood. */
:root{
  --paper:#f2f3f2; --panel:#ffffff; --raise:#ffffff; --ink:#1e2123; --ink-2:#62696d; --line:#dfe2e0; --line-2:#c9cecb;
  --accent:#fc6c01; --accent-ink:#ffffff; --accent-soft:#fff0e5; --accent-line:#fdba8a;
  --ply:#dcbf91; --ply-edge:#b48f5c; --cut:#2457d6; --frame:#a7794a; --ply-line:#8a6a40; --ply-ink:#1e2123; --spare:#1f7a55; --spare-face:#b9dcc6; --spare-ink:#134d36; --spare-t:#1f7a55;
  --ok:#2e7d4f; --warn:#b26a00; --bad:#c62828; --focus:#fc6c01; --track:#e3e6e4; --thumb:#ffffff; --pic:#eceeed;
  /* (a cutting sheet: the board, its edge, the backing it lies on in its card, an offcut's tint) */
  --sheet:#ffffff; --sheet-line:#9ea5a1; --stage:#eceeed; --off:rgba(30,33,35,.045);
  --font:"Montserrat", "Helvetica Neue", Arial, sans-serif; --r:8px; --top:58px;
  /* (one spacing scale for every tab, owner 2026-10-17: "make the padding and margins unified": the page gutters, the space
     between sections, and between a heading and what it heads) */
  --gx:24px; --gy:20px; --sec:28px; --hgap:12px;
  box-sizing:border-box; padding-top:env(safe-area-inset-top, 0px); padding-bottom:env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0e0f10; --panel:#151718; --raise:#1e2123; --ink:#f3f3f2; --ink-2:#a2a8ab; --line:#2a2e31; --line-2:#3a3f42;
    --accent:#fc6c01; --accent-ink:#ffffff; --accent-soft:#33200f; --accent-line:#7a3a0c;
    --pic:#3d4245; --sheet:#25292c; --sheet-line:#5d6569; --stage:#0e0f10; --off:rgba(255,255,255,.04); --ply:#c9a874; --ply-edge:#9c7a4b; --cut:#7aa2ff; --spare-t:#5cc28a; --frame:#c08e5a; --ply-line:#8a6a40; --ply-ink:#1e2123; --ok:#5cc28a; --warn:#f0a83c; --bad:#ef6a5f; --focus:#fc6c01; --track:#1e2123; --thumb:#3a3f42;
  }
}
:root[data-theme="dark"]{
  --paper:#0e0f10; --panel:#151718; --raise:#1e2123; --ink:#f3f3f2; --ink-2:#a2a8ab; --line:#2a2e31; --line-2:#3a3f42;
  --accent:#fc6c01; --accent-ink:#ffffff; --accent-soft:#33200f; --accent-line:#7a3a0c;
  --pic:#3d4245; --sheet:#25292c; --sheet-line:#5d6569; --stage:#0e0f10; --off:rgba(255,255,255,.04); --ply:#c9a874; --ply-edge:#9c7a4b; --cut:#7aa2ff; --spare-t:#5cc28a; --frame:#c08e5a; --ply-line:#8a6a40; --ply-ink:#1e2123; --ok:#5cc28a; --warn:#f0a83c; --bad:#ef6a5f; --focus:#fc6c01; --track:#1e2123; --thumb:#3a3f42;
}
*,*::before,*::after{box-sizing:inherit}
[hidden]{display:none !important}
html{height:100%}
body{height:100%; margin:0; background:var(--paper); color:var(--ink); font:14px/1.4 var(--font); font-variant-numeric:tabular-nums; overflow:hidden}
button,input,select{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px}
svg{flex:none}

/* ---------- layout ---------- */
.app{display:grid; grid-template-columns:384px 1fr; grid-template-rows:var(--top) 1fr; height:100%}
.top{grid-column:1 / -1; display:flex; align-items:center; gap:10px; padding:0 12px; background:var(--panel); border-bottom:1px solid var(--line); min-width:0}
.panel{background:var(--panel); border-right:1px solid var(--line); min-height:0}
.main{display:grid; grid-template-rows:auto 1fr; min-width:0; min-height:0}
.view{overflow:auto; min-height:0; position:relative}
.scrim{display:none}
.fab, .mtotals, .sheethead, .tab .ts{display:none}

/* ---------- top bar ---------- */
.brand{display:flex; align-items:center; gap:10px; margin-right:6px; text-decoration:none; color:inherit; flex:none}
.brand .lockup{display:grid; justify-items:center; line-height:1}
.brand img{height:22px; width:auto; display:block}
.brand .studio{font-size:7.5px; font-weight:700; letter-spacing:.62em; margin-right:-.62em; color:var(--accent); margin-top:3px}
.brand .appname{padding-left:10px; border-left:1px solid var(--line); font-size:12px; font-weight:600; color:var(--ink-2); white-space:nowrap}
.logo-dark{display:none !important}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .logo-light{display:none !important} :root:not([data-theme="light"]) .logo-dark{display:block !important} }
:root[data-theme="dark"] .logo-light{display:none !important} :root[data-theme="dark"] .logo-dark{display:block !important}
.tagline{padding:18px 14px 22px; text-align:center; font-size:10px; font-weight:600; letter-spacing:.32em; color:var(--ink-2); text-transform:uppercase}
.design{display:flex; align-items:center; gap:6px; min-width:0}
.design #designName{width:170px; min-width:80px; height:34px; border:1px solid var(--line); background:var(--raise); border-radius:6px; padding:0 10px; font-weight:600}
.totals{display:flex; gap:4px; margin-left:auto; overflow-x:auto; scrollbar-width:none; min-width:0}
.totals::-webkit-scrollbar{display:none}
.chip{display:flex; flex-direction:column; justify-content:center; padding:2px 10px; border-radius:6px; white-space:nowrap; line-height:1.15}
.chip b{font-size:15px; font-weight:800; font-stretch:85%}
.chip small{font-size:11px; color:var(--ink-2)}
.chip.state{cursor:pointer; border:1px solid var(--line); background:var(--raise)}
.chip.state.ok b{color:var(--ok)} .chip.state.warn b{color:var(--warn)} .chip.state.bad b{color:var(--bad)}
.btn{height:34px; display:inline-flex; align-items:center; gap:4px; border:1px solid var(--line); background:var(--raise); border-radius:6px; padding:0 12px; font-weight:700; font-size:13px; cursor:pointer; white-space:nowrap}
.btn:hover{border-color:var(--line-2)}
.btn.primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.btn.primary:hover{filter:brightness(1.06)}
.icon{width:34px; height:34px; display:inline-grid; place-items:center; border:1px solid transparent; background:transparent; border-radius:6px; cursor:pointer; padding:0}
.icon:hover{background:var(--raise); border-color:var(--line)}
.icon:disabled{opacity:.35; cursor:default; background:transparent; border-color:transparent}
.icon svg, .chev{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.chev{width:14px; height:14px}
.only-mobile{display:none}
.pop{position:relative}
.popbody{position:absolute; top:calc(100% + 6px); left:0; z-index:30; min-width:250px; background:var(--raise); border:1px solid var(--line); border-radius:var(--r); padding:6px; box-shadow:0 10px 30px rgba(0,0,0,.14)}
.pop.right .popbody{left:auto; right:0}
.poplabel{font-size:11px; font-weight:700; color:var(--ink-2); text-transform:uppercase; letter-spacing:.04em; padding:6px 8px 4px}
.popbody hr{border:0; border-top:1px solid var(--line); margin:6px 0}
.menuitem{display:grid; width:100%; text-align:left; gap:1px; border:0; background:transparent; padding:8px 10px; border-radius:6px; cursor:pointer}
.menuitem:hover, .menuitem:focus-visible{background:var(--accent-soft)}
.menuitem small{color:var(--ink-2); font-size:12px}
.menuinfo{display:grid; gap:2px; padding:6px 10px 4px; max-width:340px} .menuinfo b{font-size:12.5px} .menuinfo small{color:var(--ink-2); font-size:12px; line-height:1.4}
/* (a menu with icons: the icon in a column of its own, the words beside it; the info line's picture the same way) */
.menuitem.ic, .menuinfo.ic{grid-template-columns:20px minmax(0, 1fr); column-gap:11px; align-items:center}
.menuinfo.ic{grid-template-columns:32px minmax(0, 1fr); padding:6px 10px 8px}
.menuitem.ic > span, .menuinfo.ic > span{display:grid; gap:1px; min-width:0} .menuinfo.ic b{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.menuitem.ic .side-ic{justify-self:center} .menuitem.ic:hover .side-ic, .menuitem.ic:focus-visible .side-ic{color:var(--accent)}
.menuitem.ic.danger .side-ic{color:var(--bad)}
/* (the Print menu: the one for the tab you are on says so; Ctrl + P prints it) */
#btnPrints{gap:6px} #btnPrints .pr-i{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round} #printPop .popbody{min-width:280px} .menuitem.here b::after{content:" · this tab"; color:var(--accent); font-weight:600} .pop-foot{margin:6px 0 0; padding:8px 10px 4px; border-top:1px solid var(--line); font-size:11.5px; color:var(--ink-2)}
.designlist{max-height:240px; overflow:auto}
.empty{color:var(--ink-2); font-size:13px; padding:6px 10px}

/* ---------- settings panel: a rail of groups, the open group's settings all shown (like an editor's properties) ---------- */
.panel{display:grid; grid-template-columns:72px minmax(0, 1fr); overflow:hidden}
/* the rail: each group its icon with its name under it; the open one a plain rectangle in the accent tint, edge to edge,
   with a straight accent bar on the left (owner, 2026-10-16: "rectangle, no corner"); the hide button on top, in line with
   the search row; a quick tooltip says what the group holds */
.rail{display:flex; flex-direction:column; min-height:0; border-right:1px solid var(--line); background:var(--panel)}
.rtop{flex:none; height:55px; display:grid; place-items:center; border-bottom:1px solid var(--line)}
.rfold svg{transition:transform .2s}
body.pfold .rfold svg{transform:scaleX(-1)}
.rtabs{display:flex; flex-direction:column; gap:2px; padding:8px 0; overflow-y:auto; scrollbar-width:none}
.rtabs::-webkit-scrollbar{display:none}
.rbtn{position:relative; display:flex; flex-direction:column; align-items:center; gap:3px; width:100%; padding:9px 0 8px; border:0; border-radius:0; background:transparent; color:var(--ink-2); cursor:pointer; transition:background .15s, color .15s}
.rpill{position:relative; display:grid; place-items:center; width:30px; height:26px}
.rpill svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.rlab{font-size:11px; font-weight:600; line-height:1.15; letter-spacing:-.01em; white-space:nowrap}
.rbtn:hover{color:var(--ink); background:color-mix(in srgb, var(--ink) 5%, transparent)}
.rbtn[aria-selected="true"]{color:var(--ink); background:var(--accent-soft); box-shadow:inset 3px 0 0 var(--accent)}
.rbtn[aria-selected="true"] .rpill{color:var(--accent)}
.rbtn[aria-selected="true"] .rlab{font-weight:800}
.rbtn.lit{box-shadow:inset 0 0 0 1.5px var(--accent)}
.rbtn[aria-selected="true"].lit{box-shadow:inset 3px 0 0 var(--accent), inset 0 0 0 1.5px var(--accent)}
.rbtn:focus-visible{outline:2px solid var(--focus); outline-offset:-2px}
.rdot{position:absolute; top:0; right:0; width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 2px var(--panel)}
.rbtn[aria-selected="true"] .rdot{box-shadow:0 0 0 2px var(--accent-soft)}
.railtip{position:fixed; z-index:70; transform:translateY(-50%); display:grid; gap:1px; padding:7px 11px; border-radius:8px; background:var(--ink); color:var(--panel); font-size:12px; line-height:1.35; white-space:nowrap; pointer-events:none; box-shadow:0 6px 20px rgba(0,0,0,.18)}
.railtip b{font-weight:800}
.railtip span{opacity:.78}
.railtip em{font-style:normal; font-weight:700; color:var(--accent)}
.pbody{overflow-y:auto; overscroll-behavior:contain; min-width:0; display:flex; flex-direction:column}
.pbody > .keys{margin-top:auto}      /* (the keys and the brand line stay at the foot of the panel) */
.ptools{position:sticky; top:0; z-index:3; display:flex; gap:8px; align-items:center; padding:10px 14px; background:var(--panel); border-bottom:1px solid var(--line)}
.ptools .fchip{height:34px; padding:0 12px; font-size:12px; flex:none}
.cat{padding:0 14px 12px}
.cathead{display:flex; align-items:baseline; gap:10px; margin:14px 0 8px; font-size:12px; text-transform:uppercase; letter-spacing:.09em}
.cathead b{font-weight:800}
.cathead span{margin-left:auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-transform:none; letter-spacing:0; font-size:12.5px; color:var(--ink-2)}
.hint{font-size:12px; color:var(--ink-2); margin:8px 0 0}
.cat .hint{margin:0 0 6px}
.bedcard .linkbtn{grid-column:1 / -1; justify-self:start; font-size:12.5px; margin-top:2px}
.cat .bedcard{margin-bottom:8px}
.catreset{display:block; margin:12px 0 0; font-size:12.5px; text-align:left}
.noresult{padding:18px 14px; color:var(--ink-2); font-size:13px}
.keys{padding:12px 14px 0; font-size:11px; line-height:1.5; color:var(--ink-2); text-align:center}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.pill{height:30px; border:1.5px solid var(--line); background:var(--raise); border-radius:999px; padding:0 11px; cursor:pointer; font-weight:600; font-size:13px}
.pill small{color:var(--ink-2); font-weight:500; margin-left:4px}
.pill[aria-checked="true"]{border-color:var(--accent); color:var(--ink); background:var(--accent-soft)}
.sizerow .chips{display:grid; grid-template-columns:1fr 1fr}
.seg{display:grid; grid-auto-flow:column; grid-auto-columns:1fr; border:1.5px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--raise)}
.seg button{height:32px; border:0; border-left:1px solid var(--line); background:transparent; font-weight:700; font-size:13px; cursor:pointer}
.seg button:first-child{border-left:0}
.seg button[aria-checked="true"]{background:var(--accent); color:var(--accent-ink)}
.seg button:disabled{opacity:.35; cursor:not-allowed}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px}
.grid3{display:grid; grid-template-columns:repeat(3, 1fr); gap:8px}
.lab{display:grid; gap:4px; font-size:12px; color:var(--ink-2)}

/* number box: ONE border, unit inside */
.num{display:flex; align-items:center; height:32px; border:1px solid var(--line); background:var(--raise); border-radius:6px; padding:0 8px; min-width:0}
.num:focus-within{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft)}
.num input{flex:1; min-width:0; width:100%; height:100%; border:0; outline:0; background:transparent; padding:0; text-align:right; font-weight:600; font-size:14px}
.num i{font-style:normal; color:var(--ink-2); font-size:11px; margin-left:5px; white-space:nowrap}
.num input::placeholder{color:var(--ink-2); font-weight:400}
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none; margin:0}
input[type=number]{-moz-appearance:textfield; appearance:textfield}
.sel{height:32px; width:100%; border:1px solid var(--line); background:var(--raise); border-radius:6px; padding:0 6px}

.search{flex:1; height:34px; border:1px solid var(--line); background:var(--raise); border-radius:6px; padding:0 10px; min-width:0}
/* a group's drawing: hovering or editing a setting lights up what it changes; it stays in view while the list scrolls */
.art{margin:0 -4px 8px; border-radius:6px; background:var(--paper); padding:4px}
@media (min-width:901px) and (min-height:760px){ .cat .art{position:sticky; top:55px; z-index:2; box-shadow:0 0 0 6px var(--panel)} }
.art-svg{display:block; width:100%; height:auto}
.art-svg [data-k]{cursor:pointer}
.art-svg .a-ply{fill:var(--ply); stroke:var(--ply-edge); stroke-width:1}
.art-svg .a-ply-soft{fill:var(--ply); opacity:.35; stroke:none}
.art-svg .a-frame{fill:var(--frame); stroke:var(--ply-edge); stroke-width:1}
.art-svg .a-soft{fill:var(--line); stroke:var(--line-2); stroke-width:1}
.art-svg .a-board{fill:var(--ply); stroke:var(--ply-edge); stroke-width:1; opacity:.85}
.art-svg .a-str{fill:var(--frame); stroke:var(--ply-edge); stroke-width:.8; opacity:.8}
.art-svg .a-floor{stroke:var(--ink-2); stroke-width:1.2; fill:none}
.art-svg .a-edge{stroke:var(--ink-2); stroke-width:1.4; fill:none}
.art-svg .a-line{stroke:var(--ply-edge); stroke-width:1.4; fill:none}
.art-svg .a-leg{stroke:var(--cut); stroke-width:3; fill:none; opacity:.7}
.art-svg .a-legline{stroke:var(--cut); stroke-width:1.2; stroke-dasharray:4 3; fill:none; opacity:.6}
.art-svg .a-faint{opacity:.3}
.art-svg .a-strline{stroke:var(--frame); stroke-width:1.2; stroke-dasharray:4 3; fill:none; opacity:.9}
.art-svg .a-note{fill:var(--ink-2); font:600 8px Montserrat, sans-serif}
.art-svg .a-slot{fill:var(--paper); stroke:var(--cut); stroke-width:.8}
.art-svg .a-grip{fill:var(--paper); stroke:var(--cut); stroke-width:.8}
.art-svg .a-corner{fill:none; stroke-width:2.5; stroke:transparent}
.art-svg .a-thin{fill:none; stroke-width:2.5; stroke:transparent}
.art-svg .a-dim{stroke:var(--ink-2); stroke-width:.8; fill:none; opacity:.35}
.art-svg .a-dim text{display:none; fill:var(--accent); stroke:none; font:700 9px Montserrat, sans-serif}
/* lit: the part the hovered or edited setting changes */
.art-svg .hot{stroke:var(--accent) !important; opacity:1 !important}
.art-svg .a-hl.hot, .art-svg .a-slot.hot, .art-svg .a-grip.hot, .art-svg .a-str.hot, .art-svg .a-leg.hot, .art-svg .a-line.hot{stroke-width:2.5}
.art-svg .a-slot.hot, .art-svg .a-grip.hot{fill:var(--accent-soft)}
.art-svg .a-dim.hot{stroke-width:1.4}
.art-svg .a-dim.hot text{display:block}
.slide{grid-column:1 / -1; -webkit-appearance:none; appearance:none; width:100%; height:14px; margin:0; background:transparent; cursor:pointer}
.slide::-webkit-slider-runnable-track{height:3px; border-radius:2px; background:linear-gradient(90deg, var(--accent) var(--p, 0%), var(--line-2) var(--p, 0%))}
.slide::-moz-range-track{height:3px; border-radius:2px; background:linear-gradient(90deg, var(--accent) var(--p, 0%), var(--line-2) var(--p, 0%))}
.slide::-webkit-slider-thumb{-webkit-appearance:none; width:12px; height:12px; margin-top:-4.5px; border-radius:50%; background:var(--raise); border:2px solid var(--accent)}
.slide::-moz-range-thumb{width:8px; height:8px; border-radius:50%; background:var(--raise); border:2px solid var(--accent)}
.sw{appearance:none; -webkit-appearance:none; flex:none; width:36px; height:20px; border-radius:10px; background:var(--line-2); position:relative; cursor:pointer; margin:0; transition:background .15s}
.sw::after{content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.25); transition:transform .15s}
.sw:checked{background:var(--accent)}
.sw:checked::after{transform:translateX(16px)}
.sw:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.mini-seg{flex:none; grid-auto-columns:auto}
.mini-seg button{height:26px; padding:0 12px; font-size:12px}
/* a setting row: name, control (number box with a slider under it, buttons, or a switch), reset */
.row{display:grid; grid-template-columns:minmax(0,1fr) 96px 18px; align-items:center; gap:2px 8px; padding:5px 6px; margin:0 -6px; border-radius:6px}
.row:hover, .row:focus-within, .row.lit{background:var(--accent-soft)}
.row > label, .row .lbl{font-size:13px; line-height:1.25}
label.scrub{cursor:ew-resize; user-select:none; -webkit-user-select:none}
.row.check{grid-template-columns:minmax(0,1fr) auto 18px; min-height:40px}
.row .reset{border:0; background:transparent; color:var(--accent); cursor:pointer; padding:0; font-size:15px; visibility:hidden}
.row.changed .reset{visibility:visible}
.row.changed > label, .row.changed .lbl{font-weight:650}
.row.changed > label::before, .row.changed .lbl::before{content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--accent); margin:0 6px 2px 0}
.row .fitnote{grid-column:1 / -1; font-size:11.5px; line-height:1.3; color:var(--accent)}
.row.seg-row{grid-template-columns:minmax(0,1fr) 18px}
.row.seg-row .segwrap{grid-column:1 / -1; grid-row:2; display:flex; margin-top:3px}
.row.seg-row .fseg{flex:1; display:grid; grid-auto-flow:column; grid-auto-columns:1fr}
/* (four choices with longer words, the table's Shelf: two by two, so none wraps) */
.row.seg-row .fseg.four{grid-auto-flow:row; grid-template-columns:1fr 1fr} .fseg.four button:nth-child(3){border-left:0} .fseg.four button:nth-child(n+3){border-top:1px solid var(--line)}
.row.seg-row.segin{grid-template-columns:minmax(0,1fr) auto 18px; min-height:40px}
.row.seg-row.segin .segwrap{grid-column:2; grid-row:1; margin-top:0}
.row.seg-row.segin .fseg{grid-auto-columns:auto}
.row.bare .lbl{display:none}
.row.bare .segwrap{grid-column:1; grid-row:1; margin-top:0}
.row.bare .fseg button{height:36px; font-size:13px}
.sizerow{grid-template-columns:minmax(0, 1fr); gap:8px}
.sizerow .grid2{margin-top:0}
.row.flash{animation:flash 1.6s ease-out}
body.scrubbing, body.scrubbing *{cursor:ew-resize !important; user-select:none !important}
.count{font-size:12px; color:var(--accent); font-weight:700}
/* the panel hidden for more room: the rail stays; with the panel shown it follows the selection, so no "Show in settings" */
@media (min-width:901px){
  body.pfold .app{grid-template-columns:72px 1fr}
  body.pfold .panel{grid-template-columns:72px}
  body.pfold .pbody{display:none}
  body:not(.pfold) .inspect [data-show]{display:none}
}

/* ---------- tabs ---------- */
.tabs{display:flex; gap:2px; padding:0 10px; background:var(--panel); border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{display:flex; align-items:center; gap:6px; height:42px; padding:0 12px; border:0; border-bottom:2px solid transparent; background:transparent; color:var(--ink-2); font-weight:650; font-size:13px; cursor:pointer; white-space:nowrap}
.tab svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--accent)}
.tab[aria-selected="true"] svg{color:var(--accent)}
/* (the tabs: where they do not fit the width beside the panel, tighter, then the short labels: fitTabs() in app.js) */
.tab .nb{margin-left:-3px}
.tabs.tight .tab{padding:0 8px; gap:5px}
.tabs.short .tab .tl{display:none} .tabs.short .tab .ts{display:block}
/* the checks to fix or review on the Checks tab: the one badge in the app, so it stands out (owner, 2026-10-17: badges on
   every count were "too much"), raised at the top right of the name, red or amber */
.nb{display:inline-block; position:relative; top:-7px; min-width:16px; height:16px; margin-left:3px; padding:0 4px; border-radius:8px; color:#fff; font-size:10px; font-style:normal; font-weight:800; line-height:16px; text-align:center; white-space:nowrap; pointer-events:none}
.nb.bad{background:var(--bad)} .nb.warn{background:var(--warn)}

/* ---------- views ---------- */
.pane{padding:var(--gy) var(--gx) 36px; max-width:1500px}
.pane.narrow{max-width:960px}
/* (every tab starts with the same header: its title and one line about it) */
.vhead{margin:0 0 16px}
.vhead h1{margin:0; font-size:18px; font-weight:800; line-height:1.25}
.vhead p{margin:4px 0 0; font-size:13px; line-height:1.45; color:var(--ink-2); max-width:90ch}
.vh-row{display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:0 16px} .vh-row .vhead{flex:1 1 360px} .vh-row > .btn{flex:none; margin-bottom:12px}
/* (one heading style for the sections inside a tab) */
.pane h2, .pb-head h2, .tt-khead h3, .tt-stitle h3{font-size:15px; font-weight:800; line-height:1.3}
.pane h2{margin:0 0 var(--hgap)}
.pane .sub{font-size:12px; color:var(--ink-2); margin:-6px 0 12px}
/* (figures as boxes: Parts & boxes, Checks, Cost) */
.kpis{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(160px, 45%), 1fr)); gap:10px; max-width:960px}
.kpis[data-n="3"]{grid-template-columns:repeat(3, minmax(0, 1fr))}
.kpis[data-n="4"]{grid-template-columns:repeat(4, minmax(0, 1fr))}
.kpi{display:grid; gap:2px; align-content:start; padding:12px 16px; border:1px solid var(--line); border-radius:var(--r); background:var(--panel); min-width:0}
.kpi b{font-size:22px; font-weight:800; font-stretch:85%; line-height:1.15}
.kpi small{font-size:12px; color:var(--ink-2)}
.kpi.main{border-color:var(--accent-line); background:var(--accent-soft)}
.kpi.ok b{color:var(--ok)} .kpi.warn b{color:var(--warn)} .kpi.bad b{color:var(--bad)}
.fit{display:flex; justify-content:center; height:calc(100vh - var(--top) - 42px - 190px); min-height:320px}
/* direct editing on the deck drawing */
.inspect{display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; min-height:34px; margin-bottom:10px; padding:4px 12px; border-radius:var(--r); background:var(--panel); border:1px solid var(--line); font-size:13px; color:var(--ink-2)}
.inspect > b{color:var(--ink); font-weight:800}
.inspect span b{color:var(--accent)}
.inspect .hint{margin:0}
.inspect .btn{height:28px; padding:0 10px; font-size:12px}
.inspect .iseg{display:inline-flex; align-items:center; gap:6px}
.inspect .iseg i{font-style:normal; font-size:12px}
.editable .pick{cursor:pointer}
.editable .drag-x{cursor:ew-resize} .editable .drag-y{cursor:ns-resize}
.editable .drag:hover{stroke:var(--accent); stroke-opacity:.18}
.editable .pick.hot{stroke:var(--accent); stroke-opacity:.3}
.editable.dragging{touch-action:none; user-select:none; -webkit-user-select:none}
@keyframes flash{0%, 30%{background:var(--accent-soft)} 100%{background:transparent}}
.fit svg{height:100%; width:auto; max-width:100%}
.legend{display:flex; flex-wrap:wrap; justify-content:center; gap:16px; font-size:12px; color:var(--ink-2); margin-top:8px}
.legend i{display:inline-block; width:20px; height:0; border-top:2px dashed; vertical-align:middle; margin-right:6px}
.stack > section{margin-top:var(--sec)}
.stack svg{width:100%; height:auto; max-height:46vh}
.toolbar{display:flex; flex-wrap:wrap; gap:14px; align-items:center; padding:8px 18px; border-bottom:1px solid var(--line); background:var(--panel)}
.toolbar label{display:flex; gap:6px; align-items:center; font-size:13px; color:var(--ink-2)}
.canvas3d{position:absolute; inset:0}
.canvas3d canvas{display:block}
.no3d{padding:24px; color:var(--ink-2)}
.sheets{display:grid; grid-template-columns:repeat(auto-fill, minmax(460px, 1fr)); gap:16px}
.sheets svg{width:100%; height:auto; display:block}
/* (a sheet or a print plate: a card with its caption) */
.sheets figure, .plates figure{margin:0; padding:10px; border:1px solid var(--line); border-radius:var(--r); background:var(--panel)}
.sheets figcaption, .plates figcaption{display:flex; justify-content:space-between; font-size:12px; color:var(--ink-2); margin:0 2px 8px}
.sheets figcaption b, .plates figcaption b{color:var(--ink)}
/* the Sheets tab (owner, 2026-10-21): the free space (offcuts or spare parts), fewer sheets, how much of each sheet is used, its parts */
.sh-cards{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap:16px; margin:0 0 16px; align-items:start}
/* the free space's choices (owner, 2026-10-22: "improve the UI/UX around there"): a list, each with what it does, as a radio */
.sh-mode{display:grid; gap:5px}
.sh-mo{display:grid; grid-template-columns:auto minmax(0, 1fr); gap:10px; align-items:start; width:100%; padding:9px 12px; border:1px solid var(--line); border-radius:8px; background:var(--raise); color:var(--ink); font:inherit; text-align:left; cursor:pointer}
.sh-mo:hover{border-color:var(--line-2)} .sh-mo[aria-checked="true"]{border-color:var(--accent); background:var(--accent-soft)}
.sh-mo i{width:16px; height:16px; margin-top:1px; border-radius:50%; border:2px solid var(--line-2); background:var(--panel)} .sh-mo[aria-checked="true"] i{border:5px solid var(--accent)}
.sh-mo b{display:block; font-size:13px} .sh-mo small{display:block; margin-top:2px; font-size:12px; line-height:1.35; color:var(--ink-2)}
.sh-go{display:flex; justify-content:flex-start} .sh-px em{font-style:normal; font-weight:700; color:var(--spare-t)}
/* the Cutting page (2026-10-22): the sheets on the left, the free space beside them, kept in view */
/* (the second row takes what the panel beside them adds, so no gap opens under the figures; the sheets big enough to read
   their numbers and names: one a row beside the panel on a laptop, two on a wide screen) */
.cut-grid{display:grid; grid-template-columns:minmax(0, 1fr) 360px; grid-template-rows:auto 1fr; grid-template-areas:"sum side" "sheets side"; gap:16px 20px; align-items:start}
.cut-sheets{grid-area:sheets; display:grid; gap:10px; min-width:0} .cut-sheets .sheets{grid-template-columns:repeat(auto-fill, minmax(min(100%, 560px), 1fr))}
.cut-shead{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 16px; margin-top:8px; padding-top:14px; border-top:1px solid var(--line)}
.cut-shead h2{margin:0; font-size:15px; font-weight:800; display:flex; align-items:baseline; gap:8px} .cut-shead h2 small{font-size:12.5px; font-weight:600; color:var(--ink-2)}
.cut-tbl .sl-tname{display:flex; align-items:center; gap:12px}
/* (the CNC shop the design is cut at, on the Cutting page: owner 2026-10-23) */
.cut-shop{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; padding-bottom:12px; border-bottom:1px solid var(--line)}
.cut-shop .cs-l{font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-2)} .cut-shop .sel{height:34px; width:auto; max-width:100%; font-weight:650}
.cut-shop .cs-v{flex-basis:100%; font-size:12.5px; color:var(--ink-2)} .cut-shop .cs-v .ok{color:var(--ok); font-weight:650} .cut-shop .cs-v .warn{color:var(--warn); font-weight:650}
.cut-shop .cs-diff{flex-basis:100%; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 10px; margin:0; padding:8px 10px; border-radius:8px; background:color-mix(in srgb, var(--warn) 12%, transparent); color:var(--ink); font-size:12.5px}
.cut-sum{grid-area:sum; display:grid; gap:12px; padding:14px 16px; border:1px solid var(--line); border-radius:var(--r); background:var(--panel); min-width:0} .cut-sum .kpis{margin:0; max-width:none}
.cut-kpis .kpi small a{color:inherit; text-decoration:underline}
.cut-vrow{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 16px} .cut-show button{padding:0 12px; white-space:nowrap}
.cut-side{grid-area:side; position:sticky; top:16px; display:grid; gap:12px; max-height:calc(100vh - 32px); overflow:auto; overscroll-behavior:contain}
.cut-card{display:grid; gap:12px; padding:14px 16px; border:1px solid var(--line); border-radius:var(--r); background:var(--panel)} .cut-card h2{margin:0; font-size:14px; font-weight:800}
.cut-card .sh-dl{margin-top:0}
.cut-who{display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; font-size:13px; color:var(--ink-2)} .cut-who .sel{height:36px; max-width:300px; font-weight:700; color:var(--ink)} .cut-who a{color:var(--ink); text-decoration:underline}
.cut-adds{margin:0; padding:0; list-style:none; display:grid; gap:6px; font-size:13px; line-height:1.45; color:var(--ink-2)} .cut-adds b{color:var(--ink)}
.cut-adds li{position:relative; padding-left:14px} .cut-adds li::before{content:''; position:absolute; left:2px; top:.62em; width:5px; height:5px; border-radius:50%; background:var(--ink-2)}
.cut-mini{display:inline-flex; align-items:center; gap:3px; font-variant-numeric:tabular-nums} .cut-mini b{margin-left:6px; color:var(--ink)}
.cut-mini i{position:relative; width:22px; height:11px; border:1px solid var(--line-2); border-radius:2px; background:var(--panel); overflow:hidden}
.cut-mini i::after{content:''; position:absolute; inset:0 auto 0 0; width:var(--u); background:var(--ply-edge)} .cut-mini i.low::after{background:var(--warn)}
.cut-tbl td small{display:block; margin-top:2px; font-size:12px; font-weight:500; color:var(--ink-2)}
@media (max-width:1100px){ .cut-grid{grid-template-columns:minmax(0, 1fr); grid-template-rows:none; grid-template-areas:"sum" "side" "sheets"} .cut-side{position:static; max-height:none; overflow:visible} }
/* the sheets' key, a kind of part pointed at (it lights on every sheet, the others dim), the button that shows a sheet big */
.sh-sheets{display:grid; gap:10px}
.sh-legend{display:flex; flex-wrap:wrap; align-items:center; gap:4px 16px; margin:0; font-size:12px; color:var(--ink-2)} .sh-legend span{display:inline-flex; align-items:center; gap:6px}
.sh-legend i{width:16px; height:10px; border-radius:2px} .lg-ply{background:var(--ply); border:1px solid var(--ink)} .lg-cut{background:var(--sheet); border:1.5px solid var(--cut)} .lg-pk{background:color-mix(in srgb, var(--cut) 16%, var(--sheet)); border:1.5px dashed var(--cut)} .lg-off{background:var(--off); border:1.5px dashed var(--ink-2)} .lg-saw{height:0; border-top:2px dashed var(--ink); border-radius:0} .lg-line{height:0; border-top:1.5px solid var(--ink); border-radius:0} .lg-sp{background:var(--spare-face); border:1px solid var(--ink)}
.sh-legend .lg-tip, .sh-legend .lg-tap{font-style:italic} .sh-legend .lg-tap{display:none} @media (pointer:coarse){ .sh-legend .lg-tip{display:none} .sh-legend .lg-tap{display:inline} }
.sheets figcaption{align-items:center; gap:8px} .sheets figcaption .sh-use{margin-left:auto}
.sh-big{width:28px; height:28px; padding:0; display:inline-grid; place-items:center; flex:none} .sh-big .ico{width:14px; height:14px}
.sh-draw{cursor:zoom-in; padding:6px; border-radius:6px; background:var(--stage)}
.shp{transition:opacity .12s} .hl .shp:not(.on){opacity:.28}
.hl .shp.on > path:first-of-type{stroke:var(--accent) !important; stroke-width:2.5px; vector-effect:non-scaling-stroke}
.sh-parts [data-k]{transition:opacity .12s} .hl .sh-parts [data-k]:not(.on){opacity:.4}
.sh-mo b{display:flex; justify-content:space-between; align-items:baseline; gap:8px} .sh-mo em{font-style:normal; font-size:12px; font-weight:700; color:var(--ink-2); white-space:nowrap} .sh-mo[aria-checked="true"] em{color:var(--ink)}
/* what the sheets make: each thing put together, its picture, how many; pointed at (or one of its parts), it lights */
.mk-row{display:grid; gap:8px} .mk-head{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 12px} .mk-head h3{margin:0; font-size:14px; font-weight:800} .mk-head small{font-size:12px; color:var(--ink-2)}
.mk-list{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap:10px}
.mk{display:grid; grid-template-columns:112px minmax(0, 1fr); align-items:center; gap:12px; padding:8px 12px 8px 8px; border:1px solid var(--line); border-radius:var(--r); background:var(--panel); transition:border-color .12s, box-shadow .12s}
.mk:hover, .mk.on{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent)} .mk-off{opacity:.7}
.mk-pic{display:grid; place-items:center; width:112px; height:76px; border-radius:8px; background:var(--pic); overflow:hidden} .mk-pic > *{grid-area:1 / 1}
.mk-pic img{width:100%; height:100%; object-fit:contain} .mk-pic img:not([src]){visibility:hidden} .mk-pic img[src] + .ticon{visibility:hidden}
.mk-pic .ticon{width:84px; height:24px} .mk-pic > svg:not(.ticon){width:90px; height:54px}
.mk-n{color:var(--ink); font-weight:800; white-space:nowrap} .mk-x .mk-n{color:var(--spare-t)}
/* (a thing's spare parts, on its tile: a green tag; pointed at, or its part on a sheet, the picture shows the piece green) */
.mk-sp{justify-self:start; display:inline-flex; align-items:center; gap:6px; margin-top:4px; padding:2px 9px 2px 7px; border:1px dashed var(--spare); border-radius:11px; background:color-mix(in srgb, var(--spare-face) 30%, transparent); color:var(--spare-t); font-size:12px; font-weight:700; line-height:1.4}
.mk-sp::before{content:''; flex:none; width:7px; height:7px; border-radius:50%; background:var(--spare)} .mk-sp:hover, .mk-sp.on{border-style:solid; background:var(--spare-face); color:var(--spare-ink)}
.mk-pic .mk-hi{opacity:0; transition:opacity .15s} .mk:has(.mk-sp:hover, .mk-sp.on) .mk-hi[src]{opacity:1}
.mk-t{display:grid; gap:3px; min-width:0} .mk-t b{font-size:13px; line-height:1.3} .mk-t small{font-size:12px; line-height:1.35; color:var(--ink-2)}
/* a sheet seen big: over the page, its parts beside it (below on a phone) */
.shv{width:min(1440px, calc(100vw - 32px)); height:calc(100vh - 32px); max-width:none; max-height:none; padding:0; border:0; border-radius:14px; background:var(--panel); color:var(--ink); box-shadow:0 20px 60px rgba(0,0,0,.35); overflow:hidden}
.shv[open]{display:flex; flex-direction:column} .shv::backdrop{background:rgba(14,15,16,.55)}
.shv-head{display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; padding:12px 16px; border-bottom:1px solid var(--line)}
.shv-head h2{margin:0; font-size:18px; font-weight:800} .shv-head h2 span{font-weight:600; color:var(--ink-2)} .shv-head .sh-use{font-size:12px; color:var(--ink-2)} .shv-head .sh-use.low{color:var(--warn); font-weight:700}
.shv-tools{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-left:auto}
.shv-tools .seg button{min-width:36px; padding:0 10px; display:inline-grid; place-items:center} .shv-tools .seg button:disabled{opacity:.4; cursor:default} .shv-head .ico{width:16px; height:16px}
.shv-x{width:38px; padding:0; display:inline-grid; place-items:center}
.shv-body{flex:1; min-height:0; display:grid; grid-template-columns:minmax(0, 1fr) 300px; grid-template-rows:minmax(0, 1fr)}
.shv-draw{min-height:0; overflow:auto; padding:12px; background:var(--stage); outline:none} .shv-draw svg{display:block; width:100%; height:100%}
.shv-list{min-height:0; overflow:auto; padding:12px 16px; border-left:1px solid var(--line); display:grid; align-content:start; gap:14px}
.shv-tbl{width:100%; border-collapse:collapse; font-size:13px} .shv-tbl td{padding:7px 4px; border-bottom:1px solid var(--line); vertical-align:top} .shv-tbl td:first-child{width:30px}
.shv-tbl td small{display:block; font-size:12px; color:var(--ink-2)} .shv-tbl .r{text-align:right; white-space:nowrap; color:var(--ink-2)} .shv-tbl tr.on td{background:var(--accent-soft)}
.shv-tbl .no{display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 6px; border-radius:10px; background:var(--ink); color:var(--panel); font-size:11px; font-weight:700} .shv-tbl .no.sp{background:var(--spare); color:#fff}
.shv-sub th{padding:14px 4px 4px; text-align:left; font-size:12px; font-weight:700; color:var(--spare-t)}
.shv-oc{margin:0; display:grid; gap:2px; font-size:13px; color:var(--ink-2)} .shv-oc b{color:var(--ink); font-size:12px} .shv-note{margin:0; font-size:12px; color:var(--ink-2)}
@media (max-width:700px){
  .shv{width:100vw; height:100dvh; border-radius:0}
  .shv-head{padding:10px 12px; gap:8px 12px} .shv-x{margin-left:auto} .shv-tools{order:5; width:100%; margin-left:0}
  .shv-body{display:block; overflow:auto} .shv-draw{height:100%; padding:8px} .shv-list{border-left:0; border-top:1px solid var(--line)}
}
.sh-fig{margin:0; font-size:13px; line-height:1.5; color:var(--ink-2)} .sh-fig b{color:var(--ink)}
.sh-dl{display:grid; gap:8px; border-top:1px solid var(--line); padding-top:12px}
.sh-h{display:grid; gap:2px; margin:6px 0 0; font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-2)} .sh-h:first-child{margin-top:0} .sh-h small{font-size:12px; font-weight:500; letter-spacing:0; text-transform:none}
.sh-pic{display:grid; place-items:center; width:64px; height:44px; flex:none; border-radius:6px; background:var(--pic); overflow:hidden} .sh-pic > *{grid-area:1 / 1}
.sh-pic img{width:100%; height:100%; object-fit:contain} .sh-pic img:not([src]){visibility:hidden} .sh-pic img[src] + .ticon{visibility:hidden} .sh-pic .ticon{width:52px; height:15px}
.sh-ord{display:inline-grid; place-items:center; width:18px; height:18px; margin-right:7px; border-radius:50%; background:var(--spare); color:#fff; font-size:11px; font-style:normal; font-weight:800; vertical-align:1px}
.sh-dt{display:grid; gap:1px; min-width:0} .sh-dt b{font-size:13px} .sh-dt small{font-size:12px; color:var(--ink-2); overflow-wrap:anywhere}
.sh-dc{display:grid; grid-template-columns:64px minmax(0, 1fr); align-items:center; gap:6px 10px; padding:8px; border:1px solid color-mix(in srgb, var(--spare) 45%, var(--line)); border-radius:8px; background:color-mix(in srgb, var(--spare-face) 18%, var(--panel))}
.sh-dcs{display:grid; gap:8px} .sh-dc.movable{grid-template-columns:20px 64px minmax(0, 1fr); padding-left:4px} .sh-dc.movable .sh-dn2{grid-column:2 / -1}
.sh-grip{align-self:stretch; grid-row:1 / 3; display:grid; place-items:center; width:20px; padding:0; border:0; border-radius:5px; background:color-mix(in srgb, var(--spare) 10%, transparent); color:var(--ink-2); cursor:grab; touch-action:none}
.sh-grip:hover, .sh-grip:focus-visible{background:color-mix(in srgb, var(--spare) 22%, transparent); color:var(--ink)} .sh-grip .ico{width:16px; height:16px; fill:currentColor; stroke:none}
.sh-dc.drag{position:relative; z-index:2; box-shadow:0 10px 28px rgba(0,0,0,.22); cursor:grabbing} .sh-dc.drag .sh-grip{cursor:grabbing} .sh-dcs.dragging{user-select:none}
.tbtn.sh-del{margin-left:auto; width:30px; height:30px; padding:0; display:inline-grid; place-items:center; color:var(--bad)} .sh-del .ico{width:15px; height:15px}
.tbtn.sh-del:hover{border-color:var(--bad); background:color-mix(in srgb, var(--bad) 10%, transparent); color:var(--bad)}
.sh-dn2{grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px} .sh-dn2 .sel{height:30px; font-size:12px; width:auto}
.sh-in{font-size:12px; color:var(--ink-2)} .sh-in b{color:var(--spare-t)} .sh-in.none b{color:var(--warn)}
.sh-dt .sh-sp{color:var(--spare-t); font-weight:600} .sh-dt .sh-sp.none{color:var(--ink-2); font-weight:400}
.sh-da{display:grid; grid-template-columns:64px minmax(0, 1fr); align-items:start; gap:10px; padding:8px 0; border-bottom:1px solid var(--line)} .sh-dt .sh-af{color:var(--spare-t); font-weight:600}
.sh-arow{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:4px 10px; margin-top:2px}
.sh-tb{display:inline-flex; align-items:center; gap:5px; height:28px; padding:0 10px 0 8px; font-size:12px; white-space:nowrap} .sh-tb .ico{width:13px; height:13px}
.sh-adds{display:grid; gap:8px}
.cut-how{margin:0 4px; font-size:12px; color:var(--ink-2)} .cut-how summary{cursor:pointer; font-weight:600; padding:2px 0} .cut-how p{margin:6px 0 0; line-height:1.5}
.sh-dr{display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:4px 10px; padding:4px 0 8px; border-bottom:1px solid var(--line)}
.sh-dr label{display:grid; cursor:pointer; min-width:0} .sh-dr label b{font-size:13px} .sh-dr label small{font-size:12px; color:var(--ink-2); overflow-wrap:anywhere}
.sh-fit{font-size:12px; color:var(--ink-2); white-space:nowrap; text-align:right} .sh-fit b{color:var(--ink)} .sh-dr .sel{grid-column:2 / -1; justify-self:start; height:30px; font-size:12px; width:auto}
.sh-dn{font-size:12px; color:var(--ink-2); margin-top:6px} .sh-dg{margin-top:10px; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-2)}
.sh-fig .no{display:inline-grid; place-items:center; min-width:17px; height:17px; padding:0 5px; border-radius:9px; background:var(--ink); color:var(--panel); font-size:10px; font-weight:700}
.sh-bar{display:flex; height:10px; border-radius:5px; overflow:hidden; background:var(--line)} .sh-bar i{display:block; height:100%}
.sh-key{display:flex; flex-wrap:wrap; gap:4px 14px; margin:0; font-size:12px; color:var(--ink-2)} .sh-key span{display:inline-flex; align-items:center; gap:6px} .sh-key i{width:10px; height:10px; border-radius:3px}
.sb-wood{background:var(--ply)} .sb-spare{background:var(--spare)} .sb-cuts{background:var(--ply-edge)} .sb-gaps{background:var(--ink-2)} .sb-free{background:var(--line-2)}
.sh-sv{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 0 0; border-top:1px solid var(--line)}
.sh-sv > span{display:grid; gap:2px; font-size:13px} .sh-sv small{font-size:12px; color:var(--ink-2)} .sh-sv .btn{flex:none}
.sh-parts span.sp{color:var(--spare-t); font-weight:600} .sh-parts span.sp b, .sh-fig .no.sp{background:var(--spare); color:#fff}
/* (a spare part, not of a whole one: its number in a ring, on the sheets, their lists, the big view and the key) */
.sh-parts span.sp.lo b, .no.sp.lo{background:#fff; color:var(--spare); box-shadow:inset 0 0 0 1.5px var(--spare)}
.sh-legend i.lg-ring{display:inline-grid; place-items:center; width:16px; height:16px; border-radius:50%; background:#fff; color:var(--spare); box-shadow:inset 0 0 0 1.5px var(--spare); font-size:9px; font-style:normal; font-weight:800}
.sh-use{display:inline-flex; align-items:center; gap:7px; font-variant-numeric:tabular-nums}
.sh-use i{position:relative; width:56px; height:6px; border-radius:3px; background:var(--line); overflow:hidden}
.sh-use i::after{content:''; position:absolute; inset:0 auto 0 0; width:var(--u); background:var(--ink-2); border-radius:3px}
.sheets figure.low .sh-use{color:var(--warn); font-weight:700} .sheets figure.low .sh-use i::after{background:var(--warn)}
.sh-parts{display:flex; flex-wrap:wrap; gap:4px 14px; margin:8px 2px 0; font-size:12px; color:var(--ink-2)}
.sh-parts span{display:inline-flex; align-items:center; gap:6px} .sh-parts small{font-size:11px; color:var(--ink-2)}
.sh-parts b{display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 6px; border-radius:9px; background:var(--ink); color:var(--panel); font-size:10.5px}
/* the Test tab (2026-10-17): the preview fills the view and the test's controls float on its right in the 3D view's panel
   (.v3panel, foldable); the preview keeps clear of the open panel where there is room for both */
.tview{position:absolute; inset:0}
.tscroll{position:absolute; inset:0; overflow:auto; padding:var(--gy) var(--gx) 36px; display:grid; gap:20px; align-content:start}
.tview[data-open="true"] .tscroll{padding-right:calc(262px + var(--gx))}
.tview .v3body > .tt-call{margin-top:10px}
.v3sec .tt-call{margin-top:8px}
/* (what to test: small tabs over the preview, outside the panel, as a page's own tabs) */
.tt-head{display:grid; gap:8px} .tt-head .vhead{margin-bottom:4px}
/* small tabs inside a tab (Test, Parts & boxes): a segmented control, a grey track with the open one raised in white, so
   they read as a level under the main tabs' orange underline (owner, 2026-10-17: "tab inside tab design the same, confused") */
.subtabs{display:inline-flex; justify-self:start; max-width:100%; gap:2px; padding:3px; border-radius:10px; background:var(--track)}
.subtabs button{height:32px; padding:0 16px; border:0; border-radius:7px; background:none; color:var(--ink-2); font:inherit; font-weight:650; font-size:13px; cursor:pointer; white-space:nowrap}
.subtabs button:hover{color:var(--ink)}
.subtabs button[aria-selected="true"]{background:var(--thumb); color:var(--ink); font-weight:700; box-shadow:0 1px 2px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.04)}
.tt-lead{margin:0; font-size:12.5px; color:var(--ink-2); line-height:1.45}
.tt-hint{display:block; margin-top:6px; font-size:11.5px; color:var(--ink-2); line-height:1.35}
.tt-hint:empty{display:none}
.tview .sel{height:34px}
.tt-fit{width:100%; height:auto; display:block; background:var(--paper); border-radius:6px}
.tt-fit text{font-size:11px; font-weight:650}
.tt-call{display:grid; gap:8px; justify-items:start; padding:10px 12px; border:1px solid var(--warn); border-radius:8px; background:color-mix(in srgb, var(--warn) 10%, var(--panel)); font-size:12.5px}
.tt-call p{margin:0}
.tt-dl{width:100%; justify-content:center; height:40px; margin:2px 0 8px}
/* (the download stays in reach at the foot of the panel while the rest scrolls) */
.tt-foot{position:sticky; bottom:-12px; margin:0 -12px -12px; padding:0 12px 12px; background:var(--panel); border-top:1px solid var(--line)}
.tview .v3seg button{padding:0; font-size:11.5px; min-width:0}
.tt-chips{display:flex; flex-wrap:wrap; gap:5px}
.tt-chip{display:inline-flex; align-items:baseline; gap:4px; padding:4px 8px; border:1px solid var(--line); border-radius:999px; font-weight:700; font-size:12.5px; background:var(--raise)}
.tt-chip.on{border-color:var(--accent); background:var(--accent-soft)}
.tt-chip small{font-size:10px; font-weight:700; color:var(--accent)}
.tt-steps{margin:0; padding-left:18px; display:grid; gap:6px; font-size:12.5px; line-height:1.45}
/* the full kit's groups: a switch each, its name, what it holds and its number of pieces (a plain grey count) */
.tt-kg{padding:6px 0}
.tt-kg > span{display:grid; gap:1px; flex:1; min-width:0}
.tt-kg b{font-size:12.5px; font-weight:700}
.tt-kg small{font-size:11px; color:var(--ink-2); line-height:1.3}
.tt-kg em{font-style:normal; font-size:11.5px; font-weight:700; color:var(--ink-2)}
.tt-link{border:0; padding:0; background:none; color:var(--accent); font-weight:700; text-decoration:underline; text-underline-offset:2px; cursor:pointer}
/* (the 3D print model in two steps: the print test pieces, then the whole bed; owner, 2026-10-17) */
.tt-step{display:grid; gap:12px; min-width:0}
.tt-step + .tt-step{margin-top:8px; padding-top:var(--sec); border-top:1px solid var(--line)}
.tt-shead{display:flex; align-items:center; flex-wrap:wrap; gap:10px 12px}
.tt-sno{display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--accent); color:#fff; font-weight:800; font-size:14px; flex:none}
.tt-stitle{flex:1 1 240px; min-width:0}
.tt-stitle h3{margin:0; font-size:15px; font-weight:800}
.tt-stitle p{margin:2px 0 0; font-size:12.5px; color:var(--ink-2); line-height:1.45}
.tt-sdl{gap:8px} .tt-sdl svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.tt-sbody{display:grid; gap:14px; padding:14px; border:1px solid var(--line); border-radius:var(--r); background:var(--panel)}
.tt-sart{padding:10px; border-radius:6px; background:var(--paper)}
.tt-sart svg{width:100%; height:auto; display:block}
/* (the print test pieces' step: the drawing, small, beside Which one fitted best?, the steps under both; owner, 2026-10-17: the
   drawings "display too big"; the chips are its legend, pointing at one lights its slot: .tt-band.hot) */
.tt-sprint{display:flex; flex-wrap:wrap; align-items:flex-start; gap:14px 16px}
.tt-sprint .tt-sart{flex:3 1 300px; max-width:460px} .tt-sprint .tt-gapq{flex:2 1 220px} .tt-sprint .tt-steps{flex:1 1 100%}
.tt-sart .tt-band{transition:fill-opacity .12s} .tt-sart .tt-band.hot{fill-opacity:.35} .tt-sart .tt-dot.hot{fill:var(--accent) !important}      /* (themed() puts the fill in a style attribute) */
.tt-gapq{display:grid; gap:8px; padding:12px; border-radius:8px; background:var(--paper); font-size:13px}
.tt-gapq .tt-hint{margin:0}
button.tt-chip{font-family:inherit; color:var(--ink); cursor:pointer} button.tt-chip:hover{border-color:var(--accent)} button.tt-chip.on{border-color:var(--accent); background:var(--accent-soft)}
/* (the fit saved for a CNC shop, on the Test tab) */
.tt-shop{display:flex; gap:8px; align-items:center} .tt-shop .sel{flex:1; min-width:0; height:34px}
button.tt-chip:hover{border-color:var(--accent)}
.tt-unit{align-self:center; font-size:12px; color:var(--ink-2)}
/* (the settings a download carries, beside its button) */
.tt-tag{display:flex; flex-wrap:wrap; align-items:center; gap:4px; margin:2px 0 8px; font-size:11.5px}
.tt-stitle .tt-tag{margin:6px 0 0}
.tt-tag span{padding:1px 7px; border-radius:5px; background:var(--paper); border:1px solid var(--line); font-weight:700; color:var(--ink); white-space:nowrap}
.tt-tag .tt-tagh{padding:0; border:0; background:none; font-weight:600; color:var(--ink-2)}
.plates{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap:14px}
.plates svg{width:100%; height:auto; display:block}
.plates g[data-pno]{cursor:default}
.plates g.hot .pp{fill:color-mix(in srgb, var(--accent) 55%, var(--ply)) !important; stroke:var(--accent) !important; stroke-width:.6}      /* (themed() puts the fill in a style attribute) */
/* (the parts to print: a card per kind, as on the Parts & boxes tab, with the plates it is on; it and its parts on the
   plates light up together) */
.tt-khead{display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 12px; margin:6px 0 10px}
.tt-khead h3{margin:0; font-size:15px; font-weight:800}
.tt-khead span{font-size:12.5px; color:var(--ink-2)}
.tpieces{justify-self:start; max-width:100%; padding:10px; border:1px solid var(--line); border-radius:var(--r); background:var(--panel)}
.tpieces svg{width:540px; max-width:100%; height:auto; display:block}      /* (about 25% smaller, never stretched; the numbers stay readable) */
@media (max-width:700px){ .tview[data-open="true"] .tscroll{padding-right:var(--gx)} .tscroll{padding-top:66px; padding-bottom:96px} }      /* (the folded panel sits on its own row, clear of the small tabs) */
/* the Parts & boxes tab (2026-10-17): figures, then cards: each kind of part with its drawing, the delivery boxes with how
   full each is (the assembly steps have their own tab) */
.pb{display:grid; grid-template-columns:minmax(0, 1fr); gap:var(--sec); align-content:start}
.pb-head{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; margin-bottom:var(--hgap)}
.pb-head h2{margin:0}
.pb-head .sub, .pb .pb-head .sub{margin:0}
.pb-head .inline{margin:0 0 0 auto}
/* a kind of part as a tile, the same on Parts & boxes and the Test tab (2026-10-17, owner: names cut short): the drawing on
   top with the number and a download over its corners, then the name in full (it wraps, never cut), how many, the lines */
.pk-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(184px, 100%), 1fr)); gap:12px}
.pk{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--r); background:var(--panel); overflow:hidden; transition:border-color .12s, box-shadow .12s}
.pk-art{position:relative; height:108px; padding:34px 14px 10px; background:var(--paper); border-bottom:1px solid var(--line)}
.pk-art svg{width:100%; height:100%; display:block}
.pk-no{position:absolute; top:8px; left:8px; display:inline-grid; place-items:center; min-width:22px; height:22px; padding:0 6px; border-radius:11px; background:var(--ink); color:var(--panel); font-size:12px; font-weight:800}
.pk-dl{position:absolute; top:6px; right:6px; width:28px; height:28px; color:var(--ink-2); background:var(--panel); border-color:var(--line); border-radius:7px}
.pk-dl:hover, .pk-dl:focus-visible{color:var(--accent); border-color:var(--accent)}
.pk-dl svg{width:16px; height:16px}
.pk-body{display:grid; gap:2px; padding:10px 12px 12px}
.pk-name{margin:0 0 2px; font-size:14px; font-weight:700; line-height:1.3; overflow-wrap:anywhere}
.pk-qty{display:inline-block; margin-left:2px; padding:0 7px; border-radius:999px; background:var(--accent-soft); color:var(--accent); font-size:12px; font-weight:800; line-height:20px; white-space:nowrap; vertical-align:1px}
.pk-line{font-size:12.5px; color:var(--ink-2); line-height:1.4}
/* (the Test tab: the plates a part is on, a card and its parts on the plates lit together, too big for the print bed) */
.pk-on{display:inline-flex; align-items:center; gap:6px; margin-top:4px; font-size:11.5px; font-weight:700}
.pk-on::before{content:""; width:8px; height:8px; border-radius:2px; background:var(--ply); border:1px solid var(--ply-edge)}
.pk[data-pno]{cursor:default}
.pk.hot, .pk:focus-visible{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); outline:none}
.pk.hot .pk-art{background:var(--accent-soft)}
.pk[data-big]{border-color:var(--warn)}
.pk[data-big] .pk-art{background:color-mix(in srgb, var(--warn) 10%, var(--paper))}
.pk[data-big] .pk-on{color:var(--warn)}
.pk[data-big] .pk-on::before{background:var(--warn); border-color:var(--warn)}
@media (max-width:600px){ .pk-grid{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px} .pk-art{height:92px; padding:32px 10px 8px} .pk-body{padding:8px 10px 10px} .pk-name{font-size:13px} }
.pb-bar{height:6px; border-radius:3px; background:var(--paper); overflow:hidden}
.pb-bar i{display:block; height:100%; background:var(--accent); border-radius:3px}
.pb-bar.over i{background:var(--bad)}
/* ---------- the delivery boxes (owner, 2026-10-17: "see the actual box and customize the box"): the settings in one card,
   then a card per box: its picture, weight, inside size and its parts layer by layer as chips to drag or click into another
   box ---------- */
.bx-sec .btn svg, .pbv .btn svg, .bx-part svg, .bx-del svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.bx-lt{display:inline-grid; place-items:center; min-width:22px; height:22px; padding:0 6px; border-radius:6px; background:var(--ink); color:var(--panel); font-size:12px; font-weight:800}
.bx.warn{border-color:var(--warn)}
/* (the box card, owner 2026-10-17: "I don't feel it matches my expectation"; asked: the picture on top, a clean list): the
   picture across the top, the title with the size letter and the weight, the size and a thin neutral bar against the limit,
   then the parts as rows under each layer's name, from the bottom */
.bx-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap:14px; align-items:start}
.bx{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--r); background:var(--panel); overflow:hidden; transition:border-color .12s, box-shadow .12s}
.bx-pic{display:grid; place-items:center; aspect-ratio:2; padding:6px 10px; background:var(--paper); border-bottom:1px solid var(--line); overflow:hidden}
.bx-pic img{width:100%; height:100%; object-fit:contain; display:block}
.bx-pic svg{width:100%; height:100%; display:block}
.bx-body{display:grid; gap:8px; align-content:start; padding:12px 14px 12px}
.bx-title{display:flex; align-items:center; gap:8px; font-size:15px} .bx-title .bx-all b{font-weight:800}
.bx-title .bx-lt{min-width:20px; height:20px; font-size:11px}
.bx-kg{margin-left:auto; font-weight:800} .bx.warn .bx-kg{color:var(--warn)}
.bx-meta{display:grid; grid-template-columns:auto minmax(40px, 1fr) auto; align-items:center; gap:10px; font-size:12px; color:var(--ink-2)}
.bx .pb-bar{height:4px; border-radius:2px; background:var(--line)} .bx .pb-bar i{background:var(--ink-2); border-radius:2px} .bx .pb-bar.over i{background:var(--bad)}
.bx-of{white-space:nowrap}
.bx-layers{display:grid; gap:0; margin:2px 0 0; padding:6px 0 0; border-top:1px solid var(--line); list-style:none}
.bx-layer{display:grid}
/* (owner 2026-10-19: no layer headings; a thin dashed line between the layers, the list in packing order) */
.bx-layer + .bx-layer{margin-top:4px; padding-top:4px; border-top:1px dashed var(--line-2)}
.bx-rows{display:grid; gap:1px; margin:0 -6px}
.bx-part{display:flex; align-items:center; gap:8px; width:100%; min-height:30px; padding:3px 6px; border:0; border-radius:6px; background:none; color:var(--ink); font:inherit; font-size:13px; font-weight:600; text-align:left; cursor:grab; transition:background .12s, opacity .12s}
.bx-part:hover, .bx-part[aria-expanded="true"]{background:var(--paper)}
.bx-part b{flex:none; display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 5px; border-radius:10px; background:var(--paper); color:var(--ink-2); font-size:11px; font-weight:800}
.bx-part:hover b{background:var(--panel)}
.bx-nm{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bx-part small{flex:none; font-size:12px; font-weight:700; color:var(--ink-2)}
.bx-part.pin svg{flex:none; width:14px; height:14px; color:var(--accent)}
.bx-grip{flex:none; width:6px; height:12px; color:var(--ink-2); opacity:0; background:radial-gradient(circle, currentColor 1px, transparent 1.4px) 0 0 / 3px 4px; transition:opacity .12s}
.bx-part:hover .bx-grip, .bx-part:focus-visible .bx-grip{opacity:.7}
.bx-part:active{cursor:grabbing}
.bx-part[aria-pressed="true"]{background:var(--accent-soft)} .bx-part[aria-pressed="true"] b{background:var(--accent); color:#fff}
.bx-part[aria-pressed="true"] .bx-ck, .bx-part:hover .bx-ck, .bx-all:hover .bx-ck{border-color:var(--accent)}
.bx-part[aria-pressed="true"] .bx-ck{background:var(--accent)} .bx-part[aria-pressed="true"] .bx-ck::after{border-color:#fff}
.bx-flag{padding:5px 8px; border-radius:6px; background:color-mix(in srgb, var(--warn) 14%, var(--panel)); color:var(--warn); font-size:12px; font-weight:700}
/* (the planner, owner 2026-10-17: "select which parts be together or single, and how many box, or one box for all"): the
   number of boxes, chips that select, a bar at the foot with where they go, a menu per box, the size chosen per box */
.bx-menu{width:28px; height:28px; margin-right:-6px; color:var(--ink-2)} .bx-menu svg{width:18px; height:18px; fill:currentColor; stroke:none}
.bx-menu:hover, .bx-menu[aria-expanded="true"]{color:var(--accent)}
select.bx-lt.bx-pick{width:76px; height:22px; margin-right:6px; padding:0 2px 0 6px; border:0; border-radius:6px; background:var(--ink); color:var(--panel); font:inherit; font-size:11.5px; font-weight:800; vertical-align:1px; cursor:pointer}
/* (owner, 2026-10-17: "a lot of view of the parts many places and too much"): Parts and Delivery boxes as small tabs; the boxes
   a compact plan: the number of boxes and the three buttons, one line with what is set, the boxes to order, then a slim card
   per box (its picture at the side) */
.bx-bar{position:sticky; bottom:12px; z-index:6; display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:14px; padding:10px; border-radius:12px; background:var(--ink); color:var(--panel); box-shadow:0 10px 30px rgba(0,0,0,.25)}
.bx-bar .btn{height:34px} .bx-bar .btn:not(.primary){background:transparent; color:var(--panel); border-color:color-mix(in srgb, var(--panel) 35%, transparent)}
.bx-bar .btn svg, .bx-bar .icon svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.bx-bn{margin-right:auto; font-size:13px} .bx-bn b{font-weight:800}
.bx-take{display:inline-flex; align-items:center; gap:6px; font-size:12.5px} .bx-take .icon, .bx-clear{width:30px; height:30px; color:var(--panel); background:transparent; border-color:color-mix(in srgb, var(--panel) 35%, transparent); font-size:16px; font-weight:800}
@media (max-width:900px){ .bx-bar{bottom:84px} }
/* (owner, 2026-10-17: "I still could not select specific items to be together or separate right?": the chips did not look
   like they could be picked): a tick box on every part and on each box's title; the bar always there, its actions greyed
   until something is ticked */
.bx-ck{flex:none; display:grid; place-items:center; width:15px; height:15px; border:1.5px solid var(--line-2); border-radius:4px; background:var(--panel)}
.bx-ck::after{content:""; width:7px; height:3.5px; border:solid transparent; border-width:0 0 2px 2px; transform:translateY(-1px) rotate(-45deg)}
.bx-all{display:inline-flex; align-items:center; gap:8px; padding:0; border:0; background:none; color:inherit; font:inherit; cursor:pointer}
.bx-all[aria-pressed="true"] .bx-ck, .bx-all[aria-pressed="mixed"] .bx-ck{border-color:var(--accent); background:var(--accent)} .bx-all[aria-pressed="true"] .bx-ck::after{border-color:#fff}
.bx-all[aria-pressed="mixed"] .bx-ck::after{width:7px; height:0; border-width:0 0 2px; border-color:#fff; transform:none}
.bx.picked{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent)}

/* (the box design dialog: the closed box as it will look on the left, the choices on the right) */
.dlg.wide{width:min(1020px, calc(100vw - 24px))}
.art-ed{display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr); gap:20px; align-items:start}
.art-prev{position:sticky; top:0; display:grid; gap:8px}
.art-pic{display:grid; place-items:center; aspect-ratio:760 / 440; border-radius:var(--r); background:var(--paper); border:1px solid var(--line)}
.art-pic img, .art-pic svg{width:100%; height:100%; object-fit:contain; display:block}
.art-side{height:56px; padding:6px; border-radius:var(--r); background:var(--paper); border:1px solid var(--line)} .art-side svg{width:100%; height:100%; display:block}
.art-prev small{font-size:12px; color:var(--ink-2)}
.art-form{display:grid; gap:14px}
.art-row{display:grid; gap:8px; padding-bottom:14px; border-bottom:1px solid var(--line)} .art-row:last-of-type{border-bottom:0}
.art-row > .lab{font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2)}
.art-sw{display:flex; flex-wrap:wrap; gap:8px}
.art-swb{display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 10px 0 5px; border:1px solid var(--line); border-radius:999px; background:var(--raise); font-size:12.5px; font-weight:600; cursor:pointer}
.art-swb i{width:22px; height:22px; border-radius:50%; background:var(--sw); box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.art-swb[aria-pressed="true"]{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent)}
.art-swc input{width:22px; height:22px; padding:0; border:0; border-radius:50%; background:none; cursor:pointer; -webkit-appearance:none; appearance:none; box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.art-swc input::-webkit-color-swatch-wrapper{padding:0} .art-swc input::-webkit-color-swatch{border:0; border-radius:50%} .art-swc input::-moz-color-swatch{border:0; border-radius:50%}
/* (box labels: the labels as they print, in a frame) */
.bl-prev{display:block; width:100%; height:min(64vh, 620px); border:1px solid var(--line); border-radius:var(--r); background:#eee}
.dlg.wide .dlg-f{max-height:calc(100vh - 32px)} .dlg.wide .dlg-b{flex:1 1 auto; min-height:0; overflow:auto; margin:0 -6px; padding:0 6px}
.art-file{display:flex; flex-wrap:wrap; align-items:center; gap:8px} .art-file small{font-size:11.5px; color:var(--ink-2)}
.art-sl{display:flex; align-items:center; gap:10px; font-size:12.5px} .art-sl input{flex:1; accent-color:var(--accent)} .art-sl b{min-width:44px; text-align:right}
.art-ck{display:flex; align-items:flex-start; gap:8px; font-size:13px; line-height:1.4} .art-ck input{margin-top:2px; accent-color:var(--accent)}
.art-acts{display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px} .art-acts .btn{gap:6px} .art-acts .btn svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
@media (max-width:760px){ .art-ed{grid-template-columns:1fr} .art-prev{position:static} }
table{border-collapse:collapse; width:100%; font-size:13px}
th, td{text-align:left; padding:7px 8px; border-bottom:1px solid var(--line)}
th{font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-2); font-weight:700}
td.n, th.n{text-align:right}
td.size, td.n{white-space:nowrap}
.inline{display:flex; align-items:center; gap:10px; margin:0 0 12px; font-size:13px; color:var(--ink-2)}
.inline .num{width:110px}
.checkgrp{margin-top:var(--sec)}
.checkgrp h3{display:flex; align-items:center; gap:8px; font-size:15px; font-weight:800; margin:0 0 4px}
.checkgrp ul{list-style:none; margin:0; padding:0}
.checkgrp li{display:grid; grid-template-columns:12px 1fr auto; gap:10px; align-items:start; padding:8px 0; border-bottom:1px solid var(--line)}
.dot{width:10px; height:10px; border-radius:50%; margin-top:4px}
.dot.ok{background:var(--ok)} .dot.warn{background:var(--warn)} .dot.bad{background:var(--bad)}
.checkgrp .val{font-weight:700; white-space:nowrap}
.checkgrp details summary, .checkgrp .ctitle{font-weight:500; cursor:pointer; list-style:none}
.checkgrp .ctitle{cursor:default}
.checkgrp details summary::-webkit-details-marker{display:none}
.checkgrp details summary::after{content:"+"; margin-left:8px; color:var(--ink-2); font-weight:700}
.checkgrp details[open] summary::after{content:"\2212"}
.checkgrp details p{margin:6px 0 2px; font-size:12.5px; line-height:1.5; color:var(--ink-2)}
.note{font-size:12px; color:var(--ink-2); max-width:72ch}
.ccard{margin-top:var(--sec); padding:16px; border:1px solid var(--line); border-radius:var(--r); background:var(--panel)}
.ccard .note{margin:12px 0 0}
.big{font-size:28px; font-weight:800; font-stretch:85%}

/* ---------- toast ---------- */
.toast{position:fixed; left:50%; bottom:calc(18px + env(safe-area-inset-bottom, 0px)); transform:translate(-50%, 20px); background:var(--ink); color:var(--panel); padding:9px 14px; border-radius:8px; font-size:13px; font-weight:600; opacity:0; pointer-events:none; transition:.2s; z-index:50; max-width:90vw}
.toast.on{opacity:1; transform:translate(-50%, 0)}

/* ---------- small screens ---------- */
@media (max-width:1100px){ .totals .chip.optional, .brand .appname{display:none} .cols{grid-template-columns:1fr} }
@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .only-mobile{display:inline-grid}
  .brand .appname, .totals .chip:not(.state){display:none}
  .panel .design{display:flex; flex:none; flex-wrap:wrap; gap:6px; padding:12px 14px; border-bottom:1px solid var(--line)}
  .panel .design #designName{flex:1 1 100%; width:auto}
  .panel .design .pop .popbody{left:0; right:auto}
  .panel{position:fixed; top:var(--top); bottom:0; left:0; width:min(380px, 94vw); z-index:40; transform:translateX(-102%); transition:transform .2s; box-shadow:0 0 30px rgba(0,0,0,.2); display:flex; flex-direction:column}
  .rail{flex:none; border-right:0; border-bottom:1px solid var(--line)}
  .rtop{display:none}
  .rtabs{flex-direction:row; gap:0; padding:0; overflow-x:auto}
  .rbtn{flex:1 0 50px; width:auto; padding:9px 0 8px}
  .rlab{font-size:10px}      /* (seven groups fit across a 360 to 390 px phone) */
  .rbtn[aria-selected="true"]{box-shadow:inset 0 -3px 0 var(--accent)}
  .rbtn[aria-selected="true"].lit{box-shadow:inset 0 -3px 0 var(--accent), inset 0 0 0 1.5px var(--accent)}
  .pbody{flex:1; min-height:0}
  .panel.open{transform:none}
  .scrim{display:block; position:fixed; inset:var(--top) 0 0 0; background:rgba(0,0,0,.3); z-index:35}
  .fit{height:auto} .fit svg{width:100%; height:auto}
  .sheets{grid-template-columns:1fr}
  /* the totals as one line under the tabs; a floating Edit bed button opens the settings */
  .main{grid-template-rows:auto auto 1fr}
  .mtotals{display:block; padding:7px 14px; font-size:12px; color:var(--ink-2); background:var(--panel); border-bottom:1px solid var(--line); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .mtotals b{color:var(--ink); font-weight:800}
  .view{padding-bottom:84px}
  .fab{display:flex; align-items:center; gap:10px; position:fixed; left:50%; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); transform:translateX(-50%); z-index:30; height:52px; padding:0 22px 0 18px;
    border:0; border-radius:26px; background:var(--accent); color:var(--accent-ink); font:inherit; box-shadow:0 8px 24px rgba(0,0,0,.22); cursor:pointer; white-space:nowrap}
  .fab svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
  .fab span{display:grid; text-align:left; line-height:1.15} .fab b{font-size:15px; font-weight:800} .fab small{font-size:11px; opacity:.85}
  .drawer-open .fab{display:none}
  .sheethead{display:flex; flex:none; align-items:center; justify-content:space-between; position:relative; padding:10px 14px; background:var(--panel); border-bottom:1px solid var(--line)}
  .sheethead b{font-size:15px; font-weight:800}
}
/* phones: the settings slide up from the bottom as a sheet, the tabs share the width (icon over a short label) */
@media (max-width:600px){
  :root{--gx:16px; --gy:16px; --sec:24px}
  /* (figures: three in a row, four as two rows of two; the prices one under the other) */
  .kpis{gap:8px} .kpis[data-n="4"]{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .kpi{padding:10px 12px} .kpi b{font-size:19px}
  .ccard .grid3{grid-template-columns:1fr}
  .panel{top:auto; right:0; width:100%; height:calc(100% - var(--top) - 24px); border-right:0; border-radius:16px 16px 0 0; transform:translateY(102%); padding-bottom:env(safe-area-inset-bottom, 0px)}
  .sheethead{padding-top:16px}
  .sheethead::before{content:""; position:absolute; top:6px; left:50%; width:40px; height:4px; margin-left:-20px; border-radius:2px; background:var(--line-2)}
  .tabs{padding:0 4px; gap:0}
  /* (the tabs: each as wide as its short label, sharing what is left; on a very narrow phone they scroll, never cut) */
  .tab{flex:1 0 auto; flex-direction:column; justify-content:center; gap:3px; height:54px; padding:0 3px; font-size:10.5px; min-width:38px}
  .tab svg{width:18px; height:18px}
  .tab .tl{display:none} .tab .ts{display:block}
  .tab .nb{position:absolute; top:4px; left:calc(50% + 6px); margin:0}
  /* (a narrow top bar: tighter gaps, a smaller logo; wide tables scroll sideways instead of running off the screen) */
  .top{gap:6px; padding:0 8px} .brand{margin-right:0} .brand img{height:19px}
  .chip.state{flex:none; padding:2px 8px} #btnExport{padding:0 10px} #btnPrints{padding:0 9px} #btnPrints .pr-l, #btnPrints .chev{display:none}
  .pane table{display:block; overflow-x:auto; -webkit-overflow-scrolling:touch}
  .tab{position:relative}
}

/* ---------- 3D view: floating panel on the right, like a 3D editor ---------- */
.v3d{position:absolute; inset:0}
.v3panel{position:absolute; top:14px; right:14px; width:248px; max-height:calc(100% - 28px); overflow:auto; z-index:5; background:color-mix(in srgb, var(--panel) 90%, transparent);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border:1px solid var(--line); border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.14)}
.v3panel[data-open="false"]{width:auto}
.v3panel[data-open="false"] .v3body{display:none}
.v3head{display:flex; align-items:center; gap:8px; width:100%; height:42px; padding:0 12px; border:0; background:transparent; color:var(--ink); font:inherit; font-size:13px; cursor:pointer}
.v3head svg{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round}
.v3head .chev{margin-left:auto; transition:transform .15s}
.v3panel[data-open="false"] .v3head .chev{transform:rotate(-90deg); margin-left:6px}
.v3body{padding:0 12px 12px; border-top:1px solid var(--line)}
.v3sec{padding:10px 0; border-bottom:1px solid var(--line)}
.v3sec h4{display:flex; margin:0 0 8px; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2)}
.v3val{margin-left:auto; color:var(--accent); letter-spacing:0}
.v3row{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:4px 0; font-size:13px; cursor:pointer}
.v3seg{grid-auto-columns:1fr; margin-bottom:10px}
.v3seg button{height:30px; font-size:12px}
.v3panel .slide{width:100%}
.v3cams{display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; margin-bottom:8px}
.v3cam{display:grid; justify-items:center; gap:3px; padding:7px 0 6px; border:1px solid var(--line); border-radius:8px; background:var(--raise); color:var(--ink); font:inherit; font-size:11px; font-weight:700; cursor:pointer}
.v3cam svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linejoin:round}
.v3cam:hover{border-color:var(--line-2)}
.v3cam[aria-pressed="true"]{border-color:var(--accent); background:var(--accent-soft); color:var(--accent)}
.v3tools{display:flex; gap:6px; margin-bottom:4px}
.v3tools .btn{flex:1; justify-content:center; height:30px}
.v3count{padding:10px 0 4px; font-size:12px; font-weight:700; line-height:1.5}
.v3keys{font-size:11px; color:var(--ink-2)}
.v3hint{position:absolute; left:14px; bottom:14px; padding:6px 10px; border-radius:8px; font-size:12px; color:var(--ink-2); background:color-mix(in srgb, var(--panel) 80%, transparent); pointer-events:none}
@media (max-width:700px){ .v3panel{top:10px; right:10px; width:min(248px, calc(100% - 20px))} .v3hint{display:none} }

/* ---------- projects and designs (owner, 2026-10-16): the pages around the editor ---------- */
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.ico{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none}
.btn .ico{width:16px; height:16px}
.btn.big{height:44px; padding:0 18px; font-size:14px; border-radius:8px}
.btn.ghost{border-color:transparent; background:transparent; padding:0 10px 0 6px}
.btn.ghost:hover{background:var(--raise); border-color:var(--line)}
.btn.dark{background:var(--ink); color:var(--panel); border-color:var(--ink)}
.icon.bordered{border-color:var(--line); background:var(--raise); width:40px; height:40px}
.linkbtn{border:0; background:transparent; padding:0; font:inherit; font-weight:700; color:var(--accent); text-decoration:underline; text-underline-offset:3px; cursor:pointer}
.tin{height:44px; border:1px solid var(--line-2); border-radius:8px; padding:0 12px; background:var(--raise); font-weight:600; font-size:14px; color:var(--ink); min-width:0}
.tin:focus{outline:0; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.note{font-size:12px; color:var(--ink-2); margin:0}
.badge{display:inline-flex; align-items:center; gap:6px; align-self:flex-start; font-size:12px; font-weight:700; padding:4px 10px; border-radius:14px; background:var(--accent-soft); color:var(--ink); white-space:nowrap}
.badge .ico{width:14px; height:14px; color:var(--accent)}
.ticon{width:92px; height:26px; fill:none; stroke:var(--frame); stroke-width:1.6; stroke-linejoin:round}
.ticon.big{width:180px; height:50px}
.cstate{font-size:13px; font-weight:600}
.cstate.ok{color:var(--ok)} .cstate.warn{color:var(--warn)} .cstate.bad{color:var(--bad)}
.pages{position:fixed; inset:0; overflow-y:auto; background:var(--paper); z-index:1}
.page{min-height:100%}
.ptop{position:sticky; top:0; z-index:10; display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; min-height:var(--top); padding:8px 20px; background:var(--panel); border-bottom:1px solid var(--line)}
.ptop .ptitle{font-size:16px; font-weight:800}
.pacts{display:flex; align-items:center; gap:8px; margin-left:auto}
.psearch{flex:1 1 260px; max-width:440px; display:flex; align-items:center; gap:8px; height:40px; margin:0 auto; padding:0 12px; border:1px solid var(--line); border-radius:8px; background:var(--paper); color:var(--ink-2)}
.psearch:focus-within{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.psearch input{flex:1; min-width:0; border:0; outline:0; background:transparent; font-size:14px; color:var(--ink)}
.crumbs{display:flex; align-items:center; gap:6px; padding-left:12px; border-left:1px solid var(--line); font-size:14px; min-width:0}
.crumbs a{color:var(--ink-2); font-weight:600; text-decoration:none} .crumbs a:hover{color:var(--ink); text-decoration:underline}
.crumbs .ico{width:14px; height:14px; color:var(--ink-2)}
.crumbs b{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pmain{max-width:1180px; margin:0 auto; padding:28px 20px 56px; display:flex; flex-direction:column; gap:22px}
.pbanner{margin:0; padding:10px 14px; border-radius:8px; background:var(--accent-soft); border:1px solid var(--accent-line); font-size:13px; font-weight:600}
.phead{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:14px}
.ph-title{display:flex; flex-direction:column; gap:6px; min-width:0}
.ph-title h1{margin:0; font-size:28px; font-weight:800}
.ph-meta{display:flex; flex-wrap:wrap; align-items:center; gap:10px}
.sub{color:var(--ink-2); font-size:13px}
.ph-tools{display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.fchips{display:flex; flex-wrap:wrap; gap:6px}
.fchip{height:34px; padding:0 14px; border-radius:17px; border:1px solid var(--line); background:var(--raise); font-size:13px; font-weight:600; cursor:pointer}
.fchip:hover{border-color:var(--line-2)}
.fchip[aria-pressed="true"]{background:var(--ink); color:var(--panel); border-color:var(--ink); font-weight:700}
.psort{display:flex; align-items:center; gap:6px; font-size:13px; color:var(--ink-2)}
.psort select{height:34px; border:1px solid var(--line); border-radius:8px; background:var(--raise); padding:0 8px; font-weight:600; color:var(--ink)}
.pgrid{display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:16px}
.pcard{position:relative; display:flex; flex-direction:column; gap:10px; padding:18px; border:1px solid var(--line); border-radius:14px; background:var(--panel); min-width:0; transition:border-color .15s, box-shadow .15s}
.pcard:hover{border-color:var(--line-2); box-shadow:0 6px 20px rgba(0,0,0,.06)}
.pcard:focus-within{border-color:var(--accent)}
.pcard-link{position:absolute; inset:0; border-radius:14px; z-index:1}
.pcard-link:focus-visible{outline-offset:-2px}
.pcard-top{display:flex; align-items:center; gap:10px}
.pcard-top .when{margin-left:auto; font-size:12px; color:var(--ink-2)}
.pcard .pmenu{position:relative; z-index:2; margin-right:-6px}
.pcard h2{margin:0; font-size:18px; font-weight:800; overflow-wrap:anywhere}
.pbeds{display:flex; flex-wrap:wrap; gap:6px}
.dlist{list-style:none; margin:2px 0 0; padding:0; border-top:1px solid var(--line)}
.dlist li{display:flex; justify-content:space-between; gap:10px; padding:7px 0; border-bottom:1px solid var(--line); font-size:13px}
.dlist li:last-child{border-bottom:0}
.dlist li span:first-child{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dlist li span:last-child{color:var(--ink-2); white-space:nowrap}
.dlist .muted{color:var(--ink-2)}
.pcard.new, .dcard.new{align-items:center; justify-content:center; gap:8px; text-align:center; min-height:160px; border:2px dashed var(--line-2); background:transparent; color:var(--ink); text-decoration:none; font:inherit; cursor:pointer}
.pcard.new:hover, .dcard.new:hover{border-color:var(--accent); background:var(--accent-soft)}
.pcard.new .ico, .dcard.new .ico{width:44px; height:44px; padding:11px; border-radius:22px; background:var(--accent-soft); color:var(--accent); box-sizing:border-box}
.pcard.new b, .dcard.new b{font-size:16px} .pcard.new span, .dcard.new span{font-size:13px; color:var(--ink-2)}
.pnone{grid-column:1 / -1; color:var(--ink-2); margin:8px 0}
.pcontinue{display:flex; align-items:center; gap:16px; padding:14px 18px; border:1px solid var(--accent-line); border-radius:14px; background:var(--accent-soft); color:var(--ink); text-decoration:none}
.pcontinue:hover{border-color:var(--accent)}
.pc-text{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1}
.pc-text small{font-size:12px; font-weight:700; color:var(--ink-2); text-transform:uppercase; letter-spacing:.05em}
.pc-text b{font-size:17px} .pc-text span{font-size:13px; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pempty{display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; padding:64px 20px; max-width:560px; margin:0 auto}
.pempty h1, .pempty h2{margin:0; font-size:26px; font-weight:800}
.pempty.small{padding:36px 20px} .pempty.small h2{font-size:20px}
.pempty p{margin:0; color:var(--ink-2); line-height:1.55}
.pfoot{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding-top:6px; font-size:13px; color:var(--ink-2)}
/* new project */
.steps3{display:flex; flex-wrap:wrap; gap:6px 18px; margin:0 0 0 auto; padding:0; list-style:none}
.steps3 li{display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--ink-2)}
.steps3 .n{width:26px; height:26px; border-radius:13px; display:inline-grid; place-items:center; font-size:13px; font-weight:800; border:1px solid var(--line-2); background:var(--raise)}
.steps3 .n .ico{width:14px; height:14px}
.steps3 li.cur{color:var(--ink); font-weight:800} .steps3 li.cur .n{background:var(--accent); border-color:var(--accent); color:#1e2123}
.steps3 li.done{color:var(--ink)} .steps3 li.done .n{background:var(--ink); border-color:var(--ink); color:var(--panel)}
.wiz{flex-direction:row; flex-wrap:wrap; align-items:flex-start; gap:24px}
.wizmain{flex:999 1 560px; min-width:0; display:flex; flex-direction:column; gap:20px}
.wizside{flex:1 1 260px; min-width:0; position:sticky; top:calc(var(--top) + 20px); display:flex; flex-direction:column; gap:12px; padding:20px; border:1px solid var(--line); border-radius:14px; background:var(--panel)}
.wizside h2{margin:0; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2)}
.wizside dl{margin:0; display:flex; flex-direction:column; gap:8px; font-size:14px}
.wizside dl div{display:flex; justify-content:space-between; gap:10px} .wizside dt{color:var(--ink-2)} .wizside dd{margin:0; font-weight:700; text-align:right}
.wizside .sep{height:1px; background:var(--line)}
.wstats{display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:12px; border-radius:10px; background:var(--paper); font-size:13px; color:var(--ink-2)}
.wstats b{color:var(--ink); font-size:16px; font-weight:800}
.wizside .cstate{margin:0}
.wiz-h{display:flex; flex-direction:column; gap:6px}
.wiz-h h1{margin:0; font-size:28px; font-weight:800; outline:0}
.wiz-h p{margin:0; color:var(--ink-2)}
.tgrid{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px}
.tgrid.three{grid-template-columns:repeat(3, minmax(0, 1fr))}
.tgrid.tight{gap:8px}
.tcard{position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:18px; border:2px solid var(--line); border-radius:14px; background:var(--panel); text-align:left; color:var(--ink); cursor:pointer; min-width:0}
.tcard:hover{border-color:var(--line-2)}
.tcard[aria-checked="true"], .tcard:has(input:checked){border-color:var(--accent); background:var(--accent-soft)}
.tcard:has(input:focus-visible){outline:2px solid var(--focus); outline-offset:2px}
.tcard input{position:absolute; opacity:0; pointer-events:none}
.tcard b{font-size:17px} .tcard .d{font-size:14px; color:var(--ink-2); line-height:1.45}
.tcard .ticon{width:120px; height:34px}
.tcard .stat{font-size:13px; color:var(--ink-2); margin-top:auto} .tcard .stat b{font-size:13px; color:var(--ink)}
.tcard.small{padding:12px 14px; gap:4px; border-radius:10px} .tcard.small b{font-size:14px} .tcard.small .d{font-size:13px}
.tgrid .tcard.small .ticon{width:100%; height:24px}
.tc-h{display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%}
.tag{font-size:11px; font-weight:800; padding:3px 8px; border-radius:10px; background:var(--ink); color:var(--panel); white-space:nowrap}
.fgrid{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px}
.fgrid .lab, .dlg .lab{font-size:13px; font-weight:700; color:var(--ink)}
.fblock{display:flex; flex-direction:column; gap:8px}
.fl{font-size:13px; font-weight:700}
.pills{display:flex; flex-wrap:wrap; gap:8px}
.szpill{position:relative; display:flex; flex-direction:column; justify-content:center; min-height:48px; padding:6px 14px; border:2px solid var(--line); border-radius:10px; background:var(--panel); color:var(--ink); cursor:pointer; text-align:left}
.szpill:hover{border-color:var(--line-2)}
.szpill[aria-checked="true"], .szpill:has(input:checked){border-color:var(--accent); background:var(--accent-soft)}
.szpill:has(input:focus-visible){outline:2px solid var(--focus); outline-offset:2px}
.szpill input{position:absolute; opacity:0; pointer-events:none}
.szpill b{font-size:14px} .szpill small{font-size:12px; color:var(--ink-2)}
.hbgrid{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px}
.wiznav{display:flex; justify-content:space-between; gap:12px; padding-top:4px}
/* a project */
.ptitle-in{font:inherit; font-size:28px; font-weight:800; color:var(--ink); border:1px solid transparent; border-radius:8px; background:transparent; padding:2px 8px; margin-left:-9px; min-width:0; width:min(640px, 100%)}
.ptitle-in:hover{border-color:var(--line)}
.ptitle-in:focus{outline:0; border-color:var(--accent); background:var(--raise); box-shadow:0 0 0 3px var(--accent-soft)}
.dgrid{display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:14px}
.dcard{display:flex; flex-direction:column; gap:10px; padding:14px; border:1px solid var(--line); border-radius:14px; background:var(--panel); min-width:0}
.dcard:hover{border-color:var(--line-2)}
.dthumb{display:grid; place-items:center; height:170px; border-radius:10px; background:var(--paper); padding:10px}
/* the design in 3D over its flat drawing, once drawn (the drawing stays where WebGL is not) */
.dthumb > *{grid-area:1 / 1} .dthumb .dshot{width:100%; height:100%; object-fit:contain} .dthumb .dshot:not([src]){display:none}
.dthumb:has(.dshot[src]) > svg{visibility:hidden} .dthumb:has(.dshot[src]){background:var(--pic); padding:6px}
.thumb{width:100%; height:100%}
.th-deck{fill:var(--ply); stroke:var(--ply-edge); stroke-width:8}
.th-hb{fill:var(--frame)}
.dcard-h{display:flex; align-items:center; gap:6px}
.dcard-h h3{margin:0; font-size:16px; font-weight:800; flex:1; min-width:0; overflow-wrap:anywhere}
.dcard-h h3 a{color:inherit; text-decoration:none} .dcard-h h3 a:hover{text-decoration:underline}
.dcard .sub{margin:0}
.dbadges{display:flex; flex-wrap:wrap; align-items:center; gap:6px}
.chip-ok, .chip-warn{display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:20px; font-size:12px; font-weight:700; line-height:1.3}
.chip-ok{background:color-mix(in srgb, var(--ok) 14%, transparent); color:var(--ok)} .chip-ok .ico{width:13px; height:13px}
.chip-warn{background:color-mix(in srgb, var(--warn) 16%, transparent); color:var(--warn)}
.sh-dt .sh-na{color:var(--warn); font-weight:700}
/* (approving from the Cutting page: a chosen one not approved, and yours waiting, folded) */
.sh-nar{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:4px 10px; margin:2px 0}
.sh-wait{margin-top:10px; border-top:1px solid var(--line); padding-top:8px} .sh-wait summary{cursor:pointer; font-size:12.5px; font-weight:700; color:var(--ink-2); padding:2px 0}
.sh-wait[open] summary{color:var(--ink)} .sh-wait > .sh-dn{display:block; margin:2px 0 4px}
.sh-wr{display:grid; grid-template-columns:minmax(0, 1fr); gap:6px; padding:8px 0; border-bottom:1px solid var(--line)} .sh-wr .cstate{font-size:12px}
.sh-wb{display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end}
.sl-tbl .sl-open small.cut-na, .sh-fig.sh-nap{color:var(--warn); font-weight:700} .sl-tbl .sl-open small.cut-na{display:block}
.ap-bad{margin:6px 0 10px; padding-left:20px; color:var(--bad); font-weight:600}
.chip.ap b{display:inline-flex; align-items:center; gap:4px} .chip.ap .ico{width:13px; height:13px}
@media (max-width:600px){ .totals .chip.ap{display:none} }
/* (a project page's Select: a box before each name, a click on a card ticks it, a bar with what to do with them) */
.dsel{display:none; flex:none; width:18px; height:18px; margin:0; accent-color:var(--accent); cursor:pointer}
.dgrid.selecting .dsel{display:block}
.dgrid.selecting .dcard[data-did]{cursor:pointer; user-select:none}
.dgrid.selecting .dcard-h .icon, .dgrid.selecting .dcard.new, .dgrid.selecting .dsell{display:none}
.dgrid.selecting .dcard.picked{border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent)}
.selbar{position:sticky; bottom:16px; z-index:5; display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--line-2); border-radius:12px; background:var(--panel); box-shadow:0 8px 24px rgba(0, 0, 0, .14)}
.selbar[hidden]{display:none}
.selbar .sb-sp{flex:1}
@media (max-width:600px){ .selbar{bottom:10px} .selbar .sb-sp{flex-basis:100%; height:0} .selbar .btn{flex:1} }
/* (dragging designs to another project: the card or name lifted, on a project page the other projects in a tray, on the
   Designs page the other projects' cards dashed, the one under the pointer lit) */
.dthumb{cursor:grab} .dgrid.selecting .dthumb{cursor:pointer}
.dlist li[data-did]{position:relative; z-index:2; cursor:grab; border-radius:6px; margin:0 -6px; padding-left:6px; padding-right:6px}
.dlist li[data-did]:hover{background:var(--raise)}
.dcard.lifted, .dlist li.lifted{opacity:.4}
body.bx-grabbing{user-select:none; -webkit-user-select:none}
.dg-ghost .bx-gchip{max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block}
.mvtray{position:fixed; right:20px; top:50%; translate:0 -50%; z-index:150; display:flex; flex-direction:column; gap:8px; width:280px; max-height:min(70vh, 560px); padding:12px; border:1px solid var(--line-2); border-radius:14px; background:var(--panel); box-shadow:0 18px 40px rgba(0, 0, 0, .22)}
.mvtray .mt-h{font-size:14px; font-weight:800}
.mvtray .mt-f{color:var(--ink-2); font-size:12px}
.mt-list{display:flex; flex-direction:column; gap:6px; min-height:0; overflow:auto}
.mt-p{display:flex; flex-direction:column; gap:2px; padding:10px 12px; border:1.5px dashed var(--line-2); border-radius:10px; font-size:14px}
.mt-p b{display:flex; align-items:center; gap:6px} .mt-p b .ico{width:15px; height:15px}
.mt-p small{color:var(--ink-2); font-size:12px}
.mt-p.new b{color:var(--accent)}
#homeGrid.dg-on .pcard[data-dropp]:not(.from){border-style:dashed; border-color:var(--line-2)}
#homeGrid.dg-on .pcard.from{opacity:.6}
.mt-p.drop, #homeGrid.dg-on .pcard[data-dropp].drop{border-style:solid; border-color:var(--accent); background:var(--accent-soft)}
@media (max-width:600px){ .mvtray{top:auto; bottom:12px; left:12px; right:12px; translate:none; width:auto; max-height:45vh} }
/* (Move to another project: the projects as a list, scrolled where there are many; Keep them here too) */
.mv-list{max-height:min(44vh, 360px); overflow:auto}
.mv-list .trow[hidden]{display:none}
.mv-keep{display:flex; align-items:flex-start; gap:10px; cursor:pointer}
.mv-keep input{flex:none; width:18px; height:18px; margin:2px 0 0; accent-color:var(--accent)}
.mv-keep span{display:flex; flex-direction:column; gap:2px} .mv-keep small{color:var(--ink-2)}
.dstats{display:flex; flex-wrap:wrap; gap:4px 12px; margin:0; font-size:13px; color:var(--ink-2)}
.dstats b{color:var(--ink)}
.dfoot{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto}
.cmp{display:flex; flex-direction:column; gap:10px}
.cmp-h{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:8px}
.cmp-h h2{margin:0; font-size:20px; font-weight:800}
.tablebox{overflow-x:auto; border:1px solid var(--line); border-radius:12px; background:var(--panel)}
.tablebox table{width:100%; border-collapse:collapse; font-size:14px; min-width:560px}
.tablebox th, .tablebox td{padding:10px 14px; border-bottom:1px solid var(--line); text-align:left; white-space:nowrap}
.tablebox tbody tr:last-child th, .tablebox tbody tr:last-child td{border-bottom:0}
.tablebox th{text-transform:none; letter-spacing:0; font-size:14px}
.tablebox thead th{font-weight:800; color:var(--ink)} .tablebox thead a{color:inherit; text-decoration:none} .tablebox thead a:hover{text-decoration:underline}
.tablebox tbody th{font-weight:500; color:var(--ink-2)}
.tablebox td.diff{font-weight:800; background:var(--accent-soft)}
/* the editor: where the design sits, its switcher, the save state, the Bed card */
.design .crumb{max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; font-weight:600; color:var(--ink-2); text-decoration:none}
.design .crumb:hover{color:var(--ink); text-decoration:underline}
.crumbsep{color:var(--line-2)}
/* the Save button (one piece with its menu arrow): Saved (quiet), Save in the accent when changes wait (auto save off) */
.savegrp{display:flex; align-items:stretch; height:34px; border:1px solid var(--line); border-radius:6px; background:var(--raise); overflow:hidden}
.savebtn, .savemore{border:0; background:transparent; color:var(--ink-2); cursor:pointer; padding:0}
.savebtn{display:flex; align-items:center; padding:0 10px}
.savemore{display:grid; place-items:center; width:26px; border-left:1px solid var(--line)}
.savebtn:hover, .savemore:hover, .savemore[aria-expanded="true"]{background:color-mix(in srgb, var(--ink) 6%, transparent); color:var(--ink)}
.savestate{display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:650; white-space:nowrap; min-width:52px}
.savestate .ico{width:14px; height:14px; color:var(--ok)}
.savestate[data-state="error"]{color:var(--bad); font-weight:800}
.savegrp:has(.savebtn[data-state="dirty"]){border-color:var(--accent)}
.savebtn[data-state="dirty"]{background:var(--accent); color:var(--accent-ink)}
.savebtn[data-state="dirty"]:hover{background:var(--accent); filter:brightness(1.06); color:var(--accent-ink)}
.savebtn[data-state="dirty"] .savestate{font-weight:800}
.savegrp:has(.savebtn[data-state="dirty"]) .savemore{background:var(--accent); color:var(--accent-ink); border-left-color:rgba(255,255,255,.4)}
.savegrp:has(.savebtn[data-state="dirty"]) .savemore:hover{filter:brightness(1.06)}
.udot{width:7px; height:7px; border-radius:50%; background:currentColor}
.savepop .popbody{min-width:280px}
.swrow{display:flex; align-items:center; justify-content:space-between; gap:14px; cursor:pointer}
.swrow > span{display:grid; gap:1px}
.menuitem:disabled{opacity:.45; cursor:default; background:transparent}
.utag{display:inline-block; margin-left:6px; padding:1px 7px; border-radius:9px; font-size:11px; font-weight:700; color:var(--accent); background:var(--accent-soft); vertical-align:1px}
.dlg-a .btn[data-dlg="extra"]{margin-right:auto}
.designlist .menuitem{text-decoration:none; color:inherit}
.designlist .menuitem[aria-current="true"]{background:var(--accent-soft)}
.menuitem.danger b{color:var(--bad)}
.bedcard{display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:4px 10px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--paper)}
.bedcard svg{width:44px; height:14px; fill:none; stroke:var(--frame); stroke-width:2.4}
.bedcard b{font-size:13px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bedcard small{grid-column:1 / -1; font-size:12px; color:var(--ink-2)}
.bc-lock{color:var(--ink-2); display:inline-grid}
.bc-lock .ico{width:16px; height:16px}
/* menus, dialogs, the toast's button */
.floatmenu{position:fixed; z-index:60; min-width:230px; max-width:min(320px, 92vw)}
.dlg{border:0; border-radius:16px; padding:0; width:min(560px, calc(100vw - 24px)); max-height:calc(100vh - 32px); background:var(--panel); color:var(--ink); box-shadow:0 20px 60px rgba(0,0,0,.3)}
.dlg::backdrop{background:rgba(14,15,16,.45)}
.dlg-f{display:flex; flex-direction:column; gap:16px; padding:22px}
.dlg-f h2{margin:0; font-size:19px; font-weight:800}
.dlg-b{display:flex; flex-direction:column; gap:14px}
.dlg-b .lab{display:flex; flex-direction:column; gap:6px}
.dlg-b .sel{height:44px; border-radius:8px; border-color:var(--line-2); font-weight:600}
.dlg-a{display:flex; justify-content:flex-end; gap:10px; padding-top:4px}
.tlist{display:flex; flex-direction:column; gap:6px}
.trow{display:flex; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; cursor:pointer}
.trow:has(input:checked){border-color:var(--accent); background:var(--accent-soft)}
.trow input[type=radio]{accent-color:var(--accent); width:18px; height:18px; margin:0}
.trow > span{display:flex; flex-direction:column; gap:6px; flex:1; min-width:0}
.trow small{color:var(--ink-2)}
.toast.act{display:flex; align-items:center; gap:14px} .toast.act.on{pointer-events:auto}
#toastAct{border:0; background:transparent; color:var(--accent); font:inherit; font-weight:800; cursor:pointer; padding:4px 2px; text-decoration:underline; text-underline-offset:3px}
@media (max-width:900px){
  .wizside{position:static}
  .design .crumb, .crumbsep{display:none}
  .panel .design .savepop{order:3}
}
@media (max-width:600px){
  .ptop{padding:8px 12px}
  .ptop .brand .appname{display:none}
  .psearch{order:5; flex-basis:100%; max-width:none}
  .pacts .btn:not(.primary){padding:0 10px}
  .pmain{padding:20px 14px 48px}
  .ph-title h1, .ptitle-in, .wiz-h h1{font-size:24px}
  .pgrid, .dgrid{grid-template-columns:1fr}
  /* (the new project / new design card: one compact row on a phone, the button in the top bar does the same) */
  .pcard.new, .dcard.new{display:grid; grid-template-columns:auto 1fr; justify-items:start; align-items:center; gap:0 14px; min-height:0; padding:14px 16px; text-align:left}
  .pcard.new .ico, .dcard.new .ico{grid-row:span 2}
  .tgrid, .tgrid.three, .fgrid, .hbgrid{grid-template-columns:1fr}
  .tgrid.three.tight, .tgrid.tight{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .steps3{margin:0; width:100%} .steps3 .l{display:none} .steps3 li.cur .l{display:inline}
  .crumbs{border-left:0; padding-left:0}
  .hide-s{display:none}
  .ph-tools .btn.primary{order:-1}      /* (the main action first on a phone, the three on one row) */
  .dlg-f{padding:18px}
  .pcontinue{flex-wrap:wrap}
}
a.btn{text-decoration:none; color:var(--ink)} a.btn.primary{color:var(--accent-ink)} a.btn.dark{color:var(--panel)}

/* (owner, 2026-10-17: "I don't feel that is draggable, make it more convenient and easy"): the chips with a grip that lift on
   hover; dragging, a card follows the pointer, every other box is outlined and the one under the pointer filled with its
   weight with the parts; a new box always at the end */
.pbv .bx-sec{display:grid; gap:0; -webkit-user-select:none; user-select:none}
.bx-part, .bx-all{-webkit-user-select:none; user-select:none; -webkit-touch-callout:none}
.bx-all{cursor:grab} .bx-all:active{cursor:grabbing}
body.bx-grabbing, body.bx-grabbing *{cursor:grabbing !important}
.bx-ghost{position:fixed; left:0; top:0; z-index:200; display:grid; gap:4px; padding:8px 10px; border:1.5px solid var(--accent); border-radius:10px; background:var(--panel); color:var(--ink); box-shadow:0 14px 34px rgba(0,0,0,.28); font-size:12px; font-weight:700; pointer-events:none; rotate:-2deg}
.bx-gchip{display:inline-flex; align-items:center; gap:6px} .bx-gchip b{display:inline-grid; place-items:center; min-width:19px; height:19px; padding:0 5px; border-radius:10px; background:var(--accent); color:#fff; font-size:10.5px; font-weight:800} .bx-gchip small{color:var(--accent); font-weight:800}
.bx-gmore{font-size:11.5px; color:var(--ink-2)} .bx-gkg{font-size:11.5px; color:var(--accent)}
.bx-part.lifted{opacity:.3; transform:none; box-shadow:none}
.bx-dragging .bx:not(.from), .bx-dragging .bx-new{border-color:var(--accent-line); box-shadow:0 0 0 1px var(--accent-line)}
.bx-dragging .bx.from{opacity:.55}
.bx-dragging .bx.drop, .bx-dragging .bx-new.drop{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent); background:var(--accent-soft)}
.bx-dragging .bx.drop .bx-pic{background:transparent}
.bx-proj{font-style:normal; font-size:12.5px; font-weight:800; color:var(--accent)} .bx-proj.over{color:var(--bad)}
.bx-new{display:grid; place-items:center; align-content:center; gap:4px; min-height:118px; padding:16px; border:2px dashed var(--line-2); border-radius:var(--r); background:transparent; color:var(--ink-2); font:inherit; cursor:pointer; transition:border-color .12s, background .12s, box-shadow .12s}
.bx-new:hover{border-color:var(--accent); color:var(--ink)}
.bx-new b{font-size:14px; font-weight:800; color:var(--ink)} .bx-new small{font-size:12px}
.bx-newi{display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--paper); color:var(--accent)} .bx-newi svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round}
@keyframes bxflash{0%, 35%{background:var(--accent-soft); box-shadow:inset 0 0 0 1.5px var(--accent)} 100%{box-shadow:inset 0 0 0 0 transparent}}
.bx-part.flash{animation:bxflash 1.6s ease-out}
.bx-lead{display:flex; align-items:flex-start; gap:8px; margin:0 0 12px; font-size:12.5px; line-height:1.5; color:var(--ink-2); transition:opacity .15s} .bx-lead b{color:var(--ink)} .bx-lead.dim{opacity:.45}
.bx-lead svg{flex:none; width:16px; height:16px; margin-top:2px; fill:none; stroke:var(--accent); stroke-width:3; stroke-linecap:round}
@keyframes bxbarin{from{transform:translateY(12px); opacity:0}}
.bx-bar:not([hidden]){animation:bxbarin .16s ease-out}
.pb-add{justify-self:start; height:32px; gap:6px; font-size:12.5px}
/* (owner, 2026-10-17: "the settings should be inside the tab design, more convenient"; asked: a tab for each step): Parts |
   Pack | Order | Print, each page its settings in a card on top (.pb-ctl, sliders with their value beside the name), then
   what they change: the part cards, the boxes, the tables to order, the design and the labels (.pb-card) */
.pbv{gap:18px}
.pbv > *{min-width:0}
.pb-tabs{overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch} .pb-tabs::-webkit-scrollbar{display:none} .pb-tabs button{flex:none}
.pb-ctl{display:grid; gap:12px; padding:14px 16px; border:1px solid var(--line); border-radius:var(--r); background:var(--panel)}
.pb-row{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px}
.pb-tl{display:flex; align-items:baseline; gap:8px; font-size:12.5px; font-weight:700; color:var(--ink)} .pb-tl .v3val{margin-left:auto; font-weight:800}
/* (Pack's settings: one compact row, each its name, its box and a line that says what it does) */
.pb-set{grid-template-columns:repeat(auto-fit, minmax(110px, 1fr)); gap:14px 16px; align-items:start}
.pb-f{display:grid; gap:5px; min-width:0}
.pb-fl{font-size:12.5px; font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pb-f .num, .pb-f .sel{height:34px} .pb-f .sel{font-weight:600}
.pb-fh{font-size:11.5px; line-height:1.35; color:var(--ink-2)} .pb-fh .linkbtn{font-size:11.5px}
.pb-figline{font-size:12.5px; color:var(--ink-2)} .pb-figline b{color:var(--ink)}
.pb-row > .pb-figline{flex:1 1 320px; line-height:1.5} .pb-row > .pb-oacts{flex:0 1 auto; min-width:0}
.pbv .bx-head{display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:4px 16px; margin:0} .pbv .bx-head > :not(.bx-show){grid-column:1}
/* (Inside | Outside over the boxes: a small segmented control, as the small tabs, since it changes the view, not the bed) */
.bx-show{grid-column:2; grid-row:1 / span 2; align-self:center; display:inline-flex; gap:2px; padding:3px; border-radius:9px; background:var(--track)}
.bx-show button{height:28px; padding:0 12px; border:0; border-radius:6px; background:none; color:var(--ink-2); font:inherit; font-size:12.5px; font-weight:650; cursor:pointer; white-space:nowrap}
.bx-show button:hover{color:var(--ink)} .bx-show [aria-checked="true"]{background:var(--thumb); color:var(--ink); font-weight:700; box-shadow:0 1px 2px rgba(0,0,0,.12)}
.pbv .bx-head .bx-lead{margin:0}
.pb-modes{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; max-width:640px}
.pb-modes button{display:grid; align-content:start; gap:3px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--raise); color:var(--ink); font:inherit; text-align:left; cursor:pointer}
.pb-modes b{font-size:13.5px; font-weight:800} .pb-modes small{font-size:12px; color:var(--ink-2); line-height:1.35}
.pb-modes button:hover{border-color:var(--line-2)} .pb-modes [aria-checked="true"]{border-color:var(--accent); background:var(--accent-soft); box-shadow:0 0 0 1px var(--accent)} .pb-modes [aria-checked="true"] b{color:var(--accent)}
.pb-card{display:grid; gap:12px; padding:16px; border:1px solid var(--line); border-radius:var(--r); background:var(--panel)}
.pb-chead{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px} .pb-chead h2{margin:0} .pb-chead > span{font-size:12.5px; color:var(--ink-2)} .pb-chead .pb-oacts{margin-left:auto}
.pb-tblw{overflow-x:auto}
.pb-tbl{width:100%; border-collapse:collapse; font-size:13px}
.pb-tbl th{padding:6px 10px; border-bottom:1px solid var(--line); font-size:11.5px; font-weight:700; color:var(--ink-2); text-align:left; white-space:nowrap}
.pb-tbl td{padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:middle} .pb-tbl td:first-child{white-space:nowrap}
.pb-tbl tfoot td{border-bottom:0; font-weight:700}
.pb-tbl .r{text-align:right} .pb-tbl td.r b{font-size:15px}
.pb-tbl tr.warn td{background:color-mix(in srgb, var(--warn) 9%, transparent)}
.pb-tbl .bx-lt{min-width:22px; height:22px}
.pb-stbl td{padding:6px 8px} .pb-stbl .pb-szin{width:86px}
.pb-stbl .bx-use{font-size:12px; color:var(--ink-2)} .pb-stbl .bx-use b{color:var(--accent)}
.bx-srow.idle .bx-lt{background:var(--line-2)} .bx-srow.idle .bx-use{font-style:italic}
.pb-tbl select.bx-pick{height:32px; min-width:180px; font-size:12.5px}
.pb-mtm{display:inline-block; padding:1px 7px; border-radius:5px; background:color-mix(in srgb, var(--warn) 16%, var(--panel)); color:var(--warn); font-size:11.5px; font-weight:700; white-space:nowrap}
.pb-oacts{display:flex; flex-wrap:wrap; gap:8px} .pb-oacts .btn{gap:6px}
.pb-none{display:grid; gap:2px; padding:9px 12px; border-radius:8px; background:color-mix(in srgb, var(--warn) 12%, var(--panel)); font-size:12.5px} .pb-none b{color:var(--warn)} .pb-none span{color:var(--ink-2)} .pb-none .linkbtn{justify-self:start; font-size:12.5px}
.pb-szin{width:100%; min-width:0; height:32px; padding:0 6px; border:1px solid var(--line); border-radius:6px; background:var(--raise); color:var(--ink); font:inherit; font-size:13px; text-align:center; -moz-appearance:textfield}
.pb-szin::-webkit-inner-spin-button, .pb-szin::-webkit-outer-spin-button{-webkit-appearance:none; margin:0}
.bx-del{width:30px; height:30px; color:var(--ink-2)} .bx-del:hover{color:var(--bad); border-color:var(--bad)}
.pb-design .art-acts{padding-top:4px}
.pbv .bl-prev{height:min(78vh, 900px)}
@media (max-width:600px){ .pbv .bx-head{grid-template-columns:minmax(0, 1fr)} .bx-show{grid-column:1; grid-row:auto; order:3; justify-self:start; margin-top:4px} .pb-set{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px 14px} .pb-set .pb-f:first-child{grid-column:1 / -1} .subtabs{display:flex} .subtabs button{flex:1 0 auto; padding:0 7px; font-size:12px} .pb-ctl, .pb-card{padding:12px} .pb-modes{grid-template-columns:minmax(0, 1fr)} .pb-tbl th, .pb-tbl td{padding:7px 6px; font-size:12.5px} .pb-tbl .hide-s{display:none} .pb-tbl select.bx-pick{min-width:0; width:100%} }
/* (the Assembly tab of Parts & boxes, owner 2026-10-17: "a single page only, not a step by step view, like an assembly
   document"): the guide as a sheet of paper, white in both themes, every step two across: its picture, a numbered title, its
   words and the parts it adds; one across on a phone */
.ad, .ad-bar{max-width:1100px}
.ad{display:grid; gap:28px; padding:40px 44px 28px; border:1px solid var(--line); border-radius:var(--r); background:#fff; color:#1e2123; box-shadow:0 2px 12px rgba(0,0,0,.06)}
.ad-h{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:10px 24px; padding-bottom:18px; border-bottom:3px solid #1e2123}
.ad-brand{display:grid; justify-items:start; gap:7px} .ad-brand small{font-size:11px; font-weight:600; color:#62696d}
.ad-lock{display:inline-grid; justify-items:center; line-height:1} .ad-lock img{display:block; height:32px; width:auto} .ad-lock span{margin:4px -.62em 0 0; font-size:9px; font-weight:700; letter-spacing:.62em; color:#fc6c01}
.ad-t{text-align:right} .ad-t h2{margin:0; font-size:22px; font-weight:800; color:#1e2123} .ad-t p{margin:4px 0 0; font-size:12.5px; color:#62696d}
.ad-steps{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:40px; margin:0; padding:0; list-style:none}
.ad-step{display:grid; gap:14px; align-content:start}
.ad-pic{display:grid; place-items:center; aspect-ratio:520 / 300; border-radius:10px; background:#f2f3f1; overflow:hidden}
.ad-pic img{width:100%; height:100%; object-fit:contain; display:block}
.ad-pic.ad-none{aspect-ratio:auto; min-height:0; height:8px; background:none}
.ad-wide{grid-column:1 / -1; container-type:inline-size}
.ad-kit{--kc:var(--k2, 2); display:grid; grid-template-columns:repeat(var(--kc), minmax(0, 1fr)); gap:10px; padding:12px; border-radius:10px; background:#f2f3f1; --ink:#1e2123; --panel:#fff; --cut:#1e2123}
.ad-pt{display:grid; grid-template-rows:auto 1fr; container-type:inline-size; margin:0; border-radius:8px; background:#fff; overflow:hidden}
.ad-pt-art{display:grid; height:clamp(72px, 33cqw, 104px); padding:11px 14px} .ad-pt-art svg{width:100%; height:100%}
.ad-pt figcaption{display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:8px; padding:8px 10px 9px; border-top:1px solid #eceeec; font-size:12.5px; font-weight:600; line-height:1.3}
.ad-pt figcaption span{overflow-wrap:anywhere; text-wrap:balance} .ad-pt small{padding:2px 7px; border-radius:6px; background:#f2f3f1; font-size:11.5px; font-weight:800; white-space:nowrap}
.ad-pt b, .ad-parts b{display:inline-grid; place-items:center; min-width:19px; height:19px; padding:0 5px; border-radius:10px; background:#1e2123; color:#fff; font-size:10.5px; font-weight:800}
.ad-pt b{min-width:20px; height:20px}
.ad-w{padding-left:40px} .ad-w h3{display:flex; align-items:center; gap:12px; margin:0 0 8px -40px; font-size:16px; font-weight:800; color:#1e2123}
.ad-w h3 i{flex:none; display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:#fc6c01; color:#fff; font-size:14px; font-style:normal}
.ad-w p{margin:0; font-size:13.5px; line-height:1.55; color:#1e2123}
.ad-parts{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px !important}
.ad-parts span{display:inline-flex; align-items:center; gap:5px; padding:2px 9px 2px 3px; border:1px solid #dfe2e0; border-radius:999px; font-size:12px; font-weight:600}
.ad-f{display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 16px; padding-top:14px; border-top:1px solid #dfe2e0; font-size:11.5px; color:#62696d}
@media (max-width:760px){ .ad{gap:22px; padding:24px 18px 18px} .ad-steps{grid-template-columns:minmax(0, 1fr); gap:30px} .ad-t{text-align:left} }
@media (max-width:600px){ .ad-bar .pb-oacts{flex:1 1 100%} .ad-bar .pb-oacts .btn{flex:1 1 0; justify-content:center} .ad-dl{display:none} }
/* (as many cards a row as fit at 165 px, the rows even: kitVars() in app.js) */
@container (min-width:539px){ .ad-kit{--kc:var(--k3, 3)} }
@container (min-width:714px){ .ad-kit{--kc:var(--k4, 4)} }
@container (min-width:889px){ .ad-kit{--kc:var(--k5, 5)} }
@container (min-width:1064px){ .ad-kit{--kc:var(--k6, 6)} }
@media (max-width:480px){ .ad-kit{gap:8px; padding:10px} .ad-w{padding-left:0} .ad-w h3{margin-left:0} }
/* the plywood's face look as swatches (owner 2026-10-18), three across; the chosen one ringed in the accent */
.swatches{flex:1; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px}
.swatch{display:flex; align-items:center; gap:7px; height:34px; padding:0 8px 0 5px; border:1px solid var(--line); border-radius:6px; background:var(--raise); color:var(--ink); font:600 12px Montserrat, sans-serif; cursor:pointer; min-width:0}
.swatch span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.swatch:hover{border-color:var(--line-2)}
.swatch[aria-checked="true"]{border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent)}
.swatch i{flex:none; width:22px; height:22px; border-radius:4px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.18); background-size:cover; background-position:center}
.sw-birch{background:repeating-linear-gradient(172deg, transparent 0 4px, rgba(120,82,40,.16) 4px 5px), #e4cba0}
.sw-oak{background:repeating-linear-gradient(172deg, transparent 0 3px, rgba(92,58,26,.28) 3px 4.5px), #c99d66}
.sw-walnut{background:repeating-linear-gradient(172deg, transparent 0 3px, rgba(20,10,4,.35) 3px 4.5px), #6f4d34}
.sw-white{background:#f0eee9}
.sw-black{background:#2a2b2d}
.sw-own{background:var(--paper) no-repeat center / cover; box-shadow:inset 0 0 0 1px var(--line-2) !important; position:relative}
.sw-own:not(.has)::after{content:"+"; position:absolute; inset:0; display:grid; place-items:center; color:var(--ink-2); font:600 15px Montserrat, sans-serif}
/* the plywood's colour (owner 2026-10-18): round chips in a row, the last your own (a colour wheel, your colour in its middle) */
.row.colorrow{grid-template-columns:minmax(0,1fr) 18px}
.row.colorrow .pcols{grid-column:1 / -1; grid-row:2; display:flex; flex-wrap:wrap; gap:7px; margin-top:4px}
.pcol{position:relative; width:24px; height:24px; padding:0; border:0; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.2); cursor:pointer}
.pcol[aria-checked="true"], .pcol.pick.on{box-shadow:0 0 0 2px var(--panel), 0 0 0 4px var(--accent)}
.pcol.pick{background:conic-gradient(#e33, #fc0, #3c3, #0bd, #36f, #c3c, #e33); overflow:hidden}
.pcol.pick::after{content:""; position:absolute; inset:6px; border-radius:50%; background:var(--pc, transparent); pointer-events:none}
.pcol.pick input{position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; border:0; padding:0}
.pcol:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.sw-color{background:#8a9a7b}

/* ---- Products (owner, 2026-10-20): Projects | Products in the pages' header; the products, resellers and strategy */
.subtabs a{height:32px; display:inline-flex; align-items:center; padding:0 16px; border-radius:7px; color:var(--ink-2); font-weight:650; font-size:13px; text-decoration:none; white-space:nowrap}
.subtabs a:hover{color:var(--ink)}
.subtabs a[aria-selected="true"]{background:var(--thumb); color:var(--ink); font-weight:700; box-shadow:0 1px 2px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.04)}
.sales .pmain{gap:18px}
.sl-tabs{overflow-x:auto; scrollbar-width:none}
.sl-body{display:flex; flex-direction:column; gap:18px; min-width:0}
.sl-card{display:flex; flex-direction:column; gap:12px; padding:16px; border:1px solid var(--line); border-radius:12px; background:var(--panel); min-width:0}
.sl-ch{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px}
.sl-ch h2{margin:0; font-size:17px; font-weight:800} .sl-ch > span{font-size:12.5px; color:var(--ink-2); max-width:80ch}
.sl-acts{display:flex; flex-wrap:wrap; gap:8px; margin-left:auto}
.pempty .sl-acts{margin:0; justify-content:center}
.sl-tools{display:flex; flex-wrap:wrap; align-items:center; gap:10px}
.sl-search{flex:0 1 280px; margin:0; background:var(--panel)}
.sl-tbl{min-width:640px}
.tablebox .sl-tbl th, .tablebox .sl-tbl td{padding:9px 12px; vertical-align:middle}
.sl-tbl thead th{font-size:12.5px} .sl-tbl thead small{font-weight:600; color:var(--ink-2)}
.sl-tbl .r{text-align:right} .sl-tbl td small{display:block; font-size:11.5px; color:var(--ink-2)}
.sl-tbl td.sl-wrap{white-space:normal; min-width:160px; font-size:12.5px; color:var(--ink-2)}
.sl-open{display:grid; gap:2px; padding:0; border:0; background:none; font:inherit; color:var(--ink); text-align:left; cursor:pointer}
.sl-open b{font-weight:750} .sl-open small{font-size:11.5px; color:var(--ink-2); font-weight:500}
.sl-open:hover b{text-decoration:underline; text-underline-offset:3px}
.sl-dim > *{opacity:.62}
.sl-m{display:inline-block; min-width:38px; padding:2px 6px; border-radius:6px; font-size:12px; font-weight:800; text-align:center; background:var(--track); color:var(--ink-2)}
.sl-m.ok{color:var(--ok); background:color-mix(in srgb, var(--ok) 12%, transparent)}
.sl-m.warn{color:var(--warn); background:color-mix(in srgb, var(--warn) 14%, transparent)}
.sl-m.bad{color:var(--bad); background:color-mix(in srgb, var(--bad) 12%, transparent)}
.sl-miss{font-size:12px; color:var(--warn); font-weight:600}
.tin.sm{height:32px; padding:0 8px; font-size:13px; border-radius:6px; width:100%; min-width:90px}
.sl-tbl .num{min-width:84px}
.sl-rules{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px}
.sl-rules .lab small{font-size:11.5px} .sl-rules .num{max-width:180px}
.sl-rules .mini-seg{display:flex; flex-wrap:wrap}
.sl-words{margin:0; padding-left:18px; display:grid; gap:8px; font-size:14px; line-height:1.5; max-width:92ch}
.sl-checks{margin:0; padding:0; list-style:none; display:grid; gap:8px; font-size:13.5px; line-height:1.45}
.sl-checks li{display:grid; grid-template-columns:auto minmax(0, 1fr); gap:10px; align-items:start}
.sl-advice{margin:0; padding-left:20px; display:grid; gap:10px; font-size:13.5px; line-height:1.5; max-width:92ch}
.sl-advice b{display:block; font-weight:800} .sl-advice span{color:var(--ink-2)}
.sl-sell{display:grid; gap:6px; padding:10px 0; border-top:1px solid var(--line)} .sl-sell:first-of-type{border-top:0; padding-top:0}
.sl-sell small{color:var(--ink-2)}
.sl-sellf{display:flex; flex-wrap:wrap; gap:6px 16px; font-size:13px; color:var(--ink-2)} .sl-sellf b{color:var(--ink)}
/* the dialogs: a little wider, the fields scroll between the title and the buttons */
.dlg.sl-dlg{width:min(640px, calc(100vw - 24px))}
.dlg.sl-dlg .dlg-f{max-height:calc(100vh - 32px)} .dlg.sl-dlg .dlg-b{flex:1 1 auto; min-height:0; overflow:auto; margin:0 -6px; padding:0 6px}
.sl-form{display:flex; flex-direction:column; gap:14px}
.sl-form .grid2{margin:0; gap:12px}
.sl-form .lab > span small, .sl-hint{font-weight:500; color:var(--ink-2); font-size:12px}
.sl-form .num{height:44px; border-radius:8px; border-color:var(--line-2)}
.sl-seg{display:flex; flex-wrap:wrap; border:1.5px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--raise)}
.sl-seg label{flex:1 1 auto; position:relative; display:flex}
.sl-seg input{position:absolute; opacity:0; pointer-events:none}
.sl-seg span{flex:1; display:grid; place-items:center; min-height:36px; padding:0 10px; border-left:1px solid var(--line); font-weight:700; font-size:13px; color:var(--ink); cursor:pointer; white-space:nowrap}
.sl-seg label:first-child span{border-left:0}
.sl-seg input:checked + span{background:var(--accent); color:var(--accent-ink)}
.sl-seg input:focus-visible + span{outline:2px solid var(--accent); outline-offset:-3px}
.sl-note{height:auto; padding:10px 12px; font:inherit; font-weight:500; resize:vertical}
.sl-extra{display:grid; gap:6px}
.sl-xrow{display:grid; grid-template-columns:minmax(0, 1fr) 140px auto; gap:6px; align-items:center}
.sl-xrow .tin, .sl-xrow .num{height:38px}
.sl-addx{align-self:flex-start; justify-self:start; font-size:13px}
.sl-live{display:grid; gap:8px; padding:12px 14px; border-radius:10px; background:var(--paper); border:1px solid var(--line)}
.sl-lrow{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; font-size:13px}
.sl-lrow > span:first-child{color:var(--ink-2); min-width:130px} .sl-lrow > b{font-size:17px} .sl-lrow small{color:var(--ink-2); flex-basis:100%}
.sl-mini{width:100%; border-collapse:collapse; font-size:12.5px}
.sl-mini th{font-size:11.5px; color:var(--ink-2); font-weight:700; text-align:left; padding:4px 6px; border-bottom:1px solid var(--line)}
.sl-mini td{padding:5px 6px; border-bottom:1px solid var(--line)} .sl-mini tr:last-child td{border-bottom:0}
.sl-mini .r{text-align:right} .sl-mini small{color:var(--ink-2)}
.sl-picks{display:grid; gap:12px}
.sl-picks fieldset{margin:0; padding:0; border:0; display:grid; gap:4px}
.sl-picks legend{font-weight:800; font-size:13px; margin-bottom:4px}
.sl-pick{display:grid; grid-template-columns:auto minmax(0, 1fr); gap:0 10px; align-items:center; padding:8px 10px; border:1px solid var(--line); border-radius:8px; cursor:pointer}
.sl-pick input{grid-row:span 2; width:18px; height:18px; accent-color:var(--accent)}
.sl-pick span{font-weight:700; font-size:13.5px} .sl-pick small{color:var(--ink-2); font-size:12px}
.sl-pick:has(input:checked){border-color:var(--accent); background:var(--accent-soft)}
/* bundles as cards; promotions by when they run; the price check */
.sl-ideas{margin:0; padding-left:18px; text-align:left; display:grid; gap:4px; color:var(--ink-2); font-size:13.5px}
.sl-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(290px, 1fr)); gap:14px}
.sl-bcard{display:flex; flex-direction:column; gap:10px; padding:14px; border:1px solid var(--line); border-radius:12px; background:var(--panel); min-width:0}
.sl-bcard.sl-dim > *{opacity:1} .sl-bcard.sl-dim{background:transparent}
.sl-bh{display:flex; align-items:flex-start; justify-content:space-between; gap:8px}
.sl-items{margin:0; padding:0; list-style:none; display:grid; gap:3px; font-size:13px}
.sl-items li{display:flex; gap:6px} .sl-items li > span{color:var(--ink-2); min-width:28px}
.sl-bfig{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; padding-top:8px; border-top:1px solid var(--line); font-size:12.5px; color:var(--ink-2)}
.sl-bfig b{font-size:17px; color:var(--ink)} .sl-bfig s{color:var(--ink-2)}
.sl-save{color:var(--ok); font-weight:700}
.sl-btiers{display:flex; flex-wrap:wrap; gap:4px 12px; font-size:12px; color:var(--ink-2)}
.sl-pgroup{display:flex; flex-direction:column; gap:8px}
.sl-pgroup h3{margin:4px 0 0; font-size:14px; font-weight:800} .sl-pgroup h3 span{color:var(--ink-2); font-weight:600}
.sl-prow{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 16px; padding:12px 14px; border:1px solid var(--line); border-radius:10px; background:var(--panel)}
.sl-prow .sl-open{flex:1 1 320px; min-width:0}
.sl-pmeta{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; font-size:12.5px}
.sl-code{font-family:ui-monospace, Menlo, monospace; font-weight:700; font-size:12px; padding:3px 8px; border:1px dashed var(--line-2); border-radius:6px}
.sl-worst{display:inline-flex; align-items:center; gap:6px; color:var(--ink-2)} .sl-worst small{font-size:11.5px}
.sl-brow{grid-template-columns:minmax(0, 1fr) 110px auto}
.sl-brow .sel, .sl-xrow .sel{height:38px; border-radius:8px}
.sl-step{grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) auto}
.sl-free{display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:13px; font-weight:600}
.sl-free .num{width:auto; min-width:150px} .sl-free .sel{flex:1 1 200px; width:auto; height:44px}
.sl-on{display:grid; gap:8px; max-height:220px; overflow:auto; padding:10px; border:1px solid var(--line); border-radius:8px}
.sl-on > div{display:flex; flex-wrap:wrap; gap:6px} .sl-on > div + div{padding-top:8px; border-top:1px solid var(--line)}
.sl-chk{position:relative; display:inline-flex}
.sl-chk input{position:absolute; opacity:0; pointer-events:none}
.sl-chk span{padding:5px 10px; border:1px solid var(--line); border-radius:14px; font-size:12.5px; font-weight:650; cursor:pointer; background:var(--raise)}
.sl-chk input:checked + span{border-color:var(--accent); background:var(--accent-soft); color:var(--ink)}
.sl-chk input:focus-visible + span{outline:2px solid var(--accent); outline-offset:1px}
.sl-ckhead{display:grid; grid-template-columns:minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap:12px}
.sl-ckhead .sel, .sl-ckhead .tin{height:38px}
.sl-acts.sl-left{margin-left:0}
.sl-freer th, .sl-freer td{color:var(--ok)}
/* the products: the list beside the chosen one (owner, 2026-10-20: "should not be on modal", "thumbnail also required") */
.sl-th{display:block; flex:none; width:56px; height:40px; border-radius:6px; object-fit:contain; background:var(--paper); border:1px solid var(--line)}
img.sl-th:not([src]){background:linear-gradient(90deg, var(--paper), var(--track), var(--paper)); background-size:200% 100%; animation:slshim 1.2s linear infinite}
@keyframes slshim{to{background-position:-200% 0}}
.sl-th.xs{width:40px; height:28px} .sl-th.sm{width:56px; height:40px} .sl-th.lg{width:220px; height:150px; border-radius:10px}
.sl-thk{display:grid; place-items:center; color:var(--ink-2)} .sl-thk svg{width:46%; height:60%; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.sl-tname{display:flex; align-items:center; gap:10px}
.sl-rows tbody tr{cursor:pointer} .sl-rows tbody tr:hover > *{background:var(--paper)}
.sl-view{flex:none}
.sl-split{display:grid; grid-template-columns:minmax(270px, 340px) minmax(0, 1fr); gap:16px; align-items:start}
.sl-list{position:sticky; top:calc(var(--top) + 12px); max-height:calc(100vh - var(--top) - 24px); overflow:auto; display:flex; flex-direction:column; gap:2px; padding:6px; border:1px solid var(--line); border-radius:12px; background:var(--panel)}
.sl-list .pnone{padding:12px}
.sl-item{display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:10px; padding:7px 8px; border:1px solid transparent; border-radius:9px; background:none; color:var(--ink); font:inherit; text-align:left; cursor:pointer; position:relative}
.sl-item:hover{background:var(--paper)}
.sl-item.on{background:var(--accent-soft); border-color:var(--accent-line)}
.sl-item:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
.sl-it{display:grid; gap:2px; min-width:0} .sl-it b{font-size:13.5px; font-weight:750; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .sl-it small{font-size:11.5px; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sl-iv{display:grid; justify-items:end; gap:3px} .sl-iv b{font-size:13.5px}
.sl-dot{position:absolute; top:8px; left:8px; width:9px; height:9px; border-radius:50%; border:2px solid var(--panel); background:var(--line-2)}
.sl-dot.selling{background:var(--ok)} .sl-dot.paused{background:var(--warn)} .sl-dot.retired{background:var(--bad)}
.sl-detail{display:flex; flex-direction:column; gap:14px; min-width:0}
.sl-pick0{display:grid; gap:6px; place-content:center; text-align:center; min-height:260px; padding:24px; border:2px dashed var(--line-2); border-radius:12px; color:var(--ink-2)} .sl-pick0 b{color:var(--ink); font-size:16px}
.sl-dhead{display:grid; grid-template-columns:auto minmax(0, 1fr); gap:18px; padding:16px; border:1px solid var(--line); border-radius:12px; background:var(--panel)}
.sl-back{display:none; grid-column:1 / -1; justify-self:start}
.sl-photo{display:grid; gap:6px; justify-items:center}
.sl-photoacts{display:flex; flex-wrap:wrap; justify-content:center; gap:4px 12px; font-size:12.5px}
.sl-dmain{display:flex; flex-direction:column; gap:10px; min-width:0}
.sl-dname{width:100%; font:inherit; font-size:22px; font-weight:800; color:var(--ink); padding:4px 8px; margin-left:-9px; border:1px solid transparent; border-radius:8px; background:transparent}
.sl-dname:hover{border-color:var(--line)} .sl-dname:focus{outline:0; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); background:var(--raise)}
.sl-drow{display:flex; flex-wrap:wrap; align-items:flex-start; gap:12px}
.sl-drow .lab .tin{width:160px}
.sl-pseg{display:flex; flex-wrap:wrap}
.sl-dacts{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:auto}
/* the save bar at the foot of one's page (owner, 2026-10-20: "create btn, save btn, update btn"): stays in view while you
   scroll; what it is now on the left (new, unsaved changes, saved), Cancel / Discard and the orange Create / Save on the right */
.sl-savebar{position:sticky; bottom:14px; z-index:6; display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:10px 12px 10px 16px; border:1px solid var(--line); border-radius:12px; background:var(--panel); box-shadow:0 6px 24px rgba(0, 0, 0, .10)}
.sl-savebar[hidden]{display:none}
body:has(.sl-savebar:not([hidden])) .toast{bottom:calc(92px + env(safe-area-inset-bottom, 0px))}
.sb-st{display:inline-flex; align-items:center; gap:8px; margin-right:auto; font-size:13.5px; font-weight:650; color:var(--ink-2)}
.sb-st svg{width:16px; height:16px; color:var(--ok)} .sb-st b{color:var(--ink); font-weight:800}
.sl-savebar.dirty{border-color:color-mix(in srgb, var(--warn) 55%, var(--line))} .sl-savebar.dirty .sb-st{color:var(--ink)}
.sl-savebar.dirty .sb-st i{width:8px; height:8px; border-radius:50%; background:var(--warn)}
.sl-savebar.new{border-color:color-mix(in srgb, var(--accent) 55%, var(--line))}
.sl-savebar .btn[disabled]{opacity:.45; cursor:default}
/* what is kept from a product's creation (a bed's design): shown, with a lock, not a field */
.sl-lock{display:inline-flex; align-items:center; gap:6px; min-height:32px; padding:0 10px; border:1px dashed var(--line-2); border-radius:6px; background:var(--track); font-size:13px; font-weight:650; color:var(--ink)}
.sl-lock svg{width:14px; height:14px; flex:none; color:var(--ink-2)} .sl-lock small{font-weight:500; color:var(--ink-2)}
.sl-dcard .sl-lock{justify-self:start; min-height:38px}
#pages .icon[data-s$="-del"], #pages .icon[data-s="del-tier"]{width:32px; height:32px; border-color:var(--line); background:var(--raise); color:var(--ink-2); font-size:16px; line-height:1}
#pages .icon[data-s$="-del"]:hover, #pages .icon[data-s="del-tier"]:hover{border-color:var(--bad); color:var(--bad)}
/* the page's other actions under More (⋯) */
.sl-dacts .icon.bordered{width:34px; height:34px}
.sl-chg{display:block; margin-top:2px; font-size:12px; font-weight:600; color:var(--warn)} .sl-chg .tbtn{font-size:12px}
.sl-kept{display:flex; align-items:flex-start; gap:6px} .sl-kept svg{width:14px; height:14px; flex:none; margin-top:2px; color:var(--ink-2)}
#pdFigs .kpis{max-width:none}
.sl-dgrid{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; align-items:start}
.sl-dcard h3{margin:0; font-size:14px; font-weight:800}
.sl-dcard .lab > span small{font-weight:500; color:var(--ink-2)}
.sl-dcard .num{height:40px; border-radius:8px}
.sl-wide{grid-column:1 / -1}
.sl-dcol{display:flex; flex-direction:column; gap:14px; min-width:0}
.sl-dch{display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 10px} .sl-dch span{font-size:12.5px; color:var(--ink-2)}
.sl-drow .sel{height:32px; width:190px; font-size:13px; border-radius:6px}
/* a product's cost as a bill: a line each (what, how it is worked out, the amount), your own costs to type, the total */
.sl-bill{display:grid}
.sl-bl{display:grid; grid-template-columns:minmax(0, 1fr) 130px 28px; gap:8px; align-items:center; min-height:44px; padding:5px 0; border-bottom:1px solid var(--line); font-size:13.5px}
.sl-bl > span:not(.num), .sl-bl > label{display:grid; gap:1px; font-weight:650; color:var(--ink)}
.sl-bl small{font-size:12px; color:var(--ink-2); font-weight:500} .sl-bl em{font-style:normal; color:var(--warn); font-weight:600}
.sl-bl > b.r{text-align:right; padding-right:12px; font-weight:750}
.sl-bl .tin, .sl-dcard .sl-bl .num{height:36px}
.sl-bfrom{margin:0; padding:6px 0; font-size:12px; color:var(--ink-2); border-bottom:1px solid var(--line)}
.sl-bfrom a, #pages .note a:not(.btn):not(.tbtn), #pages .sl-hint a{color:var(--accent); font-weight:700; text-decoration:underline; text-underline-offset:3px}
.sl-bill .sl-addx{margin:10px 0}
.sl-btot{border-bottom:0; border-top:2px solid var(--ink); min-height:48px; font-size:15px} .sl-btot > span{font-weight:800}
.sl-btot > b.r{font-size:18px; font-weight:800} .sl-btot .sl-miss{font-size:12px}
.sl-uses{margin:0; padding:0; list-style:none; display:grid; gap:6px; font-size:13px}
.sl-uses li a{display:grid; grid-template-columns:minmax(0, 1fr) auto 18px; gap:4px 10px; align-items:center; padding:8px 10px; border:1px solid var(--line); border-radius:8px; color:var(--ink); text-decoration:none}
.sl-uses li a:hover{border-color:var(--accent)} .sl-uses li a > span{display:grid; min-width:0} .sl-uses b{font-weight:700} .sl-uses small{color:var(--ink-2)}
.sl-uses li a > svg{width:16px; height:16px; color:var(--ink-2)} .sl-uses li a:hover > svg{color:var(--accent)}
.sl-bthumbs{display:flex; gap:6px}
/* orders: the list, the status steps, the items with their figures */
.sl-oitem{grid-template-columns:minmax(0, 1fr) auto}
.fchip small{font-weight:600; color:inherit; opacity:.65}
.sl-ohead{grid-template-columns:minmax(0, 1fr)}
.sl-otitle{display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px} .sl-otitle h2{margin:0; font-size:22px; font-weight:800}
.sl-flow{display:flex; flex-wrap:wrap; gap:4px; margin:0; padding:0; list-style:none}
.sl-flow li{display:flex; align-items:center} .sl-flow li + li::before{content:""; width:14px; height:2px; background:var(--line-2); margin-right:4px}
.sl-flow span.st{display:inline-flex; align-items:center; gap:7px; height:30px; padding:0 4px 0 0; color:var(--ink-2); font-size:12.5px; font-weight:700; cursor:default; white-space:nowrap}
.sl-flow span.st i{display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--track); font-style:normal; font-size:11px}
.sl-flow .done span.st{color:var(--ink)} .sl-flow .done span.st i{background:var(--ok); color:#fff} .sl-flow .done span.st i svg{width:12px; height:12px}
.sl-flow .cur span.st{color:var(--ink); font-weight:800} .sl-flow .cur span.st i{background:var(--accent); color:var(--accent-ink)}
.sl-flow.off span.st{color:var(--ink-2)} .sl-flow.off .cur span.st i, .sl-flow.off .done span.st i{background:var(--track); color:var(--ink-2)}
.sl-next{display:flex; flex-wrap:wrap; align-items:center; gap:8px} .sl-next small{flex-basis:100%; font-size:12px; color:var(--ink-2)}
.sl-olines{display:grid; gap:6px}
.sl-oline{display:grid; grid-template-columns:auto minmax(0, 1.3fr) 96px minmax(0, 1fr) auto; gap:8px; align-items:center}
.sl-oline .sel{height:38px; border-radius:8px} .sl-oline .num{height:38px}
.sl-lf{display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:2px 10px; font-size:12.5px; color:var(--ink-2)} .sl-lf b{color:var(--ink); font-size:14px} .sl-lf small{display:block; color:var(--ok)}
.sl-oextra{display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:13px; color:var(--ink-2)} .sl-oextra .num{width:130px; height:36px}
.sl-osum{margin:0; text-align:right; font-size:13px; color:var(--ink-2)} .sl-osum b{font-size:18px; color:var(--ink)}
.sl-bizg{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px} .sl-bizg .sl-wide{grid-column:span 2}
.dsell{display:flex; flex-wrap:wrap; gap:6px} .dsell .badge{text-decoration:none}
@media (max-width:760px){ .sl-oline{grid-template-columns:auto minmax(0, 1fr) 84px auto} .sl-oline > [id^="olf-"], .sl-oline > [id^="bil-"]{grid-column:2 / -1; grid-row:2} .sl-bizg{grid-template-columns:minmax(0, 1fr)} .sl-bizg .sl-wide{grid-column:auto} }
@media (max-width:1100px){ .sl-dgrid{grid-template-columns:minmax(0, 1fr)} .sl-wide{grid-column:auto} }
@media (max-width:900px){ .sl-body:has(.sl-split.has-sel) > #slKpis, .sl-body:has(.sl-split.has-sel) > .sl-tools{display:none} .sl-split{grid-template-columns:minmax(0, 1fr)} .sl-split.has-sel .sl-list{display:none} .sl-split:not(.has-sel) .sl-detail{display:none} .sl-list{position:static; max-height:none} .sl-back{display:inline-flex} }
@media (max-width:600px){ .sl-dname{font-size:18px} .sl-dhead{grid-template-columns:minmax(0, 1fr)} .sl-th.lg{width:100%; height:auto; aspect-ratio:3 / 2} .sl-drow .lab .tin{width:100%} .sl-drow > *{flex:1 1 100%} }
@media (max-width:760px){ .sl-ckhead{grid-template-columns:minmax(0, 1fr) minmax(0, 1fr)} .sl-ckhead .lab:first-child{grid-column:1 / -1} }
@media (max-width:760px){ .sl-rules{grid-template-columns:minmax(0, 1fr)} .sl-search{flex:1 1 100%} .sl-tools .sl-acts{margin-left:0} }
@media (max-width:600px){ .subtabs a{flex:1 0 auto; padding:0 10px; font-size:12px; justify-content:center} .sl-xrow{grid-template-columns:minmax(0, 1fr) 110px auto} .sl-savebar{bottom:8px; padding:10px} .sl-savebar .btn{flex:1 1 auto} .sb-st{flex-basis:100%} .sl-bl{grid-template-columns:minmax(0, 1fr) 104px 24px} .sl-drow .sel{width:100%} }

/* ---- the shell (owner, 2026-10-20: "Why don't you consider the left tab nav design? ... the best UI/UX design ... the modal and
   color or btn"): a sidebar beside every page but the editor and New project; the sections by job; the open one an
   accent-tinted rectangle with a straight bar, as in the editor's settings rail; on a phone, a menu button slides it in */
.shell{display:grid; grid-template-columns:236px minmax(0, 1fr); min-height:100%}
.side{position:sticky; top:0; height:100vh; display:flex; flex-direction:column; padding:14px 0 10px; background:var(--panel); border-right:1px solid var(--line); overflow-y:auto; z-index:20}
.side-top{padding:2px 18px 14px; border-bottom:1px solid var(--line)} .side-top .brand .appname{display:none}
.side-nav{display:flex; flex-direction:column; flex:1; padding:6px 0}
.side-h{margin:16px 18px 5px; font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2)}
.side-a{position:relative; display:flex; align-items:center; gap:11px; height:38px; padding:0 18px; color:var(--ink); font-size:13.5px; font-weight:600; text-decoration:none}
.side-a:hover{background:var(--paper)}
.side-a[aria-current="page"]{background:var(--accent-soft); font-weight:750}
.side-a[aria-current="page"]::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent)}
.side-a:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
.side-ic{width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; color:var(--ink-2)}
.side-a[aria-current="page"] .side-ic{color:var(--accent)}
.side-a small{margin-left:auto; font-size:11.5px; font-weight:700; color:var(--ink-2)}
/* online: the account line over the sidebar's foot, the sign-in and team dialogs */
.side-acct{padding:8px 10px 0; border-top:1px solid var(--line)}
.side-in, .side-me{display:flex; align-items:center; gap:10px; width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:var(--raise); color:var(--ink); font:inherit; text-align:left; cursor:pointer}
.side-in:hover, .side-me:hover{border-color:var(--line-2); background:var(--paper)}
.side-in svg{flex:none; width:20px; height:20px; fill:none; stroke:var(--accent); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.side-in span, .side-me span:last-child{display:grid; min-width:0} .side-in b, .side-me b{font-size:13px; font-weight:750; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.side-in small, .side-me small{font-size:11.5px; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.side-me .dot{flex:none; margin:0}
.dlg.net-dlg{width:min(440px, calc(100vw - 24px))} .net-dlg .hint{font-size:12px; color:var(--ink-2)}
.net-err{margin:0; padding:8px 10px; border-radius:8px; background:color-mix(in srgb, var(--bad) 12%, transparent); color:var(--bad); font-size:13px; font-weight:600}
.net-alt{display:flex; flex-wrap:wrap; gap:8px}
.net-team{list-style:none; margin:0; padding:0; display:grid; gap:2px} .net-team li{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px solid var(--line)}
.net-team li span{display:grid} .net-team b{font-size:13.5px} .net-team small{font-size:12px; color:var(--ink-2)}
.tbtn.danger:hover{color:var(--bad); border-color:var(--bad)}
.side-foot{display:flex; align-items:center; gap:2px; padding:10px 10px 0; border-top:1px solid var(--line)}
.side-b{display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 8px; border:0; border-radius:6px; background:none; color:var(--ink-2); font:inherit; font-size:12.5px; font-weight:650; cursor:pointer}
.side-b:hover{background:var(--paper); color:var(--ink)} .side-b .ico{width:15px; height:15px} .side-foot .icon{margin-left:auto}
.side-b{white-space:nowrap} .side-b.due{color:var(--warn)} .side-b.due::after{content:""; flex:none; width:7px; height:7px; border-radius:50%; background:var(--warn)} .pfoot b.due{color:var(--warn)}
.shell-main{min-width:0}
.shell .pmain{max-width:1240px}
.shell .sl-list{top:12px; max-height:calc(100vh - 24px)}
.mbar, .side-scrim{display:none}
@media (max-width:900px){
  .shell{grid-template-columns:minmax(0, 1fr)}
  .side{position:fixed; left:0; top:0; bottom:0; width:min(280px, 86vw); height:auto; transform:translateX(-100%); transition:transform .2s ease; box-shadow:0 0 40px rgba(0,0,0,.25)}
  .shell.side-on .side{transform:none}
  .shell.side-on .side-scrim{display:block; position:fixed; inset:0; background:rgba(14,15,16,.4); z-index:15}
  .mbar{display:flex; position:sticky; top:0; z-index:10; align-items:center; gap:8px; height:52px; padding:0 10px; background:var(--panel); border-bottom:1px solid var(--line)} .mbar b{font-size:15px; font-weight:800}
  .shell .sl-list{top:64px}
}
/* buttons: the main action orange (one a page, top right), the others white, Delete in red, small actions as text */
.btn.danger{color:var(--bad)} .btn.danger:hover{border-color:var(--bad); background:color-mix(in srgb, var(--bad) 8%, transparent)}
.tbtn{display:inline-flex; align-items:center; gap:5px; height:30px; padding:0 10px; border:1px solid var(--line-2); border-radius:7px; background:var(--raise); color:var(--ink); font:inherit; font-size:12.5px; font-weight:700; text-decoration:none; cursor:pointer; white-space:nowrap; vertical-align:middle}
.tbtn:hover{border-color:var(--accent); color:var(--accent)} .tbtn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.tbtn .ico, .tbtn svg{width:15px; height:15px; flex:none} .tbtn > svg:last-child:not(:first-child){width:14px; height:14px; margin-right:-3px}
.sl-photoacts .tbtn, .sl-uses .tbtn{margin:0}
/* a status, in the same colour everywhere */
.stc{display:inline-flex; align-items:center; height:22px; padding:0 9px; border-radius:11px; background:var(--track); color:var(--ink-2); font-size:11.5px; font-weight:750; white-space:nowrap}
.stc.ok{background:color-mix(in srgb, var(--ok) 15%, transparent); color:var(--ok)} .stc.info{background:color-mix(in srgb, var(--cut) 14%, transparent); color:var(--cut)}
.stc.warn{background:color-mix(in srgb, var(--warn) 16%, transparent); color:var(--warn)} .stc.bad{background:color-mix(in srgb, var(--bad) 13%, transparent); color:var(--bad)} .stc.muted{background:transparent; border:1px solid var(--line); color:var(--ink-2)}
.dot.info{background:var(--cut)}
/* lists: group headings (promotions by when they run), two pictures for a bundle */
.sl-lh{padding:12px 10px 4px; font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2)} .sl-lh small{font-weight:700; letter-spacing:0}
.sl-bth{display:flex; flex:none} .sl-bth .sl-th + .sl-th{margin-left:-16px; box-shadow:-2px 0 0 var(--panel)}
.sl-iv small{font-size:11px; color:var(--ink-2)}
.sl-lead{margin:0}
.sl-rows tbody tr[data-href]{cursor:pointer}
/* Home */
.dcard2{display:flex; flex-direction:column; gap:12px; padding:16px; border:1px solid var(--line); border-radius:12px; background:var(--panel); min-width:0}
.dc-h{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px} .dc-h h2{margin:0; font-size:16px; font-weight:800} .dc-h > span{font-size:12.5px; color:var(--ink-2)} .dc-h .tbtn{margin-left:auto}
.dgrid2{display:grid; grid-template-columns:minmax(0, 1.35fr) minmax(0, 1fr); gap:16px; align-items:start} .dcol{display:flex; flex-direction:column; gap:16px; min-width:0}
.dsteps{margin:0; padding:0; list-style:none; display:grid; gap:8px}
.dsteps li{display:grid; grid-template-columns:auto minmax(0, 1fr) auto; gap:12px; align-items:center; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--raise)}
.dsteps li > i{display:grid; place-items:center; width:26px; height:26px; border-radius:50%; border:2px solid var(--line-2); color:#fff} .dsteps li > i .ico{width:15px; height:15px}
.dsteps li.done > i{background:var(--ok); border-color:var(--ok)} .dsteps li.done b{color:var(--ink-2)}
.dsteps li > span{display:grid; gap:2px} .dsteps b{font-size:14px} .dsteps small{color:var(--ink-2); font-size:12.5px}
.datt{margin:0; padding:0; list-style:none; display:grid}
.datt li{display:grid; grid-template-columns:auto minmax(0, 1fr) auto; gap:10px; align-items:center; padding:10px 0; border-top:1px solid var(--line); font-size:13.5px; line-height:1.4} .datt li:first-child{border-top:0; padding-top:0}
.datt .dot{margin-top:0}
.dclear{margin:0; color:var(--ok); font-weight:650; font-size:13.5px}
.dlast{display:grid; grid-template-columns:auto minmax(0, 1fr) auto; gap:14px; align-items:center; padding:14px 16px; border:1px solid var(--accent-line); border-radius:12px; background:var(--accent-soft); color:var(--ink); text-decoration:none}
.dlast > span{display:grid; gap:2px} .dlast small{font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2)} .dlast b{font-size:15px} .dlast span span{font-size:12.5px; color:var(--ink-2)} .dlast .ico{color:var(--accent)}
.drecent{margin:0; padding:0; list-style:none}
.drecent a{display:grid; grid-template-columns:minmax(0, 1fr) auto 76px 18px; gap:10px; align-items:center; padding:9px 0; border-top:1px solid var(--line); color:var(--ink); text-decoration:none} .drecent li:first-child a{border-top:0; padding-top:0}
.drecent a > span{display:grid; min-width:0} .drecent a > span b{overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .drecent small{color:var(--ink-2); font-size:11.5px} .drecent a > b{text-align:right}
.drecent a:hover b{color:var(--accent)}
@media (max-width:900px){ .dgrid2{grid-template-columns:minmax(0, 1fr)} }
@media (max-width:600px){ .dsteps li{grid-template-columns:auto minmax(0, 1fr)} .dsteps li .btn{grid-column:2; justify-self:start} }
/* choices inside a card: equal buttons that wrap their words, never their row */
.sl-dcard .sl-pseg{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0, 1fr)}
.sl-dcard .sl-pseg button{white-space:normal; height:auto; min-height:32px; padding:5px 8px; line-height:1.2}
.lab > .stc{justify-self:start}
.sl-tbl a{color:inherit; font-weight:700; text-decoration:none} .sl-tbl a:hover{color:var(--accent); text-decoration:underline}
.ph-tools .psearch{margin:0; flex:0 1 300px; background:var(--panel)}
.page.home .phead .ph-tools{flex-wrap:nowrap}
.pfoot .tbtn{margin:0}
/* a phone with one chosen: only it, with the way back (the page's head and figures above the list) */
@media (max-width:900px){ .pmain:has(.sl-split.has-sel) > .phead, .pmain:has(.sl-split.has-sel) > [id$="Kpis"], .pmain:has(.sl-split.has-sel) > .sl-tools, .pmain:has(.sl-split.has-sel) > .sl-lead{display:none} .page.home .phead .ph-tools{flex-wrap:wrap} }
.tablebox{position:relative}   /* (a hidden label in a table stays inside its scrolling box, not past the page's edge) */
/* tables of a section, a row opening its own page (owner, 2026-10-20: "consider the table list instead of side by side") */
.sl-rows .sl-row{cursor:pointer} .sl-rows .sl-row:hover > *{background:color-mix(in srgb, var(--accent) 6%, var(--panel))}
.sl-rows td.sl-go, .sl-rows th.sl-go{width:30px; padding-left:0; padding-right:10px; text-align:right; color:var(--ink-2)} .sl-rows td.sl-go svg{width:16px; height:16px; vertical-align:middle}
.sl-rows .sl-row:hover td.sl-go{color:var(--accent)}
/* finished (retired, ended, off, cancelled): its words grey, its picture grey, its status chip as it is; never see-through */
.sl-rows .sl-row.sl-dim > *{opacity:1; color:var(--ink-2)} .sl-rows .sl-row.sl-dim .sl-open b{color:var(--ink-2)} .sl-rows .sl-row.sl-dim .sl-th, .sl-rows .sl-row.sl-dim .sl-bth{filter:grayscale(1); opacity:.8}
.sl-tbl .sl-open{display:grid; gap:2px; color:var(--ink); text-decoration:none; min-width:0}
.sl-tbl .sl-open b{font-weight:750} .sl-tbl .sl-open small{font-size:11.5px; color:var(--ink-2); font-weight:500; white-space:normal}
.sl-tbl .sl-open:hover b{color:var(--accent); text-decoration:underline; text-underline-offset:3px}
.sl-tbl .sl-tname .sl-th{flex:none}
.sl-tbl th small, .sl-tbl td small{font-weight:600}
.sl-due{color:var(--warn); font-weight:750}
.sl-crumbs{padding:0; border-left:0}
.sl-page{width:100%}
@media (max-width:760px){ .sl-tbl .c2{display:none} .sl-tbl{min-width:0} }
@media (max-width:760px){ .tablebox .sl-tbl th, .tablebox .sl-tbl td{white-space:normal; padding:8px} .sl-tbl .sl-th.sm{width:40px; height:30px} .sl-tbl .sl-tname{gap:8px} .sl-tbl .stc{padding:0 7px} }
@media (max-width:760px){ .tablebox .sl-tbl{min-width:0} }
.drecent a > svg{width:16px; height:16px; color:var(--ink-2)} .drecent a:hover > svg{color:var(--accent)}
/* links that go somewhere look like links (owner, 2026-10-20: "clickable as btn, but it's doesn't look like btn"): a design
   named in a table, a card's title; a row with › is a row that opens */
#pages .sl-tbl:not(.sl-rows) a:not(.btn):not(.tbtn){color:var(--ink); text-decoration:underline; text-decoration-color:var(--line-2); text-underline-offset:3px} #pages .sl-tbl:not(.sl-rows) a:not(.btn):not(.tbtn):hover{color:var(--accent); text-decoration-color:currentColor}
.dcard-h h3 a{text-decoration:underline; text-decoration-color:transparent; text-underline-offset:3px} .dcard-h h3 a:hover{color:var(--accent); text-decoration-color:currentColor}
.drecent a{border-radius:6px} .drecent a:hover{background:color-mix(in srgb, var(--accent) 6%, var(--panel))}
/* the Load test on the Checks tab (owner, 2026-10-28): a row a test, the weight typed, whether it holds and the most it takes */
.lt .lt-head{display:flex; align-items:center; justify-content:space-between; gap:12px}
.lt h3{font-size:15px; font-weight:800; margin:0}
.lt .note{margin:6px 0 10px}
.lt-row{display:grid; grid-template-columns:12px minmax(0, 1fr) 110px 170px 110px; gap:12px; align-items:center; padding:10px 0; border-top:1px solid var(--line)}
.lt-row .dot{margin-top:0}
.lt-what b, .lt-res b, .lt-max b{display:block; font-size:14px}
.lt-what small, .lt-res small, .lt-max small{display:block; font-size:12px; color:var(--ink-2); line-height:1.35}
.lt-max{text-align:right}
.lt .lt-acts{display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end}
.lt-pfs{grid-column:1 / -1; display:grid; gap:6px; padding-left:24px}
.lt-other{border-top:1px solid var(--line); padding-top:10px} .lt-other h4{margin:0 0 8px; font-size:13px} .lt-other .lt-pfs{padding-left:0}
.lt-pf{display:grid; grid-template-columns:auto minmax(0, 1fr) auto; gap:10px; align-items:start; padding:8px 10px; border-radius:8px; background:var(--track)}
.lt-pfw b{display:block; font-size:13px; font-weight:650} .lt-pfw small{display:block; font-size:12px; color:var(--ink-2); line-height:1.35} .lt-pfw .lt-old{color:var(--warn)}
.lt-pdel:hover{color:var(--bad); border-color:var(--bad)}
.pr-dlg .dlg-b{display:grid; gap:14px} .pr-dlg .num{height:44px; border-radius:8px; border-color:var(--line-2)} .pr-dlg .sel{height:44px}
.pr-dlg textarea.tin{height:auto; padding:10px 12px; font:inherit; font-size:14px; resize:vertical}
.pr-dlg .pills{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr))} .pr-dlg .lab{margin:0} .pr-dlg .note{margin:0}
@media (max-width:560px){ .pr-dlg .pills{grid-template-columns:minmax(0, 1fr)} }
/* photos (Storage): a workshop test's, picked in its dialog and shown under it; a picture big */
.pr-pics{display:flex; flex-wrap:wrap; gap:8px} .pr-pics:empty{display:none}
.pr-pic{display:grid; gap:4px; justify-items:center} .pr-pic img{width:84px; height:84px; object-fit:cover; border-radius:8px; border:1px solid var(--line)}
.pr-dlg .fblock .tbtn{align-self:flex-start}
.lt-pics{display:flex; flex-wrap:wrap; gap:6px; margin-top:4px}
.lt-pic{padding:0; border:1px solid var(--line); border-radius:6px; overflow:hidden; background:none; cursor:zoom-in; line-height:0}
.lt-pic img{width:56px; height:56px; object-fit:cover} .lt-pic:hover, .lt-pic:focus-visible{border-color:var(--accent)}
.pic-dlg .dlg-f{max-width:min(920px, 94vw)} .pic-big{margin:0; display:grid; gap:8px; justify-items:center}
.pic-big img{max-width:100%; max-height:70vh; object-fit:contain; border-radius:8px; background:#fff}
.sl-link{margin-top:8px}
.sl-prs{display:grid; gap:8px} .sl-pr{display:grid; grid-template-columns:auto minmax(0, 1fr); gap:10px; align-items:start} .sl-pr b{display:block; font-size:13.5px} .sl-pr small{display:block; font-size:12px; color:var(--ink-2)}
@media (max-width: 700px){
  .lt-row{grid-template-columns:12px minmax(0, 1fr) 100px; row-gap:6px}
  .lt-res{grid-column:2} .lt-max{grid-column:3; text-align:right}
}

/* ---- Sign in, and Settings: Team, Backups, Account (owner, 2026-10-30: "the authentication design ... not clean") ---- */
/* the sidebar's foot: who is signed in (initials, the business, how the sync stands) and the theme */
.side-foot{gap:4px; padding:10px 8px 10px 10px} .side-foot .side-acct{flex:1; min-width:0; padding:0; border:0}
.side-me{display:flex; align-items:center; gap:10px; width:100%; padding:6px 8px; border:1px solid var(--line); border-radius:10px; background:var(--raise); color:var(--ink); font:inherit; text-align:left; text-decoration:none; cursor:pointer}
.side-me:hover{border-color:var(--line-2); background:var(--paper)} .side-me > .ico{flex:none; width:16px; height:16px; margin-left:auto; color:var(--ink-2)}
.side-me > span:not(.av){display:grid; min-width:0; flex:1} .side-me b{font-size:13px; font-weight:750; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.side-me small{display:block; font-size:11.5px; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .side-me small .dot{display:inline-block; width:7px; height:7px; margin:0 5px 1px 0; vertical-align:middle}
.side-me.out b{color:var(--accent)}
.av{flex:none; display:inline-grid; place-items:center; width:32px; height:32px; border-radius:50%; background:color-mix(in srgb, var(--accent) 15%, var(--panel)); color:var(--accent); font-size:12px; font-weight:800; letter-spacing:.02em}
.av.lg{width:52px; height:52px; font-size:17px} .av.out{background:var(--paper)} .av svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.av.sq{border-radius:8px; background:var(--paper); color:var(--ink-2)} .av.sq .ico{width:16px; height:16px}
.side-a.due{color:var(--warn)} .side-dot{flex:none; width:7px; height:7px; margin-left:auto; border-radius:50%; background:var(--warn)}
/* a Settings page: its cards one above the other, each a title, a line on what it is, its actions on the right */
.set-grid{display:grid; gap:16px; max-width:760px}
.set-card{display:grid; gap:14px; padding:18px 20px; border:1px solid var(--line); border-radius:var(--r); background:var(--panel)}
.set-h{display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:start; gap:12px} .set-h:has(> .set-ic){grid-template-columns:auto minmax(0, 1fr) auto} .set-h h2{margin:0; font-size:15px; font-weight:800}
.set-ic{display:grid; place-items:center; width:36px; height:36px; border-radius:10px; background:var(--accent-soft)} .set-ic .side-ic{width:19px; height:19px; color:var(--accent)} .set-ic + .set-t{min-height:36px; display:grid; align-content:center}
.set-h p{margin:4px 0 0; font-size:13px; line-height:1.5; color:var(--ink-2); max-width:62ch} .set-ha{flex:none; display:flex; flex-wrap:wrap; gap:8px}
.set-card .net-err{margin:-4px 0 0}
.set-add{display:flex; gap:8px} .set-add .tin{flex:1; min-width:0; height:40px}
.set-list{list-style:none; margin:0; padding:0; display:grid} .set-list li{display:flex; align-items:center; gap:12px; padding:10px 0; border-top:1px solid var(--line)} .set-list li:first-child{border-top:0; padding-top:0}
.set-who{display:grid; gap:1px; min-width:0; flex:1} .set-who b{font-size:13.5px; font-weight:700; overflow:hidden; text-overflow:ellipsis} .set-who small{font-size:12px; color:var(--ink-2)}
.set-list .set-wait{display:block; font-size:13px; color:var(--ink-2)}
.set-acts{display:flex; flex-wrap:wrap; gap:8px} .set-card > .note{margin:0}
.set-me{display:flex; align-items:center; gap:14px} .set-me b{display:block; font-size:15px; font-weight:750} .set-me small{font-size:12.5px; color:var(--ink-2)}
.set-pw{display:flex; flex-wrap:wrap; align-items:flex-end; gap:8px; padding-top:14px; border-top:1px solid var(--line)} .set-pw .lab{flex:1; min-width:200px; margin:0} .set-pw .tin{height:40px}
.set-dl{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; margin:0} .set-dl dt{font-size:12px; color:var(--ink-2)} .set-dl dd{margin:2px 0 0; font-size:13.5px; font-weight:700}
@media (max-width:600px){ .set-h, .set-h:has(> .set-ic){grid-template-columns:auto minmax(0, 1fr)} .set-h > .set-t:first-child{grid-column:1 / -1} .set-ha{grid-column:1 / -1} .set-dl{grid-template-columns:minmax(0, 1fr)} .set-card{padding:16px} }
/* the sign-in page: one card in the middle, the logo, the fields and one wide button, the way back under it */
.authp{min-height:100%; background:var(--paper)}
.auth{min-height:100vh; display:grid; align-content:center; justify-items:center; gap:18px; padding:32px 16px}
.auth-card{display:grid; gap:14px; width:min(400px, 100%); padding:30px 30px 24px; border:1px solid var(--line); border-radius:16px; background:var(--panel); box-shadow:0 12px 40px rgba(0,0,0,.08)}
.auth-brand{display:flex; justify-content:center; margin-bottom:4px} .auth-brand .brand{pointer-events:none}
.auth h1{margin:0; font-size:22px; font-weight:800} .auth-sub{margin:-6px 0 2px; font-size:13.5px; line-height:1.5; color:var(--ink-2)}
.auth-f{display:grid; gap:14px} .auth-f .lab{margin:0; font-size:12.5px; font-weight:650; color:var(--ink)} .auth-f .tin{height:44px; font-size:15px}
.auth-pwl{display:flex; justify-content:space-between; align-items:baseline} .auth-pwl a{font-size:12.5px; font-weight:650; color:var(--accent); text-decoration:none} .auth-pwl a:hover{text-decoration:underline}
.auth-go{width:100%; justify-content:center} .auth-f .net-err{margin:0}
.auth-alt{margin:2px 0 0; text-align:center; font-size:13.5px; color:var(--ink-2)} .auth-alt a{color:var(--accent); font-weight:700; text-decoration:none} .auth-alt a:hover{text-decoration:underline}
.auth-back{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--ink-2); text-decoration:none} .auth-back:hover{color:var(--ink)} .auth-back .ico{width:15px; height:15px}