/* Mercury CSS for EchoCms sites: @mercury-fx/ui src/styles (tokens, mercury, additions, layout, the order of index.css),
   copied from mercury/packages/mercury-ui/src/styles at d87ef9453. EchoCms serves it as each site's base stylesheet. */

/* --- tokens.css --- */
/*
  Mercury Design System — Colors & Type
  Safe to import standalone. Light theme is the default.
*/

/* ==========================================================
   FONTS
   DM Sans — local (Regular 400, Semibold 500)
   DM Mono / DM Serif Display
   ========================================================== */
/* DM Sans — brand-hosted (Regular/Medium/Bold × Normal/Italic) */
@font-face {
  font-family: "DM Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: local("DMSans-Regular"), local("DM Sans Regular"),
       url("fonts/DMSans-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans"; font-style: italic; font-weight: 400; font-display: swap;
  src: local("DMSans-Italic"), local("DM Sans Italic"),
       url("fonts/DMSans-Italic.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: local("DMSans-Medium"), local("DM Sans Medium"),
       url("fonts/DMSans-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans"; font-style: italic; font-weight: 500; font-display: swap;
  src: local("DMSans-MediumItalic"), local("DM Sans Medium Italic"),
       url("fonts/DMSans-MediumItalic.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: local("DMSans-Bold"), local("DM Sans Bold"),
       url("fonts/DMSans-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans"; font-style: italic; font-weight: 700; font-display: swap;
  src: local("DMSans-BoldItalic"), local("DM Sans Bold Italic"),
       url("fonts/DMSans-BoldItalic.woff2") format("woff2");
}
/* DM Mono — brand-hosted (Light/Regular/Medium × Normal/Italic) */
@font-face {
  font-family: "DM Mono"; font-style: normal; font-weight: 300; font-display: swap;
  src: local("DMMono-Light"), url("fonts/DMMono-Light.woff2") format("woff2");
}
@font-face {
  font-family: "DM Mono"; font-style: italic; font-weight: 300; font-display: swap;
  src: local("DMMono-LightItalic"), url("fonts/DMMono-LightItalic.woff2") format("woff2");
}
@font-face {
  font-family: "DM Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: local("DMMono-Regular"), url("fonts/DMMono-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "DM Mono"; font-style: italic; font-weight: 400; font-display: swap;
  src: local("DMMono-Italic"), url("fonts/DMMono-Italic.woff2") format("woff2");
}
@font-face {
  font-family: "DM Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: local("DMMono-Medium"), url("fonts/DMMono-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "DM Mono"; font-style: italic; font-weight: 500; font-display: swap;
  src: local("DMMono-MediumItalic"), url("fonts/DMMono-MediumItalic.woff2") format("woff2");
}
/* DM Serif Display — brand-hosted */
@font-face {
  font-family: "DM Serif Display"; font-style: normal; font-weight: 400; font-display: swap;
  src: local("DMSerifDisplay-Regular"), local("DM Serif Display Regular"),
       url("fonts/DMSerifDisplay-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "DM Serif Display"; font-style: italic; font-weight: 400; font-display: swap;
  src: local("DMSerifDisplay-Italic"), local("DM Serif Display Italic"),
       url("fonts/DMSerifDisplay-Italic.woff2") format("woff2");
}

/* ==========================================================
   COLOR SCALES (RGB triplets — use rgb(var(--name)) )
   Radix-style 12-step scales. Step 9 = solid brand; 1-3 = bg,
   4-8 = interactive surfaces, 10-12 = text & accents.
   ========================================================== */
:root, .light-theme {
  /* Slate — neutrals */
  --slate-1:  252 252 253;
  --slate-2:  249 249 251;
  --slate-3:  240 240 243;
  --slate-4:  232 232 236;
  --slate-5:  224 225 230;
  --slate-6:  217 217 224;
  --slate-7:  205 206 214;
  --slate-8:  185 187 198;
  --slate-9:  139 141 152;
  --slate-10: 128 131 141;
  --slate-11:  96 100 108;
  --slate-12:  28  32  36;

  /* Iris — brand */
  --iris-1:  253 253 255;
  --iris-2:  248 248 255;
  --iris-3:  240 241 254;
  --iris-4:  230 231 255;
  --iris-5:  218 220 255;
  --iris-6:  203 205 255;
  --iris-7:  184 186 248;
  --iris-8:  155 158 240;
  --iris-9:   91  91 214;
  --iris-10:  81  81 205;
  --iris-11:  87  83 198;
  --iris-12:  39  41  98;

  /* Indigo — active / info / link */
  --indigo-1:  253 253 254;
  --indigo-2:  247 249 255;
  --indigo-3:  237 242 254;
  --indigo-4:  225 233 255;
  --indigo-5:  210 222 255;
  --indigo-6:  193 208 255;
  --indigo-7:  171 189 249;
  --indigo-8:  141 164 239;
  --indigo-9:   62  99 221;
  --indigo-10:  51  88 212;
  --indigo-11:  13 116 206;
  --indigo-12:  31  45  92;

  /* Green — positive */
  --green-9:  48 164 108;
  /* Red — negative */
  --red-9:   229  72  77;
  /* Orange — caution */
  --orange-9: 247 107  21;
  /* Plum — discovery */
  --plum-9:  171  74 186;

  /* Extra status scales — needed for full semantic coverage */
  --green-3:  221 243 228;   --green-11: 24 128 56;
  --red-3:    255 229 232;   --red-11:   205 43 49;
  --orange-3: 255 231 214;   --orange-11: 204 77  6;
  --plum-3:   244 226 248;   --plum-11:  149 62 163;

  /* ===== SEMANTIC TOKENS ===============================================
     Naming: <role>-<intent>-<variant>-<state>
     role     = bg | fg | border | shadow
     intent   = primary, secondary, tertiary, brand, active, positive,
                negative, caution, discovery, info, inverse, disabled
     variant  = solid (default) | subtle | muted
     state    = default | hover | pressed | disabled
     Use:  background: rgb(var(--bg-brand));
           background: rgb(var(--bg-hover));   // alpha variant
     ==================================================================== */

  /* ---- Surfaces / backgrounds ---- */
  --bg-primary:          var(--slate-1);   /* page */
  --bg-secondary:        var(--slate-2);   /* raised surface */
  --bg-tertiary:         var(--slate-3);   /* sunken / code block */
  --bg-elevated:         var(--slate-1);   /* popover / modal */
  --bg-inverse:          var(--slate-12);
  --bg-inverse-hover:    var(--slate-11);
  --bg-inverse-pressed:  var(--slate-10);
  --bg-disabled:         var(--slate-3);

  /* Alpha scrims — use as `rgb(var(--bg-hover))` with r g b / a syntax */
  --bg-hover:       28 32 36 / 0.06;
  --bg-pressed:     28 32 36 / 0.12;
  --bg-selected:    91 91 214 / 0.10;
  --bg-backdrop:    28 32 36 / 0.56;
  --bg-overlay:     28 32 36 / 0.32;

  /* ---- Brand ---- */
  --bg-brand:           var(--iris-9);
  --bg-brand-hover:     var(--iris-10);
  --bg-brand-pressed:   var(--iris-11);
  --bg-brand-subtle:    var(--iris-3);     /* tint bg for chips, callouts */
  --bg-brand-muted:     var(--iris-4);     /* interactive subtle surface */

  /* ---- Active / interactive (controls, links, focus) ---- */
  --bg-active:          var(--indigo-9);
  --bg-active-hover:    var(--indigo-10);
  --bg-active-subtle:   var(--indigo-3);

  /* ---- Status ---- */
  --bg-positive:        var(--green-9);
  --bg-positive-subtle: var(--green-3);
  --bg-negative:        var(--red-9);
  --bg-negative-subtle: var(--red-3);
  --bg-caution:         var(--orange-9);
  --bg-caution-subtle:  var(--orange-3);
  --bg-discovery:       var(--plum-9);
  --bg-discovery-subtle:var(--plum-3);
  --bg-info:            var(--indigo-9);
  --bg-info-subtle:     var(--indigo-3);

  /* ---- Foregrounds (text + icon) ---- */
  --fg-primary:       var(--slate-12);   /* body text */
  --fg-secondary:     var(--slate-11);   /* muted text */
  --fg-tertiary:      var(--slate-10);   /* placeholder / hint */
  --fg-disabled:      var(--slate-8);
  --fg-inverse:       var(--slate-1);
  --fg-on-brand:      var(--slate-1);    /* text on bg-brand */
  --fg-on-active:     var(--slate-1);
  --fg-on-positive:   var(--slate-1);
  --fg-on-negative:   var(--slate-1);
  --fg-on-caution:    var(--slate-12);   /* orange needs dark ink */
  --fg-on-discovery:  var(--slate-1);

  --fg-brand:         var(--iris-11);
  --fg-brand-hover:   var(--iris-10);
  --fg-active:        var(--indigo-11);
  --fg-link:          var(--indigo-11);
  --fg-link-hover:    var(--indigo-10);
  --fg-link-visited:  var(--plum-11);
  --fg-positive:      var(--green-11);
  --fg-negative:      var(--red-11);
  --fg-caution:       var(--orange-11);
  --fg-discovery:     var(--plum-11);
  --fg-info:          var(--indigo-11);

  /* ---- Borders ---- */
  --border-primary:     var(--slate-6);   /* default hairline */
  --border-secondary:   var(--slate-5);   /* subtle divider */
  --border-strong:      var(--slate-7);   /* emphasized */
  --border-disabled:    var(--slate-5);
  --border-focus:       var(--indigo-9);
  --border-active:      var(--indigo-9);
  --border-brand:       var(--iris-9);
  --border-inverse:     var(--slate-12);
  --border-positive:    var(--green-9);
  --border-negative:    var(--red-9);
  --border-caution:     var(--orange-9);
  --border-discovery:   var(--plum-9);

  /* Focus ring — use as `box-shadow: 0 0 0 3px rgb(var(--ring-focus));` */
  --ring-focus:       62 99 221 / 0.4;
  --ring-negative:    229 72 77 / 0.4;

  /* ---- Type families ---- */
  --font-primary:   "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-secondary: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-display:   "DM Serif Display", Georgia, "Times New Roman", serif;

  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semi-bold:  600;
  --fw-bold:       700;
  --fw-black:      900;

  /* ---- Type scale ---- */
  --text-body-100-size: 10px; --text-body-100-lh: 12px;
  --text-body-200-size: 12px; --text-body-200-lh: 16px;
  --text-body-300-size: 14px; --text-body-300-lh: 20px;
  --text-body-400-size: 16px; --text-body-400-lh: 24px;
  --text-body-500-size: 18px; --text-body-500-lh: 28px;

  --text-heading-100-size: 18px; --text-heading-100-lh: 28px;
  --text-heading-200-size: 24px; --text-heading-200-lh: 32px;
  --text-heading-300-size: 36px; --text-heading-300-lh: 40px;
  --text-heading-400-size: 48px; --text-heading-400-lh: 56px;
  --text-heading-500-size: 72px; --text-heading-500-lh: 80px;

  /* ---- Radii ---- */
  --radius-2:  2px;
  --radius-4:  4px;
  --radius-6:  6px;
  --radius-8:  8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-20: 20px;
  --radius-24: 24px;
  --radius-32: 32px;
  --radius-full: 9999px;

  /* ---- Spacing ---- */
  --space-2: 2px;  --space-4: 4px;  --space-6: 6px;  --space-8: 8px;
  --space-10: 10px; --space-12: 12px; --space-14: 14px; --space-16: 16px;
  --space-20: 20px; --space-24: 24px; --space-28: 28px; --space-32: 32px;
  --space-40: 40px; --space-48: 48px; --space-56: 56px; --space-64: 64px;
  --space-72: 72px; --space-80: 80px; --space-96: 96px; --space-128: 128px;

  /* ---- Elevation (two-layer shadows) ---- */
  --shadow-100:
    0 1px 2px 0 rgb(28 32 36 / 0.06),
    0 0 0 0 rgb(28 32 36 / 0);
  --shadow-200:
    0 4px 8px -4px rgb(28 32 36 / 0.1),
    0 2px 4px -2px rgb(28 32 36 / 0.04);
  --shadow-300:
    0 12px 16px -4px rgb(28 32 36 / 0.08),
    0 4px 8px -2px rgb(28 32 36 / 0.04);
  --shadow-400:
    0 20px 24px -4px rgb(28 32 36 / 0.08),
    0 8px 8px -4px rgb(28 32 36 / 0.04);
  --shadow-500:
    0 24px 48px -12px rgb(28 32 36 / 0.16);
  --shadow-600:
    0 32px 64px -12px rgb(28 32 36 / 0.16);
}

/* ==========================================================
   DARK THEME — overrides scales + bg-hover/backdrop shadow tints
   Matches the upstream dark-theme block.
   ========================================================== */
.dark-theme {
  /* Status scales — dark variants */
  --green-3:  22 57 38;   --green-11: 78 212 136;
  --red-3:    61 25 30;   --red-11:   255 125 133;
  --orange-3: 63 36 17;   --orange-11: 255 160 87;
  --plum-3:   58 29 65;   --plum-11:  211 131 228;
  --indigo-3: 26 40 84;   /* info-subtle: the missing dark override (fell back to the light near-white) */

  --slate-1:  17  17  19;
  --slate-2:  24  25  27;
  --slate-3:  33  34  37;
  --slate-4:  39  42  45;
  --slate-5:  46  49  53;
  --slate-6:  54  58  63;
  --slate-7:  67  72  78;
  --slate-8:  90  97 105;
  --slate-9: 105 110 119;
  --slate-10: 119 123 132;
  --slate-11: 176 180 186;
  --slate-12: 237 238 240;

  --iris-1:   19  19  30;
  --iris-2:   23  22  37;
  --iris-3:   32  34  72;
  --iris-4:   38  42 101;
  --iris-5:   48  51 116;
  --iris-6:   61  62 130;
  --iris-7:   74  74 149;
  --iris-8:   89  88 177;
  --iris-9:   91  91 214;
  --iris-10: 110 106 222;
  --iris-11: 177 169 255;
  --iris-12: 224 223 254;

  --indigo-9:  62  99 221;
  --indigo-10: 84 114 228;
  --indigo-11: 158 177 255;
  --indigo-12: 214 225 255;

  --bg-hover:      237 238 240 / 0.06;
  --bg-pressed:    237 238 240 / 0.12;
  --bg-selected:   91 91 214 / 0.18;
  --bg-backdrop:   0 0 0 / 0.72;
  --bg-overlay:    0 0 0 / 0.48;
  --ring-focus:    110 106 222 / 0.4;
  --ring-negative: 255 125 133 / 0.4;

  /* Dark-mode on-caution flips back to dark ink on lighter orange? no — in
     dark mode orange-9 is still vivid; on-caution stays dark. */

  --shadow-100: 0 1px 2px 0 rgb(0 0 0 / 0.24);
  --shadow-200: 0 4px 8px -4px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.16);
  --shadow-300: 0 12px 16px -4px rgb(0 0 0 / 0.32), 0 4px 8px -2px rgb(0 0 0 / 0.16);
  --shadow-400: 0 20px 24px -4px rgb(0 0 0 / 0.32), 0 8px 8px -4px rgb(0 0 0 / 0.16);
  --shadow-500: 0 24px 48px -12px rgb(0 0 0 / 0.64);
  --shadow-600: 0 32px 64px -12px rgb(0 0 0 / 0.64);
}

/* ==========================================================
   SEMANTIC TYPE ELEMENTS
   Apply heading/body scale to raw HTML tags.
   ========================================================== */
html, body {
  font-family: var(--font-primary);
  background: rgb(var(--bg-primary));
  color: rgb(var(--fg-primary));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-secondary);
  font-weight: var(--fw-bold);
  font-size: var(--text-heading-500-size);
  line-height: var(--text-heading-500-lh);
  letter-spacing: -0.02em;
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-secondary);
  font-weight: var(--fw-bold);
  font-size: var(--text-heading-400-size);
  line-height: var(--text-heading-400-lh);
  letter-spacing: -0.015em;
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-secondary);
  font-weight: var(--fw-bold);
  font-size: var(--text-heading-300-size);
  line-height: var(--text-heading-300-lh);
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-primary);
  font-weight: var(--fw-bold);
  font-size: var(--text-heading-200-size);
  line-height: var(--text-heading-200-lh);
  margin: 0;
}
h5, .h5 {
  font-family: var(--font-primary);
  font-weight: var(--fw-bold);
  font-size: var(--text-heading-100-size);
  line-height: var(--text-heading-100-lh);
  margin: 0;
}

.text-body-100 { font: var(--fw-regular) var(--text-body-100-size)/var(--text-body-100-lh) var(--font-primary); }
.text-body-200 { font: var(--fw-regular) var(--text-body-200-size)/var(--text-body-200-lh) var(--font-primary); }
.text-body-300 { font: var(--fw-regular) var(--text-body-300-size)/var(--text-body-300-lh) var(--font-primary); }
.text-body-400 { font: var(--fw-regular) var(--text-body-400-size)/var(--text-body-400-lh) var(--font-primary); }
.text-body-500 { font: var(--fw-regular) var(--text-body-500-size)/var(--text-body-500-lh) var(--font-primary); }

p       { font: var(--fw-regular) var(--text-body-400-size)/var(--text-body-400-lh) var(--font-primary); margin: 0 0 var(--space-16); color: rgb(var(--fg-primary)); text-wrap: pretty; }
small   { font: var(--fw-regular) var(--text-body-200-size)/var(--text-body-200-lh) var(--font-primary); color: rgb(var(--fg-secondary)); }
code, kbd, pre, samp {
  font-family: var(--font-secondary);
  font-size: var(--text-body-300-size);
  line-height: var(--text-body-300-lh);
}
code { background: rgb(var(--bg-tertiary)); padding: 2px 6px; border-radius: var(--radius-4); }
pre  { background: rgb(var(--bg-tertiary)); padding: var(--space-16); border-radius: var(--radius-8); overflow: auto; }

a { color: rgb(var(--fg-link)); text-decoration: none; }
a:hover { text-decoration: underline; }

.display {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: clamp(48px, 8vw, 96px);
  line-height: 1.05;
  letter-spacing: -0.01em;
}

::selection { background: rgb(var(--iris-5)); color: rgb(var(--fg-primary)); }

/* --- mercury.css --- */
/*
  Mercury Design System — Component layer.
  Companion to tokens.css. Every rule reads the semantic tokens defined there
  (rgb(var(--token))) so components respond to .dark-theme / .light-theme.

  Class names mirror the Mercury component library 1:1 (.mx-btn, .mx-in, …),
  so React/HTML markup maps directly onto the Svelte sources.
*/

/* ============================================================
   BUTTON  .mx-btn
   ============================================================ */
.mx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius-8);
  border: 1px solid transparent;
  font-family: var(--font-primary);
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease, transform 80ms ease;
  white-space: nowrap;
}
.mx-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgb(var(--ring-focus)); }
.mx-btn:active:not(:disabled) { transform: scale(0.98); }
.mx-btn.is-full { width: 100%; }

