/* The workspace shell over the stage - phase 0 of the planner merge, Build screen first.
   Values come from the v4 artboard (docs/redesign/modulith-planner-v4.html, extracted 2026-10-12) with
   the brief's tokens (css/tokens.css) where the two disagree (glass .84, not .9). Everything here is
   scoped to html[data-ws], so the old viewer page without a workspace is untouched. */

/* ---- the artboard's extras beyond the brief's tokens ---- */
:root, [data-mode="light"] {
  --hair: rgba(29,30,32,.12);
  --well-border: rgba(29,30,32,.06);
  --badge-bg: rgba(29,30,32,.08); --badge-fg: #4A4B50;
  --badge-strong-bg: #1D1E20; --badge-strong-fg: #FFFFFF;
  --ring: 0 0 0 3px #FBFBFA, 0 0 0 5px #FF6A1A;
  --edge: 0 1px 0 rgba(0,0,0,.2);
  --seg-on-shadow: 0 1px 2px rgba(29,30,32,.18);
  --seg-track: rgba(29,30,32,.14);
  --dis-border: rgba(29,30,32,.2);
  --chip-shadow: 0 2px 0 rgba(29,30,32,.06);
  --ok-bg: #E3F1E8; --ok-fg: #1F6B45;
  --warn-bg: #FFF4DC; --warn-fg: #6B4700; --warn-border: #F0D28C;
  --lith: #1D1E20;
}
[data-mode="dark"] {
  --hair: rgba(255,255,255,.12);
  --well-border: rgba(255,255,255,.06);
  --badge-bg: rgba(255,255,255,.1); --badge-fg: #D4D4D8;
  --badge-strong-bg: #F4F4F5; --badge-strong-fg: #1D1E20;
  --ring: 0 0 0 3px #1D1E20, 0 0 0 5px #FF6A1A;
  --edge: 0 0 0 1px rgba(255,255,255,.14);
  --seg-on-shadow: none;
  --seg-track: rgba(255,255,255,.14);
  --dis-border: rgba(255,255,255,.18);
  --chip-shadow: none;
  --ok-bg: rgba(62,207,142,.12); --ok-fg: #7BE3B0;
  --warn-bg: rgba(245,184,61,.12); --warn-fg: #F5C96B; --warn-border: rgba(245,184,61,.35);
  --lith: #FFFFFF;
}

/* ---- the old viewer's chrome steps aside while a workspace is up ---- */
html[data-ws] #topbar, html[data-ws] #controls, html[data-ws] #note-panel, html[data-ws] #checklist-tab,
html[data-ws] #checklist-panel, html[data-ws] #identify-card, html[data-ws] #cover-overlay, html[data-ws] #cover-bg,
html[data-ws] #tap-hint, html[data-ws] #paid-note, html[data-ws] #outro-overlay, html[data-ws] #embed-hint,
html[data-ws] #measure-toggle, html[data-ws] #color-toggle, html[data-ws] #pointer-line { display: none !important; }
html[data-ws] body { font-family: var(--font-ui); color: var(--ink); }
/* the viewer's W/H/L callouts are clamped to the old layout's edges; they return with the Measure tool until the stage's safe area exists */
html[data-ws]:not(.ws-measure) .dim-label { display: none !important; }
html[data-ws] #stage-wrap { inset: 0 !important; top: 0 !important; bottom: 0 !important; }

/* ---- primitives ---- */
#ws { position: fixed; inset: 0; pointer-events: none; z-index: 20; font-family: var(--font-ui); color: var(--ink); font-size: 13px; }
#ws > * { pointer-events: auto; }
#ws button { font: inherit; color: inherit; }
#ws .glass { background: var(--glass-bg); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); color: var(--ink); }
#ws .glass-edge { box-shadow: inset 3px 0 0 var(--orange), var(--glass-shadow); }
#ws .chip { background: var(--chip-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--chip-border); box-shadow: var(--chip-shadow); color: var(--ink); }
#ws .chip-btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border-radius: 12px; font-size: 14px; cursor: pointer; white-space: nowrap; }
#ws .chip-btn.strong { font-weight: 600; }
#ws .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border-radius: 12px; cursor: pointer; }
#ws .key { background: var(--key-bg); border: 1px solid var(--key-border); box-shadow: var(--key-shadow); color: var(--ink); cursor: pointer; }
#ws .key.on { background: var(--key-on-bg); border: 1px solid var(--orange); box-shadow: var(--key-on-shadow); color: var(--ink); }
[data-mode="dark"] #ws .key.on { color: #FFFFFF; }
#ws .key.dis, #ws .key[aria-disabled="true"] { background: transparent; border: 1px dashed var(--dis-border); color: var(--ink-3); opacity: .5; cursor: not-allowed; box-shadow: none; }
#ws .track { background: var(--track); border-radius: 12px; padding: 4px; display: grid; gap: 4px; }
#ws .seg { height: 36px; padding: 0; border-radius: 9px; font-size: 13px; font-weight: 600; background: transparent; border: none; color: var(--ink-2); cursor: pointer; }
#ws .seg.on { background: var(--seg-on); box-shadow: var(--seg-on-shadow); color: var(--ink); }
#ws .seg[disabled] { opacity: .45; cursor: not-allowed; }
#ws .h2 { margin: 0 0 8px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
#ws .mono { font-family: var(--font-mono); }
#ws .badge { font-family: var(--font-mono); font-size: 11px; font-weight: 600; padding: 2px 6px; border-radius: 999px; background: var(--badge-bg); color: var(--badge-fg); }
#ws .preview { align-self: center; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; cursor: help; }
#ws .hint { margin: 8px 2px 0; font-size: 12px; color: var(--ink-2); }
#ws .readout { margin: 4px 2px 0; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
#ws .ph { flex: none; fill: currentColor; }
#ws .well { background: var(--well); border: 1px solid var(--well-border); }
#ws button:active:not([disabled]):not(.dis) { transform: scale(.97); transition: transform var(--d-press) var(--ease-out); }
#ws button { transition: background var(--d-hover) var(--ease-out), box-shadow var(--d-hover) var(--ease-out), color var(--d-hover) var(--ease-out); }

/* ---- top bar ---- */
#ws-top { position: absolute; top: 18px; left: 20px; right: 20px; display: flex; align-items: center; gap: 10px; z-index: 5; }
#ws-top .spacer { flex: 1; }
#ws-logo { display: flex; align-items: center; height: 44px; }
#ws-logo img { height: 28px; width: auto; display: block; }
#ws-switch { position: relative; margin-left: 6px; }
#ws-switch > .chip-btn > span { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ws-switch .menu { position: absolute; top: 52px; left: 0; width: 300px; max-height: min(70vh, 640px); overflow-y: auto; padding: 8px; border-radius: 14px; display: flex; flex-direction: column; gap: 2px; z-index: 9; }
#ws-switch .item.recent { padding: 0; height: auto; gap: 2px; }
#ws-switch .item.recent .open { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 6px 10px; border: none; border-radius: 9px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
#ws-switch .item.recent .open > span:first-child { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
#ws-switch .item.recent .open:hover, #ws-switch .item:not(.current):not(.recent):not(.confirm):hover { background: var(--track); }
#ws-switch .item.recent .x { width: 26px; height: 26px; padding: 0; margin-right: 4px; border: none; border-radius: 7px; background: transparent; color: var(--ink-3); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: none; }
#ws-switch .item.recent .x:hover { background: var(--warn-bg); color: var(--warn-fg); }
#ws-switch .item.confirm { justify-content: flex-start; gap: 6px; font-size: 12px; }
#ws-switch .item.confirm > span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ws-switch .item.current { flex-direction: column; align-items: flex-start; gap: 1px; height: auto; padding: 6px 10px; cursor: text; }
#ws-switch .renamerow { display: flex; gap: 6px; padding: 2px 4px; }
#ws-switch .renamerow input { flex: 1; min-width: 0; height: 32px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--input-border); background: var(--input-bg); color: var(--ink); font: inherit; font-size: 13px; }
#ws-switch .key.sm { display: inline-flex; align-items: center; height: 30px; padding: 0 10px; border-radius: 8px; font-size: 12px; font-weight: 600; white-space: nowrap; }
#ws-switch .notice { display: flex; flex-direction: column; gap: 6px; margin: 2px 2px 4px; padding: 8px 10px; border-radius: 10px; background: var(--warn-bg); color: var(--warn-fg); font-size: 12px; }
#ws-switch .notice p { margin: 0; }
#ws-switch .notice .row { display: flex; flex-wrap: wrap; gap: 4px; }
#ws-switch .menu[hidden] { display: none; }
#ws-switch .item { height: 40px; padding: 0 10px; border-radius: 9px; border: none; background: transparent; text-align: left; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#ws-switch .item.current { background: var(--seg-on); box-shadow: var(--seg-on-shadow); font-weight: 600; }
#ws-switch .item[disabled] { opacity: .5; cursor: not-allowed; }
#ws-switch .label { padding: 6px 10px 4px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
#ws-switch .divider { height: 1px; margin: 6px 4px; background: var(--hair); }
#ws-switch .meta { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); }
#ws-tabs { display: flex; gap: 3px; padding: 4px; border-radius: 15px; }
#ws-tabs .tab { display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 12px; border-radius: 11px; font-size: 14px; font-weight: 600; background: transparent; border: 1px solid transparent; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
#ws-tabs .tab.on { background: var(--key-on-bg); border-color: var(--orange); box-shadow: var(--key-on-shadow); color: var(--ink); }
[data-mode="dark"] #ws-tabs .tab.on { color: #FFFFFF; }
#ws-theme { display: flex; gap: 2px; padding: 3px; border-radius: 12px; }
#ws-theme button { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border-radius: 9px; cursor: pointer; background: transparent; border: none; color: inherit; }
#ws-theme button.on { background: var(--toggle-on); color: var(--ink); }
#ws .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--warning); flex: none; }

