@rookcom/monarch-react 0.0.0-canary-20261103180711

package/dist/styles.css

@@ -0,0 +1,2437 @@
+/*! Monarch components. Generated by @rookcom/monarch-react. Do not edit. */
+@layer monarch.tokens, monarch.base, monarch.components;
+
+@layer monarch.components {
+  /* styles/foundation.css */
+  /* Shared component foundations. */
+  .mn-visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  .mn-button,
+  .mn-input,
+  .mn-checkbox,
+  .mn-switch,
+  .mn-tabs__trigger,
+  .mn-dialog__close {
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  .mn-button:focus-visible,
+  .mn-input:focus-visible,
+  .mn-checkbox:focus-visible,
+  .mn-switch:focus-visible,
+  .mn-tabs__trigger:focus-visible,
+  .mn-dialog__close:focus-visible {
+    outline: var(--mn-focus-ring-width) solid var(--mn-color-focus-ring);
+    outline-offset: 2px;
+  }
+
+  @keyframes mn-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes mn-fade-in {
+    from {
+      opacity: 0;
+    }
+  }
+  @keyframes mn-pop-in {
+    from {
+      opacity: 0;
+      transform: translateY(-2px) scale(0.98);
+    }
+  }
+  @keyframes mn-dialog-in {
+    from {
+      opacity: 0;
+      transform: translate(-50%, calc(-50% + 6px)) scale(0.98);
+    }
+  }
+  @keyframes mn-shimmer {
+    0% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.55;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+
+  /* components/actions/button/button.css */
+  .mn-button {
+    --_bg: var(--mn-color-bg-surface);
+    --_bg-hover: var(--mn-color-bg-muted);
+    --_bg-active: var(--mn-color-bg-emphasis);
+    --_fg: var(--mn-color-text-default);
+    --_border: var(--mn-color-border-default);
+    --_h: var(--mn-control-md);
+    --_px: var(--mn-space-3);
+    --_fs: var(--mn-text-sm);
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--mn-space-1-5);
+    height: var(--_h);
+    padding-inline: var(--_px);
+    border: 1px solid var(--_border);
+    border-radius: var(--mn-radius-md);
+    background: var(--_bg);
+    color: var(--_fg);
+    font: inherit;
+    font-family: var(--mn-font-sans);
+    font-size: var(--_fs);
+    font-weight: var(--mn-weight-medium);
+    line-height: 1;
+    white-space: nowrap;
+    text-decoration: none;
+    cursor: pointer;
+    user-select: none;
+    touch-action: manipulation;
+    transition:
+      background-color var(--mn-duration-fast) var(--mn-ease-standard),
+      border-color var(--mn-duration-fast) var(--mn-ease-standard),
+      color var(--mn-duration-fast) var(--mn-ease-standard),
+      box-shadow var(--mn-duration-fast) var(--mn-ease-standard);
+  }
+  .mn-button:hover {
+    background: var(--_bg-hover);
+  }
+  .mn-button:active {
+    background: var(--_bg-active);
+  }
+
+  .mn-button[data-variant='primary'] {
+    --_bg: var(--mn-color-accent-solid);
+    --_bg-hover: var(--mn-color-accent-solid-hover);
+    --_bg-active: var(--mn-color-accent-solid-active);
+    --_fg: var(--mn-color-accent-on-solid);
+    --_border: transparent;
+    box-shadow: var(--mn-shadow-xs);
+  }
+  .mn-button[data-variant='secondary'] {
+    box-shadow: var(--mn-shadow-xs);
+  }
+  .mn-button[data-variant='ghost'] {
+    --_bg: transparent;
+    --_border: transparent;
+  }
+  .mn-button[data-variant='danger'] {
+    --_bg: var(--mn-color-danger-solid);
+    --_bg-hover: var(--mn-color-danger-solid-hover);
+    --_bg-active: var(--mn-color-danger-solid-active);
+    --_fg: var(--mn-color-danger-on-solid);
+    --_border: transparent;
+    box-shadow: var(--mn-shadow-xs);
+  }
+  .mn-button[data-variant='danger-subtle'] {
+    --_bg: var(--mn-color-danger-subtle);
+    --_bg-hover: var(--mn-color-danger-subtle-hover);
+    --_bg-active: var(--mn-color-danger-subtle-hover);
+    --_fg: var(--mn-color-danger-strong);
+    --_border: var(--mn-color-danger-border);
+  }
+
+  .mn-button[data-size='xs'] {
+    --_h: var(--mn-control-xs);
+    --_px: var(--mn-space-2);
+    --_fs: var(--mn-text-xs);
+    border-radius: var(--mn-radius-sm);
+  }
+  .mn-button[data-size='sm'] {
+    --_h: var(--mn-control-sm);
+    --_px: var(--mn-space-2-5);
+    --_fs: var(--mn-text-xs);
+  }
+  .mn-button[data-size='lg'] {
+    --_h: var(--mn-control-lg);
+    --_px: var(--mn-space-4);
+  }
+  .mn-button[data-block] {
+    display: flex;
+    width: 100%;
+  }
+
+  .mn-button[aria-disabled='true'] {
+    cursor: not-allowed;
+  }
+  .mn-button:disabled,
+  .mn-button[aria-disabled='true']:not([data-loading]) {
+    opacity: 0.5;
+  }
+  .mn-button[data-loading] {
+    cursor: progress;
+  }
+  .mn-button:disabled:hover,
+  .mn-button[aria-disabled='true']:hover {
+    background: var(--_bg);
+  }
+
+  .mn-button__icon {
+    display: inline-flex;
+    flex-shrink: 0;
+    margin-inline: calc(var(--mn-space-0-5) * -1);
+  }
+  .mn-button__icon > svg {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  .mn-icon-button {
+    width: var(--_h);
+    padding: 0;
+  }
+  .mn-icon-button .mn-button__icon {
+    margin: 0;
+  }
+
+  /* components/feedback/spinner/spinner.css */
+  .mn-spinner {
+    --_size: 1rem;
+    display: inline-block;
+    width: var(--_size);
+    height: var(--_size);
+    flex-shrink: 0;
+    border: 2px solid currentColor;
+    border-right-color: transparent;
+    border-radius: var(--mn-radius-full);
+    animation: mn-spin 0.7s linear infinite;
+  }
+  .mn-spinner[data-size='sm'] {
+    --_size: 0.875rem;
+  }
+  .mn-spinner[data-size='lg'] {
+    --_size: 1.5rem;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .mn-spinner {
+      animation-duration: 1.6s;
+    }
+  }
+
+  /* components/typography/kbd/kbd.css */
+  .mn-kbd {
+    display: inline-flex;
+    align-items: center;
+    min-width: 1.25rem;
+    height: 1.25rem;
+    padding-inline: var(--mn-space-1);
+    border: 1px solid var(--mn-color-border-default);
+    border-bottom-width: 2px;
+    border-radius: var(--mn-radius-xs);
+    background: var(--mn-color-bg-subtle);
+    color: var(--mn-color-text-muted);
+    font-family: var(--mn-font-mono);
+    font-size: var(--mn-text-2xs);
+    line-height: 1;
+  }
+
+  /* components/forms/form-field/form-field.css */
+  .mn-field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mn-space-1-5);
+  }
+  .mn-field__label {
+    display: inline-flex;
+    align-items: baseline;
+    gap: var(--mn-space-1);
+    color: var(--mn-color-text-default);
+    font-size: var(--mn-text-sm);
+    font-weight: var(--mn-weight-medium);
+    line-height: var(--mn-leading-snug);
+  }
+  .mn-field__required {
+    color: var(--mn-color-danger-strong);
+  }
+  .mn-field__optional {
+    color: var(--mn-color-text-subtle);
+    font-weight: var(--mn-weight-regular);
+  }
+  .mn-field__description {
+    margin: 0;
+    color: var(--mn-color-text-muted);
+    font-size: var(--mn-text-xs);
+    line-height: var(--mn-leading-normal);
+  }
+  .mn-field__error {
+    margin: 0;
+    color: var(--mn-color-danger-strong);
+    font-size: var(--mn-text-xs);
+    font-weight: var(--mn-weight-medium);
+    line-height: var(--mn-leading-normal);
+  }
+  .mn-field[data-disabled] .mn-field__label {
+    color: var(--mn-color-text-disabled);
+  }
+
+  /* components/forms/text-field/text-field.css */
+  .mn-input {
+    --_h: var(--mn-control-md);
+    display: flex;
+    align-items: center;
+    width: 100%;
+    min-width: 0;
+    height: var(--_h);
+    padding-inline: var(--mn-space-3);
+    border: 1px solid var(--mn-color-border-input);
+    border-radius: var(--mn-radius-md);
+    background: var(--mn-color-bg-surface);
+    color: var(--mn-color-text-default);
+    font: inherit;
+    font-family: var(--mn-font-sans);
+    font-size: var(--mn-text-sm);
+    line-height: var(--mn-leading-normal);
+    transition:
+      border-color var(--mn-duration-fast) var(--mn-ease-standard),
+      box-shadow var(--mn-duration-fast) var(--mn-ease-standard);
+  }
+  .mn-input::placeholder {
+    color: var(--mn-color-text-subtle);
+  }
+  .mn-input:hover:not(:disabled):not([data-disabled]) {
+    border-color: var(--mn-color-text-subtle);
+  }
+  .mn-input:focus-visible {
+    outline-offset: 0;
+    border-color: var(--mn-color-focus-ring);
+  }
+  .mn-input[aria-invalid='true'] {
+    border-color: var(--mn-color-danger-strong);
+  }
+  .mn-input:disabled,
+  .mn-input[data-disabled] {
+    background: var(--mn-color-bg-subtle);
+    color: var(--mn-color-text-disabled);
+    cursor: not-allowed;
+  }
+  .mn-input[data-size='sm'] {
+    --_h: var(--mn-control-sm);
+    padding-inline: var(--mn-space-2-5);
+    font-size: var(--mn-text-xs);
+  }
+  .mn-input[data-size='lg'] {
+    --_h: var(--mn-control-lg);
+  }
+
+  .mn-textarea {
+    height: auto;
+    min-height: calc(var(--mn-control-md) * 2);
+    padding-block: var(--mn-space-2);
+    resize: none;
+  }
+  .mn-textarea[data-resizable] {
+    resize: vertical;
+  }
+
+  /* components/forms/select/select.css */
+  .mn-select {
+    justify-content: space-between;
+    gap: var(--mn-space-2);
+    cursor: pointer;
+    text-align: start;
+  }
+  .mn-select > span:first-child {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .mn-select[data-placeholder] > span:first-child {
+    color: var(--mn-color-text-subtle);
+  }
+  .mn-select__icon {
+    display: inline-flex;
+    color: var(--mn-color-text-muted);
+  }
+  .mn-select__content {
+    min-width: var(--radix-select-trigger-width);
+    max-height: min(var(--radix-select-content-available-height), 20rem);
+  }
+  .mn-select__viewport {
+    padding: var(--mn-space-1);
+  }
+
+  /* components/forms/checkbox/checkbox.css */
+  /* Checkbox (the shared .mn-choice label wrapper is in styles/choice.css). */
+  .mn-checkbox {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 1rem;
+    height: 1rem;
+    padding: 0;
+    border: 1px solid var(--mn-color-border-input);
+    border-radius: var(--mn-radius-xs);
+    background: var(--mn-color-bg-surface);
+    color: var(--mn-color-accent-on-strong);
+    cursor: pointer;
+    transition:
+      background-color var(--mn-duration-fast) var(--mn-ease-standard),
+      border-color var(--mn-duration-fast) var(--mn-ease-standard);
+  }
+  .mn-checkbox[data-state='checked'],
+  .mn-checkbox[data-state='indeterminate'] {
+    border-color: var(--mn-color-accent-strong);
+    background: var(--mn-color-accent-strong);
+  }
+  .mn-checkbox[aria-invalid='true'] {
+    border-color: var(--mn-color-danger-strong);
+  }
+  .mn-checkbox:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  .mn-checkbox__indicator {
+    display: inline-flex;
+  }
+  .mn-checkbox__indicator > svg {
+    width: 0.75rem;
+    height: 0.75rem;
+    stroke-width: 2.25;
+  }
+
+  /* components/forms/switch/switch.css */
+  .mn-switch {
+    --_w: 2.25rem;
+    --_h: 1.25rem;
+    --_thumb: calc(var(--_h) - 4px);
+    position: relative;
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    width: var(--_w);
+    height: var(--_h);
+    padding: 0;
+    border: 1px solid var(--mn-color-border-input);
+    border-radius: var(--mn-radius-full);
+    background: var(--mn-color-bg-emphasis);
+    cursor: pointer;
+    transition: background-color var(--mn-duration-base) var(--mn-ease-standard);
+  }
+  .mn-switch[data-size='sm'] {
+    --_w: 1.75rem;
+    --_h: 1rem;
+  }
+  .mn-switch[data-state='checked'] {
+    border-color: var(--mn-color-accent-strong);
+    background: var(--mn-color-accent-strong);
+  }
+  .mn-switch:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  .mn-switch__thumb {
+    display: block;
+    width: var(--_thumb);
+    height: var(--_thumb);
+    border-radius: var(--mn-radius-full);
+    background: var(--mn-color-bg-surface);
+    box-shadow: var(--mn-shadow-sm);
+    transform: translateX(1px);
+    transition: transform var(--mn-duration-base) var(--mn-ease-emphasized);
+  }
+  .mn-switch[data-state='checked'] .mn-switch__thumb {
+    transform: translateX(calc(var(--_w) - var(--_thumb) - 5px));
+  }
+
+  /* styles/choice.css */
+  .mn-choice {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--mn-space-2-5);
+  }
+  .mn-choice > .mn-checkbox {
+    margin-top: 0.125rem;
+  }
+  .mn-choice--switch {
+    justify-content: space-between;
+    gap: var(--mn-space-4);
+  }
+  .mn-choice__text {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mn-space-0-5);
+    min-width: 0;
+  }
+  .mn-choice__label {
+    color: var(--mn-color-text-default);
+    font-size: var(--mn-text-sm);
+    font-weight: var(--mn-weight-medium);
+    line-height: var(--mn-leading-snug);
+    cursor: pointer;
+  }
+  .mn-choice__description {
+    margin: 0;
+    color: var(--mn-color-text-muted);
+    font-size: var(--mn-text-xs);
+    line-height: var(--mn-leading-normal);
+  }
+  .mn-choice[data-disabled] .mn-choice__label {
+    color: var(--mn-color-text-disabled);
+    cursor: not-allowed;
+  }
+
+  /* components/data-display/badge/badge.css */
+  .mn-badge {
+    --_bg: var(--mn-color-bg-muted);
+    --_fg: var(--mn-color-text-muted);
+    --_border: transparent;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--mn-space-1);
+    height: 1.375rem;
+    padding-inline: var(--mn-space-2);
+    border: 1px solid var(--_border);
+    border-radius: var(--mn-radius-full);
+    background: var(--_bg);
+    color: var(--_fg);
+    font-size: var(--mn-text-xs);
+    font-weight: var(--mn-weight-medium);
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .mn-badge[data-size='sm'] {
+    height: 1.125rem;
+    padding-inline: var(--mn-space-1-5);
+    font-size: var(--mn-text-2xs);
+  }
+  .mn-badge__dot {
+    width: 0.375rem;
+    height: 0.375rem;
+    border-radius: var(--mn-radius-full);
+    background: currentColor;
+  }
+  .mn-badge[data-variant='outline'] {
+    --_bg: transparent;
+    --_border: var(--mn-color-border-default);
+  }
+  .mn-badge[data-variant='outline'][data-tone='neutral'] {
+    --_fg: var(--mn-color-text-muted);
+  }
+  .mn-badge[data-variant='solid'][data-tone='neutral'] {
+    --_bg: var(--mn-color-bg-inverse);
+    --_fg: var(--mn-color-text-inverse);
+  }
+  .mn-badge[data-tone='accent'] {
+    --_bg: var(--mn-color-accent-subtle);
+    --_fg: var(--mn-color-accent-strong);
+  }
+  .mn-badge[data-tone='accent'][data-variant='solid'] {
+    --_bg: var(--mn-color-accent-solid);
+    --_fg: var(--mn-color-accent-on-solid);
+  }
+  .mn-badge[data-tone='accent'][data-variant='outline'] {
+    --_bg: transparent;
+    --_border: var(--mn-color-accent-border);
+  }
+  .mn-badge[data-tone='info'] {
+    --_bg: var(--mn-color-info-subtle);
+    --_fg: var(--mn-color-info-strong);
+  }
+  .mn-badge[data-tone='info'][data-variant='solid'] {
+    --_bg: var(--mn-color-info-solid);
+    --_fg: var(--mn-color-info-on-solid);
+  }
+  .mn-badge[data-tone='info'][data-variant='outline'] {
+    --_bg: transparent;
+    --_border: var(--mn-color-info-border);
+  }
+  .mn-badge[data-tone='success'] {
+    --_bg: var(--mn-color-success-subtle);
+    --_fg: var(--mn-color-success-strong);
+  }
+  .mn-badge[data-tone='success'][data-variant='solid'] {
+    --_bg: var(--mn-color-success-solid);
+    --_fg: var(--mn-color-success-on-solid);
+  }
+  .mn-badge[data-tone='success'][data-variant='outline'] {
+    --_bg: transparent;
+    --_border: var(--mn-color-success-border);
+  }
+  .mn-badge[data-tone='warning'] {
+    --_bg: var(--mn-color-warning-subtle);
+    --_fg: var(--mn-color-warning-strong);
+  }
+  .mn-badge[data-tone='warning'][data-variant='solid'] {
+    --_bg: var(--mn-color-warning-solid);
+    --_fg: var(--mn-color-warning-on-solid);
+  }
+  .mn-badge[data-tone='warning'][data-variant='outline'] {
+    --_bg: transparent;
+    --_border: var(--mn-color-warning-border);
+  }
+  .mn-badge[data-tone='danger'] {
+    --_bg: var(--mn-color-danger-subtle);
+    --_fg: var(--mn-color-danger-strong);
+  }
+  .mn-badge[data-tone='danger'][data-variant='solid'] {
+    --_bg: var(--mn-color-danger-solid);
+    --_fg: var(--mn-color-danger-on-solid);
+  }
+  .mn-badge[data-tone='danger'][data-variant='outline'] {
+    --_bg: transparent;
+    --_border: var(--mn-color-danger-border);
+  }
+
+  /* components/identity/avatar/avatar.css */
+  .mn-avatar {
+    --_size: 2rem;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: var(--_size);
+    height: var(--_size);
+    overflow: hidden;
+    border-radius: var(--mn-radius-full);
+    /* Fallback colours derive from a per-name hue, kept soft so initials stay readable. */
+    background: hsl(var(--mn-avatar-hue, 220) 45% 92%);
+    color: hsl(var(--mn-avatar-hue, 220) 55% 28%);
+    font-size: calc(var(--_size) * 0.4);
+    font-weight: var(--mn-weight-semibold);
+    user-select: none;
+  }
+  :is(.dark, [data-mn-theme='dark']) .mn-avatar {
+    background: hsl(var(--mn-avatar-hue, 220) 30% 22%);
+    color: hsl(var(--mn-avatar-hue, 220) 60% 85%);
+  }
+  .mn-avatar[data-shape='square'] {
+    border-radius: var(--mn-radius-md);
+  }
+  .mn-avatar[data-size='xs'] {
+    --_size: 1.25rem;
+  }
+  .mn-avatar[data-size='sm'] {
+    --_size: 1.5rem;
+  }
+  .mn-avatar[data-size='lg'] {
+    --_size: 2.5rem;
+  }
+  .mn-avatar[data-size='xl'] {
+    --_size: 3.5rem;
+  }
+  .mn-avatar__image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  /* components/data-display/card/card.css */
+  .mn-card {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid var(--mn-color-border-default);
+    border-radius: var(--mn-radius-lg);
+    background: var(--mn-color-bg-surface);
+    color: var(--mn-color-text-default);
+  }
+  .mn-card[data-variant='raised'] {
+    border-color: var(--mn-color-border-subtle);
+    background: var(--mn-color-bg-raised);
+    box-shadow: var(--mn-shadow-md);
+  }
+  .mn-card[data-variant='subtle'] {
+    border-color: transparent;
+    background: var(--mn-color-bg-subtle);
+  }
+  .mn-card__header {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mn-space-1);
+    padding: var(--mn-space-5) var(--mn-space-5) 0;
+  }
+  .mn-card__title {
+    margin: 0;
+    font-size: var(--mn-text-base);
+    font-weight: var(--mn-weight-semibold);
+    letter-spacing: var(--mn-tracking-snug);
+    line-height: var(--mn-leading-snug);
+  }
+  .mn-card__description {
+    margin: 0;
+    color: var(--mn-color-text-muted);
+    font-size: var(--mn-text-sm);
+    line-height: var(--mn-leading-normal);
+  }
+  .mn-card__content {
+    padding: var(--mn-space-5);
+  }
+  .mn-card__footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--mn-space-2);
+    padding: var(--mn-space-3) var(--mn-space-5);
+    border-top: 1px solid var(--mn-color-border-subtle);
+  }
+  .mn-card[data-flush] > .mn-card__content {
+    padding: 0;
+  }
+
+  /* components/feedback/skeleton/skeleton.css */
+  .mn-skeleton {
+    display: block;
+    border-radius: var(--mn-radius-md);
+    background: var(--mn-color-bg-muted);
+    animation: mn-shimmer 1.6s var(--mn-ease-standard) infinite;
+  }
+  .mn-skeleton[data-shape='text'] {
+    height: 0.75em;
+    border-radius: var(--mn-radius-xs);
+  }
+  .mn-skeleton[data-shape='circle'] {
+    border-radius: var(--mn-radius-full);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .mn-skeleton {
+      animation: none;
+    }
+  }
+
+  /* components/feedback/empty-state/empty-state.css */
+  .mn-empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--mn-space-2);
+    max-width: 28rem;
+    margin-inline: auto;
+    padding: var(--mn-space-8) var(--mn-space-4);
+    text-align: center;
+  }
+  .mn-empty-state[data-size='page'] {
+    padding-block: var(--mn-space-20);
+  }
+  .mn-empty-state__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.5rem;
+    height: 2.5rem;
+    margin-bottom: var(--mn-space-2);
+    border-radius: var(--mn-radius-lg);
+    background: var(--mn-color-accent-subtle);
+    color: var(--mn-color-accent-strong);
+  }
+  .mn-empty-state__icon > svg {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+  .mn-empty-state__title {
+    margin: 0;
+    font-size: var(--mn-text-base);
+    font-weight: var(--mn-weight-semibold);
+    letter-spacing: var(--mn-tracking-snug);
+  }
+  .mn-empty-state__description {
+    margin: 0;
+    color: var(--mn-color-text-muted);
+    font-size: var(--mn-text-sm);
+    line-height: var(--mn-leading-relaxed);
+  }
+  .mn-empty-state__actions {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: var(--mn-space-2);
+    margin-top: var(--mn-space-3);
+  }
+
+  /* components/feedback/alert/alert.css */
+  .mn-alert {
+    --_bg: var(--mn-color-bg-subtle);
+    --_fg: var(--mn-color-text-muted);
+    --_border: var(--mn-color-border-default);
+    display: flex;
+    align-items: flex-start;
+    gap: var(--mn-space-3);
+    padding: var(--mn-space-3) var(--mn-space-4);
+    border: 1px solid var(--_border);
+    border-radius: var(--mn-radius-lg);
+    background: var(--_bg);
+    color: var(--mn-color-text-default);
+    font-size: var(--mn-text-sm);
+    line-height: var(--mn-leading-normal);
+  }
+  .mn-alert__icon {
+    display: inline-flex;
+    margin-top: 0.125rem;
+    color: var(--_fg);
+  }
+  .mn-alert__body {
+    flex: 1;
+    min-width: 0;
+  }
+  .mn-alert__title {
+    margin: 0;
+    font-weight: var(--mn-weight-semibold);
+  }
+  .mn-alert__content {
+    color: var(--mn-color-text-muted);
+  }
+  .mn-alert__title + .mn-alert__content {
+    margin-top: var(--mn-space-0-5);
+  }
+  .mn-alert__actions {
+    display: flex;
+    gap: var(--mn-space-2);
+    align-self: center;
+  }
+  .mn-alert[data-tone='info'] {
+    --_bg: var(--mn-color-info-subtle);
+    --_fg: var(--mn-color-info-strong);
+    --_border: var(--mn-color-info-border);
+  }
+  .mn-alert[data-tone='success'] {
+    --_bg: var(--mn-color-success-subtle);
+    --_fg: var(--mn-color-success-strong);
+    --_border: var(--mn-color-success-border);
+  }
+  .mn-alert[data-tone='warning'] {
+    --_bg: var(--mn-color-warning-subtle);
+    --_fg: var(--mn-color-warning-strong);
+    --_border: var(--mn-color-warning-border);
+  }
+  .mn-alert[data-tone='danger'] {
+    --_bg: var(--mn-color-danger-subtle);
+    --_fg: var(--mn-color-danger-strong);
+    --_border: var(--mn-color-danger-border);
+  }
+
+  /* components/overlays/dialog/dialog.css */
+  .mn-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: var(--mn-z-overlay);
+    background: var(--mn-color-overlay-scrim);
+    animation: mn-fade-in var(--mn-duration-base) var(--mn-ease-enter);
+  }
+
+  .mn-dialog {
+    --_w: 32rem;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    z-index: var(--mn-z-modal);
+    display: flex;
+    flex-direction: column;
+    width: min(var(--_w), calc(100vw - 2rem));
+    max-height: calc(100dvh - 2rem);
+    overflow: hidden;
+    border: 1px solid var(--mn-color-border-subtle);
+    border-radius: var(--mn-radius-xl);
+    background: var(--mn-color-bg-raised);
+    color: var(--mn-color-text-default);
+    box-shadow: var(--mn-shadow-xl);
+    transform: translate(-50%, -50%);
+    animation: mn-dialog-in var(--mn-duration-slow) var(--mn-ease-enter);
+  }
+  .mn-dialog:focus-visible {
+    outline: none;
+  }
+  .mn-dialog[data-size='sm'] {
+    --_w: 24rem;
+  }
+  .mn-dialog[data-size='lg'] {
+    --_w: 44rem;
+  }
+  .mn-dialog[data-size='xl'] {
+    --_w: 60rem;
+  }
+  .mn-dialog__header {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mn-space-1);
+    padding: var(--mn-space-5) var(--mn-space-12) 0 var(--mn-space-5);
+  }
+  .mn-dialog__title {
+    margin: 0;
+    font-size: var(--mn-text-lg);
+    font-weight: var(--mn-weight-semibold);
+    letter-spacing: var(--mn-tracking-snug);
+    line-height: var(--mn-leading-snug);
+  }
+  .mn-dialog__description {
+    margin: 0;
+    color: var(--mn-color-text-muted);
+    font-size: var(--mn-text-sm);
+    line-height: var(--mn-leading-normal);
+  }
+  .mn-dialog__body {
+    flex: 1;
+    overflow-y: auto;
+    padding: var(--mn-space-5);
+  }
+  .mn-dialog__footer {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    gap: var(--mn-space-2);
+    padding: var(--mn-space-3) var(--mn-space-5);
+    border-top: 1px solid var(--mn-color-border-subtle);
+    background: var(--mn-color-bg-subtle);
+  }
+  .mn-dialog__close {
+    position: absolute;
+    top: var(--mn-space-3);
+    right: var(--mn-space-3);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--mn-control-sm);
+    height: var(--mn-control-sm);
+    padding: 0;
+    border: 0;
+    border-radius: var(--mn-radius-md);
+    background: transparent;
+    color: var(--mn-color-text-muted);
+    cursor: pointer;
+  }
+  .mn-dialog__close:hover {
+    background: var(--mn-color-bg-muted);
+    color: var(--mn-color-text-default);
+  }
+
+  /* styles/menu.css */
+  /* Menus: shared by DropdownMenu and Select. */
+  .mn-menu {
+    z-index: var(--mn-z-dropdown);
+    min-width: 12rem;
+    max-width: min(22rem, calc(100vw - 2rem));
+    padding: var(--mn-space-1);
+    overflow: hidden;
+    border: 1px solid var(--mn-color-border-subtle);
+    border-radius: var(--mn-radius-lg);
+    background: var(--mn-color-bg-raised);
+    color: var(--mn-color-text-default);
+    box-shadow: var(--mn-shadow-lg);
+    animation: mn-pop-in var(--mn-duration-fast) var(--mn-ease-enter);
+  }
+  .mn-menu__item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: var(--mn-space-2);
+    min-height: var(--mn-control-sm);
+    padding: var(--mn-space-1-5) var(--mn-space-2);
+    border-radius: var(--mn-radius-sm);
+    font-size: var(--mn-text-sm);
+    line-height: var(--mn-leading-snug);
+    cursor: default;
+    outline: none;
+    user-select: none;
+  }
+  .mn-menu__item[data-highlighted] {
+    background: var(--mn-color-bg-muted);
+  }
+  .mn-menu__item[data-disabled] {
+    color: var(--mn-color-text-disabled);
+    pointer-events: none;
+  }
+  .mn-menu__item[data-tone='danger'] {
+    color: var(--mn-color-danger-strong);
+  }
+  .mn-menu__item[data-tone='danger'][data-highlighted] {
+    background: var(--mn-color-danger-subtle);
+  }
+  .mn-menu__icon {
+    display: inline-flex;
+    color: var(--mn-color-text-muted);
+  }
+  .mn-menu__icon > svg {
+    width: 1rem;
+    height: 1rem;
+  }
+  .mn-menu__text {
+    flex: 1;
+    min-width: 0;
+  }
+  .mn-menu__shortcut {
+    color: var(--mn-color-text-subtle);
+    font-size: var(--mn-text-xs);
+    letter-spacing: var(--mn-tracking-wide);
+  }
+  .mn-menu__indicator {
+    display: inline-flex;
+    margin-inline-start: auto;
+    color: var(--mn-color-accent-strong);
+  }
+  .mn-menu__label {
+    padding: var(--mn-space-1-5) var(--mn-space-2) var(--mn-space-1);
+    color: var(--mn-color-text-subtle);
+    font-size: var(--mn-text-xs);
+    font-weight: var(--mn-weight-medium);
+  }
+  .mn-menu__separator {
+    height: 1px;
+    margin: var(--mn-space-1) calc(var(--mn-space-1) * -1);
+    background: var(--mn-color-border-subtle);
+  }
+
+  /* components/overlays/popover/popover.css */
+  .mn-popover {
+    z-index: var(--mn-z-popover);
+    width: max-content;
+    max-width: min(24rem, calc(100vw - 2rem));
+    padding: var(--mn-space-4);
+    border: 1px solid var(--mn-color-border-subtle);
+    border-radius: var(--mn-radius-lg);
+    background: var(--mn-color-bg-raised);
+    color: var(--mn-color-text-default);
+    box-shadow: var(--mn-shadow-lg);
+    animation: mn-pop-in var(--mn-duration-fast) var(--mn-ease-enter);
+  }
+  .mn-popover:focus-visible {
+    outline: var(--mn-focus-ring-width) solid var(--mn-color-focus-ring);
+  }
+
+  /* components/overlays/tooltip/tooltip.css */
+  .mn-tooltip {
+    z-index: var(--mn-z-tooltip);
+    max-width: 18rem;
+    padding: var(--mn-space-1) var(--mn-space-2);
+    border-radius: var(--mn-radius-sm);
+    background: var(--mn-color-bg-inverse);
+    color: var(--mn-color-text-inverse);
+    font-size: var(--mn-text-xs);
+    line-height: var(--mn-leading-snug);
+    box-shadow: var(--mn-shadow-md);
+    animation: mn-fade-in var(--mn-duration-fast) var(--mn-ease-enter);
+  }
+
+  /* components/navigation/tabs/tabs.css */
+  .mn-tabs__list {
+    display: flex;
+    align-items: center;
+    gap: var(--mn-space-1);
+  }
+  .mn-tabs__list[data-variant='line'] {
+    gap: var(--mn-space-4);
+    border-bottom: 1px solid var(--mn-color-border-default);
+  }
+  .mn-tabs__list[data-variant='pill'] {
+    display: inline-flex;
+    padding: var(--mn-space-0-5);
+    border-radius: var(--mn-radius-md);
+    background: var(--mn-color-bg-muted);
+  }
+  .mn-tabs__trigger {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--mn-space-1-5);
+    height: var(--mn-control-md);
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: var(--mn-color-text-muted);
+    font: inherit;
+    font-family: var(--mn-font-sans);
+    font-size: var(--mn-text-sm);
+    font-weight: var(--mn-weight-medium);
+    white-space: nowrap;
+    cursor: pointer;
+    transition: color var(--mn-duration-fast) var(--mn-ease-standard);
+  }
+  .mn-tabs__trigger:hover {
+    color: var(--mn-color-text-default);
+  }
+  .mn-tabs__trigger[data-state='active'] {
+    color: var(--mn-color-text-default);
+  }
+  .mn-tabs__trigger[data-disabled] {
+    color: var(--mn-color-text-disabled);
+    cursor: not-allowed;
+  }
+  [data-variant='line'] > .mn-tabs__trigger::after {
+    content: '';
+    position: absolute;
+    inset-inline: 0;
+    bottom: -1px;
+    height: 2px;
+    border-radius: 2px 2px 0 0;
+    background: transparent;
+    transition: background-color var(--mn-duration-fast) var(--mn-ease-standard);
+  }
+  [data-variant='line'] > .mn-tabs__trigger[data-state='active']::after {
+    background: var(--mn-color-accent-strong);
+  }
+  [data-variant='pill'] > .mn-tabs__trigger {
+    height: calc(var(--mn-control-md) - 0.375rem);
+    padding-inline: var(--mn-space-3);
+    border-radius: var(--mn-radius-sm);
+  }
+  [data-variant='pill'] > .mn-tabs__trigger[data-state='active'] {
+    background: var(--mn-color-bg-surface);
+    box-shadow: var(--mn-shadow-xs);
+  }
+  .mn-tabs__content {
+    padding-top: var(--mn-space-4);
+  }
+  .mn-tabs__content:focus-visible {
+    outline: var(--mn-focus-ring-width) solid var(--mn-color-focus-ring);
+    outline-offset: 2px;
+  }
+
+  /* components/data-grid/data-table/data-table.css */
+  .mn-table-wrap {
+    width: 100%;
+    overflow: auto;
+  }
+  .mn-table {
+    --_py: var(--mn-space-3);
+    width: 100%;
+    border-collapse: collapse;
+    font-size: var(--mn-text-sm);
+    line-height: var(--mn-leading-snug);
+    color: var(--mn-color-text-default);
+  }
+  .mn-table[data-density='compact'] {
+    --_py: var(--mn-space-1-5);
+    font-size: var(--mn-text-xs);
+  }
+  .mn-table__caption {
+    padding: var(--mn-space-2) var(--mn-space-3);
+    color: var(--mn-color-text-muted);
+    font-size: var(--mn-text-xs);
+    text-align: start;
+    caption-side: bottom;
+  }
+  .mn-table__head {
+    padding: var(--mn-space-2) var(--mn-space-3);
+    border-bottom: 1px solid var(--mn-color-border-default);
+    background: var(--mn-color-bg-subtle);
+    color: var(--mn-color-text-muted);
+    font-size: var(--mn-text-xs);
+    font-weight: var(--mn-weight-medium);
+    letter-spacing: var(--mn-tracking-wide);
+    text-align: start;
+    white-space: nowrap;
+  }
+  .mn-table[data-sticky] .mn-table__head {
+    position: sticky;
+    top: 0;
+    z-index: var(--mn-z-raised);
+  }
+  .mn-table__cell {
+    padding: var(--_py) var(--mn-space-3);
+    border-bottom: 1px solid var(--mn-color-border-subtle);
+    vertical-align: middle;
+  }
+  .mn-table__head[data-numeric],
+  .mn-table__cell[data-numeric] {
+    text-align: end;
+    font-variant-numeric: tabular-nums;
+  }
+  .mn-table__row:hover > .mn-table__cell {
+    background: var(--mn-color-bg-subtle);
+  }
+  .mn-table__row[data-selected] > .mn-table__cell {
+    background: var(--mn-color-accent-subtle);
+  }
+  .mn-table__row[data-interactive] {
+    cursor: pointer;
+  }
+  .mn-table__select {
+    width: 2.5rem;
+    padding-inline: var(--mn-space-3);
+  }
+  .mn-table__sort {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--mn-space-1);
+    margin: calc(var(--mn-space-1) * -1) calc(var(--mn-space-2) * -1);
+    padding: var(--mn-space-1) var(--mn-space-2);
+    border: 0;
+    border-radius: var(--mn-radius-sm);
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    letter-spacing: inherit;
+    cursor: pointer;
+  }
+  .mn-table__sort:hover {
+    color: var(--mn-color-text-default);
+  }
+  .mn-table__sort:focus-visible {
+    outline: var(--mn-focus-ring-width) solid var(--mn-color-focus-ring);
+    outline-offset: 0;
+  }
+  .mn-table__sort-icon {
+    width: 0.75rem;
+    height: 0.75rem;
+    opacity: 0.35;
+    transition: transform var(--mn-duration-fast) var(--mn-ease-standard);
+  }
+  .mn-table__sort[data-direction='ascending'] .mn-table__sort-icon {
+    opacity: 1;
+    transform: rotate(180deg);
+  }
+  .mn-table__sort[data-direction='descending'] .mn-table__sort-icon {
+    opacity: 1;
+  }
+
+  /* components/navigation/pagination/pagination.css */
+  .mn-pagination {
+    display: flex;
+    align-items: center;
+    gap: var(--mn-space-1);
+  }
+  .mn-pagination__pages {
+    display: flex;
+    align-items: center;
+    gap: var(--mn-space-0-5);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .mn-pagination__page {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: var(--mn-control-sm);
+    height: var(--mn-control-sm);
+    padding-inline: var(--mn-space-2);
+    border: 0;
+    border-radius: var(--mn-radius-sm);
+    background: transparent;
+    color: var(--mn-color-text-muted);
+    font: inherit;
+    font-size: var(--mn-text-sm);
+    font-variant-numeric: tabular-nums;
+    cursor: pointer;
+  }
+  .mn-pagination__page:hover {
+    background: var(--mn-color-bg-muted);
+    color: var(--mn-color-text-default);
+  }
+  .mn-pagination__page[aria-current='page'] {
+    background: var(--mn-color-accent-subtle);
+    color: var(--mn-color-accent-strong);
+    font-weight: var(--mn-weight-semibold);
+  }
+  .mn-pagination__page:focus-visible {
+    outline: var(--mn-focus-ring-width) solid var(--mn-color-focus-ring);
+    outline-offset: 2px;
+  }
+  .mn-pagination__gap {
+    padding-inline: var(--mn-space-1);
+    color: var(--mn-color-text-subtle);
+  }
+  .mn-pagination__range {
+    margin: 0 var(--mn-space-2) 0 0;
+    color: var(--mn-color-text-muted);
+    font-size: var(--mn-text-sm);
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* components/navigation/breadcrumb/breadcrumb.css */
+  .mn-breadcrumb__list {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--mn-space-1);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    font-size: var(--mn-text-sm);
+  }
+  .mn-breadcrumb__link {
+    color: var(--mn-color-text-muted);
+    text-decoration: none;
+    border-radius: var(--mn-radius-xs);
+  }
+  .mn-breadcrumb__link:hover {
+    color: var(--mn-color-text-default);
+    text-decoration: underline;
+  }
+  .mn-breadcrumb__link:focus-visible {
+    outline: var(--mn-focus-ring-width) solid var(--mn-color-focus-ring);
+    outline-offset: 2px;
+  }
+  .mn-breadcrumb__current {
+    color: var(--mn-color-text-default);
+    font-weight: var(--mn-weight-medium);
+  }
+  .mn-breadcrumb__sep {
+    display: inline-flex;
+    color: var(--mn-color-text-subtle);
+  }
+  .mn-breadcrumb__sep > svg {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .mn-breadcrumb__more {
+    display: inline-flex;
+    align-items: center;
+    height: var(--mn-control-xs);
+    padding-inline: var(--mn-space-1-5);
+    border: 0;
+    border-radius: var(--mn-radius-sm);
+    background: transparent;
+    color: var(--mn-color-text-muted);
+    font: inherit;
+    cursor: pointer;
+  }
+  .mn-breadcrumb__more:hover {
+    background: var(--mn-color-bg-muted);
+    color: var(--mn-color-text-default);
+  }
+  .mn-breadcrumb__more:focus-visible {
+    outline: var(--mn-focus-ring-width) solid var(--mn-color-focus-ring);
+    outline-offset: 2px;
+  }
+
+  /* components/forms/combobox/combobox.css */
+  .mn-combobox {
+    position: relative;
+    padding-inline-end: var(--mn-space-1);
+    gap: var(--mn-space-1);
+  }
+  .mn-combobox[data-disabled] {
+    background: var(--mn-color-bg-subtle);
+    cursor: not-allowed;
+  }
+  .mn-combobox:focus-within {
+    outline: var(--mn-focus-ring-width) solid var(--mn-color-focus-ring);
+    outline-offset: 0;
+    border-color: var(--mn-color-focus-ring);
+  }
+  .mn-combobox__input {
+    flex: 1;
+    min-width: 0;
+    height: 100%;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    outline: none;
+  }
+  .mn-combobox__input::placeholder {
+    color: var(--mn-color-text-subtle);
+  }
+  .mn-combobox__toggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--mn-control-xs);
+    height: var(--mn-control-xs);
+    padding: 0;
+    border: 0;
+    border-radius: var(--mn-radius-sm);
+    background: transparent;
+    color: var(--mn-color-text-muted);
+    cursor: pointer;
+  }
+  .mn-combobox__toggle:hover:not(:disabled) {
+    background: var(--mn-color-bg-muted);
+  }
+  .mn-combobox__spinner {
+    color: var(--mn-color-text-muted);
+  }
+  .mn-combobox__content {
+    width: var(--radix-popover-trigger-width, auto);
+    min-width: 12rem;
+    padding: var(--mn-space-1);
+  }
+  .mn-combobox__list {
+    max-height: min(var(--radix-popover-content-available-height, 20rem), 20rem);
+    overflow: auto;
+  }
+  .mn-combobox__list .mn-menu__item {
+    cursor: pointer;
+  }
+  .mn-combobox__list .mn-menu__item[aria-disabled='true'] {
+    color: var(--mn-color-text-disabled);
+    cursor: not-allowed;
+  }
+  .mn-combobox__description {
+    display: block;
+    color: var(--mn-color-text-muted);
+    font-size: var(--mn-text-xs);
+  }
+  .mn-combobox__status {
+    padding: var(--mn-space-3) var(--mn-space-2);
+    color: var(--mn-color-text-muted);
+    font-size: var(--mn-text-sm);
+    text-align: center;
+  }
+
+  /* components/feedback/toast/toast.css */
+  .mn-toast-viewport {
+    position: fixed;
+    z-index: var(--mn-z-toast);
+    display: flex;
+    flex-direction: column;
+    gap: var(--mn-space-2);
+    width: min(24rem, calc(100vw - 2rem));
+    max-height: 100vh;
+    margin: 0;
+    padding: var(--mn-space-4);
+    list-style: none;
+    outline: none;
+  }
+  .mn-toast-viewport[data-position='bottom-right'] {
+    right: 0;
+    bottom: 0;
+  }
+  .mn-toast-viewport[data-position='bottom-center'] {
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+  .mn-toast-viewport[data-position='top-right'] {
+    top: 0;
+    right: 0;
+  }
+  .mn-toast {
+    --_accent: var(--mn-color-border-strong);
+    display: flex;
+    align-items: flex-start;
+    gap: var(--mn-space-3);
+    padding: var(--mn-space-3) var(--mn-space-3) var(--mn-space-3) var(--mn-space-4);
+    border: 1px solid var(--mn-color-border-subtle);
+    border-inline-start: 3px solid var(--_accent);
+    border-radius: var(--mn-radius-lg);
+    background: var(--mn-color-bg-raised);
+    color: var(--mn-color-text-default);
+    box-shadow: var(--mn-shadow-lg);
+    font-size: var(--mn-text-sm);
+    animation: mn-toast-in var(--mn-duration-slow) var(--mn-ease-enter);
+  }
+  .mn-toast[data-state='closed'] {
+    animation: mn-toast-out var(--mn-duration-base) var(--mn-ease-exit) forwards;
+  }
+  .mn-toast[data-swipe='move'] {
+    transform: translateX(var(--radix-toast-swipe-move-x));
+  }
+  .mn-toast[data-swipe='end'] {
+    animation: mn-toast-out var(--mn-duration-base) var(--mn-ease-exit) forwards;
+  }
+  .mn-toast[data-tone='info'] {
+    --_accent: var(--mn-color-info-strong);
+  }
+  .mn-toast[data-tone='success'] {
+    --_accent: var(--mn-color-success-strong);
+  }
+  .mn-toast[data-tone='warning'] {
+    --_accent: var(--mn-color-warning-strong);
+  }
+  .mn-toast[data-tone='danger'] {
+    --_accent: var(--mn-color-danger-strong);
+  }
+  .mn-toast__icon {
+    display: inline-flex;
+    margin-top: 0.125rem;
+    color: var(--_accent);
+  }
+  .mn-toast__body {
+    flex: 1;
+    min-width: 0;
+  }
+  .mn-toast__title {
+    margin: 0;
+    font-weight: var(--mn-weight-semibold);
+  }
+  .mn-toast__description {
+    margin: var(--mn-space-0-5) 0 0;
+    color: var(--mn-color-text-muted);
+    line-height: var(--mn-leading-normal);
+  }
+  .mn-toast__action {
+    align-self: center;
+  }
+  .mn-toast__close {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--mn-control-xs);
+    height: var(--mn-control-xs);
+    margin: calc(var(--mn-space-1) * -1) calc(var(--mn-space-1) * -1) 0 0;
+    padding: 0;
+    border: 0;
+    border-radius: var(--mn-radius-sm);
+    background: transparent;
+    color: var(--mn-color-text-muted);
+    cursor: pointer;
+  }
+  .mn-toast__close:hover {
+    background: var(--mn-color-bg-muted);
+    color: var(--mn-color-text-default);
+  }
+  .mn-toast__close:focus-visible {
+    outline: var(--mn-focus-ring-width) solid var(--mn-color-focus-ring);
+    outline-offset: 2px;
+  }
+  @keyframes mn-toast-in {
+    from {
+      opacity: 0;
+      transform: translateY(8px);
+    }
+  }
+  @keyframes mn-toast-out {
+    to {
+      opacity: 0;
+      transform: translateY(4px);
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .mn-toast,
+    .mn-toast[data-state='closed'] {
+      animation-duration: 0.01ms;
+    }
+  }
+
+  /* components/data-display/progress-bar/progress-bar.css */
+  .mn-progress {
+    --_h: 0.5rem;
+    --_fill: var(--mn-color-accent-strong);
+    position: relative;
+    width: 100%;
+    height: var(--_h);
+    overflow: hidden;
+    border-radius: var(--mn-radius-full);
+    background: var(--mn-color-bg-emphasis);
+  }
+  .mn-progress[data-size='sm'] {
+    --_h: 0.25rem;
+  }
+  .mn-progress[data-tone='success'] {
+    --_fill: var(--mn-color-success-strong);
+  }
+  .mn-progress[data-tone='warning'] {
+    --_fill: var(--mn-color-warning-strong);
+  }
+  .mn-progress[data-tone='danger'] {
+    --_fill: var(--mn-color-danger-strong);
+  }
+  .mn-progress__bar {
+    height: 100%;
+    border-radius: inherit;
+    background: var(--_fill);
+    transition: width var(--mn-duration-slow) var(--mn-ease-standard);
+  }
+  .mn-progress[data-indeterminate] .mn-progress__bar {
+    width: 40%;
+    animation: mn-progress-slide 1.4s var(--mn-ease-standard) infinite;
+  }
+  @keyframes mn-progress-slide {
+    from {
+      transform: translateX(-100%);
+    }
+    to {
+      transform: translateX(250%);
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .mn-progress[data-indeterminate] .mn-progress__bar {
+      animation-duration: 3s;
+    }
+  }
+
+  /* components/layout/separator/separator.css */
+  .mn-separator {
+    flex-shrink: 0;
+    background: var(--mn-color-border-default);
+  }
+  .mn-separator[data-orientation='horizontal'] {
+    width: 100%;
+    height: 1px;
+  }
+  .mn-separator[data-orientation='vertical'] {
+    width: 1px;
+    height: 100%;
+    min-height: 1em;
+  }
+
+  /* components/navigation/link/link.css */
+  .mn-link {
+    display: inline;
+    align-items: center;
+    gap: var(--mn-space-1);
+    border-radius: var(--mn-radius-xs);
+    color: var(--mn-color-text-link);
+    text-decoration: underline;
+    text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
+    text-underline-offset: 0.15em;
+    transition: text-decoration-color var(--mn-duration-fast) var(--mn-ease-standard);
+  }
+  .mn-link:hover {
+    text-decoration-color: currentColor;
+  }
+  .mn-link[data-variant='standalone'] {
+    display: inline-flex;
+    font-weight: var(--mn-weight-medium);
+    text-decoration: none;
+  }
+  .mn-link[data-variant='standalone']:hover {
+    text-decoration: underline;
+  }
+  .mn-link[data-variant='subtle'] {
+    color: var(--mn-color-text-muted);
+    text-decoration: none;
+  }
+  .mn-link[data-variant='subtle']:hover {
+    color: var(--mn-color-text-default);
+    text-decoration: underline;
+  }
+  .mn-link:focus-visible {
+    outline: var(--mn-focus-ring-width) solid var(--mn-color-focus-ring);
+    outline-offset: 2px;
+  }
+  .mn-link__external {
+    display: inline-flex;
+    margin-inline-start: 0.2em;
+    vertical-align: -0.05em;
+  }
+
+  /* patterns/layout/page-header/page-header.css */
+  .mn-page-header {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mn-space-3);
+    padding-bottom: var(--mn-space-4);
+  }
+  .mn-page-header__eyebrow {
+    color: var(--mn-color-text-muted);
+    font-size: var(--mn-text-sm);
+  }
+  .mn-page-header__row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: var(--mn-space-3) var(--mn-space-6);
+  }
+  .mn-page-header__text {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mn-space-1);
+    min-width: 0;
+  }
+  .mn-page-header__title-row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--mn-space-2);
+  }
+  .mn-page-header__title {
+    margin: 0;
+    font-size: var(--mn-text-2xl);
+    font-weight: var(--mn-weight-semibold);
+    letter-spacing: var(--mn-tracking-tight);
+    line-height: var(--mn-leading-tight);
+  }
+  .mn-page-header__description {
+    margin: 0;
+    max-width: var(--mn-layout-reading-max);
+    color: var(--mn-color-text-muted);
+    font-size: var(--mn-text-sm);
+    line-height: var(--mn-leading-normal);
+  }
+  .mn-page-header__actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--mn-space-2);
+  }
+  .mn-page-header__tabs {
+    margin-bottom: calc(var(--mn-space-4) * -1);
+  }
+
+  /* patterns/actions/toolbar/toolbar.css */
+  .mn-toolbar-wrap {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mn-space-2);
+  }
+  .mn-toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--mn-space-2);
+  }
+  .mn-toolbar__search {
+    flex: 1 1 14rem;
+    min-width: 10rem;
+    max-width: 24rem;
+  }
+  .mn-toolbar__group {
+    display: flex;
+    align-items: center;
+    gap: var(--mn-space-1);
+  }
+  .mn-toolbar__end {
+    display: flex;
+    align-items: center;
+    gap: var(--mn-space-1);
+    margin-inline-start: auto;
+  }
+
+  /* patterns/search/filter-bar/filter-bar.css */
+  .mn-filter-bar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--mn-space-1-5);
+  }
+  .mn-filter-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--mn-space-1);
+    height: var(--mn-control-xs);
+    padding-inline: var(--mn-space-2) var(--mn-space-1);
+    border: 1px solid var(--mn-color-border-default);
+    border-radius: var(--mn-radius-full);
+    background: var(--mn-color-bg-surface);
+    font-size: var(--mn-text-xs);
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .mn-filter-chip__name {
+    color: var(--mn-color-text-muted);
+  }
+  .mn-filter-chip__name::after {
+    content: ':';
+  }
+  .mn-filter-chip__value {
+    color: var(--mn-color-text-default);
+    font-weight: var(--mn-weight-medium);
+  }
+  .mn-filter-chip__remove {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.25rem;
+    height: 1.25rem;
+    padding: 0;
+    border: 0;
+    border-radius: var(--mn-radius-full);
+    background: transparent;
+    color: var(--mn-color-text-muted);
+    cursor: pointer;
+  }
+  .mn-filter-chip__remove > svg {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  .mn-filter-chip__remove:hover {
+    background: var(--mn-color-bg-muted);
+    color: var(--mn-color-text-default);
+  }
+  .mn-filter-chip__remove:focus-visible {
+    outline: var(--mn-focus-ring-width) solid var(--mn-color-focus-ring);
+    outline-offset: 1px;
+  }
+  .mn-filter-bar__clear {
+    height: var(--mn-control-xs);
+    padding-inline: var(--mn-space-2);
+    border: 0;
+    border-radius: var(--mn-radius-sm);
+    background: transparent;
+    color: var(--mn-color-text-link);
+    font: inherit;
+    font-size: var(--mn-text-xs);
+    font-weight: var(--mn-weight-medium);
+    cursor: pointer;
+  }
+  .mn-filter-bar__clear:hover {
+    background: var(--mn-color-accent-subtle);
+  }
+  .mn-filter-bar__clear:focus-visible {
+    outline: var(--mn-focus-ring-width) solid var(--mn-color-focus-ring);
+    outline-offset: 2px;
+  }
+
+  /* patterns/layout/settings-section/settings-section.css */
+  .mn-settings-section {
+    display: grid;
+    gap: var(--mn-space-4);
+  }
+  @media (min-width: 1024px) {
+    .mn-settings-section {
+      grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
+      gap: var(--mn-space-8);
+    }
+  }
+  .mn-settings-section__title {
+    margin: 0;
+    font-size: var(--mn-text-base);
+    font-weight: var(--mn-weight-semibold);
+    letter-spacing: var(--mn-tracking-snug);
+  }
+  .mn-settings-section__description {
+    margin: var(--mn-space-1) 0 0;
+    color: var(--mn-color-text-muted);
+    font-size: var(--mn-text-sm);
+    line-height: var(--mn-leading-normal);
+  }
+  .mn-settings-section__card {
+    border: 1px solid var(--mn-color-border-default);
+    border-radius: var(--mn-radius-lg);
+    background: var(--mn-color-bg-surface);
+  }
+  .mn-settings-section[data-tone='danger'] .mn-settings-section__card {
+    border-color: var(--mn-color-danger-border);
+  }
+  .mn-settings-section[data-tone='danger'] .mn-settings-section__title {
+    color: var(--mn-color-danger-strong);
+  }
+  .mn-settings-section__body {
+    display: flex;
+    flex-direction: column;
+  }
+  .mn-settings-section__body > * + * {
+    border-top: 1px solid var(--mn-color-border-subtle);
+  }
+  .mn-settings-section__footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--mn-space-2);
+    padding: var(--mn-space-3) var(--mn-space-5);
+    border-top: 1px solid var(--mn-color-border-subtle);
+    background: var(--mn-color-bg-subtle);
+    border-radius: 0 0 var(--mn-radius-lg) var(--mn-radius-lg);
+  }
+  .mn-settings-row {
+    display: grid;
+    gap: var(--mn-space-2);
+    padding: var(--mn-space-4) var(--mn-space-5);
+  }
+  @media (min-width: 768px) {
+    .mn-settings-row {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
+      align-items: center;
+      gap: var(--mn-space-6);
+    }
+  }
+  .mn-settings-row__text {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mn-space-0-5);
+  }
+  .mn-settings-row__control {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mn-space-1-5);
+  }
+
+  /* components/data-display/description-list/description-list.css */
+  .mn-dl {
+    display: grid;
+    gap: var(--mn-space-4) var(--mn-space-6);
+    margin: 0;
+  }
+  .mn-dl[data-columns='2'] {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .mn-dl[data-columns='3'] {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  @media (max-width: 640px) {
+    .mn-dl {
+      grid-template-columns: 1fr;
+    }
+  }
+  .mn-dl__item {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mn-space-0-5);
+    min-width: 0;
+  }
+  .mn-dl__item[data-wide] {
+    grid-column: 1 / -1;
+  }
+  .mn-dl[data-layout='inline'] .mn-dl__item {
+    flex-direction: row;
+    gap: var(--mn-space-3);
+  }
+  .mn-dl[data-layout='inline'] .mn-dl__term {
+    flex: 0 0 9rem;
+  }
+  .mn-dl__term {
+    color: var(--mn-color-text-muted);
+    font-size: var(--mn-text-xs);
+    font-weight: var(--mn-weight-medium);
+    letter-spacing: var(--mn-tracking-wide);
+  }
+  .mn-dl__value {
+    margin: 0;
+    color: var(--mn-color-text-default);
+    font-size: var(--mn-text-sm);
+    overflow-wrap: anywhere;
+  }
+
+  /* patterns/layout/split-layout/split-layout.css */
+  .mn-split {
+    --_list: 22rem;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    min-height: 0;
+    height: 100%;
+  }
+  .mn-split[data-list-width='sm'] {
+    --_list: 18rem;
+  }
+  .mn-split[data-list-width='lg'] {
+    --_list: 28rem;
+  }
+  .mn-split__list,
+  .mn-split__detail {
+    min-width: 0;
+    min-height: 0;
+    overflow: auto;
+  }
+  .mn-split__list {
+    border-inline-end: 1px solid var(--mn-color-border-default);
+  }
+  .mn-split__back {
+    padding: var(--mn-space-2);
+    border-bottom: 1px solid var(--mn-color-border-subtle);
+  }
+  @media (max-width: 767px) {
+    .mn-split__detail {
+      display: none;
+    }
+    .mn-split[data-detail-open] .mn-split__list {
+      display: none;
+    }
+    .mn-split[data-detail-open] .mn-split__detail {
+      display: block;
+    }
+  }
+  @media (min-width: 768px) {
+    .mn-split {
+      grid-template-columns: var(--_list) minmax(0, 1fr);
+    }
+    .mn-split__back {
+      display: none;
+    }
+  }
+
+  /* components/data-display/stat-card/stat-card.css */
+  .mn-stat {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: var(--mn-space-4);
+    padding: var(--mn-space-4) var(--mn-space-5);
+    border: 1px solid var(--mn-color-border-default);
+    border-radius: var(--mn-radius-lg);
+    background: var(--mn-color-bg-surface);
+  }
+  .mn-stat__body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mn-space-1);
+    min-width: 0;
+  }
+  .mn-stat__label {
+    margin: 0;
+    color: var(--mn-color-text-muted);
+    font-size: var(--mn-text-sm);
+    font-weight: var(--mn-weight-medium);
+  }
+  .mn-stat__value {
+    margin: 0;
+    font-size: var(--mn-text-2xl);
+    font-weight: var(--mn-weight-semibold);
+    letter-spacing: var(--mn-tracking-tight);
+    line-height: var(--mn-leading-tight);
+    font-variant-numeric: tabular-nums;
+  }
+  .mn-stat__footer {
+    display: flex;
+    align-items: center;
+    gap: var(--mn-space-2);
+    margin: 0;
+    font-size: var(--mn-text-xs);
+  }
+  .mn-stat__delta {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--mn-space-0-5);
+    font-weight: var(--mn-weight-medium);
+    color: var(--mn-color-text-muted);
+  }
+  .mn-stat__delta[data-tone='success'] {
+    color: var(--mn-color-success-strong);
+  }
+  .mn-stat__delta[data-tone='danger'] {
+    color: var(--mn-color-danger-strong);
+  }
+  .mn-stat__caption {
+    color: var(--mn-color-text-subtle);
+  }
+  .mn-stat__visual {
+    flex-shrink: 0;
+    color: var(--mn-color-accent-strong);
+  }
+
+  /* components/feedback/error-state/error-state.css */
+  .mn-error-state .mn-empty-state__icon {
+    background: var(--mn-color-danger-subtle);
+    color: var(--mn-color-danger-strong);
+  }
+
+  .mn-loading-state {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mn-space-3);
+  }
+  .mn-loading-state[data-variant='cards'] {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
+  }
+  .mn-loading-state__row {
+    display: flex;
+    align-items: center;
+    gap: var(--mn-space-3);
+  }
+  .mn-loading-state__lines {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: var(--mn-space-2);
+  }
+
+  /* components/actions/copy-button/copy-button.css */
+  /* Copy Button: a Button (.mn-button) with an icon that confirms the result. */
+  .mn-copy-button[data-icon-only] {
+    width: var(--_h);
+    padding: 0;
+  }
+  .mn-copy-button__icon {
+    display: inline-flex;
+    flex-shrink: 0;
+    margin-inline: calc(var(--mn-space-0-5) * -1);
+    transition: color var(--mn-duration-fast) var(--mn-ease-standard);
+  }
+  .mn-copy-button[data-icon-only] .mn-copy-button__icon {
+    margin: 0;
+  }
+  .mn-copy-button__icon > svg {
+    width: 1rem;
+    height: 1rem;
+  }
+  .mn-copy-button[data-state='copied'] .mn-copy-button__icon {
+    color: var(--mn-color-success-strong);
+  }
+  .mn-copy-button[data-state='error'] .mn-copy-button__icon {
+    color: var(--mn-color-danger-strong);
+  }
+  .mn-copy-button[data-variant='primary'] .mn-copy-button__icon,
+  .mn-copy-button[data-variant='danger'] .mn-copy-button__icon {
+    color: inherit;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .mn-copy-button__icon {
+      transition: none;
+    }
+  }
+  .mn-copy-button__label {
+    display: inline-grid;
+    justify-items: center;
+  }
+  .mn-copy-button__label > span {
+    grid-area: 1 / 1;
+  }
+  .mn-copy-button__label > span:not([data-active]) {
+    visibility: hidden;
+  }
+
+  /* components/actions/copy-field/copy-field.css */
+  /* Copy Field: a read-only Input or Textarea with a CopyButton beside it. */
+  .mn-copy-field {
+    display: flex;
+    align-items: center;
+    gap: var(--mn-space-2);
+    width: 100%;
+    min-width: 0;
+  }
+  .mn-copy-field[data-multiline] {
+    align-items: flex-start;
+  }
+  .mn-copy-field__control {
+    flex: 1 1 auto;
+    min-width: 0;
+    background: var(--mn-color-bg-subtle);
+    text-overflow: ellipsis;
+  }
+  .mn-copy-field[data-mono] .mn-copy-field__control {
+    font-family: var(--mn-font-mono);
+  }
+  .mn-copy-field[data-multiline] .mn-copy-field__control {
+    white-space: pre;
+    overflow: auto;
+  }
+  .mn-copy-field__button {
+    flex-shrink: 0;
+  }
+
+  /* components/technical/secret-field/secret-field.css */
+  /* Secret Field: a masked Input with reveal and copy buttons inside its end edge. */
+  .mn-secret-field {
+    --_inset: var(--mn-space-1);
+    --_btn: var(--mn-control-xs);
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    min-width: 0;
+  }
+  .mn-secret-field[data-size='lg'] {
+    --_btn: var(--mn-control-sm);
+  }
+  .mn-secret-field[data-size='sm'] {
+    --_inset: var(--mn-space-0-5);
+    --_btn: var(--mn-control-xs);
+  }
+  .mn-secret-field__control {
+    font-family: var(--mn-font-mono);
+    letter-spacing: 0.01em;
+  }
+  .mn-secret-field[data-actions='1'] .mn-secret-field__control {
+    padding-inline-end: calc(var(--_btn) + var(--_inset) * 2);
+  }
+  .mn-secret-field[data-actions='2'] .mn-secret-field__control {
+    padding-inline-end: calc(var(--_btn) * 2 + var(--_inset) * 3);
+  }
+  .mn-secret-field__control::placeholder {
+    font-family: var(--mn-font-sans);
+    letter-spacing: normal;
+  }
+  .mn-secret-field__actions {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-end: var(--_inset);
+    display: flex;
+    align-items: center;
+    gap: var(--_inset);
+  }
+  .mn-secret-field__actions:empty {
+    display: none;
+  }
+  .mn-secret-field__toggle[aria-pressed='true'] {
+    color: var(--mn-color-text-default);
+  }
+  .mn-secret-field__actions .mn-button {
+    color: var(--mn-color-text-muted);
+  }
+  .mn-secret-field__actions .mn-button:hover:not(:disabled) {
+    color: var(--mn-color-text-default);
+  }
+
+  /* components/data-display/status-badge/status-badge.css */
+  /* Status Badge: text + tone + a distinct icon or dot. Colour is never the only signal. */
+  .mn-status-badge {
+    --_bg: var(--mn-color-bg-muted);
+    --_fg: var(--mn-color-text-default);
+    --_mark: var(--mn-color-text-muted);
+    --_border: transparent;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--mn-space-1);
+    max-width: 100%;
+    height: 1.375rem;
+    padding-inline: var(--mn-space-2);
+    border: 1px solid var(--_border);
+    border-radius: var(--mn-radius-full);
+    background: var(--_bg);
+    color: var(--_fg);
+    font-family: var(--mn-font-sans);
+    font-size: var(--mn-text-xs);
+    font-weight: var(--mn-weight-medium);
+    line-height: 1;
+    white-space: nowrap;
+    vertical-align: middle;
+  }
+  .mn-status-badge[data-size='sm'] {
+    height: 1.125rem;
+    padding-inline: var(--mn-space-1-5);
+    font-size: var(--mn-text-2xs);
+  }
+  .mn-status-badge__label {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .mn-status-badge__icon {
+    display: inline-flex;
+    flex-shrink: 0;
+    color: var(--_mark);
+  }
+  .mn-status-badge__icon > svg {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  .mn-status-badge[data-size='md'] .mn-status-badge__icon > svg {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .mn-status-badge__dot {
+    flex-shrink: 0;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: var(--mn-radius-full);
+    background: var(--_mark);
+  }
+
+  /* Tones. Subtle: tinted fill, strong text. */
+  .mn-status-badge[data-tone='accent'] {
+    --_bg: var(--mn-color-accent-subtle);
+    --_fg: var(--mn-color-accent-strong);
+    --_mark: var(--mn-color-accent-strong);
+    --_border-tone: var(--mn-color-accent-border);
+    --_solid: var(--mn-color-accent-solid);
+    --_on-solid: var(--mn-color-accent-on-solid);
+  }
+  .mn-status-badge[data-tone='info'] {
+    --_bg: var(--mn-color-info-subtle);
+    --_fg: var(--mn-color-info-strong);
+    --_mark: var(--mn-color-info-strong);
+    --_border-tone: var(--mn-color-info-border);
+    --_solid: var(--mn-color-info-solid);
+    --_on-solid: var(--mn-color-info-on-solid);
+  }
+  .mn-status-badge[data-tone='success'] {
+    --_bg: var(--mn-color-success-subtle);
+    --_fg: var(--mn-color-success-strong);
+    --_mark: var(--mn-color-success-strong);
+    --_border-tone: var(--mn-color-success-border);
+    --_solid: var(--mn-color-success-solid);
+    --_on-solid: var(--mn-color-success-on-solid);
+  }
+  .mn-status-badge[data-tone='warning'] {
+    --_bg: var(--mn-color-warning-subtle);
+    --_fg: var(--mn-color-warning-strong);
+    --_mark: var(--mn-color-warning-strong);
+    --_border-tone: var(--mn-color-warning-border);
+    --_solid: var(--mn-color-warning-solid);
+    --_on-solid: var(--mn-color-warning-on-solid);
+  }
+  .mn-status-badge[data-tone='danger'] {
+    --_bg: var(--mn-color-danger-subtle);
+    --_fg: var(--mn-color-danger-strong);
+    --_mark: var(--mn-color-danger-strong);
+    --_border-tone: var(--mn-color-danger-border);
+    --_solid: var(--mn-color-danger-solid);
+    --_on-solid: var(--mn-color-danger-on-solid);
+  }
+  .mn-status-badge[data-tone='neutral'] {
+    --_fg: var(--mn-color-text-muted);
+    --_border-tone: var(--mn-color-border-default);
+    --_solid: var(--mn-color-bg-inverse);
+    --_on-solid: var(--mn-color-text-inverse);
+  }
+
+  /* Outline: no fill, tone border. */
+  .mn-status-badge[data-variant='outline'] {
+    --_bg: transparent;
+    --_border: var(--_border-tone);
+  }
+  /* Solid: one prominent status. */
+  .mn-status-badge[data-variant='solid'] {
+    --_bg: var(--_solid);
+    --_fg: var(--_on-solid);
+    --_mark: var(--_on-solid);
+  }
+  /* Dot: quiet. Default text colour, the tone lives in the dot only. */
+  .mn-status-badge[data-variant='dot'] {
+    --_bg: transparent;
+    --_fg: var(--mn-color-text-default);
+    height: auto;
+    padding-inline: 0;
+    gap: var(--mn-space-1-5);
+    border-radius: 0;
+  }
+
+  /*
+   * Custom colours (already contrast-guarded in JS per scheme). The colour marks
+   * the dot, icon and border; the text stays a theme token so it always reads.
+   */
+  .mn-status-badge[data-custom-color] {
+    --_custom: var(--mn-status-light);
+    --_custom-on: var(--mn-status-on-light);
+    --_mark: var(--_custom);
+    --_bg: var(--mn-color-bg-surface);
+    --_fg: var(--mn-color-text-default);
+    --_border: var(--mn-color-border-default);
+  }
+  :is(.dark, [data-mn-theme='dark']) .mn-status-badge[data-custom-color] {
+    --_custom: var(--mn-status-dark);
+    --_custom-on: var(--mn-status-on-dark);
+  }
+  .mn-status-badge[data-custom-color][data-variant='outline'] {
+    --_bg: transparent;
+    --_border: var(--_custom);
+  }
+  .mn-status-badge[data-custom-color][data-variant='solid'] {
+    --_bg: var(--_custom);
+    --_fg: var(--_custom-on);
+    --_mark: var(--_custom-on);
+    --_border: transparent;
+  }
+  .mn-status-badge[data-custom-color][data-variant='dot'] {
+    --_bg: transparent;
+    --_border: transparent;
+  }
+
+  @media (forced-colors: active) {
+    .mn-status-badge {
+      border-color: CanvasText;
+    }
+    .mn-status-badge__dot {
+      background: CanvasText;
+    }
+  }
+
+  /* components/forms/segmented-control/segmented-control.css */
+  /* Segmented Control and Toggle Group: one connected track of options. */
+  .mn-segmented-control {
+    --_h: var(--mn-control-md);
+    --_pad: var(--mn-space-0-5);
+    --_px: var(--mn-space-3);
+    --_fs: var(--mn-text-sm);
+    display: inline-flex;
+    align-items: stretch;
+    gap: var(--mn-space-0-5);
+    max-width: 100%;
+    padding: var(--_pad);
+    border-radius: var(--mn-radius-md);
+    background: var(--mn-color-bg-muted);
+    overflow-x: auto;
+    scrollbar-width: none;
+    vertical-align: middle;
+  }
+  .mn-segmented-control::-webkit-scrollbar {
+    display: none;
+  }
+  .mn-segmented-control[data-size='sm'] {
+    --_h: var(--mn-control-sm);
+    --_px: var(--mn-space-2-5);
+    --_fs: var(--mn-text-xs);
+  }
+  .mn-segmented-control[data-size='lg'] {
+    --_h: var(--mn-control-lg);
+    --_px: var(--mn-space-4);
+  }
+  .mn-segmented-control[data-block] {
+    display: flex;
+    width: 100%;
+  }
+  .mn-segmented-control[data-block] > .mn-segmented-control__item {
+    flex: 1 1 0;
+  }
+
+  .mn-segmented-control__item {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    gap: var(--mn-space-1-5);
+    height: calc(var(--_h) - var(--_pad) * 2);
+    padding-inline: var(--_px);
+    border: 1px solid transparent;
+    border-radius: var(--mn-radius-sm);
+    background: transparent;
+    color: var(--mn-color-text-muted);
+    font: inherit;
+    font-family: var(--mn-font-sans);
+    font-size: var(--_fs);
+    font-weight: var(--mn-weight-medium);
+    line-height: 1;
+    white-space: nowrap;
+    cursor: pointer;
+    user-select: none;
+    touch-action: manipulation;
+    -webkit-tap-highlight-color: transparent;
+    transition:
+      background-color var(--mn-duration-fast) var(--mn-ease-standard),
+      color var(--mn-duration-fast) var(--mn-ease-standard),
+      box-shadow var(--mn-duration-fast) var(--mn-ease-standard);
+  }
+  .mn-segmented-control__item:hover:not(:disabled) {
+    color: var(--mn-color-text-default);
+  }
+  .mn-segmented-control__item:focus-visible {
+    outline: var(--mn-focus-ring-width) solid var(--mn-color-focus-ring);
+    outline-offset: 0;
+  }
+  .mn-segmented-control__item[data-state='on'] {
+    border-color: var(--mn-color-border-subtle);
+    background: var(--mn-color-bg-surface);
+    color: var(--mn-color-text-default);
+    box-shadow: var(--mn-shadow-xs);
+  }
+  .mn-segmented-control__item:disabled {
+    color: var(--mn-color-text-disabled);
+    cursor: not-allowed;
+  }
+  .mn-segmented-control__item[data-icon-only] {
+    width: calc(var(--_h) - var(--_pad) * 2);
+    padding: 0;
+  }
+  .mn-segmented-control__icon {
+    display: inline-flex;
+    flex-shrink: 0;
+  }
+  .mn-segmented-control__icon > svg {
+    width: 1rem;
+    height: 1rem;
+  }
+  .mn-segmented-control__count {
+    min-width: 1.25rem;
+    padding: var(--mn-space-0-5) var(--mn-space-1-5);
+    border-radius: var(--mn-radius-full);
+    background: var(--mn-color-bg-emphasis);
+    color: var(--mn-color-text-muted);
+    font-size: var(--mn-text-2xs);
+    font-variant-numeric: tabular-nums;
+    text-align: center;
+  }
+  .mn-segmented-control__item[data-state='on'] .mn-segmented-control__count {
+    background: var(--mn-color-bg-muted);
+    color: var(--mn-color-text-default);
+  }
+  .mn-segmented-control__suffix {
+    color: var(--mn-color-success-strong);
+    font-size: var(--mn-text-2xs);
+    font-weight: var(--mn-weight-semibold);
+  }
+
+  @media (pointer: coarse) {
+    .mn-segmented-control__item {
+      min-height: 2.75rem;
+    }
+    .mn-segmented-control {
+      --_pad: var(--mn-space-1);
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .mn-segmented-control__item {
+      transition: none;
+    }
+  }
+  @media (forced-colors: active) {
+    .mn-segmented-control__item[data-state='on'] {
+      border-color: Highlight;
+      outline: 2px solid Highlight;
+    }
+  }
+}