/* Meno components. Load after tokens.css. Every colour, space, radius, shadow and size is a token;
   font sizes mirror the type styles named in the comments, in rem (px / 16) so text follows the reader's
   text size. Class names: .mn-<block>__<part>--<modifier>. */

/* ------------------------------------------------------------------ base */
:root {
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 280ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter: cubic-bezier(0, 0, 0, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.875rem; line-height: 1.375rem; /* text-body */
  color: var(--ink);
  background: var(--bg-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, p { margin: 0; }
a { color: var(--ink-link); text-decoration: none; text-underline-offset: 3px; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-xs); }
::selection { background: var(--primary-subtle-hover); color: var(--ink); }
code, kbd, samp { font-family: var(--font-mono); font-size: 0.8125rem; }
.mn-icon { width: var(--icon-md); height: var(--icon-md); flex: none; stroke-width: 1.75; }
.mn-icon--sm { width: var(--icon-sm); height: var(--icon-sm); }
.mn-icon--lg { width: var(--icon-lg); height: var(--icon-lg); }
.mn-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.mn-tabular { font-variant-numeric: tabular-nums; }
.mn-spinner {
  width: var(--icon-sm); height: var(--icon-sm); flex: none;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: var(--radius-full);
  animation: mn-spin 700ms linear infinite;
}
@keyframes mn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  .mn-spinner { animation: mn-spin 1400ms linear infinite !important; }
}
/* Motion that confirms (README, Motion): a pressed button gives a little, a dialog and a popover rise into place, and
   a progress bar fills from empty as its page opens. Each is short and small, and under reduced motion the rule above
   makes it instant. A browser without @starting-style just shows the end state. */
@keyframes mn-fade-in { from { opacity: 0; } }
@keyframes mn-rise-in { from { opacity: 0; transform: translateY(var(--space-2)) scale(0.98); } }
.mn-btn:active:not([disabled], [aria-disabled="true"]) { transform: scale(0.97); }
dialog.mn-dialog[open], [popover]:popover-open { animation: mn-rise-in var(--duration-base) var(--ease-enter); }
dialog.mn-dialog[open]::backdrop { animation: mn-fade-in var(--duration-base) var(--ease-enter); }
@starting-style { .mn-progress__bar, .mn-progress__seg { transform: scaleX(0); } }  /* their transitions are with Progress */

/* ------------------------------------------------------------------ Button */
.mn-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1-5);
  height: var(--control-md); padding: 0 var(--space-4);
  font: inherit; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; /* text-label */
  white-space: nowrap; text-decoration: none; cursor: pointer; user-select: none;
  border: 1px solid transparent; border-radius: var(--radius-full);
  background: var(--bg-surface); color: var(--ink);
  transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}
.mn-btn:hover { text-decoration: none; }
.mn-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-full); }
.mn-btn .mn-icon { width: var(--icon-md); height: var(--icon-md); margin: 0 -2px; }
.mn-btn--primary { background: var(--primary); color: var(--on-primary); box-shadow: var(--shadow-xs); }
.mn-btn--primary:hover { background: var(--primary-hover); }
.mn-btn--primary:active { background: var(--primary-active); }
.mn-btn--secondary { background: var(--bg-surface); border-color: var(--border-strong); color: var(--ink); box-shadow: var(--shadow-xs); }
.mn-btn--secondary:hover { background: var(--bg-hover); }
.mn-btn--secondary:active { background: var(--bg-active); }
.mn-btn--ghost { background: transparent; color: var(--ink); }
.mn-btn--ghost:hover { background: var(--bg-hover); }
.mn-btn--ghost:active { background: var(--bg-active); }
.mn-btn--danger { background: var(--danger); color: var(--on-danger); box-shadow: var(--shadow-xs); }
.mn-btn--danger:hover { background: var(--danger-hover); }
.mn-btn--sm { height: var(--control-sm); padding: 0 var(--space-3); font-size: 0.8125rem; line-height: 1.125rem; gap: var(--space-1); } /* text-label-sm */
.mn-btn--sm .mn-icon { width: var(--icon-sm); height: var(--icon-sm); }
.mn-btn--lg { height: var(--control-lg); padding: 0 var(--space-5); font-size: 0.9375rem; line-height: 1.375rem; }
.mn-btn--icon { width: var(--control-md); padding: 0; }
.mn-btn--icon.mn-btn--sm { width: var(--control-sm); }
.mn-btn--icon.mn-btn--lg { width: var(--control-lg); }
.mn-btn--block { display: flex; width: 100%; }
.mn-btn[disabled], .mn-btn[aria-disabled="true"] {
  background: var(--bg-subtle); border-color: var(--border); color: var(--ink-disabled);
  box-shadow: none; cursor: not-allowed;
}
.mn-btn--ghost[disabled], .mn-btn--ghost[aria-disabled="true"] { background: transparent; border-color: transparent; }
.mn-btn[aria-busy="true"] { cursor: progress; }
.mn-btn-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

