@redseed/redseed-ui-tailwindcss 7.56.0 → 7.58.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/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 */