.mx-btn--sm { height: 32px; padding: 0 14px; font-size: 13px; border-radius: var(--radius-6); }
.mx-btn--md { height: 40px; padding: 0 18px; font-size: 14px; }
.mx-btn--lg { height: 48px; padding: 0 22px; font-size: 15px; border-radius: var(--radius-12); }

.mx-btn--primary { background: rgb(var(--bg-brand)); color: rgb(var(--fg-on-brand)); }
.mx-btn--primary:hover:not(:disabled) { background: rgb(var(--bg-brand-hover)); }
.mx-btn--primary:active:not(:disabled) { background: rgb(var(--bg-brand-pressed)); }

.mx-btn--secondary { background: rgb(var(--bg-secondary)); color: rgb(var(--fg-primary)); border-color: rgb(var(--border-primary)); }
.mx-btn--secondary:hover:not(:disabled) { background: rgb(var(--bg-tertiary)); }

.mx-btn--ghost { background: transparent; color: rgb(var(--fg-primary)); }
.mx-btn--ghost:hover:not(:disabled) { background: rgb(var(--bg-hover)); }
.mx-btn--ghost:active:not(:disabled) { background: rgb(var(--bg-pressed)); }

.mx-btn--danger { background: rgb(var(--bg-negative)); color: rgb(var(--fg-on-negative)); }
.mx-btn--danger:hover:not(:disabled) { filter: brightness(0.94); }

