@mercury-fx/ui 2.4.0

package/src/styles/additions.css

@@ -0,0 +1,1030 @@
+/* ============================================================
+   Mercury — NEW component styles (batch 1)
+   Append these blocks to packages/mercury-ui/src/styles/mercury.css
+   Token-only; matches the existing .mx-* conventions.
+   ============================================================ */
+
+/* ============================================================
+   ACCORDION  .mx-acc
+   ============================================================ */
+.mx-acc {
+  width: 100%;
+  font-family: var(--font-primary);
+  border: 1px solid rgb(var(--border-secondary));
+  border-radius: var(--radius-12);
+  background: rgb(var(--bg-primary));
+  overflow: hidden;
+}
+.mx-acc__item + .mx-acc__item { border-top: 1px solid rgb(var(--border-secondary)); }
+.mx-acc__heading { margin: 0; }
+.mx-acc__trigger {
+  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
+  padding: 16px 18px; border: 0; background: transparent; cursor: pointer; text-align: left;
+  font: 500 15px/1.3 var(--font-primary); color: rgb(var(--fg-primary)); letter-spacing: -0.005em;
+  transition: background 120ms ease;
+}
+.mx-acc__trigger:hover:not(:disabled) { background: rgb(var(--bg-hover)); }
+.mx-acc__trigger:focus-visible { outline: none; box-shadow: inset 0 0 0 2px rgb(var(--ring-focus)); }
+.mx-acc__item.is-disabled .mx-acc__trigger { opacity: 0.45; cursor: not-allowed; }
+.mx-acc__title { flex: 1; min-width: 0; }
+.mx-acc__caret { flex: none; color: rgb(var(--fg-tertiary)); transition: transform 200ms ease; }
+.mx-acc__item.is-open .mx-acc__caret { transform: rotate(180deg); }
+.mx-acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 220ms ease; }
+.mx-acc__item.is-open .mx-acc__panel { grid-template-rows: 1fr; }
+.mx-acc__content { min-height: 0; overflow: hidden; }
+.mx-acc__body {
+  padding: 2px 18px 18px;
+  font: 400 14px/1.55 var(--font-primary); color: rgb(var(--fg-secondary));
+}
+
+/* ============================================================
+   TOGGLE  .mx-tgl   /   TOGGLE GROUP  .mx-tgl-grp
+   ============================================================ */
+.mx-tgl {
+  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
+  border: 0; background: transparent; cursor: pointer; border-radius: var(--radius-8);
+  color: rgb(var(--fg-secondary)); font: 500 14px/1 var(--font-primary);
+  transition: background 120ms ease, color 120ms ease, box-shadow 120ms ease;
+}
+.mx-tgl--sm { height: 32px; min-width: 32px; padding: 0 8px; border-radius: var(--radius-6); font-size: 13px; }
+.mx-tgl--md { height: 40px; min-width: 40px; padding: 0 10px; }
+.mx-tgl--lg { height: 48px; min-width: 48px; padding: 0 14px; font-size: 15px; }
+.mx-tgl:hover:not(:disabled) { background: rgb(var(--bg-hover)); color: rgb(var(--fg-primary)); }
+.mx-tgl.is-on { background: rgb(var(--bg-tertiary)); color: rgb(var(--fg-primary)); }
+.mx-tgl:focus-visible { outline: none; box-shadow: 0 0 0 2px rgb(var(--ring-focus)); }
+.mx-tgl:disabled { opacity: 0.4; cursor: not-allowed; }
+.mx-tgl__icon { display: inline-flex; }
+
+.mx-tgl-grp {
+  display: inline-flex; align-items: center; gap: 4px; padding: 4px;
+  background: rgb(var(--bg-primary)); border: 1px solid rgb(var(--border-primary));
+  border-radius: var(--radius-12); box-shadow: var(--shadow-100);
+}
+.mx-tgl--grouped { background: transparent; }
+.mx-tgl--grouped.is-on { background: rgb(var(--bg-secondary)); }
+
+/* ============================================================
+   PAGINATION  .mx-pag
+   ============================================================ */
+.mx-pag { display: flex; flex-direction: column; align-items: center; gap: 12px; font-family: var(--font-primary); }
+.mx-pag__list { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
+.mx-pag__btn {
+  display: inline-flex; align-items: center; justify-content: center;
+  min-width: 40px; height: 40px; padding: 0 6px; border: 0; background: transparent; cursor: pointer;
+  border-radius: var(--radius-8); color: rgb(var(--fg-secondary)); font: 500 14px/1 var(--font-primary);
+  transition: background 120ms ease, color 120ms ease, box-shadow 120ms ease;
+}
+.mx-pag--sm .mx-pag__btn { min-width: 32px; height: 32px; font-size: 13px; border-radius: var(--radius-6); }
+.mx-pag__btn:hover:not(:disabled):not(.is-active) { background: rgb(var(--bg-hover)); color: rgb(var(--fg-primary)); }
+.mx-pag__btn.is-active { background: rgb(var(--bg-secondary)); color: rgb(var(--fg-primary)); font-weight: 600; box-shadow: inset 0 0 0 1px rgb(var(--border-primary)); }
+.mx-pag__btn:focus-visible { outline: none; box-shadow: 0 0 0 2px rgb(var(--ring-focus)); }
+.mx-pag__btn:disabled { opacity: 0.4; cursor: not-allowed; }
+.mx-pag__btn--nav { color: rgb(var(--fg-primary)); }
+.mx-pag__gap { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; color: rgb(var(--fg-tertiary)); }
+.mx-pag--sm .mx-pag__gap { min-width: 32px; height: 32px; }
+.mx-pag__caption { font: 400 13px/1 var(--font-primary); color: rgb(var(--fg-tertiary)); letter-spacing: 0.01em; }
+
+/* ============================================================
+   Mercury — NEW component styles (mx.4 focused trio)
+   ============================================================ */
+
+/* ============================================================
+   LIST ROW  .mx-listrow
+   ============================================================ */
+.mx-listrow {
+  display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box;
+  padding: 12px 16px; margin: 0; border: 0; background: transparent; text-align: left;
+  font-family: var(--font-primary); color: rgb(var(--fg-primary));
+}
+.mx-listrow + .mx-listrow { border-top: 1px solid rgb(var(--border-secondary)); }
+.mx-listrow--interactive { cursor: pointer; transition: background 120ms ease; }
+.mx-listrow--interactive:hover { background: rgb(var(--bg-hover)); }
+.mx-listrow--interactive:focus-visible { outline: none; box-shadow: inset 0 0 0 2px rgb(var(--ring-focus)); }
+.mx-listrow__lead { display: inline-flex; align-items: center; justify-content: center; flex: none; color: rgb(var(--fg-secondary)); }
+.mx-listrow__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
+.mx-listrow__label { font: 500 15px/1.3 var(--font-primary); color: rgb(var(--fg-primary)); }
+.mx-listrow__desc { font: 400 13px/1.4 var(--font-secondary); color: rgb(var(--fg-tertiary)); }
+.mx-listrow__value { flex: none; font: 500 14px/1.3 var(--font-secondary); color: rgb(var(--fg-secondary)); }
+.mx-listrow__trail { display: inline-flex; align-items: center; flex: none; color: rgb(var(--fg-tertiary)); }
+
+/* ============================================================
+   MONEY INPUT  .mx-money  (composes the .mx-in Input recipe)
+   ============================================================ */
+.mx-money__ccy { font: 600 14px/1 var(--font-secondary); color: rgb(var(--fg-secondary)); letter-spacing: 0.01em; }
+
+/* ============================================================
+   Mercury — NEW component styles (mx.7.1 · import batch 1)
+   Token-only; .mx-* idiom. accent ramps read --<ramp>-11.
+   ============================================================ */
+
+/* ============================================================
+   HEADING  .mx-heading   (foundations)
+   Display sizes 5–9 ride DM Mono (--font-secondary); small sizes
+   1–4 ride DM Sans (--font-primary). Sizes map onto the canon
+   18..72 type scale; default ink --fg-primary.
+   ============================================================ */
+.mx-heading { margin: 0; color: rgb(var(--fg-primary)); text-wrap: balance; }
+
+/* sizes — small (DM Sans) */
+.mx-heading--1 { font-family: var(--font-primary); font-size: 14px; line-height: 20px; letter-spacing: 0; }
+.mx-heading--2 { font-family: var(--font-primary); font-size: 16px; line-height: 22px; letter-spacing: 0; }
+.mx-heading--3 { font-family: var(--font-primary); font-size: 18px; line-height: 28px; letter-spacing: -0.005em; }
+.mx-heading--4 { font-family: var(--font-primary); font-size: 24px; line-height: 32px; letter-spacing: -0.01em; }
+/* sizes — display (DM Mono) */
+.mx-heading--5 { font-family: var(--font-secondary); font-size: 30px; line-height: 38px; letter-spacing: -0.015em; }
+.mx-heading--6 { font-family: var(--font-secondary); font-size: 36px; line-height: 40px; letter-spacing: -0.015em; }
+.mx-heading--7 { font-family: var(--font-secondary); font-size: 48px; line-height: 56px; letter-spacing: -0.018em; }
+.mx-heading--8 { font-family: var(--font-secondary); font-size: 60px; line-height: 68px; letter-spacing: -0.02em; }
+.mx-heading--9 { font-family: var(--font-secondary); font-size: 72px; line-height: 80px; letter-spacing: -0.022em; }
+
+/* weights */
+.mx-heading--w-regular  { font-weight: var(--fw-regular); }
+.mx-heading--w-medium   { font-weight: var(--fw-medium); }
+.mx-heading--w-semibold { font-weight: var(--fw-semi-bold); }
+.mx-heading--w-bold     { font-weight: var(--fw-bold); }
+
+/* alignment */
+.mx-heading--align-left   { text-align: left; }
+.mx-heading--align-center { text-align: center; }
+.mx-heading--align-right  { text-align: right; }
+
+/* truncate */
+.mx-heading--truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+
+/* accent ink (overrides the default) */
+.mx-heading--accent-iris   { color: rgb(var(--iris-11)); }
+.mx-heading--accent-indigo { color: rgb(var(--indigo-11)); }
+.mx-heading--accent-green  { color: rgb(var(--green-11)); }
+.mx-heading--accent-orange { color: rgb(var(--orange-11)); }
+.mx-heading--accent-plum   { color: rgb(var(--plum-11)); }
+.mx-heading--accent-red    { color: rgb(var(--red-11)); }
+
+/* ============================================================
+   TEXT  .mx-text   (foundations)
+   One typography primitive across DM Sans / DM Mono / DM Serif.
+   Each variant carries face + size + default ink; accent ramps
+   read --<ramp>-11.
+   ============================================================ */
+.mx-text { margin: 0; color: rgb(var(--fg-primary)); text-wrap: pretty; }
+
+.mx-text--display { font-family: var(--font-display);   font-size: 60px; line-height: 1.05; font-weight: var(--fw-regular); letter-spacing: -0.01em; }
+.mx-text--h1      { font-family: var(--font-secondary); font-size: 44px; line-height: 1.08; font-weight: var(--fw-bold);    letter-spacing: -0.02em; }
+.mx-text--h2      { font-family: var(--font-secondary); font-size: 32px; line-height: 1.15; font-weight: var(--fw-bold);    letter-spacing: -0.015em; }
+.mx-text--h3      { font-family: var(--font-secondary); font-size: 24px; line-height: 1.25; font-weight: var(--fw-bold);    letter-spacing: -0.01em; }
+.mx-text--h4      { font-family: var(--font-primary);   font-size: 18px; line-height: 1.35; font-weight: var(--fw-bold);    letter-spacing: -0.005em; }
+.mx-text--lead    { font-family: var(--font-primary);   font-size: 18px; line-height: 1.6;  font-weight: var(--fw-regular); color: rgb(var(--fg-secondary)); }
+.mx-text--body    { font-family: var(--font-primary);   font-size: 15px; line-height: 1.6;  font-weight: var(--fw-regular); }
+.mx-text--small   { font-family: var(--font-primary);   font-size: 13px; line-height: 1.5;  font-weight: var(--fw-medium); }
+.mx-text--muted   { font-family: var(--font-primary);   font-size: 13px; line-height: 1.5;  font-weight: var(--fw-regular); color: rgb(var(--fg-tertiary)); }
+.mx-text--code    { font-family: var(--font-secondary); font-size: 13px; line-height: 1.4;  font-weight: var(--fw-medium); background: rgb(var(--bg-tertiary)); padding: 2px 7px; border-radius: var(--radius-4); display: inline-block; }
+.mx-text--quote   { font-family: var(--font-primary);   font-size: 16px; line-height: 1.6;  font-weight: var(--fw-regular); font-style: italic; color: rgb(var(--fg-secondary)); border-inline-start: 3px solid rgb(var(--border-strong)); padding-inline-start: 16px; }
+
+.mx-text--italic       { font-style: italic; }
+.mx-text--align-left   { text-align: left; }
+.mx-text--align-center { text-align: center; }
+.mx-text--align-right  { text-align: right; }
+
+.mx-text--accent-iris   { color: rgb(var(--iris-11)); }
+.mx-text--accent-indigo { color: rgb(var(--indigo-11)); }
+.mx-text--accent-green  { color: rgb(var(--green-11)); }
+.mx-text--accent-orange { color: rgb(var(--orange-11)); }
+.mx-text--accent-plum   { color: rgb(var(--plum-11)); }
+.mx-text--accent-red    { color: rgb(var(--red-11)); }
+
+/* ============================================================
+   SEPARATOR  .mx-separator   (foundations — sibling of Divider)
+   Richer Claude-Design rule: horizontal / vertical / labelled,
+   optional custom `size` via the --mx-sep-size custom property.
+   ============================================================ */
+.mx-separator { border: 0; height: 1px; width: var(--mx-sep-size, 100%); background: rgb(var(--border-secondary)); margin: 0; flex-shrink: 0; }
+.mx-separator--v { display: inline-block; width: 1px; height: var(--mx-sep-size, 100%); min-height: 1em; align-self: stretch; }
+.mx-separator--label { display: flex; align-items: center; gap: 12px; width: var(--mx-sep-size, 100%); height: auto; background: none; }
+.mx-separator--label .mx-separator__line { flex: 1; height: 1px; background: rgb(var(--border-secondary)); }
+.mx-separator--label .mx-separator__lbl { font: 500 12px/1 var(--font-primary); color: rgb(var(--fg-tertiary)); letter-spacing: 0.01em; white-space: nowrap; }
+
+/* ============================================================
+   LABEL  .mx-label   (inputs)
+   Form caption: semibold text, accent-tinted required marker,
+   muted (optional) tag + hint line, three sizes.
+   ============================================================ */
+.mx-label { display: inline-flex; flex-direction: column; gap: 4px; font-family: var(--font-primary); user-select: none; cursor: default; }
+.mx-label.is-disabled { opacity: 0.55; cursor: not-allowed; }
+.mx-label__text { display: inline-flex; align-items: center; gap: 5px; font-weight: var(--fw-semi-bold); letter-spacing: -0.005em; line-height: 1.2; color: rgb(var(--fg-primary)); }
+.mx-label__req { color: rgb(var(--red-11)); font-weight: var(--fw-bold); }
+.mx-label__opt { font-weight: var(--fw-regular); color: rgb(var(--fg-tertiary)); }
+.mx-label__hint { font-weight: var(--fw-regular); line-height: 1.4; color: rgb(var(--fg-tertiary)); }
+
+/* sizes */
+.mx-label--sm .mx-label__text { font-size: 12px; }
+.mx-label--md .mx-label__text { font-size: 13px; }
+.mx-label--lg .mx-label__text { font-size: 14px; }
+.mx-label--sm .mx-label__opt, .mx-label--sm .mx-label__hint { font-size: 11px; }
+.mx-label--md .mx-label__opt, .mx-label--md .mx-label__hint { font-size: 12px; }
+.mx-label--lg .mx-label__opt, .mx-label--lg .mx-label__hint { font-size: 13px; }
+
+/* accent — tints the required marker (default red) */
+.mx-label--accent-iris   .mx-label__req { color: rgb(var(--iris-11)); }
+.mx-label--accent-indigo .mx-label__req { color: rgb(var(--indigo-11)); }
+.mx-label--accent-green  .mx-label__req { color: rgb(var(--green-11)); }
+.mx-label--accent-orange .mx-label__req { color: rgb(var(--orange-11)); }
+.mx-label--accent-plum   .mx-label__req { color: rgb(var(--plum-11)); }
+.mx-label--accent-red    .mx-label__req { color: rgb(var(--red-11)); }
+
+/* ============================================================
+   ICON BUTTON  .mx-icon-btn   (actions)
+   Reuses the Button fill/ink tokens via .mx-btn--<variant>; adds
+   a square box + round/square radius. Icon-only — needs aria-label.
+   ============================================================ */
+.mx-icon-btn {
+  display: inline-flex; align-items: center; justify-content: center;
+  padding: 0; border: 1px solid transparent; cursor: pointer;
+  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease, transform 80ms ease;
+}
+.mx-icon-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgb(var(--ring-focus)); }
+.mx-icon-btn:active:not(:disabled) { transform: scale(0.92); }
+.mx-icon-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+/* the base `border` shorthand resets border-color, so re-assert the bordered variants */
+.mx-icon-btn.mx-btn--secondary,
+.mx-icon-btn.mx-btn--outline { border-color: rgb(var(--border-primary)); }
+/* sizes — square box */
+.mx-icon-btn--sm { width: 32px; height: 32px; }
+.mx-icon-btn--md { width: 40px; height: 40px; }
+.mx-icon-btn--lg { width: 48px; height: 48px; }
+/* shape */
+.mx-icon-btn--circle { border-radius: var(--radius-full); }
+.mx-icon-btn--square { border-radius: var(--radius-8); }
+.mx-icon-btn--sm.mx-icon-btn--square { border-radius: var(--radius-6); }
+
+/* ============================================================
+   Mercury — NEW component styles (mx.7.2 · import batch 2, wave 1)
+   Token-only; .mx-* idiom. accent ramps read --<ramp>-3/9/11.
+   ============================================================ */
+
+/* ============================================================
+   CALLOUT  .mx-callout   (feedback)
+   Inline emphasis block. `intent` → the semantic token families;
+   `variant` (soft/surface/outline) → the fill/border treatment.
+   Distinct from Alert (a status message).
+   ============================================================ */
+.mx-callout { display: flex; align-items: flex-start; font-family: var(--font-primary); }
+.mx-callout--sm { gap: 10px; padding: 12px; border-radius: var(--radius-6); }
+.mx-callout--md { gap: 12px; padding: 16px; border-radius: var(--radius-8); }
+.mx-callout--lg { gap: 14px; padding: 20px; border-radius: var(--radius-12); }
+.mx-callout__icon { display: inline-flex; flex-shrink: 0; margin-top: 1px; }
+.mx-callout__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+.mx-callout__title { font-weight: var(--fw-semi-bold); line-height: 1.45; }
+.mx-callout__msg { color: rgb(var(--fg-primary)); line-height: 1.55; text-wrap: pretty; }
+.mx-callout--sm .mx-callout__title, .mx-callout--sm .mx-callout__msg { font-size: 13px; }
+.mx-callout--md .mx-callout__title, .mx-callout--md .mx-callout__msg { font-size: 14px; }
+.mx-callout--lg .mx-callout__title, .mx-callout--lg .mx-callout__msg { font-size: 15px; }
+/* intent ink — the icon + the title take the intent --fg-* */
+.mx-callout--info      .mx-callout__icon, .mx-callout--info      .mx-callout__title { color: rgb(var(--fg-info)); }
+.mx-callout--brand     .mx-callout__icon, .mx-callout--brand     .mx-callout__title { color: rgb(var(--fg-brand)); }
+.mx-callout--positive  .mx-callout__icon, .mx-callout--positive  .mx-callout__title { color: rgb(var(--fg-positive)); }
+.mx-callout--caution   .mx-callout__icon, .mx-callout--caution   .mx-callout__title { color: rgb(var(--fg-caution)); }
+.mx-callout--negative  .mx-callout__icon, .mx-callout--negative  .mx-callout__title { color: rgb(var(--fg-negative)); }
+.mx-callout--discovery .mx-callout__icon, .mx-callout--discovery .mx-callout__title { color: rgb(var(--fg-discovery)); }
+/* variant soft — tinted fill from the intent -subtle family */
+.mx-callout--soft.mx-callout--info      { background: rgb(var(--bg-info-subtle)); }
+.mx-callout--soft.mx-callout--brand     { background: rgb(var(--bg-brand-subtle)); }
+.mx-callout--soft.mx-callout--positive  { background: rgb(var(--bg-positive-subtle)); }
+.mx-callout--soft.mx-callout--caution   { background: rgb(var(--bg-caution-subtle)); }
+.mx-callout--soft.mx-callout--negative  { background: rgb(var(--bg-negative-subtle)); }
+.mx-callout--soft.mx-callout--discovery { background: rgb(var(--bg-discovery-subtle)); }
+/* variant surface — neutral card, intent-independent */
+.mx-callout--surface { background: rgb(var(--bg-secondary)); box-shadow: inset 0 0 0 1px rgb(var(--border-secondary)); }
+/* variant outline — transparent, intent-tinted hairline (info has no --border-info → --border-active) */
+.mx-callout--outline { background: transparent; }
+.mx-callout--outline.mx-callout--info      { box-shadow: inset 0 0 0 1px rgb(var(--border-active) / 0.45); }
+.mx-callout--outline.mx-callout--brand     { box-shadow: inset 0 0 0 1px rgb(var(--border-brand) / 0.45); }
+.mx-callout--outline.mx-callout--positive  { box-shadow: inset 0 0 0 1px rgb(var(--border-positive) / 0.45); }
+.mx-callout--outline.mx-callout--caution   { box-shadow: inset 0 0 0 1px rgb(var(--border-caution) / 0.45); }
+.mx-callout--outline.mx-callout--negative  { box-shadow: inset 0 0 0 1px rgb(var(--border-negative) / 0.45); }
+.mx-callout--outline.mx-callout--discovery { box-shadow: inset 0 0 0 1px rgb(var(--border-discovery) / 0.45); }
+
+/* ============================================================
+   SPINNER  .mx-spinner   (feedback)
+   Indeterminate ring; 360°/1s spin. Arc inherits currentColor;
+   accent paints the arc from --<ramp>-9. Track --border-secondary.
+   ============================================================ */
+.mx-spinner {
+  display: inline-block; box-sizing: border-box;
+  border-style: solid; border-width: 2px;
+  border-color: rgb(var(--border-secondary)); border-top-color: currentColor;
+  border-radius: var(--radius-full);
+  animation: mx-spin 1s linear infinite;
+}
+.mx-spinner--sm { width: 16px; height: 16px; border-width: 2px; }
+.mx-spinner--md { width: 20px; height: 20px; border-width: 2px; }
+.mx-spinner--lg { width: 24px; height: 24px; border-width: 3px; }
+.mx-spinner--accent-iris   { border-top-color: rgb(var(--iris-9)); }
+.mx-spinner--accent-indigo { border-top-color: rgb(var(--indigo-9)); }
+.mx-spinner--accent-green  { border-top-color: rgb(var(--green-9)); }
+.mx-spinner--accent-orange { border-top-color: rgb(var(--orange-9)); }
+.mx-spinner--accent-plum   { border-top-color: rgb(var(--plum-9)); }
+.mx-spinner--accent-red    { border-top-color: rgb(var(--red-9)); }
+@keyframes mx-spin { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) { .mx-spinner { animation-duration: 2.4s; } }
+
+/* ============================================================
+   SKELETON  .mx-skeleton   (feedback)
+   Pulsing placeholder; 1.5s pulse on --bg-tertiary. Dimensions
+   are non-color inline styles.
+   ============================================================ */
+.mx-skeleton {
+  display: block; flex-shrink: 0;
+  background: rgb(var(--bg-tertiary));
+  animation: mx-skeleton-pulse 1.5s ease-in-out infinite;
+}
+@keyframes mx-skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
+@media (prefers-reduced-motion: reduce) { .mx-skeleton { animation: none; opacity: 0.7; } }
+
+/* ============================================================
+   BLOCKQUOTE  .mx-blockquote   (data-display)
+   Quotation behind a leading rule; attribution in DM Mono.
+   accent recolours the rule (--<ramp>-9) + attribution (--<ramp>-11).
+   ============================================================ */
+.mx-blockquote {
+  margin: 0; font-family: var(--font-primary);
+  border-inline-start: 3px solid rgb(var(--border-strong));
+}
+.mx-blockquote--sm { padding-inline-start: 14px; }
+.mx-blockquote--md { padding-inline-start: 16px; }
+.mx-blockquote--lg { padding-inline-start: 20px; }
+.mx-blockquote__text {
+  margin: 0; font-family: var(--font-primary); font-weight: var(--fw-regular);
+  color: rgb(var(--fg-secondary)); text-wrap: pretty;
+}
+.mx-blockquote--sm .mx-blockquote__text { font-size: 14px; line-height: 1.6; }
+.mx-blockquote--md .mx-blockquote__text { font-size: 16px; line-height: 1.65; }
+.mx-blockquote--lg .mx-blockquote__text { font-size: 18px; line-height: 1.7; }
+.mx-blockquote__cite {
+  margin-top: 8px; font-family: var(--font-secondary); font-weight: var(--fw-medium);
+  font-size: 12px; line-height: 1.4; color: rgb(var(--fg-tertiary)); letter-spacing: -0.01em;
+}
+.mx-blockquote--accent-iris   { border-inline-start-color: rgb(var(--iris-9)); }
+.mx-blockquote--accent-indigo { border-inline-start-color: rgb(var(--indigo-9)); }
+.mx-blockquote--accent-green  { border-inline-start-color: rgb(var(--green-9)); }
+.mx-blockquote--accent-orange { border-inline-start-color: rgb(var(--orange-9)); }
+.mx-blockquote--accent-plum   { border-inline-start-color: rgb(var(--plum-9)); }
+.mx-blockquote--accent-red    { border-inline-start-color: rgb(var(--red-9)); }
+.mx-blockquote--accent-iris   .mx-blockquote__cite { color: rgb(var(--iris-11)); }
+.mx-blockquote--accent-indigo .mx-blockquote__cite { color: rgb(var(--indigo-11)); }
+.mx-blockquote--accent-green  .mx-blockquote__cite { color: rgb(var(--green-11)); }
+.mx-blockquote--accent-orange .mx-blockquote__cite { color: rgb(var(--orange-11)); }
+.mx-blockquote--accent-plum   .mx-blockquote__cite { color: rgb(var(--plum-11)); }
+.mx-blockquote--accent-red    .mx-blockquote__cite { color: rgb(var(--red-11)); }
+
+/* ============================================================
+   COLLAPSIBLE  .mx-collapsible   (layout)
+   Single disclosure; grid-rows height animation; round toggle
+   composing the live Icon. accent tints the toggle when open
+   (bg --<ramp>-3, ink --<ramp>-11). Distinct from Accordion.
+   ============================================================ */
+.mx-collapsible { font-family: var(--font-primary); max-width: 100%; border-radius: var(--radius-12); }
+.mx-collapsible--bordered { border: 1px solid rgb(var(--border-secondary)); background: rgb(var(--bg-primary)); padding: 8px; }
+.mx-collapsible__header { display: flex; align-items: center; gap: 12px; padding: 0 0 4px; }
+.mx-collapsible--bordered .mx-collapsible__header { padding: 8px 8px 8px 10px; }
+.mx-collapsible__title {
+  flex: 1; min-width: 0; font-weight: var(--fw-medium); font-size: 14px; line-height: 1.4;
+  color: rgb(var(--fg-primary)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.mx-collapsible__toggle {
+  flex-shrink: 0; width: 34px; height: 34px; border-radius: var(--radius-full);
+  display: inline-flex; align-items: center; justify-content: center;
+  border: 1px solid rgb(var(--border-primary));
+  background: rgb(var(--bg-secondary)); color: rgb(var(--fg-secondary));
+  cursor: pointer; transition: background 140ms ease, color 140ms ease;
+}
+.mx-collapsible__toggle:focus-visible { outline: none; box-shadow: 0 0 0 2px rgb(var(--ring-focus)); }
+.mx-collapsible__chev { display: inline-flex; transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1); }
+.mx-collapsible.is-open .mx-collapsible__chev { transform: rotate(180deg); }
+.mx-collapsible__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 240ms cubic-bezier(0.4, 0, 0.2, 1); }
+.mx-collapsible.is-open .mx-collapsible__panel { grid-template-rows: 1fr; }
+.mx-collapsible__panel-inner { overflow: hidden; }
+.mx-collapsible__content { display: flex; flex-direction: column; gap: 6px; padding: 4px 0 0; }
+.mx-collapsible--bordered .mx-collapsible__content { padding: 4px 2px 2px; }
+.mx-collapsible--accent-iris.is-open   .mx-collapsible__toggle { background: rgb(var(--iris-3));   color: rgb(var(--iris-11)); }
+.mx-collapsible--accent-indigo.is-open .mx-collapsible__toggle { background: rgb(var(--indigo-3)); color: rgb(var(--indigo-11)); }
+.mx-collapsible--accent-green.is-open  .mx-collapsible__toggle { background: rgb(var(--green-3));  color: rgb(var(--green-11)); }
+.mx-collapsible--accent-orange.is-open .mx-collapsible__toggle { background: rgb(var(--orange-3)); color: rgb(var(--orange-11)); }
+.mx-collapsible--accent-plum.is-open   .mx-collapsible__toggle { background: rgb(var(--plum-3));   color: rgb(var(--plum-11)); }
+.mx-collapsible--accent-red.is-open    .mx-collapsible__toggle { background: rgb(var(--red-3));    color: rgb(var(--red-11)); }
+@media (prefers-reduced-motion: reduce) {
+  .mx-collapsible__chev, .mx-collapsible__panel { transition: none; }
+}
+
+/* ============================================================
+   Mercury — NEW component styles (mx.7.2 · import batch 2, wave 2)
+   Token-only; .mx-* idiom. Code accent ramps read --<ramp>-9/11.
+   ============================================================ */
+
+/* ============================================================
+   DATALIST  .mx-datalist   (data-display)
+   Semantic <dl> term/description pairs. horizontal = term beside
+   value in a labelWidth column; vertical = stacked. Term ink
+   --fg-secondary, value ink --fg-primary.
+   ============================================================ */
+.mx-datalist { margin: 0; display: flex; flex-direction: column; font-family: var(--font-primary); }
+.mx-datalist--sm { gap: 10px; }
+.mx-datalist--md { gap: 14px; }
+.mx-datalist--lg { gap: 18px; }
+.mx-datalist__row { display: flex; min-width: 0; }
+.mx-datalist--horizontal .mx-datalist__row { flex-direction: row; gap: 16px; align-items: baseline; }
+.mx-datalist--vertical .mx-datalist__row { flex-direction: column; gap: 3px; align-items: stretch; }
+.mx-datalist__label { flex-shrink: 0; color: rgb(var(--fg-secondary)); font-weight: var(--fw-regular); line-height: 1.5; }
+.mx-datalist__value { margin: 0; min-width: 0; color: rgb(var(--fg-primary)); font-weight: var(--fw-medium); line-height: 1.5; word-break: break-word; }
+.mx-datalist--horizontal .mx-datalist__value { flex: 1; }
+.mx-datalist--sm .mx-datalist__label, .mx-datalist--sm .mx-datalist__value { font-size: 13px; }
+.mx-datalist--md .mx-datalist__label, .mx-datalist--md .mx-datalist__value { font-size: 14px; }
+.mx-datalist--lg .mx-datalist__label, .mx-datalist--lg .mx-datalist__value { font-size: 16px; }
+
+/* ============================================================
+   CODE  .mx-code   (data-display)
+   DM Mono on a tinted surface. inline = <code>, block = <pre>.
+   variant soft/solid/outline/ghost picks the surface; accent
+   re-skins it via .mx-code--accent-<id> compounded with variant.
+   ============================================================ */
+.mx-code { font-family: var(--font-secondary); font-weight: var(--fw-medium); letter-spacing: -0.01em; line-height: 1.3; }
+.mx-code--sm { font-size: 12px; }
+.mx-code--md { font-size: 13px; }
+.mx-code--lg { font-size: 15px; }
+.mx-code:not(.mx-code--block) { display: inline; white-space: normal; }
+.mx-code--sm:not(.mx-code--block) { padding: 1px 5px; border-radius: var(--radius-4); }
+.mx-code--md:not(.mx-code--block) { padding: 2px 6px; border-radius: var(--radius-6); }
+.mx-code--lg:not(.mx-code--block) { padding: 3px 8px; border-radius: var(--radius-6); }
+.mx-code--block { display: block; white-space: pre; overflow-x: auto; padding: 16px; border-radius: var(--radius-8); line-height: 1.6; }
+/* variant surfaces (no accent) */
+.mx-code--soft    { background: rgb(var(--bg-tertiary)); color: rgb(var(--fg-primary)); }
+.mx-code--solid   { background: rgb(var(--bg-inverse)); color: rgb(var(--fg-inverse)); }
+.mx-code--outline { background: transparent; color: rgb(var(--fg-primary)); box-shadow: inset 0 0 0 1px rgb(var(--border-primary)); }
+.mx-code--ghost   { background: transparent; color: rgb(var(--fg-secondary)); }
+/* accent — iris */
+.mx-code--accent-iris.mx-code--soft    { background: rgb(var(--iris-9) / 0.12); color: rgb(var(--iris-11)); }
+.mx-code--accent-iris.mx-code--solid   { background: rgb(var(--iris-9)); color: rgb(var(--slate-1)); }
+.mx-code--accent-iris.mx-code--outline { color: rgb(var(--iris-11)); box-shadow: inset 0 0 0 1px rgb(var(--iris-9) / 0.4); }
+.mx-code--accent-iris.mx-code--ghost   { color: rgb(var(--iris-11)); }
+/* accent — indigo */
+.mx-code--accent-indigo.mx-code--soft    { background: rgb(var(--indigo-9) / 0.12); color: rgb(var(--indigo-11)); }
+.mx-code--accent-indigo.mx-code--solid   { background: rgb(var(--indigo-9)); color: rgb(var(--slate-1)); }
+.mx-code--accent-indigo.mx-code--outline { color: rgb(var(--indigo-11)); box-shadow: inset 0 0 0 1px rgb(var(--indigo-9) / 0.4); }
+.mx-code--accent-indigo.mx-code--ghost   { color: rgb(var(--indigo-11)); }
+/* accent — green */
+.mx-code--accent-green.mx-code--soft    { background: rgb(var(--green-9) / 0.12); color: rgb(var(--green-11)); }
+.mx-code--accent-green.mx-code--solid   { background: rgb(var(--green-9)); color: rgb(var(--slate-1)); }
+.mx-code--accent-green.mx-code--outline { color: rgb(var(--green-11)); box-shadow: inset 0 0 0 1px rgb(var(--green-9) / 0.4); }
+.mx-code--accent-green.mx-code--ghost   { color: rgb(var(--green-11)); }
+/* accent — orange (dark ink on the solid fill) */
+.mx-code--accent-orange.mx-code--soft    { background: rgb(var(--orange-9) / 0.12); color: rgb(var(--orange-11)); }
+.mx-code--accent-orange.mx-code--solid   { background: rgb(var(--orange-9)); color: rgb(var(--slate-12)); }
+.mx-code--accent-orange.mx-code--outline { color: rgb(var(--orange-11)); box-shadow: inset 0 0 0 1px rgb(var(--orange-9) / 0.4); }
+.mx-code--accent-orange.mx-code--ghost   { color: rgb(var(--orange-11)); }
+/* accent — plum */
+.mx-code--accent-plum.mx-code--soft    { background: rgb(var(--plum-9) / 0.12); color: rgb(var(--plum-11)); }
+.mx-code--accent-plum.mx-code--solid   { background: rgb(var(--plum-9)); color: rgb(var(--slate-1)); }
+.mx-code--accent-plum.mx-code--outline { color: rgb(var(--plum-11)); box-shadow: inset 0 0 0 1px rgb(var(--plum-9) / 0.4); }
+.mx-code--accent-plum.mx-code--ghost   { color: rgb(var(--plum-11)); }
+/* accent — red */
+.mx-code--accent-red.mx-code--soft    { background: rgb(var(--red-9) / 0.12); color: rgb(var(--red-11)); }
+.mx-code--accent-red.mx-code--solid   { background: rgb(var(--red-9)); color: rgb(var(--slate-1)); }
+.mx-code--accent-red.mx-code--outline { color: rgb(var(--red-11)); box-shadow: inset 0 0 0 1px rgb(var(--red-9) / 0.4); }
+.mx-code--accent-red.mx-code--ghost   { color: rgb(var(--red-11)); }
+
+/* ============================================================
+   KBD  .mx-kbd   (data-display)
+   A keyboard keycap — DM Mono on a raised --bg-secondary surface
+   with a --border-primary inset hairline + a --border-strong
+   bottom edge.
+   ============================================================ */
+.mx-kbd {
+  display: inline-flex; align-items: center; justify-content: center;
+  font-family: var(--font-secondary); font-weight: var(--fw-medium); line-height: 1;
+  color: rgb(var(--fg-secondary)); background: rgb(var(--bg-secondary));
+  box-shadow: inset 0 0 0 1px rgb(var(--border-primary)), 0 1px 0 rgb(var(--border-strong));
+  white-space: nowrap;
+}
+.mx-kbd--sm { height: 18px; min-width: 18px; padding: 0 5px; border-radius: var(--radius-4); font-size: 11px; }
+.mx-kbd--md { height: 22px; min-width: 22px; padding: 0 6px; border-radius: var(--radius-6); font-size: 12px; }
+.mx-kbd--lg { height: 28px; min-width: 28px; padding: 0 8px; border-radius: var(--radius-6); font-size: 14px; }
+
+/* ============================================================
+   ASPECT RATIO  .mx-aspect   (layout)
+   Width-to-height ratio box; aspect-ratio is a non-color inline
+   style. The child fills it absolutely; overflow is clipped.
+   ============================================================ */
+.mx-aspect { position: relative; width: 100%; overflow: hidden; }
+.mx-aspect__inner { position: absolute; inset: 0; }
+
+/* ============================================================
+   SCROLLAREA  .mx-scrollarea   (layout)
+   A bounded scroll region with thin, rounded custom scrollbars.
+   scrollbars picks the axes; size picks the bar thickness. Thumb
+   --border-primary (→ --border-strong on hover) on a transparent
+   track. maxHeight/width are non-color inline styles.
+   ============================================================ */
+.mx-scrollarea { min-height: 0; scrollbar-width: thin; scrollbar-color: rgb(var(--border-strong)) transparent; }
+.mx-scrollarea--vertical   { overflow-y: auto; overflow-x: hidden; }
+.mx-scrollarea--horizontal { overflow-x: auto; overflow-y: hidden; }
+.mx-scrollarea--both       { overflow: auto; }
+.mx-scrollarea::-webkit-scrollbar { width: 10px; height: 10px; }
+.mx-scrollarea--sm::-webkit-scrollbar { width: 8px; height: 8px; }
+.mx-scrollarea--md::-webkit-scrollbar { width: 10px; height: 10px; }
+.mx-scrollarea--lg::-webkit-scrollbar { width: 12px; height: 12px; }
+.mx-scrollarea::-webkit-scrollbar-track { background: transparent; }
+.mx-scrollarea::-webkit-scrollbar-thumb {
+  background: rgb(var(--border-primary)); border-radius: var(--radius-full);
+  border: 2px solid transparent; background-clip: padding-box;
+}
+.mx-scrollarea::-webkit-scrollbar-thumb:hover { background: rgb(var(--border-strong)); background-clip: padding-box; }
+.mx-scrollarea::-webkit-scrollbar-corner { background: transparent; }
+
+/* ============================================================
+   DATEFIELD  .mx-datefield   (inputs)
+   Segmented mm/dd/yyyy spinbutton driven by @mercury-fx/core's
+   useDateField. Field glyphs DM Mono (--font-secondary); label
+   DM Sans 500 (--font-primary). Box --bg-primary, border
+   --border-primary → --border-focus on :focus-within + a 3px
+   --ring-focus ring. Separators --fg-tertiary. Per-segment
+   width is a non-color inline style.
+   ============================================================ */
+.mx-datefield { display: inline-flex; flex-direction: column; gap: 7px; cursor: text; }
+.mx-datefield--disabled { opacity: 0.6; cursor: not-allowed; }
+.mx-datefield__lbl { font: 500 14px/1 var(--font-primary); color: rgb(var(--fg-primary)); }
+.mx-datefield__field {
+  display: inline-flex; align-items: center; box-sizing: border-box;
+  height: 40px; padding: 0 14px; width: 232px; border-radius: var(--radius-8);
+  background: rgb(var(--bg-primary)); border: 1px solid rgb(var(--border-primary));
+  font: 400 14px/1 var(--font-secondary); color: rgb(var(--fg-primary));
+  transition: border-color 120ms, box-shadow 120ms;
+}
+.mx-datefield__field:focus-within { border-color: rgb(var(--border-focus)); box-shadow: 0 0 0 3px rgb(var(--ring-focus)); }
+.mx-datefield__sep { color: rgb(var(--fg-tertiary)); margin: 0 1px; }
+.mx-datefield__seg { border: 0; outline: 0; background: transparent; text-align: center; font: inherit; color: inherit; padding: 0; }
+.mx-datefield--disabled .mx-datefield__seg { cursor: not-allowed; }
+
+/* ============================================================
+   CALENDAR  .mx-calendar   (inputs)
+   Month-grid day picker over @mercury-fx/core's useCalendar. Box
+   --bg-primary, border --border-primary, radius --radius-8.
+   Title --fg-primary 500; weekday + nav ink --fg-tertiary; nav
+   + day hover --bg-secondary. Selected day = the --mx-cal-accent
+   ramp (--<id>-9, iris default) filled with --fg-on-brand; today
+   = an inset 1px accent ring. The prev nav reuses the
+   chevron-right glyph rotated 180deg (no chevron-left exists).
+   ============================================================ */
+.mx-calendar {
+  --mx-cal-accent: var(--iris-9); /* default */
+  box-sizing: border-box; width: fit-content; padding: 12px;
+  background: rgb(var(--bg-primary)); border: 1px solid rgb(var(--border-primary));
+  border-radius: var(--radius-8);
+}
+.mx-calendar__header {
+  display: flex; align-items: center; justify-content: space-between;
+  gap: 8px; margin-block-end: 10px;
+}
+.mx-calendar__title { text-align: center; font: 500 14px/1 var(--font-primary); color: rgb(var(--fg-primary)); }
+.mx-calendar__nav {
+  display: inline-flex; align-items: center; justify-content: center;
+  background: transparent; border: 0; cursor: pointer; color: rgb(var(--fg-tertiary));
+  padding: 4px; border-radius: var(--radius-6);
+}
+.mx-calendar__nav:hover { background: rgb(var(--bg-secondary)); }
+.mx-calendar__nav--prev svg { transform: rotate(180deg); }
+.mx-calendar__weekdays,
+.mx-calendar__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
+.mx-calendar__weekday { text-align: center; font: 400 12px/1 var(--font-primary); color: rgb(var(--fg-tertiary)); padding: 4px 0; }
+.mx-calendar__day {
+  aspect-ratio: 1; display: inline-flex; align-items: center; justify-content: center;
+  background: transparent; border: 0; cursor: pointer; border-radius: var(--radius-6);
+  font: 400 14px/1 var(--font-primary); color: rgb(var(--fg-primary));
+}
+.mx-calendar__day:hover { background: rgb(var(--bg-secondary)); }
+.mx-calendar__day--outside { opacity: 0.4; }
+.mx-calendar__day--today:not(.mx-calendar__day--selected) { box-shadow: inset 0 0 0 1px rgb(var(--mx-cal-accent)); }
+.mx-calendar__day--selected { background: rgb(var(--mx-cal-accent)); color: rgb(var(--fg-on-brand)); }
+.mx-calendar--accent-iris   { --mx-cal-accent: var(--iris-9); }
+.mx-calendar--accent-indigo { --mx-cal-accent: var(--indigo-9); }
+.mx-calendar--accent-green  { --mx-cal-accent: var(--green-9); }
+.mx-calendar--accent-orange { --mx-cal-accent: var(--orange-9); }
+.mx-calendar--accent-plum   { --mx-cal-accent: var(--plum-9); }
+.mx-calendar--accent-red    { --mx-cal-accent: var(--red-9); }
+
+/* ============================================================
+   Mercury — NEW component styles (mx.7.4 · import batch 4 · overlay family)
+   Token-only; .mx-* idiom. The dialog family REUSES the .mx-modal
+   backdrop + panel surface (mercury.css) and layers these deltas.
+   Static @keyframes replace the prototypes' runtime style injection.
+   ============================================================ */
+
+/* ============================================================
+   DIALOG  .mx-dialog   (overlay — a richer Modal)
+   Reuses .mx-modal-backdrop + .mx-modal; adds a description slot,
+   a divider header, an absolute close, and the dialog widths.
+   ============================================================ */
+.mx-dialog-backdrop { z-index: 120; padding: 24px; animation: merc-dialog-fade 140ms ease; }
+.mx-dialog {
+  position: relative; /* anchors the absolute close control */
+  max-width: 496px; /* md (default) */
+  border-radius: var(--radius-20);
+  animation: merc-dialog-in 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+.mx-dialog--sm { max-width: 420px; }
+.mx-dialog--lg { max-width: 640px; }
+.mx-dialog__head { display: flex; flex-direction: column; gap: 6px; padding: 20px 52px 14px 24px; }
+.mx-dialog__title { letter-spacing: -0.01em; }
+.mx-dialog__desc { margin: 0; font: 400 14px/1.5 var(--font-primary); color: rgb(var(--fg-secondary)); }
+.mx-dialog__close { position: absolute; top: 14px; right: 14px; }
+.mx-dialog__divider { height: 1px; background: rgb(var(--border-secondary)); }
+.mx-dialog__body { padding: 20px 24px; font: 400 14px/22px var(--font-primary); color: rgb(var(--fg-secondary)); }
+.mx-dialog__body:first-child { padding-top: 24px; } /* no header → keep top breathing room */
+.mx-dialog__foot { padding: 16px 24px 20px; display: flex; gap: 10px; justify-content: flex-end; }
+
+/* ============================================================
+   ALERT DIALOG  .mx-alert-dialog   (overlay)
+   Reuses .mx-modal-backdrop + .mx-modal; a padded confirmation
+   with stacked title/description and an aligned action row. No
+   backdrop dismiss (handled in the component).
+   ============================================================ */
+.mx-alert-dialog-backdrop { z-index: 120; animation: merc-ad-fade 120ms ease; }
+.mx-alert-dialog {
+  max-width: 420px;
+  padding: 24px;
+  border-radius: var(--radius-16);
+  animation: merc-ad-pop 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+.mx-alert-dialog__title { letter-spacing: -0.01em; }
+.mx-alert-dialog__desc { margin: 8px 0 0; font: 400 14px/1.55 var(--font-primary); color: rgb(var(--fg-secondary)); }
+.mx-alert-dialog__extra { margin-top: 12px; }
+.mx-alert-dialog__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }
+
+/* ============================================================
+   POPOVER  .mx-popover   (overlay — anchored, non-modal)
+   The panel is portaled + positioned (position:fixed + top/left/
+   width) by useAnchoredPosition; this paints the surface. The
+   trigger is a bare button wrapping the passed content.
+   ============================================================ */
+.mx-popover__trigger {
+  display: inline-flex; align-items: center; background: transparent; border: 0;
+  padding: 0; margin: 0; cursor: pointer; font: inherit; color: inherit; border-radius: var(--radius-8);
+}
+.mx-popover__trigger:focus-visible { outline: none; box-shadow: 0 0 0 3px rgb(var(--ring-focus)); }
+.mx-popover {
+  box-sizing: border-box; z-index: 50;
+  background: rgb(var(--bg-elevated)); border: 1px solid rgb(var(--border-secondary));
+  border-radius: var(--radius-12); box-shadow: var(--shadow-300); padding: 16px;
+  font: 400 14px/1.5 var(--font-primary); color: rgb(var(--fg-secondary));
+  animation: merc-pop-in 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+.mx-popover:focus { outline: none; } /* focused as a container on open; not an interactive control */
+
+/* Static @keyframes (replacing the prototypes' ensureKeyframes() injection). */
+@keyframes merc-dialog-fade { from { opacity: 0; } to { opacity: 1; } }
+@keyframes merc-dialog-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
+@keyframes merc-ad-fade { from { opacity: 0; } to { opacity: 1; } }
+@keyframes merc-ad-pop { from { opacity: 0; transform: translateY(6px) scale(0.97); } to { opacity: 1; transform: none; } }
+@keyframes merc-pop-in { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: none; } }
+@media (prefers-reduced-motion: reduce) {
+  .mx-dialog, .mx-dialog-backdrop, .mx-alert-dialog, .mx-alert-dialog-backdrop, .mx-popover { animation: none; }
+}
+
+/* ============================================================
+   DROPDOWN  .mx-dropdown   (overlay — trigger-anchored menu)
+   Portaled + positioned by useAnchoredPosition; this paints the
+   menu surface + rows. `accent` is class-driven — a custom
+   property (--mx-accent-mark) read by the check-mark span.
+   ============================================================ */
+.mx-dropdown__trigger {
+  display: inline-flex; align-items: center; background: transparent; border: 0;
+  padding: 0; margin: 0; cursor: pointer; font: inherit; color: inherit; border-radius: var(--radius-8);
+}
+.mx-dropdown__trigger:focus-visible { outline: none; box-shadow: 0 0 0 3px rgb(var(--ring-focus)); }
+.mx-dropdown {
+  box-sizing: border-box; z-index: 50; display: flex; flex-direction: column; gap: 1px;
+  background: rgb(var(--bg-elevated)); border: 1px solid rgb(var(--border-secondary));
+  border-radius: var(--radius-12); box-shadow: var(--shadow-300); padding: 5px;
+  animation: merc-dd-in 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+.mx-dropdown:focus { outline: none; } /* focused as a container on open; not an interactive control */
+.mx-dropdown--accent-iris   { --mx-accent-mark: var(--iris-11); }
+.mx-dropdown--accent-indigo { --mx-accent-mark: var(--indigo-11); }
+.mx-dropdown--accent-green  { --mx-accent-mark: var(--green-11); }
+.mx-dropdown--accent-orange { --mx-accent-mark: var(--orange-11); }
+.mx-dropdown--accent-plum   { --mx-accent-mark: var(--plum-11); }
+.mx-dropdown--accent-red    { --mx-accent-mark: var(--red-11); }
+.mx-dropdown__item {
+  display: flex; align-items: center; gap: 8px; width: 100%;
+  padding: 8px 10px; border: 0; border-radius: 7px; background: transparent;
+  font: 500 13px/1 var(--font-primary); color: rgb(var(--fg-primary));
+  text-align: left; cursor: pointer;
+}
+.mx-dropdown__item:hover { background: rgb(var(--bg-hover)); }
+.mx-dropdown__item:focus-visible {
+  outline: none; background: rgb(var(--bg-hover)); box-shadow: inset 0 0 0 1px rgb(var(--border-focus));
+}
+.mx-dropdown__item[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
+.mx-dropdown__item[aria-disabled="true"]:hover { background: transparent; }
+.mx-dropdown__check {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 15px; height: 15px; flex: none; color: rgb(var(--mx-accent-mark, var(--iris-11)));
+}
+.mx-dropdown__icon { flex: none; color: rgb(var(--fg-secondary)); }
+.mx-dropdown__text { flex: 1 1 auto; }
+.mx-dropdown__shortcut {
+  flex: none; font: 500 11px/1 var(--font-secondary); letter-spacing: 0.04em; color: rgb(var(--fg-tertiary));
+}
+.mx-dropdown__label {
+  padding: 6px 10px 4px; font: 600 11px/1 var(--font-primary);
+  letter-spacing: 0.06em; text-transform: uppercase; color: rgb(var(--fg-tertiary));
+}
+.mx-dropdown__sep { height: 1px; margin: 5px 0; background: rgb(var(--border-secondary)); }
+
+/* ============================================================
+   CONTEXT MENU  .mx-ctx   (overlay — pointer-anchored menu)
+   Opens at the pointer via useAnchoredPosition({ point }). No
+   accent; `danger` is the sole recolour (the negative family).
+   ============================================================ */
+.mx-ctx {
+  box-sizing: border-box; z-index: 50; display: flex; flex-direction: column; gap: 1px;
+  background: rgb(var(--bg-elevated)); border: 1px solid rgb(var(--border-secondary));
+  border-radius: var(--radius-12); box-shadow: var(--shadow-300); padding: 5px;
+  animation: merc-cm-in 120ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+.mx-ctx:focus { outline: none; }
+.mx-ctx__item {
+  display: flex; align-items: center; gap: 8px; width: 100%;
+  padding: 8px 10px; border: 0; border-radius: 7px; background: transparent;
+  font: 500 13px/1 var(--font-primary); color: rgb(var(--fg-primary));
+  text-align: left; cursor: pointer;
+}
+.mx-ctx__item:hover { background: rgb(var(--bg-hover)); }
+.mx-ctx__item:focus-visible {
+  outline: none; background: rgb(var(--bg-hover)); box-shadow: inset 0 0 0 1px rgb(var(--border-focus));
+}
+.mx-ctx__item[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
+.mx-ctx__item[aria-disabled="true"]:hover { background: transparent; }
+.mx-ctx__item--danger { color: rgb(var(--fg-negative)); }
+.mx-ctx__item--danger:hover,
+.mx-ctx__item--danger:focus-visible { background: rgb(var(--bg-negative-subtle)); }
+.mx-ctx__icon { flex: none; color: rgb(var(--fg-secondary)); }
+.mx-ctx__item--danger .mx-ctx__icon { color: rgb(var(--fg-negative)); }
+.mx-ctx__text { flex: 1 1 auto; }
+.mx-ctx__shortcut {
+  flex: none; font: 500 11px/1 var(--font-secondary); letter-spacing: 0.04em; color: rgb(var(--fg-tertiary));
+}
+.mx-ctx__label {
+  padding: 6px 10px 4px; font: 600 11px/1 var(--font-primary);
+  letter-spacing: 0.06em; text-transform: uppercase; color: rgb(var(--fg-tertiary));
+}
+.mx-ctx__sep { height: 1px; margin: 5px 0; background: rgb(var(--border-secondary)); }
+
+/* ============================================================
+   MENUBAR  .mx-menubar   (navigation — a horizontal bar of menus)
+   The bar is inline; each submenu is portaled + positioned. The
+   accent custom-property pair (--mx-accent-mark ink, --mx-accent-
+   solid dot) rides on BOTH the bar and each portaled panel (a
+   panel is not a DOM descendant of the bar — the cascade would
+   not otherwise reach the marks through the Portal).
+   ============================================================ */
+.mx-menubar {
+  display: inline-flex; align-items: center; gap: 2px; padding: 4px;
+  background: rgb(var(--bg-secondary)); border: 1px solid rgb(var(--border-secondary));
+  border-radius: 10px; box-shadow: var(--shadow-100);
+}
+.mx-menubar--accent-iris   { --mx-accent-mark: var(--iris-11);   --mx-accent-solid: var(--iris-9); }
+.mx-menubar--accent-indigo { --mx-accent-mark: var(--indigo-11); --mx-accent-solid: var(--indigo-9); }
+.mx-menubar--accent-green  { --mx-accent-mark: var(--green-11);  --mx-accent-solid: var(--green-9); }
+.mx-menubar--accent-orange { --mx-accent-mark: var(--orange-11); --mx-accent-solid: var(--orange-9); }
+.mx-menubar--accent-plum   { --mx-accent-mark: var(--plum-11);   --mx-accent-solid: var(--plum-9); }
+.mx-menubar--accent-red    { --mx-accent-mark: var(--red-11);    --mx-accent-solid: var(--red-9); }
+.mx-menubar__trigger {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 6px 10px; border: 0; border-radius: 7px; background: transparent;
+  font: 600 13px/1 var(--font-primary); color: rgb(var(--fg-secondary)); cursor: pointer;
+}
+.mx-menubar__trigger:hover { background: rgb(var(--bg-hover)); color: rgb(var(--fg-primary)); }
+.mx-menubar__trigger:focus-visible { outline: none; box-shadow: 0 0 0 2px rgb(var(--ring-focus)); }
+.mx-menubar__trigger--active { background: rgb(var(--bg-hover)); color: rgb(var(--fg-primary)); }
+.mx-menubar__panel {
+  box-sizing: border-box; z-index: 50; display: flex; flex-direction: column; gap: 1px; min-width: 200px;
+  background: rgb(var(--bg-elevated)); border: 1px solid rgb(var(--border-secondary));
+  border-radius: var(--radius-12); box-shadow: var(--shadow-300); padding: 5px;
+  animation: merc-menu-in 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+.mx-menubar__panel:focus { outline: none; }
+.mx-menubar__item {
+  display: flex; align-items: center; gap: 8px; width: 100%;
+  padding: 8px 10px; border: 0; border-radius: 7px; background: transparent;
+  font: 500 13px/1 var(--font-primary); color: rgb(var(--fg-primary));
+  text-align: left; cursor: pointer;
+}
+.mx-menubar__item:hover { background: rgb(var(--bg-hover)); }
+.mx-menubar__item:focus-visible {
+  outline: none; background: rgb(var(--bg-hover)); box-shadow: inset 0 0 0 1px rgb(var(--border-focus));
+}
+.mx-menubar__check {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 15px; height: 15px; flex: none; color: rgb(var(--mx-accent-mark, var(--iris-11)));
+}
+.mx-menubar__radio {
+  display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; flex: none;
+}
+.mx-menubar__radio-dot {
+  width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--mx-accent-solid, var(--iris-9)));
+}
+.mx-menubar__icon { flex: none; color: rgb(var(--fg-secondary)); }
+.mx-menubar__text { flex: 1 1 auto; }
+.mx-menubar__shortcut {
+  flex: none; font: 500 11px/1 var(--font-secondary); letter-spacing: 0.04em; color: rgb(var(--fg-tertiary));
+}
+.mx-menubar__label {
+  padding: 6px 10px 4px; font: 600 11px/1 var(--font-primary);
+  letter-spacing: 0.06em; text-transform: uppercase; color: rgb(var(--fg-tertiary));
+}
+.mx-menubar__sep { height: 1px; margin: 5px 0; background: rgb(var(--border-secondary)); }
+
+/* Static @keyframes for the menu family (replacing the prototypes' ensureKeyframes() injection). */
+@keyframes merc-dd-in   { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: none; } }
+@keyframes merc-cm-in   { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }
+@keyframes merc-menu-in { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: none; } }
+@media (prefers-reduced-motion: reduce) {
+  .mx-dropdown, .mx-ctx, .mx-menubar__panel { animation: none; }
+}
+
+/* ============================================================
+   Mercury — NEW component styles (mx.7.5 · import batch 5, wave 2)
+   Token-only; .mx-* idiom. The hover-card family (HoverCard +
+   LinkPreview) shares one portaled card surface; TabNav restores
+   the :focus-visible ring the prototype dropped.
+   ============================================================ */
+
+/* ============================================================
+   HOVER CARD / LINK PREVIEW  .mx-hovercard / .mx-linkpreview
+   (overlay — non-modal, hover/focus-revealed cards)
+   Portaled + positioned by useAnchoredPosition (position: fixed +
+   top/left/width); these paint the card surface. The two share one
+   rule; LinkPreview keeps its own selector so a consumer can target
+   the URL-preview variant. Both ride the shared merc-hc-in entrance.
+   ============================================================ */
+.mx-hovercard,
+.mx-linkpreview {
+  box-sizing: border-box; z-index: 50;
+  background: rgb(var(--bg-elevated)); border: 1px solid rgb(var(--border-secondary));
+  border-radius: var(--radius-12); box-shadow: var(--shadow-300); padding: 16px;
+  font: 400 14px/1.5 var(--font-primary); color: rgb(var(--fg-secondary));
+  animation: merc-hc-in 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+.mx-hovercard:focus,
+.mx-linkpreview:focus { outline: none; } /* focused as a container; not an interactive control */
+
+/* Static @keyframes (replacing the prototypes' ensureKeyframes() injection). */
+@keyframes merc-hc-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
+@media (prefers-reduced-motion: reduce) {
+  .mx-hovercard, .mx-linkpreview { animation: none; }
+}
+
+/* ============================================================
+   TAB NAV  .mx-tabnav   (navigation — link-styled tabs)
+   A <nav> of <a aria-current="page"> sharing an underline rail.
+   Distinct from Tabs (in-page panel switch). The active link takes
+   a --bg-brand underline; the :focus-visible ring the source
+   prototype dropped is RESTORED (an a11y regression, not carried).
+   ============================================================ */
+.mx-tabnav {
+  display: flex; align-items: stretch; gap: 2px;
+  border-bottom: 1px solid rgb(var(--border-secondary));
+  font-family: var(--font-primary);
+}
+.mx-tabnav__link {
+  display: inline-flex; align-items: center; box-sizing: border-box;
+  color: rgb(var(--fg-secondary)); text-decoration: none; cursor: pointer;
+  font-weight: var(--fw-medium); white-space: nowrap;
+  border-radius: 7px 7px 0 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
+  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
+}
+.mx-tabnav__link:hover { background: rgb(var(--bg-hover)); color: rgb(var(--fg-primary)); }
+.mx-tabnav__link--active {
+  font-weight: var(--fw-semi-bold); color: rgb(var(--fg-primary));
+  border-bottom-color: rgb(var(--bg-brand));
+}
+.mx-tabnav__link[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
+.mx-tabnav__link[aria-disabled="true"]:hover { background: transparent; color: rgb(var(--fg-secondary)); }
+/* RESTORE the focus ring (the prototype's outline:none was an a11y regression). */
+.mx-tabnav__link:focus-visible {
+  outline: 2px solid rgb(var(--border-focus)); outline-offset: -2px;
+  box-shadow: 0 0 0 3px rgb(var(--ring-focus));
+}
+/* sizes */
+.mx-tabnav--sm .mx-tabnav__link { height: 36px; padding: 0 12px; font-size: 13px; }
+.mx-tabnav--md .mx-tabnav__link { height: 44px; padding: 0 14px; font-size: 14px; }
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   mx.7.3.3 · selection composites
+   CheckboxGroup · RadioGroup (grouped primitives) · CheckboxCards · RadioCards
+   (card shells composing the same primitives). Accent ramps reuse the mx.7.1
+   token mapping: fills/rings -> --<id>-9 · soft bg -> --<id>-3 · text -> --<id>-11.
+   The primitives themselves take no accent prop (INV-5) — the group/card wrapper
+   class tints its own composed Checkbox/Radio by overriding the checked fill.
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+/* ── Group layout ─────────────────────────────────────────────────────────── */
+.mx-checkbox-group,
+.mx-radio-group { display: flex; flex-direction: column; gap: var(--space-8); }
+.mx-checkbox-group--horizontal,
+.mx-radio-group--horizontal { flex-direction: row; flex-wrap: wrap; gap: var(--space-16); }
+
+/* ── CheckboxGroup accent · tint the checked/indeterminate box fill ───────── */
+.mx-checkbox-group--accent-iris   .mx-cb input:checked ~ .mx-cb__box,
+.mx-checkbox-group--accent-iris   .mx-cb input:indeterminate ~ .mx-cb__box { background: rgb(var(--iris-9));   box-shadow: inset 0 0 0 1.5px rgb(var(--iris-9)); }
+.mx-checkbox-group--accent-indigo .mx-cb input:checked ~ .mx-cb__box,
+.mx-checkbox-group--accent-indigo .mx-cb input:indeterminate ~ .mx-cb__box { background: rgb(var(--indigo-9)); box-shadow: inset 0 0 0 1.5px rgb(var(--indigo-9)); }
+.mx-checkbox-group--accent-green  .mx-cb input:checked ~ .mx-cb__box,
+.mx-checkbox-group--accent-green  .mx-cb input:indeterminate ~ .mx-cb__box { background: rgb(var(--green-9));  box-shadow: inset 0 0 0 1.5px rgb(var(--green-9)); }
+.mx-checkbox-group--accent-orange .mx-cb input:checked ~ .mx-cb__box,
+.mx-checkbox-group--accent-orange .mx-cb input:indeterminate ~ .mx-cb__box { background: rgb(var(--orange-9)); box-shadow: inset 0 0 0 1.5px rgb(var(--orange-9)); }
+.mx-checkbox-group--accent-plum   .mx-cb input:checked ~ .mx-cb__box,
+.mx-checkbox-group--accent-plum   .mx-cb input:indeterminate ~ .mx-cb__box { background: rgb(var(--plum-9));   box-shadow: inset 0 0 0 1.5px rgb(var(--plum-9)); }
+.mx-checkbox-group--accent-red    .mx-cb input:checked ~ .mx-cb__box,
+.mx-checkbox-group--accent-red    .mx-cb input:indeterminate ~ .mx-cb__box { background: rgb(var(--red-9));    box-shadow: inset 0 0 0 1.5px rgb(var(--red-9)); }
+
+/* ── RadioGroup accent · tint the checked ring (+ keep the focus halo) ────── */
+.mx-radio-group--accent-iris   .mx-rd input:checked ~ .mx-rd__ring { box-shadow: inset 0 0 0 5px rgb(var(--iris-9)); }
+.mx-radio-group--accent-iris   .mx-rd input:checked:focus-visible ~ .mx-rd__ring { box-shadow: inset 0 0 0 5px rgb(var(--iris-9)), 0 0 0 3px rgb(var(--ring-focus)); }
+.mx-radio-group--accent-indigo .mx-rd input:checked ~ .mx-rd__ring { box-shadow: inset 0 0 0 5px rgb(var(--indigo-9)); }
+.mx-radio-group--accent-indigo .mx-rd input:checked:focus-visible ~ .mx-rd__ring { box-shadow: inset 0 0 0 5px rgb(var(--indigo-9)), 0 0 0 3px rgb(var(--ring-focus)); }
+.mx-radio-group--accent-green  .mx-rd input:checked ~ .mx-rd__ring { box-shadow: inset 0 0 0 5px rgb(var(--green-9)); }
+.mx-radio-group--accent-green  .mx-rd input:checked:focus-visible ~ .mx-rd__ring { box-shadow: inset 0 0 0 5px rgb(var(--green-9)), 0 0 0 3px rgb(var(--ring-focus)); }
+.mx-radio-group--accent-orange .mx-rd input:checked ~ .mx-rd__ring { box-shadow: inset 0 0 0 5px rgb(var(--orange-9)); }
+.mx-radio-group--accent-orange .mx-rd input:checked:focus-visible ~ .mx-rd__ring { box-shadow: inset 0 0 0 5px rgb(var(--orange-9)), 0 0 0 3px rgb(var(--ring-focus)); }
+.mx-radio-group--accent-plum   .mx-rd input:checked ~ .mx-rd__ring { box-shadow: inset 0 0 0 5px rgb(var(--plum-9)); }
+.mx-radio-group--accent-plum   .mx-rd input:checked:focus-visible ~ .mx-rd__ring { box-shadow: inset 0 0 0 5px rgb(var(--plum-9)), 0 0 0 3px rgb(var(--ring-focus)); }
+.mx-radio-group--accent-red    .mx-rd input:checked ~ .mx-rd__ring { box-shadow: inset 0 0 0 5px rgb(var(--red-9)); }
+.mx-radio-group--accent-red    .mx-rd input:checked:focus-visible ~ .mx-rd__ring { box-shadow: inset 0 0 0 5px rgb(var(--red-9)), 0 0 0 3px rgb(var(--ring-focus)); }
+
+/* ── Cards layout · a grid of card shells (columns set inline per instance) ── */
+.mx-checkbox-cards,
+.mx-radio-cards { display: grid; gap: var(--space-8); }
+.mx-checkbox-cards__card,
+.mx-radio-cards__card {
+  border: 1px solid rgb(var(--border-primary));
+  border-radius: var(--radius-8);
+  background: rgb(var(--bg-primary));
+  transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
+}
+.mx-checkbox-cards--sm .mx-checkbox-cards__card,
+.mx-radio-cards--sm .mx-radio-cards__card { padding: var(--space-8); }
+.mx-checkbox-cards--md .mx-checkbox-cards__card,
+.mx-radio-cards--md .mx-radio-cards__card { padding: var(--space-12); }
+.mx-checkbox-cards--lg .mx-checkbox-cards__card,
+.mx-radio-cards--lg .mx-radio-cards__card { padding: var(--space-16); }
+.mx-checkbox-cards__card.is-selected,
+.mx-radio-cards__card.is-selected {
+  border-color: transparent;
+  background: rgb(var(--bg-brand-subtle));
+  box-shadow: inset 0 0 0 2px rgb(var(--bg-brand));
+}
+.mx-checkbox-cards__card.is-disabled,
+.mx-radio-cards__card.is-disabled { opacity: 0.55; cursor: not-allowed; }
+
+/* ── Card body layout (icon + text stack inside the composed control label) ── */
+.mx-checkbox-cards__body,
+.mx-radio-cards__body { display: inline-flex; align-items: flex-start; gap: var(--space-8); }
+.mx-checkbox-cards__icon,
+.mx-radio-cards__icon { flex-shrink: 0; color: rgb(var(--fg-secondary)); }
+.mx-checkbox-cards__text,
+.mx-radio-cards__text { display: flex; flex-direction: column; gap: var(--space-2); }
+.mx-checkbox-cards__label,
+.mx-radio-cards__label { font-weight: var(--fw-medium); color: rgb(var(--fg-primary)); }
+.mx-checkbox-cards__desc,
+.mx-radio-cards__desc { font-size: 13px; color: rgb(var(--fg-secondary)); }
+
+/* ── CheckboxCards accent · the selected card ring + soft wash ────────────── */
+.mx-checkbox-cards--accent-iris   .mx-checkbox-cards__card.is-selected { background: rgb(var(--iris-3));   box-shadow: inset 0 0 0 2px rgb(var(--iris-9)); }
+.mx-checkbox-cards--accent-indigo .mx-checkbox-cards__card.is-selected { background: rgb(var(--indigo-3)); box-shadow: inset 0 0 0 2px rgb(var(--indigo-9)); }
+.mx-checkbox-cards--accent-green  .mx-checkbox-cards__card.is-selected { background: rgb(var(--green-3));  box-shadow: inset 0 0 0 2px rgb(var(--green-9)); }
+.mx-checkbox-cards--accent-orange .mx-checkbox-cards__card.is-selected { background: rgb(var(--orange-3)); box-shadow: inset 0 0 0 2px rgb(var(--orange-9)); }
+.mx-checkbox-cards--accent-plum   .mx-checkbox-cards__card.is-selected { background: rgb(var(--plum-3));   box-shadow: inset 0 0 0 2px rgb(var(--plum-9)); }
+.mx-checkbox-cards--accent-red    .mx-checkbox-cards__card.is-selected { background: rgb(var(--red-3));    box-shadow: inset 0 0 0 2px rgb(var(--red-9)); }
+
+/* ── RadioCards accent · the selected card ring + soft wash ───────────────── */
+.mx-radio-cards--accent-iris   .mx-radio-cards__card.is-selected { background: rgb(var(--iris-3));   box-shadow: inset 0 0 0 2px rgb(var(--iris-9)); }
+.mx-radio-cards--accent-indigo .mx-radio-cards__card.is-selected { background: rgb(var(--indigo-3)); box-shadow: inset 0 0 0 2px rgb(var(--indigo-9)); }
+.mx-radio-cards--accent-green  .mx-radio-cards__card.is-selected { background: rgb(var(--green-3));  box-shadow: inset 0 0 0 2px rgb(var(--green-9)); }
+.mx-radio-cards--accent-orange .mx-radio-cards__card.is-selected { background: rgb(var(--orange-3)); box-shadow: inset 0 0 0 2px rgb(var(--orange-9)); }
+.mx-radio-cards--accent-plum   .mx-radio-cards__card.is-selected { background: rgb(var(--plum-3));   box-shadow: inset 0 0 0 2px rgb(var(--plum-9)); }
+.mx-radio-cards--accent-red    .mx-radio-cards__card.is-selected { background: rgb(var(--red-3));    box-shadow: inset 0 0 0 2px rgb(var(--red-9)); }
+
+/* ── mx.7.3.3 folds ─────────────────────────────────────────────────────────
+   Textarea size scale (md = the base .mx-ta__inp default, no rule needed) and
+   the ToggleGroup accent ramp (tint the grouped on-fill; the base
+   .mx-tgl--grouped.is-on is a soft --bg-secondary fill, so the accent keeps the
+   soft-bg pattern: --<id>-3 fill + --<id>-11 text). Additive; token-only.
+   ─────────────────────────────────────────────────────────────────────────── */
+.mx-ta--sm .mx-ta__inp { padding: 8px 12px; font-size: 13px; }
+.mx-ta--lg .mx-ta__inp { padding: 14px 16px; font-size: 15px; }
+
+.mx-tgl-grp--accent-iris   .mx-tgl--grouped.is-on { background: rgb(var(--iris-3));   color: rgb(var(--iris-11)); }
+.mx-tgl-grp--accent-indigo .mx-tgl--grouped.is-on { background: rgb(var(--indigo-3)); color: rgb(var(--indigo-11)); }
+.mx-tgl-grp--accent-green  .mx-tgl--grouped.is-on { background: rgb(var(--green-3));  color: rgb(var(--green-11)); }
+.mx-tgl-grp--accent-orange .mx-tgl--grouped.is-on { background: rgb(var(--orange-3)); color: rgb(var(--orange-11)); }
+.mx-tgl-grp--accent-plum   .mx-tgl--grouped.is-on { background: rgb(var(--plum-3));   color: rgb(var(--plum-11)); }
+.mx-tgl-grp--accent-red    .mx-tgl--grouped.is-on { background: rgb(var(--red-3));    color: rgb(var(--red-11)); }