/* ---- left library ---- */
#ws-lib { position: absolute; top: 90px; left: 20px; bottom: 116px; width: 304px; box-sizing: border-box; padding: 14px 16px 16px; border-radius: 18px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; }
#ws-lib .tabs { display: flex; gap: 6px; align-items: center; }
#ws-lib .tabs .track { flex: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
#ws-lib .tabs .seg { height: 38px; }
#ws-lib .collapse { display: flex; align-items: center; justify-content: center; width: 40px; height: 44px; padding: 0; border-radius: 10px; background: transparent; border: none; color: var(--ink-2); cursor: pointer; }
#ws-lib.rail { bottom: auto; width: 68px; padding: 8px 6px; align-items: center; gap: 6px; overflow: visible; }
#ws-lib.rail .expand { width: 52px; height: 44px; padding: 0; background: transparent; border: none; color: var(--ink-2); cursor: pointer; }
#ws-lib.rail .railbtn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 56px; height: 58px; padding: 0; border-radius: 12px; font-size: 10px; font-weight: 600; }
#ws .units { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
#ws .unit { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; height: 78px; border-radius: 12px; padding: 0 2px; font-size: 11px; font-weight: 600; line-height: 1.15; text-align: center; }
#ws .unit .soon { position: absolute; top: 4px; right: 4px; font-family: var(--font-mono); font-size: 9px; letter-spacing: .06em; padding: 1px 4px; border-radius: 4px; background: var(--badge-bg); color: var(--badge-fg); }
#ws .gf { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 8px; }
#ws .gf .seg { height: 34px; font-size: 12px; }
#ws .sizes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
#ws .size { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 58px; padding: 0 0 7px; border-radius: 10px; }
#ws .size .holder { display: flex; align-items: flex-end; justify-content: center; height: 28px; }
#ws .size .cap { font-family: var(--font-mono); font-size: 11px; font-weight: 500; }
#ws .intro { margin: -4px 2px 0; font-size: 12px; color: var(--ink-2); }
#ws .types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
#ws .type { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 10px; border-radius: 12px; font-size: 13px; font-weight: 600; }
#ws .faces { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
#ws .face { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 66px; padding: 0; border-radius: 12px; font-size: 11px; font-weight: 600; }
#ws .face .club { position: absolute; top: 3px; right: 6px; font-size: 11px; color: var(--club); }
#ws .note { margin: 6px 2px 0; font-size: 12px; color: var(--ink-2); }
#ws .handles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
#ws .handle { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 62px; padding: 0; border-radius: 12px; font-size: 11px; font-weight: 600; }
#ws .shape { display: block; }
#ws .shape.deco { width: 30px; height: 6px; border-radius: 99px; }
#ws .shape.blockbar { width: 30px; height: 8px; border-radius: 2px; }
#ws .shape.crystal { width: 26px; height: 9px; border-radius: 2px; clip-path: polygon(15% 0, 85% 0, 100% 50%, 85% 100%, 15% 100%, 0 50%); }
#ws .two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#ws .seg3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#ws .seg2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#ws .seg.sm { height: 34px; font-size: 12px; }
#ws .video { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; font-weight: 600; text-decoration: none; color: var(--ink); }

/* ---- right inspector ---- */
#ws-insp { position: absolute; top: 90px; right: 20px; width: 324px; box-sizing: border-box; padding: 14px 16px 16px 19px; border-radius: 18px; display: flex; flex-direction: column; gap: 14px; transform-origin: top right; animation: insp-in var(--d-pop) var(--ease-out); }
#ws-insp[hidden] { display: none; }
@keyframes insp-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
#ws-insp .head { display: flex; align-items: center; gap: 8px; }
#ws-insp .head .h2 { margin: 0; flex: 1; }
#ws-insp .head .idx { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); }
#ws-insp .head .x { width: 28px; height: 28px; padding: 0; border: none; background: transparent; color: var(--ink-2); border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
#ws-insp .ident { display: flex; align-items: center; gap: 12px; }
#ws-insp .ident .wellbox { display: flex; align-items: center; justify-content: center; width: 124px; height: 93px; flex: none; border-radius: 12px; overflow: hidden; }
#ws-insp .ident .col { min-width: 0; }
#ws-insp h3 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 20px; font-stretch: 108%; line-height: 1.15; }
#ws-insp .dims { margin-top: 4px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); }
#ws-insp .src { margin-top: 2px; font-size: 12px; color: var(--ink-2); }
#ws-insp .warnbox { padding: 10px 12px; border-radius: 12px; font-size: 12px; line-height: 1.4; background: var(--warn-bg); color: var(--warn-fg); border: 1px solid var(--warn-border); }
#ws-insp .row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
#ws-insp .row b { font-weight: 600; }
#ws-insp .row b span { font-weight: 400; color: var(--ink-2); }
#ws-insp .actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
#ws-insp .actions button { height: 44px; padding: 0; border-radius: 12px; font-size: 12px; font-weight: 600; }
#ws-insp .actions .danger { color: var(--danger); }

/* ---- toolbar + dock ---- */
#ws-tools { position: absolute; top: 90px; left: 344px; right: 364px; display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
#ws-tools .view { display: flex; padding: 4px; gap: 4px; border-radius: 13px; }
#ws-tools .view button { height: 36px; padding: 0 14px; border-radius: 10px; border: none; font-family: var(--font-mono); font-size: 13px; background: transparent; color: var(--ink-2); cursor: pointer; }
#ws-tools .view button.on { background: var(--toggle-on); color: var(--ink); font-weight: 600; }
#ws-tools .view button[disabled] { opacity: .45; cursor: not-allowed; }
#ws-tools .measure.on { color: var(--measure); }
#ws-tools .quality { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 12px; border-radius: 12px; cursor: pointer; font-size: 12px; font-weight: 600; white-space: nowrap; }
#ws-dock { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; align-items: center; gap: 20px; padding: 10px 10px 10px 12px; border-radius: 20px; white-space: nowrap; }
#ws-dock .status { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 12px; border: none; font-size: 13px; font-weight: 600; cursor: pointer; background: var(--ok-bg); color: var(--ok-fg); }
#ws-dock .status.issue { background: var(--warn-bg); color: var(--warn-fg); }
#ws-dock .status .dot { background: #2E9E63; }
#ws-dock .status.issue .dot { background: var(--warning); }
#ws-dock .group { display: flex; align-items: baseline; gap: 7px; }
#ws-dock .big { font-family: var(--font-display); font-weight: 800; font-size: 26px; font-stretch: 112%; }
#ws-dock .unit-lbl { font-size: 13px; color: var(--ink-2); }
#ws-dock .cta { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 22px; border-radius: 14px; background: var(--orange); color: var(--on-orange); border: 1px solid var(--orange-edge); font-family: var(--font-display); font-weight: 800; font-size: 17px; font-stretch: 110%; cursor: pointer; box-shadow: var(--cta-shadow); }

