/* ═══════════════════════════════════════════════════════════════════════ DECKHAND · web design system — "BLUEPRINT" (owner-picked direction A, 2026-06-09) Drafting-table aesthetic: graph-paper parchment canvas · ink sidebar with a safety-orange datum edge · technical mono annotations · square corners · hard offset shadows. Saira display+UI / Spline Sans Mono labels. Self-contained (no Tailwind). Loaded app-wide via the asset manifest (office shell, auth screens, plain pages). The variable NAMES are the stable contract every view consumes — the Blueprint retheme lands through their VALUES (--brass now carries the safety-orange accent). ═══════════════════════════════════════════════════════════════════════ */ :root { /* Surfaces — drafting paper */ --bg: #efebe0; --surface: #f8f5ec; --surface-lo: #f1ede0; --surface-hi: #fcfaf3; /* Ink sidebar */ --nav-bg: #16202b; --nav-mid: #1e2a38; --nav-border: #2a3744; --nav-text: #aeb6c0; --nav-text-hi: #ece8dc; --nav-active: rgba(216,84,42,0.15); /* Borders — pencil rules */ --border: #c9c2b0; --border-lo: #dcd6c6; /* Text — ink. --text-3 darkened from #8a8576 (3.1:1 on paper — failed WCAG AA) to clear 4.5:1 on every surface incl. --surface-hi while staying a muted warm taupe (a11y pass 2026-06-14). */ --text-1: #16202b; --text-2: #3c4654; --text-3: #6b6657; /* Safety-orange accent (the historical --brass names are the app-wide contract). --brass-cta is the filled-button fill: minimally darker so WHITE label text clears 4.5:1 (4.02→4.68) without shifting the signature accent used for borders/icons/pills. */ --brass: #d8542a; --brass-hi: #e4683f; --brass-lo: #b23f1c; --brass-cta: #c94a22; --brass-soft: rgba(216,84,42,0.10); --brass-pill: rgba(216,84,42,0.14); /* Lifecycle stage palette (the six office columns) — blueprint blues + site green */ --s-lead: #6b7686; --s-qualified: #22456b; --s-quoting: #2e6fa3; --s-sold: #2e7d52; --s-completed: #266b47; --s-closed: #4a5560; /* Channel */ --chan-lowes: #22456b; --chan-native: #a4632a; /* Semantic. --success darkened from #2e7d52 (4.2:1 — just under AA) to 4.5:1 on paper; it's used as `.money.pos` TEXT, not only as a status dot (a11y pass 2026-06-14). */ --danger: #c2362b; --warning: #c7791b; --success: #2c764d; /* Designer intersection-snap badge — pink, distinct from the brass accent (iPad SnapPipeline parity). */ --designer-snap-cross: #c81d67; /* Type */ --font-display: "Saira", system-ui, sans-serif; --font-ui: "Saira", system-ui, -apple-system, sans-serif; --font-mono: "Spline Sans Mono", "SFMono-Regular", monospace; /* Geometry — square, technical */ --sidebar-w: 248px; --r-sm: 2px; --r-md: 3px; --r-lg: 4px; --r-pill: 3px; --shadow-card: 0 0 0 rgba(0,0,0,0); --shadow-lift: 4px 4px 0 rgba(22,32,43,0.10); /* Shared inline-control height — so controls sharing a row (a status pill next to action buttons, a button next to a select, a composer's send next to its channel picker) align to one baseline. */ --control-h: 34px; } * { box-sizing: border-box; } body.office { margin: 0; background: var(--bg); /* Drafting-paper grid — faint blueprint-blue graph lines under everything. */ background-image: linear-gradient(rgba(34,69,107,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(34,69,107,0.05) 1px, transparent 1px); background-size: 26px 26px; color: var(--text-1); font-family: var(--font-ui); font-size: 13.5px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .ico { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; } /* ── Shell ─────────────────────────────────────────────────────────────── */ .office-shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; } /* ── Sidebar ───────────────────────────────────────────────────────────── */ .office-side { background: linear-gradient(180deg, var(--nav-bg) 0%, #111923 100%); color: var(--nav-text); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; /* The drafting datum edge — a safety-orange rule separating ink from paper. */ border-right: 2px solid var(--brass); } .office-side::-webkit-scrollbar { width: 7px; } .office-side::-webkit-scrollbar-thumb { background: var(--nav-border); border-radius: 4px; } .office-logo { display: flex; align-items: center; gap: 11px; padding: 20px 18px 16px; } .office-logo-tile { width: 38px; height: 38px; border-radius: var(--r-sm); flex: none; display: grid; place-items: center; color: var(--brass); background: transparent; border: 1.5px solid var(--brass); } .office-logo-tile .ico { width: 21px; height: 21px; stroke-width: 2; } .office-logo b { color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -0.01em; line-height: 1; } .office-logo small { color: var(--nav-text); font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.16em; } .office-nav { padding: 6px 12px 16px; display: flex; flex-direction: column; gap: 1px; flex: 1; } .office-nav-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: #5d7793; padding: 14px 10px 5px; } .office-navitem { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: var(--r-sm); color: var(--nav-text); text-decoration: none; font-size: 13px; font-weight: 500; border-left: 2px solid transparent; transition: background .12s, color .12s; } .office-navitem .ico { width: 16.5px; height: 16.5px; opacity: .85; } a.office-navitem:hover { background: var(--nav-mid); color: var(--nav-text-hi); } .office-navitem.active { background: var(--nav-active); color: #fff; font-weight: 600; border-left-color: var(--brass-hi); } .office-navitem.active .ico { color: var(--brass-hi); opacity: 1; } .office-navitem.is-static { cursor: default; opacity: .72; } .office-navfoot { padding: 14px 18px; border-top: 1px solid var(--nav-border); display: flex; align-items: center; gap: 10px; color: var(--nav-text); font-size: 12.5px; } /* ── Main / topbar ─────────────────────────────────────────────────────── */ .office-main { display: flex; flex-direction: column; min-width: 0; } .office-topbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 16px; padding: 15px 28px; background: rgba(239,235,224,0.9); backdrop-filter: saturate(140%) blur(8px); border-bottom: 1px solid var(--border); } .office-toptitle { font-family: var(--font-display); font-weight: 700; font-size: 23px; line-height: 1.1; letter-spacing: -0.01em; color: var(--text-1); margin: 0; } /* now an

— reset UA margin */ /* Skip-to-content link: visually hidden until keyboard focus, then pinned top-left (a11y 2026-06-14). */ .skip-link { position: absolute; left: 8px; top: -48px; z-index: 1000; padding: 9px 14px; border-radius: var(--r-sm); background: var(--nav-bg); color: var(--nav-text-hi); font-family: var(--font-ui); font-weight: 600; font-size: 13px; text-decoration: none; transition: top .12s; } .skip-link:focus { top: 8px; outline: 2px solid var(--brass); outline-offset: 2px; } .office-topsub { font-size: 12px; color: var(--text-2); margin-top: 2px; } .office-topspacer { flex: 1; } .office-search { display: flex; align-items: center; gap: 8px; width: 230px; padding: 7px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill); color: var(--text-3); font-size: 12.5px; } .office-search .ico { width: 15px; height: 15px; flex: none; } .office-search:focus-within { border-color: var(--brass); } .office-search-input { border: none; background: transparent; outline: none; width: 100%; font-family: var(--font-ui); font-size: 12.5px; color: var(--text-1); padding: 0; } .office-search-input::placeholder { color: var(--text-3); } .search-results { display: flex; flex-direction: column; gap: 16px; max-width: 760px; } /* ── Status badge (reusable — compliance/active/etc.) ──────────────────── */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: var(--r-pill); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.02em; text-transform: capitalize; white-space: nowrap; /* a pill must never wrap to two lines (e.g. "Manual Procurement", F013) */ border: 1px solid var(--border); color: var(--text-2); background: var(--surface-hi); } .badge.ok { color: #15803d; border-color: rgba(21,128,61,0.45); background: rgba(22,163,74,0.14); } .badge.warn { color: #a16207; border-color: rgba(245,158,11,0.50); background: rgba(245,158,11,0.17); } .badge.bad { color: #b91c1c; border-color: rgba(220,38,38,0.45); background: rgba(220,38,38,0.12); } .badge.muted { color: var(--text-3); } .settings-stack { display: flex; flex-direction: column; gap: 24px; } /* ── Dashboard (wf-office) ─────────────────────────────────────────────── */ .kpi-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 20px; } @media (max-width: 1100px) { .kpi-row { grid-template-columns: repeat(2, 1fr); } } .kpi { display: flex; flex-direction: column; gap: 3px; padding: 16px 18px; text-decoration: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-card); } .kpi:hover { box-shadow: var(--shadow-lift); } .kpi-val { font-family: var(--font-display); font-weight: 700; font-size: 28px; color: var(--text-1); line-height: 1; } .kpi-val.block { color: var(--danger); } .kpi-label { font-size: 12.5px; color: var(--text-2); margin-top: 4px; } .kpi-trend { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; color: var(--text-3); } .kpi-trend.block { color: var(--danger); } .dash-twocol { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; align-items: start; } @media (max-width: 900px) { .dash-twocol { grid-template-columns: 1fr; } } .attn-row { display: flex; align-items: center; gap: 11px; padding: 11px 2px; text-decoration: none; border-bottom: 1px solid var(--border-lo); } .attn-row:last-child { border-bottom: none; } .attn-row:hover .attn-ttl { color: var(--brass-lo); } .attn-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; } .attn-dot.block { background: var(--danger); } .attn-dot.wait { background: var(--warning); } .attn-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .attn-ttl { font-size: 13px; font-weight: 500; color: var(--text-1); } .attn-meta { font-size: 11.5px; color: var(--text-3); } .chan-bar { display: flex; height: 26px; border-radius: 7px; overflow: hidden; border: 1px solid var(--border); margin-bottom: 14px; } .chan-seg { display: grid; place-items: center; font-family: var(--font-mono); font-size: 10px; color: #fff; min-width: 0; overflow: hidden; white-space: nowrap; padding: 0 4px; } .chan-seg.lowes { background: var(--chan-lowes); } .chan-seg.native { background: var(--chan-native); } .report-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 280px)); gap: 14px; margin-bottom: 20px; } .report-summary .kpi-val .badge { font-size: 13px; padding: 4px 12px; } .office-user { display: flex; align-items: center; gap: 9px; } .office-avatar { width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; font-weight: 600; font-size: 12px; background: linear-gradient(150deg, #2a4a6e, #16304f); } .office-username { font-size: 12.5px; color: var(--text-2); } .office-signout-form { margin: 0; line-height: 0; } .office-signout { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; background: transparent; border: 1px solid transparent; border-radius: var(--r-sm); color: var(--text-3); cursor: pointer; transition: background .12s, color .12s, border-color .12s; } .office-signout:hover { background: var(--surface); border-color: var(--border); color: var(--brass-lo); } .office-signout .ico { width: 16px; height: 16px; } .office-content { padding: 24px 28px 48px; } @media (max-width: 760px) { .office-shell { display: block; min-width: 0; } .office-side { position: sticky; top: 0; z-index: 8; height: auto; overflow: visible; border-right: 0; border-bottom: 1px solid var(--nav-border); } .office-logo { padding: 12px 14px 8px; } .office-logo-tile { width: 32px; height: 32px; } .office-logo b { font-size: 16px; } .office-nav { flex: none; flex-direction: row; gap: 6px; overflow-x: auto; padding: 8px 12px 12px; scrollbar-width: thin; } .office-nav-label, .office-navfoot { display: none; } .office-navitem { flex: 0 0 auto; white-space: nowrap; padding: 7px 10px; } .office-main { min-width: 0; } .office-topbar { position: static; flex-wrap: wrap; gap: 10px; padding: 13px 14px; } .office-toptitle { font-size: 21px; overflow-wrap: anywhere; } .office-topspacer { display: none; } .office-search { order: 3; width: 100%; } .office-user { margin-left: auto; } .office-username { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .office-content { padding: 16px 14px 32px; } } /* ── Buttons / pills / eyebrow ─────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; padding: 8px 14px; border-radius: var(--r-sm); font-size: 12.5px; font-weight: 600; font-family: var(--font-ui); border: 1px solid var(--border); background: var(--surface); color: var(--text-1); text-decoration: none; transition: background .12s, border-color .12s, transform .06s; } .btn .ico { width: 15px; height: 15px; } .btn:hover { background: var(--surface-hi); } .btn:active { transform: translateY(1px); } .btn.prim { background: var(--brass-cta); border-color: var(--brass-lo); color: #fff; font-weight: 700; box-shadow: 3px 3px 0 rgba(22,32,43,0.12); } /* drafting offset shadow */ .btn.prim:hover { filter: brightness(1.05); } .btn.prim:active { transform: translate(1px,1px); box-shadow: 2px 2px 0 rgba(22,32,43,0.12); } .btn.ghost { background: transparent; } .btn.sm { padding: 5px 10px; font-size: 11.5px; } .eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); } .pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--surface); font-size: 11.5px; font-weight: 500; color: var(--text-2); cursor: pointer; } .pill.on { background: var(--brass-pill); border-color: var(--brass); color: var(--brass-lo); font-weight: 600; } /* ── Channel badge ─────────────────────────────────────────────────────── */ .chan { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: var(--r-pill); border: 1px solid; font-family: var(--font-mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; } .chan .ico { width: 10px; height: 10px; stroke-width: 2; } .chan.lowes { color: var(--chan-lowes); border-color: var(--chan-lowes); background: rgba(47,95,160,0.08); } .chan.native { color: var(--chan-native); border-color: var(--chan-native); background: rgba(154,118,54,0.10); } /* ── Stage dot ─────────────────────────────────────────────────────────── */ .stage-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; display: inline-block; } .s-lead{background:var(--s-lead)} .s-qualified{background:var(--s-qualified)} .s-quoting{background:var(--s-quoting)} .s-sold{background:var(--s-sold)} .s-completed{background:var(--s-completed)} .s-closed{background:var(--s-closed)} /* ── Pipeline board ────────────────────────────────────────────────────── */ .pipeline-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; } .pipeline-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(232px, 1fr); gap: 16px; overflow-x: auto; padding-bottom: 8px; align-items: start; } .pipeline-col { display: flex; flex-direction: column; gap: 10px; } .pipeline-col-head { display: flex; align-items: center; gap: 8px; padding: 2px 4px 4px; } .pipeline-col-head b { font-size: 13px; color: var(--text-1); font-weight: 600; } .pipeline-count { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--text-2); background: var(--surface-hi); border: 1px solid var(--border-lo); border-radius: var(--r-pill); padding: 1px 8px; } .pipeline-cards { display: flex; flex-direction: column; gap: 10px; } .project-card { display: flex; flex-direction: column; gap: 7px; padding: 12px 13px; background: var(--surface); border: 1px solid var(--border-lo); border-left: 4px solid var(--c, var(--s-lead)); border-radius: var(--r-md); box-shadow: var(--shadow-card); text-decoration: none; color: inherit; transition: transform .1s, box-shadow .1s, border-color .1s; } .project-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); } .card-top { display: flex; align-items: center; justify-content: space-between; } .card-age { font-family: var(--font-mono); font-size: 10px; color: var(--text-3); } .card-name { font-size: 14px; font-weight: 600; color: var(--text-1); } .card-name .muted { color: var(--text-3); font-weight: 400; } .card-mid { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .card-trades { font-size: 12px; color: var(--text-2); } .card-val { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--text-1); } .card-note { font-size: 11.5px; color: var(--text-3); border-top: 1px solid var(--border-lo); padding-top: 6px; } .col-empty { font-size: 11.5px; color: var(--text-3); text-align: center; padding: 14px 0; border: 1px dashed var(--border); border-radius: var(--r-md); } .state-region { min-width: 0; width: 100%; } .state-region.is-empty, .state-region.is-loading, .state-region.is-error { display: flex; align-items: center; justify-content: center; gap: 8px; padding: clamp(14px, 3vw, 28px); border: 1px dashed var(--border); border-radius: var(--r-md); color: var(--text-3); font-size: clamp(11.5px, 1.5vw, 12.5px); line-height: 1.4; overflow-wrap: anywhere; text-align: center; } .state-region.is-error { color: var(--danger); } .state-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; } .state-region.is-loading .state-dot { animation: statePulse 1.2s ease-in-out infinite; } @keyframes statePulse { 0%, 100% { opacity: .35; transform: scale(.82); } 50% { opacity: 1; transform: scale(1); } } /* ── Project detail ────────────────────────────────────────────────────── */ .proj-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; } .proj-code { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--brass-lo); background: var(--brass-soft); border: 1px solid var(--brass-pill); border-radius: var(--r-sm); padding: 4px 9px; } .proj-name { font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1.1; letter-spacing: -0.01em; color: var(--text-1); } .proj-name .muted { color: var(--text-3); font-weight: 400; font-size: 18px; } .proj-meta { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; } .proj-stage { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); } .detail-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 18px; align-items: start; } @media (max-width: 900px) { .detail-grid { grid-template-columns: minmax(0, 1fr); } } /* minmax(0,…) keeps a panel with wide content (forms with min-width fields) from blowing the grid out past the viewport — it shrinks to the column and its content wraps/scrolls instead. */ .panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-card); padding: 18px; } .panel-title { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); margin-bottom: 14px; } .panel + .panel { margin-top: 18px; } .payload-block { font-family: var(--font-mono); font-size: 11.5px; line-height: 1.55; color: var(--text-1); background: var(--surface-lo); border: 1px solid var(--border-lo); border-radius: var(--r-md); padding: 12px 14px; margin: 0; max-height: 460px; overflow: auto; white-space: pre-wrap; word-break: break-word; } .job-list { display: flex; flex-direction: column; gap: 10px; } .job-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 14px; background: var(--surface-lo); border: 1px solid var(--border-lo); border-left: 4px solid var(--c, var(--s-sold)); border-radius: var(--r-md); } .job-item--c-lead { --c: var(--s-lead); } .job-item--c-qualified { --c: var(--s-qualified); } .job-item--c-quoting { --c: var(--s-quoting); } .job-item--c-sold { --c: var(--s-sold); } .job-item--c-completed { --c: var(--s-completed); } .job-item--c-closed { --c: var(--s-closed); } /* Phone width: the engagement/job row wraps its right-side cluster (value · badges · stage pill) below the identity instead of overflowing the row. */ @media (max-width: 560px) { .job-item { flex-wrap: wrap; } } /* A long unbreakable token in inline (e.g. the data-deletion page) wraps instead of overflowing. */ code { overflow-wrap: anywhere; } .job-trade { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--text-1); } .job-status { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); } .job-empty { font-size: 12.5px; color: var(--text-3); } .meta-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--border-lo); font-size: 12.5px; } .meta-row:last-child { border-bottom: none; } .meta-row .k { color: var(--text-3); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; } .meta-row .v { color: var(--text-1); font-weight: 500; } .backlink { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); text-decoration: none; margin-bottom: 14px; } .backlink:hover { color: var(--brass-lo); } .backlink .ico { width: 15px; height: 15px; } /* ════════════════════════════════════════════════════════════════════════ DETAIL PAGE SYSTEM (redesign Phase 1) — the canonical components every detail/list view composes from. Replaces the bolted-on `.panel` + inline `style="margin/gap/flex"` rot. Two-column work + sticky aside, sectioned bodies with consistent rhythm, a lifecycle spine, quiet empty states. ════════════════════════════════════════════════════════════════════════ */ /* Two-column detail: primary work column + sticky facts/actions aside. */ .detail { display: grid; grid-template-columns: 1.7fr 1fr; gap: 20px; align-items: start; } @media (max-width: 1000px) { .detail { grid-template-columns: 1fr; } } .detail-main, .detail-aside { display: flex; flex-direction: column; gap: 22px; min-width: 0; } .detail-aside { position: sticky; top: 82px; } /* The right rail recedes — lighter cards than the main column, so the eye leads with the content and treats the rail as a quiet glance. The brass Next-step card keeps its emphasis. */ .detail-aside .section:not(.nextstep) { background: var(--surface-lo); border-color: var(--border-lo); } @media (max-width: 1000px) { .detail-aside { position: static; } } /* Section — the canonical surface with built-in vertical rhythm (no inline margins). */ .section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-card); padding: 18px; } .section.flush { padding: 0; overflow: hidden; } /* for a section wrapping a full-bleed table */ .section-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .section-head .section-title { margin: 0; } .section-head .actions { margin-left: auto; } .section-title { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); margin: 0 0 14px; } .section-title .count { color: var(--text-2); } .section-note { font-size: 12px; color: var(--text-2); line-height: 1.5; margin: 0 0 14px; } /* Empty state — a quiet one-liner, never a tall dead box. */ .empty { font-size: 12.5px; color: var(--text-3); padding: 6px 0; } .empty.center { text-align: center; padding: 16px 0; } /* Key/value facts grid (generalizes .meta-row). */ .kv { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--border-lo); font-size: 12.5px; } .kv:last-child { border-bottom: none; } .kv > .k { color: var(--text-3); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase; flex: none; } .kv > .v { color: var(--text-1); font-weight: 500; text-align: right; } .kv > .v.strong { font-family: var(--font-display); font-size: 15px; font-weight: 700; } /* Action group — replaces every inline display:flex;gap;flex-wrap on button rows. */ .actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .actions.end { justify-content: flex-end; } .actions.stack { flex-direction: column; align-items: stretch; } .actions form { margin: 0; display: inline-flex; } .actions.stack form, .actions.stack form .btn, .actions.stack > .btn { width: 100%; justify-content: center; } /* Inline write-form: label/input/button on one baseline (gate, booking, money forms). Children size to content by default; add `.grow` to the free-text field that should expand. */ .inline-form { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; margin: 0; } .inline-form .field { margin: 0; } .inline-form .input, .inline-form select.input { width: auto; flex: 0 1 auto; min-width: 0; padding: 8px 10px; font-size: 12.5px; } .inline-form .input.grow { flex: 1 1 11rem; } /* A field WRAPPER that should expand (its label sits above a grow input — e.g. the takeover composer). */ .inline-form .field.grow { flex: 1 1 16rem; } /* Money / number treatment — mono, tabular, right-aligned wherever figures appear. */ .num, .money { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .money.pos { color: var(--success); } .money.neg { color: var(--danger); } /* Toolbar + spacing utilities — replace inline margin/flex nudges in view bodies. */ .toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; } .subhead { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); margin: 16px 0 8px; } .subhead:first-child { margin-top: 0; } /* Payment-history disclosure — the summary IS a subhead with a caret, keeping the cleared-events table (the secondary view) one click away under the primary payment ladder. */ .pay-history > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; width: fit-content; } .pay-history > summary::-webkit-details-marker { display: none; } .pay-history > summary::after { content: "▾"; font-size: 9px; opacity: 0.55; } .pay-history[open] > summary { margin-bottom: 6px; } .pay-history[open] > summary::after { content: "▴"; } .pay-history > summary:hover { color: var(--text-2); } /* Drop the native number spinner on the inline refund field so it reads as a clean amount input. */ .pay-history input[type="number"].input { appearance: textfield; -moz-appearance: textfield; } .pay-history input[type="number"].input::-webkit-outer-spin-button, .pay-history input[type="number"].input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Danger disclosure — a destructive section (cancel / rescind) folded shut so it doesn't sit open under the daily controls. The whole header is the click target; the body holds the full form. */ details.danger-disc { padding: 0; } .danger-disc__summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; padding: 16px 18px; } .danger-disc__summary::-webkit-details-marker { display: none; } .danger-disc__summary::after { content: "▾"; font-size: 10px; color: var(--text-3); margin-left: 4px; } .danger-disc[open] .danger-disc__summary { border-bottom: 1px solid var(--border); } .danger-disc[open] .danger-disc__summary::after { content: "▴"; } .danger-disc__summary .section-title { margin: 0; } .danger-disc__summary:hover .section-title { color: var(--danger); } .danger-disc__hint { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.02em; color: var(--text-3); margin-left: auto; } .danger-disc__body { padding: 16px 18px; } .mt-xl { margin-top: 26px; } .mt-lg { margin-top: 18px; } .mb-lg { margin-bottom: 18px; } .mt-md { margin-top: 12px; } .mb-md { margin-bottom: 12px; } .w-xs { max-width: 5rem; } .w-sm { max-width: 7rem; } .w-md { max-width: 11rem; } .w-lg { max-width: 15rem; } .field.row { flex-direction: row; gap: 16px; flex-wrap: wrap; align-items: center; } .svg-defs { position: absolute; width: 0; height: 0; } /* Lifecycle stepper — the status spine that makes a detail page read like a CRM. */ .lifecycle { display: flex; align-items: flex-start; padding: 4px 4px 2px; } .life-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; position: relative; text-align: center; } .life-step::before { content: ""; position: absolute; top: 5px; right: 50%; width: 100%; height: 2px; background: var(--border); z-index: 0; } .life-step:first-child::before { display: none; } .life-step.done::before, .life-step.now::before { background: var(--s-qualified); } /* Blueprint: stage markers are surveyor's diamonds, not dots. */ .life-dot { width: 10px; height: 10px; border-radius: 1px; transform: rotate(45deg); background: var(--surface); border: 2px solid var(--border); z-index: 1; } .life-step.done .life-dot { background: var(--s-qualified); border-color: var(--s-qualified); } .life-step.now .life-dot { background: var(--brass); border-color: var(--brass); box-shadow: 0 0 0 4px var(--brass-soft); } .life-step.dead .life-dot { background: var(--danger); border-color: var(--danger); } .life-step.dead::before { background: var(--danger); opacity: 0.4; } .life-label { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-3); } .life-step.done .life-label { color: var(--text-2); } .life-step.now .life-label { color: var(--text-1); font-weight: 600; } .life-step.dead .life-label { color: var(--danger); font-weight: 600; } /* Compact checklist (gates/inspections/811 in the aside) — status + label + inline action. */ .check-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border-lo); } .check-row:last-child { border-bottom: none; } .check-ico { width: 18px; height: 18px; border-radius: 50%; flex: none; display: grid; place-items: center; font-family: var(--font-mono); font-size: 11px; background: var(--surface-hi); color: var(--text-3); border: 1px solid var(--border); } .check-row.ok .check-ico { background: rgba(22,163,74,0.10); color: var(--success); border-color: rgba(22,163,74,0.3); } .check-row.wait .check-ico { background: rgba(245,158,11,0.10); color: #a16207; border-color: rgba(245,158,11,0.3); } .check-body { flex: 1; min-width: 0; } .check-title { font-size: 12.5px; color: var(--text-1); font-weight: 500; } .check-sub { font-size: 11px; color: var(--text-3); font-family: var(--font-mono); } /* ── Form controls (shared: auth now, office write-surfaces later) ──────── */ .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 15px; } .field-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); } .input { width: 100%; padding: 10px 12px; font-family: var(--font-ui); font-size: 13.5px; color: var(--text-1); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); transition: border-color .12s, box-shadow .12s; } .input::placeholder { color: var(--text-3); } .input:focus { outline: none; border-color: var(--brass); box-shadow: 0 0 0 3px var(--brass-soft); } /* Visible keyboard focus for buttons + disclosure summaries (WCAG 2.4.7) — inputs already had it; the action buttons (.btn, .todo-act) and the Block/Reopen disclosures did not. */ .btn:focus-visible, .todo-act:focus-visible, summary:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; border-radius: 2px; } /* The locked owner-gated setting VALUE is read-mostly info — readable body text, not the 9px kind-chip. */ .set-edit--locked .set-locked-val { font-family: var(--font-mono); font-size: 13px; color: var(--text-1); } .input.is-invalid { border-color: var(--danger); } .input.code { font-family: var(--font-mono); font-size: 12px; line-height: 1.55; } /* Two-column form body (cancel/edit forms) — collapses on narrow widths. */ .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; } @media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } } .checkrow { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); } .checkrow input { accent-color: var(--brass); width: 15px; height: 15px; } /* ── Flash / alert ─────────────────────────────────────────────────────── */ .flash { display: flex; align-items: center; gap: 9px; padding: 10px 13px; margin-bottom: 16px; border: 1px solid; border-radius: var(--r-sm); font-size: 12.5px; line-height: 1.4; } .flash .ico { width: 15px; height: 15px; flex: none; } .flash-notice { color: #15603a; background: rgba(22,163,74,0.08); border-color: rgba(22,163,74,0.35); } .flash-alert { color: #a3231f; background: rgba(220,38,38,0.07); border-color: rgba(220,38,38,0.34); } /* ── Auth screens (login / password reset / unlock / confirm) ──────────── */ body.auth { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 32px 20px; background: radial-gradient(120% 90% at 50% -10%, #f7f2e9 0%, var(--bg) 60%); color: var(--text-1); font-family: var(--font-ui); -webkit-font-smoothing: antialiased; } .auth-card { width: 100%; max-width: 392px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lift); padding: 30px 30px 26px; } .auth-brand { display: flex; flex-direction: column; align-items: center; gap: 11px; text-align: center; padding-bottom: 18px; margin-bottom: 20px; border-bottom: 1px solid var(--border-lo); } .auth-brand .office-logo-tile { width: 46px; height: 46px; } .auth-brand .office-logo-tile .ico { width: 25px; height: 25px; } .auth-wordmark b { font-family: var(--font-display); font-weight: 700; font-size: 21px; letter-spacing: -0.01em; color: var(--text-1); line-height: 1; } .auth-wordmark small { display: block; margin-top: 4px; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.18em; color: var(--text-3); } .auth-title { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--text-1); margin: 0 0 3px; } .auth-sub { font-size: 12.5px; color: var(--text-2); margin: 0 0 20px; } .auth-card .btn.prim { width: 100%; justify-content: center; padding: 10px 14px; font-size: 13px; margin-top: 4px; } .auth-links { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-lo); display: flex; flex-direction: column; gap: 8px; text-align: center; } .auth-links a { font-size: 12px; color: var(--text-2); text-decoration: none; } .auth-links a:hover { color: var(--brass-lo); } .auth-errors { margin: 0 0 16px; padding: 11px 13px; list-style: none; background: rgba(220,38,38,0.06); border: 1px solid rgba(220,38,38,0.30); border-radius: var(--r-sm); color: #a3231f; font-size: 12.5px; } .auth-errors li { margin-left: 2px; } /* ── To-do queue (wf-tasks A · triage inbox) ───────────────────────────── */ .todo-layout { display: grid; grid-template-columns: 188px 1fr; gap: 22px; align-items: start; } .todo-rail { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 18px; } .todo-rail .eyebrow { margin: 2px 0 6px; } .todo-filt { display: flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: var(--r-sm); font-size: 12.5px; color: var(--text-2); text-decoration: none; cursor: pointer; } .todo-filt:hover { background: var(--surface-hi); color: var(--text-1); } .todo-filt.on { background: var(--brass-pill); color: var(--brass-lo); font-weight: 600; } .todo-count { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-3); background: var(--surface-hi); border-radius: var(--r-pill); padding: 1px 7px; } .todo-filt.on .todo-count { background: rgba(216,84,42,0.20); color: var(--brass-lo); } .todo-list { display: flex; flex-direction: column; gap: 18px; min-width: 0; } .todo-bucket { display: flex; flex-direction: column; gap: 7px; } .todo-buckethead { display: flex; align-items: center; gap: 8px; padding: 0 2px 2px; } .todo-buckethead b { font-size: 12px; color: var(--text-1); font-weight: 600; } .todo-buckethead .todo-count { margin-left: 2px; } .todo-task { display: flex; align-items: center; gap: 12px; padding: 11px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-card); } .todo-task.high { border-left: 3px solid var(--danger); } /* Urgent (C-6 IME mapping) — heavier than high: full danger edge + tinted row (audit G12). */ .todo-task.urgent { border-left: 4px solid var(--danger); background: rgba(194,54,43,0.05); } .todo-checkform { display: flex; flex: none; } .todo-check { width: 18px; height: 18px; border: 1.5px solid var(--border); border-radius: 5px; flex: none; display: grid; place-items: center; padding: 0; background: none; color: transparent; } .todo-check .ico { width: 12px; height: 12px; } button.todo-check { cursor: pointer; transition: border-color .12s, color .12s, background .12s; } button.todo-check:hover { border-color: var(--brass); color: var(--brass); background: var(--surface-hi); } .todo-check.blocked { border-style: dashed; opacity: .55; } .todo-body { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; } .todo-title { font-size: 13px; font-weight: 500; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .todo-meta { display: flex; align-items: center; gap: 8px; font-size: 11.5px; } .todo-meta .muted { color: var(--text-3); } .todo-typetag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.02em; color: var(--text-2); background: var(--surface-hi); border-radius: var(--r-sm); padding: 1px 6px; } .todo-src { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 7px; border-radius: var(--r-pill); border: 1px solid var(--border); color: var(--text-3); flex: none; } .todo-src.auto { color: var(--brass-lo); border-color: var(--brass); background: var(--brass-soft); } .todo-due { font-family: var(--font-mono); font-size: 11px; color: var(--text-2); flex: none; min-width: 52px; text-align: right; } .todo-due.today { color: var(--brass-lo); font-weight: 600; } .todo-due.over { color: var(--danger); font-weight: 600; } .todo-avatar { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; font-family: var(--font-mono); font-size: 10px; font-weight: 600; background: var(--surface-hi); color: var(--text-2); border: 1px solid var(--border); } .todo-avatar.owner { background: var(--brass-pill); color: var(--brass-lo); border-color: var(--brass); } .todo-caught { display: flex; align-items: center; gap: 9px; padding: 26px; justify-content: center; color: var(--text-3); font-size: 13px; } .todo-caught .ico { width: 17px; height: 17px; color: var(--brass); } @media (max-width: 640px) { .todo-layout { grid-template-columns: minmax(0, 1fr); gap: 14px; } .todo-rail { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px; } .todo-rail .eyebrow { flex: 0 0 100%; margin-bottom: 2px; } .todo-filt { flex: 1 1 7rem; justify-content: center; min-width: 0; } .todo-task { align-items: flex-start; flex-wrap: wrap; gap: 8px 10px; padding: 12px; } .todo-checkform, .todo-check.blocked { order: 1; margin-top: 2px; } .todo-body { order: 2; flex: 1 1 calc(100% - 34px); } .todo-title { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; } .todo-meta { align-items: flex-start; flex-wrap: wrap; gap: 4px 6px; } .todo-src { order: 3; margin-left: 28px; } .todo-due, .todo-avatar { order: 3; } .todo-due { min-width: 0; text-align: left; } .todo-acts { order: 4; flex: 1 0 calc(100% - 28px); flex-wrap: wrap; margin-left: 28px; } } /* ── Data table (reusable list surface — Customers, later Jobs/Subs/…) ──── */ .data-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-card); overflow: hidden; } .data-table thead th { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); text-align: left; font-weight: 500; padding: 11px 16px; background: var(--surface-lo); border-bottom: 1px solid var(--border); } .data-table th.num, .data-table td.num { text-align: right; } .data-table tbody td { padding: 12px 16px; font-size: 13px; color: var(--text-2); border-bottom: 1px solid var(--border-lo); vertical-align: middle; } .data-table tbody tr:last-child td { border-bottom: none; } .data-table tbody tr:hover { background: var(--surface-hi); } .cust-name { font-size: 13.5px; font-weight: 600; color: var(--text-1); text-decoration: none; } .cust-name:hover { color: var(--brass-lo); } .cust-sub { font-size: 11.5px; color: var(--text-3); margin-left: 6px; } .cust-contact { font-family: var(--font-mono); font-size: 12px; color: var(--text-2); } /* Small/narrow screens: a wide table scrolls inside its own box instead of forcing the WHOLE page to scroll sideways (which shifts the layout). display:block makes the table a scroll container while the inner rows keep their natural width; reverts to a normal full-width table above the breakpoint. */ @media (max-width: 1000px) { .data-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* .job-item is rendered as a link on the customer detail (a div on the project detail) */ a.job-item { text-decoration: none; color: inherit; } a.job-item:hover { background: var(--surface-hi); } /* Settings sub-navigation — config panes nested under Settings (wf-admin). */ /* The tab strip scrolls horizontally on narrow screens instead of overflowing the page. */ .set-tabs { display: flex; gap: 6px; margin: 0 0 18px; border-bottom: 1px solid var(--border-lo); overflow-x: auto; } .set-tab { font-size: 12.5px; text-decoration: none; color: var(--text-2); padding: 8px 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; flex: none; } .set-tab:hover { color: var(--brass-lo); } .set-tab.on { color: var(--text-1); font-weight: 600; border-bottom-color: var(--brass); } .set-desc { font-size: 12.5px; color: var(--text-2); line-height: 1.55; max-width: 760px; margin: 0 0 18px; } .tpl-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } .tpl-head .panel-title { margin: 0; } /* Project sub-navigation — nested sections drilled into from the job detail. */ .proj-tabs { display: flex; gap: 6px; margin: 16px 0 2px; } .proj-tab { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; text-decoration: none; color: var(--text-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 6px 12px; background: var(--surface); } .proj-tab:hover { border-color: var(--brass); color: var(--brass-lo); } .proj-tab .ico { width: 15px; height: 15px; } /* ── Notifications inbox (wf-server3) + shared queue rows ─────────────── */ .notif-row { display: flex; align-items: flex-start; gap: 11px; padding: 13px 4px; border-bottom: 1px solid var(--border-lo); } .notif-row:last-child { border-bottom: none; } .notif-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); margin-top: 5px; flex: none; } .notif-row.unread .notif-dot { background: var(--brass); } .notif-body { flex: 1; min-width: 0; } .notif-title { font-size: 13.5px; color: var(--text-1); } .notif-row.unread .notif-title { font-weight: 600; } .notif-meta { font-size: 11.5px; color: var(--text-3); margin-top: 2px; } .notif-meta a { color: var(--text-2); font-family: var(--font-mono); text-decoration: none; } .notif-meta a:hover { color: var(--brass); } .notif-time { font-size: 11px; color: var(--text-3); font-family: var(--font-mono); white-space: nowrap; } @media (max-width: 640px) { .doc-layout { grid-template-columns: minmax(0, 1fr); } .doc-rail { gap: 10px; } .panel { padding: 14px; } .notif-row { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 5px 9px; padding: 12px 2px; } .notif-dot { margin-top: 6px; } .notif-title, .notif-meta { overflow-wrap: anywhere; } .notif-time, .notif-row .todo-actform { grid-column: 2; } .notif-time { white-space: normal; } .notif-row .todo-act { width: auto; } } /* Project dossier — Activity + Note interleaved timeline */ .tl-row { display: flex; gap: 11px; padding: 11px 2px; border-bottom: 1px solid var(--border-lo); } .tl-row:last-child { border-bottom: none; } .tl-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border); margin-top: 5px; flex: none; box-shadow: 0 0 0 3px var(--surface); } .tl-dot.in { background: var(--brass); } .tl-dot.warn { background: var(--warning); } .tl-body { flex: 1; min-width: 0; } .tl-kind { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); } .tl-text { font-size: 13px; color: var(--text-1); margin-top: 2px; } .tl-when { font-size: 11px; color: var(--text-3); font-family: var(--font-mono); margin-top: 3px; } /* Activity composer — one box with a type switcher (Communication / Note / To-do); only the chosen type's fields show. Pure CSS: the visually-hidden radios drive both the active tab and which panel is visible (no JS). Mono-caps tabs + brass active state echo the timeline labels below. */ .composer { margin-bottom: 18px; } .composer-radio { position: absolute; width: 1px; height: 1px; margin: -1px; opacity: 0; pointer-events: none; } .composer-tabs { display: inline-flex; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; margin-bottom: 13px; } .composer-tab { font: 600 11px/1 var(--font-ui); letter-spacing: 0.05em; text-transform: uppercase; padding: 9px 16px; cursor: pointer; user-select: none; color: var(--text-3); background: var(--surface-lo); border-right: 1px solid var(--border); transition: background .12s, color .12s; } .composer-tab:last-child { border-right: none; } .composer-tab:hover { color: var(--text-1); background: var(--surface-hi); } #ctab-log:checked ~ .composer-tabs .composer-tab[for="ctab-log"], #ctab-note:checked ~ .composer-tabs .composer-tab[for="ctab-note"], #ctab-task:checked ~ .composer-tabs .composer-tab[for="ctab-task"] { background: var(--brass); color: #fff; } #ctab-log:focus-visible ~ .composer-tabs .composer-tab[for="ctab-log"], #ctab-note:focus-visible ~ .composer-tabs .composer-tab[for="ctab-note"], #ctab-task:focus-visible ~ .composer-tabs .composer-tab[for="ctab-task"] { outline: 2px solid var(--brass-lo); outline-offset: 2px; } .composer-form { display: none; align-items: flex-end; gap: 8px; flex-wrap: wrap; } .composer-form .input.grow { flex: 1 1 13rem; } #ctab-log:checked ~ .composer-panels .cf-log, #ctab-note:checked ~ .composer-panels .cf-note, #ctab-task:checked ~ .composer-panels .cf-task { display: flex; } .composer-hint { flex-basis: 100%; margin: 3px 0 0; font-size: 11px; color: var(--text-3); } /* KPI tiles (Accounting / Integrations) */ .kpi-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 20px; } .kpi-tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px 16px; box-shadow: var(--shadow-card); } .kpi-tile .k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); } .kpi-tile .v { font-family: var(--font-display); font-size: 20px; font-weight: 700; margin-top: 4px; } .kpi-tile .v.sm { font-size: 16px; } .kpi-tile .v.neg { color: var(--danger); } /* Horizontal bar (pipeline funnel, supplier perf) — fill width is data-driven (inline %). */ .bar-row { display: flex; align-items: center; gap: 10px; margin: 7px 0; } .bar-label { width: 78px; font-size: 12px; color: var(--text-2); } .bar-track { flex: 1; height: 18px; background: var(--surface-hi); border-radius: 5px; overflow: hidden; } .bar-fill { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--brass-hi), var(--brass-lo)); } .bar-count { width: 34px; text-align: right; font-family: var(--font-mono); font-size: 12px; } .kpi-tile .n { font-size: 11px; color: var(--text-3); margin-top: 2px; } /* Flagged KPI note — draws the eye to a lapsing/expired condition (e.g. crew compliance expiry). */ .kpi-tile .n.kpi-flag { color: var(--warning); font-weight: 600; } .health-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px; } .health-dot.ok { background: var(--success); } .health-dot.wait { background: var(--warning); } .health-dot.bad { background: var(--danger); } /* ── Documents hub (wf-server2 DocumentsHub) ──────────────────────────── */ .doc-layout { display: grid; grid-template-columns: 1fr 330px; gap: 16px; align-items: start; } @media (max-width: 900px) { .doc-layout { grid-template-columns: 1fr; } } .doc-group { margin-bottom: 16px; } .doc-group:last-child { margin-bottom: 0; } .doc-group .eyebrow { margin-bottom: 6px; display: block; } .doc-row { display: flex; align-items: center; gap: 10px; padding: 11px 4px; border-bottom: 1px solid var(--border-lo); } .doc-row:last-child { border-bottom: none; } .doc-row > .ico { width: 16px; height: 16px; color: var(--text-3); flex: none; } .doc-name { flex: 1; font-size: 13px; color: var(--text-1); } .sku-tag { font-family: var(--font-mono); font-size: 10px; color: var(--text-3); background: var(--surface-hi); border: 1px solid var(--border-lo); border-radius: var(--r-sm); padding: 1px 6px; margin-left: 6px; } .doc-row .badge { text-transform: uppercase; font-family: var(--font-mono); font-size: 10px; flex: none; } .doc-rail { display: flex; flex-direction: column; gap: 14px; } .sign-steps { margin-top: 10px; display: flex; flex-direction: column; gap: 9px; } .sign-step { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--text-3); } .sign-step.done { color: var(--text-1); } .sign-step.now { color: var(--brass-lo); font-weight: 600; } .sign-dot { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; flex: none; font-family: var(--font-mono); font-size: 11px; border: 1px solid var(--border); background: var(--surface-hi); color: var(--text-3); } .sign-dot .ico { width: 12px; height: 12px; } .sign-step.done .sign-dot { background: var(--success); border-color: var(--success); color: #fff; } .sign-step.now .sign-dot { background: var(--brass); border-color: var(--brass); color: #fff; } .sign-box { margin-top: 12px; border: 1px dashed var(--border); border-radius: var(--r-md); text-align: center; padding: 14px; font-family: var(--font-display); font-size: 16px; color: var(--text-3); } .doc-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .doc-note { font-size: 11.5px; color: var(--text-3); line-height: 1.5; margin: 12px 0 0; } .doc-note code { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-2); } /* ── Interactive action controls (To-do queue · lead assignment · inline write actions) ───── */ .todo-acts { display: inline-flex; gap: 6px; align-items: center; margin-left: 8px; } .todo-actform { display: inline; margin: 0; } .todo-act { font: 500 11px/1 var(--font-ui); padding: 6px 11px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text-2); cursor: pointer; transition: background 0.12s, border-color 0.12s, color 0.12s; } .todo-act:hover { border-color: var(--brass); color: var(--brass-lo); background: var(--brass-soft); } .todo-act.prim { background: linear-gradient(150deg, var(--brass-hi), var(--brass)); border-color: var(--brass-lo); color: #fff; } .todo-act.prim:hover { filter: brightness(1.05); color: #fff; } .lead-assign { display: inline-flex; gap: 7px; align-items: center; margin: 0; } .lead-assign-select { font-size: 12px; padding: 6px 8px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text-1); } .lead-assign-select:focus { outline: none; border-color: var(--brass); box-shadow: 0 0 0 3px var(--brass-soft); } /* ═══════════════════════════════════════════════════════════════════════════ Design system v2 — confirm modal · toast · form controls · record system (UI foundation). New namespaces (.confirm-* / .toast-* / .page-header / .record-row / .rr-* / .avatar) plus element-scoped resets for native widgets. Nothing here redefines a pre-existing office.css class. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Branded confirm modal (replaces window.confirm globally) ───────────── */ .confirm-backdrop { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(18, 34, 58, 0.55); /* dim navy (--nav-bg) */ -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; transition: opacity .16s ease; } .confirm-backdrop.is-open { opacity: 1; } .confirm-card { width: 100%; max-width: 460px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lift); padding: 24px 24px 20px; transform: translateY(8px) scale(.98); transition: transform .18s ease; } .confirm-backdrop.is-open .confirm-card { transform: translateY(0) scale(1); } .confirm-title { margin: 0 0 8px; font-family: var(--font-display); font-weight: 700; font-size: 21px; line-height: 1.15; letter-spacing: -0.01em; color: var(--text-1); } .confirm-body { margin: 0; font-family: var(--font-ui); font-size: 13.5px; line-height: 1.5; color: var(--text-2); } .confirm-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; } /* Danger variant: reuse .btn.prim geometry, recolor to --danger (no class redefine) */ .confirm-ok--danger { background: var(--danger); border-color: #b91c1c; color: #fff; } .confirm-ok--danger:hover { filter: brightness(1.05); background: var(--danger); } @media (max-width: 480px) { .confirm-card { max-width: 100%; } .confirm-actions { flex-direction: column-reverse; } .confirm-actions .btn { width: 100%; justify-content: center; } } @media (prefers-reduced-motion: reduce) { .confirm-backdrop, .confirm-card { transition: none; } } /* ── Toasts (transient action feedback — additive to the static .flash banner) ── Driven by toast_controller.js: a single top-right stack of parchment cards with a brass (notice) / danger (alert) left accent, an icon, the message, a dismiss button, a subtle slide-in, and ~4s auto-dismiss with a fade-out. */ .toast-stack { position: fixed; top: 16px; right: 16px; z-index: 60; display: flex; flex-direction: column; gap: 10px; width: 340px; max-width: calc(100vw - 32px); pointer-events: none; } .toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; padding: 12px 12px 12px 14px; background: var(--surface); color: var(--text-1); border: 1px solid var(--border); border-left: 3px solid var(--brass); border-radius: var(--r-md); box-shadow: var(--shadow-lift); cursor: pointer; font-size: 12.5px; line-height: 1.45; opacity: 0; transform: translateX(16px); transition: opacity .24s ease, transform .24s ease; } .toast.in { opacity: 1; transform: translateX(0); } .toast.out { opacity: 0; transform: translateX(16px); } .toast.notice { border-left-color: var(--brass); } .toast.alert { border-left-color: var(--danger); } .toast .toast-ico { width: 16px; height: 16px; flex: none; margin-top: 1px; } .toast.notice .toast-ico { color: var(--brass-lo); } .toast.alert .toast-ico { color: var(--danger); } .toast .toast-msg { flex: 1; min-width: 0; word-break: break-word; } .toast .toast-x { flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin: -3px -3px -3px 0; padding: 0; background: transparent; border: none; border-radius: var(--r-sm); color: var(--text-3); cursor: pointer; transition: background .12s, color .12s; } .toast .toast-x:hover { background: var(--surface-hi); color: var(--text-1); } .toast .toast-x .ico { width: 13px; height: 13px; } @media (prefers-reduced-motion: reduce) { .toast { transition: opacity .12s ease; transform: none; } .toast.in, .toast.out { transform: none; } } /* ── Native form controls (select / date / time / number / check / radio) ── Globally dress OS-native widgets so they match .input. Pure CSS, no HTML changes: every `select.input` and date/time/number input inherits the .input box (border/radius/focus ring) from the existing rule above; these rules only add appearance resets, the custom brass chevron, height parity, and picker-indicator tinting. Do not duplicate the text-input .input rule. */ /* Custom chevron + appearance reset for never floats in the bar reading as a mystery control. */ .tb-menu { position: relative; } .tb-menu > summary { list-style: none; cursor: pointer; } .tb-menu > summary::-webkit-details-marker { display: none; } .tb-menu > summary::after { content: "▾"; margin-left: 6px; font-size: 10px; opacity: 0.6; } .tb-menu--end { margin-left: auto; } .tb-menu__pop { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; min-width: 230px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-card); } .tb-menu--end .tb-menu__pop { left: auto; right: 0; } .tb-menu__pop form { display: flex; flex-direction: column; gap: 9px; margin: 0; } .tb-menu__pop .input { width: 100%; } .tb-menu__lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-3); } .tb-menu--danger > summary:hover { color: var(--danger); border-color: var(--danger); } /* ══ Project detail v2 — hero, deal focal point, contact + next-step (frontend-design 2026-06-09) ══ */ /* Header: identity on the left, the ONE primary next-step action on the right. */ .proj-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin: 4px 0 18px; } .proj-hero__id { min-width: 0; } .proj-hero .proj-code { display: inline-block; margin-bottom: 8px; } .proj-hero .proj-name { font-family: var(--font-display); font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; color: var(--text-1); margin: 0; } .proj-hero .proj-name .muted { font-weight: 600; font-size: 22px; } .proj-hero .proj-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 10px; font-size: 12.5px; color: var(--text-2); } .proj-hero .proj-stage { display: inline-flex; align-items: center; gap: 6px; } .proj-hero__cta { flex-shrink: 0; } .btn-lg { padding: 11px 22px; font-size: 14px; border-radius: var(--r-md); } .proj-stepper { margin-bottom: 16px; } /* Header right column: the secondary "manage this deal" tools stack just above the primary CTA, both right-aligned. The tools are quiet ghost buttons; Mark lost keeps its danger-on-hover cue (from .tb-menu--danger) and right-aligns its popover (.tb-menu--end) so it never runs off-screen. */ .proj-hero__actions { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex-shrink: 0; } .proj-hero__tools { display: flex; align-items: center; gap: 4px; } /* Terminal-outcome banner (lost / cancelled) — flat, pencil-rule, left datum edge in the outcome tone. */ .proj-terminal { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border-lo); border-radius: var(--r-md); border-left: 4px solid var(--c); } .proj-terminal--lost { --c: var(--danger); } .proj-terminal--cancelled { --c: var(--text-3); } .proj-terminal__mark { font-family: var(--font-mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--c); padding-top: 2px; flex: none; } .proj-terminal__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .proj-terminal__body strong { font-size: 14px; color: var(--text-1); } .proj-terminal__body .muted { font-size: 12.5px; } /* ════ THE DEAL — the page's focal point: a hero amount + per-trade scope + status + actions. ════ */ .deal__head { display: flex; align-items: baseline; gap: 14px; } .deal__label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); } .deal__amount { font-family: var(--font-display); font-size: 34px; font-weight: 700; letter-spacing: -0.02em; color: var(--text-1); line-height: 1; margin-left: auto; } .deal__amount--empty { color: var(--text-3); font-size: 28px; } .deal__facts { display: flex; flex-wrap: wrap; gap: 12px 30px; margin-top: 16px; } .deal__fact { display: flex; flex-direction: column; gap: 3px; } .deal__fact .k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-3); } .deal__fact .v { font-size: 13.5px; color: var(--text-1); font-weight: 500; } /* Per-trade scope list (every trade on the engagement, priced or awaiting a design). */ .scope { margin-top: 16px; border-top: 1px solid var(--border-lo); } .scope__line { display: flex; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-lo); } .scope__trade { font-size: 13.5px; font-weight: 600; color: var(--text-1); text-decoration: none; } .scope__trade:hover { color: var(--brass-lo); } .scope__design { font-size: 12px; } .scope__price { margin-left: auto; font-size: 13.5px; color: var(--text-1); font-variant-numeric: tabular-nums; } .scope__add { display: flex; gap: 8px; margin-top: 12px; } .scope__add .input { max-width: 170px; } /* Next-step guidance card — plain-language "do this next", brass-tinted so it reads as the prompt. */ .nextstep { background: linear-gradient(160deg, var(--brass-soft), var(--surface)); border-color: var(--brass-lo); } .nextstep__label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brass-lo); margin-bottom: 8px; } .nextstep__hint { font-size: 13.5px; line-height: 1.5; color: var(--text-1); margin: 0 0 14px; } .nextstep .btn.prim { width: 100%; justify-content: center; } /* Customer card — actionable contact, not a database dump. */ .contact__name { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--text-1); margin-bottom: 8px; } .contact__line { padding: 3px 0; } .contact__val { font-family: var(--font-mono); font-size: 13px; color: var(--brass-lo); text-decoration: none; } .contact__val:hover { text-decoration: underline; } .contact__meta { font-size: 12.5px; color: var(--text-2); margin-top: 6px; } /* The customer-name link (contact card) reads as ink, not UA blue (F005). */ .contact__namelink { color: var(--text-1); text-decoration: none; } .contact__namelink:hover { color: var(--brass-lo); text-decoration: underline; } /* Bare links inside a key/value cell (dossier phone/email/referrer) take the brass accent, not UA blue (F006). */ .kv .v a, .kv > .v a { color: var(--brass-lo); text-decoration: none; } .kv .v a:hover, .kv > .v a:hover { text-decoration: underline; } .contact__sep { height: 1px; background: var(--border-lo); margin: 14px 0; } /* ── Blueprint direction — display-weight + annotation details (direction A, 2026-06-09) ── */ /* Saira carries the display voice at 800 where Playfair sat at 700. */ .office-toptitle, .proj-hero .proj-name, .deal__amount, .kpi-tile .v { font-weight: 800; } .proj-hero .proj-code, .h-code { color: var(--brass); } /* The reference-number chip reads as a drawing label: orange mono, no pill. */ .proj-code { font-family: var(--font-mono); letter-spacing: 0.08em; } /* ── §5 holds — the stop-work banner (Phase 1 coverage build, 2026-06-09). A frozen engagement must be impossible to miss: danger-edged flat card, drafting style, above the stepper. ── */ .hold-banner { background: rgba(194,54,43,0.06); border: 1px solid var(--danger); border-left: 4px solid var(--danger); border-radius: var(--r-md); padding: 13px 16px; margin: 0 0 16px; } .hold-banner__head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; color: var(--danger); font-size: 13.5px; } .hold-banner__head .ico { width: 16px; height: 16px; } .hold-banner__head strong { color: var(--text-1); font-weight: 700; } .hold-banner__body { margin-top: 6px; font-size: 12.5px; color: var(--text-2); } .hold-banner__acts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; } .hold-banner__link { color: var(--danger); font-weight: 600; text-decoration: none; margin-left: 8px; } .hold-banner__link:hover { text-decoration: underline; } /* Portal terminal-project note (Phase 1 — dead engagement never collects). */ .portal-note { font-size: 13px; line-height: 1.55; color: var(--text-2); background: var(--surface-lo); border: 1px solid var(--border-lo); border-radius: var(--r-md); padding: 12px 14px; margin: 0 0 14px; } /* D-24 portal estimate card fine print. */ .portal-finehint { font-size: 11.5px; margin-top: 8px; } /* ══ Phase 2 — recovery paths (2026-06-09) ══ */ /* Payments worklist (money-events): next-step hint text in table rows + under the record form. */ .cell-hint { color: var(--text-3); font-size: 12.5px; max-width: 26rem; display: inline-block; } /* ── Purchasing (materials cluster, 2026-06-09): per-order tool rows + disclosures ───────────── The purchasing table grows a sub-row under each order carrying its state-gated tools (receive lines / promised date / invoice / re-source / start return). Disclosure pattern mirrors .doc-upload. */ .data-table tr.mo-tools > td { background: var(--surface-lo); border-top: 0; padding: 8px 16px 12px; } .mo-tools .inline-form, .mo-tools .todo-actform { display: inline-flex; vertical-align: middle; margin: 4px 12px 0 0; } .mo-tools > td > .muted { margin-right: 12px; } .mo-disclose { display: inline-block; vertical-align: middle; margin: 4px 12px 0 0; } .mo-disclose > summary { display: inline-flex; cursor: pointer; list-style: none; } .mo-disclose > summary::-webkit-details-marker { display: none; } .mo-disclose__form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: 10px; padding: 14px; background: var(--surface); border: 1px solid var(--border-lo); border-radius: var(--r-lg); box-shadow: var(--shadow-card); } .mo-disclose__field { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--text-3); } .mo-disclose__field .input { min-width: 160px; font-size: 13px; text-transform: none; font-weight: 400; letter-spacing: 0; color: var(--text-1); } .mo-disclose__form .mo-lines { flex: 1 1 100%; } .mo-lines { width: 100%; border-collapse: collapse; } .mo-lines th { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); text-align: left; padding: 4px 8px; } .mo-lines td { padding: 4px 8px; font-size: 12.5px; color: var(--text-2); border-top: 1px solid var(--border-lo); } .mo-lines th.num, .mo-lines td.num { text-align: right; } .input.mo-qty { width: 92px; } /* ══ Phase 3 — the five-pattern visual sweep (2026-06-09) ══ */ /* ── Phase-3 dash-todo sweep ─────────────────────────────────────────────── */ /* Toasts clear the sticky topbar (search / sign-out) instead of covering it. */ .toast-stack { top: 78px; } /* Blueprint geometry: square the initials avatars (retheme seam — were 50% circles). */ .avatar, .office-avatar, .todo-avatar { border-radius: var(--r-sm); } /* Channel-mix bar: drop the hardcoded 7px pill radius to the token scale. */ .chan-bar { border-radius: var(--r-sm); } /* "Visit" markers move to blueprint blue — danger red stays exclusively "blocked", and the brass accent stops doubling as a data color on the map/queues. */ .q-dot.visit { background: var(--s-quoting); } .lg.visit::before { background: var(--s-quoting); } /* To-do queue: row titles are links to the task's record. */ a.todo-title { color: var(--text-1); text-decoration: none; } a.todo-title:hover { color: var(--brass-lo); text-decoration: underline; } /* Collapsible due buckets (details/summary) — "No date" ships closed. */ details.todo-bucket > summary.todo-buckethead { cursor: pointer; user-select: none; list-style: none; } details.todo-bucket > summary.todo-buckethead::-webkit-details-marker { display: none; } details.todo-bucket > summary.todo-buckethead::before { content: "▸"; font-size: 10px; color: var(--text-3); } details.todo-bucket[open] > summary.todo-buckethead::before { content: "▾"; } /* Quiet exception actions (Block / Cancel) so Start `prim` reads as the row's one next step. */ .todo-act.ghost { border-color: transparent; color: var(--text-3); background: none; } .todo-act.ghost:hover { border-color: var(--border); color: var(--text-1); background: var(--surface-hi); } /* Untimed installs read "All day" — muted so timed slots still pop. */ .sched-time.allday { color: var(--text-3); } /* ── Phase 3 · funnel sweep ─────────────────────────────────────────────── */ /* Pipeline ledger groups are now
/ (summary carries the existing .ledger-grouphead class): stage headers chunk the long scroll — bigger label, Blueprint surveyor's-diamond stage marker, sticky under the topbar, full-width rule, disclosure caret. Completed/Closed start collapsed in the view; count + sum stay visible in the folded header. */ summary.ledger-grouphead { list-style: none; cursor: pointer; position: sticky; top: 76px; z-index: 3; background: var(--bg); } summary.ledger-grouphead::-webkit-details-marker { display: none; } .ledger-grouphead { padding: 8px 2px 7px; border-bottom: 1px solid var(--border); } .ledger-grouphead b { font-size: 14px; } .ledger-grouphead .stage-dot { border-radius: 1px; transform: rotate(45deg); } .ledger-grouphead::after { content: ""; flex: none; width: 7px; height: 7px; margin: -2px 4px 0 10px; border-right: 1.5px solid var(--text-3); border-bottom: 1.5px solid var(--text-3); transform: rotate(-45deg); transition: transform .12s; } details.ledger-group[open] > .ledger-grouphead::after { transform: rotate(45deg); margin-top: -4px; } .ledger-rows { margin-top: 10px; } /* A group sum that includes unsold quotes is forecast, not booked money. */ .ledger-sum.quote { color: var(--text-3); font-weight: 500; } /* Lead intake: the per-row assign select gets the same appearance reset + brass chevron as select.input — it sat as the screen's one native-rounded control beside the square Assign button. (Not given .input: that rule's width:100% would break the row's inline-flex.) */ select.lead-assign-select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 28px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23b23f1c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; background-size: 12px 12px; } select.lead-assign-select:hover, select.lead-assign-select:focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23d8542a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E"); } /* Suggested-rep line: the happy path is a quiet confirmation (gray); the no-coverage case is the alarming one — orange/danger means "look here". */ .lead-suggest { color: var(--text-3); } .lead-suggest.none { color: var(--danger); } /* Sentence-case help line under a field's controls (e.g. Trades on lead intake). */ .field-help { font-size: 11.5px; color: var(--text-3); } /* ── [customers sweep] ──────────────────────────────────────────────────── */ /* Demote the rolodex mailto: tertiary data, not a call to action — muted like the rest of .rr-sub, underline only on hover, so names carry the scan track. */ .record-row .rr-sub a { color: var(--text-3); text-decoration: none; } .record-row .rr-sub a:hover { color: var(--brass-lo); text-decoration: underline; } /* Terminal stages share the stage-dot anatomy (one pill silhouette per column). Lost = muted (didn't win); cancelled/rescinded = red (ended a live deal). NOTE: inert until Office::UiHelper::STAGE_CLASSES includes these statuses — see shared_notes. */ .s-lost { background: var(--text-3); } .s-cancelled, .s-rescinded { background: var(--danger); } /* Blueprint pass for the one remaining circle family: avatars square off like every other tile in the system (later rule wins over the 50% radii at equal specificity). */ .avatar, .office-avatar, .todo-avatar { border-radius: var(--r-sm); } /* ── Calendars sweep (visual-audit Phase 3) ──────────────────────────────── */ /* [cal] The viewed date is the toolbar's title on a date-paging surface — promote it to the display face (overrides the 15px .js-week-label rule earlier in the file; it already carries var(--font-display)/var(--text-1)). */ .js-week-label { font-size: 19px; } /* [cal] Blueprint corner tokens — retire the old-skin rounded shapes on the calendar and dispatch board (hardcoded 50% / 5px / 3px / 999px radii predate the token layer). */ .cal-event { border-radius: var(--r-sm); } .cal-rep-avatar { border-radius: var(--r-sm); } .cal-dot, .gantt-swatch, .gantt-crew-dot { border-radius: var(--r-sm); } .gantt-crew-load { border-radius: var(--r-pill); } /* [cal] Week view, all reps: the rep-initials chip on each block (who covers the visit). Absolutely positioned inside .cal-event; pointer-events off so the block stays the tap target. */ .cal-event-rep { position: absolute; top: 2px; right: 2px; width: 15px; height: 15px; border-radius: var(--r-sm); display: grid; place-items: center; color: #fff; font-size: 7.5px; font-weight: 700; letter-spacing: 0.02em; pointer-events: none; } /* [gantt] Today/weekend cues carried through the lane bodies. Grid items honor z-index even when static — shades sit at 0, bars at 1. Negative vertical margin bleeds the column through the lane's 10px padding so it reads floor-to-ceiling. */ .gantt-colshade { pointer-events: none; z-index: 0; margin: -10px 0; background: var(--surface-hi); } .gantt-colshade.is-today { background: color-mix(in srgb, var(--brass-soft) 60%, transparent); border-left: 1px solid var(--brass); border-right: 1px solid var(--brass); } /* [gantt] Double-booked crew: overlapping bars get a hatched warning fill; the lane gutter carries an "N overlap" chip. */ .gantt-bar.is-conflict { border-left-color: var(--warning); background-image: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--warning) 16%, transparent) 6px 12px); } .gantt-swatch.is-conflict { --bar-c: var(--warning); background-image: repeating-linear-gradient(135deg, transparent 0 3px, color-mix(in srgb, var(--warning) 16%, transparent) 3px 6px); } .gantt-crew-conflict { flex: none; font-family: var(--font-mono); font-size: 9.5px; color: var(--text-1); background: color-mix(in srgb, var(--warning) 18%, var(--surface)); border: 1px solid color-mix(in srgb, var(--warning) 45%, var(--surface)); border-radius: var(--r-pill); padding: 1px 7px; white-space: nowrap; } /* [gantt] Clipped-bar affordance: dash the RIGHT edge too (only the left dashed before), plus the legend swatch that explains the dashes. */ .gantt-bar.is-clipped-r { border-right: 3px dashed var(--bar-c, var(--s-qualified)); } .gantt-swatch.is-clipped { border-left-style: dashed; } /* [gantt] Crew gutter: the row key of a dispatch board must read without a hover — widen further (the [#66] 205px attempt still truncated) and wrap to two lines. */ .gantt { --gantt-gutter: 240px; } .gantt-crew-name { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 1.25; } /* ── Phase 3 · project cluster ──────────────────────────────────────────────── */ /* Inline-form selects: the compact `padding: 8px 10px` shorthand (.inline-form rule) clobbers the 34px chevron clearance from `select.input`, so medium-length options ("Inbound", "Med") underlapped the brass caret. Restore the right padding at the same specificity, later in the cascade. */ .inline-form select.input { padding-right: 30px; } /* Empty quote amount: plain words at body scale — the display-size em dash read as a window-collapse bar in the deal card's top-right corner. Double class out-specifies the 34px/800-weight .deal__amount base rules. */ .deal__amount.deal__amount--empty { font-family: var(--font-ui); font-size: 12.5px; font-weight: 500; letter-spacing: 0; } /* A human name in a .kv key slot reads in body case, not mono-caps annotation (Money > Commissions salesperson rows). */ .kv > .k.k--person { font-family: var(--font-ui); font-size: 12.5px; letter-spacing: 0; text-transform: none; color: var(--text-1); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; } /* Blueprint seam: the shared initials avatar squares to the geometry tokens. (Safe to dedup if the avatar-owning cluster returned the same rule.) */ .avatar { border-radius: var(--r-sm); } /* Quiet jump-links in the detail aside (e.g. the WO "Related" card) — navigation, not actions. */ .aside-links { display: flex; flex-direction: column; gap: 8px; } .aside-links a { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 13px; text-decoration: none; } .aside-links a:hover { color: var(--brass-lo); text-decoration: underline; } .aside-links a .ico { width: 14px; height: 14px; color: var(--text-3); } /* crews-claims sweep — append to office.css */ /* Button component is invariant: don't inherit the panel title's uppercase/letter-spacing when an action button sits inside .panel-title--withaction (crew show "＋ Upload"). */ .panel-title--withaction .btn { text-transform: none; letter-spacing: normal; } /* Keep the brass chevron visible on selects inside inline forms: the `.inline-form .input, .inline-form select.input { padding: 8px 10px }` shrink override (specificity 0,2,1) clobbers select.input's right-side chevron reserve (0,1,1). Must appear AFTER the existing .inline-form rule. */ .inline-form select.input { padding-right: 34px; } /* ── Finance sweep (visual-audit Phase 3) ─────────────────────────────────────────── */ /* Payments: past-due receivables are the day's first calls — tint + left rule so they lead the scan. */ .row-overdue td, .row-attention td { background: color-mix(in srgb, var(--danger) 6%, transparent); } .row-overdue td:first-child, .row-attention td:first-child { box-shadow: inset 3px 0 0 var(--danger); } /* AR board: "Collect now" leads; the overdue total floats right of its heading. The future schedule recedes (dimmed) so the actionable worklist pops, and comes back to full weight on hover. */ .ar-head .badge { margin-left: auto; } .ar-scheduled { opacity: 0.8; transition: opacity 0.15s ease; } .ar-scheduled:hover { opacity: 1; } /* Accounting: settled (closed/locked) periods stay quiet — Reopen lives behind a disclosure that reveals reason + a danger-confirmed submit, never a standing orange button per row. */ .reopen-disclosure { display: inline-block; } .reopen-disclosure > summary { display: inline-flex; cursor: pointer; list-style: none; } .reopen-disclosure > summary::-webkit-details-marker { display: none; } .reopen-disclosure__form { display: flex; align-items: center; gap: 8px; margin-top: 8px; } .reopen-disclosure__form .input { max-width: 220px; } /* Commissions: the rep grouping is the page's primary axis — a real band with the owed figure, not a 10px mono eyebrow weaker than its own table rows. */ .rep-band { display: flex; align-items: center; gap: 10px; } .rep-band__name { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--text-1); } .rep-band__owed { margin-left: auto; font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--text-1); font-variant-numeric: tabular-nums; } .rep-band__owed .muted { font: 500 12px var(--font-ui); } /* Pricing: category · subcategory section bands replace the Category column that repeated "Fence · Fence panel" hundreds of times down the flat all-trades dump. */ .table-group-row td { background: var(--surface-lo); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); padding: 8px 16px; } .table-group-row .count { color: var(--text-2); } /* system cluster (audit 38-settings-users) — identity avatars join the Blueprint square-corner geometry. Indicator dots (.stage-dot/.notif-dot/.health-dot/.state-dot) stay round on purpose: they're status dots, not identity chips. */ .avatar, .office-avatar, .todo-avatar { border-radius: var(--r-sm); } /* ── RRP qualification form (model §RRP — build year + per-trade paint-disturbance) ── */ .tb-menu__pop--wide { min-width: 340px; } .qualify-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; } .qualify-field { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--text-3); } .qualify-field .input { width: 110px; font-size: 13px; font-weight: 400; text-transform: none; letter-spacing: 0; } .qualify-window { align-self: center; padding-top: 12px; } /* The RRP banner on a gated job — same stop-work language family as holds, informational tone. */ .rrp-chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--warning); border: 1px solid var(--warning); border-radius: var(--r-sm); padding: 3px 8px; } /* ── close-decline-qvf: the per-trade close picker (office/projects/_close_sale_form) ── */ .close-sale { display: flex; flex-direction: column; gap: 10px; } .close-sale--hero { align-items: flex-end; } .close-sale__trades { border: 1px solid var(--border-lo); border-radius: var(--r-md); padding: 8px 12px; margin: 0; display: flex; flex-direction: column; gap: 6px; background: var(--surface-hi); } .close-sale__trades legend { font-size: 12px; color: var(--text-3); padding: 0 4px; } .close-sale__trade { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; } .close-sale__trade .money { margin-left: auto; } /* ── Milestone chain two-layer rows (owner 2026-06-11 — the single mega-cell read "thrown on there"): the table row keeps identity + the one forward action; the proof package + every input-bearing secondary op live in this structured sub-panel under the row. ── */ .ms-table td.ms-actcol { text-align: right; white-space: nowrap; } .ms-table th.ms-actcol { text-align: right; } /* Fixed layout pins the six columns to the main column's width. Auto-layout grew the table to keep "Blue Ridge Deck Builders" on one line, spilling the action cell under the sticky aside; now the crew cell wraps and every column stays put. Gutters tightened so the columns breathe. */ .ms-table { table-layout: fixed; } .ms-table thead th, .ms-table tbody td { padding-left: 11px; padding-right: 11px; } .ms-table th:nth-child(1), .ms-table td:nth-child(1) { width: 15%; } /* milestone */ .ms-table th:nth-child(2), .ms-table td:nth-child(2) { width: 24%; } /* crew (wraps) */ .ms-table th:nth-child(3), .ms-table td:nth-child(3) { width: 12%; } /* scheduled */ .ms-table th:nth-child(4), .ms-table td:nth-child(4) { width: 7%; } /* % */ .ms-table th:nth-child(5), .ms-table td:nth-child(5) { width: 17%; } /* status */ .ms-table th:nth-child(6), .ms-table td:nth-child(6) { width: 25%; } /* action */ .ms-actwrap { flex-wrap: wrap; } .ms-table .actions.end { justify-content: flex-end; flex-wrap: nowrap; } /* Accordion rows — expandable rows are clickable; only one panel opens at a time. The forward action + the caret toggle ride together in the action cell (the caret is the keyboard target). */ .ms-table tr.ms-row--exp { cursor: pointer; } .ms-table tr.ms-row--exp:hover { background: var(--surface-hi); } .ms-actwrap { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; } .ms-caret { border: none; background: none; padding: 2px 4px; line-height: 1; cursor: pointer; color: var(--text-3); font-size: 11px; transition: transform 0.15s ease, color 0.12s ease; } .ms-caret:hover { color: var(--brass-lo); } .ms-table tr.ms-row.is-open .ms-caret { transform: rotate(180deg); } /* The open row hands off to its panel — kill the bottom rule so they read as one unit. */ .ms-table tbody tr.ms-row.is-open > td { border-bottom: none; } .ms-table tbody tr.ms-sub[hidden] { display: none; } .ms-table tbody tr.ms-sub td { padding: 0 16px 14px; } .ms-table tbody tr.ms-sub:hover { background: transparent; } .ms-panel { display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--border-lo); border-left: 3px solid var(--brass); border-radius: var(--r-sm); background: var(--surface-hi); padding: 12px 14px; } .ms-label { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; align-self: center; } /* Field-proof evidence card — the package the office certifies, framed as evidence. */ .proof-card { display: flex; flex-direction: column; gap: 8px; } .proof-card + .proof-card { border-top: 1px dashed var(--border-lo); padding-top: 12px; } .proof-head { display: flex; align-items: center; gap: 10px; } .proof-meta { font-size: 11.5px; color: var(--text-3); } .proof-evidence { display: grid; grid-template-columns: max-content 1fr; gap: 5px 16px; align-items: baseline; } .proof-evidence .ms-label { align-self: baseline; padding-top: 2px; } .proof-val { font-size: 12.5px; color: var(--text-2); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .proof-photo { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--text-2); border: 1px solid var(--border-lo); border-radius: var(--r-sm); padding: 3px 8px; background: var(--surface); } .proof-photo a { color: var(--brass-lo); font-weight: 600; text-decoration: none; } .proof-photo a:hover { text-decoration: underline; } /* Accept/reject — one right-anchored review line; accept is the single primary. */ .proof-review { display: flex; align-items: center; justify-content: flex-end; gap: 10px; border-top: 1px dashed var(--border-lo); padding-top: 10px; } .proof-review .ms-op { flex: 0 1 360px; } /* Labeled secondary-op lines — every input-bearing form is one aligned cluster. */ .ms-op { display: flex; align-items: center; gap: 8px; margin: 0; } .ms-op .input { width: auto; font-size: 12px; padding: 5px 8px; } .ms-op .input.grow { flex: 1 1 10rem; } .ms-op .input[type="file"] { font-size: 11px; } .ms-ops { display: flex; align-items: center; gap: 10px 26px; flex-wrap: wrap; border-top: 1px dashed var(--border-lo); padding-top: 10px; } .ms-ops .ms-op-end { margin-left: auto; } .ms-input-pct { width: 64px; } .ms-input-amount { width: 96px; } /* Routine vs exception split — the panel's ops are grouped so the everyday "Update" path reads first and the "something went wrong" recovery/unwind controls sit apart and quieter. */ .ms-ops__lead { color: var(--text-2); font-weight: 600; align-self: center; } .ms-ops--exc { margin-top: 2px; } .ms-ops__lead--exc { color: var(--danger); } .todo-act.ms-op-danger:hover { color: var(--danger); border-color: var(--danger); } /* Dispatch-a-replacement-milestone — a rare mid-chain recovery, folded behind its subhead (caret) so it doesn't sit open under the chain. Mirrors the payment-history disclosure pattern. */ .ms-extra > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; width: fit-content; } .ms-extra > summary::-webkit-details-marker { display: none; } .ms-extra > summary::after { content: "▾"; font-size: 9px; opacity: 0.55; } .ms-extra[open] > summary::after { content: "▴"; } .ms-extra > summary:hover { color: var(--text-2); } .ms-extra .doc-note { margin-top: 8px; } /* ── Crew dispatch profile (service area + payout rate cards) ── */ .dispatch-profile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 26px; align-items: start; } @media (max-width: 760px) { .dispatch-profile { grid-template-columns: minmax(0, 1fr); gap: 18px; } } .service-area-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px 14px; } .service-area-opt { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); cursor: pointer; padding: 4px 2px; } .service-area-opt input { accent-color: var(--brass); } .rate-card { border: 1px solid var(--border-lo); border-radius: var(--r-sm); background: var(--surface-hi); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; } .rate-card-head { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--text-1); } .rate-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px 16px; } .rate-cell { display: flex; flex-direction: column; gap: 4px; } .rate-input { display: flex; align-items: center; gap: 5px; } .rate-input .input { width: 100%; font-size: 13px; padding: 6px 8px; } .rate-card .todo-act { align-self: flex-start; } /* Over-ceiling discount approval gate on the close form (audit G5) */ .ceiling-gate { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--warning); border-left: 3px solid var(--warning); border-radius: var(--r-sm); background: rgba(199,121,27,0.06); display: flex; flex-direction: column; gap: 8px; } .ceiling-gate .doc-note { margin: 0; } /* C-6 office IME SKU mapping screen (audit G11) — one form-card per unmapped product */ .sku-map-list { display: flex; flex-direction: column; gap: 10px; } .sku-map-card { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin: 0; border: 1px solid var(--border-lo); border-radius: var(--r-sm); background: var(--surface-hi); padding: 12px 14px; } .sku-map-product { flex: 1 1 220px; min-width: 0; } .sku-map-field { display: flex; flex-direction: column; gap: 4px; } .sku-map-field .input { width: auto; min-width: 150px; } /* ── Follow-up cadence admin (Office::CadencesController; Phase 3.5). The config view behind the operational Follow-ups screen: per-sequence cards with the ordered touches, channel cues, a per-channel count summary, an active toggle, and the dark-launch status. Tokens only. .cad-* */ .cad-darklaunch { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; padding: 13px 15px; border: 1px solid var(--warning); border-left: 3px solid var(--warning); border-radius: var(--r-sm); background: color-mix(in srgb, var(--warning) 9%, var(--surface)); font-size: 13px; line-height: 1.5; color: var(--text-2); } .cad-darklaunch--off { border-color: var(--danger); border-left-color: var(--danger); background: color-mix(in srgb, var(--danger) 9%, var(--surface)); } .cad-darklaunch > .ico { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--danger); } .cad-darklaunch:not(.cad-darklaunch--off) > .ico { color: var(--warning); } .cad-darklaunch strong { color: var(--text-1); } .cad-darklaunch__body { flex: 1; min-width: 0; } .cad-darklaunch__cta { flex: none; align-self: center; white-space: nowrap; } .cad-darklaunch__knobs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; } .cad-flag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; font-weight: 700; padding: 2px 8px; border-radius: var(--r-pill); border: 1px solid var(--border); } .cad-flag--on { color: var(--success); border-color: color-mix(in srgb, var(--success) 45%, transparent); background: color-mix(in srgb, var(--success) 12%, transparent); } .cad-flag--off { color: var(--text-3); border-color: var(--border); background: var(--surface-lo); } .cad-tune { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; font-size: 12px; } .cad-tune .muted { color: var(--text-3); } .cad-stack { display: flex; flex-direction: column; gap: 16px; } .cad-seq { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px 18px; } .cad-seq--paused { background: var(--surface-lo); border-style: dashed; } .cad-seq__head { display: flex; align-items: flex-start; gap: 16px; } .cad-seq__id { flex: 1; min-width: 0; } .cad-seq__name { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--text-1); margin: 0 0 7px; } .cad-seq__meta { display: flex; flex-wrap: wrap; gap: 6px; } .cad-seq__head .as-switch { flex: none; } .cad-seq__summary { margin: 12px 0 4px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.03em; color: var(--text-2); } .cad-seq__count { color: var(--text-1); font-weight: 700; } .cad-steps { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; } .cad-step { display: flex; align-items: center; gap: 12px; padding: 9px 4px; border-top: 1px solid var(--border-lo); font-size: 13px; } .cad-step:first-child { border-top: 0; } .cad-step__n { font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--text-3); width: 20px; flex: none; text-align: right; } .cad-step__when { font-family: var(--font-mono); font-size: 11px; color: var(--text-2); min-width: 92px; flex: none; } .cad-step__what { color: var(--text-2); min-width: 0; } .cad-chan { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em; font-weight: 700; text-transform: uppercase; padding: 2px 8px; border-radius: var(--r-pill); border: 1px solid; flex: none; min-width: 64px; text-align: center; } .cad-chan--voice { color: var(--brass-lo); border-color: color-mix(in srgb, var(--brass) 45%, transparent); background: var(--brass-pill); } .cad-chan--sms { color: var(--s-quoting); border-color: color-mix(in srgb, var(--s-quoting) 45%, transparent); background: color-mix(in srgb, var(--s-quoting) 12%, transparent); } .cad-chan--email { color: var(--s-qualified); border-color: color-mix(in srgb, var(--s-qualified) 45%, transparent); background: color-mix(in srgb, var(--s-qualified) 12%, transparent); } .cad-chan--task { color: var(--text-3); border-color: var(--border); background: var(--surface-lo); } @media (max-width: 720px) { .cad-seq__head { flex-direction: column; } .cad-darklaunch { flex-direction: column; } .cad-darklaunch__cta { align-self: flex-start; } .cad-step { flex-wrap: wrap; } } /* ═══════════════════════════════════════════════════════════════════════ Project page — progressive-disclosure cards (lead with the object, hide the machinery until reached for). Sales visits / Conversation / Quote-start. Token-only; reuses .btn, .todo-act, .cal-book, .notif-row, .badge. ═══════════════════════════════════════════════════════════════════════ */ /* A .btn / .todo-act used as a shouldn't carry the disclosure triangle. */ .appt-book > summary, .appt-disc > summary, .quote-start > summary, .quote-addtrade > summary { list-style: none; cursor: pointer; } .appt-book > summary::-webkit-details-marker, .appt-disc > summary::-webkit-details-marker, .quote-start > summary::-webkit-details-marker, .quote-addtrade > summary::-webkit-details-marker { display: none; } /* ── Shared inline-control height (GENERAL) ────────────────────────────────────────────────────────── Every control that shares an inline write-row aligns to --control-h, so an input, select, .btn, and .todo-act all land on ONE height instead of each at its own. Coverage: • every `.inline-form` on the page (add-trade, refund, reschedule/follow-up/book manual, reassign) — their `.input` / `.btn` / `.todo-act` row members; • the Activity & Notes composer (`.composer-form`) — its selects, the `What happened?`/note/to-do input, and the `.todo-act.prim` Log-it / Add-note / Add-to-do button (the one the owner circled); • the three rows round 2 already squared: the sales-visit status pill + its action buttons, and the conversation composer's message input + channel select + Send. The forms stay `align-items: flex-end` + `flex-wrap`, so STACKED layouts (a `.cal-book__field` label over its datetime input, then a button below) and MULTI-control rows keep their wrapping — this only equalizes heights, it never forces controls onto one line. */ .inline-form .input, .inline-form .btn, .inline-form .todo-act, .composer-form .input, .composer-form .btn, .composer-form .todo-act, .notif-row > .badge, .notif-row .todo-acts > .todo-actform > .todo-act, .notif-row .todo-acts > details > summary.todo-act, .thread-composer__send .input, .thread-composer__send .btn { min-height: var(--control-h); box-sizing: border-box; } /* Buttons/pills (flex children) center their label within the matched height; inputs/selects center their own text natively. */ .inline-form .btn, .inline-form .todo-act, .composer-form .btn, .composer-form .todo-act, .notif-row > .badge, .notif-row .todo-acts > .todo-actform > .todo-act, .notif-row .todo-acts > details > summary.todo-act, .thread-composer__send .btn { display: inline-flex; align-items: center; } /* Trim the inputs/selects whose default vertical padding runs taller than --control-h down to the shared height, so a field and its neighbouring button meet exactly (round 2 did this for two rows; now general). The `select.input` variants are listed explicitly: `.inline-form select.input` (line ~502) carries an element in its selector, so a class-only rule would lose to it on a pair, which is why designer-inspector__select--line — that pair's line-select modifier — is gone). */ .designer-material-btn { display: flex; align-items: center; gap: 8px; width: 100%; appearance: none; cursor: pointer; text-align: left; border: 1px solid var(--border); background: var(--surface); padding: 6px 8px; margin-bottom: 6px; } .designer-material-btn:hover:not(:disabled) { background: var(--surface-hi); } .designer-material-btn:disabled { cursor: default; opacity: 0.55; } .designer-material-btn__swatch { width: 28px; height: 28px; flex: none; border: 1px solid var(--border); } .designer-material-btn__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .designer-material-btn__brand { font-size: 12px; font-weight: 600; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .designer-material-btn__line { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .designer-material-btn__chevron { flex: none; color: var(--text-3); font-size: 14px; } .designer-chip--swatch { display: inline-flex; align-items: center; gap: 5px; } .designer-chip__dot { width: 10px; height: 10px; border: 1px solid var(--border); flex: none; } .designer-chip.is-active .designer-chip__dot { border-color: var(--surface-hi); } .designer-inspector__field { display: flex; align-items: center; gap: 6px; } .designer-inspector__number { width: 64px; border: 1px solid var(--border); background: var(--surface); font-family: var(--font-mono); font-size: 11px; color: var(--text-1); padding: 4px 6px; } .designer-inspector__number--qty { width: 52px; } .designer-inspector__unit { font-family: var(--font-mono); font-size: 10px; color: var(--text-3); letter-spacing: 0.04em; } .designer-inspector__addons { display: flex; flex-direction: column; gap: 4px; } .designer-inspector__addon { display: flex; align-items: center; gap: 6px; } .designer-inspector__addon .designer-chip { flex: 1; text-align: left; } /* Wave B1 — name/group fields, duplicate action, stair editor card, IRC advisory. */ .designer-inspector__text { width: 100%; border: 1px solid var(--border); background: var(--surface); font-family: var(--font-mono); font-size: 11px; color: var(--text-1); padding: 4px 6px; } .designer-inspector__text + .designer-inspector__text { margin-top: 4px; } .designer-inspector__duplicate { color: var(--text-3); } .designer-inspector__duplicate:hover { color: var(--text-1); } .designer-inspector__stair--editor { display: flex; flex-direction: column; align-items: stretch; gap: 5px; border: 1px solid var(--border-lo); padding: 6px; margin: 0 0 6px; } .designer-inspector__stair-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .designer-inspector__hint--warn { color: var(--danger); } /* Checkpoint history drawer + good/better/best variant chips (Phase 3, D-25). */ .designer-wo__history-btn { appearance: none; cursor: pointer; border: 1px solid var(--border); background: transparent; color: var(--text-3); font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 6px; } .designer-wo__history-btn:hover { color: var(--text-1); background: var(--surface-hi); } .designer-wo__history-btn.is-active { background: var(--brass); border-color: var(--brass); color: var(--surface-hi); } .designer-variants { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 6px; } .designer-variants__chip:disabled { opacity: 1; } .designer-variants__chip:disabled:not(.is-active) { opacity: 0.55; } .designer-history { border-top: 1px dashed var(--border); margin-top: 8px; padding-top: 8px; } .designer-history__create { display: flex; gap: 6px; margin-bottom: 8px; } .designer-history__name { flex: 1; min-width: 0; border: 1px solid var(--border); background: var(--surface); font-family: var(--font-mono); font-size: 11px; color: var(--text-1); padding: 4px 6px; } .designer-history__list { list-style: none; margin: 0; padding: 0; } .designer-history__entry { padding: 5px 0; border-bottom: 1px dotted var(--border); } .designer-history__entry:last-child { border-bottom: 0; } .designer-history__line { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .designer-history__when { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-2); } .designer-history__price { font-family: var(--font-mono); font-size: 11px; color: var(--text-1); } .designer-history__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-top: 2px; } .designer-history__badge { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.08em; border: 1px solid var(--border); color: var(--text-3); padding: 1px 4px; text-transform: uppercase; } .designer-history__badge--current { border-color: var(--brass); color: var(--brass); } .designer-history__badge--sent { border-color: var(--ok, var(--border)); color: var(--text-2); } .designer-history__badge--name { color: var(--text-1); } .designer-history__materials { font-family: var(--font-mono); font-size: 9.5px; color: var(--text-3); } .designer-history__restore { margin-left: auto; color: var(--brass); } .designer-history__wo-link { display: inline-block; margin-top: 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; color: var(--text-2); text-decoration: none; text-transform: uppercase; } .designer-history__wo-link:hover { color: var(--brass); } /* ── Designer: gate-review drawer (CAD-WEB-1 §6, Phase 4) ─────────────────── */ .designer-gates { border-top: 1px dashed var(--border); margin-top: 8px; padding-top: 8px; } .designer-gates__ladder { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 3px; } .designer-gates__rung { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid var(--border); color: var(--text-3); padding: 2px 5px; background: var(--surface-lo); } .designer-gates__rung.is-granted { border-color: var(--success); color: var(--success); background: var(--surface); } .designer-gates__rung.is-current { border-color: var(--brass); color: var(--brass); font-weight: 600; } /* PP P-B follow-up — the "Permit packet" row (download / generate / not-yet-approved states). */ .designer-gates__packet { margin-bottom: 8px; } .designer-gates__packet-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .designer-gates__packet-meta { font-family: var(--font-mono); font-size: 9.5px; color: var(--text-3); } .designer-gates__run { display: flex; gap: 6px; margin-bottom: 8px; align-items: center; } .designer-gates__level { border: 1px solid var(--border); background: var(--surface); font-family: var(--font-mono); font-size: 11px; color: var(--text-1); padding: 3px 4px; flex: 1; min-width: 0; } .designer-gates__group { margin-bottom: 6px; } .designer-gates__group-title { margin: 0 0 3px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); } .designer-gates__list { list-style: none; margin: 0; padding: 0; } .designer-gates__evaluation { padding: 4px 0; border-bottom: 1px dotted var(--border); } .designer-gates__evaluation:last-child { border-bottom: 0; } .designer-gates__evaluation-head { display: flex; width: 100%; align-items: baseline; gap: 8px; justify-content: space-between; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; } .designer-gates__chip { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.08em; border: 1px solid var(--border); color: var(--text-3); padding: 1px 4px; text-transform: uppercase; } .designer-gates__chip--pass { border-color: var(--success); color: var(--success); } .designer-gates__chip--warn { border-color: var(--warning); color: var(--warning); } .designer-gates__chip--fail { border-color: var(--danger); color: var(--danger); } .designer-gates__decision { margin: 2px 0 0; font-family: var(--font-mono); font-size: 10px; color: var(--text-2); } .designer-gates__evidence { list-style: none; margin: 6px 0 0; padding: 0 0 0 8px; border-left: 2px solid var(--border-lo); } .designer-gates__evidence-row { padding: 4px 0; } .designer-gates__evidence-row--fail { background: rgba(194,54,43,0.06); } .designer-gates__evidence-head { display: flex; align-items: baseline; gap: 6px; justify-content: space-between; } .designer-gates__req { font-family: var(--font-mono); font-size: 10px; color: var(--text-1); overflow-wrap: anywhere; } .designer-gates__message { margin: 2px 0 0; font-size: 11px; color: var(--text-2); } .designer-gates__evidence-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; font-family: var(--font-mono); font-size: 9.5px; color: var(--text-3); } .designer-gates__evidence-meta a { color: var(--brass); text-decoration: none; } .designer-gates__evidence-meta a:hover { text-decoration: underline; } .designer-gates__actions { display: flex; gap: 6px; margin-top: 6px; align-items: center; } .designer-gates__approve { border-color: var(--success); color: var(--success); } .designer-gates__reject { border-color: var(--danger); color: var(--danger); } .designer-gates__role-note { font-family: var(--font-mono); font-size: 9.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; } /* ── Designer: material-trace drawer (CAD-WEB-1 §7, Phase 4) ──────────────── */ .designer-trace { border-top: 1px dashed var(--border); margin-top: 8px; padding-top: 8px; } .designer-trace__chain { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; margin-bottom: 6px; } .designer-trace__product { font-family: var(--font-mono); font-size: 11px; color: var(--text-1); font-weight: 600; } .designer-trace__rule { font-family: var(--font-mono); font-size: 9.5px; color: var(--text-3); } .designer-trace__rule--manual { color: var(--warning); } .designer-trace__table { width: 100%; border-collapse: collapse; font-size: 11px; } .designer-trace__table th { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); text-align: left; padding: 2px 4px; border-bottom: 1px solid var(--border); } .designer-trace__table td { padding: 3px 4px; border-bottom: 1px dotted var(--border-lo); color: var(--text-2); } .designer-trace__table td:first-child { color: var(--text-1); } .designer-trace__table .num { text-align: right; font-family: var(--font-mono); } .designer-trace__bom { margin-top: 10px; } /* POL-12/20 — the 3D pending/failed notice pinned over the scene (BLUEPRINT parchment card). */ .designer-3d-note { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); max-width: min(520px, calc(100% - 24px)); padding: 6px 10px; z-index: 4; background: var(--surface-hi); border: 1px solid var(--border); box-shadow: var(--shadow-lift); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.02em; color: var(--text-2); text-align: center; pointer-events: none; } .designer-trace__bom-total td { border-top: 1px solid var(--border); border-bottom: 0; color: var(--text-1); font-weight: 600; } /* ── PP UX-C (POL-15 Phase 2) — the canvas ACCESSIBILITY overlay (iPad structureAccessibilityLayer): invisible, focusable per-structure/per-marker proxies positioned over their screen boxes. The whole layer is pointer-events:none so the raw canvas keeps the mouse; the proxies stay keyboard-focusable (pointer-events doesn't remove them from the tab order). A keyboard focus ring is the only visible trace — drawn via :focus-visible so a programmatic focus-follow after a mouse click stays quiet. ── */ .designer-a11y { position: absolute; inset: 0; z-index: 3; pointer-events: none; } .designer-a11y[hidden] { display: none; } .designer-a11y__target { position: absolute; top: 0; left: 0; margin: 0; padding: 0; border: 0; background: transparent; -webkit-appearance: none; appearance: none; color: transparent; font: inherit; cursor: default; } .designer-a11y__target:focus { outline: none; } .designer-a11y__target:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; } /* Help text + polite live region — in the a11y tree, off the visible sheet (shared sr-only recipe). */ .designer-a11y__hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ── Web Designer Wave B3 — the LAYERS drawer (structures + nested items + annotations): a floating BLUEPRINT panel pinned inside the canvas, opposite the tool palette. ── */ .designer-layers { position: absolute; top: 12px; right: 12px; z-index: 2; width: 240px; max-height: calc(100% - 24px); overflow-y: auto; border: 1px solid var(--border); background: var(--surface); box-shadow: 0 1px 0 var(--border-lo); padding: 10px 12px; } .designer-layers[hidden] { display: none; } .designer-layers__title { margin: 0 0 6px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); font-weight: 600; } .designer-layers__group { margin: 8px 0 0; } .designer-layers__row { display: flex; align-items: baseline; gap: 6px; padding: 2px 0; } .designer-layers__row--sub { padding-left: 14px; } .designer-layers__row.is-selected .designer-layers__name { color: var(--brass); font-weight: 700; } .designer-layers__name { appearance: none; border: 0; background: transparent; cursor: pointer; flex: 1; text-align: left; font-family: var(--font-mono); font-size: 11px; color: var(--text-2); padding: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .designer-layers__name:hover { color: var(--text-1); } /* ── Web Designer Wave C2 — in-designer Send Estimate (brass CTA + confirm sheet) ── */ .designer-send-cta { appearance: none; cursor: pointer; border: 1px solid var(--brass-lo); background: var(--brass-cta); color: #fff; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 7px 14px; box-shadow: 3px 3px 0 rgba(22,32,43,0.18); } .designer-send-cta:hover { filter: brightness(1.05); } .designer-send-cta:active { transform: translate(1px,1px); box-shadow: 2px 2px 0 rgba(22,32,43,0.12); } .designer-send[hidden] { display: none; } .designer-send__backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(22,32,43,0.35); } .designer-send__card { position: fixed; z-index: 61; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(440px, calc(100vw - 32px)); max-height: min(80vh, 640px); overflow-y: auto; border: 1.5px solid var(--text-1); background: var(--surface); padding: 16px 18px; box-shadow: 6px 6px 0 rgba(22,32,43,0.22); } .designer-send__title { margin: 0 0 10px; font-family: var(--font-display); font-weight: 700; font-size: 16px; } .designer-send__sections { list-style: none; margin: 0; padding: 0; } .designer-send__section { border-top: 1px solid var(--border-lo); padding: 8px 0; } .designer-send__section:first-child { border-top: 0; padding-top: 0; } .designer-send__section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .designer-send__trade { font-family: var(--font-display); font-weight: 700; font-size: 13.5px; } .designer-send__price { font-family: var(--font-mono); font-weight: 600; white-space: nowrap; } .designer-send__note { margin: 3px 0 0; font-size: 12px; color: var(--text-2); } .designer-send__note--minimum { color: var(--brass); font-family: var(--font-mono); font-size: 11px; } .designer-send__total-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; border-top: 1.5px solid var(--text-1); margin-top: 8px; padding-top: 8px; } .designer-send__total-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); font-weight: 600; } .designer-send__total { margin: 0; font-family: var(--font-mono); font-weight: 700; font-size: 16px; } .designer-send__customer { margin: 8px 0 0; font-size: 12.5px; color: var(--text-2); } .designer-send__warn { margin: 8px 0 0; font-size: 12px; color: var(--warning); border: 1px solid var(--warning); padding: 6px 8px; } .designer-send__error { margin: 8px 0 0; font-size: 12px; color: var(--danger); border: 1px solid var(--danger); padding: 6px 8px; } .designer-send__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; } .designer-send__btn { appearance: none; cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--text-1); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; padding: 7px 12px; text-decoration: none; display: inline-flex; align-items: center; } .designer-send__btn:hover:not(:disabled) { background: var(--surface-hi); } .designer-send__btn:disabled { color: var(--text-3); cursor: default; } .designer-send__btn--primary { background: var(--brass-cta); color: #fff; border-color: var(--brass-lo); font-weight: 700; box-shadow: 3px 3px 0 rgba(22,32,43,0.18); } .designer-send__btn--primary:hover:not(:disabled) { filter: brightness(1.05); background: var(--brass-cta); } .designer-send__btn--primary:disabled { opacity: 0.5; box-shadow: none; } /* ── PP UX-B #9 — the searchable material browser sheet (iPad MaterialBrowserSheet parity). Same modal discipline as designer-send (backdrop + fixed card); a taller/wider card since it's a browse-and-search surface, not a confirm dialog. ── */ .designer-material[hidden] { display: none; } .designer-material__backdrop { position: fixed; inset: 0; z-index: 70; background: rgba(22,32,43,0.35); } .designer-material__card { position: fixed; z-index: 71; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(420px, calc(100vw - 32px)); max-height: min(78vh, 620px); overflow-y: auto; display: flex; flex-direction: column; border: 1.5px solid var(--text-1); background: var(--surface); padding: 16px 18px; box-shadow: 6px 6px 0 rgba(22,32,43,0.22); } .designer-material__header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .designer-material__title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 16px; } .designer-material__close { appearance: none; cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-size: 16px; line-height: 1; width: 28px; height: 28px; flex: none; } .designer-material__close:hover { background: var(--surface-hi); color: var(--text-1); } .designer-material__search { border: 1px solid var(--border); background: var(--surface-hi); font-family: var(--font-mono); font-size: 12px; color: var(--text-1); padding: 7px 8px; margin-bottom: 10px; } .designer-material__list { flex: 1; min-height: 0; overflow-y: auto; } .designer-material__brand + .designer-material__brand { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-lo); } .designer-material__brand-name { margin: 0 0 4px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); font-weight: 600; } .designer-material__brand-name[hidden], .designer-material__brand[hidden] { display: none; } .designer-material__line { display: flex; align-items: center; gap: 10px; width: 100%; appearance: none; cursor: pointer; text-align: left; border: 0; border-radius: var(--r-sm); background: transparent; padding: 6px 4px; color: var(--text-1); font-size: 13px; } .designer-material__line:hover { background: var(--surface-hi); } .designer-material__line.is-current { color: var(--brass); font-weight: 600; } .designer-material__line[hidden] { display: none; } .designer-material__swatches { display: inline-flex; flex: none; } .designer-material__swatch { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--surface); margin-left: -6px; } .designer-material__swatch:first-child { margin-left: 0; } .designer-material__line-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .designer-material__check { flex: none; color: var(--brass); font-weight: 700; } /* ── Web Designer Wave C2 — custom line items in the rail (add form + per-line remove) ── */ .designer-wo__line-remove { appearance: none; border: 0; background: transparent; cursor: pointer; color: var(--danger); font-size: 13px; line-height: 1; padding: 0 0 0 2px; flex: none; } .designer-wo__line-remove:hover { transform: scale(1.2); } .designer-wo__custom-toggle { margin-top: 6px; } .designer-wo__custom-form { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; } .designer-wo__custom-input { flex: 1 1 100%; border: 1px solid var(--border); background: var(--surface); font-family: var(--font-mono); font-size: 11px; color: var(--text-1); padding: 5px 6px; } .designer-wo__custom-amount { flex: 0 1 84px; } .designer-wo__custom-scope { flex: 1 1 auto; min-width: 0; border: 1px solid var(--border); background: var(--surface); font-family: var(--font-mono); font-size: 11px; color: var(--text-1); padding: 4px 5px; } .designer-wo__custom-add { flex: none; } /* ═══════════════════════════════════════════════════════════════════════ Web Designer Wave D1 — FULL MOBILE (owner decision 2026-07-11, POL-11). Three tiers: desktop >1100px (layout unchanged; the header just wraps BETWEEN control groups instead of mid-chip), tablet 768–1100px (full-width canvas, rail = right slide-over), phone <768px (app frame: compact top bar, full-bleed canvas, rail = bottom sheet with peek/half/full snaps, reduced palette, session bar). BLUEPRINT tokens only. ═══════════════════════════════════════════════════════════════════════ */ /* ── Base (all widths): new chrome idle on desktop + wrap-safe header ──── */ .designer__back { display: none; } .designer-rail-toggle { display: none; } .designer__rail-close { display: none; } .designer-sheet-grip { display: none; } .designer-palette__more { display: none; } .designer-overflow { display: none; position: relative; } /* POL-11 (desktop half): at 1280px in EDIT the head used to wrap mid-chip — let the groups wrap whole, keep the title from shoving the tools around. */ .designer__head { flex-wrap: wrap; row-gap: 8px; } .designer__id { min-width: 0; } .designer__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .designer__tools { flex-wrap: wrap; row-gap: 8px; justify-content: flex-end; } .designer__status { max-width: 340px; } /* The touch session bar (v2 MobileSessionBar): shown by the controller only on coarse-pointer devices during a draw/placement session — Done / Undo point / Cancel replace Enter / Backspace / Esc. Dark HUD so it reads as transient. */ .designer-session { position: fixed; z-index: 29; display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--nav-bg); border: 1px solid var(--nav-border); color: var(--nav-text-hi); left: 50%; transform: translateX(-50%); bottom: 16px; max-width: min(560px, calc(100vw - 24px)); box-shadow: 4px 4px 0 rgba(22,32,43,0.18); } .designer-session[hidden] { display: none; } .designer-session__dot { width: 8px; height: 8px; flex: none; background: var(--brass); } .designer-session__hint { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 11px; color: var(--nav-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .designer-session__btn { appearance: none; cursor: pointer; flex: none; border: 1px solid var(--nav-border); background: var(--nav-mid); color: var(--nav-text-hi); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; padding: 10px 12px; min-height: 44px; } .designer-session__btn--primary { background: var(--brass-cta); border-color: var(--brass-lo); color: #fff; font-weight: 700; } /* The overflow menu (phone top bar): Framing / Fit / Layers / Export / Send / sheet-full. Popover under the ⋯ button, BLUEPRINT card treatment. */ .designer-overflow__btn { font-size: 16px; line-height: 1; min-height: 40px; border: 1px solid var(--border); background: var(--surface); } .designer-overflow__btn[aria-expanded="true"] { background: var(--brass); color: var(--surface-hi); } .designer-overflow__menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; min-width: 210px; border: 1.5px solid var(--text-1); background: var(--surface); box-shadow: 4px 4px 0 rgba(22,32,43,0.18); display: flex; flex-direction: column; } .designer-overflow__menu[hidden] { display: none; } .designer-overflow__item { appearance: none; text-align: left; border: 0; background: transparent; cursor: pointer; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-1); padding: 13px 14px; min-height: 44px; } .designer-overflow__item + .designer-overflow__item { border-top: 1px solid var(--border-lo); } .designer-overflow__item:hover { background: var(--surface-hi); } .designer-overflow__item.is-active { color: var(--brass); font-weight: 700; } /* The Layers drawer's close row — rendered by the controller on phone only. */ .designer-layers__close { appearance: none; cursor: pointer; width: 100%; margin: 0 0 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; padding: 11px 12px; min-height: 44px; } .designer-layers__close:hover { background: var(--surface-hi); color: var(--text-1); } /* ── Tablet 768–1100px: full-width canvas, rail = right slide-over ─────── */ @media (min-width: 768px) and (max-width: 1100px) { .designer__body { grid-template-columns: minmax(0, 1fr); } .designer__rail { position: fixed; top: 0; right: 0; bottom: 0; z-index: 40; width: min(380px, 92vw); height: 100vh; border-radius: 0; border-top: 0; border-bottom: 0; border-right: 0; display: flex; flex-direction: column; overflow: hidden; transform: translateX(100%); transition: transform .18s ease; } .designer__rail.is-open { transform: none; box-shadow: -6px 0 0 rgba(22,32,43,0.14); } .designer__rail-scroll { flex: 1; min-height: 0; overflow-y: auto; } .designer__rail-close { display: grid; place-items: center; position: absolute; top: 8px; right: 10px; width: 32px; height: 32px; z-index: 1; appearance: none; cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-size: 16px; line-height: 1; } .designer__rail-close:hover { background: var(--surface-hi); color: var(--text-1); } /* Keep the inspector head clear of the close button. */ .designer__rail-scroll { padding-right: 4px; } .designer-inspector__head { padding-right: 34px; } .designer-rail-toggle { display: inline-block; } .designer-rail-toggle[aria-pressed="true"] { border-color: var(--brass); color: var(--brass); } } /* ── Phone <768px: the designer becomes an app frame ───────────────────── */ @media (max-width: 767px) { /* The designer page owns the viewport — office chrome stands down (scoped: every other office page keeps the responsive shell it already has). */ .office-shell:has(.designer) .office-side, .office-shell:has(.designer) .office-topbar { display: none; } .office-shell:has(.designer) .office-content { padding: 0; } .office-shell:has(.designer) .backlink { display: none; } /* Toasts span the top of the phone frame (right-pinned cards overflowed). */ body:has(.designer) .toast-stack { left: 12px; right: 12px; top: 12px; } .designer { --dh-sheet-peek: 96px; position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; gap: 0; background: var(--bg); overscroll-behavior: contain; } /* Compact top bar: back · P-code · name · save — then the control row. */ .designer__head { flex: none; flex-direction: column; align-items: stretch; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--border); background: var(--surface); } .designer__id { display: flex; align-items: center; gap: 8px; } .designer__back { display: inline-flex; align-items: center; color: var(--text-2); padding: 6px; margin: -6px 0 -6px -6px; } .designer__back:hover { color: var(--text-1); } .designer__title { font-size: 15px; flex: 0 1 auto; } .designer__mode { display: none; } /* the Edit button carries the state */ .designer-save { margin-left: auto; } .designer__status { display: none; } /* the session bar carries tool hints */ .designer__tools { display: flex; justify-content: flex-start; gap: 8px; } /* The undo/redo seg is an empty 2px sliver outside edit mode — hide the shell too. */ .designer-seg--history:not(:has(.designer-seg__btn:not([hidden]))) { display: none; } .designer__tools .designer-seg__btn { min-height: 40px; padding: 8px 12px; } .designer-overflow { display: block; margin-left: auto; } .designer-seg--scene, .designer-seg--viewport, .designer-send-cta { display: none; } .designer-dims { order: 10; flex: 1 1 100%; justify-content: center; } .designer-dims__input { width: 64px; min-height: 36px; font-size: 14px; } .designer-banner { flex-wrap: wrap; margin: 6px 8px 0; } .designer-advisories { margin: 6px 8px 0; } /* Full-bleed canvas above the sheet's peek strip. */ .designer__body { flex: 1; min-height: 0; display: block; } .designer__canvas { height: calc(100% - var(--dh-sheet-peek)); min-height: 0; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; box-shadow: none; } /* The estimate rail presents as the bottom sheet (peek / half / full). The resting snaps are classes; the drag sets an inline transform (JS). */ .designer__rail { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 30; height: 88dvh; width: auto; padding: 0; border-radius: 0; border: 1px solid var(--border); border-bottom: 0; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 -4px 0 rgba(22,32,43,0.10); transform: translateY(calc(100% - var(--dh-sheet-peek))); transition: transform .2s ease; } .designer__rail.is-half { transform: translateY(48%); } /* 52% visible — mobile_sheet.ts */ .designer__rail.is-full { transform: translateY(0); } .designer__rail.is-dragging { transition: none; } .designer-sheet-grip { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; flex: none; width: 100%; height: var(--dh-sheet-peek); appearance: none; border: 0; border-bottom: 1px solid var(--border-lo); background: transparent; cursor: grab; padding: 10px 14px; touch-action: none; } .designer-sheet-grip__bar { width: 44px; height: 4px; background: var(--border); } .designer-sheet-grip__peek { font-family: var(--font-mono); font-size: 12px; color: var(--text-1); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .designer__rail-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 14px calc(24px + env(safe-area-inset-bottom)); } /* Session bar rides just above the peek strip, full width. */ .designer-session { left: 0; right: 0; bottom: var(--dh-sheet-peek); transform: none; max-width: none; border-left: 0; border-right: 0; } /* Reduced palette: Select / Draw ▾ / Measure — the Draw menu expands the rest. */ .designer-palette { top: 8px; left: 8px; max-height: calc(100% - 16px); overflow-y: auto; } .designer-palette__btn { min-height: 44px; min-width: 100px; font-size: 11.5px; } .designer-palette__select { min-height: 44px; font-size: 11.5px; } .designer-palette__more { display: block; } .designer-palette:not(.is-open) .designer-palette__btn[data-cad-designer-tool-param]:not([data-cad-designer-tool-param="select"]):not([data-cad-designer-tool-param="measure"]) { display: none; } /* Finger-sized widgets in the sheet (44px targets). */ .designer-chip { min-height: 44px; padding: 8px 12px; font-size: 12px; } .designer-inspector__select, .designer-inspector__select--line, .designer-wo__custom-scope, .designer-gates__level { min-height: 44px; font-size: 12px; } .designer-inspector__number, .designer-inspector__text, .designer-history__name, .designer-wo__custom-input { min-height: 40px; font-size: 13px; } .designer-inspector__remove, .designer-wo__line-remove { padding: 8px; } .designer-wo__history-btn { padding: 6px 8px; } .designer-layers__row { min-height: 44px; align-items: center; } /* Drawers that float over the canvas go full-screen sheets on phone. */ .designer-layers { position: fixed; inset: 0; width: auto; max-height: none; z-index: 45; padding: 14px; } /* The send-estimate confirm presents as a bottom sheet. */ .designer-send__card { top: auto; bottom: 0; left: 0; right: 0; transform: none; width: 100%; max-height: 82dvh; border-left: 0; border-right: 0; border-bottom: 0; padding-bottom: calc(16px + env(safe-area-inset-bottom)); } .designer-send__btn { min-height: 44px; } /* PP UX-B #9 — the material browser is a browse-and-search surface (needs the room a bottom sheet doesn't give), so it goes full-screen like the Layers drawer rather than half-height. */ .designer-material__card { position: fixed; inset: 0; z-index: 71; width: auto; max-height: none; transform: none; border: 0; padding: 14px 14px calc(14px + env(safe-area-inset-bottom)); } .designer-material__line { min-height: 44px; } .designer-material__close { width: 44px; height: 44px; } } @media (prefers-reduced-motion: reduce) { .designer__rail { transition: none; } }