/* ============================================================================
   THE CUT FLOOR — Cabinet Studio job + room views (PR-CUTFLOOR 2026-06-14)
   The BENCH design language re-scoped onto the studio as a MANUFACTURING
   command surface: a GATE → YIELD → FIX → ROUTE → PACKET spine where the
   release gate is the page and yield/cost/parts hang off it. Cool-graphite
   palette, light + dark, SCOPED to the studio roots so the rest of the app is
   untouched. bench-studio.js sets data-bench=light|dark from theme luminance.
   ============================================================================ */

/* ---- graphite tokens: DARK (default) — scoped to studio roots --------------
   Job view recolors the whole hub (#cab-job). The Design Dashboard recolors the
   whole studio landing (#cab-dash) the same way. Room view scopes ONLY to the
   CUT FLOOR header (#cutfloor-room) so the inspector + 3D editor chrome stay on
   the app theme — the header reads as an intentional graphite accent panel.
   The dashboard/job markup is fully token-based, so overriding the tokens here
   recolors the whole surface with no per-element rewrite. */
/* THEME (2026-07-18 v2): the studios now INHERIT the global theme tokens
   (--bg/--pn/--txt/--acc/… from :root[data-theme] in tokens.css/app.css) —
   NO separate palette. This killed the light-page/dark-content MIX: the old
   override defaulted these containers to DARK and only flipped via a
   `data-bench` flag that nothing ever set on them, so in light theme the
   studio content stayed dark on a light page. Inheriting means the studios
   are ALWAYS consistent with the rest of the app in BOTH themes. --teal is
   the one accent the studio markup uses that the global palette doesn't
   define (dark default here + light override below). */
#cab-job, #cab-dash, #cutfloor-room, #d-orders {
  --teal:#2DD4BF; --teal-ink:#06231F;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
:root[data-theme="light"] #cab-job,
:root[data-theme="light"] #cab-dash,
:root[data-theme="light"] #cutfloor-room,
:root[data-theme="light"] #d-orders {
  --teal:#0E9C8C; --teal-ink:#FFFFFF;
}

/* ---- shared CUT FLOOR atoms ---------------------------------------------- */
.cf { font-family: var(--ff-ui, 'Inter', system-ui, sans-serif); display:flex; flex-direction:column; gap:16px; }
.cf-mono { font-family: var(--ff-mono, 'JetBrains Mono', ui-monospace, monospace); font-variant-numeric: tabular-nums; }
.cf-block { background:var(--pn); border:1px solid var(--bdr); border-radius:12px; padding:16px 18px; }
.cf-label { font:590 12px var(--ff-ui); letter-spacing:.085em; text-transform:uppercase; color:var(--dim); margin:0 0 12px; display:flex; align-items:center; gap:10px; }
.cf-label .cf-label-meta { margin-left:auto; font:600 11px var(--ff-mono); color:var(--muted); letter-spacing:.02em; text-transform:none; }
.cf-dim { color:var(--muted); }
.cf-link { color:var(--acc); cursor:pointer; font:600 12px var(--ff-ui); }
.cf-link:hover { text-decoration:underline; }
/* PR-JOBHDR-CONSOLIDATE (2026-08-11): the single room-creation split button in the
   ROOMS rollup — accent split button (matches the New-Job style); ▾ opens whole-house
   loop + floor-plan import. Replaces the 3 duplicate room buttons that were up top. */
.cf-newroom { display:inline-flex; align-items:stretch; }
.cf-newroom-btn { display:inline-flex; align-items:center; gap:6px; padding:7px 13px; background:var(--acc); color:var(--acc-ink); border:none; border-radius:7px 0 0 7px; font:700 12px var(--ff-ui); letter-spacing:0; text-transform:none; cursor:pointer; transition:filter .12s ease; }
.cf-newroom-caret { display:inline-flex; align-items:center; justify-content:center; min-width:26px; padding:7px 8px; background:var(--acc); color:var(--acc-ink); border:none; border-left:1px solid color-mix(in srgb, var(--acc-ink) 28%, transparent); border-radius:0 7px 7px 0; font-size:11px; cursor:pointer; font-family:inherit; transition:filter .12s ease; }
.cf-newroom-btn:hover, .cf-newroom-caret:hover { filter:brightness(1.07); }

/* ============================ RELEASE GATE (the spine) =================== */
.cf-gate { border:1px solid var(--bdr); border-radius:14px; background:var(--pn); overflow:hidden; }
.cf-gate[data-state="bad"]  { border-color:color-mix(in srgb, var(--no) 55%, var(--bdr)); }
.cf-gate[data-state="warn"] { border-color:color-mix(in srgb, var(--warn) 45%, var(--bdr)); }
.cf-gate-verdict { display:flex; align-items:center; gap:14px; padding:16px 20px; }
.cf-gate-dot { flex:0 0 auto; width:13px; height:13px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 4px color-mix(in srgb, var(--ok) 22%, transparent); }
.cf-gate[data-state="bad"]  .cf-gate-dot { background:var(--no);   box-shadow:0 0 0 4px color-mix(in srgb, var(--no) 22%, transparent); }
.cf-gate[data-state="warn"] .cf-gate-dot { background:var(--warn); box-shadow:0 0 0 4px color-mix(in srgb, var(--warn) 22%, transparent); }
.cf-gate-headline { font-size:clamp(17px,2vw,22px); font-weight:600; letter-spacing:-0.01em; color:var(--white); }
.cf-gate[data-state="bad"] .cf-gate-headline { color:var(--no); }
.cf-gate-sub { font:600 11px var(--ff-mono); color:var(--dim); margin-left:auto; white-space:nowrap; letter-spacing:.02em; }