/* ---- Assemble: the step list and the step player (the artboard's values) ---- */
#ws-steps { position: absolute; top: 90px; left: 20px; width: 280px; box-sizing: border-box; padding: 14px 12px; border-radius: 18px; display: flex; flex-direction: column; gap: 4px; max-height: calc(100% - 90px - 200px); overflow-y: auto; }
#ws-steps .head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 6px 8px; }
#ws-steps h2 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 18px; font-stretch: 108%; }
#ws-steps .count { font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); }
#ws-steps .step { display: flex; align-items: center; gap: 10px; height: 38px; flex: none; padding: 0 8px; border-radius: 9px; border: none; text-align: left; font-size: 13px; cursor: pointer; background: transparent; color: var(--ink-2); }
#ws-steps .step.cur { background: var(--seg-on); box-shadow: var(--seg-on-shadow); color: var(--ink); font-weight: 600; }
#ws-steps .mark { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex: none; border-radius: 999px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; background: var(--badge-bg); color: var(--badge-fg); }
#ws-steps .step.cur .mark { background: var(--orange); color: var(--on-orange); }
#ws-steps .step.past { color: var(--ink-3); }
#ws-steps .step.past .mark { opacity: .55; }
#ws-steps .skip { margin-top: 8px; height: 38px; flex: none; border-radius: 10px; font-size: 12px; font-weight: 600; }
#ws-player { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); width: 640px; max-width: calc(100% - 40px); box-sizing: border-box; padding: 14px 16px 12px; border-radius: 20px; display: flex; flex-direction: column; gap: 10px; }
#ws-player .row1 { display: flex; gap: 12px; align-items: flex-start; }
#ws-player .num { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--orange); color: var(--on-orange); font-family: var(--font-mono); font-weight: 700; }
#ws-player .title { font-family: var(--font-display); font-weight: 800; font-size: 18px; font-stretch: 108%; }
#ws-player .text { margin-top: 3px; font-size: 14px; line-height: 1.5; color: var(--ink); }
#ws-player .colors { margin-left: auto; flex: none; display: flex; gap: 3px; padding: 3px; border-radius: 10px; background: var(--track); }
#ws-player .colors .seg { height: 30px; padding: 0 10px; border-radius: 8px; font-size: 12px; }
#ws-player .row2 { display: flex; align-items: center; gap: 8px; }
#ws-player .row2 .key { height: 40px; padding: 0 14px; border-radius: 10px; font-size: 13px; font-weight: 600; }
#ws-player .row2 .sq { width: 44px; padding: 0; }
#ws-player .row2 .next { padding: 0 16px; font-weight: 700; }
#ws-player .row2 .key[disabled] { opacity: .45; cursor: not-allowed; }
#ws-player .pips { flex: 1; display: flex; justify-content: center; gap: 5px; }
#ws-player .pip { display: block; width: 7px; height: 7px; border-radius: 99px; background: var(--seg-track); }
#ws-player .pip.done { background: var(--ink-3); }
#ws-player .pip.cur { width: 18px; background: var(--orange); }
#ws-player .row3 { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--hair); padding-top: 10px; }
#ws-player .row3 .hint { flex: 1; min-width: 0; font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ws-player .row3 .seg { white-space: nowrap; }
#ws-player .row3 .key { height: 36px; padding: 0 12px; border-radius: 10px; font-size: 12px; font-weight: 600; }
#ws-player .row3 .key.on { font-weight: 700; padding: 0 14px; }
html[data-ws="assemble"] #ws-tools { left: 320px; right: 20px; }