.mx-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.mx-btn__icon { display: inline-flex; align-items: center; }
.mx-btn__icon--trail { margin-left: -2px; }
.mx-btn__spin {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: mx-spin 0.7s linear infinite;
}
@keyframes mx-spin { to { transform: rotate(360deg); } }

/* ============================================================
   INPUT  .mx-in
   ============================================================ */
.mx-in { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-primary); width: 100%; max-width: 320px; }
.mx-in__lbl { font-size: 13px; font-weight: 500; color: rgb(var(--fg-secondary)); }
.mx-in__req { color: rgb(var(--fg-negative)); }
.mx-in__field {
  display: inline-flex; align-items: center; height: 40px;
  border-radius: var(--radius-8);
  background: rgb(var(--bg-primary));
  box-shadow: inset 0 0 0 1px rgb(var(--border-primary));
  transition: box-shadow 140ms ease;
}
.mx-in__field:focus-within { box-shadow: inset 0 0 0 2px rgb(var(--border-focus)), 0 0 0 3px rgb(var(--ring-focus)); }
.mx-in--err .mx-in__field { box-shadow: inset 0 0 0 2px rgb(var(--border-negative)); }
.mx-in--err .mx-in__field:focus-within { box-shadow: inset 0 0 0 2px rgb(var(--border-negative)), 0 0 0 3px rgb(var(--ring-negative)); }
.mx-in--dis .mx-in__field { background: rgb(var(--bg-disabled)); opacity: 0.7; }
.mx-in__inp {
  flex: 1; min-width: 0; height: 100%; padding: 0 14px;
  border: 0; outline: 0; background: transparent;
  color: rgb(var(--fg-primary)); font: 500 14px/1 var(--font-primary);
}
.mx-in__inp::placeholder { color: rgb(var(--fg-tertiary)); }
.mx-in__inp:disabled { cursor: not-allowed; }
.mx-in__aff { display: inline-flex; align-items: center; color: rgb(var(--fg-tertiary)); font-size: 14px; }
.mx-in__aff--lead { padding-left: 12px; }
.mx-in__aff--trail { padding-right: 12px; }
.mx-in__msg { font-size: 12px; color: rgb(var(--fg-secondary)); }
.mx-in__msg--err { color: rgb(var(--fg-negative)); }