/* the fix-path rows (decision-support, not just a count) */
.cf-rows { display:flex; flex-direction:column; border-top:1px solid var(--bdr); }
.cf-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:11px 20px; border-top:1px solid color-mix(in srgb, var(--bdr) 55%, transparent); cursor:pointer; transition:background .12s ease; }
.cf-row:first-child { border-top:none; }
.cf-row:hover, .cf-row:focus-visible { background:var(--pn-h); outline:none; }
.cf-row:focus-visible { box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--acc) 55%, transparent); }
.cf-tag { flex:0 0 auto; font:700 10.5px var(--ff-mono); letter-spacing:.06em; padding:3px 7px; border-radius:5px; white-space:nowrap; }
.cf-tag.is-block { background:color-mix(in srgb, var(--no) 16%, transparent); color:var(--no); }
.cf-tag.is-verify{ background:color-mix(in srgb, var(--warn) 16%, transparent); color:var(--warn); }
.cf-row-name { flex:0 0 auto; font-size:13.5px; font-weight:600; color:var(--white); }
.cf-row-why { flex:1 1 240px; min-width:0; font-size:13px; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cf-row-fix { flex:0 0 auto; font:600 12px var(--ff-ui); color:var(--acc); white-space:nowrap; }
/* PR-SHORT-WHY (2026-09-05): the row shows a few words; the kernel's full
   warning text sits below it, hidden until the "details" button is pressed.
   The button is plain text so it reads as a link, not a second action. */
.cf-row-more { flex:0 0 auto; margin-left:auto; background:none; border:none; padding:0; font:600 12px var(--ff-ui); color:var(--dim); cursor:pointer; white-space:nowrap; }
.cf-row-more:hover, .cf-row-more:focus-visible { color:var(--white); outline:none; text-decoration:underline; }
.cf-row-detail { flex:1 1 100%; min-width:0; margin:2px 0 0; padding:8px 12px; border-left:2px solid color-mix(in srgb, var(--dim) 45%, transparent); font-size:12.5px; line-height:1.5; color:var(--dim); white-space:normal; cursor:text; }
.cf-row.is-open .cf-row-why { white-space:normal; overflow:visible; text-overflow:clip; }
.cf-row-clear { padding:12px 20px; border-top:1px solid var(--bdr); font-size:13px; color:var(--ok); }
.cf-rows-more { padding:9px 20px; border-top:1px solid color-mix(in srgb, var(--bdr) 55%, transparent); font:600 12px var(--ff-ui); color:var(--acc); cursor:pointer; }

/* ============================ READ TILES (hang off the gate) ============= */
.cf-reads { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:14px; }
.cf-tile { background:var(--pn); border:1px solid var(--bdr); border-radius:12px; padding:14px 16px; display:flex; flex-direction:column; gap:8px; }
.cf-tile-row { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.cf-tile-k { font-size:12.5px; color:var(--dim); }
.cf-tile-v { font:700 16px var(--ff-mono); font-variant-numeric:tabular-nums; color:var(--white); }
.cf-tile-v.is-big { font-size:24px; line-height:1; }
.cf-tile-v.is-ok { color:var(--ok); } .cf-tile-v.is-warn { color:var(--warn); } .cf-tile-v.is-bad { color:var(--no); }
.cf-tile-v.is-nodata { color:var(--muted); }
.cf-tile-sub { font-size:11px; color:var(--muted); }

/* parts count chips */
.cf-parts { display:flex; gap:8px; flex-wrap:wrap; }
.cf-part { display:flex; flex-direction:column; align-items:center; min-width:62px; padding:8px 10px; background:var(--bg); border:1px solid var(--bdr); border-radius:8px; }
.cf-part-n { font:700 17px var(--ff-mono); color:var(--white); font-variant-numeric:tabular-nums; }
.cf-part-k { font:590 9.5px var(--ff-ui); letter-spacing:.06em; text-transform:uppercase; color:var(--dim); margin-top:2px; }

/* material-to-buy / list rows */
.cf-list { display:flex; flex-direction:column; gap:1px; }
.cf-list-row { display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid color-mix(in srgb, var(--bdr) 45%, transparent); }
.cf-list-row:last-child { border-bottom:none; }
.cf-list-name { flex:1 1 auto; min-width:0; font-size:13px; color:var(--txt); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cf-list-qty { flex:0 0 auto; font:600 12.5px var(--ff-mono); color:var(--dim); font-variant-numeric:tabular-nums; }
.cf-list-amt { flex:0 0 auto; font:600 12.5px var(--ff-mono); color:var(--txt); font-variant-numeric:tabular-nums; min-width:64px; text-align:right; }

/* yield hero slot (server-add pending) */
.cf-yield-pending { display:flex; align-items:center; gap:10px; font-size:13px; color:var(--muted); }
.cf-yield-pending .cf-yield-note { font-size:11.5px; }

/* rooms rollup */
.cf-rooms { display:flex; flex-direction:column; gap:8px; }
/* PR-JOBHUB-EMPTY-CARD (2026-09-02): roomless job — the Rooms card holds the
   middle of the page as a real empty state (headline / guidance / one action),
   not a one-line bar floating over whitespace. The button reuses .cf-newroom-btn
   and squares the split-control corner radius back off. */
.cf-rooms-empty { flex:1 1 100%; min-height:min(42vh, 420px); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; }
.cf-rooms-empty-t { font:600 18px var(--ff-ui); color:var(--txt); }
.cf-rooms-empty-s { font-size:13px; color:var(--muted); }
.cf-rooms-empty-btn { margin-top:12px; border-radius:7px; font-size:13px; padding:10px 18px; }
.cf-room-card { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 14px; background:var(--pn); border:1px solid var(--bdr); border-left:3px solid var(--bdr-h); border-radius:10px; cursor:pointer; transition:border-color .12s ease, background .12s ease; }
.cf-room-card[data-state="bad"]  { border-left-color:var(--no); }
.cf-room-card[data-state="warn"] { border-left-color:var(--warn); }
.cf-room-card[data-state="ok"]   { border-left-color:var(--ok); }
.cf-room-card:hover, .cf-room-card:focus-visible { background:var(--pn-h); border-color:var(--bdr-h); outline:none; }
.cf-room-name { flex:0 0 auto; font-size:14px; font-weight:600; color:var(--white); }
.cf-room-meta { flex:1 1 auto; min-width:0; font:12px var(--ff-mono); color:var(--dim); font-variant-numeric:tabular-nums; }
.cf-room-state { flex:0 0 auto; font:700 11px var(--ff-mono); }
.cf-room-state.is-bad { color:var(--no); } .cf-room-state.is-warn { color:var(--warn); } .cf-room-state.is-ok { color:var(--ok); }
.cf-room-open { flex:0 0 auto; color:var(--acc); font:600 12px var(--ff-ui); }
/* room management actions merged into the rollup card (Trim / Open 3D / delete) */
.cf-room-acts { flex:0 0 auto; display:flex; gap:6px; align-items:center; }
.cf-room-btn { font:600 11.5px var(--ff-ui); padding:5px 9px; border-radius:7px; background:var(--inp); color:var(--dim); border:1px solid var(--bdr); cursor:pointer; white-space:nowrap; transition:background .12s ease, color .12s ease, border-color .12s ease; }
.cf-room-btn:hover { background:var(--pn-h); color:var(--txt); border-color:var(--bdr-h); }
.cf-room-btn.is-pri { background:var(--acc); color:var(--acc-ink); border-color:var(--acc); }
.cf-room-btn.is-pri:hover { filter:brightness(1.06); }
.cf-room-btn.is-del { color:var(--no); border-color:color-mix(in srgb, var(--no) 35%, var(--bdr)); padding:5px 8px; }
.cf-room-btn.is-del:hover { background:color-mix(in srgb, var(--no) 14%, transparent); color:var(--no); }

/* fingerprint / stale stamp */
.cf-stamp { font:11px var(--ff-mono); color:var(--muted); display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.cf-stamp .cf-stale { color:var(--warn); font-weight:600; }
.cf-stamp .cf-restamp { color:var(--acc); cursor:pointer; }

/* shop packet launcher (greyed until gate clears) */
.cf-packet { display:inline-flex; align-items:center; gap:8px; padding:0 16px; min-height:42px; border-radius:10px; background:var(--acc); color:var(--acc-ink); border:1px solid var(--acc); font:600 13.5px var(--ff-ui); cursor:pointer; }
.cf-packet[disabled], .cf-packet.is-locked { background:var(--inp); color:var(--muted); border-color:var(--bdr); cursor:not-allowed; }

/* ============================ PROVENANCE (room, preview==cut) ============ */
.cf-prov { display:flex; flex-direction:column; gap:6px; }
.cf-prov-row { display:flex; align-items:baseline; gap:10px; padding:5px 0; border-bottom:1px solid color-mix(in srgb, var(--bdr) 40%, transparent); }
.cf-prov-row:last-child { border-bottom:none; }
.cf-prov-k { flex:0 0 96px; font-size:12px; color:var(--dim); }
.cf-prov-v { flex:1 1 auto; font-size:13px; font-weight:600; color:var(--white); }
.cf-prov-v.is-unresolved { color:var(--no); }
.cf-prov-src { flex:0 0 auto; font:11px var(--ff-mono); color:var(--muted); }

/* ============================================================================
   DESIGN DASHBOARD skin — match THE BENCH home (PR-CUTFLOOR-DASH 2026-06-14)
   Graphite tokens are already re-scoped onto #cab-dash above; this layers the
   BENCH *treatment* (capped/centered shell, type scale, KPI stat cards, chip
   status, airy rows, primary azure CTA) so the studio landing reads as the same
   product as the home page — not just a recoloured old table. All scoped to
   #cab-dash so no other page's .tab / .jobs-table / .pn is affected.
   ============================================================================ */
#cab-dash { padding:26px clamp(18px,4vw,40px) 72px; }
#cab-dash > * { max-width:1600px; margin-left:auto; margin-right:auto; }

/* hide the legacy breadcrumb (page title lives once in the studio header) */
#cab-dash #cab-crumbs { display:none; }

/* single tab bar — tabs (left) + primary actions (right), GitHub/Linear style */
:is(#cab-dash,#cab-job) .cab-dash-bar { display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; border-bottom:1px solid var(--bdr); margin:2px 0 20px; }
:is(#cab-dash,#cab-job) .cab-dash-bar .tabs { flex:1 1 auto; display:flex; gap:2px; border-bottom:none; margin:0; }
:is(#cab-dash,#cab-job) .cab-dash-bar .tab { background:transparent; border:none; color:var(--dim); font:600 13px var(--ff-ui); padding:10px 14px; border-bottom:2px solid transparent; border-radius:0; cursor:pointer; margin-bottom:-1px; transition:color .12s ease; }
:is(#cab-dash,#cab-job) .cab-dash-bar .tab:hover { color:var(--txt); }
:is(#cab-dash,#cab-job) .cab-dash-bar .tab.on { color:var(--white); border-bottom-color:var(--acc); }
#cab-dash .cab-hub-actions { flex:0 0 auto; display:flex; align-items:center; gap:10px; padding-bottom:6px; }
#cab-dash .cab-new-job-btn { background:var(--acc); color:var(--acc-ink); border:1px solid var(--acc); border-radius:9px; font:600 13.5px var(--ff-ui); min-height:38px; padding:0 16px; cursor:pointer; transition:filter .12s ease; }
#cab-dash .cab-new-job-btn:hover { filter:brightness(1.07); }
/* UX (2026-07-18): "+ New Room" in the JOB view mirrors "+ New Job" in the
   dashboard — same compact accent pill, same place (top-right action row). */
#cab-job .cab-new-job-btn { background:var(--acc); color:var(--acc-ink); border:1px solid var(--acc); border-radius:9px; font:600 13.5px var(--ff-ui); min-height:38px; padding:0 16px; cursor:pointer; transition:filter .12s ease; }
#cab-job .cab-new-job-btn:hover { filter:brightness(1.07); }
#cab-dash .cab-more-btn { background:var(--pn); border:1px solid var(--bdr); color:var(--dim); border-radius:9px; min-height:38px; min-width:38px; cursor:pointer; transition:border-color .12s ease, background .12s ease, color .12s ease; }
#cab-dash .cab-more-btn:hover { border-color:var(--bdr-h); background:var(--pn-h); color:var(--txt); }
#cab-dash .cab-more-menu { background:var(--pn); border:1px solid var(--bdr); border-radius:10px; box-shadow:var(--b-shadow); }
#cab-dash .cab-more-item { color:var(--txt); }
#cab-dash .cab-more-item:hover { background:var(--pn-h); }

/* KPI focal-metric → bench stat cards */
:is(#cab-dash,#d-orders) .cab-metric-focus { display:flex; align-items:stretch; gap:14px; flex-wrap:wrap; margin-bottom:20px; }
#cab-dash .cmf-primary { display:flex; flex-direction:column; gap:3px; justify-content:center; background:var(--pn); border:1px solid var(--bdr); border-radius:12px; padding:14px 22px; min-width:158px; box-shadow:var(--b-shadow); cursor:pointer; text-align:left; }
#cab-dash .cmf-primary:hover { border-color:var(--bdr-h); }
#cab-dash .cmf-label { font:590 11px var(--ff-ui); letter-spacing:.085em; text-transform:uppercase; color:var(--dim); }
#cab-dash .cmf-value { font:700 30px var(--ff-mono); font-variant-numeric:tabular-nums; color:var(--white); line-height:1.05; }
#cab-dash .cmf-status { font:12px var(--ff-mono); color:var(--muted); }
#cab-dash .cmf-meta { display:flex; gap:12px; flex-wrap:wrap; align-items:stretch; }
#cab-dash .cmf-chip { display:flex; flex-direction:column; justify-content:center; gap:3px; background:var(--pn); border:1px solid var(--bdr); border-radius:11px; padding:10px 16px; min-width:104px; cursor:pointer; text-align:left; transition:border-color .12s ease, background .12s ease; }
#cab-dash .cmf-chip:hover { border-color:var(--bdr-h); background:var(--pn-h); }
#cab-dash .cmf-chip-v { font:700 18px var(--ff-mono); font-variant-numeric:tabular-nums; color:var(--white); }
#cab-dash .cmf-chip-l { font:590 10.5px var(--ff-ui); letter-spacing:.06em; text-transform:uppercase; color:var(--dim); }
#cab-dash .cmf-chip-link { position:relative; }
#cab-dash .cmf-chip-icon { position:absolute; top:9px; right:10px; width:12px; height:12px; color:var(--muted); }
#cab-dash .cmf-cell.active { border-color:var(--acc); box-shadow:0 0 0 1px var(--acc) inset; }

/* filter bar — bench inputs */
#cab-dash .filter-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
#cab-dash .fb-search { flex:1 1 280px; display:flex; align-items:center; gap:9px; background:var(--inp); border:1px solid var(--bdr); border-radius:10px; padding:0 13px; min-height:40px; }
#cab-dash .fb-search svg { width:16px; height:16px; color:var(--muted); flex:0 0 auto; }
#cab-dash .fb-search input { flex:1; background:transparent; border:none; color:var(--txt); font:14px var(--ff-ui); outline:none; }
#cab-dash .fb-label { font:590 11px var(--ff-ui); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
#cab-dash .filter-bar select { background:var(--inp); border:1px solid var(--bdr); color:var(--txt); border-radius:9px; min-height:40px; padding:0 12px; font:13px var(--ff-ui); cursor:pointer; }
#cab-dash .filter-bar select:hover { border-color:var(--bdr-h); }

/* panels */
#cab-dash .pn { background:var(--pn); border:1px solid var(--bdr); border-radius:12px; box-shadow:var(--b-shadow); margin-bottom:16px; }
#cab-dash .pn h3 { font-size:13px; font-weight:600; color:var(--white); letter-spacing:.01em; margin:0 0 10px; }

/* jobs table → airy bench rows */
#cab-dash .jobs-table { width:100%; border-collapse:collapse; }
#cab-dash .jobs-table thead th { font:590 11px var(--ff-ui); letter-spacing:.085em; text-transform:uppercase; color:var(--dim); text-align:left; padding:14px 16px; border-bottom:1px solid var(--bdr); cursor:pointer; white-space:nowrap; }
#cab-dash .jobs-table tbody tr { border-bottom:1px solid color-mix(in srgb, var(--bdr) 55%, transparent); cursor:pointer; transition:background .12s ease; }
#cab-dash .jobs-table tbody tr:last-child { border-bottom:none; }
#cab-dash .jobs-table tbody tr:hover { background:var(--pn-h); }
#cab-dash .jobs-table td { padding:13px 16px; vertical-align:middle; }
#cab-dash .col-name { display:flex; align-items:center; gap:10px; min-width:0; }
#cab-dash .col-name svg { width:17px; height:17px; color:var(--acc); flex:0 0 auto; }
#cab-dash .col-name .nm { font:600 14.5px var(--ff-ui); color:var(--white); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#cab-dash .col-client { font-size:13px; color:var(--dim); }
#cab-dash .col-progress { font:12.5px var(--ff-mono); font-variant-numeric:tabular-nums; color:var(--dim); }
#cab-dash .col-progress .pg-item { display:inline-flex; align-items:center; gap:5px; margin-right:12px; }
#cab-dash .col-progress .pg-item svg { width:13px; height:13px; opacity:.7; }
/* PR-JOBLIST-NOBAR (2026-08-12): the PROGRESS cell shows ONLY the room/cabinet
   count chips. Strip any stray bar/pseudo an earlier build left under the counts
   (operator flagged a gray bar) — the .pg-item chips + their icons are preserved. */
#cab-dash .col-progress > *:not(.pg-item),
.jobs-table .col-progress > *:not(.pg-item) { display:none !important; }
#cab-dash .col-progress::before, #cab-dash .col-progress::after,
.jobs-table .col-progress::before, .jobs-table .col-progress::after { content:none !important; }
#cab-dash .col-when { font:12.5px var(--ff-mono); color:var(--dim); white-space:nowrap; }
/* PR-JOBLIST-VALUEFIX (2026-08-12): the shared `.jobs-table td { overflow:hidden }`
   was clipping the VALUE to "$27…". Give it room + let it show in full. */
#cab-dash .col-value { font:600 13px var(--ff-mono); font-variant-numeric:tabular-nums; color:var(--txt); text-align:right; overflow:visible; min-width:88px; }
#cab-dash .col-actions { text-align:right; white-space:nowrap; }
#cab-dash .ic-btn { background:transparent; border:1px solid transparent; color:var(--muted); border-radius:7px; width:30px; height:30px; cursor:pointer; transition:background .12s ease, color .12s ease, border-color .12s ease; }
#cab-dash .ic-btn:hover { background:var(--inp); color:var(--txt); border-color:var(--bdr); }

/* status pills → bench chips */
#cab-dash .status-pill { font:700 10px var(--ff-mono); letter-spacing:.06em; text-transform:uppercase; padding:3px 8px; border-radius:5px; white-space:nowrap; }
#cab-dash .pill-st-draft      { background:color-mix(in srgb, var(--muted) 20%, transparent); color:var(--dim); }
/* PR-JOBSTAGES-BID (2026-08-12): bid/quote lifecycle badges. */
#cab-dash .pill-st-quoted     { background:color-mix(in srgb, #e0a83d 18%, transparent);      color:#e0a83d; }
#cab-dash .pill-st-approved   { background:color-mix(in srgb, var(--ok) 18%, transparent);    color:var(--ok); }
#cab-dash .pill-st-declined   { background:color-mix(in srgb, var(--no,#e5484d) 18%, transparent); color:var(--no,#e5484d); }
#cab-dash .pill-st-design     { background:color-mix(in srgb, var(--acc) 16%, transparent);   color:var(--acc); }
#cab-dash .pill-st-production { background:color-mix(in srgb, var(--warn) 16%, transparent);  color:var(--warn); }
#cab-dash .pill-st-delivered  { background:color-mix(in srgb, var(--ok) 16%, transparent);    color:var(--ok); }
#cab-dash .pill-st-archived   { background:color-mix(in srgb, var(--muted) 16%, transparent); color:var(--muted); }

/* quick links */
#cab-dash .brow { display:flex; gap:10px; flex-wrap:wrap; }
#cab-dash .brow .bg { background:var(--inp); border:1px solid var(--bdr); color:var(--txt); border-radius:9px; padding:9px 14px; font:600 13px var(--ff-ui); cursor:pointer; }
#cab-dash .brow .bg:hover { background:var(--pn-h); border-color:var(--bdr-h); }

/* empty state inside the table */
#cab-dash .empty-state { text-align:center; padding:48px 20px; color:var(--dim); }
#cab-dash .empty-state .ei { font-size:34px; margin-bottom:10px; opacity:.7; }
#cab-dash .empty-state .et { font-size:16px; font-weight:600; color:var(--white); margin-bottom:6px; }
#cab-dash .empty-state .es { font-size:13px; color:var(--dim); max-width:42ch; margin:0 auto 16px; line-height:1.55; }

/* ============================================================================
   APPLE BAR (PR-CUTFLOOR-DASH-APPLE 2026-06-14) — lift the dashboard cards to
   the same quality as the frosted islands: softer 14px radii, layered soft
   shadows, more whitespace, restrained motion (smooth 160ms transitions + a
   subtle active-press for tactility — NO hover-lift / bounce). Placed last so
   it refines the values above.
   ============================================================================ */
#cab-dash .cmf-primary, #cab-dash .cmf-chip, #cab-dash .pn {
  border-radius:14px;
  box-shadow:0 1px 2px color-mix(in srgb, var(--bg) 60%, transparent),
             0 16px 40px -22px color-mix(in srgb, var(--bg) 82%, transparent);
  transition:border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}
#cab-dash .cmf-primary { padding:18px 24px; }
#cab-dash .cmf-chip { padding:13px 18px; }
#cab-dash .cmf-primary:active, #cab-dash .cmf-chip:active { transform:scale(.99); }
:is(#cab-dash,#d-orders) .cab-metric-focus { gap:16px; margin-bottom:26px; }
:is(#cab-dash,#cab-job) .cab-dash-bar { margin-bottom:24px; }
#cab-dash .filter-bar { margin-bottom:20px; gap:12px; }
#cab-dash .fb-search, #cab-dash .filter-bar select { border-radius:11px; }

/* airier table + smoother row hover */
#cab-dash .jobs-table thead th { padding:13px 18px; }
#cab-dash .jobs-table td { padding:15px 18px; }
#cab-dash .jobs-table tbody tr { transition:background .16s ease; }

/* primary CTA + icon buttons: restrained press feedback */
#cab-dash .cab-new-job-btn { transition:filter .16s ease, transform .16s ease; }
#cab-dash .cab-new-job-btn:active { transform:scale(.98); }
#cab-dash .ic-btn { transition:background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease; }
#cab-dash .ic-btn:active { transform:scale(.92); }

/* tab stubs (Templates / Archive) → professional empty state, not "coming soon" */
#cab-dash .jobs-tab-stub { padding:64px 24px !important; text-align:center; }
#cab-dash .jobs-tab-stub h2 { font-size:17px; font-weight:600; color:var(--white); margin:0 0 8px; }
#cab-dash .jobs-tab-stub p { font-size:13px; color:var(--dim); max-width:48ch; margin:0 auto; line-height:1.6; }
#cab-dash .jobs-tab-stub .stub-cta { display:inline-flex; align-items:center; gap:8px; margin-top:18px; padding:0 16px; min-height:38px; border-radius:10px; background:var(--acc); color:var(--acc-ink); border:1px solid var(--acc); font:600 13px var(--ff-ui); cursor:pointer; transition:filter .16s ease, transform .16s ease; }
#cab-dash .jobs-tab-stub .stub-cta:hover { filter:brightness(1.07); }
#cab-dash .jobs-tab-stub .stub-cta:active { transform:scale(.98); }

/* Standards tab chrome → bench language (header + azure save; body inherits tokens) */
#cab-dash .std-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px; padding-bottom:16px; border-bottom:1px solid var(--bdr); }
#cab-dash .std-header h2 { font-size:18px; font-weight:600; color:var(--white); margin:0; letter-spacing:-0.01em; }
#cab-dash .std-subtitle { font-size:12.5px; color:var(--dim); margin:6px 0 0; max-width:72ch; line-height:1.55; }
#cab-dash .std-save-btn { background:var(--acc); color:var(--acc-ink); border:1px solid var(--acc); border-radius:9px; min-height:38px; padding:0 16px; font:600 13px var(--ff-ui); cursor:pointer; transition:filter .16s ease, transform .16s ease; }
#cab-dash .std-save-btn:hover { filter:brightness(1.07); }
#cab-dash .std-save-btn:active { transform:scale(.98); }
#cab-dash .std-status-msg { font:12px var(--ff-mono); color:var(--dim); }

/* ============================================================================
   STAT ROW + SEGMENTED TABS (PR-CUTFLOOR-DASH-REWORK 2026-06-14) — smaller,
   denser stat cards that FILL the width (Jobs + Rooms/Cabinets/Library + the
   Drawings/Production/Done stage cards), and macOS-style segmented tabs in the
   header for a real pro-tool feel.
   ============================================================================ */
:is(#cab-dash,#d-orders) .cab-metric-focus { display:flex; gap:12px; align-items:stretch; flex-wrap:wrap; margin-bottom:22px; }
#cab-dash .cmf-primary { flex:0 0 auto; min-width:172px; min-height:76px; padding:14px 18px; gap:2px; }
#cab-dash .cmf-meta { flex:1 1 auto; display:flex; gap:12px; flex-wrap:wrap; }
#cab-dash .cmf-chip { flex:1 1 108px; min-height:76px; justify-content:center; padding:11px 14px; gap:2px; }
#cab-dash .cmf-value { font-size:30px; line-height:1; }
#cab-dash .cmf-chip-v { font-size:21px; }
#cab-dash .cmf-label, #cab-dash .cmf-chip-l { font-size:10.5px; letter-spacing:.09em; }
#cab-dash .cmf-chip-icon { width:13px; height:13px; }
/* primary "Jobs" card carries a subtle accent ring */
#cab-dash .cmf-primary {
  border-color:color-mix(in srgb, var(--acc) 42%, var(--bdr));
  box-shadow:0 1px 2px color-mix(in srgb, var(--bg) 55%, transparent),
             0 14px 34px -22px color-mix(in srgb, var(--acc) 32%, transparent);
}
#cab-dash .cmf-cell.active { border-color:var(--acc); box-shadow:0 0 0 1.5px var(--acc) inset; }
/* stage cards (Drawings / Production / Done) read as their own group */
#cab-dash .cmf-stage .cmf-chip-v { color:var(--acc2, var(--acc)); }
#cab-dash .cmf-stage.active .cmf-chip-v { color:var(--acc-ink); }
#cab-dash .cmf-stage.active { background:var(--acc); border-color:var(--acc); }
#cab-dash .cmf-stage.active .cmf-chip-l { color:var(--acc-ink); }
/* primary card's status line (JS swaps the class to mctx/.muted/.good) */
#cab-dash .cmf-status, #cab-dash .mctx { font:600 12px var(--ff-mono); color:var(--warn); }
#cab-dash .mctx.muted { color:var(--muted); font-weight:400; }
#cab-dash .mctx.good { color:var(--ok); }

/* macOS-style SEGMENTED tabs (Active / Templates / Library / Standards / Archive) */
/* PR-STUDIO-COHERENCE (2026-07-19): premium segmented control — a lifted
   inset track with an elevated white active pill whose label picks up the
   blueprint-blue accent, matching the accent vocabulary of the Door Studio
   feature cards. Same tabs, nicer chrome (operator: "polish the tabs"). */
:is(#cab-dash,#cab-job) .cab-dash-bar { border-bottom:none; align-items:center; }
:is(#cab-dash,#cab-job) .cab-dash-bar .tabs { display:inline-flex; gap:3px; background:var(--inp); border:1px solid var(--bdr); border-radius:10px; padding:3px; margin:0; flex:0 0 auto; box-shadow: inset 0 1px 2px color-mix(in srgb, var(--bg) 35%, transparent); }
:is(#cab-dash,#cab-job) .cab-dash-bar .tab { border:none; border-radius:7px; padding:7px 16px; margin-bottom:0; color:var(--dim); font:600 13px var(--ff-ui); letter-spacing:.01em; cursor:pointer; transition:background .14s var(--ease-out), color .14s var(--ease-out), box-shadow .14s var(--ease-out); }
:is(#cab-dash,#cab-job) .cab-dash-bar .tab:hover:not(.on) { color:var(--txt); background:color-mix(in srgb, var(--pn) 50%, transparent); }
:is(#cab-dash,#cab-job) .cab-dash-bar .tab.on { background:var(--pn); color:var(--acc); border-bottom:none; box-shadow:0 1px 2px color-mix(in srgb, var(--bg) 40%, transparent), 0 2px 8px color-mix(in srgb, var(--acc) 14%, transparent); }

/* ============================================================================
   JOBS CARD REWORK (PR-CUTFLOOR-DASH-REWORK 2026-06-14) — the search + filters
   now live inside the jobs card header (so it's obvious you're searching the
   jobs list), workflow status is a pill row, and + New Job is unmistakable.
   ============================================================================ */
#cab-dash .jobs-card { padding:0; overflow:hidden; }
#cab-dash .jobs-card-head { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:16px 18px; border-bottom:1px solid var(--bdr); }
#cab-dash .jobs-card-title { font-size:16px; font-weight:600; color:var(--white); margin:0; letter-spacing:-0.01em; }
#cab-dash .jobs-card-count { font:600 13px var(--ff-mono); color:var(--muted); margin-left:6px; }
#cab-dash .jobs-card-tools { display:flex; align-items:center; gap:10px; flex-wrap:wrap; flex:1 1 360px; justify-content:flex-end; }
#cab-dash .jobs-card-tools .fb-search { flex:1 1 220px; min-width:180px; max-width:420px; }
#cab-dash .jobs-card-tools select { background:var(--inp); border:1px solid var(--bdr); color:var(--txt); border-radius:10px; min-height:40px; padding:0 12px; font:13px var(--ff-ui); cursor:pointer; }
#cab-dash .jobs-card-tools select:hover { border-color:var(--bdr-h); }

/* workflow status pills (the Drawings / Production / Done "tabs") */
#cab-dash .jobs-status-pills { display:flex; gap:8px; flex-wrap:wrap; padding:13px 18px; border-bottom:1px solid var(--bdr); }
#cab-dash .jsp { font:600 12.5px var(--ff-ui); padding:7px 15px; border-radius:999px; border:1px solid var(--bdr); background:var(--inp); color:var(--dim); cursor:pointer; transition:background .14s ease, color .14s ease, border-color .14s ease, transform .14s ease; }
#cab-dash .jsp:hover { border-color:var(--bdr-h); color:var(--txt); }
#cab-dash .jsp:active { transform:scale(.96); }
#cab-dash .jsp.on { background:var(--acc); border-color:var(--acc); color:var(--acc-ink); }
#cab-dash .jobs-table-wrap { overflow-x:auto; }

/* + NEW JOB — the core action, unmissable: larger, heavier, soft accent glow */
/* + New Job = the page's hero CTA — large, iconic, glowing, clearly dominant */
#cab-dash .cab-new-job-btn { display:inline-flex; align-items:center; gap:8px; min-height:46px; padding:0 26px; font-size:15px; font-weight:700; border-radius:12px; letter-spacing:.01em; box-shadow:0 12px 30px -10px color-mix(in srgb, var(--acc) 80%, transparent); }
#cab-dash .cab-new-job-btn svg { width:18px; height:18px; }
#cab-dash .cab-new-job-btn:hover { filter:brightness(1.08); box-shadow:0 16px 38px -10px color-mix(in srgb, var(--acc) 90%, transparent); }
#cab-dash .cab-new-job-btn:active { transform:scale(.98); }
/* keep ⋯ visually secondary so New Job dominates */
#cab-dash .cab-hub-actions { gap:12px; }
#cab-dash .cab-more-btn { min-height:40px; opacity:.85; }
#cab-dash .cab-more-btn:hover { opacity:1; }

/* per-row "mark stage" menu items in the ⋯ row menu */
.row-menu .rm-stage-head { font:600 10px var(--ff-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding:8px 12px 4px; }

/* ============================================================================
   TWO-ZONE + DATA RAIL (PR-CUTFLOOR-DASH-2ZONE 2026-06-14) — jobs list (main) +
   a sticky data rail on the right, matching the HOME's two-zone. Reuses the
   home's global .bench-grid/.bench-rail/.bench-ar; styles the dash-* modules.
   ============================================================================ */
#cab-dash .dash-grid { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:20px; align-items:start; margin-top:4px; }
#cab-dash .bench-main { min-width:0; }
#cab-dash .dash-rail { display:flex; flex-direction:column; gap:16px; position:sticky; top:14px; }
#cab-dash .dash-rail .bench-block { margin:0; background:var(--pn); border:1px solid var(--bdr); border-radius:14px; padding:14px 16px; box-shadow:0 1px 2px color-mix(in srgb, var(--bg) 60%, transparent), 0 14px 34px -24px color-mix(in srgb, var(--bg) 80%, transparent); }
#cab-dash .dash-rail .bench-block-head { display:flex; align-items:baseline; gap:8px; margin-bottom:11px; }
#cab-dash .dash-rail .bench-label { font:590 11px var(--ff-ui); letter-spacing:.09em; text-transform:uppercase; color:var(--dim); }
#cab-dash .dash-rail .bench-block-meta { margin-left:auto; font:11px var(--ff-mono); color:var(--muted); }
#cab-dash .dash-card { display:flex; flex-direction:column; gap:5px; }

/* pipeline rows (click → filter the list) */
#cab-dash .dash-stage { display:flex; align-items:center; gap:10px; background:none; border:none; padding:4px 2px; cursor:pointer; width:100%; text-align:left; transition:opacity .12s ease; }
#cab-dash .dash-stage:hover { opacity:.82; }
#cab-dash .dash-stage-n { flex:0 0 74px; font:12.5px var(--ff-ui); color:var(--dim); }
#cab-dash .dash-stage-bar { flex:1 1 auto; height:6px; background:var(--inp); border-radius:3px; overflow:hidden; }
#cab-dash .dash-stage-bar > i { display:block; height:100%; background:var(--acc); border-radius:3px; }
#cab-dash .dash-stage-v { flex:0 0 auto; font:600 13px var(--ff-mono); color:var(--white); min-width:18px; text-align:right; font-variant-numeric:tabular-nums; }

/* job rows (on the floor + recent) */
#cab-dash .dash-job { display:flex; align-items:center; justify-content:space-between; gap:10px; background:none; border:none; padding:8px 2px; cursor:pointer; width:100%; text-align:left; border-bottom:1px solid color-mix(in srgb, var(--bdr) 45%, transparent); transition:color .12s ease; }
#cab-dash .dash-job:last-child { border-bottom:none; }
#cab-dash .dash-job:hover .dash-job-name { color:var(--acc); }
#cab-dash .dash-job-name { flex:1 1 auto; min-width:0; font:600 13px var(--ff-ui); color:var(--txt); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#cab-dash .dash-job-when { flex:0 0 auto; font:11px var(--ff-mono); color:var(--muted); }
#cab-dash .dash-empty { font-size:12px; color:var(--muted); line-height:1.55; padding:2px 0; }

/* receivables (reuse global .bench-ar-* from bench.css; just spacing) */
#cab-dash .dash-rail .bench-ar { gap:9px; }

/* quick links */
#cab-dash .dash-links { gap:8px; }
#cab-dash .dash-links .bg { background:var(--inp); border:1px solid var(--bdr); color:var(--txt); border-radius:9px; padding:9px 12px; font:600 12.5px var(--ff-ui); cursor:pointer; text-align:left; transition:background .12s ease, border-color .12s ease; }
#cab-dash .dash-links .bg:hover { background:var(--pn-h); border-color:var(--bdr-h); }

/* stack the rail under the list on narrow screens */
@media (max-width:1080px){ #cab-dash .dash-grid { grid-template-columns:1fr; } #cab-dash .dash-rail { position:static; flex-direction:row; flex-wrap:wrap; } #cab-dash .dash-rail .bench-block { flex:1 1 240px; } }

/* ============================================================================
   DOOR STUDIO dashboard (#d-orders) — same treatment as the cabinet dashboard
   (PR-CUTFLOOR-DOOR 2026-06-14): graphite (tokens scoped above), capped shell,
   one header + hero "Start New Order", segmented view pills, bench inputs, airy
   table. Scoped to #d-orders so the door builder (#d-new) + the rest are untouched.
   ============================================================================ */
/* PR-DOOR-FRAME (2026-08-25, owner: "see how the jobs goes all the way to the
   edge of the screen — orders for door studio should do that as well"): the
   orders tab was still on the OLD centered-1600px column that PR-DASH-TIGHTEN
   removed from #cab-dash. On a shop's ultrawide that floated the table as an
   island with a moat on both sides while the H1 and tab bar stayed anchored
   left — two alignment systems on one page. Same frame as the dashboard now:
   one 24px left gutter shared with the page title, fluid to a 1920px cap that
   only ultrawide ever reaches, slack falling on ONE side as rag. */
#d-orders { padding:20px 24px 36px; }
#d-orders > * { max-width:1920px; margin-left:0; }
#d-orders .crumbs { display:none; }

/* header: the title lives once in .shdr ("Door Design Studio"); here it's just
   the hero action, right-aligned (the h2/subtitle are removed in markup). */
#d-orders .cab-hub-head { display:flex; align-items:center; justify-content:flex-end; gap:16px; margin:0 0 18px; border:none; padding:0; }
#d-orders .cab-new-job-btn { display:inline-flex; align-items:center; gap:8px; background:var(--acc); color:var(--acc-ink); border:1px solid var(--acc); min-height:46px; padding:0 26px; font:700 15px var(--ff-ui); border-radius:12px; cursor:pointer; box-shadow:0 12px 30px -10px color-mix(in srgb, var(--acc) 80%, transparent); transition:filter .16s ease, transform .16s ease, box-shadow .16s ease; }
#d-orders .cab-new-job-btn svg { width:18px; height:18px; }
#d-orders .cab-new-job-btn:hover { filter:brightness(1.08); box-shadow:0 16px 38px -10px color-mix(in srgb, var(--acc) 90%, transparent); }
#d-orders .cab-new-job-btn:active { transform:scale(.98); }

/* feature tiles → quiet graphite cards */
#d-orders .ft-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:12px; margin-bottom:18px; }
#d-orders .ft-tile { display:flex; gap:12px; align-items:flex-start; background:var(--pn); border:1px solid var(--bdr); border-radius:12px; padding:14px 16px; cursor:pointer; box-shadow:0 1px 2px color-mix(in srgb, var(--bg) 60%, transparent); transition:border-color .14s ease, background .14s ease; }
#d-orders .ft-tile:hover { border-color:var(--bdr-h); background:var(--pn-h); }
#d-orders .ft-icn { color:var(--acc); flex:0 0 auto; }
#d-orders .ft-icn svg { width:20px; height:20px; }
#d-orders .ft-tile h4 { color:var(--white); font-size:13.5px; font-weight:600; margin:0 0 3px; }
#d-orders .ft-tile p { color:var(--dim); font-size:12px; margin:0; line-height:1.4; }

/* view pills (Recent / Cutlist / Lookup) → macOS segmented control (override inline) */
#d-orders .dview-pills { display:inline-flex !important; gap:2px !important; background:var(--inp) !important; border:1px solid var(--bdr) !important; border-radius:11px !important; padding:3px !important; max-width:none !important; margin:0 0 16px !important; box-shadow:var(--shadow-1); }
#d-orders .dview-pill { flex:0 0 auto !important; min-height:36px !important; padding:7px 16px !important; border-radius:8px !important; color:var(--dim) !important; font:600 13px var(--ff-ui) !important; background:transparent !important; border:none !important; cursor:pointer; transition:background .14s ease, color .14s ease; }
#d-orders .dview-pill:hover { color:var(--txt) !important; }
#d-orders .dview-pill.on { background:var(--pn) !important; color:var(--white) !important; box-shadow:0 1px 2px color-mix(in srgb, var(--bg) 45%, transparent), 0 1px 3px rgba(0,0,0,.07); }
#d-orders .dview-pill .pill-count { color:var(--muted) !important; }

/* filter bar → bench inputs */
#d-orders .filter-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
#d-orders .fb-search { flex:1 1 280px; display:flex; align-items:center; gap:9px; background:var(--inp); border:1px solid var(--bdr); border-radius:11px; padding:0 13px; min-height:40px; box-shadow:var(--shadow-1); }
#d-orders .fb-search svg { width:16px; height:16px; color:var(--muted); flex:0 0 auto; }
#d-orders .fb-search input { flex:1; background:transparent; border:none; color:var(--txt); font:14px var(--ff-ui); outline:none; }
#d-orders .fb-label { font:590 11px var(--ff-ui); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
#d-orders .filter-bar select { background:var(--inp); border:1px solid var(--bdr); color:var(--txt); border-radius:10px; min-height:40px; padding:0 12px; font:13px var(--ff-ui); cursor:pointer; }
#d-orders .filter-bar select:hover { border-color:var(--bdr-h); }
#d-orders .fb-bulk-toggle { display:inline-flex; align-items:center; gap:6px; font:600 12.5px var(--ff-ui); color:var(--dim); cursor:pointer; }

/* table → airy bench rows */
#d-orders .pn { background:var(--pn); border:1px solid var(--bdr); border-radius:14px; box-shadow:var(--shadow-3); margin-bottom:16px; }
#d-orders .jobs-table { width:100%; border-collapse:collapse; }
#d-orders .jobs-table thead th { font:590 11px var(--ff-ui); letter-spacing:.085em; text-transform:uppercase; color:var(--dim); text-align:left; padding:13px 16px; border-bottom:1px solid var(--bdr); white-space:nowrap; }
#d-orders .jobs-table tbody tr { border-bottom:1px solid color-mix(in srgb, var(--bdr) 55%, transparent); cursor:pointer; transition:background .16s ease; }
#d-orders .jobs-table tbody tr:hover { background:var(--pn-h); }
#d-orders .jobs-table td { padding:13px 16px; vertical-align:middle; color:var(--txt); }
#d-orders .status-pill { font:700 10px var(--ff-mono); letter-spacing:.06em; text-transform:uppercase; padding:3px 8px; border-radius:5px; white-space:nowrap; }
#d-orders .pill-st-draft { background:color-mix(in srgb, var(--muted) 20%, transparent); color:var(--dim); }
#d-orders .pill-st-cutting { background:color-mix(in srgb, var(--warn) 16%, transparent); color:var(--warn); }
#d-orders .pill-st-completed { background:color-mix(in srgb, var(--ok) 16%, transparent); color:var(--ok); }
#d-orders .pill-st-archived { background:color-mix(in srgb, var(--muted) 16%, transparent); color:var(--muted); }
#d-orders .bulk-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; padding:10px 14px; background:var(--pn); border:1px solid var(--bdr); border-radius:11px; }

/* door two-zone + data rail (mirrors the cabinet rail) */
/* PR-DOOR-FRAME: 320px/20px -> 260px/16px, matching the dashboard rail so the
   content column ends at the same x on both pages. */
#d-orders .dash-grid { display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:16px; align-items:start; }
#d-orders .bench-main { min-width:0; }
#d-orders .dash-rail { display:flex; flex-direction:column; gap:16px; position:sticky; top:14px; }
#d-orders .dash-rail .bench-block { margin:0; background:var(--pn); border:1px solid var(--bdr); border-radius:14px; padding:14px 16px; box-shadow:var(--shadow-3); }
#d-orders .dash-rail .bench-block-head { display:flex; align-items:baseline; gap:8px; margin-bottom:11px; }
#d-orders .dash-rail .bench-label { font:590 11px var(--ff-ui); letter-spacing:.09em; text-transform:uppercase; color:var(--dim); }
#d-orders .dash-card { display:flex; flex-direction:column; gap:5px; }
#d-orders .dash-stage { display:flex; align-items:center; gap:10px; background:none; border:none; padding:4px 2px; cursor:pointer; width:100%; text-align:left; transition:opacity .12s ease; }
#d-orders .dash-stage:hover { opacity:.82; }
#d-orders .dash-stage-n { flex:0 0 74px; font:12.5px var(--ff-ui); color:var(--dim); }
#d-orders .dash-stage-bar { flex:1 1 auto; height:6px; background:var(--inp); border-radius:3px; overflow:hidden; }
#d-orders .dash-stage-bar > i { display:block; height:100%; background:var(--acc); border-radius:3px; }
#d-orders .dash-stage-v { flex:0 0 auto; font:600 13px var(--ff-mono); color:var(--white); min-width:18px; text-align:right; font-variant-numeric:tabular-nums; }
#d-orders .dash-job { display:flex; align-items:center; justify-content:space-between; gap:10px; background:none; border:none; padding:8px 2px; cursor:pointer; width:100%; text-align:left; border-bottom:1px solid color-mix(in srgb, var(--bdr) 45%, transparent); transition:color .12s ease; }
#d-orders .dash-job:last-child { border-bottom:none; }
#d-orders .dash-job:hover .dash-job-name { color:var(--acc); }
#d-orders .dash-job-name { flex:1 1 auto; min-width:0; font:600 13px var(--ff-ui); color:var(--txt); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#d-orders .dash-job-when { flex:0 0 auto; font:11px var(--ff-mono); color:var(--muted); }
#d-orders .dash-empty { font-size:12px; color:var(--muted); line-height:1.55; padding:2px 0; }
#d-orders .dash-rail .bench-ar { gap:9px; }
@media (max-width:1080px){ #d-orders .dash-grid { grid-template-columns:1fr; } #d-orders .dash-rail { position:static; flex-direction:row; flex-wrap:wrap; } #d-orders .dash-rail .bench-block { flex:1 1 240px; } }

/* ── DARK: depth comes from light, not from shade ──────────────────────────
   The elevation above is drop shadows, and a drop shadow is black. On this
   theme the canvas is black too (--bg:#000000), so every one of those rules
   paints something nobody can see — the same class of bug as the --bg-mixed
   shadows they replaced, just reached from the other side.

   So dark gets the other half of the same physics. Each panel becomes a
   top-lit slab: a white overlay fading down the face, a 1px highlight on the
   top edge (--shadow-inset), and a brighter top border. The overlay is a
   background-IMAGE, not a colour, so the alarm tints on .cr-card:has(.cr-bad)
   show through it instead of being overwritten. And the studio's canvas sits
   just off pure black — which is the part that finally gives a cast shadow
   something to darken. Without it the shadows below are decoration.

   Scoped to the orders tab through the same :has() shape as the one-header
   rule further down, so every other surface in the app keeps the pure black
   the 2026-07-18 theme consolidation chose. To put this tab back on black,
   delete the .scroll rule; the slabs still read on their borders. */
:root[data-theme="dark"] #pg-door {
  --ds-canvas:#0E1116;
  --ds-lit:linear-gradient(180deg, rgba(255,255,255,.055) 0%, rgba(255,255,255,0) 100%);
  --ds-lit-sm:linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 100%);
  --ds-slab-bdr:#3A3F45;
  --ds-slab-lip:#4A5058;
}
:root[data-theme="dark"] #pg-door:has(> .scroll > #d-orders.on) > .scroll { background:var(--ds-canvas); }
:root[data-theme="dark"] #d-orders .pn,
:root[data-theme="dark"] #d-orders .dash-rail .bench-block {
  background-image:var(--ds-lit);
  box-shadow:var(--shadow-inset), var(--shadow-5);
  border-color:var(--ds-slab-bdr); border-top-color:var(--ds-slab-lip);
}
:root[data-theme="dark"] #d-orders .cr-card {
  background-image:var(--ds-lit-sm);
  box-shadow:var(--shadow-inset), var(--shadow-3);
}
/* The lip is skipped on a tinted card so its --no / --warn border survives on
   all four sides — the tint IS the signal, and it outranks the light source. */
:root[data-theme="dark"] #d-orders .cr-card:not(:has(.cr-bad)):not(:has(.cr-warn)) {
  border-color:var(--ds-slab-bdr); border-top-color:var(--ds-slab-lip);
}
:root[data-theme="dark"] #d-orders .cr-card:hover { box-shadow:var(--shadow-inset), var(--shadow-4); }
:root[data-theme="dark"] #d-orders .dview-pills,
:root[data-theme="dark"] #d-orders .fb-search { box-shadow:var(--shadow-inset), var(--shadow-2); }

@media (prefers-reduced-motion: reduce){ #cab-job *, #cab-dash *, #cutfloor-room *, #d-orders * { transition:none !important; } }

/* ============================================================================
   METRIC RIBBON REDESIGN (2026-08-08) — three visually distinct behavior groups:
   (1) Jobs hero  (2) Portfolio filter-chips + Library nav  (3) Pipeline stages.
   Research: Norman affordances/signifiers (action-group legibility), Stephen Few
   (dashboard hierarchy), Tufte data-ink, ISA-101 hue-for-status.
   Tokens only — no hardcoded colors.
   ============================================================================ */

/* ── Outer ribbon: three groups side-by-side ─────────────────────────────── */
:is(#cab-dash,#d-orders) .cab-metric-focus {
  display:flex;
  gap:14px;
  align-items:stretch;
  flex-wrap:wrap;
  margin-bottom:22px;
}

/* ── Group container (Portfolio + Pipeline) ──────────────────────────────── */
#cab-dash .cmf-group {
  display:flex;
  flex-direction:column;
  gap:7px;
  flex:1 1 auto;
}

/* Group caption row — "Portfolio" / "Pipeline" micro-labels */
#cab-dash .cmf-group-label {
  display:flex;
  align-items:center;
  gap:5px;
  font:590 10px var(--ff-ui);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
  padding:0 2px;
  user-select:none;
}
#cab-dash .cmf-group-label svg {
  width:11px;
  height:11px;
  opacity:.7;
  flex:0 0 auto;
}

/* Chip row inside each group */
#cab-dash .cmf-group-row {
  display:flex;
  gap:8px;
  align-items:stretch;
  flex-wrap:wrap;
}

/* ── (1) JOBS hero card — same proportions as before ────────────────────── */
#cab-dash .cmf-primary {
  flex:0 0 auto;
  min-width:168px;
  min-height:76px;
  display:flex;
  flex-direction:column;
  gap:3px;
  justify-content:center;
  background:var(--pn);
  border:1px solid color-mix(in srgb, var(--acc) 40%, var(--bdr));
  border-radius:14px;
  padding:15px 20px;
  cursor:pointer;
  text-align:left;
  box-shadow:0 1px 2px color-mix(in srgb, var(--bg) 55%, transparent),
             0 14px 34px -22px color-mix(in srgb, var(--acc) 30%, transparent);
  transition:border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}
#cab-dash .cmf-primary:hover { border-color:var(--acc); background:var(--pn-h); }
#cab-dash .cmf-primary:active { transform:scale(.99); }

/* Icon + label row inside the hero */
#cab-dash .cmf-primary-inner {
  display:flex;
  align-items:center;
  gap:7px;
  margin-bottom:1px;
}
#cab-dash .cmf-hero-icon {
  width:15px;
  height:15px;
  color:var(--acc);
  flex:0 0 auto;
}

/* ── (2) FILTER chips (Rooms, Cabinets) — clicking filters the list ──────── */
#cab-dash .cmf-filter-chip {
  position:relative;
}
/* Tiny "filter" label badge at top-right signals "this is a filter" */
#cab-dash .cmf-filter-chip::after {
  content:"filter";
  position:absolute;
  top:7px;
  right:8px;
  font:590 8.5px var(--ff-ui);
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--muted);
  opacity:.7;
}
#cab-dash .cmf-filter-chip:hover::after { opacity:1; color:var(--dim); }

/* ── (2b) LIBRARY nav chip — navigates away (not a filter) ──────────────── */
#cab-dash .cmf-nav-chip {
  text-decoration:none;
  position:relative;
  border-color:color-mix(in srgb, var(--acc2, var(--acc)) 28%, var(--bdr));
}
#cab-dash .cmf-nav-chip:hover {
  border-color:var(--acc2, var(--acc));
  background:var(--pn-h);
}
/* "Open ↗" nav badge — primary signifier that this leaves the page */
#cab-dash .cmf-nav-badge {
  display:inline-flex;
  align-items:center;
  gap:3px;
  margin-top:4px;
  font:590 9.5px var(--ff-ui);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--acc2, var(--acc));
  opacity:.85;
}
#cab-dash .cmf-nav-chip:hover .cmf-nav-badge { opacity:1; }
#cab-dash .cmf-nav-badge svg {
  width:11px;
  height:11px;
  flex:0 0 auto;
}

