` itself leaves it at 0. In `layout="column"` it is `

`, below. */ @property --citrine-app-gutter { syntax: ''; inherits: true; initial-value: 0px; } .citrine-app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .citrine-app-content { flex: 1; min-width: 0; } /* ── layout="column": THE CENTRED COLUMN (opt-in) ────────────────────────────────────────────── On a desk the page area is a column, min(column-max, column-share of the content width), centred — and the content element's own PADDING is the column, rather than every child centring itself. A child that centres itself with `margin-inline: auto` does nothing if it is inline-level: an `inline-flex` row of tabs would sit to the left of every block sibling. Inside the padding, block, inline and floated alike are in the column because the column is the content box. The width it is computed from is the frame's: `.citrine-app-main` becomes the `citrine-app` container, the content area beside the rail. Only in this layout — a size container is also a containing block for fixed-position descendants, which the default layout does not impose. The phone is untouched: no column, and a gutter of 0 here (`Page` supplies its own below the breakpoint). */ .citrine-app-main:has(> .citrine-app-content-column) { container: citrine-app / inline-size; } .citrine-app-content-column { --citrine-app-gutter: calc( (100cqi - min(var(--citrine-appshell-column-max), var(--citrine-appshell-column-share) * 100cqi)) / 2 ); padding-inline: var(--citrine-app-gutter); } @media (max-width: 900px) { .citrine-app-content-column { --citrine-app-gutter: 0px; } } /* Inside the column, on a desk, a `Page` adds no side padding and no cap of its own — two would stack and a heading would miss the column's edge — and its gutter is the column's. Said through `Page`'s own hooks rather than a selector for its class, so each sheet styles only its own classes. `var(--citrine-app-gutter)` resolves HERE, to the column's pixels, and reaches the page as that. */ @media not all and (max-width: 900px) { .citrine-app-content-column { --citrine-page-pad-inline: 0px; --citrine-page-gutter: var(--citrine-app-gutter); --citrine-page-max: none; } } /* The skip link's target, not a Tab stop. Focused only by the skip link, where a ring around the whole page would say nothing the move itself has not. */ .citrine-app-content:focus { outline: none; } /* ── The skip link ──────────────────────────────────────────────────────────────────────────── Off screen until it has keyboard focus, then a solid action-ink pill in the top-left corner, above the sticky rail and top bar. Moved with a transform rather than clipped, so it reads as arriving rather than as appearing from nowhere. */ .citrine-skiplink { position: fixed; top: var(--citrine-sp-3); left: var(--citrine-sp-3); z-index: calc(var(--citrine-z-sticky) + 2); /* It lands on the rail's brand row, so it is as wide as that row — the rail (`--citrine-sidebar-width`) less its two 12px insets — and as tall as the hero. Shorter, it left the tail of the brand name showing past its edge like a stray glyph (finish review, 2026-09-11). */ display: inline-flex; align-items: center; justify-content: center; min-width: calc(var(--citrine-sidebar-width) - 2 * var(--citrine-sp-3)); min-height: 40px; padding: var(--citrine-sp-2) var(--citrine-sp-4); border-radius: var(--citrine-r-sm); background: var(--citrine-accent); color: var(--citrine-accent-ink); font-size: var(--citrine-font-size-14); font-weight: var(--citrine-font-weight-600); text-decoration: none; transform: translateY(calc(-100% - var(--citrine-sp-4))); } /* The ring sits INSIDE the pill, in the pill's own ink, so it shows wherever the pill lands — on the navy rail, where an accent ring outside it was navy on navy, and on a white top bar alike. */ .citrine-skiplink:focus-visible { transform: none; outline: 2px solid var(--citrine-accent-ink); outline-offset: -5px; } /* PINNED TO THE BOTTOM OF THE SCREEN, not to the bottom of the page. As a plain flex item this sat below the content — on a long page that put it a screen and a half under the fold, so the only navigation a phone has was reachable only by scrolling to the very end of whatever you were reading. Measured on a 844px viewport: the bar's top was at y=2073. `sticky`, NOT `fixed`. A fixed bar leaves the flow, so it hangs OVER the last band of content and every page then owes it a matching `padding-bottom` — a debt each consumer pays separately and one of them always forgets. Sticky keeps the element's box in the flow (the space is reserved, nothing is ever covered at the end of a page) while painting it against the viewport for the rest. The containing block is `.citrine-app-main`, which spans the whole page, so it is stuck from the first pixel of scroll to the last. Nothing between here and there may set `overflow` to anything but `visible` — an ancestor scrollport would re-anchor the stickiness to itself and silently undo this. That is why `.citrine-app-content` has no overflow of its own. Same z as `Topbar`, which is the other chrome pinned against the viewport. It never competes with the sidebar's `+1`: the bar is only shown where the rail is not (see the swap below). */ .citrine-app-mobile-nav { display: none; flex: none; position: sticky; bottom: 0; z-index: var(--citrine-z-sticky); } /* ── THE SWAP: `navSwitch` ────────────────────────────────────────────────────────────────────── The rail and the small-screen bar are this frame's slots, so the frame decides which is on screen; neither `Sidebar` nor `BottomBar` hides itself. At the switch width the rail's slot goes and the bar's slot comes, so exactly one of the two is on screen at any width: navSwitch="md" (default) at `--citrine-bp-md`, 900px navSwitch="sm" at `--citrine-bp-sm`, 820px navSwitch="never" no swap: the rail stays at every width, and `mobileNav` is never rendered A CONTRACT: a consumer's regression helper picks which navigation to drive by which one is visible at a given width, so the width each value swaps at is an interface. Media queries cannot read `var()`, so each value is its own block over the build-time `@custom-media` breakpoint. The rail's slot is `display: contents`, so the rail stays a flex item of `.citrine-app` exactly as if it had no wrapper — its sticky position and width are its own. THE HERO'S RISE IS RESERVED TOO (finish review, 2026-09-11). Sticky reserves the bar's own box and nothing above it, but `BottomBar`'s hero stands out of the top of that box: its foot 29px up (2.1), 60px tall and a 5px ring, against a bar about 65px tall — 24px of circle above the bar, 29px with the ring. At the end of a short page it landed on the last card. A top MARGIN reserves the rise: never painted and never catching a tap, so while the bar is stuck mid-scroll it costs nothing. Only where the bar is shown, and only when it carries a hero. FITTING CONSTANT — it follows `.citrine-bottombar-hero`; re-measure if that rule's `bottom`, `height` or ring change. THE BAR'S MEASURE, HANDED OVER (for `StepShell tailOffset="bottombar"`). Anything in the page that pins itself to the foot of the screen has to stand on the bar, not under it, and it must not learn that from a selector on the bar's classes. So the frame exposes two declared tokens, both 0px by default and wherever the bar is not shown: `--citrine-app-bottom-inset` — the bar slot's whole box, measured in `AppShell.tsx` (why measured: see `useBottomInset`), safe-area padding included; `--citrine-app-bottom-rise` — the hero's rise above that box: the SAME reserve as the margin below, set here on the frame so it reaches `

