/* ═══════════════════════════════════════════════════════════════════════ THEME SYSTEM — single source of truth for the main SPA. The app ships EXACTLY two themes: `light` (default) and `dark`, defined in the block below. They share every token name + the same blueprint-blue accent, so switching is a one-attribute DOM change (data-theme on ; browser repaints in <1ms). The admin/standalone pages mirror these exact values via admin-shell.css's --canvas/--paper/--ink tokens so the whole product reads as ONE app in both themes. Do NOT add a third theme. ═══════════════════════════════════════════════════════════════════════ */ /* PR-RISK-TOKENS (2026-05-27): theme-stable risk classification. Same green means ON TRACK in every theme, same amber means AT RISK, same rose means LATE — the office's eye carries learned meaning across themes (light/dark/walnut/etc.). Defined on a plain :root so EVERY theme inherits the same hex unless it explicitly overrides (which no theme currently does). Replaces ~52 hardcoded #16a34a / #b45309 / #b8475a sites in .prodp-risk-pill / .schedp-* / .ipd-prog-* / .adm-pill / .adm-action. */ :root { --risk-on-track: #16a34a; /* green-600 — ON TRACK */ --risk-at-risk: #b45309; /* amber-700 — AT RISK */ --risk-late: #b8475a; /* rose-600 — LATE/PAST */ } /* ═══════════════════════════════════════════════════════════════════════ THEME SYSTEM — exactly TWO themes: Light (default) + Dark. 2026-07-18: consolidated from the prior 9-theme sprawl (forge / forge-light / ascut / precision-light / walnut / dark / shop / test / exgf) down to one clean light/dark pair. They are true siblings: SAME token names, SAME blueprint-blue accent identity, SAME semantic status hues — only the neutral surface ramp flips. Switching is a one-attribute DOM change (data-theme on ); legacy saved ids are migrated to light/dark in the boot scripts (index.html head, admin-shell.js) and in app-core.js. The CSS `:root` fallback (no data-theme) resolves to LIGHT — the same as the default theme — so there is never a flash of a different palette before the boot script runs. ═══════════════════════════════════════════════════════════════════════ */ /* ─── LIGHT (default) — bright drafting-paper engineering canvas ───────── */ :root, :root[data-theme="light"] { --bg: #F3F5F8; /* page ground — drafting paper */ --sf: #E9EDF2; /* topbar / sidebar / statusbar chrome */ --pn: #FFFFFF; /* cards, panels, data containers */ --pn-h: #F0F3F7; /* card / row hover */ --inp: #FFFFFF; /* form-input background */ --bdr: #D9DFE7; /* default hairline border */ --bdr-h: #AAB3C0; /* hover / focus / active border */ --acc: #2563EB; /* blueprint blue — CTA, selection, focus (AA on --pn) */ --acc2: #1D4FD8; /* accent hover — deeper blue */ --acc-ink: #FFFFFF; /* ink on the accent fill */ --txt: #1A222E; /* primary text — ~13:1 on --bg (AAA) */ --dim: #5A6573; /* secondary text / labels — ~5.4:1 (AA) */ --muted: #8C95A0; /* placeholders, disabled, em-dash empties */ --white: #0D1118; /* highest-emphasis ink (darkest token in light) */ --ink: var(--white); /* body-text ink token — darkest for legibility */ --ok: #0E9D6E; --ok-ink: #FFFFFF; /* success / on-track green */ --warn: #C77700; --warn-ink: #FFFFFF; /* at-risk / low-stock amber */ --no: #D33A4B; --no-ink: #FFFFFF; /* late / danger / delete rose */ --lime: #0E9D6E; --lime-ink: #FFFFFF; /* status-complete (=--ok) */ } /* ─── DARK — near-black engineering canvas, SAME blueprint-blue accent ─── */ :root[data-theme="dark"] { --bg: #000000; /* page ground — true black (AMOLED) */ --sf: #000000; /* topbar / sidebar / statusbar — coplanar black */ --pn: #16181C; /* cards, panels — lifted a hair off black */ --pn-h: #1E2127; /* card / row hover — a real lift */ --inp: #202327; /* inputs, filter chips, command bar */ --bdr: #2F3336; /* 1px hairline — the white-outline on black */ --bdr-h: #3E4348; /* hover / focus / active border */ --acc: #4C8DFF; /* blueprint blue (lightened for dark) — same family as light */ --acc2: #6AA5FF; /* accent hover — brighter blue */ --acc-ink: #05070D; /* near-black ink on the bright-blue fill */ --txt: #E7E9EA; /* primary text — near-white */ --dim: #9AA3B0; /* secondary text / labels */ --muted: #6B7480; /* placeholders, disabled, em-dash empties */ --white: #FFFFFF; /* highest-emphasis headings */ --ink: var(--txt); /* body-text ink token — bright on dark surfaces */ --ok: #34D399; --ok-ink: #06281D; /* success / on-track green */ --warn: #F0B429; --warn-ink: #2A1E03; /* at-risk / low-stock amber */ --no: #F2566B; --no-ink: #2A0810; /* late / danger / delete rose */ --lime: #34D399; --lime-ink: #06281D; /* status-complete (=--ok) */ } /* ═══════════════════════════════════════════════════════════════════════ PR-UX-POLISH (2026-09-14, operator: "get rid of ugly font and ugly shadow colors, make the buttons and lines more professional") ═══════════════════════════════════════════════════════════════════════ Three names this stylesheet USES were never DEFINED, so every consumer silently took the hardcoded fallback baked into its own `var(..., X)`: --bg-card → #14181f — a DARK panel colour, applied in the LIGHT theme too. Anything falling back to it was painting a near-black surface on drafting paper. --tier-cab → #7A3BAF — the cabinet-tier purple, hardcoded in a dozen places, off-palette against the blueprint blue. --radius-sm → 6px in some rules, 5px and 8px hardcoded in others, so three buttons in one row had three corner radii. Defining them is most of the fix: the values below are now one edit away instead of scattered through 17,000 lines. SHADOWS. The old ones were pure black (`rgba(0,0,0,.5)`, `.6`) at a single blur. Pure black over a coloured ground reads as grey soot rather than shade — it is the single most common thing that makes an interface look cheap. Real shade is (a) TINTED toward the surface's own hue and (b) LAYERED: a tight contact shadow for the edge plus a wide ambient one for the lift. `--shadow-ink` carries the tint as space-separated RGB channels so each layer can set its own alpha. */ :root, :root[data-theme="light"] { /* Cool slate-navy pulled from --txt (#1A222E) — shade on paper is never neutral grey; it takes the colour of what is around it. */ --shadow-ink: 26 34 46; --tier-cab: #6D28D9; /* cabinet tier — violet, one family off the blue */ --tier-cab-soft: color-mix(in srgb, var(--tier-cab) 10%, transparent); } :root[data-theme="dark"] { /* On a black ground a shadow cannot darken anything, so it does less work and the border carries the edge. Kept near-black, not tinted up, or panels acquire a blue halo. */ --shadow-ink: 0 0 0; --tier-cab: #A78BFA; /* lightened for dark — same violet family */ --tier-cab-soft: color-mix(in srgb, var(--tier-cab) 16%, transparent); } :root { --bg-card: var(--pn); /* was undefined → a dark fallback in light mode */ /* Elevation. Two layers each: contact + ambient. */ --shadow-1: 0 1px 2px rgb(var(--shadow-ink) / .05), 0 1px 3px rgb(var(--shadow-ink) / .08); --shadow-2: 0 1px 2px rgb(var(--shadow-ink) / .05), 0 4px 12px rgb(var(--shadow-ink) / .10); --shadow-3: 0 2px 4px rgb(var(--shadow-ink) / .06), 0 12px 28px rgb(var(--shadow-ink) / .14); --shadow-4: 0 4px 8px rgb(var(--shadow-ink) / .08), 0 24px 56px rgb(var(--shadow-ink) / .20); /* A pressed / inset well, for the tinted callouts. */ --shadow-inset: inset 0 1px 2px rgb(var(--shadow-ink) / .06); /* Corner radii — one ladder, so a row of buttons agrees with itself. */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px; /* Control height. 44px is the WCAG 2.5.5 tap target the editor already settled on; the 48px and 36px one-offs elsewhere were drift, not intent. */ --ctl-h: 44px; --ctl-h-sm: 34px; /* One hairline colour for rules INSIDE a card, quieter than the card's own border so a stack of rows does not read as a table. */ --hairline: color-mix(in srgb, var(--bdr) 60%, transparent); } /* ─── Theme-stable derived tokens ─────────────────────────────────────── Defined once on plain :root; they reference the active theme's core tokens (var() resolves at use-time against the winning cascade), so they follow light/dark automatically. This keeps older consumers (schedule / lifecycle pills, the SVG drafting canvas) resolving after the multi-theme consolidation removed the themes that used to own the --status-* / --canvas-* names. */ :root { --status-draft: var(--dim); --status-draft-ink: var(--bg); --status-scheduled: var(--warn); --status-scheduled-ink: var(--warn-ink); --status-progress: var(--acc); --status-progress-ink: var(--acc-ink); --status-complete: var(--ok); --status-complete-ink: var(--ok-ink); --status-alert: var(--no); --status-alert-ink: var(--no-ink); --canvas-viewport: var(--bg); --canvas-grid-minor: var(--pn-h); --canvas-grid-major: var(--bdr); --canvas-model-default: #D1D1D1; --canvas-select-fill: var(--acc); --canvas-select-outline: var(--acc2); --canvas-dim-text: var(--txt); --canvas-snap: var(--acc2); --canvas-axis-x: #E06B6B; --canvas-axis-y: #6BC97A; --canvas-axis-z: var(--acc); } *{margin:0;padding:0;box-sizing:border-box;} body{ font-family:'Inter','Segoe UI',-apple-system,BlinkMacSystemFont,Roboto,sans-serif; font-feature-settings:'cv11','ss01','ss03'; /* Inter: cleaner 'l', single-story 'a', open '4' */ font-variant-numeric:tabular-nums; /* lock digit width so dimensions + counts line up */ font-size:14px; font-weight:400; background:var(--bg); color:var(--txt); line-height:1.6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; } /* ═════════════════════════════════════════════════════════════════════ TYPOGRAPHY — Inter type ramp. Scoped overrides matching the design spec: • Logo / brand → SemiBold 24px • Page heading h1 → SemiBold 28px (drawer/login: 24px) • Section title h2 → Medium 20px • Subsection h3 → Medium 16px (was 14px — tightened) • Body / .txt → Regular 14–15px • Small label .lbl → Medium 12px tabular • Buttons / nav → Medium 14px (.bs stays 12px) ════════════════════════════════════════════════════════════════════ */ h1{font-family:'Inter',inherit;font-weight:600;font-size:28px;letter-spacing:-.01em;line-height:1.25;} h2{font-family:'Inter',inherit;font-weight:500;font-size:20px;letter-spacing:-.005em;line-height:1.3;} h3{font-family:'Inter',inherit;font-weight:500;font-size:16px;letter-spacing:0;line-height:1.35;} button,.btn,.tab,.nav-btn{font-family:'Inter',inherit;font-weight:500;font-size:14px;letter-spacing:.1px;} .bs{font-size:12px;font-weight:500;} /* small variants stay compact */ .li-m,.dim,.sub,.cv-hint{font-weight:500;font-size:12px;letter-spacing:.1px;} /* Tabular figures everywhere a number is shown so columns of dims/counts align */ .st-n,.li-m,.fg input[type="number"],.cutlist-out,#scene-hud{font-variant-numeric:tabular-nums;} .hidden{display:none!important;} a{color:var(--acc);text-decoration:none;} /* ---- Login ---- */ .login-wrap{display:flex;align-items:center;justify-content:center;height:100vh;background:radial-gradient(ellipse at 50% 30%,#1a2040 0%,#12131a 70%);} .login-box{background:var(--pn);padding:48px;border-radius:16px;width:100%;max-width:400px;border:1px solid var(--bdr);box-shadow:0 24px 80px rgb(var(--shadow-ink) / .6);} .login-box h1{color:var(--acc2);margin-bottom:4px;font-size:24px;letter-spacing:1px;} .login-box .sub{color:var(--dim);margin-bottom:32px;font-size:13px;} .login-box .err{color:var(--no);margin-top:12px;font-size:12px;} /* ---- Form ---- */ .fg{margin-bottom:14px;} .fg label{display:block;margin-bottom:5px;color:var(--dim);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.8px;} /* PR-CUST-8 (2026-06-10) — customer-form section headers. The old collapsed
"Advanced" buried the (now live-math) Discount % per the operator's UX complaint; the form is flat sections with full-width labeled rules instead. Same visual vocabulary as .fg label so it reads as a heading from tablet distance without new tokens. */ .cust-section-head{font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--dim);border-bottom:1px solid var(--bdr);padding-bottom:5px;margin:18px 0 12px;} .cust-section-head.cust-section-danger{color:var(--no);border-bottom-color:var(--no);} /* PR-CUST-STICKY-SAVE (2026-08-19) — sticky Save/Back bar on the customer edit form. The form runs ~9 sections; committing a one-field change used to mean scrolling the whole page to reach Save, and Back (topbar / browser gesture) silently dropped the edit. Save + Back now ride at the top and follow the operator down. THE OVERFLOW OVERRIDE IS LOAD-BEARING, not cosmetic: #hub-scroll-panels carries `.scroll{overflow-y:auto}` but is NOT the element that scrolls — #pg-hub is display:block (shell.css:817), so `.scroll`'s flex:1 is inert, the panel is content-height, and #app-workspace does the scrolling. That inert overflow still makes #hub-scroll-panels the sticky containing scrollport, and a scrollport that never scrolls pins nothing — the bar scrolls away with the page. Verified in a headless Chromium harness: without this line the bar lands at y=-1079 after a 1200px scroll; with it, y=56 (flush under the topbar). Scoped to body[data-cust-editing] — set by openCustomerForm(), cleared by _custCloseFormNow() — so the hub's other tabs keep the container's overflow behavior untouched. */ body[data-cust-editing="true"] #hub-scroll-panels{overflow:visible;} /* .pn padding, mirrored so the bar can bleed to the panel edges. Tracks the 14px .pn override in shell.css @media (max-width:599px). */ #cust-form{--cust-pad:28px;} @media (max-width:599px){ #cust-form{--cust-pad:14px;} } .cust-form-bar{ position:sticky; top:0; z-index:var(--z-sticky); display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:calc(var(--cust-pad) * -1) calc(var(--cust-pad) * -1) 20px; padding:12px var(--cust-pad); background:var(--pn); border-bottom:1px solid var(--bdr); border-radius:8px 8px 0 0; box-shadow:0 4px 12px color-mix(in srgb, var(--scrim) 22%, transparent); } /* Override .pn h3's own bottom rule — the bar already draws one. */ .cust-form-bar h3{ flex:1 1 auto; min-width:0; margin:0; padding:0; border-bottom:none; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* 44px tap targets — gloved hands on a shop tablet (WCAG 2.5.5 / Apple HIG). */ .cust-form-bar .cust-form-back, .cust-form-bar .cust-form-save{ min-height:44px; flex:0 0 auto; } .cust-form-bar .cust-form-save{ min-width:112px; font-weight:700; } /* Unsaved-changes flag: the operator's cue that Back will ask. */ .cust-dirty-flag{ flex:0 0 auto; font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--warn); background:color-mix(in srgb, var(--warn) 14%, transparent); border:1px solid color-mix(in srgb, var(--warn) 38%, transparent); border-radius:999px; padding:4px 10px; } .cust-dirty-flag[hidden]{ display:none; } /* Phone: the title is the first thing to go — Back and Save are the job. */ @media (max-width:599px){ .cust-form-bar h3{ flex-basis:100%; order:3; font-size:13px; } .cust-form-bar .cust-form-save{ margin-left:auto; } } @media (prefers-reduced-motion:no-preference){ .cust-form-bar{ transition:box-shadow 160ms ease; } } /* Tabbing through the form scrolls the next field into view — without this the browser parks it flush at the scrollport top, i.e. UNDER the sticky bar. Clears the bar's height plus a little breathing room. */ #cust-form input, #cust-form select, #cust-form textarea, #cust-form .cust-section-head{ scroll-margin-top:84px; } /* UX-DO — Door-order focus-mode polish. Per 2026 form-design research (NN/G + DesignStudio): label-above-field, single- column within a section, generous input padding, clear focus ring. Scoped to #pg-door so the rest of the app stays on its current density. Hours-at-a-time use: the operator's eye lands cleanly on the next required field every time. */ #pg-door .fg input, #pg-door .fg select, #pg-door .fg textarea{ /* A11Y-fix (2026-04-22): raised from 8px to 14px top/bottom padding. Computes to ~48 CSS px tap target, meeting WCAG 2.5.5 AAA (44 px minimum) with 4 px margin for gloved-thumb mis-fires. */ font-size:14px;padding:14px 10px; border-radius:6px;border:1px solid var(--bdr); background:var(--inp);color:var(--txt); transition:border-color .12s,box-shadow .12s; } #pg-door .fg input:focus, #pg-door .fg select:focus, #pg-door .fg textarea:focus{ outline:none; border-color:var(--acc2); box-shadow:0 0 0 3px color-mix(in srgb, var(--acc2) 15%, transparent); } #pg-door .fg input:invalid, #pg-door .fg input[aria-invalid="true"]{ border-color:var(--no); box-shadow:0 0 0 3px rgba(255,85,85,.12); } /* Sticky validation message — follows the operator's scroll so a lengthy form never hides the current error. */ #sg-validation-msg:not(:empty){ position:sticky;bottom:0;z-index:4; background:var(--sf);padding:4px 0; } /* Library-source hint: small chip next to a form-field label telling the operator which library backs the dropdown. Prevents the "why are these both here?" confusion when two dropdowns with similar labels actually pull from different libraries (e.g. Panel Stock \u2192 Sheet Goods, Frame Lumber \u2192 Lumber). */ .fg label .lib-src{display:inline-block;margin-left:8px;color:var(--dim);font-weight:500;font-size:9px;text-transform:none;letter-spacing:.2px;opacity:.75;padding:1px 6px;border:1px solid var(--bdr);border-radius:4px;vertical-align:1px;} /* PR-UI-18 (2026-04-27): tokenized transition + theme-flowing focus ring. Was `rgba(0,188,212,.15)` (hardcoded cyan glow that broke on light/amber themes); now uses `color-mix(in srgb, var(--acc) 18%, transparent)` so every theme produces a 18%-saturation glow of its own --acc color. Same visual on Onyx; correct on every other theme. */ .fg input,.fg select,.fg textarea{width:100%;padding:9px 12px;background:var(--inp);border:1px solid var(--bdr);border-radius:8px;color:var(--txt);font-size:13px;font-family:inherit;transition:border-color var(--dur-standard) var(--ease-out),box-shadow var(--dur-standard) var(--ease-out);} .fg input:focus,.fg select:focus,.fg textarea:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 18%,transparent);} .fg textarea{resize:vertical;min-height:60px;} .fr{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;} /* Primary form field — spans 2 grid columns in an .fr row and * gets louder label + input chrome than the default .fg. Used on * the single most-important field in a section (e.g. Customer / * Builder on the Order Info row, where everything else is * optional contact metadata). Routes through tokens so it adapts * to every theme. */ .fg-primary { grid-column: span 2; } @media (max-width: 700px) { /* Narrow viewports — .fr auto-fit can collapse to 1 col; * don't force a 2-col span that would do nothing. */ .fg-primary { grid-column: auto; } } .fg-primary label { color: var(--txt); font-size: 12px; font-weight: var(--fw-bold, 700); letter-spacing: 0.6px; display: flex; align-items: center; gap: 8px; } .fg-primary .fg-req { display: inline-block; padding: 2px 7px; background: color-mix(in srgb, var(--acc) 18%, transparent); color: var(--acc); border: 1px solid color-mix(in srgb, var(--acc) 45%, var(--bdr)); border-radius: 999px; font-size: 9px; font-weight: var(--fw-bold, 700); letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; } .fg-primary input { border-width: 1.5px; border-color: color-mix(in srgb, var(--acc) 30%, var(--bdr)); font-size: 14px; font-weight: var(--fw-medium, 500); } .fg-primary input:hover:not(:focus) { border-color: color-mix(in srgb, var(--acc) 55%, var(--bdr)); } /* When the compat gate marks the field as error (empty required), * .compat-error should still WIN over the accent tint so the * operator sees "hey fill me" not "yeah I'm already highlighted." */ .fg-primary input.compat-error, .fg-primary input:invalid:not(:focus):not(:placeholder-shown) { border-color: var(--no); } /* ---- Buttons ---- */ /* PR-UI-16 (2026-04-27): tokenized transition + tactile press scale. Every .btn/.ba/.bg/.bk/.br/.bw/.bs across the app inherits the --dur-quick + --spring-snappy timing and the 0.985 active scale. Consistent feel from Hub buttons → Cabinet inspector → Door studio → Reports modal → Shop drawings toolbar. Reduced-motion users get instant snap because --dur-quick is zeroed in tokens.css. */ button,.btn{padding:9px 18px;border:none;border-radius:8px;cursor:pointer;font-size:12px;font-weight:600;transition:background var(--dur-quick) var(--ease-out),color var(--dur-quick) var(--ease-out),border-color var(--dur-quick) var(--ease-out),box-shadow var(--dur-quick) var(--ease-out),transform var(--dur-quick) var(--spring-snappy);letter-spacing:.3px;} button:active,.btn:active{transform:scale(0.985);} /* PR-FORGE-CAB-BUTTONS (2026-06-13): button family hovers were the last off-brand bits — a CYAN glow on .ba (flashed wrong on the blue forge accent) + hardcoded green/red hovers. Now all token-derived. */ .ba{background:var(--acc);color:var(--acc-ink);}.ba:hover{background:var(--acc2);} .bg{background:var(--inp);color:var(--acc);border:1px solid var(--bdr);}.bg:hover{background:var(--bdr);} .bk{background:var(--ok);color:var(--ok-ink);}.bk:hover{background:color-mix(in srgb, var(--ok) 82%, #fff);} .br{background:var(--no);color:#fff;}.br:hover{background:color-mix(in srgb, var(--no) 82%, #fff);} .bw{background:var(--warn);color:#000;} .bs{padding:5px 10px;font-size:11px;border-radius:6px;} .bf{width:100%;}.brow{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap;} /* ====================================================================== */ /* PR-UI-15 (2026-04-27) — UNIVERSAL FOCUS-VISIBLE SYSTEM */ /* ====================================================================== */ /* One source of truth for keyboard-focus visibility across every page. */ /* Replaces the dozen+ ad-hoc :focus / :focus-visible rules that used */ /* hardcoded rgba(0,188,212,...) glows. Now everything routes to var(--acc).*/ /* `:focus-visible` (not :focus) means the ring only appears on KEYBOARD */ /* navigation — mouse clicks don't trigger the ring, which keeps shop- */ /* floor tablet UX clean. Reduced-motion users get the same ring (no */ /* animation involved). Specificity is tight: this rule wins over the */ /* per-component :focus rules already in the file. */ button:focus-visible, .btn:focus-visible, .bg:focus-visible, .ba:focus-visible, .bk:focus-visible, .br:focus-visible, .bw:focus-visible, .bs:focus-visible, a:focus-visible, [role="button"]:focus-visible, [role="tab"]:focus-visible, [role="menuitem"]:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--acc) 18%, transparent); } /* Inputs already have border-color+box-shadow on :focus per their component rules. Add :focus-visible only when the existing rule doesn't already match — the [tabindex] selector above covers most cases. Forms surfaces use the per-component .fg rule. */ /* ---- Panel ---- */ /* PR-UI-24: panel radius 14px → 8px. .pn wraps every panel in the app — Hub, Cabinet, Door Studio, Settings. Tighter radius shifts the entire app from "consumer card app" toward QuickBooks density. */ .pn{background:var(--pn);border:1px solid var(--bdr);border-radius:8px;padding:28px;margin-bottom:24px;} .pn h3{color:var(--white);font-size:14px;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--bdr);display:flex;align-items:center;gap:8px;} .pn h3 .badge{background:var(--acc);color:var(--acc-ink);padding:2px 8px;border-radius:10px;font-size:10px;font-weight:700;} /* ---- Stats ---- */ .sg{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:20px;margin-bottom:32px;} .st{background:var(--pn);border:1px solid var(--bdr);border-radius:8px;padding:24px;text-align:center;} .st-n{font-size:26px;font-weight:700;color:var(--acc2);}.st-l{color:var(--dim);font-size:11px;margin-top:4px;text-transform:uppercase;letter-spacing:.5px;} /* ---- List ---- */ /* PR-UI-19: list item — used in customer/project lists across pages. */ .li{background:var(--inp);padding:14px 18px;border-radius:10px;border-left:3px solid var(--acc);display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;transition:background var(--dur-standard) var(--ease-out),transform var(--dur-quick) var(--spring-snappy);} .li:hover{background:var(--bdr);}.li-t{color:var(--white);font-weight:600;font-size:13px;}.li-m{color:var(--dim);font-size:11px;margin-top:2px;} /* ---- Pages ---- */ .pg{display:none;flex-direction:column;height:100vh;}.pg.on{display:flex;} .scroll{flex:1;overflow-y:auto;padding:36px 40px;} /* PR-CARD-TOKENS (2026-08-25, owner: "i want the margins to change as well to really get close to the same home page look"): Door Studio takes the Cabinet Studio dashboard's page frame — the same 24px left gutter the page title sits on, and the same 1920px fluid cap that only ultrawide monitors reach. Rationale is PR-DASH-TIGHTEN's verbatim: a centered column floats the page as an island with a moat on both sides of a shop monitor while the heading stays anchored left, which is two alignment systems on one page. Left- aligning puts the slack on ONE side, where it reads as rag. */ /* Zero here, gutters on the panels below: #d-orders sets its own (bench-studio.css) and stacking the two double-indented the orders table to a 48px gutter. #d-new has NO padding of its own and was living off this rule, so it gets the old value back verbatim — the door builder is deliberately untouched by the dashboard reframe. */ #pg-door > .scroll { padding: 0; } #pg-door > .scroll > #d-new { padding: 36px 40px; } /* PR-CABSTUDIO-FIT (2026-07-03): #pg-cab is display:block (shell.css:809) and .pg forces height:100vh, but its scroll host #app-workspace is only 100vh-88px (56px topbar + 32px status bar). The 88px overhang let you scroll into a blank strip and pushed the bottom controls below the fold. Cap the page box to the workspace height (100%). NOT a grid restructure (see feedback_no_cab_editor_grid_layout_changes) — page-container height only; display stays block, the 3-column grid is untouched. */ body[data-page="cab"] #pg-cab{height:100%;} /* ---- Tabs ---- */ .tabs{display:flex;background:var(--sf);border-bottom:1px solid var(--bdr);padding:0 36px;gap:8px;} /* PR-UI-19 (2026-04-27): tokenize raw .2s. Used in Hub tabs, Reports modal tabs, Library sub-tabs — every page that has tabs. */ .tab{padding:14px 22px;background:none;border:none;color:var(--dim);cursor:pointer;font-size:12px;font-weight:600;border-bottom:2px solid transparent;transition:color var(--dur-standard) var(--ease-out),border-color var(--dur-standard) var(--ease-out);letter-spacing:.3px;} .tab:hover{color:var(--acc);}.tab.on{color:var(--acc2);border-bottom-color:var(--acc);} .tc{display:none;}.tc.on{display:block;} /* PR-CLEAN-7 / RELOCATE-TO-CAB-DASH (2026-05-31): top-level Design Dashboard tab panels inside #pg-cab. Same display:none/block pattern as .tc — single-class selector so specificity matches the existing .tc rule. (Previously this rule was .jobs-tc on pg-hub Main Hub before the relocation — see [[feedback_verify_ui_page_target]].) */ .cab-tc{display:none;}.cab-tc.on{display:block;} /* ---- Studio Home Dashboard ---- */ /* All hardware-accelerated transforms / opacity transitions only — no layout reflow on hover */ .qc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-bottom:22px;} /* PR-UI-19: quick-card — Hub home recent project tiles. */ .qc{background:var(--pn);border:1px solid var(--bdr);border-radius:8px;padding:22px;cursor:pointer;display:flex;align-items:center;gap:16px;transition:transform var(--dur-chrome) var(--spring-snappy),border-color var(--dur-chrome) var(--ease-out),box-shadow var(--dur-chrome) var(--ease-out);will-change:transform;} .qc:hover{border-color:var(--bdr-h);background:var(--pn-h);} /* PR-FORGE-CAB: flat hover */ .qc-icon{width:52px;height:52px;border-radius:12px;background:var(--inp);display:flex;align-items:center;justify-content:center;color:var(--acc);flex-shrink:0;} .qc-icon svg{width:28px;height:28px;} .qc-body h4{color:var(--white);font-size:16px;margin-bottom:4px;font-weight:600;} .qc-body p{color:var(--dim);font-size:12px;line-height:1.4;} /* ---- Studio ---- */ .shdr{background:var(--sf);border-bottom:1px solid var(--bdr);padding:10px 24px;display:flex;justify-content:space-between;align-items:center;} .shdr h1{font-family:'Inter',inherit;font-weight:600;font-size:24px;color:var(--acc2);letter-spacing:-.005em;} .shdr .sub{color:var(--dim);font-size:12px;font-weight:500;} /* Door-icon header button — single-element interactive logo, GPU-composited hover */ .logo-btn{width:42px;height:42px;border-radius:10px;background:var(--inp);border:1px solid var(--bdr);color:var(--acc);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform var(--dur-chrome) var(--spring-snappy),border-color var(--dur-chrome) var(--ease-out),color var(--dur-chrome) var(--ease-out);will-change:transform;padding:0;} .logo-btn svg{width:24px;height:24px;} .logo-btn:hover{transform:translateY(-1px);border-color:var(--acc);color:var(--acc2);} .logo-btn:active{transform:translateY(0);} /* PR-UI-24: was a 24px-radius pill with linear-gradient — the combination of pill shape + gradient was the strongest "child- like" signal in the topbar. Flattened to 6px square corners + solid accent, matching QuickBooks/Xero primary-button pattern. */ .home-btn{display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--acc);color:var(--acc-ink);border:none;border-radius:6px;font-weight:600;font-size:13px;letter-spacing:0;cursor:pointer;transition:transform var(--dur-chrome) var(--spring-snappy),box-shadow var(--dur-chrome) var(--ease-out),background var(--dur-chrome) var(--ease-out);will-change:transform;box-shadow:0 1px 2px rgb(var(--shadow-ink) / .18);} .home-btn svg{width:18px;height:18px;stroke:currentColor;} .home-btn:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgb(var(--shadow-ink) / .28);filter:brightness(1.05);} .home-btn:active{transform:translateY(0);box-shadow:0 1px 4px rgb(var(--shadow-ink) / .2);} .scmds{display:flex;gap:8px;align-items:center;} /* PR-CTA-WINS-THE-EYE (2026-08-28): the studio header had TWO accent-blue objects — a 24px `.shdr h1` in var(--acc2) and the 13px "Start New Order" button in var(--acc). The heading is twice the size, so it won the eye every time and the one thing you can ACT on read as chrome. The button was never badly placed; it was out-shouted by a label. Scoped to Door Studio because that is the page under redesign — Cabinet and Millwork have the identical clash and should follow, but that is their own change to make deliberately. */ #pg-door .shdr h1{color:var(--txt);} #pg-door .scmds .home-btn{padding:10px 18px;font-size:14px;} /* ---- Table ---- */ table{width:100%;border-collapse:collapse;font-size:12px;} th{text-align:left;padding:9px 12px;background:var(--inp);color:var(--acc);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.5px;border-bottom:2px solid var(--bdr);} td{padding:9px 12px;border-bottom:1px solid rgba(46,49,80,.5);} /* PR-UI-21: every across every table now uses tokenized transition; hover background flows through theme via color-mix on var(--acc) instead of hardcoded cyan. */ tr{transition:background var(--dur-chrome) var(--ease-out);cursor:pointer;}tr:hover td{background:color-mix(in srgb,var(--acc) 6%,transparent);} .row-active td{background:color-mix(in srgb,var(--acc) 12%,transparent);border-left:2px solid var(--acc);} /* ---- Messages ---- */ .msg{padding:10px 14px;border-radius:8px;margin-bottom:10px;font-size:12px;} /* PR-UI-STATES (2026-08-13): message tints repainted from hardcoded rgba to theme tokens so they read correctly in BOTH light + dark (the amber even used a raw #ffb300). Same padding/radius/size → no reflow. */ .msg-ok{background:color-mix(in srgb, var(--ok) 12%, transparent);color:var(--ok);border:1px solid color-mix(in srgb, var(--ok) 38%, transparent);} .msg-err{background:color-mix(in srgb, var(--no) 12%, transparent);color:var(--no);border:1px solid color-mix(in srgb, var(--no) 38%, transparent);} .msg-warn{background:color-mix(in srgb, var(--warn) 12%, transparent);color:var(--warn);border:1px solid color-mix(in srgb, var(--warn) 38%, transparent);} .msg-info{background:color-mix(in srgb, var(--acc) 12%, transparent);color:var(--acc2,#4da6ff);border:1px solid color-mix(in srgb, var(--acc) 38%, transparent);} /* ====================================================================== */ /* PR-UI-STATES (2026-08-13) — universal interaction states + inline-error */ /* affordances. ALL ADDITIVE: extends the existing button/input/msg */ /* primitives + lifts the wizard's error/required styles app-wide. NO base */ /* padding/height changes (toolbars/inspector rows size off those); reuses */ /* tokens.css vars only. Fixes: dead buttons looked live (no :disabled), */ /* .bw had no hover, inputs had no hover/disabled feedback, and the inline */ /* error/required affordances were trapped inside #cab-newjob-modal. */ /* ====================================================================== */ .bw:hover{background:color-mix(in srgb, var(--warn) 82%, #fff);} .ba:disabled,.bg:disabled,.bk:disabled,.br:disabled,.bw:disabled,.bs:disabled, .ba[aria-disabled="true"],.bg[aria-disabled="true"],.bk[aria-disabled="true"], .br[aria-disabled="true"],.bw[aria-disabled="true"],.bs[aria-disabled="true"]{ opacity:.45;cursor:not-allowed;box-shadow:none; } button:disabled:active,.btn:disabled:active,.ba:disabled:active,.bg:disabled:active, .bk:disabled:active,.br:disabled:active,.bw:disabled:active,.bs:disabled:active{transform:none;} /* Inputs: a hover affordance (so a field reads as editable) + a real */ /* disabled look. `:hover:not(:focus)` never fights the focus ring. */ .fg input:hover:not(:focus):not(:disabled), .fg select:hover:not(:focus):not(:disabled), .fg textarea:hover:not(:focus):not(:disabled){border-color:var(--bdr-h);} .fg input:disabled,.fg select:disabled,.fg textarea:disabled, input:disabled,select:disabled,textarea:disabled{opacity:.55;cursor:not-allowed;} /* Inline error + required affordances, promoted from #cab-newjob-modal so */ /* New-Room, Job-Defaults, and EVERY .fg form can surface field-level errors */ /* instead of silently clamping/failing. Errors clear on keystroke (Baymard). */ .required-mark{color:var(--no);margin-left:4px;font-weight:700;} .fg input.input-err,.fg select.input-err,.fg textarea.input-err{ border-color:var(--no);background:color-mix(in srgb, var(--no) 8%, transparent); } .fg .err-msg{color:var(--no);font-size:12px;margin-top:4px;line-height:1.3;} /* PR-UI-STATES: comfortable tap targets on TOUCH/tablet only. Uses min-height (never padding) so desktop toolbars don't reflow; scoped to pointer:coarse so mouse UIs are untouched. Shop-floor tablets get the 44px --touch-min floor. */ @media (pointer:coarse){ button,.btn{min-height:var(--touch-min,44px);} .bs{min-height:40px;} .fg input,.fg select,.fg textarea{min-height:40px;} } /* ---- Modal / Side Drawer ---- */ /* Drawer overlay: lightweight backdrop so the editor canvas stays * visible BEHIND open drawers. Previous 60% black wash made it * look like the app had crashed every time a panel opened. The * panel itself sits on the right with a strong shadow so it still * reads as foreground without darkening everything else. Click on * the slim backdrop area still closes the drawer. */ .drawer-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.18);backdrop-filter:blur(1.5px);-webkit-backdrop-filter:blur(1.5px);z-index:100;display:flex;justify-content:flex-end;} .drawer{width:520px;max-width:90vw;height:100vh;background:var(--sf);border-left:1px solid var(--bdr);overflow-y:auto;padding:24px;box-shadow:-12px 0 50px rgb(var(--shadow-ink) / .6);} /* PR-CLEAN-4 / NEWJOB-ISLAND (2026-05-31): centered-card overlay for the Jobs-page New job entry. Backdrop uses color-mix on var(--bg) rather than an rgba literal so the scrim respects the active theme per [[feedback_strict_color_tokens]]. The legacy .drawer-overlay above keeps its rgba literal for now (separate cleanup arc) but the new code follows the strict-token rule. */ .island-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:color-mix(in srgb, var(--bg) 70%, transparent);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);z-index:120;display:flex;align-items:center;justify-content:center;padding:24px;} .island-card{position:relative;width:min(640px,94vw);max-height:88vh;background:var(--sf);border:1px solid var(--bdr);border-radius:14px;display:flex;flex-direction:column;box-shadow:0 30px 80px color-mix(in srgb, var(--bg) 80%, transparent), 0 0 0 1px var(--bdr);overflow:hidden;} /* PR-HOME-BENCH (2026-06-13): Settings floating island — wider + matches the .island-card chrome (radius 14, +1px border, same shadow). */ .settings-island{position:relative;width:min(720px,94vw);max-height:88vh;overflow-y:auto;background:var(--sf);border:1px solid var(--bdr);border-radius:14px;box-shadow:0 30px 80px color-mix(in srgb, var(--bg) 80%, transparent), 0 0 0 1px var(--bdr);padding:28px 30px;} .set-logo-preview{width:44px;height:44px;border-radius:10px;border:1px solid var(--bdr);background:var(--inp);display:inline-flex;align-items:center;justify-content:center;overflow:hidden;flex:0 0 auto;} .set-logo-preview img{width:100%;height:100%;object-fit:contain;} .set-logo-mono{color:var(--dim);font-size:18px;} .wg-plan-box.wg-expanded{position:fixed;inset:24px;z-index:130;background:var(--sf);border:1px solid var(--bdr);border-radius:14px;box-shadow:0 0 0 100vmax color-mix(in srgb, var(--bg) 70%, transparent), 0 30px 80px color-mix(in srgb, var(--bg) 80%, transparent);padding:18px;overflow:auto;margin:0 !important;} .wg-plan-box.wg-expanded svg{max-height:calc(100vh - 150px) !important;} .island-close{position:absolute;top:14px;right:14px;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;color:var(--dim);cursor:pointer;font-size:18px;line-height:1;border-radius:8px;transition:background var(--dur-chrome) var(--ease-out),color var(--dur-chrome) var(--ease-out);} .island-close:hover{background:var(--inp);color:var(--acc);} .island-head{padding:22px 28px 14px;border-bottom:1px solid var(--bdr);} .island-progress{display:flex;gap:0;list-style:none;padding:16px 28px 6px;margin:0;border-bottom:1px solid var(--bdr);background:var(--bg);} .island-step-dot{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--dim);font-size:11px;font-weight:500;letter-spacing:.3px;text-transform:uppercase;position:relative;} .island-step-dot:not(:last-child)::after{content:"";position:absolute;top:11px;left:calc(50% + 14px);right:calc(-50% + 14px);height:2px;background:var(--bdr);} .island-step-dot.on::after,.island-step-dot.done::after{background:var(--acc);} .island-dot-num{width:24px;height:24px;border-radius:50%;background:var(--inp);border:1px solid var(--bdr);display:inline-flex;align-items:center;justify-content:center;color:var(--dim);font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;transition:background var(--dur-chrome) var(--ease-out),border-color var(--dur-chrome) var(--ease-out),color var(--dur-chrome) var(--ease-out);} .island-step-dot.on .island-dot-num{background:var(--acc);border-color:var(--acc);color:var(--acc-ink);} .island-step-dot.done .island-dot-num{background:transparent;border-color:var(--acc);color:var(--acc);} .island-step-dot.on .island-dot-label,.island-step-dot.done .island-dot-label{color:var(--acc2);} .island-body{flex:1;overflow-y:auto;padding:22px 28px;} .island-step{display:block;} .island-step[hidden]{display:none;} .island-field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;} .island-field label{color:var(--white);font-size:12px;font-weight:500;letter-spacing:.2px;} .island-field input,.island-field textarea,.island-field select{background:var(--inp);border:1px solid var(--bdr);border-radius:8px;padding:10px 12px;color:var(--txt);font-size:13px;font-family:inherit;outline:none;transition:border-color var(--dur-chrome) var(--ease-out),box-shadow var(--dur-chrome) var(--ease-out);} .island-field input:focus,.island-field textarea:focus,.island-field select:focus{border-color:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb, var(--acc) 18%, transparent);} .island-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;} @media (max-width:560px){.island-row{grid-template-columns:1fr;}} .island-defaults-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;} .island-defaults-grid > div{background:var(--inp);border:1px solid var(--bdr);border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:2px;} .island-defaults-grid .ki-l{color:var(--dim);font-size:10px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;} .island-defaults-grid .ki-v{color:var(--white);font-size:13px;font-weight:500;font-variant-numeric:tabular-nums;} .island-review{display:grid;grid-template-columns:140px 1fr;gap:8px 14px;margin:0;} .island-review dt{color:var(--dim);font-size:11px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;align-self:center;} .island-review dd{margin:0;color:var(--white);font-size:13px;} .island-foot{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:16px 28px;border-top:1px solid var(--bdr);background:var(--bg);} .island-foot .ba:disabled,.island-foot .bg:disabled{opacity:.4;cursor:not-allowed;} /* PR-NEWJOB-1SCREEN (2026-06-17): defaults chip + collapsible "More". */ .island-chip{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--inp);border:1px solid var(--bdr);border-radius:8px;padding:10px 12px;color:var(--white);font-size:13px;font-family:inherit;cursor:pointer;text-align:left;transition:border-color var(--dur-chrome) var(--ease-out),background var(--dur-chrome) var(--ease-out);} .island-chip:hover{border-color:var(--acc);background:color-mix(in srgb, var(--acc) 6%, var(--inp));} .island-chip-arrow{color:var(--acc2);font-size:11px;font-weight:600;white-space:nowrap;letter-spacing:.2px;} /* PR-NEWJOB-PAGE-FIT (2026-09-05): .island-more-toggle / #nji-more-section fold rules removed — the contact fields are always shown on the page. */ /* PR-NEWJOB-ONE-SCREEN (2026-09-05): the one-screen New Job — wider card, three titled sections, segmented site-condition chips, the green "inherits your Shop Standards" box, and the job page's standards strip. */ .island-card-wide{width:min(880px,96vw);max-height:92vh;} .island-card-wide #nji-cust{width:100%;} /* PR-NEWJOB-PAGE (2026-09-05): New Job as a studio PAGE (#cab-newjob is a .scroll sub-view like #cab-dash). Framed like the Job Standards page: one header line in the job-tier green, two cards side by side, the standards card full width under them, a sticky bottom bar. The island-* classes on the inner markup are kept so the engine's ids and the field styling are untouched; these rules only re-house them. */ /* PR-NEWJOB-PAGE-FIT (2026-09-05, operator: "scaling and overall UX still look not great"): the page fills the room like Shop Standards does (no 1280px cap on a 1920px screen), and the type is the same size as the Shop Standards rows — 16px in the fields, 14px labels, 17px card titles — instead of the island's 13px. Chips grow to match, and the card padding widens so the bigger type has air. */ /* PR-NEWJOB-FROZEN (2026-09-05): the page never scrolls. It is boxed to the workspace; njiFit() (app-cabinet.js) scales the content down when the window is short, and only past its 0.85 floor is scrolling allowed back in (.nji-overflow). Tighter page padding than the other .scroll views so a 1080p window fits at full size. */ #cab-newjob{overflow:hidden;padding:18px 40px 14px;} #cab-newjob.nji-overflow{overflow-y:auto;} #cab-newjob .njp{max-width:1720px;margin:0 auto;display:flex;flex-direction:column;gap:18px;} #cab-newjob .njp-head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;padding-bottom:12px;border-bottom:1px solid var(--bdr);} #cab-newjob .njp-back{flex:0 0 auto;align-self:center;font-size:14px;padding:8px 14px;} #cab-newjob .njp-title{font:650 30px var(--ff-ui);color:var(--tier-job,#1E7F4F);margin:0;letter-spacing:-.022em;} #cab-newjob .njp-title::before{content:'';display:inline-block;width:14px;height:14px;border-radius:3px;background:var(--tier-job,#1E7F4F);margin-right:12px;} #cab-newjob .njp-sub{flex:1 1 320px;min-width:0;margin:0;color:var(--dim);font:500 16px var(--ff-ui);} #cab-newjob .njp-pill{flex:0 0 auto;align-self:center;font-size:14px;font-weight:600;color:var(--tier-job,#1E7F4F);border:1px solid color-mix(in srgb, var(--tier-job,#1E7F4F) 45%, var(--bdr));border-radius:999px;padding:6px 14px;white-space:nowrap;cursor:help;} #cab-newjob .island-body{flex:none;overflow:visible;padding:0;} #cab-newjob .njp-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:stretch;} @media (max-width:1100px){#cab-newjob .njp-grid{grid-template-columns:1fr;}} #cab-newjob .nji-sect{border:1px solid var(--bdr);border-radius:14px;background:var(--pn,var(--sf));padding:20px 26px;margin:0;} #cab-newjob .nji-h{font-size:18px;margin-bottom:4px;} #cab-newjob .nji-why{font-size:14px;margin-bottom:18px;} #cab-newjob .nji-h-hint{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-left:6px;border-radius:50%;border:1px solid var(--bdr);color:var(--dim);font-size:12px;font-weight:600;cursor:help;vertical-align:middle;} #cab-newjob .island-row{gap:16px;} #cab-newjob .island-field{gap:6px;margin-bottom:12px;} #cab-newjob .island-field label{font-size:14px;} #cab-newjob .island-field input,#cab-newjob .island-field textarea,#cab-newjob .island-field select{font-size:16px;padding:10px 14px;min-height:44px;border-radius:9px;width:100%;box-sizing:border-box;} #cab-newjob .island-field textarea{min-height:44px;height:44px;resize:vertical;} /* the customer typeahead sits in a positioned wrapper — it must span the field */ #cab-newjob .island-field > div[style*="position:relative"]{width:100%;} #cab-newjob #nji-cust{width:100%;} /* chips need more room than the thickness columns beside them */ #cab-newjob #nji-site .island-row{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);} #cab-newjob .island-field:last-child{margin-bottom:0;} #cab-newjob .nji-sub-h{margin:6px 0 14px;padding-top:16px;border-top:1px solid var(--bdr);color:var(--white);font-size:14px;font-weight:600;display:flex;align-items:baseline;gap:10px;} #cab-newjob .nji-sub-note{color:var(--dim);font-weight:500;font-size:13px;} #cab-newjob .nji-seg{gap:8px;} #cab-newjob .nji-seg-btn{font-size:14px;padding:7px 14px;min-height:38px;} #cab-newjob .nji-inline-l,#cab-newjob .island-field .nji-seg + input{margin-top:8px;} #cab-newjob .nji-copy-field{margin-top:6px;padding-top:16px;border-top:1px solid var(--bdr);} #cab-newjob .nji-copy-field label{display:flex;align-items:baseline;gap:10px;cursor:help;} /* PR-NEWJOB-FROZEN: the bar is the last row of a page that does not scroll — nothing sticky, nothing to hide behind. */ #cab-newjob .njp-foot{position:static;margin:0;padding:14px 0 0;border-top:1px solid var(--bdr);background:none;gap:14px;} #cab-newjob .njp-foot .ba,#cab-newjob .njp-foot .bg{font-size:15px;padding:11px 22px;min-height:44px;} #cab-newjob .nji-foot-check{display:flex;align-items:center;gap:10px;margin-right:auto;color:var(--white);font-size:15px;cursor:pointer;} #cab-newjob .nji-foot-check input{width:18px;height:18px;accent-color:var(--acc);} .nji-sect{border-top:1px solid var(--bdr);padding-top:14px;margin-top:14px;} .nji-sect:first-child{border-top:none;padding-top:0;margin-top:0;} .nji-h{margin:0 0 2px;color:var(--white);font-size:14px;font-weight:600;} .nji-why{margin:0 0 12px;color:var(--dim);font-size:12px;line-height:1.45;} .nji-seg{display:flex;flex-wrap:wrap;gap:6px;} .nji-seg-btn{background:var(--inp);border:1px solid var(--bdr);border-radius:999px;padding:5px 12px;color:var(--txt);font-size:12.5px;font-family:inherit;cursor:pointer;} .nji-seg-btn:hover{border-color:var(--acc);} .nji-seg-btn[aria-pressed="true"]{background:var(--acc);border-color:var(--acc);color:var(--acc-ink);} .island-field .nji-seg + input{margin-top:6px;} /* PR-NEWJOB-NO-STANDARDS (2026-09-05): the .nji-inherits / .nji-pill / .nji-asks / .nji-details / .nji-list / .nji-loading rules for the "Standards for this job" card went with the card. */ .nji-foot-note{margin-right:auto;color:var(--dim);font-size:12px;} .job-std-strip{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;border:1px solid var(--ok,#3ba55d);border-left-width:4px;border-radius:8px;padding:8px 12px;margin:0 0 10px;background:color-mix(in srgb, var(--ok,#3ba55d) 10%, var(--sf));font-size:13px;color:var(--txt);line-height:1.45;} .job-std-strip.need{border-color:var(--warn,#f5b14c);background:color-mix(in srgb, var(--warn,#f5b14c) 12%, var(--sf));} .job-std-strip b{font-weight:600;} .job-std-strip .grow{flex:1;min-width:220px;} /* PR-JOB-INFO-TAB (2026-09-10, operator: "I prefer to have it be a button like after the job standards button"): the job's paperwork is the JOB INFO tab's panel — the New Job rows in 3–4 columns, inputs sized to their values, never a wide grey card. Hidden by attribute until the tab opens it; while open the job page shows only this panel + the tab strip (the same rule shape as #cab-job.jobstd-open in shop-standards.js). */ .job-info{border:1px solid var(--bdr);border-radius:10px;background:var(--pn,var(--sf));padding:12px 14px 6px;margin:0 0 12px;} .job-info[hidden]{display:none!important;} #cab-job.jobinfo-open > :not(#job-info):not(#cab-job-bar){display:none!important;} /* The customer input sits in a position:relative wrapper for its listbox; without this it shrinks to its default inline width. */ .job-info-form #ji-cust{display:block;width:100%;box-sizing:border-box;} .job-info-form{padding:0 2px 2px;} .job-info-form .nji-h{margin-bottom:8px;} .job-info-form .island-field{margin-bottom:10px;} .job-info-form .island-field input,.job-info-form .island-field select,.job-info-form .island-field textarea{padding:7px 10px;font-size:13px;} .job-info-form .ji-row3{grid-template-columns:repeat(3,minmax(0,1fr));} .job-info-form .ji-row4{grid-template-columns:repeat(4,minmax(0,1fr));} .job-info-form .ji-sub-h{margin:4px 0 10px;padding-top:12px;border-top:1px solid var(--bdr);color:var(--white);font-size:13px;font-weight:600;display:flex;align-items:baseline;gap:10px;} .job-info-form .ji-sub-note{color:var(--dim);font-weight:500;font-size:12px;} @media (max-width:900px){.job-info-form .ji-row3,.job-info-form .ji-row4{grid-template-columns:1fr 1fr;}} @media (max-width:560px){.job-info-form .ji-row3,.job-info-form .ji-row4{grid-template-columns:1fr;}} .job-info-actions{display:flex;align-items:center;gap:10px;margin-top:2px;flex-wrap:wrap;} .job-info-msg{font-size:12px;color:var(--dim);} .job-info-msg.err{color:var(--no);} .job-info-msg.ok{color:var(--ok);} /* UX-1a — Job Defaults tile picker for construction style. Three tiles side-by-side. Active tile gets amber ring + filled icon bg so the operator can see their commitment at a glance. */ .jd-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:4px;} /* PR-UI-19: jobs-dashboard tile — every job/project card in Hub. */ .jd-tile{background:var(--inp);border:1px solid var(--bdr);border-radius:10px;padding:14px 10px;color:var(--txt);cursor:pointer;text-align:center;transition:transform var(--dur-quick) var(--spring-snappy),border-color var(--dur-panel) var(--ease-out),background var(--dur-panel) var(--ease-out);font-family:inherit;} .jd-tile:hover{border-color:var(--acc2);background:var(--pn-h);} .jd-tile.on{border-color:var(--acc2);background:color-mix(in srgb, var(--acc2) 8%, transparent);box-shadow:0 0 0 1px var(--acc2) inset;} .jd-tile .jd-tile-icon{font-size:28px;line-height:1;margin-bottom:6px;color:var(--acc2);} .jd-tile .jd-tile-label{color:var(--white);font-size:13px;font-weight:600;letter-spacing:.2px;} .jd-tile .jd-tile-sub{color:var(--dim);font-size:10px;margin-top:2px;} /* Inline unit chip on labels + help-icon hover tooltip. data-help text lives in HTML; CSS ::after positions a dark tooltip above the icon. Plain-text, no JS needed — keeps the tooltip honest. */ .jd-unit{color:var(--dim);font-size:10px;font-weight:400;margin-left:4px;font-family:ui-monospace,monospace;} .jd-help{display:inline-block;margin-left:6px;color:var(--acc2);cursor:help;position:relative;font-size:11px;border:1px solid var(--acc2);border-radius:50%;width:14px;height:14px;line-height:12px;text-align:center;font-weight:600;} .jd-help:hover::after{content:attr(data-help);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:#111;color:#fff;padding:6px 10px;border-radius:6px;font-size:11px;font-weight:400;white-space:normal;min-width:200px;max-width:320px;line-height:1.4;box-shadow:0 4px 12px rgb(var(--shadow-ink) / .5);z-index:10;} .jd-help:hover::before{content:"";position:absolute;bottom:calc(100% + 1px);left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:#111;z-index:10;} /* Conditional-visibility root: drop-into-view animation so the operator notices when fields appear instead of them just popping in silently. */ #jd-frameframe-group{transition:opacity .15s ease,max-height .2s ease;overflow:hidden;} #jd-frameframe-group.jd-hidden{opacity:0;max-height:0;margin:0;pointer-events:none;} /* UX-1d — Cabinet Inspector override row: library-select field with an inheritance-state badge below. Two-tone kitchen use case (walnut lowers + painted uppers in one job). Industry convention (Cabinet Solutions, MaxCut): once overridden, the cabinet is isolated from that field's job default until Reset. Visible as an amber dot vs. a dim dot. */ .insp-override-row{margin-bottom:10px;} /* PR-INH-PROVENANCE (2026-08-26): the badge now carries the SOURCE TIER as well as the value ("Inherits · White Melamine 3/4 Sheet (Shop Standard)"), which is far longer than the bare name it used to hold. Let the row wrap so the Why? button drops below instead of off the edge, and let the badge itself ellipsize in the ~336px docked inspector — the full string is on the badge's title, and the Why? popover has the whole ladder. inline-block (not inline-flex) because text-overflow does not apply to a flex box's anonymous text item. */ .insp-inherit-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:4px;font-size:10px;line-height:1.3;} .insp-badge{display:inline-block;vertical-align:middle;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:2px 7px;border-radius:8px;font-weight:500;letter-spacing:.2px;} .insp-badge.insp-inherits{color:var(--dim);background:rgba(255,255,255,.04);border:1px solid var(--bdr);} /* PR-TIER-CHIPS (2026-09-03): badges wear the app-wide tier palette (tokens.css --tier-*). An inherited badge tints toward the tier that supplies the value (job green / shop navy; library-seed stays gray — it is a cold-start fallback, not a place someone set). "Overridden" is by definition the this-cabinet tier → purple. */ .insp-badge.insp-inherits.insp-tier-job{color:var(--tier-job);border-color:color-mix(in srgb, var(--tier-job) 45%, var(--bdr));background:color-mix(in srgb, var(--tier-job) 10%, transparent);} .insp-badge.insp-inherits.insp-tier-shop{color:var(--tier-shop);border-color:color-mix(in srgb, var(--tier-shop) 45%, var(--bdr));background:color-mix(in srgb, var(--tier-shop) 10%, transparent);} .insp-badge.insp-overridden{color:var(--tier-cab-ink);background:var(--tier-cab);font-weight:600;} .insp-reset{font-size:10px;padding:2px 8px;border-radius:4px;border:1px solid var(--bdr);background:var(--inp);color:var(--white);cursor:pointer;font-family:inherit;} .insp-reset:hover{background:var(--acc2);color:#1a1203;border-color:var(--acc2);} /* ── PR-CSS-5b (2026-05-29) — inheritance popover ─────────────── Cascade-ladder display answering "where did this come from?" Backend: GET /api/projects/:p/rooms/:r/cabinets/:c/inheritance Spec: docs/CSS_5b_UI_SPEC.md Strict token compliance per [[feedback_strict_color_tokens]] — every color = var(--token), zero hex. */ .insp-override-row[data-tier="cabinet"]{ border-left:3px solid var(--acc); padding-left:6px; margin-left:-9px; } .insp-why-btn{ font-size:10px;padding:2px 7px;border-radius:4px; border:1px solid var(--bdr);background:transparent; color:var(--dim);cursor:pointer;font-family:inherit; margin-left:auto; } .insp-why-btn:hover{color:var(--acc);border-color:var(--acc);} .inh-popover-backdrop{ position:fixed;inset:0;background:var(--bg);opacity:0; transition:opacity 180ms ease;z-index:1000;pointer-events:none; } .inh-popover-backdrop[data-open="true"]{ opacity:.68;pointer-events:auto; } .inh-popover{ position:fixed;left:50%;bottom:0;transform:translate(-50%,100%); width:min(420px,calc(100vw - 32px));max-height:70vh; background:var(--pn);border:1px solid var(--bdr); border-bottom:none;border-radius:10px 10px 0 0; box-shadow:0 -8px 24px var(--bdr); transition:transform 220ms cubic-bezier(.2,.8,.2,1); z-index:1001;display:flex;flex-direction:column; font-family:inherit; } .inh-popover[data-open="true"]{transform:translate(-50%,0);} .inh-pop-hdr{ padding:14px 16px 10px; border-bottom:1px solid var(--bdr); display:flex;align-items:center;justify-content:space-between; gap:8px;flex:0 0 auto; } .inh-pop-title{ font-size:13px;font-weight:600;color:var(--ink); line-height:1.3; } .inh-pop-close{ background:transparent;border:1px solid var(--bdr); color:var(--dim);width:28px;height:28px;border-radius:6px; font-size:16px;cursor:pointer;line-height:1; display:flex;align-items:center;justify-content:center; font-family:inherit;flex:0 0 auto; } .inh-pop-close:hover{color:var(--ink);border-color:var(--acc);} .inh-pop-cascade{ list-style:none;margin:0;padding:8px 0; overflow-y:auto;flex:1 1 auto; } .inh-pop-row{ display:grid;grid-template-columns:28px 80px 1fr auto; align-items:center;gap:10px;padding:10px 16px; border-left:3px solid transparent; font-size:12px;line-height:1.3; } .inh-pop-row.dim{color:var(--dim);} .inh-pop-row.active{ border-left-color:var(--acc); background:var(--bg); } .inh-pop-row.active .inh-tier-name, .inh-pop-row.active .inh-tier-val{color:var(--ink);font-weight:600;} .inh-tier-num{ width:24px;height:24px;border-radius:50%; border:1px solid var(--bdr); display:flex;align-items:center;justify-content:center; font-size:10px;font-weight:600; } .inh-pop-row.active .inh-tier-num{ background:var(--acc);color:var(--bg); border-color:var(--acc); } .inh-tier-name{ font-size:10px;font-weight:600;letter-spacing:.06em; text-transform:uppercase; } .inh-tier-val{ font-size:12px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .inh-set-tag{ font-size:9px;font-weight:700;letter-spacing:.08em; background:var(--acc);color:var(--bg); padding:2px 6px;border-radius:3px; } /* PR-TIER-CHIPS (2026-09-03): the Why? ladder speaks the same tier colors as every pill and badge — Shop navy, Job green, cabinet purple (Library seed stays gray: a fallback, not a tier someone set). Rows already carry data-tier from the JS renderer. The winning row's left edge, number disc, and SET tag all take the winning tier's color so "who owns this value" reads at a glance. */ .inh-pop-row[data-tier="cabinet"] .inh-tier-num, .inh-pop-row[data-tier="cabinet"] .inh-tier-name{color:var(--tier-cab);} .inh-pop-row[data-tier="cabinet"] .inh-tier-num{border-color:var(--tier-cab);} .inh-pop-row[data-tier="job"] .inh-tier-num, .inh-pop-row[data-tier="job"] .inh-tier-name{color:var(--tier-job);} .inh-pop-row[data-tier="job"] .inh-tier-num{border-color:var(--tier-job);} .inh-pop-row[data-tier="shop"] .inh-tier-num, .inh-pop-row[data-tier="shop"] .inh-tier-name{color:var(--tier-shop);} .inh-pop-row[data-tier="shop"] .inh-tier-num{border-color:var(--tier-shop);} .inh-pop-row.active[data-tier="cabinet"]{border-left-color:var(--tier-cab);} .inh-pop-row.active[data-tier="cabinet"] .inh-tier-num{background:var(--tier-cab);border-color:var(--tier-cab);color:var(--tier-cab-ink);} .inh-pop-row.active[data-tier="cabinet"] .inh-set-tag{background:var(--tier-cab);color:var(--tier-cab-ink);} .inh-pop-row.active[data-tier="job"]{border-left-color:var(--tier-job);} .inh-pop-row.active[data-tier="job"] .inh-tier-num{background:var(--tier-job);border-color:var(--tier-job);color:var(--tier-job-ink);} .inh-pop-row.active[data-tier="job"] .inh-set-tag{background:var(--tier-job);color:var(--tier-job-ink);} .inh-pop-row.active[data-tier="shop"]{border-left-color:var(--tier-shop);} .inh-pop-row.active[data-tier="shop"] .inh-tier-num{background:var(--tier-shop);border-color:var(--tier-shop);color:var(--tier-shop-ink);} .inh-pop-row.active[data-tier="shop"] .inh-set-tag{background:var(--tier-shop);color:var(--tier-shop-ink);} .inh-pop-actions{ display:flex;gap:8px;padding:12px 16px; border-top:1px solid var(--bdr);flex:0 0 auto; } .inh-pop-btn{ flex:1;padding:12px 14px;border-radius:6px; border:1px solid var(--bdr);background:var(--pn); color:var(--ink);font-size:13px;font-weight:500; cursor:pointer;font-family:inherit;min-height:44px; } .inh-pop-btn.primary{ background:var(--acc);color:var(--bg);border-color:var(--acc); } .inh-pop-btn:hover{border-color:var(--acc);} .inh-pop-btn.primary:hover{filter:brightness(1.1);} @media (max-width: 480px){ .inh-popover{width:100vw;border-radius:10px 10px 0 0;} } .drawer h2{color:var(--white);font-size:18px;margin-bottom:6px;}.drawer .sub{color:var(--dim);font-size:12px;margin-bottom:20px;} /* PR-AUDIT-UX-P1 (2026-05-09): WCAG 2.5.5 / shop-floor 44px tap target. Pre-PR ~32px on a gloved tablet sat below the iOS Safari touch threshold; modal close was the escape hatch when an operator opened the wrong modal. */ .drawer-close{position:absolute;top:16px;right:16px;background:none;border:none;color:var(--dim);font-size:20px;cursor:pointer;padding:12px 16px;min-width:44px;min-height:44px;} .drawer-close:hover{color:var(--no);} /* ---- Order Table ---- */ .order-table th{font-size:10px;padding:7px 8px;} .order-table td{padding:7px 8px;font-size:12px;} .order-table input,.order-table select{padding:5px;font-size:11px;} /* ---- Cutlist ---- */ /* 2026-04-23 scaling fix: pre-wrap was wrapping the 80-char-wide cutlist columns when the container narrowed (split mode / narrow viewport), making labels collide and the report look "gone". `pre` preserves columns; `overflow-x:auto` adds a horizontal scroll when the viewport can't fit the full width. Shops that print the cutlist still get full width on the printed page. */ .cutlist-out{background:var(--inp);border:1px solid var(--bdr);border-radius:8px;padding:16px;font-family:'Cascadia Code','Fira Code','Courier New',monospace;font-size:11px;white-space:pre;max-height:min(80vh,720px);overflow:auto;color:var(--txt);line-height:1.5;} /* Door Style Builder — 2-column split with live preview */ .ds-split{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:18px;align-items:start;} .ds-form{min-width:0;} /* Tighter vertical rhythm inside the Door Style panel so the whole batch setup fits on-screen without mouse travel. Targets only the form rows inside .ds-form to keep the rest of the app's spacing intact. */ .ds-pn{padding:14px 18px 16px;} .ds-pn h3{margin-bottom:10px;} .ds-form .fr{margin-bottom:8px;gap:10px;} .ds-form .fg{margin-bottom:0;} .ds-form .fg label{margin-bottom:3px;font-size:10px;letter-spacing:.3px;text-transform:uppercase;} .ds-form .fg input,.ds-form .fg select{padding:6px 9px;font-size:12px;} /* Legacy .ds-preview / .ds-split rules removed 2026-04-22. The old Door Studio preview used a single flat-accent style on .ds-preview; the new drafting preview scopes under .ds-preview-canvas with proper weighted strokes. No remaining HTML carries class="ds-preview" or "ds-split" — confirmed via grep before deletion. */ /* ── Frame Geometry section (Bundle 5, added 2026-04-22) ── Stile/rail inputs moved into Bundle 5 alongside piece entry per user feedback "the stile and rail widths should be with size entry." The section wraps the head (title + Apply Typical button), the guidance line (per-style defaults), and the 4-card sr-cards grid. Tokens-only, zero hex/rgba per standing CSS rule. */ .sg-frame-section { margin: 0 0 var(--sp-3); padding: var(--sp-3); background: color-mix(in srgb, var(--acc) 3%, var(--inp)); border: 1px solid color-mix(in srgb, var(--bdr) 70%, transparent); border-radius: var(--radius-md); } .sg-frame-section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-1); } .sg-frame-section-title { font-family: var(--ff-ui); font-size: 11px; font-weight: var(--fw-semibold); color: var(--dim); letter-spacing: 0.08em; text-transform: uppercase; } .sg-frame-apply-typical { font-family: var(--ff-ui); font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: 0.04em; color: var(--acc); background: color-mix(in srgb, var(--acc) 10%, var(--inp)); border: 1px solid color-mix(in srgb, var(--acc) 55%, var(--bdr)); border-radius: var(--radius-sm); padding: 5px 10px; cursor: pointer; transition: background var(--dur-chrome) var(--ease-out), border-color var(--dur-chrome) var(--ease-out), transform var(--dur-chrome) var(--ease-out); } .sg-frame-apply-typical:hover { background: color-mix(in srgb, var(--acc) 18%, var(--inp)); border-color: var(--acc); transform: translateY(-1px); } .sg-frame-apply-typical:active { transform: translateY(0); background: color-mix(in srgb, var(--acc) 22%, var(--inp)); } .sg-frame-apply-typical:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; } .sg-frame-guidance { display: flex; align-items: center; gap: 6px; font-family: var(--ff-ui); font-size: 12px; color: var(--dim); padding: 4px 2px; } .sg-frame-guidance svg { color: var(--acc); flex-shrink: 0; } .sg-frame-guidance #sg-frame-guidance-text { color: color-mix(in srgb, var(--dim) 80%, var(--txt)); } /* Drawer-box size-row help text (shown only when item type = DRAWER_BOX). Reinforces the "finished dimensions, not opening sizes" rule so operators don't enter opening measurements and wait for the system to subtract slide clearance — that's not what this form does. */ .sg-db-size-help { display: flex; align-items: flex-start; gap: 6px; margin-top: var(--sp-3); padding: var(--sp-2) var(--sp-3); background: color-mix(in srgb, var(--acc) 6%, var(--inp)); border: 1px solid color-mix(in srgb, var(--acc) 35%, var(--bdr)); border-radius: var(--radius-sm); font-family: var(--ff-ui); font-size: 12px; line-height: 1.45; color: color-mix(in srgb, var(--dim) 60%, var(--txt)); } .sg-db-size-help svg { color: var(--acc); flex-shrink: 0; margin-top: 2px; } .sg-db-size-help strong { color: var(--txt); font-weight: var(--fw-semibold); } /* Stile/Rail width cards — compact but visually distinct from other form fields. The whole card is clickable (cursor:text) — clicking anywhere inside focuses and selects the input via srCardFocus(). These cards now live inside .sg-frame-section in Bundle 5 (retired Bundle 3 2026-04-22). */ .sr-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); margin: var(--sp-3) 0 var(--sp-2); } .sr-card { position: relative; background: linear-gradient(180deg, color-mix(in srgb, var(--inp) 92%, var(--bg)) 0%, var(--inp) 100%); border: 1.5px solid var(--bdr); border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3); text-align: center; cursor: text; transition: border-color var(--dur-chrome) var(--ease-out), background var(--dur-chrome) var(--ease-out), box-shadow var(--dur-chrome) var(--ease-out), transform var(--dur-chrome) var(--ease-out); box-shadow: 0 1px 0 color-mix(in srgb, var(--bg) 50%, transparent) inset; min-height: 72px; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 2px; } .sr-card:hover { border-color: color-mix(in srgb, var(--acc) 70%, var(--bdr)); background: color-mix(in srgb, var(--acc) 5%, var(--inp)); transform: translateY(-1px); } .sr-card:focus-within { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 8%, var(--inp)); box-shadow: 0 0 0 1px var(--acc) inset, 0 3px 10px color-mix(in srgb, var(--acc) 22%, transparent); transform: translateY(-1px); } .sr-card > input { background: transparent; border: none; color: var(--txt); font-family: var(--ff-mono); font-size: 17px; font-weight: var(--fw-semibold); letter-spacing: 0.01em; text-align: center; width: 100%; padding: 0; outline: none; cursor: text; /* No transition on value text per gate 12 — numeric input value must snap on every keystroke. */ } .sr-card > input:focus { color: var(--acc); } .sr-label { color: var(--dim); font-family: var(--ff-ui); font-size: 10px; font-weight: var(--fw-semibold); letter-spacing: 0.08em; text-transform: uppercase; pointer-events: none; } /* sr-preview sits between the label and the Apply-to-all toggle. Mono face matches the input value above so the "parsed" read line visually belongs to the same number. */ .sr-preview { font-family: var(--ff-mono); font-size: 11px; } .sr-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 4px; color: var(--dim); font-family: var(--ff-ui); font-size: 9px; font-weight: var(--fw-medium); cursor: pointer; user-select: none; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1; margin-top: auto; /* push to bottom of card */ padding: 3px 4px; border-radius: 3px; transition: color var(--dur-chrome) var(--ease-out), background var(--dur-chrome) var(--ease-out); } .sr-toggle:hover { color: var(--txt); background: color-mix(in srgb, var(--acc) 8%, transparent); } .sr-toggle input { margin: 0; width: 10px; height: 10px; cursor: pointer; accent-color: var(--acc); } /* Add Door bar — segmented pill of sizes + accent button. Grouped tight, inputs tinted with a subtle accent background so they pop against the form's regular fields. */ /* Add Door bar — Bundle 5 CTA row. The last thing the operator touches before committing a piece. Premium, confident, unified with Bundle 1/2/3 picker aesthetic. Tokens only. Row shape: [Qty] [W"] [H"] [D" (drawer box only)] [spacer] [Add Door] Focus-within lifts a subtle accent halo around the whole bar so the operator sees "the row is active" even when focus is inside a 60px-wide qty field. */ .add-door-bar { display: flex; align-items: stretch; flex-wrap: wrap; /* wraps if 4 fields + button overflow narrow panels */ gap: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--inp) 92%, var(--bg)) 0%, var(--inp) 100%); border: 1.5px solid var(--bdr); border-radius: var(--radius-md); padding: var(--sp-2); margin-top: var(--sp-4); transition: border-color var(--dur-chrome) var(--ease-out), box-shadow var(--dur-chrome) var(--ease-out); box-shadow: 0 1px 0 color-mix(in srgb, var(--bg) 50%, transparent) inset; } .add-door-bar:focus-within { border-color: var(--acc); box-shadow: 0 0 0 1px var(--acc) inset, 0 3px 12px color-mix(in srgb, var(--acc) 25%, transparent); } .add-door-bar .ad-field { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--sp-2) var(--sp-2); /* tighter horiz padding so 4 fields fit */ border-right: 1px solid color-mix(in srgb, var(--bdr) 80%, transparent); min-width: 0; gap: 3px; flex: 0 0 auto; /* don't shrink — wrap instead via .add-door-bar flex-wrap */ } .add-door-bar .ad-field:last-of-type { border-right: none; } .add-door-bar .ad-field label { color: var(--dim); font-family: var(--ff-ui); font-size: 10px; letter-spacing: 0.08em; margin: 0; font-weight: var(--fw-semibold); text-transform: uppercase; } .add-door-bar .ad-field input { background: var(--bg); border: 1.5px solid var(--bdr); color: var(--txt); font-family: var(--ff-mono); font-weight: var(--fw-semibold); font-size: 19px; letter-spacing: 0.01em; text-align: center; padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); outline: none; transition: background var(--dur-chrome) var(--ease-out), border-color var(--dur-chrome) var(--ease-out), box-shadow var(--dur-chrome) var(--ease-out); width: 92px; /* tightened from 112 so 4 fields + CTA fit a 480px-min panel */ min-height: 52px; /* tap-target friendly + prominent */ } .add-door-bar .ad-field input::placeholder { color: color-mix(in srgb, var(--dim) 70%, transparent); } .add-door-bar .ad-field input:hover:not(:focus) { border-color: color-mix(in srgb, var(--acc) 50%, var(--bdr)); background: color-mix(in srgb, var(--acc) 3%, var(--bg)); } .add-door-bar .ad-field input:focus { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 6%, var(--bg)); color: var(--txt); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 20%, transparent); } .add-door-bar .ad-field.qty input { width: 60px; } /* PR-DBOX-USHAPE-PERPIECE-UI (2026-08-03): the per-piece U-shape sizing inputs (L Side / R Side / Ctr D) live on the SAME add-bar row as the box envelope (Qty/W/H/D) but read as a SECONDARY adjustment cluster: a divider (border-left) + a "U-shape sizing" caption + a recessed neutral tint form a Gestalt "common region" that sets them apart without pulling focus off the main dims. The inputs themselves keep the standard .ad-field size (NOT shrunk) so shop-floor tablet entry stays fast. */ .add-door-bar .ad-ushape-group { display: flex; flex-direction: column; justify-content: center; gap: 3px; margin-left: 6px; padding: 2px 4px 2px 12px; border-left: 2px solid color-mix(in srgb, var(--acc) 30%, var(--bdr)); background: color-mix(in srgb, var(--dim) 7%, transparent); border-radius: var(--radius-sm); flex: 0 0 auto; } .add-door-bar .ad-ushape-cap { font-family: var(--ff-ui); font-size: 10px; font-weight: var(--fw-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); padding-left: 2px; white-space: nowrap; user-select: none; } .add-door-bar .ad-ushape-fields { display: flex; align-items: stretch; } /* Inner fields keep full .ad-field sizing; the group owns the outer padding so trim the fields' vertical padding to keep the row tidy. */ .add-door-bar .ad-ushape-fields .ad-field { padding-top: 2px; padding-bottom: 2px; } /* Piece row click-to-select highlight + cutlist freshness banner */ .piece-row{cursor:pointer;transition:background var(--dur-panel) var(--ease-out);} .piece-row:hover{background:color-mix(in srgb, var(--acc) 4%, transparent);} .piece-row-sel{background:color-mix(in srgb, var(--acc) 10%, transparent);box-shadow:inset 3px 0 0 var(--acc);} .piece-row-sel td:first-child{color:var(--acc);font-weight:700;} .cutlist-stale,.cutlist-fresh{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:6px;font-size:12px;margin-bottom:8px;} .cutlist-stale{background:rgba(255,180,0,.08);border:1px solid rgba(255,180,0,.4);color:#ffb84d;} .cutlist-fresh{background:rgba(80,200,120,.06);border:1px solid rgba(80,200,120,.3);color:#7cc78b;} .cutlist-stale .dot,.cutlist-fresh .dot{width:8px;height:8px;border-radius:50%;flex:none;} .cutlist-stale .dot{background:#ffb84d;animation:pulse 2s infinite;} .cutlist-fresh .dot{background:#7cc78b;} .cutlist-stale .ba{margin-left:auto;padding:4px 12px;} @keyframes pulse{0%,100%{opacity:1;}50%{opacity:.45;}} @keyframes csp-sp{to{transform:rotate(360deg);}} /* Reports split layout — when both cutlist and pricing are open they sit side by side */ /* 2026-04-23: default to stacked reports — a shop-floor tablet at 1024-1366 wide can't fit a readable cutlist + pricing side-by-side. Split mode only kicks in at 1500px+ (wide desktop), and even then the cutlist keeps its 11px font so the 80-col table stays legible. Operators hit the cutlist most — give it real-estate priority. */ .do-reports{display:block;} .do-reports.split{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start;} .do-reports.split>div{min-width:0;} @media(max-width:1500px){.do-reports.split{grid-template-columns:1fr;}} /* Pricing report — invoice/quote-like table */ .pricing-table{width:100%;border-collapse:collapse;margin-top:8px;font-size:12px;} .pricing-table th{text-align:left;padding:8px 10px;border-bottom:1px solid var(--bdr);color:var(--dim);font-weight:500;font-size:10px;text-transform:uppercase;letter-spacing:.4px;} .pricing-table td{padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.04);color:var(--txt);} .pricing-table .num{text-align:right;font-variant-numeric:tabular-nums;color:var(--white);} .pricing-group-hdr{background:color-mix(in srgb, var(--acc) 6%, transparent);padding:10px 12px;border-radius:6px;margin-top:14px;display:flex;justify-content:space-between;align-items:center;} .pricing-group-hdr .name{color:var(--white);font-weight:600;font-size:13px;} .pricing-group-hdr .meta{color:var(--dim);font-size:11px;} .pricing-group-sub{display:flex;justify-content:space-between;padding:8px 10px;border-top:2px solid var(--bdr);color:var(--white);font-weight:600;} .pricing-grand{margin-top:18px;padding:14px 16px;background:linear-gradient(135deg,var(--acc),var(--acc2));color:var(--bg);border-radius:8px;display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:16px;letter-spacing:.3px;} .pricing-grand .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.6px;font-weight:600;opacity:.85;} .pricing-empty{color:var(--dim);padding:24px;text-align:center;font-size:12px;} /* Hub home — two studios side by side; each studio card and its recent-projects panel are now visually separate (gap between them, all four corners rounded). Color differentiation: Cabinet uses warm amber (--acc2), Door uses cool teal (--acc). Both colors come from theme variables so they re-skin with every theme. */ .studios-split{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:24px;align-items:start;} .studio-col{display:flex;flex-direction:column;gap:14px;} /* PR-UI-19: tokenize .15s ease cluster. Hub home — Cabinet/Door Studio cards. */ .studio-card{background:var(--pn);border:1px solid var(--bdr);border-radius:8px;padding:28px 24px;cursor:pointer;transition:border-color var(--dur-chrome) var(--ease-out),transform var(--dur-chrome) var(--spring-snappy),background var(--dur-chrome) var(--ease-out),box-shadow var(--dur-chrome) var(--ease-out);text-align:center;position:relative;overflow:hidden;} .studio-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--studio-color,var(--acc));opacity:.85;} .studio-card:hover{border-color:var(--studio-color,var(--acc));background:var(--studio-tint,color-mix(in srgb, var(--acc) 4%, transparent));} /* PR-FORGE-CAB-BUTTONS: flat hover (no lift/shadow) */ .studio-card .studio-img{font-size:44px;margin-bottom:12px;line-height:1;filter:drop-shadow(0 2px 8px rgba(0,0,0,.25));} .studio-card h4{color:var(--white);font-size:18px;margin:0 0 6px;font-weight:600;} .studio-card p{color:var(--dim);font-size:12px;margin:0 0 16px;line-height:1.5;} .studio-card .studio-cta{display:inline-block;color:var(--studio-color,var(--acc));font-weight:600;font-size:12px;letter-spacing:.3px;padding:6px 14px;border:1px solid var(--studio-color,var(--acc));border-radius:18px;transition:background var(--dur-chrome) var(--ease-out),color var(--dur-chrome) var(--ease-out);} .studio-card:hover .studio-cta{background:var(--studio-color,var(--acc));color:var(--bg);} .studio-recent{background:var(--pn);border:1px solid var(--bdr);border-radius:10px;padding:14px 18px 16px;flex:1;border-left:3px solid var(--studio-color,var(--acc));} .studio-recent .recent-hdr{color:var(--studio-color,var(--dim));font-size:10px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;font-weight:700;} .studio-recent .li{padding:8px 10px;} .studio-recent .li-t{font-size:13px;} .studio-recent .li-m{font-size:11px;} .studio-recent .empty{color:var(--dim);font-size:11px;padding:8px 10px;font-style:italic;} /* Studio-specific color tokens — set on the column so both card AND recent panel inherit */ .studio-col.col-cab{--studio-color:var(--acc2);--studio-tint:color-mix(in srgb, var(--acc2) 6%, transparent);} .studio-col.col-door{--studio-color:var(--acc);--studio-tint:color-mix(in srgb, var(--acc) 6%, transparent);} @media(max-width:1000px){.studios-split{grid-template-columns:1fr;}} /* Cabinet Studio — hub header with New Job action on the right */ .cab-hub-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding:6px 0;} /* PR-LAYOUT-JOBNAME (2026-07-29): the Job Hub title (#cab-job-name) sits in a nested flex next to the "← Jobs" back button. Without min-width:0 + nowrap + ellipsis it wraps word-by-word into a tall vertical column ("job name down the side") at laptop widths, where the right-hand action buttons squeeze the title. These rules truncate it to one line instead; min-width:0 lets the flex item shrink below its content width so the ellipsis engages. Applies to every page that reuses .cab-hub-head. The inline
wrapper gets min-width:0 in index.html so the shrink propagates to the h2. */ .cab-hub-head h2 { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } /* PR-LAYOUT-JOBMETA (2026-07-31): the Job-Hub subtitle row (#cab-job-meta = "client · status" + the ▶Start-build lifecycle control) sits BELOW the h2 in the SAME flex title column. PR-LAYOUT-JOBNAME above only protected the h2; at high zoom / narrow widths the right-hand toolbar still crushed this column, so the subtitle char-wrapped into a vertical stack ("a/a/a/a/·/D/r/a/f/t") and the Start-build control overflowed and overlapped the toolbar. Fix: (1) let .cab-hub-head WRAP the toolbar to its own row instead of squeezing the title; (2) render the meta row as its own wrapping flex row so the label + control never char-wrap or overlap (the control drops below the label when tight). The title column's inline min-width:0 is dropped in index.html so its min-content floors it and it can't collapse (the h2 still ellipsis-truncates via its own nested min-width:0). Scoped to #cab-job so the door-orders reuse of .cab-hub-head (bench-studio.css #d-orders) is untouched. */ #cab-job .cab-hub-head { flex-wrap: wrap; row-gap: 10px; } #cab-job #cab-job-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; } /* Orders list header copy (2026-04-22 polish) */ .hub-head-copy { min-width: 0; flex: 1; } .hub-head-copy h2 { margin: 0 0 4px; color: var(--txt); font-family: var(--ff-ui); font-size: var(--fs-xl); font-weight: var(--fw-semibold); letter-spacing: -0.005em; line-height: 1.2; } .hub-head-copy p { margin: 0; color: var(--dim); font-family: var(--ff-ui); font-size: var(--fs-sm); line-height: 1.5; max-width: 52ch; } /* Bulk checkbox label in the filter bar */ .fb-bulk-toggle { display: inline-flex; align-items: center; gap: 6px; color: var(--dim); font-family: var(--ff-ui); font-size: 12px; cursor: pointer; padding: 4px 6px; border-radius: 4px; transition: color var(--dur-chrome) var(--ease-out), background var(--dur-chrome) var(--ease-out); } .fb-bulk-toggle:hover { color: var(--txt); background: color-mix(in srgb, var(--acc) 8%, transparent); } .fb-bulk-toggle input { cursor: pointer; accent-color: var(--acc); } /* Report tiles — tablet-friendly big touch targets on the Job Reports grid. High contrast, chunky, and hover-glow for the pointer-using operator. `.on` is the active/selected report. */ /* PR-UI-19: report tile — Reports modal grid. Faster transform per original spec (was .08s); kept tight for tactile click-feel. */ /* PR-CLEAN-9 / TILE-GRID-REGROUP (2026-05-31): 12 report tiles organized into 4 named categories. Section title sits above each sub-grid; sub-grid keeps the existing .rep-tile markup + CSS unchanged so all hover/active/on states still work. */ /* PR-REPORTS-POLISH (2026-06-14): report tiles rebuilt as left-aligned cards — an accent icon chip + a bold label + a one-line description — so the grid reads as a scannable menu instead of a wall of unlabeled icons. Wider min cell to fit the description; the icon, label, and desc share the .rt-text column. Markup: .rep-tile > .rt-icon + .rt-text(.rt-label + .rt-desc). */ #cab-job-report-tiles{display:flex;flex-direction:column;gap:var(--sp-4);margin-bottom:14px;} .rep-tile-section{display:flex;flex-direction:column;gap:var(--sp-2);} /* PR-REPORTS-ACCORDION (2026-08-11): the section title is now a full-width clickable accordion header; clicking collapses/expands its report grid. Big touch target for a dusty tablet finger. */ .rep-tile-section-title{display:flex;align-items:center;gap:9px;width:100%;margin:0;padding:11px 13px;font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--txt);background:var(--pn);border:1px solid var(--bdr);border-radius:10px;cursor:pointer;font-family:inherit;text-align:left;transition:background var(--dur-chrome) var(--ease-out),border-color var(--dur-chrome) var(--ease-out),color var(--dur-chrome) var(--ease-out);} .rep-tile-section-title:hover{background:color-mix(in srgb, var(--acc) 6%, var(--pn));border-color:color-mix(in srgb, var(--acc) 55%, var(--bdr));color:var(--acc);} .rep-tile-section-title .rep-sec-arrow{flex:0 0 auto;font-size:11px;color:var(--acc);transition:transform var(--dur-chrome) var(--ease-out);} .rep-tile-section-title .rep-sec-name{flex:1 1 auto;} .rep-tile-section-title .rep-sec-count{flex:0 0 auto;font-size:11px;font-weight:600;color:var(--dim);background:var(--inp);border-radius:20px;padding:1px 9px;letter-spacing:0;text-transform:none;} .rep-tile-section.collapsed .rep-sec-arrow{transform:rotate(-90deg);} .rep-tile-section.collapsed .rep-tile-grid{display:none;} .rep-tile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(208px,1fr));gap:10px;} .rep-tile{display:flex;flex-direction:row;align-items:center;gap:12px;text-align:left;padding:13px 14px;background:var(--pn);border:1px solid var(--bdr);border-radius:12px;cursor:pointer;transition:background var(--dur-panel) var(--ease-out),border-color var(--dur-panel) var(--ease-out),box-shadow var(--dur-panel) var(--ease-out),transform var(--dur-quick) var(--spring-snappy);min-height:64px;color:var(--txt);font-family:inherit;} .rep-tile:hover{background:color-mix(in srgb, var(--acc) 6%, var(--pn));border-color:color-mix(in srgb, var(--acc) 55%, var(--bdr));transform:translateY(-1px);box-shadow:0 6px 18px rgb(var(--shadow-ink) / .14);} .rep-tile:active{transform:translateY(0);box-shadow:none;} .rep-tile.on{background:color-mix(in srgb, var(--acc) 11%, var(--pn));border-color:var(--acc);} /* icon chip — tinted square so the accent reads at a glance even on the light theme. PR-UI-28: inline SVG (currentColor) renders identically cross-platform (no emoji font drift). */ .rep-tile .rt-icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;background:color-mix(in srgb, var(--acc) 13%, transparent);color:var(--acc);} .rep-tile .rt-icon svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;} .rep-tile.on .rt-icon{background:color-mix(in srgb, var(--acc) 22%, transparent);} .rep-tile .rt-text{display:flex;flex-direction:column;gap:2px;min-width:0;} .rep-tile .rt-label{font-size:13px;font-weight:700;letter-spacing:.2px;line-height:1.2;color:var(--txt);} .rep-tile .rt-desc{font-size:11px;font-weight:400;line-height:1.3;color:var(--dim);} /* Report viewer body — shop-floor readable. Larger font than the rest of the UI, clean section dividers, sticky Print bar. */ .jr-viewer{background:var(--sf);border:1px solid var(--bdr);border-radius:10px;overflow:hidden;} .jr-viewer-head{position:sticky;top:0;background:var(--sf);z-index:2;display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--bdr);gap:10px;flex-wrap:wrap;} .jr-viewer-title{color:var(--white);font-size:16px;font-weight:700;letter-spacing:.2px;} .jr-viewer-sub{color:var(--dim);font-size:12px;} .jr-viewer-body{padding:16px 18px 24px;font-size:13.5px;line-height:1.55;color:var(--txt);} /* PR-MAPCUT-9 (2026-08-24): the print-pack chooser. Opens on "Print everything" so the shop picks the sheets it actually hands out, against real content — each row says what is on that sheet, and an empty one is greyed and unticked rather than silently printed. + showModal gives focus trapping and Esc for free. */ .cw-pack-dlg { border: 1px solid var(--bdr); border-radius: 12px; background: var(--sf); color: var(--txt); padding: 0; max-width: 520px; width: calc(100vw - 32px); } .cw-pack-dlg::backdrop { background: rgba(0,0,0,.55); } .cw-pack-dlg form { padding: 20px 22px 16px; margin: 0; } .cw-pack-title { margin: 0 0 4px; font-size: 17px; font-weight: 700; } .cw-pack-sub { margin: 0 0 14px; color: var(--dim); font-size: 12.5px; line-height: 1.5; } .cw-pack-tools { display: flex; gap: 14px; margin-bottom: 8px; flex-wrap: wrap; } .cw-pack-link { border: 0; background: none; padding: 0; color: var(--acc, #5a8af0); font-size: 12px; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } /* PR-MAPCUT-14 (2026-08-24): the stacks a shop actually prints. Most print the same set every job, and it is rarely "everything" — one tap instead of ticking nine boxes. */ .cw-pack-preset { min-height: 34px; padding: 5px 13px; border: 1px solid var(--bdr); border-radius: 999px; background: var(--pn); color: var(--txt); font-size: 12.5px; font-weight: 600; cursor: pointer; } .cw-pack-preset:hover { border-color: var(--acc, #5a8af0); color: var(--acc, #5a8af0); } .cw-pack-list { display: flex; flex-direction: column; border: 1px solid var(--bdr); border-radius: 8px; max-height: 46vh; overflow-y: auto; } /* 44px rows — this gets tapped on a shop-floor tablet. */ .cw-pack-row { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 12px; border-bottom: 1px solid var(--bdr); cursor: pointer; font-size: 13.5px; } .cw-pack-row:last-child { border-bottom: 0; } .cw-pack-name { flex: 1 1 auto; font-weight: 600; } .cw-pack-meta { color: var(--dim); font-size: 11.5px; white-space: nowrap; } .cw-pack-empty .cw-pack-name { color: var(--dim); font-weight: 500; } /* PR-MAPCUT-11 (2026-08-24): the chooser groups by the bench that cuts the parts, because that is who the sheet is handed to. The station heading is a sticky band so it stays visible while the operator scrolls a long list, with a one-tap "all" for that bench. */ .cw-pack-group { border-bottom: 1px solid var(--bdr); } .cw-pack-group:last-child { border-bottom: 0; } .cw-pack-station { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 12px; background: var(--sunk, var(--pn)); border-bottom: 1px solid var(--bdr); } .cw-pack-station-name { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--dim); } .cw-pack-group .cw-pack-row { padding-left: 20px; } .cw-pack-remember { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; color: var(--dim); font-size: 12.5px; cursor: pointer; } .cw-pack-actions { display: flex; justify-content: flex-end; gap: 10px; margin: 14px 0 0; padding: 0; } .cw-pack-btn { min-height: 40px; padding: 8px 18px; border: 1px solid var(--bdr); border-radius: 8px; background: var(--pn); color: var(--txt); font-size: 13.5px; font-weight: 600; cursor: pointer; } .cw-pack-btn-go { background: var(--acc, #5a8af0); border-color: transparent; color: #fff; } .cw-pack-btn-go:disabled { opacity: .5; cursor: default; } /* PR-MAPCUT-3 (2026-08-24): the banded "Classic" cut list in the job report viewer. A banded sheet is a fixed-width grid — its whole readability is columns landing under their headers — so the font MUST be monospace and the whitespace MUST be preserved. Stated explicitly rather than inherited, because a proportional fallback destroys the alignment silently. The sheet is wider than the panel on a split view, so it scrolls HORIZONTALLY in its own box rather than wrapping: a wrapped cut-list row is unreadable, whereas a scrolled one is merely inconvenient. Colours go through tokens per the standing rule. */ .jr-banded{ font-family:"Consolas","DejaVu Sans Mono","Courier New",monospace; font-size:12px;line-height:1.35;white-space:pre; overflow-x:auto;margin:0;padding:14px 16px; background:var(--pn);border:1px solid var(--bdr);border-radius:8px; color:var(--txt); } /* Notes above the sheet: an auto-added column explained, or a list that has outgrown paper. Advisory, so they read quieter than a warning banner but are still impossible to miss. */ .jr-note{ margin:0 0 8px;padding:8px 11px;border-radius:7px;font-size:12.5px; background:var(--pn);border:1px solid var(--bdr);color:var(--dim); } .jr-note-warn{border-color:var(--warn,#e0a52b);color:var(--warn,#e0a52b);} .jr-section{margin-top:20px;} .jr-section:first-child{margin-top:4px;} .jr-section h4{margin:0 0 8px;color:var(--white);font-size:14px;letter-spacing:.3px;text-transform:uppercase;border-bottom:1px solid var(--bdr);padding-bottom:6px;} .jr-table{width:100%;border-collapse:collapse;font-size:13px;} .jr-table th{text-align:left;color:var(--dim);font-weight:600;font-size:10px;text-transform:uppercase;letter-spacing:.6px;padding:8px 10px;border-bottom:1px solid var(--bdr);background:var(--pn);position:sticky;top:0;} .jr-table td{padding:9px 10px;border-bottom:1px solid rgba(255,255,255,0.04);} .jr-table tr:hover td{background:rgba(255,255,255,0.02);} .jr-table .num{text-align:right;font-variant-numeric:tabular-nums;color:var(--white);font-weight:600;} .jr-table .sku{color:var(--dim);font-size:11px;font-family:'Consolas','Courier New',monospace;} .jr-empty{color:var(--dim);padding:24px;text-align:center;font-size:13px;} .jr-footer{color:var(--dim);font-size:11px;padding:10px 16px;border-top:1px solid var(--bdr);background:var(--pn);} /* View-mode pill: "Combined" vs. "Split". One glance, no nested menus. Combined = single printable doc; Split = each section prints alone. The active segment uses the amber accent so the operator sees at a glance which view is live. */ .jr-view-toggle{display:inline-flex;background:var(--inp);border:1px solid var(--bdr);border-radius:999px;padding:2px;gap:0;} .jr-view-toggle button{background:transparent;border:none;color:var(--dim);font-size:12px;font-weight:600;letter-spacing:.2px;padding:5px 14px;border-radius:999px;cursor:pointer;transition:background var(--dur-panel) var(--ease-out),color var(--dur-panel) var(--ease-out);} .jr-view-toggle button.on{background:var(--acc2);color:#1a1203;} .jr-view-toggle button:not(.on):hover{color:var(--white);} /* Per-section Print button shows only in Split view. Positioned in the section's h4 row so the operator can fire a print for just that category (doors-only, hardware-only, etc.) without toggling modes. */ .jr-section-print{float:right;font-size:11px;padding:3px 10px;border-radius:4px;border:1px solid var(--bdr);background:var(--inp);color:var(--white);cursor:pointer;margin-top:-3px;} .jr-section-print:hover{background:var(--acc2);color:#1a1203;border-color:var(--acc2);} /* PR-CNC-DOWNLOADS (2026-06-14): machine-file download strip on the CNC report — native exports (.CID / .CIX / .MPR / G-code / bore CSV) that the operator drops straight onto the controller. Screen-only (hidden in print). Each button auth-fetches the server export → Blob → save. */ .jr-dl{margin:0 0 6px;padding:14px 16px;background:color-mix(in srgb, var(--acc) 5%, var(--pn));border:1px solid var(--bdr);border-radius:10px;} .jr-dl-head{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--dim);margin-bottom:4px;} .jr-dl-note{font-size:11.5px;color:var(--dim);line-height:1.4;margin-bottom:11px;} .jr-dl-grid{display:flex;flex-wrap:wrap;gap:8px;} .jr-dl-btn{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;background:var(--inp);border:1px solid var(--bdr);border-radius:9px;color:var(--txt);font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:background var(--dur-panel) var(--ease-out),border-color var(--dur-panel) var(--ease-out),transform var(--dur-quick) var(--spring-snappy);} .jr-dl-btn:hover{background:color-mix(in srgb, var(--acc) 12%, var(--inp));border-color:var(--acc);transform:translateY(-1px);} .jr-dl-btn:active{transform:translateY(0);} .jr-dl-btn .jr-dl-ico{flex:0 0 auto;color:var(--acc);font-size:14px;line-height:1;} .jr-dl-btn .jr-dl-ext{color:var(--dim);font-weight:400;font-size:11px;} /* When printing a single section we add `jr-print-solo` to the viewer body and `jr-print-me` to the target section; @media print rules hide every other section so only the chosen one paginates. */ /* Print — every Job Report uses this stylesheet when the operator hits the Print button. Strips dark theme, uses crisp black-on- white, keeps tables together on a page. */ @media print{ body *{visibility:hidden;} #jr-print-area,#jr-print-area *{visibility:visible;} #jr-print-area{position:absolute;top:0;left:0;width:100%;background:white;color:black;padding:20px;} #jr-print-area .jr-viewer{border:none;} #jr-print-area .jr-viewer-head{border-bottom:2px solid black;padding:0 0 12px 0;margin-bottom:12px;position:static;background:white;} #jr-print-area .jr-viewer-title{color:black;} #jr-print-area .jr-viewer-sub{color:#444;} #jr-print-area .jr-section h4{color:black;border-bottom:1px solid #666;} #jr-print-area .jr-table th{background:white;color:black;border-bottom:2px solid black;} #jr-print-area .jr-table td{color:black;border-bottom:1px solid #ccc;} #jr-print-area .jr-table .num{color:black;} #jr-print-area .jr-table .sku{color:#555;} #jr-print-area .jr-footer{background:white;color:#444;border-top:1px solid #888;} #jr-print-area .jr-print-btn,#jr-print-area .jr-close-btn{display:none;} #jr-print-area .jr-view-toggle,#jr-print-area .jr-section-print,#jr-print-area .jr-dl{display:none;} .jr-section{page-break-inside:avoid;} /* Single-section print: hide siblings so Print-this-section emits only the chosen category. `.jr-print-me` is the one to keep; everyone else in `.jr-print-solo` is suppressed. */ #jr-print-area.jr-print-solo .jr-section{display:none;} #jr-print-area.jr-print-solo .jr-section.jr-print-me{display:block;} /* PR-REPORT-PRINT-CLEAN (2026-08-01): close the remaining gaps so EVERY report (Cutlist / Hardware BOM / Rip List / Lumber / Trim Kit / Tops / CNC) prints as a clean shop sheet, not a scroll- clipped dark-chrome dump. (1) Let the report expand to full height — the on-screen viewer is a bordered scroll box (overflow:hidden); for print it must grow to its natural height so nothing past the viewport clips. */ #jr-print-area, #jr-print-area .jr-viewer, #jr-print-area .jr-viewer-body{overflow:visible!important;max-height:none!important;height:auto!important;} /* (2) Table pagination: a long list must be ALLOWED to break across pages (break-inside:auto), but never split a single ROW, and the column header must reprint at the top of each page so the shop floor can read a continued table. */ #jr-print-area .jr-table{break-inside:auto;page-break-inside:auto;} #jr-print-area .jr-table thead{display:table-header-group;} #jr-print-area .jr-table tr{break-inside:avoid;page-break-inside:avoid;} #jr-print-area .jr-table td,#jr-print-area .jr-table th{background:white;} /* (3) Start each top-level report section on its own page so each list (Doors, Box parts, Hardware, Vendor totals, …) reads cleanly. Scoped to the DIRECT section children of the body, skips the first (no leading blank page), and is suppressed in the single-section "Print this section" (solo) flow. Sections still keep together where they fit (page-break-inside handled per `.jr-section` above). */ #jr-print-area:not(.jr-print-solo) .jr-viewer-body > .jr-section + .jr-section{break-before:page;page-break-before:always;} #jr-print-area .jr-viewer-body > .jr-section{page-break-inside:auto;} /* (4) Keep the cutlist WARNINGS banner on the printout (the shop wants it) but repaint it as a clean black-on-white bordered box. The banner + its rows carry INLINE dark colours (var(--pn) bg, severity text colours), so these overrides need !important to win. Errors stay a dark red so a "DO NOT CUT" block is still unmistakable in monochrome; everything else prints black. */ #jr-print-area .jr-warning-banner{background:white!important;border:2px solid #333!important;color:black!important;break-inside:avoid;page-break-inside:avoid;} #jr-print-area .jr-warning-banner *{color:black!important;} #jr-print-area .jr-warning-banner li[style*="--no"], #jr-print-area .jr-warning-banner div[style*="--no"]{color:#8a1c1c!important;} /* PR-3D-P3-svg-fix-2 (Slice 10): print-all-walls container. When `jr-print-active` is set, this div takes over the printed page (same body * { visibility: hidden } pattern as #jr-print-area). Each `.rep-el-print-page` child is a wall elevation SVG; CSS page-break-before keeps walls on separate sheets. Letter portrait orientation matches typical AWI cabinet-elevation paper convention. */ #reports-print-all-area.jr-print-active, #reports-print-all-area.jr-print-active *{visibility:visible;} #reports-print-all-area.jr-print-active{position:absolute;top:0;left:0;width:100%;background:white;} #reports-print-all-area.jr-print-active .rep-el-print-page{padding:0.4in;} @page{size:letter portrait;margin:0;} } /* Recent-jobs cards with amber accent (matches the cabinet studio color token) */ #cab-plist .li,#cab-job-rooms .li{transition:background .12s ease,border-color .12s ease;} #cab-plist .li:hover{background:color-mix(in srgb, var(--acc2) 6%, transparent);border-color:var(--acc2);} #cab-job-rooms .li:hover{background:color-mix(in srgb, var(--acc2) 6%, transparent);border-color:var(--acc2);cursor:pointer;} #cab-plist .cab-job-card{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;background:var(--inp);border:1px solid var(--bdr);border-radius:8px;margin-bottom:8px;cursor:pointer;border-left:3px solid var(--acc2);transition:transform .12s ease,border-color .12s ease,background .12s ease;} #cab-plist .cab-job-card:hover{background:color-mix(in srgb, var(--acc2) 5%, transparent);border-color:var(--bdr-h);} #cab-plist .cab-job-card .left{flex:1;min-width:0;} #cab-plist .cab-job-card .job-name{color:var(--white);font-weight:600;font-size:14px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;} #cab-plist .cab-job-card .job-meta{color:var(--dim);font-size:11px;margin-top:2px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;} #cab-plist .cab-job-card .job-stats{color:var(--acc2);font-size:11px;font-weight:600;padding:4px 10px;background:color-mix(in srgb, var(--acc2) 10%, transparent);border-radius:12px;flex:none;} /* ═══════════════════════════════════════════════════════════════════ STUDIO DASHBOARD COCKPIT — table-driven per-customer command center. Breadcrumbs, compressed metrics ribbon, filter bar, jobs data table, QR modal, skeleton loader. Designed for shop-floor speed + density. ═══════════════════════════════════════════════════════════════════ */ /* Breadcrumb trail (Main Hub > Customers > {Name}) */ .crumbs{display:flex;align-items:center;gap:6px;color:var(--dim);font-size:12px;font-weight:500;letter-spacing:.2px;margin-bottom:6px;} .crumbs a{color:var(--dim);text-decoration:none;cursor:pointer;transition:color var(--dur-panel) var(--ease-out);} .crumbs a:hover{color:var(--acc);} .crumbs .sep{color:var(--bdr);} .crumbs .here{color:var(--white);} /* New-job CTA — vibrant teal pill, top-right of dashboard header */ .cab-new-job-btn { padding: var(--sp-3) var(--sp-6); min-height: 48px; font-family: var(--ff-ui); font-size: var(--fs-base); font-weight: var(--fw-bold); letter-spacing: 0.03em; background: var(--acc); color: var(--acc-ink); border: 1.5px solid var(--acc); border-radius: var(--radius-sm); cursor: pointer; box-shadow: 0 3px 12px color-mix(in srgb, var(--acc) 28%, transparent); transition: background var(--dur-chrome) var(--ease-out), transform var(--dur-chrome) var(--ease-out), box-shadow var(--dur-chrome) var(--ease-out), filter var(--dur-chrome) var(--ease-out); } .cab-new-job-btn:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 5px 18px color-mix(in srgb, var(--acc) 40%, transparent); } .cab-new-job-btn:focus-visible { outline: 2px solid color-mix(in srgb, var(--acc) 80%, transparent); outline-offset: 3px; } /* PR-CLEAN-8 / JOB-HEADER-REWORK (2026-05-31): action cluster on the Design Dashboard header. Standards chip (quick-jump shortcut) + ⋯ More menu (less-used actions: import / archive / templates) + primary New Job CTA. Every color via var(--token); backdrop and shadows via color-mix per [[feedback_strict_color_tokens]]. */ .cab-std-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;background:var(--inp);border:1px solid var(--bdr);border-radius:8px;color:var(--dim);font-size:12px;font-weight:500;cursor:pointer;font-family:inherit;transition:color var(--dur-chrome) var(--ease-out),border-color var(--dur-chrome) var(--ease-out),background var(--dur-chrome) var(--ease-out);} .cab-std-chip:hover{color:var(--acc);border-color:var(--acc);background:color-mix(in srgb, var(--acc) 8%, var(--inp));} .cab-std-chip svg{flex-shrink:0;color:var(--acc);} .cab-more-btn{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;background:var(--inp);border:1px solid var(--bdr);border-radius:8px;color:var(--dim);cursor:pointer;font-size:16px;line-height:1;font-family:inherit;transition:color var(--dur-chrome) var(--ease-out),border-color var(--dur-chrome) var(--ease-out),background var(--dur-chrome) var(--ease-out);} .cab-more-btn:hover{color:var(--acc);border-color:var(--acc);background:color-mix(in srgb, var(--acc) 8%, var(--inp));} .cab-more-btn[aria-expanded="true"]{color:var(--acc);border-color:var(--acc);} .cab-more-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:220px;background:var(--sf);border:1px solid var(--bdr);border-radius:10px;box-shadow:0 12px 36px color-mix(in srgb, var(--bg) 70%, transparent);padding:6px;z-index:50;display:flex;flex-direction:column;gap:2px;} .cab-more-menu[hidden]{display:none;} .cab-more-item{display:flex;align-items:center;gap:10px;padding:9px 12px;background:transparent;border:none;border-radius:6px;color:var(--txt);font-size:13px;font-weight:500;font-family:inherit;cursor:pointer;text-align:left;transition:background var(--dur-chrome) var(--ease-out),color var(--dur-chrome) var(--ease-out);} .cab-more-item:hover{background:var(--inp);color:var(--acc);} .cab-more-icon{flex-shrink:0;font-size:14px;width:18px;text-align:center;} /* Account-type chip next to customer name */ .acct-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;background:var(--inp);border:1px solid var(--bdr);border-radius:8px;font-size:11px;color:var(--dim);font-weight:500;margin-left:8px;} .acct-chip .dot{width:6px;height:6px;border-radius:50%;background:var(--ok);} /* Compressed metrics ribbon — single horizontal row, clickable cells */ .metrics-ribbon{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;background:var(--bdr);border:1px solid var(--bdr);border-radius:12px;overflow:hidden;margin:14px 0;} .metric-cell{background:var(--pn);padding:12px 16px;cursor:pointer;display:flex;flex-direction:column;gap:2px;transition:background var(--dur-panel) var(--ease-out);position:relative;} .metric-cell:hover{background:var(--inp);} .metric-cell.active{background:color-mix(in srgb, var(--acc) 8%, transparent);box-shadow:inset 0 -2px 0 var(--acc);} .metric-cell .mv{font-size:24px;font-weight:600;color:var(--white);font-variant-numeric:tabular-nums;line-height:1.1;} .metric-cell .ml{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--dim);font-weight:600;} .metric-cell .mctx{font-size:11px;color:var(--warn);font-weight:500;margin-top:2px;} .metric-cell .mctx.muted{color:var(--dim);} .metric-cell .mctx.good{color:var(--ok);} .metric-cell .mi{position:absolute;top:10px;right:10px;width:14px;height:14px;color:var(--dim);opacity:.5;} /* Search + filter bar above the jobs table */ .filter-bar{display:flex;gap:10px;align-items:center;background:var(--pn);border:1px solid var(--bdr);border-radius:10px;padding:10px 12px;margin-bottom:14px;flex-wrap:wrap;} .filter-bar .fb-search{flex:1;min-width:200px;display:flex;align-items:center;gap:8px;background:var(--inp);border:1px solid var(--bdr);border-radius:8px;padding:6px 10px;} .filter-bar .fb-search input{flex:1;background:transparent;border:none;outline:none;color:var(--txt);font-family:inherit;font-size:13px;} .filter-bar .fb-search input::placeholder{color:var(--dim);} .filter-bar .fb-search svg{width:14px;height:14px;color:var(--dim);} .filter-bar select{background:var(--inp);border:1px solid var(--bdr);color:var(--txt);font-family:inherit;font-size:12px;padding:7px 10px;border-radius:8px;cursor:pointer;outline:none;} .filter-bar select:focus{border-color:var(--acc);} .filter-bar .fb-label{font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.5px;font-weight:600;} /* Jobs data table — compact, scannable, hover-row accent */ .jobs-table{width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed;} .jobs-table thead th{text-align:left;color:var(--dim);font-size:10px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;padding:8px 10px;border-bottom:1px solid var(--bdr);background:var(--pn);position:sticky;top:0;z-index:1;cursor:pointer;user-select:none;} .jobs-table thead th .sort-ind{color:var(--acc);font-size:10px;margin-left:4px;} .jobs-table tbody tr{cursor:pointer;transition:background var(--dur-quick) var(--ease-out),border-color var(--dur-quick) var(--ease-out);border-left:3px solid transparent;} .jobs-table tbody tr:hover{background:var(--inp);border-left-color:var(--acc);} .jobs-table tbody td{padding:9px 10px;border-bottom:1px solid var(--bdr);color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .jobs-table tbody tr:last-child td{border-bottom:none;} .jobs-table .col-name{font-weight:500;color:var(--txt);display:flex;align-items:center;gap:8px;min-width:0;} .jobs-table .col-name svg{width:14px;height:14px;color:var(--acc);flex-shrink:0;} .jobs-table .col-name .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;} .jobs-table .col-client{color:var(--dim);font-size:12px;} .jobs-table .col-progress{color:var(--dim);font-size:12px;font-variant-numeric:tabular-nums;display:flex;gap:10px;align-items:center;} .jobs-table .col-progress .pg-item{display:inline-flex;align-items:center;gap:4px;} .jobs-table .col-progress svg{width:12px;height:12px;color:var(--dim);} .jobs-table .col-when{color:var(--dim);font-size:12px;font-variant-numeric:tabular-nums;font-family:'Inter',ui-monospace,monospace;} .jobs-table .col-value{color:var(--white);font-size:12px;font-variant-numeric:tabular-nums;font-weight:500;text-align:right;font-family:'Inter',ui-monospace,monospace;} .jobs-table .col-actions{text-align:right;white-space:nowrap;} /* PR-RENDER-DAY1-POLISH (2026-05-08): WCAG 2.5.5 minimum touch target = 44×44 CSS px. Pre-PR ic-btn was 26×26 — way below floor, AND fires destructive actions (delete job / duplicate). Bumped to 44×44. The icon SVG inside stays at 14×14 so visual weight is unchanged; only the hit area grows. */ .jobs-table .col-actions .ic-btn{background:transparent;border:none;color:var(--dim);width:44px;height:44px;border-radius:6px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:14px;line-height:1;transition:color var(--dur-quick) var(--ease-out),background var(--dur-quick) var(--ease-out);} .jobs-table .col-actions .ic-btn:hover{color:var(--acc);background:var(--bg);} .jobs-table .col-actions .ic-btn svg{width:14px;height:14px;} /* PR-DRAW-CUSTOMER (2026-08-06): per-row "Shop drawings" / "Customer drawings" quick-open buttons — 44px min touch target (shop tablet), compact labels, accent border on the customer copy. */ .jobs-table .col-actions .dwg-row-btn{min-height:44px;padding:6px 10px;margin:2px 4px 2px 0;border:1px solid var(--bdr);background:var(--pn);color:var(--txt,#e6e6e6);border-radius:6px;cursor:pointer;font-size:11px;font-weight:600;white-space:nowrap;vertical-align:middle;transition:color var(--dur-quick) var(--ease-out),background var(--dur-quick) var(--ease-out),border-color var(--dur-quick) var(--ease-out);} .jobs-table .col-actions .dwg-row-btn:hover{color:var(--acc);border-color:var(--acc);background:var(--bg);} .jobs-table .col-actions .dwg-row-btn-cust{border-color:var(--acc);} /* Status pills tuned for studio status set */ .pill-st-draft{background:color-mix(in srgb, var(--acc) 12%, transparent);color:#00E5C0;} .pill-st-design{background:rgba(255,204,92,0.15);color:#FFCC5C;} .pill-st-production{background:rgba(74,144,226,0.18);color:#4A90E2;} .pill-st-delivered{background:rgba(170,170,170,0.15);color:#AAAAAA;} .pill-st-completed{background:var(--lime);color:var(--lime-ink);} .pill-st-archived{background:rgba(170,170,170,0.10);color:#888888;} /* Inline action menu (3-dot dropdown) */ .row-menu{position:absolute;background:var(--sf);border:1px solid var(--bdr);border-radius:8px;box-shadow:0 16px 40px rgb(var(--shadow-ink) / 0.55);padding:4px;z-index:50;min-width:160px;} .row-menu button{display:block;width:100%;text-align:left;background:transparent;border:none;color:var(--txt);font-family:inherit;font-size:12px;padding:7px 12px;border-radius:6px;cursor:pointer;} .row-menu button:hover{background:var(--inp);color:var(--acc);} .row-menu button.danger:hover{background:rgba(255,77,77,0.12);color:var(--no);} /* Skeleton loader — same row geometry as data rows so the layout doesn't shift */ .skel-row td{padding:9px 10px;border-bottom:1px solid var(--bdr);} .skel-bar{height:12px;border-radius:4px;background:linear-gradient(90deg,var(--inp) 0%,var(--bdr) 50%,var(--inp) 100%);background-size:200% 100%;animation:skel-shimmer 1.4s ease-in-out infinite;} @keyframes skel-shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}} @keyframes lib-spin{to{transform:rotate(360deg);}} .skel-w-30{width:30%;}.skel-w-50{width:50%;}.skel-w-70{width:70%;}.skel-w-90{width:90%;} /* Empty state — illustrative icon + helpful prompt */ .empty-state{text-align:center;padding:42px 20px;color:var(--dim);} .empty-state .ei{font-size:38px;opacity:.4;margin-bottom:10px;} .empty-state .et{color:var(--white);font-size:14px;font-weight:500;margin-bottom:4px;} .empty-state .es{font-size:12px;line-height:1.5;max-width:300px;margin:0 auto 14px;} /* QR modal */ .qr-modal{position:fixed;inset:0;background:rgba(0,0,0,0.7);backdrop-filter:blur(4px);z-index:300;display:flex;align-items:center;justify-content:center;} .qr-modal.hidden{display:none;} .qr-modal .qr-panel{background:var(--sf);border:1px solid var(--bdr);border-radius:14px;padding:24px;max-width:340px;width:90vw;text-align:center;} .qr-modal h3{margin:0 0 6px;color:var(--white);font-size:16px;} .qr-modal .sub{color:var(--dim);font-size:12px;margin-bottom:16px;} .qr-modal .qr-img{background:#fff;padding:14px;border-radius:10px;display:inline-block;margin-bottom:16px;} .qr-modal .qr-img canvas,.qr-modal .qr-img svg{display:block;} .qr-modal .qr-url{font-family:ui-monospace,monospace;font-size:10px;color:var(--dim);background:var(--bg);padding:6px 10px;border-radius:6px;margin-bottom:14px;word-break:break-all;} /* PR-NEWROOM-REWORK (2026-07-17): the shape picker is a COMPACT wrapping STRIP of small tiles (a toolbar) instead of a big grid — it collapses the shapes section so the live PLAN CANVAS becomes the hero of the modal. The description moves to the tile's hover title. */ .wall-preset-grid{display:flex;flex-wrap:wrap;gap:8px;} .wall-preset{flex:0 0 auto;width:100px;background:var(--inp);border:2px solid var(--bdr);border-radius:8px;padding:8px 6px;cursor:pointer;text-align:center;transition:border-color var(--dur-chrome) var(--ease-out),transform var(--dur-chrome) var(--spring-snappy),background var(--dur-chrome) var(--ease-out);} .wall-preset:hover{border-color:var(--acc2);background:var(--pn-h);} .wall-preset.sel{border-color:var(--acc2);background:color-mix(in srgb, var(--acc2) 8%, transparent);} .wall-preset svg{width:44px;height:34px;margin-bottom:3px;overflow:visible;} /* Shape-gallery thumbnails as thick architectural poché walls (match the plan). */ .wall-preset svg [stroke-width="3"]{stroke:var(--plan-poche);stroke-width:6.5;stroke-linejoin:round;stroke-linecap:round;} .wall-preset.sel svg [stroke-width="3"]{stroke:var(--acc2);} .wall-preset .name{color:var(--white);font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .wall-preset .desc{display:none;} /* → the tile's hover title now */ /* Roomier type / fields; the plan is the hero, so shapes stay compact even in the modal. */ /* PR-NEWROOM-HDR-AIR (2026-09-02): the ✕ sits centered on the taller header band (title line ≈ 22-48px) instead of hugging the corner. */ .nr-card .island-close{top:20px;right:18px;} .nr-card h3{font-size:14.5px;font-weight:700;margin-top:16px;} .nr-card p{font-size:12px;line-height:1.5;} .nr-card .fg > label{font-size:11.5px;letter-spacing:.3px;} .nr-card input[type=text],.nr-card input[type=number],.nr-card select{font-size:14.5px;padding:9px 12px;min-height:42px;} .nr-card .nr-preview-panel{padding:12px;} /* PR-NEWROOM-SLIM (2026-09-02): compact tiles/cards so every wizard page fits the rail without scrolling on an 850px-tall window. Tiles stay >44px tall — still honest tablet tap targets. */ /* PR-NEWROOM-ONE-SCREEN: tighter still — the one-column rail carries every section at once, so the tiles run 4-up (~56px each, still >44px tap). */ .nr-card .wall-preset{width:auto;padding:5px 3px;} .nr-card .wall-preset svg{width:32px;height:22px;} .nr-card .wall-preset .name{font-size:9.5px;} .nr-card .wall-preset-grid{grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:6px;} .nr-card .wall-len-card{padding:8px 10px;} .nr-card .wall-len-card label{font-size:11px;} .nr-card .wall-len-card input{font-size:18px;} /* PR-NEWROOM-REWORK (2026-07-17): canvas-first — the plan is the HERO, inputs a compact left rail. */ @media (min-width:900px){.nr-card .nr-edit-row{grid-template-columns:minmax(0,300px) minmax(0,1fr);}} /* Per-wall length inputs — one tile per wall in the selected preset */ .wall-lens-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;} /* PR-NEWROOM-REWORK: compact inputs LEFT, dominant live plan RIGHT (was 1fr/300px = form-first). */ .nr-edit-row{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:14px;align-items:start;} .nr-preview-panel{border:1px solid var(--bdr);border-radius:8px;padding:8px;position:sticky;top:8px;} /* Stack on narrow screens with the CANVAS FIRST (order:-1) — you see the room, then the inputs. */ @media (max-width:620px){.nr-edit-row{grid-template-columns:1fr;}.nr-edit-row .nr-preview-panel{order:-1;}} /* PR-NEWROOM-REWORK (2026-07-17): the TWO-PANE canvas-first SHELL — a compact controls rail (left) + the live plan canvas as the hero (right), sticky footer. The modal is a flex column (header / .nr-shell / footer); .nr-shell is the grid. */ .nr-shell{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:minmax(268px,288px) minmax(0,1fr);overflow:hidden;} .nr-rail{overflow-y:auto;padding:16px 20px;border-right:1px solid var(--bdr);} .nr-rail h3{margin-top:14px;margin-bottom:6px;} .nr-canvas-pane{overflow:hidden;padding:14px 18px;display:flex;flex-direction:column;min-height:0;background:color-mix(in srgb, var(--bg) 55%, transparent);} .nr-canvas-pane .nr-preview-panel{position:static;top:auto;} /* not sticky inside the pane */ /* PR-NEWROOM-REWORK (2026-07-17): make the plan FILL the pane (was letterboxed to 58vh / calc(92vh-195px) by the shared SVG string). The SVG has a fixed 440×360 viewBox + default preserveAspectRatio="xMidYMid meet", so height:100% fills one axis and centers — no distortion, no math change. Scoped to the creation canvas so the in-room inspector's SVG (which sits beside the 3D view) is untouched. The wgPlanSvg wrapper div must flex to give the SVG a real height box. */ .nr-canvas-pane #nr-preview{display:flex;flex-direction:column;min-height:0;} .nr-canvas-pane #nr-preview > div{flex:1 1 auto;min-height:0;} .nr-canvas-pane #nr-preview svg{max-height:none !important;width:100% !important;height:100% !important;} @media (max-width:760px){ .nr-card .nr-shell{grid-template-columns:1fr;grid-template-rows:minmax(240px,38vh) 1fr;} .nr-canvas-pane{order:-1;border-bottom:1px solid var(--bdr);border-right:none;} .nr-rail{border-right:none;} } .wall-len-card{background:var(--inp);border:1px solid var(--bdr);border-radius:6px;padding:8px 10px;border-left:3px solid var(--acc2);} .wall-len-card label{display:block;color:var(--dim);font-size:10px;text-transform:uppercase;letter-spacing:.4px;margin-bottom:3px;font-weight:600;} .wall-len-card input{width:100%;padding:5px 7px;font-size:13px;font-weight:600;background:transparent;border:1px solid transparent;color:var(--white);border-radius:4px;text-align:center;} .wall-len-card input:focus{background:color-mix(in srgb, var(--acc2) 8%, transparent);border-color:var(--acc2);outline:none;} .wall-len-card .unit{color:var(--dim);font-size:10px;margin-left:3px;} /* PR-ROOM-DESIGNER-PRO (2026-07-16): architect's-drawing palette for the plan canvas — theme-INDEPENDENT "paper" so the plan reads the same in every app theme. Grounded in ISO 128 line-weight hierarchy + architectural poché. */ :root{ --plan-paper:#F6F5F1; --plan-floor:#FBFAF7; --plan-grid:#DCE0E4; --plan-grid-maj:#C4CBD2; --plan-poche:#6E7378; --plan-ink:#1A1D20; --plan-face-int:#0E9F8E; --plan-dim:#4A4F55; --plan-dim-text:#20262C; --plan-dim-edit:#C0392B; --plan-door:#B45309; --plan-glass:#2E86AB; --plan-slope:#D98A1F; --plan-handle:#1A1D20; --plan-handle-core:#FFFFFF; --plan-sel:#E0A73A; --plan-snap:#22C58B; } /* PR-ROOM-DESIGNER (2026-07-16): tap-to-edit dimension chips on the plan canvas + the inline numeric editor that opens over a tapped chip. */ .wg-dim rect{transition:fill-opacity var(--dur-chrome) var(--ease-out),stroke-opacity var(--dur-chrome) var(--ease-out);} .wg-dim:hover rect{fill-opacity:0.96;stroke-opacity:0.95;} .wg-dim:hover text{fill:var(--acc);} .wg-ang circle{transition:stroke var(--dur-chrome) var(--ease-out);} .wg-ang:hover circle{stroke:var(--acc);} .wg-ang:hover text{fill:var(--acc);} /* Right-click context menu on the plan canvas */ .wg-ctx{position:absolute;z-index:150;min-width:170px;background:var(--sf);border:1px solid var(--bdr);border-radius:8px;box-shadow:0 8px 26px rgb(var(--shadow-ink) / .4);padding:5px;overflow:hidden;} .wg-ctx button{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:transparent;border:none;color:var(--pn);font-size:13px;font-family:inherit;padding:8px 10px;border-radius:6px;cursor:pointer;} .wg-ctx button:hover{background:var(--inp);color:var(--acc);} .wg-ctx .wg-ctx-danger:hover{color:var(--no);} .wg-ctx-sep{height:1px;background:var(--bdr);margin:4px 6px;} .wg-dim-editor{position:absolute;z-index:140;width:72px;padding:3px 5px;font-size:13px;font-weight:700;text-align:center;color:var(--white);background:var(--sf);border:1.5px solid var(--acc2);border-radius:5px;box-shadow:0 4px 14px rgb(var(--shadow-ink) / .35);outline:none;} .wg-drag-hud{position:absolute;z-index:141;pointer-events:none;background:var(--sf);color:var(--white);border:1px solid var(--acc2);border-radius:5px;padding:2px 7px;font-size:11px;font-weight:700;white-space:nowrap;box-shadow:0 3px 10px rgb(var(--shadow-ink) / .35);} /* Free-draw "Draw walls" tool control strip (bottom-left of the canvas). */ .wg-draw-strip{position:absolute;left:8px;bottom:8px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;max-width:calc(100% - 16px);background:color-mix(in srgb, var(--sf) 92%, transparent);border:1px solid var(--bdr);border-radius:8px;padding:6px 8px;box-shadow:0 3px 12px rgb(var(--shadow-ink) / .3);} .wg-draw-strip button{white-space:nowrap;} .wg-draw-sep{width:1px;height:18px;background:var(--bdr);margin:0 2px;} /* Full-screen Room Designer for the New-Room modal (mirrors .wg-expanded). */ .nr-preview-panel.nr-designer-expanded{position:fixed;inset:24px;z-index:145;background:var(--sf);border:1px solid var(--bdr);border-radius:14px;box-shadow:0 0 0 100vmax color-mix(in srgb, var(--bg) 72%, transparent),0 30px 80px color-mix(in srgb, var(--bg) 80%, transparent);padding:18px;overflow:auto;} .nr-preview-panel.nr-designer-expanded #nr-preview svg{max-height:calc(100vh - 170px) !important;} .nr-designer-actions{display:none;} .nr-preview-panel.nr-designer-expanded .nr-designer-actions{display:flex;align-items:center;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid var(--bdr);} /* ── PR-NEWROOM-FUSION (2026-07-17): Fusion-360 × Apple premium visual system ── A dark "engineering" plan canvas + a glass floating toolbar + a glass status pill + premium glowing corner handles. EVERYTHING is scoped to .nr-card so the in-room room editor (#wg-plan-svg, which lives OUTSIDE .nr-card) keeps its light architect's-paper palette untouched. The shared wgPlanSvg reads --plan-canvas, which is DEFINED ONLY here — everywhere else it falls back to --plan-paper. */ .nr-card{ /* PR-NEWROOM-THEME-FOLLOW (2026-09-08, operator follow-up: "the background in the rendering is still not in a light mode"): the dark --plan-* re-base moved to the [data-theme=dark] block below. In light theme the plan falls back to the architect's-paper palette at :root — the same rendering the in-room editor uses. */ /* PR-NEWROOM-THEME-FOLLOW (2026-09-08, operator: "shouldn't the colors follow the color scheme you have applied — it does not have a light mode"): the rail/header/footer follow the APP THEME again. In light theme the card is the normal light surface with a STRONG edge ring (the findability fix the 2026-09-02 dark card was for); the dark UI-token re-base moved to the [data-theme=dark] block below. The CANVAS pane stays the dark engineering surface in both themes — that identity is the plan itself, not the chrome around it. */ color:var(--txt); box-shadow:0 32px 90px rgba(15,23,42,.30), 0 0 0 1.5px var(--bdr-h); } /* PR-NEWROOM-DARKCARD (2026-09-02), now dark-theme-only: the whole dialog wears the canvas's dark engineering palette. Core UI tokens are re-based so the rail / header / footer / inputs restyle themselves (everything inside is token-driven); values track the dark theme but sit on the canvas's blue-gray #0D1117 family instead of AMOLED black. */ :root[data-theme="dark"] .nr-card{ --plan-canvas:#0D1117; --plan-paper:#0D1117; --plan-floor:#141A22; --plan-grid:rgba(255,255,255,0.055); --plan-grid-maj:rgba(255,255,255,0.12); --plan-poche:#2A313C; --plan-ink:#D8DDE8; --plan-face-int:#1D9BF0; --plan-dim:#8FA3B8; --plan-dim-text:#B8C4D2; --plan-dim-edit:#F0B429; --plan-door:#E0943A; --plan-glass:#5AB4E0; --plan-slope:#F0A93A; --plan-handle:#9DB0C4; --plan-handle-core:#0D1117; --plan-sel:#1D9BF0; --plan-snap:#34E0A1; --bg:#0A0E14; --sf:#0D1117; --pn:#141A22; --pn-h:#1B222C; --inp:#151C25; --bdr:#2B3440; --bdr-h:#3E4956; --acc:#4C8DFF; --acc2:#6AA5FF; --acc-ink:#05070D; --txt:#E2E8F0; --dim:#9AA8B8; --muted:#6B7888; --white:#FFFFFF; --ink:var(--txt); --ok:#34D399; --ok-ink:#06281D; --warn:#F0B429; --warn-ink:#2A1E03; --no:#F2566B; --no-ink:#2A0810; --lime:#34D399; --lime-ink:#06281D; box-shadow:0 32px 90px rgb(var(--shadow-ink) / .55), 0 0 0 1px rgba(255,255,255,.16); } /* The native color input ships a WHITE swatch wrapper (Chromium default) — the one light-mode leftover on the rail in either theme. */ .nr-card input[type=color]::-webkit-color-swatch-wrapper{padding:0;background:none;border-radius:6px;} .nr-card input[type=color]::-webkit-color-swatch{border:1px solid var(--bdr);border-radius:6px;} /* Canvas ground follows the theme: paper in light, engineering-dark in dark. */ .nr-card .nr-canvas-pane{background:var(--plan-paper,#F6F5F1);} :root[data-theme="dark"] .nr-card .nr-canvas-pane{background:radial-gradient(130% 100% at 50% 0%, #10151D 0%, #0A0D12 68%, #06090D 100%);} /* The wall-color hex input sits outside any .fg group, so without this it keeps the browser's default white chrome on the now-dark rail. */ .nr-card #nr-wall-color-hex{background:var(--inp);border:1px solid var(--bdr);border-radius:8px;color:var(--txt);padding:6px 8px;} .nr-card .nr-preview-panel{position:relative;} /* Frosted glass primitive — floating chrome over the canvas. Light glass on paper; dark glass on the dark canvas (theme-follow). */ .nr-glass-pill{background:rgba(255,255,255,0.82);backdrop-filter:blur(16px) saturate(170%);-webkit-backdrop-filter:blur(16px) saturate(170%);border:1px solid rgba(26,29,32,0.12);box-shadow:0 10px 34px rgba(15,23,42,0.18),inset 0 1px 0 rgba(255,255,255,0.6);} :root[data-theme="dark"] .nr-glass-pill{background:rgba(13,17,23,0.80);border:1px solid rgba(255,255,255,0.10);box-shadow:0 10px 34px rgb(var(--shadow-ink) / 0.5),inset 0 1px 0 rgba(255,255,255,0.06);} @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .nr-glass-pill{background:rgba(255,255,255,0.97);} :root[data-theme="dark"] .nr-glass-pill{background:rgba(15,20,28,0.97);} } /* PR-NEWROOM-FAB-DOCKED (2026-09-02, operator: "This bar is a mess it is completly covering words and part of the wall"): the toolbar no longer FLOATS over the canvas at all. It sits in its own strip above the drawing, in normal flow, so it cannot cover a label or a wall no matter what shape the room is. (The 2026-08-13 drag grip was the band-aid for the same complaint — moving the problem around instead of removing it; gone with this.) */ .nr-fab-toolbar{position:relative;flex:0 0 auto;align-self:center;max-width:calc(100% - 16px);margin:8px auto 6px;z-index:22;display:flex;align-items:center;gap:2px;height:46px;padding:0 9px;border-radius:13px;animation:nrFabIn .34s var(--spring-snappy,cubic-bezier(.22,1,.36,1));} .nr-fab-toolbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:44px;height:38px;padding:0 9px;background:transparent;border:none;border-radius:9px;color:var(--dim);font-family:inherit;font-size:16px;line-height:1;cursor:pointer;transition:background .13s var(--ease-out,ease),color .13s var(--ease-out,ease),transform .09s var(--ease-out,ease);} .nr-fab-toolbar button .fab-lbl{font-size:8.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;opacity:.92;} .nr-fab-toolbar button:hover{background:color-mix(in srgb, var(--acc) 13%, transparent);color:var(--txt);} .nr-fab-toolbar button:active{transform:scale(.9);} .nr-fab-toolbar button:disabled{opacity:.32;cursor:default;pointer-events:none;} /* PR-PLAN-IMPORT (2026-07-18): the New-Room "upload a plan" dropzone. */ .nr-plan-drop{display:flex;align-items:center;gap:10px;padding:11px 13px;margin-bottom:12px;border:1.5px dashed var(--bdr);border-radius:10px;background:color-mix(in srgb,var(--acc) 5%,transparent);cursor:pointer;transition:border-color .15s var(--ease-out,ease),background .15s var(--ease-out,ease);} .nr-plan-drop:hover{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 10%,transparent);} .nr-plan-drop.drag{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 16%,transparent);} /* PR-NEWROOM-CHECKLIST (2026-09-08): the readiness list atop the rail. Token-driven, so it follows the modal's light/dark theme. */ .nr-check{background:var(--pn);border:1px solid var(--bdr);border-radius:10px;padding:5px 6px;margin-bottom:12px;display:flex;flex-direction:column;} .nr-check:empty{display:none;} .nr-check-row{display:flex;align-items:center;gap:8px;padding:4px 5px;border:none;background:none;color:var(--txt);font:inherit;font-size:12px;line-height:1.35;text-align:left;cursor:pointer;border-radius:6px;width:100%;} .nr-check-row:hover{background:var(--pn-h);} .nr-check-row:focus-visible{outline:2px solid var(--acc);outline-offset:-2px;} .nr-check-dot{width:16px;height:16px;border-radius:50%;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;} .nr-check-row.is-ok .nr-check-dot{background:color-mix(in srgb, var(--ok) 15%, transparent);color:var(--ok);} .nr-check-row.is-warn .nr-check-dot{background:color-mix(in srgb, var(--warn) 16%, transparent);color:var(--warn);} .nr-check-row.is-todo .nr-check-dot{border:1.5px dashed var(--muted);} .nr-check-row.is-warn .nr-check-lbl b{color:var(--warn);} .nr-check-lbl{min-width:0;} .nr-check-opt{margin-left:auto;color:var(--muted);font-style:italic;font-size:10.5px;flex:0 0 auto;} /* PR-NEWROOM-SLIM (2026-09-02): rail ledes/captions became .jd-help hover tips so the rail fits without a scrollbar. Tips open BELOW their ⓘ — above would clip at the card top (overflow:hidden) or the rail's scroll edge — and are width-capped so a hover can't extend the rail's scrollable overflow. */ .nr-card .jd-help.tip-below:hover::after, .nr-card .nr-rail .jd-help:hover::after{bottom:auto;top:calc(100% + 6px);min-width:180px;max-width:200px;} .nr-card .jd-help.tip-below:hover::before, .nr-card .nr-rail .jd-help:hover::before{bottom:auto;top:calc(100% + 1px);border-top-color:transparent;border-bottom-color:color-mix(in srgb,var(--pn) 96%,transparent);} /* A tip living inside a form label must not inherit its uppercase/tracking. */ .nr-card .jd-help:hover::after{text-transform:none;letter-spacing:normal;font-weight:400;} .nr-card .nr-rail .fg{margin-bottom:6px;} /* Two-up field rows: the stock .fr minmax(140px) stacks single-column in the 248px rail, which is what made pages 2 and 4 scroll. 108px columns pair the short selects/inputs without truncating their values. */ .nr-card .nr-rail .fr{grid-template-columns:repeat(auto-fit,minmax(108px,1fr));gap:8px 10px;} .nr-card .nr-rail h3{margin-top:10px;} .nr-card .wall-lens-grid{grid-template-columns:repeat(auto-fit,minmax(108px,1fr));} .nr-fab-toolbar button.is-active{background:color-mix(in srgb, var(--acc) 20%, transparent);color:var(--acc);box-shadow:inset 0 -2px 0 var(--acc);} .nr-fab-toolbar button.nr-fab-primary{color:var(--txt);} .nr-fab-sep{width:1px;height:24px;background:color-mix(in srgb, var(--txt) 14%, transparent);margin:0 5px;flex:0 0 auto;} /* PR-NEWROOM-FAB-DOCKED: the drag grip + dragging styles left with the floating position — a docked bar has nowhere to be dragged to. PR-NEWROOM-PLACE: crosshair while arming an opening for click-to-place. */ .nr-preview-panel.nr-placing #nr-preview{cursor:crosshair;} /* Glass status pill (bottom-left) — validity + dims + area + wall count. */ .nr-card .nr-status-strip{animation:nrPillIn .34s var(--spring-snappy,cubic-bezier(.22,1,.36,1));} @keyframes nrFabIn{from{opacity:0;transform:translateY(-9px);}to{opacity:1;transform:translateY(0);}} @keyframes nrPillIn{from{opacity:0;transform:translateY(7px);}to{opacity:1;transform:translateY(0);}} /* 3-column editor grid: library | viewer | parameters */ /* Slimmer sidebars (260→218 left, 280→236 right ≈ 17–18% reduction) + glassmorphic surface so the panels read as floating over the viewport instead of two more boxes. The viewport gradient bleeds through. */ /* PR-CAB-LAYOUT-CALC (2026-05-29, refined): the 56px in this calc was originally only the OUTER app header height. Later someone added `.shdr` inside #pg-cab but never updated the calc. Refined .shdr height estimate: padding 10px + h1 (24px font × ~1.2 line-height = ~29px) + sub div (12px font × ~1.4 line-height = ~17px) + padding 10px + border 1px ≈ 67-68px, not the 46px I first guessed. First-pass calc(100vh - 102px) closed most of the gap but operator confirmed "still some scroll" remained — undershot by ~20px. Bumped to 125px to cover 56 outer + ~68 .shdr + small safety margin. If still off, nudge the constant ±5px; do NOT restructure the flex/grid (see [[feedback_no_cab_editor_grid_layout_changes]]: two attempts to restructure broke the page hard). */ /* PR-CAB-PANE-CONTRAST (2026-06-16): left rail widened 218→248px and the right (Parameters) rail 236→252px so cabinet names + wall-property labels stop crowding the edges and read at a glance. Width tweak only — the grid structure is unchanged (see feedback_no_cab_editor_grid_layout_changes). */ /* PR-STUDIO-FIT (2026-07-08): height-only fix (columns unchanged, per feedback_no_cab_editor_grid_layout_changes). FILL the positioned parent (#app-workspace is position:fixed between the 56px topbar and the status bar) instead of the fragile height:calc(100vh - 125px) magic guess, which overflowed the viewport — operator had to scroll to reach the bottom control bar — whenever the real chrome differed from 125px (status bar / migration banner / taller topbar). 100% adapts to whatever space the fixed parent actually has; grid stays overflow: hidden and each pane scrolls internally. */ /* PR-CAB-LEFT-SLIM (2026-07-29): default left library width trimmed 248 → 212 so the 3D viewport is bigger before the operator touches anything (operator: "takes up too much screen before you can select a cabinet and see it"). Drag-to-resize still overrides via inline --cab-lw. */ .cab-editor-grid{display:grid;grid-template-columns:var(--cab-lw,212px) 1fr var(--cab-rw,252px);height:100%;max-height:100%;min-height:0;overflow:hidden;background:var(--bg);position:relative;transition:grid-template-columns var(--dur-standard) var(--ease-out);} /* PR-CAB-RESIZE (2026-06-28): drag-to-resize rails (widths persist). */ .cab-resizer{position:absolute;top:0;bottom:0;width:9px;cursor:col-resize;z-index:6;background:transparent;touch-action:none;transition:background var(--dur-quick) var(--ease-out);} .cab-resizer:hover,.cab-resizer.drag{background:color-mix(in srgb, var(--acc) 45%, transparent);} .cab-resizer.cab-rz-l{left:var(--cab-lw,212px);transform:translateX(-50%);} .cab-resizer.cab-rz-r{right:var(--cab-rw,252px);transform:translateX(50%);} .cab-editor-grid.cab-expanded .cab-resizer{display:none;} .cab-editor-grid.cab-dragging{transition:none;} /* PR-CAB-LAYOUT: expanded viewport mode — hides both side rails so the 3D viewport fills the available space. Triggered by the ⊞ toolbar button or pressing F. Mozaik-style "maximize 3D". Side panes fade out via opacity so the canvas reflows cleanly via the ResizeObserver. */ .cab-editor-grid.cab-expanded{grid-template-columns:0 1fr 0;} .cab-editor-grid.cab-expanded .cab-pane{overflow:hidden;pointer-events:none;opacity:0;border:none;transition:opacity .14s ease;} @media (prefers-reduced-motion: reduce){ .cab-editor-grid,.cab-editor-grid.cab-expanded .cab-pane{transition:none;} } /* PR-CAB-PANE-CONTRAST (2026-06-16): background was a hardcoded dark glass (rgba(18,18,18,0.78)) that ignored the theme. In light mode it painted a muddy medium-gray panel while the theme's dark text tokens (--txt / --dim) sat on top → unreadable labels in BOTH the Cabinet Library (left) and Parameters (right) rails. Route through --pn so the panel flips with the theme (ivory/white in light mode, near-black in dark) while keeping a hint of translucency for the floating-glass feel the blur provides. */ /* PR-EDITOR-BLACK (2026-07-19): route the editor rails to true black (var(--bg)) instead of a color-mixed --pn + glass blur — the operator wants consistent pure-black dark mode. Cards inside (--pn #16181C) still give subtle depth. */ .cab-pane{background:var(--bg);display:flex;flex-direction:column;border-right:1px solid var(--bdr);overflow:hidden;min-width:0;} .cab-pane-right{border-right:none;border-left:1px solid var(--bdr);} .cab-pane-hdr{padding:10px 14px;border-bottom:1px solid var(--bdr);display:flex;align-items:center;gap:8px;background:var(--bg);flex:none;} .cab-pane-body{overflow:hidden;overflow-x:hidden;padding:10px;flex:1;display:flex;flex-direction:column;min-height:0;} /* PR-CAB-PANE-CONTRAST (2026-06-16): hide the scrollbar in the editor rails — it still scrolls, just without the chrome the operator found intrusive. Applies to the pane body and any inner scroll regions. */ .cab-pane-body,.cab-pane-body *{scrollbar-width:none;-ms-overflow-style:none;} .cab-pane-body::-webkit-scrollbar,.cab-pane-body *::-webkit-scrollbar{display:none;width:0;height:0;} .cab-pane-body .pn{margin-bottom:0;} /* The global .fr uses minmax(140px,…) so in these ~230px rails the Quick-Add W/H/D fields each grabbed a full row and stacked vertically, burying the Cabinet Library list and Placed section below the fold. Tighten the track minimum INSIDE the cab rails so the three dimension fields sit on one row — everything fits without scrolling on a normal screen. Width-only scope; no structural change. */ .cab-pane .fr{grid-template-columns:repeat(auto-fit,minmax(58px,1fr));gap:8px;margin-bottom:8px;} .cab-pane .fg{margin-bottom:8px;} .cab-pane .fg label{margin-bottom:3px;} /* Tighten the gap between the stacked sections (Cabinet Library / Quick Add / Placed) so all three are reachable with minimal scroll. */ .cab-pane-body .pn + .pn{margin-top:8px !important;} .cab-viewer{display:flex;flex-direction:column;overflow:hidden;background:#080810;position:relative;min-width:0;} .cab-canvas-wrap{flex:1;position:relative;min-height:0;} .cab-canvas-wrap canvas{display:block;width:100%;height:100%;} /* PR-CAB-TOOLBAR-FIT (2026-05-29): was overflow-x:auto which forced operators to horizontally scroll the toolbar to reach Eco/Balanced/Best perf-tier buttons on common laptop widths. flex-wrap:wrap lets buttons spill to a second row when needed, so every viewport setting is visible without scrolling the viewport area itself (only the sidebars should scroll). */ /* PR-EDITOR-FLOAT (2026-07-19): Apple-style. The toolbar is now a FLOATING VIEW PILL centered at the bottom of the canvas (view controls only) + a floating ACTION cluster top-right (Edit/Apply/Island/Placed/Save). No bordered .cv-group boxes, no wrap — a calm frosted pill on pure black. */ .cab-view-bar{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:8; display:flex;flex-wrap:nowrap;align-items:center;gap:2px;max-width:calc(100% - 28px); padding:6px 8px;background:color-mix(in srgb, var(--pn) 80%, transparent); -webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%); border:1px solid var(--bdr);border-radius:15px;box-shadow:0 14px 42px rgb(var(--shadow-ink) / .55);} .cab-view-bar .cv-group{background:transparent;border:none;padding:0;margin:0 2px 0 0;gap:2px;display:inline-flex;align-items:center;} .cab-view-bar .cv-group:empty{display:none;margin:0;} .cab-view-bar #vc-view{min-height:34px!important;padding:5px 9px!important;border-radius:8px!important;} .cab-view-bar #cv-expand{margin-left:2px!important;} .cab-view-bar .cv-help-btn{margin-left:0!important;} /* Floating ACTION cluster (top-right of the canvas). */ .cab-act-cluster{position:absolute;right:16px;top:16px;z-index:8; display:flex;align-items:center;gap:4px;padding:5px 6px; background:color-mix(in srgb, var(--pn) 80%, transparent); -webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%); border:1px solid var(--bdr);border-radius:13px;box-shadow:0 12px 32px rgb(var(--shadow-ink) / .5);} #cab-placed-count{background:var(--acc);color:var(--acc-ink);border-radius:6px;padding:1px 6px;font-size:11px;font-weight:700;} /* Apple-clean ghost buttons inside both floating containers. */ .cab-view-bar .cv-btn,.cab-act-cluster .cv-btn{background:transparent;border:none;color:var(--dim);min-height:36px;padding:0 12px;border-radius:8px;font-weight:600;} .cab-view-bar .cv-btn:hover,.cab-act-cluster .cv-btn:hover{background:color-mix(in srgb, var(--txt) 9%, transparent);border-color:transparent;color:var(--txt);} .cab-view-bar .cv-btn.active,.cab-act-cluster .cv-btn.active{background:color-mix(in srgb, var(--acc) 16%, transparent);color:var(--acc);border-color:transparent;font-weight:700;} .cab-act-cluster .cv-btn.cv-btn-primary{background:var(--acc);color:var(--acc-ink);font-weight:700;} .cab-act-cluster .cv-btn.cv-btn-primary:hover{filter:brightness(1.06);background:var(--acc);color:var(--acc-ink);} /* Floating PLACED-CABINETS panel (opened by the Placed toggle). */ .cab-placed-panel{position:fixed;z-index:1300;width:290px;max-height:min(62vh,470px);display:flex;flex-direction:column; background:color-mix(in srgb, var(--pn) 92%, transparent);-webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%); border:1px solid var(--bdr);border-radius:13px;box-shadow:0 18px 48px rgb(var(--shadow-ink) / .6);overflow:hidden;} .cab-placed-panel[hidden]{display:none;} .cab-placed-panel .cpp-head{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-bottom:1px solid var(--bdr);flex:none;} .cab-placed-panel .cpp-head h3{font-size:13px;font-weight:600;margin:0;color:var(--txt);} .cab-placed-panel .cpp-head #cab-count{color:var(--dim);font-weight:400;} .cab-placed-panel .cpp-close{background:transparent;border:none;color:var(--dim);font-size:16px;cursor:pointer;padding:2px 7px;border-radius:6px;line-height:1;} .cab-placed-panel .cpp-close:hover{color:var(--txt);background:color-mix(in srgb, var(--txt) 8%, transparent);} .cab-placed-panel #cab-items{flex:1;min-height:0;max-height:none;overflow-y:auto;padding:8px;} .cab-placed-panel .cpp-foot{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--bdr);flex:none;} .cab-placed-panel .cpp-foot button{flex:1;margin:0;} /* Collapsible Quick-Add header (press "A" to open the typed form). */ .cab-qa-toggle{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;background:transparent;border:none; color:var(--txt);font-size:12px;font-weight:600;padding:0 0 8px;margin:0;cursor:pointer;text-align:left;} .cab-qa-toggle:hover{color:var(--acc);} .cab-qa-toggle[aria-expanded="true"]{color:var(--acc);} .cab-qa-toggle kbd{font-family:inherit;font-size:10px;font-weight:600;color:var(--dim);background:color-mix(in srgb,var(--txt) 8%,transparent); border:1px solid var(--bdr);border-radius:5px;padding:1px 6px;line-height:1.5;} #cab-quickadd-form[hidden]{display:none;} /* PR-UI-28: cv-btn now hosts inline SVGs alongside text labels. Icons sized at 14px to match the 11px label without dominating. */ /* PR-RENDER-DAY1-POLISH (2026-05-08): WCAG 2.5.5 — bumped padding from 6px 12px (~31px tall) to 11px 14px (~44px) so toolbar buttons (iso/top/front/side/sketch/walk) clear the floor. Font-size and gap unchanged so the visible content stays the same; only the hit area grows. */ .cv-btn{background:var(--inp);border:1px solid var(--bdr);color:var(--white);padding:11px 14px;border-radius:6px;font-size:11px;cursor:pointer;transition:background var(--dur-panel) var(--ease-out),border-color var(--dur-panel) var(--ease-out);white-space:nowrap;display:inline-flex;align-items:center;gap:5px;min-height:44px;} .cv-btn svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;} .cv-btn:hover{background:color-mix(in srgb, var(--acc2) 10%, transparent);border-color:var(--acc2);} .cv-btn.active{background:var(--acc2);color:var(--bg);border-color:var(--acc2);font-weight:600;} /* PR-STUDIO-P2 #10d/#10e (2026-07-16): material swatch dot on the finish chips (paint the current finish), + the Save button accented as the highest-stakes action. */ .cv-btn .cv-swatch{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:2px;vertical-align:middle;border:1px solid rgba(0,0,0,0.28);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.18);flex:0 0 auto;} .cv-btn.cv-btn-primary{background:var(--acc);border-color:var(--acc);color:#fff;font-weight:600;} .cv-btn.cv-btn-primary:hover{filter:brightness(1.08);} /* PR-STUDIO-P2 #9b (2026-07-16): live-cost HUD recompute shimmer + narrow tablet width clamp. The sweep overlays the existing numbers (host is overflow:hidden) so stale figures never blank while the nester runs. */ #cw-live-cost.cw-recalc::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,0.12) 50%,transparent 70%);animation:cwLcSweep 900ms ease-in-out infinite;pointer-events:none;} @keyframes cwLcSweep{0%{transform:translateX(-100%);}100%{transform:translateX(100%);}} @media (max-width:480px){#cw-live-cost{max-width:calc(100vw - 24px);right:12px;}} .cv-sep{width:1px;height:18px;background:var(--bdr);margin:0 4px;flex:none;} .cv-hint{color:var(--dim);font-size:10px;white-space:nowrap;} /* Cabinet library — single-column tile rows with side-by-side icon+text. Was a 2-column grid (`grid-template-columns:1fr 1fr`) which crushed names like "Lazy Susan Corner Base" into ellipsis-truncated half-words ("Lazy") in the right column. Single column at 218px gives ~190px of usable width for the name — enough to fit every cabinet name without truncation. Each row is shorter than the old 2-col tile (icon goes inline on the left at 38px instead of stacked at 46px above the text), so the visible row count stays similar. */ #cab-lib-items{display:grid;grid-template-columns:1fr;gap:6px;flex:1 1 auto;min-height:0;overflow-y:auto;} /* UX-2 — Category section header spans both columns. Sticky so the section name stays visible while scrolling through a long list of widths. Tiny + muted so it reads as a label, not a tile. */ /* PR-LIB-SCROLL-FIX (2026-05-28): was top:-1px which left a 1px gap that triggered reflow on every scroll tick (the items appeared to "jump"). top:0 keeps the header flush to the scroll container's top edge. */ /* PR-CAB-LIB-COMPACT (2026-07-29): brighter, larger section headers. Operator: "where it shows base 11 … make it easier to read, bright white or super black". --txt is the theme's max-contrast body color (near-white in dark, near-black in light), so it flips correctly with the theme. */ .cab-lib-section-header{grid-column:1 / -1;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--txt);padding:10px 6px 6px;border-bottom:1px solid var(--bdr);margin-top:6px;background:var(--sf);position:sticky;top:0;z-index:2;} .cab-lib-section-header:first-child{margin-top:0;} /* PR-CAB-LIB-COMPACT (2026-07-29): compact type/shape dropdowns + small Browse-all link that replaced the two rows of large filter pills. */ .cab-lib-filter-row{display:flex;gap:6px;margin-bottom:6px;} .cab-lib-sel{flex:1;min-width:0;height:34px;background:var(--inp);border:1px solid var(--bdr);border-radius:6px;color:var(--txt);padding:0 6px;font-size:12px;font-weight:600;cursor:pointer;} .cab-lib-sel:focus{border-color:var(--acc);outline:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--acc) 25%,transparent);} .cab-lib-browse-link{width:fit-content;margin:0 0 8px auto;background:none;border:none;color:var(--acc2);font-size:11px;font-weight:600;cursor:pointer;padding:2px 2px;} .cab-lib-browse-link:hover{color:var(--acc);text-decoration:underline;} /* Cabinet-library tile — 2026-04-23 token refactor: was * background:rgba(31,31,31,0.55) (dark gray that didn't flip * in light mode, rendering as muddy gray on the new white page * background). Now routes through --pn so the tile blends * seamlessly on any theme — pure white panel on light mode, * near-black on the dark theme. * * .name: was color:var(--white) which is theme-specific. Route * through --txt for proper contrast in both light and dark. * .icn backdrop: dark-theme's (--pn, --bg) gradient worked * because both are near-black; in light mode --pn is white and * --bg is off-white, which reads as a barely-visible wash. Swap * to color-mix for a proper subtle fill on both themes. */ /* PR-CAB-LAYOUT: side-by-side icon + text. 38px square icon on the left, name + dims stacked vertically on the right. Fixes the previous "Lazy Susan" → "Lazy" truncation by giving the text column the full row width minus the icon. */ .cab-lib-item{display:flex;flex-direction:row;align-items:center;gap:var(--sp-3,12px);padding:0 var(--sp-3,12px);border:1px solid var(--bdr);border-radius:var(--radius-sm,6px);background:var(--pn);cursor:grab;transition:border-color var(--dur-panel) var(--ease-out),background var(--dur-panel) var(--ease-out),transform var(--dur-panel) var(--spring-snappy);position:relative;min-height:54px;} .cab-lib-item:focus-visible{outline:var(--focus-ring-w,2px) solid var(--acc);outline-offset:var(--focus-ring-offset,2px);} /* PR-CAB-STRIPE (2026-06-28): a category accent rail on the right edge so the cabinet TYPE is glanceable on a dusty screen (decorative — the type is also in the section header + name, so it never carries sole meaning). */ .cab-lib-item::before{content:"";position:absolute;right:5px;top:11px;bottom:11px;width:var(--stripe-w,3px);border-radius:var(--radius-xs,3px);background:var(--cab-cat,var(--acc-cabinet,#c19a6b));pointer-events:none;} /* PR-STUDIO-LIB-FAVS (2026-07-16): pin star, clear of the ::before category stripe (right:5px). Hidden until tile hover for UNpinned; pinned = always gold-visible. Mouse pattern — on touch (no hover) the pinned stars still show, but pinning is a desktop power move. */ .cab-lib-item .cab-fav{position:absolute;top:5px;right:11px;font-size:13px;line-height:1;cursor:pointer;color:var(--dim);opacity:0;transition:opacity 120ms ease,color 120ms ease,transform 90ms ease;z-index:2;user-select:none;} .cab-lib-item:hover .cab-fav,.cab-lib-item .cab-fav.on{opacity:1;} .cab-lib-item .cab-fav.on{color:var(--acc2);} .cab-lib-item .cab-fav:hover{transform:scale(1.2);} /* PR-STUDIO-P1B #6 (2026-07-16): frame the 3D canvas as a drop target while a palette card is being dragged. The ghost is the primary feedback; this is a quiet green frame so the operator knows the canvas will accept the drop. */ #bevy-canvas.cab-drop-active{outline:2px solid rgba(34,197,94,0.55);outline-offset:-2px;transition:outline 80ms ease;} .cab-lib-item[data-cat="Base"],.cab-lib-item[data-cat="Vanity"]{--cab-cat:var(--acc-cabinet,#c19a6b);} .cab-lib-item[data-cat="Wall"]{--cab-cat:#8fbc8f;} .cab-lib-item[data-cat="Tall"]{--cab-cat:var(--acc-sheet,#b8860b);} .cab-lib-item[data-cat="Appliance"]{--cab-cat:#9aa6b4;} /* PR-CAB-GAPBAR (2026-06-28): wall-run strip in the wall inspector — the cabinets on the active wall, proportionally sized + clickable, with the aggregate space-to-fill called out. Read-only; the filler edit stays on the per-cabinet inspector. */ .cab-run-wrap{margin:0 0 12px;} .cab-run-head{display:flex;justify-content:space-between;align-items:baseline;font-size:10px;color:var(--dim);margin-bottom:5px;text-transform:uppercase;letter-spacing:.06em;} .cab-run-rem{font-family:var(--ff-mono);font-variant-numeric:tabular-nums;font-weight:600;letter-spacing:0;text-transform:none;} .cab-run-rem.gap{color:var(--warn);} .cab-run-rem.over{color:var(--no);} .cab-run-rem.flush{color:var(--ok);} .cab-run-bar{position:relative;height:46px;border-radius:var(--radius-sm,6px);background:repeating-linear-gradient(90deg, color-mix(in srgb, var(--bdr) 22%, transparent) 0 1px, transparent 1px 12px), color-mix(in srgb, var(--bdr) 12%, var(--sf));border:1px solid var(--bdr);overflow:hidden;} .cab-run-chip{position:absolute;top:3px;bottom:3px;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:0 2px;border:1px solid var(--bdr-h);border-radius:var(--radius-xs,3px);background:var(--pn);color:var(--txt);cursor:pointer;overflow:hidden;transition:background var(--dur-fast,.12s),border-color var(--dur-fast,.12s);} .cab-run-chip:hover{background:var(--pn-h);border-color:var(--bdr-h);} .cab-run-chip.sel{border-color:var(--acc);background:color-mix(in srgb, var(--acc) 14%, var(--pn));} .cab-run-n{font-size:9px;color:var(--acc2);font-weight:700;line-height:1;} .cab-run-w{font-family:var(--ff-mono);font-size:11px;font-variant-numeric:tabular-nums;line-height:1;} .cab-lib-item:hover{border-color:var(--acc2);background:color-mix(in srgb, var(--acc) 8%, var(--pn));} .cab-lib-item:active{cursor:grabbing;} .cab-lib-item .icn{flex:0 0 44px;width:44px;height:44px;background:color-mix(in srgb, var(--bdr) 35%, var(--pn));border-radius:var(--radius-sm,6px);display:flex;align-items:center;justify-content:center;border:1px solid color-mix(in srgb, var(--bdr) 50%, transparent);} .cab-lib-item .icn svg{width:32px;height:32px;} .cab-lib-item .info{min-width:0;flex:1;display:flex;flex-direction:column;gap:1px;} .cab-lib-item .name{color:var(--txt);font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:-.005em;} /* Right-aligned tabular size chip — the WIDTH (or W×H) is the real per-SKU identifier, so a column of aligned sizes lets a section of look-alike rows scan like a table. Full W×H×D stays in the hover preview + properties. */ .cab-lib-item .cab-lib-size{flex:none;margin-left:8px;margin-right:13px;font-family:var(--ff-mono);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.01em;color:var(--dim);white-space:nowrap;} .cab-lib-item:hover .cab-lib-size{color:var(--txt);} /* PR-LIBRAIL-DEADCODE (2026-09-12): .cab-lib-preview hover-card styles deleted with their unreachable JS (app-jobdefaults.js). */ /* Shape filter chips — Straight / L / U / Corner row above the type chips PR-CAB-LAYOUT: same nowrap + horizontal-scroll fix as .lib-chips above. */ .lib-shape-chips{display:flex;gap:3px;margin-bottom:6px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;} .lib-shape-chips::-webkit-scrollbar{display:none;} /* PR-PICKER-PERFECT (2026-07-15): 36px min tap target (was ~26px, below the shop-floor gloved-hand floor) + legible 11px. */ .lib-shape-chip{flex:0 0 auto;white-space:nowrap;display:inline-flex;align-items:center;min-height:36px;background:var(--inp);border:1px solid var(--bdr);color:var(--dim);font-size:11px;font-weight:600;padding:6px 11px;border-radius:5px;cursor:pointer;text-transform:uppercase;letter-spacing:.3px;transition:color var(--dur-panel) var(--ease-out),border-color var(--dur-panel) var(--ease-out),background var(--dur-panel) var(--ease-out);} .lib-shape-chip:hover{border-color:var(--acc2);color:var(--white);} .lib-shape-chip.active{background:color-mix(in srgb, var(--acc2) 12%, transparent);border-color:var(--acc2);color:var(--acc2);} /* Skeleton loader for the cabinet library */ .cab-lib-skel{padding:6px;border:1px solid var(--bdr);border-radius:6px;background:var(--inp);} .cab-lib-skel .sk-icn{width:100%;height:46px;border-radius:4px;background:linear-gradient(90deg,var(--inp) 0%,var(--bdr) 50%,var(--inp) 100%);background-size:200% 100%;animation:skel-shimmer 1.4s ease-in-out infinite;margin-bottom:4px;} .cab-lib-skel .sk-bar{height:8px;border-radius:3px;background:linear-gradient(90deg,var(--inp) 0%,var(--bdr) 50%,var(--inp) 100%);background-size:200% 100%;animation:skel-shimmer 1.4s ease-in-out infinite;margin-top:3px;} .cab-lib-skel .sk-bar.short{width:60%;} /* Placed cabinet rows in left panel */ /* PR-PLACE-5 2026-04-25 (Feature 1 — shop-floor tablet ergonomics): min-height 48px so a gloved tap reliably hits the row. The `.sel` state gets a 3px amber left bar so the operator can spot the active cabinet without reading text — matches the cyan halo around the selected cabinet in the 3D view. */ #cab-items .li{padding:8px 8px;font-size:11px;cursor:pointer;border:1px solid transparent;border-left:3px solid transparent;border-radius:5px;margin-bottom:3px;display:flex;align-items:center;justify-content:space-between;min-height:48px;} #cab-items .li > div:first-child{flex:1;min-width:0;} #cab-items .li:hover{background:color-mix(in srgb, var(--acc2) 6%, transparent);} #cab-items .li.sel{background:color-mix(in srgb, var(--acc2) 12%, transparent);border-color:var(--acc2);border-left:3px solid var(--acc2);} #cab-items .li-t{font-size:11px;} #cab-items .li-m{font-size:10px;color:var(--dim);} /* PR-CAB-SIDEBAR-UX (2026-05-29) ─ per-row info density. Type chip + warning dot per cabinet-shop-ux-specialist audit. Strict token compliance per [[feedback_strict_color_tokens]]. */ #cab-items .li-chip{ display:inline-block;padding:2px 8px;margin-right:6px; border-radius:8px;font-size:11px;font-weight:600; letter-spacing:.04em;text-transform:uppercase; background:var(--pn);color:var(--dim); border:1px solid var(--bdr); } /* PR-PICKER-PERFECT (2026-07-15): the per-row edit/link/delete icon buttons had NO dedicated CSS — they fell through to the global button rule (~30px). Give them a 36px square tap zone inside the 48px row. */ #cab-items .li-act{ min-width:36px;min-height:36px;padding:0; display:inline-flex;align-items:center;justify-content:center; flex:0 0 auto;font-size:14px;line-height:1; } /* PR-PICKER-PERFECT (2026-07-15): a delete row marked pending-delete (first tap) reads clearly so the second tap confirms — no accidental gloved-hand deletes, no keyboard-only Ctrl+Z dependency. */ #cab-items .li-del.pending-del{ background:color-mix(in srgb, var(--no) 22%, transparent); border-color:var(--no);color:var(--white); } #cab-items .li-warn-dot{ display:inline-block;width:8px;height:8px;border-radius:50%; background:var(--no);margin-right:6px;flex:0 0 auto; box-shadow:0 0 4px var(--no); } /* PR-PICKER-PERFECT (2026-07-15): the "Browse all cabinets" overlay shipped with ZERO css — every cba-* / cab-browse-* class was undefined, so the full ~100-item catalog rendered as unstyled HTML with sub-30px buttons and no scroll container. Full styling: a scrollable 2-col card grid with 44px+ tap targets, shop-floor legible. */ .cab-browse{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;background:var(--pn);} .cab-browse.hidden{display:none;} .cab-browse-hdr{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px;border-bottom:1px solid var(--bdr);} .cab-browse-hdr h3{margin:0;font-size:15px;font-weight:700;} .cba-close{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;font-size:18px;background:var(--inp);border:1px solid var(--bdr);border-radius:6px;cursor:pointer;} .cab-browse-controls{padding:10px 12px;border-bottom:1px solid var(--bdr);display:flex;flex-direction:column;gap:8px;} .cba-filter-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center;} .cba-filter-label{font-size:11px;color:var(--dim);font-weight:600;min-width:52px;} .cba-open-btn{width:100%;min-height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;background:var(--inp);border:1px solid var(--bdr);border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;} .cba-open-btn:hover{border-color:var(--acc2);} .cba-grid{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:12px;align-content:start;} .cba-card{display:flex;flex-direction:column;gap:6px;min-height:96px;padding:10px;border:1px solid var(--bdr);border-radius:8px;background:var(--inp);} .cba-card:hover{border-color:var(--acc2);} .cba-thumb{width:100%;height:44px;display:flex;align-items:center;justify-content:center;font-size:22px;background:var(--pn);border-radius:5px;color:var(--dim);} .cba-name{font-size:12px;font-weight:600;line-height:1.2;} .cba-dims{font-size:11px;color:var(--dim);} .cba-badge{display:inline-block;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:1px 6px;border-radius:6px;background:color-mix(in srgb,var(--acc2) 14%,transparent);color:var(--acc2);} .cba-actions{display:flex;gap:6px;margin-top:auto;} .cba-place{flex:1;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:4px;background:var(--acc2);border:none;border-radius:6px;color:#0b0e14;font-size:12px;font-weight:700;cursor:pointer;} .cba-place:hover{filter:brightness(1.08);} .cba-info{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;background:var(--pn);border:1px solid var(--bdr);border-radius:6px;color:var(--dim);cursor:pointer;font-size:14px;} .cba-detail{font-size:11px;color:var(--dim);line-height:1.35;} .cba-detail-type{font-weight:600;} .cba-features{display:flex;flex-wrap:wrap;gap:4px;} .cba-empty{grid-column:1/-1;text-align:center;color:var(--dim);padding:40px 12px;font-size:13px;} .cab-browse-footer{padding:10px 12px;border-top:1px solid var(--bdr);display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;color:var(--dim);} /* PR-STUDIO-SIDEBAR-SCROLL (2026-07-17): the left pane stacked the Cabinet Library, Quick Add and Placed list in ONE scroll, so the 67-item library grew unbounded — you scrolled forever to browse, and ADDING a cabinet scroll-jumped the whole pane down to Placed ("drops me to placed, scroll up forever"). Give the Library grid and the Placed list their OWN bounded internal scroll so both stay reachable and a placed-row scrollIntoView stays inside the Placed box, and re-show a slim scrollbar on those two boxes (the pane hides all scrollbars by default via .cab-pane-body *). */ /* PR-EDITOR-LIB2 (2026-07-19) — SUPERSEDED by PR-EDITOR-LIB3 below, kept only for the overscroll-behavior history: LIB2 made .cab-pane-body the single scroller because an overflow:auto #cab-lib-items with `overscroll-behavior:contain` swallowed the wheel at its boundary. LIB3 reversed that: #cab-lib-items IS the single scroller again (overflow-y:auto in its base rule, slim scrollbar below) WITHOUT the overscroll trap. Stale-comment fix: PR-LIBRAIL-DEADCODE 2026-09-12. */ #cab-lib-items{padding-right:2px;} #cab-items{max-height:32vh;overflow-y:auto;overscroll-behavior:contain;padding-right:2px;} /* PR-EDITOR-LIB3 (2026-07-19): fixed filter header + a single scrolling tile list + @container-driven list<->grid keyed on the RESIZABLE pane width. The Library .pn owns the pane's leftover height as a flex column AND is the @container (container-type goes on the .pn — a container query styles the container's DESCENDANTS, not the container itself). Quick Add is a flex:none footer so the Fixtures palette stays reachable without stealing list height. */ #cab-lib-pn{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden;container:cablib / inline-size;} #cab-lib-pn .cab-lib-head{flex:0 0 auto;} /* cap the Quick Add / Fixtures footer so a short pane can't starve the tile list — it scrolls internally past 42% of the pane height. */ #cab-qa-pn{flex:0 0 auto;max-height:42%;overflow-y:auto;} /* #cab-lib-items is the single scroller — give IT the slim visible scrollbar (it was hidden by `.cab-pane-body *`) + a stable gutter so rows don't reflow. */ .cab-pane-body #cab-lib-items{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--bdr) 75%,transparent) transparent;scrollbar-gutter:stable;} .cab-pane-body #cab-lib-items::-webkit-scrollbar{display:block;width:8px;height:8px;} .cab-pane-body #cab-lib-items::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--bdr) 75%,transparent);border-radius:8px;} /* generated front-elevation thumbnail fills the icon box; currentColor line-art inherits the 2-theme palette + hover/selected states. */ .cab-lib-item .icn{color:var(--dim);} .cab-lib-item:hover .icn{color:var(--txt);} .cab-lib-item .icn .cab-thumb{width:100%;height:100%;display:block;} /* PR-CAB-LIB-LISTONLY (2026-07-29): the adaptive @container reflow into a 2-column picture-card grid was REMOVED per operator request. At the normal rail width it flipped every section into a grid where tall/many/long-named SKUs (Appliances especially) went ragged and looked like they collided — "see how it changes so drastically". The single-column LIST (base `.cab-lib-item` row + `#cab-lib-items` 1-col grid above) is now the layout at EVERY width, so every section reads the same clean way. If a 2-column grid is ever wanted again, reinstate an `@container cablib` block here with EQUAL-height cards (fixed card height, not align-items:start) to avoid the raggedness that caused this revert. */ /* PR-STUDIO-BROWSEALL-THUMB (2026-07-17): the Browse-All card thumb held an with NO width/height and no CSS size, so it defaulted to ~300px and the wood silhouettes overflowed across the tiles. Constrain the svg to the 44px thumb + clip. */ .cba-thumb{overflow:hidden;} .cba-thumb svg{width:auto;height:100%;max-width:100%;object-fit:contain;display:block;} /* PR-CAB-SIDEBAR-UX (2026-05-29) ─ left-pane collapse. Independent collapse from cab-expanded (which hides BOTH). Per [[feedback_strict_color_tokens]] no hex anywhere. */ .cab-editor-grid.cab-left-collapsed{grid-template-columns:0 1fr 252px;} .cab-editor-grid.cab-left-collapsed .cab-pane-left{ overflow:hidden;pointer-events:none;opacity:0;border:none; transition:opacity .14s ease; } @media (prefers-reduced-motion: reduce) { .cab-editor-grid.cab-left-collapsed .cab-pane-left{transition:none;} } #cab-left-toggle{padding:2px 8px;font-size:14px;} /* PR-CAB-LEFT-RAIL (2026-07-29): when the library is collapsed the pane itself goes to width:0 / opacity:0, so its own ‹ toggle is unreachable. This slim tab is pinned to the grid's left edge (grid is position:relative) and is the always-visible reopen affordance — no more hunting for the toolbar hamburger. Fullscreen keeps its own #cv-left-pill, so hide the tab there to avoid two reopen controls. */ .cab-left-reopen{display:none;position:absolute;left:0;top:50%;transform:translateY(-50%); z-index:7;flex-direction:column;align-items:center;gap:8px; padding:14px 5px;border:1px solid var(--bdr);border-left:none; border-radius:0 10px 10px 0;background:var(--pn);color:var(--txt); cursor:pointer;font-size:13px;font-weight:700;line-height:1; box-shadow:2px 0 12px rgb(var(--shadow-ink) / .30);} .cab-left-reopen:hover{background:var(--inp);color:var(--acc);} .cab-left-reopen .clr-label{writing-mode:vertical-rl;text-orientation:mixed;letter-spacing:.05em;font-size:11px;font-weight:600;} .cab-editor-grid.cab-left-collapsed .cab-left-reopen{display:flex;} .cab-editor-grid.cab-fullscreen.cab-left-collapsed .cab-left-reopen{display:none;} /* PR-CAB-PARAMS-SCROLL (2026-07-29): the right Parameters pane must scroll. The generic .cab-pane-body is overflow:hidden + display:flex — the LEFT pane delegates scrolling to its inner #cab-lib-items, but the RIGHT pane has no inner scroller, so on desktop the inspector's lower half (Mount & Position, Front Face, Inside the Cabinet, Advanced, Copy/Done) was clipped and could not be reached (operator: "i cant see the bottom or edit everything"). The ≤900px stacked layout already scrolls; this restores it at desktop widths too. Block layout so the stacked sections take natural height and the body scrolls; a visible thin scrollbar (overriding the pane's hidden-scrollbar rule) makes it obvious there's more below. renderCabParams already reads this element's scrollTop to preserve position across edits, so scrolling now works end-to-end. */ #cab-params-body{display:block;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--bdr) 75%,transparent) transparent;scrollbar-gutter:stable;} #cab-params-body::-webkit-scrollbar{display:block;width:8px;height:8px;} #cab-params-body::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--bdr) 75%,transparent);border-radius:8px;} /* Parameters panel form */ #cab-params-form .fg{margin-bottom:8px;} #cab-params-form .fg label{font-size:10px;} #cab-params-form .fr{gap:8px;margin-bottom:8px;} /* Responsive: collapse sidebars at narrower widths */ @media(max-width:1200px){.cab-editor-grid:not([style*="--cab-lw"]){--cab-lw:196px;--cab-rw:232px;}} @media(max-width:900px){.cab-editor-grid{grid-template-columns:1fr;grid-template-rows:auto 1fr auto;height:100%;min-height:0;}.cab-pane{max-height:240px;border-right:none;border-bottom:1px solid var(--bdr);}.cab-pane-right{border-left:none;border-top:1px solid var(--bdr);}.cab-viewer{min-height:220px;} /* PR-EDITOR-LIB3: on the short tablet pane, DON'T use the fixed-header flex (the Fixtures footer + header would starve the tile list); fall back to the whole pane scrolling as one region. */ .cab-pane-body{overflow-y:auto;display:block;min-height:auto;} #cab-lib-pn{flex:none;display:block;overflow:visible;} #cab-lib-pn .cab-lib-head{position:sticky;top:0;z-index:3;background:var(--bg);} #cab-lib-items{overflow:visible;min-height:auto;} /* PR-EDITOR-FLOAT2 (2026-07-19): the bar is a floating pill now, not the old docked strip (the quality picker / reports / save it used to carry moved into the top-right Settings menu). Keep it floating on narrow screens but let it WRAP + center so the slimmed content never clips under .cab-viewer{overflow:hidden}. Do NOT re-introduce position:sticky / opaque background / border-top — those fought the pill. */ .cab-view-bar{max-width:calc(100% - 16px);flex-wrap:wrap;justify-content:center;row-gap:4px;} } .add-door-bar .ad-spacer { flex: 1; min-width: var(--sp-3); } /* Primary CTA — last thing the operator touches before commit. Overrides the app-wide .ba base (rgba shadow on hover) with a token-based confident-green button. Larger, more presence than a generic .ba button deserves here; it's the shop-floor gate to committing $50 walnut. */ .add-door-bar .ad-go { min-height: 56px; min-width: 130px; /* trimmed from 160 to make room for D field */ padding: 0 var(--sp-4); font-family: var(--ff-ui); font-size: 14px; font-weight: var(--fw-bold); letter-spacing: 0.04em; flex: 0 0 auto; margin-left: auto; /* push CTA to right; spacer becomes optional */ border-radius: var(--radius-sm); border: 1.5px solid var(--acc); background: var(--acc); color: var(--acc-ink); cursor: pointer; margin-right: var(--sp-1); transition: filter var(--dur-chrome) var(--ease-out), transform var(--dur-chrome) var(--ease-out), box-shadow var(--dur-chrome) var(--ease-out); box-shadow: 0 3px 10px color-mix(in srgb, var(--acc) 30%, transparent); } .add-door-bar .ad-go:hover:not([data-compat-blocked="true"]):not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 4px 14px color-mix(in srgb, var(--acc) 40%, transparent); } .add-door-bar .ad-go:active:not([data-compat-blocked="true"]):not(:disabled) { transform: translateY(0); filter: brightness(0.95); } .add-door-bar .ad-go:focus-visible { outline: 2px solid color-mix(in srgb, var(--acc) 80%, transparent); outline-offset: 3px; } /* .ds-split media query removed 2026-04-22 — class unused. */ /* ═════════════════════════════════════════════════════════════════════ DASHBOARD WIDGETS — home-page modular grid. Sizes: small=4 cols, medium=6 cols, large=8 cols, wide=12 cols. Each widget is a self-contained panel with a header (drag handle + title + close button) and a content slot. Drag-and-drop reorder uses HTML5 drag API; layout persists to localStorage. ════════════════════════════════════════════════════════════════════ */ /* PR-CLEAN-2 / WIDGET-PURGE (2026-05-31): .dash-bar, .widget*, .add-widget-card, .widget-resize-handle, .edit-dock and the dock-pop keyframe deleted — customizable widget grid retired. .widget-empty kept below because filterGlobalSearch still uses it. */ .widget-empty{color:var(--dim);font-size:12px;font-style:italic;padding:8px 0;} /* ═════════════════════════════════════════════════════════════════════ DASHBOARD REFACTOR — Linear/Figma-grade chrome. Global search, active-tab indicator, glassmorphism hero overlays, hover quick-action bar, recent-work table styling, utility palette. ════════════════════════════════════════════════════════════════════ */ /* Global search bar in the header — ⌘K affordance */ .global-search{position:relative;display:flex;align-items:center;background:var(--inp);border:1px solid var(--bdr);border-radius:8px;padding:6px 10px 6px 12px;width:280px;transition:border-color var(--dur-chrome) var(--ease-out),box-shadow var(--dur-chrome) var(--ease-out),width var(--dur-standard) var(--ease-out);} .global-search:focus-within{border-color:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb, var(--acc) 12%, transparent);width:340px;} .global-search svg{width:14px;height:14px;color:var(--dim);flex-shrink:0;} .global-search input{flex:1;background:transparent;border:none;outline:none;color:var(--txt);font-size:13px;padding:2px 8px;font-family:inherit;} .global-search input::placeholder{color:var(--dim);} .global-search .kbd{display:inline-flex;align-items:center;gap:2px;background:var(--bg);color:var(--dim);font-size:10px;font-weight:600;padding:2px 6px;border-radius:4px;border:1px solid var(--bdr);font-family:'Inter',ui-monospace,monospace;letter-spacing:.5px;} @media(max-width:1100px){.global-search{width:200px;}.global-search:focus-within{width:280px;}} @media(max-width:800px){.global-search{display:none;}} /* Active tab — high-contrast accent + thicker indicator + bg tint */ .tab.on{color:var(--acc2)!important;border-bottom:3px solid var(--acc)!important;background:linear-gradient(to bottom,transparent 60%,color-mix(in srgb, var(--acc) 8%, transparent));font-weight:600;} /* Utility palette — header buttons get consistent square sizing + tooltip-ready hover. PR-AUDIT-CYCLE-4 (2026-05-12, ux F-1): bumped 36→44px to meet WCAG 2.5.5 (44×44 CSS px minimum target). Gloved shop-floor operators were mis-tapping the notification/sync icons. */ .util-btn{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;background:var(--inp);border:1px solid var(--bdr);border-radius:8px;color:var(--dim);cursor:pointer;transition:color var(--dur-chrome) var(--ease-out),border-color var(--dur-chrome) var(--ease-out),background var(--dur-chrome) var(--ease-out);position:relative;font-size:15px;} .util-btn:hover{color:var(--acc);border-color:var(--acc);background:var(--bg);} /* PR-HEADER-SETTINGS (2026-09-05): the bell's picture is 24px inside the unchanged 44px button; the gear beside it 22px. Pinned here so no skin's svg rule can shrink them back to a speck. */ #topbar-notif-btn .topbar-notif-icon{width:24px;height:24px;flex:0 0 auto;} #topbar-settings-btn > svg{width:22px;height:22px;flex:0 0 auto;} .util-btn[data-tooltip]:hover::after{content:attr(data-tooltip);position:absolute;top:calc(100% + 6px);right:0;background:var(--bg);color:var(--txt);padding:5px 9px;border-radius:6px;font-size:11px;font-weight:500;white-space:nowrap;border:1px solid var(--bdr);z-index:50;box-shadow:0 8px 24px rgb(var(--shadow-ink) / 0.4);pointer-events:none;} .util-btn .badge{position:absolute;top:-4px;right:-4px;background:var(--acc);color:var(--acc-ink);font-size:9px;font-weight:700;padding:1px 5px;border-radius:8px;line-height:1.2;} .util-btn .badge:empty,.util-btn .badge.zero{display:none;} /* PR-CLEAN-2 / WIDGET-PURGE (2026-05-31): .hero-card / .hero-quick / .qa-btn / .hero-badge deleted — only consumer was the WIDGET_DEFS render templates which are gone. */ /* Recent Work table — clean scannable list */ .recent-table{width:100%;border-collapse:collapse;font-size:13px;} .recent-table thead th{text-align:left;color:var(--dim);font-size:10px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;padding:8px 10px;border-bottom:1px solid var(--bdr);} .recent-table tbody tr{cursor:pointer;transition:background var(--dur-panel) var(--ease-out);} .recent-table tbody tr:hover{background:var(--inp);} .recent-table tbody td{padding:10px;border-bottom:1px solid var(--bdr);color:var(--txt);} .recent-table tbody tr:last-child td{border-bottom:none;} .recent-table .col-name{font-weight:500;color:var(--white);} .recent-table .col-client{color:var(--dim);font-size:12px;} .recent-table .col-when{color:var(--dim);font-size:12px;font-variant-numeric:tabular-nums;text-align:right;} .recent-table .col-open{width:28px;text-align:right;color:var(--dim);font-size:14px;} .recent-table tbody tr:hover .col-open{color:var(--acc);} .status-pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:10px;font-size:11px;font-weight:500;letter-spacing:.2px;} .status-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;} /* PR-UI-8 (2026-04-27): pill-pop keyframe (defined in tokens.css) fires once when JS toggles `.is-updated` on a state change. Initial render renders flat — no animation on page load. Reduced-motion users get instant change because --dur-quick is zeroed in the prefers-reduced-motion block of tokens.css. Future PR will add a `markPillUpdated(el)` helper that adds the class and auto-removes it on animationend; for now the rule is in place so any pill that gets `.is-updated` will animate correctly. Applies to both .status-pill and .hub-job-status-pill (the two pill conventions in the codebase). */ .status-pill.is-updated, .hub-job-status-pill.is-updated{ animation: pill-pop var(--dur-quick) var(--spring-snappy); } /* Pill rules use `var(--status-*, fallback)` so the four original themes keep their translucent rgba look; test theme overrides with solid AA-safe fills. */ .status-draft{background:var(--status-draft, rgba(170,170,170,0.12));color:var(--status-draft-ink, #AAAAAA);} .status-design{background:var(--status-scheduled, color-mix(in srgb, var(--acc) 12%, transparent));color:var(--status-scheduled-ink, #00E5C0);} .status-nesting{background:var(--status-progress, rgba(255,204,92,0.15));color:var(--status-progress-ink, #FFCC5C);} .status-completed{background:var(--status-complete, var(--lime));color:var(--status-complete-ink, var(--lime-ink));} .status-cancelled{background:var(--status-alert, rgba(255,77,77,0.12));color:var(--status-alert-ink, #FF4D4D);} /* PR-CLEAN-2 / WIDGET-PURGE (2026-05-31): .shop-intel deleted — only consumer was the deleted renderDashBar(). */ /* Global search modal */ /* PR-UI-12-lite (2026-04-27): bring the command-palette modal to Apple-Pro spec (master prompt §10.10): backdrop blur strengthened (4px -> 12px) for the floating-glass feel; panel radius + shadow + entrance animation now reference design tokens instead of hardcoded values. Reduced-motion users get instant appearance because --dur-standard zeroes out. */ .gs-modal{position:fixed;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:300;display:flex;align-items:flex-start;justify-content:center;padding-top:120px;} .gs-modal.hidden{display:none;} .gs-modal .gs-panel{width:600px;max-width:90vw;background:var(--sf);border:1px solid var(--bdr);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-modal);animation:gs-pop var(--dur-standard) var(--spring-snappy);} @keyframes gs-pop{0%{transform:translateY(-20px) scale(.96);opacity:0;}100%{transform:translateY(0) scale(1);opacity:1;}} .gs-modal .gs-input{width:100%;background:var(--sf);border:none;border-bottom:1px solid var(--bdr);padding:18px 22px;color:var(--txt);font-size:16px;font-family:inherit;outline:none;} .gs-modal .gs-input::placeholder{color:var(--dim);} .gs-modal .gs-results{max-height:50vh;overflow-y:auto;padding:8px;} .gs-modal .gs-result{padding:10px 14px;border-radius:8px;cursor:pointer;display:flex;align-items:center;gap:12px;} .gs-modal .gs-result:hover,.gs-modal .gs-result.sel{background:var(--inp);} .gs-modal .gs-result .gs-icon{width:32px;height:32px;border-radius:8px;background:var(--inp);display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--acc);flex-shrink:0;} .gs-modal .gs-result .gs-text{flex:1;min-width:0;} .gs-modal .gs-result .gs-text .gs-title{color:var(--white);font-weight:500;font-size:13px;} .gs-modal .gs-result .gs-text .gs-sub{color:var(--dim);font-size:11px;} .gs-modal .gs-foot{padding:10px 16px;border-top:1px solid var(--bdr);color:var(--dim);font-size:11px;display:flex;justify-content:space-between;} .gs-modal .gs-foot .kbd{background:var(--bg);color:var(--dim);font-size:10px;font-weight:600;padding:2px 6px;border-radius:4px;border:1px solid var(--bdr);margin:0 2px;} /* ═══════════════════════════════════════════════════════════════════ VALIDATION GATE — Compliance UX (PR-VAL-MODAL-A, 2026-05-02). Inline blocker panel shown when /cutlist or /drawings returns 422. Pattern 3 (UX agent pick): canvas stays visible behind the panel. Severity uses redundant signals (badge text + border + color) for color-blind safety + sunlight contrast on shop-floor tablets. Compliance mode (AWI 0641 §1.4 paraphrased — no override) renders with the override section omitted; Simple mode renders the reason field + Override button. ═══════════════════════════════════════════════════════════════════ */ .vgate-panel{background:var(--pn);border:2px solid var(--no);border-radius:10px;padding:14px 18px;margin:0 0 12px 0;box-shadow:0 12px 32px rgb(var(--shadow-ink) / 0.35);} .vgate-panel.vgate-soft{border-color:var(--warn);} .vgate-panel .vgate-h{font-size:15px;font-weight:800;color:var(--no);margin:0 0 4px 0;display:flex;align-items:center;gap:8px;} .vgate-panel.vgate-soft .vgate-h{color:var(--warn);} .vgate-panel .vgate-sub{font-size:12px;color:var(--dim);margin:0 0 12px 0;line-height:1.45;} .vgate-panel .vgate-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;max-height:50vh;overflow-y:auto;} .vgate-panel .vgate-row{padding:10px 12px;background:var(--bg);border-left:6px solid var(--warn);border-radius:0 6px 6px 0;display:flex;flex-direction:column;gap:4px;} .vgate-panel .vgate-row.vgate-row-hard{border-left-color:var(--no);} .vgate-panel .vgate-row .vgate-row-h{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap;} .vgate-panel .vgate-row .vgate-badge{display:inline-block;font-size:10px;font-weight:800;letter-spacing:0.5px;padding:3px 7px;border-radius:4px;color:#fff;background:var(--warn);min-width:60px;text-align:center;flex-shrink:0;} .vgate-panel .vgate-row.vgate-row-hard .vgate-badge{background:var(--no);} .vgate-panel .vgate-row .vgate-msg{font-size:13px;color:var(--txt);line-height:1.45;flex:1;min-width:200px;} /* PR-VGATE-HARDENING (2026-05-02): UX agent flagged Fix-link tap area was ~20px tall — below the 44px Apple HIG floor. Padded to ~32px tap area while preserving inline rendering after the message line. */ .vgate-panel .vgate-row .vgate-fix{display:inline-block;font-size:12px;color:var(--acc);margin-top:2px;padding:8px 0;min-height:32px;line-height:1.4;} .vgate-panel .vgate-row .vgate-fix:hover{text-decoration:underline;} .vgate-panel .vgate-row .vgate-code{font-size:10px;font-family:ui-monospace,monospace;color:var(--dim);} .vgate-panel .vgate-foot{margin-top:14px;padding-top:12px;border-top:1px solid var(--bdr);} .vgate-panel .vgate-comp-note{padding:10px 12px;background:color-mix(in srgb, var(--no) 8%, var(--sf));border-left:4px solid var(--no);border-radius:0 6px 6px 0;font-size:12px;line-height:1.5;color:var(--txt);} .vgate-panel .vgate-comp-note strong{color:var(--no);} .vgate-panel .vgate-override{display:flex;flex-direction:column;gap:8px;} .vgate-panel .vgate-override-warn{font-size:11px;color:var(--warn);font-weight:600;line-height:1.45;} .vgate-panel .vgate-override-reason{width:100%;min-height:60px;background:var(--inp,var(--bg));border:1px solid var(--bdr);border-radius:6px;padding:8px 10px;color:var(--txt);font-size:13px;font-family:inherit;resize:vertical;box-sizing:border-box;} .vgate-panel .vgate-override-reason:focus{outline:none;border-color:var(--warn);} .vgate-panel .vgate-actions{display:flex;gap:8px;flex-wrap:wrap;} .vgate-panel .vgate-btn{min-height:48px;padding:10px 18px;border-radius:8px;border:1px solid var(--bdr);background:var(--sf);color:var(--txt);font-size:13px;font-weight:600;cursor:pointer;} .vgate-panel .vgate-btn:hover:not(:disabled){background:var(--inp,var(--bg));} .vgate-panel .vgate-btn:disabled{opacity:0.5;cursor:not-allowed;} .vgate-panel .vgate-btn-override{background:var(--warn);color:#fff;border-color:var(--warn);} .vgate-panel .vgate-btn-override:hover:not(:disabled){filter:brightness(1.1);} /* Modal mode — fixed overlay when caller has no host element */ .vgate-modal{position:fixed;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);z-index:310;display:flex;align-items:flex-start;justify-content:center;padding:64px 16px 16px;overflow-y:auto;} .vgate-modal .vgate-panel{width:560px;max-width:100%;} /* PR-AWI-PRUNE-9-02: .aws-mode-badge rules deleted with the topbar badge markup (see index.html topbar comment). */ /* ═══════════════════════════════════════════════════════════════════ DESIGN ENGINE COCKPIT — 3D editor polish. Toast notifications, library filter chips, grouped toolbar, axis gizmo, gradient viewport, shortcuts overlay, glow selection. ═══════════════════════════════════════════════════════════════════ */ /* Toast stack — bottom-right, auto-dismissing notification cards */ .toast-stack{position:fixed;bottom:24px;right:24px;z-index:400;display:flex;flex-direction:column;gap:8px;align-items:flex-end;pointer-events:none;} /* Toast bg/fg are FIXED (not themed) so messages stay legible no matter what Color Theme is active. Previously they used var(--txt) / var(--sf), which could collide with a light palette and render white-on-white. */ /* PR-WAVE-CLEANUP-87: toast animation duration + curve now via tokens (--dur-standard + --spring-snappy) instead of hardcoded .22s. */ /* PR-UI-4 (2026-04-27): the FIXED hex values above are now named tokens in tokens.css (--toast-bg / --toast-bdr / --toast-fg). Same physical colors, but the contract is greppable. The "no color tokens" rule in tokens.css gets an explicit exception comment block documenting why these three specifically must stay theme-stable. */ .toast{pointer-events:auto;background:var(--toast-bg);border:1px solid var(--toast-bdr);border-left:3px solid var(--acc);color:var(--toast-fg);padding:10px 14px;border-radius:10px;font-size:12px;font-weight:500;box-shadow:0 12px 32px rgb(var(--shadow-ink) / 0.55);min-width:240px;max-width:380px;display:flex;align-items:flex-start;gap:10px;animation:toast-in var(--dur-standard) var(--spring-snappy);} .toast .ti{color:var(--toast-fg);} /* PR-PLACEFIX-P0 (2026-09-15): the toast text WAS class "tc" — the tab-content class the shell hides globally (`.tc{display:none}` at :522), so every toast showed a mute icon and placement refusals looked like silent snap-backs. Renamed toast-msg in toast() (app-jobdefaults.js) + the library undo toast; keep the legacy `.toast .tc` selectors one release as a belt for any stragglers still minting the old markup. */ .toast .toast-msg{color:var(--toast-fg);} .toast .tc{color:var(--toast-fg);display:block;} .toast.toast-error{border-left-color:var(--no);} .toast.toast-warn{border-left-color:var(--warn);} .toast.toast-ok{border-left-color:var(--ok);} .toast .ti{font-size:14px;line-height:1.2;flex-shrink:0;} .toast .toast-msg{flex:1;line-height:1.4;} .toast .tc{flex:1;line-height:1.4;} .toast .tx{background:transparent;border:none;color:var(--dim);cursor:pointer;font-size:14px;line-height:1;padding:0;flex-shrink:0;} .toast .tx:hover{color:var(--txt);} @keyframes toast-in{0%{transform:translateX(20px) scale(.95);opacity:0;}100%{transform:translateX(0) scale(1);opacity:1;}} .toast.toast-out{animation:toast-out .18s ease forwards;} @keyframes toast-out{0%{transform:translateX(0) scale(1);opacity:1;}100%{transform:translateX(20px) scale(.95);opacity:0;}} /* Library type filter chips — Base / Wall / Tall / Hardware quick filters PR-CAB-LAYOUT: was `flex:1; min-width:0; flex-wrap:wrap` which crushed every chip to ~40px in the 218px rail. "Wall" / "Tall" / "Base" then wrapped CHARACTER-BY-CHARACTER inside the flex child, producing the W-A-L-L vertical stack the user reported. New rule: chips own their content width (`flex:0 0 auto` + `white-space:nowrap`), and the container becomes a horizontal scroll rail when overall width is tight (touch-swipe friendly on tablet). */ .lib-chips{display:flex;gap:4px;margin-bottom:8px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px;} .lib-chips::-webkit-scrollbar{display:none;} /* PR-RENDER-DAY1-POLISH (2026-05-08): WCAG 2.5.5 — bumped min-height 28→44 + padding 5/10 → 12/14. Library category chips are tapped constantly; sub-44px floor was failing gloved-hand operators. Font/visual weight unchanged. */ .lib-chip{flex:0 0 auto;white-space:nowrap;background:var(--inp);border:1px solid var(--bdr);color:var(--dim);font-size:10px;font-weight:600;padding:12px 14px;border-radius:6px;cursor:pointer;text-transform:uppercase;letter-spacing:.4px;transition:color var(--dur-panel) var(--ease-out),border-color var(--dur-panel) var(--ease-out),background var(--dur-panel) var(--ease-out);display:inline-flex;align-items:center;justify-content:center;gap:3px;min-height:44px;} .lib-chip svg{width:11px;height:11px;flex-shrink:0;} .lib-chip:hover{border-color:var(--acc2);color:var(--white);} .lib-chip.active{background:color-mix(in srgb, var(--acc2) 12%, transparent);border-color:var(--acc2);color:var(--acc2);} /* PR-EDITOR-LIBSPACE (2026-07-24): the two library filter rows (type + shape) were ~44px + ~36px tall and, with the always-visible Fixtures palette below, squeezed the tile list to a ~100px sliver — operator "cant see what cabinets im selecting to grab". Scope a COMPACT height to the library's OWN chips only; the Browse-all panel keeps the roomy WCAG chips. ~30px rows + tighter margins reclaim ~55px for the list. */ /* Touch/pen pick-up state (long-press to drag onto the 3D view). */ .cab-lib-item--dragging{opacity:.5;border-color:var(--acc2)!important;background:color-mix(in srgb,var(--acc2) 14%,var(--pn))!important;transform:scale(.97);transition:transform .1s ease,opacity .1s ease;} /* PR-LIBRAIL-DEADCODE (2026-09-12): #cab-lib-chips / #cab-lib-shape-chips rules deleted — those elements were replaced by to display:block so the overflow-x:auto takes effect — the internal rows/cells keep their table-row / table-cell defaults so columns stay aligned. */ @media (max-width: 1023px){ .lib-table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; border-radius:10px; } /* Sticky thead doesn't survive display:block on the table, drop it. */ .lib-table thead th{ position:static; } } @media (max-width: 640px){ .lib-table tbody td{ padding:8px 10px; font-size:12px; } .lib-table thead th{ font-size:9px; padding:8px; } .lib-table .lib-thumb, .lib-table .lib-thumb-swatch{ width:28px; height:28px; } .lib-table .lib-thumb svg{ width:18px; height:18px; } .lib-table .lib-cell-thumb{ width:38px; } } /* ═══════════════════════════════════════════════════════════════════ PRINT-READY CUTLIST — looks like a physical sheet of paper. Light bg, dark text, serif body, QR pinned top-right. ═══════════════════════════════════════════════════════════════════ */ .cutlist-paper{background:#FFFFFF;color:#111;border-radius:8px;padding:28px 36px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;line-height:1.55;box-shadow:0 12px 36px rgb(var(--shadow-ink) / 0.55);position:relative;max-width:none;} .cutlist-paper::before{content:"";position:absolute;inset:0;border-radius:8px;pointer-events:none;border:1px solid rgba(0,0,0,0.08);} .cutlist-paper .cl-head{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:2px solid #111;padding-bottom:12px;margin-bottom:14px;} .cutlist-paper .cl-head .cl-title{font-size:18px;font-weight:700;color:#111;margin:0 0 2px;} .cutlist-paper .cl-head .cl-meta{font-size:11px;color:#555;line-height:1.4;} .cutlist-paper .cl-head .cl-qr{width:88px;height:88px;background:#fff;border:1px solid #ddd;border-radius:4px;display:flex;align-items:center;justify-content:center;flex-shrink:0;} .cutlist-paper .cl-head .cl-qr img{width:84px;height:84px;display:block;} /* 2026-04-23: pre-wrap → pre + horizontal scroll (same fix as .cutlist-out above). Monospace columns must stay aligned; wrapping at container width shatters the 80-char layout. */ .cutlist-paper pre,.cutlist-paper .cl-body{font-family:'Courier New',Courier,monospace;font-size:11px;color:#111;line-height:1.6;white-space:pre;margin:0;overflow-x:auto;} .cutlist-paper table{width:100%;border-collapse:collapse;font-size:11px;color:#111;margin-top:8px;} .cutlist-paper th{text-align:left;border-bottom:1px solid #555;padding:5px 8px;text-transform:uppercase;font-size:10px;letter-spacing:.4px;color:#222;} .cutlist-paper td{border-bottom:1px solid #eee;padding:4px 8px;} .cutlist-paper .cl-foot{margin-top:18px;padding-top:10px;border-top:1px solid #ccc;font-size:10px;color:#666;display:flex;justify-content:space-between;} /* ═══════════════════════════════════════════════════════════════════ PRODUCTION PROGRESS BAR — sticky on door order edit view. Draft → Quote → In Production → Shipped. ═══════════════════════════════════════════════════════════════════ */ .prod-progress{display:flex;align-items:center;gap:0;background:var(--pn);border:1px solid var(--bdr);border-radius:10px;padding:10px 14px;margin-bottom:14px;position:sticky;top:0;z-index:5;backdrop-filter:blur(10px);background:rgba(20,20,20,0.85);} .prod-step{display:flex;align-items:center;gap:8px;color:var(--dim);font-size:12px;font-weight:500;flex-shrink:0;} .prod-step .pd-dot{width:22px;height:22px;border-radius:50%;background:var(--inp);border:1px solid var(--bdr);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--dim);transition:background var(--dur-chrome) var(--ease-out),color var(--dur-chrome) var(--ease-out),border-color var(--dur-chrome) var(--ease-out);} .prod-step.done{color:var(--acc);} .prod-step.done .pd-dot{background:var(--acc);color:var(--acc-ink);border-color:var(--acc);} .prod-step.current{color:var(--white);} .prod-step.current .pd-dot{background:var(--acc2);color:var(--acc-ink);border-color:var(--acc2);box-shadow:0 0 0 4px color-mix(in srgb, var(--acc) 18%, transparent);} .prod-line{flex:1;height:2px;background:var(--bdr);margin:0 10px;border-radius:1px;} .prod-line.done{background:var(--acc);} /* PR-CLEAN-2 / WIDGET-PURGE (2026-05-31): .studio-pill + .widget:hover .studio-pill + .widget-grid responsive media query deleted — only consumer was the deleted WIDGET_DEFS templates. */ ::-webkit-scrollbar{width:6px;}::-webkit-scrollbar-track{background:var(--bg);}::-webkit-scrollbar-thumb{background:var(--bdr);border-radius:3px;}::-webkit-scrollbar-thumb:hover{background:var(--dim);} @media(max-width:900px){.drawer{width:100%;}} /* ═══════════════════════════════════════════════════════════════════ COMPATIBILITY MATRIX — cell-level verdict classes. Applied by door-order-compatibility.js cellClass(). PR-8b2 (2026-04-22): defined alongside the JS that uses them. Contrast verified at WCAG AA 4.5:1 on all four themes. ───────────────────────────────────────────────────────────────── .compat-ok : allowed, no warnings — neutral, border only .compat-warn : allowed with caveats — amber tint + border + icon .compat-error : not allowed — red tint, reduced opacity, no-entry cursor. The 4px left border (vs 3px on ok/warn) gives an extra visual weight that matches the severity jump. Content opacity 0.55 signals the cell is disabled without hiding it entirely so operators can still read which combination tripped. ═══════════════════════════════════════════════════════════════════ */ .compat-ok{ border-left:3px solid var(--ok); } .compat-warn{ background:rgba(251,191,36,0.12); border-left:3px solid var(--warn); } /* Inline SVG warning triangle — 16x16 px, rendered via CSS background-image so no extra DOM nodes are needed. The triangle path is encoded as a data URI safe for CSS. */ .compat-warn::after{ content:""; display:inline-block; width:16px; height:16px; margin-left:4px; vertical-align:middle; flex-shrink:0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8 2L14.5 13.5H1.5L8 2Z' stroke='%23fbbf24' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cline x1='8' y1='6' x2='8' y2='9.5' stroke='%23fbbf24' stroke-width='1.4' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.5' r='0.7' fill='%23fbbf24'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-size:16px 16px; background-position:center; } .compat-error{ background:rgba(248,113,113,0.14); border-left:4px solid var(--no); cursor:not-allowed; } .compat-error > *{ opacity:0.55; } /* Light themes (walnut / shop) use darker --warn values (#E6A700, #d97706) that already exceed 4.5:1 against their white/light backgrounds. No override needed: the variable resolves to the correct per-theme value. */ /* PR-8b2: Inline compat verdict strip above the Add Door button row. 48px tall, full width, 4px left border that tracks the verdict color. Uses existing design tokens (--ok / --warn / --no) — no new colors. Font-weight 600 so it reads on a dusty tablet in shop lighting. Motion rule (Phase I, math-guardian gate 12): NO transition on the verdict strip. The border-color is the verdict signal — it must SNAP from green→amber→red as the operator changes parameters. A 150ms fade would make a hard-block look like an intermediate state for a moment, which is exactly the "silent-wrong" failure mode shop operators reported in the 2026-04-21 DO-NOT-COMPUTE audit. Dimensions, prices, and verdicts snap — no exceptions. */ .compat-strip { min-height: 48px; width: 100%; box-sizing: border-box; padding: var(--sp-3) var(--sp-4); font-family: var(--ff-ui); font-weight: var(--fw-semibold); font-size: 13px; line-height: 1.4; border-radius: var(--radius-sm); margin-bottom: var(--sp-2); border-left: 4px solid transparent; display: flex; align-items: center; gap: var(--sp-3); /* NO transition — verdicts snap. Do not add back. */ } /* Status icon — 24×24 circular badge rendered by a CSS ::before pseudo so the JS payload stays simple (it just sets the class and writes text into the strip). The icon is drawn with a themed SVG data-URI; color flips with the strip variant. */ .compat-strip::before { content: ""; display: inline-block; width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; background-color: currentColor; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3C/svg%3E"); background-position: center; background-repeat: no-repeat; background-size: 14px 14px; } .compat-strip.compat-ok { background: color-mix(in srgb, var(--ok) 10%, transparent); border-left-color: var(--ok); color: var(--ok); } .compat-strip.compat-ok::before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); } .compat-strip.compat-warn { background: color-mix(in srgb, var(--warn) 14%, transparent); border-left-color: var(--warn); color: var(--warn); } .compat-strip.compat-warn::before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3C/svg%3E"); } .compat-strip.compat-error { background: color-mix(in srgb, var(--no) 14%, transparent); border-left-color: var(--no); color: var(--no); } .compat-strip.compat-error::before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E"); } /* Disabled Add Door button when compat blocked (compat-error verdict). opacity + cursor make the block state unambiguous without hiding the button — operator can still read the label and understand what to fix. */ .ad-go[data-compat-blocked="true"], .ad-go:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; } /* Cluster E — Reveal Preset tile picker active state. color-mix() with transparent gives a tinted highlight that works in all 4 themes without hard-coding a hex. */ .rvl-preset-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-2); } /* Reveal preset tiles (Bundle 3 — stile/rail section). Extracted from per-button inline styles so the count lands under audit Rule A baseline. Monospace face for the fractional value; accent-tinted when active. Same chrome-transition rule: tile surface animates, the fraction value does not (it's snapping from the underlying number input). */ .rvl-preset { min-width: 56px; min-height: 44px; padding: 0 var(--sp-3); font-family: var(--ff-mono); font-size: 12px; font-weight: var(--fw-semibold); letter-spacing: 0.02em; border: 1.5px solid var(--bdr); border-radius: var(--radius-sm); background: linear-gradient(180deg, color-mix(in srgb, var(--inp) 92%, var(--bg)) 0%, var(--inp) 100%); color: var(--txt); cursor: pointer; transition: background var(--dur-chrome) var(--ease-out), border-color var(--dur-chrome) var(--ease-out), box-shadow var(--dur-chrome) var(--ease-out), transform var(--dur-chrome) var(--ease-out); box-shadow: 0 1px 0 color-mix(in srgb, var(--bg) 50%, transparent) inset; } .rvl-preset:hover:not(.rvl-preset-active) { border-color: color-mix(in srgb, var(--acc) 70%, var(--bdr)); background: color-mix(in srgb, var(--acc) 6%, var(--inp)); transform: translateY(-1px); } .rvl-preset:focus-visible { outline: 2px solid color-mix(in srgb, var(--acc) 70%, transparent); outline-offset: 2px; } .rvl-preset-active { background: color-mix(in srgb, var(--acc2) 18%, var(--inp)) !important; border-color: var(--acc2) !important; color: var(--txt) !important; font-weight: var(--fw-bold); box-shadow: 0 0 0 1px var(--acc2) inset, 0 3px 10px color-mix(in srgb, var(--acc2) 25%, transparent) !important; } /* The "Custom" button is a textual verb, not a fraction value — keep it in the UI font, not mono. */ .rvl-preset-custom { font-family: var(--ff-ui); letter-spacing: 0.03em; } /* ─── Door Studio form controls ────────────────────────────── Scoped to .ds-bundle so these polished styles don't affect other forms in the app (which still use their own patterns). Addresses sentinel audit Rule C (blueprint requires ≥48px on select min-height) for the selects that live inside bundles. */ .ds-bundle .fg { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; } .ds-bundle .fg label { display: flex; align-items: center; gap: var(--sp-1); color: var(--dim); font-family: var(--ff-ui); font-size: 10.5px; font-weight: var(--fw-semibold); letter-spacing: 0.08em; text-transform: uppercase; margin: 0; } .ds-bundle .fg .lib-src { font-size: 9.5px; font-weight: var(--fw-regular); letter-spacing: 0.02em; text-transform: none; color: color-mix(in srgb, var(--dim) 80%, transparent); margin-left: auto; opacity: 0.85; } .ds-bundle .fg select, .ds-bundle .fg input[type="text"], .ds-bundle .fg input[type="number"], .ds-bundle .fg input:not([type]) { min-height: 48px; padding: 0 var(--sp-3); background: var(--bg); border: 1.5px solid var(--bdr); border-radius: var(--radius-sm); color: var(--txt); font-family: var(--ff-ui); font-size: 14px; font-weight: var(--fw-medium); letter-spacing: 0.01em; cursor: pointer; transition: border-color var(--dur-chrome) var(--ease-out), background var(--dur-chrome) var(--ease-out), box-shadow var(--dur-chrome) var(--ease-out); width: 100%; } .ds-bundle .fg select:hover:not(:disabled), .ds-bundle .fg input:hover:not(:disabled):not(:focus) { border-color: color-mix(in srgb, var(--acc) 50%, var(--bdr)); background: color-mix(in srgb, var(--acc) 3%, var(--bg)); } .ds-bundle .fg select:focus, .ds-bundle .fg input:focus { outline: none; border-color: var(--acc); background: color-mix(in srgb, var(--acc) 5%, var(--bg)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 20%, transparent); } /* Custom dropdown arrow on selects — the default browser arrow is inconsistent across platforms. Matches the arrow used by .std-field select in Shop Standards for visual consistency. */ .ds-bundle .fg select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23707070' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--sp-3) center; padding-right: var(--sp-7); } /* The form-row .fr grid inside bundles — gap between field stacks */ .ds-bundle .fr { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-3); } /* Live fraction-preview under stile/rail width inputs. The operator types "3 1/2" and sees the canonical form immediately. A trailing inch mark (″) anchors the eye; red on invalid input (unparseable / negative / zero) catches typos before Add fires. 11px min-height reserves the row so the form doesn't jump when a preview appears. aria-live="polite" on each preview lets screen readers announce the resolved value without interrupting typing. */ /* Full .sr-preview rule set (merged into the sr-card rule block above at line ~647 for scope consistency, 2026-04-22). This rule adds the dim-baseline + err variant only. */ .sr-preview { color: var(--dim); min-height: 14px; margin-top: 2px; font-weight: 500; line-height: 1.1; } .sr-preview-err { color: var(--warn); font-weight: 600; }/* ============================================================ Phase I.5 -- Door Studio Template B + 5-Bundle layout All values use design tokens -- no magic px, no hex colors. ============================================================ */ /* PR-DS-WIZARD-CLOSE (2026-08-01): the ✕ that collapses the wizard back to the order list. Pushed to the far right of the step bar; opaque bg so it lived at the right end of the step bar until PR-ONE-PANEL (2026-08-28) removed that bar; it is now the panel header's own trailing control. */ .ds-bundle-close { margin-left: auto; flex-shrink: 0; position: relative; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--bdr); border-radius: var(--radius-sm); background: var(--sf); color: var(--dim); cursor: pointer; font-size: 14px; line-height: 1; transition: color .12s ease, border-color .12s ease, background .12s ease; } .ds-bundle-close:hover { color: var(--no); border-color: var(--no); background: color-mix(in srgb, var(--no) 8%, var(--sf)); } .ds-bundle-close:focus-visible { outline: 2px solid color-mix(in srgb, var(--acc) 70%, transparent); outline-offset: 2px; } /* PR-DS-JOBINFO-BAR (2026-08-01): the "Edit job info" button + the little inline bar it opens (Customer + Job name). Sits under the order header. */ .do-jobinfo-wrap { margin: 8px 0 0; } .do-jobinfo-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: transparent; border: 1px solid var(--bdr); border-radius: var(--radius-sm); color: var(--dim); font-size: 12px; font-weight: 600; cursor: pointer; min-height: 34px; transition: color .12s ease, border-color .12s ease, background .12s ease; } .do-jobinfo-btn:hover { color: var(--acc); border-color: color-mix(in srgb, var(--acc) 60%, var(--bdr)); background: color-mix(in srgb, var(--acc) 6%, transparent); } .do-jobinfo-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-4); margin-top: var(--sp-3); padding: var(--sp-4); background: var(--sf); border: 1px solid var(--bdr); border-radius: var(--radius-md); box-shadow: var(--shadow-card); } .do-jobinfo-bar[hidden] { display: none; } .do-jobinfo-field { display: flex; flex-direction: column; gap: 4px; flex: 1 1 220px; min-width: 180px; } .do-jobinfo-field label { font-size: 11px; font-weight: 600; color: var(--dim); text-transform: uppercase; letter-spacing: .04em; } .do-jobinfo-field input { height: 40px; padding: 0 12px; background: var(--inp); border: 1px solid var(--bdr); border-radius: var(--radius-sm); color: var(--txt); font-size: 14px; } .do-jobinfo-field input:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 2px color-mix(in srgb, var(--acc) 25%, transparent); } .do-jobinfo-actions { display: flex; gap: var(--sp-2); flex: 0 0 auto; } .do-jobinfo-actions button { height: 40px; padding: 0 16px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 700; cursor: pointer; border: 1px solid var(--bdr); } .do-jobinfo-cancel { background: transparent; color: var(--txt); } .do-jobinfo-cancel:hover { border-color: var(--dim); } .do-jobinfo-save { background: var(--acc); color: #fff; border-color: var(--acc); } .do-jobinfo-save:hover { filter: brightness(1.07); }/* Connector line — single horizontal rule behind the buttons that the step circles sit on top of. `::before` (NOT `::after`) because a pseudo-element's stacking position depends on DOM insertion order among its siblings: `::before` paints as the FIRST child (below later flex children), while `::after` paints as the LAST child (above them). The pre-2026- 04-23 version used `::after` and the rail painted ON TOP of the step labels, making them look like they had a strike- through. Fix: swap to `::before`. Keeps the "one continuous rail" behaviour without per-button segmentation. *//* Step circle — 28px so it dominates the connector line underneath *//* Swap number for checkmark on completed steps */ /* Required-field gate — applied by dsBundleStepRequiredOK in door-studio.js when the operator clicks Next with an empty *-labeled field. Cleared on the next `input`/`change` event via the delegated #pg-door listener. Hardcoded red (matches dfs-close visibility rationale) so any theme renders an obvious "fix me" cue. */ .field-required-empty { border: 2px solid #dc2626 !important; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18) !important; outline: none; } /* Template B split -- param panel left, viewport right */ .ds-template-b { display: flex; flex: 1; /* PR-DS-PREVIEW-STICKY (2026-08-01): was `overflow: hidden`, which made this a sticky-containing block and trapped the preview's position:sticky here instead of letting it stick to the page scroller (.scroll). The columns are content-height (the page scrolls, not the columns), so nothing overflowed to clip — making this `visible` is a visual no-op that lets the preview stick to the real scroll container. */ overflow: visible; min-height: 0; /* PR-DOOR-PREVIEW-BREATHE (2026-08-01): the two columns used to butt against a bare 1px divider (lifted from the cabinet editor) — too cramped. A real gutter + a right-edge gap lets the form (left) and the preview (right) read as two distinct panels instead of one squished block. */ gap: var(--sp-6); padding-right: var(--sp-5); } /* Param panel / viewport split (2026-04-22 rebalanced): - Param panel takes 56% of the Template-B row (min 480px) so the Add Piece bar with 4 numeric fields + CTA button doesn't wrap. - Viewport takes 44% (min 320px) so the preview has enough room to show the 240x320 SVG without being so oversized that the visualization dwarfs the parameter entry. */ .ds-param-panel { /* PR-DS-PREVIEW-DOCK (2026-08-02): the preview is a DOCKED right-hand column again (reverting the 2026-08-01 floating PiP), so the form + batch cards share the split row with it — ~56% here, preview ~44% (see .ds-viewport). Restores the layout the responsive media queries below were written for. */ flex: 1 1 56%; min-width: 480px; max-width: none; /* PR-PREVIEW-FOLLOWS-SCROLL (2026-09-05): was `overflow-y: auto`. That made the form a SECOND scroller: it scrolled inside its own column, so the split row never grew past one screen. Measured with an order open — `.ds-template-b` was 640px tall, the exact height of the preview beside it, which left the preview's `position:sticky` with **0px of travel**. Sticky holds a child only while its parent's box is passing through the viewport; a parent no taller than the child can never hold anything. Letting the column grow makes the row as tall as the form, so `.scroll` scrolls the whole studio once and the preview sticks across every batch card — which is the ask: it follows you down the page while you work through doors. It also removes the second scrollbar, which is the same "both-scroller" problem the page frame comment above was already fighting. */ overflow-y: visible; padding: var(--sp-6); /* PR-DOOR-PREVIEW-BREATHE (2026-08-01): was a bare `border-right` butting straight against the preview. Now a full card (border + radius) so the form and the preview read as two separate panels with the gutter between them. */ border: 1px solid var(--bdr); border-radius: var(--radius-md); background: var(--sf); display: flex; flex-direction: column; gap: var(--sp-4); position: relative; } /* ── PR-DS-PREVIEW-PIP (2026-08-01): FLOATING picture-in-picture preview ── The door/drawer preview no longer lives in a scrolling column. It's pinned to the SCREEN with position:fixed, so it stays visible no matter how the form/batch cards scroll — immune to every flex/overflow/sticky quirk that broke the in-flow attempts (the whole point of choosing PiP). It reuses the SAME #ds-svg element, so every updateDoorPreview() call keeps driving it with zero JS changes. PR-DS-PREVIEW-DRAG (2026-08-02): re-docked TOP-right (was bottom-right) and made draggable. The default `top` is lowered by JS to just under the order-header row so it never covers "the words" at the top of the page; position:fixed keeps it on screen while the form scrolls, and the header is a drag handle whose dropped spot persists. Collapsible. */ .ds-viewport { /* PR-DS-PREVIEW-DOCK (2026-08-02): DOCKED right-hand column, sticky to the top so the preview stays put while the form/wizard on the left scrolls. Reverts the floating position:fixed PiP + drag. Same #ds-svg, so updateDoorPreview() drives it unchanged; the drag/position JS (_dsPipOnPointerDown / dsApplyPreviewPos) self-neutralizes because it guards on getComputedStyle().position === 'fixed', no longer true. */ flex: 1 1 44%; min-width: 320px; max-width: 460px; align-self: flex-start; /* top-align in the split row */ position: sticky; top: var(--sp-4); /* stays at the top as the left scrolls */ display: flex; flex-direction: column; gap: var(--sp-2); padding: 0; } /* PR-DS-PREVIEW-FULL (2026-08-02): show the ENTIRE door. The card gets a DEFINITE height so its flex:1 canvas resolves to a real height; the SVG then fills that canvas (width/height 100%, below) and its preserveAspectRatio="xMidYMid meet" fits the whole 240×320 drawing inside with letterboxing — no bottom-rail clipping at any door aspect. Was `max-height: min(52vh,460px)` on the card + an INDEPENDENT `max-height: min(44vh,420px)` on the SVG, which could exceed the canvas and get cropped by the card's overflow:hidden. Scoped to the split (≥768px) layout; the ≤767px stacked layout keeps its own sizing. */ @media (min-width: 768px) { .ds-viewport .ds-viewport-preview { height: min(80vh, 700px); max-height: none; min-height: 400px; /* PR-PREVIEW-FOLLOWS-EDIT (2026-08-29, owner: "move it down so it scrolls down with to where each card your editing is"): ONE 3D view, and it rides with the work. Sticky rather than fixed so it stays inside its column and cannot cover the cards; the offset clears the page header. */ position: sticky; top: var(--sp-3); align-self: flex-start; } .ds-viewport .ds-preview-canvas { min-height: 0; } .ds-viewport .ds-preview-canvas > svg { width: 100%; height: 100%; max-width: 100%; max-height: 100%; } } /* Collapsed state — tuck the whole thing down to a compact tab so it never blocks a card the operator is filling in. Toggled by dsTogglePreviewPip(). */ .ds-viewport.ds-pip-collapsed .ds-preview-canvas, .ds-viewport.ds-pip-collapsed .ds-preview-footer, .ds-viewport.ds-pip-collapsed .ds-preview-meta, .ds-viewport.ds-pip-collapsed .ds-jump-style-btn { display: none; } .ds-viewport.ds-pip-collapsed { width: auto; } .ds-viewport.ds-pip-collapsed .ds-viewport-preview { max-height: none; min-height: 0; } /* Collapse/expand toggle button in the preview header. */ .ds-pip-toggle { appearance: none; border: 1px solid var(--bdr); background: var(--inp); color: var(--txt); border-radius: var(--radius-sm); width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 15px; line-height: 1; flex-shrink: 0; transition: background .12s ease, border-color .12s ease; } .ds-pip-toggle:hover { border-color: var(--acc); color: var(--acc); } /* When collapsed the toggle shows the "expand" glyph via ::before swap in JS; the label reads "Preview" so a tucked-away PiP is still discoverable. */ .ds-viewport.ds-pip-collapsed .ds-preview-header { border-bottom: none; } /* PR-DS-PREVIEW-DOCK (2026-08-02): docked column — no drag. Header is a plain title bar (no grab cursor, no grip glyph), and the collapse toggle (a floating-PiP affordance) is hidden. */ .ds-viewport .ds-preview-header { cursor: default; user-select: auto; -webkit-user-select: auto; } .ds-pip-toggle { display: none; } .ds-viewport.ds-pip-dragging { transition: none; filter: drop-shadow(0 14px 36px rgba(0,0,0,.55)); } .ds-viewport.ds-pip-dragging, .ds-viewport.ds-pip-dragging .ds-preview-header { cursor: grabbing; } /* Buttons in the header keep a normal pointer cursor and stay click-only — _dsPipOnPointerDown ignores pointerdowns that start on a button. */ .ds-viewport .ds-preview-header button { cursor: pointer; } /* Bottom toolbar 56px */ .ds-bottom-toolbar { display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-6); height: 56px; min-height: 56px; background: var(--sf); border-top: 1px solid var(--bdr); flex-shrink: 0; } .ds-bottom-toolbar .ds-tb-spacer { flex: 1; } .ds-bottom-toolbar button { min-height: 48px; min-width: 56px; padding: 0 var(--sp-5); font-weight: var(--fw-semibold); font-size: var(--fs-base); } /* Bundle panel -- visible bundle animates in; hidden ones are display:none */ .ds-bundle { display: flex; flex-direction: column; gap: var(--sp-4); } /* The open group keeps its title; a closed one is just its strip, and a title above a one-line summary would be two labels for one thing. */ /* The check mark that used to sit on a step chip. On one screen it can sit on the group itself, so every group's state reads at a glance. */ .ds-bundle[data-complete="true"] > .ds-bundle-header .ds-bundle-title::after { content: " ¹3"; color: var(--ok); font-weight: 700; } .ds-bundle[hidden] { display: none; } /* PR-ONE-PANEL (2026-08-28): the slide-in is gone. It was written for ONE bundle appearing as you stepped forward; with all five on screen it fired five times at once on open, which reads as a stutter, not a transition. */ /* Bundle panel header — subtle lead accent bar + eyebrow label + title + subtitle. The eyebrow ("STEP 3 OF 5 · FRAME") gives the operator orientation without needing to look up at the nav bar; the vertical accent bar on the left grounds the header visually against the rest of the bundle body. Populated by JS via a data-step attr on .ds-bundle header. */ .ds-bundle-header { position: relative; padding: var(--sp-2) 0 var(--sp-4) var(--sp-4); margin-bottom: var(--sp-4); border-bottom: 1px solid var(--bdr); } .ds-bundle-header::before { content: ""; position: absolute; left: 0; top: var(--sp-2); bottom: var(--sp-4); width: 3px; border-radius: 2px; background: var(--acc); } .ds-bundle-title { font-family: var(--ff-ui); font-size: var(--fs-xl); /* 20px */ font-weight: var(--fw-semibold); color: var(--txt); margin: 0 0 var(--sp-1); line-height: 1.25; letter-spacing: -0.005em; } .ds-bundle-subtitle { font-family: var(--ff-ui); font-size: var(--fs-sm); color: var(--dim); margin: 0; line-height: 1.5; max-width: 52ch; } /* PR-CUST-LINKVIS (2026-06-12): saved-customer link chip under the Door Studio Customer field. States mirror the server's OrderResponse.customer_link_state: linked (ok) / ambiguous (warn — the V116 resolver refused to guess between duplicate names) / match_available + no_match (dim, informational). */ .ds-custlink { display: inline-block; margin-top: 6px; padding: 3px 10px; border-radius: 999px; font-size: 11px; line-height: 1.4; border: 1px solid var(--bdr); color: var(--dim); background: transparent; } .ds-custlink-ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, var(--bdr)); background: color-mix(in srgb, var(--ok) 12%, transparent); } .ds-custlink-warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 50%, var(--bdr)); background: color-mix(in srgb, var(--warn) 12%, transparent); font-weight: var(--fw-bold, 700); } .ds-custlink-dim { color: var(--dim); } /* Hidden backing select -- visually removed; JS reads/writes its value */ .ds-hidden-select { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Type selector -- 6-tile segmented row operating #sg-type underneath */ .ds-type-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); } .ds-type-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-1); min-height: 72px; /* larger tap zone */ padding: var(--sp-3) var(--sp-2); background: linear-gradient(180deg, color-mix(in srgb, var(--inp) 92%, var(--bg)) 0%, var(--inp) 100%); border: 1.5px solid var(--bdr); border-radius: var(--radius-sm); color: var(--dim); font-size: 11px; font-weight: var(--fw-semibold); text-align: center; cursor: pointer; /* Chrome transitions only — never on label text that will become a dimension or price (gate 12). Tiles are chrome. */ transition: background var(--dur-chrome) var(--ease-out), border-color var(--dur-chrome) var(--ease-out), color var(--dur-chrome) var(--ease-out), box-shadow var(--dur-chrome) var(--ease-out), transform var(--dur-chrome) var(--ease-out); letter-spacing: 0.2px; line-height: 1.2; box-shadow: 0 1px 0 color-mix(in srgb, var(--bg) 50%, transparent) inset; } .ds-type-tile:hover:not([aria-checked="true"]) { border-color: color-mix(in srgb, var(--acc) 70%, var(--bdr)); background: color-mix(in srgb, var(--acc) 6%, var(--inp)); color: var(--txt); transform: translateY(-1px); } .ds-type-tile:focus-visible { outline: 2px solid color-mix(in srgb, var(--acc) 70%, transparent); outline-offset: 2px; } .ds-type-tile[aria-checked="true"] { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 14%, var(--inp)); color: var(--txt); box-shadow: 0 0 0 1px var(--acc) inset, 0 3px 10px color-mix(in srgb, var(--acc) 25%, transparent); } /* PR-DS-TYPE-LOCK (2026-05-14): tiles for the conflicting product family (doors vs drawer boxes) dim out once the order is locked to one kind. Operator must clear same-kind items first to switch. */ .ds-type-tile.is-locked { opacity: 0.35; cursor: not-allowed; filter: grayscale(1); } .ds-type-tile.is-locked:hover:not([aria-checked="true"]) { border-color: var(--bdr); background: linear-gradient(180deg, color-mix(in srgb, var(--inp) 92%, var(--bg)) 0%, var(--inp) 100%); color: var(--dim); transform: none; } .ds-type-tile[aria-checked="true"]::after { /* Small checkmark badge in the top-right corner of the selected tile. */ content: ""; position: absolute; top: 6px; right: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--acc); background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; } .ds-type-tile-icon { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .ds-type-tile-icon svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.6; fill: none; } /* Bundle 4 hero — Shop Standard "Recommended" CTA. Theme-aware green via --ok so it stays distinct from the progress-bar's --acc (blue) active-step chip — they won't visually merge. Phase B (later PR) demotes the dropdowns into a collapsible Advanced section + adds Economy/Tandem/Pullout secondary cards. */ /* PR-DBOX-HERO-FLAT (2026-08-25, owner: "the green button — take off the highlight, it should look like the others"): Shop Standard was a saturated green slab with a 6px left rail and an outer glow ring, shouting next to the neutral preset cards beside it. It now wears the SAME surface as .ds-shop-card and gets the same accent border + checkmark when it is the active preset — its hover / focus / selected states are the sibling rules themselves (this selector is appended to them below), so the two can never drift apart again. Only the layout differs, which is all a hero needs: taller, roomier gap, bigger title. */ .ds-hero-shop-standard { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--sp-1); width: 100%; min-height: 88px; 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; border-radius: var(--card-radius); color: var(--txt); cursor: pointer; text-align: left; transition: background var(--dur-chrome) var(--ease-out), border-color var(--dur-chrome) var(--ease-out), transform var(--dur-chrome) var(--ease-out), box-shadow var(--dur-chrome) var(--ease-out); } .ds-hero-shop-standard:active:not(:disabled) { transform: translateY(0); filter: brightness(0.96); } .ds-hero-title { font-family: var(--ff-ui); font-size: 18px; font-weight: 700; letter-spacing: 0.04em; color: var(--txt); line-height: 1.15; } .ds-hero-rec { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--dim); margin-left: 4px; text-transform: none; } .ds-hero-sub { font-family: var(--ff-ui); font-size: 13px; font-weight: 400; color: var(--dim); line-height: 1.35; } /* Hero block wraps the Shop Standard button + first-load onboard note so the note sits tight under the button (6px gap) instead of inheriting the bundle's full --sp-4 gap. The block itself is a single flex item in the bundle's column layout. */ .ds-hero-block { display: flex; flex-direction: column; gap: 6px; } .ds-hero-onboard-note { margin: 0; padding: 0 var(--sp-1); font-family: var(--ff-ui); font-size: 11px; font-weight: 500; font-style: italic; color: var(--dim); line-height: 1.35; } .ds-hero-onboard-note[hidden] { display: none; } /* Bundle 4 secondary preset cards. Visually subordinate to the hero (smaller min-height, neutral background, --acc hover/focus — distinct from the hero's --ok green so the visual hierarchy stays "green = use the recommended; blue = consider this instead"). Phase B (later PR) layers on selected-state visuals + Tandem-no-slide advisory + keyboard shortcuts. */ .ds-shop-cards { display: flex; flex-direction: column; gap: var(--sp-2); } /* PR-CARD-TOKENS (2026-08-25, owner: "match that with the door studio padding ... to really get close to the same home page look"): the preset cards now measure exactly what the Cabinet Studio metric cards measure — same padding, border, radius and reserved left rail, all from tokens.css. Only the INTERNAL layout still differs (these stack their lines vertically; a metric card sets its icon beside the value), which is content, not chrome. */ .ds-shop-card { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; width: 100%; min-height: 80px; 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; border-radius: var(--card-radius); color: var(--txt); cursor: pointer; text-align: left; transition: background var(--dur-chrome) var(--ease-out), border-color var(--dur-chrome) var(--ease-out), transform var(--dur-chrome) var(--ease-out), box-shadow var(--dur-chrome) var(--ease-out); } .ds-shop-card:hover, .ds-hero-shop-standard:hover:not(:disabled) { border-color: color-mix(in srgb, var(--acc) 55%, var(--bdr)); background: var(--pn-h); transform: translateY(-1px); box-shadow: 0 3px 10px color-mix(in srgb, var(--acc) 18%, transparent); } .ds-shop-card:active { transform: translateY(0); filter: brightness(0.96); } .ds-shop-card:focus-visible, .ds-hero-shop-standard:focus-visible { outline: 2px solid color-mix(in srgb, var(--acc) 70%, transparent); outline-offset: 2px; } .ds-shop-card-title { font-family: var(--ff-ui); font-size: 15px; font-weight: 700; letter-spacing: 0.03em; color: var(--txt); line-height: 1.15; } .ds-shop-card-summary { font-family: var(--ff-ui); font-size: 12px; font-weight: 500; color: var(--txt); line-height: 1.3; } .ds-shop-card-note { font-family: var(--ff-ui); font-size: 11px; font-weight: 400; font-style: italic; color: var(--dim); line-height: 1.3; } .ds-shop-card-badge { align-self: flex-start; padding: 3px 9px; margin-bottom: 4px; background: color-mix(in srgb, var(--acc) 28%, transparent); border: 1px solid color-mix(in srgb, var(--acc) 65%, var(--bdr)); border-radius: 999px; color: var(--txt); font-family: var(--ff-ui); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; pointer-events: none; } .ds-shop-card-badge[hidden] { display: none; } /* PR-DBOX-PRESET-EDIT (2026-05-15): pencil-edit affordance in the top-right corner of each preset card. PR-0C-AUDIT-FIXUP (2026-05-15) — ux-specialist P0: 26×26 was below the 44×44 shop-floor min tap target. Bumped to 44×44 with negative margin to keep the visual icon small (~24px effective) but the hit area honors gloved-hand reality. event.stopPropagation in the onclick prevents the parent card's "apply preset" handler from firing when the operator wants to edit instead. */ /* PR-DBOX-EDIT-OBVIOUS (2026-07-31): the edit affordance was a dim icon-only pencil in the top-right corner — easy to miss, and on the SELECTED card the ✓ badge sat right on top of it. It's now a clearly labeled "✎ Edit" pill in the BOTTOM-right, out of the way of the top-left number badge + top-right selection checkmark, and obviously a button. */ .ds-card-edit { position: absolute; bottom: 8px; right: 8px; padding: 5px 10px 5px 8px; display: inline-flex; align-items: center; gap: 5px; background: color-mix(in srgb, var(--acc) 15%, var(--inp)); border: 1px solid color-mix(in srgb, var(--acc) 50%, var(--bdr)); border-radius: 7px; color: var(--acc); font-size: 12px; font-weight: 600; line-height: 1; cursor: pointer; opacity: 0.95; transition: opacity var(--dur-chrome) var(--ease-out), background var(--dur-chrome) var(--ease-out), color var(--dur-chrome) var(--ease-out), transform var(--dur-chrome) var(--ease-out); } .ds-card-edit-lbl { letter-spacing: 0.01em; } .ds-card-edit > svg { width: 13px; height: 13px; } .ds-card-edit:hover { opacity: 1; background: color-mix(in srgb, var(--acc) 24%, var(--inp)); color: var(--acc); transform: translateY(-1px); } .ds-card-edit:focus-visible { opacity: 1; outline: 2px solid var(--acc); outline-offset: 1px; } /* Hero "Edit" pill sits over the bright-green hero — flip colors so it's still readable against the saturated background. PR-DBOX-AUDIT-FIXUP-2 (2026-05-15) — sentinel M-4 + ux P1: replaced 4 raw rgba()/#fff literals with cf-* tokens via color-mix so theme switches (and a future high-contrast mode) don't leave overlay+text mismatched on the saturated hero. */ /* PR-DBOX-HERO-FLAT (2026-08-25): the hero's dark-overlay Edit pill was there to stay legible on the saturated green. On the neutral surface it just looked like a different button from the ones on the cards beside it, so it inherits the shared .ds-card-edit style. */ /* 5th "Custom" card — visually distinct via dashed border so it reads as "different category" not "yet another preset." No edit button (Custom has no stored payload to edit). */ .ds-shop-card-custom { border-style: dashed !important; border-color: color-mix(in srgb, var(--dim) 70%, var(--bdr)) !important; background: color-mix(in srgb, var(--inp) 60%, var(--bg)); } .ds-shop-card-custom:hover { border-color: var(--acc) !important; background: color-mix(in srgb, var(--acc) 6%, var(--inp)); } .ds-shop-card-custom .ds-shop-card-title { color: var(--dim); } .ds-shop-card-custom:hover .ds-shop-card-title { color: var(--txt); } /* PR-DBOX-PRESET-EDIT round 3 — inline editor panel. Lives under the card grid in Bundle 4. Hidden by default; pencil click flips hidden=false and adds .is-open which fades it in. Layout is a full-width card with a clear header, the form body, and a sticky-ish action bar at the bottom holding Save / Cancel / Reset. Reset on the left is muted (rare action); Save on the right is large + green so the operator's eye lands on it. */ .dbox-inline-editor { margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: color-mix(in srgb, var(--inp) 80%, var(--bg)); border: 2px solid var(--acc); border-radius: var(--radius-sm); box-shadow: 0 4px 14px color-mix(in srgb, var(--acc) 14%, transparent); animation: dbox-editor-fade-in var(--dur-chrome) var(--ease-out); } @keyframes dbox-editor-fade-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* PR-DBOX-AUDIT-FIXUP-2 (2026-05-15) — ux P1: honor the user's OS-level reduced-motion preference. WCAG 2.3.3 + the existing comment at line ~778 confirms the rest of AsCut zeros --dur-quick under reduced-motion via tokens.css; the editor's local @keyframes was missed in the prior pass. */ @media (prefers-reduced-motion: reduce) { .dbox-inline-editor { animation: none; } } .dbox-inline-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; } .dbox-inline-editor-head h3 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: 0.02em; color: var(--txt); } .dbox-inline-editor-head h3 #dbox-edit-target { color: var(--acc); } /* PR-0C-AUDIT-FIXUP (2026-05-15) — ux P0: 28×28 → 44×44 shop-floor min. */ .dbox-inline-editor-close { background: transparent; border: 1px solid var(--bdr); color: var(--dim); width: 44px; height: 44px; border-radius: 6px; cursor: pointer; font-size: 14px; line-height: 1; } .dbox-inline-editor-close:hover { background: var(--bg); color: var(--txt); } .dbox-inline-editor-hint { margin: 0 0 var(--sp-3) 0; color: var(--dim); font-size: 11px; line-height: 1.4; } .dbox-inline-editor-body { display: flex; flex-direction: column; gap: var(--sp-2); } /* PR-0C-AUDIT-FIXUP (2026-05-15) — ux P0: 36→44px shop-floor min tap target. */ .dbox-inline-editor select, .dbox-inline-editor input[type="text"] { width: 100%; min-height: 44px; } /* Round 4 — live preview block at the top of the inline editor. Shows the operator exactly what the card will look like after Save, so material picks (which auto-update the Summary line) give immediate visual feedback. Dashed accent border separates it from the editable form below. */ .dbox-inline-preview { margin-bottom: var(--sp-3); padding: var(--sp-2) var(--sp-3); background: var(--bg); border: 1px dashed color-mix(in srgb, var(--acc) 50%, var(--bdr)); border-radius: var(--radius-sm); } .dbox-preview-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--dim); margin-bottom: 4px; } .dbox-preview-card { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-2); background: var(--inp); border: 1px solid var(--bdr); border-radius: var(--radius-sm); } .dbox-preview-badge { align-self: flex-start; padding: 2px 8px; background: color-mix(in srgb, var(--acc) 28%, transparent); border: 1px solid color-mix(in srgb, var(--acc) 65%, var(--bdr)); border-radius: 999px; font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--txt); } .dbox-preview-badge[hidden] { display: none; } .dbox-preview-title { font-size: 14px; font-weight: 700; letter-spacing: 0.03em; color: var(--txt); } .dbox-preview-summary { font-size: 12px; color: var(--txt); } .dbox-preview-note { font-size: 11px; color: var(--dim); font-style: italic; } /* PR-DBOX-PRESET-EDIT — action bar. Reset on the left, Cancel + the big primary Save on the right. Save is the only green button so the operator's eye lands on it. */ .dbox-edit-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--bdr); } .dbox-edit-action-group { display: flex; gap: 10px; align-items: center; } /* PR-0C-AUDIT-FIXUP (2026-05-15) — ux P1: --ok is the cyan status token in AsCut (3 status colors only: cyan/amber/rose). Using a status color on a primary action button conflates "synced" with "tap to commit." Save is an action, not a status — use the indigo accent token. Per AsCut design language locked 2026-05-14. */ .dbox-edit-save { min-height: 44px; padding: 0 24px; font-size: 14px; font-weight: 700; letter-spacing: 0.04em; background: var(--acc) !important; border-color: var(--acc) !important; /* PR-DBOX-AUDIT-FIXUP-2 (2026-05-15): #fff → var(--acc-ink) keeps the indigo accent button text correct under any theme switch (acc-ink is the cf-* paired text token). */ color: var(--acc-ink) !important; box-shadow: 0 2px 8px color-mix(in srgb, var(--acc) 30%, transparent); } .dbox-edit-save:hover { filter: brightness(1.08); transform: translateY(-1px); } /* PR-DBOX-AUDIT-FIXUP-2 (2026-05-15) — ux P0: Cancel inherits the base .bg button (padding 9/18, ~32px tall) which is below the 44px shop-floor tap-target floor. Bump the entire action group to 44px min-height so Cancel + the action-group cluster all clear WCAG 2.5.5 + Apple HIG. */ .dbox-edit-actions .bg, .dbox-edit-action-group .bg { min-height: 44px; } .dbox-edit-reset { color: var(--dim); font-size: 12px; } /* ── PR-DBOX-PRESET-MODAL (2026-08-04) — full-spec preset editor as a blurred modal (replaces the round-3 inline panel). Backdrop dims + blurs the page; the panel is centered, scrolls on short screens, and reuses the .dbox-edit-actions / -save / -reset footer styles above so the buttons match the rest of Bundle 4. Modeled on the existing .sync-modal / .shortcuts-modal patterns. */ .dbox-edit-modal { position: fixed; inset: 0; z-index: 320; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(6px) saturate(140%); -webkit-backdrop-filter: blur(6px) saturate(140%); animation: dbox-modal-fade 0.16s ease-out; } .dbox-edit-modal[hidden] { display: none; } @keyframes dbox-modal-fade { from { opacity: 0; } to { opacity: 1; } } body.dbox-modal-open { overflow: hidden; } .dbox-edit-panel { width: 560px; max-width: 100%; max-height: 88vh; overflow-y: auto; background: color-mix(in srgb, var(--pn) 96%, #000); border: 1px solid var(--bdr); border-radius: 14px; padding: 20px 22px; box-shadow: 0 24px 70px rgb(var(--shadow-ink) / 0.7); } @media (prefers-reduced-motion: reduce) { .dbox-edit-modal { animation: none; } } .dbox-edit-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; } .dbox-edit-panel-head h3 { margin: 0; font-size: 16px; font-weight: 700; } .dbox-edit-panel-head h3 #dbox-m-target { color: var(--acc); } .dbox-edit-panel-close { background: none; border: none; color: var(--dim); font-size: 20px; line-height: 1; cursor: pointer; min-width: 44px; min-height: 44px; } .dbox-edit-panel-close:hover { color: var(--fg, #fff); } .dbox-edit-panel-hint { margin: 0 0 var(--sp-3); font-size: 12px; color: var(--dim); } .dbox-edit-panel-body .fg { margin-bottom: var(--sp-3); } .dbox-edit-panel-body select, .dbox-edit-panel-body input[type="text"] { width: 100%; } .dbox-m-thk { margin-bottom: var(--sp-3); } .dbox-m-thk-head { font-size: 12px; font-weight: 600; color: var(--dim); margin-bottom: 6px; } .dbox-m-verify { display: flex; align-items: center; gap: 8px; font-size: 12px; margin-top: 4px; } /* Card highlight while its inline editor is open — makes it clear which card the form is editing. Subtle accent ring; doesn't interfere with the data-selected="true" active-preset chrome. */ .ds-shop-card.is-being-edited, .ds-hero-shop-standard.is-being-edited { outline: 2px dashed var(--acc); outline-offset: 2px; } /* PR-BOX-SPEC-SELECTION-STATE — cards (hero included) gain an accent border + checkmark when they're the active preset; see the shared [data-selected="true"] rules above. PR-DBOX-HERO-FLAT (2026-08-25): the hero's separate deselected treatment is GONE. It existed only to tone the saturated green down when a sibling card was active — with the green removed, the plain base rule already IS the deselected look, identical to a sibling's. */ .ds-shop-card { position: relative; } /* PR-CARD-TOKENS (2026-08-25): selected now reads the way it reads on the Cabinet Studio dashboard — accent tint plus a solid rail down the left edge, painted into the transparent border the base rule already reserves. The old treatment was an all-round accent border plus a 1px inset ring plus the ✓ badge below: three signals for one bit of state, and none of them the one the dashboard uses. */ .ds-shop-card[data-selected="true"], .ds-hero-shop-standard[data-selected="true"] { 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); } /* PR-CARD-TOKENS (2026-08-25): the ✓ badge is OFF — the dashboard has no such badge and "match the cabinet studio" was the call. Kept in the file (display:none) rather than deleted: it is the one signal the rail can't carry, namely WHICH of several peers is chosen when they're all on screen at once, so it may well earn its way back. */ .ds-shop-card[data-selected="true"]::after, .ds-hero-shop-standard[data-selected="true"]::after { display: none; content: ""; position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; border-radius: 50%; background-color: var(--acc); background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%230a1012' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; pointer-events: none; } /* PR-BOX-SPEC-ADVANCED-COLLAPSE — collapsible "See all options" section that wraps the legacy Style/Side/Bottom dropdowns. Closed by default; opens on Bundle-4 entry only when reconciliation lands on null (custom-state saved order). Operator can toggle freely; runtime state changes don't auto-close to respect operator intent. */ .ds-advanced { border: 1px solid var(--bdr); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--inp) 50%, transparent); } .ds-advanced > summary { list-style: none; cursor: pointer; padding: var(--sp-2) var(--sp-3); font-family: var(--ff-ui); font-size: 11px; font-weight: 700; color: var(--dim); letter-spacing: 0.06em; text-transform: uppercase; display: flex; align-items: center; gap: 8px; user-select: none; } .ds-advanced > summary::-webkit-details-marker { display: none; } .ds-advanced > summary::before { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform var(--dur-chrome) var(--ease-out); flex-shrink: 0; } .ds-advanced[open] > summary::before { transform: rotate(45deg); } .ds-advanced > summary:hover { color: var(--txt); } .ds-advanced > summary:focus-visible { outline: 2px solid color-mix(in srgb, var(--acc) 70%, transparent); outline-offset: 2px; border-radius: var(--radius-sm); } .ds-advanced-body { padding: var(--sp-3); border-top: 1px solid var(--bdr); display: flex; flex-direction: column; gap: var(--sp-3); } /* PR-LIBEDIT-SAVE-FLASH (2026-05-18) — visible-on-the-button feedback after a successful library-item save. The existing "✓ Saved" pill (top of drawer) + green "Saved!" message (bottom of form) live where the operator may not be looking when they click Save. This adds the third cue ON the button itself: text swaps to "✓ Saved!", background goes cyan success, a single subtle pulse fires, and after 1500 ms it reverts. Uses `var(--ok)` (cyan, the canonical AsCut success status color) so it skins correctly across all 7 themes. */ .ba.lib-save-flash { background: var(--ok) !important; color: var(--bg) !important; border-color: var(--ok) !important; animation: lib-save-pulse 600ms ease-out; } @keyframes lib-save-pulse { 0% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent); } 40% { transform: scale(1.04); box-shadow: 0 0 0 8px color-mix(in srgb, var(--ok) 0%, transparent); } 100% { transform: scale(1); box-shadow: 0 0 0 0 transparent; } } /* Honor prefers-reduced-motion — keep the color swap, skip the pulse animation for operators with motion sensitivity. */ @media (prefers-reduced-motion: reduce) { .ba.lib-save-flash { animation: none; } } /* PR-DOOR-DESIGN-APPLIES-TO (2026-05-18) — chip pills for the "Door Design" section's Applies-to multi-select. At rest: --inp / --bdr (neutral panel surface, theme-aware). Selected (`:has(input:checked)`): indigo (--acc) tint — matches the AsCut action-layer convention. "All" master uses font-weight:700 to distinguish; never amber (amber is reserved for warning status per the 3-status-color rule). */ .ed-applies-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--inp); border: 1px solid var(--bdr); border-radius: 6px; cursor: pointer; font-size: 12px; min-height: 44px; color: var(--txt); transition: background 120ms ease, border-color 120ms ease; } .ed-applies-chip:hover { border-color: color-mix(in srgb, var(--acc) 50%, var(--bdr)); } .ed-applies-chip:has(input:checked) { background: color-mix(in srgb, var(--acc) 12%, transparent); border-color: color-mix(in srgb, var(--acc) 50%, transparent); color: var(--txt); } /* PR-DOOR-DESIGN-UX-FIXUP (2026-05-18, ux-specialist audit P1 #1+#3): hide the native 13px checkbox so the entire 44px label is the tap target — gloved-finger friendly. Selection state shown via the :has(input:checked) background tint above + a leading checkmark glyph rendered via ::before. "All" master gets a leading indigo bar so it reads as a master toggle rather than a fifth equal option. */ .ed-applies-chip input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; } .ed-applies-chip::before { content: ""; display: inline-block; width: 14px; height: 14px; border: 1.5px solid var(--bdr); border-radius: 3px; background: var(--inp); flex-shrink: 0; transition: background 120ms ease, border-color 120ms ease; } .ed-applies-chip:has(input:checked)::before { background: var(--acc); border-color: var(--acc); box-shadow: inset 0 0 0 2px var(--inp), inset 0 0 0 14px var(--acc); /* Render an inline checkmark via SVG mask so it inherits --acc-ink contrast cleanly across all themes (vs ::after pseudo limits). */ background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: center; background-size: 14px 14px; } .ed-applies-chip-all { font-weight: 700; letter-spacing: 0.04em; border-left: 3px solid color-mix(in srgb, var(--acc) 60%, var(--bdr)); padding-left: 14px; } /* PR-DOOR-DESIGN-UX-FIXUP (2026-05-18, ux-specialist audit P1 #2): make the disclosure toggle's keyboard focus state visible. WCAG 2.4.11 (Focus Appearance) — without this, a keyboard operator tabbing into the section sees no ring on the summary element. */ .ed-design-section > summary:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 4px; } /* PR-BOX-SPEC-KEYBOARD-SHORTCUTS — small key-badge in the top-left of each Bundle-4 tap target. aria-hidden so screen readers don't announce the digit; the shortcut info is in the button's aria-label ("Keyboard shortcut N."). pointer-events: none so the badge never blocks the tap target. */ .ds-kbd { position: absolute; top: 6px; left: 6px; min-width: 18px; height: 18px; padding: 0 5px; background: color-mix(in srgb, var(--bg) 70%, transparent); border: 1px solid color-mix(in srgb, var(--txt) 22%, transparent); border-radius: 4px; color: var(--txt); font-family: var(--ff-ui); font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; pointer-events: none; user-select: none; } /* PR-DBOX-HERO-FLAT (2026-08-25): same story for the "1" shortcut chip — it now uses the shared .ds-kbd look the 2/3/4 chips use. */ /* Bump in-flow content's left padding so the absolute kbd in the top-left doesn't overlap card text — especially the Economy "Most used for builder orders" pill that would otherwise land under the kbd. 36px clears the 6px-offset, 18px-min kbd, its 1px border, plus a comfortable gap. */ .ds-hero-shop-standard, .ds-shop-card { padding-left: 36px; } /* PR-BOX-SPEC-PRESS-ANIM — micro press animation. :active scales the tap target to 0.97 for a tactile press feel (mouse/touch); the .ds-keypress class fires a single-shot keyframe pulse so keyboard shortcut activations get matching visual feedback. Wrapped in prefers-reduced-motion so operators with motion-reduction settings opt out — :active states fall back to the existing brightness dim alone (already provided by the base :active rules). */ @media (prefers-reduced-motion: no-preference) { .ds-hero-shop-standard:active:not(:disabled), .ds-shop-card:active { transform: scale(0.97); transition-duration: 80ms; } .ds-hero-shop-standard.ds-keypress, .ds-shop-card.ds-keypress { animation: ds-box-spec-keypress 180ms ease-out; } } @keyframes ds-box-spec-keypress { 0% { transform: scale(1); } 35% { transform: scale(0.97); } 100% { transform: scale(1); } } /* Bundle Back / Next navigation row. Hit every time an operator advances or retreats through the 5-bundle flow. Primary (Next) is accent-filled + confident;/* Primary — Next/Add advance. Accent-filled. * 2026-04-23: `color` was hardcoded `#0a1012` (near-black) — * a legacy from the pre-theme-swap cyan-only accent era. Now * routes through `--acc-ink` so every theme picks the right * ink: white on Studio Light's blue, dark on Onyx's green, * black on Dark's cyan, white on shop's blue. */ /* Secondary — Back / cancel. Ghost style;/* Disabled Next (when required fields missing) */ /* PR-DS-ORDER-TOTAL (2026-08-11): the order summary under the piece cards. Deliberately a SMALL step up from the old bare accent line — a tinted pill with a heavier left edge and the piece count one size larger. Enough to catch the eye when scanning for "how many did I enter", not enough to compete with the action buttons right below it. */ .ds-order-total { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; padding: 8px 14px; border: 1px solid color-mix(in srgb, var(--acc) 40%, var(--bdr)); border-left: 4px solid var(--acc); border-radius: 8px; background: color-mix(in srgb, var(--acc) 9%, transparent); color: var(--acc); font-size: 13px; font-weight: 600; } .ds-order-total:empty { display: none; } .ds-order-total-n { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--white, #fff); margin-right: 1px; } .ds-order-total-sep { color: var(--dim); font-weight: 400; } .ds-order-total-groups, .ds-order-total-brk { color: var(--dim); font-weight: 600; } /* PR-DS-CARD-COUNTS (2026-08-11): the piece-count badge at the top-right of every style-group card. Two numbers: this batch's piece count (big), and the whole order's count across every batch (small, underneath). Sized so an operator can read it from arm's length at the bench — the old count was a 11px dim chip at the tail of the settings row, which wrapped out of sight on a tablet exactly when the row got long enough to matter. */ .ds-card-count { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none; min-width: 78px; padding: 6px 12px; border: 1px solid var(--bdr); border-radius: 10px; background: color-mix(in srgb, var(--acc) 8%, transparent); line-height: 1.05; cursor: default; } .ds-card-count-n { font-size: 22px; font-weight: 800; color: var(--white, #fff); font-variant-numeric: tabular-nums; } .ds-card-count-lbl { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); margin-top: 1px; } .ds-card-count-of { font-size: 10px; color: var(--dim); margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--bdr); width: 100%; text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }/* PR-DS-TYPE-STEP-LOCK (2026-08-01): the ← Back buttons that lead to the Type step and the "Type" nav chip render disabled while the order's item type is locked. Kept pointer-clickable (no pointer-events:none) so a tap still fires the explanatory toast from dsBundleGoto rather than doing nothing silently. PR-DS-TYPE-STEP-OPEN (2026-08-11): .ds-type-locked is now set ONLY for DRAWER BOX orders. Door-family orders (doors / drawer fronts / slab fronts / end panels) keep the Type step live so the next piece can be a different door-family type. */ /* Drawer-box orders never use the DOOR "Style & Materials" step (bundle 2), so dim its nav chip too. Click is still gated in dsBundleGoto. */ #d-new[data-ds-lock-kind="drawer-box"] #ds-bnav-2 { opacity: 0.4; cursor: not-allowed; }/* "Skip for now" — tertiary text-link style. Reads as secondary to Back/Next so an operator pre-quoting a job without a customer name yet has an obvious escape hatch without it competing visually with the primary forward action. */ /* Match cabinet body toggle */ /* Wraps when the param panel narrows: the hint drops to its own line so the checkbox label always keeps full width (otherwise the long hint squeezed the label and a global break-word shattered "Match cabinet body material" into one letter per line). */ .ds-match-body-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); padding: var(--sp-3); background: var(--inp); border: 1px solid var(--bdr); border-radius: var(--radius-sm); } .ds-match-body-row label { display: flex; align-items: center; gap: var(--sp-2); color: var(--txt); font-size: var(--fs-base); font-weight: var(--fw-medium); cursor: pointer; flex: 1 1 auto; min-width: 0; } .ds-match-body-row input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; flex-shrink: 0; } /* flex-basis:100% forces the hint onto its own line under the label. */ .ds-match-body-hint { font-size: var(--fs-sm); color: var(--dim); flex: 1 1 100%; } /* Confirm-before-commit panel -- absolute overlay inside .ds-param-panel */ .ds-confirm-panel { position: absolute; inset: 0; background: var(--bg); z-index: var(--z-drawer); display: flex; flex-direction: column; overflow-y: auto; padding: var(--sp-6); gap: var(--sp-4); } .ds-confirm-panel[hidden] { display: none; } .ds-confirm-title { font-size: var(--fs-xl); font-weight: var(--fw-semibold); color: var(--txt); margin: 0; line-height: 1.3; } .ds-confirm-body-text { font-size: var(--fs-sm); color: var(--dim); margin: 0; line-height: 1.5; } .ds-confirm-summary { background: var(--inp); border: 1px solid var(--bdr); border-radius: var(--radius-sm); padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); } .ds-confirm-row { display: flex; justify-content: space-between; font-size: var(--fs-sm); line-height: 1.4; } .ds-confirm-row-label { color: var(--dim); font-weight: var(--fw-medium); } .ds-confirm-row-val { color: var(--txt); font-weight: var(--fw-semibold); font-family: var(--ff-mono); text-align: right; } .ds-confirm-cutlist-wrap { background: var(--inp); border: 1px solid var(--bdr); border-radius: var(--radius-sm); padding: var(--sp-3) var(--sp-4); overflow-x: auto; } .ds-confirm-cutlist-title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--dim); margin: 0 0 var(--sp-2); text-transform: uppercase; letter-spacing: 0.5px; } /* cutlist table -- NO transition on any cell (math-guardian gate 12) */ .ds-confirm-cl-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); font-family: var(--ff-mono); line-height: 1.5; } .ds-confirm-cl-table th { text-align: left; color: var(--dim); font-weight: var(--fw-medium); padding: 2px var(--sp-2) var(--sp-1) 0; border-bottom: 1px solid var(--bdr); } .ds-confirm-cl-table th:last-child, .ds-confirm-cl-table td:last-child { text-align: right; } .ds-confirm-cl-table td { padding: 3px var(--sp-2) 3px 0; color: var(--txt); } .ds-confirm-cl-section-row td { font-size: 10px; font-weight: var(--fw-semibold); color: var(--acc2); text-transform: uppercase; letter-spacing: 0.8px; padding-top: var(--sp-3); } .ds-confirm-actions { display: flex; gap: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--bdr); margin-top: auto; } .ds-confirm-go { flex: 1; min-height: 56px; background: var(--ok); border: none; border-radius: var(--radius-sm); color: var(--bg); font-weight: var(--fw-bold); font-size: var(--fs-base); cursor: pointer; transition: background-color var(--dur-chrome) var(--ease-out); } .ds-confirm-go:hover { filter: brightness(1.08); } .ds-confirm-go:disabled { opacity: 0.45; cursor: not-allowed; } .ds-confirm-back { min-height: 56px; min-width: 80px; padding: 0 var(--sp-5); background: var(--inp); border: 1px solid var(--bdr); border-radius: var(--radius-sm); color: var(--txt); font-weight: var(--fw-semibold); font-size: var(--fs-base); cursor: pointer; } /* Post-Add success state (2026-04-22). After the user confirms an Add, the same panel flips to a success view with 3 explicit next-action choices. No more "Where did the panel go?" confusion; no more hunting for the bundle-1 nav to start a new batch. */ .ds-confirm-success-mark { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; margin: var(--sp-4) auto var(--sp-2); border-radius: 50%; background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); flex-shrink: 0; } .ds-confirm-success-actions { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-5); } .ds-confirm-success-actions > button { width: 100%; min-height: var(--sp-10); /* 56px */ padding: var(--sp-3) var(--sp-5); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; font-weight: var(--fw-semibold); font-size: var(--fs-base); text-align: left; cursor: pointer; border-radius: var(--radius-sm); border: 1px solid var(--bdr); transition: filter var(--dur-chrome) var(--ease-out), background-color var(--dur-chrome) var(--ease-out); } .ds-confirm-success-actions > button:hover { filter: brightness(1.08); } .ds-confirm-success-actions > .sa-primary { background: var(--ok); color: var(--ok-ink); border-color: var(--ok); } .ds-confirm-success-actions > .sa-secondary { background: var(--acc); color: var(--acc-ink); border-color: var(--acc); } .ds-confirm-success-actions > .sa-tertiary { background: var(--inp); color: var(--txt); } .ds-confirm-btn-hint { font-size: var(--fs-xs, 11px); font-weight: var(--fw-regular); opacity: 0.78; letter-spacing: 0.01em; } /* ═══════════════════════════════════════════════════════════════ Door preview — architectural drafting aesthetic (2026-04-22). Replaces the prior flat-accent SVG with a properly framed preview that reads like a shop drawing: title bar with species pill + metadata, centered SVG with weighted stroke hierarchy + proper dimension arrows + labeled members, footer title block with overall dimensions. Tokens-only; snaps on every value change (no transition on dimension text per gate 12). */ .ds-viewport-preview { /* PR-DS-PREVIEW-STICKY-COL (2026-08-01): the STICKING now lives on the parent column (.ds-viewport), not here. This element had both `position: sticky` AND a later `position: relative` — relative won (last declaration), so the sticky never engaged and the preview scrolled away. It stays `position: relative` (its inner absolute bits depend on it); the pinned column keeps it on screen. */ flex: 0 1 auto; max-height: min(64vh, 560px); display: flex; flex-direction: column; background: linear-gradient(180deg, color-mix(in srgb, var(--inp) 88%, var(--bg)) 0%, var(--inp) 100%); border: 1px solid var(--bdr); border-radius: var(--radius-md); box-shadow: var(--shadow-card); min-height: 300px; overflow: hidden; position: relative; } /* Header scales down gracefully: title never wraps or shrinks, the pill row takes the middle and wraps its pills, and the "Change style" button drops to a second line before anything gets crushed. Fixes the mid-word "DOOR PREVI EW" wrap on narrow preview columns. */ .ds-preview-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: var(--sp-3) var(--sp-4); gap: var(--sp-2) var(--sp-3); background: color-mix(in srgb, var(--inp) 60%, var(--bg)); border-bottom: 1px solid var(--bdr); flex-shrink: 0; min-height: 48px; } .ds-preview-title { font-family: var(--ff-ui); font-size: var(--fs-xs, 11px); font-weight: var(--fw-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); margin: 0; white-space: nowrap; flex: 0 0 auto; } .ds-preview-meta { display: flex; align-items: center; justify-content: flex-start; gap: var(--sp-2); flex-wrap: wrap; flex: 1 1 auto; min-width: 0; } .ds-jump-style-btn { flex: 0 0 auto; } .ds-preview-pill { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 3px var(--sp-2); border-radius: 999px; background: color-mix(in srgb, var(--bg) 75%, transparent); border: 1px solid var(--bdr); font-family: var(--ff-mono); font-size: 10px; font-weight: var(--fw-medium); color: var(--txt); letter-spacing: 0.02em; max-width: 100%; overflow: hidden; } .ds-preview-pill-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--txt) 25%, transparent); flex-shrink: 0; } .ds-preview-canvas { flex: 1; display: flex; align-items: center; justify-content: center; padding: var(--sp-5) var(--sp-5) var(--sp-4); position: relative; } /* PR-NO-SQUARES (2026-08-28, owner: "i want the squares on the screen gone"). This was a graph-paper backdrop meant to read as drafting paper. It made sense behind a flat 2D elevation; behind a shaded 3D object it reads as a grid printed ON the wood. Gone. */ .ds-preview-canvas > svg { position: relative; width: auto; height: auto; max-width: 100%; /* PR-DS-PREVIEW-CENTER (2026-08-01): scales with the screen but stays modest — the earlier min(62vh,720px) made the box far too tall. Sits centered in the (now shorter, vertically-centered) card. */ max-height: min(44vh, 420px); display: block; cursor: zoom-in; filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.25)); } .ds-preview-footer { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-3) var(--sp-4); gap: var(--sp-3); background: color-mix(in srgb, var(--inp) 60%, var(--bg)); border-top: 1px solid var(--bdr); flex-shrink: 0; min-height: 44px; font-family: var(--ff-mono); font-size: var(--fs-sm); letter-spacing: 0.01em; } .ds-preview-overall { color: var(--txt); font-weight: var(--fw-semibold); } .ds-preview-overall-label { color: var(--dim); font-weight: var(--fw-regular); margin-right: 6px; letter-spacing: 0.04em; text-transform: uppercase; font-size: 10px; } .ds-preview-zoom-hint { color: var(--dim); font-family: var(--ff-ui); font-size: 11px; display: flex; align-items: center; gap: 6px; } .ds-preview-zoom-hint svg { opacity: 0.7; } /* ─── SVG drafting styles ──────────────────────────────────── Stroke hierarchy: frame (outer) 1.8px solid member (stile/rail) 1.2px solid panel cells 0.6px dashed dimensions 0.8px with arrow ticks Every stroke/fill routes through tokens so all 4 themes work. */ .ds-preview-canvas .ds-prev-frame { fill: none; stroke: var(--txt); stroke-width: 1.8; stroke-linejoin: round; } .ds-preview-canvas .ds-prev-fill { fill: color-mix(in srgb, var(--acc2, var(--acc)) 18%, transparent); stroke: color-mix(in srgb, var(--acc2, var(--acc)) 55%, transparent); stroke-width: 0.8; } /* PR-PANEL-MISMATCH (2026-05-01) */ /* Amber-flash for picker revert: when the operator clicks Cancel on the species-mismatch confirm, the picker's value rolls back. The flash makes the rollback observable in peripheral vision since the system dialog held focus. UX-audit follow-up 2026-05-01: also tint the styled as a chip */ .adm-cell-select { background: var(--bg); color: var(--white); border: 1px solid var(--bdr); border-radius: 999px; padding: 5px 10px; font-size: 0.8125rem; font-family: inherit; cursor: pointer; min-width: 130px; transition: border-color 120ms, background 120ms; } .adm-cell-select:hover { border-color: var(--acc); } .adm-cell-select:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 20%, transparent); } .adm-role-chip.role-admin { color: #d946ef; } .adm-role-chip.role-designer { color: var(--acc); } .adm-role-chip.role-shop_floor { color: #f59e0b; } .adm-role-chip.role-viewer { color: var(--dim); } .adm-role-chip.static, .adm-station-chip.static { display: inline-block; padding: 5px 11px; border-radius: 999px; font-size: 0.8125rem; background: var(--bg); border: 1px dashed var(--bdr); } .adm-station-chip.unset { color: var(--dim); font-style: italic; } .adm-station-chip.set { color: var(--white); } /* Action buttons row */ .adm-actions-cell { text-align: right; white-space: nowrap; } .adm-action { display: inline-flex; align-items: center; gap: 4px; background: transparent; border: 1px solid transparent; color: var(--dim); padding: 5px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 500; font-family: inherit; cursor: pointer; transition: background 100ms, color 100ms, border-color 100ms; margin-left: 2px; } .adm-action:hover { background: color-mix(in srgb, var(--acc) 8%, transparent); border-color: var(--acc); color: var(--white); } .adm-action.accent { color: var(--acc); } .adm-action.accent:hover { background: color-mix(in srgb, var(--acc) 14%, transparent); color: var(--white); } .adm-action.subtle { color: color-mix(in srgb, var(--white) 55%, transparent); } .adm-action.subtle:hover { color: var(--white); background: color-mix(in srgb, var(--white) 8%, transparent); } .adm-action.danger { color: var(--risk-late); } .adm-action.danger:hover { background: color-mix(in srgb, var(--risk-late) 12%, transparent); border-color: var(--risk-late); color: var(--risk-late); } .adm-action.ok { color: var(--risk-on-track); } .adm-action.ok:hover { background: color-mix(in srgb, var(--risk-on-track) 12%, transparent); border-color: var(--risk-on-track); color: var(--risk-on-track); } .adm-action-icon { display: inline-block; font-size: 0.8125rem; } .adm-row-self { color: var(--dim); font-size: 0.75rem; } /* ── /PR-ADM-USERS-POLISH ───────────────────────────────────────── */ /* PR-IPD-4 (2026-05-23): the legacy drawer-specific CSS that lived here (.ipd-head, .ipd-title, .ipd-sub, .ipd-group*, .ipd-job*, .ipd-worker-chip, .ipd-job-noworker, #ipd-drawer .drawer) was removed with the drawer DOM. The `.ipd-prog*` block below stays because pg-production reuses _ipdRenderProgress for the 7-phase strip on every list card. */ /* 7-phase progress bar (Cut → Mill → Build → Sand → Spray → Finish → Pack) */ .ipd-prog { grid-column: 1 / -1; margin-top: 10px; display: flex; flex-direction: column; gap: 4px; } .ipd-prog-bar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; height: 8px; } .ipd-prog-seg { background: color-mix(in srgb, var(--dim) 22%, transparent); border-radius: 2px; transition: background 200ms; } .ipd-prog-seg.done { background: var(--risk-on-track); } .ipd-prog-seg.in_progress { background: var(--warn, #facc15); box-shadow: 0 0 0 2px color-mix(in srgb, var(--warn, #facc15) 30%, transparent); animation: prodPulse 1.6s ease-in-out infinite; } .ipd-prog-labels { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; font-size: 0.6875rem; font-family: var(--ff-mono, "JetBrains Mono", monospace); color: var(--dim); margin-top: 2px; } .ipd-prog-lbl { text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ipd-prog-lbl.done { color: var(--risk-on-track); font-weight: 600; } .ipd-prog-lbl.in_progress { color: var(--risk-at-risk); font-weight: 700; } .ipd-prog-summary { font-size: 0.75rem; margin-top: 2px; } .ipd-prog-now { color: var(--risk-at-risk); font-weight: 700; } .ipd-prog-done { color: var(--risk-on-track); font-weight: 600; } .ipd-prog-idle { color: var(--dim); font-style: italic; } /* ── /PR-PROD-BAR (drawer-only CSS removed in PR-IPD-4) ─────────── */ /* ── PR-SCHED2-1 (2026-05-24) — drawer purged ────────────────────── The PR-SCHED-5 #sched-drawer DOM + CSS + JS were deleted here (~240 LOC CSS, ~20 LOC DOM, ~350 LOC JS). Schedule lives on the full page #pg-schedule-v2 (see CSS block immediately below). These three #kpi-h5 tile styles stay — the H-5 KPI tile still clicks through to go('pg-schedule'). */ #kpi-h5 { cursor: pointer; transition: transform 120ms, border-color 120ms; } #kpi-h5:hover { border-color: var(--acc); transform: translateY(-1px); } #kpi-h5:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; } /* ── /PR-SCHED2-1 ──────────────────────────────────────────────── */ /* ── PR-SCHED-FULLPAGE (2026-05-23) — Schedule as full page ───── */ #pg-schedule-v2 { padding: 0; } #pg-schedule-v2 .hub-header { padding: 18px 24px 0; } /* PR-SCHED-FULLPAGE-POLISH (2026-05-23): full redesign for breathing room + clear hierarchy + premium feel. Was: dense paper-binder look. Now: airy ServiceTitan-grade dispatch board. Every value below tuned for whitespace > density. */ .schedp-shell { display: grid; grid-template-columns: 280px 1fr; gap: 24px; padding: 16px 28px 32px; min-height: calc(100vh - 160px); } /* ── Unscheduled tray (left rail) ──────────────────────────── */ .schedp-tray { background: linear-gradient(180deg, color-mix(in srgb, var(--warn, #facc15) 6%, var(--pn)) 0%, var(--pn) 80px); border: 1px solid var(--bdr); border-radius: 14px; padding: 18px 16px; position: sticky; top: 16px; max-height: calc(100vh - 180px); display: flex; flex-direction: column; align-self: start; box-shadow: 0 1px 0 rgb(var(--shadow-ink) / 0.04); } .schedp-tray-head { display: flex; justify-content: space-between; align-items: center; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--white); padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--bdr); } .schedp-tray-count { background: var(--bg); border: 1px solid var(--bdr); font-family: var(--ff-mono, monospace); padding: 3px 10px; border-radius: 999px; color: var(--white); font-size: 0.75rem; font-weight: 700; min-width: 28px; text-align: center; } .schedp-tray-list { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; flex: 1; min-height: 100px; margin: 0 -4px; /* let scrollbar live in padding gutter */ padding: 0 4px; } .schedp-tray-empty { color: var(--dim); font-style: italic; font-size: 0.8125rem; padding: 16px 4px; text-align: center; } .schedp-tray-hint { color: var(--dim); font-size: 0.75rem; line-height: 1.5; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--bdr); text-align: center; } /* ── Multi-week scrollable area ──────────────────────────── */ .schedp-weeks { display: flex; flex-direction: column; gap: 28px; min-width: 0; } .schedp-loading { color: var(--dim); font-style: italic; padding: 60px 30px; text-align: center; font-size: 0.9375rem; } .schedp-week { background: transparent; border: none; padding: 0; } .schedp-week-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 2px solid var(--bdr); } .schedp-week-title { font-size: 1rem; font-weight: 700; color: var(--white); display: flex; align-items: center; gap: 12px; letter-spacing: -0.01em; } .schedp-week-meta { font-size: 0.75rem; font-family: var(--ff-mono, monospace); color: var(--dim); font-weight: 600; } .schedp-week.current { position: relative; } .schedp-week.current .schedp-week-head { border-bottom-color: var(--acc); } .schedp-week.current .schedp-week-title::before { content: "THIS WEEK"; background: var(--acc); color: #fff; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.08em; padding: 3px 9px; border-radius: 4px; } .schedp-days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; } /* ── Day cell ─────────────────────────────────────────────── */ .schedp-day { background: var(--pn); border: 1px solid var(--bdr); border-radius: 10px; padding: 14px 12px 12px; display: flex; flex-direction: column; min-height: 180px; transition: border-color 120ms, background 120ms; } .schedp-day.today { background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 8%, var(--pn)) 0%, var(--pn) 60px); border-color: color-mix(in srgb, var(--acc) 40%, var(--bdr)); } .schedp-day-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid color-mix(in srgb, var(--bdr) 60%, transparent); } .schedp-day-name { color: var(--white); font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; } .schedp-day-date { color: var(--dim); font-weight: 500; font-family: var(--ff-mono, monospace); font-size: 0.75rem; margin-top: 4px; display: block; margin-left: 0; } .schedp-day.today .schedp-day-name { color: var(--acc); } .schedp-day-count { background: var(--bg); border: 1px solid var(--bdr); padding: 3px 9px; border-radius: 999px; font-family: var(--ff-mono, monospace); color: var(--white); font-weight: 600; font-size: 0.75rem; min-width: 26px; text-align: center; } .schedp-day-count.over-cap { background: color-mix(in srgb, var(--warn, #facc15) 22%, var(--pn)); color: var(--risk-at-risk); border-color: var(--warn, #facc15); } .schedp-day-list { display: flex; flex-direction: column; gap: 8px; flex: 1; overflow-y: auto; margin: 0 -4px; padding: 0 4px; } /* ── Job card — premium feel ─────────────────────────────── */ .schedp-card { background: var(--bg); border: 1px solid var(--bdr); border-radius: 8px; padding: 11px 12px 10px; cursor: pointer; font-size: 0.8125rem; position: relative; transition: border-color 140ms, transform 140ms, box-shadow 140ms; display: flex; flex-direction: column; gap: 6px; } .schedp-card:hover { border-color: var(--acc); transform: translateY(-1px); box-shadow: 0 2px 8px color-mix(in srgb, var(--acc) 20%, transparent); } .schedp-card:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; } .schedp-card[draggable="true"] { cursor: grab; } .schedp-card.schedp-dragging { opacity: 0.45; cursor: grabbing; transform: rotate(1deg); } .schedp-card.rush { border-left: 4px solid var(--risk-late); padding-left: 11px; background: linear-gradient(90deg, color-mix(in srgb, var(--risk-late) 5%, var(--bg)) 0%, var(--bg) 40%); } /* PR-SCHED-URGENCY (2026-08-09): 🔴/🟡/🟢 Kanban deadline band. This card shows risk as a TEXT badge (not a left stripe), so the whole border is free — urgency frames all four sides. Colour is never the sole carrier: the aria-label spells the tier out and flagged rushes keep the RUSH badge. 🔴 rush · 🟡 standard (resting) · 🟢 flexible filler */ .schedp-card.urgency-rush { border: 2px solid var(--risk-late); } .schedp-card.urgency-standard { border: 2px solid var(--warn); } .schedp-card.urgency-flexible { border: 2px solid var(--ok); } /* Job# headline */ .schedp-card-jobnum { display: flex; align-items: center; gap: 6px; line-height: 1.2; white-space: nowrap; min-height: 18px; } .schedp-card-jobnum .schedp-jn { font-family: var(--ff-mono, "JetBrains Mono", monospace); font-weight: 700; font-size: 1rem; color: var(--white); letter-spacing: -0.01em; } /* Customer secondary */ .schedp-card-customer { font-weight: 500; color: var(--white); opacity: 0.78; font-size: 0.8125rem; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .schedp-card-meta { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--ff-mono, monospace); font-size: 0.6875rem; color: var(--dim); margin-top: 2px; padding-top: 6px; border-top: 1px dashed color-mix(in srgb, var(--bdr) 60%, transparent); } /* PR-UNIFY-D1 (2026-05-24): compact pipeline strip per card. 7 phases (Cut Mill Build Sand Spray Finish Pack). One char per phase: ✓ done, ● in progress (amber pulse), · gray. */ .schedp-card-pipeline { display: flex; gap: 4px; justify-content: space-between; margin-top: 4px; padding-top: 4px; border-top: 1px dashed color-mix(in srgb, var(--bdr) 40%, transparent); font-family: var(--ff-mono, monospace); font-size: 11px; line-height: 1; letter-spacing: 0.04em; } .schedp-phase { color: color-mix(in srgb, var(--dim) 70%, transparent); } .schedp-phase.done { color: var(--risk-on-track); font-weight: 700; } .schedp-phase.active { color: var(--risk-at-risk); font-weight: 800; animation: schedp-phase-pulse 1.4s ease-in-out infinite; } @keyframes schedp-phase-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } @media (prefers-reduced-motion: reduce) { .schedp-phase.active { animation: none; } } .schedp-card-risk { font-weight: 700; letter-spacing: 0.04em; } .schedp-card-risk.on_track { color: var(--ok); } .schedp-card-risk.at_risk { color: var(--warn); } .schedp-card-risk.late { color: var(--no); } .schedp-card-risk.already_late{ color: var(--no); } .schedp-card-risk.unknown { color: var(--dim); font-weight: 500; } /* PR-AUDIT-27 (2026-05-26): Monte Carlo P(on_time) chip. Banded color: ≥80% = ok (relax), 50-79% = warn (watch), <50% = no (intervene). Uses the same status tokens as the risk badge so theme swaps stay coherent. */ .schedp-card-pot { margin-left: 6px; padding: 1px 6px; border-radius: 4px; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.03em; font-variant-numeric: tabular-nums; background: color-mix(in srgb, var(--dim) 18%, transparent); color: var(--ink); } .schedp-card-pot.pot-good { color: var(--ok); background: color-mix(in srgb, var(--ok) 18%, transparent); } .schedp-card-pot.pot-mid { color: var(--warn); background: color-mix(in srgb, var(--warn) 18%, transparent); } .schedp-card-pot.pot-bad { color: var(--no); background: color-mix(in srgb, var(--no) 18%, transparent); } /* ── PR-AUDIT-28 (2026-05-26): What-If scenario drawer ──── */ .schedp-whatif { position: fixed; inset: 0; z-index: 9000; display: flex; justify-content: flex-end; } .schedp-whatif[hidden] { display: none; } .schedp-whatif-shade { position: absolute; inset: 0; background: color-mix(in srgb, var(--bg) 70%, transparent); } .schedp-whatif-panel { position: relative; width: min(720px, 92vw); height: 100%; background: var(--pn); box-shadow: -8px 0 32px color-mix(in srgb, var(--bg) 60%, transparent); display: flex; flex-direction: column; color: var(--ink); } .schedp-whatif-head { padding: 16px 20px; border-bottom: 1px solid var(--bdr); display: flex; align-items: baseline; gap: 12px; } .schedp-whatif-head h3 { margin: 0; font-size: 1.05rem; letter-spacing: 0.03em; flex: 0 0 auto; } .schedp-whatif-sub { color: var(--dim); font-size: 0.85rem; flex: 1 1 auto; } .schedp-whatif-close { background: transparent; border: 0; color: var(--ink); font-size: 1.5rem; cursor: pointer; line-height: 1; padding: 0 8px; } .schedp-whatif-tabs { display: flex; gap: 6px; padding: 8px 20px 0; border-bottom: 1px solid var(--bdr); } .schedp-whatif-tabs button { background: transparent; border: 0; color: var(--dim); font-weight: 600; padding: 8px 14px; border-radius: 6px 6px 0 0; cursor: pointer; } .schedp-whatif-tabs button.active { color: var(--ink); background: color-mix(in srgb, var(--acc) 12%, transparent); border-bottom: 2px solid var(--acc); } .schedp-whatif-body { flex: 1 1 auto; overflow-y: auto; padding: 16px 20px; } .schedp-whatif-pane[hidden] { display: none; } .schedp-whatif-help { color: var(--dim); font-size: 0.85rem; margin: 0 0 12px; } .schedp-whatif-chart { display: flex; flex-direction: column; gap: 6px; } .schedp-tornado-row { display: grid; grid-template-columns: 110px 1fr 60px; align-items: center; gap: 8px; font-size: 0.85rem; } .schedp-tornado-station { font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } .schedp-tornado-bar-track { position: relative; height: 18px; background: color-mix(in srgb, var(--dim) 12%, transparent); border-radius: 3px; } .schedp-tornado-bar-track::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--dim); } .schedp-tornado-bar-neg, .schedp-tornado-bar-pos { position: absolute; top: 0; bottom: 0; } .schedp-tornado-bar-neg { right: 50%; background: var(--no); border-radius: 2px 0 0 2px; } .schedp-tornado-bar-pos { left: 50%; background: var(--ok); border-radius: 0 2px 2px 0; } .schedp-tornado-swing { font-variant-numeric: tabular-nums; color: var(--dim); font-size: 0.75rem; text-align: right; } .schedp-whatif-results { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; } .schedp-whatif-result-row { display: grid; grid-template-columns: 90px 1fr 50px 50px 64px; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 4px; } .schedp-whatif-result-row:nth-child(even) { background: color-mix(in srgb, var(--dim) 6%, transparent); } .schedp-whatif-result-job { font-weight: 700; font-variant-numeric: tabular-nums; } .schedp-whatif-result-delta { font-variant-numeric: tabular-nums; font-weight: 700; } .schedp-whatif-result-delta.good { color: var(--ok); } .schedp-whatif-result-delta.bad { color: var(--no); } .schedp-whatif-result-delta.zero { color: var(--dim); } .schedp-whatif-summary { padding: 10px 12px; background: color-mix(in srgb, var(--acc) 8%, transparent); border-radius: 4px; font-size: 0.85rem; margin-bottom: 8px; } .schedp-whatif-budget { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; margin-bottom: 12px; } .schedp-whatif-budget input { width: 64px; padding: 4px 6px; background: var(--bg); color: var(--ink); border: 1px solid var(--bdr); border-radius: 4px; } #schedp-whatif-sim-controls { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin-bottom: 12px; font-size: 0.85rem; align-items: center; } #schedp-whatif-sim-controls input { width: 60px; padding: 4px 6px; background: var(--bg); color: var(--ink); border: 1px solid var(--bdr); border-radius: 4px; } #schedp-whatif-sim-run, #schedp-whatif-auto-run { background: var(--acc); color: var(--bg); border: 0; padding: 8px 16px; border-radius: 4px; font-weight: 700; cursor: pointer; } .schedp-rush-badge { background: var(--risk-late); color: #fff; font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 6px; border-radius: 3px; flex: 0 0 auto; } .schedp-blocked-badge { background: var(--warn, #facc15); color: #422006; font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 6px; border-radius: 3px; margin-left: auto; } /* ── Drop targets ─────────────────────────────────────────── */ .schedp-day.schedp-drop-target, .schedp-tray.schedp-drop-target { background: color-mix(in srgb, var(--acc) 14%, var(--bg)); border-color: var(--acc); box-shadow: 0 0 0 2px color-mix(in srgb, var(--acc) 30%, transparent); } /* Empty-day placeholder — minimal so the column doesn't look broken */ .schedp-day-empty { color: var(--dim); font-size: 0.6875rem; font-style: italic; text-align: center; padding: 14px 0; opacity: 0.5; } /* ── PR-SCHED2-2 (2026-05-24) — enlarged single-week canvas ── One Mon-Fri week now dominates the screen instead of four stacked. Day cells grow taller (320 min) so 5+ cards per day breathe. Three additions: 4px capacity bar (cyan/amber/ rose), .past dim, .over-cap dashed border. UX research: drum-buffer-rope + Asana/ShopMonkey/Procore conventions. --------------------------------------------------------- */ .schedp-days { gap: 14px; } .schedp-day { min-height: 320px; padding: 16px 14px 14px; } /* 4px capacity bar — sits between day-head and the card list, full column width. The single most-glanceable signal: is this day full? Drum-buffer-rope visual management. */ .schedp-day-cap { height: 4px; border-radius: 2px; margin: 0 -2px 12px; background: color-mix(in srgb, var(--acc) 35%, transparent); transition: background 140ms; } .schedp-day-cap.near { background: color-mix(in srgb, var(--warn, #facc15) 55%, transparent); } .schedp-day-cap.over { background: var(--risk-late); } /* Today: amber 2px left border + already has ivory→slate gradient on .today (rule above). Add the border without clobbering the gradient. */ .schedp-day.today { border-left: 2px solid var(--warn, #facc15); padding-left: 13px; } /* Past days: dim card opacity + muted header. Eye lands on the live half of the week. Day header text stays readable. */ .schedp-day.past .schedp-day-list { opacity: 0.55; } .schedp-day.past .schedp-day-name { color: var(--dim); } .schedp-day.past .schedp-day-cap { opacity: 0.5; } /* Over-capacity day: dashed rose border on the column (not the cards) is the loudest possible signal that the office is over-committing this day's shipping capacity. */ .schedp-day.over-cap { border: 1.5px dashed var(--risk-late); } .schedp-week-current-tag { color: var(--acc); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-left: 10px; vertical-align: middle; } /* ── /PR-SCHED2-2 ───────────────────────────────────────── */ /* ── PR-SCHED2-5 (2026-05-24) — View toggle + unscheduled ── 3-segment pill: Week | Month | Unscheduled. Replaces the old "◀ 4 weeks / Today / 4 weeks ▶" buttons. Adapts step buttons' semantics per active view. ----------------------- */ .schedp-viewseg { display: inline-flex; background: var(--bg); border: 1px solid var(--bdr); border-radius: 999px; padding: 3px; font-family: var(--ff-mono, "JetBrains Mono", monospace); } .schedp-viewseg-btn { background: transparent; border: none; color: var(--dim); font: inherit; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; padding: 7px 16px; border-radius: 999px; cursor: pointer; transition: background 120ms, color 120ms; } .schedp-viewseg-btn:hover { color: var(--white); } .schedp-viewseg-btn[aria-selected="true"] { background: var(--pn); color: var(--white); box-shadow: 0 1px 0 rgb(var(--shadow-ink) / 0.05); } .schedp-viewseg-btn:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; } /* Step buttons hide entirely in Unscheduled view (no pagination semantic). */ #pg-schedule-v2[data-view="unscheduled"] .schedp-stepgrp { display: none; } /* Unscheduled view = full-page list mode. Hides the week grid + month grid + the left-rail tray (which becomes the list itself). When unscheduled is active, the page is just the tray expanded. */ #pg-schedule-v2[data-view="unscheduled"] .schedp-shell { grid-template-columns: 1fr; } #pg-schedule-v2[data-view="unscheduled"] .schedp-weeks, #pg-schedule-v2[data-view="unscheduled"] .schedp-month { display: none !important; } #pg-schedule-v2[data-view="unscheduled"] .schedp-tray { max-height: none; position: static; } #pg-schedule-v2[data-view="unscheduled"] .schedp-tray-list { max-height: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; } /* Month view hides the unscheduled tray (it's already a planning lens — too much density to compete). */ #pg-schedule-v2[data-view="month"] .schedp-tray { display: none; } #pg-schedule-v2[data-view="month"] .schedp-shell { grid-template-columns: 1fr; } #pg-schedule-v2[data-view="month"] .schedp-weeks { display: none !important; } /* Week view hides the month grid (default) — same pattern. */ #pg-schedule-v2[data-view="week"] .schedp-month { display: none !important; } /* ── /PR-SCHED2-5 ───────────────────────────────────────── */ /* ── PR-SCHED2-6 (2026-05-24) — Right-rail detail panel ──── Replaces the floating popover. Sticky 340px column to the right of the week grid (week view only). Mobile (<980px) collapses to a fixed bottom drawer. --------------------------------------------------------- */ #pg-schedule-v2[data-view="week"] .schedp-shell { grid-template-columns: 260px minmax(0, 1fr) 340px; } .schedp-detail { background: var(--pn); border: 1px solid var(--bdr); border-radius: 14px; padding: 18px 18px 14px; position: sticky; top: 16px; max-height: calc(100vh - 180px); overflow-y: auto; align-self: start; display: flex; flex-direction: column; box-shadow: 0 1px 0 rgb(var(--shadow-ink) / 0.04); } /* Hide rail in month + unscheduled (already-cramped views). */ #pg-schedule-v2[data-view="month"] .schedp-detail, #pg-schedule-v2[data-view="unscheduled"] .schedp-detail { display: none; } .schedp-detail-empty { text-align: center; color: var(--dim); padding: 40px 12px; } .schedp-detail-empty-icon { font-size: 2rem; color: var(--bdr); margin-bottom: 10px; } .schedp-detail-empty-title { color: var(--white); font-weight: 700; font-size: 0.9375rem; margin-bottom: 8px; } .schedp-detail-empty-hint { font-size: 0.8125rem; line-height: 1.5; } .schedp-detail-body.hidden { display: none; } .schedp-detail-head { padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--bdr); } .schedp-detail-jobnum { font-family: var(--ff-mono, "JetBrains Mono", monospace); font-weight: 700; font-size: 1.25rem; color: var(--white); letter-spacing: -0.01em; } .schedp-detail-customer { color: var(--white); opacity: 0.75; font-size: 0.875rem; margin-top: 2px; line-height: 1.3; } .schedp-detail-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .schedp-detail-pills .schedp-rush-badge, .schedp-detail-pills .schedp-blocked-badge { margin: 0; } .schedp-detail-risk-row { font-family: var(--ff-mono, monospace); font-size: 0.75rem; color: var(--dim); padding: 10px 0 14px; margin-bottom: 12px; border-bottom: 1px dashed color-mix(in srgb, var(--bdr) 60%, transparent); display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } .schedp-detail-field { margin-bottom: 14px; } .schedp-detail-label { display: block; font-size: 0.6875rem; color: var(--dim); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; margin-bottom: 5px; } .schedp-detail-field input[type="date"], .schedp-detail-field input[type="number"] { width: 100%; background: var(--bg); border: 1px solid var(--bdr); border-radius: 6px; padding: 8px 10px; color: var(--white); font: inherit; font-size: 0.875rem; font-family: var(--ff-mono, monospace); } .schedp-detail-field input:focus-visible { outline: 2px solid var(--acc); outline-offset: 1px; border-color: var(--acc); } .schedp-detail-clear { margin-top: 6px; background: transparent; border: none; color: var(--dim); font-size: 0.6875rem; cursor: pointer; padding: 4px 0; font-family: inherit; } .schedp-detail-clear:hover { color: var(--risk-late); text-decoration: underline; } .schedp-detail-toggle { display: flex; align-items: flex-start; gap: 8px; font-size: 0.8125rem; color: var(--white); cursor: pointer; line-height: 1.4; } .schedp-detail-toggle input[type="checkbox"] { margin-top: 2px; } .schedp-detail-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--bdr); } .schedp-detail-actions .bg, .schedp-detail-actions .ba { width: 100%; } .schedp-detail-status { font-size: 0.75rem; min-height: 1em; margin-top: 10px; font-family: var(--ff-mono, monospace); } .schedp-detail-status.ok { color: var(--risk-on-track); } .schedp-detail-status.error { color: var(--risk-late); } /* Mobile: collapse the rail into a fixed bottom drawer when narrower than 980px (tablet portrait, phone). The detail stays accessible without stealing screen real estate from the week grid. */ @media (max-width: 980px) { #pg-schedule-v2[data-view="week"] .schedp-shell { grid-template-columns: 280px minmax(0, 1fr); } .schedp-detail { position: fixed; bottom: 0; left: 0; right: 0; top: auto; max-height: 60vh; border-radius: 14px 14px 0 0; box-shadow: 0 -8px 24px rgb(var(--shadow-ink) / 0.25); z-index: 50; margin: 0; /* Hide when no job is selected so the empty-state doesn't occlude the week grid on mobile. JS toggles .schedp-detail--has-selection when something is in. */ } .schedp-detail:not(.schedp-detail--has-selection) { display: none; } } @media (max-width: 720px) { #pg-schedule-v2[data-view="week"] .schedp-shell { grid-template-columns: 1fr; } } /* ── /PR-SCHED2-6 ───────────────────────────────────────── */ /* ── PR-SCHED2-4 (2026-05-24) — Month-view heat-map ─────── Mon-Fri only (weekends omitted, matching shop policy). Each cell = capacity bar + count + one rush highlight. Drag intentionally disabled — this is a planning lens per cabinet-shop-ux research, not a scheduling surface. Click cell → jumps to week view at that week. --------------------------------------------------------- */ .schedp-month.hidden { display: none; } .schedp-month { display: flex; flex-direction: column; gap: 18px; min-width: 0; } .schedp-month-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 10px; border-bottom: 2px solid var(--bdr); } .schedp-month-title { font-size: 1.0625rem; font-weight: 700; color: var(--white); letter-spacing: -0.01em; } .schedp-month-meta { font-size: 0.75rem; font-family: var(--ff-mono, monospace); color: var(--dim); font-weight: 600; } .schedp-month-weekrow-head { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--dim); padding: 0 2px 6px; border-bottom: 1px solid color-mix(in srgb, var(--bdr) 60%, transparent); } .schedp-month-weekrow-head > span { text-align: left; } .schedp-month-grid { display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-rows: minmax(110px, auto); gap: 8px; } /* Heat-map cell — paper card, ivory bg, restraint. Status lives in the capacity bar at the top + one optional highlight line. NEVER colors the whole cell (AsCut anti-flooding rule). */ .schedp-month-cell { background: var(--pn); border: 1px solid var(--bdr); border-radius: 8px; padding: 10px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; transition: border-color 140ms, transform 140ms; position: relative; } .schedp-month-cell:hover { border-color: var(--acc); transform: translateY(-1px); } .schedp-month-cell:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; } /* Outside the displayed month (lead/trail Mon-Fri days of neighbor months) — render as flat dim placeholders so the 5-col grid stays rectangular without implying they're clickable. */ .schedp-month-cell.outside { background: transparent; border-color: transparent; cursor: default; } .schedp-month-cell.outside .schedp-month-celldate, .schedp-month-cell.outside .schedp-month-cellcount { opacity: 0.35; } .schedp-month-cell.outside:hover { transform: none; border-color: transparent; } /* Today gets the same 2px amber left border treatment as the week view's today column — visual continuity between views. */ .schedp-month-cell.today { border-left: 2px solid var(--warn, #facc15); padding-left: 11px; } /* Past days dim down per UX research. */ .schedp-month-cell.past { opacity: 0.62; } .schedp-month-cellrow1 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .schedp-month-celldate { font-family: var(--ff-mono, monospace); font-weight: 700; color: var(--white); font-size: 0.9375rem; letter-spacing: -0.01em; } .schedp-month-cellcount { font-size: 0.6875rem; color: var(--dim); font-family: var(--ff-mono, monospace); font-weight: 600; } .schedp-month-cellcount.has-jobs { color: var(--white); } /* 4px capacity bar — same color scheme as the week view's .schedp-day-cap so the visual language is identical across views. Cyan when under, amber at limit, rose when over. */ .schedp-month-cellcap { height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--acc) 35%, transparent); } .schedp-month-cellcap.near { background: color-mix(in srgb, var(--warn, #facc15) 55%, transparent); } .schedp-month-cellcap.over { background: var(--risk-late); } .schedp-month-cell.over-cap { border: 1.5px dashed var(--risk-late); } /* Single highlight line — top rush job for the day. Truncates hard at ~20 chars so cells stay uniform height. */ .schedp-month-cellrush { font-size: 0.6875rem; color: var(--risk-late); font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 4px; cursor: pointer; } .schedp-month-cellrush::before { content: "▲"; font-size: 0.5rem; color: var(--risk-late); } .schedp-month-cellblocked { position: absolute; top: 8px; right: 10px; font-size: 0.6875rem; color: var(--risk-at-risk); } .schedp-month-empty { text-align: center; color: var(--dim); font-style: italic; padding: 60px 20px; } /* Read-only banner — month view never edits via drag. */ .schedp-month-hint { color: var(--dim); font-size: 0.75rem; text-align: center; padding: 12px 0 0; font-style: italic; } /* ── /PR-SCHED2-4 ───────────────────────────────────────── */ /* Inline edit popover — floats over the page, positioned relative to the clicked card by JS. */ .schedp-edit-popover { position: fixed; z-index: 200; background: var(--pn); border: 1px solid var(--bdr); border-radius: 10px; box-shadow: 0 10px 32px rgb(var(--shadow-ink) / 0.35); padding: 18px 20px 16px; width: 360px; max-width: calc(100vw - 24px); } .schedp-edit-popover.hidden { display: none; } .schedp-edit-close { position: absolute; top: 8px; right: 8px; background: transparent; border: none; color: var(--dim); font-size: 1rem; cursor: pointer; padding: 4px 8px; } .schedp-edit-close:hover { color: var(--white); } .schedp-edit-title { font-weight: 700; font-size: 1rem; color: var(--white); padding-right: 28px; } .schedp-edit-sub { color: var(--dim); font-size: 0.75rem; font-family: var(--ff-mono, monospace); margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--bdr); } .schedp-edit-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; } .schedp-edit-label { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); } .schedp-edit-field input[type="date"], .schedp-edit-field input[type="number"] { background: var(--bg); color: var(--white); border: 1px solid var(--bdr); padding: 6px 9px; border-radius: 5px; font-size: 0.875rem; font-family: inherit; } .schedp-edit-field input:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 20%, transparent); } .schedp-edit-toggle { display: flex; align-items: center; gap: 8px; color: var(--white); font-size: 0.8125rem; cursor: pointer; } .schedp-edit-clear { background: transparent; border: none; color: var(--acc); font-size: 0.6875rem; padding: 2px 0; cursor: pointer; text-align: left; font-family: inherit; text-decoration: underline; } .schedp-edit-actions { display: flex; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--bdr); } .schedp-edit-status { font-size: 0.6875rem; color: var(--dim); margin-top: 6px; min-height: 14px; text-align: right; } .schedp-edit-status.ok { color: var(--risk-on-track); } .schedp-edit-status.error { color: var(--risk-late); } @media print { .schedp-no-print, .sidebar, .schedp-tray-hint, .schedp-edit-popover { display: none !important; } body * { visibility: hidden; } #pg-schedule-v2, #pg-schedule-v2 * { visibility: visible; } #pg-schedule-v2 { position: absolute; left: 0; top: 0; width: 100%; } } @media (max-width: 980px) { .schedp-shell { grid-template-columns: 1fr; } .schedp-tray { position: static; max-height: 240px; } } /* ── /PR-SCHED-FULLPAGE ─────────────────────────────────────────── */ /* ── PR-DS-SCHED-PAPER (2026-05-25) — paper-ticket aesthetic ──────── Operator: "make it look like the shop floor ui". Reuses the --st-* tokens that shop-floor-v2.html uses (ivory paper on slate canvas, JetBrains Mono dims, oxblood RUSH stamps). Scoped to #pg-schedule-v2 so the rest of the app keeps the AsCut dark-navy theme. */ #pg-schedule-v2 { /* PR-FORGE-CAB-SCHEDULE (2026-06-13): the paper-ticket palette (ivory on slate) was the single most jarring off-home seam — Schedule is reached straight from the home KPI strip yet rendered as a beige page while everything else is dark forge. Remap the --st-* tokens onto forge tokens so it reads as a DARK ticket (same structure, forge colors). Status stamps map to forge semantic colors so RUSH/late stay legible on dark. */ --st-canvas: var(--bg); --st-paper: var(--pn); --st-ink: var(--txt); --st-ink-dim: var(--dim); --st-rule: var(--bdr); --st-oxblood: var(--no); --st-amber: var(--warn); --st-rose: var(--no); --st-emerald: var(--ok); --st-cyan: var(--acc); /* PR-LIB-COLOR-TOKENS (2026-05-25): aliases for the names shop-floor.js references but that previously only existed in shop-floor-legacy.html — keeps every paper-aesthetic var() resolving cleanly on every surface that loads shop-floor.js. */ --st-forest: var(--st-emerald); --st-forest-d: var(--st-emerald); --st-oxblood-d: var(--st-oxblood); --st-paper-edge: var(--st-rule); --st-ink-soft: var(--st-ink-dim); background: var(--st-canvas); } /* Day column → ivory paper card on the slate canvas. */ #pg-schedule-v2 .schedp-day { background: var(--st-paper); color: var(--st-ink); border: 1px solid var(--st-rule); border-radius: 4px; box-shadow: 0 2px 6px rgb(var(--shadow-ink) / 0.3); padding: 14px 12px; } #pg-schedule-v2 .schedp-day.today { border-left: 6px solid var(--st-oxblood); } #pg-schedule-v2 .schedp-day-name { color: var(--st-cyan); font-family: 'JetBrains Mono', monospace; font-weight: 700; text-transform: uppercase; } #pg-schedule-v2 .schedp-day-date { color: var(--st-ink-dim); font-family: 'JetBrains Mono', monospace; font-size: 12px; } #pg-schedule-v2 .schedp-day-count { background: var(--st-ink); color: var(--st-paper); font-family: 'JetBrains Mono', monospace; font-weight: 700; border-radius: 999px; padding: 2px 10px; font-size: 12px; } #pg-schedule-v2 .schedp-day-count.over-cap { background: var(--st-oxblood); color: #fff; } /* Job card within a day → small paper ticket with monospace job#. */ #pg-schedule-v2 .schedp-card { background: #fff; color: var(--st-ink); border: 1px solid var(--st-rule); border-left: 3px solid var(--st-ink); border-radius: 3px; padding: 10px 12px; box-shadow: 0 1px 2px rgb(var(--shadow-ink) / 0.15); } #pg-schedule-v2 .schedp-card:hover { background: #fffdf6; border-left-color: var(--st-cyan); } #pg-schedule-v2 .schedp-card.rush { border-left: 4px solid var(--st-oxblood); background: #fff5f5; } /* PR-SCHED-URGENCY (2026-08-09): 🔴/🟡/🟢 band on the paper-ticket variant. The left stripe is the ticket's own mark here, so urgency frames the top/right/bottom in the station palette. */ #pg-schedule-v2 .schedp-card.urgency-rush { border-top: 2px solid var(--st-oxblood); border-right: 2px solid var(--st-oxblood); border-bottom: 2px solid var(--st-oxblood); } #pg-schedule-v2 .schedp-card.urgency-standard { border-top: 2px solid var(--st-amber); border-right: 2px solid var(--st-amber); border-bottom: 2px solid var(--st-amber); } #pg-schedule-v2 .schedp-card.urgency-flexible { border-top: 2px solid var(--st-emerald); border-right: 2px solid var(--st-emerald); border-bottom: 2px solid var(--st-emerald); } #pg-schedule-v2 .schedp-card-jobnum { color: var(--st-ink); font-family: 'JetBrains Mono', monospace; font-weight: 700; } #pg-schedule-v2 .schedp-card-jobnum .schedp-jn { color: var(--st-ink); } #pg-schedule-v2 .schedp-card-customer { color: var(--st-ink-dim); font-weight: 600; } #pg-schedule-v2 .schedp-card-meta, #pg-schedule-v2 .schedp-card-pipeline { color: var(--st-ink-dim); font-family: 'JetBrains Mono', monospace; font-size: 11px; } /* RUSH stamp — oxblood rectangle in JetBrains Mono. */ #pg-schedule-v2 .schedp-card .schedp-rush-tag, #pg-schedule-v2 .schedp-rush-tag { background: var(--st-oxblood); color: #fff; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 10px; letter-spacing: 0.08em; padding: 2px 6px; border-radius: 2px; } /* Risk badges → paper-ticket colors instead of dashboard accents. */ #pg-schedule-v2 .schedp-card-risk.on_track { color: var(--st-emerald); } #pg-schedule-v2 .schedp-card-risk.at_risk { color: var(--st-amber); } #pg-schedule-v2 .schedp-card-risk.late { color: var(--st-oxblood); } #pg-schedule-v2 .schedp-card-risk.past_due { color: var(--st-rose); } /* Unscheduled tray → also a paper card with a yellow header strip (matches the "STOP — needs scheduling" feel). */ #pg-schedule-v2 .schedp-tray { background: var(--st-paper); color: var(--st-ink); border: 1px solid var(--st-rule); border-radius: 4px; box-shadow: 0 2px 6px rgb(var(--shadow-ink) / 0.3); } #pg-schedule-v2 .schedp-tray-head { color: var(--st-ink); border-bottom: 1px solid var(--st-rule); } #pg-schedule-v2 .schedp-tray-count { background: var(--st-oxblood); color: #fff; border: 0; font-family: 'JetBrains Mono', monospace; } #pg-schedule-v2 .schedp-tray-empty, #pg-schedule-v2 .schedp-tray-hint { color: var(--st-ink-dim); } #pg-schedule-v2 .schedp-week-head { border-bottom: 2px solid var(--st-paper); } #pg-schedule-v2 .schedp-week-title { color: var(--st-paper); font-family: 'JetBrains Mono', monospace; } #pg-schedule-v2 .schedp-week-meta { color: var(--st-ink-dim); font-family: 'JetBrains Mono', monospace; } #pg-schedule-v2 .schedp-week.current .schedp-week-head { border-bottom-color: var(--st-cyan); } /* ── /PR-DS-SCHED-PAPER ──────────────────────────────────────────── */ /* ── PR-IPD-2 (2026-05-23) — In Production full page ────────────── */ /* Sibling visual language to pg-schedule (paper card + oxblood rush border + monospace dims + risk dot palette). Class prefix prodp-* mirrors the schedp-* convention. */ #pg-production { padding: 0; } #pg-production .hub-header { padding: 18px 24px 0; } .prodp-toolbar { padding: 12px 24px 8px; display: flex; flex-direction: column; gap: 10px; border-bottom: 1px solid var(--bdr); background: var(--bg); } .prodp-search { position: relative; display: flex; align-items: center; background: var(--pn); border: 1px solid var(--bdr); border-radius: 8px; padding: 0 12px; transition: border-color 120ms, box-shadow 120ms; } .prodp-search:focus-within { border-color: var(--acc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 18%, transparent); } .prodp-search-icon { font-size: 0.9rem; color: var(--dim); flex: 0 0 auto; padding-right: 8px; } .prodp-search-input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--white); font-size: 0.9375rem; padding: 10px 0; font-family: inherit; } .prodp-search-input::placeholder { color: var(--dim); } .prodp-search-clear { background: transparent; border: none; color: var(--dim); font-size: 0.875rem; cursor: pointer; padding: 4px 6px; border-radius: 4px; } .prodp-search-clear:hover { color: var(--white); background: var(--bg); } .prodp-search-clear.hidden { display: none; } .prodp-chips { display: flex; flex-wrap: wrap; gap: 6px; } .prodp-chip { background: var(--pn); border: 1px solid var(--bdr); color: var(--white); font-size: 0.75rem; font-weight: 600; padding: 5px 11px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: border-color 120ms, background 120ms; font-family: inherit; } .prodp-chip:hover { border-color: var(--acc); } .prodp-chip.on { background: var(--acc); color: #fff; border-color: var(--acc); } .prodp-chip-n { font-family: var(--ff-mono, monospace); font-size: 0.6875rem; font-weight: 700; opacity: 0.8; } .prodp-chip.on .prodp-chip-n { opacity: 1; } .prodp-shell { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(380px, 1.4fr); gap: 16px; padding: 12px 24px 24px; min-height: calc(100vh - 260px); } .prodp-list { display: flex; flex-direction: column; gap: 6px; max-height: calc(100vh - 280px); overflow-y: auto; padding-right: 4px; /* breathing room next to scrollbar */ } .prodp-loading, .prodp-detail-empty, .prodp-list-empty { color: var(--dim); font-style: italic; text-align: center; padding: 32px 16px; font-size: 0.875rem; } /* Job card — kinship with schedp-card but more vertical real estate because the office is reading not scheduling. */ .prodp-card { background: var(--pn); border: 1px solid var(--bdr); border-radius: 8px; padding: 10px 12px; cursor: pointer; transition: border-color 120ms, transform 120ms, box-shadow 120ms; position: relative; } .prodp-card:hover { border-color: var(--bdr-h); background: var(--pn-h); } /* PR-FORGE-CAB-PRODUCTION: flat hover */ .prodp-card:focus-visible { outline: none; border-color: var(--acc); box-shadow: 0 0 0 2px color-mix(in srgb, var(--acc) 30%, transparent); } .prodp-card.selected { border-color: var(--acc); box-shadow: 0 0 0 2px color-mix(in srgb, var(--acc) 28%, transparent); } .prodp-card.rush { border-left: 3px solid var(--risk-late); padding-left: 11px; } .prodp-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .prodp-card-customer { font-size: 0.9375rem; font-weight: 700; color: var(--white); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; } .prodp-card-jobnum { font-family: var(--ff-mono, "JetBrains Mono", monospace); font-size: 0.8125rem; font-weight: 700; color: var(--dim); flex: 0 0 auto; } .prodp-card-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-family: var(--ff-mono, monospace); font-size: 0.6875rem; color: var(--dim); margin-top: 3px; } .prodp-card-mat { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; } .prodp-card-mat-pill { background: var(--bg); border: 1px solid var(--bdr); color: var(--white); font-size: 0.6875rem; font-weight: 500; padding: 2px 7px; border-radius: 999px; font-family: var(--ff-mono, monospace); } .prodp-card-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; align-items: center; font-size: 0.625rem; } .prodp-card-tracked { font-family: var(--ff-mono, monospace); font-size: 0.6875rem; color: var(--dim); margin-left: auto; } /* Risk + status badges. Same palette as schedp- so the office's eye carries learned meaning across the two pages. */ .prodp-risk-pill { font-family: var(--ff-mono, monospace); font-weight: 700; letter-spacing: 0.05em; font-size: 0.625rem; text-transform: uppercase; padding: 1px 5px; border-radius: 3px; border: 1px solid transparent; } .prodp-risk-pill.on_track { color: var(--risk-on-track); border-color: var(--risk-on-track); } .prodp-risk-pill.at_risk { color: var(--risk-at-risk); border-color: var(--risk-at-risk); } .prodp-risk-pill.late { color: var(--risk-late); border-color: var(--risk-late); } .prodp-risk-pill.already_late { color: var(--risk-late); border-color: var(--risk-late); background: color-mix(in srgb, var(--risk-late) 14%, transparent); } .prodp-risk-pill.unknown { color: var(--dim); border-color: var(--bdr); } .prodp-risk-dot { font-size: 1rem; line-height: 1; } .prodp-risk-dot.on_track { color: var(--risk-on-track); } .prodp-risk-dot.at_risk { color: var(--risk-at-risk); } .prodp-risk-dot.late { color: var(--risk-late); } .prodp-rush-pill { background: var(--risk-late); color: #fff; font-weight: 700; letter-spacing: 0.05em; font-size: 0.625rem; text-transform: uppercase; padding: 1px 5px; border-radius: 3px; } .prodp-blocked-pill { background: var(--warn, #facc15); color: #422006; font-weight: 700; letter-spacing: 0.05em; font-size: 0.625rem; text-transform: uppercase; padding: 1px 5px; border-radius: 3px; } .prodp-card-workers { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; } .prodp-card-worker { background: color-mix(in srgb, #facc15 18%, var(--bg)); border: 1px solid color-mix(in srgb, #facc15 35%, var(--bdr)); color: var(--white); font-size: 0.6875rem; padding: 2px 8px; border-radius: 999px; font-family: var(--ff-mono, monospace); display: inline-flex; align-items: center; gap: 4px; } .prodp-card-worker-at { color: var(--dim); font-weight: 500; } .prodp-card-worker-stn { color: var(--white); font-weight: 700; } .prodp-card-noworker { font-size: 0.6875rem; color: var(--dim); font-style: italic; margin-top: 6px; } /* The 7-phase progress strip is rendered by the existing _ipdRenderProgress helper (ipd-prog-* classes). We only need to size it down for the card density. */ .prodp-card .ipd-prog { margin-top: 8px; } .prodp-card .ipd-prog-bar { height: 6px; } /* ── Detail pane ──────────────────────────────────────────── */ .prodp-detail { background: var(--pn); border: 1px solid var(--bdr); border-radius: 10px; padding: 18px 20px; position: sticky; top: 16px; max-height: calc(100vh - 280px); overflow-y: auto; align-self: start; } .prodp-d-head { display: flex; flex-direction: column; gap: 4px; padding-bottom: 12px; border-bottom: 1px solid var(--bdr); margin-bottom: 14px; } .prodp-d-customer-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .prodp-d-customer { font-size: 1.25rem; font-weight: 700; color: var(--white); line-height: 1.2; } .prodp-d-jobnum { font-family: var(--ff-mono, monospace); font-size: 0.875rem; color: var(--dim); font-weight: 700; } .prodp-d-sub { font-family: var(--ff-mono, monospace); font-size: 0.75rem; color: var(--dim); } .prodp-d-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .prodp-d-section { padding-top: 12px; margin-top: 12px; border-top: 1px dashed var(--bdr); } .prodp-d-section:first-of-type { border-top: none; margin-top: 0; padding-top: 0; } .prodp-d-section-h { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); margin-bottom: 8px; } .prodp-d-grid { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; font-size: 0.8125rem; color: var(--white); } .prodp-d-grid dt { color: var(--dim); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; align-self: center; } .prodp-d-grid dd { margin: 0; } .prodp-d-grid dd.mono { font-family: var(--ff-mono, monospace); font-size: 0.8125rem; } .prodp-d-grid dd.muted { color: var(--dim); font-style: italic; } .prodp-d-grid dd a { color: var(--acc); text-decoration: none; } .prodp-d-grid dd a:hover { text-decoration: underline; } .prodp-d-workflow { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px 12px; font-size: 0.75rem; } .prodp-d-wf-item { display: flex; align-items: baseline; gap: 6px; color: var(--white); } .prodp-d-wf-item.pending { color: var(--dim); } .prodp-d-wf-mark { font-family: var(--ff-mono, monospace); } .prodp-d-wf-mark.done { color: var(--risk-on-track); } .prodp-d-wf-mark.pending { color: var(--dim); } .prodp-d-wf-date { font-family: var(--ff-mono, monospace); font-size: 0.6875rem; color: var(--dim); margin-left: auto; } .prodp-d-workers { display: flex; flex-direction: column; gap: 4px; } .prodp-d-worker { display: flex; align-items: baseline; gap: 8px; font-size: 0.8125rem; color: var(--white); } .prodp-d-worker-dot { width: 8px; height: 8px; border-radius: 50%; background: #facc15; display: inline-block; box-shadow: 0 0 0 0 color-mix(in srgb, #facc15 50%, transparent); animation: prodp-pulse 1.4s ease-in-out infinite; flex: 0 0 auto; } @keyframes prodp-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, #facc15 50%, transparent); } 50% { box-shadow: 0 0 0 5px color-mix(in srgb, #facc15 0%, transparent); } } .prodp-d-worker-name { font-weight: 700; } .prodp-d-worker-at { color: var(--dim); font-family: var(--ff-mono, monospace); font-size: 0.6875rem; } .prodp-d-worker-stn { font-family: var(--ff-mono, monospace); font-size: 0.75rem; color: var(--white); } .prodp-d-worker-dur { margin-left: auto; font-family: var(--ff-mono, monospace); font-size: 0.6875rem; color: var(--dim); } .prodp-d-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--bdr); } /* ── PR-IPD-3 (2026-05-23) — Inline per-station timeline + worker aggregate. Loads async after the row is selected. ──────── */ .prodp-d-timeline-pending { color: var(--dim); font-style: italic; font-size: 0.75rem; padding: 6px 0; } .prodp-d-timeline-error { color: var(--risk-late); font-size: 0.75rem; padding: 6px 0; } .prodp-d-station { margin-bottom: 14px; } .prodp-d-station:last-child { margin-bottom: 0; } .prodp-d-station-head { display: flex; align-items: baseline; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid var(--bdr); margin-bottom: 4px; } .prodp-d-station-name { font-size: 0.8125rem; font-weight: 700; color: var(--white); letter-spacing: 0.02em; } .prodp-d-station-tot { font-family: var(--ff-mono, monospace); font-size: 0.6875rem; color: var(--dim); } .prodp-d-station-open { font-family: var(--ff-mono, monospace); font-size: 0.6875rem; font-weight: 700; color: var(--risk-at-risk); } .prodp-d-entries { display: flex; flex-direction: column; gap: 2px; padding-left: 2px; } .prodp-d-entry { display: grid; grid-template-columns: 14px max-content 1fr max-content; align-items: baseline; gap: 8px; font-size: 0.75rem; color: var(--white); padding: 2px 0; } .prodp-d-entry.open { background: color-mix(in srgb, #facc15 8%, transparent); margin: 0 -4px; padding-left: 4px; padding-right: 4px; border-radius: 4px; } .prodp-d-entry-mark { color: var(--dim); text-align: center; } .prodp-d-entry-worker { font-weight: 600; } .prodp-d-entry-when { font-family: var(--ff-mono, monospace); font-size: 0.6875rem; color: var(--dim); } .prodp-d-entry-dur { font-family: var(--ff-mono, monospace); font-size: 0.6875rem; color: var(--white); justify-self: end; } .prodp-d-redo { font-size: 0.6875rem; color: var(--risk-at-risk); margin: 2px 0 4px 22px; padding: 3px 8px; background: color-mix(in srgb, var(--risk-at-risk) 10%, var(--pn)); border-left: 2px solid var(--risk-at-risk); border-radius: 0 4px 4px 0; } .prodp-d-redo-tag { font-weight: 700; letter-spacing: 0.06em; font-family: var(--ff-mono, monospace); font-size: 0.625rem; margin-right: 6px; text-transform: uppercase; } .prodp-d-bywkr-row { display: grid; grid-template-columns: 14px max-content 1fr max-content; align-items: center; gap: 8px; font-size: 0.8125rem; color: var(--white); padding: 4px 0; } .prodp-d-bywkr-row.active { background: color-mix(in srgb, #facc15 8%, transparent); margin: 0 -4px; padding-left: 4px; padding-right: 4px; border-radius: 4px; } .prodp-d-bywkr-spacer { width: 8px; height: 8px; } .prodp-d-bywkr-name { font-weight: 700; } .prodp-d-bywkr-stations { display: flex; flex-wrap: wrap; gap: 3px; min-width: 0; } .prodp-d-bywkr-stn { background: var(--bg); border: 1px solid var(--bdr); font-family: var(--ff-mono, monospace); font-size: 0.625rem; color: var(--dim); padding: 1px 6px; border-radius: 999px; } .prodp-d-bywkr-total { font-family: var(--ff-mono, monospace); font-size: 0.75rem; color: var(--white); font-weight: 700; justify-self: end; } /* Legend strip — bottom of page, mirrors schedp legend pattern. */ .prodp-legend { display: flex; flex-wrap: wrap; gap: 14px; padding: 10px 24px 18px; border-top: 1px solid var(--bdr); font-size: 0.6875rem; color: var(--dim); background: var(--bg); } .prodp-legend-item { display: inline-flex; align-items: center; gap: 6px; } .prodp-legend-hint { margin-left: auto; font-style: italic; } @media print { .prodp-no-print, .sidebar, .prodp-toolbar, .prodp-legend { display: none !important; } body * { visibility: hidden; } #pg-production, #pg-production * { visibility: visible; } #pg-production { position: absolute; left: 0; top: 0; width: 100%; } .prodp-shell { grid-template-columns: 1fr 1fr; } .prodp-detail { position: static; max-height: none; } .prodp-list { max-height: none; } } @media (max-width: 980px) { .prodp-shell { grid-template-columns: 1fr; } .prodp-detail { position: static; max-height: none; } .prodp-list { max-height: 50vh; } } /* ── /PR-IPD-2 ──────────────────────────────────────────────────── */ /* Hub right-rail content — refined typography for theme + units cards. */ body[data-ui-version="ascut"] #hub-rail-themes, body[data-ui-version="ascut"] #hub-rail-units { background: var(--pn); border: 1px solid var(--bdr); border-radius: 12px; padding: 16px; } /* Tab content slot — gentle vertical rhythm. */ body[data-ui-version="ascut"] #pg-hub .tc { padding-top: 4px; } @media (prefers-reduced-motion: reduce) { body[data-ui-version="ascut"] .hub-page-header .hub-primary-action, body[data-ui-version="ascut"] .hub-studio-shortcut { transition: none; } body[data-ui-version="ascut"] .hub-page-header .hub-primary-action:hover, body[data-ui-version="ascut"] .hub-page-header .hub-primary-action:focus-visible { transform: none; } body[data-ui-version="ascut"] .hub-page-header .hub-primary-action:active, body[data-ui-version="ascut"] .hub-studio-shortcut:active { transform: none; } } /* ── /PR-ASCUT-HUB ─────────────────────────────────────────────── */ /* ── PR-ASCUT-FORMS — buttons, inputs, toasts ─────────────────── */ /* Primary button (.ba) — accent gradient + drop shadow + scale press */ body[data-ui-version="ascut"] .ba { background: linear-gradient(135deg, var(--acc) 0%, color-mix(in srgb, var(--acc) 80%, var(--acc2)) 100%); color: var(--acc-ink); border: 1px solid color-mix(in srgb, var(--acc) 55%, var(--acc2)); border-radius: 8px; font-weight: 600; letter-spacing: 0.01em; box-shadow: 0 2px 8px color-mix(in srgb, var(--acc) 22%, transparent); transition: filter 140ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 140ms cubic-bezier(0.22, 1, 0.36, 1), transform 80ms cubic-bezier(0.22, 1, 0.36, 1); } body[data-ui-version="ascut"] .ba:hover:not(:disabled) { filter: brightness(1.08); box-shadow: 0 4px 14px color-mix(in srgb, var(--acc) 35%, transparent); } body[data-ui-version="ascut"] .ba:active:not(:disabled) { transform: scale(0.98); } body[data-ui-version="ascut"] .ba:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; } body[data-ui-version="ascut"] .ba:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; } /* Ghost button (.bg) — neutral surface, accent hover */ body[data-ui-version="ascut"] .bg { background: var(--pn); border: 1px solid var(--bdr); border-radius: 8px; color: var(--txt); font-weight: 600; transition: background 140ms cubic-bezier(0.22, 1, 0.36, 1), border-color 140ms cubic-bezier(0.22, 1, 0.36, 1), transform 80ms cubic-bezier(0.22, 1, 0.36, 1); } body[data-ui-version="ascut"] .bg:hover:not(:disabled) { background: color-mix(in srgb, var(--acc) 8%, var(--pn)); border-color: color-mix(in srgb, var(--acc) 50%, var(--bdr)); color: var(--acc); } body[data-ui-version="ascut"] .bg:active:not(:disabled) { transform: scale(0.98); } body[data-ui-version="ascut"] .bg:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; } /* Semantic buttons — ok/danger/warn — refined gradient + drop shadow */ body[data-ui-version="ascut"] .bk { background: linear-gradient(135deg, var(--ok) 0%, color-mix(in srgb, var(--ok) 80%, #000) 100%); color: var(--ok-ink, #000); border: 1px solid color-mix(in srgb, var(--ok) 55%, var(--bdr)); border-radius: 8px; font-weight: 600; box-shadow: 0 2px 8px color-mix(in srgb, var(--ok) 22%, transparent); } body[data-ui-version="ascut"] .bk:hover:not(:disabled) { filter: brightness(1.08); box-shadow: 0 4px 14px color-mix(in srgb, var(--ok) 35%, transparent); } body[data-ui-version="ascut"] .br { background: linear-gradient(135deg, var(--no) 0%, color-mix(in srgb, var(--no) 80%, #000) 100%); color: #fff; border: 1px solid color-mix(in srgb, var(--no) 55%, var(--bdr)); border-radius: 8px; font-weight: 600; box-shadow: 0 2px 8px color-mix(in srgb, var(--no) 22%, transparent); } body[data-ui-version="ascut"] .br:hover:not(:disabled) { filter: brightness(1.08); box-shadow: 0 4px 14px color-mix(in srgb, var(--no) 35%, transparent); } body[data-ui-version="ascut"] .bw { background: linear-gradient(135deg, var(--warn) 0%, color-mix(in srgb, var(--warn) 80%, #000) 100%); color: #1a1410; border: 1px solid color-mix(in srgb, var(--warn) 55%, var(--bdr)); border-radius: 8px; font-weight: 600; box-shadow: 0 2px 8px color-mix(in srgb, var(--warn) 22%, transparent); } /* Form inputs — refined focus rings; sets the input/select/textarea interaction language for the entire app. */ body[data-ui-version="ascut"] input[type="text"], body[data-ui-version="ascut"] input[type="password"], body[data-ui-version="ascut"] input[type="email"], body[data-ui-version="ascut"] input[type="number"], body[data-ui-version="ascut"] input[type="search"], body[data-ui-version="ascut"] input[type="tel"], body[data-ui-version="ascut"] input[type="url"], body[data-ui-version="ascut"] input:not([type]), body[data-ui-version="ascut"] select, body[data-ui-version="ascut"] textarea { border-radius: 8px; transition: border-color 140ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 140ms cubic-bezier(0.22, 1, 0.36, 1); } body[data-ui-version="ascut"] input[type="text"]:focus, body[data-ui-version="ascut"] input[type="password"]:focus, body[data-ui-version="ascut"] input[type="email"]:focus, body[data-ui-version="ascut"] input[type="number"]:focus, body[data-ui-version="ascut"] input[type="search"]:focus, body[data-ui-version="ascut"] input[type="tel"]:focus, body[data-ui-version="ascut"] input[type="url"]:focus, body[data-ui-version="ascut"] input:not([type]):focus, body[data-ui-version="ascut"] select:focus, body[data-ui-version="ascut"] textarea:focus { border-color: var(--acc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 22%, transparent); outline: none; } /* Toasts — refined depth, accent-tinted left edge by variant */ body[data-ui-version="ascut"] .toast { border-radius: 12px; backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); background: color-mix(in srgb, var(--toast-bg, var(--pn)) 92%, transparent); box-shadow: 0 16px 48px rgb(var(--shadow-ink) / 0.55), inset 0 1px 0 color-mix(in srgb, var(--acc) 18%, transparent); font-weight: 500; font-size: 13px; } body[data-ui-version="ascut"] .toast.toast-ok, body[data-ui-version="ascut"] .toast.ok { border-left-color: var(--ok); } body[data-ui-version="ascut"] .toast.toast-warn, body[data-ui-version="ascut"] .toast.warn { border-left-color: var(--warn); } body[data-ui-version="ascut"] .toast.toast-err, body[data-ui-version="ascut"] .toast.err { border-left-color: var(--no); } @media (prefers-reduced-motion: reduce) { body[data-ui-version="ascut"] .ba, body[data-ui-version="ascut"] .bg, body[data-ui-version="ascut"] input[type="text"], body[data-ui-version="ascut"] input[type="password"], body[data-ui-version="ascut"] input[type="email"], body[data-ui-version="ascut"] input[type="number"], body[data-ui-version="ascut"] input[type="search"], body[data-ui-version="ascut"] select, body[data-ui-version="ascut"] textarea { transition: none; } body[data-ui-version="ascut"] .ba:active:not(:disabled), body[data-ui-version="ascut"] .bg:active:not(:disabled) { transform: none; } } /* ── /PR-ASCUT-FORMS ───────────────────────────────────────────── */ /* ── PR-ASCUT-DRAWERS — drawer chrome + inspector badges ──────── */ /* Drawer h2 / subtitle — refined typography */ body[data-ui-version="ascut"] .drawer h2 { color: var(--txt); font-size: 22px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; margin: 0 0 8px 0; } body[data-ui-version="ascut"] .drawer .sub { color: var(--dim); font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0 0 24px 0; max-width: 60ch; } /* Drawer close button — refined hover with accent halo */ body[data-ui-version="ascut"] .drawer-close { border-radius: 10px; transition: background 140ms cubic-bezier(0.22, 1, 0.36, 1), color 140ms cubic-bezier(0.22, 1, 0.36, 1); } body[data-ui-version="ascut"] .drawer-close:hover { background: color-mix(in srgb, var(--no) 14%, transparent); color: var(--no); } body[data-ui-version="ascut"] .drawer-close:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; } /* Inspector badges (.insp-inherits, .insp-overridden) — refined pills */ body[data-ui-version="ascut"] .insp-badge { border-radius: 999px; font-weight: 600; font-size: 10px; letter-spacing: 0.04em; padding: 3px 9px; } body[data-ui-version="ascut"] .insp-badge.insp-inherits { background: color-mix(in srgb, var(--bdr) 60%, transparent); border: 1px solid var(--bdr); color: var(--dim); } /* PR-TIER-CHIPS: the AsCut skin keeps its refined pill shape but takes the same tier palette — these must out-rank the gray ascut rule above, hence they repeat the body[data-ui-version] prefix. */ body[data-ui-version="ascut"] .insp-badge.insp-inherits.insp-tier-job { background: color-mix(in srgb, var(--tier-job) 10%, transparent); border-color: color-mix(in srgb, var(--tier-job) 45%, var(--bdr)); color: var(--tier-job); } body[data-ui-version="ascut"] .insp-badge.insp-inherits.insp-tier-shop { background: color-mix(in srgb, var(--tier-shop) 10%, transparent); border-color: color-mix(in srgb, var(--tier-shop) 45%, var(--bdr)); color: var(--tier-shop); } body[data-ui-version="ascut"] .insp-badge.insp-overridden { background: color-mix(in srgb, var(--tier-cab) 16%, transparent); border: 1px solid color-mix(in srgb, var(--tier-cab) 45%, var(--bdr)); color: var(--tier-cab); } body[data-ui-version="ascut"] .insp-reset { border-radius: 6px; transition: background 120ms cubic-bezier(0.22, 1, 0.36, 1), border-color 120ms cubic-bezier(0.22, 1, 0.36, 1), color 120ms cubic-bezier(0.22, 1, 0.36, 1); } body[data-ui-version="ascut"] .insp-reset:hover { background: color-mix(in srgb, var(--acc) 14%, var(--inp)); border-color: color-mix(in srgb, var(--acc) 45%, var(--bdr)); color: var(--acc); } /* Tab strips (used across cab-editor, libraries, etc.) — refined active state. Most tab strips use .tab class. */ body[data-ui-version="ascut"] .tab { border-radius: 8px 8px 0 0; transition: background 140ms cubic-bezier(0.22, 1, 0.36, 1), color 140ms cubic-bezier(0.22, 1, 0.36, 1); } body[data-ui-version="ascut"] .tab:hover:not(.on) { background: color-mix(in srgb, var(--acc) 6%, transparent); color: var(--txt); } body[data-ui-version="ascut"] .tab.on { background: var(--pn); color: var(--acc); font-weight: 600; border-bottom: 2px solid var(--acc); } @media (prefers-reduced-motion: reduce) { body[data-ui-version="ascut"] .drawer-close, body[data-ui-version="ascut"] .insp-reset, body[data-ui-version="ascut"] .tab { transition: none; } } /* ── /PR-ASCUT-DRAWERS ─────────────────────────────────────────── */ /* ── PR-DOOR-REV-DRAWER (Wave 5.6, 2026-05-17) — revision-history drawer ── */ /* Fixed-position panel that slides in from the right edge. Hidden by default (aria-hidden=true + transform off-screen). When .open is added, slides into view. Width matches the existing ds-param-panel (360px) for visual consistency with the rest of Door Studio. */ .rev-drawer { position: fixed; top: 0; right: 0; width: 380px; max-width: 100vw; height: 100vh; background: var(--inp); border-left: 1px solid var(--bdr); box-shadow: -4px 0 16px rgb(var(--shadow-ink) / .25); transform: translateX(100%); transition: transform .22s ease; z-index: 1000; display: flex; flex-direction: column; overflow: hidden; } .rev-drawer.open { transform: translateX(0); } /* PR-OVERLAY-RULE (2026-08-28): scrim under the revision drawer. Sits one z-index below it, so it catches every click the drawer does not and nothing behind can be hit by accident. */ .rev-scrim { position: fixed; inset: 0; z-index: 999; background: rgba(15,23,42,.38); } .rev-scrim[hidden] { display: none; } .rev-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--bdr); background: color-mix(in srgb, var(--inp) 90%, var(--bg)); } .rev-list { flex: 0 0 auto; max-height: 45%; overflow-y: auto; padding: 8px 6px; border-bottom: 1px solid var(--bdr); } .rev-row { display: block; width: 100%; text-align: left; background: transparent; border: 1px solid transparent; border-radius: 6px; color: var(--txt); padding: 10px 12px; margin-bottom: 4px; cursor: pointer; min-height: 44px; font-size: 13px; line-height: 1.4; } .rev-row:hover { background: color-mix(in srgb, var(--acc) 8%, transparent); border-color: color-mix(in srgb, var(--acc) 25%, transparent); } .rev-row.selected { background: color-mix(in srgb, var(--acc) 12%, transparent); border-color: var(--acc); } .rev-row .rev-num { font-weight: 600; color: var(--txt); } .rev-row .rev-time { color: var(--dim); font-size: 11px; margin-left: 6px; } .rev-row .rev-note { color: var(--dim); font-size: 12px; margin-top: 3px; font-style: italic; } .rev-row .rev-note-empty { color: color-mix(in srgb, var(--dim) 70%, transparent); } .rev-diff { flex: 1 1 auto; overflow-y: auto; padding: 12px 16px; font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 12px; line-height: 1.5; color: var(--txt); } .rev-diff h4 { margin: 0 0 6px; font-family: inherit; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--dim); } .rev-diff .rev-group { margin-bottom: 14px; padding: 10px 12px; border-radius: 6px; background: color-mix(in srgb, var(--bg) 55%, transparent); border: 1px solid var(--bdr); } .rev-diff .rev-group-head { font-weight: 700; margin-bottom: 6px; } .rev-diff .rev-field { padding-left: 12px; margin: 2px 0; } .rev-diff .rev-piece { padding-left: 8px; margin: 4px 0; border-left: 2px solid var(--bdr); padding-left: 12px; } .rev-diff .rev-add { color: #22c55e; } /* AsCut green */ .rev-diff .rev-remove { color: #f43f5e; } /* AsCut rose */ .rev-diff .rev-mod { color: #f59e0b; } /* AsCut amber */ .rev-diff .rev-arrow { color: var(--dim); } .rev-diff .rev-empty { color: var(--dim); font-style: italic; padding: 8px 0; } /* ── /PR-DOOR-REV-DRAWER ───────────────────────────────────────────── */ /* ── PR-DOOR-LIVE-VALIDATION (E-1 close-out 2026-05-17) — piece-edit-time chip ── */ /* Warning surface that sits below the piece-input row. Fires the moment an operator types a width/height that trips a validator (arch min-chord, warp envelope) — not at cutlist-download time. One
per warning, color-coded by severity. */ .ds-piece-warn { margin: 8px 0 4px; display: flex; flex-direction: column; gap: 4px; } .ds-piece-warn .ds-piece-warn-row { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border-radius: 6px; font-size: 12px; line-height: 1.4; border: 1px solid transparent; } .ds-piece-warn .ds-piece-warn-row svg { flex: 0 0 16px; margin-top: 1px; } .ds-piece-warn .ds-piece-warn-row.ds-warn { background: color-mix(in srgb, #f59e0b 12%, transparent); border-color: color-mix(in srgb, #f59e0b 40%, transparent); color: #f59e0b; } .ds-piece-warn .ds-piece-warn-row.ds-error { background: color-mix(in srgb, #f43f5e 14%, transparent); border-color: color-mix(in srgb, #f43f5e 50%, transparent); color: #f43f5e; } .ds-piece-warn .ds-piece-warn-row.ds-info { background: color-mix(in srgb, #22c55e 10%, transparent); border-color: color-mix(in srgb, #22c55e 35%, transparent); color: #22c55e; } /* ── /PR-DOOR-LIVE-VALIDATION ──────────────────────────────────────── */ /* ── PR-ASCUT-DOOR — Door Studio polish ──────────────────────── */ /* Page header inside pg-door */ body[data-ui-version="ascut"] #pg-door h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--txt); } /* Door tab strip (dtab) */ body[data-ui-version="ascut"] #pg-door .tab { border-radius: 8px 8px 0 0; padding: 10px 16px; } /* Doors table (orders list) */ body[data-ui-version="ascut"] #pg-door table { border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; } body[data-ui-version="ascut"] #pg-door table th { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); border-bottom: 1px solid var(--bdr); padding: 10px 12px; } body[data-ui-version="ascut"] #pg-door table tbody tr { transition: background 120ms cubic-bezier(0.22, 1, 0.36, 1); } body[data-ui-version="ascut"] #pg-door table tbody tr:hover { background: color-mix(in srgb, var(--acc) 5%, transparent); } /* Door Studio wizard step container (Bundles 1-5) gets a ascut card-like background to differentiate from the page body */ body[data-ui-version="ascut"] #pg-door .ds-bundle { background: var(--pn); border: 1px solid var(--bdr); border-radius: 12px; padding: 24px; } /* PR-DS-WIZARD-ALIGN (2026-08-01): join the step bar to the panel below so they read as ONE card — the bar is the rounded-top header, the param-panel is the square-top body. Drops the panel's top radius + top border so there's a single seam (the bar's border-bottom), not a double hairline with a gap. */ body[data-ui-version="ascut"] #pg-door .ds-param-panel { border-top-left-radius: 0; border-top-right-radius: 0; border-top: none; } /* Door library table */ body[data-ui-version="ascut"] #dl-table table { border-collapse: separate; border-spacing: 0; } body[data-ui-version="ascut"] #dl-table table tr { transition: background 120ms cubic-bezier(0.22, 1, 0.36, 1); } body[data-ui-version="ascut"] #dl-table table tr:hover { background: color-mix(in srgb, var(--acc) 5%, transparent); cursor: pointer; } @media (prefers-reduced-motion: reduce) { body[data-ui-version="ascut"] #pg-door table tbody tr, body[data-ui-version="ascut"] #dl-table table tr { transition: none; } } /* ── /PR-ASCUT-DOOR ────────────────────────────────────────────── */ /* ── PR-ASCUT-CAB — Cabinet Studio dashboard polish ──────────── */ body[data-ui-version="ascut"] #pg-cab h1, body[data-ui-version="ascut"] #pg-cab .cab-page-title { font-size: 28px; font-weight: 700; letter-spacing: -0.015em; color: var(--txt); } body[data-ui-version="ascut"] #pg-cab h2 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--txt); } /* Metrics ribbon container */ body[data-ui-version="ascut"] .metrics-ribbon { background: var(--pn); border: 1px solid var(--bdr); border-radius: 12px; overflow: hidden; } body[data-ui-version="ascut"] .metric-cell { padding: 16px 20px; } body[data-ui-version="ascut"] .metric-cell .metric-value { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } body[data-ui-version="ascut"] .metric-cell .metric-label { font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } /* Job hub report tile grid container */ body[data-ui-version="ascut"] #cab-job-reports { gap: 12px; } /* Room card chips */ body[data-ui-version="ascut"] .cab-room-card { background: var(--pn); border: 1px solid var(--bdr); border-radius: 12px; transition: border-color 180ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 180ms cubic-bezier(0.22, 1, 0.36, 1), transform 180ms cubic-bezier(0.22, 1, 0.36, 1); } body[data-ui-version="ascut"] .cab-room-card:hover { border-color: color-mix(in srgb, var(--acc) 45%, var(--bdr)); box-shadow: 0 6px 18px color-mix(in srgb, var(--acc) 14%, transparent); transform: translateY(-2px); } @media (prefers-reduced-motion: reduce) { body[data-ui-version="ascut"] .cab-room-card { transition: none; } body[data-ui-version="ascut"] .cab-room-card:hover { transform: none; } } /* ── /PR-ASCUT-CAB ─────────────────────────────────────────────── */ /* ── PR-ASCUT-WIZARD — wizard step-dot polish ────────────────── */ /* PR-WIZ-UX: the base rule moved the dot's visual circle to ::before so the clickable element can be a 44×44 tap target. The ascut polish (gradient active fill, done tint, thicker border, glow) therefore has to paint ::before too — otherwise it would re-fill the whole 44px box. color stays on the element (it's the number text). */ body[data-ui-version="ascut"] .njwiz-stepdot::before { border-width: 2px; transition: background 160ms cubic-bezier(0.22, 1, 0.36, 1), border-color 160ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 160ms cubic-bezier(0.22, 1, 0.36, 1); } body[data-ui-version="ascut"] .njwiz-stepdot.active { color: var(--acc-ink); } body[data-ui-version="ascut"] .njwiz-stepdot.active::before { background: linear-gradient(135deg, var(--acc) 0%, var(--acc2) 100%); border-color: var(--acc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 25%, transparent); } body[data-ui-version="ascut"] .njwiz-stepdot.done { color: var(--acc); } body[data-ui-version="ascut"] .njwiz-stepdot.done::before { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 12%, transparent); } body[data-ui-version="ascut"] .njwiz-stepline { transition: background 160ms cubic-bezier(0.22, 1, 0.36, 1); } body[data-ui-version="ascut"] .njwiz-stepline.done { background: linear-gradient(90deg, var(--acc) 0%, color-mix(in srgb, var(--acc) 70%, var(--bdr)) 100%); } /* PR-WIZ-UX: the "Shop default" badge was accent-blue — visually identical to the "Modified" (.njwiz-overrided-badge) badge, so the operator couldn't tell an untouched field from an edited one. Make it NEUTRAL grey so blue == "you changed this" is an unambiguous signal. */ body[data-ui-version="ascut"] .njwiz-shopdef-badge { background: rgba(127,127,127,0.15); border: 1px solid var(--bdr); color: var(--dim); border-radius: 999px; padding: 2px 8px; font-weight: 700; letter-spacing: 0.04em; } /* PR-WIZ-UX: sentence case at 12px scans faster than uppercase 11px. */ body[data-ui-version="ascut"] .njwiz-pageinfo { font-weight: 600; letter-spacing: 0.04em; font-size: 12px; } @media (prefers-reduced-motion: reduce) { body[data-ui-version="ascut"] .njwiz-stepdot, body[data-ui-version="ascut"] .njwiz-stepline { transition: none; } } /* ── /PR-ASCUT-WIZARD ──────────────────────────────────────────── */ /* ── PR-ASCUT-LIB — Library tables + thumbnails polish ────────── */ body[data-ui-version="ascut"] .lib-table { border-radius: 12px; font-variant-numeric: tabular-nums; } body[data-ui-version="ascut"] .lib-table thead th { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; background: color-mix(in srgb, var(--pn) 92%, var(--acc)); border-bottom: 1px solid var(--bdr); color: var(--dim); } body[data-ui-version="ascut"] .lib-table tbody tr { transition: background 120ms cubic-bezier(0.22, 1, 0.36, 1); } body[data-ui-version="ascut"] .lib-table tbody tr:hover { background: color-mix(in srgb, var(--acc) 6%, transparent); cursor: pointer; } body[data-ui-version="ascut"] .lib-table .lib-thumb { border-radius: 8px; border: 1px solid color-mix(in srgb, var(--acc) 12%, var(--bdr)); background: linear-gradient(135deg, var(--inp) 0%, color-mix(in srgb, var(--inp) 80%, var(--bg)) 100%); } body[data-ui-version="ascut"] .lib-chips { gap: 6px; } @media (prefers-reduced-motion: reduce) { body[data-ui-version="ascut"] .lib-table tbody tr { transition: none; } } /* ── /PR-ASCUT-LIB ─────────────────────────────────────────────── */ /* ── PR-ASCUT-TOOLTIPS — jd-help popover polish ───────────────── */ body[data-ui-version="ascut"] .jd-help { color: var(--acc); border-color: color-mix(in srgb, var(--acc) 45%, var(--bdr)); background: color-mix(in srgb, var(--acc) 8%, transparent); transition: background 140ms cubic-bezier(0.22, 1, 0.36, 1), border-color 140ms cubic-bezier(0.22, 1, 0.36, 1), color 140ms cubic-bezier(0.22, 1, 0.36, 1); } body[data-ui-version="ascut"] .jd-help:hover { background: color-mix(in srgb, var(--acc) 22%, transparent); border-color: var(--acc); color: var(--acc); } /* AsCut popover — themed surface, refined depth, accent-tinted border with inner highlight. Overrides hardcoded #111 + 0.5 shadow. */ body[data-ui-version="ascut"] .jd-help:hover::after { background: color-mix(in srgb, var(--pn) 96%, transparent); color: var(--txt); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); border: 1px solid color-mix(in srgb, var(--acc) 28%, var(--bdr)); border-radius: 10px; padding: 8px 12px; font-size: 12px; line-height: 1.5; box-shadow: 0 12px 32px rgb(var(--shadow-ink) / 0.45), inset 0 1px 0 color-mix(in srgb, var(--acc) 18%, transparent); min-width: 220px; max-width: 340px; } body[data-ui-version="ascut"] .jd-help:hover::before { border-top-color: color-mix(in srgb, var(--pn) 96%, transparent); } /* ── /PR-ASCUT-TOOLTIPS ────────────────────────────────────────── */ /* ── PR-ASCUT-EMPTY — Empty state polish ─────────────────────── */ body[data-ui-version="ascut"] .empty-state { padding: 64px 24px; color: var(--dim); } body[data-ui-version="ascut"] .empty-state .ei { font-size: 32px; opacity: 0.7; margin-bottom: 16px; display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 18px; background: color-mix(in srgb, var(--acc) 10%, var(--pn)); border: 1px solid color-mix(in srgb, var(--acc) 22%, var(--bdr)); color: var(--acc); } body[data-ui-version="ascut"] .empty-state .et { color: var(--txt); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 6px; } body[data-ui-version="ascut"] .empty-state .es { color: var(--dim); font-size: 13px; line-height: 1.55; max-width: 360px; margin: 0 auto 18px; } /* ── /PR-ASCUT-EMPTY ───────────────────────────────────────────── */ /* ── PR-ASCUT-MSG — validation message polish ─────────────────── */ body[data-ui-version="ascut"] .msg { border-radius: 10px; font-weight: 500; line-height: 1.5; padding: 12px 14px; } body[data-ui-version="ascut"] .msg-ok { background: color-mix(in srgb, var(--ok) 12%, transparent); border: 1px solid color-mix(in srgb, var(--ok) 35%, var(--bdr)); color: var(--ok); } body[data-ui-version="ascut"] .msg-warn { background: color-mix(in srgb, var(--warn) 12%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 35%, var(--bdr)); color: var(--warn); } body[data-ui-version="ascut"] .msg-err { background: color-mix(in srgb, var(--no) 12%, transparent); border: 1px solid color-mix(in srgb, var(--no) 35%, var(--bdr)); color: var(--no); } /* Banner-style messages (used at the top of pages, e.g. print-warnings-banner) get a slightly bolder presentation. */ body[data-ui-version="ascut"] .print-warnings-banner, body[data-ui-version="ascut"] .print-blocked-banner { border-radius: 12px; font-weight: 600; padding: 14px 18px; } /* ── /PR-ASCUT-MSG ─────────────────────────────────────────────── */ /* ── PR-UI-CLEANUP-THEME (2026-06-30) — Theme picker: mini-window preview cards ── Operator: "make the themes look nicer to select." Each card is a small app-window mockup (titlebar + accent row + surface row + ok/warn/no chips) painted with the theme's REAL tokens (read at render time, see app-core.js _themeSwatches) so the preview is always accurate. Replaces the old flat 4-bar `.theme-picker-card` with the stale hardcoded hex. */ #settings-theme-picker, #home-theme-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 12px; } .theme-card { border: 1.5px solid var(--bdr); border-radius: 12px; background: var(--pn); padding: 12px; cursor: pointer; outline: none; transition: transform .16s cubic-bezier(.22,1,.36,1), box-shadow .16s cubic-bezier(.22,1,.36,1), border-color .16s cubic-bezier(.22,1,.36,1); } .theme-card:hover, .theme-card:focus-visible { transform: translateY(-2px); border-color: color-mix(in srgb, var(--acc) 55%, var(--bdr)); box-shadow: 0 8px 22px color-mix(in srgb, var(--acc) 16%, transparent); } .theme-card.active { border-color: var(--acc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 30%, transparent), 0 8px 24px color-mix(in srgb, var(--acc) 18%, transparent); } /* mini "app window" preview — bg/border/colors are inline (real tokens) */ .theme-card__preview { border: 1px solid var(--bdr); border-radius: 8px; padding: 9px; display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; box-shadow: inset 0 1px 0 rgba(255,255,255,.04); } .theme-card__preview .tc-titlebar { height: 7px; border-radius: 3px; opacity: .9; } .theme-card__preview .tc-row { height: 11px; border-radius: 3px; border: 1px solid transparent; } .theme-card__preview .tc-row--accent { width: 58%; } .theme-card__preview .tc-chips { display: flex; gap: 5px; margin-top: 1px; } .theme-card__preview .tc-chip { width: 11px; height: 11px; border-radius: 50%; box-shadow: 0 0 0 1px rgb(var(--shadow-ink) / .18); } .theme-card__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; } .theme-card__name { color: var(--txt); font-weight: 600; font-size: 13px; } .theme-card__active { color: var(--acc); font-size: 11px; font-weight: 600; } .theme-card__desc { color: var(--dim); font-size: 11px; line-height: 1.4; flex-basis: 100%; } @media (prefers-reduced-motion: reduce) { .theme-card { transition: none; } .theme-card:hover, .theme-card:focus-visible { transform: none; } } /* ── /PR-UI-CLEANUP-THEME ──────────────────────────────────────────── */ /* ── PR-ASCUT-RAIL — Hub right rail polish ───────────────────── */ body[data-ui-version="ascut"] .hub-rail-section { background: var(--pn); border: 1px solid var(--bdr); border-radius: 12px; padding: 16px; margin-bottom: 12px; } body[data-ui-version="ascut"] .hub-rail-label { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); margin-bottom: 10px; } body[data-ui-version="ascut"] .hub-rail-link { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--txt); font-size: 13px; font-weight: 500; text-decoration: none; transition: background 140ms cubic-bezier(0.22, 1, 0.36, 1), color 140ms cubic-bezier(0.22, 1, 0.36, 1); } body[data-ui-version="ascut"] .hub-rail-link svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--dim); transition: color 140ms cubic-bezier(0.22, 1, 0.36, 1); } body[data-ui-version="ascut"] .hub-rail-link:hover { background: color-mix(in srgb, var(--acc) 10%, transparent); color: var(--acc); } body[data-ui-version="ascut"] .hub-rail-link:hover svg { color: var(--acc); } /* Units toggle — pill button group */ body[data-ui-version="ascut"] .hub-rail-units { display: inline-flex; gap: 0; background: var(--inp); border: 1px solid var(--bdr); border-radius: 10px; padding: 3px; } body[data-ui-version="ascut"] .hub-rail-units button { border-radius: 7px; padding: 6px 14px; font-size: 12px; font-weight: 600; background: transparent; color: var(--dim); border: none; cursor: pointer; transition: background 140ms cubic-bezier(0.22, 1, 0.36, 1), color 140ms cubic-bezier(0.22, 1, 0.36, 1); } body[data-ui-version="ascut"] .hub-rail-units button:hover { color: var(--txt); } body[data-ui-version="ascut"] .hub-rail-units button[data-active="true"] { background: var(--pn); color: var(--acc); box-shadow: 0 1px 3px rgb(var(--shadow-ink) / 0.18), inset 0 0 0 1px color-mix(in srgb, var(--acc) 30%, var(--bdr)); } @media (prefers-reduced-motion: reduce) { body[data-ui-version="ascut"] .hub-rail-link, body[data-ui-version="ascut"] .hub-rail-link svg, body[data-ui-version="ascut"] .hub-rail-units button { transition: none; } } /* ── /PR-ASCUT-RAIL ────────────────────────────────────────────── */ /* ── PR-ASCUT-PALETTE — Command palette polish ───────────────── */ body[data-ui-version="ascut"] .gs-modal { backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); background: rgba(0,0,0,0.55); } body[data-ui-version="ascut"] .gs-modal .gs-panel { width: 640px; border-radius: 16px; background: color-mix(in srgb, var(--sf) 94%, transparent); border: 1px solid color-mix(in srgb, var(--acc) 18%, var(--bdr)); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); box-shadow: 0 32px 80px rgb(var(--shadow-ink) / 0.55), inset 0 1px 0 color-mix(in srgb, var(--acc) 16%, transparent); } body[data-ui-version="ascut"] .gs-modal .gs-input { font-size: 17px; font-weight: 500; padding: 20px 24px; background: transparent; letter-spacing: -0.01em; } body[data-ui-version="ascut"] .gs-modal .gs-results { padding: 6px; } body[data-ui-version="ascut"] .gs-modal .gs-result { padding: 10px 14px; border-radius: 10px; transition: background 120ms cubic-bezier(0.22, 1, 0.36, 1); } body[data-ui-version="ascut"] .gs-modal .gs-result:hover, body[data-ui-version="ascut"] .gs-modal .gs-result.sel { background: color-mix(in srgb, var(--acc) 14%, transparent); } body[data-ui-version="ascut"] .gs-modal .gs-result .gs-icon { border-radius: 8px; background: color-mix(in srgb, var(--acc) 12%, var(--pn)); border: 1px solid color-mix(in srgb, var(--acc) 22%, var(--bdr)); } body[data-ui-version="ascut"] .gs-modal .gs-result .gs-text .gs-title { color: var(--txt); font-weight: 600; font-size: 14px; } body[data-ui-version="ascut"] .gs-modal .gs-result .gs-text .gs-sub { font-size: 12px; } body[data-ui-version="ascut"] .gs-modal .gs-foot { background: color-mix(in srgb, var(--pn) 50%, transparent); padding: 12px 18px; } body[data-ui-version="ascut"] .gs-modal .gs-foot .kbd { background: var(--inp); color: var(--txt); border-radius: 6px; padding: 3px 7px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; } @media (prefers-reduced-motion: reduce) { body[data-ui-version="ascut"] .gs-modal .gs-result { transition: none; } }/* ── /PR-ASCUT-PALETTE ─────────────────────────────────────────── *//* ── PR-ASCUT-BUNDLE — Door Studio wizard step-bar polish ───── *//* PR-DS-WIZARD-ALIGN (2026-08-01): three-state legibility per operator — a step you CAN reach reads white, a locked one you can't reads grayed, and the one you're on reads blue. Previously every step defaulted to --dim (gray) and only lifted to white on hover, so the whole bar looked disabled and you couldn't tell available from locked at a glance. *//* Navigable (not current / complete / locked) number circle reads white on a brighter ring so it's clearly enabled, not grayed. */ @media (prefers-reduced-motion: reduce) { } /* ── /PR-ASCUT-BUNDLE ──────────────────────────────────────────── */ /* ── PR-ASCUT-VGATE — validation gate polish ─────────────────── */ body[data-ui-version="ascut"] .vgate-panel { border: 1px solid color-mix(in srgb, var(--no) 50%, var(--bdr)); border-left: 4px solid var(--no); border-radius: 12px; padding: 16px 20px; background: color-mix(in srgb, var(--no) 6%, var(--pn)); box-shadow: 0 12px 32px rgb(var(--shadow-ink) / 0.35), inset 0 1px 0 color-mix(in srgb, var(--no) 18%, transparent); } body[data-ui-version="ascut"] .vgate-panel.vgate-soft { border-color: color-mix(in srgb, var(--warn) 50%, var(--bdr)); border-left-color: var(--warn); background: color-mix(in srgb, var(--warn) 6%, var(--pn)); box-shadow: 0 12px 32px rgb(var(--shadow-ink) / 0.35), inset 0 1px 0 color-mix(in srgb, var(--warn) 18%, transparent); } body[data-ui-version="ascut"] .vgate-modal .vgate-panel { border-radius: 14px; width: 600px; } /* ── /PR-ASCUT-VGATE ───────────────────────────────────────────── */ /* ── PR-ASCUT-MISC — order table + miscellaneous polish ──────── */ body[data-ui-version="ascut"] .order-table { border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; } body[data-ui-version="ascut"] .order-table thead th { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); background: color-mix(in srgb, var(--pn) 95%, var(--acc)); border-bottom: 1px solid var(--bdr); } body[data-ui-version="ascut"] .order-table tbody tr { transition: background 120ms cubic-bezier(0.22, 1, 0.36, 1); } body[data-ui-version="ascut"] .order-table tbody tr:hover { background: color-mix(in srgb, var(--acc) 4%, transparent); } body[data-ui-version="ascut"] .order-table input, body[data-ui-version="ascut"] .order-table select { border-radius: 6px; border: 1px solid var(--bdr); background: var(--inp); padding: 6px 8px; font-variant-numeric: tabular-nums; } body[data-ui-version="ascut"] .order-table input:focus, body[data-ui-version="ascut"] .order-table select:focus { border-color: var(--acc); box-shadow: 0 0 0 2px color-mix(in srgb, var(--acc) 20%, transparent); outline: none; } /* Inspector labels (used in cabinet inspector and standards panels) */ body[data-ui-version="ascut"] .insp-label { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--dim); } /* Hub jobs add row (the "+ Add" trigger) — refined ghost */ body[data-ui-version="ascut"] .hub-jobs-add-row { border: 1px dashed var(--bdr); border-radius: 10px; color: var(--dim); transition: border-color 140ms cubic-bezier(0.22, 1, 0.36, 1), background 140ms cubic-bezier(0.22, 1, 0.36, 1), color 140ms cubic-bezier(0.22, 1, 0.36, 1); } body[data-ui-version="ascut"] .hub-jobs-add-row:hover { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 8%, transparent); color: var(--acc); } /* New-order CTA (Door studio "New Order" button) */ body[data-ui-version="ascut"] .new-order-cta { border-radius: 10px; font-weight: 600; background: linear-gradient(135deg, var(--acc) 0%, color-mix(in srgb, var(--acc) 80%, var(--acc2)) 100%); color: var(--acc-ink); box-shadow: 0 4px 14px color-mix(in srgb, var(--acc) 28%, transparent); transition: filter 140ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 140ms cubic-bezier(0.22, 1, 0.36, 1), transform 80ms cubic-bezier(0.22, 1, 0.36, 1); } body[data-ui-version="ascut"] .new-order-cta:hover { filter: brightness(1.08); box-shadow: 0 8px 22px color-mix(in srgb, var(--acc) 40%, transparent); } body[data-ui-version="ascut"] .new-order-cta:active { transform: scale(0.98); } /* AWS-2 badge (used in topbar showing standards mode) */ body[data-ui-version="ascut"] .aws-badge { background: color-mix(in srgb, var(--ok) 16%, transparent); border: 1px solid color-mix(in srgb, var(--ok) 35%, var(--bdr)); color: var(--ok); border-radius: 999px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } @media (prefers-reduced-motion: reduce) { body[data-ui-version="ascut"] .order-table tbody tr, body[data-ui-version="ascut"] .hub-jobs-add-row, body[data-ui-version="ascut"] .new-order-cta { transition: none; } body[data-ui-version="ascut"] .new-order-cta:active { transform: none; } } /* ── /PR-ASCUT-MISC ────────────────────────────────────────────── */ /* ── PR-ASCUT-ADMIN-REPORTS — admin Shop Reports KPI cards ───── */ body[data-ui-version="ascut"] .rep-kpi-card { border-radius: 12px !important; padding: 20px !important; transition: border-color 180ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 180ms cubic-bezier(0.22, 1, 0.36, 1), transform 180ms cubic-bezier(0.22, 1, 0.36, 1) !important; } body[data-ui-version="ascut"] .rep-kpi-card:hover { border-color: color-mix(in srgb, var(--acc) 40%, var(--bdr)) !important; box-shadow: 0 4px 14px color-mix(in srgb, var(--acc) 12%, transparent) !important; transform: translateY(-1px); } body[data-ui-version="ascut"] .rep-kpi-card .rep-kpi-value { font-size: 32px !important; font-weight: 700 !important; letter-spacing: -0.02em; } body[data-ui-version="ascut"] .rep-kpi-card > div:first-child { font-size: 11px !important; letter-spacing: 0.08em !important; font-weight: 700 !important; color: var(--dim) !important; margin-bottom: 8px !important; } @media (prefers-reduced-motion: reduce) { body[data-ui-version="ascut"] .rep-kpi-card { transition: none !important; } body[data-ui-version="ascut"] .rep-kpi-card:hover { transform: none; } } /* ── /PR-ASCUT-ADMIN-REPORTS ──────────────────────────────────── */ /* ── PR-ASCUT-HUB-TABS — Standards / Cutlists / Projects / Customers ── */ /* Generic tab content polish — applies to every .tc inside #pg-hub */ body[data-ui-version="ascut"] #pg-hub .tc h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--txt); margin-bottom: 8px; } body[data-ui-version="ascut"] #pg-hub .tc h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.005em; color: var(--txt); } /* Standards header bar — the one place the eye lands first. Flat, wide gutter, title ladder, and the single accent affordance (Save). */ body[data-ui-version="ascut"] .std-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; background: transparent; border: none; border-bottom: 1px solid color-mix(in srgb, var(--txt) 9%, transparent); border-radius: 0; padding: 4px 2px 18px; margin-bottom: 20px; } body[data-ui-version="ascut"] .std-header h2 { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--txt); margin: 0 0 4px 0; line-height: 1.15; } body[data-ui-version="ascut"] .std-subtitle { color: var(--dim); font-size: 13px; line-height: 1.5; letter-spacing: -0.003em; max-width: 64ch; margin: 0; } body[data-ui-version="ascut"] .std-header-status { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } /* Expand / Collapse all — quiet ghost pair. */ body[data-ui-version="ascut"] .std-header-status .bg { font-size: 12px !important; font-weight: 500; letter-spacing: -0.004em; padding: 7px 12px !important; height: 34px; border-radius: 9px !important; color: var(--dim) !important; background: transparent !important; border: 1px solid color-mix(in srgb, var(--txt) 12%, transparent) !important; transition: color 120ms ease, border-color 120ms ease; } body[data-ui-version="ascut"] .std-header-status .bg:hover { color: var(--txt) !important; border-color: color-mix(in srgb, var(--txt) 24%, transparent) !important; } /* Save — the ONLY accent surface on the page. Machined, deliberate. */ body[data-ui-version="ascut"] .std-save-btn { height: 34px; padding: 7px 18px !important; border-radius: 9px !important; font-size: 13px !important; font-weight: 600; letter-spacing: -0.006em; background: var(--acc) !important; border: 1px solid var(--acc) !important; color: #fff !important; transition: filter 120ms ease, transform 60ms ease; } body[data-ui-version="ascut"] .std-save-btn:hover { filter: brightness(1.06); } body[data-ui-version="ascut"] .std-save-btn:active { transform: translateY(0.5px); } body[data-ui-version="ascut"] .std-status-msg { color: var(--dim); font-size: 12px; font-weight: 500; } /* Cutlist viewer (.cutlist-out monospace text) */ body[data-ui-version="ascut"] .cutlist-out { font-family: 'JetBrains Mono', 'SF Mono', 'Consolas', ui-monospace, monospace !important; font-size: 12px !important; line-height: 1.55 !important; background: var(--inp); border: 1px solid var(--bdr); border-radius: 10px; padding: 14px 16px; } /* PR-DBOX-CUTLIST-SCROLL (2026-08-04): the Door Cutlist report box (#do-cutlist) inherits the shared .cutlist-out cap (max-height 720px + overflow:auto). On the door Reports view that nests a SECOND scrollbar inside the page scroll — scroll the wrong one and the whole cutlist slides out of view, leaving an empty panel (operator-reported "long scrollbar, content gone"). Let this one report flow with the page so there's a single, predictable scroll. Other .cutlist-out users (cutlist studio, confirm panel) keep the capped box. */ /* PR-CUTLIST-CONTAIN (2026-08-10): `overflow: visible` above fixed the VERTICAL double-scrollbar, but it also removed HORIZONTAL containment — and these rows are a fixed 105 monospace characters wide. On the split Reports view (.do-reports.split is a 50/50 grid) the card is roughly half the screen, so the text ran straight out past the card's right edge and under the neighbouring panel. Operator: "the words go outside the cutlist". The cap removal is the part worth keeping, so keep it and scroll the overflow instead of letting it escape: overflow-x: auto → long rows scroll INSIDE the card overflow-y: hidden → with max-height:none the box always grows to fit its content, so nothing can overflow vertically; this only stops the browser from pairing an unwanted y-scrollbar with the x one (CSS forces a non-visible y when x is non-visible, so `visible` here is not an option). Monospace column alignment is why this cannot simply wrap — a wrapped cutlist row is unreadable at the saw. Printing is unaffected: printDoorCutlist opens its own window and never renders this element. PR-CUTLIST-FIT (2026-08-10): scrolling contained the text but the operator did not want the scrollbar ("I don't like the long scroll bar at all"). `_dsFitCutlistToCard()` in door-studio.js now scales the font so the widest row fits the card exactly, which means the overflow it was scrolling no longer exists. NO SCROLLBAR (operator, 2026-08-10: "can you get rid of the bar"). `overflow-x: hidden` is only safe because the fitter's floor was dropped to a last-resort 4px, so the fit succeeds at ANY card width and there is nothing left to clip. The two must stay in sync: raise _DS_CUTLIST_MIN_PX back to a readability floor and this line starts silently cutting off the right-hand columns — a cutlist reaching the saw with no Length column, with nothing on screen to show it. If a floor is ever needed again, change this back to `auto` in the same edit. */ #do-cutlist { max-height: none; /* PR-REPORTS-ONE-AT-A-TIME (2026-08-15): overflow-x restored — the 2026-08-04 `overflow: visible` fix for the nested VERTICAL scrollbar also killed the horizontal escape valve, so wide drawer-box tables hard-clipped at the panel edge. With no height cap, the computed overflow-y:auto never shows a bar (the box just grows), while a too-narrow window now scrolls sideways instead of cutting columns off. (2026-08-15 merge: HEAD kept — this is the deliberate newer fix; origin's hidden/ hidden was the pre-fix state. 2026-08-21 merge: HEAD kept again vs the sheet-grain lineage's same pre-fix state.) */ overflow-x: auto; overflow-y: visible; } /* Cutlist sub-headers (when JS injects section dividers) */ body[data-ui-version="ascut"] .cutlist-out h4 { color: var(--acc); font-family: var(--ff-ui, inherit); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; margin: 12px 0 8px 0; } /* Stale cutlist banner */ body[data-ui-version="ascut"] .cutlist-stale { background: color-mix(in srgb, var(--warn) 12%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 35%, var(--bdr)); border-left: 4px solid var(--warn); border-radius: 10px; padding: 12px 16px; color: var(--warn); font-weight: 600; } /* Project + customer list rows (rendered by JS, typically with .pn class) */ body[data-ui-version="ascut"] #h-proj .pn, body[data-ui-version="ascut"] #h-cust .pn { border-radius: 12px; transition: border-color 180ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 180ms cubic-bezier(0.22, 1, 0.36, 1); } body[data-ui-version="ascut"] #h-proj .pn:hover, body[data-ui-version="ascut"] #h-cust .pn:hover { border-color: color-mix(in srgb, var(--acc) 35%, var(--bdr)); box-shadow: 0 3px 12px color-mix(in srgb, var(--acc) 10%, transparent); } @media (prefers-reduced-motion: reduce) { body[data-ui-version="ascut"] #h-proj .pn, body[data-ui-version="ascut"] #h-cust .pn { transition: none; } } /* ── /PR-ASCUT-HUB-TABS ───────────────────────────────────────── */ /* ── PR-ASCUT-SETTINGS — settings drawer content polish ─────── Strictly scoped to #settings-panel so it can't leak elsewhere. Pure CSS — no JS changes, radio inputs untouched. */ body[data-ui-version="ascut"] #settings-panel h3 { font-size: 14px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--dim); margin-top: 28px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--bdr); } body[data-ui-version="ascut"] #settings-panel h3:first-of-type { margin-top: 16px; } body[data-ui-version="ascut"] #settings-panel p { color: var(--dim); font-size: 12px; line-height: 1.55; max-width: 60ch; } body[data-ui-version="ascut"] #settings-panel .dt-quick-btn { border-radius: 10px; font-weight: 600; transition: border-color 160ms cubic-bezier(0.22, 1, 0.36, 1), background 160ms cubic-bezier(0.22, 1, 0.36, 1), transform 80ms cubic-bezier(0.22, 1, 0.36, 1), color 160ms cubic-bezier(0.22, 1, 0.36, 1); } body[data-ui-version="ascut"] #settings-panel .dt-quick-btn:hover { background: color-mix(in srgb, var(--acc) 8%, var(--inp)); border-color: color-mix(in srgb, var(--acc) 50%, var(--bdr)); color: var(--acc); } body[data-ui-version="ascut"] #settings-panel .dt-quick-btn:active { transform: scale(0.98); } body[data-ui-version="ascut"] #settings-panel .dt-grid { gap: 12px; } body[data-ui-version="ascut"] #settings-panel #settings-unit-pref label { padding: 8px 12px; background: var(--inp); border: 1px solid var(--bdr); border-radius: 10px; transition: border-color 140ms cubic-bezier(0.22, 1, 0.36, 1), background 140ms cubic-bezier(0.22, 1, 0.36, 1); } body[data-ui-version="ascut"] #settings-panel #settings-unit-pref label:hover { border-color: color-mix(in srgb, var(--acc) 50%, var(--bdr)); background: color-mix(in srgb, var(--acc) 6%, var(--inp)); } body[data-ui-version="ascut"] #settings-panel #set-profile-msg { font-weight: 500; } @media (prefers-reduced-motion: reduce) { body[data-ui-version="ascut"] #settings-panel .dt-quick-btn, body[data-ui-version="ascut"] #settings-panel #settings-unit-pref label { transition: none; } body[data-ui-version="ascut"] #settings-panel .dt-quick-btn:active { transform: none; } } /* ── /PR-ASCUT-SETTINGS ────────────────────────────────────────── */ /* ── PR-ASCUT-STD-2 (2026-08-04) — Shop Standards, machined ────── One spacing cell (4px). One radius language: section 16 / control 10 (1.6 ratio = same billet, two scales). SF-Pro type ladder. Accent is WITHHELD to exactly two places: the focus ring and Save. The tinted icon badges, the 3:1 radius mismatch, and the hover-border flicker are gone. `!important` only where the JS render hardcodes inline styles that must be unified into one physical object. */ /* Section = a single quiet billet. No badge, no flicker. */ body[data-ui-version="ascut"] #shop-standards-body .std-section { background: var(--sf, var(--pn)); border: 1px solid color-mix(in srgb, var(--txt) 9%, transparent); border-radius: 16px; padding: 24px 24px 22px; margin-bottom: 12px; transition: none; } body[data-ui-version="ascut"] #shop-standards-body .std-section:hover { border-color: color-mix(in srgb, var(--txt) 9%, transparent); } /* Header: icon becomes a monochrome mark; title/subtitle a clean ladder. */ body[data-ui-version="ascut"] #shop-standards-body .std-section-header { align-items: center !important; gap: 12px !important; padding-bottom: 0; border-bottom: none; margin-bottom: 20px; } body[data-ui-version="ascut"] #shop-standards-body .std-section[data-collapsed="1"] .std-section-header { margin-bottom: 0; } body[data-ui-version="ascut"] #shop-standards-body .std-section-icon { width: 22px; height: 22px; border-radius: 0; background: none !important; border: none !important; color: var(--dim); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } body[data-ui-version="ascut"] #shop-standards-body .std-section-icon svg { width: 18px; height: 18px; stroke-width: 1.6; } body[data-ui-version="ascut"] #shop-standards-body .std-section-title { font-size: 15px; font-weight: 600; letter-spacing: -0.012em; color: var(--txt); margin: 0 0 2px 0; line-height: 1.25; } body[data-ui-version="ascut"] #shop-standards-body .std-section-subtitle { font-size: 12.5px; font-weight: 400; line-height: 1.5; color: var(--dim); margin: 0; max-width: 62ch; letter-spacing: -0.003em; } body[data-ui-version="ascut"] #shop-standards-body .std-collapse-btn { color: var(--dim) !important; font-size: 12px !important; font-weight: 500; letter-spacing: -0.004em; padding: 6px 10px !important; border-radius: 8px !important; transition: color 120ms ease, background 120ms ease; } body[data-ui-version="ascut"] #shop-standards-body .std-collapse-btn:hover { color: var(--txt) !important; background: color-mix(in srgb, var(--txt) 6%, transparent) !important; } /* Field grid: 4px-grid gutters, auto-fill so columns breathe. */ body[data-ui-version="ascut"] #shop-standards-body .std-field-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(216px, 1fr)); gap: 16px 20px; align-items: start; } body[data-ui-version="ascut"] #shop-standards-body .std-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } body[data-ui-version="ascut"] #shop-standards-body .std-field-label { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 500; letter-spacing: -0.004em; color: var(--txt); margin: 0; } body[data-ui-version="ascut"] #shop-standards-body .std-field-unit { font-size: 11.5px; font-weight: 400; color: var(--dim); font-feature-settings: "tnum"; letter-spacing: 0.005em; text-transform: none; flex-shrink: 0; } /* Controls machined as ONE part — number, text, select share every value. tabular numerals so decimal columns align like a micrometer readout. */ body[data-ui-version="ascut"] #shop-standards-body .std-field input, body[data-ui-version="ascut"] #shop-standards-body .std-field select { width: 100% !important; height: 34px; padding: 7px 12px !important; background: var(--bg) !important; border: 1px solid color-mix(in srgb, var(--txt) 14%, transparent) !important; border-radius: 10px !important; color: var(--txt) !important; font-size: 14px !important; font-family: inherit; font-feature-settings: "tnum"; letter-spacing: -0.006em; transition: border-color 120ms ease, box-shadow 120ms ease; appearance: none; -webkit-appearance: none; } body[data-ui-version="ascut"] #shop-standards-body .std-field input:hover, body[data-ui-version="ascut"] #shop-standards-body .std-field select:hover { border-color: color-mix(in srgb, var(--txt) 26%, transparent) !important; } body[data-ui-version="ascut"] #shop-standards-body .std-field input:focus, body[data-ui-version="ascut"] #shop-standards-body .std-field select:focus { outline: none; border-color: var(--acc) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 22%, transparent) !important; } /* Select chevron — one glyph, optically centered at the 12px inset. */ body[data-ui-version="ascut"] #shop-standards-body .std-field select { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23888888' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 12px center !important; padding-right: 32px !important; } /* Help badge: a quiet dot, never a shout. */ body[data-ui-version="ascut"] #shop-standards-body .std-field .jd-help { color: var(--dim); font-size: 11px; cursor: help; border: none !important; background: none !important; padding: 0 !important; margin-left: 2px; min-width: 0 !important; } @media (prefers-reduced-motion: reduce) { body[data-ui-version="ascut"] #shop-standards-body .std-field input, body[data-ui-version="ascut"] #shop-standards-body .std-field select { transition: none; } } /* PR-STD-BUILDWITH — "What you build with" library chapter. Same billet language: chapter rules as hairlines, pickers as the machined control, a smart annotation line under each. */ body[data-ui-version="ascut"] #shop-standards-body .bw-loading { color: var(--dim); font-size: 13px; padding: 8px 2px; } body[data-ui-version="ascut"] #shop-standards-body .bw-chapter { margin-bottom: 22px; } body[data-ui-version="ascut"] #shop-standards-body .bw-chapter:last-child { margin-bottom: 0; } body[data-ui-version="ascut"] #shop-standards-body .bw-chapter-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid color-mix(in srgb, var(--txt) 8%, transparent); } body[data-ui-version="ascut"] #shop-standards-body .bw-chapter-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--txt); } body[data-ui-version="ascut"] #shop-standards-body .bw-chapter-hint { font-size: 11.5px; font-weight: 400; color: var(--dim); letter-spacing: -0.002em; } body[data-ui-version="ascut"] #shop-standards-body .bw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px 20px; align-items: start; } body[data-ui-version="ascut"] #shop-standards-body .bw-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } body[data-ui-version="ascut"] #shop-standards-body .bw-label { font-size: 12px; font-weight: 500; letter-spacing: -0.004em; color: var(--txt); } body[data-ui-version="ascut"] #shop-standards-body .bw-select { width: 100%; height: 34px; padding: 7px 32px 7px 12px; background: var(--bg); color: var(--txt); border: 1px solid color-mix(in srgb, var(--txt) 14%, transparent); border-radius: 10px; font-size: 14px; font-family: inherit; letter-spacing: -0.006em; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23888888' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; transition: border-color 120ms ease, box-shadow 120ms ease; } body[data-ui-version="ascut"] #shop-standards-body .bw-select:hover { border-color: color-mix(in srgb, var(--txt) 26%, transparent); } body[data-ui-version="ascut"] #shop-standards-body .bw-select:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 22%, transparent); } body[data-ui-version="ascut"] #shop-standards-body .bw-select:disabled { opacity: 0.55; cursor: not-allowed; } body[data-ui-version="ascut"] #shop-standards-body .bw-ann { font-size: 11px; line-height: 1.4; color: var(--dim); min-height: 15px; letter-spacing: -0.002em; } body[data-ui-version="ascut"] #shop-standards-body .bw-ann .bw-empty { color: var(--no, #c76b6b); font-style: italic; } /* ── /PR-ASCUT-STD-2 ───────────────────────────────────────────── */ /* ── PR-ASCUT-STATUS — status pills + shop-intel ─────────────── */ /* Status pills (project status across hub + cab + door studios). Existing rules use var(--status-* fallback) — ascut override uses color-mix() for richer tinted bg + 1px border for definition. */ body[data-ui-version="ascut"] .status-draft, body[data-ui-version="ascut"] .status-design, body[data-ui-version="ascut"] .status-nesting, body[data-ui-version="ascut"] .status-completed, body[data-ui-version="ascut"] .status-cancelled, body[data-ui-version="ascut"] .hub-job-status-pill { border-radius: 999px; font-weight: 600; font-size: 11px; letter-spacing: 0.04em; padding: 3px 9px; text-transform: uppercase; } body[data-ui-version="ascut"] .status-draft { background: color-mix(in srgb, var(--dim) 18%, transparent); border: 1px solid color-mix(in srgb, var(--dim) 35%, var(--bdr)); color: var(--dim); } body[data-ui-version="ascut"] .status-design { background: color-mix(in srgb, var(--acc) 14%, transparent); border: 1px solid color-mix(in srgb, var(--acc) 35%, var(--bdr)); color: var(--acc); } body[data-ui-version="ascut"] .status-nesting { background: color-mix(in srgb, var(--warn) 14%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 35%, var(--bdr)); color: var(--warn); } body[data-ui-version="ascut"] .status-completed { background: color-mix(in srgb, var(--ok) 16%, transparent); border: 1px solid color-mix(in srgb, var(--ok) 35%, var(--bdr)); color: var(--ok); } body[data-ui-version="ascut"] .status-cancelled { background: color-mix(in srgb, var(--no) 14%, transparent); border: 1px solid color-mix(in srgb, var(--no) 35%, var(--bdr)); color: var(--no); } /* PR-CLEAN-2 / WIDGET-PURGE (2026-05-31): ascut .shop-intel overrides deleted (parent rule already gone). AsCut .widget-empty KEPT — filterGlobalSearch still uses .widget-empty. */ body[data-ui-version="ascut"] .widget-empty { font-style: normal; font-size: 13px; color: var(--dim); padding: 16px 0; text-align: center; } /* ── /PR-ASCUT-STATUS ──────────────────────────────────────────── */ /* ── PR-ASCUT-BROW — button row + small variants ─────────────── */ body[data-ui-version="ascut"] .brow { gap: 8px; margin-top: 12px; } body[data-ui-version="ascut"] .bs { border-radius: 7px; padding: 6px 12px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; } body[data-ui-version="ascut"] .bs:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; } /* The .ba.bs combo needs the gradient + shadow to scale down gracefully when small. */ body[data-ui-version="ascut"] .ba.bs { box-shadow: 0 2px 6px color-mix(in srgb, var(--acc) 18%, transparent); } body[data-ui-version="ascut"] .ba.bs:hover:not(:disabled) { box-shadow: 0 3px 10px color-mix(in srgb, var(--acc) 30%, transparent); } /* ── /PR-ASCUT-BROW ────────────────────────────────────────────── */ /* ── PR-ASCUT-BULK — bulk-action bar polish ─────────────────── */ body[data-ui-version="ascut"] .bulk-bar { background: color-mix(in srgb, var(--acc) 12%, transparent); border: 1px solid color-mix(in srgb, var(--acc) 35%, var(--bdr)); border-radius: 10px; padding: 10px 14px; color: var(--txt); font-weight: 500; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } body[data-ui-version="ascut"] .bulk-bar .bulk-count { color: var(--acc); font-weight: 700; font-variant-numeric: tabular-nums; } body[data-ui-version="ascut"] .bulk-bar button { font-size: 11px; font-weight: 600; } /* ── /PR-ASCUT-BULK ────────────────────────────────────────────── */ /* PR-CLEAN-2 / WIDGET-PURGE (2026-05-31): ascut widget-polish overrides (.widget, .widget-hdr, .widget-body, .add-widget-card) deleted — parent rules retired with WIDGET_DEFS. */ /* ── PR-ASCUT-SEARCH — global search field polish ────────────── */ body[data-ui-version="ascut"] .global-search { border-radius: 10px; background: color-mix(in srgb, var(--acc) 5%, var(--inp)); border: 1px solid color-mix(in srgb, var(--acc) 18%, var(--bdr)); } body[data-ui-version="ascut"] .global-search:focus-within { border-color: var(--acc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 20%, transparent); background: var(--inp); } body[data-ui-version="ascut"] .global-search input::placeholder { color: color-mix(in srgb, var(--dim) 75%, var(--acc)); } body[data-ui-version="ascut"] .global-search .kbd { background: var(--bg); border: 1px solid color-mix(in srgb, var(--acc) 25%, var(--bdr)); color: var(--txt); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; font-weight: 500; border-radius: 5px; padding: 2px 6px; } /* ── /PR-ASCUT-SEARCH ──────────────────────────────────────────── */ /* ── PR-ASCUT-USER-CHIP — topbar user chip + admin badge ─────── */ body[data-ui-version="ascut"] .topbar-user-name { font-weight: 600; letter-spacing: -0.005em; } body[data-ui-version="ascut"] .topbar-user-role { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); } body[data-ui-version="ascut"] .admin-only-badge { background: color-mix(in srgb, var(--acc) 18%, transparent); border: 1px solid color-mix(in srgb, var(--acc) 38%, var(--bdr)); color: var(--acc); font-weight: 700; letter-spacing: 0.06em; border-radius: 999px; } /* AWS-2 badge (compliance mode indicator in topbar) — semantic green pill for the active-standards state. */ body[data-ui-version="ascut"] #aws-badge, body[data-ui-version="ascut"] .aws-active-pill { border-radius: 999px; font-weight: 700; letter-spacing: 0.06em; } /* ── /PR-ASCUT-USER-CHIP ───────────────────────────────────────── */ /* PR-CLEAN-2 / WIDGET-PURGE (2026-05-31): ascut .dash-bar + .widget-grid overrides deleted — parent rules retired. */ /* ── PR-ASCUT-STUDIO-CARD — studio entry cards polish ────────── */ body[data-ui-version="ascut"] .studio-card { border-radius: 14px; padding: 28px 26px; transition: border-color 180ms cubic-bezier(0.22, 1, 0.36, 1), background 180ms cubic-bezier(0.22, 1, 0.36, 1), transform 180ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 180ms cubic-bezier(0.22, 1, 0.36, 1); } body[data-ui-version="ascut"] .studio-card::before { height: 4px; background: linear-gradient(90deg, var(--studio-color, var(--acc)) 0%, color-mix(in srgb, var(--studio-color, var(--acc)) 70%, var(--acc2, var(--acc))) 100%); opacity: 1; border-radius: 14px 14px 0 0; } body[data-ui-version="ascut"] .studio-card:hover { border-color: var(--studio-color, var(--acc)); background: color-mix(in srgb, var(--studio-color, var(--acc)) 6%, var(--pn)); box-shadow: 0 12px 32px color-mix(in srgb, var(--studio-color, var(--acc)) 22%, transparent); transform: translateY(-2px); } body[data-ui-version="ascut"] .studio-card h4 { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; color: var(--txt); margin-bottom: 6px; } body[data-ui-version="ascut"] .studio-card .studio-img { filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--studio-color, var(--acc)) 30%, transparent)); } @media (prefers-reduced-motion: reduce) { body[data-ui-version="ascut"] .studio-card { transition: none; } body[data-ui-version="ascut"] .studio-card:hover { transform: none; } } /* ── /PR-ASCUT-STUDIO-CARD ────────────────────────────────────── */ /* ── PR-ASCUT-CAB-LIB — room editor library items polish ─────── */ body[data-ui-version="ascut"] .cab-lib-section-header { /* PR-CAB-LIB-COMPACT (2026-07-29): was var(--dim) 10px — too faint to read ("BASE · 11"). Bumped to max-contrast --txt, bigger + heavier. */ font-size: 12px; font-weight: 800; letter-spacing: 0.06em; color: var(--txt); background: color-mix(in srgb, var(--sf) 92%, var(--bg)); border-bottom: 1px solid var(--bdr); } body[data-ui-version="ascut"] .cab-lib-item { border-radius: 8px; transition: border-color 160ms cubic-bezier(0.22, 1, 0.36, 1), background 160ms cubic-bezier(0.22, 1, 0.36, 1), transform 80ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 160ms cubic-bezier(0.22, 1, 0.36, 1); } body[data-ui-version="ascut"] .cab-lib-item:hover { border-color: color-mix(in srgb, var(--acc) 50%, var(--bdr)); background: color-mix(in srgb, var(--acc) 8%, var(--pn)); box-shadow: 0 3px 10px color-mix(in srgb, var(--acc) 14%, transparent); } body[data-ui-version="ascut"] .cab-lib-item .icn { background: color-mix(in srgb, var(--acc) 8%, var(--inp)); border: 1px solid color-mix(in srgb, var(--acc) 16%, var(--bdr)); border-radius: 6px; } body[data-ui-version="ascut"] .cab-lib-item:hover .icn { background: color-mix(in srgb, var(--acc) 14%, var(--inp)); border-color: color-mix(in srgb, var(--acc) 30%, var(--bdr)); } @media (prefers-reduced-motion: reduce) { body[data-ui-version="ascut"] .cab-lib-item, body[data-ui-version="ascut"] .cab-lib-item .icn { transition: none; } } /* ── /PR-ASCUT-CAB-LIB ─────────────────────────────────────────── */ /* ── PR-ASCUT-GLOBAL — code/pre/kbd/hr/scrollbar polish ──────── */ /* Code + pre — JetBrains Mono + accent-tinted bg */ body[data-ui-version="ascut"] code { font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Consolas', monospace; font-size: 0.92em; padding: 1px 6px; background: color-mix(in srgb, var(--acc) 10%, var(--inp)); border: 1px solid color-mix(in srgb, var(--acc) 16%, var(--bdr)); border-radius: 4px; color: var(--txt); font-variant-numeric: tabular-nums; } body[data-ui-version="ascut"] pre { font-family: 'JetBrains Mono', ui-monospace, monospace; background: var(--inp); border: 1px solid var(--bdr); border-radius: 8px; padding: 12px 14px; font-size: 12px; line-height: 1.55; font-variant-numeric: tabular-nums; } body[data-ui-version="ascut"] pre code { background: none; border: none; padding: 0; font-size: 1em; } /* kbd — keyboard shortcut hints */ body[data-ui-version="ascut"] kbd { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; font-weight: 600; padding: 2px 7px; background: var(--bg); border: 1px solid color-mix(in srgb, var(--acc) 22%, var(--bdr)); border-bottom-width: 2px; border-radius: 5px; color: var(--txt); letter-spacing: 0.04em; box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--acc) 14%, transparent); } /* hr — subtle accent gradient divider */ body[data-ui-version="ascut"] hr { border: none; height: 1px; background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--acc) 25%, var(--bdr)) 50%, transparent 100%); margin: 24px 0; } /* Custom scrollbar (WebKit) — subtle Apple-feel. Firefox uses scrollbar-color which is a separate property. */ body[data-ui-version="ascut"] ::-webkit-scrollbar { width: 12px; height: 12px; } body[data-ui-version="ascut"] ::-webkit-scrollbar-track { background: transparent; } body[data-ui-version="ascut"] ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--dim) 35%, transparent); border: 3px solid transparent; border-radius: 999px; background-clip: padding-box; transition: background 140ms cubic-bezier(0.22, 1, 0.36, 1); } body[data-ui-version="ascut"] ::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--acc) 50%, var(--dim)); background-clip: padding-box; border: 3px solid transparent; } body[data-ui-version="ascut"] ::-webkit-scrollbar-corner { background: transparent; } body[data-ui-version="ascut"] { scrollbar-color: color-mix(in srgb, var(--dim) 35%, transparent) transparent; scrollbar-width: thin; } /* Text selection — themed highlight */ body[data-ui-version="ascut"] ::selection { background: color-mix(in srgb, var(--acc) 32%, transparent); color: var(--txt); } /* ── /PR-ASCUT-GLOBAL ──────────────────────────────────────────── */ /* ── PR-ASCUT-OVERHAUL-1 — workspace bg + home hero strip ───── Structural change, not polish. Inject a brand-presence hero ABOVE the dash-bar on the home tab. Subtle gradient on the workspace bg. Gated to ascut mode so legacy themes inherit nothing. */ /* PR-HOME-REDESIGN (2026-06-13): the workspace "radial accent" was the blue glow the operator flagged — a 1200x800 brand-accent ellipse anchored 200px ABOVE the viewport, bleeding a haze down behind the topbar on every page. Replaced with the flat base. */ body[data-ui-version="ascut"] #app-workspace { background: var(--bg); } /* PR-THEME-LAYOUT-PARITY (2026-05-18): the AsCut brand additions below (home-hero banner, dashboard eyebrow, topbar/sidebar/statusbar wordmarks, per-page hero strips, admin pill, "Welcome to AsCut" banner, CF logomark) previously injected content via ::before / ::after that changed the page layout. These were AsCut-only — the other 6 themes didn't render them, so themes drifted in layout, not just color. Per user direction 2026-05-18: "they all should be the same in everyway other then the color change". Removed wholesale. KPI tile size bumps + OVERHAUL-4 CTA size bumps (next block) kept — they're tablet-ergonomic, not brand-specific, and now apply to every theme through the un-gated data-ui-version attr. */ /* KPI strip — bigger numbers (tablet ergonomic, kept). */ body[data-ui-version="ascut"] .kpi-tile { min-height: 112px; padding: 18px 20px; } body[data-ui-version="ascut"] .kpi-tile-value { font-size: 30px !important; font-weight: 700 !important; letter-spacing: -0.02em; line-height: 1.1; } /* ── PR-ASCUT-OVERHAUL-4 — bigger primary CTAs ──────────────── Stop hiding the primary action behind subtle styling. AsCut CTAs are bigger, bolder, more confident — shop-floor reality (operator wants the gate to "create" clearly visible). */ /* Hub page primary action (+ New job) — 52px min-height, bigger font, larger icon. Already gradient + shadow from PR-ASCUT- HUB; this PR bumps the size and presence. */ body[data-ui-version="ascut"] .hub-page-header .hub-primary-action { min-height: 52px; padding: 0 24px; font-size: 15px; gap: 10px; } body[data-ui-version="ascut"] .hub-page-header .hub-primary-action svg { width: 20px; height: 20px; } /* Studio shortcuts — bump to 52px to match the primary */ body[data-ui-version="ascut"] .hub-studio-shortcut { min-height: 52px; padding: 0 22px; font-size: 14px; gap: 10px; } body[data-ui-version="ascut"] .hub-studio-shortcut svg { width: 18px; height: 18px; } /* Big primary buttons globally (.ba but NOT .bs small variant) */ body[data-ui-version="ascut"] .ba:not(.bs) { min-height: 44px; padding: 10px 22px; font-size: 13px; } /* Door studio Add Door CTA — already 56px; refine border-radius */ body[data-ui-version="ascut"] .add-door-bar .ad-go { border-radius: 12px; } /* "+ New" / "+ Add" patterns — boost the icon + spacing */ body[data-ui-version="ascut"] button > svg + *, body[data-ui-version="ascut"] button > * + svg { /* No-op — placeholder for icon-text spacing if needed */ } /* Sidebar primary item (Hub) gets a slightly bolder treatment */ body[data-ui-version="ascut"] #snav-hub { font-weight: 600; } /* ── /PR-ASCUT-OVERHAUL-4 ──────────────────────────────────────── */ /* PR-THEME-LAYOUT-PARITY (2026-05-18): the "Welcome to AsCut" home hero (140px banner + 64px CF logomark badge) was the most visually disruptive theme-specific layout add. Operator feedback 2026-05-18: "espically cab fordge color scheme adds a big welcome thing on the top". Removed wholesale. The legacy "Jobs" dash-bar h1 is now the single visible page heading for the home tab on every theme — no longer hidden by an overriding ascut-only rule. */ /* PR-ONE-BUILDER Phase 1 (2026-08-26): the entire Cutlist Studio style block (PR-STUDIO-1 .cs-* rules, all scoped to #pg-cutlist-studio) is gone with the page. */ /* PR-THEME-LAYOUT-PARITY (2026-05-18): the OVERHAUL-6 Door Studio + Cabinet Studio page-hero strips with 🚪 / 🪚 emoji badges injected content via ::before / ::after that every page rendered as an extra 110px chrome band. These added layout (not color) — removed wholesale so every theme shows the same page chrome. The OVERHAUL-3 base hero rules these scaled up are also removed above. */ /* ── PR-ASCUT-MAT-SHEET — pull-up material picker sheet ───────── Replaces the drawer-box Side / Bottom