/* ── Chip icon at top of each chip (all groups) ──────────────────────────── */
#cab-dash .cmf-chip-icon-top {
  width:14px;
  height:14px;
  color:var(--dim);
  margin-bottom:1px;
  flex:0 0 auto;
}

/* Unhide the context line and style it */
#cab-dash .cmf-chip-ctx {
  display:block;            /* was hidden — now always visible */
  font:11px var(--ff-mono);
  color:var(--muted);
  margin-top:1px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}

/* ── (3) PIPELINE group — stage chips with arrows between them ───────────── */
#cab-dash .cmf-pipeline-row {
  align-items:center;   /* vertically center chips + arrows */
  flex-wrap:nowrap;
}

/* Arrow separators between pipeline stage chips */
#cab-dash .cmf-pipeline-arrow {
  display:flex;
  align-items:center;
  flex:0 0 auto;
  color:var(--muted);
  opacity:.55;
}
#cab-dash .cmf-pipeline-arrow svg {
  width:18px;
  height:18px;
}

/* Stage chips: per-stage accent colors on the number (mirrors status pills) */
#cab-dash .cmf-stage-design .cmf-chip-v  { color:var(--acc); }
#cab-dash .cmf-stage-prod .cmf-chip-v    { color:var(--warn); }
#cab-dash .cmf-stage-done .cmf-chip-v    { color:var(--ok); }