/* ============================================================
   TEXTAREA  .mx-ta
   ============================================================ */
.mx-ta { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-primary); width: 100%; max-width: 480px; }
.mx-ta__lbl { font-size: 13px; font-weight: 500; color: rgb(var(--fg-secondary)); }
.mx-ta__req { color: rgb(var(--fg-negative)); }
.mx-ta__field {
  border-radius: var(--radius-8);
  background: rgb(var(--bg-primary));
  box-shadow: inset 0 0 0 1px rgb(var(--border-primary));
  transition: box-shadow 140ms ease;
}
.mx-ta__field:focus-within { box-shadow: inset 0 0 0 2px rgb(var(--border-focus)), 0 0 0 3px rgb(var(--ring-focus)); }
.mx-ta--err .mx-ta__field { box-shadow: inset 0 0 0 2px rgb(var(--border-negative)); }
.mx-ta--dis .mx-ta__field { background: rgb(var(--bg-disabled)); opacity: 0.7; }
.mx-ta__inp {
  display: block; width: 100%; padding: 12px 14px;
  border: 0; outline: 0; background: transparent;
  color: rgb(var(--fg-primary)); font: 400 14px/1.5 var(--font-primary); resize: none;
}
.mx-ta__field.is-resize .mx-ta__inp { resize: vertical; }
.mx-ta__inp::placeholder { color: rgb(var(--fg-tertiary)); }
.mx-ta__foot { display: flex; justify-content: space-between; font: 500 12px/1.4 var(--font-primary); color: rgb(var(--fg-secondary)); }
.mx-ta__msg--err { color: rgb(var(--fg-negative)); }
.mx-ta__count { font-family: var(--font-secondary); color: rgb(var(--fg-tertiary)); }
.mx-ta__count.is-over { color: rgb(var(--fg-negative)); }

/* ============================================================
   SELECT  .mx-sl
   ============================================================ */
.mx-sl { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-primary); width: 100%; max-width: 320px; }
.mx-sl__lbl { font-size: 13px; font-weight: 500; color: rgb(var(--fg-secondary)); }
.mx-sl__req { color: rgb(var(--fg-negative)); }
.mx-sl__field {
  position: relative; height: 40px;
  border-radius: var(--radius-8);
  background: rgb(var(--bg-primary));
  box-shadow: inset 0 0 0 1px rgb(var(--border-primary));
  transition: box-shadow 140ms ease;
}
.mx-sl__field:focus-within { box-shadow: inset 0 0 0 2px rgb(var(--border-focus)), 0 0 0 3px rgb(var(--ring-focus)); }
.mx-sl--err .mx-sl__field { box-shadow: inset 0 0 0 2px rgb(var(--border-negative)); }
.mx-sl--dis .mx-sl__field { background: rgb(var(--bg-disabled)); opacity: 0.7; }
.mx-sl__sel {
  width: 100%; height: 100%; padding: 0 40px 0 14px;
  border: 0; outline: 0; background: transparent;
  color: rgb(var(--fg-primary)); font: 500 14px/1 var(--font-primary);
  appearance: none; -webkit-appearance: none; cursor: pointer;
}
.mx-sl__sel:disabled { cursor: not-allowed; }
.mx-sl__sel option { color: rgb(var(--fg-primary)); background: rgb(var(--bg-elevated)); }
.mx-sl__chev {
  position: absolute; top: 50%; inset-inline-end: 14px;
  transform: translateY(-75%) rotate(45deg);
  width: 8px; height: 8px;
  border-right: 2px solid rgb(var(--fg-secondary));
  border-bottom: 2px solid rgb(var(--fg-secondary));
  pointer-events: none;
}
.mx-sl__msg { font-size: 12px; color: rgb(var(--fg-secondary)); }
.mx-sl__msg--err { color: rgb(var(--fg-negative)); }

/* ============================================================
   SEARCH  .mx-sr
   ============================================================ */
.mx-sr {
  position: relative; display: inline-flex; align-items: center;
  width: 100%; max-width: 320px; height: 40px; padding: 0 14px;
  border-radius: var(--radius-8);
  background: rgb(var(--bg-primary));
  box-shadow: inset 0 0 0 1px rgb(var(--border-primary));
  font-family: var(--font-primary); transition: box-shadow 140ms ease;
}
.mx-sr:focus-within { box-shadow: inset 0 0 0 2px rgb(var(--border-focus)), 0 0 0 3px rgb(var(--ring-focus)); }
.mx-sr--dis { opacity: 0.6; background: rgb(var(--bg-disabled)); }
.mx-sr__icon { color: rgb(var(--fg-tertiary)); display: inline-flex; margin-right: 10px; }
.mx-sr__inp {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  color: rgb(var(--fg-primary)); font: 500 14px/1 var(--font-primary);
}
.mx-sr__inp::placeholder { color: rgb(var(--fg-tertiary)); }
.mx-sr__inp::-webkit-search-cancel-button { display: none; }
.mx-sr__x {
  width: 20px; height: 20px; margin-inline-start: 8px;
  border: 0; background: rgb(var(--bg-tertiary)); color: rgb(var(--fg-secondary));
  border-radius: 50%; cursor: pointer; font-size: 14px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.mx-sr__x:hover { background: rgb(var(--bg-hover)); color: rgb(var(--fg-primary)); }

/* ============================================================
   CHECKBOX  .mx-cb
   ============================================================ */
.mx-cb {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 13px/1.4 var(--font-primary); color: rgb(var(--fg-primary));
  cursor: pointer; user-select: none; position: relative;
}
.mx-cb input { position: absolute; inset: 0; opacity: 0; width: 0; height: 0; pointer-events: none; }
.mx-cb__box {
  width: 16px; height: 16px; border-radius: var(--radius-4);
  background: rgb(var(--bg-primary)); color: rgb(var(--fg-on-brand));
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 1.5px rgb(var(--border-primary));
  transition: box-shadow 120ms ease, background 120ms ease; flex-shrink: 0;
}
.mx-cb input:focus-visible ~ .mx-cb__box { box-shadow: inset 0 0 0 1.5px rgb(var(--border-focus)), 0 0 0 3px rgb(var(--ring-focus)); }
.mx-cb input:checked ~ .mx-cb__box,
.mx-cb input:indeterminate ~ .mx-cb__box { background: rgb(var(--bg-brand)); box-shadow: inset 0 0 0 1.5px rgb(var(--bg-brand)); }
.mx-cb--dis { opacity: 0.45; cursor: not-allowed; }
.mx-cb__lbl a { color: rgb(var(--fg-brand)); }

/* ============================================================
   RADIO  .mx-rd
   ============================================================ */
.mx-rd {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 13px/1.4 var(--font-primary); color: rgb(var(--fg-primary));
  cursor: pointer; user-select: none; position: relative;
}
.mx-rd input { position: absolute; inset: 0; opacity: 0; width: 0; height: 0; pointer-events: none; }
.mx-rd__ring {
  width: 16px; height: 16px; border-radius: 50%;
  background: rgb(var(--bg-primary));
  box-shadow: inset 0 0 0 1.5px rgb(var(--border-primary));
  display: inline-flex; align-items: center; justify-content: center;
  transition: box-shadow 120ms ease; flex-shrink: 0;
}
.mx-rd__dot { width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--bg-primary)); transform: scale(0); transition: transform 120ms ease; }
.mx-rd input:checked ~ .mx-rd__ring { box-shadow: inset 0 0 0 5px rgb(var(--bg-brand)); }
.mx-rd input:checked ~ .mx-rd__ring .mx-rd__dot { transform: scale(1); }
.mx-rd input:focus-visible ~ .mx-rd__ring { box-shadow: inset 0 0 0 1.5px rgb(var(--border-focus)), 0 0 0 3px rgb(var(--ring-focus)); }
.mx-rd input:checked:focus-visible ~ .mx-rd__ring { box-shadow: inset 0 0 0 5px rgb(var(--bg-brand)), 0 0 0 3px rgb(var(--ring-focus)); }
.mx-rd--dis { opacity: 0.45; cursor: not-allowed; }