/* ------------------------------------------------------------------ Field: input, textarea, select */
.mn-field { display: flex; flex-direction: column; gap: var(--space-1-5); min-width: 0; }
.mn-field__label { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--ink); } /* text-label */
.mn-field__optional { font-weight: 400; color: var(--ink-muted); }
.mn-field__hint { font-size: 0.75rem; line-height: 1rem; letter-spacing: 0.01em; color: var(--ink-muted); } /* text-caption */
.mn-field__error { display: flex; gap: var(--space-1); align-items: flex-start; font-size: 0.8125rem; line-height: 1.125rem; font-weight: 500; color: var(--danger-ink); }
.mn-field__error .mn-icon { width: var(--icon-sm); height: var(--icon-sm); margin-top: 1px; }
.mn-input, .mn-textarea, .mn-select select {
  width: 100%; min-width: 0;
  font: inherit; font-size: 0.875rem; line-height: 1.25rem; color: var(--ink);
  background: var(--bg-surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--duration-fast) var(--ease-standard);
}
.mn-input { height: var(--control-md); padding: 0 var(--space-3); }
.mn-input--lg { height: var(--control-lg); font-size: 0.9375rem; }
.mn-textarea { min-height: 88px; padding: var(--space-2) var(--space-3); resize: vertical; display: block; }
.mn-input::placeholder, .mn-textarea::placeholder { color: var(--ink-muted); opacity: 1; }
.mn-input:hover, .mn-textarea:hover, .mn-select select:hover { border-color: var(--ink-muted); }
.mn-input:focus-visible, .mn-textarea:focus-visible, .mn-select select:focus-visible {
  outline: 2px solid var(--focus-ring); outline-offset: -1px; border-color: var(--focus-ring); border-radius: var(--radius-md);
}
.mn-input[aria-invalid="true"], .mn-textarea[aria-invalid="true"], .mn-select select[aria-invalid="true"] { border-color: var(--danger); }
.mn-input:disabled, .mn-textarea:disabled, .mn-select select:disabled {
  background: var(--bg-subtle); border-color: var(--border); color: var(--ink-disabled); box-shadow: none; cursor: not-allowed;
}
.mn-input[readonly], .mn-textarea[readonly] { background: var(--bg-subtle); box-shadow: none; }
.mn-select { position: relative; display: block; }
.mn-select select { appearance: none; -webkit-appearance: none; height: var(--control-md); padding: 0 calc(var(--space-3) + var(--icon-sm) + var(--space-2)) 0 var(--space-3); cursor: pointer; }
.mn-select__chevron { position: absolute; right: var(--space-3); top: 50%; width: var(--icon-sm); height: var(--icon-sm); transform: translateY(-50%) rotate(90deg); color: var(--ink-secondary); pointer-events: none; }
.mn-input-group { position: relative; display: block; }
.mn-input-group > .mn-icon { position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%); width: var(--icon-sm); height: var(--icon-sm); color: var(--ink-muted); pointer-events: none; }
.mn-input-group > .mn-input { padding-left: calc(var(--space-3) + var(--icon-sm) + var(--space-2)); }

