@attrus-ds/core 1.0.6 → 1.0.11

package/dist/css/components/inputs.css

@@ -55,7 +55,7 @@
 .field > label {
   font-family: var(--font-sans);
   font-size: var(--fs-sm);
-  font-weight: var(--w-semibold);
+  font-weight: var(--w-regular);
   color: var(--color-foreground-default);
   letter-spacing: var(--ls-body);
 }
@@ -260,6 +260,7 @@ textarea.input.input-lg { height: auto; min-height: 120px; padding: var(--space-
   background: var(--color-background-subtle);
   color: var(--color-foreground-muted);
   font-family: var(--font-mono);
+  font-size-adjust: var(--font-mono-adjust);
   font-size: var(--fs-sm);
   flex-shrink: 0;
 }
@@ -326,8 +327,9 @@ textarea.input.input-lg { height: auto; min-height: 120px; padding: var(--space-
   display: inline-flex;
   align-items: center;
   font-family: var(--font-mono);
+  font-size-adjust: var(--font-mono-adjust);
   font-size: var(--fs-xxs);
-  font-weight: var(--w-semibold);
+  font-weight: var(--w-regular);
   color: var(--color-foreground-muted);
   background: var(--color-background-subtle);
   border: 1px solid var(--color-border-default);
@@ -389,7 +391,7 @@ textarea.input.input-lg { height: auto; min-height: 120px; padding: var(--space-
   border-radius: var(--radius-xs);
   font-family: var(--font-sans);
   font-size: var(--fs-xs);
-  font-weight: var(--w-medium);
+  font-weight: var(--w-regular);
   line-height: 1;
   white-space: nowrap;
   flex-shrink: 0;
@@ -466,8 +468,9 @@ textarea.input.input-lg { height: auto; min-height: 120px; padding: var(--space-
   height: 48px;
   text-align: center;
   font-family: var(--font-mono);
+  font-size-adjust: var(--font-mono-adjust);
   font-size: var(--fs-xl);
-  font-weight: var(--w-semibold);
+  font-weight: var(--w-regular);
   border: 1px solid var(--color-border-default);
   border-radius: var(--shape-control);
   outline: none;
@@ -513,7 +516,21 @@ textarea.input.input-lg { height: auto; min-height: 120px; padding: var(--space-
 .switch input:checked ~ .switch-track { background: var(--color-brand-solid); }
 .switch input:checked ~ .switch-track .switch-thumb { transform: translateX(16px); }
 .switch input:focus-visible ~ .switch-track { box-shadow: var(--shadow-focus); }
-.switch input:disabled ~ .switch-track { opacity: 0.5; cursor: not-allowed; }
+/* Disabled — explicit tokens, never opacity (it composes with the surface into an
+   off-palette malva, kills the white thumb, and makes checked indistinguishable). */
+.switch:has(input:disabled) { cursor: not-allowed; }
+.switch:has(input:disabled) .switch-label { color: var(--color-foreground-disabled); }
+.switch input:disabled ~ .switch-track {
+  background: var(--color-background-sunken);
+  box-shadow: inset 0 0 0 1px var(--color-border-default);
+}
+.switch input:disabled ~ .switch-track .switch-thumb {
+  background: var(--color-neutral-100);
+  box-shadow: none;
+}
+.switch input:checked:disabled ~ .switch-track {
+  background: color-mix(in srgb, var(--color-brand-solid) 32%, var(--color-background-sunken));
+}
 .switch-label {
   font-family: var(--font-sans);
   font-size: var(--fs-sm);
@@ -570,7 +587,20 @@ textarea.input.input-lg { height: auto; min-height: 120px; padding: var(--space-
 }
 .check input:indeterminate ~ .check-box svg { display: none; }
 .check input:focus-visible ~ .check-box { box-shadow: var(--shadow-focus); }
-.check input:disabled ~ .check-box { opacity: 0.5; cursor: not-allowed; }
+/* Disabled — explicit tokens (see .switch rationale) */
+.check:has(input:disabled) { cursor: not-allowed; }
+.check:has(input:disabled) .check-label { color: var(--color-foreground-disabled); }
+.check input:disabled ~ .check-box {
+  background: var(--color-background-sunken);
+  border-color: var(--color-border-default);
+}
+.check input:disabled ~ .check-box svg { color: var(--color-foreground-disabled); }
+.check input:checked:disabled ~ .check-box,
+.check input:indeterminate:disabled ~ .check-box {
+  background: color-mix(in srgb, var(--color-brand-solid) 32%, var(--color-background-sunken));
+  border-color: transparent;
+}
+.check input:checked:disabled ~ .check-box svg { color: var(--color-neutral-100); }
 .check.is-error .check-box { border-color: var(--color-border-danger); }
 
 
@@ -614,7 +644,19 @@ textarea.input.input-lg { height: auto; min-height: 120px; padding: var(--space-
 .radio input:checked ~ .radio-dot { border-color: var(--color-brand-solid); }
 .radio input:checked ~ .radio-dot::after { transform: scale(1); }
 .radio input:focus-visible ~ .radio-dot { box-shadow: var(--shadow-focus); }
-.radio input:disabled ~ .radio-dot { opacity: 0.5; cursor: not-allowed; }
+/* Disabled — explicit tokens (see .switch rationale) */
+.radio:has(input:disabled) { cursor: not-allowed; }
+.radio:has(input:disabled) .radio-label { color: var(--color-foreground-disabled); }
+.radio input:disabled ~ .radio-dot {
+  background: var(--color-background-sunken);
+  border-color: var(--color-border-default);
+}
+.radio input:checked:disabled ~ .radio-dot {
+  border-color: color-mix(in srgb, var(--color-brand-solid) 32%, var(--color-background-sunken));
+}
+.radio input:checked:disabled ~ .radio-dot::after {
+  background: color-mix(in srgb, var(--color-brand-solid) 32%, var(--color-background-sunken));
+}
 
 
 /* ----------------------------------------------------------------
@@ -697,9 +739,9 @@ textarea.input.input-lg { height: auto; min-height: 120px; padding: var(--space-
   stroke-width: var(--icon-stroke);
   color: var(--color-foreground-muted);
 }
-.file-drop .ttl { font-size: var(--fs-md); font-weight: var(--w-semibold); color: var(--color-foreground-default); }
+.file-drop .ttl { font-size: var(--fs-md); font-weight: var(--w-regular); color: var(--color-foreground-default); }
 .file-drop .sub { font-size: var(--fs-xs); color: var(--color-foreground-muted); }
-.file-drop .anchor { color: var(--color-foreground-highlight); font-weight: var(--w-semibold); }
+.file-drop .anchor { color: var(--color-foreground-highlight); font-weight: var(--w-regular); }
 
 /* ----------------------------------------------------------------
    16b. FILE LIST (post-upload state)
@@ -719,6 +761,7 @@ textarea.input.input-lg { height: auto; min-height: 120px; padding: var(--space-
   background: var(--color-background-subtle);
   border-bottom: 1px solid var(--color-border-subtle);
   font-family: var(--font-mono);
+  font-size-adjust: var(--font-mono-adjust);
   font-size: var(--fs-xxs);
   color: var(--color-foreground-muted);
   text-transform: uppercase;
@@ -732,6 +775,7 @@ textarea.input.input-lg { height: auto; min-height: 120px; padding: var(--space-
   border: 0;
   padding: 0;
   font-family: var(--font-mono);
+  font-size-adjust: var(--font-mono-adjust);
   font-size: var(--fs-xxs);
   color: var(--color-foreground-highlight);
   text-transform: uppercase;
@@ -739,7 +783,7 @@ textarea.input.input-lg { height: auto; min-height: 120px; padding: var(--space-
   cursor: pointer;
   transition: color var(--transition-fast);
 }
-.file-list-action:hover { color: var(--color-brand-text); }
+.file-list-action:hover { color: var(--color-foreground-brand); }
 
 .file-rows {
   list-style: none;
@@ -771,9 +815,9 @@ textarea.input.input-lg { height: auto; min-height: 120px; padding: var(--space-
   color: var(--color-foreground-muted);
 }
 .file-icon[data-kind="pdf"]   { background: color-mix(in srgb, var(--color-danger-500) 8%, var(--color-background-surface)); color: var(--color-feedback-danger-foreground); }
-.file-icon[data-kind="img"]   { background: color-mix(in srgb, var(--color-brand-solid) 8%, var(--color-background-surface));   color: var(--color-brand-text); }
+.file-icon[data-kind="img"]   { background: color-mix(in srgb, var(--color-brand-solid) 8%, var(--color-background-surface));   color: var(--color-foreground-brand); }
 .file-icon[data-kind="csv"]   { background: color-mix(in srgb, var(--color-success-500) 8%, var(--color-background-surface)); color: var(--color-feedback-success-foreground); }
-.file-icon[data-kind="doc"]   { background: color-mix(in srgb, var(--color-brand-solid) 10%, var(--color-background-surface));  color: var(--color-brand-text); }
+.file-icon[data-kind="doc"]   { background: color-mix(in srgb, var(--color-brand-solid) 10%, var(--color-background-surface));  color: var(--color-foreground-brand); }
 
 .file-icon-tag {
   position: absolute;
@@ -781,6 +825,7 @@ textarea.input.input-lg { height: auto; min-height: 120px; padding: var(--space-
   left: 50%;
   transform: translateX(-50%);
   font-family: var(--font-mono);
+  font-size-adjust: var(--font-mono-adjust);
   font-size: 8px;
   font-weight: var(--w-bold);
   letter-spacing: 0.04em;
@@ -800,7 +845,7 @@ textarea.input.input-lg { height: auto; min-height: 120px; padding: var(--space-
 .file-name {
   font-family: var(--font-sans);
   font-size: var(--fs-sm);
-  font-weight: var(--w-semibold);
+  font-weight: var(--w-regular);
   color: var(--color-foreground-default);
   white-space: nowrap;
   overflow: hidden;
@@ -808,6 +853,7 @@ textarea.input.input-lg { height: auto; min-height: 120px; padding: var(--space-
 }
 .file-sub {
   font-family: var(--font-mono);
+  font-size-adjust: var(--font-mono-adjust);
   font-size: var(--fs-xxs);
   color: var(--color-foreground-muted);
 }
@@ -835,14 +881,15 @@ textarea.input.input-lg { height: auto; min-height: 120px; padding: var(--space-
   padding: 3px var(--space-2);
   border-radius: var(--radius-pill);
   font-family: var(--font-mono);
+  font-size-adjust: var(--font-mono-adjust);
   font-size: var(--fs-xxs);
-  font-weight: var(--w-semibold);
+  font-weight: var(--w-regular);
   text-transform: uppercase;
   letter-spacing: var(--ls-caps);
   white-space: nowrap;
 }
 .file-status.ok      { color: var(--color-feedback-success-foreground); background: var(--color-feedback-success-background); }
-.file-status.pending { color: var(--color-brand-text);   background: color-mix(in srgb, var(--color-brand-solid) 10%, transparent); }
+.file-status.pending { color: var(--color-foreground-brand);   background: color-mix(in srgb, var(--color-brand-solid) 10%, transparent); }
 .file-status.err     { color: var(--color-feedback-danger-foreground);  background: var(--color-feedback-danger-background); cursor: pointer; }
 
 .file-remove {
@@ -912,6 +959,43 @@ textarea.input.input-lg { height: auto; min-height: 120px; padding: var(--space-
 /* ----------------------------------------------------------------
    18. ON INVERSE — dark surfaces
    ---------------------------------------------------------------- */
+/* Field + selection controls on a permanently-dark surface (hero, onboarding).
+   Without these, every dark surface had to override colour inline. */
+.field.on-inverse .field-label { color: var(--color-foreground-inverse-default); }
+.field.on-inverse .field-help  { color: var(--color-foreground-inverse-muted); }
+
+.switch.on-inverse .switch-track {
+  background: color-mix(in srgb, var(--color-pure-white) 18%, transparent);
+  box-shadow: inset 0 0 0 1px var(--color-border-inverse);
+}
+.switch.on-inverse .switch-label { color: var(--color-foreground-inverse-default); }
+.switch.on-inverse input:checked ~ .switch-track { background: var(--color-accent-solid); box-shadow: none; }
+.switch.on-inverse input:focus-visible ~ .switch-track { box-shadow: var(--shadow-focus-inverse); }
+.switch.on-inverse input:disabled ~ .switch-track {
+  background: color-mix(in srgb, var(--color-pure-white) 8%, transparent);
+  box-shadow: inset 0 0 0 1px var(--color-border-inverse);
+}
+.switch.on-inverse:has(input:disabled) .switch-label { color: var(--color-foreground-inverse-muted); }
+
+.check.on-inverse .check-box,
+.radio.on-inverse .radio-dot {
+  background: color-mix(in srgb, var(--color-pure-white) 8%, transparent);
+  border-color: var(--color-border-inverse);
+}
+.check.on-inverse .check-label,
+.radio.on-inverse .radio-label { color: var(--color-foreground-inverse-default); }
+.check.on-inverse input:checked ~ .check-box,
+.check.on-inverse input:indeterminate ~ .check-box {
+  background: var(--color-accent-solid);
+  border-color: var(--color-accent-solid);
+}
+.radio.on-inverse input:checked ~ .radio-dot { border-color: var(--color-accent-solid); }
+.radio.on-inverse input:checked ~ .radio-dot::after { background: var(--color-accent-solid); }
+.check.on-inverse input:focus-visible ~ .check-box,
+.radio.on-inverse input:focus-visible ~ .radio-dot { box-shadow: var(--shadow-focus-inverse); }
+.check.on-inverse:has(input:disabled) .check-label,
+.radio.on-inverse:has(input:disabled) .radio-label { color: var(--color-foreground-inverse-muted); }
+
 .input.on-inverse,
 .dark .input,
 .dark .group,

package/dist/css/components/number-input.css

@@ -62,8 +62,9 @@
   border-left: 1px solid var(--color-border-subtle);
   border-right: 1px solid var(--color-border-subtle);
   font-family: var(--font-mono);
+  font-size-adjust: var(--font-mono-adjust);
   font-size: var(--fs-sm);
-  font-weight: var(--w-medium);
+  font-weight: var(--w-regular);
   color: var(--color-foreground-default);
   text-align: center;
   -moz-appearance: textfield;
@@ -91,8 +92,9 @@
   align-items: center;
   padding: 0 var(--space-3);
   font-family: var(--font-mono);
+  font-size-adjust: var(--font-mono-adjust);
   font-size: var(--fs-xs);
-  font-weight: var(--w-semibold);
+  font-weight: var(--w-regular);
   letter-spacing: var(--ls-caps);
   text-transform: uppercase;
   color: var(--color-foreground-muted);
@@ -105,8 +107,9 @@
   align-items: center;
   padding: 0 var(--space-3);
   font-family: var(--font-mono);
+  font-size-adjust: var(--font-mono-adjust);
   font-size: var(--fs-sm);
-  font-weight: var(--w-semibold);
+  font-weight: var(--w-regular);
   color: var(--color-foreground-muted);
   border-right: 1px solid var(--color-border-subtle);
   background: var(--color-background-subtle);

package/dist/css/components/primitives.css

@@ -14,6 +14,7 @@
   height: var(--av-size, 36px);
   border-radius: var(--radius-pill);
   font-family: var(--font-mono);
+  font-size-adjust: var(--font-mono-adjust);
   font-size: var(--av-fs, var(--fs-xs));
   font-weight: var(--w-bold);
   letter-spacing: var(--ls-caps);
@@ -32,7 +33,7 @@
 
 /* Tone — accent-on-tinted-bg uses the same background+foreground pair as feedback pills,
    so an Avatar reads as the same "object" as a status pill that references it. */
-.av-brand   { background: var(--color-brand-subtle-solid);          color: var(--color-brand-text); }
+.av-brand   { background: var(--color-brand-subtle-solid);          color: var(--color-brand-text-on-light); }
 .av-success { background: var(--color-feedback-success-background); color: var(--color-feedback-success-foreground); }
 .av-warning { background: var(--color-feedback-warning-background); color: var(--color-feedback-warning-foreground); }
 .av-danger  { background: var(--color-feedback-danger-background);  color: var(--color-feedback-danger-foreground); }
@@ -79,20 +80,21 @@
   align-items: baseline;
   gap: var(--space-1);
   font-family: var(--font-mono);
+  font-size-adjust: var(--font-mono-adjust);
   font-variant-numeric: tabular-nums;
   font-size: var(--money-fs, var(--fs-sm));
-  font-weight: var(--w-semibold);
+  font-weight: var(--w-regular);
   color: var(--color-foreground-default);
   white-space: nowrap;
 }
 .money-cur {
   font-size: 0.78em;
-  font-weight: var(--w-semibold);
+  font-weight: var(--w-regular);
   letter-spacing: var(--ls-caps);
   text-transform: uppercase;
   color: var(--color-foreground-muted);
 }
-.money-frac { color: var(--color-foreground-secondary); font-weight: var(--w-medium); }
+.money-frac { color: var(--color-foreground-secondary); font-weight: var(--w-regular); }
 
 .money-sm { --money-fs: var(--fs-xs); }
 .money-md { --money-fs: var(--fs-sm); }
@@ -102,7 +104,7 @@
 
 .money-pos { color: var(--color-feedback-success-foreground); }
 .money-neg { color: var(--color-feedback-danger-foreground); }
-.money-muted { color: var(--color-foreground-muted); font-weight: var(--w-medium); }
+.money-muted { color: var(--color-foreground-muted); font-weight: var(--w-regular); }
 
 /* =================== METRIC (hero display number) ===================
    Big, display-weight figure for hero/KPI moments. Distinct from .money
@@ -120,7 +122,7 @@
   white-space: nowrap;
   font-size: var(--metric-fs, 38px);
 }
-.metric-cur { font-size: 0.58em; font-weight: var(--w-semibold); opacity: 0.55; margin-right: 0.32em; }
+.metric-cur { font-size: 0.58em; font-weight: var(--w-regular); opacity: 0.55; margin-right: 0.32em; }
 .metric-frac { font-size: 0.68em; opacity: 0.55; }
 .metric-sm { --metric-fs: 30px; }
 .metric-md { --metric-fs: 38px; }
@@ -145,8 +147,9 @@
 }
 .stat-label {
   font-family: var(--font-mono);
+  font-size-adjust: var(--font-mono-adjust);
   font-size: var(--fs-xxs);
-  font-weight: var(--w-semibold);
+  font-weight: var(--w-regular);
   letter-spacing: var(--ls-caps);
   text-transform: uppercase;
   color: var(--color-foreground-muted);
@@ -164,8 +167,9 @@
   align-items: center;
   gap: var(--space-1);
   font-family: var(--font-mono);
+  font-size-adjust: var(--font-mono-adjust);
   font-size: var(--fs-xs);
-  font-weight: var(--w-semibold);
+  font-weight: var(--w-regular);
 }
 .stat-delta i, .stat-delta svg { width: 14px; height: 14px; stroke-width: 2.25; }
 .stat-delta-up   { color: var(--color-feedback-success-foreground); }
@@ -215,8 +219,9 @@
   gap: var(--space-3);
   margin: var(--space-5) 0;
   font-family: var(--font-mono);
+  font-size-adjust: var(--font-mono-adjust);
   font-size: var(--fs-xxs);
-  font-weight: var(--w-semibold);
+  font-weight: var(--w-regular);
   letter-spacing: var(--ls-caps);
   text-transform: uppercase;
   color: var(--color-foreground-muted);
@@ -240,7 +245,7 @@
 .eyebrow {
   display: block;
   font-size: var(--fs-xs);
-  font-weight: var(--w-semibold);
+  font-weight: var(--w-regular);
   letter-spacing: var(--ls-caps);
   text-transform: uppercase;
   color: var(--color-foreground-muted);
@@ -248,12 +253,12 @@
 .eyebrow.has-icon { display: inline-flex; align-items: center; gap: var(--space-2-5); }
 .eyebrow-xs { font-size: var(--fs-xxs); font-weight: var(--w-bold); }
 .eyebrow-xs.has-icon { gap: var(--space-2); }
-.eyebrow-sm { font-size: var(--fs-xxs); font-weight: var(--w-semibold); }
-.eyebrow-md { font-size: var(--fs-xs); font-weight: var(--w-semibold); }
+.eyebrow-sm { font-size: var(--fs-xxs); font-weight: var(--w-regular); }
+.eyebrow-md { font-size: var(--fs-xs); font-weight: var(--w-regular); }
 .eyebrow-muted     { color: var(--color-foreground-muted); }
 .eyebrow-secondary { color: var(--color-foreground-secondary); }
 .eyebrow-default   { color: var(--color-foreground-default); }
-.eyebrow-brand     { color: var(--color-brand-text); }
+.eyebrow-brand     { color: var(--color-foreground-brand); }
 .eyebrow-inverse   { color: var(--color-foreground-inverse-muted); }
 
 /* =================== FILTER CHIP =================== */
@@ -269,7 +274,7 @@
   background: var(--color-background-surface);
   font-family: inherit;
   font-size: var(--fs-sm);
-  font-weight: var(--w-medium);
+  font-weight: var(--w-regular);
   color: var(--color-foreground-secondary);
   cursor: pointer;
   white-space: nowrap;
@@ -282,7 +287,7 @@
   background: var(--color-background-selected);
   border-color: var(--color-brand-border);
   color: var(--color-foreground-brand);
-  font-weight: var(--w-semibold);
+  font-weight: var(--w-regular);
 }
 .filter-chip .chip-chevron { opacity: .55; }
 

package/dist/css/components/sel-card.css

@@ -0,0 +1,212 @@
+/* ============================================================
+   SELECTABLE CARD — components/sel-card.css
+   A card that IS a control: pick-one (radio) or pick-many (checkbox)
+   with the whole card as the hit target. Replaces the hand-rolled
+   `.card + .radio` composition that every onboarding/KYC flow
+   reinvented (each with its own padding, radius and selected state).
+
+   Structure:
+     .sel-card                      the label/button wrapper
+       .sel-card-index              optional leading index (01, 02…)
+       .sel-card-body               title + description
+         .sel-card-title
+         .sel-card-desc
+       .sel-card-mark               trailing selection marker
+
+   States:   :hover · .is-selected · [aria-disabled] / :has(input:disabled) · :focus-visible
+   Variants: .sel-card-sm (dense) · .sel-card-multi (square marker) · .on-inverse
+   ============================================================ */
+
+.sel-card {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-4);
+  padding: var(--space-5);
+  background: var(--color-background-surface);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--shape-container);
+  cursor: pointer;
+  text-align: left;
+  width: 100%;
+  box-sizing: border-box;
+  font-family: var(--font-sans);
+  transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
+}
+.sel-card > input {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+  width: 0;
+  height: 0;
+}
+.sel-card:hover {
+  border-color: var(--color-border-strong);
+  background: var(--color-background-hover);
+}
+
+/* ---------- Leading index ---------- */
+.sel-card-index {
+  flex-shrink: 0;
+  font-family: var(--font-mono);
+  font-size-adjust: var(--font-mono-adjust);
+  font-size: var(--fs-xs);
+  font-weight: var(--w-bold);
+  letter-spacing: var(--ls-caps);
+  color: var(--color-foreground-muted);
+  padding-top: 2px;
+  font-variant-numeric: tabular-nums;
+}
+
+/* ---------- Body ---------- */
+.sel-card-body {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+.sel-card-title {
+  font-size: var(--fs-md);
+  font-weight: var(--w-regular);
+  letter-spacing: var(--ls-title);
+  color: var(--color-foreground-default);
+  line-height: var(--lh-snug);
+}
+.sel-card-desc {
+  font-size: var(--fs-sm);
+  color: var(--color-foreground-secondary);
+  line-height: var(--lh-relaxed);
+  text-wrap: pretty;
+}
+
+/* ---------- Selection marker ---------- */
+.sel-card-mark {
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  border-radius: var(--radius-pill);
+  border: 2px solid var(--color-border-strong);
+  background: var(--color-background-surface);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 1px;
+  transition: border-color var(--transition-fast), background var(--transition-fast);
+}
+.sel-card-mark::after {
+  content: "";
+  width: 10px;
+  height: 10px;
+  border-radius: var(--radius-pill);
+  background: var(--color-brand-solid);
+  transform: scale(0);
+  transition: transform var(--transition-fast) var(--ease-standard);
+}
+/* Multi = square marker with a check glyph instead of a dot */
+.sel-card-multi .sel-card-mark { border-radius: var(--radius-2xs); }
+.sel-card-multi .sel-card-mark::after { border-radius: 1px; }
+
+/* ---------- Selected ---------- */
+.sel-card.is-selected {
+  border-color: var(--color-brand-solid);
+  background: var(--color-background-selected);
+  box-shadow: inset 0 0 0 1px var(--color-brand-solid);
+}
+.sel-card.is-selected .sel-card-title { color: var(--color-foreground-brand); }
+.sel-card.is-selected .sel-card-index { color: var(--color-foreground-brand); }
+.sel-card.is-selected .sel-card-mark {
+  border-color: var(--color-brand-solid);
+  background: var(--color-background-surface);
+}
+.sel-card.is-selected .sel-card-mark::after { transform: scale(1); }
+
+/* ---------- Focus ---------- */
+.sel-card:focus-visible,
+.sel-card:has(input:focus-visible) {
+  outline: none;
+  box-shadow: var(--shadow-focus);
+}
+.sel-card.is-selected:focus-visible,
+.sel-card.is-selected:has(input:focus-visible) {
+  box-shadow: inset 0 0 0 1px var(--color-brand-solid), var(--shadow-focus);
+}
+
+/* ---------- Disabled ---------- */
+.sel-card[aria-disabled="true"],
+.sel-card:has(input:disabled) {
+  cursor: not-allowed;
+  background: var(--color-background-sunken);
+  border-color: var(--color-border-default);
+  box-shadow: none;
+}
+.sel-card[aria-disabled="true"] .sel-card-title,
+.sel-card:has(input:disabled) .sel-card-title { color: var(--color-foreground-disabled); }
+.sel-card[aria-disabled="true"] .sel-card-desc,
+.sel-card[aria-disabled="true"] .sel-card-index,
+.sel-card:has(input:disabled) .sel-card-desc,
+.sel-card:has(input:disabled) .sel-card-index { color: var(--color-foreground-disabled); }
+.sel-card[aria-disabled="true"] .sel-card-mark,
+.sel-card:has(input:disabled) .sel-card-mark {
+  border-color: var(--color-border-default);
+  background: var(--color-background-sunken);
+}
+.sel-card[aria-disabled="true"] .sel-card-mark::after,
+.sel-card:has(input:disabled) .sel-card-mark::after {
+  background: color-mix(in srgb, var(--color-brand-solid) 32%, var(--color-background-sunken));
+}
+
+/* ---------- Dense ---------- */
+.sel-card-sm { padding: var(--space-4); gap: var(--space-3); }
+.sel-card-sm .sel-card-title { font-size: var(--fs-sm); }
+.sel-card-sm .sel-card-desc  { font-size: var(--fs-xs); }
+.sel-card-sm .sel-card-mark  { width: 18px; height: 18px; }
+.sel-card-sm .sel-card-mark::after { width: 8px; height: 8px; }
+
+/* ---------- On inverse ---------- */
+.sel-card.on-inverse {
+  background: color-mix(in srgb, var(--color-pure-white) 6%, transparent);
+  border-color: var(--color-border-inverse);
+}
+.sel-card.on-inverse:hover {
+  background: color-mix(in srgb, var(--color-pure-white) 10%, transparent);
+  border-color: color-mix(in srgb, var(--color-pure-white) 26%, transparent);
+}
+.sel-card.on-inverse .sel-card-title { color: var(--color-foreground-inverse-default); }
+.sel-card.on-inverse .sel-card-desc  { color: var(--color-foreground-inverse-secondary); }
+.sel-card.on-inverse .sel-card-index { color: var(--color-foreground-inverse-muted); }
+.sel-card.on-inverse .sel-card-mark {
+  border-color: color-mix(in srgb, var(--color-pure-white) 34%, transparent);
+  background: transparent;
+}
+.sel-card.on-inverse .sel-card-mark::after { background: var(--color-accent-solid); }
+.sel-card.on-inverse.is-selected {
+  border-color: var(--color-accent-solid);
+  background: color-mix(in srgb, var(--color-accent-solid) 16%, transparent);
+  box-shadow: inset 0 0 0 1px var(--color-accent-solid);
+}
+.sel-card.on-inverse.is-selected .sel-card-title,
+.sel-card.on-inverse.is-selected .sel-card-index { color: var(--color-foreground-inverse-default); }
+.sel-card.on-inverse.is-selected .sel-card-mark { border-color: var(--color-accent-solid); background: transparent; }
+.sel-card.on-inverse:focus-visible,
+.sel-card.on-inverse:has(input:focus-visible) { box-shadow: var(--shadow-focus-inverse); }
+.sel-card.on-inverse[aria-disabled="true"],
+.sel-card.on-inverse:has(input:disabled) {
+  background: color-mix(in srgb, var(--color-pure-white) 3%, transparent);
+  box-shadow: none;
+}
+.sel-card.on-inverse[aria-disabled="true"] .sel-card-title,
+.sel-card.on-inverse:has(input:disabled) .sel-card-title { color: var(--color-foreground-inverse-muted); }
+.sel-card.on-inverse[aria-disabled="true"] .sel-card-desc,
+.sel-card.on-inverse:has(input:disabled) .sel-card-desc { color: var(--color-foreground-inverse-muted); }
+
+/* ---------- Group helper ---------- */
+.sel-card-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+.sel-card-group.is-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+}