@redseed/redseed-ui-tailwindcss 7.57.0 → 7.59.0

package/components/button_card.css

@@ -11,7 +11,7 @@
 }
 
 .rsui-button-card__content {
-    @apply flex items-center p-2 gap-4;
+    @apply flex items-center p-space-xs gap-space-md;
 }
 
 .rsui-button-card__icon {
@@ -27,8 +27,10 @@
     @apply flex flex-col;
 }
 
+/* Brand Header 4, matching .rsui-card-header__title. This set no size at all, so it
+   inherited the 16px body and the same title role rendered a step smaller here. */
 .rsui-button-card__title {
-    @apply text-text-primary font-semibold line-clamp-1;
+    @apply text-xl leading-[1.3] text-text-primary font-semibold line-clamp-1;
     @apply group-hover/button-card:text-text-primary;
 }
 

package/components/button_slot.css

@@ -120,4 +120,127 @@
 /* modifier 2xl size with icon */
 .rsui-button-slot--2xl-icon {
     @apply p-4.5;
-}
+}
+/* ---------------------------------------------------------------------------
+   MODIFIER: on-color — a button sitting on a coloured or dark surface.
+   ---------------------------------------------------------------------------
+   Every variant is drawn for a light ground and has no correct rendering on a
+   dark one: secondary's white fill disappears into it, tertiary's ink goes
+   near-invisible. This is the inverse ladder, same emphasis order as the light
+   one — filled is loudest, then outlined, then text alone.
+
+   Deliberately NOT named `invert`, which Primary and Danger already use for
+   something else: a transparent fill with brand ink, an outline treatment for a
+   LIGHT surface. `onColor` matches BodyText and StageDial. The two compose.
+
+   Each rule below is a COMPOUND selector (two classes), so it beats the
+   single-class variant rules whatever order components.css imports them in —
+   see the note at the top of that file about import order mattering.
+
+   Contrast, measured against the four tonal surfaces that exist today
+   (Journey Green 800 and Deep Teal 700 from PageHeader, Journey Green 700 from
+   MetricCard, and the AI panel's lightest Warm Mauve stop):
+
+     white label ink        8.31:1 worst    needs 4.5:1
+     outlined border 0.55   3.71:1 worst    needs 3:1  (0.40 measured 2.68 and failed)
+     filled default ink    17.07:1          Grey 900 on white
+   --------------------------------------------------------------------------- */
+/*
+   THE INK for the filled treatment comes from the SURFACE, because the button
+   cannot know what it is sitting on: the AI panel wants Warm Mauve 950, a Journey
+   Green band wants its own dark green. Same mechanism as --rsui-page-header-* and
+   --rsui-metric-card-*.
+
+   The fallback lives INSIDE the var() call, not as a declaration on this class.
+   Declaring `--rsui-button-on-color-ink: <fallback>` here looks equivalent and is
+   not: a declaration on the element beats an inherited one, so the surface's value
+   would never win and every button would take the fallback. Measured that exact
+   bug before fixing it — the ink came back Grey 900 on all three surfaces.
+*/
+
+/*
+   The base slot's focus ring is built for a light ground, and its offset paints
+   white — on a dark surface that reads as one thick white band rather than a ring
+   with a gap. A plain outline is simpler than fighting the ring utilities, and
+   white reads on every tonal surface.
+*/
+.rsui-button-slot--on-color:focus-visible {
+    @apply ring-0;
+
+    outline: 2px solid var(--color-text-on-color);
+    outline-offset: 2px;
+}
+
+/* --- filled: the loudest thing a dark surface can carry ------------------- */
+.rsui-button-slot--on-color.rsui-button-primary {
+    background: var(--color-text-on-color);
+    border-color: transparent;
+    color: var(--rsui-button-on-color-ink, var(--color-text-primary));
+}
+
+.rsui-button-slot--on-color.rsui-button-primary:hover {
+    background: var(--Colors-Grey-100);
+    border-color: transparent;
+    color: var(--rsui-button-on-color-ink, var(--color-text-primary));
+}
+
+.rsui-button-slot--on-color.rsui-button-primary:active {
+    background: var(--Colors-Grey-200);
+    border-color: transparent;
+}
+
+.rsui-button-slot--on-color.rsui-button-primary:disabled,
+.rsui-button-slot--on-color.rsui-button-primary:disabled:active {
+    background: rgba(255, 255, 255, 0.24);
+    border-color: transparent;
+    color: rgba(255, 255, 255, 0.6);
+}
+
+/* --- outlined ------------------------------------------------------------- */
+.rsui-button-slot--on-color.rsui-button-secondary {
+    background: transparent;
+    /* 0.55, not lower: see the measurements above. */
+    border-color: rgba(255, 255, 255, 0.55);
+    color: var(--color-text-on-color);
+}
+
+.rsui-button-slot--on-color.rsui-button-secondary:hover {
+    background: rgba(255, 255, 255, 0.12);
+    border-color: var(--color-text-on-color);
+    color: var(--color-text-on-color);
+}
+
+.rsui-button-slot--on-color.rsui-button-secondary:active {
+    background: rgba(255, 255, 255, 0.2);
+}
+
+.rsui-button-slot--on-color.rsui-button-secondary:disabled,
+.rsui-button-slot--on-color.rsui-button-secondary:disabled:active {
+    background: transparent;
+    border-color: rgba(255, 255, 255, 0.2);
+    color: rgba(255, 255, 255, 0.45);
+}
+
+/* --- text alone ----------------------------------------------------------- */
+.rsui-button-slot--on-color.rsui-button-tertiary {
+    background: transparent;
+    border-color: transparent;
+    color: var(--color-text-on-color);
+}
+
+.rsui-button-slot--on-color.rsui-button-tertiary:hover {
+    background: rgba(255, 255, 255, 0.12);
+    border-color: transparent;
+    color: var(--color-text-on-color);
+}
+
+.rsui-button-slot--on-color.rsui-button-tertiary:active {
+    background: rgba(255, 255, 255, 0.2);
+}
+
+.rsui-button-slot--on-color.rsui-button-tertiary:disabled,
+.rsui-button-slot--on-color.rsui-button-tertiary:disabled:active {
+    background: transparent;
+    border-color: transparent;
+    color: rgba(255, 255, 255, 0.45);
+}

package/components/card.css

@@ -12,6 +12,58 @@
     @apply border;
 }
 