/* ------------------------------------------------------------------ Choice: checkbox, radio */
.mn-choice { display: flex; align-items: flex-start; gap: var(--space-2); cursor: pointer; }
.mn-choice__text { display: flex; flex-direction: column; gap: var(--space-0-5); }
.mn-choice__label { font-size: 0.875rem; line-height: 1.25rem; color: var(--ink); }
.mn-choice__hint { font-size: 0.8125rem; line-height: 1.25rem; color: var(--ink-secondary); } /* text-body-sm */
.mn-choice-group { display: flex; flex-direction: column; gap: var(--space-3); border: 0; margin: 0; padding: 0; }
.mn-choice-group > legend { padding: 0; margin-bottom: var(--space-2); font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--ink); }
.mn-checkbox, .mn-radio {
  appearance: none; -webkit-appearance: none; flex: none;
  position: relative; width: 16px; height: 16px; margin: 2px 0 0;
  background: var(--bg-surface); border: 1px solid var(--border-strong);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.mn-checkbox { border-radius: calc(var(--radius-sm) - 2px); }
.mn-radio { border-radius: var(--radius-full); }
.mn-checkbox:hover, .mn-radio:hover { border-color: var(--ink-muted); }
.mn-checkbox:checked, .mn-checkbox:indeterminate, .mn-radio:checked { background: var(--primary); border-color: var(--primary); }
.mn-checkbox::before {
  content: ""; position: absolute; inset: 0; background: var(--on-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
  opacity: 0;
}
.mn-checkbox:checked::before { opacity: 1; }
.mn-checkbox:indeterminate::before {
  opacity: 1;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4.5 8h7'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4.5 8h7'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
}
.mn-radio::before { content: ""; position: absolute; inset: 4px; border-radius: var(--radius-full); background: var(--on-primary); opacity: 0; }
.mn-radio:checked::before { opacity: 1; }
.mn-checkbox:focus-visible, .mn-radio:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.mn-checkbox:focus-visible { border-radius: calc(var(--radius-sm) - 2px); }
.mn-radio:focus-visible { border-radius: var(--radius-full); }
.mn-checkbox:disabled, .mn-radio:disabled { background: var(--bg-subtle); border-color: var(--border); cursor: not-allowed; }
.mn-checkbox:disabled:checked, .mn-radio:disabled:checked { background: var(--bg-active); border-color: var(--bg-active); }
.mn-choice:has(:disabled) { cursor: not-allowed; }
.mn-choice:has(:disabled) .mn-choice__label { color: var(--ink-disabled); }

/* ------------------------------------------------------------------ SegmentedControl */
.mn-segmented {
  display: inline-flex; padding: var(--space-0-5); gap: var(--space-0-5);
  background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--radius-full);
}
.mn-segmented--block { display: flex; }
.mn-segmented__option { position: relative; flex: 1 1 0; display: flex; }
.mn-segmented__option input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.mn-segmented__option span {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: var(--space-1-5);
  height: calc(var(--control-md) - 6px); padding: 0 var(--space-3);
  font-size: 0.8125rem; line-height: 1.125rem; font-weight: 500; color: var(--ink-secondary); /* text-label-sm */
  border-radius: var(--radius-full); white-space: nowrap;
  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.mn-segmented__option input:hover + span { color: var(--ink); background: var(--bg-hover); }
.mn-segmented__option input:checked + span { background: var(--primary); color: var(--on-primary); }
.mn-segmented__option input:focus-visible + span { outline: 2px solid var(--focus-ring); outline-offset: 1px; }

/* ------------------------------------------------------------------ FileDrop */
.mn-dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-8) var(--space-6); text-align: center; cursor: pointer;
  background: var(--bg-subtle); border: 1px dashed var(--border-strong); border-radius: var(--radius-lg);
  transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.mn-dropzone:hover, .mn-dropzone.is-dragover { background: var(--primary-subtle); border-color: var(--primary); }
.mn-dropzone:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.mn-dropzone__icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius-md); background: var(--bg-surface); border: 1px solid var(--border); color: var(--ink-secondary); }
.mn-dropzone__title { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--ink); }
.mn-dropzone__title u { color: var(--ink-link); text-decoration: none; }
.mn-dropzone__hint { font-size: 0.75rem; line-height: 1rem; color: var(--ink-muted); }
.mn-filelist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.mn-file {
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3);
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md);
}
.mn-file__icon { color: var(--ink-secondary); }
.mn-file__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.mn-file__name { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mn-file__meta { font-size: 0.75rem; line-height: 1rem; color: var(--ink-muted); }
.mn-file--error { border-color: var(--danger); }
.mn-file--error .mn-file__meta { color: var(--danger-ink); }

/* ------------------------------------------------------------------ Badge */
.mn-badge {
  display: inline-flex; align-items: center; gap: var(--space-1); vertical-align: middle;
  height: 22px; padding: 0 var(--space-2);
  font-size: 0.75rem; line-height: 1rem; font-weight: 500; white-space: nowrap;
  border-radius: var(--radius-full);
  background: var(--bg-hover); color: var(--ink-secondary);
}
.mn-badge .mn-icon { width: 14px; height: 14px; margin-left: -2px; }
.mn-badge__dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; flex: none; }
.mn-badge--info { background: var(--info-subtle); color: var(--info-ink); }
.mn-badge--success { background: var(--success-subtle); color: var(--success-ink); }
.mn-badge--warning { background: var(--warning-subtle); color: var(--warning-ink); }
.mn-badge--danger { background: var(--danger-subtle); color: var(--danger-ink); }
.mn-badge--accent { background: var(--accent-subtle); color: var(--accent-ink); }
.mn-badge--outline { background: transparent; box-shadow: inset 0 0 0 1px var(--border); color: var(--ink-secondary); }
.mn-badge--count { height: 18px; min-width: 18px; padding: 0 5px; justify-content: center; border-radius: var(--radius-full); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ Alert */
.mn-alert {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--bg-subtle); color: var(--ink);
}
.mn-alert__icon { margin-top: 1px; color: var(--ink-secondary); }
.mn-alert__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.mn-alert__title { font-size: 0.875rem; line-height: 1.375rem; font-weight: 600; color: var(--ink); }
.mn-alert__text { font-size: 0.875rem; line-height: 1.375rem; color: var(--ink); }
.mn-alert__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.mn-alert__close { margin: -6px -8px -6px 0; }
.mn-alert--info { background: var(--info-subtle); border-color: var(--info-border); }
.mn-alert--info .mn-alert__icon { color: var(--info-ink); }
.mn-alert--success { background: var(--success-subtle); border-color: var(--success-border); }
.mn-alert--success .mn-alert__icon { color: var(--success-ink); }
.mn-alert--warning { background: var(--warning-subtle); border-color: var(--warning-border); }
.mn-alert--warning .mn-alert__icon { color: var(--warning-ink); }
.mn-alert--danger { background: var(--danger-subtle); border-color: var(--danger-border); }
.mn-alert--danger .mn-alert__icon { color: var(--danger-ink); }