#cab-dash .cmf-stage-design .cmf-chip-icon-top { color:var(--acc); opacity:.7; }
#cab-dash .cmf-stage-prod .cmf-chip-icon-top   { color:var(--warn); opacity:.7; }
#cab-dash .cmf-stage-done .cmf-chip-icon-top   { color:var(--ok); opacity:.7; }

/* Active state for pipeline stage chips: fill with the stage accent */
#cab-dash .cmf-stage-design.active { background:color-mix(in srgb, var(--acc) 16%, var(--pn)); border-color:var(--acc); }
#cab-dash .cmf-stage-prod.active   { background:color-mix(in srgb, var(--warn) 14%, var(--pn)); border-color:var(--warn); }
#cab-dash .cmf-stage-done.active   { background:color-mix(in srgb, var(--ok) 14%, var(--pn)); border-color:var(--ok); }

#cab-dash .cmf-stage-design.active .cmf-chip-v { color:var(--acc); }
#cab-dash .cmf-stage-prod.active   .cmf-chip-v { color:var(--warn); }
#cab-dash .cmf-stage-done.active   .cmf-chip-v { color:var(--ok); }
/* Keep label readable on colored active backgrounds (overrides old acc-ink rule) */
#cab-dash .cmf-stage-design.active .cmf-chip-l { color:color-mix(in srgb, var(--acc) 70%, var(--dim)); }
#cab-dash .cmf-stage-prod.active   .cmf-chip-l { color:color-mix(in srgb, var(--warn) 70%, var(--dim)); }
#cab-dash .cmf-stage-done.active   .cmf-chip-l { color:color-mix(in srgb, var(--ok) 70%, var(--dim)); }
/* Icons stay readable on colored active backgrounds */
#cab-dash .cmf-stage-design.active .cmf-chip-icon-top { color:var(--acc); opacity:1; }
#cab-dash .cmf-stage-prod.active   .cmf-chip-icon-top { color:var(--warn); opacity:1; }
#cab-dash .cmf-stage-done.active   .cmf-chip-icon-top { color:var(--ok); opacity:1; }