/* ============================================================
   SWITCH  .mx-sw
   ============================================================ */
.mx-sw {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 14px/1.4 var(--font-primary); color: rgb(var(--fg-primary));
  cursor: pointer; user-select: none; position: relative;
}
.mx-sw input { position: absolute; inset: 0; opacity: 0; width: 0; height: 0; pointer-events: none; }
.mx-sw__track {
  width: 38px; height: 22px; border-radius: var(--radius-full);
  background: rgb(var(--bg-brand)); position: relative;
  transition: background 140ms ease, box-shadow 140ms ease; flex-shrink: 0;
}
.mx-sw__thumb {
  position: absolute; top: 2px; inset-inline-start: 18px;
  width: 18px; height: 18px; border-radius: 50%;
  background: rgb(var(--slate-1)); box-shadow: 0 1px 3px rgb(28 32 36 / 0.25);
  transition: inset-inline-start 140ms ease;
}
.mx-sw--off .mx-sw__track { background: rgb(var(--slate-7)); }
.mx-sw--off .mx-sw__thumb { inset-inline-start: 2px; }
.mx-sw input:focus-visible ~ .mx-sw__track { box-shadow: 0 0 0 3px rgb(var(--ring-focus)); }
.mx-sw--dis { opacity: 0.45; cursor: not-allowed; }

/* ============================================================
   SEGMENTED  .mx-seg
   ============================================================ */
.mx-seg {
  display: inline-flex; padding: 3px; gap: 2px;
  background: rgb(var(--bg-tertiary)); border-radius: var(--radius-8);
  font-family: var(--font-primary);
}
.mx-seg.is-full { display: flex; width: 100%; }
.mx-seg.is-full .mx-seg__seg { flex: 1; }
.mx-seg__seg {
  border: 0; background: transparent; cursor: pointer; border-radius: var(--radius-6);
  color: rgb(var(--fg-secondary)); font: 500 13px/1 var(--font-primary);
  transition: background 120ms ease, color 120ms ease, box-shadow 120ms ease; white-space: nowrap;
}
.mx-seg--sm .mx-seg__seg { padding: 5px 10px; font-size: 12px; }
.mx-seg--md .mx-seg__seg { padding: 7px 14px; }
.mx-seg--lg .mx-seg__seg { padding: 9px 18px; font-size: 14px; }
.mx-seg__seg:hover:not(:disabled) { color: rgb(var(--fg-primary)); }
.mx-seg__seg.is-active { background: rgb(var(--bg-primary)); color: rgb(var(--fg-primary)); box-shadow: var(--shadow-100); }
.mx-seg__seg:disabled { opacity: 0.4; cursor: not-allowed; }
.mx-seg__seg:focus-visible { outline: none; box-shadow: 0 0 0 2px rgb(var(--ring-focus)); }

/* ============================================================
   SLIDER  .mx-sd
   ============================================================ */
.mx-sd { display: block; font-family: var(--font-primary); width: 100%; max-width: 320px; }
.mx-sd__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.mx-sd__lbl { font: 500 13px/1 var(--font-primary); color: rgb(var(--fg-secondary)); }
.mx-sd__val { font: 500 13px/1 var(--font-secondary); color: rgb(var(--fg-primary)); }
.mx-sd__track { position: relative; height: 18px; display: flex; align-items: center; }
.mx-sd__track::before, .mx-sd__track::after {
  content: ""; position: absolute; height: 4px; border-radius: var(--radius-full);
  top: 50%; transform: translateY(-50%); pointer-events: none;
}
.mx-sd__track::before { inset-inline: 0; background: rgb(var(--bg-tertiary)); }
.mx-sd__track::after { inset-inline-start: 0; width: var(--mx-pct, 0%); background: rgb(var(--bg-brand)); }
.mx-sd--sm .mx-sd__track::before, .mx-sd--sm .mx-sd__track::after { height: 2px; }
.mx-sd__inp {
  appearance: none; -webkit-appearance: none; width: 100%; height: 18px;
  background: transparent; margin: 0; padding: 0; cursor: pointer; position: relative; z-index: 2;
}
.mx-sd__inp::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: rgb(var(--bg-primary)); box-shadow: inset 0 0 0 3px rgb(var(--bg-brand)), var(--shadow-100);
  cursor: pointer; transition: transform 120ms ease, box-shadow 120ms ease;
}
.mx-sd__inp::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: rgb(var(--bg-primary)); border: 3px solid rgb(var(--bg-brand)); cursor: pointer;
}
.mx-sd__inp:focus-visible::-webkit-slider-thumb { box-shadow: inset 0 0 0 3px rgb(var(--bg-brand)), 0 0 0 4px rgb(var(--ring-focus)); }
.mx-sd__inp:disabled { cursor: not-allowed; }
.mx-sd--dis { opacity: 0.5; }

/* ============================================================
   AUTH CODE  .mx-auth
   ============================================================ */
.mx-auth { font-family: var(--font-primary); }
.mx-auth__row { display: inline-flex; gap: 8px; }
.mx-auth__cell {
  width: 44px; height: 52px; border: 0; outline: 0; border-radius: var(--radius-8);
  background: rgb(var(--bg-primary)); box-shadow: inset 0 0 0 1px rgb(var(--border-primary));
  text-align: center; font: 700 20px/1 var(--font-secondary); color: rgb(var(--fg-primary));
  transition: box-shadow 140ms ease;
}
.mx-auth__cell:focus { box-shadow: inset 0 0 0 2px rgb(var(--border-focus)), 0 0 0 3px rgb(var(--ring-focus)); }
.mx-auth--err .mx-auth__cell { box-shadow: inset 0 0 0 2px rgb(var(--border-negative)); }
.mx-auth--dis { opacity: 0.6; }
.mx-auth__msg { margin-top: 8px; font: 500 12px/1.4 var(--font-primary); color: rgb(var(--fg-negative)); }

/* ============================================================
   ALERT  .mx-alt
   ============================================================ */
.mx-alt {
  display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--radius-12);
  font-family: var(--font-primary); max-width: 480px; border: 1px solid transparent;
}
.mx-alt__icon {
  width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 13px/1 var(--font-secondary); color: rgb(var(--slate-1));
}
.mx-alt__body { flex: 1; min-width: 0; }
.mx-alt__h { margin: 0 0 4px; font: 600 14px/1.3 var(--font-primary); }
.mx-alt__msg { font: 400 13px/1.5 var(--font-primary); }
.mx-alt__x {
  border: 0; background: transparent; cursor: pointer; font-size: 18px; line-height: 1;
  color: inherit; opacity: 0.6; padding: 0; width: 22px; height: 22px; border-radius: 50%;
  transition: opacity 120ms ease, background 120ms ease;
}
.mx-alt__x:hover { opacity: 1; background: rgb(var(--bg-hover)); }
.mx-alt--info { background: rgb(var(--bg-info-subtle)); color: rgb(var(--fg-info)); }
.mx-alt--info .mx-alt__icon { background: rgb(var(--bg-info)); }
.mx-alt--success { background: rgb(var(--bg-positive-subtle)); color: rgb(var(--fg-positive)); }
.mx-alt--success .mx-alt__icon { background: rgb(var(--bg-positive)); }
.mx-alt--warning { background: rgb(var(--bg-caution-subtle)); color: rgb(var(--fg-caution)); }
.mx-alt--warning .mx-alt__icon { background: rgb(var(--bg-caution)); color: rgb(var(--slate-12)); }
.mx-alt--danger { background: rgb(var(--bg-negative-subtle)); color: rgb(var(--fg-negative)); }
.mx-alt--danger .mx-alt__icon { background: rgb(var(--bg-negative)); }