/* ------------------------------------------------------------------ Progress */
.mn-progress { display: flex; flex-direction: column; gap: var(--space-1-5); }
.mn-progress__meta { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.mn-progress__label { font-size: 0.8125rem; line-height: 1.125rem; font-weight: 500; color: var(--ink); }
.mn-progress__value { font-size: 0.8125rem; line-height: 1.125rem; color: var(--ink-secondary); font-variant-numeric: tabular-nums; }
.mn-progress__track { display: flex; gap: 2px; height: 8px; overflow: hidden; border-radius: var(--radius-full); background: var(--viz-track); }
.mn-progress--sm .mn-progress__track { height: 4px; }
.mn-progress__bar { height: 100%; background: var(--viz-1); border-radius: var(--radius-full); transform-origin: left center; transition: width var(--duration-slow) var(--ease-standard), transform var(--duration-slow) var(--ease-standard); }
.mn-progress--complete .mn-progress__bar { background: var(--success); }
.mn-progress__seg { height: 100%; transform-origin: left center; transition: transform var(--duration-slow) var(--ease-standard); }
.mn-progress__seg:first-child { border-radius: var(--radius-full) 0 0 var(--radius-full); }
.mn-progress__seg--mastered { background: var(--success); }
.mn-progress__seg--learning { background: var(--viz-1); }
.mn-progress__seg--due { background: var(--warning); }
.mn-progress__legend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: 0; padding: 0; list-style: none; }
.mn-progress__legend li { display: inline-flex; align-items: center; gap: var(--space-1-5); font-size: 0.75rem; line-height: 1rem; color: var(--ink-secondary); }
.mn-progress__swatch { width: 8px; height: 8px; border-radius: var(--radius-xs); flex: none; }
.mn-progress__swatch--empty { box-shadow: inset 0 0 0 1px var(--border-strong); }

/* ------------------------------------------------------------------ EmptyState */
.mn-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); padding: var(--space-12) var(--space-6); }
.mn-empty__icon { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: var(--space-2); border-radius: var(--radius-lg); background: var(--bg-subtle); border: 1px solid var(--border); color: var(--ink-secondary); }
.mn-empty__title { font-size: 1.125rem; line-height: 1.625rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); } /* text-heading-md */
.mn-empty__text { max-width: 420px; font-size: 0.875rem; line-height: 1.375rem; color: var(--ink-secondary); }
.mn-empty__actions { display: flex; gap: var(--space-2); margin-top: var(--space-3); }

/* ------------------------------------------------------------------ Card */
.mn-card { display: flex; flex-direction: column; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); min-width: 0; }
.mn-card--raised { box-shadow: var(--shadow-sm); }
.mn-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) var(--space-5) 0; }
.mn-card__title { font-size: 0.9375rem; line-height: 1.375rem; font-weight: 600; letter-spacing: -0.005em; color: var(--ink); } /* text-heading-sm */
.mn-card__subtitle { margin-top: var(--space-0-5); font-size: 0.8125rem; line-height: 1.25rem; color: var(--ink-secondary); }
.mn-card__body { padding: var(--space-4) var(--space-5) var(--space-5); color: var(--ink-secondary); }
.mn-card__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-5); border-top: 1px solid var(--border-subtle); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
a.mn-card, .mn-card--interactive { color: inherit; text-decoration: none; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }
a.mn-card:hover, .mn-card--interactive:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); text-decoration: none; }
a.mn-card:focus-visible { outline-offset: 2px; border-radius: var(--radius-lg); }
.mn-card--selected { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }

/* ------------------------------------------------------------------ Table */
.mn-table-wrap { overflow: auto; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.mn-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.875rem; line-height: 1.25rem; }
.mn-table th {
  position: sticky; top: 0; z-index: var(--z-sticky);
  padding: var(--space-2) var(--space-4); text-align: left; white-space: nowrap;
  font-size: 0.8125rem; line-height: 1.125rem; font-weight: 500; color: var(--ink-secondary); /* text-label-sm */
  background: var(--bg-surface); border-bottom: 1px solid var(--border);
}
.mn-table td { padding: var(--space-3) var(--space-4); color: var(--ink); vertical-align: middle; border-bottom: 1px solid var(--border-subtle); }
.mn-table tbody tr:last-child td { border-bottom: 0; }
.mn-table tbody tr:hover td { background: var(--bg-hover); }
.mn-table tbody tr[aria-selected="true"] td { background: var(--primary-subtle); }
.mn-table--compact td { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.mn-table__num { text-align: right !important; font-variant-numeric: tabular-nums; }
.mn-table__secondary { display: block; font-size: 0.8125rem; line-height: 1.25rem; color: var(--ink-secondary); }
.mn-table__person { display: flex; align-items: center; gap: var(--space-3); }
.mn-table__actions { width: 1%; white-space: nowrap; text-align: right !important; }
.mn-table__sort { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0; font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.mn-table__sort[aria-sort] , th[aria-sort] .mn-table__sort { color: var(--ink); }

/* ------------------------------------------------------------------ StatTile */
.mn-stat { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4) var(--space-5); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); min-width: 0; }
.mn-stat__label { display: flex; align-items: center; gap: var(--space-1-5); font-size: 0.8125rem; line-height: 1.125rem; font-weight: 500; color: var(--ink-secondary); }
.mn-stat__value { font-size: 2rem; line-height: 2.5rem; font-weight: 600; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; } /* text-metric */
.mn-stat__unit { margin-left: 1px; font-size: 0.9375rem; font-weight: 500; letter-spacing: 0; color: var(--ink-secondary); }
.mn-stat__meta { font-size: 0.75rem; line-height: 1rem; color: var(--ink-muted); }
.mn-stat__delta { font-weight: 500; }
.mn-stat__delta--up { color: var(--success-ink); }
.mn-stat__delta--down { color: var(--danger-ink); }
.mn-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-4); }