+/* ---------------------------------------------------------------------------
+   THE AI FAMILY AT FULL STRENGTH — a bold dark surface, not the pale lilac wash
+   that `ai` gives. Every other Card variant is a light tint (brand is Brand-25),
+   so this is the first card that has to carry light type, and it is the only one
+   that has to adapt anything about its children.
+
+   THREE stops, and the foot is deliberately not a Warm Mauve value. Two stops one
+   ramp-step apart (900 -> 950) gave a lightness travel of 0.0413, which read as
+   almost flat. The light end cannot move: at Warm Mauve 800 the muted ink measures
+   4.39:1 and fails. So the travel has to come from the foot, and Grey 950 nearly
+   doubles it — 0.0774, 1.9x — while leaving the lightest stop, and therefore every
+   contrast figure below, completely unchanged.
+
+   Warm Mauve 950 stays as a mid stop at 65% so the card reads plum through most of
+   its height and only the last third deepens, rather than fading to black throughout.
+
+   Contrast on the LIGHTEST stop, Warm Mauve 900, which is the worst case and is not
+   affected by the foot:
+     white title            7.90:1   needs 4.5:1
+     Warm Mauve 200 muted   6.05:1   needs 4.5:1
+   --------------------------------------------------------------------------- */
+.rsui-card--ai-bold {
+    @apply bg-linear-to-br from-background-ai-bold-from via-background-ai-bold-via via-65% to-background-ai-bold-to;
+    @apply text-text-on-color;
+}
+
+/* Compound, matching how every other variant sets its border. Transparent rather
+   than a light rule: a bordered dark card wants its own edge, not a hairline. */
+.rsui-card--bordered.rsui-card--ai-bold {
+    @apply border-transparent;
+}
+
+/* The hover scrim is a DARK tint at 5% — correct on a light card, wrong here,
+   where it would make hover darker instead of lighter. Flipped to white. */
+.rsui-card--hoverable.rsui-card--ai-bold::before {
+    @apply bg-background-primary;
+}
+
+/* CardHeader sets its own dark ink (text-text-primary on the title,
+   text-text-secondary on the subtitle), which disappears on this surface. Reaching
+   into another component's classes is not ideal, but an invisible card header is
+   worse, and what a slot looks like on this card's own surface is this
+   stylesheet's business. Same reach PageHeader's tone makes into MetaInfo. */
+.rsui-card--ai-bold .rsui-card-header__title {
+    @apply text-text-on-color;
+}
+
+.rsui-card--ai-bold .rsui-card-header__subtitle,
+.rsui-card--ai-bold .rsui-card-header__eyebrow {
+    color: var(--Colors-Warm-Mauve-200);
+}
+
 .rsui-card--secondary {
     @apply bg-background-secondary;
 }
@@ -94,8 +146,9 @@
     @apply bg-background-primary-contrast opacity-0 transition-opacity duration-200;
 }
 
+/* 8% is Material 3's hover state-layer opacity; this was 5%. */
 .rsui-card--hoverable:hover::before {
-    @apply opacity-5;
+    @apply opacity-[0.08];
 }
 
 .rsui-card--clickable {
@@ -132,54 +185,129 @@
     @apply sr-only;
 }
 
+/* ── Media height cap ─────────────────────────────────────────────────────────
+   The ratio components (Image16By9, Image64by25, Image3By1, Image9By16) each fix an
+   aspect-ratio at author time, so the media's height is derived from the card's
+   width — while the text block beneath it stays roughly constant. That makes the
+   image's share of the card a function of whatever width the card lands on, which
+   the author does not control once the card is in a responsive grid. Measured, for
+   Image64by25 against a ~96px text block:
+
+     card width                 media height   share of the card
+      170px  (2-col, phone)          66px            41%
+      365px  (2-col @800px)         143px            60%
+     1246px  (full-width desktop)   487px            84%
+
+   Same component, 41% to 84%. Image9By16 reaches 2215px tall on that last one.
+
+   The cap stops the wide end running away without touching the narrow end at all:
+   below ~427px of card width a 16:9 image is under 240px and nothing changes.
+
+   max-h-full on the child is required, not decorative. The ratio box is the child,
+   and aspect-ratio yields to max-height — without it the box keeps its full ratio
+   height and simply overflows the cap, so the image crops from the bottom instead
+   of shrinking. With it the box shrinks and the img's object-cover crops centrally.
+
+   --rsui-card-image-max-h is the escape hatch: a card that genuinely wants a tall
+   portrait image can raise or unset it without an API change. */
 .rsui-card__image {
     @apply rounded-t-xl overflow-hidden w-full relative;
 }
 
+/* The cap goes on the RATIO BOX, not on the slot above, and it has to be an absolute
+   length. A percentage (max-h-full) does not clamp an aspect-ratio box: the box keeps
+   its full ratio-derived height and simply overflows the slot, so the image gets
+   clipped from the bottom — measured at 495px inside a 240px slot, losing the bottom
+   half of the photo. An absolute max-height makes the ratio yield, the box shrinks,
+   and .rsui-image's object-cover crops from the centre instead. */
+.rsui-card__image > * {
+    /* w-full is load-bearing. With only max-height, aspect-ratio holds the ratio by
+       shrinking the WIDTH instead — measured 240x614 inside a 1266px slot, with the
+       rest of the card left blank. Pinning the width makes the ratio yield on the
+       height axis, which is the axis being capped. */
+    @apply w-full;
+    max-height: var(--rsui-card-image-max-h, 15rem); /* 240px */
+}
+
 .rsui-card__image__badge-container {
-    @apply absolute inset-x-0 w-full bottom-0 py-space-lg px-space-xl flex gap-space-xxs;
+    @apply absolute inset-x-0 w-full bottom-0 py-space-lg flex gap-space-xs;
 }
 
 .rsui-card__content {
-    @apply flex-1 flex flex-col relative gap-y-space-sm;
+    @apply flex-1 flex flex-col relative gap-y-space-md;
 }
 
 .rsui-card__content--padded {
-    @apply py-space-lg px-space-xl min-h-16;
+    @apply py-space-lg min-h-16;
 }
 
-.rsui-card__meta {
-    @apply max-w-full overflow-x-auto grid grid-cols-1 gap-x-space-lg gap-y-space-xs;
-}
+/* The space between the header block and the body is an INTERNAL gap, so it takes the
+   16px "between blocks" value rather than the card's 24px padding. The 24px still holds
+   where it belongs — the top of the header, the bottom of the body, and both sides — so
+   the card is padded 24 all round and its two blocks sit 16 apart inside that.
 
-.rsui-card--2xs .rsui-card__meta {
-    @apply grid-cols-2;
+   It read as too much because the body's own padding-top was doing two jobs at once:
+   card padding when nothing sits above it, and a block gap when something does. */
+.rsui-card__header + .rsui-card__content--padded {
+    @apply pt-space-md;
 }
 
