@redseed/redseed-ui-tailwindcss 7.56.0 → 7.58.0

package/components/form_field_date_range.css

@@ -153,6 +153,38 @@
     @apply hover:bg-background-brand-contrast;
 }
 
+/*
+ * Square off the edge each endpoint faces the range on, so the band closes.
+ *
+ * The base `.rsui-form-field-date-range__day` is `rounded-lg` on all four
+ * corners and the endpoints only override the background, so an endpoint used to
+ * sit between two square in-range fills as a rounded square — leaving a white
+ * notch at each corner where its curve pulled away from its neighbour. The band
+ * read as interrupted by the endpoint rather than containing it.
+ *
+ * MUI solves the same problem by drawing a continuous highlight band behind the
+ * cells and putting the endpoint circle on top of it. That needs a second
+ * element per cell; squaring the inner edge of the endpoint's own fill gets the
+ * same join out of the existing one.
+ */
+.rsui-form-field-date-range__day--range-start {
+    @apply rounded-r-none;
+}
+
+.rsui-form-field-date-range__day--range-end {
+    @apply rounded-l-none;
+}
+
+/*
+ * Both modifiers land on the same day for a single-day window — `today`, or a
+ * range picked start-and-end on one date. There is no band to join, so restore
+ * the full radius. This selector is deliberately last and doubly-classed so it
+ * outranks the two above.
+ */
+.rsui-form-field-date-range__day--range-start.rsui-form-field-date-range__day--range-end {
+    @apply rounded-lg;
+}
+
 /*
  * The day the presets resolve against — "today" as the server sees it.
  *

package/components/icon.css

@@ -88,42 +88,52 @@
 
 .rsui-icon--primary {
     @apply *:text-text-primary;
+    --rsui-icon-pulse: var(--color-text-primary);
 }
 
 .rsui-icon--secondary {
     @apply *:text-text-secondary;
+    --rsui-icon-pulse: var(--color-text-secondary);
 }
 
 .rsui-icon--brand {
     @apply *:text-text-brand;
+    --rsui-icon-pulse: var(--color-text-brand);
 }
 
 .rsui-icon--success {
     @apply *:text-text-success;
+    --rsui-icon-pulse: var(--color-text-success);
 }
 
 .rsui-icon--info {
     @apply *:text-text-info;
+    --rsui-icon-pulse: var(--color-text-info);
 }
 
 .rsui-icon--warning {
     @apply *:text-text-warning;
+    --rsui-icon-pulse: var(--color-text-warning);
 }
 
 .rsui-icon--error {
     @apply *:text-text-error;
+    --rsui-icon-pulse: var(--color-text-error);
 }
 
 .rsui-icon--ai {
     @apply *:text-text-ai;
+    --rsui-icon-pulse: var(--color-text-ai);
 }
 
 .rsui-icon--disabled {
     @apply *:text-text-disabled;
+    --rsui-icon-pulse: var(--color-text-disabled);
 }
 
 .rsui-icon--classic {
     @apply *:text-pink-500;
+    --rsui-icon-pulse: var(--color-pink-500);
 }
 
 .rsui-icon--primary.rsui-icon--invert {
@@ -216,52 +226,145 @@
     @apply *:text-text-on-color;
 }
 
+/*
+ * Both flags together is the one combination that puts the glyph back on its
+ * variant colour, against a tinted fill — so each of these restates the pulse
+ * token alongside it, undoing the on-colour default set below. Kept here rather
+ * than in a block of its own so the ring colour is edited in the same place as
+ * the glyph colour it has to match.
+ */
 .rsui-icon--primary.rsui-icon--background.rsui-icon--invert {
     @apply bg-background-primary-invert;
     @apply *:text-text-primary;
+    --rsui-icon-pulse: var(--color-text-primary);
 }
 
 .rsui-icon--secondary.rsui-icon--background.rsui-icon--invert {
     @apply bg-background-secondary-invert;
     @apply *:text-text-secondary;
+    --rsui-icon-pulse: var(--color-text-secondary);
 }
 
 .rsui-icon--brand.rsui-icon--background.rsui-icon--invert {
     @apply bg-background-brand-invert;
     @apply *:text-text-brand;
+    --rsui-icon-pulse: var(--color-text-brand);
 }
 
 .rsui-icon--success.rsui-icon--background.rsui-icon--invert {
     @apply bg-background-success-invert;
     @apply *:text-text-success;
+    --rsui-icon-pulse: var(--color-text-success);
 }
 
 .rsui-icon--info.rsui-icon--background.rsui-icon--invert {
     @apply bg-background-info-invert;
     @apply *:text-text-info;
+    --rsui-icon-pulse: var(--color-text-info);
 }
 
 .rsui-icon--warning.rsui-icon--background.rsui-icon--invert {
     @apply bg-background-warning-invert;
     @apply *:text-text-warning;
+    --rsui-icon-pulse: var(--color-text-warning);
 }
 
 .rsui-icon--error.rsui-icon--background.rsui-icon--invert {
     @apply bg-background-error-invert;
     @apply *:text-text-error;
+    --rsui-icon-pulse: var(--color-text-error);
 }
 
 .rsui-icon--ai.rsui-icon--background.rsui-icon--invert {
     @apply bg-background-ai-invert;
     @apply *:text-text-ai;
+    --rsui-icon-pulse: var(--color-text-ai);
 }
 
 .rsui-icon--disabled.rsui-icon--background.rsui-icon--invert {
     @apply bg-background-disabled-invert;
     @apply *:text-text-disabled;
+    --rsui-icon-pulse: var(--color-text-disabled);
 }
 
 .rsui-icon--classic.rsui-icon--background.rsui-icon--invert {
     @apply bg-pink-50;
     @apply *:text-pink-500;
-}
+    --rsui-icon-pulse: var(--color-pink-500);
+}
+/*
+ * On a filled or inverted icon the glyph is repainted to an on-colour token, so
+ * the ring follows it rather than staying on a variant colour it no longer
+ * matches. Same specificity as the base variant rules and declared after them,
+ * so it wins on source order — but it loses to the two-flag rules above, which
+ * is the point: those put the glyph back on its variant colour and take the ring
+ * with them.
+ */
+.rsui-icon--background,
+.rsui-icon--invert {
+    --rsui-icon-pulse: var(--color-text-on-color);
+}
+
+/*
+ * Optional attention pulse: a ring expands out from the icon and fades, a few
+ * times, when the icon arrives.
+ *
+ * Deliberately a fixed number of iterations rather than `infinite`. An animation
+ * that repeats for more than five seconds needs a pause control (WCAG 2.2.2), and
+ * an icon has nowhere sensible to put one — three bursts draw the eye on arrival
+ * without taking on that obligation.
+ *
+ * Duration x iterations is the number that matters there, and it must stay under
+ * five seconds: 1.4s x 3 leaves 800ms of headroom. Slowing the ring to 1.8s to
+ * soften it further would put the total at 5.4s and trip the criterion, so the
+ * softening is done with opacity, border width and travel instead.
+ *
+ * The ring takes its colour from `--rsui-icon-pulse`, which each colour variant
+ * sets alongside its glyph rule.
+ *
+ * A custom property rather than `currentColor`: the variants colour the SVG child
+ * (`*:text-…`) and not the wrapper, so an inherited ring comes out near-black.
+ * Setting `color` on the wrapper instead would fix the base variants but silently
+ * miss `--invert` and `--background`, which repaint the glyph and would leave the
+ * ring on the old colour. A property the combination rules can override keeps the
+ * answer in one place — and, unlike a wrapper colour, it is inert for everything
+ * that does not read it.
+ *
+ * `pointer-events-none` because the ring overflows the icon's box and would
+ * otherwise sit over whatever is beside it.
+ */
+.rsui-icon--pulse {
+    @apply relative;
+}
+
+.rsui-icon--pulse::after {
+    @apply content-[''] absolute inset-0 rounded-full pointer-events-none;
+    border: 1px solid var(--rsui-icon-pulse, currentColor);
+    /* Invisible at rest, in both directions. Without this the ring reverts to its
+       un-animated state once the iterations finish — full opacity at scale 1 —
+       and a solid ring stays welded around the icon for the life of the page. */
+    @apply opacity-0;
+    animation: rsui-icon-pulse 1.4s ease-out 3;
+}
+
+@keyframes rsui-icon-pulse {
+    0% {
+        opacity: 0.35;
+        transform: scale(1);
+    }
+    100% {
+        opacity: 0;
+        transform: scale(1.8);
+    }
+}
+
+/*
+ * The pulse is decoration on top of an icon that is already visible, so removing
+ * it costs nothing — no state is conveyed by the animation alone.
+ */
+@media (prefers-reduced-motion: reduce) {
+    .rsui-icon--pulse::after {
+        animation: none;
+        display: none;
+    }
+}