/* ------------------------------------------------------------------ Avatar */
.mn-avatar {
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: var(--avatar-md); height: var(--avatar-md); border-radius: var(--radius-full);
  background: var(--bg-active); color: var(--ink);
  font-size: 0.75rem; line-height: 1; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; user-select: none;
}
.mn-avatar--sm { width: var(--avatar-sm); height: var(--avatar-sm); font-size: 0.625rem; }
.mn-avatar--lg { width: var(--avatar-lg); height: var(--avatar-lg); font-size: 0.875rem; }
.mn-avatar .mn-icon { width: 60%; height: 60%; }
.mn-avatar--tutor { border-radius: var(--radius-md); background: var(--bg-inverse); color: var(--ink-inverse); }
.mn-avatar--tutor.mn-avatar--sm { border-radius: var(--radius-sm); }
.mn-avatar--customer { background: var(--accent-subtle); color: var(--accent-ink); }
.mn-avatar__status { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: var(--radius-full); border: 2px solid var(--bg-surface); background: var(--ink-muted); }
.mn-avatar__status--active { background: var(--success); }
.mn-avatar-group { display: inline-flex; }
.mn-avatar-group .mn-avatar { box-shadow: 0 0 0 2px var(--bg-surface); }
.mn-avatar-group .mn-avatar + .mn-avatar { margin-left: -4px; }

/* ------------------------------------------------------------------ ChecklistItem */
.mn-checklist { list-style: none; margin: 0; padding: 0; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.mn-checklist__item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-subtle); }
.mn-checklist__item:last-child { border-bottom: 0; }
.mn-checklist__status { width: var(--icon-md); height: var(--icon-md); flex: none; display: grid; place-items: center; color: var(--ink-muted); }
.mn-checklist__ring { width: 18px; height: 18px; border-radius: var(--radius-full); border: 1.5px solid var(--border-strong); }
.mn-checklist__item[data-state="in-progress"] .mn-checklist__ring { border-color: var(--viz-1); border-style: dashed; }
.mn-checklist__item[data-state="ready"] .mn-checklist__ring { border-color: var(--viz-1); background: radial-gradient(circle, var(--viz-1) 0 4px, transparent 4.5px); }
.mn-checklist__item[data-state="signed-off"] .mn-checklist__status { color: var(--success); }
.mn-checklist__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-0-5); }
.mn-checklist__title { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--ink); }
.mn-checklist__meta { font-size: 0.8125rem; line-height: 1.25rem; color: var(--ink-secondary); }
.mn-checklist__action { flex: none; display: flex; align-items: center; gap: var(--space-2); }