-.rsui-card--xs .rsui-card__meta {
-    @apply grid-cols-2;
+/* A divider is the exception: a rule wants symmetric space around it, and the header
+   already pays 24px above, so the body pays 24px below. (0,3,0) against the (0,2,0)
+   above, so it wins on specificity rather than on source order. */
+.rsui-card__header:has(.rsui-card-header--divider) + .rsui-card__content--padded {
+    @apply pt-space-lg;
 }
 
-.rsui-card--sm .rsui-card__meta {
-    @apply grid-cols-2;
-}
+/* Fields pack left and wrap, rather than sitting in equal-width grid columns.
+   grid-cols-N gave every field the same fraction of the card, so a short value left a
+   large hole before the next label and the two stopped reading as related — and below
+   375px there was no multi-column rule at all, so two short fields stacked on a card
+   with room for both.
 
-.rsui-card--md .rsui-card__meta {
-    @apply grid-cols-4;
-}
+   flex-wrap sizes each field to its content, so they sit 24px apart wherever they fit
+   and wrap only when they genuinely run out of room. It is also what
+   .rsui-card-horizontal__meta already does, so the same meta content now reads the same
+   in either card.
 
-.rsui-card--lg .rsui-card__meta {
-    @apply grid-cols-6 gap-x-space-xl;
-}
+   The trade: values no longer line up vertically across wrapped rows. That alignment is
+   only worth having when the columns are full, and the complaint here was the opposite
+   problem. This replaced eight per-size rules (grid-cols-1/2/4/6/8/10/12) with one.
 
-.rsui-card--xl .rsui-card__meta {
-    @apply grid-cols-8 gap-x-space-xl;
+   16px between wrapped rows against MetaInfo's 8px label -> value, so a field is grouped
+   by having more space around it than inside it. */
+.rsui-card__meta {
+    @apply max-w-full flex flex-wrap gap-x-space-lg gap-y-space-md;
 }
 
-.rsui-card--2xl .rsui-card__meta {
-    @apply grid-cols-10 gap-x-space-xl;
+
+/* ── Padding ───────────────────────────────────────────────────────────────────
+   Uniform 24px on all four sides. It replaced a 16/24/32 ramp keyed to the card's
+   own measured width, for two reasons:
+
+   - the brand book assigns 24 to "padding inside tiles and cards" and 32 to
+     "between related items", so the family's old flat 32 was borrowing another
+     job's value, and a ramp whose ends are 16 and 32 misses the card value twice
+   - Material 3 pads card content uniformly. The asymmetric 24 vertical / 32
+     horizontal this family carried is what made cards read wider than they are
+     tall, and it put the header text and the body on different left edges from
+     everything else on the page
+
+   Flat 24 still fixes the proportional problem the ramp was built for. Two columns
+   of a 753px CardGroup land at 365px — narrow even on a wide desktop, and under
+   useResponsiveWidth's smallest breakpoint — and 24px is 13% of that card where
+   the old 32px was 17.6%.
+
+   --rsui-card-indent-start lets a variant ADD to the padding rather than override
+   it; CheckboxCard sets it to clear its checkbox. The fallback lives inside the
+   var() call, never as its own declaration, or it would beat the inherited value.
+
+   .rsui-card-header and .rsui-card-horizontal__body keep their own px-space-xl at
+   (0,1,0) so either still works outside a Card. This rule is (0,2,0). */
+.rsui-card {
+    --rsui-card-pad-x: 1.5rem; /* space-lg, 24px */
 }
 
-.rsui-card--3xl .rsui-card__meta {
-    @apply grid-cols-12 gap-x-space-xl;
+.rsui-card :is(.rsui-card-header, .rsui-card__content--padded, .rsui-card__image__badge-container, .rsui-card-horizontal__body) {
+    padding-inline: calc(var(--rsui-card-pad-x) + var(--rsui-card-indent-start, 0px)) var(--rsui-card-pad-x);
 }

package/components/card_header.css

@@ -1,10 +1,11 @@
 .rsui-card-header {
     @apply @container/card-header;
-    @apply flex flex-col gap-x-space-sm gap-y-space-lg transition-all;
+    @apply flex flex-col gap-x-space-md gap-y-space-md transition-all;
+    /* px-space-xl is only the fallback for a CardHeader used outside a Card. Inside one
+       — which is every usage in this library — the padding rule at the foot of card.css
+       overrides it with the card's 24px. Change that rule, not this. */
     @apply pt-space-lg pb-0 px-space-xl;
     @apply border-b border-transparent;
-
-    @apply @md/card-header:flex-row @md/card-header:justify-between @md/card-header:items-center;
 }
 
 .rsui-card-header--clickable {
@@ -21,7 +22,7 @@
 }
 
 .rsui-card-header__header {
-    @apply flex-1 flex justify-between items-start gap-x-space-sm;
+    @apply flex-1 flex justify-between items-start gap-x-space-md;
 }
 
 .rsui-card-header__header--single-line {
@@ -29,13 +30,15 @@
 }
 
 /* Centring only holds while the text block is a lone title. `--single-line` means the *title*
-   is clamped to one line, not that the header is one row — add a subtitle and a badge and the
-   block is 78px tall, where centring a 48px avatar left it sitting 15px low against the text
-   it belongs to. Seen in production on the Twinsies meeting cards. Top-align as soon as the
-   block carries more than the title; a lone title is shorter than the avatar, so centring
-   stays correct there. */
-.rsui-card-header__header--single-line:has(.rsui-card-header__subtitle),
-.rsui-card-header__header--single-line:has(.rsui-card-header__badge) {
+   is clamped to one line, not that the header is one row — add a subtitle and centring a 48px
+   avatar leaves it sitting low against the text it belongs to. Seen in production on the
+   Twinsies meeting cards. Top-align as soon as the block carries more than the title; a lone
+   title is shorter than the avatar, so centring stays correct there.
+
+   There used to be a second branch here for :has(.rsui-card-header__badge). The badge is no
+   longer inside __header — it sits below the row on the card's own left edge — so that branch
+   could never match again and has been dropped rather than left to look load-bearing. */
+.rsui-card-header__header--single-line:has(.rsui-card-header__subtitle) {
     @apply @md/card-header:items-start;
 }
 
@@ -47,19 +50,59 @@
     @apply items-start;
 }
 
+/* An eyebrow above the title: the small label a card uses to say what KIND of
+   thing it is before it says which one. There was no type style for this in the
+   system, so this introduces one — xs, semibold, uppercase, wide tracking, in the
+   secondary ink so it sits under the title rather than competing with it. */
+/* 8px down to the title. The eyebrow labels the card's KIND before its name, so it
+   reads as its own line rather than as part of the title block — the brand's smallest
+   step, not the 4px a tight pair takes. gap-x-space-xs rather than the raw gap-x-2 it
+   arrived with; same 8px, but it now says it is a token. */
+.rsui-card-header__eyebrow {
+    @apply flex items-center gap-x-space-xs mb-space-xs;
+    @apply text-xs font-semibold uppercase tracking-wider text-text-secondary;
+}
+
+/* A badge brings its own case, size and tracking, and BadgeRedSeedAI is the common
+   eyebrow — so it must not inherit the uppercase treatment meant for plain text.
+   Badge sets no text-transform of its own, so without this the uppercase leaks in. */
+.rsui-card-header__eyebrow .rsui-badge {
+    @apply normal-case tracking-normal;
+}
+
+/* One gap at every width. The @md override used to drop this to space-xxs (4px),
+   which is not on the brand's 8px rhythm — and a title/subtitle pair does not want
+   a different relationship on a wide card than on a narrow one. */
+/* No row-gap here on purpose. One gap cannot serve both relationships in this column:
+   an eyebrow is a separate label sitting ABOVE the title and wants the brand's 8px,
+   while the title and its subtitle are a tight pair and want 4px. The children carry
+   their own margins instead, which also means an absent eyebrow or subtitle
+   contributes nothing rather than leaving a gap behind. */
 .rsui-card-header__text {
-    @apply flex-1 flex flex-col gap-y-space-xs;
-
-    @apply @md/card-header:gap-y-space-xxs;
+    @apply flex-1 flex flex-col;
 }
 
 .rsui-card-header__title-container {
-    @apply flex flex-wrap items-center gap-y-space-xxs gap-x-space-xs;
+    @apply flex flex-wrap items-center gap-y-space-xs gap-x-space-xs;
 }
 
+/* Header 4 from the brand type scale: Inter Semibold, 20px, 130%. This was 18px,
+   which is not a step on the scale at all (16 / 20 / 28 / 40 / 64) and sat only 2px
+   above the 16px body, so the hierarchy barely registered.
+
+   Material 3 would use Title Medium (16sp) for a card headline, but M3 pairs that
+   with 14sp body. RedSeed holds a 16px body floor, so a 16px title would collapse
+   into the body it sits above — hence the next step up rather than M3's literal size. */
 .rsui-card-header__title {
     @apply flex w-full;
-    @apply text-lg leading-6 font-semibold text-text-primary;
+    @apply text-xl leading-[1.3] font-semibold text-text-primary;
+}
+
+/* The badge sits below the avatar/title row, on the card's own left edge, level with the
+   body beneath it — so it is a child of .rsui-card-header rather than of __text, and picks
+   up the card's padding directly. The 16px above it is __card-header's own row gap. */
+.rsui-card-header__badge {
+    @apply flex flex-wrap items-center gap-space-xs;
 }
 
 .rsui-card-header__title--single-line {
@@ -68,7 +111,24 @@
     @apply @md/card-header:line-clamp-1;
 }
 
+/* TIGHT PAIR — 4px up to the title, deliberately off the brand's 8px rhythm. The
+   canonical statement of why; the other two instances point here.
+
+   The book's 8px assumes the gap is the only space between two lines of text. It is
+   not: line-height contributes leading of its own at both ends. The title is 20/26 and
+   this is 14/20, so roughly 6px of half-leading already sits between them before any
+   gap is added — 8px renders as about 14px of visible space and the pair reads as two
+   separate lines rather than one thing and its qualifier. 4px puts the visible space
+   near 7px, measured.
+
+   Same reason as MetaInfo's label -> value and .rsui-card-horizontal__content's
+   title -> description. Three instances is a pattern, not three exceptions: the brand
+   scale has no step for a tightly-coupled text pair, raised on #317.
+
+   Off-scale values elsewhere in the card family are drift and are banned by
+   CardSpacing.test.js, which allows only the ones carrying this TIGHT PAIR marker. */
 .rsui-card-header__subtitle {
+    @apply mt-space-xxs;
     @apply text-sm leading-5 text-text-secondary;
 }
 
@@ -79,15 +139,15 @@
 }
 
 .rsui-card-header__toolbar {
-    @apply flex gap-space-sm justify-end;
+    @apply flex gap-space-xs justify-end;
 
     @apply @md/card-header:items-center;
 }
 
 .rsui-card-header__actions-desktop {
-    @apply flex gap-space-sm items-center;
+    @apply flex gap-space-xs items-center;
 }
 
 .rsui-card-header__actions-mobile {
-    @apply flex flex-wrap gap-space-sm items-center;
+    @apply flex flex-wrap gap-space-xs items-center;
 }

package/components/card_horizontal.css

@@ -175,7 +175,9 @@
 .rsui-card-horizontal__body {
     /* Mobile: body fills full width below the image (self-stretch default).
        sm+: self-start so body drives the grid row height (not stretches to it). */
-    @apply flex flex-col gap-y-space-xs py-space-lg px-space-xl min-w-0;
+    /* px-space-xl here is the standalone fallback only; the padding rule at the foot of
+       card.css overrides it with the card's 24px, since CardHorizontal renders a <Card>. */
+    @apply flex flex-col gap-y-space-md py-space-lg px-space-xl min-w-0;
 }
 
 @container card-horizontal (min-width: calc(32rem - 2px)) /* --container-lg (32rem=512px) - 2px border */ {
@@ -184,18 +186,28 @@
     }
 }
 
+/* TIGHT PAIR — 4px, matching the card header's title -> subtitle. See the note above
+   .rsui-card-header__text for why a coupled text pair sits off the 8px rhythm: the
+   line-height of both lines already contributes leading, so 8px renders as roughly
+   14px of visible space and the two stop reading as one unit. */
 .rsui-card-horizontal__content {
     @apply flex flex-col gap-y-space-xxs;
 }
 
+/* The same as .rsui-card-header__title — brand Header 4, Inter Semibold 20/26. It was
+   text-base with leading-snug (16/22, Header 5), so the same title role rendered a step
+   smaller here than in a Card and the two did not read as one family. */
 .rsui-card-horizontal__title {
-    @apply text-base font-semibold text-text-primary leading-snug;
+    @apply text-xl leading-[1.3] font-semibold text-text-primary;
 }
 
 .rsui-card-horizontal__description {
     @apply text-sm text-text-secondary;
 }
 
+/* Matches .rsui-card__meta: 24px between fields, 16px between wrapped rows. It was
+   12px and 4px, so the same meta content sat on a tighter rhythm here than in a Card
+   and the two did not read as the same family. */
 .rsui-card-horizontal__meta {
-    @apply flex flex-wrap items-center gap-x-space-sm gap-y-space-xxs;
+    @apply flex flex-wrap items-center gap-x-space-lg gap-y-space-md;
 }

package/components/category_list.css

@@ -0,0 +1,65 @@
+/* ---------------------------------------------------------------------------
+   Category list
+
+   A wrapping row of neutral badges naming the buckets a record sits in.
+
+   Wrapping, not scrolling. The cap is what keeps the row short; a horizontal
+   scroller would hide categories behind a gesture for the same reason a table
+   never scrolls the page sideways.
+
+   Imported after badge.css, since the linked variant restyles the badge inside
+   its anchor.
+   --------------------------------------------------------------------------- */
+/* 16px out to the toggle, 8px between the badges — both on the brand 8px rhythm, and
+   the wider gap is what stops "+4 more" reading as one more category. */
+.rsui-category-list {
+    @apply flex flex-wrap items-center gap-x-space-md gap-y-space-xs;
+}
+
+/* The list resets its own margins and padding, the way breadcrumbs and
+   linked_list already do — a `ul` carries a browser indent that would push the
+   row out of line with the title above it. */
+.rsui-category-list__items {
+    @apply flex flex-wrap items-center gap-x-space-xs gap-y-space-xs;
+    @apply list-none m-0 p-0;
+}
+
+.rsui-category-list__item {
+    @apply flex;
+}
+
+/* A linked category has to look like a link. A badge with no pointer and no
+   hover reads as a label, which is what most categories are, so the ones that
+   genuinely filter a list get the library's always-on underline (the LinkSlot
+   convention) plus a hover state on the pill itself. Half-measures are the
+   failure here: a pointer alone is not a visible affordance. */
+.rsui-category-list__link {
+    @apply block rounded-full no-underline;
+    @apply focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-border-primary outline-hidden;
+}
+
+.rsui-category-list__link .rsui-badge {
+    @apply cursor-pointer underline underline-offset-2 transition-colors;
+}
+
+/* One grey step darker, not the usual `hover:bg-background-secondary`. That is the
+   convention for a hover on a white surface, and a neutral badge already sits on
+   background-secondary — applying it here would be a no-op. */
+.rsui-category-list__link:hover .rsui-badge {
+    @apply bg-background-secondary-invert border-border-primary text-text-primary;
+}
+
+/* The toggle. Matches the "See all" / view-all treatment already used in
+   section headers and footers: semibold on the tertiary-button colour, no
+   resting underline, underline on hover only. That pairing reads as an action
+   without competing with the badges beside it.
+
+   Sibling to the list rather than inside it, so it wraps onto its own line at
+   phone widths — which is where the cap does most of its work. */
+.rsui-category-list__more {
+    @apply inline-flex w-fit items-center whitespace-nowrap;
+    @apply text-sm font-semibold no-underline cursor-pointer transition-colors;
+    @apply text-button-tertiary hover:text-button-tertiary-hover;
+    @apply hover:underline underline-offset-4 decoration-2;
+    @apply focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-button-tertiary outline-hidden;
+}

package/components/checkbox_card.css

@@ -2,16 +2,15 @@
     @apply @container/checkbox-card;
 }
 