/* ============================================================
   PROGRESS  .mx-pr
   ============================================================ */
.mx-pr { width: 100%; font-family: var(--font-primary); }
.mx-pr__track { width: 100%; background: rgb(var(--bg-tertiary)); border-radius: var(--radius-full); overflow: hidden; }
.mx-pr__bar { height: 100%; border-radius: var(--radius-full); transition: width 300ms ease; }
.mx-pr--sm .mx-pr__track { height: 4px; }
.mx-pr--md .mx-pr__track { height: 6px; }
.mx-pr--lg .mx-pr__track { height: 10px; }
.mx-pr--brand .mx-pr__bar { background: rgb(var(--bg-brand)); }
.mx-pr--positive .mx-pr__bar { background: rgb(var(--bg-positive)); }
.mx-pr--negative .mx-pr__bar { background: rgb(var(--bg-negative)); }
.mx-pr--caution .mx-pr__bar { background: rgb(var(--bg-caution)); }
.mx-pr--info .mx-pr__bar { background: rgb(var(--bg-info)); }
.mx-pr.is-indet .mx-pr__bar { width: 40%; animation: mx-pr-sweep 1.2s ease-in-out infinite; }
@keyframes mx-pr-sweep { 0% { margin-inline-start: -40%; } 100% { margin-inline-start: 100%; } }

/* ============================================================
   BUTTON — extra variants (outline, inverse, destructive)
   ============================================================ */
.mx-btn--outline { background: transparent; color: rgb(var(--fg-primary)); border-color: rgb(var(--border-primary)); }
.mx-btn--outline:hover:not(:disabled) { background: rgb(var(--bg-hover)); }
.mx-btn--outline:active:not(:disabled) { background: rgb(var(--bg-pressed)); }
.mx-btn--inverse { background: rgb(var(--bg-inverse)); color: rgb(var(--fg-inverse)); }
.mx-btn--inverse:hover:not(:disabled) { background: rgb(var(--bg-inverse-hover)); }
.mx-btn--destructive { background: rgb(var(--bg-negative)); color: rgb(var(--fg-on-negative)); }
.mx-btn--destructive:hover:not(:disabled) { filter: brightness(0.94); }

/* ============================================================
   CHIP  .mx-chip
   ============================================================ */
.mx-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px; border-radius: 6px;
  font: 600 12px/1 var(--font-primary); letter-spacing: 0.02px;
  border: 1px solid transparent; white-space: nowrap;
}
.mx-chip--sm { height: 22px; padding: 0 8px; font-size: 11px; border-radius: 4px; }
.mx-chip--lg { height: 32px; padding: 0 14px; font-size: 13px; border-radius: 8px; }
.mx-chip--neutral   { background: rgb(var(--bg-secondary));        color: rgb(var(--fg-primary));   border-color: rgb(var(--border-primary)); }
.mx-chip--brand     { background: rgb(var(--bg-brand-subtle));     color: rgb(var(--fg-brand)); }
.mx-chip--positive  { background: rgb(var(--bg-positive-subtle));  color: rgb(var(--fg-positive)); }
.mx-chip--negative  { background: rgb(var(--bg-negative-subtle));  color: rgb(var(--fg-negative)); }
.mx-chip--caution   { background: rgb(var(--bg-caution-subtle));   color: rgb(var(--fg-caution)); }
.mx-chip--info      { background: rgb(var(--bg-info-subtle));      color: rgb(var(--fg-info)); }
.mx-chip--discovery { background: rgb(var(--bg-discovery-subtle)); color: rgb(var(--fg-discovery)); }
.mx-chip--selectable { cursor: pointer; transition: background .12s ease, color .12s ease; }
.mx-chip.is-selected { background: rgb(var(--bg-brand)); color: rgb(var(--fg-on-brand)); border-color: transparent; }
.mx-chip__x { border: 0; background: transparent; color: inherit; cursor: pointer; padding: 0; display: inline-flex; align-items: center; opacity: 0.7; }
.mx-chip__x:hover { opacity: 1; }

/* ============================================================
   BADGE  .mx-badge (count pills)
   ============================================================ */
.mx-badge {
  display: inline-flex; align-items: center; justify-content: center;
  height: 20px; min-width: 20px; padding: 0 7px; border-radius: 9999px;
  font: 700 11px/1 var(--font-primary); color: rgb(var(--fg-on-negative));
}
.mx-badge--sm { height: 16px; min-width: 16px; padding: 0 5px; font-size: 10px; }
.mx-badge--lg { height: 24px; min-width: 24px; padding: 0 9px; font-size: 12px; }
.mx-badge--brand    { background: rgb(var(--bg-brand)); color: rgb(var(--fg-on-brand)); }
.mx-badge--negative { background: rgb(var(--bg-negative)); }
.mx-badge--positive { background: rgb(var(--bg-positive)); }
.mx-badge--caution  { background: rgb(var(--bg-caution)); color: rgb(var(--slate-12)); }
.mx-badge--info     { background: rgb(var(--bg-info)); }

/* ============================================================
   AVATAR  .mx-avatar  (size + bg color set inline — data-driven)
   ============================================================ */
.mx-avatar { position: relative; display: inline-flex; flex-shrink: 0; }
.mx-avatar__img {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
  color: rgb(var(--fg-on-brand)); font-family: var(--font-primary);
  font-weight: 600; letter-spacing: -0.02em;
}
.mx-avatar__img img { width: 100%; height: 100%; object-fit: cover; }
.mx-avatar__status { position: absolute; bottom: 0; right: 0; border-radius: 50%; border: 2px solid rgb(var(--bg-primary)); }

/* ============================================================
   CARD  .mx-card
   ============================================================ */
.mx-card { background: rgb(var(--bg-primary)); border: 1px solid rgb(var(--border-secondary)); border-radius: 12px; }
.mx-card--raised { box-shadow: var(--shadow-200); }
.mx-card--floating { box-shadow: var(--shadow-400); }
.mx-card__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); margin-bottom: var(--space-12); }
.mx-card__title { font-family: var(--font-secondary); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: rgb(var(--fg-tertiary)); }
.mx-card__actions { margin-left: auto; display: inline-flex; align-items: center; gap: var(--space-8); }

/* ============================================================
   TABS  .mx-tabs / .mx-tab
   ============================================================ */