/* ── Shared chip base (refines existing .cmf-chip) ───────────────────────── */
#cab-dash .cmf-chip {
  display:flex;
  flex-direction:column;
  gap:2px;
  background:var(--pn);
  border:1px solid var(--bdr);
  border-radius:13px;
  padding:11px 15px;
  min-width:96px;
  min-height:76px;
  cursor:pointer;
  text-align:left;
  transition:border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
  box-shadow:0 1px 2px color-mix(in srgb, var(--bg) 60%, transparent);
}
#cab-dash .cmf-chip:hover  { border-color:var(--bdr-h); background:var(--pn-h); }
#cab-dash .cmf-chip:active { transform:scale(.99); }

/* Active border/glow for filter-type chips */
#cab-dash .cmf-cell.active {
  border-color:var(--acc);
  box-shadow:0 0 0 1.5px var(--acc) inset;
}

/* ── Typography (refine over the old rules) ───────────────────────────────── */
#cab-dash .cmf-label  { font:590 10.5px var(--ff-ui); letter-spacing:.09em; text-transform:uppercase; color:var(--dim); }
#cab-dash .cmf-value  { font:700 30px var(--ff-mono); font-variant-numeric:tabular-nums; color:var(--white); line-height:1; }
#cab-dash .cmf-chip-v { font:700 20px var(--ff-mono); font-variant-numeric:tabular-nums; color:var(--white); line-height:1; }
#cab-dash .cmf-chip-l { font:590 10px var(--ff-ui); letter-spacing:.08em; text-transform:uppercase; color:var(--dim); }
#cab-dash .cmf-status, #cab-dash .mctx { font:600 11.5px var(--ff-mono); color:var(--warn); margin-top:1px; }
#cab-dash .mctx.muted { color:var(--muted); font-weight:400; }
#cab-dash .mctx.good  { color:var(--ok); }