/* ------------------------------------------------------------------ ChatMessage */
.mn-chat { display: flex; flex-direction: column; gap: var(--space-5); max-width: var(--reading-max); margin: 0 auto; }
.mn-msg { display: flex; gap: var(--space-3); align-items: flex-start; }
.mn-msg__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1-5); }
.mn-msg__head { display: flex; align-items: baseline; gap: var(--space-2); }
.mn-msg__author { font-size: 0.8125rem; line-height: 1.125rem; font-weight: 600; color: var(--ink); }
.mn-msg__time { font-size: 0.75rem; line-height: 1rem; color: var(--ink-muted); }
.mn-msg__text { font-size: 1rem; line-height: 1.625rem; color: var(--ink); } /* text-body-lg */
.mn-msg__text p + p { margin-top: var(--space-3); }
.mn-msg__text strong { font-weight: 600; }
.mn-msg__actions { display: flex; gap: var(--space-1); margin-left: -8px; opacity: 0; transition: opacity var(--duration-fast) var(--ease-standard); }
.mn-msg:hover .mn-msg__actions, .mn-msg:focus-within .mn-msg__actions, .mn-msg__actions--always { opacity: 1; }
.mn-msg__actions .mn-btn { color: var(--ink-secondary); }
.mn-msg--learner { justify-content: flex-end; }
.mn-msg--learner .mn-msg__body { flex: 0 1 auto; max-width: 80%; align-items: flex-end; }
.mn-msg--learner .mn-msg__text { padding: var(--space-2) var(--space-4); background: var(--bg-hover); border-radius: var(--radius-lg); }
.mn-msg--customer .mn-msg__text { padding: var(--space-3) var(--space-4); background: var(--accent-subtle); border-radius: var(--radius-lg); }
.mn-msg--flagged .mn-msg__text { box-shadow: inset 0 0 0 1px var(--danger-border); }
.mn-chat-event { display: flex; align-items: center; gap: var(--space-3); font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: var(--ink-muted); }
.mn-chat-event::before, .mn-chat-event::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* ------------------------------------------------------------------ Citation */
.mn-cite {
  display: inline-flex; align-items: center; height: 20px; padding: 0 var(--space-1-5); margin: 0 1px; vertical-align: 1px;
  font-family: var(--font-mono); font-size: 0.75rem; line-height: 1rem; font-weight: 500; /* text-code-sm */
  color: var(--primary-ink); background: var(--primary-subtle); border-radius: var(--radius-sm);
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.mn-cite:hover { background: var(--primary-subtle-hover); text-decoration: none; }
.mn-cite:focus-visible { border-radius: var(--radius-sm); }
.mn-source { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-4); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.mn-source__head { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.mn-source__head .mn-icon { width: var(--icon-sm); height: var(--icon-sm); color: var(--ink-secondary); }
.mn-source__title { flex: 1; min-width: 0; font-size: 0.8125rem; line-height: 1.125rem; font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mn-source__ref { font-family: var(--font-mono); font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: var(--ink-secondary); white-space: nowrap; }
.mn-source__passage { margin: 0; font-size: 0.8125rem; line-height: 1.25rem; color: var(--ink-secondary); }
.mn-mark { background: var(--accent-subtle); color: var(--ink); padding: 1px 2px; border-radius: var(--radius-xs); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.mn-source--disputed { border-color: var(--warning-border); }

/* ------------------------------------------------------------------ Composer */
.mn-composer {
  display: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5);
  background: var(--bg-surface); border: 1px solid var(--border-strong); border-radius: var(--radius-xl); box-shadow: var(--shadow-md);
  transition: border-color var(--duration-fast) var(--ease-standard);
}
.mn-composer:focus-within { outline: 2px solid var(--focus-ring); outline-offset: -1px; border-color: var(--focus-ring); }
.mn-composer__input {
  width: 100%; min-height: 26px; max-height: 200px; padding: var(--space-1-5) 0 0; margin: 0; resize: none;
  font: inherit; font-size: 1rem; line-height: 1.625rem; color: var(--ink); background: transparent; border: 0; outline: none;
}
.mn-composer__input::placeholder { color: var(--ink-muted); }
.mn-composer__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.mn-composer__hint { font-size: 0.75rem; line-height: 1rem; color: var(--ink-muted); }
.mn-composer__hint kbd { font-family: var(--font-mono); font-size: 0.6875rem; padding: 1px 4px; border: 1px solid var(--border); border-radius: var(--radius-xs); background: var(--bg-subtle); color: var(--ink-secondary); }

/* ------------------------------------------------------------------ PracticeItem */
.mn-practice { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.mn-practice__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.mn-practice__step { font-size: 0.75rem; line-height: 1rem; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.mn-practice__prompt { font-size: 1rem; line-height: 1.625rem; color: var(--ink); }
.mn-practice__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.mn-options { display: flex; flex-direction: column; gap: var(--space-2); border: 0; margin: 0; padding: 0; }
.mn-option {
  position: relative; display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); cursor: pointer;
  background: var(--bg-surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  font-size: 0.875rem; line-height: 1.375rem; color: var(--ink);
  transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.mn-option input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.mn-option:hover { background: var(--bg-hover); }
.mn-option__key {
  flex: none; display: grid; place-items: center; width: 22px; height: 22px;
  font-family: var(--font-mono); font-size: 0.75rem; line-height: 1; font-weight: 600;
  color: var(--ink-secondary); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
}
.mn-option__text { flex: 1; }
.mn-option__verdict { display: none; align-items: center; gap: var(--space-1); flex: none; font-size: 0.8125rem; line-height: 1.375rem; font-weight: 500; }
.mn-option:has(input:checked) { background: var(--primary-subtle); border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.mn-option:has(input:checked) .mn-option__key { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.mn-option:has(input:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.mn-options .mn-option[data-verdict="correct"] { background: var(--success-subtle); border-color: var(--success); box-shadow: inset 0 0 0 1px var(--success); }
.mn-options .mn-option[data-verdict="correct"] .mn-option__key { background: var(--success); border-color: var(--success); color: var(--on-success); }
.mn-options .mn-option[data-verdict="correct"] .mn-option__verdict { display: inline-flex; color: var(--success-ink); }
.mn-options .mn-option[data-verdict="incorrect"] { background: var(--danger-subtle); border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
.mn-options .mn-option[data-verdict="incorrect"] .mn-option__key { background: var(--danger); border-color: var(--danger); color: var(--on-danger); }
.mn-options .mn-option[data-verdict="incorrect"] .mn-option__verdict { display: inline-flex; color: var(--danger-ink); }
.mn-options[data-locked] .mn-option { cursor: default; }
.mn-options[data-locked] .mn-option:not([data-verdict]) { color: var(--ink-secondary); }
.mn-hint { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-4); background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--radius-md); }
.mn-hint__head { display: flex; align-items: center; gap: var(--space-2); font-size: 0.8125rem; line-height: 1.125rem; font-weight: 500; color: var(--ink); }
.mn-hint__head .mn-icon { width: var(--icon-sm); height: var(--icon-sm); color: var(--warning-ink); }
.mn-hint__steps { display: inline-flex; gap: 3px; margin-left: auto; }
.mn-hint__steps i { width: 16px; height: 4px; border-radius: var(--radius-full); background: var(--viz-track); }
.mn-hint__steps i.is-used { background: var(--warning); }
.mn-hint__text { font-size: 0.875rem; line-height: 1.375rem; color: var(--ink); }

/* ------------------------------------------------------------------ Tabs */
.mn-tabs { display: flex; gap: var(--space-5); border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.mn-tab {
  position: relative; display: inline-flex; align-items: center; gap: var(--space-1-5);
  height: 40px; padding: 0; margin-bottom: -1px;
  font: inherit; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; white-space: nowrap;
  color: var(--ink-secondary); background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.mn-tab:hover { color: var(--ink); text-decoration: none; border-bottom-color: var(--border-strong); }
.mn-tab[aria-selected="true"], .mn-tab[aria-current="page"] { color: var(--ink); border-bottom-color: var(--primary); }
.mn-tab:focus-visible { outline-offset: -2px; border-radius: var(--radius-sm); }
.mn-tab .mn-badge--count { background: var(--bg-hover); color: var(--ink-secondary); }
.mn-tab[aria-selected="true"] .mn-badge--count { background: var(--primary-subtle); color: var(--primary-ink); }

/* ------------------------------------------------------------------ PageHeader & breadcrumb */
.mn-page-header { display: flex; flex-direction: column; gap: var(--space-2); padding-bottom: var(--space-6); }
.mn-page-header__row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; }
.mn-page-header__title { font-size: 2rem; line-height: 2.5rem; font-weight: 600; letter-spacing: -0.03em; color: var(--ink); } /* text-heading-xl */
.mn-page-header__desc { margin-top: var(--space-1); max-width: 640px; font-size: 0.875rem; line-height: 1.375rem; color: var(--ink-secondary); }
.mn-page-header__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-top: var(--space-2); font-size: 0.8125rem; line-height: 1.25rem; color: var(--ink-secondary); }
.mn-page-header__meta > * { display: inline-flex; align-items: center; gap: var(--space-1-5); }
.mn-page-header__meta .mn-icon { width: var(--icon-sm); height: var(--icon-sm); color: var(--ink-muted); }
.mn-page-header__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.mn-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1); font-size: 0.8125rem; line-height: 1.125rem; color: var(--ink-secondary); }
.mn-breadcrumb ol { display: contents; list-style: none; }
.mn-breadcrumb a { color: var(--ink-secondary); }
.mn-breadcrumb a:hover { color: var(--ink); }
.mn-breadcrumb__sep { width: 14px; height: 14px; color: var(--ink-muted); }
.mn-breadcrumb [aria-current="page"] { color: var(--ink); font-weight: 500; }

/* ------------------------------------------------------------------ AppShell */
.mn-shell { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); min-height: 100vh; background: var(--bg-canvas); }
.mn-sidebar {
  position: sticky; top: 0; height: 100vh; z-index: var(--z-nav);
  display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-4) var(--space-3);
  background: var(--nav-bg); border-right: 1px solid var(--nav-border); color: var(--nav-ink);
  overflow-y: auto;
}
.mn-sidebar__brand { display: flex; align-items: center; height: 40px; padding: 0 var(--space-2); }
.mn-sidebar__brand img { height: 28px; width: auto; display: block; }
.mn-sidebar__footer { margin-top: auto; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-2) 0; border-top: 1px solid var(--nav-border); }
.mn-sidebar__user { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mn-sidebar__name { font-size: 0.8125rem; line-height: 1.125rem; font-weight: 500; color: var(--nav-ink-active); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mn-sidebar__role { font-size: 0.75rem; line-height: 1rem; color: var(--nav-ink-muted); }
.mn-sidebar .mn-avatar { background: var(--nav-active); color: var(--nav-ink-active); }
.mn-sidebar .mn-btn--ghost { color: var(--nav-ink); }
.mn-sidebar .mn-btn--ghost:hover { background: var(--nav-hover); color: var(--nav-ink-active); }
.mn-nav { display: flex; flex-direction: column; gap: var(--space-0-5); }
.mn-nav__section { margin: var(--space-4) 0 var(--space-1); padding: 0 var(--space-2); font-family: var(--font-mono); font-size: 0.6875rem; line-height: 1rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nav-ink-muted); }
.mn-nav__section:first-child { margin-top: 0; }
.mn-nav__item {
  display: flex; align-items: center; gap: var(--space-3); height: 36px; padding: 0 var(--space-2);
  font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--nav-ink); text-decoration: none;
  border-radius: var(--radius-md);
  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.mn-nav__item .mn-icon { color: var(--nav-ink); }
.mn-nav__item:hover { background: var(--nav-hover); color: var(--nav-ink-active); text-decoration: none; }
.mn-nav__item[aria-current="page"] { background: var(--nav-active); color: var(--nav-ink-active); }
.mn-nav__item[aria-current="page"] .mn-icon { color: var(--nav-accent); }
.mn-nav__item:focus-visible { outline-offset: 0; border-radius: var(--radius-md); }
.mn-nav__item .mn-badge--count { margin-left: auto; background: var(--nav-active); color: var(--nav-ink-active); }
.mn-shell__main { display: flex; flex-direction: column; min-width: 0; }
.mn-topbar {
  position: sticky; top: 0; z-index: var(--z-nav);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  height: var(--topbar-height); padding: 0 var(--space-8);
  background: var(--bg-canvas); background: color-mix(in srgb, var(--bg-canvas) 85%, transparent); border-bottom: 1px solid var(--border-subtle);
  -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
}
.mn-topbar__menu { display: none; }
.mn-shell__content { width: 100%; max-width: var(--content-max); margin: 0 auto; padding: var(--space-8); }
.mn-shell__content--reading { max-width: calc(var(--reading-max) + 2 * var(--space-8)); }
@media (max-width: 1023px) {
  .mn-shell { grid-template-columns: minmax(0, 1fr); }
  .mn-sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: var(--sidebar-width); transform: translateX(-100%); transition: transform var(--duration-base) var(--ease-standard); }
  .mn-shell[data-nav-open] .mn-sidebar { transform: none; box-shadow: var(--shadow-lg); }
  .mn-topbar { padding: 0 var(--space-4); }
  .mn-topbar__menu { display: inline-flex; }
  .mn-shell__content { padding: var(--space-6) var(--space-4); }
}

/* ------------------------------------------------------------------ Dialog */
.mn-overlay { position: fixed; inset: 0; z-index: var(--z-overlay); display: grid; place-items: center; padding: var(--space-4); background: var(--bg-overlay); }
dialog.mn-dialog { margin: auto; }
dialog.mn-dialog::backdrop { background: var(--bg-overlay); }
.mn-dialog {
  z-index: var(--z-dialog); width: 100%; max-width: var(--dialog-sm); max-height: calc(100vh - 2 * var(--space-8));
  display: flex; flex-direction: column; padding: 0; color: var(--ink);
  background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
}
.mn-dialog--md { max-width: var(--dialog-md); }
.mn-dialog__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: var(--space-6) var(--space-6) 0; }
.mn-dialog__title { font-size: 1.125rem; line-height: 1.625rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); } /* text-heading-md */
.mn-dialog__header .mn-btn { margin: -6px -8px 0 0; color: var(--ink-secondary); }
.mn-dialog__body { flex: 1 1 auto; min-height: 0; padding: var(--space-3) var(--space-6) var(--space-6); overflow-y: auto; color: var(--ink-secondary); display: flex; flex-direction: column; gap: var(--space-4); }
.mn-dialog__footer { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-4) var(--space-6); border-top: 1px solid var(--border-subtle); border-radius: 0 0 var(--radius-xl) var(--radius-xl); }