package/components/message_box.css

@@ -1,5 +1,46 @@
+/*
+ * A row: optional icon, the text column, optional close. `items-start` so the
+ * icon and the close button align with the first line rather than centring
+ * against a tall body.
+ */
 .rsui-message-box {
-    @apply border rounded-lg overflow-hidden p-4 flex flex-col gap-y-3;
+    @apply border rounded-lg overflow-hidden p-4 flex items-start gap-x-3;
+}
+
+/*
+ * The text column. Carries the vertical rhythm the box itself used to own, so a
+ * box with no icon and no actions lays out exactly as it did before.
+ */
+.rsui-message-box__main {
+    @apply flex-1 flex flex-col gap-y-3;
+}
+
+/*
+ * Narrow and with an icon: the icon and the close button take a row of their own
+ * and the text runs full width beneath them, rather than indenting past a column
+ * that costs more than it gives at this width.
+ *
+ * Ordering is what makes it work — the DOM runs icon, text, close, so without it
+ * the full-width text column would wrap between the two and strand the close
+ * button on a third row. Scoped to `--with-icon` because a box with no icon has
+ * no column to escape: its close button already sits beside the title, and a
+ * lone X on its own row would be a wasted line.
+ *
+ * The box itself sets only `gap-x`, which buys nothing once these become two
+ * flex lines — so the row gap is set here, matching the text column's own
+ * rhythm. Inert at `sm:flex-nowrap`, where there is only ever one line.
+ */
+.rsui-message-box--with-icon {
+    @apply flex-wrap gap-y-3 sm:flex-nowrap;
+}
+
+.rsui-message-box--with-icon .rsui-message-box__close {
+    @apply order-2 ms-auto sm:order-3 sm:ms-0;
+}
+
+/* `sm:basis-0` rather than `basis-auto`, to restore exactly what `flex-1` sets. */
+.rsui-message-box--with-icon .rsui-message-box__main {
+    @apply order-3 basis-full sm:order-2 sm:basis-0;
 }
 
 .rsui-message-box--default {
@@ -37,17 +78,76 @@
 }
 
 .rsui-message-box__head {
-    @apply flex justify-between items-center gap-x-2;
+    @apply flex items-center gap-x-2;
 }
 
 .rsui-message-box__content {
-    @apply flex justify-between items-start gap-x-2;
+    @apply flex items-start gap-x-2;
+}
+
+/*
+ * `items-start` so the icon aligns with the first line of the message rather
+ * than centring against a multi-line body. `shrink-0` keeps it from being
+ * squeezed by long text.
+ */
+.rsui-message-box__icon {
+    @apply shrink-0 flex items-center h-6;
+}
+
+/*
+ * Actions sit under the message, indented to the body rather than the icon, so
+ * they read as belonging to the text.
+ *
+ * Neutral, not variant-coloured: a coloured action on a coloured tint is a
+ * contrast problem, and the action is a way out of the message rather than a
+ * restatement of its severity. The dismiss is quieter than whatever the consumer
+ * puts beside it, which is the only hierarchy this row needs.
+ */
+.rsui-message-box__actions {
+    @apply flex flex-wrap items-center gap-x-4 gap-y-2 pt-1;
+}
+
+.rsui-message-box__dismiss,
+.rsui-message-box__action {
+    @apply bg-transparent border-0 p-0 cursor-pointer;
+    @apply text-sm font-semibold transition-colors;
+    @apply hover:underline underline-offset-4 decoration-2;
+    @apply outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-border-primary rounded-sm;
+}
+
+/*
+ * Two tiers, and the only hierarchy this row needs: dismiss is the quieter of
+ * the pair, whatever the consumer puts beside it is the one they want pressed.
+ */
+.rsui-message-box__dismiss {
+    @apply text-text-secondary hover:text-text-primary;
+}
+
+.rsui-message-box__action {
+    @apply text-text-primary;
 }
 
