/* Adealia Brokerage — the component layer. ========================================================================= Load order is `adealia-tokens.css` → `app.css` → `components.css`, and this file is LAST on purpose: it is authoritative. The tokens file supplies the system, `app.css` still holds the original assistant's layout, and anything in here overrides both. WHY THIS FILE EXISTS. Nine pages were built without a component layer, so the app grew 265 one-off classes, five page-header classes, three content widths, and browser-default form controls on its three most-used screens. None of that was drift — `app.css` records the decision to keep the original assistant's structure and take only colour and type. That decision was right for a two-page app and was never revisited at eleven pages. See `planning/reports/01-ui-ux-review.md` §7.3. THE RULE THAT KEEPS IT WORKING: a new one-off class is a change to this file, or it is not merged. Everything here is `.ui-` prefixed so a reviewer can see at a glance whether a template is using the system or going around it. ========================================================================= */ /* ── 1. The palette, from the design concept ────────────────────────────── The look is `design_concept/R1 Dashboard.dc.html`, ported value for value. Every colour below was read out of that file's computed styles rather than matched by eye, and the oklch values are kept verbatim so the result is the concept and not an impression of it. THE LEGACY TOKEN NAMES STAY AND ONLY THE VALUES MOVE. That is the trick that makes this affordable: nine hundred lines of component CSS already speak in `--cream`, `--ink-1`, `--line`, so repointing the tokens repaints the whole app without touching the rules. `app.css` used the same move when it took the Adealia palette, and says so in its own header. WHAT CHANGED IN KIND, not just in value: * The shell is LIGHT. The concept gets its contrast from typography and one dark anchor — the filled active nav pill — instead of a dark frame. Navy and graphite were both attempts to solve by shell what this solves by type, and both read as costume. * The primary action is DARK INK, not copper. Copper survives only as the amber that marks a deadline. * The accent is GREEN, taken from R1's own mark. * An italic carries exactly one word per screen: the name in the greeting. The concept made that a SERIF italic and said it was the whole reason the design worked; the serif is gone (§Type) and the one italic word stayed, because the idea was the restraint and not the face. */ :root { /* ── Ground ─────────────────────────────────────────────────────────── THE SEPTEMBER 2026 REDESIGN'S NEUTRALS. Report 114; `planning/design/redesign-2026-09.md` §3 is the table they came from. They replace the oklch ramp ported from `design_concept/R1 Dashboard`. The paper is the same warm paper to within a hundredth; what changes is that the four grounds are further apart, that a card is WHITE rather than 0.995 of one, and that the two tints every rule in this file used to guess at inline now have names. Hex, not oklch, because the source is a hex table and a conversion is one more place to be wrong. The old ramp was oklch because it was read off a Claude Design file's computed styles; this one was read off a table somebody wrote down. */ --page-bg: #F7F5F0; /* the paper, behind the whole shell */ --rail-bg: #FBFAF6; /* rail, search field, tinted panels */ --card-bg: #FFFFFF; /* cards, header, tables */ --chip-bg: #EFEBE2; /* count badges, meter track, segmented track */ --tint-bg: #F2EEE6; /* the second, warmer fill */ --cream: var(--page-bg); --warm-paper: var(--page-bg); --surface-1: var(--page-bg); --surface-2: var(--rail-bg); --surface-3: var(--card-bg); --white: var(--card-bg); --sunken: var(--rail-bg); /* ── Rules ────────────────────────────────────────────────────────── */ --line: #E4DFD5; /* card edge — every card and control border */ --line-1: var(--line); --line-2: #EEEAE2; /* hairline — row dividers, section rules */ --line-3: #C9C1B2; /* edge-strong — the one heavier rule, dashed drops */ /* A SECOND CORRECTION TO THE MOCKUP, and it is the same kind as §3's. The mockup draws every input and textarea with a `#B6AFA3` edge, which measures 2.18:1 on white. WCAG 1.4.11 wants 3:1 for the boundary of a control, and that is exactly the case it exists for. `app.css` already minted a value for this — the note beside `--line-input` there has the history — and the oklch port silently redeclared it to 1.54:1, which put every field on every form back below the line it was raised over. So there is deliberately NO `--line-input` declaration below and `app.css`'s value stands: 3.30:1 on white, 3.16 on the rail, 3.03 on the paper. BOUND: 2.78:1 on `--chip-bg`. No field in this app sits on a chip; one that did would need a darker edge, not this one. */ /* THE FAINTEST INK IS `--ink-4` AND NOTHING ELSE. The redesign names two quiet greys — `#5F7085` for meta text and `#7A8899` for the faintest labels. §3 of the spec already replaced the second, because it is 3.61:1. Measured 8 September 2026, the FIRST one does not survive this app either: `#5F7085` is 4.26:1 on `--chip-bg` and 4.38:1 on `--tint-bg`, and `--muted-ink` is the token this app sprays over tinted rows, chips and warn panels — 60-odd call sites that no rule keeps on white. `--ink-4` is the same tier to the eye (5.41 vs 5.07 on white) and clears 4.5:1 on every ground here. One name, one value, safe wherever it lands. */ --muted-ink: var(--ink-4); /* ── Ink ────────────────────────────────────────────────────────────── THE TOP OF THE RAMP IS THE BRAND NAVY AGAIN. The concept's ink was `oklch(0.26 0.025 255)` — #1C2530, a cool near-black that is nobody's brand colour. The mockup's body ink, its active nav row and its primary button are all `#1A2547`, which is `--ink-navy`, which this project has held all along. So the ramp points AT the token rather than restating a value beside it. */ --ink-1: var(--ink-navy); /* #1A2547 — 15.00:1 on a card */ --ink-2: var(--steel-slate); /* #33475B — 9.58:1 */ --ink-3: #55677D; /* nav labels, inactive controls — 5.80:1 */ --ink-4: #616B78; /* the faintest — 5.41:1 */ /* ── The one dark anchor. Active nav, primary button. ─────────────── */ --anchor: var(--ink-navy); --anchor-press: var(--navy-deep); /* #11173A — white stays 17.39:1 */ --on-anchor: #FFFFFF; /* ── Accent: COPPER. Links, the bell badge, the meter fill. ─────────── WHAT WAS HERE BEFORE, AND WHY IT IS NOT ANY MORE. Report 22 ported `design_concept/R1 Dashboard.dc.html` and made two decisions in front of the person who has to look at this every day: * the accent became GREEN, taken from R1's own mark, on the grounds that it was the customer's colour; and * the primary action became DARK INK rather than copper — "the copper primary was chosen against the navy shell and reads as an alert on paper, where amber already means a deadline" — so `--copper-cta` and `--copper-press` were pointed at the anchor and every existing button followed without being edited. THE SEPTEMBER 2026 MOCKUP SUPERSEDES THE FIRST AND KEEPS THE SECOND. Its own stylesheet says `a { color: #A85A22 }` with `#7F4319` on hover; its bell badge is `#A85A22` with white on it; its CE meter is `#A85A22` on an `#EFEBE2` track. And its primary button is still `#1A2547` navy — so the ink anchor survives as `--anchor`, which is what `.ui-btn--primary` actually uses. Green was a decision about one customer; R1 is one customer of several, and copper is the Adealia brand colour that `adealia-tokens.css` has held all along. Report 114; `planning/design/redesign-2026-09.md` §1. THE INK IS `--copper-press`, NOT `--copper-cta`, AND CONTRAST DECIDES THAT. Measured 8 September 2026: `#A85A22` is 4.25:1 on `--chip-bg` and 4.37 on `--tint-bg`, and a link in this app lands on both — inside CE evidence blocks, inside tinted notices, beside a count chip. `#94501E` is the same hue one step down and its WORST ground here is 5.15. Same argument as `--ink-4` above: one value, safe wherever the token lands, rather than a value that is right only where the mockup happened to draw it. ink #94501E 6.13 white · 5.63 page · 5.87 rail · 5.30 tint · 5.15 chip hover #7F4319 7.72 white · 6.49 chip — the mockup's own hover fill #A85A22 white on it is 5.06, which is what a badge needs */ --accent: var(--copper-press); /* #94501E — link and accent INK */ --accent-hi: #7F4319; /* the mockup's link hover */ --action-blue: var(--accent); --blue-deep: var(--accent-hi); --peach: var(--accent); --peach-deep: var(--accent-hi); --copper-deep: var(--accent); /* NOT repointed: `--copper-lift` is the vendored `#E08A45`, and its header says it is for accents ON NAVY only. It is 5.64:1 on `--ink-navy` and 4.59 on `--navy-soft`, which is the darkest the chat bubble's gradient gets. `--accent` on that bubble would be unreadable. */ /* ── Status. Amber is a DEADLINE, not a call to action. ───────────── */ /* WARN GOES BACK TO THE VENDORED PAIR, 8 September 2026. Report 22 had paled `--warn-bg` to a near-white `#FFFBF4` so that a deadline could not be mistaken for a call to action. The September mockup draws the vendored `#FAEBDA` on every "Due tomorrow" chip, and it is the one visible colour this project still disagreed with it about. Report 22's reason survives the change: what stops amber reading as a CTA is that the CTA is navy, which it now is — not that the amber was washed out. `--warn-fg` on it is 7.18:1. `--ok-*` and `--alert-*` are already within a shade of the mockup and are left alone. */ --warn-bg: #FAEBDA; --warn-fg: #7A3D10; --warn-dot: oklch(0.55 0.06 65); --ok-bg: oklch(0.96 0.02 155); --ok-fg: oklch(0.40 0.08 155); --ok-dot: oklch(0.50 0.10 155); --alert-bg: oklch(0.96 0.02 30); --alert-fg: oklch(0.45 0.11 30); --alert-dot: oklch(0.55 0.14 30); /* INFO IS PAPER, NOT BLUE. The concept has no blue in it at all, and a blue notice on this paper is the one thing on a page that belongs to a different design. An explanation is not a status: it gets the tinted row every other quiet block gets, and the colours stay for the three states that actually mean something — ok, warn, alert. */ --info-bg: oklch(0.975 0.008 85); --info-fg: oklch(0.40 0.02 255); --info-dot: var(--muted-ink); --muted-bg: oklch(0.95 0.008 85); --muted-fg: oklch(0.46 0.012 255); --muted-dot: oklch(0.66 0.010 255); /* ── Type ─────────────────────────────────────────────────────────── */ --font-sans: 'Instrument Sans', Helvetica, Arial, sans-serif; /* ONE TYPEFACE. Instrument Sans is the body face and it is the display face too, so the whole UI is one family plus JetBrains Mono for data. That is simpler than any swap: it removes a face from the system rather than exchanging one for another. Two faces were tried and rejected in front of the person who has to look at this every day. Instrument Serif — the concept's choice — read as a newspaper at 46px and, being thin, receded against everything near it. Space Grotesk fixed that and brought its own letterforms with it, which is character a tool does not need. I argued for a distinct display face on the grounds that a heading should not be "large body text". Looking at the render, that was over-weighted: size, weight and colour separate a heading perfectly well, and every modern product UI is built on one family. Harmless beats characterful for a page somebody opens every morning. THREE WEIGHTS SINCE REPORT 114 — 400, 500, 600 — and every one is a real cut. 700 and 800 were spent on 24 headings and a bell badge; the redesign's largest text is 30/600, so 700 had nothing left to separate and asking for it downloaded a cut nothing drew. IBM Plex Sans lost partly on this: it loads 400/500/600 only, so its 700 headings would have been faked — and now nothing needs one. NOTHING IN THE TYPE IS SYNTHESISED. The greeting's one italic word was the last exception until `app.css` started asking for the italic axis; `ital,wght@1,400;1,600` is two more files and a real oblique. */ --font-display: 'Instrument Sans', Helvetica, Arial, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace; /* ── SIX STEPS, THREE WEIGHTS ───────────────────────────────────────── `planning/design/redesign-2026-09.md` §4. The mockup states its own rule and it is the cleanup list: one family, six steps, three weights; no uppercase labels, no 46px page titles, nothing under 13px, and mono reserved for figures and dates so numbers line up in a column. Before this there were nine sizes in the vendored scale, a tenth here, and 119 declarations that used none of them — 61 in `app.css` and 58 in this file, all under 13px. Report 114 has the counts. */ --fs-page-title: 30px; /* 600, -0.02em. Was 46 */ --fs-section: 18px; /* 600 */ --fs-row: 16px; /* 500 — a row's own title */ --fs-body: 16px; /* 400 / 1.55. Was 15 */ --fs-meta: 14px; /* 400, --muted-ink — the line under a title */ --fs-figure: 17px; /* mono 500 — figures and dates ONLY */ /* THE FLOOR, and it is a seventh size rather than a seventh step. A SECTION LABEL — the word over a card, a table header, a folder name. The mockup draws these at 12/600 and its own written rule says nothing under 13; the spec wins where they differ, so this is 13. It is the only thing between `--fs-meta` and the micro-type below, and 33 uppercase labels landed here. */ --fs-label: 13px; /* 600, sentence case, no tracking */ /* NOT TEXT AT ALL, and the only thing in the file allowed under the floor. A count in a pill, a digit on a bell, a five-letter tab caption under an icon — shapes a person recognises rather than reads, which the redesign itself sizes at 11–12 (§5 the bell badge, §6 the tab label, §7 the count pill). If what you are sizing is a sentence, you want `--fs-meta`. */ --fs-micro: 12px; /* THE VENDORED SCALE POINTS AT THE STEPS. `adealia-tokens.css` ships a 1.25-ratio scale from a 15px body — nine sizes, none of them the redesign's — and six hundred lines in this file and `app.css` already say `var(--fs-small)` and `var(--fs-caption)`. Repointing the names moves every one of those onto a step without touching a rule, which is the same move §1 makes with the colours. */ --fs-display: var(--fs-page-title); --fs-h1: var(--fs-page-title); --fs-h2: var(--fs-section); --fs-h3: var(--fs-section); --fs-body-lg: var(--fs-row); --fs-small: var(--fs-meta); --fs-caption: var(--fs-meta); --fs-eyebrow: var(--fs-meta); /* An eyebrow that is not shouted needs no tracking to hold it apart. */ --tracking-eyebrow: 0; /* ── Form ─────────────────────────────────────────────────────────── */ /* 14 -> 12 on a desk, and back to 14 on a phone (§15). `redesign-2026-09` §7 states both, and report 114 §6 named this as the value phase 3 owns. `--shell-radius` below is the CARD THE WHOLE APP SITS IN and is a different object: 18px, §5. */ --radius: 12px; /* cards, tiles */ --shell-radius: 18px; /* the app's own card */ --radius-sm: 10px; /* buttons, inputs */ --radius-nav: 9px; /* nav rows */ --radius-pill: 999px; /* chips, badges */ --shadow-sm: none; --shadow-md: 0 12px 32px color-mix(in srgb, var(--ink-navy) 10%, transparent); --shadow-focus: 0 0 0 2px var(--card-bg), 0 0 0 4px var(--accent); /* DEADLINES ESCALATE IN THREE STEPS, and only the last one is red. `--due-near` pointed at `--warn-dot`, a signal colour bright enough to read as an alarm — so "Due in 59 days" on a licence with three months to run looked exactly as urgent as one that had lapsed. Near is amber, spoken quietly; urgent is amber, spoken; overdue is the only red on the page. */ --due-calm: var(--muted-ink); --due-near: oklch(0.50 0.07 65); --due-urgent: oklch(0.45 0.10 55); --due-past: oklch(0.45 0.15 30); } /* ── 1b. The shell is light, and the anchor is one dark pill ────────────── 252px rail on `--rail-bg`, one hairline against the page. The only filled shape in it is the active row, and that single dark pill is what gives a light shell its silhouette. 264 -> 252 is `redesign-2026-09.md` §5's number, and report 114 §6 named it for this phase. Every label still fits on one line: "Continuing education" is the longest and it is 158px inside a 224px content box. */ .sidebar { width: 252px; background: var(--rail-bg); border-right: 1px solid var(--line); padding: 22px 14px 16px; gap: 26px; } /* THE NAV IS THREE GROUPS AND THE GROUPING IS THE POINT — §5, and §26 has the whole argument. The gap that used to sit between ROWS now sits between GROUPS; each group keeps the 2px it had. */ .nav { gap: 18px; } .nav-group { display: flex; flex-direction: column; gap: 2px; } .nav-group__label { margin: 0 0 4px; padding: 0 10px; font-size: var(--fs-label); font-weight: 600; color: var(--ink-4); /* 5.18:1 on the rail */ } .nav-item { padding: 9px 12px; border-radius: var(--radius-nav); font-size: 14px; font-weight: 500; color: var(--ink-3); background: none; box-shadow: none; } .nav-item:hover { background: var(--card-bg); color: var(--ink-1); } .nav-item.active { background: var(--anchor); color: var(--on-anchor); font-weight: 600; box-shadow: none; } .nav-item .ico { color: currentColor; } /* THE OUTBOUND LINKS BECOME CHIPS. Eleven rows that leave the product used to occupy more of the rail than the product's own pages; as chips they wrap into three lines and stop competing. */ /* §5 SEPARATES THE OUTBOUND LINKS FROM THE NAV WITH A HAIRLINE, and the rule is doing work rather than decorating: above it are this product's own pages, below it are seven addresses that leave it. 26px of rail gap alone did not say which was which. */ .links-section { border-bottom: 0; border-top: 1px solid var(--line-2); padding: 16px 0 0; overflow: visible; } .side-group { display: flex; flex-direction: column; gap: 8px; } .side-group-label { font-family: var(--font-sans); font-size: var(--fs-label); font-weight: 600; color: var(--ink-4); padding: 0 8px; } .side-group:has(.side-link) { display: block; } .side-group:has(.side-link) .side-group-label { display: block; margin-bottom: 8px; } .side-link { display: inline-flex; align-items: center; gap: 5px; margin: 0 6px 6px 0; padding: 5px 10px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--card-bg); font-size: var(--fs-label); font-weight: 500; color: var(--ink-2); } .side-link:hover { border-color: var(--ink-4); color: var(--ink-1); background: var(--card-bg); } .side-link .ico { display: none; } /* a chip is a word, not a word and a glyph */ .product-link { border-radius: var(--radius-nav); color: var(--ink-3); padding: 8px 10px; } .product-link:hover { background: var(--card-bg); color: var(--ink-1); } .product-link.current { background: var(--ok-bg); color: var(--ok-fg); } .product-link.current .ico { color: var(--ok-fg); } .prod-sub { color: var(--ink-4); } .sidebar-foot, .powered { color: var(--ink-4); border-top: 1px solid var(--line); } .conv-item { color: var(--ink-3); border-radius: var(--radius-nav); } .conv-item:hover { background: var(--card-bg); } .conv-item.active { background: var(--anchor); color: var(--on-anchor); box-shadow: none; } .conv-empty, .hist-head { color: var(--ink-4); } .new-chat-mini { background: var(--card-bg); border-color: var(--line); color: var(--ink-2); } /* The brand block: a green chip with the initial, the firm, and one quiet line under it. */ .brand-r1 { border-radius: 9px; } .brand-logo { filter: none; opacity: 1; } /* ── The top bar is paper, not a dark band ────────────────────────────── §26: CARD WHITE, NOT RAIL. The mockup's header is `#FFFFFF` with the search field on `#FBFAF6` inside it, and this had the two the other way round — a rail-coloured band with a white box in it. Swapping them is what makes the header read as the top of the card rather than as a second rail, and it puts the one thing in the header a person types into on the one fill §7 gives a search box. The rule under it drops to the hairline, because it separates two parts of one card. */ .main-col > header { background: var(--card-bg); border-bottom: 1px solid var(--line-2); backdrop-filter: none; padding: 14px clamp(16px, 4vw, 28px); } /* AND THE LEFT SIDE IS GIVEN BACK BELOW 900px, WHICH IS NOT DECORATION. `app.css` reserves 62px of header padding there so the `position: fixed` rail toggle never sits on the header's own content. The shorthand above loads after it and resets that side to 16px — which put 40px of `.topsearch` underneath the toggle on a phone. Reported by Danny on 8 September 2026 and measured at 390px: toggle 12→56, search box 16→276. A shorthand in one file quietly undoing a longhand in another is the whole failure, so the clearance is restated here, where the shorthand can be seen next to it. */ @media (max-width: 900px) { .main-col > header { padding-left: 62px; } } .brand-name { color: var(--ink-1); font-weight: 600; } .brand-section { color: var(--ink-3); font-weight: 500; } .brand-section::before, .brand-sep { color: var(--ink-4); } .bell { color: var(--ink-2); border-radius: 10px; } .bell:hover { color: var(--ink-1); background: var(--card-bg); } .user-chip { border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--card-bg); padding: 5px 10px 5px 6px; } .user-chip:hover, .user-menu.is-open .user-menu-btn { background: var(--rail-bg); } .user-name { color: var(--ink-1); font-weight: 600; } .user-role, .user-menu-caret { color: var(--ink-4); } .avatar { background: var(--anchor); color: var(--on-anchor); background-image: none; } .admin-bar { background: var(--warn-bg); color: var(--warn-fg); border-bottom: 1px solid var(--line); border-radius: 0; } /* Flat. The concept has no gradients and they were the most dated thing in the stylesheet. */ .brand-mark, .welcome-mark, .msg.user .bubble, .auth-mark { background-image: none; } /* ── 1c. Home: the greeting, the stat row, the two columns ──────────────── These three are the concept's Home, and they are the classes the template was written against. Shipped in that order by mistake once — the markup landed a step ahead of the CSS, and the page rendered as a stacked list of unstyled labels with the card headers jammed against the edges. */ .ui-page-head--home { align-items: flex-start; margin-bottom: var(--space-6); } .ui-greeting { font-family: var(--font-display); font-size: var(--fs-page-title); font-weight: 400; line-height: 1.05; letter-spacing: -0.01em; color: var(--ink-1); margin: var(--space-2) 0 0; } /* ONE WORD IN ITALIC. The name, and nothing else, ever. */ /* A REAL oblique since report 114 — `app.css` asks for Instrument Sans's italic axis, so the browser no longer slants an upright by hand. The slant is what marks the name as the only personal word on the page. Report 22 gave that job to a serif italic; the job survives the face changing. */ .ui-greeting em { font-style: italic; } .ui-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-6); } .ui-stat { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; background: var(--card-bg); border: 1px solid var(--line-2); border-radius: var(--radius); } .ui-stat__label { margin: 0; font-size: 13px; font-weight: 500; color: var(--ink-3); } .ui-stat__value { margin: 0; font-family: var(--font-display); font-size: 34px; font-weight: 400; line-height: 1; color: var(--ink-1); font-variant-numeric: tabular-nums; } .ui-stat__sub { margin: 0; font-size: var(--fs-meta); color: var(--ink-4); } .ui-stat__sub.is-warn { color: var(--warn-fg); } /* The split. 1100px is where the side column stops earning its width. */ .ui-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: var(--space-4); align-items: start; } .ui-split--single { grid-template-columns: minmax(0, 1fr); } .ui-split__main, .ui-split__side { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; } @media (max-width: 1100px) { .ui-split { grid-template-columns: minmax(0, 1fr); } } /* A FLUSH CARD HAS NO PADDING, so the band must not pull itself out of it. `.ui-card__band` escapes a padded card with a negative margin; on a flush card that negative margin has nothing to cancel and drags the heading outside the border — the header sat clipped, half above the card. */ .ui-card--flush > .ui-card__band { margin: 0; border-radius: var(--radius) var(--radius) 0 0; } .ui-card--flush > *:not(.ui-card__band) { margin-inline: var(--space-5); } .ui-card--flush > *:last-child { margin-bottom: var(--space-5); } /* ── 1d. Corrections measured against the concept ───────────────────────── Every value here was WRONG until it was compared side by side with `design_concept/R1 Dashboard.dc.html` at 1440px, reading computed styles from both pages rather than trusting the port. Copying a design by eye gets the colours and misses the millimetres, and the millimetres are the difference between "close" and "the same". */ body { font-size: 16px; } /* was 15 */ /* 400 was here because Instrument Serif shipped no bold and the browser synthesised one. 600 is chosen and real: at 46px a 400 reads thin, and Instrument Sans has a true 600. */ .ui-greeting, .ui-page-head h1 { font-weight: 600; } /* §3 and §20 now set this: 13/600, sentence case, no tracking. The 0.14em that was here existed to hold 11px capitals apart, and there are no capitals left to hold. Report 114. */ .ui-eyebrow { letter-spacing: 0; } .ui-stat__label { font-size: var(--fs-meta); } /* was 13 */ /* The concept's buttons are padded, not fixed-height. A height plus zero vertical padding gave a shorter control and a different optical weight. */ .ui-btn { height: auto; padding: 11px 18px; font-size: 13.5px; line-height: 1; } .ui-btn--sm { padding: 7px 12px; font-size: var(--fs-label); } .ui-page { padding: 34px 40px 56px; } /* was 32px 40px 72px */ /* ── 2. The page shell ──────────────────────────────────────────────────── ONE wrapper and ONE header for every page. This replaces `.dash`, `.people`, `.page` and `.prof` (three different max-widths) and `.dash-head`, `.people-head`, `.prof-head`, `.ev-head` and `.lib-head` (five headers for one concept, one page stacking two of them). 1240px, not 1040: at 1440 the old column left a 240px dead gutter beside a 262px sidebar, so 48% of the viewport was empty paper on the CE page. */ .ui-page { flex: 1; overflow-y: auto; width: 100%; max-width: 1240px; margin: 0 auto; padding: var(--space-7) clamp(var(--space-4), 4vw, var(--space-8)) var(--space-10); } .ui-page-head { display: flex; align-items: flex-end; justify-content: space-between; /* ROW-GAP 0, deliberately. A single `gap` also applies between wrapped flex ROWS, so on the pages whose subtitle is a direct child rather than inside `__text` it added 16px on top of the subtitle's own 8px margin — the h1-to-subtitle step measured 8px on eight pages and 24px on Profile and the Licensing queue, and pushed the queue's back link to 28px above its title. The columns still need their gap; the rows never did. */ row-gap: 0; column-gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-6); } .ui-page-head__text { min-width: 0; } /* TOLERANT OF BOTH SHAPES. Some pages wrap their title and subtitle in a `__text` div so an action can sit beside them; others put the back link, the h1 and the subtitle straight in. Rather than force one markup, the direct children that should own a line claim one. */ .ui-page-head > .ui-back, .ui-page-head > h1, .ui-page-head > .ui-page-head__sub { flex: 0 0 100%; } .ui-page-head > h1 + .ui-page-head__sub { margin-top: var(--space-2); } .ui-page-head h1 { font-family: var(--font-display); font-size: var(--fs-page-title); font-weight: 600; letter-spacing: var(--tracking-display); line-height: var(--lh-tight); color: var(--ink-1); margin: 0; text-wrap: balance; } .ui-page-head__sub { font-size: var(--fs-small); color: var(--ink-3); margin: var(--space-2) 0 0; } .ui-page-head__actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } /* The route back up. Sits ABOVE the title, not beside it, so it never competes with the h1 for the first fixation. */ .ui-back { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--fs-small); font-weight: 500; color: var(--ink-3); text-decoration: none; margin-bottom: var(--space-3); } .ui-back:hover { color: var(--copper-cta); } /* The section crumb in the header. Quiet — it says where you are, and the page's own

says what this is. The separator is a pseudo-element so a page that sets no section renders neither, with no conditional. */ .brand-section { color: var(--ink-2); font-weight: 500; } .brand-section:empty { display: none; } .brand-section::before { content: "/"; color: var(--ink-4); font-weight: 400; margin: 0 var(--space-2); } /* ── 3. Eyebrow, and the end of shouting ────────────────────────────────── There were eight specifications for one label style — 10.5/11/12/13px, in three colours and four letter-spacings — so "WHAT YOU NEED TO DO" shouted louder than the content of its own card while "ROLE" was nearly invisible. ONE eyebrow, and it labels a SECTION. A field label is not an eyebrow: it is sentence case, and it is quiet, because the value is the thing being read and the label is only there to say what it is. */ /* THE END OF SHOUTING, FINISHED. §3 gave the app one eyebrow instead of eight and left it uppercase; report 114 takes the caps off it too. It is the section label now — 13/600, sentence case, sans, no tracking — and nine other labels in this file were made the same thing. */ .ui-eyebrow { font-family: var(--font-sans); font-size: var(--fs-label); font-weight: 600; color: var(--ink-3); margin: 0; } .ui-label { display: block; font-size: var(--fs-caption); font-weight: 500; color: var(--ink-3); margin-bottom: var(--space-1); text-transform: none; letter-spacing: 0; } .ui-value { font-size: var(--fs-body); font-weight: 500; color: var(--ink-1); } /* The same rule, applied to the labels that already exist under their own names. These are FIELD labels — "Full name", "Phone", "Office" — and every one of them was 11px uppercase with letter-spacing, which is an eyebrow. An eyebrow labels a section; there is one per screen. Forty of them down a form is just shouting, and it was loud enough that "ROLE" competed with the person's name for attention on the roster. */ .ui-page .prof-grid > label, .ui-page .lic-grid > label, .ui-page .prof-readonly dt, .ui-page .person-label, .ui-page .ev-desc-label, .ui-page .course-search label, .ui-page .auth-label { font-family: var(--font-sans); font-size: var(--fs-caption); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-3); } /* ONE TEXT EDGE PER CARD. A label's ink started at the control's BOX edge while the control's own text started 13px further in — 1px border plus 12px padding — so every label on every form sat 13px left of the value it described. Measured at exactly 13.00px on twenty pairs. Worse, the read-only rows on the SAME Profile card measured 0.00px, so one card held two different text edges twenty pixels apart, which is what makes a form read as unaligned even when nobody can say why. `text-indent` rather than padding, because these labels WRAP their control — padding would move the input too and preserve the offset. text-indent inherits, so the nested control has to put it back. */ .ui-page .prof-grid > label, .ui-page .lic-grid > label, .ui-page .ev-desc-label, .ui-page .course-search label, .ui-page .auth-label { text-indent: calc(var(--space-3) + 1px); } .ui-page .prof-grid > label > input, .ui-page .prof-grid > label > select, .ui-page .lic-grid > label > input, .ui-page .lic-grid > label > select, .ui-page .ev-desc-label > textarea, .ui-page .course-search label > input, .ui-page label > .ui-file { text-indent: 0; } /* The read-only pairs join the same edge, so the card has one. */ .ui-page .prof-readonly dt, .ui-page .prof-readonly dd { padding-left: calc(var(--space-3) + 1px); } /* A standalone label above a control does not wrap it, so padding is right. */ .ui-label { padding-left: calc(var(--space-3) + 1px); } /* The label wraps its control on these forms, so only its own first line should carry the label styling — the value inside stays full size. */ .ui-page .prof-grid > label > input, .ui-page .prof-grid > label > select, .ui-page .lic-grid > label > input, .ui-page .lic-grid > label > select { font-size: var(--fs-body); color: var(--ink-1); margin-top: var(--space-1); } .ui-page .prof-readonly dd { font-size: var(--fs-body); color: var(--ink-1); } /* ── 4. Card ────────────────────────────────────────────────────────────── A line, not a shadow. */ .ui-card { background: var(--surface-3); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-5) var(--space-5); } .ui-card--sunken { background: var(--surface-2); border-color: var(--line-2); } .ui-card--flush { padding: 0; overflow: hidden; } /* ADE-176. The queue card Licensing's task links to by fragment. `.main-col > header` is `position: sticky; top: 0`, so a bare anchor scrolls the card's own heading underneath the bar. This is the browser's own answer to that and needs no JavaScript. 84 is the bar's measured bottom edge — 74px at 1280px — plus ten; the walkthrough asserts the card's top edge is BELOW the bar rather than trusting the number. */ .ce-queue-card { scroll-margin-top: 84px; } .ui-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); } .ui-card__title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.01em; color: var(--ink-1); margin: 0; } /* ── 5. Buttons ─────────────────────────────────────────────────────────── ONE copper action per view, on the REPEATING action. The rule existed and was applied backwards: the Events page had four navy Register buttons and no copper at all, while the Admin page gave a 910px full-bleed copper bar to "Create brokerage" — the least frequent action on it. Copper marks the thing you came to do, at a normal size. */ .ui-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: 34px; padding: 0 var(--space-4); font-family: var(--font-sans); font-size: var(--fs-small); font-weight: 600; line-height: 1; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; } .ui-btn:disabled { opacity: 0.45; cursor: not-allowed; } .ui-btn--primary { background: var(--copper-cta); color: var(--on-anchor); border-color: var(--copper-cta); } .ui-btn--primary:hover:not(:disabled) { background: var(--copper-press); border-color: var(--copper-press); color: var(--on-anchor); } .ui-btn--secondary { background: var(--surface-3); color: var(--ink-1); border-color: var(--line-input); } .ui-btn--secondary:hover:not(:disabled) { background: var(--surface-2); border-color: var(--ink-4); } .ui-btn--ghost { background: none; color: var(--ink-2); border-color: transparent; padding: 0 var(--space-2); } .ui-btn--ghost:hover:not(:disabled) { background: var(--surface-2); color: var(--ink-1); } /* Destructive, and deliberately NOT a text link beside a solid button. Approve and Reject carry equal consequence — a rejection reaches a broker — and they were rendered at wildly unequal weight. */ .ui-btn--danger { background: var(--surface-3); color: var(--alert-fg); border-color: var(--alert-dot); } .ui-btn--danger:hover:not(:disabled) { background: var(--alert-bg); } .ui-btn--sm { height: 28px; padding: 0 var(--space-3); font-size: var(--fs-caption); } /* ── 6. Form controls ───────────────────────────────────────────────────── The base rule is UNSCOPED. It was scoped to `.auth-form` and `.panel`, so every field outside those two containers rendered as an operating-system default: 48 native selects on the roster, `mm/dd/yyyy` on the CE form, and two raw "Choose File" buttons on the page Licensing uses most. */ /* SELECTED BY EXCLUSION, not by enumeration. The list used to name seven types, so `tel`, `url`, `time`, `datetime-local`, `month` and `week` fell through to the browser default — the Phone field on Profile rendered 33px tall in Arial with a 10px text inset, in a row beside two 36px IBM Plex fields. The focus rule below already used a bare `input`, so the two rules disagreed about which controls existed. Any future input type is now styled by default and has to opt OUT. */ .ui-input, .ui-page input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]), .ui-page select, .ui-page textarea { width: 100%; min-height: 36px; padding: 0 var(--space-3); font-family: var(--font-sans); /* 16px on a phone or iOS zooms the whole page on focus. The rule this replaces was found by that happening. */ font-size: var(--fs-body); color: var(--ink-1); background: var(--surface-3); border: 1px solid var(--line-input); border-radius: var(--radius-sm); appearance: none; -webkit-appearance: none; } .ui-page textarea { padding: var(--space-2) var(--space-3); min-height: 80px; resize: vertical; } .ui-page input::placeholder, .ui-page textarea::placeholder { color: var(--ink-4); } /* The chevron is ours because `appearance: none` removes the platform's. */ .ui-page select { padding-right: var(--space-7); background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%234F6178' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--space-3) center; } .ui-page input:focus-visible, .ui-page select:focus-visible, .ui-page textarea:focus-visible, .ui-input:focus-visible { outline: none; border-color: var(--action-blue); box-shadow: var(--shadow-focus); } /* A file input cannot be styled, so it is hidden behind a label that can be. `.ui-file input` stays focusable — it is moved out of sight, not removed, because `display: none` would take it out of the tab order. */ .ui-file { display: inline-flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; } .ui-file input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; } .ui-file__button { /* Explicit, because the legacy upload forms set uppercase on their labels and this button sits inside one. */ text-transform: none; letter-spacing: 0; display: inline-flex; align-items: center; gap: var(--space-2); height: 34px; padding: 0 var(--space-4); font-size: var(--fs-small); font-weight: 600; color: var(--ink-1); background: var(--surface-3); border: 1px solid var(--line-input); border-radius: var(--radius-sm); cursor: pointer; } .ui-file__button:hover { background: var(--surface-2); } .ui-file input[type="file"]:focus-visible + .ui-file__button { border-color: var(--action-blue); box-shadow: var(--shadow-focus); } .ui-file label { display: inline-flex; position: relative; } /* WHAT IS STAGED FOR UPLOAD. ADE-184. `.ui-file` hides the native control, so the filename it would have printed has to be printed here instead. Empty and `hidden` until `chrome.js` has something to say, so a form with no file chosen looks exactly as it did before this existed. The `[hidden]` rule is not redundant: `display: block` below would otherwise beat the browser's own `[hidden] { display: none }`, and the panel would render as an empty box under every picker on the page. */ .ui-file-staged { display: block; margin-top: var(--space-3); } /* The library's upload form is a horizontal flex row — Choose, Upload, hint — so the panel has to break the row rather than become a squeezed column between the two buttons. Measured at 1280px: without this the file names wrap to two lines and push `Upload` to the right of them. */ .lib-upload .ui-file-staged { flex-basis: 100%; margin-top: 0; } .ui-file-staged[hidden] { display: none; } .ui-file-staged__list { margin: 0; padding: 0; list-style: none; } .ui-file-staged__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3); padding: 6px 0; font-size: var(--fs-small); color: var(--ink-2); } .ui-file-staged__row + .ui-file-staged__row { border-top: 1px solid var(--line-2); } /* The name can be a phone camera's 40-character filename, so it wraps rather than pushing the size off a 390px screen. `anywhere` and not `break-all`: a name breaks at its own separators first. */ .ui-file-staged__name { font-weight: 600; overflow-wrap: anywhere; min-width: 0; } .ui-file-staged__size { color: var(--ink-4); font-variant-numeric: tabular-nums; } /* A whole-row line rather than a badge: it is a sentence about what will happen to this file, not a status word. */ .ui-file-staged__warn { flex-basis: 100%; color: var(--warn-fg); } .ui-file-staged__row.is-over .ui-file-staged__name { color: var(--warn-fg); } /* A 34px tap target, matching `.ui-file__button` beside it. The phone sweep measures this — it did NOT when this comment was first written, and review caught the comment rather than the CSS: `walk_a_file_is_staged` ran only from desktop walks and `walk_phone` staged no file at all. It stages one on `/resources` now and measures this box, which is the case the ticket is about — a broker attaching a certificate from her phone. */ .ui-file-staged__clear { display: inline-flex; align-items: center; margin-top: var(--space-2); min-height: 34px; padding: 0 var(--space-3); font-size: var(--fs-small); font-weight: 600; color: var(--ink-2); background: transparent; border: 1px solid var(--line-input); border-radius: var(--radius-sm); cursor: pointer; /* The label carries a filename, so it must be free to wrap. */ text-align: left; overflow-wrap: anywhere; } .ui-file-staged__clear:hover { border-color: var(--ink-4); color: var(--ink-1); } .ui-file-staged__clear:focus-visible { outline: none; border-color: var(--action-blue); box-shadow: var(--shadow-focus); } /* A plain count beside a section name. Not a status, so not a badge. */ .course-count { font-size: var(--fs-small); color: var(--ink-3); } .ui-field { display: flex; flex-direction: column; } .ui-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-4); } .ui-hint { font-size: var(--fs-caption); color: var(--ink-3); margin: var(--space-1) 0 0; } /* ── 7. Badge ───────────────────────────────────────────────────────────── Five validated semantic pairs sat unused while status was rendered as grey body text — "active" was a word inside a native select, "Needs review" was copper text with no chip. Colour now carries the state, and the text still carries it too, so nothing depends on seeing hue. */ .ui-badge { display: inline-flex; align-items: center; /* ASYMMETRIC PADDING, because the dot is not symmetric load. With 12px on both sides plus a 6px dot and an 8px gap, the text sat 26px from the left edge and 12px from the right — a chip that looks left-heavy however carefully the padding was matched. 8/12 with a 4px gap puts the OPTICAL centre where the mathematical one was supposed to be. */ gap: var(--space-1); height: 22px; padding-inline: var(--space-2) var(--space-3); border-radius: var(--radius-pill); font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; } .ui-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; } .ui-badge--ok { background: var(--ok-bg); color: var(--ok-fg); } .ui-badge--warn { background: var(--warn-bg); color: var(--warn-fg); } .ui-badge--alert { background: var(--alert-bg); color: var(--alert-fg); } .ui-badge--info { background: var(--info-bg); color: var(--info-fg); } .ui-badge--muted { background: var(--muted-bg); color: var(--muted-fg); } .ui-badge--bare::before { display: none; } /* ── 8. Table ───────────────────────────────────────────────────────────── Twelve people rendered as twelve 87px cards — about four and a half rows on a 900px screen. The Admin users page already proved the app could do better at 37px a row, which is why it read more like a product than the People page did. One card around the whole table, hairlines between rows, no shadow. */ .ui-table-wrap { background: var(--surface-3); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .ui-table-scroll { overflow-x: auto; } .ui-table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); } .ui-table th { text-align: left; padding: var(--space-3) var(--space-4); font-size: var(--fs-label); font-weight: 600; color: var(--ink-3); background: var(--surface-3); border-bottom: 1px solid var(--line); white-space: nowrap; } .ui-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line-2); color: var(--ink-2); vertical-align: middle; } .ui-table tbody tr:last-child td { border-bottom: 0; } .ui-table tbody tr:hover { background: var(--surface-2); } .ui-table__num { font-variant-numeric: tabular-nums; white-space: nowrap; } .ui-table__right { text-align: right; } /* The whole row is the target, and the name is still the accessible link. The pseudo-element covers the row, so a click anywhere lands on the anchor without nesting one inside every cell. */ .ui-table tbody tr { position: relative; } .ui-table__link { font-weight: 600; color: var(--ink-1); text-decoration: none; } /* SCOPED TO A ROW, AND THAT IS ADE-70's FINDING RATHER THAN TIDINESS. `position: absolute; inset: 0` is positioned against the nearest POSITIONED ancestor, and the only thing that makes that the row is `.ui-table tbody tr { position: relative }` two rules up. Used ANYWHERE ELSE the anchor has no positioned ancestor, so `inset: 0` resolves against the page — and the pseudo-element becomes an invisible full-page shield that swallows every click under it. Measured 5 September 2026. ADE-70 put `ui-table__link` on the links to the other occurrences of a repeating event, in a `