`, the slot's sibling (custom properties only flow down). */ .citrine-app-rail { display: contents; } @media (max-width: 900px) { .citrine-app-nav-md > .citrine-app-rail { display: none; } .citrine-app-nav-md .citrine-app-mobile-nav { display: block; } .citrine-app-nav-md .citrine-app-mobile-nav:has(.citrine-bottombar-hero) { margin-top: var(--citrine-bottombar-hero-rise, var(--citrine-sp-8)); } .citrine-app-nav-md:has(> .citrine-app-main > .citrine-app-mobile-nav .citrine-bottombar-hero) { --citrine-app-bottom-rise: var(--citrine-bottombar-hero-rise, var(--citrine-sp-8)); } } @media (max-width: 820px) { .citrine-app-nav-sm > .citrine-app-rail { display: none; } .citrine-app-nav-sm .citrine-app-mobile-nav { display: block; } .citrine-app-nav-sm .citrine-app-mobile-nav:has(.citrine-bottombar-hero) { margin-top: var(--citrine-bottombar-hero-rise, var(--citrine-sp-8)); } .citrine-app-nav-sm:has(> .citrine-app-main > .citrine-app-mobile-nav .citrine-bottombar-hero) { --citrine-app-bottom-rise: var(--citrine-bottombar-hero-rise, var(--citrine-sp-8)); } } /* A `BottomBar hideOnScroll` that has tucked itself away is not standing at the foot of the screen, so nothing pinned there (`StepShell tailOffset="bottombar"`) should keep standing on it. The bar's box has not changed — it slid by a transform — so the measured inset would otherwise hold the tail a bar's height above an empty edge. `!important` because `useBottomInset` writes the inset INLINE on the frame; a stylesheet rule beats an inline one only that way. Focus inside the bar brings it back, and the tail with it. */ .citrine-app-nav-md:has( > .citrine-app-main > .citrine-app-mobile-nav .citrine-bottombar.citrine-is-tucked:not(:focus-within) ), .citrine-app-nav-sm:has( > .citrine-app-main > .citrine-app-mobile-nav .citrine-bottombar.citrine-is-tucked:not(:focus-within) ) { --citrine-app-bottom-inset: 0px !important; --citrine-app-bottom-rise: 0px !important; } /* ── The phone drawer (`navDrawerOpen`) ─────────────────────────────────────────────────────── The drawer's body is a full-height column, so the rail inside fills it top to bottom and its own body band is the one thing that scrolls. The drawer's width is `--citrine-appshell-navdrawer-width` (the rail's) capped at `-max` of the window, set on antd's panel by `AppShell.tsx`. */ .citrine-app-navdrawer-body { display: flex; flex-direction: column; height: 100%; } /* ── Avatar ────────────────────────────────────────────────────────────────────────────── */ /* UI kit — Avatar styles. Source: artifact `.avatar` / `.av` / `.rowav` (citrine-reference.css 167, 187, 204, 407). Colours are set inline per-instance (deterministic-from-name), so this file only carries shape/typography. */ .citrine-avatar { font-weight: var(--citrine-font-weight-700); font-size: var(--citrine-font-size-12); } /* Group A audit (RULING D11, 2026-09-10): `.citrine-avatar-square` used to carry `border-radius: var(--citrine-r-sm) !important`, and its own comment said what that was for — an `!important` written so "our 10px Citrine radius wins" over antd's own square-shape rule. That is a brand radius painted straight onto the antd element, the same species D10 removed from `Segmented`, so it is gone: `shape="rounded-square"` now renders antd's square avatar at antd's own radius. The class is still emitted — it is a public styling hook and `Avatar.test.tsx:22` asserts its presence — it simply carries no declaration of its own any more. The two rules above are NOT in the same category and were left alone deliberately: they set the initials' weight and size, which antd derives from the avatar's pixel size, so removing them changes how initials fit inside every avatar size. That is a judgement call for the owner, and it is written up in the Group A audit rather than guessed at here. */ /* ── Badge ─────────────────────────────────────────────────────────────────────────────── */ /* UI kit — Badge styles. Source: artifact `.badge` family (citrine-reference.css 368-370). */ .citrine-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 var(--citrine-space-6); border-radius: var(--citrine-r-pill); background: var(--citrine-data); color: var(--citrine-data-ink); font-size: var(--citrine-font-size-11); font-weight: var(--citrine-font-weight-700); font-variant-numeric: tabular-nums; } .citrine-badge-accent { background: var(--citrine-accent); color: var(--citrine-accent-ink); } .citrine-badge-quiet { background: var(--citrine-surface-3); color: var(--citrine-ink-3); } /* ── BottomBar ─────────────────────────────────────────────────────────────────────────── */ /* UI kit — BottomBar. Source: the navigation artifact `.nb-bar` block. Group C (2.0): structure unchanged — a raised-hero mobile tab bar has no antd equivalent. Colours and metrics come from antd's live theme via `antdTheme.useToken()` in `BottomBar.tsx`, handed down as `--citrine-bottombar-*` custom properties. Every fallback is the Citrine token the rule used to read. 2.1: a `seats` layout (five fixed seats, the hero always centred), the hero INSIDE its cell so the DOM reads in screen order and the circle rises with a notched phone's inset, a pill behind the current slot's glyph, and a focus ring. See the header of `BottomBar.tsx`. ── What deliberately did NOT move ────────────────────────────────────────────────────────────── · Where the bar shows. The bar never hides itself; the app frame shows its slot below the `AppShell navSwitch` width (900px by default) and hides the rail there. That width is a CONTRACT — a consumer's regression helper picks which navigation to drive by which one is visible — and it lives in `AppShell.css`, which owns both slots. Treat it as an interface. · `min-height: 44px` on a slot — WCAG 2.5.5 target size. This is the one surface that is only ever touched. · `line-height: 1.25` on a slot. Here the line box is not typography, it is the RESERVED HEIGHT that keeps a bar mixing labelled and unlabelled slots on one baseline. · The hero's geometry — a 60px circle whose foot sits 26px above the bar's bottom edge, the 5px cut-out ring, the 27px glyph — and the bar's own 62px minimum and 24px icon box. All shape, not brand. AppShell reserves the circle's rise from these numbers (`AppShell.css`). ── The three type sizes are FITTING CONSTANTS, not brand — owner ruling, 2026-09-10 ──────────── 10.5px on the labels and 9.5px on the badge are NOT a Citrine type choice. They are the sizes at which this bar's text fits the cells the bar computes, and antd has no token that small — its floor is `fontSizeSM`, 12px stock. A 16-character label is ~93px of text at 10.5px and ~101px at 12px against a 98px cell. The badge is tighter still: a 16px pill with a 1.6px ring leaves ~12.8px of inner box. PLEASE DO NOT "FIX" THEM ONTO A TOKEN. Where a value exists to make text fit a computed cell, it is a constraint, not a skin. */ /* Always drawn where it is placed: whether it is on screen at a given width is the app frame's decision (`AppShell navSwitch`), not the bar's. */ .citrine-bottombar { display: block; position: relative; background: var(--citrine-bottombar-bg, var(--citrine-surface)); border-top: var(--citrine-bottombar-line-width, 1px) solid var(--citrine-bottombar-line, var(--citrine-line)); flex: 0 0 auto; padding: var(--citrine-bottombar-pad-top, var(--citrine-sp-2)) 0 var(--citrine-bottombar-pad-bottom, var(--citrine-sp-3)); min-height: 62px; /* Clears the home indicator / gesture bar on a notched phone. Falls back to 0 everywhere else. The cells sit ABOVE this padding, so the hero, placed against its cell, rises with it. */ padding-bottom: calc( var(--citrine-bottombar-pad-bottom, var(--citrine-sp-3)) + env(safe-area-inset-bottom, 0px) ); } /* ── `hideOnScroll` ───────────────────────────────────────────────────────────────────────────── Tucked, the bar slides down by its own height PLUS the hero's rise, so the raised circle leaves the screen with it rather than being left hanging at the edge. A transform, never a change of box: the bar's sticky box stays in the flow, so the page underneath does not jump as it goes. Keyboard focus inside the bar always brings it back — a control you are on must be on screen. Under reduced motion the bar still tucks, without the slide. */ .citrine-bottombar--hides { transition: transform calc(var(--citrine-duration-140, 0.14s) + 80ms) var(--citrine-easing-standard, ease); will-change: transform; } .citrine-bottombar--hides.citrine-is-tucked { transform: translateY(calc(100% + var(--citrine-bottombar-hero-rise, var(--citrine-sp-8, 32px)))); } .citrine-bottombar--hides.citrine-is-tucked:focus-within { transform: none; } @media (prefers-reduced-motion: reduce) { .citrine-bottombar--hides { transition: none; } } /* The row the cells sit in. `seats` gathers into a 600px row in the middle of a wide bar (a tablet, a narrow window) so the seats keep their phone spacing instead of spreading to 180px cells; `cells` spans the bar as it always has. */ .citrine-bottombar-row { display: flex; align-items: flex-end; width: 100%; } .citrine-bottombar--seats .citrine-bottombar-row { max-width: 600px; margin-inline: auto; } .citrine-bottombar-slot { flex: 1 1 0; min-width: 0; text-align: center; /* FITTING CONSTANT — see the header note. */ font-size: 10.5px; color: var(--citrine-bottombar-ink, var(--citrine-ink-3)); /* Structural, not typographic — see the header note. */ line-height: var(--citrine-line-height-1p25); background: none; border: 0; border-radius: 10px; font-family: inherit; text-decoration: none; padding: 0; position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; /* 44px is the WCAG 2.5.5 target size. This is the one surface that is only ever touched. */ min-height: 44px; } .citrine-bottombar-slot:active { background: var(--citrine-bottombar-press, var(--citrine-surface-2)); } /* Keyboard focus takes the current pill's shape: a 2px ring in the action colour around the glyph's 56×30 pill, not a box around the whole cell (at 900 wide a cell is 120×44 — a rectangle round three dots — and a box round a current slot boxed its pill). Never the browser's own ring, which is orange in Chromium and belongs to no palette. An outline, so forced-colours mode still draws it. */ .citrine-bottombar-slot:focus-visible { outline: none; } .citrine-bottombar-slot:focus-visible .citrine-bottombar-icon::after { content: ''; position: absolute; left: 50%; top: 50%; width: 56px; height: 30px; margin: -15px 0 0 -28px; border-radius: 15px; outline: 2px solid var(--citrine-bottombar-focus, var(--citrine-accent)); outline-offset: 1px; pointer-events: none; } .citrine-bottombar-icon { display: block; position: relative; /* The current slot's pill is painted behind the glyph as a pseudo-element at z-index -1; this keeps it inside the icon box's own stacking context rather than behind the bar. */ isolation: isolate; width: 24px; height: 24px; margin: 0 auto var(--citrine-bottombar-icon-gap, var(--citrine-sp-1)); } .citrine-bottombar-icon svg { width: 24px; height: 24px; } .citrine-bottombar-slot.citrine-is-selected { color: var(--citrine-bottombar-ink-selected, var(--citrine-accent-deep)); font-weight: var(--citrine-bottombar-weight-selected, var(--citrine-font-weight-700)); } /* The current destination is told three ways, never by colour alone: the colour and weight above, a thicker glyph, and a pill in the accent wash behind it. */ .citrine-bottombar-slot.citrine-is-selected .citrine-bottombar-icon svg { stroke-width: 2.2; } .citrine-bottombar-slot.citrine-is-selected .citrine-bottombar-icon::before { content: ''; position: absolute; z-index: -1; left: 50%; top: 50%; width: 56px; height: 30px; margin: -15px 0 0 -28px; border-radius: 15px; background: var(--citrine-bottombar-pill, var(--citrine-accent-wash)); } .citrine-bottombar-badge { position: absolute; top: -4px; right: -9px; min-width: 16px; height: 16px; /* A pill is a SHAPE, and antd has no pill radius token. */ border-radius: 999px; background: var(--citrine-bottombar-badge-bg, var(--citrine-bad)); color: var(--citrine-bottombar-badge-ink, var(--citrine-ink-on-solid)); /* FITTING CONSTANT — see the header note. */ font-size: 9.5px; font-weight: var(--citrine-bottombar-weight-selected, var(--citrine-font-weight-700)); line-height: 16px; text-align: center; padding: 0 var(--citrine-bottombar-label-pad, var(--citrine-sp-1)); /* A ring in the bar's own colour, so the badge reads as lifted off the icon. */ border: 1.6px solid var(--citrine-bottombar-bg, var(--citrine-surface)); } .citrine-bottombar-label { display: block; padding: 0 var(--citrine-bottombar-label-pad, var(--citrine-sp-1)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* `visibility`, NOT `display` — see BottomBar.tsx. */ .citrine-bottombar-label.citrine-is-hidden { visibility: hidden; } /* The cell the hero floats over, and an empty seat. Both take a share of the row like a slot. */ .citrine-bottombar-gap, .citrine-bottombar-seat { flex: 1 1 0; min-width: 0; min-height: 44px; } .citrine-bottombar-gap { position: relative; } /* ── The hero ───────────────────────────────────────────────────────────────────────────────── Positioned out of flow inside its own cell, so it cannot squeeze the slots, and raised above the bar's edge so it reads as sitting ON the bar rather than in it. Its foot is 29px above the bar's bottom edge — 3px higher than 2.0's 26px, so a focus ring hugging the circle clears the caption under it (at 26px the ring crossed the caption's letters). The cell's foot is the bar's bottom padding above that edge, so the offset from the cell is 29px less that padding — and when a notched phone adds its inset to the padding, the cell and the circle rise together. AppShell's 32px rise reserve still covers it (24px of circle + the 5px ring). */ .citrine-bottombar-hero { position: absolute; left: 50%; bottom: calc(29px - var(--citrine-bottombar-pad-bottom, var(--citrine-sp-3))); transform: translateX(-50%); width: 60px; height: 60px; border-radius: 50%; border: 0; padding: 0; background: var(--citrine-bottombar-hero-bg, var(--citrine-accent)); color: var(--citrine-bottombar-hero-ink, var(--citrine-accent-ink)); display: grid; place-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent; /* Two shadows doing two jobs. The first is the lift, so the circle sits above the bar; the second is a RING in the bar's own colour, which cuts the circle out of the bar's top border. */ box-shadow: var(--citrine-bottombar-hero-shadow, var(--citrine-sh-lg)), 0 0 0 5px var(--citrine-bottombar-bg, var(--citrine-surface)); } .citrine-bottombar-hero:hover { background: var(--citrine-bottombar-hero-bg-hover, var(--citrine-accent-deep)); } /* Drawn ON the 5px cut-out ring (2px out from the circle), where the bar's own colour makes it read cleanly in both themes and it stays clear of the caption below. */ .citrine-bottombar-hero:focus-visible { outline: 2px solid var(--citrine-bottombar-focus, var(--citrine-accent)); outline-offset: 2px; } /* On the hero's own page: an inner ring in the hero's ink — the circle says "you are here" without changing its colour, which would read as disabled. */ .citrine-bottombar-hero.citrine-is-selected { box-shadow: inset 0 0 0 3px var(--citrine-bottombar-hero-bg, var(--citrine-accent)), inset 0 0 0 5px var(--citrine-bottombar-hero-ink, var(--citrine-accent-ink)), var(--citrine-bottombar-hero-shadow, var(--citrine-sh-lg)), 0 0 0 5px var(--citrine-bottombar-bg, var(--citrine-surface)); } .citrine-bottombar-heroicon { display: flex; } .citrine-bottombar-heroicon svg { width: 27px; height: 27px; stroke-width: 2.4; } .citrine-bottombar-herolabel { position: absolute; left: 50%; transform: translateX(-50%); /* Clamped to the one cell it owns: every slot caption beside it is `nowrap`, and two nowrap texts on one line overlap in SILENCE. This turns that into an ellipsis. */ max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; /* 8px above the bar's bottom edge, measured from the cell's foot like the circle. */ bottom: calc( var(--citrine-bottombar-herolabel-bottom, var(--citrine-sp-2)) - var(--citrine-bottombar-pad-bottom, var(--citrine-sp-3)) ); /* FITTING CONSTANT — see the header note. */ font-size: 10.5px; font-weight: var(--citrine-bottombar-weight-selected, var(--citrine-font-weight-700)); color: var(--citrine-bottombar-ink-selected, var(--citrine-accent-deep)); pointer-events: none; } .citrine-bottombar-herolabel.citrine-is-selected { font-weight: var(--citrine-font-weight-700, 700); } /* ── Destinations that wear a hue ──────────────────────────────────────────────────────────────── The glyph takes its section's deep, and the current destination its deep and wash — the comp's phone bar (`.pbar-ic`). The bar's own inline `--citrine-bottombar-ink-selected` is resolved on the BAR, so it cannot see a hue set on one slot; these rules name the hue directly. */ .citrine-bottombar-slot.citrine-hued .citrine-bottombar-icon { color: var(--citrine-hue-deep); } .citrine-bottombar-slot.citrine-hued.citrine-is-selected { color: var(--citrine-hue-deep); } .citrine-bottombar-slot.citrine-hued.citrine-is-selected .citrine-bottombar-icon::before { background: var(--citrine-hue-wash); } /* The hero circle as its section's primary button: the pair, and the derived hover. */ .citrine-bottombar-hero.citrine-hued { background: var(--citrine-hue-btn); color: var(--citrine-hue-btn-ink); } .citrine-bottombar-hero.citrine-hued:hover { background: var(--citrine-hue-btn-2); } /* ── Breadcrumbs ───────────────────────────────────────────────────────────────────────── */ /* UI kit — Breadcrumbs. antd's Breadcrumb now draws the

shell and the separator layout; what is left is the trigger buttons (fold "…" and per-item sibling chevron) and the current-page emphasis, neither of which has an antd slot. Tokens only. */ .citrine-crumbs a, .citrine-crumb-link, .citrine-crumb-menu-trigger { text-decoration: none; color: inherit; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; } .citrine-crumbs a:hover, .citrine-crumb-link:hover, .citrine-crumb-menu-trigger:hover { color: var(--citrine-data); } .citrine-crumb-step { display: inline-flex; align-items: center; gap: var(--citrine-space-4); } .citrine-crumb-menu-trigger { line-height: var(--citrine-line-height-1); } .citrine-crumb-sep { color: var(--citrine-ink-4); } .citrine-crumbs .citrine-is-here { color: var(--citrine-ink-2); font-weight: var(--citrine-font-weight-600); } /* A crumb's glyph (`BreadcrumbItem icon`), on the text's centre line. */ .citrine-crumb-icon { display: inline-flex; align-items: center; vertical-align: -0.15em; margin-inline-end: 4px; } .citrine-crumb-icon:has(+ .citrine-visually-hidden) { margin-inline-end: 0; } /* ── Briefing ──────────────────────────────────────────────────────────────────────────── */ /* UI kit — Briefing. A page of plain questions, each answered in one sentence. Narrow first: one card per answer, the action full width at 44px for a thumb. From 720px of the Briefing's OWN width (a container query, so a rail beside it counts): - `wide="cards"` (default, `.citrine-briefing-wide-cards`) — the cards stay cards and scale up: more room inside, a larger answer, the action at its own width (still 44px tall). - `wide="sheet"` (opt-in, `.citrine-briefing-wide-sheet`) — the cards merge into one ruled sheet with the question, the answer and the action in three columns. */ .citrine-briefing { container: citrine-briefing / inline-size; margin: 0; } .citrine-briefing-sheet { display: flex; flex-direction: column; gap: var(--citrine-sp-3, 12px); } .citrine-briefing-item { display: flex; flex-direction: column; gap: var(--citrine-sp-2, 8px); min-width: 0; padding: var(--citrine-sp-4, 16px); background: var(--citrine-surface, #ffffff); border: 1px solid var(--citrine-line, #e3e8f0); border-radius: var(--citrine-r, 12px); } .citrine-briefing-question { margin: 0; font-size: var(--citrine-font-size-14, 14px); font-weight: var(--citrine-font-weight-600, 600); line-height: 1.4; color: var(--citrine-accent); text-wrap: balance; } .citrine-briefing-body { display: flex; flex-direction: column; gap: var(--citrine-sp-1, 4px); min-width: 0; } .citrine-briefing-answer { font-size: var(--citrine-font-size-20, 20px); font-weight: var(--citrine-font-weight-500, 500); line-height: 1.35; color: var(--citrine-ink, #17223a); text-wrap: balance; } .citrine-briefing-quiet .citrine-briefing-answer { color: var(--citrine-ink-2, #45516a); } /* A figure inside an answer is a settled entry: the data colour, bold, tabular. */ .citrine-briefing-answer .citrine-tnum { color: var(--citrine-data); font-weight: var(--citrine-font-weight-700, 700); } .citrine-briefing-note { margin: 0; max-width: 70ch; font-size: var(--citrine-font-size-14, 14px); line-height: 1.5; color: var(--citrine-ink-3, #6b768b); } /* Narrow: the one action fills the card, at a thumb's height. */ .citrine-briefing-action { display: flex; margin-top: var(--citrine-sp-1, 4px); } .citrine-briefing-action > * { flex: 1 1 auto; } .citrine-briefing-action .ant-btn { height: 44px; } .citrine-briefing-detail { min-width: 0; } /* ── Wide, default: the cards scale up ──────────────────────────────────────────────────────────── */ @container citrine-briefing (min-width: 720px) { .citrine-briefing-wide-cards .citrine-briefing-item { gap: var(--citrine-sp-3); padding: var(--citrine-sp-6); } .citrine-briefing-wide-cards .citrine-briefing-question { font-size: var(--citrine-font-size-15); } .citrine-briefing-wide-cards .citrine-briefing-answer { max-width: 36ch; font-size: var(--citrine-font-size-24); } /* The action keeps its thumb height and gives up the full width: across a desk-wide card a stretched button reads as a banner, not an action. */ .citrine-briefing-wide-cards .citrine-briefing-action > * { flex: none; } } /* ── Wide, opt-in: one ruled sheet in three columns ─────────────────────────────────────────────── */ @container citrine-briefing (min-width: 720px) { .citrine-briefing-wide-sheet .citrine-briefing-sheet { gap: 0; background: var(--citrine-surface, #ffffff); border: 1px solid var(--citrine-line, #e3e8f0); border-radius: var(--citrine-r, 12px); } .citrine-briefing-wide-sheet .citrine-briefing-item { display: grid; grid-template-columns: minmax(160px, 240px) minmax(0, 1fr) auto; column-gap: var(--citrine-sp-8, 32px); row-gap: var(--citrine-sp-4, 16px); align-items: start; padding: 26px var(--citrine-sp-8, 32px); background: none; border: 0; border-radius: 0; } .citrine-briefing-wide-sheet .citrine-briefing-item + .citrine-briefing-item { border-top: 1px solid var(--citrine-line, #e3e8f0); } .citrine-briefing-wide-sheet .citrine-briefing-question { grid-column: 1; grid-row: 1; padding-top: 6px; font-size: var(--citrine-font-size-15, 15px); } .citrine-briefing-wide-sheet .citrine-briefing-body { grid-column: 2; grid-row: 1; } .citrine-briefing-wide-sheet .citrine-briefing-answer { max-width: 36ch; font-size: var(--citrine-font-size-24, 24px); } .citrine-briefing-wide-sheet .citrine-briefing-action { grid-column: 3; grid-row: 1; justify-self: end; margin-top: 0; } .citrine-briefing-wide-sheet .citrine-briefing-action > * { flex: none; } .citrine-briefing-wide-sheet .citrine-briefing-action .ant-btn { height: 40px; } .citrine-briefing-wide-sheet .citrine-briefing-detail { grid-column: 2 / -1; grid-row: 2; } } /* ── Button ────────────────────────────────────────────────────────────────────────────── */ /* UI kit — Button. * * WHY THIS FILE EXISTS. `Button` has always emitted `citrine-btn-icon` for `iconOnly` * (`Button.tsx`), and until now **nothing styled it** — the class was a name with no rule behind * it, the same shape as `tone="ended"` on StageStrip before 2.3.0. That was invisible while * consumers carried their own stylesheets. One consumer deleted all 110 of its stylesheets on * 2026-09-10 and now has **zero** `.css` files, so the rule that used to hold the hit area open * went with them, and a comment in its help-mark component — "the hit area is kept at 44px by the * stylesheet" — has been describing a file that no longer exists ever since. * * MEASURED, not assumed: across seven screens at four widths in both themes, every one of ~38 help * marks drew **24×24 with a 25px reach** (measured on a consuming app). * * THE FIX IS REACH, NOT SIZE. Making the button itself 44px would draw a 44px circle wherever the * variant has a border or a fill — which is precisely what the owner rejected on 2026-09-05 * ("it is not looking good") when the help mark drew as a full-size bordered circle beside every * label. So the target is opened with a pseudo-element that paints nothing and occupies no space in * the flow: the icon stays the size it is drawn, and the press area around it grows to 44px. * * This is antd's own pattern, checked in the installed source rather than assumed — antd holds a * Switch's target open with a `::before` on the handle (`antd/es/switch/style/index.js:123`) — and * the pattern Citrine already used for the Switch track in 2.2.0. * * `max()` rather than a flat 44px: a LARGE icon button is already bigger than 44, and shrinking its * target to 44 would be a regression. The pseudo never goes below the button's own box. */ .citrine-btn-icon { position: relative; } .citrine-btn-icon::after { content: ''; position: absolute; top: 50%; left: 50%; width: max(100%, var(--citrine-target-min, 44px)); height: max(100%, var(--citrine-target-min, 44px)); transform: translate(-50%, -50%); /* Paints nothing, and never eats a press meant for the icon itself. */ background: none; border-radius: inherit; } /* A disabled control should not hold a 44px hole open over its neighbours — there is nothing to press, and the enlarged area would only block whatever sits behind it. */ .citrine-btn-icon:disabled::after, .citrine-btn-icon[aria-disabled='true']::after { content: none; } /* ── The icon sits on the label's centre line ──────────────────────────────────────────────────── The glyph's wrapper is a flex box, not an inline span: an inline box sits on a text line, and the glyph rested on the baseline 1.5px above the label's centre (measured beside 14px labels). */ .citrine-btn-glyph { display: flex; align-items: center; } /* ── An icon-only button draws its icon at 16px ───────────────────────────────────────────────── With no words beside it the icon IS the control, so it keeps the kit's 16px icon size at every button size. It used to follow the button's text size (12px at `sm`), and a "…" row-menu trigger came out as three dots too small to find. Citrine icons are drawn at `1em`, so the font size is the icon size; a button with words keeps its icon matched to them. */ .citrine-btn.citrine-btn-icon .citrine-btn-glyph { font-size: 16px; } /* ── The quiet variants keep their own weight (5.0.0) ─────────────────────────────────────────── A `ghost` or `link` button (a header's "Sign out", a row's "Edit") reads as words, not as an action block, so it takes `--citrine-button-quiet-weight` (400) whatever weight the theme gives buttons. Stock antd is 400 already, so by default nothing changes; the rule matters when an app raises button weight through `CitrineProvider antdTheme` — Ant Design's theme has no per-type weight, so without this every quiet button would follow. Scoped to Button's own classes: two classes beat antd's `:where(…).ant-btn` weight whatever order the sheets load in. */ .citrine-btn.citrine-btn-ghost, .citrine-btn.citrine-btn-link, .citrine-btn.citrine-btn-danger-text, .citrine-btn.citrine-btn-danger-link { font-weight: var(--citrine-button-quiet-weight); } /* ── `CitrineProvider buttonWeights`: a weight per variant (opt-in) ───────────────────────────── After the quiet rule, at the same two-class weight, so an app that names a quiet variant's weight gets it. Emitted only for a variant the provider names. */ .citrine-btn.citrine-btn-w400 { font-weight: 400; } .citrine-btn.citrine-btn-w500 { font-weight: 500; } .citrine-btn.citrine-btn-w600 { font-weight: 600; } .citrine-btn.citrine-btn-w700 { font-weight: 700; } /* ── CanvasFrame ───────────────────────────────────────────────────────────────────────── */ /* UI kit — CanvasFrame. A full-width frame with an explicit height for an interactive canvas. Tokens only. */ .citrine-canvas-frame { /* The default height: what the window leaves below the top bar and above the small-screen bar (--citrine-app-bottom-inset, 0px wherever no bar shows), less the page's padding and heading. */ --citrine-canvas-frame-fill: calc( 100dvh - var(--citrine-topbar-height) - var(--citrine-app-bottom-inset) - var(--citrine-canvas-frame-reserve) ); position: relative; box-sizing: border-box; display: block; width: 100%; height: var(--citrine-canvas-frame-height, var(--citrine-canvas-frame-fill)); min-height: var(--citrine-canvas-frame-min-height); border: var(--citrine-canvas-frame-edge-width) solid var(--citrine-canvas-frame-edge); border-radius: var(--citrine-canvas-frame-radius); background: var(--citrine-canvas-frame-bg); overflow: hidden; } /* touchGestures="canvas": the frame AND every descendant, because touch-action does not inherit past a scroll container and canvas libraries nest one. */ .citrine-canvas-frame-is-touch, .citrine-canvas-frame-is-touch * { touch-action: none; } .citrine-canvas-frame-is-touch { overscroll-behavior: contain; } /* ── Card ──────────────────────────────────────────────────────────────────────────────── */ /* UI kit — Card. Group B wave 7a. * * The card SURFACE is drawn by antd: the root is a real ``, so the * background, border, radius and dark-mode behaviour come from `.ant-card` and are not repeated * here. What is left is the head/body/foot geometry antd has no slot for, and every value it uses * is seeded from `theme.useToken()` in `Card.tsx` — antd's own Card token values, not the brand * skin. `--citrine-surface`, `--citrine-line`, `--citrine-sh`, `--citrine-r`, `--citrine-sp-*`, * `--citrine-font-size-*` and `--citrine-ink-3` are all gone from this file. * * `.citrine-card`, `.citrine-card-tinted` and `.citrine-card-stretch` are kept as SELECTOR HOOKS * with no skin attached: consumer stylesheets and test files name them, and removing the * name would break those for nothing. The look they used to carry is what went. */ /* citrine-ok: Card must not impose sibling layout spacing; approved by the kit owner on 2026-08-24. */ /* rc.7 — Gap 4, re-expressed for the antd body element that now sits between the root and its children. `.citrine-card-shell` is antd's own body node, named through the supported `classNames.body` slot rather than by reaching for `.ant-card-body`. The chain is: root is a flex column filling its grid row, the shell absorbs the slack, the body absorbs the slack inside the shell, and `.citrine-card-foot` is pushed to the true bottom by its own `margin-top: auto`. */ .citrine-card-stretch { display: flex; flex-direction: column; height: 100%; } .citrine-card-stretch > .citrine-card-shell { display: flex; flex: 1 1 auto; flex-direction: column; } .citrine-card-stretch > .citrine-card-shell > .citrine-card-body { flex: 1 1 auto; } .citrine-card-stretch > .citrine-card-shell > .citrine-card-foot { margin-top: auto; } .citrine-card-head { padding: var(--citrine-card-pad-y) var(--citrine-card-pad-x) var(--citrine-card-pad-y-sm); display: flex; align-items: flex-start; gap: var(--citrine-card-gap); flex-wrap: wrap; } .citrine-card-head.citrine-has-rule { border-bottom: 1px solid var(--citrine-card-line); } /* THE TEXT YIELDS, THE ACTIONS STAY ON ITS LINE. A wrapping flex row breaks its lines on each item's flex BASIS, not on the size it would shrink to, so the text block's basis is 0: it claims no width when the row decides where to break, then grows into whatever the actions leave. Its `min-width` stays `auto` (the longest word), so the actions drop under the heading only when the longest word and the actions cannot share one line — never by squeezing the title into overflowing words. */ .citrine-card-head-text { flex: 1 1 0; } /* …except a title the caller asked to cut (``). Its one unbroken line is the block's whole min-content, so `auto` held the block at the full title and it ran past the card. Here the block may shrink to nothing and the title ends in an ellipsis at the head's edge. */ .citrine-card-head-text-yields { min-width: 0; } .citrine-card-title { margin: 0; font-size: var(--citrine-card-title-size); font-weight: var(--citrine-card-title-weight); } .citrine-card-sub { margin: var(--citrine-card-sub-gap) 0 0; font-size: var(--citrine-card-sub-size); color: var(--citrine-card-sub-color); max-width: 72ch; } .citrine-card-actions { margin-left: auto; display: flex; align-items: center; gap: var(--citrine-card-gap); flex-wrap: wrap; } .citrine-card-body { padding: var(--citrine-card-pad-y) var(--citrine-card-pad-x); } .citrine-card-body.citrine-is-flush { padding: 0; } /* A flush body exists so a table can run edge to edge. A Toolbar above that table (a filter, a "show only…" switch, the bulk-delete strip) is still words and controls, so it keeps the card's own inset — set directly in the flush body or one wrapper (a `Stack`) down. Bottom stays 0: the wrapper's gap, or the table's own top rule, separates bar and table. */ .citrine-card-body.citrine-is-flush > .citrine-toolbar, .citrine-card-body.citrine-is-flush > * > .citrine-toolbar { padding: var(--citrine-card-pad-y) var(--citrine-card-pad-x) 0; } .citrine-card-foot { padding: var(--citrine-card-pad-y-sm) var(--citrine-card-pad-x); border-top: 1px solid var(--citrine-card-line); background: var(--citrine-card-foot-bg); display: flex; align-items: center; gap: var(--citrine-card-gap); flex-wrap: wrap; } /* A single action under a full-width card reads as stranded on the left. The comps put it at the end; `justify-content` is the whole of it, opt-in so no existing foot moves. */ .citrine-card-foot-end { justify-content: flex-end; } /* `align="between"`: the first item at the start, the last at the end. */ .citrine-card-foot-between { justify-content: space-between; } /* `surface`: the rule stays, the tint goes — the foot sits on the card's own ground. */ .citrine-card-foot.citrine-card-foot-surface { background: transparent; } /* DENSITY. Retunes this file's own padding variables rather than adding a competing padding rule, so a card's spacing keeps one source of truth and every part — head, body, foot — moves together. The parts inherit these from the root; under a tight Card they do not seed their own inline (`useCardTokens` in `Card.tsx`), since an inline seed would win over an inherited value. Deliberately not antd's `size`: this is not antd's Card, and antd's scale stops at `small`. */ .citrine-card-tight { --citrine-card-pad-x: var(--citrine-sp-3); --citrine-card-pad-y: var(--citrine-sp-3); --citrine-card-pad-y-sm: var(--citrine-sp-2); } /* The leading slot: a sibling of the heading, never a child of it. `flex: none` so an avatar keeps its size when the title wraps, and the head's own `align-items: flex-start` keeps it level with the first line of the title rather than centred against a two-line one. */ .citrine-card-head-lead { flex: none; display: inline-flex; align-items: center; } /* A selection tick as the lead. The Checkbox's press row holds a 44px target floor, so in a slot sized by its content the 16px box sat centred 22px down — about 9px below the middle of the title's line. Sized to exactly one title line instead (same font size, so `1lh` is the title's line box), the tick centres on that line and its taller press row overflows evenly into the head's padding, still pressable. Scoped to a checkbox: an avatar keeps its top-aligned place. */ .citrine-card-head-lead:has(.citrine-check) { font-size: var(--citrine-card-title-size); block-size: 1lh; } /* FILL. Two actions as equal halves, at every width. No existing primitive does this: `Grid cols={2}` collapses below 820px so a foot pair would stack at 390 anyway, `Button block` stacks by definition, and `ButtonGroup` is a radio group. `min-width: 0` lets a long label shrink rather than forcing the pair wider than the card. */ .citrine-card-foot-fill { flex-wrap: nowrap; } .citrine-card-foot-fill > * { flex: 1 1 0; min-width: 0; } /* STACK. Full width below the phone line, side by side above it. The media query is the whole point: a foot that stacked at every width would be a different component, not a variant. 767.98px rather than 768px so it cannot overlap the `min-width: 768px` the theme reads for the phone control floor — a device landing exactly on the boundary must match one rule, never both. */ @media (max-width: 767.98px) { .citrine-card-foot-stack { flex-direction: column; align-items: stretch; } .citrine-card-foot-stack > * { width: 100%; } } /* SPINE. A full-height leading border down the whole card, head, body and foot alike — the same mark as `Section spine`. It is drawn OVER antd's own box (whose outline, surface and radius stay as they are) by a pseudo-element on this component's own root, so it never reaches into antd's classes. `.ant-card` is already `position: relative`; the pseudo-element is pulled out by the box's border width (`--citrine-card-edge`) so it lies over the outer edge as the Section spine lies over its box's, is as wide as the box's corner radius, is rounded on its leading corners exactly as the box is, and is painted only in its first `--citrine-card-spine-width` — so the strip follows the box's curve rather than poking out of it. Radius and edge are antd's `borderRadiusLG` and `lineWidth`, which `Card.tsx` hands over only when `spine` is on. It sits above the foot's tint; `pointer-events: none` keeps everything under it clickable. */ .citrine-card-spine::before { --citrine-card-spine-ink: var(--citrine-card-spine); content: ''; position: absolute; inset-block: calc(-1 * var(--citrine-card-edge)); inset-inline-start: calc(-1 * var(--citrine-card-edge)); z-index: 1; width: max(var(--citrine-card-radius, var(--citrine-r-xs)), var(--citrine-card-spine-width)); border-start-start-radius: var(--citrine-card-radius, var(--citrine-r-xs)); border-end-start-radius: var(--citrine-card-radius, var(--citrine-r-xs)); background: linear-gradient( to right, var(--citrine-card-spine-ink) var(--citrine-card-spine-width), transparent var(--citrine-card-spine-width) ); pointer-events: none; } /* TOP SPINE (`spineEdge="top"`). The same strip turned through a right angle: across the top edge, rounded on the top corners, painted only in its first `--citrine-card-spine-width`. */ .citrine-card-spine.citrine-card-spine-top::before { inset-block: calc(-1 * var(--citrine-card-edge)) auto; inset-inline: calc(-1 * var(--citrine-card-edge)); width: auto; height: max(var(--citrine-card-radius, var(--citrine-r-xs)), var(--citrine-card-spine-width)); border-start-start-radius: var(--citrine-card-radius, var(--citrine-r-xs)); border-start-end-radius: var(--citrine-card-radius, var(--citrine-r-xs)); border-end-start-radius: 0; background: linear-gradient( to bottom, var(--citrine-card-spine-ink) var(--citrine-card-spine-width), transparent var(--citrine-card-spine-width) ); } /* With a hue — its own, or the nearest HueScope's — the spine is the hue's MID. */ .citrine-card-spine.citrine-hued::before { --citrine-card-spine-ink: var(--citrine-hue); } /* PLAIN. Both the rule and the tint come off together: either one left behind still reads as a foot, which defeats the purpose of pinning a bare status line to the bottom of a stretched card. */ .citrine-card-foot-plain { border-top: 0; background: transparent; } /* `onClick` — a choice card. The pointer over a card that can be chosen; the default arrow over one whose choice is fixed (`locked`); not-allowed over one that cannot be chosen now (`disabled`). A keyboard card shows the kit's focus ring. Opt-in: a card without `onClick` carries none of these. */ .citrine-card-clickable { cursor: pointer; } .citrine-card-clickable.citrine-card-locked { cursor: default; } .citrine-card-clickable.citrine-card-disabled { cursor: not-allowed; } .citrine-card-clickable:focus-visible { outline: var(--citrine-space-2) solid var(--citrine-focus-ring); outline-offset: var(--citrine-space-2); } /* ── ChatPreview ───────────────────────────────────────────────────────────────────────── */ /* UI kit — ChatPreview and ChatBubble. A thread of bubbles on a wallpaper. Every value is a `--citrine-chat-*` token (`chat.json`); the wallpaper is repainted through the palette's `chatWallpaper` slot. */ .citrine-chat { display: flex; flex-direction: column; gap: var(--citrine-chat-gap); inline-size: 100%; padding: var(--citrine-chat-pad); border-radius: var(--citrine-chat-radius); background: var(--citrine-chat-wallpaper); } .citrine-chat.citrine-chat-plain { padding: 0; border-radius: 0; background: none; } /* One message: its author line and its bubble, on its speaker's side. */ .citrine-chat-msg { display: flex; flex-direction: column; gap: var(--citrine-chat-meta-gap); min-inline-size: 0; } .citrine-chat-msg-in { align-items: flex-start; } .citrine-chat-msg-out { align-items: flex-end; } .citrine-chat-author { font-size: var(--citrine-font-size-11p5); color: var(--citrine-chat-meta-ink); } .citrine-chat-bubble { max-inline-size: var(--citrine-chat-bubble-max); padding: var(--citrine-chat-bubble-pad-y) var(--citrine-chat-bubble-pad-x); border-radius: var(--citrine-chat-radius); color: var(--citrine-chat-bubble-ink); } /* The corner at the speaker's side stays square: the bubble's tail. */ .citrine-chat-bubble-in { background: var(--citrine-chat-bubble-in); border-start-start-radius: 0; } .citrine-chat-bubble-out { background: var(--citrine-chat-bubble-out); border-start-end-radius: 0; } .citrine-chat-bubble-ok { background: var(--citrine-ok-wash); } .citrine-chat-bubble-warn { background: var(--citrine-warn-wash); } .citrine-chat-bubble-bad { background: var(--citrine-bad-wash); } .citrine-chat-bubble-info { background: var(--citrine-info-wash); } /* The message keeps its own line breaks. */ .citrine-chat-text { white-space: pre-wrap; } .citrine-chat-meta { display: flex; align-items: center; justify-content: flex-end; gap: var(--citrine-chat-meta-gap); margin-block-start: var(--citrine-chat-meta-gap); font-size: var(--citrine-font-size-11p5); color: var(--citrine-chat-meta-ink); } .citrine-chat-ticks { display: inline-flex; } .citrine-chat-ticks.citrine-chat-ticks-read { color: var(--citrine-chat-tick-read); } /* ── Checkbox ──────────────────────────────────────────────────────────────────────────── */ /* UI kit — Checkbox family styles. RULING D14 (Group A audit, finding F-A5, 2026-09-10): the box skin is gone. `.citrine-check-box` used to be 19×19 with `var(--citrine-radius-6)`, a `1.5px var(--citrine-line-2)` border and a `var(--citrine-surface)` fill, turning `var(--citrine-accent)` when checked; `.citrine-check` set its own `display: flex`, gap, font size and ink on antd's label wrapper, and `-label` and `-is-disabled` did the same for the text and for the dimmed state. antd draws every one of those itself, at 16px from `colorPrimary`. WHERE THOSE RULES ACTUALLY LANDED — the reason they had to go rather than be re-pointed. antd routes `classNames.icon` to `RcCheckbox`'s own `className` (`antd/es/checkbox/Checkbox.js:111,133`), so `.citrine-check-box` sat on the OUTER `.ant-checkbox` span, while the box a user sees is `.ant-checkbox-inner`, a CHILD of it (`@rc-component/checkbox/es/index.js:71`). A 19px bordered square was being drawn AROUND antd's own 16px one. `Checkbox.test.tsx` pins that landing point by render, so the next reader does not have to re-derive it. Stripped in the same commit as `Radio.css`, deliberately: the audit found a checked checkbox drawing navy while a checked radio drew green, in the same form. Moving one without the other leaves that family split. What is left below is Citrine's OWN markup and its own feature — the `columns` grid on `CheckboxGroup`, which antd has no equivalent of — plus one rule on antd's label wrapper that is not a skin but an accessibility floor. */ /* THE PRESS ROW HOLDS THE KIT'S TARGET FLOOR. The `` antd renders is the whole press target (box, gap and words), and antd draws it at its line height: 22px. The floor is 44px and stays on for everyone. It is a real `min-height` rather than a painted-nothing `::after` (the way `Button.css` opens a small icon button) because checkboxes stack: a group puts them 8px apart, and a 44px overlay on a 22px row would reach 11px into the rows above and below, so two targets would claim the same point. Opening the row itself keeps each target its own. `align-items: center` because antd aligns the box and words to the baseline, which would leave them at the top of the taller row. */ .citrine-check { min-height: var(--citrine-target-min); align-items: center; } .citrine-checkbox-group { display: grid; gap: var(--citrine-sp-2) var(--citrine-sp-4); grid-template-columns: minmax(0, 1fr); } .citrine-checkbox-group-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .citrine-checkbox-group-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* The description block. Outside the , indented to sit under the label's text rather than under the box, so the tick keeps its own column and the note reads as a second line of the same thought. `--citrine-check-desc-indent` is the box plus its gap. */ .citrine-check-row { display: flex; flex-direction: column; gap: var(--citrine-sp-1, 4px); } .citrine-check-desc { margin-inline-start: var(--citrine-check-desc-indent, var(--citrine-sp-6)); color: var(--citrine-check-desc-ink, var(--citrine-ink-3)); font-size: var(--citrine-check-desc-size, var(--citrine-font-size-12)); line-height: 1.45; } /* ── `CheckboxGroup appearance="chips"` ───────────────────────────────────────────────────────── A wrapping row of toggleable chips, measured on the reference mockup: 22px tall, 0 8px padding, a 1px edge, a 4px radius, 12px type, 8px between chips. The row wraps inside whatever cell it is given and a single long label wraps inside its own chip, so nothing ever overflows a narrow column. Each chip is a around a native checkbox stretched transparent over it: the platform owns the click, the focus and the name, and the chip only paints. */ .citrine-checkbox-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--citrine-checkbox-chip-gap); min-width: 0; max-width: 100%; } .citrine-checkbox-chip { position: relative; display: inline-flex; align-items: center; gap: var(--citrine-checkbox-chip-inner-gap); box-sizing: border-box; min-height: var(--citrine-checkbox-chip-h); max-width: 100%; margin: 0; padding: var(--citrine-checkbox-chip-pad-y) var(--citrine-checkbox-chip-pad-x); border: 1px solid var(--citrine-checkbox-chip-line); border-radius: var(--citrine-checkbox-chip-radius); background: var(--citrine-checkbox-chip-bg); color: var(--citrine-checkbox-chip-ink); font: inherit; font-size: var(--citrine-checkbox-chip-size); line-height: var(--citrine-line-height-1p25); cursor: pointer; } .citrine-checkbox-chip-is-on { border-color: var(--citrine-checkbox-chip-line-on); background: var(--citrine-checkbox-chip-bg-on); color: var(--citrine-checkbox-chip-ink-on); } .citrine-checkbox-chip-is-disabled { cursor: not-allowed; opacity: var(--citrine-checkbox-chip-disabled-opacity); } /* Transparent, not hidden: it stays in the tab order and under the pointer. */ .citrine-checkbox-chip-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; } .citrine-checkbox-chip-text { min-width: 0; overflow-wrap: anywhere; } .citrine-checkbox-chip-mark { display: inline-flex; flex: none; } .citrine-checkbox-chip:has(.citrine-checkbox-chip-input:focus-visible), .citrine-checkbox-chip-more:focus-visible { outline: 2px solid var(--citrine-checkbox-chip-focus); outline-offset: 2px; } /* ── Chip ──────────────────────────────────────────────────────────────────────────────── */ /* UI kit — Chip. Group B wave 7a. * * `Chip` stays bespoke — antd `Tag`'s close control is a `` that no keyboard user can * reach, and retargeting would have regressed `closeLabel` (see `Chip.tsx`) — but every colour and * measurement it draws is now an antd token, seeded from `theme.useToken()`. Gone from this file: * `--citrine-ok*`, `--citrine-warn*`, `--citrine-bad*`, `--citrine-info*`, `--citrine-accent*`, * `--citrine-surface-3`, `--citrine-ink-2`, `--citrine-ink-3`, `--citrine-line`, `--citrine-line-2`, * `--citrine-r-pill`, `--citrine-space-*`, `--citrine-font-size-*` and `--citrine-font-weight-600`. * * The per-tone classes (`.citrine-chip-ok`, `-warn`, `-bad`, `-info`, `-data`, `-accent`, `-ghost`) * and `.citrine-chip-lg` are all still applied — Citrine's own tests and consumers both name them — * but the colour they used to carry now arrives on the element as a custom property, so one rule * paints every tone. */ .citrine-chip { display: inline-flex; align-items: center; gap: var(--citrine-chip-gap); padding: var(--citrine-chip-pad-y) var(--citrine-chip-pad-x); border-radius: var(--citrine-chip-radius); font-size: var(--citrine-chip-size); background: var(--citrine-chip-bg); color: var(--citrine-chip-fg); border: 1px solid var(--citrine-chip-line); white-space: nowrap; } /* A chip that holds a `Truncate` may shrink to its container, so the `Truncate` (itself a `min-width: 0` block with its own overflow) can cut its text with an ellipsis. Scoped to that case on purpose: a chip with plain text keeps its automatic minimum size and lays out exactly as it always did. The close button is a sibling of the label, so `Truncate` stays a direct child. */ .citrine-chip:has(> .citrine-truncate) { max-width: 100%; min-width: 0; } .citrine-chip svg { width: var(--citrine-chip-icon); height: var(--citrine-chip-icon); flex: none; } /* A real button, not an icon with a click handler — this is the whole reason `Chip` did not become an antd `Tag`. It stays keyboard-reachable and keeps a visible focus ring. */ .citrine-chip-close { display: inline-flex; align-items: center; justify-content: center; width: var(--citrine-chip-icon); height: var(--citrine-chip-icon); padding: 0; border: 0; background: none; color: inherit; cursor: pointer; border-radius: 50%; } /* THE WAY OFF A LENS, AND IT WAS 12px. Measured on a consumer's deals list with a stage chosen: the header's closable chip drew its × at **12×12 with a 12px reach**, at every width and in both themes — the smallest target on the screen, and on a phone the only way to clear the filter without hunting for the pressed cell again. Reach, not size, for the same reason as `.citrine-btn-icon`: a close mark inside a chip has to stay small to sit inside the chip, so the press area is opened with a pseudo-element that paints nothing and takes no space in the flow. The chip itself is not made taller and nothing moves. `max()` so a chip drawn at a larger size never has its target shrunk to 44. */ .citrine-chip-close { position: relative; } .citrine-chip-close::after { content: ''; position: absolute; top: 50%; left: 50%; width: max(100%, var(--citrine-target-min, 44px)); height: max(100%, var(--citrine-target-min, 44px)); transform: translate(-50%, -50%); border-radius: 50%; } .citrine-chip-close:hover { background: var(--citrine-chip-close-hover); } .citrine-chip-close:focus-visible { outline: 2px solid var(--citrine-chip-focus); outline-offset: 2px; } /* ── CitrineProvider ───────────────────────────────────────────────────────────────────── */ /* Consumer body baseline: apply to the app root so unclassed text never falls to the UA 16px. */ .citrine-body { font-size: var(--citrine-font-size-14); line-height: var(--citrine-line-height-1p55); /* Keep unclassed consumer text on the artifact's core ink. */ color: var(--citrine-ink); } /* ── Reduced motion: the loops antd's own kill switch cannot reach ──────────────────────────────── * * `CitrineProvider` sets antd's `theme.token.motion = false` when the user has asked for reduced * motion, which zeroes `motionDurationFast`/`Mid`/`Slow` and with them every antd transition and * every rc-motion enter/leave. Seven INFINITE, decorative animations survive that, because each one * carries a duration hardcoded in antd's own style generator rather than reading a motion token. * * These rules are the only way to stop them. Not the tidiest way — the tidiest way would be a * per-component token override, and that was tried and MEASURED not to work: each duration is set * by `mergeToken(token, { …literal })` inside the style function, and `mergeToken` lets the later * argument win, so a `theme.components.Skeleton.skeletonLoadingMotionDuration` never reaches the * emitted CSS. See the comment in `src/adapters/antd/theme.ts`. * * EVERY SELECTOR BELOW WAS READ OUT OF THE CSS `@ant-design/cssinjs` ACTUALLY INJECTED, not guessed * from antd's class-naming conventions. That matters more here than anywhere else in this package: a * selector with a typo applies cleanly, matches nothing, throws no error, and leaves the whole suite * green while a user who asked for less motion keeps getting it. Two of them are exactly the kind of * near-miss that would have happened: * * - the rotating element in `Spin` is `.ant-spin-dot-spin`, NOT `.ant-spin-dot`. A rule on * `.ant-spin-dot` stops the four pulsing dots and leaves the ring turning — which is the * `Table`/`Modal`/`Select` `loading` case, the one nothing else can reach. * - `Progress`'s stripe is on `.ant-progress-track::after`, NOT `.ant-progress-bg`. * * `!important` is REQUIRED, not defensive. `@ant-design/cssinjs` runs at `hashPriority: 'low'` * (`es/StyleContext.js:47`), so its hash sits inside `:where()` (`es/util/index.js:145`) and adds no * specificity — but antd's own compound selectors (`.ant-spin .ant-spin-dot-item`) still out-rank a * single class, and cssinjs injects its `