+/*
+ * `-my-2` so the 40px hit target centres on the first 24px line rather than
+ * hanging 8px below it. Under `items-start` the button's own box starts at the
+ * padding edge, which put its glyph at y=36 against a title centred at y=28 —
+ * and, with an icon shown, two icons in the same row not lining up. The negative
+ * margin keeps the target size while claiming only 24px of layout height.
+ */
 .rsui-message-box__close {
-    @apply size-10;
+    @apply size-10 shrink-0 -my-2;
 }
 
+/*
+ * The glyph colour is set on the Icon itself (`secondary`), not here — the
+ * variant rules target the SVG child directly, so a colour on this button would
+ * lose to them.
+ *
+ * It was `disabled` before, which painted a working control in the disabled text
+ * colour — Grey-400, 2.41:1 on white — so it looked permanently greyed out and
+ * fell under the 3:1 WCAG 1.4.11 asks of a control. Grey-700 reads as quiet
+ * without reading as dead.
+ */
 .rsui-message-box__close-icon {
     @apply size-10 cursor-pointer rounded-lg flex items-center justify-center hover:bg-border-secondary transition duration-200;
     /* Reset native <button> chrome so it matches the prior inline affordance ... */

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,71 @@
+/* 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. */
 .rsui-page-header {
-    @apply w-full flex justify-between space-y-4;
+    @apply w-full flex justify-between gap-y-space-md;
     @apply lg:flex-col;
 }
 
 .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 +73,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 +81,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 +97,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 +133,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 {

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;
 }