.mx-tabs { display: flex; gap: 4px; border-bottom: 1px solid rgb(var(--border-secondary)); }
.mx-tab {
  border: 0; background: transparent; cursor: pointer; padding: 12px 14px;
  font: 500 14px/1 var(--font-primary); color: rgb(var(--fg-secondary));
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .12s ease, border-color .12s ease;
}
.mx-tab:hover { color: rgb(var(--fg-primary)); }
.mx-tab.is-active { color: rgb(var(--fg-primary)); font-weight: 600; border-bottom-color: rgb(var(--bg-brand)); }
.mx-tabs--pills { display: inline-flex; padding: 4px; background: rgb(var(--bg-secondary)); border-radius: 10px; gap: 2px; border: 0; }
.mx-tabs--pills .mx-tab { padding: 8px 14px; border-radius: 7px; border: 0; margin: 0; font-size: 13px; }
.mx-tabs--pills .mx-tab:hover { color: rgb(var(--fg-primary)); }
.mx-tabs--pills .mx-tab.is-active { background: rgb(var(--bg-primary)); box-shadow: var(--shadow-100); border: 0; }

/* ============================================================
   MODAL  .mx-modal
   ============================================================ */
.mx-modal-backdrop {
  position: absolute; inset: 0; z-index: 100;
  background: rgb(var(--bg-backdrop));
  display: flex; align-items: center; justify-content: center; padding: 16px;
  animation: mx-fade-in 120ms ease;
}
.mx-modal {
  background: rgb(var(--bg-elevated)); border-radius: 14px;
  box-shadow: var(--shadow-500); width: 100%; max-width: 520px;
  border: 1px solid rgb(var(--border-secondary));
  animation: mx-pop-in 140ms cubic-bezier(.2,.8,.2,1);
}
.mx-modal--sm { max-width: 400px; }
.mx-modal--lg { max-width: 720px; }
.mx-modal__head { padding: 18px 24px 12px; display: flex; align-items: center; justify-content: space-between; }
.mx-modal__title { font: 700 18px/1.3 var(--font-primary); margin: 0; letter-spacing: -0.01em; }
.mx-modal__x { border: 0; background: transparent; color: rgb(var(--fg-secondary)); cursor: pointer; padding: 4px; display: inline-flex; border-radius: 6px; }
.mx-modal__x:hover { background: rgb(var(--bg-hover)); }
.mx-modal__body { padding: 8px 24px 20px; font: 400 14px/22px var(--font-primary); color: rgb(var(--fg-secondary)); }
.mx-modal__foot { padding: 16px 24px; border-top: 1px solid rgb(var(--border-secondary)); display: flex; gap: 8px; justify-content: flex-end; }
@keyframes mx-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes mx-pop-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }

/* ============================================================
   TOOLTIP  .mx-tooltip (CSS hover)
   ============================================================ */
.mx-tooltip-wrap { position: relative; display: inline-flex; }
.mx-tooltip {
  position: absolute; bottom: 100%; left: 50%; transform: translate(-50%, -6px);
  background: rgb(var(--bg-inverse)); color: rgb(var(--fg-inverse));
  padding: 6px 10px; border-radius: 6px; font: 500 12px/1 var(--font-primary);
  white-space: nowrap; pointer-events: none; z-index: 20; box-shadow: var(--shadow-300);
  opacity: 0; transition: opacity .12s ease;
}
.mx-tooltip-wrap:hover .mx-tooltip { opacity: 1; }

/* ============================================================
   TABLE  .mx-table
   ============================================================ */
.mx-table-wrap { overflow: auto; border: 1px solid rgb(var(--border-secondary)); border-radius: 10px; background: rgb(var(--bg-primary)); }
.mx-table { width: 100%; border-collapse: collapse; font-family: var(--font-primary); font-size: 13px; }
.mx-table th {
  text-align: left; padding: 12px 16px;
  font: 700 11px/1 var(--font-primary); letter-spacing: 1.5px; text-transform: uppercase;
  color: rgb(var(--fg-tertiary)); background: rgb(var(--bg-secondary));
  border-bottom: 1px solid rgb(var(--border-secondary));
}
.mx-table th.is-right, .mx-table td.is-right { text-align: right; }
.mx-table td { padding: 14px 16px; color: rgb(var(--fg-primary)); vertical-align: middle; border-bottom: 1px solid rgb(var(--border-secondary)); }
.mx-table tbody tr:last-child td { border-bottom: 0; }
.mx-table--striped tbody tr:nth-child(even) td { background: rgb(var(--bg-secondary) / 0.45); }

/* ============================================================
   LINK  .mx-link
   ============================================================ */
.mx-link {
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; background: transparent; padding: 0; cursor: pointer;
  color: rgb(var(--fg-brand)); font-family: var(--font-primary); font-weight: 600;
  text-decoration: none;
}
.mx-link--md { font-size: 14px; line-height: 1.4; }
.mx-link--sm { font-size: 13px; line-height: 1.4; }
.mx-link--muted { color: rgb(var(--fg-tertiary)); }
.mx-link:hover:not(.is-disabled) { text-decoration: underline; }
.mx-link:focus-visible { outline: none; border-radius: 4px; box-shadow: 0 0 0 3px rgb(var(--ring-focus)); }
.mx-link.is-disabled { color: rgb(var(--fg-tertiary)); cursor: not-allowed; }
.mx-link__icon { display: inline-flex; align-items: center; }

/* ============================================================
   DIVIDER  .mx-divider
   ============================================================ */
.mx-divider { border: 0; height: 1px; width: 100%; background: rgb(var(--border-secondary)); margin: 0; }
.mx-divider--v { display: inline-block; width: 1px; height: 100%; min-height: 1em; }
.mx-divider--label { display: flex; align-items: center; gap: 12px; height: auto; background: none; }
.mx-divider--label .mx-divider__line { flex: 1; height: 1px; background: rgb(var(--border-secondary)); }
.mx-divider--label .mx-divider__lbl {
  font: 500 11px/1 var(--font-primary); letter-spacing: 0.08em; text-transform: uppercase;
  color: rgb(var(--fg-tertiary)); white-space: nowrap;
}

/* ============================================================
   CHECKLIST  .mx-checklist
   ============================================================ */
.mx-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mx-checklist__item {
  display: flex; align-items: center; gap: 8px;
  font: 500 13px/1.3 var(--font-primary); color: rgb(var(--fg-tertiary));
}
.mx-checklist__mark { width: 14px; display: inline-flex; justify-content: center; }
.mx-checklist__item.is-met { color: rgb(var(--fg-positive)); }

/* ============================================================
   PASSWORD STRENGTH  .mx-pwstr
   ============================================================ */
.mx-pwstr { display: flex; align-items: center; gap: 12px; }
.mx-pwstr .mx-pr { flex: 1; }
.mx-pwstr__lbl { font: 600 12px/1 var(--font-primary); flex-shrink: 0; min-width: 48px; }
.mx-pwstr__lbl--negative { color: rgb(var(--fg-negative)); }
.mx-pwstr__lbl--caution  { color: rgb(var(--fg-caution)); }
.mx-pwstr__lbl--positive { color: rgb(var(--fg-positive)); }

/* ============================================================
   AUTH LAYOUT  .mx-al
   ============================================================ */
