/* Ancora — Graphite v2. Dark, cool, one teal accent. */ :root { /* =================================================================== GRAPHITE v2 — docs/redesign-log.md, "Leadflow Redesign" (Claude Design, 2026-08-17). Every value below is the mock's, measured, or a deliberate correction to it that the log records by name. Cool near-black neutrals with a faint blue cast (the previous Graphite was hue-less), one teal accent, amber for attention, coral for negative. IBM Plex Sans / Mono, named FIRST in each stack and falling back to the system faces: the CSP is font-src 'self' and nothing may fetch a font from Google, so the design renders as drawn wherever Plex is installed and degrades to the same metrics-class system face everywhere else. Self-hosting Plex is a separate decision (a fonts/ dir + @font-face), not one taken here. EVERY RATIO IN THIS FILE WAS MEASURED (WCAG relative luminance) when the palette moved. The previous 61-pair table is void; the new one is docs/b11-design-system.md §7, REGENERATED from this block by tools/contrast_table.py (the test compares them — change a colour, re-run the script, paste). Four of the mock's own values failed and were corrected — see --text-label, --text-dim, --border and (this block's follow-up) --border-input. =================================================================== */ /* ---- neutral ramp (mock: #0e0f11 / #121417 / #16181b / #23272c) --- */ --bg: #0e0f11; /* page canvas */ --nav-bg: #121417; /* nav rail, aside panels, docked reply */ --panel: #16181b; /* card, table, input surface */ --surface-raised: #23272c; /* active nav row, chips, secondary btn */ --surface-hover: #1c1f24; /* between panel and raised; hover tint */ /* Recessed, NOT raised: a locked queue row is unavailable, and reading as darker-than-the-card says that where a lighter tint would read as hovered. Same reasoning as v1; the value is the canvas. */ --surface-disabled: #0e0f11; /* The one accent-tinted surface: an unread notification row must be distinguishable from a HOVERED unread row. Teal at 8% on the panel. */ --surface-unread: #1a2a2b; /* MUST STAY PURE WHITE, in every palette, forever. Quiet zone behind the enrollment QR; scanners need maximum contrast. NOT --panel so a themed panel cannot drag it along; tests/test_typography.py asserts the value. */ --surface-scan: #ffffff; /* ---- borders ------------------------------------------------------ The mock draws hairlines at rgba(255,255,255,.06-.08), which composite to 1.14-1.28:1 — present in a browser at 1180px, invisible on a dim laptop panel. Decorative hairlines are WCAG-exempt, but v1 raised its own for exactly this reason. Shipped one notch stronger than drawn: .10 for hairlines (1.28-1.37), .14 for control edges and dividers (1.47-1.56). Controls that are IDENTIFIED ONLY by their border (inputs) get --border-input, a solid grey that clears the 3:1 floor on all four surfaces. The mock's #5a6068 did NOT: it measures 3.02 / 2.91 / 2.80 / 2.37 (the redesign log's first row for it was itself mis-measured at 2.94 on the panel). Lifted 18 units on the same cast so every surface an input can sit on clears with margin. */ --border: rgba(255, 255, 255, 0.10); /* decorative hairline */ --border-strong: rgba(255, 255, 255, 0.14); /* dividers, secondary btn */ --border-input: #6c727a; /* 3.95 / 3.80 / 3.66 / 3.09 */ /* ---- text --------------------------------------------------------- Measured on the four surfaces, worst case last (bg / nav / panel / raised): --text 15.91 / 15.31 / 14.76 / 12.46 --text-2 11.99 / 11.54 / 11.12 / 9.39 --muted 7.35 / 7.07 / 6.81 / 5.75 --text-dim 5.14 / 4.94 / 4.77 / 4.02 ← LARGE/MONO ONLY, see below All body ink clears AA on every surface. */ --text: #e8eaed; --text-2: #c8cdd3; /* long-form and quoted copy */ --muted: #9aa1a9; /* THE SMALL-CAPS EYEBROW INK. The mock uses rgba(232,234,237,.42) for its 11px mono uppercase labels; that composites to #6e7073 on the panel and measures 3.58:1 — below AA for text that small. v1 hit the identical finding and lifted its label ink. Same fix: eyebrows take --muted (6.81 on the panel) and keep the mock's mono/tracked/upper treatment, which is what actually carries the look. */ --text-label: #9aa1a9; /* Timestamps in the mono gutter, the × on a chip, "—" placeholders: the mock's #7e858d. It is 4.02 on the raised surface, so it is NEVER body copy — 12px+ mono figures and glyphs only, where the large-text/graphic allowance applies. Body copy stays on --muted. */ --text-dim: #7e858d; /* Ink ON a saturated fill. The canvas colour, not "black": 10.50 on the accent, 8.80 on amber, 5.87 on coral. Every solid pill and the primary button use it. */ --text-inverse: #0e0f11; /* ---- brand and intent (mock: teal / amber / coral) --------------- */ --accent: #6fd0c4; /* 10.50 / 10.10 / 9.74 / 8.22 as text */ --accent-hover: #8fe0d6; --accent-border: rgba(111, 208, 196, 0.30); --danger: #d9705f; /* 5.87 / 5.65 / 5.45 / 4.60 */ --danger-hover: #e58a7a; --danger-border: rgba(217, 112, 95, 0.35); --danger-tint: rgba(217, 112, 95, 0.04); --success: #6fd0c4; /* the mock has no separate green; teal IS positive */ --warn: #e0a45c; /* 8.80 / 8.46 / 8.16 / 6.89 */ --warn-bg: rgba(224, 164, 92, 0.07); --warn-border: rgba(224, 164, 92, 0.30); --warn-tint: rgba(224, 164, 92, 0.05); /* a whole row, faintly */ /* ---- inline feedback (tint at .14 on the panel, hue as text) ------ Measured hue-on-its-own-tint: positive 7.31, attention 6.33, negative 4.56. */ --feedback-positive-bg: rgba(111, 208, 196, 0.14); --feedback-positive-border: rgba(111, 208, 196, 0.35); --feedback-positive-text: #6fd0c4; --feedback-negative-bg: rgba(217, 112, 95, 0.14); --feedback-attention-bg: rgba(224, 164, 92, 0.14); --note-positive-text: #6fd0c4; --note-attention-text: #e0a45c; --hint-underline: #7e858d; /* ---- status palette ----------------------------------------------- The mock has THREE hues and uses tint-of-hue + hue-as-text for every status: teal (positive / info / scheduled), amber (attention / recovery / stale), coral (negative), grey (neutral). Nine v1 status roles collapse onto four fills, and that is the point — on a page where nothing is wrong the only colour is teal. Roles are kept as tokens so no template changes; several now alias the same fill. */ --status-info-bg: rgba(111, 208, 196, 0.14); --status-info-text: #6fd0c4; --status-info-text-strong: #8fe0d6; --status-positive-bg: rgba(111, 208, 196, 0.14); --status-positive-text: #6fd0c4; --status-scheduled-bg: rgba(111, 208, 196, 0.14); --status-scheduled-text: #6fd0c4; --status-neutral-bg: rgba(255, 255, 255, 0.06); --status-neutral-text: #9aa1a9; --status-neutral-text-strong: #c8cdd3; --status-negative-bg: rgba(217, 112, 95, 0.14); --status-negative-text: #d9705f; --status-attention-bg: rgba(224, 164, 92, 0.14); --status-attention-text: #e0a45c; --status-recovery-bg: rgba(224, 164, 92, 0.14); --status-recovery-text: #e0a45c; --status-stale-text: #e0a45c; /* ---- navigation and focus ---------------------------------------- */ --nav-text: #9aa1a9; --nav-hover-bg: rgba(255, 255, 255, 0.05); --nav-active-bg: #23272c; /* mock: solid raised, not an accent tint */ --nav-active-text: #e8eaed; --nav-user-text: #9aa1a9; /* SOLID accent, as v1: a tinted ring composites below the 3:1 floor. */ --focus-ring: var(--accent-hover); --shadow-soft: rgba(0, 0, 0, 0.6); /* ---- layout constants (mock: 212px rail, 340px aside) ------------ */ --nav-width: 212px; --aside-width: 340px; --control-height: 44px; /* every button, input, nav row */ --control-height-sm: 40px; /* header buttons, chip actions */ /* ---- radius (mock: 8 default, 9-10 cards, 5-6 pills, 20 capsule) -- */ --radius: 8px; --radius-lg: 10px; /* settings cards */ --radius-sm: 5px; /* mono tag pills */ --radius-pill: 20px; /* chips, count capsules */ /* ---- type --------------------------------------------------------- The mono stack is PINNED rather than left to the OS: two operators work from different machines and the money columns must line up identically on both. Consolas and Cascadia Mono sit ahead of the generic keyword because the Windows fallback for bare `monospace` is Courier New. */ --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Cascadia Mono", "Liberation Mono", monospace; /* ---- type scale ---------------------------------------------------- BLOCK 4. The reference spec's nine steps, which are six size/leading PAIRS crossed with weight and tracking: 11/16 600 +0.06em uppercase column headers and eyebrows 11/16 500 +0.01em badges and counts 12/16 400 0 secondary meta 13/20 400 0 table cell default 13/20 500 0 row primary 13/20 600 0 section headers 14/20 600 -0.005em screen title, grand total, pane title 16/24 600 -0.01em subheads 28/32 600 -0.02em the one display figure LEADING IS PAIRED TO SIZE AND FIXED IN PX, never unitless. A unitless line-height inherits the RATIO, so an 11px badge sitting inside 15px body copy used to get 22.5px of leading — a third more than its own line needs. Every rule that sets a size below therefore sets its leading in the same breath; that is the whole discipline. Position names for the pairs, role names for the tracking, matching the spacing scale's reasoning: --font-size-4 stays true if the scale is retuned, whereas --font-size-14px would become a lie, while tracking varies WITHIN a size (11px is +0.06em as an eyebrow and +0.01em as a badge) so it cannot be positional. LONG-FORM PROSE TAKES STEP 3, NOT STEP 4. The reference spec covers a dense table UI and has no prose step at all, so the four blocks that carry documents a tenant must READ BEFORE SIGNING — the ToS and DPA (.legal-body), the liability attestation (.attest-text), the enrollment instructions (.mfa-steps) and Jarvis's written answers (.jarvis-answer) — sit at 13/20 rather than 14/20. Same 20px leading, one step smaller, which buys a 1.54 ratio instead of 1.43. A wall of contract text at 1.43 is the wrong call: it is the one place in this app where somebody reads every word, and the leading is what makes that survivable. Step 4 stays correct for the short copy everywhere else. */ --font-size-1: 11px; --line-height-1: 16px; --font-size-2: 12px; --line-height-2: 16px; --font-size-3: 13px; --line-height-3: 20px; --font-size-4: 14px; --line-height-4: 20px; --font-size-5: 16px; --line-height-5: 24px; --font-size-6: 28px; --line-height-6: 32px; /* v2 additions, from the mock's dominant sizes. Positional names, same reasoning as the rest: --font-size-7 is 'the next step up', not '15px'. 15/22 is body-large (row primaries, buttons, inputs); 17/24 the card title; 22/28 the pane/lead title. */ --font-size-7: 15px; --line-height-7: 22px; --font-size-8: 17px; --line-height-8: 24px; --font-size-9: 22px; --line-height-9: 28px; --tracking-wide: 0.06em; /* uppercase eyebrows; transcribed codes */ --tracking-eyebrow: 0.08em; /* v2: the mock's mono section labels (STAGE, EARLIER) */ --tracking-badge: 0.01em; /* badges and counts */ --tracking-title: -0.005em; /* 14px 600 */ --tracking-subhead: -0.01em; /* 16px 600 */ --tracking-display: -0.02em; /* 28px 600 */ /* ---- spacing scale ----------------------------------------------- TAKEN FROM THE VALUES ALREADY IN USE, not rounded to a clean ramp. Rounding would move pixels, and this pass is required to change nothing visible. The result is therefore NOT a tidy 4px ramp: it is 4px-stepped from --space-9 upward, but the low end carries every odd value the app had reached for (5, 7, 9), and there are gaps at the top (34-58px were never used). Position names, not value names: --space-5 stays correct if the scale is later retuned, whereas --space-8px would become a lie. A future ramp should collapse the odd low steps, but that is a visual change and belongs to a design block, not here. */ --space-1: 1px; --space-2: 2px; --space-3: 4px; --space-4: 5px; --space-5: 6px; --space-6: 7px; --space-7: 8px; --space-8: 9px; --space-9: 10px; --space-10: 12px; --space-11: 14px; --space-12: 16px; --space-13: 18px; --space-14: 20px; --space-15: 22px; --space-16: 24px; --space-17: 26px; --space-18: 28px; --space-19: 30px; --space-20: 32px; --space-21: 60px; } * { box-sizing: border-box; } body { margin: 0; font-family: var(--font-sans); font-size: var(--font-size-4); line-height: var(--line-height-4); color: var(--text); background: var(--bg); } /* Layout */ body.with-nav { display: flex; min-height: 100vh; } .sidenav { width: var(--nav-width); flex-shrink: 0; background: var(--nav-bg); padding: var(--space-14) 0; display: flex; flex-direction: column; gap: var(--space-2); position: sticky; top: 0; /* THE NAV IS TALLER THAN THE VIEWPORT AND THAT IS FINE — WHAT IT MUST NEVER DO IS CLIP ITSELF. Twenty links at 38px each is 760px before the brand, the four group labels, the three separators and the log-out form; the whole column measures 1103px, and no laptop viewport is that tall. So the overflow has to go SOMEWHERE the user can reach. B11 first shipped `height: 100vh` + `overflow-y: auto`, reasoning that a scroll container is what a too-tall nav needs. That was wrong in the one way that matters: it moved the overflow OUT of the document. The page's scroll height collapsed to the viewport (measured: 720px on a 720px window), so there was nothing to scroll, and the nav's own scrollbar is an overlay on macOS — it does not paint until you are already scrolling inside the element you cannot see. Settings and Superadmin sat at y=853 and y=893 with `elementFromPoint` returning nothing. The links worked, the routes answered 200, and they were unreachable. `align-self: flex-start` + `min-height` instead: the nav takes its natural height, so the document grows to 1103px and the PAGE scrolls — the mechanism that was quietly making this work before B11, when the same nav measured 928px. `min-height` still paints the full-height band when the column is short, which is every VA session (one link). Never give this element a fixed height with a clipping overflow. */ align-self: flex-start; min-height: 100vh; } .sidenav .brand { display: flex; align-items: center; gap: var(--space-9); color: var(--text); font-size: var(--font-size-5); line-height: var(--line-height-5); font-weight: 600; padding: 0 var(--space-14) var(--space-16); letter-spacing: var(--tracking-subhead); } /* The brand mark: a 26px teal tile, the one place the accent is a fill in the rail. */ .sidenav .brand::before { content: ""; width: 26px; height: 26px; border-radius: 7px; background: var(--accent); flex: none; } /* v2 (mock 1a): a nav row is a 44px pill, 8px radius, in a 10px gutter. The active row is the SOLID raised surface, not an accent tint or a left rail — the accent in the nav is reserved for the count capsule and the mode dot, so it means "something for you", never "you are here". */ .sidenav a { display: flex; align-items: center; justify-content: space-between; min-height: var(--control-height); margin: 0 var(--space-9); padding: 0 var(--space-10); border-radius: var(--radius); color: var(--nav-text); text-decoration: none; font-size: var(--font-size-7); line-height: var(--line-height-7); } .sidenav a:hover { color: var(--text); background: var(--nav-hover-bg); } .sidenav a.active { color: var(--nav-active-text); background: var(--nav-active-bg); font-weight: 600; } /* THE MODE CARD (mock 1a). Read-only; links to Settings → Mode. The dot is the accent when outreach is live and a hairline ring when paused, so the state is legible without reading the words. */ .sidenav .nav-mode-card { display: block; margin: auto var(--space-11) 0; padding: var(--space-10) var(--space-11); background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); text-decoration: none; min-height: 0; font-size: var(--font-size-3); line-height: var(--line-height-3); } .sidenav .nav-mode-card:hover { background: var(--surface-hover); } .sidenav .nav-mode-title { display: flex; align-items: center; gap: var(--space-7); font-weight: 600; } .sidenav .nav-mode-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; border: 1px solid var(--muted); } .sidenav .nav-mode-dot.is-on { background: var(--accent); border-color: var(--accent); } .sidenav .nav-mode-sub { color: var(--muted); font-size: var(--font-size-2); line-height: var(--line-height-2); margin-top: var(--space-2); } .sidenav .logout-form { padding: var(--space-10) var(--space-14) 0; } .content { flex: 1; max-width: 1100px; padding: var(--space-18) var(--space-20) var(--space-21); margin: 0 auto; width: 100%; } body.no-nav .content { max-width: 480px; padding-top: 10vh; } /* v2: the page title is 24/600 in the mock (font-size-9 is 22, -6 is 28; the mock's 24 sits between and is used for exactly one thing — the page's name — so it takes -9, the pane-title step, and the 28 display step stays for figures). */ h1 { font-size: var(--font-size-9); line-height: var(--line-height-9); letter-spacing: var(--tracking-display); font-weight: 600; margin: 0 0 var(--space-12); } /* Graphite v2: a page's own

— the direct child of .content, on the ~40 screens that have no explicit .page-head yet — takes the page-head treatment by selector: the hairline under and the same spacing, so every screen opens the same way whether it was rebuilt from a mock or not. Screens with a real .page-head style their h1 inside it. */ .content > h1 { padding-bottom: var(--space-13); margin-bottom: var(--space-12); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: var(--space-9); flex-wrap: wrap; } .content > h1 .badge, .content > h1 .tag { margin-left: 0; } h2 { font-size: var(--font-size-5); line-height: var(--line-height-5); letter-spacing: var(--tracking-subhead); margin: var(--space-16) 0 var(--space-9); } .muted { color: var(--muted); } /* Flash messages */ .flashes { margin-bottom: var(--space-13); } .flash { padding: var(--space-9) var(--space-11); border-radius: var(--radius); border: 1px solid var(--border); background: var(--panel); margin-bottom: var(--space-7); } .flash-success { border-color: var(--success); background: var(--feedback-positive-bg); } .flash-error { border-color: var(--danger); background: var(--feedback-negative-bg); } .flash-warning { border-color: var(--warn-border); background: var(--feedback-attention-bg); } /* Stat cards */ .cards { display: flex; flex-wrap: wrap; gap: var(--space-9); margin: 0 0 var(--space-13); } .card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-11) var(--space-12); min-width: 150px; flex: 1; } /* v2 (mock 1a): a stat tile's label is 13px muted sentence case, the way the KPI strip's is — not an uppercase eyebrow. The eyebrow is for SECTION labels (.eyebrow); a tile's label names one number. */ .card .label { color: var(--muted); font-size: var(--font-size-3); line-height: var(--line-height-3); } .card .stat { font-size: var(--font-size-6); line-height: var(--line-height-6); letter-spacing: var(--tracking-display); font-weight: 600; margin-top: var(--space-2); } .card .sub { color: var(--muted); font-size: var(--font-size-3); line-height: var(--line-height-3); } /* Tables */ .table { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .table th, .table td { text-align: left; padding: var(--space-8) var(--space-10); border-bottom: 1px solid var(--border); vertical-align: top; } .table th { background: var(--surface-raised); color: var(--text-label); font-size: var(--font-size-2); line-height: var(--line-height-2); text-transform: uppercase; letter-spacing: var(--tracking-wide); font-weight: 600; } .table tr:last-child td { border-bottom: none; } .table tr:hover td { background: var(--surface-hover); } /* Buttons */ /* v2: every button is a 44px control at 15/600. The mock has three weights of button and nothing else: PRIMARY (solid teal, dark ink), SECONDARY (raised surface + strong hairline) and GHOST (transparent + hairline, muted ink). The default .btn is SECONDARY; that is what an unadorned form button should read as. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-7); min-height: var(--control-height); padding: 0 var(--space-13); border-radius: var(--radius); border: 1px solid var(--border-strong); background: var(--surface-raised); color: var(--text); font-size: var(--font-size-7); line-height: var(--line-height-7); font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; } .btn:hover { background: var(--surface-hover); } .btn-ghost { background: transparent; border-color: var(--border); color: var(--muted); } .btn-ghost:hover { color: var(--text); background: var(--nav-hover-bg); } .btn-sm { min-height: var(--control-height-sm); padding: 0 var(--space-11); font-size: var(--font-size-4); line-height: var(--line-height-4); } .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--text-inverse); padding: 0 var(--space-13); } .btn-primary:hover { background: var(--accent-hover); } /* v2 (mock 1c "Close lead…"): a destructive action is an OUTLINE — coral ink and a coral hairline on a transparent ground — not a solid slab. Twenty-seven of these ship across the templates and three sit side by side on a lead page; three red slabs in a row is the accent-on-every-button defect in a different hue. The SOLID form is `.btn-danger-solid`, for the one control per screen that is truly the point of no return (the Danger-zone reset), and nothing else. */ .btn-danger { background: transparent; border-color: var(--danger-border); color: var(--danger); } .btn-danger:hover { background: var(--danger-tint); border-color: var(--danger); } .btn-danger-solid { background: var(--danger); border-color: var(--danger); color: var(--text-inverse); } .btn-danger-solid:hover { background: var(--danger-hover); } .btn-link { background: none; border: none; color: var(--nav-text); cursor: pointer; padding: 0; font-size: var(--font-size-4); line-height: var(--line-height-4); } .btn-link:hover { color: var(--text); text-decoration: underline; } /* Badges */ /* v2 (mock): a status badge is a MONO tag — 11px, weight 500, in a 5px pill on a tint of its own hue. Uppercase comes from the mock's copy ("HOT", "QUOTE"); it is applied here so templates keep passing lower- case slugs. Not a capsule: capsules (--radius-pill) are counts and chips, which are a different thing. */ .badge { display: inline-block; padding: var(--space-2) var(--space-6); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: var(--font-size-1); line-height: var(--line-height-1); letter-spacing: var(--tracking-badge); font-weight: 500; text-transform: uppercase; background: var(--status-neutral-bg); color: var(--status-neutral-text); vertical-align: middle; } .badge-new { background: var(--status-info-bg); color: var(--status-info-text); } .badge-active { background: var(--status-positive-bg); color: var(--status-positive-text); } .badge-replied { background: var(--status-attention-bg); color: var(--status-attention-text); } .badge-quote { background: var(--status-recovery-bg); color: var(--status-recovery-text); } .badge-booked { background: var(--status-scheduled-bg); color: var(--status-scheduled-text); } .badge-exhausted { background: var(--status-neutral-bg); color: var(--status-neutral-text); } .badge-suppressed { background: var(--status-negative-bg); color: var(--status-negative-text); } .badge-danger { background: var(--status-negative-bg); color: var(--status-negative-text); } .badge-warn { background: var(--warn-bg); color: var(--status-stale-text); } /* Warning banner */ .warn-banner { background: var(--warn-bg); border: 1px solid var(--warn-border); border-radius: var(--radius); padding: var(--space-10) var(--space-12); margin-bottom: var(--space-13); } /* Forms */ .form-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-7); max-width: 560px; } .form-grid label { font-weight: 600; font-size: var(--font-size-3); line-height: var(--line-height-3); margin-top: var(--space-7); } .form-grid input, .form-grid select, .form-grid textarea { padding: var(--space-7) var(--space-9); border: 1px solid var(--border-input); border-radius: var(--radius); font: inherit; background: var(--panel); width: 100%; } .form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus { outline: 2px solid var(--focus-ring); border-color: var(--accent); } .form-grid .btn { margin-top: var(--space-10); justify-self: start; } .form-grid textarea { min-height: 110px; resize: vertical; } /* Two-column form layout for wide settings sections */ @media (min-width: 720px) { .form-grid.two-col { grid-template-columns: 180px 1fr; align-items: center; max-width: 760px; } .form-grid.two-col label { margin-top: 0; } } /* Auth pages */ .auth-box { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-18) var(--space-19); box-shadow: 0 4px 14px var(--shadow-soft); } .auth-box h1 { margin-bottom: 0; font-size: var(--font-size-6); line-height: var(--line-height-6); } .auth-box .btn { width: 100%; margin-top: var(--space-11); } /* Misc */ .secret-value { font-family: var(--font-mono); } /* B3: current user label in the side nav */ .sidenav .nav-user { padding: var(--space-10) var(--space-14) 0; color: var(--nav-user-text); font-size: var(--font-size-3); line-height: var(--line-height-3); } .sidenav .nav-user + .logout-form { margin-top: 0; } /* --- B11: pipeline LANE badges + inline call forms ------------------------ Three lanes, and the colour says which one at a glance without reading the word. COLD is the only neutral: a cold lead has no heat by definition. WORKING climbs attention -> recovery -> scheduled -> positive, so the rung reads as progress. NEGATIVE splits by whether the lead can come back: the three recoverable ones are muted neutral-strong (they are OUT, not GONE), and only the three TERMINAL ones take the full negative fill — which is what keeps that fill meaning something. B4's .badge-contacted / .badge-nurture / .badge-dead are gone with the stages they named; test_badge_coverage reads the vocabulary from pipeline.PIPELINE_STAGES, so this block cannot silently fall behind it. */ .badge-cold { background: var(--status-neutral-bg); color: var(--status-neutral-text); } .badge-engaged { background: var(--status-attention-bg); color: var(--status-attention-text); } .badge-quote { background: var(--status-recovery-bg); color: var(--status-recovery-text); } .badge-appointment { background: var(--status-scheduled-bg); color: var(--status-scheduled-text); } .badge-client { background: var(--status-positive-bg); color: var(--status-positive-text); } .badge-not_interested, .badge-wrong_person, .badge-ghosted { background: var(--status-neutral-bg); color: var(--status-neutral-text-strong); } .badge-bad_number, .badge-do_not_call, .badge-revoked { background: var(--status-negative-bg); color: var(--status-negative-text); } /* THE TWO MANUAL LANES — Referral (referral_*) and Referral partner (partner_*), four rungs each. They climb the SAME ramp the Working lane does, for the same reason: the rung should read as progress without reading the word. What they deliberately do NOT do is take a colour of their own per lane. A lane is a heading on the board and a badge next to a name; colouring the two lanes differently would put five hues on one page and make the RUNG — the thing that actually changes — the harder of the two to read. Which pipeline a lead is in is already unambiguous from the badge TEXT, because the slug carries the lane. */ .badge-referral_referred, .badge-partner_referred { background: var(--status-neutral-bg); color: var(--status-neutral-text); } .badge-referral_pitched, .badge-partner_pitched { background: var(--status-attention-bg); color: var(--status-attention-text); } .badge-referral_closed, .badge-partner_closed { background: var(--status-scheduled-bg); color: var(--status-scheduled-text); } .badge-referral_sold, .badge-partner_sold { background: var(--status-positive-bg); color: var(--status-positive-text); } /* `overflow` is NOT a pipeline stage and is deliberately absent from pipeline.PIPELINE_STAGES. routes_today.py stamps it onto a DISPLAY dict (`d["pipeline_stage"] = "overflow"`) so today.html's `badge-{{ q['pipeline_stage'] }}` has something to render for a pool row, which has no stage of its own — a pool row is not a lead until positive contact, so giving it a real stage would be the lie the whole overflow separation exists to prevent. It therefore has no rule from test_badge_coverage's vocabularies and rendered as a bare grey `.badge` — the exact silent failure that file was written about, in the one family it does not cover. SCHEDULED, matching .badge-src-overflow on the same row: both say "this came from the pool", and two different colours for one fact on one line is worse than none. */ .badge-overflow { background: var(--status-scheduled-bg); color: var(--status-scheduled-text); } /* --- B11: the three lanes ------------------------------------------------ Hierarchy is size and weight, not rules and boxes: the lane title is the largest thing on the page after the h1, its count sits beside it at the same weight, and the note that explains the lane recedes to muted body text. No lane carries an accent fill — the badges inside it already carry the colour, and repeating it on the header would flatten the very distinction the badges are making. */ .lane { margin-bottom: var(--space-2); } .lane-head { display: flex; align-items: baseline; gap: var(--space-7); flex-wrap: wrap; margin-bottom: var(--space-8); } .lane-title { font-size: var(--font-size-1); line-height: var(--line-height-1); font-weight: 600; margin: 0; } .lane-count { font-size: var(--font-size-2); line-height: var(--line-height-2); font-weight: 600; color: var(--muted); } .lane-note { font-size: var(--font-size-3); line-height: var(--line-height-3); } .stage-head { display: flex; align-items: center; gap: var(--space-8); font-size: var(--font-size-3); line-height: var(--line-height-3); margin: 0 0 var(--space-8) 0; } .stage-terminal { font-size: var(--font-size-4); line-height: var(--line-height-4); text-transform: uppercase; letter-spacing: var(--tracking-badge); } /* COLD age buckets. Seven cells, equal weight, because no bucket is more important than another until you look at the number in it. A bucket holding zero recedes; a bucket holding leads does not. */ .bucket-strip { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-8); grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); } .bucket { display: flex; flex-direction: column; gap: var(--space-10); padding: var(--space-8) var(--space-7); border-radius: var(--radius); background: var(--status-neutral-bg); /* --status-neutral-text, NOT --muted. --muted is tuned against the page canvas (6.53 on --bg) and lands at 5.12 on this chip — passing, but the weakest pair in the whole system, and introduced for a label that is already the smallest type on the page. The neutral ramp has a token built for this exact background: 6.76. */ color: var(--status-neutral-text); } .bucket-live { color: var(--text); } /* 14.87 */ .bucket-count { font-size: var(--font-size-2); line-height: var(--line-height-2); font-weight: 600; } .bucket-label { font-size: var(--font-size-4); line-height: var(--line-height-4); color: var(--status-neutral-text); /* 6.76 */ } .call-log-form, .call-row { display: flex; gap: var(--space-7); flex-wrap: wrap; align-items: center; } .call-log-form select, .call-log-form input, .call-row input { padding: var(--space-7) var(--space-9); } /* --- B5/B6: VA queue + pay ----------------------------------------------- */ .badge-success { background: var(--status-positive-bg); color: var(--status-positive-text); } .queue-worked td { color: var(--muted); } .queue-worked a { color: var(--muted); } /* BLOCK 5 folded this into the general `.table td.num` column rule — .pay-breakdown IS a .table, and two rules saying the same thing is how one of them drifts. */ .pay-breakdown .pay-total td { border-top: 2px solid var(--border); } /* --- R1: notification center + nav bell badge ---------------------------- */ .nav-badge { display: inline-block; min-width: 18px; padding: var(--space-1) var(--space-5); /* A capsule, not a corner. Option B keeps exactly two round things — "no circles except the .badge pill and .nav-badge" — so the 4px radius sweep must not reach this one. */ border-radius: var(--radius-pill); /* v2 (mock 1a): the count is TEAL with dark ink, in mono. It used to be danger-red, which made a "3 notifications" capsule read as an error. It means "there is something for you", which is the accent's job in the rail. */ background: var(--accent); color: var(--text-inverse); font-family: var(--font-mono); font-size: var(--font-size-2); letter-spacing: var(--tracking-badge); font-weight: 500; text-align: center; line-height: var(--line-height-2); } .notif-unread td { background: var(--surface-unread); } /* AND IT HAS TO SURVIVE THE POINTER. `.table tr:hover td` is (0,2,2) and `.notif-unread td` is (0,1,1), so hovering an unread row replaced its tint with the generic hover grey and it became indistinguishable from a hovered READ row — proved by injecting a rule of identical specificity: #241D0E became #242424. --surface-unread's own note in :root says "an unread notification row has to be distinguishable from a HOVERED unread row", which is the distinction the cascade was destroying. A fourth surface without a fourth token: the attention tint, which is neither of the greys and neither of the other two. */ .table tr.notif-unread:hover td { background: var(--status-attention-bg); } .notif-body { white-space: pre-wrap; max-width: 480px; } .badge-ntype-approval { background: var(--status-info-bg); color: var(--status-info-text); } .badge-ntype-quote { background: var(--status-attention-bg); color: var(--status-attention-text); } .badge-ntype-booking { background: var(--status-scheduled-bg); color: var(--status-scheduled-text); } .badge-ntype-bounce_pause { background: var(--status-negative-bg); color: var(--status-negative-text); } .badge-ntype-recovery { background: var(--status-recovery-bg); color: var(--status-recovery-text); } .badge-ntype-referral { background: var(--status-positive-bg); color: var(--status-positive-text); } .badge-ntype-task { background: var(--status-neutral-bg); color: var(--status-neutral-text); } .badge-ntype-system { background: var(--status-neutral-bg); color: var(--status-neutral-text); } /* R2/R3: text-log heat scale + detection */ .badge-hot { background: var(--danger); color: var(--text-inverse); } .text-log-form { display: flex; gap: var(--space-7); flex-wrap: wrap; align-items: center; } .text-log-form input[name="note"] { padding: var(--space-7) var(--space-9); } .heat-radios { display: flex; gap: var(--space-9); flex-wrap: wrap; } .heat-radio { font-size: var(--font-size-4); line-height: var(--line-height-4); white-space: nowrap; } /* R4: VA queue source badges + calling-window lock */ /* B6: the only source a new queue row can have — an agent pressed Send. The accent, because it is the one every row on a healthy day carries and a queue of uniformly loud badges reads as an alarm. */ .badge-src-sent { background: var(--status-info-bg); color: var(--status-info-text); } .badge-src-ghost { background: var(--danger); color: var(--text-inverse); } .badge-src-callback { background: var(--status-info-bg); color: var(--status-info-text); } .badge-src-stale { background: var(--warn-bg); color: var(--status-stale-text); } .badge-src-volume { background: var(--status-neutral-bg); color: var(--status-neutral-text-strong); } .badge-src-aged, .badge-src-fresh { background: var(--status-neutral-bg); color: var(--status-neutral-text-strong); } /* Overflow was the ONE queue source rendering with no colour of its own: today.html and overflow_work.html emit .badge-src-overflow and nothing styled it, so those rows fell back to the base grey `.badge` and read as Volume/Aged/Fresh. Purple is the only pair in the existing badge palette no source was using (it belongs to booked/appointment elsewhere, which never appears in the source column). 6.15:1 — this comment said 7.57 until BLOCK 4 re-measured it; the pair never changed, the number was wrong when it was written, and --status-scheduled-text's own annotation had 6.15 all along. */ .badge-src-overflow { background: var(--status-scheduled-bg); color: var(--status-scheduled-text); } .queue-locked td { color: var(--muted); } .queue-locked a { color: var(--muted); } /* A locked row is dimmed on its BACKGROUND, never by fading the badges. `opacity: 0.55` on the badge was responsible for 156 of the 163 contrast failures on /today: it composites the badge's own colours toward the row behind them, so the declared #fff-on-#dc2626 (4.83, passes) rendered as roughly #ef9d9d on #ec8888 — about 1.2:1. No palette change can fix that, because white text faded over a white row stays white; even a black fill caps out around 2.8. The badges are legible at full strength and the row still reads as asleep. */ .queue-locked td { background: var(--surface-disabled); } .locked-note { font-style: italic; white-space: nowrap; } /* R5: VA scripts console */ .work-nav { display: flex; align-items: center; gap: var(--space-10); } .work-nav .work-next { margin-left: auto; } .work-phone { font-size: var(--font-size-6); line-height: var(--line-height-6); letter-spacing: var(--tracking-display); font-weight: 600; } .work-phone a { text-decoration: none; } .work-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-12); align-items: start; } @media (max-width: 900px) { .work-grid { grid-template-columns: 1fr; } } .script-section { margin-bottom: var(--space-11); } .script-section h3 { margin: 0 0 var(--space-3); font-size: var(--font-size-2); line-height: var(--line-height-2); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-label); } .script-section p { margin: 0; white-space: pre-wrap; line-height: var(--line-height-4); } /* ONE rule. This class was declared twice — here with `gap: var(--space-9)` and again in the Block 3 sweep with `gap: var(--space-7)` — so the gap the file appeared to specify was not the gap that rendered. Merged at the value that was actually winning. */ .script-meta { display: flex; align-items: center; gap: var(--space-7); flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: var(--space-9); margin-top: var(--space-3); } .panel-line { white-space: pre-wrap; line-height: var(--line-height-4); } .rebuttal { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-5) var(--space-9); margin-bottom: var(--space-7); } .rebuttal summary { cursor: pointer; font-weight: 600; } .rebuttal p { margin: var(--space-7) 0 var(--space-2); white-space: pre-wrap; } .work-link { margin-right: var(--space-5); } /* Part 4 Wave A: signup / attestation / onboarding (S1), per-VA fields (S2) */ .attest-box { max-width: 760px; margin: 0 auto; } .attest-text { white-space: pre-wrap; font: inherit; /* STEP 3, not step 4. See the prose note in :root. */ font-size: var(--font-size-3); line-height: var(--line-height-3); /* `
` carries the UA's `margin-block: 1em`, and 1em HERE is the
     element's own 13px — so this box sat 13px from its neighbours, a
     number on no scale, purely because nobody wrote a margin. Its twin
     `.legal-body` zeroes it explicitly; this one had never been looked
     at. Measured at 13px 0px before this line. */
  margin: var(--space-12) 0;
  /* `white-space: pre-wrap` wraps at spaces and cannot break INSIDE an
     unbreakable token. The CSA text contains a 64-character URL, and
     below about 420px of viewport the contract box overflows its own
     width and takes the page's horizontal scroll with it — measured at
     360px: box scrollWidth 315 against clientWidth 256, document 560
     against 360. `overflow-wrap` rather than `word-break` so ordinary
     words still break only at their own boundaries. */
  overflow-wrap: break-word;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--space-12) var(--space-14); max-height: 420px; overflow-y: auto;
}
/* The consent sentence renders on three pages and read as two designs:
   this one is a