/* ---- Parts: the list panel, its rows, the progress counters (the artboard's values) ---- */
#ws-parts { position: absolute; top: 90px; left: 20px; bottom: 116px; width: 440px; box-sizing: border-box; border-radius: 18px; display: flex; flex-direction: column; overflow: hidden; }
#ws-parts .head { padding: 16px 18px 12px; display: flex; flex-direction: column; gap: 10px; border-bottom: 1px solid var(--hair); }
#ws-parts .row1 { display: flex; align-items: baseline; justify-content: space-between; }
#ws-parts h2 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 20px; font-stretch: 108%; }
#ws-parts .row1 .mono { font-size: 12px; color: var(--ink-2); }
#ws-parts .row2 { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
#ws-parts .row2 .ok { color: var(--success); font-weight: 600; }
#ws-parts .row2 .warn { color: var(--warning); font-weight: 600; }
#ws-parts .row2 .dim { color: var(--ink-3); text-align: right; }
#ws-parts .row3 { display: flex; gap: 6px; align-items: center; }
#ws-parts .sites { flex: 1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; padding: 3px; border-radius: 10px; }
#ws-parts .sites .seg { height: 32px; font-size: 11px; }
#ws-parts .row3 > .key { height: 38px; padding: 0 12px; border-radius: 10px; font-size: 12px; font-weight: 600; white-space: nowrap; }
#ws-parts .row4 { display: flex; gap: 6px; flex-wrap: wrap; }
#ws-parts .row4 .key { height: 32px; padding: 0 10px; border-radius: 8px; font-size: 12px; }
#ws-parts .body { flex: 1; overflow-y: auto; padding: 8px 18px 16px; }
#ws-parts h3 { margin: 14px 0 6px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
#ws-parts .rows { display: flex; flex-direction: column; gap: 4px; }
#ws-parts .prow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 44px; padding: 6px 8px; border-radius: 10px; }
#ws-parts .prow.done { opacity: .55; }
#ws-parts .chip { display: inline-block; flex: none; width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(128,128,128,.35); }
#ws-parts .chip.buy { background: transparent; border: 1.5px dashed var(--ink-3); }
#ws-parts .qty { font-size: 12px; font-weight: 600; width: 34px; flex: none; }
#ws-parts .mid { flex: 1; min-width: 0; }
#ws-parts .name { font-size: 13px; font-weight: 600; }
#ws-parts .note { font-size: 11px; color: var(--ink-2); }
#ws-parts .prow .badge { font-size: 9px; letter-spacing: .06em; padding: 2px 5px; border-radius: 4px; flex: none; }
#ws-parts .prow .badge.club { background: transparent; color: var(--club); border: 1px solid var(--club); }
#ws-parts .link { font-size: 12px; font-weight: 600; text-decoration: none; color: var(--ink); white-space: nowrap; flex: none; }
#ws-parts .link.dim { color: var(--ink-3); font-weight: 500; }
#ws-parts .progress { display: flex; align-items: center; gap: 8px; flex-basis: 100%; padding-left: 58px; }   /* its own line under the name */
#ws-parts .counter { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: 8px; background: var(--track); }
#ws-parts .counter button { width: 22px; height: 22px; padding: 0; border: none; border-radius: 6px; background: var(--key-bg); color: var(--ink); cursor: pointer; font-size: 13px; line-height: 1; }
#ws-parts .counter button[disabled] { opacity: .35; cursor: not-allowed; }
#ws-parts .counter .mono { min-width: 18px; text-align: center; font-size: 12px; font-weight: 600; }
#ws-parts .counter .lbl { font-size: 10px; color: var(--ink-3); padding: 0 4px 0 2px; }
#ws-parts .left { font-size: 11px; color: var(--ink-2); min-width: 44px; text-align: right; }
#ws-parts .foot { margin: 14px 0 0; font-size: 11px; color: var(--ink-3); }
#ws-insp .uparts { display: flex; flex-direction: column; gap: 4px; }
#ws-insp .uprow { display: flex; justify-content: space-between; align-items: center; height: 34px; padding: 0 10px; border-radius: 9px; font-size: 12px; }
#ws-insp .uprow .mono { font-weight: 600; }
#ws-dock .pbar { display: flex; flex-direction: column; gap: 5px; width: 170px; }
#ws-dock .pbar .track { display: block; height: 6px; border-radius: 3px; background: var(--seg-track); overflow: hidden; padding: 0; }
#ws-dock .pbar .fill { display: block; height: 6px; background: var(--orange); }
#ws-dock .pbar .mono { font-size: 11px; color: var(--ink-2); }
#ws-dock .pbar .short { display: none; }
#ws-tabs .tab .badge { font-size: 10px; padding: 1px 6px; }
html[data-ws="parts"] #ws-tools { left: 480px; right: 364px; }
@media (max-width: 1279px) { #ws-parts { top: 134px; width: 400px; } html[data-ws="parts"] #ws-tools { left: 440px; } }

/* ---- Build (phase 3): the 2D board, the issue card, the context menu, the inspector's steppers ---- */
#ws-board { position: absolute; top: 150px; left: 344px; right: 364px; bottom: 116px; border-radius: 18px; display: flex; flex-direction: column; overflow: hidden; }
#ws-board[hidden] { display: none; }
#ws-board .bhead { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--hair); }
#ws-board .bttl { font-family: var(--font-display); font-weight: 800; font-size: 16px; font-stretch: 108%; }
#ws-board .bhint { flex: 1; font-size: 12px; color: var(--ink-2); }
#ws-board .bgrid { display: flex; gap: 4px; }
#ws .key.sm { height: 32px; padding: 0 10px; border-radius: 8px; font-size: 12px; font-weight: 600; }
#ws .key.strong { background: var(--orange); color: var(--on-orange); border-color: var(--orange-edge); }
#ws-board .bsvg { flex: none; display: block; margin: auto; touch-action: none; cursor: crosshair; }   /* drawn at its natural size (layout() fits the viewBox to the panel), so a pointer position maps 1:1 */
#ws-board .b-grid line { stroke: var(--ink-3); stroke-opacity: .28; stroke-width: 1; }
#ws-board .b-grid line.half { stroke-opacity: .12; }
#ws-board .b-mount { stroke: var(--orange); stroke-width: 3; stroke-linecap: round; }
#ws-board .b-mount-lbl { font-family: var(--font-mono); font-size: 10px; fill: var(--ink-2); }
#ws-board .b-hatch { stroke: var(--orange); stroke-width: 1.5; stroke-opacity: .7; }
#ws-board .b-deficit { stroke: var(--orange); stroke-opacity: .5; stroke-dasharray: 4 3; }
#ws-board .b-unit { cursor: grab; }
#ws-board .b-unit.dragging { opacity: .35; }
#ws-board .b-body { stroke: rgba(0,0,0,.35); stroke-width: 1; }
#ws-board .b-cap { font-family: var(--font-mono); font-size: 10px; font-weight: 600; fill: #fff; paint-order: stroke; stroke: rgba(0,0,0,.45); stroke-width: 2.5px; pointer-events: none; }
#ws-board .b-sel { fill: none; stroke: var(--orange); stroke-width: 2.5; pointer-events: none; }
#ws-board .b-flag { fill: none; stroke: var(--warning); stroke-width: 2; stroke-dasharray: 6 4; pointer-events: none; }
#ws-board .b-flag-dot { fill: var(--warning); pointer-events: none; }
#ws-board .b-flag-txt { font-family: var(--font-mono); font-size: 12px; font-weight: 700; fill: #1D1E20; pointer-events: none; }
#ws-board .b-ghost { pointer-events: none; stroke-width: 2; stroke-dasharray: 5 4; }
#ws-board .b-ghost.ok { fill: rgba(90,214,122,.25); stroke: #2E9E63; }
#ws-board .b-ghost.no { fill: rgba(240,108,95,.22); stroke: #D64545; }
#ws .armed { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; padding: 8px 10px; border-radius: 10px; font-size: 12px; background: var(--warn-bg); color: var(--warn-fg); border: 1px solid var(--warn-border); }
#ws-tools .erase.on { color: var(--danger); }
#ws-tools .icon-btn[disabled] { opacity: .4; cursor: not-allowed; }
#ws-insp .stepper { display: inline-flex; align-items: center; gap: 6px; }
#ws-insp .stepper .key { width: 30px; height: 30px; padding: 0; border-radius: 8px; font-size: 15px; line-height: 1; }
#ws-insp .stepper b { min-width: 34px; text-align: center; font-size: 12px; }
#ws-insp .track.mini { padding: 3px; gap: 3px; border-radius: 9px; min-width: 150px; }
#ws-insp .track.mini .seg { height: 28px; font-size: 11px; }
#ws-insp .seg[disabled] { opacity: .45; }
#ws-issues { position: absolute; left: 50%; bottom: 100px; transform: translateX(-50%); width: 460px; max-height: 60vh; overflow-y: auto; box-sizing: border-box; padding: 14px 16px; border-radius: 16px; display: flex; flex-direction: column; gap: 10px; z-index: 6; }
#ws-issues[hidden] { display: none; }
#ws-issues .ihead { display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
#ws-issues .ihead .x { width: 32px; height: 32px; border: none; background: transparent; color: var(--ink-2); cursor: pointer; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; }
#ws-issues .issue { padding: 10px 12px; border-radius: 12px; font-size: 13px; line-height: 1.45; display: flex; flex-direction: column; gap: 8px; }
#ws-issues .issue.hard, #ws-issues .issue.soft { background: var(--warn-bg); color: var(--warn-fg); border: 1px solid var(--warn-border); }
#ws-issues .issue.guide { background: var(--well); border: 1px solid var(--well-border); color: var(--ink); }
#ws-issues .iact { display: flex; gap: 8px; justify-content: flex-end; }
#ws-issues .iact:empty { display: none; }
#ws-menu { position: fixed; width: 200px; padding: 8px; border-radius: 14px; display: flex; flex-direction: column; gap: 2px; z-index: 30; }
#ws-menu[hidden] { display: none; }
#ws-menu .label { padding: 6px 10px 4px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
#ws-menu .item { height: 36px; padding: 0 10px; border-radius: 9px; border: none; background: transparent; text-align: left; font-size: 13px; cursor: pointer; color: inherit; }
#ws-menu .item:hover { background: var(--seg-on); }
#ws-menu .item[disabled] { opacity: .45; cursor: not-allowed; }
#ws-menu .item.danger { color: var(--danger); }
html.ws-2d #ws-tools .measure { visibility: hidden; }
@media (max-width: 1279px) { #ws-board { top: 194px; } }

/* ---- Astra's phase-3 corrections: the touch choice chip, the gravity flash, the wide Parts table ---- */
#ws-choice { position: absolute; left: 50%; bottom: 100px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 16px; border-radius: 14px; font-size: 13px; font-weight: 600; white-space: nowrap; z-index: 6; }
#ws-choice[hidden] { display: none; }
#ws-board .b-pulse { fill: none; stroke: var(--orange); stroke-width: 3; opacity: .9; pointer-events: none; animation: b-pulse 1.5s ease-out forwards; }
@keyframes b-pulse { from { opacity: .95; } to { opacity: 0; } }
#ws-parts .row1 .expand { margin-left: auto; width: 32px; height: 32px; padding: 0; border: none; background: transparent; color: var(--ink-2); border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
#ws-parts .row1 .expand[aria-pressed="true"] { color: var(--ink); background: var(--track); }
#ws-parts .row1 .mono { margin-left: 10px; }
#ws-parts.wide { width: 820px; }
html.ws-parts-wide[data-ws="parts"] #ws-tools { left: 860px; }
#ws-parts .rows.table { gap: 2px; }
#ws-parts .thead { display: grid; grid-template-columns: 14px minmax(0, 1fr) 64px 118px 118px 90px 120px; gap: 10px; align-items: center; padding: 4px 8px 6px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
#ws-parts .thead span:nth-child(n+3) { text-align: center; }
#ws-parts .prow.trow { display: grid; grid-template-columns: 14px minmax(0, 1fr) 64px 118px 118px 90px 120px; gap: 10px; align-items: center; min-height: 48px; }
#ws-parts .prow.trow .need, #ws-parts .prow.trow .left { text-align: center; font-size: 14px; font-weight: 600; }
#ws-parts .prow.trow .left.ok { color: var(--success); font-size: 12px; }
#ws-parts .prow.trow .link { justify-self: end; }
#ws-parts .prow.trow .name .badge { margin-left: 6px; }
#ws-parts .prow.done { opacity: 1; }
#ws-parts .prow.done .name { color: var(--ink-2); }
#ws-parts .prow.done .chip { opacity: .6; }
#ws-parts .counter.big { justify-self: center; gap: 4px; padding: 3px; border-radius: 9px; }
#ws-parts .counter.big button { width: 30px; height: 30px; font-size: 15px; }
#ws-parts .counter.big .mono { min-width: 24px; font-size: 14px; }

/* ---- product-faithful previews: the real part from its GLB, the glyph until it arrives ---- */
#ws .pv { display: flex; align-items: center; justify-content: center; }
#ws .pv img { display: block; object-fit: contain; }
#ws .pv.tile img { width: 60px; height: 45px; margin: -8px 0 -6px; }
#ws .pv.face img { width: 60px; height: 45px; margin: -8px 0 -8px; }
#ws .pv.handle img { width: 64px; height: 48px; margin: -10px 0 -10px; }
#ws .pv.insp img { width: 124px; height: 93px; }

/* ---- Colors (phase 4): the schemes panel, the picker, the part card, the shopping list ---- */
#ws-colors { position: absolute; top: 90px; left: 20px; bottom: 116px; width: 304px; box-sizing: border-box; padding: 14px 16px 16px; border-radius: 18px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; }
#ws-colors .head { display: flex; flex-direction: column; gap: 4px; }
#ws-colors h2 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 20px; font-stretch: 108%; }
#ws-colors .head .hint { margin: 0; font-size: 12px; color: var(--ink-2); }
#ws-colors section { display: flex; flex-direction: column; gap: 6px; }
#ws-colors .schemes { display: flex; flex-direction: column; gap: 4px; }
#ws-colors .scheme { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 8px 0 10px; border-radius: 12px; font-size: 13px; font-weight: 600; text-align: left; }
#ws-colors .scheme .apply { flex: 1; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0; border: none; background: transparent; color: inherit; font: inherit; font-weight: 600; cursor: pointer; text-align: left; }
#ws-colors button.scheme { flex-direction: row; }
#ws-colors .strip { display: inline-flex; gap: 2px; flex: none; }
#ws-colors .strip i, #ws-dock .stacks i { display: inline-block; width: 12px; height: 18px; border-radius: 3px; border: 1px solid rgba(128,128,128,.35); }
#ws-colors .scheme .name { flex: 1; }
#ws-colors .scheme .badge { font-size: 9px; letter-spacing: .06em; }
#ws-colors .scheme .x { width: 26px; height: 26px; padding: 0; border: none; background: transparent; color: var(--ink-3); border-radius: 7px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
#ws-colors .scheme .shop { height: 28px; padding: 0 8px; border: none; background: transparent; color: var(--ink-2); font-size: 11px; font-weight: 600; cursor: pointer; white-space: nowrap; }
#ws-colors .row4 { display: flex; flex-wrap: wrap; gap: 6px; }
#ws-colors .saverow { display: flex; gap: 6px; }
#ws-colors .saverow input { flex: 1; min-width: 0; height: 32px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--input-border); background: var(--input-bg); color: var(--ink); font: inherit; font-size: 13px; }
#ws-colors .crows { display: flex; flex-direction: column; gap: 3px; }
#ws-colors .crow { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; border-radius: 10px; font-size: 12px; text-align: left; }
#ws-colors .crow .sw, #ws-partcard .sw, #ws-shop .sw { display: inline-block; flex: none; width: 16px; height: 16px; border-radius: 5px; border: 1px solid rgba(128,128,128,.35); }
#ws-colors .crow .lbl { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ws-colors .crow .cnt { color: var(--ink-3); font-family: var(--font-mono); font-size: 11px; }
#ws-colors .crow .fil { font-size: 11px; color: var(--ink-2); white-space: nowrap; }
#ws-colors .note, #ws-picker .note { margin: 2px 2px 0; font-size: 12px; color: var(--ink-2); }
#ws-picker { position: absolute; top: 90px; right: 20px; bottom: 116px; width: 324px; box-sizing: border-box; padding: 14px 16px 12px 19px; border-radius: 18px; display: flex; flex-direction: column; gap: 10px; }
#ws-picker[hidden] { display: none; }
#ws-picker .head { display: flex; align-items: center; gap: 8px; }
#ws-picker .head .h2 { margin: 0; flex: 1; font-size: 12px; text-transform: none; letter-spacing: 0; color: var(--ink); font-weight: 700; }
#ws-picker .x, #ws-partcard .x, #ws-shop .x { width: 28px; height: 28px; padding: 0; border: none; background: transparent; color: var(--ink-2); border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
#ws-picker .search { height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--input-border); background: var(--input-bg); color: var(--ink); font: inherit; font-size: 13px; }
#ws-picker .brands { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding-right: 2px; }
#ws-picker .bhead { display: flex; justify-content: space-between; align-items: center; padding: 6px 2px 2px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; border: none; background: transparent; cursor: default; text-align: left; }
#ws-picker .bhead.toggle { cursor: pointer; color: var(--ink-2); }
#ws-picker .bhead i { font-style: normal; color: var(--ink-3); font-weight: 500; letter-spacing: 0; text-transform: none; }
#ws-picker .swatches { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; }
#ws-picker .sw { aspect-ratio: 1; border-radius: 7px; border: 1px solid rgba(128,128,128,.35); cursor: pointer; padding: 0; position: relative; }
#ws-picker .sw.active { outline: 2px solid var(--orange); outline-offset: 2px; }
#ws-picker .sw.pick::after { content: '★'; position: absolute; right: 1px; bottom: -1px; font-size: 9px; color: #fff; text-shadow: 0 0 2px rgba(0,0,0,.8); }
#ws-picker .foot { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; border-top: 1px solid var(--hair); }
#ws-picker .foot .buy { font-size: 13px; font-weight: 700; color: var(--ink); text-decoration: none; }
#ws-picker .foot .disc, #ws-shop .disc { font-size: 11px; color: var(--ink-3); line-height: 1.4; }
#ws-picker .foot .key { align-self: flex-start; }
#ws-partcard { position: absolute; left: 50%; bottom: 100px; transform: translateX(-50%); width: 440px; box-sizing: border-box; padding: 12px 14px; border-radius: 16px; display: flex; flex-direction: column; gap: 10px; z-index: 6; }
#ws-partcard[hidden] { display: none; }
#ws-partcard .chead { display: flex; align-items: center; gap: 10px; }
#ws-partcard .chead .col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#ws-partcard .chead b { font-size: 14px; }
#ws-partcard .meta, #ws-shop .meta { font-size: 11px; color: var(--ink-2); }
#ws-partcard .chips { display: flex; flex-wrap: wrap; gap: 6px; }
#ws-partcard .zchip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--key-border); background: var(--key-bg); color: var(--ink); font-size: 12px; font-weight: 600; cursor: pointer; }
#ws-partcard .zchip.on { border-color: var(--orange); box-shadow: var(--key-on-shadow); }
#ws-partcard .zchip i { width: 12px; height: 12px; border-radius: 999px; border: 1px solid rgba(128,128,128,.4); }
#ws-partcard .cacts { display: flex; gap: 6px; }
#ws-partcard a.key { display: inline-flex; align-items: center; text-decoration: none; }
#ws-shop { position: absolute; left: 50%; bottom: 100px; transform: translateX(-50%); width: 420px; max-height: 60vh; overflow-y: auto; box-sizing: border-box; padding: 14px 16px; border-radius: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 6; }
#ws-shop[hidden] { display: none; }
#ws-shop .ihead { display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
#ws-shop .frow { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 10px; border-radius: 10px; }
#ws-shop .frow .col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#ws-shop .frow b { font-size: 13px; }
#ws-shop .link { font-size: 12px; font-weight: 600; text-decoration: none; color: var(--ink); }
#ws-dock .status.stack { gap: 10px; }
#ws-dock .status.stack[disabled] { cursor: default; }
#ws-dock .stacks { display: inline-flex; gap: 2px; }
#ws-dock .stacks:empty { display: none; }
html[data-ws="colors"] #ws-tools { left: 344px; right: 364px; }
@media (max-width: 1279px) { #ws-colors, #ws-picker { top: 134px; } }

/* ---- Colors, the per-unit layer ---- */
#ws-picker .head .region { font-size: 13px; color: var(--orange); }
#ws-picker .resets { display: flex; gap: 6px; }
#ws-colors .crow .own, #ws-partcard .zchip .tag { margin-left: 6px; font-family: var(--font-mono); font-size: 9px; letter-spacing: .06em; padding: 1px 5px; border-radius: 4px; background: var(--orange); color: var(--on-orange); font-weight: 700; }
#ws-partcard .zchip.own { border-color: var(--orange); }

/* ---- Labels (phase 5): the list panel, the selected drawer, the editor card, the dialog, the previews ---- */
#ws-labels { position: absolute; top: 90px; left: 20px; bottom: 116px; width: 324px; box-sizing: border-box; padding: 14px 16px 12px; border-radius: 18px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
#ws-labels .head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
#ws-labels h2, #ws-labeledit h2 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 20px; font-stretch: 108%; }
#ws-labels .count { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); text-align: right; }
#ws-labels .head .tools { display: inline-flex; gap: 2px; align-self: center; }
#ws-labels .ways { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
#ws-labels .key.tile { display: flex; align-items: center; justify-content: flex-start; gap: 8px; height: 38px; padding: 0 12px; border-radius: 10px; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; }
#ws-labels .key.tile svg { flex: none; color: var(--ink-2); }
#ws-labels .key.tile.brand svg:first-child { width: 16px; height: 16px; color: var(--orange); }
#ws-labels .key.tile.brand { border-color: var(--orange-edge); }
#ws-labels .key.tile.brand svg:last-child { margin-left: auto; color: var(--ink-3); }
/* the hover hint: a bubble with a looping scene beside the control (js/ui/hint.js) */
#ws-hint { position: fixed; z-index: 60; width: 264px; box-sizing: border-box; padding: 8px 8px 10px; border-radius: 14px; pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity var(--d-pop) var(--ease-out), transform var(--d-pop) var(--ease-out); }
#ws-hint[hidden] { display: none; }
#ws-hint.show { opacity: 1; transform: none; }
#ws-hint .scene { border-radius: 9px; overflow: hidden; background: #1d2230; }
#ws-hint .scene svg, #ws-hint .scene video { display: block; width: 100%; height: auto; aspect-ratio: 240 / 110; object-fit: cover; }
#ws-hint .t { margin: 8px 4px 0; font-size: 12px; font-weight: 700; }
#ws-hint .d { margin: 2px 4px 0; font-size: 11px; line-height: 1.4; color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) { #ws-hint .scene svg animate, #ws-hint .scene svg animateTransform { display: none; } }
#ws-labels .key.tile[disabled] { opacity: .45; cursor: not-allowed; }
#ws-labels .fillrow { display: flex; flex-direction: column; gap: 3px; }
#ws-labels .fillrow .wide { width: 100%; }
#ws-labels .fillrow .why { padding-left: 2px; }
#ws-labels .row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
#ws-labels .row.top:empty { display: none; }
#ws-labels .key.sm, #ws-labeledit .key.sm, #ws-modal .key { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 8px; font-size: 12px; font-weight: 600; white-space: nowrap; }
#ws-labels .key.sm[disabled] { opacity: .45; cursor: not-allowed; }
#ws-labels .last { margin: -2px 0 0; font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ws-labels .banner { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--orange); color: var(--on-orange); font-size: 12px; font-weight: 700; }
#ws-labels .banner .key.sm { height: 28px; }
/* labels kept aside and offered back: a quieter banner that stacks its line and its three choices */
#ws-labels .banner.copy { flex-direction: column; align-items: stretch; background: var(--glass-bg); color: var(--ink); font-weight: 500; border: 1px solid var(--glass-border); }
#ws-labels .banner.copy .btns { display: flex; gap: 6px; flex-wrap: wrap; }
#ws-labels .callout { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--warn-bg); color: var(--warn-fg); font-size: 12px; }
#ws-labels .callout p { margin: 0; }
#ws-labels .callout .dim, #ws-labels .why, #ws-labels .dim, #ws-labeledit .dim { font-size: 11px; color: var(--ink-3); }
#ws-labels .hint { margin: 0; font-size: 12px; color: var(--ink-2); }
#ws-labels .scroll { flex: 1; min-height: 60px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; margin: 0 -6px; padding: 0 6px; }
#ws-labels .list { display: flex; flex-direction: column; gap: 4px; }
#ws-labels .item { display: flex; align-items: center; gap: 4px; }
#ws-labels .chip-l { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 5px 8px; border-radius: 12px; border: 1px solid var(--hair); background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
#ws-labels .chip-l:hover { background: var(--track); }
#ws-labels .chip-l.on { border-color: var(--orange); box-shadow: 0 0 0 2px var(--orange-edge); }
#ws-labels .chip-l[disabled] { opacity: .5; cursor: not-allowed; }
/* the Part Picker modal: the Studio's picker in a frame over the workspace, a small border of the planner around it */
#ws-partpicker { position: fixed; inset: 0; z-index: 70; display: flex; padding: 18px; background: rgba(6, 5, 20, .55); }
#ws-partpicker[hidden] { display: none; }   /* the flex above would beat the hidden attribute */
#ws-partpicker .frame { flex: 1; display: flex; flex-direction: column; min-width: 0; border-radius: 16px; overflow: hidden; }
#ws-partpicker .head { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; border-bottom: 1px solid var(--glass-border); }
#ws-partpicker .head h2 { margin: 0; font-size: 15px; }
#ws-partpicker .head .sub { flex: 1; min-width: 0; font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ws-partpicker .head .link { font-size: 12px; color: var(--warning, var(--orange)); max-width: 46%; }
#ws-partpicker .head .link:empty { display: none; }
#ws-partpicker iframe { flex: 1; width: 100%; border: 0; background: #1D1E20; }
#ws-labels .chip-l.new { box-shadow: 0 0 0 2px var(--orange-edge); }
@media (max-width: 1023px) { #ws-partpicker { padding: 6px; } #ws-partpicker .head .sub { display: none; } }
/* a label dragged from the list: the ghost follows the pointer; the page says it is carrying something */
#ws .drag-ghost { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; padding: 6px 10px; border-radius: 10px; font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
body.dragging-label, body.dragging-label * { cursor: grabbing !important; user-select: none; }
#ws-labels .chip-l .tag { font-family: var(--font-mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; padding: 2px 5px; border-radius: 4px; background: var(--warn-bg); color: var(--warn-fg); flex: none; }
#ws-labels .mini { width: 28px; height: 28px; padding: 0; border: none; border-radius: 7px; background: transparent; color: var(--ink-3); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: none; }
#ws-labels .mini:hover { background: var(--track); color: var(--ink); }
#ws-labels .ident, #ws-labeledit .ident { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
#ws-labels .ident .words, #ws-labeledit .ident .words { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ws-labels .ident .detail, #ws-labeledit .ident .detail { font-size: 11px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ws-labels .ident .src { font-size: 10px; color: var(--ink-3); }
#ws-labels .placed h4 { margin: 0 0 4px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
#ws-labels .rows { display: flex; flex-direction: column; gap: 4px; }
#ws-labels .prow { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 8px; border-radius: 10px; border: 1px solid var(--hair); background: transparent; color: var(--ink); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
#ws-labels .prow .lprev { width: 56px; }
#ws-labels .prow .words { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
#ws-labels .prow .where { font-size: 11px; color: var(--ink-2); white-space: nowrap; }
#ws-labels .prow.sel { border-color: var(--orange); background: var(--key-on-bg); }
#ws-labels .prow.sel .where { padding: 1px 6px; border-radius: 5px; background: var(--orange); color: var(--on-orange); font-weight: 700; }
#ws-labels .drawer { display: flex; flex-direction: column; gap: 8px; padding: 10px 10px 8px; border-radius: 12px; border: 1px solid var(--orange); background: var(--key-on-bg); }
#ws-labels .dhead { display: flex; align-items: center; gap: 8px; }
#ws-labels .dhead .tag { padding: 2px 7px; border-radius: 6px; background: var(--orange); color: var(--on-orange); font-size: 11px; font-weight: 700; }
#ws-labels .dhead .size { flex: 1; min-width: 0; font-size: 11px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ws-labels .x, #ws-labeledit .x { width: 26px; height: 26px; padding: 0; border: none; background: transparent; color: var(--ink-3); border-radius: 7px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
#ws-labels .none { margin: 0; font-size: 12px; color: var(--ink-2); }
#ws-labels .dlabel { display: flex; align-items: center; gap: 10px; }
#ws-labels .acts { display: flex; flex-wrap: wrap; gap: 6px; }
#ws-labels .foot { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; border-top: 1px solid var(--hair); }
#ws-labels .status { margin: 0; font-size: 12px; color: var(--ink-2); }
#ws-labels .status.warn { color: var(--warn-fg); }
#ws-labels .settings summary { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; cursor: pointer; list-style: none; padding: 4px 0; }
#ws-labels .settings summary::-webkit-details-marker { display: none; }
#ws-labels .settings summary .dim { margin-left: auto; font-weight: 500; }
#ws-labels .srow { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; font-size: 12px; }
#ws-labels .srow .unit { display: inline-flex; align-items: center; gap: 4px; }
#ws-labels .srow input { width: 64px; height: 28px; padding: 0 6px; border-radius: 7px; border: 1px solid var(--input-border); background: var(--input-bg); color: var(--ink); font: inherit; font-size: 12px; }
#ws-labels .srow .track { grid-template-columns: 1fr 1fr; padding: 3px; gap: 3px; border-radius: 9px; }
#ws-labels .srow .seg.sm { height: 26px; padding: 0 10px; font-size: 11px; }
/* the previews: the real outline (EdgeLabel's slanted edge; Classic Pro's bar), the icon art as a mask, the words */
.lprev { flex: none; width: 84px; aspect-ratio: 55.6 / 27; position: relative; display: flex; align-items: center; gap: 3px; padding: 3px 4px; box-sizing: border-box; background: #f4f1ec; color: #1b1b1b; clip-path: polygon(0 0, 100% 0, 53.3% 100%, 0 100%); overflow: hidden; }
.lprev.cp { aspect-ratio: 47 / 18; clip-path: none; border-radius: 3px; }
.lprev.big { width: 120px; }
.lprev .lico { flex: 0 0 auto; width: 34%; height: 78%; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.lprev .lch { flex: 0 0 auto; width: 30%; font-weight: 800; font-size: 13px; text-align: center; line-height: 1; }
.lprev .lw { font-weight: 800; font-size: 8.5px; line-height: 1.05; text-transform: uppercase; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; max-width: 64%; }
.lprev.big .lw { font-size: 11.5px; }
.lprev.nocaps .lw { text-transform: none; }
.lprev .lw small { display: block; font-weight: 600; font-size: .82em; }
/* the editor card */
#ws-labeledit { position: absolute; top: 90px; right: 20px; bottom: 116px; width: 304px; box-sizing: border-box; padding: 14px 16px 12px 19px; border-radius: 18px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
#ws-labeledit[hidden] { display: none; }
#ws-labeledit .head { display: flex; align-items: center; justify-content: space-between; }
#ws-labeledit .prev { display: flex; justify-content: center; padding: 6px 0; }
#ws-labeledit .note { margin: 0; font-size: 12px; color: var(--ink-2); }
#ws-labeledit .frow { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; }
#ws-labeledit .frow > span:first-child { flex: none; width: 48px; color: var(--ink-2); }
#ws-labeledit input.words, #ws-labeledit input.search, #ws-modal input.field { flex: 1; min-width: 0; height: 34px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--input-border); background: var(--input-bg); color: var(--ink); font: inherit; font-size: 13px; }
#ws-labeledit input.letter { width: 64px; height: 30px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--input-border); background: var(--input-bg); color: var(--ink); font: inherit; font-size: 13px; font-weight: 700; text-transform: uppercase; }
#ws-labeledit .track { padding: 3px; gap: 3px; border-radius: 9px; }
#ws-labeledit .track.seg2 { grid-template-columns: 1fr 1fr; }
#ws-labeledit .track.seg3 { grid-template-columns: 1fr 1fr 1fr; }
#ws-labeledit .seg.sm { height: 28px; font-size: 11px; }
#ws-labeledit .igrid { display: flex; flex-direction: column; gap: 4px; }
#ws-labeledit .igroup .ghead { display: flex; align-items: center; gap: 6px; width: 100%; height: 30px; padding: 0 6px; border: none; border-radius: 7px; background: transparent; color: var(--ink); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; text-align: left; }
#ws-labeledit .igroup .ghead:hover { background: var(--track); }
#ws-labeledit .igroup .ghead .dim { margin-left: auto; }
#ws-labeledit .igroup .ghead svg { transition: transform var(--d-pop) var(--ease-out); }
#ws-labeledit .igroup.open .ghead svg { transform: rotate(90deg); }
#ws-labeledit .cells { display: none; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 4px; padding: 2px 0 6px; }
#ws-labeledit .igroup.open .cells { display: grid; }
#ws-labeledit .cell { aspect-ratio: 1; padding: 6px; border-radius: 8px; border: 1px solid var(--hair); background: var(--input-bg); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
#ws-labeledit .cell svg { width: 100%; height: 100%; }
#ws-labeledit .cell:hover { background: var(--track); }
#ws-labeledit .cell.on { border-color: var(--orange); box-shadow: 0 0 0 2px var(--orange-edge); }
#ws-labeledit .row { display: flex; gap: 6px; }
/* the dialog: Replace, Fill, Use custom wording, Add a label */
#ws-modal { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0, 0, 0, .35); z-index: 30; }
#ws-modal[hidden] { display: none; }
#ws-modal .box { width: 380px; max-width: 100%; max-height: 100%; overflow-y: auto; box-sizing: border-box; padding: 16px 18px 14px; border-radius: 16px; display: flex; flex-direction: column; gap: 10px; }
#ws-modal h3 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 17px; font-stretch: 108%; }
#ws-modal p { margin: 0; font-size: 13px; color: var(--ink-2); }
#ws-modal .pairs { display: flex; flex-direction: column; gap: 3px; max-height: 32vh; overflow-y: auto; }
#ws-modal .pair { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; padding: 4px 8px; border-radius: 7px; background: var(--track); }
#ws-modal .rest { font-size: 12px; }
#ws-modal .btns { display: flex; justify-content: flex-end; gap: 6px; padding-top: 4px; }
html[data-ws="labels"] #ws-tools { left: 364px; right: 344px; }
@media (max-width: 1279px) { #ws-labels, #ws-labeledit { top: 134px; } }

/* ---- the setup sheet: mount, length, printer, the name (js/ui/setup.js) ---- */
#ws-setup { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0, 0, 0, .4); font-family: var(--font-ui); color: var(--ink); font-size: 13px; }
#ws-setup .sheet { width: 680px; max-width: 100%; max-height: 100%; overflow-y: auto; box-sizing: border-box; padding: 18px 20px 16px; border-radius: 20px; display: flex; flex-direction: column; gap: 12px; }
#ws-setup .head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
#ws-setup h2 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 22px; font-stretch: 108%; }
#ws-setup .sub { margin: 2px 0 0; font-size: 12px; color: var(--ink-2); }
#ws-setup .x { width: 32px; height: 32px; padding: 0; border: none; background: transparent; color: var(--ink-3); border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
#ws-setup .namerow { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ink-2); }
#ws-setup .namerow input { flex: 1; min-width: 0; height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--input-border); background: var(--input-bg); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; }
#ws-setup .track.steps { grid-template-columns: 1fr 1fr 1fr; }
#ws-setup .steps .seg { height: auto; padding: 8px 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; }
#ws-setup .steps .seg b { font-size: 12px; }
#ws-setup .steps .seg span { font-size: 11px; font-weight: 500; color: var(--ink-2); }
#ws-setup .steps .seg.on span { color: var(--ink); }
#ws-setup .body { display: flex; flex-direction: column; gap: 10px; }
#ws-setup .cards { display: grid; gap: 8px; }
#ws-setup .cards.mounts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#ws-setup .cards.lengths { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#ws-setup .card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px; border-radius: 14px; border: 1px solid var(--hair); background: var(--input-bg); color: var(--ink); font: inherit; text-align: left; cursor: pointer; min-width: 0; }
#ws-setup .card:hover { background: var(--track); }
#ws-setup .card.on { border-color: var(--orange); box-shadow: 0 0 0 2px var(--orange-edge); }
#ws-setup .card.dis { opacity: .5; cursor: not-allowed; }
#ws-setup .card .ico { color: var(--ink-2); margin-bottom: 2px; }
#ws-setup .card b { font-size: 14px; }
#ws-setup .card .blurb, #ws-setup .card .use { font-size: 11px; color: var(--ink-2); line-height: 1.35; }
#ws-setup .card .note { font-size: 11px; font-weight: 600; color: var(--ink-3); }
#ws-setup .card .stripe { display: block; width: 100%; height: 6px; border-radius: 3px; margin-bottom: 4px; }
#ws-setup .card .lrow { display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%; }
#ws-setup .card .lname { font-size: 12px; font-weight: 600; }
#ws-setup .card .badge { font-size: 9px; letter-spacing: .06em; padding: 2px 6px; border-radius: 5px; font-weight: 700; }
#ws-setup .card .badge.rec { background: var(--orange); color: var(--on-orange); }
#ws-setup .card .badge.warn { background: var(--warn-bg); color: var(--warn-fg); }
#ws-setup .card .lost { font-size: 11px; color: var(--warn-fg); }
#ws-setup .space .hint, #ws-setup .hint, #ws-setup .tip { margin: 0; font-size: 12px; color: var(--ink-2); }
#ws-setup .row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#ws-setup .num { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
#ws-setup input[type="number"] { width: 90px; height: 32px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--input-border); background: var(--input-bg); color: var(--ink); font: inherit; font-size: 13px; }
#ws-setup .unit { font-size: 11px; color: var(--ink-3); }
#ws-setup .selrow { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ink-2); }
#ws-setup select { flex: 1; min-width: 0; height: 36px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--input-border); background: var(--input-bg); color: var(--ink); font: inherit; font-size: 13px; }
#ws-setup .foot { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px solid var(--hair); }
#ws-setup .fit { margin: 0; font-size: 12px; font-weight: 600; }
#ws-setup .warn { margin: 0; font-size: 12px; color: var(--warn-fg); }
#ws-setup .btns { display: flex; align-items: center; gap: 6px; }
#ws-setup .btns .spacer { flex: 1; }
#ws-setup .btns .key { height: 36px; padding: 0 14px; border-radius: 10px; font-size: 13px; font-weight: 600; }
#ws-setup .cta { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 12px; background: var(--orange); color: var(--on-orange); border: 1px solid var(--orange-edge); font-family: var(--font-display); font-weight: 800; font-size: 15px; font-stretch: 110%; cursor: pointer; box-shadow: var(--cta-shadow); }
@media (max-width: 1023px) {
  #ws-setup { padding: 0; align-items: flex-end; }
  #ws-setup .sheet { width: 100%; max-height: 92vh; border-radius: 18px 18px 0 0; padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px)); }
  #ws-setup .cards.mounts { grid-template-columns: 1fr; }
  #ws-setup .cards.mounts .card { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
  #ws-setup .cards.lengths { grid-template-columns: 1fr 1fr; }
}

/* ---- the phone layout (<= 1023 px): a bottom tab bar, panels as bottom sheets, a slim dock (the brief §2) ---- */
#ws-tabbar { display: none; }
@media (max-width: 1023px) {
  /* the bar (Joey's phone, 2026-10-13: at 390-412 px the switcher was a sliver under the wordmark): the wordmark,
     the build name with its caret, mount·length as icon + number, and ONE theme button (the other mode's icon);
     Share lives in the switcher menu, the printer chip waits for the setup sheet, the tabs are the bottom bar */
  #ws-top { top: 10px; left: 10px; right: 10px; gap: 6px; }
  #ws-top #ws-tabs, #ws-top .preview, #ws-top .printer, #ws-top .share, #ws-top .spacer { display: none; }
  #ws-top #ws-switch { flex: 1; min-width: 0; margin-left: 0; }
  #ws-top #ws-switch > .chip-btn { width: 100%; padding: 0 10px; gap: 6px; }
  #ws-top #ws-switch > .chip-btn > :first-child { display: none; }
  #ws-top #ws-switch > .chip-btn > span { flex: 1; max-width: none; text-align: left; }
  #ws-switch .menu { width: min(260px, calc(100vw - 20px)); }
  #ws-top .chip-btn.mount { padding: 0 10px; flex: none; }
  #ws-top .chip-btn.mount .lbl { display: none; }
  #ws-theme button.on { display: none; }
  #ws-logo img { height: 22px; }
  #ws-tabbar { display: flex; position: absolute; left: 0; right: 0; bottom: 0; height: 64px; justify-content: space-around; align-items: stretch; padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px)); border-radius: 0; border-width: 1px 0 0 0; z-index: 12; }
  #ws-tabbar .tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: none; background: transparent; color: var(--ink-2); font-size: 10px; font-weight: 600; position: relative; border-radius: 10px; }
  #ws-tabbar .tab.on { color: var(--orange); }
  #ws-tabbar .tab .badge { position: absolute; top: 3px; right: 8%; font-size: 9px; padding: 1px 5px; }
  /* the tools row: every workspace's desktop offset (left: 320/344/480/860 px) loses to the phone's full row */
  #ws-tools, html[data-ws] #ws-tools, html.ws-parts-wide[data-ws="parts"] #ws-tools { top: 64px; left: 10px; right: 10px; gap: 6px; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  #ws-tools .quality { display: none; }
  /* the dock: status and the CTA always fit; the units·mm group yields to a progress bar or a filament stack */
  #ws-dock { left: 10px; right: 10px; bottom: 70px; transform: none; padding: 6px 6px 6px 8px; gap: 8px; justify-content: space-between; border-radius: 14px; z-index: 11; min-width: 0; }
  #ws-dock .group { gap: 4px; }
  #ws-dock .group:nth-of-type(2), #ws-dock:has(.pbar) .group, #ws-dock:has(.status.stack) .group { display: none; }
  #ws-dock .big { font-size: 16px; }
  #ws-dock .unit-lbl { font-size: 11px; }
  #ws-dock .status { height: 36px; padding: 0 10px; font-size: 12px; flex: none; }
  #ws-dock .status.stack .stacks i:nth-child(n+5) { display: none; }
  #ws-dock .cta { height: 40px; padding: 0 12px; font-size: 13px; gap: 6px; flex: none; }
  #ws-dock .pbar { flex: 1; width: auto; min-width: 56px; }
  #ws-dock .pbar .mono { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #ws-dock .pbar .long { display: none; }
  #ws-dock .pbar .short { display: block; }
  /* sheets: the handle stays put while the sheet scrolls under it; the sheet manager sets bottom and max-height
     inline from the live dock height (the Assemble player is taller than the dock) */
  #ws .sheet { position: absolute; left: 0; right: 0; top: auto; bottom: 126px; width: auto; max-height: 56vh; box-sizing: border-box; border-radius: 18px 18px 0 0; padding: 0 14px 14px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; transform: translateY(calc(100% - var(--peek, 44px))); clip-path: inset(0 0 calc(100% - var(--peek, 44px)) 0); transition: transform var(--d-pop) var(--ease-out), clip-path var(--d-pop) var(--ease-out); z-index: 10; animation: none; }   /* collapsed: only the peek shows; the rest is clipped, not just slid behind the dock (it showed through the Assemble player's glass) */
  #ws .sheet.open { transform: none; clip-path: inset(0); overflow-y: auto; z-index: 13; }
  #ws .sheet[hidden] { display: none; }
  #ws .sheet-handle { position: sticky; top: 0; z-index: 2; flex: none; display: flex; align-items: center; gap: 10px; height: 44px; margin: 0 -14px; padding: 0 16px; background: var(--glass-bg); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: none; }
  #ws .sheet-handle .grab { width: 36px; height: 4px; border-radius: 2px; background: var(--ink-3); opacity: .5; }
  #ws .sheet-handle .ttl { flex: 1; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #ws .sheet-handle .chev { color: var(--ink-3); display: inline-flex; }
  #ws .sheet-peek { flex: none; height: 40px; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-2); }
  #ws .sheet > .tabs { margin-top: 0; }
  #ws .sheet .collapse, #ws .sheet.rail .expand, #ws .sheet .railbtn { display: none; }
  #ws-lib.sheet.rail { width: auto; padding: 0 14px 14px; align-items: stretch; }
  #ws-board { top: 110px; left: 10px; right: 10px; bottom: 176px; }
  #ws-issues, #ws-partcard, #ws-shop, #ws-choice { width: auto; left: 10px; right: 10px; transform: none; bottom: 132px; max-height: 44vh; }
  #ws-menu { width: 180px; }
  /* Parts: the head wraps (the four download sites on a row of their own, Track under them); Expand is a desktop
     control */
  #ws-parts.wide { width: auto; }
  #ws-parts .head { padding: 0 0 10px; gap: 8px; }
  #ws-parts .row1 .expand { display: none; }
  #ws-parts .row2 { flex-wrap: wrap; gap: 2px 8px; }
  #ws-parts .row2 .dim { text-align: left; }
  #ws-parts .row3 { flex-wrap: wrap; }
  #ws-parts .sites { flex: 1 1 100%; }
  #ws-parts .sites .seg { padding: 0 2px; min-width: 0; overflow: hidden; }
  #ws-parts .row3 > .key { flex: 1; }
  #ws-parts .body { padding: 0 0 8px; }
  #ws-parts .thead, #ws-parts .prow.trow { grid-template-columns: 14px minmax(0, 1fr) 40px 96px 96px 60px; }
  #ws-parts .thead span:last-child, #ws-parts .prow.trow > :last-child { display: none; }
  #ws-colors .scheme .shop { display: none; }
  /* Labels: the panel and the editor are sheets; the list scrolls with the sheet, not inside it */
  #ws-labels .scroll { flex: none; overflow: visible; min-height: 0; margin: 0; padding: 0; }
  #ws-labels .key.tile { height: 42px; }
  #ws-modal { position: fixed; z-index: 40; }
  #ws-modal .box { width: 100%; }
  /* Assemble: the player sits on the bar as a compact card (the note gets the width, the colour switch and the
     pips take rows of their own); the steps sheet stacks above it */
  #ws-player { left: 10px; right: 10px; width: auto; transform: none; bottom: 70px; padding: 10px 12px; gap: 8px; border-radius: 16px; z-index: 11; }
  #ws-player .row1 { flex-wrap: wrap; gap: 8px 10px; }
  #ws-player .row1 > div:not(.colors) { flex: 1; min-width: 0; }
  #ws-player .row1 .colors { flex: 1 1 100%; margin-left: 0; display: grid; grid-template-columns: 1fr 1fr; }
  #ws-player .colors .seg { height: 28px; padding: 0; }
  #ws-player .num { width: 30px; height: 30px; font-size: 13px; }
  #ws-player .title { font-size: 16px; }
  #ws-player .text { font-size: 13px; line-height: 1.45; max-height: 24vh; overflow-y: auto; }
  #ws-player .row2 { flex-wrap: wrap; gap: 6px; }
  #ws-player .pips { flex: 1 1 100%; order: -1; }
  #ws-player .row2 .key { height: 38px; padding: 0 10px; flex: 1; font-size: 12px; }
  #ws-player .row2 .sq { flex: none; width: 40px; }
}

/* ---- toast ---- */
#ws-toast { position: absolute; left: 50%; bottom: 100px; transform: translateX(-50%); padding: 10px 14px; border-radius: 12px; font-size: 13px; font-weight: 600; opacity: 0; transition: opacity var(--d-pop) var(--ease-out); pointer-events: none; }
#ws-toast.show { opacity: 1; }

/* ---- narrow desktop (1024-1279): the panels keep their width, the middle gets tight ---- */
/* up to 1500 px the bar is one row but tight: the printer and Share chips go icon-only and the build name shortens */
@media (max-width: 1500px) {
  #ws-top .printer span, #ws-top .share span { display: none; }
  #ws-top .chip-btn.printer, #ws-top .chip-btn.share { padding: 0 12px; }
  #ws-switch > .chip-btn > span { max-width: 120px; }
}
/* narrow desktop (1024-1279): the workspace tabs keep their names on a row of their own under the bar, and the
   panels start below it; the chips go icon-only */
@media (max-width: 1279px) {
  #ws-tools .quality span { display: none; }
  #ws-top .printer span, #ws-top .share span { display: none; }
  #ws-top .chip-btn.printer, #ws-top .chip-btn.share { padding: 0 12px; }
  #ws-switch > .chip-btn > span { max-width: 120px; }
  #ws-tabs { position: absolute; top: 70px; left: 50%; transform: translateX(-50%); }
  #ws-top .spacer { flex: 1; }
  #ws-lib, #ws-insp, #ws-tools, #ws-steps { top: 134px; }
  #ws-dock { gap: 14px; }
}
@media (prefers-reduced-motion: reduce) { #ws-insp { animation: none; } }