-.rsui-checkbox-card .rsui-card-header__actions-mobile {
-    @apply pl-8;
-}
+/* No checkbox indent anywhere in this component — see the note above the content
+   rule below. Everything shares the card's own 24px left edge with the checkbox. */
 
 .rsui-checkbox-card--disabled {
     @apply focus-visible:ring-0;
 }
 
 .rsui-checkbox-card__content {
-    @apply flex items-center p-2 gap-4;
+    @apply flex items-center p-space-xs gap-space-md;
 }
 
 .rsui-checkbox-card__icon {
@@ -59,26 +58,40 @@
     @apply items-center;
 }
 
+/* 16px between the checkbox and the title, not 8px. A 24px control next to 20px text
+   needs more separation than the raw gap-2 this carried — at 8px the box crowded the
+   first letter. Note this is the opposite call to the card header's 48px avatar, which
+   wanted 8px: a large avatar reads as attached to its title, a small control reads as
+   cramped against it. Both values are on the brand's 8px rhythm. */
 .rsui-checkbox-card__title-row {
-    @apply inline-flex items-start gap-2;
+    @apply inline-flex items-start gap-space-md;
 }
 
 .rsui-checkbox-card__subtitle {
     @apply text-sm text-text-quaternary;
-    @apply pl-8;
 }
 
 .rsui-checkbox-card__badge {
-    @apply pl-8 flex gap-space-xs;
+    @apply flex gap-space-xs;
 }
 .rsui-checkbox-card__title-text--strikethrough {
     @apply line-through;
 }
 