/* ------------------------------------------------------------------ Forced colours */
/* A contrast theme (Windows' contrast themes, forced-colors) keeps text and borders in the theme's colours but drops
   backgrounds and shadows, so a state shown by a fill alone vanished: a picked option, a ticked box, the rating
   chosen, a bar's fill, the page you're on (user testing, 26 October 2026; WCAG 1.4.11). Each shows here in the
   theme's own colours: the browser's own box and button, or Highlight. */
@media (forced-colors: active) {
  .mn-checkbox, .mn-radio { appearance: auto; -webkit-appearance: auto; }
  .mn-checkbox::before, .mn-radio::before { content: none; }
  .mn-option:has(input:checked) { padding: calc(var(--space-3) - 2px) calc(var(--space-4) - 2px); border: 3px solid Highlight; }  /* a border, not an outline, so focus keeps its own */
  .mn-option:has(input:checked) .mn-option__key { forced-color-adjust: none; color: HighlightText; background: Highlight; border-color: Highlight; }
  .mn-option:has(input:focus-visible) { outline: 2px solid CanvasText; outline-offset: 2px; }
  .mn-segmented__option input:checked + span { forced-color-adjust: none; color: HighlightText; background: Highlight; }
  .mn-progress__track { forced-color-adjust: none; background: Canvas; box-shadow: inset 0 0 0 1px CanvasText; }
  .mn-progress__bar, .mn-progress__seg--mastered { forced-color-adjust: none; background: Highlight; }
  .mn-progress__seg--learning { forced-color-adjust: none; background: CanvasText; }
  .mn-progress__seg--due { forced-color-adjust: none; background: GrayText; }
  .mn-progress__swatch--empty { forced-color-adjust: none; box-shadow: inset 0 0 0 1px CanvasText; }
  .mn-card--selected, .mn-nav__item[aria-current="page"] { outline: 2px solid Highlight; outline-offset: -2px; }
  .mn-tab[aria-selected="true"], .mn-tab[aria-current="page"] { border-bottom-color: Highlight; }
}