.mx-al {
  display: grid; grid-template-columns: 1.05fr 1fr; height: 100%; min-height: 600px;
  background: rgb(var(--bg-primary)); color: rgb(var(--fg-primary)); font-family: var(--font-primary);
}
.mx-al__brand {
  position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 40px;
  background:
    radial-gradient(120% 80% at 0% 0%, rgb(var(--iris-9) / 0.22), transparent 60%),
    linear-gradient(160deg, rgb(var(--bg-secondary)), rgb(var(--bg-tertiary)));
  border-inline-end: 1px solid rgb(var(--border-secondary));
}
.mx-al__brandtop { display: flex; align-items: center; gap: 10px; position: relative; z-index: 2; }
.mx-al__logo { display: inline-flex; color: rgb(var(--iris-9)); }
.mx-al__wordmark { font: 700 18px/1 var(--font-primary); letter-spacing: -0.01em; }
.mx-al__badge {
  font: 600 10px/1 var(--font-secondary); letter-spacing: 0.1em; text-transform: uppercase;
  color: rgb(var(--fg-on-brand)); background: rgb(var(--iris-9)); padding: 4px 6px; border-radius: 5px;
}
.mx-al__brandmid { margin-top: auto; margin-bottom: auto; position: relative; z-index: 2; }
.mx-al__brandh {
  margin: 0 0 28px; max-width: 14ch;
  font: 400 40px/1.08 var(--font-display); letter-spacing: -0.01em; color: rgb(var(--fg-primary));
}
.mx-al__feat { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.mx-al__feat li { display: flex; align-items: center; gap: 12px; font: 500 14px/1.4 var(--font-primary); color: rgb(var(--fg-secondary)); }
.mx-al__check {
  width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgb(var(--bg-brand-subtle)); color: rgb(var(--fg-brand)); font: 700 11px/1 var(--font-secondary);
}
.mx-al__brandfoot {
  position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between;
  padding-top: 24px; border-top: 1px solid rgb(var(--border-secondary));
}
.mx-al__statline { display: inline-flex; align-items: center; gap: 8px; font: 500 12px/1 var(--font-primary); color: rgb(var(--fg-secondary)); }
.mx-al__dot { width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--green-9)); box-shadow: 0 0 0 3px rgb(var(--green-9) / 0.2); }
.mx-al__ver { font: 500 12px/1 var(--font-secondary); color: rgb(var(--fg-tertiary)); }
.mx-al__glow { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.5; pointer-events: none; z-index: 1; }
.mx-al__glow--1 { width: 320px; height: 320px; background: rgb(var(--iris-9) / 0.4); top: -80px; right: -60px; }
.mx-al__glow--2 { width: 260px; height: 260px; background: rgb(var(--indigo-9) / 0.3); bottom: -60px; left: 30px; }

.mx-al__main { display: flex; align-items: center; justify-content: center; padding: 40px; overflow-y: auto; }
.mx-al__form { width: 100%; max-width: 400px; }
.mx-al__eyebrow {
  margin: 0 0 10px; font: 600 12px/1 var(--font-secondary);
  letter-spacing: 0.14em; text-transform: uppercase; color: rgb(var(--fg-brand));
}
.mx-al__h { margin: 0 0 8px; font: 700 28px/1.1 var(--font-primary); letter-spacing: -0.02em; }
.mx-al__sub { margin: 0 0 28px; font: 400 15px/1.5 var(--font-primary); color: rgb(var(--fg-secondary)); }
.mx-al__body { display: flex; flex-direction: column; gap: 16px; }
/* Form controls fill the auth column regardless of their own max-width. */
.mx-al__body .mx-in,
.mx-al__body .mx-ta,
.mx-al__body .mx-sr { max-width: none; width: 100%; }
.mx-al__foot { margin-top: 28px; }

@media (max-width: 880px) {
  .mx-al { grid-template-columns: 1fr; }
  .mx-al__brand { display: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   CHART  .mx-chart — a token-driven SVG curve/area primitive
   ════════════════════════════════════════════════════════════════════════ */
.mx-chart { position: relative; padding-left: 44px; padding-bottom: 22px; }
.mx-chart__svg { width: 100%; height: 100%; display: block; overflow: visible; }
.mx-chart__grid { stroke: rgb(var(--border-secondary)); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mx-chart__marker { stroke: rgb(var(--fg-tertiary)); stroke-width: 1.5; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.mx-chart__marker--solid { stroke-dasharray: none; }
.mx-chart__line { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.mx-chart__yaxis {
  position: absolute; left: 0; top: 0; bottom: 22px; width: 40px;
  display: flex; flex-direction: column; justify-content: space-between;
  font-family: var(--font-secondary); font-size: 11px; color: rgb(var(--fg-tertiary)); text-align: right;
}
.mx-chart__xaxis {
  position: absolute; left: 44px; right: 0; bottom: 0;
  display: flex; justify-content: space-between;
  font-family: var(--font-secondary); font-size: 11px; color: rgb(var(--fg-tertiary));
}

/* ════════════════════════════════════════════════════════════════════════
   STAT  .mx-stat — a KPI / metric tile
   ════════════════════════════════════════════════════════════════════════ */
.mx-stat {
  display: flex; flex-direction: column; gap: var(--space-6);
  padding: var(--space-16); border: 1px solid rgb(var(--border-primary));
  border-radius: var(--radius-12); background: rgb(var(--bg-elevated));
}
.mx-stat--center { align-items: center; text-align: center; }
.mx-stat__head { display: flex; align-items: center; gap: var(--space-6); }
.mx-stat__icon { color: rgb(var(--fg-brand)); display: inline-flex; }
.mx-stat__label {
  font-family: var(--font-primary); font-size: 12px; letter-spacing: 0.02em;
  text-transform: uppercase; color: rgb(var(--fg-tertiary));
}
.mx-stat__value {
  font-family: var(--font-secondary); font-size: 26px; font-weight: 600; line-height: 1.15;
  color: rgb(var(--fg-primary)); font-variant-numeric: tabular-nums;
}
.mx-stat__foot { display: flex; align-items: center; gap: var(--space-8); flex-wrap: wrap; }
.mx-stat__hint { font-family: var(--font-primary); font-size: 12px; color: rgb(var(--fg-secondary)); }
.mx-stat__delta {
  font-family: var(--font-secondary); font-size: 12px; font-weight: 600;
  padding: 2px var(--space-6); border-radius: var(--radius-6);
}
.mx-stat__delta--neutral  { background: rgb(var(--bg-secondary));        color: rgb(var(--fg-primary)); }
.mx-stat__delta--positive { background: rgb(var(--bg-positive-subtle));  color: rgb(var(--fg-positive)); }
.mx-stat__delta--negative { background: rgb(var(--bg-negative-subtle));  color: rgb(var(--fg-negative)); }
.mx-stat__delta--caution  { background: rgb(var(--bg-caution-subtle));   color: rgb(var(--fg-caution)); }
.mx-stat__delta--brand    { background: rgb(var(--bg-brand-subtle));     color: rgb(var(--fg-brand)); }
.mx-stat__delta--info     { background: rgb(var(--bg-info-subtle));      color: rgb(var(--fg-info)); }

/* --- additions.css --- */
/* ============================================================
   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: none; }
.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)); }

/* --- layout.css --- */
/* mx.8.3 — Layout composition tier (Wave A). STRUCTURAL rules only; every spacing,
   colour, radius, and alignment VALUE is an inline token var set by the component
   props (the AspectRatio non-color-inline idiom). No new token, no hex. */

.mx-stack {
  display: flex;
  flex-direction: column;
}

.mx-flex {
  display: flex;
}

.mx-grid {
  display: grid;
}

.mx-container {
  width: 100%;
}

.mx-spacer {
  flex: 1 1 0%;
}

/* .mx-box — a styled block; padding/surface/radius/border/shadow are inline props.
   No base structural rule (a Box with no props is a plain div). */

/* mx.8.4 — Layout composition tier (Wave B, the 5 composites). Structural only;
   placement/spacing VALUES are inline token vars set by props. */

/* .mx-grid-item — placement (span/start) is inline; no base rule (like .mx-box). */

.mx-center {
  display: grid;
  place-items: center;
}

.mx-sidebar {
  display: flex;
}
.mx-sidebar-main {
  flex: 1 1 0%;
  min-width: 0;
}

.mx-cluster {
  display: flex;
  flex-wrap: wrap;
}

.mx-section {
  display: flex;
  flex-direction: column;
}