-/* Align body/meta content with the header title (account for checkbox width + gap) */
-.rsui-checkbox-card > .rsui-card__content--padded {
-    @apply pl-8 @sm/checkbox-card:pl-12;
-}
+/* NO checkbox indent. The subtitle, badge, meta and mobile actions all sit on the
+   card's own 24px left edge, level with the checkbox — the only thing offset is the
+   title text, and that is offset because the checkbox physically precedes it on the
+   same line, which reads as deliberate.
+
+   This component used to indent all four of those by 32px (checkbox 24 + gap 8) so
+   they lined up with the title text instead. That left the checkbox alone in a 32px
+   gutter with nothing under it, which is what read as messy on a narrow card: three
+   elements moved right to serve one, and the empty column below the control was the
+   most prominent thing in the layout.
+
+   Nothing is left to fight the card's padding shorthand here, so no
+   --rsui-card-indent-start either. The variable stays in card.css for any variant
+   that does need an additive inset. */
 
 /* Success state styling */
 /* Increase specificity so it overrides base .rsui-card styles */

package/components/meta_info.css

@@ -1,4 +1,18 @@
 .rsui-meta-info {
+    /* TIGHT PAIR — 4px between a label and its value, deliberately off the brand's 8px
+   rhythm. See the note above .rsui-card-header__text in card_header.css for the full
+   reasoning. Do not "fix" it back to space-xs.
+
+   The book assigns 8px to a label/value pair, but that assumes 16px body text, where
+   8px is a third of a line box. This component sets 12px with a 16px line box, so 8px
+   is HALF a line — measured — and at that size the pair stops reading as one field and
+   reads as two loose rows. 4px is a quarter of the line, and against the 16px between
+   fields it gives a 1:4 grouping instead of 1:2.
+
+   The real cause is that the meta is 12px at all, which is below the brand's own 14px
+   caption floor. Fix the size and 8px becomes correct; that belongs with the MetaInfo
+   size ramp in #316, not here. Until then this is the size the component ships at, and
+   the gap has to suit it. */
     @apply flex flex-col gap-y-1;
 }
 
