/* ========================================================================== overrides.css — the Silk Matrix override layer -------------------------------------------------------------------------- WHAT THIS IS Maps the EXISTING selectors in the twelve original stylesheets onto the custom properties declared in tokens.css. This is where every visual change in the UI enhancement lives. LOAD ORDER — THIS FILE LOADS LAST, AFTER EVERY OTHER STYLESHEET, INCLUDING AFTER ANY {% block extra_css %} CONTENT. It wins by source order, which is what lets it re-point the originals without editing them. If it loads any earlier, a page-specific stylesheet overrides it and the redesign silently does nothing on that page. Note: the originals carry 184 !important declarations (88 in home_styles.css). Source order does not beat !important, so those specific rules need !important here too. Match specificity to the rule being overridden; do not reach for !important by default. WHO LOADS IT The same five templates and the same 43 preview pages as tokens.css. THE TWELVE ORIGINAL STYLESHEETS MUST NOT BE EDITED. Do not rename a class to make an override easier. The class names listed in CLAUDE.md are load-bearing — JavaScript and Django template logic select on them. Restyle the selector; leave its name alone. REMEMBER: DEBUG = False is hardcoded. Nothing here is visible in the real app until `collectstatic` runs. ========================================================================== */ /* ========================================================================== 1. THE SHARED INSET HANDOFF.md 1.3 · BRIEF 3.11 -------------------------------------------------------------------------- One rule replaces six competing per-page values. What it neutralises: 108px !important .main-content home_styles.css:4 108px !important .main-content matching_styles.css:6 108px !important .main-content name_selection_styles.css:8 90px .page-center-boundary customer_styles.css:26 64px (4em) .main-content tagging_styles.css:2 nothing review_styles.css, error_styles.css, relationship_list ...plus four more insets found while verifying the six, all of which fight the same job and all of which are neutralised here: 32px (2rem) .main-content mapping_styles.css:5 (shorthand) 32px !important .main-content @<=1023px home_styles.css:407 <- the 769-1023px overlap: 32px reserved against a 72px rail 24px !important .main-content @<=768px matching_styles.css:632, name_selection_styles.css:583 0px .page-center-boundary @<=1024px base_styles.css:301 8% .top-bar base_styles.css:367 <- the top bar is a SIBLING of .main-content, not a child, so it carries its own inset. 8% is 64px at 800px wide, i.e. under the 72px rail. Same shared value fixes it. .main-content is the one element every page has: base.html puts it on all 12 of its pages, and home.html, mapping.html and upload_status.html each declare their own. .page-center-boundary sits INSIDE .main-content on the customer / relationship pages, so it must drop to 0 or the inset doubles. !important is required on .main-content and only there: three originals set this property with !important and source order does not beat !important. Every other rule in this section wins on source order alone. ========================================================================== */ .main-content { /* !important: required. home_styles.css:4, matching_styles.css:6 and name_selection_styles.css:8 all set padding-left with !important, as do their <=1023px / <=768px media rules. */ padding-left: var(--sm-inset) !important; transition: padding-left 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .top-bar { /* No !important: base_styles.css:367 is a plain declaration. */ padding-left: var(--sm-inset); transition: padding-left 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .page-center-boundary { /* Nested inside .main-content, which now carries the inset. No !important: customer_styles.css:26 and base_styles.css:301 are both plain. */ padding-left: 0; } /* ========================================================================== 2. PUSH AT >= 1024px BRIEF 3.11 -------------------------------------------------------------------------- The sidebar is position: fixed, so it cannot push anything by itself. The expanded state lives as .open on .left-bar, which is a preceding SIBLING of both .top-bar and .main-content in every one of the five full-document templates, so the general sibling combinator reads the sidebar's state without a template or JS change. 72px rail -> 240px expanded is 168px of extra width, so the expanded inset is --sm-inset + 168px: 276px at >= 1024px, which is the figure HANDOFF.md 1.3 gives. Pushing is scoped to >= 1024px; below that the sidebar overlays and the page must not reflow. The expanded state is not persisted (no localStorage, no sessionStorage, no cookie), so it resets on navigation. The resting layout is unchanged. ========================================================================== */ @media (min-width: 1024px) { .left-bar.open ~ .main-content { /* !important: same reason as the base rule - it is overriding the same three !important declarations. */ padding-left: calc(var(--sm-inset) + 168px) !important; } .left-bar.open ~ .top-bar { padding-left: calc(var(--sm-inset) + 168px); } } /* ========================================================================== 3. OVERLAY + SCRIM BELOW 1024px BRIEF 3.11 · HANDOFF 3.17 -------------------------------------------------------------------------- #overlay already exists and is already wired: toggleSilkSidebar() adds .active to it alongside .open on the sidebar, and clicking it closes the sidebar. Nothing here needs JS. base_styles.css declares #overlay TWICE with different colours and blurs (rgba(15,23,42,.15) + blur(3px) at :286, then rgba(0,0,0,.2) + blur(2px) at :342, which is the one that currently wins). Both are replaced by the one scrim token. HANDOFF.md 3.17: one scrim, --sm-scrim, NO blur. z-index: the scrim must sit above page content and below the sidebar. The sidebar carries an inline z-index: 99999 !important in left_bar.html, so 1900 clears every in-page layer (.bottom-progress-container is 1000) while staying under it. ========================================================================== */ #overlay { background: var(--sm-scrim); /* HANDOFF.md 3.17 and 6.10: no blur. */ backdrop-filter: none; -webkit-backdrop-filter: none; z-index: 1900; } /* At >= 1024px the sidebar pushes instead of overlaying, so there is nothing to scrim. The toggle still adds .active; this makes it inert rather than asking the template to stop doing it. */ @media (min-width: 1024px) { #overlay, #overlay.active { opacity: 0; pointer-events: none; } } /* ========================================================================== 4. THE CENTRED MODAL MUST CLEAR THE RAIL TOO -------------------------------------------------------------------------- Found while verifying task 4, not on the original list of six. .modal-overlay (base_styles.css:550) is a full-viewport flex container that centres its dialog on the VIEWPORT, and it carries z-index: 9999 while the sidebar carries an inline z-index: 99999. So the rail paints over the dialog's left edge whenever the dialog is wide enough to reach it: measured at 900px the file-preview dialog's title starts at x=69 against a 72px rail, and at 800px at x=64. Giving the overlay the shared inset as padding re-centres the dialog in the area the sidebar leaves, which is what "centred" should have meant. The scrim itself still covers the full viewport. ========================================================================== */ .modal-overlay { padding-left: var(--sm-inset); } @media (min-width: 1024px) { .left-bar.open ~ .modal-overlay { padding-left: calc(var(--sm-inset) + 168px); } } /* ========================================================================== 5. THE BUTTON SYSTEM HANDOFF.md 3.2, 3.3 · 2.1, 2.2 -------------------------------------------------------------------------- WHAT WAS WRONG Nine separately-defined primary buttons, verified against the twelve originals, with no shared class between them: .bottom-buttons .next / .next-address / .next-email / .next-phone name_selection_styles.css:310 12px 16px .btn-next mapping_styles.css:114 10px 14px .card-footer .skip-btn matching_styles.css:142 12px 16px .process-forward-btn home_styles.css:324 10px 13.5px .calendar-done-btn customer_styles.css:735 12px 14px .home-btn error_styles.css:75 12px 14px .refresh-btn base_styles.css:519 8px 14px #filePreviewModal .btn-primary home_styles.css:587 6px .875rem ALL NINE PROPERTIES !important .login-btn login_styles.css:138 50px 16px linear-gradient(193deg,#60c5c3,#54ccaf,#14c584) Six radii (6 8 10 12 12 50px), five font sizes (13.5 14 14 15 16px), two blues (#018ac6 and #0284c7, plus #008cdd on Review) and one green gradient. Three more solid actions that are primary in everything but name were found while verifying the nine and are unified with them: .btn-add (base_styles.css:586), .jump-page-btn (customer:864 and relationship_list:189, as the small variant) and .view-alt-btn (review_styles.css:988, a blue gradient). Two further green gradients that HANDOFF.md 4.3 sends to blue: .preview-file-btn (home:338) and .view-relationship (review:316). THE CANONICAL FORM — HANDOFF.md 3.2 38px tall · --sm-radius-control · 14px/500 · 150ms transition. Primary fill --sm-brand-strong, white text. Hover --sm-brand-deep. Secondary border --sm-brand, text --sm-brand-strong, white fill. Hover --sm-brand-wash. Tertiary border --sm-line, text --sm-ink-muted. Hover --sm-surface-sunk. Destructive fill --sm-danger-solid. Hover --sm-danger-pressed. Disabled border --sm-line, text --sm-ink-faint, NOT opacity on a fill. Small 30px tall, 0 12px, 13px. WHY --sm-brand-strong AND NOT --sm-brand HANDOFF.md 2.2 / 6.1: white 14px on #018ac6 is 3.8:1 and fails AA. Every one of the nine used #018ac6 or a retired blue as a fill under white text. #016fa0 is 5.6:1. This is the single most-repeated defect in the set. NO .btn CLASS IS INTRODUCED Templates are not edited on this branch and CLAUDE.md 6 forbids relying on a class the template does not emit. Every rule below therefore repeats the EXACT selector from the original, so it ties on specificity and wins on source order. Where the original is !important, so is this. HEIGHT ARITHMETIC HANDOFF.md 3.2 gives both "38px tall" and "10px 18px". 10 + 20 (the body leading) + 10 + 2 (border) is 42px, not 38. The stated control height is the harder constraint — HANDOFF.md 1.3 repeats "Control height 38px" in the density table — so the padding here is 8px 18px, which lands on 38px exactly with the 14/20 body role and a 1px border. ========================================================================== */ /* -------------------------------------------------------------------------- 5.1 The shared chassis Geometry, type and transition for every button-shaped control. Width and height are deliberately absent: .process-forward-btn, .login-btn, .view-alt-btn, .view-relationship, .alt-type-btn and .calendar-done-btn all size themselves from their container and must keep doing so. Only min-height is set, which is what neutralises Review's height: 33px. -------------------------------------------------------------------------- */ .bottom-buttons a, .bottom-buttons button, .bottom-buttons a.back, .bottom-buttons a.next, .bottom-buttons button.next, .bottom-buttons .next, .bottom-buttons .next-address, .bottom-buttons .next-email, .bottom-buttons .next-phone, .card-footer .back, .card-footer .skip-btn, .btn-back, .btn-next, .process-forward-btn, .preview-file-btn, .calendar-done-btn, .calendar-clear-btn, .home-btn, .refresh-btn, .btn-add, .login-btn, .back-navigation-btn, .netsuite-external-btn, .add-field-btn, .toggle-btn, .alt-type-btn, .view-alt-btn, .view-relationship, .process-btn, .netsuite-btn, .dashboard-signout-btn, .right-card-box .attributes-sections button, .buttons-section button, .buttons-section .choose, .buttons-section .choose-btn, .buttons-section .reject, .buttons-section .back, .relationship-buttons button, .relationship-buttons .choose, .relationship-buttons .reject, .relationship-buttons .remove-relationship, .options-wrapper button { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: var(--sm-space-2); min-height: 38px; padding: 8px 18px; border: 1px solid transparent; border-radius: var(--sm-radius-control); font-family: inherit; font-size: var(--sm-type-body-size); font-weight: var(--sm-weight-medium); line-height: var(--sm-type-body-leading); text-align: center; text-decoration: none; cursor: pointer; /* HANDOFF.md 2.10: buttons sit flat; depth is the 1px border. This clears .home-btn's 0 4px 6px, .card-footer .back's 0 2px 6px, .login-btn's hover shadow and .process-forward-btn's 0 2px 4px. The focus ring in 5.7 is a later, more specific rule and is not affected. */ box-shadow: none; transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease; } /* #filePreviewModal carries !important on all nine of its .btn-primary properties (home_styles.css:587-597) and on all nine of .btn-secondary's (home_styles.css:570-579). Source order cannot beat !important, so the chassis is repeated here with it, on the same selector so specificity ties and the later file wins. This is the one place where the whole chassis needs !important rather than a single declaration. */ #filePreviewModal .btn-primary, #filePreviewModal .btn-secondary { box-sizing: border-box !important; display: inline-flex !important; /* was inline-block !important */ align-items: center !important; justify-content: center !important; gap: var(--sm-space-2) !important; min-height: 38px !important; padding: 8px 18px !important; border: 1px solid transparent !important; border-radius: var(--sm-radius-control) !important; /* was 6px !important */ font-family: inherit !important; font-size: var(--sm-type-body-size) !important; /* was .875rem !important */ font-weight: var(--sm-weight-medium) !important; /* was 600 !important */ line-height: var(--sm-type-body-leading) !important; text-decoration: none !important; cursor: pointer !important; box-shadow: none !important; transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease !important; } /* -------------------------------------------------------------------------- 5.2 Secondary (outlined) Declared before primary so that where a selector could match both, primary wins on its own specificity rather than on ordering. .bottom-buttons a (0,1,1) is listed here; every "next" variant is (0,2,0) or (0,2,1) and outranks it. -------------------------------------------------------------------------- */ .bottom-buttons a, .bottom-buttons a.back, .card-footer .back, .btn-back, .back-navigation-btn, .netsuite-external-btn, .add-field-btn, .toggle-btn, .alt-type-btn, .process-btn, .netsuite-btn, .right-card-box .attributes-sections button { background-color: var(--sm-surface); /* background-image, not the background shorthand, which would reset the background-color declared beside it. Kept symmetrical with 5.3, where it is what actually removes the gradients. */ background-image: none; border-color: var(--sm-brand); color: var(--sm-brand-strong); } .bottom-buttons a:hover, .bottom-buttons a.back:hover, .card-footer .back:hover, .btn-back:hover, .back-navigation-btn:hover, .netsuite-external-btn:hover, .add-field-btn:hover, .toggle-btn:hover, .alt-type-btn:hover, .process-btn:hover, .netsuite-btn:hover, .right-card-box .attributes-sections button:hover { background-color: var(--sm-brand-wash); border-color: var(--sm-brand); color: var(--sm-brand-strong); } /* -------------------------------------------------------------------------- 5.3 Primary (solid) HANDOFF.md 2.1: the fill is --sm-brand-strong because the user clicks it. -------------------------------------------------------------------------- */ .bottom-buttons button, .bottom-buttons a.next, .bottom-buttons button.next, .bottom-buttons .next, .bottom-buttons .next-address, .bottom-buttons .next-email, .bottom-buttons .next-phone, .card-footer .skip-btn, .btn-next, .process-forward-btn, .preview-file-btn, .calendar-done-btn, .home-btn, .refresh-btn, .btn-add, .login-btn, .view-alt-btn, .view-relationship, .toggle-btn.active, .alt-type-btn.active, .buttons-section .choose, .buttons-section .choose-btn, .relationship-buttons .choose { /* background-image: none is what actually removes the five gradients — .login-btn's linear-gradient(193deg,#60c5c3,#54ccaf,#14c584), .preview-file-btn's and .view-relationship's linear-gradient(90deg,#0AA8A5,#15C685), .view-alt-btn's linear-gradient(90deg,#018ac6,#0069a0) and .toggle-btn.active's linear-gradient(90deg,#0095D9,#007CC7). Setting only background-color leaves the gradient painted on top of it. */ background-color: var(--sm-brand-strong); background-image: none; border-color: var(--sm-brand-strong); color: var(--sm-surface); } .bottom-buttons button:hover, .bottom-buttons a.next:hover, .bottom-buttons button.next:hover, .bottom-buttons .next:hover, .bottom-buttons .next-address:hover, .bottom-buttons .next-email:hover, .bottom-buttons .next-phone:hover, .card-footer .skip-btn:hover, .btn-next:hover, .process-forward-btn:hover, .preview-file-btn:hover, .calendar-done-btn:hover, .home-btn:hover, .refresh-btn:hover, .btn-add:hover, .login-btn:hover, .view-alt-btn:hover, .view-relationship:hover, .toggle-btn.active:hover, .alt-type-btn.active:hover, .buttons-section .choose:hover, .buttons-section .choose-btn:hover, .relationship-buttons .choose:hover { background-color: var(--sm-brand-deep); border-color: var(--sm-brand-deep); color: var(--sm-surface); /* .home-btn:hover lifted by translateY(-1px) and .login-btn:hover by translateY(-2px). HANDOFF.md 3.13 is explicit that a decision state carries no transform; the same reasoning applies to a hover. */ transform: none; box-shadow: none; } #filePreviewModal .btn-primary { background-color: var(--sm-brand-strong) !important; /* was #0284c7 !important */ background-image: none !important; border-color: var(--sm-brand-strong) !important; /* was border: none !important */ color: var(--sm-surface) !important; } #filePreviewModal .btn-primary:hover { background-color: var(--sm-brand-deep) !important; /* was #0369a1 !important */ border-color: var(--sm-brand-deep) !important; color: var(--sm-surface) !important; } /* The pressed state of an interactive surface is --sm-brand-deep (HANDOFF.md 2.1), which is already the hover, so :active only has to cancel the transforms the originals apply. */ .home-btn:active, .login-btn:active, .calendar-clear-btn:active, .close-panel-btn:active { transform: none; } /* -------------------------------------------------------------------------- 5.4 Tertiary (neutral outlined) -------------------------------------------------------------------------- */ .calendar-clear-btn, .dashboard-signout-btn { background-color: var(--sm-surface); background-image: none; border-color: var(--sm-line); color: var(--sm-ink-muted); } .calendar-clear-btn:hover { background-color: var(--sm-surface-sunk); border-color: var(--sm-line); color: var(--sm-ink); } /* Sign Out keeps its danger-coloured hover — it is the one destructive action on the dashboard — but the off-palette #fef2f2 / #fca5a5 / #ef4444 become the danger tokens. */ .dashboard-signout-btn:hover { background-color: var(--sm-danger-tint); border-color: var(--sm-danger-border); } .dashboard-signout-btn:hover svg, .dashboard-signout-btn:hover .signout-btn-text { color: var(--sm-danger-solid); transform: none; } #filePreviewModal .btn-secondary { background-color: var(--sm-surface) !important; /* was #f1f5f9 !important */ background-image: none !important; border-color: var(--sm-line) !important; /* was #cbd5e1 !important */ color: var(--sm-ink-muted) !important; /* was #334155 !important */ } #filePreviewModal .btn-secondary:hover { background-color: var(--sm-surface-sunk) !important; /* was #e2e8f0 !important */ border-color: var(--sm-line) !important; color: var(--sm-ink) !important; } /* -------------------------------------------------------------------------- 5.5 Destructive TASK 3 · DESIGN-BRIEF 3.6 The reject button is red on every screen. Matching .buttons-section .reject solid #fe5959 :342 Tagging .relationship-buttons .reject .relationship-buttons .remove-relationship OUTLINED #0caf9c :381 #0caf9c is --sm-success-mark. HANDOFF.md 4.3: green means completion and nothing else. Both become the canonical solid destructive, so Add/Reject on Tagging now reads exactly as Choose/Reject does on Matching. .options-wrapper button (name_selection:424) is the solid #fe5959 remove control on the selection screens and joins them. .buttons-section .back (matching:352) is solid #fe5959 today; it is grouped here so it keeps its meaning rather than turning blue. No template renders it — see the report. -------------------------------------------------------------------------- */ .buttons-section .reject, .buttons-section .back, .relationship-buttons .reject, .relationship-buttons .remove-relationship, .options-wrapper button { background-color: var(--sm-danger-solid); background-image: none; border-color: var(--sm-danger-solid); color: var(--sm-surface); } .buttons-section .reject:hover, .buttons-section .back:hover, .relationship-buttons .reject:hover, .relationship-buttons .remove-relationship:hover, .options-wrapper button:hover { background-color: var(--sm-danger-pressed); border-color: var(--sm-danger-pressed); color: var(--sm-surface); } /* The Choose and Reject labels carry an inline style="font-size: 15px" in matching.html. Templates are not edited on this branch, so !important is the only way to bring them to the 14px body role. */ .buttons-section .choose-btn p, .buttons-section .reject p, .buttons-section .back p { font-size: var(--sm-type-body-size) !important; font-weight: var(--sm-weight-medium); margin: 0; } /* -------------------------------------------------------------------------- 5.6 Disabled HANDOFF.md 3.2 "Border --sm-line, text --sm-ink-faint, cursor: not-allowed. Not opacity on a saturated fill." Opacity over a blue fill gives a washed blue that still reads as available; a neutral outline does not. -------------------------------------------------------------------------- */ .bottom-buttons button:disabled, .card-footer .skip-btn:disabled, .btn-next:disabled, .calendar-done-btn:disabled, .refresh-btn:disabled, .btn-add:disabled, .login-btn:disabled, .toggle-btn:disabled, .alt-type-btn:disabled, .buttons-section button:disabled, .relationship-buttons button:disabled, .options-wrapper button:disabled, .jump-page-btn:disabled, .page-nav-btn:disabled, .page-number-btn:disabled, .disabled-btn { background-color: var(--sm-surface); background-image: none; border-color: var(--sm-line); color: var(--sm-ink-faint); /* replaces opacity: 0.6 on .refresh-btn:disabled and opacity: 0.4 on .disabled-btn */ opacity: 1; box-shadow: none; cursor: not-allowed; } /* .disabled-btn also carries pointer-events: none, which is kept — it is what stops a dead pagination arrow being clickable. */ .disabled-btn { pointer-events: none; } /* -------------------------------------------------------------------------- 5.7 Focus HANDOFF.md 1.5 · 3.7 --sm-focus on every interactive control. Only the login page has a focus ring today. :focus-visible, so a mouse click does not leave a ring behind. -------------------------------------------------------------------------- */ .bottom-buttons a:focus-visible, .bottom-buttons button:focus-visible, .card-footer .back:focus-visible, .card-footer .skip-btn:focus-visible, .btn-back:focus-visible, .btn-next:focus-visible, .process-forward-btn:focus-visible, .preview-file-btn:focus-visible, .calendar-done-btn:focus-visible, .calendar-clear-btn:focus-visible, .home-btn:focus-visible, .refresh-btn:focus-visible, .btn-add:focus-visible, .login-btn:focus-visible, .back-navigation-btn:focus-visible, .netsuite-external-btn:focus-visible, .add-field-btn:focus-visible, .toggle-btn:focus-visible, .alt-type-btn:focus-visible, .view-alt-btn:focus-visible, .view-relationship:focus-visible, .process-btn:focus-visible, .netsuite-btn:focus-visible, .dashboard-signout-btn:focus-visible, .right-card-box .attributes-sections button:focus-visible, .buttons-section button:focus-visible, .relationship-buttons button:focus-visible, .options-wrapper button:focus-visible, .jump-page-btn:focus-visible, .page-nav-btn:focus-visible, .page-number-btn:focus-visible, .quick-pill-btn:focus-visible, .scroll-btn:focus-visible, .scroll-btn1:focus-visible, .scroll-btn2:focus-visible, .navigation-buttons button:focus-visible, .close-panel-btn:focus-visible, .cancel-upload-btn:focus-visible, .tab-nav-link:focus-visible, .relation-tab-btn:focus-visible, .dropdown-trigger:focus-visible, .date-dropdown-btn:focus-visible, .action-external-trigger:focus-visible, .sortable-column-header:focus-visible, /* The sidebar toggle is the one focusable control on every page that had neither a hover nor a focus rule. It belongs to the sidebar component (HANDOFF.md 3.18), so only the ring is added here. */ .open-left-bar:focus-visible { outline: none; box-shadow: var(--sm-focus); border-color: var(--sm-brand); } /* Session 11. A keyboard sweep of all 43 states (Tab through every focus stop at 1440 and 390, transitions off) found the controls 5.7 did not list: the list pages' search field, whose only focus state was a 1.5px border change; the login fields, whose ring was the retired teal rgba(72,201,176,.2) (login_styles.css:74, (0,2,1), so repeated with a class to outrank it); and the sidebar, logo, metric-tile, dashboard and calendar links and inputs plus the preview modal's table scroller, which fell back to the browser's own outline. All take the one ring. */ .search-wrapper input:focus-visible, .login-container input[type="email"]:focus, .login-container input[type="password"]:focus, .login-container input[type="text"]:focus, .export-modal-overlay input:focus-visible, .icon-link-wrapper:focus-visible, .logo-link:focus-visible, .metric-card:focus-visible, a.gradient-colored:focus-visible, .modal-container .table-wrapper:focus-visible { outline: none; box-shadow: var(--sm-focus); border-color: var(--sm-brand); } /* #filePreviewModal's box-shadow-adjacent properties are all !important, so the ring has to match or it never paints. */ #filePreviewModal .btn-primary:focus-visible, #filePreviewModal .btn-secondary:focus-visible { outline: none !important; box-shadow: var(--sm-focus) !important; border-color: var(--sm-brand) !important; } /* -------------------------------------------------------------------------- 5.8 Small variant HANDOFF.md 3.2 30px tall, 0 12px, 13px. The Go-to-page submit on both list pages (customer_styles.css:864 and relationship_list_styles.css:189 — the same button defined twice, identically, in two files). -------------------------------------------------------------------------- */ .jump-page-btn { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 0 12px; border: 1px solid var(--sm-brand-strong); border-radius: var(--sm-radius-control); /* was 6px */ background-color: var(--sm-brand-strong); /* was #018ac6 — white text at 3.8:1 */ background-image: none; color: var(--sm-surface); font-family: inherit; font-size: var(--sm-type-small-size); /* was 12px, below the 13px floor */ font-weight: var(--sm-weight-medium); /* was 600 */ line-height: var(--sm-type-small-leading); cursor: pointer; transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease; } .jump-page-btn:hover { background-color: var(--sm-brand-deep); border-color: var(--sm-brand-deep); } /* -------------------------------------------------------------------------- 5.9 Icon buttons and deck pagers HANDOFF.md 3.3 32px square, outlined, --sm-radius-pill for pagers and --sm-radius-control for close buttons, 44px minimum hit area via padding. PRESERVE THE CLASS NAMES — .scroll-btn, .scroll-btn1, .scroll-btn2 and .navigation-buttons button are read by the deck scripts (CLAUDE.md 6, HANDOFF.md 3.3, 6.4). Restyled, never renamed. These were 28px and 22px solid --sm-brand circles carrying a chevron PNG. Outlining them on white also fixes the chevron: the assets are dark glyphs that were being shown against a saturated blue fill. -------------------------------------------------------------------------- */ .scroll-btn, .scroll-btn1, .scroll-btn2, .navigation-buttons button { position: relative; box-sizing: border-box; width: 32px; height: 32px; min-height: 32px; padding: 0; border: 1px solid var(--sm-line-strong); border-radius: var(--sm-radius-pill); background-color: var(--sm-surface); background-image: none; color: var(--sm-brand-strong); box-shadow: none; cursor: pointer; transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease; } .scroll-btn:hover, .scroll-btn1:hover, .scroll-btn2:hover, .navigation-buttons button:hover { background-color: var(--sm-brand-wash); border-color: var(--sm-brand); color: var(--sm-brand-strong); } /* 44px minimum hit area without growing the 32px visual box. The pseudo-element is a child of the button, so a click on it still targets the button and the deck scripts see the same event. */ .scroll-btn::after, .scroll-btn1::after, .scroll-btn2::after, .navigation-buttons button::after { content: ""; position: absolute; top: -6px; right: -6px; bottom: -6px; left: -6px; } /* The deck pagers sit 10px apart, which would leave two 44px hit areas overlapping by 2px. One step of the space scale clears it exactly. (16.2 later widens it to 16px; this 12px is the fallback it overrides.) */ .right-card-box .navigation-buttons { gap: var(--sm-space-3); } /* .scroll-btn2.disabled and its siblings set background-color and color with !important (name_selection_styles.css:260-261), so the disabled treatment needs it too. Every other declaration here wins on source order. */ .scroll-btn.disabled, .scroll-btn1.disabled, .scroll-btn2.disabled, .navigation-buttons button.disabled { background-color: var(--sm-surface) !important; /* was #ccc !important */ color: var(--sm-ink-faint) !important; /* was #777 !important */ border-color: var(--sm-line); opacity: 1; /* was 0.6 / 0.4 */ cursor: not-allowed; pointer-events: none; } /* Close buttons take --sm-radius-control, not the pill. */ .close-panel-btn { box-sizing: border-box; width: 32px; height: 32px; padding: 0; border: 1px solid var(--sm-line); border-radius: var(--sm-radius-control); /* was 50% */ background: var(--sm-surface); /* was #f3f4f6 */ color: var(--sm-ink-muted); cursor: pointer; transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease; } .close-panel-btn:hover { background: var(--sm-surface-sunk); border-color: var(--sm-line-strong); color: var(--sm-ink); transform: none; /* was scale(1.08) */ } /* HANDOFF.md 2.12: the icon takes its colour from the parent. */ .close-panel-btn svg { color: currentColor; transition: none; } .close-panel-btn:hover svg { color: currentColor; transform: none; /* was rotate(90deg) */ } /* The staged-file dismiss control on the dashboard. */ .cancel-upload-btn { box-sizing: border-box; width: 32px; height: 32px; border: 1px solid var(--sm-line); border-radius: var(--sm-radius-pill); /* was 50% */ background: var(--sm-surface); /* was #e5e7eb */ color: var(--sm-ink-muted); font-size: var(--sm-type-subtitle-size); /* was 1.1rem */ line-height: 1; cursor: pointer; transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease; } .cancel-upload-btn:hover { background: var(--sm-danger-tint); border-color: var(--sm-danger-border); color: var(--sm-danger-solid); } /* -------------------------------------------------------------------------- 5.10 Pagination controls HANDOFF.md 3.11 34px, --sm-radius-control, active page --sm-brand-strong. The active page is #10ba90 !important today — a green that means "completion" everywhere else in this system (HANDOFF.md 4.3) sitting on a control the user clicks. -------------------------------------------------------------------------- */ .page-nav-btn, .page-number-btn { border-color: var(--sm-line); border-radius: var(--sm-radius-control); background-color: var(--sm-surface); color: var(--sm-ink-muted); font-size: var(--sm-type-small-size); font-weight: var(--sm-weight-medium); box-shadow: none; transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease; } .page-nav-btn:hover, .page-number-btn:hover { background-color: var(--sm-brand-wash); border-color: var(--sm-brand); color: var(--sm-brand-strong); } /* !important on all three: customer_styles.css:434-436 declares them that way. */ .active-page { background-color: var(--sm-brand-strong) !important; border-color: var(--sm-brand-strong) !important; color: var(--sm-surface) !important; } /* -------------------------------------------------------------------------- 5.11 The remaining load-bearing button names CLAUDE.md 6 Restyled onto tokens, never renamed. -------------------------------------------------------------------------- */ /* .quick-pill-btn — 11px/700 is below the 13px reading floor (HANDOFF.md 2.9) and #f3f4f6 + #4b5563 are already the pending neutrals. */ .quick-pill-btn { border: 1px solid transparent; border-radius: var(--sm-radius-pill); /* was 20px */ background-color: var(--sm-surface-sunk); color: var(--sm-ink-muted); font-size: var(--sm-type-small-size); /* was 11px */ font-weight: var(--sm-weight-medium); /* was 700 */ line-height: var(--sm-type-small-leading); transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease; } .quick-pill-btn:hover { background-color: var(--sm-brand-wash); border-color: var(--sm-brand); color: var(--sm-brand-strong); } /* !important: base_styles.css:714-715 declares background-color and color that way. --sm-brand-deep for the label, not --sm-brand: the selected pill is a tinted classification chip (HANDOFF.md 2.4), and #018ac6 on #e0f2fe is the weaker of the two pairs. The date-range presets (17) carry this class too, so these !important values also fix their active colours: change both together. */ .quick-pill-btn.pill-active { background-color: var(--sm-brand-tint) !important; color: var(--sm-brand-deep) !important; border-color: var(--sm-brand); box-shadow: none; } /* Session 11's wrap for the export calendar's pill row (#55) is gone with the row: item 22's date-range panel lays the three presets out as an equal 3-column grid (section 17). */ /* .dropdown-trigger and .date-dropdown-btn — HANDOFF.md 3.9: 38px, --sm-radius-control, 1px --sm-line-strong. */ .dropdown-trigger { box-sizing: border-box; min-height: 38px; padding: 8px 16px; border: 1px solid var(--sm-line-strong); border-radius: var(--sm-radius-control); /* was 12px */ background: var(--sm-surface); color: var(--sm-ink-muted); font-size: var(--sm-type-body-size); font-weight: var(--sm-weight-medium); box-shadow: none; transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease; } .dropdown-trigger:hover { border-color: var(--sm-brand); color: var(--sm-ink); } .date-dropdown-btn { border: 1px solid var(--sm-line-strong); /* was #cbd5e1 */ border-radius: var(--sm-radius-control); background: var(--sm-surface); /* was #f8fafc */ color: var(--sm-ink-muted); /* was #334155 */ font-size: var(--sm-type-small-size); font-weight: var(--sm-weight-medium); } .date-dropdown-btn:hover { border-color: var(--sm-brand); background: var(--sm-brand-wash); color: var(--sm-brand-strong); } /* .action-external-trigger is #10ba90 — green, which HANDOFF.md 4.3 reserves for completion. It is a link out to the source system, so it is a link: --sm-brand-strong. */ .action-external-trigger { color: var(--sm-brand-strong); } .action-external-trigger:hover { color: var(--sm-brand-deep); } /* .tab-nav-link and .relation-tab-btn are tabs, not buttons, and their 3px underline is already --sm-brand, which is correct (HANDOFF.md 1.1). Only the resting colour moves: .relation-tab-btn is #9ca3af, and HANDOFF.md 2.8 is explicit that --sm-ink-faint is never text a user reads. */ .relation-tab-btn { color: var(--sm-ink-muted); font-size: var(--sm-type-body-size); /* was 15px */ font-weight: var(--sm-weight-semibold); border-radius: var(--sm-radius-control); } .tab-nav-link { color: var(--sm-ink-muted); border-radius: var(--sm-radius-control); } .tab-nav-link:hover, .tab-nav-link.active-tab, .relation-tab-btn:hover, .relation-tab-btn.active-tab { color: var(--sm-brand-strong); } .tab-nav-link.active-tab::after, .relation-tab-btn.active-tab::after { background-color: var(--sm-brand); height: 3px; /* was 3.5px */ } /* -------------------------------------------------------------------------- 5.12 The wizard footer TASK 4 .bottom-buttons is defined in four stylesheets, for four consecutive screens of one flow, and rendered four different ways: name_selection:267 Back outlined #018ac6 Next solid #018ac6 radius 12px, 16px, min-width 100px review:251 Back outlined #0caf9c Done solid #008cdd radius 12px, 15px, width: 94px; height: 33px tagging:194 Back outlined #018ac6 Next solid #018ac6 radius 12px, font size inherited matching:230 Back outlined #799faf Next green gradient (no template renders it — see the report) 5.1–5.3 already give all four the same fill, border, radius, padding, size and weight. This section removes the three things that would still make Review differ: its fixed 94x33 box, Name Selection's min-width, and the row's own gap. HANDOFF.md 2.11 names this rule directly — "the width: 94px; height: 33px on Review's wizard buttons goes". Content-width is what makes the two screens match, not a shared fixed width. -------------------------------------------------------------------------- */ .bottom-buttons a, .bottom-buttons button, .bottom-buttons a.back, .bottom-buttons a.next, .bottom-buttons button.next, .bottom-buttons .next, .bottom-buttons .next-address, .bottom-buttons .next-email, .bottom-buttons .next-phone { width: auto; /* was 94px on Review */ height: auto; /* was 33px on Review; min-height: 38px from 5.1 stands */ min-width: 0; /* was 100px on Name Selection */ max-width: 100%; } /* The row's own spacing. Only the gap is unified: Tagging's .bottom-buttons is a right-aligned column with margin-top: 38%, which is a layout defect (HANDOFF.md 6.13) but not a button one. No selector distinguishes that container from the other three without a template edit, so it is logged in docs/DEFERRED-FIXES.md rather than changed here. */ .bottom-buttons { gap: var(--sm-space-4); } /* Form wrappers must not introduce a box of their own. Review already does this; Name Selection needs it, because its Next lives inside a
too. */ .bottom-buttons form { margin: 0; display: inline-flex; } /* -------------------------------------------------------------------------- 5.13 The Choose button inside a chosen card matching_styles.css:364 is (0,3,0) and outranks 5.3, so the Choose button on a selected card stayed Bootstrap #0056b3 and kept transform: scale(1.05), which made it 40px tall next to a 38px Reject. Chosen is a pressed interactive surface, so HANDOFF.md 2.1 gives it --sm-brand-deep; HANDOFF.md 3.13 is explicit that the chosen state carries no transform and no scale. The card's own .selected-card treatment is a decision state, not a button: 13.1 (session 12, DEFERRED-FIXES #18). Only the button is touched here. -------------------------------------------------------------------------- */ .selected-card .buttons-section .choose-btn { background-color: var(--sm-brand-deep); background-image: none; border-color: var(--sm-brand-deep); color: var(--sm-surface); transform: none; } /* ========================================================================== 6. THE DATA TABLES HANDOFF.md 3.6, 3.10, 3.11 BRIEF 3.9, 8.1, 8.2 -------------------------------------------------------------------------- Four pages, five table shapes: .customers-table-container customer list .details-table-panel table customer detail, five tab panels .details-table-panel table relationship detail, one panel .master-relationship-table-container relationship list, grouped tbodies .relationship-group-card ...one per group MEASURED BEFORE THIS SECTION (43 preview pages x 6 widths, iframe viewport, documentElement.scrollWidth vs clientWidth): the customer-list table needs 1061px and its container is overflow:hidden, so at 1100 / 900 / 800 / 768 / 390 its rightmost columns were unreachable -- 21 page/width combinations across customer-list, -filtered, -empty, -calendar-popover and loading-overlay-active. relationship-detail needed 1159px at 900 and overflowed the PAGE by 102-704px at 1100 and below, and the relationship list pushed its own content to x = -121px at 390, where centring makes left overflow unrecoverable (DEFERRED-FIXES #14). Only three rules in the whole codebase enable horizontal scrolling, and none of them is on a table. ========================================================================== */ /* -------------------------------------------------------------------------- 6.1 Two-layer overflow HANDOFF.md 3.10, trap 6.12 overflow: hidden is what gives the container its radius; it is also what makes a column that does not fit unreachable. The handoff asks for both: hidden outer, overflow-x: auto inner. THERE IS NO INNER WRAPPER IN THE MARKUP and CSS cannot create one, so the two behaviours are put on the one element that exists: overflow-x: auto the columns are reachable overflow-y: hidden the box still clips, so the radius still cuts That is the same result a wrapper would give. Adding a real wrapper div is a template edit, and the only template edit this session authorises is the identifier (6.2). It is not needed for the behaviour. WHY overflow-y IS DECLARED EXPLICITLY: overflow-x: auto alone computes overflow-y to auto, not visible, and any absolutely-positioned descendant that overhangs would then add a vertical scrollbar rather than being clipped. Both branches clip; only one of them also puts a scrollbar on a table that does not need one. CONSEQUENCE FOR POPOVERS INSIDE A CELL: a scroll container clips them. Two live inside these tables -- the identifier (6.2) and customer detail's date dropdown. The identifier opens UPWARDS into the header band, so it is always inside the box. The date dropdown opens downwards and cannot; 6.1.1 handles it. -------------------------------------------------------------------------- */ .customers-table-container { overflow-x: auto; overflow-y: hidden; border-radius: var(--sm-radius-card); /* was 20px */ border-color: var(--sm-line); box-shadow: var(--sm-e1); /* resting surface, HANDOFF.md 2.10 */ } .details-table-panel { overflow-x: auto; overflow-y: hidden; } /* 6.1.1 The one popover a scroll container would break. customer_detail.html renders .date-dropdown-menu absolutely below its button inside a Date cell; on the lower rows it would now be clipped. While one is open the panel stops clipping. Progressive enhancement: a browser without :has() keeps the scroller and clips the open menu, which is what every other in-cell popover does today. */ .details-table-panel:has(.date-dropdown-container.menu-open) { overflow: visible; } /* The relationship list has no scroll container at all: its table is 505-518px wide at 390 inside a 310px boundary, and .page-center-boundary centres it, which is what puts the page title at x = -121 (DEFERRED-FIXES #14). Giving the table its own scroller sends the whole overflow one way and makes it reachable. The 4px block padding is room for the group cards' shadow, which overflow-y: hidden would otherwise cut. */ .master-relationship-table-container { overflow-x: auto; overflow-y: hidden; padding-block: var(--sm-space-1); } /* The four filter controls plus the search field need ~680px in one row (BRIEF 8.2) and are the reason the customer list still overflowed at 390 with the table contained. They wrap instead. */ .unified-filter-group { flex-wrap: wrap; gap: var(--sm-space-2); } /* -------------------------------------------------------------------------- 6.2 The identifier — the UUID out of column one HANDOFF.md 3.6 · BRIEF 8.1 -------------------------------------------------------------------------- A 36-character UUID was the first column of the customer list, both row levels of the relationship list, the relationship-detail member table and the relationship tab of customer detail, plus the .card-id-tag on both detail headers. It is the widest cell in every table it appears in and it dictated the layout of all four pages. It now renders inside the row's actions affordance as a native
: a constant-width "ID" chip that opens a popover. No JavaScript. THE CHIP CARRIES NO PART OF THE UUID, deliberately. HANDOFF.md 3.6 gives the collapsed form as "first 8 chars + ellipsis", but the governing constraint on this task is that removing the identifier later must reflow nothing, and an 8-character mono chip is ~92px of column sized by the value. A two-letter chip is ~34px and is the same width whatever the identifier is -- or whether it exists at all. Deleting the four-line
from each template is then the whole change: no colspan, no sort index, no width, no other rule. THE POPOVER OPENS UPWARDS (bottom: 100% + 4px) for one reason: 6.1 makes every one of these containers clip vertically, and the header band above the first row is 40px, which is more than the 32px popover. Downwards, the last row's popover would be cut by the container. user-select: all makes one click select the whole UUID, which is what the column was for. HANDOFF.md 3.6 also asks for a COPY button; that needs clipboard JS, which this session is not authorised to add -- logged. -------------------------------------------------------------------------- */ .row-identifier { position: relative; display: inline-block; vertical-align: middle; margin-left: var(--sm-space-2); } .row-identifier-toggle { display: inline-flex; align-items: center; justify-content: center; /* 20px, not the 22 it wants to be: the chip sits on the table row's line box, so anything taller than the body role's 20px leading raises every row it appears in. 6.3 is 44px rows and this is inside them. */ height: 20px; padding: 0 var(--sm-space-2); border: 1px solid var(--sm-line); border-radius: var(--sm-radius-control); background-color: var(--sm-surface); color: var(--sm-ink-quiet); /* micro: an eyebrow label, never a sentence. HANDOFF.md 2.9 allows 11px here and nowhere a steward reads prose. */ font-size: var(--sm-type-micro-size); line-height: var(--sm-type-micro-leading); font-weight: var(--sm-type-micro-weight); letter-spacing: var(--sm-type-micro-tracking); text-transform: var(--sm-type-micro-transform); cursor: pointer; user-select: none; list-style: none; /* drop the disclosure triangle */ transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease; } .row-identifier-toggle::-webkit-details-marker { display: none; } .row-identifier-toggle::marker { content: ''; } .row-identifier-toggle:hover { background-color: var(--sm-brand-wash); border-color: var(--sm-brand); color: var(--sm-brand-strong); } /* Every interactive control gets the ring. HANDOFF.md 1.5. */ .row-identifier-toggle:focus-visible { outline: none; border-color: var(--sm-brand); box-shadow: var(--sm-focus); } .row-identifier[open] > .row-identifier-toggle { background-color: var(--sm-brand-tint); border-color: var(--sm-brand); color: var(--sm-brand-deep); } /* The value, wherever it renders: mono, 13px, ink. HANDOFF.md 1.2. */ .row-identifier-value { font-family: var(--sm-type-mono-family); font-size: var(--sm-type-mono-size); line-height: var(--sm-type-mono-leading); font-weight: var(--sm-type-mono-weight); color: var(--sm-ink); } /* ...and inside a row, as a popover that takes no space in the row. */ .row-identifier > .row-identifier-value { position: absolute; bottom: calc(100% + var(--sm-space-1)); right: 0; z-index: 60; display: block; white-space: nowrap; padding: 6px 10px; background-color: var(--sm-surface); border: 1px solid var(--sm-line); border-radius: var(--sm-radius-control); box-shadow: var(--sm-e2); /* it floats, so it gets a shadow */ user-select: all; -webkit-user-select: all; } /* The expanded form on the two detail headers. Already position: absolute in customer_styles.css:467, so it never took part in the layout and does not now. 11px/700 grey on a cream border becomes the canonical identifier box. */ .card-id-tag { font-size: var(--sm-type-small-size); line-height: var(--sm-type-small-leading); font-weight: var(--sm-weight-regular); color: var(--sm-ink-quiet); background-color: var(--sm-surface); border-color: var(--sm-line); border-radius: var(--sm-radius-control); padding: var(--sm-space-1) var(--sm-space-3); } /* -------------------------------------------------------------------------- 6.3 Density — 44px rows HANDOFF.md 1.3, 3.10 · TASK 4 14px/400 --sm-ink-body on 12px vertical / 20px horizontal padding: 12 + 20 (the body role's own line height) + 12 = 44px. Today it is 14px text on 15/20, 16/20, 14/20 and 14/24 paddings, giving 46-50px rows. 20px is a component size, not a space step -- tokens.css section 8 says so; only the vertical 12px is on the scale. -------------------------------------------------------------------------- */ .customers-table-container tbody td, .details-table-panel table tbody td, .relationship-group-card td { padding: var(--sm-space-3) 20px; font-size: var(--sm-type-body-size); line-height: var(--sm-type-body-leading); font-weight: var(--sm-type-body-weight); color: var(--sm-ink-body); border-bottom-color: var(--sm-line); } /* Column headers are micro on the brand tint. HANDOFF.md 3.10. Replaces #e6f2f7 (customer pages) and #3DAFED33 (relationship list). */ .customers-table-container thead th, .details-table-panel table thead th, .master-relationship-table-container table thead th { background-color: var(--sm-brand-tint); color: var(--sm-ink-muted); font-size: var(--sm-type-micro-size); line-height: var(--sm-type-micro-leading); font-weight: var(--sm-type-micro-weight); letter-spacing: var(--sm-type-micro-tracking); text-transform: var(--sm-type-micro-transform); padding: var(--sm-space-3) 20px; border-bottom: 1px solid var(--sm-line); } /* Row hover, no zebra. HANDOFF.md 4.9. */ .customers-table-container tbody tr:hover, .details-table-panel table tbody tr:hover { background-color: var(--sm-surface-sunk); } .customers-table-container tbody tr { border-bottom-color: var(--sm-line); } /* The Name column leads and is body-strong. HANDOFF.md 1.2, 3.10. */ .bold-text-cell { font-weight: var(--sm-type-body-strong-weight); color: var(--sm-ink); } /* An em-dash empty cell and a "no records" sentence are not the same thing. #9ca3af is legal for the first and fails at 2.5:1 for the second (HANDOFF.md 2.8), and both of these are sentences. Session 11: the rule that stood here (--sm-ink-quiet, weight 400) was superseded in full by 8.6, which restyles the same two selectors later and with !important on every property (--sm-ink-muted, weight 500). The two disagreed and 8.6 always won, so this one was dead and has been removed. The empty state has one owner: 8.6. */ /* -------------------------------------------------------------------------- 6.4 The relationship list's grouped tbodies Each group is a , queried by the sort engine as tbody.relationship-group-card and toggled by .active-group-tab. Neither name is touched here -- only the card look: a 14px radius and a 15px-blur shadow become the card radius and --sm-e1 plus a 1px ring, because depth is carried by the border (HANDOFF.md 2.10). The ring is a shadow rather than a border because border-collapse is separate on this table and a border would not paint. -------------------------------------------------------------------------- */ .relationship-group-card { border-radius: var(--sm-radius-card); box-shadow: var(--sm-e1), 0 0 0 1px var(--sm-line); } .relationship-group-card tr:first-child td:first-child { border-top-left-radius: var(--sm-radius-card); } .relationship-group-card tr:first-child td:last-child { border-top-right-radius: var(--sm-radius-card); } .relationship-group-card tr:last-child td:first-child { border-bottom-left-radius: var(--sm-radius-card); } .relationship-group-card tr:last-child td:last-child { border-bottom-right-radius: var(--sm-radius-card); } /* The cells carry their own background, so the hover has to be on the cell. */ .relationship-group-card tr:hover td { background-color: var(--sm-surface-sunk); } /* Parent rows are the one place weight 700 is allowed outside the logotype (HANDOFF.md 1.2). 18px is not a role; body-strong's size keeps the row at 44px and the weight still separates parent from child. */ .parent-title-bold { font-size: var(--sm-type-body-strong-size); line-height: var(--sm-type-body-strong-leading); font-weight: var(--sm-weight-bold); color: var(--sm-ink); } /* The child indent was padding-left: 80px on a cell whose own padding is 20px. 24px of indent still reads as nesting and gives the column back 36px in a table that now has to fit. */ .child-name-muted { /* !important: this selector is (0,1,0) and .relationship-group-card td is (0,1,1), so it would otherwise lose the padding it is trying to set. */ padding-left: calc(20px + var(--sm-space-5)) !important; font-size: var(--sm-type-body-size); line-height: var(--sm-type-body-leading); font-weight: var(--sm-weight-regular); color: var(--sm-ink-muted) !important; /* :131 declares it !important */ } .master-relationship-table-container table thead th:first-child { border-top-left-radius: var(--sm-radius-card); } .master-relationship-table-container table thead th:last-child { border-top-right-radius: var(--sm-radius-card); } /* -------------------------------------------------------------------------- 6.5 Sort affordance data-column-index is positional and the ID column left, so every index shifted by one; that is a template change and it is in the same commit (HANDOFF.md 6.5). Only the colours are here. -------------------------------------------------------------------------- */ /* #d8eaf1 !important on a header that is now --sm-brand-tint. There is no darker brand tint in the system, so the hover lifts rather than deepens: --sm-brand-wash is the palette's lighter brand fill. */ .sortable-column-header:hover { background-color: var(--sm-brand-wash) !important; } .sort-arrows-indicator { color: var(--sm-ink-faint); /* an inert glyph, not read text */ } /* #10ba90 -- green means completion and nothing else (HANDOFF.md 4.3). A sort direction is an indicator, and indicators are --sm-brand (2.2). */ .sort-arrows-indicator .active-arrow { color: var(--sm-brand) !important; /* :810 declares it !important */ font-weight: var(--sm-weight-semibold); } /* -------------------------------------------------------------------------- 6.6 The profile card's field grid DEFERRED-FIXES #13 · HANDOFF.md 2.11 The five customer-detail states overflowed by 89-110px at 800 and by 41px at 768, with span.field-value as the rightmost element. The cause is a fixed two-track grid (minmax(180px,1fr) + minmax(240px,1.2fr) + a 4rem gutter) whose cells are flex rows with a 130px fixed label and a value that cannot shrink, because a flex item's automatic minimum size is its longest word -- and the longest word here is a 58-character email address. minmax(0,...) lets the tracks shrink, min-width: 0 lets the value shrink, and below 900px the two columns become one and the label sits above its value rather than beside it. Nothing is sized to a string (HANDOFF.md 2.11). -------------------------------------------------------------------------- */ .meta-field-columns-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sm-space-6); row-gap: var(--sm-space-3); } .meta-item-cell { align-items: baseline; min-width: 0; font-size: var(--sm-type-body-size); line-height: var(--sm-type-body-leading); } .meta-item-cell .field-label { color: var(--sm-ink-muted); /* was #9ca3af — a label, not a placeholder */ font-weight: var(--sm-weight-regular); } .meta-item-cell .field-value { min-width: 0; overflow-wrap: anywhere; color: var(--sm-ink); font-weight: var(--sm-weight-semibold); } @media (max-width: 900px) { .meta-field-columns-grid { grid-template-columns: minmax(0, 1fr); } .meta-item-cell { flex-direction: column; align-items: flex-start; } .meta-item-cell .field-label { width: auto; } } /* -------------------------------------------------------------------------- 6.7 The pagination bar HANDOFF.md 3.11 The controls themselves were tokenised in 5.10. What is left is the rest of the bar: the entries count, the ellipsis and the Go-to field, all still on the retired slate scale, plus the bar's own behaviour when the page is narrow. The window ORDER (first · … · current-1 · current · current+1 · … · last, HANDOFF.md 2.13) is not reachable from here -- see the report and DEFERRED-FIXES #20. -------------------------------------------------------------------------- */ .customer-list-footer-pagination-bar { flex-wrap: wrap; gap: var(--sm-space-3); margin-top: var(--sm-space-4); margin-bottom: var(--sm-space-4); } /* #9ca3af at 14px is body text at 2.5:1. HANDOFF.md 2.8. */ .footer-entries-info-text { font-size: var(--sm-type-small-size); line-height: var(--sm-type-small-leading); font-weight: var(--sm-weight-regular); color: var(--sm-ink-quiet); } /* "Ellipses are not buttons" — HANDOFF.md 2.13. It stays text. */ .pagination-ellipsis-break { font-size: var(--sm-type-small-size); font-weight: var(--sm-weight-regular); color: var(--sm-ink-quiet); } .jump-to-page-wrapper { border-color: var(--sm-line); border-radius: var(--sm-radius-control); box-shadow: none; gap: var(--sm-space-2); } .jump-label { font-size: var(--sm-type-small-size); font-weight: var(--sm-weight-regular); color: var(--sm-ink-muted); } .jump-page-input { border-color: var(--sm-line-strong); border-radius: var(--sm-radius-control); color: var(--sm-ink); font-size: var(--sm-type-small-size); font-weight: var(--sm-weight-regular); } .jump-page-input:focus { border-color: var(--sm-brand); box-shadow: var(--sm-focus); } /* Disabled is a border and a faint label, never opacity on a fill. HANDOFF.md 3.2. This repeats 5.6 on purpose -- do not delete it as a duplicate (checked in session 11). The dead pager arrow is .page-nav-btn.disabled-btn, and 5.10's .page-nav-btn sits between 5.6 and here at the same (0,1,0), so without this rule 5.10's white fill and --sm-ink-muted label win and the disabled arrow reads as live. */ .disabled-btn { opacity: 1; border-color: var(--sm-line); background-color: var(--sm-surface); color: var(--sm-ink-faint); } /* -------------------------------------------------------------------------- 6.8 Which way the identifier popover opens The popover is anchored to the chip, and the chip sits in whichever cell the template put it in. In the four row-level tables that is the actions cell, which is the LAST column, so the popover has to grow leftwards or it leaves the table. On customer detail's relationship tab there is no actions column and the chip sits in the name cell, where the mirror is true: anchored right, it grew past the left edge of the viewport (measured at x = -104 at 390px). Anchor follows position. -------------------------------------------------------------------------- */ .row-identifier > .row-identifier-value { left: 0; right: auto; } td:last-child .row-identifier > .row-identifier-value { left: auto; right: 0; } /* -------------------------------------------------------------------------- 6.9 The furniture around the tables at narrow widths -------------------------------------------------------------------------- Putting the tables in scroll containers took the four pages' overflow down to the point where the remaining intrinsic minimum is no longer the table: it is the single-row flex bars around it. Measured at 390px, with the tables already contained: .pagination-suite-container 413px both list pages .relationship-tabs-bar ~510px relationship list (3 tab labels) .tabs-nav-list-wrapper ~500px customer detail (5 tab labels) .unified-filter-group ~680px customer list (4 filters + search) None of them can shrink, so .page-center-boundary centres a child wider than itself and splits the overflow both ways -- which is what puts the relationship list's own page title at x = -121 and makes the left half unreachable (DEFERRED-FIXES #14). A row that wraps has no intrinsic minimum beyond its widest single item. -------------------------------------------------------------------------- */ .pagination-suite-container { flex-wrap: wrap; gap: var(--sm-space-3); } .relationship-tabs-bar { flex-wrap: wrap; row-gap: var(--sm-space-2); } .tabs-header-action-row { flex-wrap: wrap; gap: var(--sm-space-3); } .tabs-nav-list-wrapper { flex-wrap: wrap; row-gap: var(--sm-space-2); } .relationship-page-header, .header-actions-flex-wrapper { flex-wrap: wrap; gap: var(--sm-space-3); } /* Below 768 the four filter dropdowns take a row each. Not for the width -- 6.1 already wraps them -- but for their MENUS: .dropdown-menu-content is anchored right: 0 to its trigger, and .calendar-window-frame is a fixed 290px, so a trigger sitting at x = 192 put the calendar's left edge at x = -98, off the screen with no way to scroll to it. Against a full-width trigger a right-anchored 290px panel always lands inside the viewport. */ @media (max-width: 768px) { .unified-filter-group .custom-dropdown { flex: 1 1 100%; } .unified-filter-group .dropdown-trigger { width: 100%; justify-content: space-between; } } /* -------------------------------------------------------------------------- 6.10 The profile card below 768 The last 8px of overflow on the two detail pages at 390. The card is a flex row of a 110px avatar, a 2.5rem gap and an info block, and the info block's automatic minimum size is the longest word in the customer's display name. Measured: the block resolved to 160px inside a 97px slot. -------------------------------------------------------------------------- */ @media (max-width: 768px) { .profile-summary-card { padding: var(--sm-space-4); } .card-profile-split-wrapper { gap: var(--sm-space-4); } .profile-info-grid-block { min-width: 0; } .customer-full-display-name { overflow-wrap: anywhere; } } /* -------------------------------------------------------------------------- 6.11 The actions cell holds two things now The identifier chip sits beside the existing action link. The column is content-width, so without this the chip wraps under the icon and the row grows from 44px to 70px — which would undo 6.3 on every row of every one of these tables. nowrap makes the column ask for the width of both. -------------------------------------------------------------------------- */ .customers-table-container tbody td:last-child:not([colspan]), .details-table-panel table tbody td:last-child:not([colspan]), .relationship-group-card td:last-child:not([colspan]) { white-space: nowrap; /* line-height: 0 removes the cell's strut. Without it the row is 50px even though the padding is right: the chip and the 18px action icon sit on a line box that also carries a 20px strut and its descender space, and the sum is 26px of content inside 24px of padding. The cell holds no text -- only the icon and the chip, each of which sets its own line height -- so dropping the strut costs nothing and the line box becomes the taller of the two boxes. :not([colspan]) keeps the empty-state row out of it; that cell IS a last child and it is all text. */ line-height: 0; } .customers-table-container tbody td:last-child > *, .details-table-panel table tbody td:last-child > *, .relationship-group-card td:last-child > * { vertical-align: middle; } /* -------------------------------------------------------------------------- 6.12 The badge's geometry, and only its geometry HANDOFF.md 2.11, 3.4 .badge-pill carries min-width: 85px, which HANDOFF.md 2.11 retires by name -- it is a cell sized to a string, in the Type column of two of these four tables. Its 5px/12px box is also 30px tall, which sets the row height for every row that has a badge in it. The canonical badge is 13px/600 on 4px 12px with no min-width: 26px tall, so a row carrying one is ~50px rather than 44px. That is as close as the table can get while the badge is still a separate component; its two tones (HANDOFF.md 2.4, 2.5) belong to the badge task and are not touched here. The inline style="min-width: 95px" on customer detail's relationship tab beats any selector and is logged rather than fought. -------------------------------------------------------------------------- */ .badge-pill { min-width: 0; padding: var(--sm-space-1) var(--sm-space-3); border-radius: var(--sm-radius-pill); font-size: var(--sm-type-small-size); line-height: var(--sm-type-small-leading); font-weight: var(--sm-weight-semibold); } /* -------------------------------------------------------------------------- 6.13 Two rules at the end of relationship_list_styles.css -------------------------------------------------------------------------- THE CELL FILL. .parent-row td and .child-row td are #edf5f9 at :244 and :248 -- one of the three values HANDOFF.md 3.10 names when it replaces this table ("header #3dafed33, 12px separated rows, #edf5f9 cells"). 6.4 sets the group card's own background but not the cells', so the tint survived and every row read as tinted with white gutters between them. Tables are --sm-surface and the row state is carried by hover alone (HANDOFF.md 4.9). THE COLUMN SHIFT. :234 and :239 select td:nth-child(2), which was the Relationship Name column and is now Relationship Type, because the ID column left (HANDOFF.md 6.5 -- positional selectors, same commit). They were left-aligning the name and indenting the child name by 60px, and they are now doing both to a centred badge. The two cells they land on carry .center-column-items, which is the markup saying what it wants, so that is what is restored. The child-row indent lives on .child-name-muted (6.4). -------------------------------------------------------------------------- */ .parent-row td, .child-row td { background-color: var(--sm-surface); } .parent-row td.center-column-items, .child-row td.center-column-items { padding-left: 20px; text-align: center; } /* The hover has to beat the two rules above, which are (0,1,1) like 6.4's. */ .relationship-group-card tr:hover td.center-column-items, .relationship-group-card tr:hover td { background-color: var(--sm-surface-sunk); } /* ========================================================================== 7. THE ARBITRATION SCREENS HANDOFF.md 3.12, 2.3, 2.9, 4.8 -------------------------------------------------------------------------- Matching, Name / Address / Email / Phone selection, and the compiled record on Review (whose classes the two Relationship pages share, via tagging_styles.css). These screens exist for one job: seeing which value differs between candidate records. WHAT THIS SECTION CAN AND CANNOT DO CSS cannot read text content, so it cannot compare the value in one card with the value in another. There is no character-level diff here and none is faked. What is here: 7.1 the four field families as local variables, so a card names its family once and every slot (tint, mark, ink, highlight) follows 7.2 the selection card: white body, 3px mark edge, tint on the header band only (HANDOFF.md 4.10) 7.3 rows on a fixed 38px rhythm, 13px labels, 14/600 values (HANDOFF.md 4.8), so the same field sits at the same offset in every card of a deck 7.4 empty fields as a fixed-height muted row -- NOT removed, because the deck pager divides by the first card's height (HANDOFF.md 6.6) 7.5 THE DIFF: the hook a future diff script needs, and the one diff signal the page's own JavaScript already computes 7.6 - 7.10 matching, Review, the step header, the deck pagers, and the reservation rule THE HEIGHT-SYNC (HANDOFF.md 6.1, BRIEF 6.1). The decks' heights are written inline by script from the left column's measured height, and the pager steps by the distance between card 0 and card 1. Nothing here sets a deck height. Everything here keeps cards in one deck the same height by giving every row a fixed minimum and every card the same chrome. Local variables are prefixed --arb-, not --sm-: they are aliases scoped to one component, not design-system tokens, and they never hold a raw value -- only var(--sm-*). ========================================================================== */ /* -------------------------------------------------------------------------- 7.1 Field families HANDOFF.md 1.1, 2.3 Name is the default: on the Name screen the cards carry no family class (.matched-record, .artifact-record, .new-record). Address, email and phone cards all carry one, except the incoming address card, which is found by its body. RESERVED HUES: nothing outside these four families may read --arb-*. -------------------------------------------------------------------------- */ .top-cards .record, :is(.attributes-sections, .potential-match) .name-section, .name-wrapper, #altName { --arb-tint: var(--sm-field-name-tint); --arb-shade: var(--sm-field-name-shade); /* 22.3: the NetSuite band */ --arb-mark: var(--sm-field-name-mark); --arb-ink: var(--sm-field-name-ink); --arb-hl: var(--sm-field-name-hl); } .top-cards .record.matched-record-address, .top-cards .record.address-artifact-record, .top-cards .new-record:has(> .address-attributes), :is(.attributes-sections, .potential-match) .address-section, :is(.attributes-sections, .potential-match) .address-container, .address-wrapper, #altAddress { --arb-tint: var(--sm-field-addr-tint); --arb-shade: var(--sm-field-addr-shade); /* 22.3: the NetSuite band */ --arb-mark: var(--sm-field-addr-mark); --arb-ink: var(--sm-field-addr-ink); --arb-hl: var(--sm-field-addr-hl); } .top-cards .record.email-matched-record, .top-cards .record.email-artifact-record, .top-cards .record.email-new-record, :is(.attributes-sections, .potential-match) .email-section, .email-wrapper, #altEmail { --arb-tint: var(--sm-field-email-tint); --arb-shade: var(--sm-field-email-shade); /* 22.3: the NetSuite band */ --arb-mark: var(--sm-field-email-mark); --arb-ink: var(--sm-field-email-ink); --arb-hl: var(--sm-field-email-hl); } .top-cards .record.phone-matched-record, .top-cards .record.phone-artifact-record, .top-cards .record.phone-new-record, :is(.attributes-sections, .potential-match) .phone-section, .phone-wrapper, #altPhone { --arb-tint: var(--sm-field-phone-tint); --arb-shade: var(--sm-field-phone-shade); /* 22.3: the NetSuite band */ --arb-mark: var(--sm-field-phone-mark); --arb-ink: var(--sm-field-phone-ink); --arb-hl: var(--sm-field-phone-hl); } /* -------------------------------------------------------------------------- 7.2 The selection card HANDOFF.md 3.12 Eight rules become one component. What each was: .matched-record #f9e0a6 .artifact-record #f6e9cc .matched-record-address #bad7eb .address-artifact-record #d7e5ef .email-matched-record #d0dbfe .email-artifact-record #d3dcf3 .phone-matched-record #edd8fe .phone-artifact-record #f0e5f8 -- a saturated fill under 12px text, and a paler second tier for artifacts. Both tiers go: HANDOFF.md 4.1 makes artifact, alternate and variant visually identical, so a paler artifact card was asserting a hierarchy the product has not established. .new-record carried the heaviest shadow in the product (rgba(14,30,37,.32) 0 2px 16px, HANDOFF.md 1.5). It is a card that sits flat on the page, so it gets --sm-e1 like every other card (2.10). The header band is full-bleed: the card has no padding of its own, the band carries the inset, and overflow: hidden clips the band to the radius. -------------------------------------------------------------------------- */ .top-cards .record, .left-cards .new-record { box-sizing: border-box; padding: 0; overflow: hidden; background-color: var(--sm-surface); border: 1px solid var(--sm-line); border-left: 3px solid var(--arb-mark); border-radius: var(--sm-radius-card); /* was 20px */ box-shadow: var(--sm-e1); } /* The band. The approved card sets this label as micro (11px). It stays at the small role's size (13px) with micro's weight, tracking and case: DEFERRED-FIXES #36 was decided in session 11 -- the 13px floor wins for anything a steward reads repeatedly, and the band ("NEW EVENT RECORD", "NETSUITE RECORD") is read on every card of every deck. Contrast 7.8's step number, which is glanced at and does take micro. */ .top-cards .record > p.heading, .right-cards .record > p.heading { margin: 0; padding: var(--sm-space-3) var(--sm-space-4); background-color: var(--arb-tint); color: var(--arb-ink); text-align: left; font-size: var(--sm-type-small-size); /* was 20px / 18px */ line-height: var(--sm-type-small-leading); font-weight: var(--sm-type-micro-weight); /* was 530 */ letter-spacing: var(--sm-type-micro-tracking); text-transform: var(--sm-type-micro-transform); } .top-cards .record > .attributes { padding: var(--sm-space-1) var(--sm-space-4) var(--sm-space-2); } /* The deck well behind the right-hand column. */ .right-cards { background-color: var(--sm-surface-sunk); /* was #f3f2f2 */ border-radius: var(--sm-radius-card); /* was 20px */ } /* -------------------------------------------------------------------------- 7.3 Rows HANDOFF.md 2.9, 4.8, 1.3 The 12px at .right-cards .line p and .address-attributes p is the exact defect HANDOFF.md 2.9 names. Labels go to small (13px, ink-muted), values to body-strong (14/20/600, ink). Every row gets the same 38px minimum -- the handoff's control height, and the height the approved card's rows land on (9 + 20 + 9). A fixed row minimum is what keeps a deck's cards equal-height when one card's field is empty and another's is not. The label column is a fixed share of the row on every card, so values start at the same x in every card of a deck and in the incoming card beside it. Dashed dividers become the one border colour. -------------------------------------------------------------------------- */ .top-cards .record .line { box-sizing: border-box; min-height: 38px; padding-block: var(--sm-space-1); gap: var(--sm-space-3); align-items: center; border-bottom: 1px solid var(--sm-line); /* was 1px dashed, currentColor */ } .top-cards .record .line:last-child { border-bottom-color: transparent; /* keep the 1px so every row is the same box */ } /* Labels. The generic case: a paragraph directly in a row. */ .top-cards .record .line > p { margin: 0; min-width: 0; color: var(--sm-ink-muted); font-size: var(--sm-type-small-size); /* was 12px */ line-height: var(--sm-type-small-leading); font-weight: var(--sm-type-small-weight); word-break: normal; /* was break-all */ overflow-wrap: anywhere; } .top-cards .record .line > p:first-child { flex: 0 0 32%; width: auto; /* was 33% / 40% */ } /* Values. Name screen: p.field-value. Address screen: the second paragraph. */ .top-cards .record .line > p.field-value, .top-cards .record .address-attributes .line > p:nth-child(2) { flex: 1 1 0; width: auto; /* was 60% on address */ color: var(--sm-ink); font-size: var(--sm-type-body-strong-size); /* was 12px / 14px */ line-height: var(--sm-type-body-strong-leading); font-weight: var(--sm-type-body-strong-weight); /* was 400 */ font-variant-numeric: tabular-nums; /* zip, suite and house numbers line up digit for digit */ } .top-cards .record .address-attributes .line > p { padding-block: 0; /* was 0.2rem */ } /* Email and phone rows have no label: the paragraph IS the value. The one exception is the Count / Date row, which has a label and a .count_date. */ .top-cards .record :is(.email-attributes, .email-attributes-staging, .phone-attributes, .phone-attributes-staging) .line:not(:has(> .count_date)) > p { flex: 1 1 0; color: var(--sm-ink); font-size: var(--sm-type-body-strong-size); line-height: var(--sm-type-body-strong-leading); font-weight: var(--sm-type-body-strong-weight); font-variant-numeric: tabular-nums; } .top-cards .record :is(.email-attributes, .email-attributes-staging, .phone-attributes, .phone-attributes-staging) .line { gap: var(--sm-space-3); /* was 8% */ margin: 0; } /* Email values run to 65+ characters (BRIEF 5.3). Beside two selects they wrapped to three and four lines, at different counts in different cards, which is what made the email deck's cards unequal (140/122/122/117px before this change). The value gets the row's full width on a line of its own and the two selects drop beneath it, right-aligned. The ROW reserves two value lines plus the controls, so a one-line and a two-line address produce the same card, while the value itself stays the size of its text -- which is what lets a highlight hug the address instead of painting a two-line block behind a one-line value. The line break is a zero-height ::after with a 100% basis, ordered between the value and the controls. It is a flex item of the row; no markup. */ .top-cards .record :is(.email-attributes, .email-attributes-staging) .line:not(:has(> .count_date)) { flex-wrap: wrap; align-content: flex-start; justify-content: flex-end; row-gap: var(--sm-space-1); padding-block: var(--sm-space-2); /* 2 value lines + the gap + a 30px control + the row's padding */ min-height: calc(2 * var(--sm-type-body-strong-leading) + var(--sm-space-1) + 30px + 2 * var(--sm-space-2)); } .top-cards .record :is(.email-attributes, .email-attributes-staging) .line:not(:has(> .count_date))::after { content: ""; order: 1; flex: 0 0 100%; height: 0; } .top-cards .record :is(.email-attributes, .email-attributes-staging) .line:not(:has(> .count_date)) > p { order: 0; flex: 0 1 auto; max-width: 100%; margin: 0 auto 0 0; /* was margin-right: 15px */ } .top-cards .record :is(.email-attributes, .email-attributes-staging) .line:not(:has(> .count_date)) > :is(select, .options-wrapper) { order: 2; } /* The Count / Date row: a label, an inert count chip, a date select. */ .top-cards .record .line > div, .top-cards .record .line > .count_date { display: flex; align-items: center; gap: var(--sm-space-2); padding-left: 0; /* was 40px */ color: var(--sm-ink-muted); font-size: var(--sm-type-small-size); line-height: var(--sm-type-small-leading); } .top-cards .record .line > div > p { margin: 0; color: var(--sm-ink-muted); font-size: var(--sm-type-small-size); line-height: var(--sm-type-small-leading); } .top-cards .record .line > div span, .top-cards .record .line > .count_date > span { display: inline-block; min-width: 20px; padding: 0 var(--sm-space-1); border-radius: var(--sm-radius-inline); /* was 5px */ background-color: var(--sm-surface-sunk); /* was #fff on a tint */ color: var(--sm-ink-body); font-size: var(--sm-type-small-size); line-height: var(--sm-type-small-leading); font-weight: var(--sm-weight-semibold); text-align: center; font-variant-numeric: tabular-nums; } /* Selects inside a card: the small control, on white, with a real border. Replaces border: none on #ededed / #f3f2f2 / #fff, radius 12px, and .options-wrapper select's 1px solid #333. */ .top-cards .record select { box-sizing: border-box; height: 30px; min-width: 0; margin: 0; padding: 0 var(--sm-space-2); border: 1px solid var(--sm-line-strong); border-radius: var(--sm-radius-control); background-color: var(--sm-surface); color: var(--sm-ink-body); font-size: var(--sm-type-small-size); line-height: var(--sm-type-small-leading); font-weight: var(--sm-type-small-weight); text-align: left; cursor: pointer; transition: border-color 150ms ease, box-shadow 150ms ease; } .top-cards .record select:hover { background-color: var(--sm-surface); /* was #e9e8e8 */ border-color: var(--sm-ink-quiet); } .top-cards .record select:focus-visible { outline: none; border-color: var(--sm-brand); box-shadow: var(--sm-focus); } /* Widths. The type select on the name screen, the two selects on an email or phone row: one fixed width, so the value column is the same width on every card. The date select sizes to its date. */ .top-cards .record .line > select { flex: 0 0 7.5rem; width: 7.5rem; } /* .options-wrapper is a COLUMN flexbox, so a flex-basis here would be a height. Width only. */ .top-cards .record .line .options-wrapper select { flex: none; width: 7.5rem; } .top-cards .record .line select.date-selection { flex: 0 0 auto; width: auto; } .top-cards .record .line .options-wrapper { flex: 0 0 auto; width: auto; min-width: 0; /* was 24% / 25% */ background: none; } .phone-selection { margin-right: 0; /* was 30px, name_selection_styles.css */ } /* Address: the column of four selects beside the six rows. */ .top-cards .record .address-attributes { gap: var(--sm-space-3); align-items: flex-start; } .top-cards .record .address-attributes .attributes-wrapper { flex: 1 1 0; min-width: 0; width: auto; /* was 75% */ } .top-cards .record .address-attributes .options-wrapper { flex: 0 0 9rem; width: auto; /* was 24% */ box-sizing: border-box; align-self: stretch; justify-content: flex-start; gap: var(--sm-space-2); margin-block: var(--sm-space-1); padding: var(--sm-space-2); background-color: var(--sm-surface-sunk); /* was #e9e8e8 */ border-radius: var(--sm-radius-control); /* was 12px */ } .top-cards .record .address-attributes .options-wrapper select { width: 100%; /* was 65% / 80% */ } /* Disabled: HANDOFF.md 3.2 -- border --sm-line, text --sm-ink-faint, not-allowed. Not opacity on a fill. */ .top-cards .record select:disabled, .top-cards .record select.disabled-dropdown { opacity: 1; /* was 0.5 */ background-color: var(--sm-surface-sunk); /* was #f0f0f0 */ border-color: var(--sm-line); color: var(--sm-ink-faint); /* was #999 */ cursor: not-allowed; } .disabled-line p, .disabled-dropdown ~ p { color: var(--sm-ink-quiet); /* was #999 (2.8:1); quiet is the reading floor */ } /* 7.3.1 Phone widths. BRIEF 8.5 does not require the comparison to work at 390px, but the decks must not get worse there. The original <=768px rule (name_selection_styles.css) lets every row wrap, so at a phone width a row wrapped or not depending on how long its VALUE was -- "Jon" stayed on one line, "Johnathan" pushed its select down -- and cards in one deck came out different heights. Below 600px every row takes one fixed shape instead: the value line, then the controls on a line of their own. The shape no longer depends on the data, so the deck stays equal. */ @media (max-width: 600px) { /* Name: label + value, then the select under the value. */ .top-cards .record .line:has(> p.field-value) { flex-wrap: wrap; row-gap: var(--sm-space-1); } .top-cards .record .line:has(> p.field-value) > p.field-value { flex: 1 1 calc(68% - var(--sm-space-3)); } .top-cards .record .line:has(> p.field-value) > select { margin-left: calc(32% + var(--sm-space-3)); } /* Phone: the email shape (7.3) -- value, then both selects. */ .top-cards .record :is(.phone-attributes, .phone-attributes-staging) .line:not(:has(> .count_date)) { flex-wrap: wrap; justify-content: flex-end; row-gap: var(--sm-space-1); } .top-cards .record :is(.phone-attributes, .phone-attributes-staging) .line:not(:has(> .count_date)) > p { flex: 1 0 100%; } /* Email: three value lines at this width, not two. */ .top-cards .record :is(.email-attributes, .email-attributes-staging) .line:not(:has(> .count_date)) { min-height: calc(3 * var(--sm-type-body-strong-leading) + var(--sm-space-1) + 30px + 2 * var(--sm-space-2)); } /* Address: the select column moves under the six rows, two per line. */ .top-cards .record .address-attributes { flex-wrap: wrap; } .top-cards .record .address-attributes .attributes-wrapper, .top-cards .record .address-attributes .options-wrapper { flex: 1 0 100%; } .top-cards .record .address-attributes .options-wrapper { flex-direction: row; flex-wrap: wrap; } .top-cards .record .address-attributes .options-wrapper select { width: calc(50% - var(--sm-space-1)); } } /* -------------------------------------------------------------------------- 7.4 Empty fields -- the fixed-height muted row HANDOFF.md 3.12, 6.6 The page's own script marks an empty field: initializePageUI() puts .disabled-dropdown on the select of every row whose value is "", "-", "none", "null" or "undefined". The same class also goes on an INCOMING row whose value duplicates one on file, so duplicates are excluded here by the hidden option the script selects for them. The row keeps its full 38px and its divider. Removing it would change the card's height and break the pager arithmetic. What collapses is the ink: the label drops to quiet, the dash to faint, and the disabled select -- which offers nothing on an empty field -- stops drawing. Name screen only. Address, email and phone rows carry no empty marker the stylesheet can see (docs/DEFERRED-FIXES.md). -------------------------------------------------------------------------- */ .top-cards .record .line:has(> select.disabled-dropdown):not(:has(option[value="duplicate"]:checked)) > p { color: var(--sm-ink-quiet); } .top-cards .record .line:has(> select.disabled-dropdown):not(:has(option[value="duplicate"]:checked)) > p.field-value { color: var(--sm-ink-faint); /* em-dash empty cell: HANDOFF.md 2.8 permits faint */ font-weight: var(--sm-type-body-weight); } .top-cards .record .line:has(> select.disabled-dropdown):not(:has(option[value="duplicate"]:checked)) > select { visibility: hidden; /* keeps its box: the row does not move */ } /* -------------------------------------------------------------------------- 7.5 THE DIFF HANDOFF.md 1.1, 3.12 The highlight slot (--sm-field-*-hl) exists for one purpose: the behind differing characters. It is the most load-bearing colour in the system and nothing else may use it. 7.5.1 THE HOOK -- styled now, emitted by nothing yet. A diff script (or the template) needs to do exactly two things, and the rendering is already here:

Johnathan

characters that differ from the incoming value, wrapped in
the row whose value differs from the incoming card's value for the same field -- lets the eye land on the row before reading the word Both work inside any family in 7.1, on every screen, in the field's own hue. Neither changes a box size, so neither disturbs the height-sync: the mark has no vertical padding and the row treatment is paint only. -------------------------------------------------------------------------- */ :is(.top-cards .record, .attributes-sections, .left-container-relationship, .alt-section) mark { padding: 0 1px; border-radius: var(--sm-radius-inline); background-color: var(--arb-hl); color: var(--arb-ink); font-weight: inherit; } .top-cards .record .line.value-differs > p:first-child, .attributes-sections .line.value-differs > p:first-child { color: var(--sm-ink); font-weight: var(--sm-weight-semibold); } .top-cards .record .line.value-differs > p.field-value, .top-cards .record .address-attributes .line.value-differs > p:nth-child(2), .top-cards .record :is(.email-attributes, .email-attributes-staging, .phone-attributes, .phone-attributes-staging) .line.value-differs:not(:has(> .count_date)) > p, .attributes-sections .line.value-differs > p:nth-child(2) { /* A whole-value highlight in the field's hue. box-shadow rather than padding, so the text does not move and the row does not grow. The value keeps its column's start (content-sized + an auto right margin), so highlighted and plain values still begin at the same x. */ flex: 0 1 auto; /* content-sized: the value column's 0 basis would collapse it */ width: auto; max-width: 100%; margin-right: auto; justify-self: start; background-color: var(--arb-hl); box-shadow: 0 0 0 3px var(--arb-hl); border-radius: var(--sm-radius-inline); color: var(--arb-ink); } /* -------------------------------------------------------------------------- 7.5.2 WHAT THE PAGE ALREADY KNOWS -- the incoming card's new values The selection scripts compare every INCOMING value with every value on file for the same field (trimmed, case-folded, exact), and lock the incoming row -- .disabled-dropdown on its select -- when it matches. So on the incoming card, a row with a value whose select is still live holds a value that NO card on the page has. That is a real comparison, computed by the page, and it is exactly the row the steward must decide. Name applyStagingLogic() per field Email PART 2b, matchedEmailValues per email Phone the same block on phone per phone Address per WHOLE address (all five fields at once) -- it says the address is new, not which field is, so it is NOT marked: highlighting five rows would claim five differences. It does not say which candidate differs, or which characters. That needs 7.5.1's hook and a script (docs/DEFERRED-FIXES.md). Both passes run on every load, including a restored session (neither is gated on sessionStorage), so the mark is stable across Back navigation. The selectors below are 7.5.1's .value-differs, spelled out as the state the script leaves behind; a script that adds .value-differs gets the same paint on every card. -------------------------------------------------------------------------- */ .top-cards .new-record .line:has(> p.field-value):has(> select:not(.disabled-dropdown)) > p:first-child { color: var(--sm-ink); font-weight: var(--sm-weight-semibold); } .top-cards .new-record .line:has(> p.field-value):has(> select:not(.disabled-dropdown)) > p.field-value, .top-cards .new-record .line:has(> .email-type-selector:not(.disabled-dropdown):not([data-email-value="-"]):not([data-email-value=""])) > p, .top-cards .new-record .line:has(> .phone-type-selector:not(.disabled-dropdown):not([data-phone-value="-"]):not([data-phone-value=""])) > p { flex: 0 1 auto; /* content-sized: the value column's 0 basis would collapse it */ width: auto; max-width: 100%; margin-right: auto; background-color: var(--arb-hl); box-shadow: 0 0 0 3px var(--arb-hl); border-radius: var(--sm-radius-inline); color: var(--arb-ink); } /* -------------------------------------------------------------------------- 7.6 Matching -- the incoming card and the scored candidates BRIEF 5.3 Here the four families are blocks inside one card rather than cards of their own, and there is no header band to carry the tint, so the block itself carries it -- at the tint value, with the 3px mark on its left edge. Replaced, per card: incoming #fae1a7 #bad7eb #d0dbfe #edd8fe candidate #fcefd2 #d7e5ef #d3dcf3 #f0e5f8 #fae1a7 and #fcefd2 are two more name ambers that HANDOFF.md 1.1's "Replaced" list does not name. The two-tier split goes for the same reason as 7.2's. The candidates are compared ACROSS the deck, left to right, so what matters is that a field sits at the same height in every card. The label column was 40% on the incoming card, 50% on a candidate and 35% on email and phone; it is one fixed width everywhere, so values start at one x. Email -- the value that wrapped to four lines in a 168px column -- moved under its label at the block's full width; round 2 (item 12) put it back on the shared label | value row, with two value lines reserved. -------------------------------------------------------------------------- */ .main-content .top-cards .right-card-box { background-color: var(--sm-surface-sunk); /* was #e6ecee */ border-radius: var(--sm-radius-card); /* was 30px x4 */ } .top-cards .left-card-box .new-record-card, .cards-container .potential-match-card { border-radius: var(--sm-radius-card); /* was 25px */ box-shadow: var(--sm-e1); /* was the .32 16px shadow */ } .top-cards .left-card-box .new-record-card, .cards-container .potential-match-card:not(.selected-card) { border: 1px solid var(--sm-line); /* .selected-card's own border is 13.1 */ } .new-record-card > p:first-of-type, .potential-match-card > p:first-of-type { font-size: var(--sm-type-subtitle-size); line-height: var(--sm-type-subtitle-leading); font-weight: var(--sm-type-subtitle-weight); /* was bold */ color: var(--sm-ink); } .attributes-sections, .potential-match { gap: var(--sm-space-3); /* was 20px / 15px */ } /* The blocks. In a candidate the address block is .address-container wrapping .address-section; the container carries the chrome and the section inside it goes flat. */ :is(.attributes-sections, .potential-match) > :is(.name-section, .address-section, .email-section, .phone-section), :is(.attributes-sections, .potential-match) > .address-container { box-sizing: border-box; padding: var(--sm-space-2); /* was 10px / 3% */ background-color: var(--arb-tint); border-left: 3px solid var(--arb-mark); border-radius: var(--sm-radius-control); } :is(.attributes-sections, .potential-match) > .address-container > .address-section { padding: 0; background: none; border: 0; border-radius: 0; } /* Rows. .email-section and .phone-section are themselves a .line. The label column is narrow on purpose: a label that wraps ("Company / Name") wraps identically in every card, because every card has the same labels, so it cannot misalign the deck. A VALUE that wraps is data and wraps in one card only -- so the width goes to the value. At 6rem the candidate's value column is 186px, which holds "4412 Nacogdoches Road" (174px at 14/600) on one line; at the previous 40-50% it did not. */ :is(.attributes-sections, .potential-match) :is(.name-section, .address-section) .line, :is(.attributes-sections, .potential-match) > :is(.email-section, .phone-section) { grid-template-columns: 6rem minmax(0, 1fr); /* was 40% / 50% / 35% */ column-gap: var(--sm-space-2); align-items: baseline; min-height: 28px; box-sizing: border-box; border-bottom: 1px solid var(--sm-line); /* was dashed */ } :is(.attributes-sections, .potential-match) :is(.name-section, .address-section) .line:last-child, :is(.attributes-sections, .potential-match) > :is(.email-section, .phone-section) { border-bottom-color: transparent; } :is(.attributes-sections, .potential-match) p { padding-inline: 0; /* was 0.5em */ padding-block: var(--sm-space-1); margin: 0; color: var(--sm-ink-muted); /* was #555 */ font-size: var(--sm-type-small-size); line-height: var(--sm-type-small-leading); font-weight: var(--sm-type-small-weight); /* was 500 (the global p rule) */ white-space: normal; /* matching_styles.css sets every p nowrap */ } :is(.attributes-sections, .potential-match) .line p:nth-child(2), :is(.attributes-sections, .potential-match) > :is(.email-section, .phone-section) > p:nth-child(2) { color: var(--sm-ink); font-size: var(--sm-type-body-strong-size); /* was 13px */ line-height: var(--sm-type-body-strong-leading); font-weight: var(--sm-type-body-strong-weight); font-variant-numeric: tabular-nums; white-space: normal; overflow-wrap: anywhere; word-break: normal; } /* Round 2 (checklist item 12): email takes the same label | value row as name, address and phone. It had its own one-column shape here, the label above and the value below at the block's full width, which read as a different component. It keeps its two reserved value lines, now inside the value column: emails are the value most likely to wrap, and the reserve keeps the phone row level across the incoming card and every candidate when one email wraps and another does not. Delete the min-height to drop it; nothing else depends on it. A candidate with a second email or phone renders a second

; it goes under the first value, not under the label. */ :is(.attributes-sections, .potential-match) > .email-section > p:nth-child(2) { min-height: calc(2 * var(--sm-type-body-strong-leading)); align-items: flex-start; /* the global p rule centres: a one-line email sat mid-reserve */ } :is(.attributes-sections, .potential-match) > :is(.email-section, .phone-section) > p:nth-child(n + 3) { grid-column: 2; color: var(--sm-ink); font-size: var(--sm-type-body-strong-size); line-height: var(--sm-type-body-strong-leading); font-weight: var(--sm-type-body-strong-weight); overflow-wrap: anywhere; } /* -------------------------------------------------------------------------- 7.7 The compiled record -- Review, and Relationships HANDOFF.md 3.12, 1.1 .name-wrapper, .address-wrapper, .email-wrapper and .phone-wrapper are defined twice, in review_styles.css and in tagging_styles.css, for the same component on Review and on the two Relationship branches. Replaced: name #f9e0a6 address #bad7eb, #dcebf6 (tags) email #d0dbfe, #e7edfe (tags) phone #edd8fe, #e7edfe (tags) The phone tags were EMAIL's lavender (#e7edfe, review_styles.css and tagging_styles.css .phone-tags p) -- a field hue on the wrong field, which HANDOFF.md 2.3 forbids outright. They take phone's tint here. Blocks keep their tint (there is no header band on this component) and the label block carries the 3px mark, so each family reads the same way it does on the selection screens. Text: 13px labels and tags, 14/600 values. The Relationship pages set this record at 12px (tagging_styles.css .relationship-record-container p); that is lifted too, because it is the same component. -------------------------------------------------------------------------- */ .left-container-relationship, .relationship-record-container .left-container-relationship { background-color: var(--sm-surface); border: 1px solid var(--sm-line); border-radius: var(--sm-radius-card); /* was 25px */ box-shadow: var(--sm-e1); /* was the .32 16px shadow */ } .name-wrapper > div, .address-fields, .address-values, .address-wrapper .address-tags, .email-wrapper > p, .email-values, .phone-wrapper > p, .phone-values, .email-tags p, .email-tags input, .phone-tags p, .phone-tags input { background-color: var(--arb-tint); } .name-wrapper > .left-names, .address-fields, .email-wrapper > p:first-child, .phone-wrapper > p:first-child { box-shadow: inset 3px 0 0 var(--arb-mark); } .name-wrapper > div, .address-fields, .address-values, .address-wrapper .address-tags, .email-values, .phone-values, .email-wrapper > p:first-child, .phone-wrapper > p:first-child, .email-tags p, .phone-tags p { border-radius: var(--sm-radius-control); /* was 8px -- same value, now the token */ } .left-container-relationship :is(.name-wrapper, .address-wrapper, .email-wrapper, .phone-wrapper) p { color: var(--sm-ink-muted); font-size: var(--sm-type-small-size); /* was 12px on Relationships */ line-height: var(--sm-type-small-leading); font-weight: var(--sm-type-small-weight); } .left-container-relationship .right-names p, .left-container-relationship .address-values p, .left-container-relationship .email-values p, .left-container-relationship .phone-values p { color: var(--sm-ink); font-size: var(--sm-type-body-strong-size); line-height: var(--sm-type-body-strong-leading); font-weight: var(--sm-type-body-strong-weight); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; /* a 65-character email must not set the grid's width */ min-width: 0; } .left-container-relationship :is(.address-tags, .email-tags, .phone-tags) p { color: var(--sm-ink-body); } .name-wrapper p:not(:last-child), .address-fields p:not(:last-child), .address-values p:not(:last-child), .email-values p:not(:last-child), .phone-values p:not(:last-child), .address-tags p:not(:last-child) { border-bottom: 1px solid var(--sm-line); /* was 1px dashed, currentColor */ } /* Grid children default to min-width: auto, so an unbreakable email set the minimum width of the whole three-column grid. On Review at 900px that put .email-tags 147px past the viewport (DEFERRED-FIXES #26). */ .email-wrapper > *, .phone-wrapper > *, .address-wrapper > *, .name-wrapper > * { min-width: 0; } /* Review below 1024px. review_styles.css has no media query at all: the record sits in a 60% column behind a 20% left margin, beside a 20% button column, inside a card with a further 4rem margin -- at 390px that left the three-column grid about 20px per column, so once long values were allowed to wrap (above) they stacked one letter per line. BRIEF 3.2 frees the layout below 1024px; the page becomes one column, record first, actions under it. Scoped by .overall-page, which only Review renders. Session 10 moved this from <= 768 to <= 1023: at 900 the same geometry left the record 430px wide beside 250px of empty margin, "Nacogdoches" broke mid-word, and Back / Done sat against the viewport edge. */ @media (max-width: 1023px) { .overall-page .wrapper { flex-direction: column; } .overall-page .left-part, .overall-page .right-part { width: 100%; margin-left: 0; /* was 20% */ } .overall-page .left-container-relationship { box-sizing: border-box; width: 100%; /* was 90% */ margin-left: 0; /* was 4rem */ margin-top: var(--sm-space-5); /* was 4rem */ } .overall-page .right-part { align-items: stretch; padding-block: var(--sm-space-5); } } /* The alternates panel on Review. Its cards list alternates by family (#altName / #altAddress / #altEmail / #altPhone): a card in a family gets that family's mark, and its label/value pairs drop the grey boxes (#f5f7fa, #e8edf2, radius 10px -- none in the palette) so values sit on white like every other arbitration card. */ .alt-address-card { border: 1px solid var(--sm-line); /* was 2px solid #018ac6 */ border-left: 3px solid var(--arb-mark, var(--sm-line)); border-radius: var(--sm-radius-card); padding: var(--sm-space-2) var(--sm-space-4); /* was 24px */ box-shadow: var(--sm-e1); } .alt-address-row { gap: var(--sm-space-3); margin: 0; /* was margin-bottom: 12px */ min-height: 38px; box-sizing: border-box; border-bottom: 1px solid var(--sm-line); } .alt-address-row:last-child { border-bottom-color: transparent; } .alt-addr-label, .alt-addr-value { padding: 0; background: none; border: 0; border-radius: 0; } .alt-addr-label { color: var(--sm-ink-muted); /* was #555 */ font-size: var(--sm-type-small-size); line-height: var(--sm-type-small-leading); font-weight: var(--sm-type-small-weight); /* was 600 */ } .alt-addr-value { color: var(--sm-ink); /* was #333 */ font-size: var(--sm-type-body-strong-size); line-height: var(--sm-type-body-strong-leading); font-weight: var(--sm-type-body-strong-weight); overflow-wrap: anywhere; } /* #00c896 is a retired success green (HANDOFF.md 1.1), and green means completion and nothing else (4.3). This is a panel title. */ .panel-title { color: var(--sm-ink); font-size: var(--sm-type-title-size); /* was 1.8rem */ line-height: var(--sm-type-title-leading); font-weight: var(--sm-type-title-weight); /* was 700 */ } /* .alt-empty (was #aaa, 2.3:1) is styled by 8.6 with the other empty states. Session 11 removed the rule that stood here (--sm-ink-quiet at 13px): 8.6 restyles the same selector later as --sm-ink-muted at 14px, so the two disagreed and this one never applied. */ /* -------------------------------------------------------------------------- 7.8 The step header on these screens HANDOFF.md 3.14, 2.9 Two jobs, both CSS: the 13px floor, and "wraps rather than compressing". TYPE. STEP n was 10px #959595 (2.9:1), the step name 12px, the status pill 10px. The name and the pill go to 13px. The step number is the handoff's micro eyebrow and takes micro whole -- 11px, uppercase, tracked -- per DEFERRED-FIXES #36 as decided in session 11: 11px is acceptable for a number a steward glances at, and HANDOFF.md 2.9 names step numbers as micro's use. Session 6 had set it at 13px to honour the floor. STATUS. The pill carries the state the template already writes as a class (.completed / .in-progress / none): success tint, brand tint, pending neutrals -- HANDOFF.md 2.7's three hues, no new one. WIDTH. The header is seven steps and six connectors in one nowrap flex row beside the title, with no media query. That row is what overflowed every wizard screen from 900px down: the rightmost element in DEFERRED-FIXES #13 and #25 ("div.right-container", "div.review") is THIS header -- step 7, Review -- not an arbitration card. The bar now wraps, so the steps drop under the title when the two do not fit side by side, and the steps themselves wrap when one row will not hold them. Below 1024px -- the band where either can happen -- the connectors are removed, so no line is left dangling at a row end. NOT DONE: the compact "Step 3 of 7 · Address" pill below 768px. It needs markup the template does not render, and the state that would drive it is set in Python (HANDOFF.md 3.14). docs/DEFERRED-FIXES.md. -------------------------------------------------------------------------- */ /* A wrapping flex row breaks a line when an item's BASIS will not fit, and an auto basis is the item's max-content -- for the title, the whole title on one line. So the title column takes a small basis and grows into what is left: the steps stay beside it wherever they fit beside the title's narrowest form, which is every width >= 1024px (BRIEF 3.2 -- the layout above 1024 is preserved), and drop beneath it below that. */ .top-bar { flex-wrap: wrap; column-gap: var(--sm-space-5); row-gap: var(--sm-space-4); } .top-bar .left-container { flex: 1 1 10rem; min-width: 0; } .top-bar .right-container { flex: 0 1 auto; flex-wrap: wrap; row-gap: var(--sm-space-3); min-width: 0; max-width: 100%; margin-right: var(--sm-space-4); /* was 2rem */ } .top-bar .right-container div { font-size: var(--sm-type-small-size); /* was 10px */ line-height: var(--sm-type-small-leading); } .top-bar .right-container div p:first-of-type { color: var(--sm-ink-quiet); /* was #959595 */ font-size: var(--sm-type-micro-size); /* 13px until session 11: #36 */ line-height: var(--sm-type-small-leading); /* kept at 18px so the step's height does not move */ font-weight: var(--sm-type-micro-weight); letter-spacing: var(--sm-type-micro-tracking); text-transform: var(--sm-type-micro-transform); } .top-bar .right-container div p:nth-of-type(2) { color: var(--sm-ink); font-size: var(--sm-type-small-size); /* was 12px */ line-height: var(--sm-type-small-leading); font-weight: var(--sm-weight-semibold); } .top-bar .right-container div p:nth-of-type(3) { margin-top: var(--sm-space-1); padding: 0 var(--sm-space-2); /* was 0 5px */ border: 1px solid var(--sm-line); /* was #959595: pending */ border-radius: var(--sm-radius-pill); /* was 8px */ background-color: var(--sm-surface-sunk); color: var(--sm-ink-muted); font-size: var(--sm-type-small-size); /* was 10px */ line-height: var(--sm-type-small-leading); white-space: nowrap; } .top-bar .right-container div p.completed { border-color: var(--sm-success-border); background-color: var(--sm-success-tint); color: var(--sm-success-ink); } .top-bar .right-container div p.in-progress { border-color: var(--sm-info-border); background-color: var(--sm-brand-tint); color: var(--sm-brand-deep); } /* #24c095 is a retired success green, and it ran between PENDING steps as well as completed ones. A connector is structure, not state. width: auto matters. base_styles.css gives the connector width: 40px, and a fixed width counts at full size in the header's max-content even though flex lets it shrink -- six of them made the header 877px wide on Review instead of 709, and pushed it under the title at 1100px. The basis is the minimum; the connectors still grow to fill the row. */ .top-bar .right-container .connector { flex: 1 1 var(--sm-space-3); width: auto; /* was 40px */ min-width: var(--sm-space-3); background-color: var(--sm-line-strong); } @media (max-width: 1023px) { .top-bar .right-container { column-gap: var(--sm-space-4); } .top-bar .right-container .connector { display: none; } } /* -------------------------------------------------------------------------- 7.9 Deck pager chevrons HANDOFF.md 2.12 Every deck pager -- .scroll-btn / .scroll-btn1 on the four selection screens and both Relationship branches, .navigation-buttons on Matching -- carries an inline SVG with fill="white". It was drawn on a solid --sm-brand circle; since 5.9 made the pager an outlined white button, the chevron has been white on white, and the pagers on seven screens rendered as empty circles. A presentation attribute loses to any CSS declaration, so the icon takes the button's colour, as every icon should. 5.9's disabled colour (--sm-ink-faint) then reaches the chevron too. Round 2 (item 5): the Bootstrap chevrons are gone. Every pager now holds the sprite's stroked chevron (section 15), which is currentColor by construction, so the `fill: currentColor` that lived here is deleted: a fill is exactly what turns a stroked Lucide icon into a blob. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 7.10 The reservation rule HANDOFF.md 2.3, 2.6 .matched-record select[value="alias"] (name_selection_styles.css) paints an amber #fff3cd / #ffc107 warning -- a second amber meaning, which 2.6 rules out because amber is Name's. It matches nothing in any of the 43 states (a