/* ── Responsive: stack groups vertically on narrow viewports ─────────────── */
@media (max-width:860px) {
  :is(#cab-dash,#d-orders) .cab-metric-focus { flex-direction:column; }
  #cab-dash .cmf-pipeline-row { flex-wrap:wrap; }
  #cab-dash .cmf-pipeline-arrow { display:none; }
}
@media (max-width:680px) {
  #cab-dash .cmf-group-row { flex-wrap:wrap; }
  #cab-dash .cmf-chip { flex:1 1 auto; }
}

/* ============================================================================
   PR-CAB-METRIC-CARDS (2026-08-25) — four peer cards, icon beside the value
   ----------------------------------------------------------------------------
   Deliberately NEW class names (.cmf-card*) rather than more overrides on
   .cmf-chip / .cmf-primary. Those two have been redefined in four separate
   blocks in this file across as many redesigns, and the winner depends on
   source order — a fifth layer would have been a coin toss every time
   somebody edits above. These own their look outright.
   The row above (.cab-metric-focus) is reused as the flex container; the
   .cmf-cards modifier makes the children equal-width instead of the old
   hero-plus-groups rhythm.
   ========================================================================== */
:is(#cab-dash,#d-orders) .cab-metric-focus.cmf-cards {
  display:flex;
  gap:12px;
  align-items:stretch;
  flex-wrap:wrap;
  margin-bottom:22px;
}
:is(#cab-dash,#d-orders) .cmf-card {
  /* flex-basis 0 + grow = four EQUAL cards, so the row reads as one object.
     min-width keeps them from crushing before the wrap breakpoint.
     PR-CARD-TOKENS (2026-08-25): geometry comes from tokens.css so the Door
     Studio preset cards measure identically. */
  flex:1 1 0;
  min-width:172px;
  display:flex;
  align-items:center;
  gap:var(--card-gap);
  padding:var(--card-pad-y) var(--card-pad-x);
  background:var(--pn);
  border:var(--card-bd) solid var(--bdr);
  border-left:var(--card-rail) solid transparent;   /* reserved so .active adds NO shift */
  border-radius:var(--card-radius);
  cursor:pointer;
  text-align:left;
  box-shadow:0 1px 2px color-mix(in srgb, var(--bg) 60%, transparent);
  transition:border-color .16s ease, background .16s ease,
             box-shadow .16s ease, transform .16s ease;
}
:is(#cab-dash,#d-orders) .cmf-card:hover {
  border-color:color-mix(in srgb, var(--acc) 55%, var(--bdr));
  background:var(--pn-h);
}
:is(#cab-dash,#d-orders) .cmf-card:active { transform:scale(.99); }
:is(#cab-dash,#d-orders) .cmf-card:focus-visible {
  outline:2px solid color-mix(in srgb, var(--acc) 70%, transparent);
  outline-offset:2px;
}

/* Round tinted icon badge — the reference's signature element. ONE accent
   hue across the filter cards (ISA-101: hue carries status, not decoration).
   Money is the single exception below. */
:is(#cab-dash,#d-orders) .cmf-card-ic {
  flex:0 0 auto;
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:color-mix(in srgb, var(--acc) 14%, transparent);
  color:var(--acc);
}
:is(#cab-dash,#d-orders) .cmf-card-ic svg { width:18px; height:18px; }

:is(#cab-dash,#d-orders) .cmf-card-txt {
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;                /* lets a long $ value ellipsis instead of pushing */
}
:is(#cab-dash,#d-orders) .cmf-card-v {
  font:700 26px var(--ff-mono);
  font-variant-numeric:tabular-nums;
  color:var(--white);
  line-height:1.05;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
:is(#cab-dash,#d-orders) .cmf-card-l {
  font:590 11px var(--ff-ui);
  letter-spacing:.05em;
  color:var(--dim);
  white-space:nowrap;
}

/* ACTIVE = "this filter is on". Tint + a solid left rail, which is why the
   base rule already reserves 3px of transparent left border: turning it on
   must not move the card's contents by a pixel. */
:is(#cab-dash,#d-orders) .cmf-card.active {
  background:color-mix(in srgb, var(--acc) 12%, var(--pn));
  border-color:color-mix(in srgb, var(--acc) 45%, var(--bdr));
  border-left-color:var(--acc);
  box-shadow:0 2px 10px color-mix(in srgb, var(--acc) 18%, transparent);
}
:is(#cab-dash,#d-orders) .cmf-card.active .cmf-card-ic {
  background:color-mix(in srgb, var(--acc) 22%, transparent);
}
:is(#cab-dash,#d-orders) .cmf-card.active .cmf-card-l { color:var(--txt); }

/* Money read-out: not clickable, and green because a dollar sign is a
   convention rather than a status colour. */
:is(#cab-dash,#d-orders) .cmf-card-money {
  cursor:default;
}
:is(#cab-dash,#d-orders) .cmf-card-money:hover {
  border-color:var(--bdr);
  background:var(--pn);
}
:is(#cab-dash,#d-orders) .cmf-card-money:active { transform:none; }
:is(#cab-dash,#d-orders) .cmf-card-money .cmf-card-ic {
  background:color-mix(in srgb, var(--ok) 14%, transparent);
  color:var(--ok);
}

@media (max-width:900px) {
  :is(#cab-dash,#d-orders) .cmf-card { flex:1 1 44%; }
}
@media (max-width:560px) {
  :is(#cab-dash,#d-orders) .cmf-card { flex:1 1 100%; }
}

/* ============================================================================
   PR-DASH-TIGHTEN (2026-08-25) — owner: "just trying to get rid of empty
   space." Every rule here is a deliberate LAST-WORD override of a value set
   earlier in this file (this file has four layers of dashboard redesign above;
   appending is the only ordering that can't lose a specificity coin toss).
   Scope: vertical air between tabs → cards → table, card height, row height,
   pills/search chrome, and the right rail (320px → 260px, two modules gone).
   ========================================================================== */
/* ONE LEFT EDGE (owner round 2: "huge margins on the page that aren't
   needed"). The 1600px CENTERED column (rule at the top of this file) came
   from reading-page habits; on the shop's ~3840px monitor it floated the
   whole dashboard as an island with ~1100px of moat on EACH side, while the
   H1 and tab bar stayed anchored left — two alignment systems on one page.
   Work-queue research says the opposite of centering: eyes scan F-pattern
   from a stable left edge (NN/g), the prose line-length rule doesn't apply
   to tables, and the reason not to go FULL-bleed on ultrawide is Fitts —
   a row's actions shouldn't sit 3700px from its name. So: everything
   left-aligned to the same 24px gutter as the page title, fluid up to a
   1920px cap that only ultrawide monitors ever hit. Empty space, if any,
   falls on ONE side and reads as rag, not moat. */
#cab-dash.scroll { padding:20px 24px 36px; }
#cab-dash > * { max-width:1920px; margin-left:0; }
/* Stat cards stay stat-tile sized instead of stretching into the new width
   (leading dashboards keep KPI tiles ~240-360px; a 470px card is mostly
   upholstery) */
:is(#cab-dash,#d-orders) .cmf-card { max-width:360px; }
/* Tabs left, ⋯ pinned to the content column's right edge — the audit's
   Option A, which the wider column now makes obvious */
:is(#cab-dash,#cab-job) .cab-dash-bar { justify-content:space-between; margin-bottom:12px; }
:is(#cab-dash,#d-orders) .cab-metric-focus.cmf-cards { gap:10px; margin-bottom:12px; }
/* Metric cards: shorter — smaller badge + value, tighter padding.
   PR-CARD-TOKENS (2026-08-25): these three literals ARE the token values now
   (tokens.css was seeded from this pass), so the override is redundant with
   the base rule and kept only as the explicit record of what this pass set.
   Change the numbers in tokens.css, not here — editing here would silently
   desync Door Studio, which reads the tokens. */
:is(#cab-dash,#d-orders) .cmf-card {
  padding:var(--card-pad-y) var(--card-pad-x);
  gap:var(--card-gap);
  border-radius:var(--card-radius);
}
:is(#cab-dash,#d-orders) .cmf-card-ic { width:32px; height:32px; }
:is(#cab-dash,#d-orders) .cmf-card-ic svg { width:16px; height:16px; }
:is(#cab-dash,#d-orders) .cmf-card-v { font-size:21px; }
/* "Coming soon" placeholder value — words, not a number, so UI font at a
   size that sits on the same baseline rhythm as the 21px numerals */
:is(#cab-dash,#d-orders) .cmf-card-soon { font:600 13px var(--ff-ui); color:var(--muted); letter-spacing:.01em; }
/* Static read-out card (Next Available): looks like its peers, ignores the
   pointer — same treatment .cmf-card-money already gets */
:is(#cab-dash,#d-orders) .cmf-card-static { cursor:default; }
:is(#cab-dash,#d-orders) .cmf-card-static:hover { border-color:var(--bdr); background:var(--pn); }
:is(#cab-dash,#d-orders) .cmf-card-static:active { transform:none; }
/* Jobs card header + pills row + search: less chrome height */
#cab-dash .jobs-card-head { padding:10px 14px; }
#cab-dash .jobs-status-pills { padding:8px 14px; gap:6px; }
#cab-dash .jsp { padding:5px 12px; font-size:12px; }
#cab-dash .fb-search { min-height:34px; padding:0 11px; }
#cab-dash .fb-search input { font-size:13px; }
/* Table rows: 15px → 9px vertical padding (~12px less per row) */
#cab-dash .jobs-table td { padding:9px 16px; }
/* Right rail: narrower column, tighter gutter */
#cab-dash .dash-grid { grid-template-columns:minmax(0,1fr) 260px; gap:16px; }

/* ============================================================================
   PR-JOBHUB-CARDS (2026-08-25) — job page restyled to the owner's reference:
   calm header (ONE primary advance CTA + Bidding Report + single ⋯), slim
   manufacturing strip, room PREVIEW cards with elevation thumbnails, and the
   Shop-Floor Reports accordion reborn as three peer document cards.
   ========================================================================== */
/* Header: the stage-aware advance control as the hero CTA */
#cab-job .jobhdr-advance { display:inline-flex; align-items:center; gap:8px; }
#cab-job .jobhdr-advance .jl-badge { font-size:11px; padding:4px 10px; }
#cab-job .jobhdr-advance .jl-step.jl-primary {
  min-height:40px; padding:9px 20px; border-radius:10px;
  font:600 13.5px var(--ff-ui); letter-spacing:.005em;
  background:var(--acc); color:var(--acc-ink); border:1px solid var(--acc);
  cursor:pointer; transition:filter .12s ease, transform .06s ease;
}
#cab-job .jobhdr-advance .jl-step.jl-primary:hover { filter:brightness(1.07); }
#cab-job .jobhdr-advance .jl-step.jl-primary:active { transform:translateY(0.5px); }
/* Merged ⋯ menu: quiet group captions + divider */
.cab-menu-group { font:590 9.5px var(--ff-ui); letter-spacing:.09em; text-transform:uppercase; color:var(--muted); padding:7px 12px 3px; user-select:none; }
.cab-menu-sep { height:1px; margin:5px 8px; background:var(--bdr); }

/* Slim manufacturing strip under the header */
#cab-job .cf-strip { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:10px 0 2px; }
#cab-job .cf-strip:empty { display:none; }
#cab-job .cf-strip-chip {
  display:inline-flex; align-items:center; gap:6px;
  font:12px var(--ff-mono); font-variant-numeric:tabular-nums; color:var(--dim);
  background:var(--pn); border:1px solid var(--bdr); border-radius:999px;
  padding:5px 12px; cursor:pointer; transition:border-color .12s ease, color .12s ease;
}
#cab-job .cf-strip-chip b { color:var(--txt); font-weight:700; }
#cab-job .cf-strip-chip:hover { border-color:var(--bdr-h); color:var(--txt); }
#cab-job .cf-strip-dot { width:8px; height:8px; border-radius:50%; background:var(--dim); flex:0 0 auto; }
#cab-job .cf-strip-gate.is-ok  { color:var(--ok);  border-color:color-mix(in srgb, var(--ok) 40%, var(--bdr)); }
#cab-job .cf-strip-gate.is-ok .cf-strip-dot { background:var(--ok); }
#cab-job .cf-strip-gate.is-warn { color:var(--warn); border-color:color-mix(in srgb, var(--warn) 40%, var(--bdr)); }
#cab-job .cf-strip-gate.is-warn .cf-strip-dot { background:var(--warn); }
#cab-job .cf-strip-gate.is-bad { color:var(--no); border-color:color-mix(in srgb, var(--no) 45%, var(--bdr)); }
#cab-job .cf-strip-gate.is-bad .cf-strip-dot { background:var(--no); }
#cab-job .cf-strip-stamp { margin-left:auto; font:11px var(--ff-mono); color:var(--muted); }

/* Rooms: preview CARDS in a wrapping row (was stacked full-width rows) */
#cab-job .cf-rooms { flex-direction:row; flex-wrap:wrap; gap:12px; align-items:stretch; }
#cab-job .cf-room-card {
  flex:0 1 280px; min-width:230px; max-width:340px;
  flex-direction:column; align-items:stretch; gap:0;
  padding:0; overflow:hidden; border-radius:12px;
}
#cab-job .cf-room-thumb {
  display:block; width:100%; aspect-ratio:16/7;
  background:color-mix(in srgb, var(--white) 4%, var(--inp));
  border-bottom:1px solid var(--bdr); overflow:hidden;
}
#cab-job .cf-room-thumb svg { width:100%; height:100%; display:block; object-fit:contain; }
#cab-job .cf-room-thumb:not(.has-svg) { display:none; }  /* no preview → compact card, no dead box */
#cab-job .cf-room-name { padding:10px 14px 0; font-size:14.5px; }
#cab-job .cf-room-meta { padding:2px 14px 0; }
#cab-job .cf-room-state { padding:4px 14px 0; }
#cab-job .cf-room-acts { padding:9px 14px 12px; flex-wrap:wrap; }

/* Shop-Floor Reports: section head + three peer document cards */
#cab-job .rep-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:12px; }
#cab-job .rep-head-sub { color:var(--dim); font-size:11.5px; margin:3px 0 0; max-width:60ch; }
#cab-job .rep-head-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
#cab-job .rep-packet-btn { min-height:38px; padding:8px 16px; border-radius:10px; font-weight:600; }
#cab-job .rep-cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:12px; align-items:start; }
#cab-job .rep-card { background:var(--pn); border:1px solid var(--bdr); border-radius:12px; padding:12px; }
#cab-job .rep-card-head { display:flex; align-items:center; gap:10px; padding:2px 2px 10px; border-bottom:1px solid var(--bdr); margin-bottom:8px; }
#cab-job .rep-card-ic {
  flex:0 0 auto; width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  border-radius:9px; background:color-mix(in srgb, var(--acc) 13%, transparent); color:var(--acc);
}
#cab-job .rep-card-ic svg { width:17px; height:17px; }
#cab-job .rep-card-t { font:600 13.5px var(--ff-ui); color:var(--white); }
#cab-job .rep-card-s { font:11px var(--ff-ui); color:var(--dim); margin-top:1px; }
#cab-job .rep-card-rows { display:flex; flex-direction:column; gap:2px; }
#cab-job .rep-card-extra { display:contents; }   /* extra rows join the column when un-hidden */
#cab-job .rep-card-extra[hidden] { display:none; }
#cab-job .rep-row {
  display:flex; align-items:center; gap:10px; width:100%;
  padding:8px 8px; border:none; border-radius:9px; background:transparent;
  cursor:pointer; text-align:left; transition:background .12s ease;
}
#cab-job .rep-row:hover { background:var(--pn-h); }
#cab-job .rep-row-ic { flex:0 0 auto; width:26px; height:26px; display:flex; align-items:center; justify-content:center; border-radius:7px; background:var(--inp); color:var(--dim); }
#cab-job .rep-row-ic svg { width:14px; height:14px; }
#cab-job .rep-row-txt { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:0; }
#cab-job .rep-row-l { font:600 12.5px var(--ff-ui); color:var(--txt); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#cab-job .rep-row-d { font:11px var(--ff-ui); color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#cab-job .rep-row-go { flex:0 0 auto; font-size:13px; opacity:0; transition:opacity .12s ease; }
#cab-job .rep-row:hover .rep-row-go { opacity:.75; }
#cab-job .rep-card-more {
  align-self:flex-start; margin-top:4px; padding:5px 8px;
  background:none; border:none; color:var(--dim); font:600 11.5px var(--ff-ui);
  cursor:pointer; border-radius:7px; transition:color .12s ease;
}
#cab-job .rep-card-more:hover { color:var(--acc); }

/* PR-JOBHUB-FILES (2026-08-25): split rows — main button opens, trailing
   square buttons download (⬇, Machine-Routing-gated menu) and print (🖨). */
#cab-job .rep-row-split { position:relative; padding:0; gap:4px; background:transparent; }
#cab-job .rep-row-split:hover { background:transparent; }
#cab-job .rep-row-main {
  flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:10px;
  padding:8px 8px; border:none; border-radius:9px; background:transparent;
  cursor:pointer; text-align:left; transition:background .12s ease;
}
#cab-job .rep-row-main:hover { background:var(--pn-h); }
#cab-job .rep-row-act {
  flex:0 0 auto; width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--bdr); border-radius:8px; background:var(--inp); color:var(--dim);
  font-size:13px; cursor:pointer; transition:border-color .12s ease, color .12s ease, background .12s ease;
}
#cab-job .rep-row-act:hover { border-color:var(--acc); color:var(--acc); background:var(--pn-h); }
#cab-job .rep-files-menu {
  position:absolute; top:calc(100% + 4px); right:0; left:auto; z-index:40;
  min-width:230px;
}

/* PR-DOOR-METRICS (2026-08-25): the Pipeline-value card dims a shade while
   some orders are still unpriced, so a half-filled V173 cache reads as
   "incomplete" rather than as a genuinely smaller pipeline. Clears itself
   once the lazy fill has been round the whole list. */
:is(#cab-dash,#d-orders) .cmf-card-partial { color:var(--dim); }

/* PR-CABHDR-HIDE (2026-08-27, owner: "get rid of the Cabinet Design Studio
   header, move the start new job down"). The studio header row is hidden in
   index.html; "+ New Job" now rides the tab bar's right edge. Match it to the
   ⋯ button's 40px so the two sit level with each other and with the tabs. */
#cab-dash .cab-hub-actions .home-btn { min-height:40px; border-radius:9px; padding:8px 15px; }
/* The dashboard used to sit under a header band; without it the tabs would
   crowd the topbar. Give the scroll area back a little breathing room. */
body[data-cabdash-tab] #cab-dash.scroll { padding-top:16px; }
/* The `hidden` attribute on that row is NOT enough on its own: `hidden` is only
   `display:none` in the browser's default stylesheet, and `.shdr` (app.css:468)
   sets `display:flex`, which is an author rule and therefore wins. The header
   stayed fully visible. This rule is what actually hides it. */
#pg-cab .shdr[hidden] { display:none !important; }

/* ==========================================================================
   PR-JOBLIST-GLANCE (2026-09-05) — jobs list rebuilt around "what's happening".
   Operator: "hard to tell what's going on at a glance". The stage is now the
   loudest thing on the row (colored left stripe + readable label), the list is
   grouped by stage with heading rows, and two new columns — Due and Waiting
   on — answer the two questions a shop owner actually asks. The four
   per-row buttons collapsed into one Open ▾ menu. Card strip gets a second,
   explanatory line under each number.
   ========================================================================== */

/* Stage stripe on the row's left edge. app.css reserves a 3px transparent
   left border on every row and turns it accent on hover; these ID-scoped rules
   beat that so a production job stays amber even under the pointer. */
:is(#cab-dash,#d-orders) .jobs-table tbody tr.jl-row { border-left:4px solid transparent; }
:is(#cab-dash,#d-orders) .jobs-table tbody tr.jl-row.st-production { border-left-color:var(--warn); }
:is(#cab-dash,#d-orders) .jobs-table tbody tr.jl-row.st-approved   { border-left-color:var(--ok); }
:is(#cab-dash,#d-orders) .jobs-table tbody tr.jl-row.st-quoted     { border-left-color:#e0a83d; }
:is(#cab-dash,#d-orders) .jobs-table tbody tr.jl-row.st-draft,
:is(#cab-dash,#d-orders) .jobs-table tbody tr.jl-row.st-design     { border-left-color:color-mix(in srgb, var(--muted) 55%, transparent); }
:is(#cab-dash,#d-orders) .jobs-table tbody tr.jl-row.st-declined   { border-left-color:var(--no,#e5484d); }
:is(#cab-dash,#d-orders) .jobs-table tbody tr.jl-row.st-delivered  { border-left-color:color-mix(in srgb, var(--ok) 55%, transparent); }
:is(#cab-dash,#d-orders) .jobs-table tbody tr.jl-row.st-archived   { border-left-color:transparent; }

/* Job name with the client underneath — one cell, two lines. */
:is(#cab-dash,#d-orders) .jl-name-wrap { display:flex; flex-direction:column; gap:1px; min-width:0; }
:is(#cab-dash,#d-orders) .jl-name-wrap .nm { font:600 14.5px var(--ff-ui); color:var(--white); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
:is(#cab-dash,#d-orders) .jl-client { font:12.5px var(--ff-ui); color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Stage label — real words in the UI face, big enough to read across the
   room, tinted by stage. Replaces the 10px monospace .status-pill. */
:is(#cab-dash,#d-orders) .jl-stage { display:inline-block; font:600 12.5px var(--ff-ui); letter-spacing:.01em; padding:5px 11px; border-radius:6px; white-space:nowrap; background:color-mix(in srgb, var(--muted) 18%, transparent); color:var(--txt); }
:is(#cab-dash,#d-orders) .jl-stage.st-production { background:color-mix(in srgb, var(--warn) 18%, transparent); color:var(--warn); }
:is(#cab-dash,#d-orders) .jl-stage.st-approved   { background:color-mix(in srgb, var(--ok) 18%, transparent);   color:var(--ok); }
:is(#cab-dash,#d-orders) .jl-stage.st-quoted     { background:color-mix(in srgb, #e0a83d 18%, transparent);     color:#e0a83d; }
:is(#cab-dash,#d-orders) .jl-stage.st-declined   { background:color-mix(in srgb, var(--no,#e5484d) 16%, transparent); color:var(--no,#e5484d); }
:is(#cab-dash,#d-orders) .jl-stage.st-delivered  { background:color-mix(in srgb, var(--ok) 12%, transparent);   color:color-mix(in srgb, var(--ok) 80%, var(--dim)); }
:is(#cab-dash,#d-orders) .jl-stage.st-draft,
:is(#cab-dash,#d-orders) .jl-stage.st-design     { color:var(--dim); }
:is(#cab-dash,#d-orders) .jl-stage.st-archived   { background:transparent; border:1px solid var(--bdr); color:var(--muted); }

/* Due — calendar date on top, plain-English distance under it. Amber inside
   two weeks, red when late, quiet grey "no date" when it was never filled in. */
:is(#cab-dash,#d-orders) .jl-due { display:flex; flex-direction:column; gap:1px; white-space:nowrap; }
:is(#cab-dash,#d-orders) .jl-due-d { font:600 13px var(--ff-mono); font-variant-numeric:tabular-nums; color:var(--txt); }
:is(#cab-dash,#d-orders) .jl-due-w { font:11.5px var(--ff-ui); color:var(--dim); }
:is(#cab-dash,#d-orders) .jl-due-soon .jl-due-d, #cab-dash .jl-due-soon .jl-due-w { color:var(--warn); }
:is(#cab-dash,#d-orders) .jl-due-late .jl-due-d, #cab-dash .jl-due-late .jl-due-w { color:var(--no,#e5484d); font-weight:600; }
:is(#cab-dash,#d-orders) .jl-due-none { font:12px var(--ff-ui); color:var(--muted); font-style:italic; }

/* Waiting on — first line of the job notes. */
/* (2026-09-05 fix) max-width:0 collapsed the column to one letter ("C.") — the
   trim now lives on the span with a real cap instead. */
/* (2026-09-05, third try) The Notes text kept collapsing to "C." — app.css's
   shared `.jobs-table tbody td { overflow:hidden; white-space:nowrap }` plus
   auto table layout let the browser give the flexible Notes column almost no
   width. table-layout:fixed makes the header percentages the law, so every
   column gets exactly its share and long text ellipsizes inside it. */
#cab-dash .jobs-table, #d-orders .jobs-table { table-layout:fixed; }
:is(#cab-dash,#d-orders) .col-wait { min-width:0; }
:is(#cab-dash,#d-orders) .jl-wait { display:block; max-width:100%; font:13px var(--ff-ui); color:var(--txt); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
:is(#cab-dash,#d-orders) .jl-wait-none { color:var(--muted); }

/* Size — "4 rooms · 21 cabs" in words. */
:is(#cab-dash,#d-orders) .col-size { font:12.5px var(--ff-mono); font-variant-numeric:tabular-nums; color:var(--dim); white-space:nowrap; }

/* Group heading rows for the by-stage order. Not clickable, no hover tint. */
:is(#cab-dash,#d-orders) .jobs-table tbody tr.jl-group { cursor:default; background:color-mix(in srgb, var(--inp) 60%, transparent); border-left:4px solid transparent; }
:is(#cab-dash,#d-orders) .jobs-table tbody tr.jl-group:hover { background:color-mix(in srgb, var(--inp) 60%, transparent); }
:is(#cab-dash,#d-orders) .jobs-table tbody tr.jl-group td { padding:6px 16px; }
:is(#cab-dash,#d-orders) .jl-group-t { font:590 11px var(--ff-ui); letter-spacing:.085em; text-transform:uppercase; color:var(--dim); }
:is(#cab-dash,#d-orders) .jl-group-n { margin-left:8px; font:600 11px var(--ff-mono); color:var(--muted); }
:is(#cab-dash,#d-orders) .jobs-table tbody tr.jl-group.st-production .jl-group-t { color:var(--warn); }
:is(#cab-dash,#d-orders) .jobs-table tbody tr.jl-group.st-approved   .jl-group-t { color:var(--ok); }
:is(#cab-dash,#d-orders) .jobs-table tbody tr.jl-group.st-quoted     .jl-group-t { color:#e0a83d; }

/* Open ▾ — the ONE button per row. Quiet until hovered; the row itself is
   still clickable, this is for the drawings / QR shortcuts. */
:is(#cab-dash,#d-orders) .jl-open { font:600 12.5px var(--ff-ui); padding:6px 11px; min-height:32px; border:1px solid var(--bdr); border-radius:7px; background:var(--inp); color:var(--txt); cursor:pointer; white-space:nowrap; vertical-align:middle; margin-right:4px; transition:border-color .12s ease, background .12s ease; }
:is(#cab-dash,#d-orders) .jl-open:hover { border-color:var(--acc); color:var(--acc); }
:is(#cab-dash,#d-orders) .jl-open span { opacity:.7; font-size:10px; margin-left:2px; }

/* Card strip: the explanatory second line under each number. */
:is(#cab-dash,#d-orders) .cmf-card-sub { font:12px var(--ff-ui); color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
:is(#cab-dash,#d-orders) .cmf-card-sub:empty { display:none; }
:is(#cab-dash,#d-orders) .cmf-card-sub.cmf-sub-late { color:var(--no,#e5484d); }
/* "N late" takes the value slot in red. */
:is(#cab-dash,#d-orders) .cmf-card-late { color:var(--no,#e5484d); }
/* Next-due card is a real button now (was the static "Coming soon" card). */
:is(#cab-dash,#d-orders) .cmf-card-due .cmf-card-ic { background:color-mix(in srgb, var(--warn) 14%, transparent); color:var(--warn); }
:is(#cab-dash,#d-orders) .cmf-card-due.active { border-left-color:var(--warn); background:color-mix(in srgb, var(--warn) 10%, var(--pn)); border-color:color-mix(in srgb, var(--warn) 45%, var(--bdr)); }

/* PR-STAGE-CHIPS-LESS (2026-09-05): "More ▾" holds the stages that aren't
   everyday chips. The button matches .jsp exactly (it is NOT a .jsp so
   dashStatusPill's chip loop doesn't light it up on "All"); it turns solid when
   a stage inside it is the active filter. */
:is(#cab-dash,#d-orders) .jsp-more-wrap { position:relative; display:inline-flex; }
:is(#cab-dash,#d-orders) .jsp-more { font:600 12.5px var(--ff-ui); padding:7px 15px; border-radius:999px; border:1px dashed var(--bdr); background:transparent; color:var(--muted); cursor:pointer; transition:background .14s ease, color .14s ease, border-color .14s ease; }
:is(#cab-dash,#d-orders) .jsp-more:hover { border-color:var(--bdr-h); color:var(--txt); }
:is(#cab-dash,#d-orders) .jsp-more[aria-expanded="true"] { border-style:solid; color:var(--txt); }
:is(#cab-dash,#d-orders) .jsp-more.on { background:var(--acc); border:1px solid var(--acc); color:var(--acc-ink); }
:is(#cab-dash,#d-orders) .jsp-more span { font-size:10px; opacity:.75; margin-left:2px; }
:is(#cab-dash,#d-orders) .jsp-more-menu { position:absolute; top:calc(100% + 6px); left:0; z-index:1100; min-width:150px; padding:6px; background:var(--pn); border:1px solid var(--bdr); border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.22); display:flex; flex-direction:column; gap:2px; }
:is(#cab-dash,#d-orders) .jsp-more-menu[hidden] { display:none; }
:is(#cab-dash,#d-orders) .jsp-mi { text-align:left; font:500 13px var(--ff-ui); padding:8px 12px; border:none; border-radius:7px; background:transparent; color:var(--txt); cursor:pointer; }
:is(#cab-dash,#d-orders) .jsp-mi:hover, #cab-dash .jsp-mi:focus-visible { background:var(--inp); outline:none; }
:is(#cab-dash,#d-orders) .jsp-mi.on { background:color-mix(in srgb, var(--acc) 16%, transparent); color:var(--acc); font-weight:600; }

/* ==========================================================================
   PR-STUDIO-IDENTITY (2026-09-05) — two personalities, one family.
   Operator: the two studios "are not much different from each other and they
   look plain". Each studio gets ONE studio color used for identity (header
   band, card icon badges, active chips and tabs, the folder icon) — blue stays
   for buttons and links only, so it means "press me" again. Cabinet Studio =
   the app blue, Door Studio = teal — the two colors the hub tiles already use.
   ========================================================================== */
/* (2026-09-05, operator: "should we not use … the color of the button that
   brings you into the cabinet studio from the main hub page") — yes. The hub
   already teaches Cabinet = the app blue (--acc) and Door = teal (--teal) on
   its two studio tiles (bench.css .bench-studio.is-cabinet / .is-door). The
   studios now wear THOSE, with the very same gradient recipe, so the color a
   person clicked on the hub is the color of the room they land in. Both
   tokens are theme-aware already, so dark mode needs no separate values.
   (The first cut used an invented walnut / slate; replaced for consistency.) */
#cab-dash  { --studio:var(--acc);  --studio-ink:var(--acc-ink, #fff);  --studio-soft:color-mix(in srgb, var(--acc) 14%, transparent); }
#d-orders  { --studio:var(--teal); --studio-ink:var(--teal-ink, #fff); --studio-soft:color-mix(in srgb, var(--teal) 14%, transparent); }

/* The band. Deep gradient in the studio's material, white type, the shop's
   name small on top, the studio's name big, today's date, and two or three
   numbers on the right. Height comes from its content, never the viewport. */
.studio-band { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; padding:22px 26px 20px; margin:0 0 18px; border-radius:14px; color:var(--studio-ink, #fff); box-shadow:var(--shadow-4); position:relative; overflow:hidden; }
#cab-dash .studio-band { background:linear-gradient(140deg, color-mix(in srgb, var(--acc) 88%, #fff) 0%, var(--acc) 46%, color-mix(in srgb, var(--acc) 72%, #000) 100%); }
#d-orders .studio-band { background:linear-gradient(140deg, color-mix(in srgb, var(--teal) 88%, #fff) 0%, var(--teal) 46%, color-mix(in srgb, var(--teal) 72%, #000) 100%); }
/* same corner sheen the hub tiles use (bench.css .bench-studio::after) */
.studio-band::after { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.16), transparent 60%); }
.studio-band > * { position:relative; z-index:1; }
.studio-band .sb-shop { font:600 11.5px var(--ff-ui); letter-spacing:.12em; text-transform:uppercase; opacity:.78; margin-bottom:4px; }
.studio-band .sb-title { font:800 30px/1.02 var(--ff-ui); letter-spacing:-0.025em; }
.studio-band .sb-date { font:500 13px var(--ff-ui); opacity:.85; margin-top:8px; }
.studio-band .sb-r { display:flex; gap:26px; align-items:flex-end; flex-wrap:wrap; }
.studio-band .sb-stat { display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-width:96px; }
.studio-band .sb-stat b { font:600 26px/1 var(--ff-mono); font-variant-numeric:tabular-nums; letter-spacing:-0.01em; }
.studio-band .sb-stat span { font:500 12px var(--ff-ui); opacity:.82; white-space:nowrap; }
.studio-band .sb-stat.sb-late b { color:#FFB4A6; }
@media (max-width:720px) { .studio-band { padding:18px 18px 16px; } .studio-band .sb-title { font-size:24px; } .studio-band .sb-r { gap:18px; } }

/* Where the studio color replaces generic blue. Buttons keep --acc. */
:is(#cab-dash,#d-orders) .cmf-card-ic { background:var(--studio-soft); color:var(--studio); }
:is(#cab-dash,#d-orders) .cmf-card.active .cmf-card-ic { background:color-mix(in srgb, var(--studio) 24%, transparent); }
:is(#cab-dash,#d-orders) .cmf-card.active { background:color-mix(in srgb, var(--studio) 10%, var(--pn)); border-color:color-mix(in srgb, var(--studio) 45%, var(--bdr)); border-left-color:var(--studio); box-shadow:0 2px 10px color-mix(in srgb, var(--studio) 18%, transparent); }
:is(#cab-dash,#d-orders) .cmf-card:hover { border-color:color-mix(in srgb, var(--studio) 55%, var(--bdr)); }
:is(#cab-dash,#d-orders) .jsp.on { background:var(--studio); border-color:var(--studio); color:#fff; }
:is(#cab-dash,#d-orders) .jsp-more.on { background:var(--studio); border-color:var(--studio); color:#fff; }
:is(#cab-dash,#d-orders) .jsp-mi.on { background:var(--studio-soft); color:var(--studio); }
:is(#cab-dash,#cab-job) .cab-dash-bar .tab.on { color:var(--studio); box-shadow:0 1px 2px color-mix(in srgb, var(--bg) 40%, transparent), 0 2px 8px color-mix(in srgb, var(--studio) 16%, transparent); }
:is(#cab-dash,#d-orders) .col-name svg { color:var(--studio); }
:is(#cab-dash,#d-orders) .jobs-table tbody tr:hover { border-left-color:var(--studio); }
:is(#cab-dash,#d-orders) .jl-open:hover { border-color:var(--studio); color:var(--studio); }
/* Jobs card title gets the same confident type as the band title, smaller. */
#cab-dash .jobs-card-title { font:700 18px var(--ff-ui); letter-spacing:-0.02em; }

/* MOTION — a little, with a reason. Rows settle in when the list paints
   (each one a hair later than the last, capped so a long list doesn't wait);
   card numbers count up once (JS, app-cabinet.js _cabCountUp). Everything
   here is off for people who asked their computer to reduce motion. */
@keyframes jl-in { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:none; } }
:is(#cab-dash,#d-orders) .jobs-table tbody tr.jl-row { animation:jl-in .32s cubic-bezier(.22,1,.36,1) both; animation-delay:calc(var(--i, 0) * 22ms); }
:is(#cab-dash,#d-orders) .jobs-table tbody tr.jl-group { animation:jl-in .32s cubic-bezier(.22,1,.36,1) both; }
#d-orders .jobs-table tbody tr { animation:jl-in .32s cubic-bezier(.22,1,.36,1) both; }
.studio-band { animation:jl-in .4s cubic-bezier(.22,1,.36,1) both; }
@media (prefers-reduced-motion: reduce) { #cab-dash *, #d-orders *, .studio-band { animation:none !important; } }

/* Empty state — a line drawing instead of an emoji. */
:is(#cab-dash,#d-orders) .empty-state .ei svg { width:56px; height:56px; color:var(--studio); opacity:.85; }

/* PR-DOORLIST-GLANCE (2026-09-05): the Door Studio list now uses the same
   row / chip / group classes as the Cabinet list (the rules above were widened
   to :is(#cab-dash,#d-orders)). These are the chip base styles the Door page
   still needed — the Cabinet ones live near the top of this file. */
#d-orders .jobs-status-pills { display:flex; gap:8px; flex-wrap:wrap; padding:0 0 14px; }
#d-orders .jsp { font:600 12.5px var(--ff-ui); padding:7px 15px; border-radius:999px; border:1px solid var(--bdr); background:var(--inp); color:var(--dim); cursor:pointer; transition:background .14s ease, color .14s ease, border-color .14s ease, transform .14s ease; }
#d-orders .jsp:hover { border-color:var(--bdr-h); color:var(--txt); }
#d-orders .jsp:active { transform:scale(.96); }
#d-orders .jsp.on { background:var(--studio); border-color:var(--studio); color:var(--studio-ink, #fff); }
#d-orders .jobs-table tbody tr.jl-row.row-pinned { background:color-mix(in srgb, var(--studio) 8%, var(--pn)); }
#d-orders .jobs-table tr.row-pinned > td { background:color-mix(in srgb, var(--studio) 10%, transparent); }
#d-orders .jobs-table tr.row-pinned > td:first-child { box-shadow:inset 3px 0 0 0 var(--studio); }
#d-orders .empty-state .ei svg { width:56px; height:56px; color:var(--studio); opacity:.85; }

/* ==========================================================================
   PR-JOB-PICTURES (2026-09-05) — a picture on every job / order.
   .jl-pic is the slot (rows 56×38, Job Hub room cards 116×78). It holds either an <img> (3D snapshot) or an inline SVG line
   drawing (elevation sketch / door drawing) in the studio's color.
   ========================================================================== */
:is(#cab-dash,#d-orders,#cab-job) .jl-pic { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; width:56px; height:38px; border-radius:6px; overflow:hidden; background:color-mix(in srgb, var(--studio, var(--acc)) 7%, var(--inp)); border:1px solid color-mix(in srgb, var(--studio, var(--acc)) 22%, var(--bdr)); color:var(--studio, var(--acc)); margin-right:2px; }
:is(#cab-dash,#d-orders,#cab-job) .jl-pic.jl-pic-lg { width:116px; height:78px; border-radius:8px; }
:is(#cab-dash,#d-orders,#cab-job) .jl-pic .jl-pic-img { width:100%; height:100%; object-fit:cover; display:block; }
:is(#cab-dash,#d-orders,#cab-job) .jl-pic .jl-sketch { display:block; }
:is(#cab-dash,#d-orders,#cab-job) .jl-pic .jl-sketch-empty { opacity:.45; }
:is(#cab-dash,#d-orders,#cab-job) .jl-pic.jl-pic-loading { opacity:.6; }
#cab-job .jl-pic { margin-right:11px; }
/* rows: the picture sits where the folder icon was */
:is(#cab-dash,#d-orders) .col-name { align-items:center; gap:12px; }

/* PR-JOB-TABS (2026-09-05): the job page's Rooms / Job Standards strip reuses
   the studio's .cab-dash-bar rules (widened above). The badge is the "N need a
   pick" count from the standards strip — amber, so a missing pick is visible
   from the tab without opening it. */
#cab-job .cab-job-bar { margin:6px 0 14px; }
#cab-job .cab-job-bar .tab.on { color:var(--studio, var(--acc)); }
#cab-job .cab-job-tab-badge { display:inline-block; margin-left:6px; padding:1px 7px; border-radius:999px; font:600 11px var(--ff-ui); background:color-mix(in srgb, var(--warn) 16%, transparent); color:var(--warn); vertical-align:1px; }
#cab-job .cab-job-tab-badge[hidden] { display:none; }
/* On the Job Standards tab the rest of the page hides (shop-standards.js rule)
   but the tab strip must stay so the operator can flip back. */
#cab-job.jobstd-open > #cab-job-bar { display:flex !important; }

/* PR-BAND-ONE-HEADER (2026-09-05): operator — "I don't need 2 headers". On the
   Door Studio ORDERS tab the band is the only header: the page's static title
   block hides (same :has() shape as the d-new rule in app.css) and the band
   carries the one primary action. Other door tabs (Library, New Order) keep
   the old title block, since the band lives inside #d-orders. */
#pg-door:has(> .scroll > #d-orders.on) > .shdr { display:none; }
.studio-band .sb-actions { display:flex; align-items:center; margin-left:8px; }
.studio-band .sb-action { font:600 13.5px var(--ff-ui); padding:10px 16px; border-radius:10px; border:1px solid rgba(255,255,255,.45); background:rgba(255,255,255,.92); color:var(--studio-ink-on-white, #0D1118); cursor:pointer; white-space:nowrap; box-shadow:0 2px 8px rgba(0,0,0,.18); transition:background .14s ease, transform .14s ease; }
.studio-band .sb-action:hover { background:#fff; transform:translateY(-1px); }
.studio-band .sb-action:focus-visible { outline:2px solid #fff; outline-offset:2px; }
#d-orders .studio-band .sb-action { color:#0E3B36; }

/* PR-JOB-PICTURES (2026-09-05, after operator feedback that the row stamps were
   "super small"): pictures come OFF the dense lists and live where they have
   room — the Job Hub room cards (.jl-pic-lg above) and, for door orders, the
   pinned pane: the order's door drawing at a readable size. */
#d-orders .door-pin-pic { display:flex; align-items:center; justify-content:center; margin:10px 12px 2px; padding:8px; border-radius:10px; background:color-mix(in srgb, var(--studio, var(--acc)) 7%, var(--inp)); border:1px solid color-mix(in srgb, var(--studio, var(--acc)) 22%, var(--bdr)); color:var(--studio, var(--acc)); }
#d-orders .door-pin-pic svg { display:block; max-width:100%; height:auto; }

/* PR-JOB-DEFAULTS-OUT (2026-09-05, after operator feedback: "highlight the
   pages they need to go to … and highlight the ones that aren't applied"):
   in job scope the Job Standards pages themselves carry the picks. The tab
   gets an amber count of picks still missing on that page; the row (or the
   door cell on the fronts table) is outlined amber when it needs a pick and
   marked job-green when this job set it; a small state word sits beside the
   control; one quiet status line under the tabs reports saves. */
#cab-dash-tab-shopstd .ss-tab { position:relative; }
#cab-dash-tab-shopstd .ss-tab-need { display:inline-block; margin-left:7px; min-width:18px; padding:1px 6px; border-radius:999px; font:700 11px var(--ff-ui); line-height:16px; text-align:center; background:color-mix(in srgb, var(--warn) 18%, transparent); color:var(--warn); vertical-align:1px; }
#cab-dash-tab-shopstd tr.ss-need > th, #cab-dash-tab-shopstd tr.ss-need > td, #cab-dash-tab-shopstd td.ss-need { background:color-mix(in srgb, var(--warn) 9%, transparent); box-shadow:inset 3px 0 0 var(--warn); }
#cab-dash-tab-shopstd tr.ss-need select, #cab-dash-tab-shopstd td.ss-need select { border-color:color-mix(in srgb, var(--warn) 60%, var(--bdr)); }
#cab-dash-tab-shopstd tr.ss-jobset > th, #cab-dash-tab-shopstd tr.ss-jobset > td, #cab-dash-tab-shopstd td.ss-jobset { box-shadow:inset 3px 0 0 var(--tier-job, #1E7F4F); }
#cab-dash-tab-shopstd .ss-pick-state { display:inline-block; margin-left:8px; font:600 11px var(--ff-ui); color:var(--muted); white-space:nowrap; vertical-align:middle; }
#cab-dash-tab-shopstd .ss-pick-state.is-need { color:var(--warn); }
#cab-dash-tab-shopstd .ss-pick-state.is-job { color:var(--tier-job, #1E7F4F); }
#cab-dash-tab-shopstd .ss-job-note { margin:6px 0 10px; font:12.5px var(--ff-ui); color:var(--tier-job, #1E7F4F); }
#cab-dash-tab-shopstd .ss-job-note.is-err { color:var(--no, #D33A4B); }
#cab-dash-tab-shopstd .ss-job-note[hidden] { display:none; }