@@ -6,7 +20,7 @@
    legacy pattern, double-counts against any gap and breaks once the row wraps. Every other
    component in the library spaces with gap. */
 .rsui-meta-info__top {
-    @apply flex gap-x-1 items-center;
+    @apply flex gap-x-space-xs items-center;
 }
 
 .rsui-meta-info__label-icon {
@@ -18,7 +32,7 @@
    eye landed on "Age" instead of on the number. Grey-600 on white measures 7.26:1, so it stays
    comfortably readable at 12px. */
 .rsui-meta-info__label {
-    @apply font-medium text-xs text-text-tertiary;
+    @apply font-medium text-text-tertiary;
 }
 
 .rsui-meta-info__help {
@@ -32,25 +46,37 @@
 /* The value carries the information, so it takes the emphasis the label gave up. */
 .rsui-meta-info__value {
     @apply flex items-center gap-x-space-xs;
-    @apply text-xs font-semibold text-text-primary;
+    @apply font-semibold text-text-primary;
 }
 
-.rsui-meta-info--md .rsui-meta-info__label {
-    @apply text-sm;
+/* SIZE RAMP. Three steps, matching StageDial. The label and value always share a
+   size — they are one field, and a field whose descriptor and content disagree on
+   size reads as two things.
+
+   `sm` is the default, and it is now DECLARED rather than left implicit in the base
+   rules. The size used to live on .rsui-meta-info__label and __value directly, so
+   the default had no class of its own: it could not be targeted, and the ramp read
+   as "md, lg, or nothing".
+
+   The names sit one step below the scale they produce — sm is text-xs, md is
+   text-sm, lg is text-base. That predates this change and is deliberately not
+   renamed: md and lg are used in consuming apps, so renaming them is a breaking
+   change for a cosmetic gain. */
+.rsui-meta-info--sm .rsui-meta-info__label,
+.rsui-meta-info--sm .rsui-meta-info__value {
+    @apply text-xs;
 }
 
+.rsui-meta-info--md .rsui-meta-info__label,
 .rsui-meta-info--md .rsui-meta-info__value {
     @apply text-sm;
 }
 
-.rsui-meta-info--lg .rsui-meta-info__label {
-    @apply text-base;
-}
-
+.rsui-meta-info--lg .rsui-meta-info__label,
 .rsui-meta-info--lg .rsui-meta-info__value {
     @apply text-base;
 }
 
 .rsui-meta-info--inline {
-    @apply flex-row flex-wrap items-center gap-x-2 gap-y-1;
+    @apply flex-row flex-wrap items-center gap-x-space-xs gap-y-space-xs;
 }

package/components/metric_card.css

@@ -14,7 +14,7 @@
 }
 
 .rsui-metric-card__heading {
-    @apply w-full flex items-center gap-space-sm;
+    @apply w-full flex items-center gap-space-md;
 }
 
 .rsui-metric-card__icon {

package/components/page_header.css

@@ -1,39 +1,86 @@
+/* gap, not space-y. space-* adds margins to children, which is the legacy pattern the
+   rest of the library has moved off — see the note in meta_info.css. It double-counts
+   against any margin a child sets for itself and it breaks once a row wraps. Both
+   happened here: see __title below. */
+
+/* A column at every width. This was `flex` — which is row — with `lg:flex-col`, so below
+   lg the root laid its children out horizontally.
+
+   Nothing caught it because below lg there was only ever one visible child to lay out:
+   `__top`, since `__meta` is `hidden lg:flex`. A single flex item looks the same in a row
+   as in a column. The tell was this rule's own `gap-y-space-md`, which does nothing in a
+   row direction unless the row wraps — 16px of dead declaration, written by someone
+   thinking "column".
+
+   Add a second full-width row and the direction stops being invisible: the categories
+   landed *beside* the title on a phone with both squeezed to half the screen. Measured.
+
+   `justify-between` is kept rather than dropped. It is inert in an unconstrained column,
+   so it changes nothing here, but a consuming app that constrains the header's height
+   would notice it going. From lg up this rule now resolves exactly as it did before. */
 .rsui-page-header {
-    @apply w-full flex justify-between space-y-4;
-    @apply lg:flex-col;
+    @apply w-full flex flex-col justify-between gap-y-space-md;
 }
 
 .rsui-page-header__top {
-    @apply w-full flex flex-col items-start space-y-2 flex-wrap;
-    @apply lg:flex-row lg:space-y-0 lg:items-center;
+    @apply w-full flex flex-col items-start gap-y-space-xs flex-wrap;
+    @apply lg:flex-row lg:gap-y-0 lg:items-center;
 }
 
+/* 16px avatar -> title, matching the card family's avatar gap, and set once as a gap
+   rather than twice as margins.
+   
+   It was space-x-6 here plus mr-3 on the avatar. In Tailwind v4 space-x-* sets
+   margin-inline-end on every child but the last, so the avatar's own mr-3 overrode it
+   and the rendered gap was 12px, not the 24px this rule reads as. Measured. Neither
+   value was reachable by editing the other, which is the whole problem with space-*. */
 .rsui-page-header__title {
-    @apply pr-2 flex flex-row items-start space-x-6;
+    @apply pr-space-xs flex flex-row items-start gap-x-space-md;
 }
 
+/* Material 3 puts a prominent page title in its Headline range and sets all UI type in
+   a sans face — so this drops Newsreader and lands on the two RedSeed steps that cover
+   that range: Header 3 (Inter Bold 28/120%) below lg, Header 2 (Inter Black 40/115%,
+   -1% tracking) from lg up.
+
+   It was font-redseed-heading — which resolves to Newsreader — at 30 -> 36px. Off-brand
+   twice over: the book restricts Newsreader to Header 1 and says not to push it below
+   Header 1 sizes, and neither 30 nor 36 is a step on the scale at all.
+
+   40px also keeps a page title a clear step above SectionHeader's 28px, which is the
+   hierarchy M3 maintains between a top app bar and a heading inside content.
+
+   Deviation worth naming: M3 sets top-app-bar titles at weight 400 Regular. RedSeed's
+   scale specifies Bold for Header 3 and Black for Header 2, and the tokens win here per
+   the same rule the card family followed — M3's structure, RedSeed's type.
+
+   lg:mr-4 removed. __title-text-container already supplies a 24px gap between the title
+   and the status slot, so the margin added to it and the rendered gap was 40px — the
+   same accidental sum the avatar had. */
 .rsui-page-header__title h1 {
-    @apply font-redseed-heading text-3xl lg:text-4xl font-semibold text-text-primary lg:mr-4;
+    @apply text-[1.75rem] leading-[1.2] font-bold text-text-primary;
+    @apply lg:text-[2.5rem] lg:leading-[1.15] lg:tracking-[-0.01em] lg:font-black;
 }
 
 .rsui-page-header__title-text-container {
-    @apply flex flex-row space-x-6 items-center;
+    @apply flex flex-row gap-x-space-lg items-center;
 }
 
 .rsui-page-header__status {
     @apply flex-shrink-0;
 }
 
+/* Brand body: 16px at 150%. leading-relaxed is 1.625, so this rendered 16/26. */
 .rsui-page-header__subtitle {
-    @apply text-base text-text-secondary leading-relaxed;
+    @apply text-base leading-normal text-text-secondary;
 }
 
 .rsui-page-header__status-actions {
-    @apply flex-1 flex space-x-2 items-center justify-between lg:pr-2;
+    @apply flex-1 flex gap-x-space-xs items-center justify-between lg:pr-space-xs;
 }
 
 .rsui-page-header__actions {
-    @apply flex-1 flex space-x-2 items-center justify-end;
+    @apply flex-1 flex flex-wrap gap-space-xs items-center justify-end;
 }
 
 .rsui-page-header__meta-action {
@@ -41,7 +88,7 @@
 }
 
 .rsui-page-header__search {
-    @apply w-full pt-2 lg:pt-0 lg:w-auto;
+    @apply w-full pt-space-xs lg:pt-0 lg:w-auto;
 }
 
 .rsui-page-header__meta-modal {
@@ -49,15 +96,15 @@
 }
 
 .rsui-page-header__meta-modal__body {
-    @apply flex flex-col space-y-4;
+    @apply flex flex-col gap-y-space-md;
 }
 
 .rsui-page-header__meta {
-    @apply hidden lg:flex space-x-8;
+    @apply hidden lg:flex gap-x-space-xl;
 }
 
 .rsui-page-header__avatar {
-    @apply shrink-0 size-12 mr-3;
+    @apply shrink-0 size-12;
 }
 
 /* Profile variant — larger avatar, bottom-aligned text, inline subtitle */
@@ -65,16 +112,18 @@
     @apply lg:items-end;
 }
 
+/* The profile avatar is larger, so it takes more room beside the title than the
+   default 16px — 24px from lg up, added to the gap rather than replacing it. */
 .rsui-page-header--profile .rsui-page-header__avatar {
-    @apply shrink-0 size-auto mr-3 lg:mr-6 lg:pb-4;
+    @apply shrink-0 size-auto lg:me-space-xs lg:pb-space-md;
 }
 
 .rsui-page-header--profile .rsui-page-header__status-actions {
-    @apply lg:self-end lg:pb-6;
+    @apply lg:self-end lg:pb-space-lg;
 }
 
 .rsui-page-header--profile .rsui-page-header__subtitle {
-    @apply flex flex-col gap-1 lg:flex-row lg:items-center lg:gap-4;
+    @apply flex flex-col gap-space-xs lg:flex-row lg:items-center lg:gap-space-md;
 }
 
 
@@ -99,7 +148,7 @@
     /* Fallbacks keep an unrecognised tone legible rather than transparent. */
     background: var(--rsui-page-header-bg, var(--color-background-secondary));
 
-    @apply py-space-lg px-space-xl;
+    @apply p-space-lg;
 }
 
 .rsui-page-header--tone-green {
@@ -153,3 +202,30 @@
 .rsui-page-header--toned .rsui-meta-info__help {
     color: var(--rsui-page-header-ink-muted);
 }
+
+/* ---------------------------------------------------------------------------
+   Categories
+
+   A wrapping row of neutral badges between the subtitle and the meta, naming
+   the buckets the record sits in. See category_list.css for the row itself.
+
+   Neutral is a rule here rather than a preference: the header already carries
+   exactly one coloured badge — the status beside the title — and a second
+   colour in this row makes both of them meaningless.
+
+   One row, not two kinds. Duration, level and domain are facts about the
+   record and belong in the meta grid; a bucket the record sits in belongs
+   here.
+   --------------------------------------------------------------------------- */
+.rsui-page-header__categories {
+    @apply flex w-full;
+}
+
+/* The tertiary green the toggle borrows disappears on a dark band, so it moves
+   onto the tone's own ink. Same reasoning as the MetaInfo overrides above:
+   reaching into another component's classes is not ideal, but an invisible
+   control is worse, and what a slot looks like on this component's tonal
+   surface is this stylesheet's business. */
+.rsui-page-header--toned .rsui-category-list__more {
+    color: var(--rsui-page-header-ink);
+}

package/components/radio_card.css

@@ -1,11 +1,15 @@
 .rsui-radio-card {
     @apply relative cursor-pointer transition-all;
     /* No resting shadow: this was the only card in the family that sat lifted while the
-       other seven are flat. Padding matches the family's 24/32 rhythm rather than the 12/12
-       it used to carry alone. ring-offset-2 matches the focus geometry every other card
-       uses — this ring previously hugged the border with no offset. */
+       other seven are flat. ring-offset-2 matches the focus geometry every other card
+       uses — this ring previously hugged the border with no offset.
+
+       Padding is 24/24, the same as every other member — but it has to be written here
+       rather than inherited, because RadioCard is the one family member that does NOT
+       render a <Card>, so the padding rule in card.css never reaches it. Keep the two in
+       step. The 32px sides it used to carry were 20% of its fixed 320px width. */
     @apply rounded-xl outline-hidden select-none;
-    @apply flex flex-col gap-3 py-space-lg px-space-xl max-w-80 w-80;
+    @apply flex flex-col gap-space-md py-space-lg px-space-lg max-w-80 w-80;
     @apply bg-background-primary border border-border-primary;
     @apply focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-border-primary;
 }
@@ -48,7 +52,7 @@
 }
 
 .rsui-radio-card__title-row {
-    @apply relative text-base font-medium text-text-primary line-clamp-3 min-h-6 pr-8;
+    @apply relative text-xl leading-[1.3] font-medium text-text-primary line-clamp-3 min-h-6 pr-8;
 
     @apply after:content-[''] after:absolute after:top-0 after:right-0;
     @apply after:size-6 after:rounded-full after:transition-all;
@@ -72,8 +76,11 @@
     @apply after:border-7 after:border-background-primary after:bg-border-primary;
 }
 
+/* Brand Header 4, matching .rsui-card-header__title. The row above carries the same
+   size deliberately: line-clamp-3 lives there, and it measures against the clamped
+   element's own line-height, so a mismatch clips at the wrong place. */
 .rsui-radio-card__title {
-    @apply flex-1 text-base font-semibold text-text-primary;
+    @apply flex-1 text-xl leading-[1.3] font-semibold text-text-primary;
 }
 
 .rsui-radio-card__content-row {
@@ -85,9 +92,9 @@
 }
 
 .rsui-radio-card__meta-row {
-    @apply grid grid-cols-1 sm:grid-cols-2 gap-x-8 gap-y-2;
+    @apply grid grid-cols-1 sm:grid-cols-2 gap-x-space-xl gap-y-space-xs;
 }
 
 .rsui-radio-card__action-row {
-    @apply flex flex-wrap gap-2;
+    @apply flex flex-wrap gap-space-xs;
 }

package/components/section_header.css

@@ -1,6 +1,7 @@
 .rsui-section-header {
-    @apply flex flex-col gap-x-space-sm gap-y-space-lg transition-all;
+    @apply flex flex-col gap-x-space-md gap-y-space-md transition-all;
     @apply md:flex-row md:justify-between md:items-center;
+    @apply border-b border-transparent;
 }
 
 /* overflow-hidden guards against a useResponsiveWidth feedback loop (mobile
@@ -11,22 +12,40 @@
     @apply overflow-hidden;
 }
 
+/* The --divider class was being set by SectionHeader.vue with no rule behind it, so
+   showDivider did nothing. Implemented the way CardHeader does it — a transparent
+   bottom border on the base, coloured here — and the prop's default flips to false in
+   the same change, so every consumer's appearance is unchanged (they saw no rule
+   before and see none now) while the prop starts working for anyone who opts in.
+   Brand-wise a hairline between sections is right; a box around them is not. */
+.rsui-section-header--divider {
+    @apply border-border-primary;
+}
+
 .rsui-section-header--clickable {
     @apply cursor-pointer;
 }
 
 .rsui-section-header__header {
-    @apply flex-1 min-w-0 flex justify-between items-start gap-x-space-sm;
+    @apply flex-1 min-w-0 flex justify-between items-start gap-x-space-md;
 }
 
 .rsui-section-header__icon {
     @apply flex items-center justify-center;
 }
 
+/* No row-gap: one value cannot serve both a title/badge row and a title/subtitle pair.
+   The subtitle carries its own margin instead, which also means an absent subtitle
+   leaves no gap behind. Same structure as .rsui-card-header__text. */
 .rsui-section-header__text {
-    @apply flex-1 flex flex-col gap-y-space-xs;
+    @apply flex-1 flex flex-col;
 }
 
+/* An optical nudge, not spacing — which is why it stays a raw 4px rather than being
+   rounded onto the 8px rhythm. It lines the title's cap height up with the button text
+   beside it; the correct value is whatever makes those two agree, and it is not a gap
+   between two elements. Same category as the control offsets in checkbox_card and
+   card_group, which are also deliberately raw. */
 .rsui-section-header__text--with-toolbar {
     @apply pt-1;
 }
@@ -56,12 +75,35 @@
    from inside the header would silently override a size prop the consumer passed. The stories
    demonstrate the `sm` pairing.
 
-   TITLE SIZE: text-3xl from lg up. At a flat text-2xl the title box was 32px while even an sm
-   button is 38px, so the heading never led its own actions. Responsive rather than flat, and
-   matching how PageHeader scales, because mobile stacks the actions anyway (see
-   __actions-mobile) and the imbalance only really shows on wide screens. */
+   BADGE SIZE: a badge beside the title belongs at `xs`. Measured against the Header 4
+   title box (26px): the `md` badge is 34px — 131% of it — and `sm`, which is Badge's
+   DEFAULT, is 26px, exactly 100%. Either reads as competing with the heading rather than
+   labelling it. `xs` is 18px, 69%. Like ACTION SIZE above this is guidance, not enforced:
+   scoping a size from inside the header would silently override a size prop the consumer
+   passed, and CSS cannot tell Badge's default `sm` from an explicit one. The stories
+   demonstrate the pairing.
+
+   Worth knowing that `sm` being the default makes `<Badge>` with no size 100% of a
+   Header 4 title box anywhere it sits beside one — CardHeader included. That is a
+   Badge-level question rather than something to patch per header.
+
+   TITLE SIZE: brand Header 4 (20/130%) below lg, Header 3 (28/120%) from lg up. It was
+   text-2xl -> text-3xl, which is 24 -> 30 and neither is a step on the scale at all
+   (16 / 20 / 28 / 40 / 64).
+
+   Responsive rather than flat is kept deliberately, and so is the reason: mobile stacks
+   the actions (see __actions-mobile) so the title does not have to out-weigh them there,
+   while on a wide screen it sits beside them and does. Read the note below before
+   flattening this.
+
+   Honest limit: the original concern was that a 32px title box lost to a 38px sm button.
+   28px at 120% is a 34px box, so it is better but not resolved — a title that decisively
+   leads an sm button needs Header 2 (40px), which is PageHeader's step and would compete
+   with it. The alternative is smaller action buttons. That is a design call, flagged
+   rather than taken here. */
 .rsui-section-header__title-text {
-    @apply text-2xl lg:text-3xl font-bold line-clamp-2 md:line-clamp-1 text-text-primary;
+    @apply text-xl leading-[1.3] font-bold line-clamp-2 md:line-clamp-1 text-text-primary;
+    @apply lg:text-[1.75rem] lg:leading-[1.2];
     /* Reset heading UA margins so an <h1>-<h6> title matches the previous <div> */
     /* min-w-0 lets the title shrink and truncate first; the badge is shrink-0 so */
     /* it keeps its size. No flex-1 — a growing title pushes the See-all badge up */
@@ -80,18 +122,23 @@
     @apply flex items-center shrink-0;
 }
 
+/* TIGHT PAIR — 4px up to the title, deliberately off the brand's 8px rhythm. See the
+   note above .rsui-card-header__subtitle in card_header.css: line-height already
+   contributes half-leading at both ends, so 8px renders as roughly 14px and the pair
+   reads as two separate lines rather than one thing and its qualifier. */
 .rsui-section-header__subtitle {
+    @apply mt-space-xxs;
     @apply text-sm text-text-secondary;
 }
 
 .rsui-section-header__toolbar {
-    @apply flex gap-space-sm md:items-center justify-end;
+    @apply flex gap-space-xs md:items-center justify-end;
 }
 
 .rsui-section-header__actions-desktop {
-    @apply flex gap-space-sm items-center;
+    @apply flex gap-space-xs items-center;
 }
 
 .rsui-section-header__actions-mobile {
-    @apply flex flex-wrap gap-space-sm items-center justify-start;
+    @apply flex flex-wrap gap-space-xs items-center justify-start;
 }

package/components.css

@@ -23,6 +23,7 @@ Please be careful when adding new components and updating the order.
 @import './components/card.css';
 @import './components/card_header.css';
 @import './components/card_horizontal.css';
+@import './components/category_list.css';
 @import './components/checkbox_card.css';
 @import './components/column_picker.css';
 @import './components/comments.css';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@redseed/redseed-ui-tailwindcss",
-    "version": "7.57.0",
+    "version": "7.59.0",
     "description": "RedSeed UI Tailwindcss",
     "main": "index.js",
     "style": "index.css",

package/tokens.css

@@ -49,6 +49,13 @@
     --color-background-ai-from: #ebe0fa;
     --color-background-ai-to: var(--Colors-Background-AI-2); /* v1 defines ai-from only; ai-to kept as warm counterpart */
     --color-background-ai-contrast: var(--Colors-Warm-Mauve-600);
+    /* The AI family at full strength, for a BOLD surface rather than a light tint.
+       ai-from/ai-to are a pale lilac wash; these are the dark end of the same ramp,
+       for a card that has to carry white type. On-ramp on purpose — the /home/v2
+       mock used #56374c/#3b2635, which are not Warm Mauve values. */
+    --color-background-ai-bold-from: var(--Colors-Warm-Mauve-900);
+    --color-background-ai-bold-via: var(--Colors-Warm-Mauve-950);
+    --color-background-ai-bold-to: var(--Colors-Grey-950);
     --color-background-ai-invert: var(--Colors-Warm-Mauve-200);
 
     --color-border-primary: var(--Colors-Grey-400);