/* ============================================================
   The Membrane Palette — component library
   Version 2.2.0

   GENERATED FILE — do not edit by hand.
   Sources:         components/<name>/<name>.css
   Regenerate with: npm run build:components

   35 components, all in @layer components: any unlayered
   CSS you write wins without !important. Requires the tokens
   (tokens/design-tokens.css) to be loaded first.
   ============================================================ */

@layer tokens, base, components;

@layer components {

  /* ---- Layout (layout) -------------------------------------- */

  /* Layout primitives — compose pages from these instead of writing layout CSS.
     Gaps map 1:1 to the spacing scale: data-gap="4" → var(--space-4). */

  .mp-container {
    --mp-container-max: var(--container-xl);
    box-sizing: border-box;
    width: min(100% - 2 * var(--site-margin), var(--mp-container-max));
    margin-inline: auto;
  }

  .mp-container[data-size="sm"] { --mp-container-max: var(--container-sm); }
  .mp-container[data-size="md"] { --mp-container-max: var(--container-md); }
  .mp-container[data-size="lg"] { --mp-container-max: var(--container-lg); }

  .mp-stack {
    --mp-gap: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--mp-gap);
    min-width: 0;
  }

  .mp-cluster {
    --mp-gap: var(--space-3);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mp-gap);
    min-width: 0;
  }

  .mp-cluster[data-justify="between"] { justify-content: space-between; }
  .mp-cluster[data-justify="center"] { justify-content: center; }
  .mp-cluster[data-justify="end"] { justify-content: flex-end; }
  .mp-cluster[data-align="start"] { align-items: flex-start; }
  .mp-cluster[data-align="baseline"] { align-items: baseline; }

  .mp-grid {
    --mp-gap: var(--space-6);
    --mp-grid-min: 16rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--mp-grid-min), 100%), 1fr));
    gap: var(--mp-gap);
    min-width: 0;
  }

  .mp-grid[data-min="sm"] { --mp-grid-min: 12rem; }
  .mp-grid[data-min="lg"] { --mp-grid-min: 22rem; }

  /* The primitive owns spacing between its children: default margins on
     headings and paragraphs would otherwise stack on top of the gap. */
  :is(.mp-stack, .mp-cluster, .mp-grid) > * {
    margin-block: 0;
  }

  :is(.mp-stack, .mp-cluster, .mp-grid)[data-gap="0"] { --mp-gap: 0; }
  :is(.mp-stack, .mp-cluster, .mp-grid)[data-gap="1"] { --mp-gap: var(--space-1); }
  :is(.mp-stack, .mp-cluster, .mp-grid)[data-gap="2"] { --mp-gap: var(--space-2); }
  :is(.mp-stack, .mp-cluster, .mp-grid)[data-gap="3"] { --mp-gap: var(--space-3); }
  :is(.mp-stack, .mp-cluster, .mp-grid)[data-gap="4"] { --mp-gap: var(--space-4); }
  :is(.mp-stack, .mp-cluster, .mp-grid)[data-gap="5"] { --mp-gap: var(--space-5); }
  :is(.mp-stack, .mp-cluster, .mp-grid)[data-gap="6"] { --mp-gap: var(--space-6); }
  :is(.mp-stack, .mp-cluster, .mp-grid)[data-gap="8"] { --mp-gap: var(--space-8); }
  :is(.mp-stack, .mp-cluster, .mp-grid)[data-gap="10"] { --mp-gap: var(--space-10); }
  :is(.mp-stack, .mp-cluster, .mp-grid)[data-gap="12"] { --mp-gap: var(--space-12); }
  :is(.mp-stack, .mp-cluster, .mp-grid)[data-gap="16"] { --mp-gap: var(--space-16); }

  /* Vertical rhythm for page sections. */
  .mp-section {
    --mp-section-space: var(--space-20);
    box-sizing: border-box;
    padding-block: var(--mp-section-space);
  }

  .mp-section[data-size="sm"] { --mp-section-space: var(--space-12); }
  .mp-section[data-size="lg"] { --mp-section-space: var(--space-32); }

  .mp-section[data-tone="secondary"] {
    background-color: var(--color-bg-secondary);
  }

  /* Paints a themed surface. Required wherever data-theme flips a subtree,
     because the subtree otherwise shows its parent's background. */
  .mp-surface {
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
  }

  .mp-surface[data-tone="secondary"] { background-color: var(--color-bg-secondary); }
  .mp-surface[data-tone="elevated"] { background-color: var(--color-bg-elevated); }

  /* Hidden visually, still announced by screen readers. Becomes visible on focus
     so it can also host skip links and other focusable helpers. */
  .mp-visually-hidden:not(:focus, :active, :focus-within) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* ---- Text (text) ------------------------------------------ */

  /* Text — tone and line length for running copy, so pages never need inline
     color or max-width styles. Pair with the .type-* size composites. */

  .mp-text {
    margin: 0;
  }

  .mp-text[data-tone="muted"] { color: var(--color-text-secondary); }
  .mp-text[data-tone="subtle"] { color: var(--color-text-tertiary); }
  .mp-text[data-tone="human"] { color: var(--color-human-text); }
  .mp-text[data-tone="digital"] { color: var(--color-digital-text); }

  /* Cap line length at the reading measure (65ch). */
  .mp-text[data-measure] {
    max-width: var(--measure);
  }

  /* ---- Prose (prose) ---------------------------------------- */

  /* Long-form content styled from plain HTML (Markdown output, CMS content).
     Every descendant selector is wrapped in :where() so one class can style
     a whole article while staying trivially overridable. */

  .mp-prose {
    max-width: var(--measure);
    color: var(--color-text-primary);
    font-family: var(--font-sans);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    overflow-wrap: break-word;
  }

  .mp-prose :where(h1, h2, h3, h4) {
    margin-block: 1.75em 0.5em;
    color: var(--color-text-primary);
  }

  .mp-prose :where(h1, h2, h3) {
    font-family: var(--font-serif);
  }

  .mp-prose :where(h1) {
    font-size: var(--text-h1);
    font-weight: var(--weight-bold);
    line-height: var(--leading-heading);
    letter-spacing: var(--tracking-heading);
  }

  .mp-prose :where(h2) {
    font-size: var(--text-h2);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-heading);
    letter-spacing: var(--tracking-heading);
  }

  .mp-prose :where(h3) {
    font-size: var(--text-h3);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-subheading);
    letter-spacing: var(--tracking-subheading);
  }

  .mp-prose :where(h4) {
    font-family: var(--font-sans);
    font-size: var(--text-h4);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-subheading);
  }

  .mp-prose :where(p, ul, ol, dl, blockquote, pre, figure, table) {
    margin-block: 0 1.25em;
  }

  .mp-prose > :where(:first-child) { margin-block-start: 0; }
  .mp-prose > :where(:last-child) { margin-block-end: 0; }

  .mp-prose :where(a) {
    color: var(--color-text-accent);
    text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
    text-underline-offset: 0.2em;
    border-radius: var(--radius-sm);
  }

  .mp-prose :where(a:hover) { text-decoration-color: currentColor; }

  .mp-prose :where(a:focus-visible) {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  .mp-prose :where(strong, b) { font-weight: var(--weight-semibold); }

  .mp-prose :where(ul, ol) { padding-inline-start: 1.5em; }
  .mp-prose :where(li + li) { margin-block-start: 0.375em; }
  .mp-prose :where(li)::marker { color: var(--color-text-tertiary); }

  .mp-prose :where(blockquote) {
    margin-inline: 0;
    padding-inline-start: var(--space-6);
    border-inline-start: var(--border-width-thick) solid var(--color-action-primary);
    font-family: var(--font-serif);
    font-size: var(--text-body-lg);
    font-style: italic;
    line-height: var(--leading-body-lg);
  }

  .mp-prose :where(:not(pre) > code) {
    padding: 0.125em 0.375em;
    border-radius: var(--radius-sm);
    background-color: var(--color-bg-tertiary);
    font-family: var(--font-mono);
    font-size: 0.875em;
  }

  /* Linked code keeps the mono face but sits on the page surface: link
     color on the code wash is 4.0:1 in light mode. */
  .mp-prose :where(a > code) {
    padding-inline: 0;
    background-color: transparent;
  }

  .mp-prose :where(pre) {
    overflow-x: auto;
    padding: var(--space-5) var(--space-6);
    border: var(--border-width-thin) solid var(--code-border);
    border-radius: var(--radius-md);
    background-color: var(--code-bg);
    color: var(--code-text);
    font-family: var(--font-mono);
    font-size: var(--text-code);
    line-height: var(--leading-code);
  }

  .mp-prose :where(hr) {
    height: var(--border-width-thin);
    margin-block: var(--space-12);
    border: 0;
    background: var(--gradient-divider);
  }

  .mp-prose :where(img, video) {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
  }

  .mp-prose :where(figcaption) {
    margin-block-start: var(--space-2);
    color: var(--color-text-secondary);
    font-size: var(--text-small);
    line-height: var(--leading-small);
  }

  .mp-prose :where(table) {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-small);
  }

  .mp-prose :where(th, td) {
    padding: var(--space-2) var(--space-3);
    border-block-end: var(--border-default);
    text-align: start;
  }

  .mp-prose :where(th) { font-weight: var(--weight-semibold); }

  /* On paper a link can't be clicked: print where it goes. */
  @media print {
    .mp-prose :where(a[href^="http"])::after {
      content: " (" attr(href) ")";
      color: var(--color-text-secondary);
      font-size: 0.85em;
      overflow-wrap: anywhere;
    }
  }

  /* ---- Button (button) -------------------------------------- */

  /* Button — pill-shaped actions. Variants only reassign the --mp-button-*
     knobs; the rules below them never change. */

  .mp-button {
    --mp-button-bg: var(--color-action-primary);
    --mp-button-bg-hover: var(--color-action-primary-hover);
    --mp-button-fg: var(--color-text-on-accent);
    --mp-button-fg-hover: var(--mp-button-fg);
    --mp-button-border: transparent;
    --mp-button-glow: var(--shadow-glow-warm);
    --mp-button-height: var(--size-control-md);
    --mp-button-padding: var(--space-6);
    --mp-button-font-size: var(--text-body);

    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--mp-button-height);
    min-width: var(--mp-button-height);
    margin: 0;
    padding: var(--space-2) var(--mp-button-padding);
    /* Transparent (not absent) border: Windows High Contrast paints it, so the
       button keeps a visible boundary when backgrounds are stripped. */
    border: var(--border-width-medium) solid var(--mp-button-border);
    border-radius: var(--radius-full);
    background-color: var(--mp-button-bg);
    color: var(--mp-button-fg);
    font-family: var(--font-sans);
    font-size: var(--mp-button-font-size);
    font-weight: var(--weight-medium);
    line-height: var(--leading-label);
    letter-spacing: var(--tracking-small);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition:
      background-color var(--transition-fast),
      border-color var(--transition-fast),
      color var(--transition-fast),
      box-shadow var(--transition-fast),
      transform var(--transition-fast);
  }

  /* Hover only where a pointer can hover: on touch screens a tap would
     otherwise leave the hover fill stuck until the next tap elsewhere. */
  @media (hover: hover) {
    .mp-button:hover:not(:disabled, [aria-disabled="true"], [aria-busy="true"]) {
      background-color: var(--mp-button-bg-hover);
      color: var(--mp-button-fg-hover);
      box-shadow: var(--mp-button-glow);
    }
  }

  /* Toggle buttons: pressed looks like a held hover. */
  .mp-button[aria-pressed="true"] {
    background-color: var(--mp-button-bg-hover);
    color: var(--mp-button-fg-hover);
  }

  .mp-button:active:not(:disabled, [aria-disabled="true"], [aria-busy="true"]) {
    transform: translateY(1px);
  }

  .mp-button:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  .mp-button > svg {
    flex: none;
    width: 1.25em;
    height: 1.25em;
  }

  /* Variants ------------------------------------------------------------ */

  /* Solid page backdrop, not transparent: keeps the teal label at its gated
     contrast when the button sits on a tinted surface (alerts, washes). */
  .mp-button[data-variant="secondary"] {
    --mp-button-bg: var(--color-bg-primary);
    --mp-button-bg-hover: var(--color-action-secondary);
    --mp-button-fg: var(--color-action-secondary);
    --mp-button-fg-hover: var(--color-text-on-accent);
    --mp-button-border: var(--color-action-secondary);
    --mp-button-glow: var(--shadow-glow-teal);
  }

  .mp-button[data-variant="ghost"] {
    --mp-button-bg: transparent;
    --mp-button-bg-hover: var(--color-bg-hover);
    --mp-button-fg: var(--color-text-primary);
    --mp-button-glow: none;
  }

  .mp-button[data-variant="danger"] {
    --mp-button-bg: var(--color-error);
    --mp-button-bg-hover: var(--color-error-hover);
    --mp-button-glow: none;
  }

  /* Sizes --------------------------------------------------------------- */

  .mp-button[data-size="sm"] {
    --mp-button-height: var(--size-control-sm);
    --mp-button-padding: var(--space-4);
    --mp-button-font-size: var(--text-small);
  }

  .mp-button[data-size="lg"] {
    --mp-button-height: var(--size-control-lg);
    --mp-button-padding: var(--space-8);
    --mp-button-font-size: var(--text-body-lg);
  }

  /* Compact buttons regain the full touch target on touch screens. */
  @media (pointer: coarse) {
    .mp-button[data-size="sm"] { --mp-button-height: var(--size-control-md); }
  }

  /* Shape & layout ------------------------------------------------------ */

  .mp-button[data-icon-only] {
    width: var(--mp-button-height);
    padding: 0;
  }

  .mp-button[data-full-width] {
    display: flex;
    width: 100%;
  }

  /* States -------------------------------------------------------------- */

  .mp-button:disabled,
  .mp-button[aria-disabled="true"] {
    opacity: var(--state-disabled-opacity);
    cursor: not-allowed;
  }

  .mp-button[aria-busy="true"] {
    position: relative;
    color: transparent;
    cursor: progress;
  }

  .mp-button[aria-busy="true"]::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 1.1em;
    height: 1.1em;
    margin: auto;
    border: var(--border-width-medium) solid var(--mp-button-fg);
    border-inline-end-color: transparent;
    border-radius: var(--radius-full);
    animation: mp-button-spin calc(var(--duration-loop) / 2) linear infinite;
  }

  @keyframes mp-button-spin {
    to { rotate: 1turn; }
  }

  @keyframes mp-button-pulse {
    50% { opacity: 0.35; }
  }

  @media (prefers-reduced-motion: reduce) {
    .mp-button:active:not(:disabled, [aria-disabled="true"], [aria-busy="true"]) {
      transform: none;
    }

    /* Still says "working" — by breathing, not spinning. */
    .mp-button[aria-busy="true"]::after {
      animation: mp-button-pulse var(--duration-loop) var(--ease-in-out) infinite;
    }
  }

  /* ---- Link (link) ------------------------------------------ */

  /* Link — inline and standalone text links, plus the skip link. */

  .mp-link {
    border-radius: var(--radius-sm);
    color: var(--color-text-accent);
    text-decoration-line: underline;
    text-decoration-thickness: var(--border-width-thin);
    text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
    text-underline-offset: 0.2em;
    transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
  }

  .mp-link:hover {
    text-decoration-color: currentColor;
  }

  .mp-link:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  /* Inherits the surrounding text color — for links inside dense metadata. */
  .mp-link[data-variant="quiet"] {
    color: inherit;
  }

  /* A call-to-action link that sits on its own line. */
  .mp-link[data-variant="standalone"] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: var(--size-touch-target);
    font-weight: var(--weight-medium);
    text-decoration-color: transparent;
  }

  .mp-link[data-variant="standalone"]::after {
    content: "→" / "";
    transition: translate var(--transition-fast);
  }

  .mp-link[data-variant="standalone"]:hover {
    text-decoration-color: currentColor;
  }

  @media (prefers-reduced-motion: no-preference) {
    .mp-link[data-variant="standalone"]:hover::after {
      translate: var(--space-1) 0;
    }
  }

  /* First focusable element on every page: jumps keyboard users past the nav. */
  .mp-skip-link {
    position: absolute;
    inset-block-start: var(--space-3);
    inset-inline-start: var(--space-3);
    z-index: var(--z-tooltip);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    background-color: var(--color-bg-inverse);
    color: var(--color-text-inverse);
    font-family: var(--font-sans);
    font-size: var(--text-small);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    translate: 0 calc(-100% - var(--space-8));
    transition: translate var(--transition-fast);
  }

  @media print {
    .mp-skip-link {
      display: none;
    }
  }

  .mp-skip-link:focus {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
    translate: 0 0;
  }

  /* ---- Field (field) ---------------------------------------- */

  /* Field — label, control, hint and error message as one unit; Fieldset
     groups related controls (radio groups, checkbox lists) under a legend. */

  .mp-field {
    display: grid;
    align-content: start;
    gap: var(--space-2);
    min-width: 0;
    font-family: var(--font-sans);
  }

  .mp-field__label,
  .mp-fieldset__legend {
    color: var(--color-text-primary);
    font-family: var(--font-sans);
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
    line-height: var(--leading-small);
  }

  .mp-field__required {
    margin-inline-start: var(--space-1);
    color: var(--color-error-text);
  }

  .mp-field__optional {
    margin-inline-start: var(--space-1);
    color: var(--color-text-tertiary);
    font-weight: var(--weight-regular);
  }

  .mp-field__hint,
  .mp-field__error {
    margin: 0;
    font-size: var(--text-small);
    line-height: var(--leading-small);
  }

  .mp-field__hint {
    color: var(--color-text-secondary);
  }

  .mp-field__error {
    color: var(--color-error-text);
    font-weight: var(--weight-medium);
  }

  .mp-fieldset {
    display: grid;
    align-content: start;
    gap: var(--space-1);
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .mp-fieldset__legend {
    margin-block-end: var(--space-2);
    padding: 0;
  }

  /* ---- Input (input) ---------------------------------------- */

  /* Input — one class for <input>, <textarea> and <select>. */

  .mp-input {
    --mp-input-border: var(--color-border-input);
    --mp-input-height: var(--size-control-md);
    --mp-input-padding: var(--space-4);

    box-sizing: border-box;
    display: block;
    width: 100%;
    min-height: var(--mp-input-height);
    margin: 0;
    padding: var(--space-2) var(--mp-input-padding);
    border: var(--border-width-thin) solid var(--mp-input-border);
    border-radius: var(--radius-sm);
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
    font-family: var(--font-sans);
    font-size: var(--text-body);
    line-height: var(--leading-small);
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
  }

  .mp-input::placeholder {
    color: var(--color-text-tertiary);
    opacity: 1;
  }

  .mp-input:hover:not(:disabled, [readonly], :focus-visible) {
    --mp-input-border: var(--color-text-secondary);
  }

  .mp-input:focus-visible {
    --mp-input-border: var(--color-focus);
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  .mp-input[aria-invalid="true"] {
    --mp-input-border: var(--color-error);
  }

  .mp-input:disabled {
    background-color: var(--color-bg-secondary);
    opacity: var(--state-disabled-opacity);
    cursor: not-allowed;
  }

  .mp-input[readonly] {
    background-color: var(--color-bg-secondary);
  }

  .mp-input[data-size="sm"] {
    --mp-input-height: var(--size-control-sm);
    --mp-input-padding: var(--space-3);
    font-size: var(--text-small);
  }

  .mp-input[data-size="lg"] {
    --mp-input-height: var(--size-control-lg);
    font-size: var(--text-body-lg);
  }

  textarea.mp-input {
    min-height: calc(var(--space-24) + var(--space-4));
    padding-block: var(--space-3);
    line-height: var(--leading-body);
    resize: vertical;
    field-sizing: content;
  }

  select.mp-input:not([multiple]) {
    appearance: none;
    padding-inline-end: var(--space-10);
    /* Chevron drawn from two gradients so it follows the theme's text color. */
    background-image:
      linear-gradient(45deg, transparent 50%, var(--color-text-secondary) 50%),
      linear-gradient(135deg, var(--color-text-secondary) 50%, transparent 50%);
    background-position:
      calc(100% - var(--space-5)) 50%,
      calc(100% - var(--space-5) + 0.3125rem) 50%;
    background-size: 0.3125rem 0.3125rem;
    background-repeat: no-repeat;
    cursor: pointer;
  }

  @media (forced-colors: active) {
    select.mp-input:not([multiple]) {
      appearance: auto;
      background-image: none;
    }
  }

  /* Touch screens: the compact size grows to the 44px touch target. */
  @media (pointer: coarse) {
    .mp-input[data-size="sm"] { --mp-input-height: var(--size-touch-target); }
  }

  /* ---- Combobox (combobox) ---------------------------------- */

  /* Combobox — a text input that suggests options from a list as you type
     (WAI-ARIA editable combobox with list autocomplete). The input is an
     .mp-input; components/membrane.js filters, opens and navigates the list.
     Without the script it is a plain text field. */

  .mp-combobox {
    --mp-combobox-max-height: 16rem;

    position: relative;
    min-width: 0;
  }

  /* Room for the chevron, which turns when the list is open. */
  .mp-combobox__input {
    padding-inline-end: var(--space-10);
    background-image:
      linear-gradient(45deg, transparent 50%, var(--color-text-secondary) 50%),
      linear-gradient(135deg, var(--color-text-secondary) 50%, transparent 50%);
    background-position:
      calc(100% - var(--space-5)) 50%,
      calc(100% - var(--space-5) + 5px) 50%;
    background-size: 5px 5px;
    background-repeat: no-repeat;
  }

  .mp-combobox__input[aria-expanded="true"] {
    background-image:
      linear-gradient(135deg, transparent 50%, var(--color-text-secondary) 50%),
      linear-gradient(45deg, var(--color-text-secondary) 50%, transparent 50%);
  }

  /* The popup: the option list, or the "no matches" message. */
  .mp-combobox__list,
  .mp-combobox__empty {
    box-sizing: border-box;
    position: absolute;
    z-index: var(--z-dropdown);
    inset-inline: 0;
    inset-block-start: calc(100% + var(--space-1));
    margin: 0;
    padding: var(--space-1);
    border: var(--border-default);
    border-radius: var(--radius-md);
    background-color: var(--color-bg-elevated);
    box-shadow: var(--elevation-overlay);
    color: var(--color-text-primary);
    font-family: var(--font-sans);
    font-size: var(--text-small);
    opacity: 1;
    translate: 0 0;
    transition:
      opacity var(--transition-enter),
      translate var(--transition-enter),
      display var(--duration-normal) allow-discrete;
  }

  .mp-combobox__list {
    max-height: var(--mp-combobox-max-height);
    overflow-y: auto;
    overscroll-behavior: contain;
    list-style: none;
  }

  .mp-combobox__empty {
    padding: var(--space-3);
    color: var(--color-text-secondary);
  }

  :is(.mp-combobox__list, .mp-combobox__empty)[hidden] {
    display: none;
    opacity: 0;
    translate: 0 calc(-1 * var(--space-1));
    transition:
      opacity var(--transition-exit),
      translate var(--transition-exit),
      display var(--duration-fast) allow-discrete;
  }

  @starting-style {
    .mp-combobox__list:not([hidden]),
    .mp-combobox__empty:not([hidden]) {
      opacity: 0;
      translate: 0 calc(-1 * var(--space-1));
    }
  }

  .mp-combobox__option {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--size-control-sm);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    cursor: pointer;
  }

  .mp-combobox__option[hidden] {
    display: none;
  }

  @media (hover: hover) {
    .mp-combobox__option:hover {
      background-color: var(--color-bg-hover);
    }
  }

  /* The option the arrow keys are on (aria-activedescendant points at it;
     per the ARIA pattern it also carries aria-selected="true"). */
  .mp-combobox__option[aria-selected="true"] {
    background-color: var(--color-bg-active);
    box-shadow: inset var(--border-width-thick) 0 0 var(--color-focus);
  }

  .mp-combobox__option[aria-disabled="true"] {
    opacity: var(--state-disabled-opacity);
    cursor: not-allowed;
  }

  .mp-combobox__hint {
    margin-inline-start: auto;
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
  }

  /* Result count for screen readers ("4 results"), updated by membrane.js. */
  .mp-combobox__status {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  @media (forced-colors: active) {
    .mp-combobox__option[aria-selected="true"] {
      outline: var(--border-width-medium) solid Highlight;
      outline-offset: calc(-1 * var(--border-width-medium));
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .mp-combobox__list,
    .mp-combobox__empty {
      translate: none;
    }
  }

  /* Touch screens: options grow to the 44px touch target. */
  @media (pointer: coarse) {
    .mp-combobox__option { min-height: var(--size-touch-target); }
  }

  /* ---- Choice (choice) -------------------------------------- */

  /* Choice — the clickable label row that wraps a checkbox, radio or switch,
     plus the custom-drawn checkbox and radio controls themselves. */

  .mp-choice {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding-block: var(--space-2);
    color: var(--color-text-primary);
    font-family: var(--font-sans);
    font-size: var(--text-body);
    line-height: var(--leading-body-lg);
    cursor: pointer;
  }

  .mp-choice__description {
    display: block;
    color: var(--color-text-secondary);
    font-size: var(--text-small);
    line-height: var(--leading-small);
  }

  .mp-choice:has(:disabled) {
    opacity: var(--state-disabled-opacity);
    cursor: not-allowed;
  }

  .mp-checkbox,
  .mp-radio {
    --mp-choice-size: 1.25rem;
    --mp-choice-bg: var(--color-bg-primary);
    --mp-choice-border: var(--color-border-input);
    --mp-choice-border-hover: var(--color-text-secondary);
    --mp-choice-checked: var(--color-action-secondary);
    --mp-choice-mark: var(--color-text-on-accent);

    box-sizing: border-box;
    appearance: none;
    display: inline-grid;
    flex: none;
    place-content: center;
    width: var(--mp-choice-size);
    height: var(--mp-choice-size);
    /* Centers the 20px control on the first line of a body-size label. */
    margin: 0.125rem 0 0;
    border: var(--border-width-medium) solid var(--mp-choice-border);
    border-radius: var(--radius-sm);
    background-color: var(--mp-choice-bg);
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
  }

  .mp-radio {
    border-radius: var(--radius-full);
  }

  .mp-checkbox::before,
  .mp-radio::before {
    content: "";
    background-color: var(--mp-choice-mark);
    scale: 0;
    transition: scale var(--transition-state);
  }

  .mp-checkbox::before {
    width: 0.75rem;
    height: 0.75rem;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  }

  .mp-radio::before {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--radius-full);
  }

  .mp-checkbox:checked,
  .mp-checkbox:indeterminate,
  .mp-radio:checked {
    border-color: var(--mp-choice-checked);
    background-color: var(--mp-choice-checked);
  }

  .mp-checkbox:checked::before,
  .mp-checkbox:indeterminate::before,
  .mp-radio:checked::before {
    scale: 1;
  }

  .mp-checkbox:indeterminate::before {
    clip-path: inset(40% 5%);
  }

  .mp-checkbox:hover:not(:disabled, :checked, :indeterminate),
  .mp-radio:hover:not(:disabled, :checked) {
    border-color: var(--mp-choice-border-hover);
  }

  .mp-checkbox:focus-visible,
  .mp-radio:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  .mp-checkbox[aria-invalid="true"],
  .mp-radio[aria-invalid="true"] {
    border-color: var(--color-error);
  }

  .mp-checkbox:disabled,
  .mp-radio:disabled {
    cursor: not-allowed;
  }

  /* Custom-drawn checks vanish when the OS forces colors; hand the control
     back to the platform there. */
  @media (forced-colors: active) {
    .mp-checkbox,
    .mp-radio {
      appearance: auto;
    }

    .mp-checkbox::before,
    .mp-radio::before {
      display: none;
    }
  }

  /* ---- Switch (switch) -------------------------------------- */

  /* Switch — an on/off checkbox (role="switch") drawn as a track and thumb.
     Wrap it in .mp-choice like any other choice control. */

  .mp-switch {
    --mp-switch-width: 2.75rem;
    --mp-switch-height: 1.5rem;
    --mp-switch-thumb: 1.125rem;
    --mp-switch-inset: 0.125rem;
    --mp-switch-travel: calc(var(--mp-switch-width) - var(--mp-switch-thumb) - 2 * var(--border-width-medium) - 2 * var(--mp-switch-inset));

    box-sizing: border-box;
    appearance: none;
    position: relative;
    flex: none;
    width: var(--mp-switch-width);
    height: var(--mp-switch-height);
    margin: 0;
    border: var(--border-width-medium) solid var(--color-border-input);
    border-radius: var(--radius-full);
    background-color: var(--color-border-input);
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
  }

  .mp-switch::before {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: var(--mp-switch-inset);
    width: var(--mp-switch-thumb);
    height: var(--mp-switch-thumb);
    border-radius: var(--radius-full);
    background-color: var(--color-bg-primary);
    box-shadow: var(--shadow-sm);
    translate: 0 -50%;
    /* The one place the spring easing belongs: a small, physical toggle. */
    transition: translate var(--duration-normal) var(--ease-spring), background-color var(--transition-state);
  }

  .mp-switch:checked {
    border-color: var(--color-action-secondary);
    background-color: var(--color-action-secondary);
  }

  .mp-switch:checked::before {
    background-color: var(--color-text-on-accent);
    translate: var(--mp-switch-travel) -50%;
  }

  .mp-switch:checked:dir(rtl)::before {
    translate: calc(-1 * var(--mp-switch-travel)) -50%;
  }

  .mp-switch:hover:not(:disabled, :checked) {
    border-color: var(--color-text-secondary);
  }

  .mp-switch:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  .mp-switch:disabled {
    cursor: not-allowed;
  }

  .mp-choice > .mp-switch {
    margin-block-start: 0;
  }

  @media (forced-colors: active) {
    .mp-switch {
      appearance: auto;
      width: auto;
      height: auto;
      border: 0;
    }

    .mp-switch::before {
      display: none;
    }
  }

  /* ---- Card (card) ------------------------------------------ */

  /* Card — a contained unit of content: optional media, overline, title,
     body, footer. Becomes fully clickable when it contains .mp-card__link. */

  .mp-card {
    --mp-card-padding: var(--space-6);
    --mp-card-bg: var(--color-bg-secondary);
    --mp-card-shadow: var(--elevation-raised);
    --mp-card-accent: var(--color-action-primary);
    --mp-card-overline: var(--color-human-text);

    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
    padding: var(--mp-card-padding);
    border: var(--border-default);
    border-radius: var(--radius-lg);
    background-color: var(--mp-card-bg);
    box-shadow: var(--mp-card-shadow);
    color: var(--color-text-primary);
    font-family: var(--font-sans);
    transition:
      box-shadow var(--transition-slow),
      transform var(--transition-slow),
      border-color var(--transition-slow);
  }

  .mp-card[data-tone="digital"] {
    --mp-card-accent: var(--color-action-secondary);
    --mp-card-overline: var(--color-digital-text);
  }

  .mp-card[data-variant="featured"] {
    --mp-card-padding: var(--space-8);
    --mp-card-shadow: var(--elevation-overlay);
    border-inline-start: var(--border-width-thick) solid var(--mp-card-accent);
  }

  .mp-card[data-variant="flat"] {
    --mp-card-bg: transparent;
    --mp-card-shadow: none;
  }

  .mp-card__media {
    overflow: hidden;
    aspect-ratio: 16 / 9;
    margin:
      calc(-1 * var(--mp-card-padding))
      calc(-1 * var(--mp-card-padding))
      var(--space-3);
    border-radius: calc(var(--radius-lg) - var(--border-width-thin)) calc(var(--radius-lg) - var(--border-width-thin)) 0 0;
    background-color: var(--color-bg-tertiary);
  }

  .mp-card__media > :is(img, video, picture) {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: var(--photo-warmth);
  }

  .mp-card__overline {
    margin: 0;
    color: var(--mp-card-overline);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
  }

  .mp-card__title {
    margin: 0;
    color: var(--color-text-primary);
    font-family: var(--font-serif);
    font-size: var(--text-h3);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-subheading);
    letter-spacing: var(--tracking-subheading);
  }

  .mp-card__body {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-body);
    line-height: var(--leading-body);
  }

  .mp-card__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-top: auto;
    padding-top: var(--space-4);
    color: var(--color-text-tertiary);
    font-size: var(--text-small);
    line-height: var(--leading-small);
  }

  /* Clickable card: the title link's ::after stretches over the whole card,
     so there is one link in the accessibility tree, not a wrapping <a>. */
  .mp-card__link {
    color: inherit;
    text-decoration: none;
  }

  .mp-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--radius-lg);
  }

  .mp-card__link:hover {
    text-decoration: underline;
    text-decoration-thickness: var(--border-width-thin);
    text-underline-offset: 0.2em;
  }

  .mp-card__link:focus-visible {
    outline: none;
  }

  .mp-card__link:focus-visible::after {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  @media (hover: hover) {
    .mp-card:has(.mp-card__link):hover {
      --mp-card-shadow: var(--elevation-overlay);
      border-color: var(--color-border-emphasis);
    }
  }

  /* The lift is decoration: hover devices only, and never under reduced motion
     (shadow and border still respond). */
  @media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .mp-card:has(.mp-card__link):hover {
      transform: translateY(-2px);
    }
  }

  /* Secondary controls inside a clickable card sit above the stretched link. */
  .mp-card:has(.mp-card__link) :is(a, button, input, select, textarea):not(.mp-card__link) {
    position: relative;
    z-index: 1;
  }

  /* ---- Tag (tag) -------------------------------------------- */

  /* Tag — a pill naming a topic or category. Tone says which register the
     topic belongs to. Can be a link, a button, or carry a remove button. */

  .mp-tag {
    --mp-tag-bg: var(--color-bg-tertiary);
    --mp-tag-fg: var(--color-text-secondary);

    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: 1.75rem;
    padding: var(--space-1) var(--space-3);
    border: 0;
    border-radius: var(--radius-full);
    background-color: var(--mp-tag-bg);
    color: var(--mp-tag-fg);
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    line-height: var(--leading-label);
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
  }

  .mp-tag[data-tone="human"] {
    --mp-tag-bg: var(--color-human-bg);
    --mp-tag-fg: var(--color-human-text);
  }

  .mp-tag[data-tone="digital"] {
    --mp-tag-bg: var(--color-digital-bg);
    --mp-tag-fg: var(--color-digital-text);
  }

  a.mp-tag,
  button.mp-tag {
    cursor: pointer;
    transition: box-shadow var(--transition-fast);
  }

  a.mp-tag:hover,
  button.mp-tag:hover {
    box-shadow: inset 0 0 0 var(--border-width-thin) currentColor;
  }

  .mp-tag:is(a, button):focus-visible,
  .mp-tag__remove:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  .mp-tag[aria-pressed="true"] {
    box-shadow: inset 0 0 0 var(--border-width-medium) currentColor;
  }

  .mp-tag__remove {
    appearance: none;
    display: inline-grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    margin-inline: 0 calc(-1 * var(--space-2));
    padding: 0;
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: var(--text-small);
    line-height: 1;
    cursor: pointer;
  }

  .mp-tag__remove:hover {
    background-color: var(--color-bg-hover);
  }

  /* ---- Badge (badge) ---------------------------------------- */

  /* Badge — a compact, non-interactive status or metadata label. */

  .mp-badge {
    --mp-badge-bg: var(--color-bg-tertiary);
    --mp-badge-fg: var(--color-text-secondary);

    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: calc(var(--space-1) / 2) var(--space-2);
    border-radius: var(--radius-sm);
    background-color: var(--mp-badge-bg);
    color: var(--mp-badge-fg);
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: middle;
  }

  .mp-badge[data-tone="info"]    { --mp-badge-bg: var(--color-info-bg);    --mp-badge-fg: var(--color-info-text); }
  .mp-badge[data-tone="success"] { --mp-badge-bg: var(--color-success-bg); --mp-badge-fg: var(--color-success-text); }
  .mp-badge[data-tone="warning"] { --mp-badge-bg: var(--color-warning-bg); --mp-badge-fg: var(--color-warning-text); }
  .mp-badge[data-tone="error"]   { --mp-badge-bg: var(--color-error-bg);   --mp-badge-fg: var(--color-error-text); }
  .mp-badge[data-tone="human"]   { --mp-badge-bg: var(--color-human-bg);   --mp-badge-fg: var(--color-human-text); }
  .mp-badge[data-tone="digital"] { --mp-badge-bg: var(--color-digital-bg); --mp-badge-fg: var(--color-digital-text); }

  /* Leading status dot. Uses the label color, so it inherits its contrast. */
  .mp-badge[data-variant="dot"]::before {
    content: "";
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--radius-full);
    background-color: currentColor;
  }

  /* ---- Avatar (avatar) -------------------------------------- */

  /* Avatar — a person or entity as a photo or initials. */

  .mp-avatar {
    --mp-avatar-size: 2.5rem;

    box-sizing: border-box;
    display: inline-grid;
    flex: none;
    place-items: center;
    width: var(--mp-avatar-size);
    height: var(--mp-avatar-size);
    overflow: hidden;
    border-radius: var(--radius-full);
    background-color: var(--color-human-bg);
    color: var(--color-human-text);
    font-family: var(--font-serif);
    font-size: calc(var(--mp-avatar-size) * 0.4);
    font-weight: var(--weight-semibold);
    line-height: 1;
    user-select: none;
    vertical-align: middle;
  }

  .mp-avatar > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: var(--photo-warmth);
  }

  .mp-avatar[data-size="sm"] { --mp-avatar-size: 2rem; }
  .mp-avatar[data-size="lg"] { --mp-avatar-size: 3.5rem; }
  .mp-avatar[data-size="xl"] { --mp-avatar-size: 5rem; }

  .mp-avatar[data-tone="digital"] {
    background-color: var(--color-digital-bg);
    color: var(--color-digital-text);
    font-family: var(--font-mono);
  }

  /* Overlapping row of avatars, each ringed in the page color. */
  .mp-avatar-group {
    display: flex;
    align-items: center;
  }

  .mp-avatar-group > .mp-avatar {
    box-shadow: 0 0 0 var(--border-width-medium) var(--color-bg-primary);
  }

  .mp-avatar-group > .mp-avatar + .mp-avatar {
    margin-inline-start: calc(var(--mp-avatar-size) * -0.25);
  }

  /* ---- Quote (quote) ---------------------------------------- */

  /* Quote — a <figure> holding a blockquote and its attribution.
     The pull variant is for the brand's signature phrases. */

  .mp-quote {
    box-sizing: border-box;
    margin: var(--space-8) 0;
    padding-inline-start: var(--space-6);
    border-inline-start: var(--border-width-thick) solid var(--color-action-primary);
  }

  .mp-quote__text {
    margin: 0;
    color: var(--color-text-primary);
    font-family: var(--font-serif);
    font-size: var(--text-body-lg);
    font-style: italic;
    font-weight: var(--weight-regular);
    line-height: var(--leading-body-lg);
  }

  .mp-quote__text > p {
    margin: 0;
  }

  .mp-quote__text > p + p {
    margin-top: var(--space-3);
  }

  .mp-quote__source {
    margin-top: var(--space-3);
    color: var(--color-text-secondary);
    font-family: var(--font-sans);
    font-size: var(--text-small);
    font-style: normal;
    line-height: var(--leading-small);
  }

  .mp-quote__source cite {
    color: var(--color-text-primary);
    font-style: normal;
    font-weight: var(--weight-medium);
  }

  .mp-quote[data-variant="pull"] {
    max-width: var(--container-sm);
    margin: var(--space-12) auto;
    padding: 0;
    border: 0;
    text-align: center;
  }

  .mp-quote[data-variant="pull"] .mp-quote__text {
    color: var(--color-human-text);
    font-size: var(--text-h2);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-heading);
    letter-spacing: var(--tracking-heading);
  }

  /* ---- Code (code) ------------------------------------------ */

  /* Code — inline code, keyboard keys, and always-dark code blocks.
     Syntax classes also cover Prism (.token.*) and highlight.js (.hljs-*). */

  .mp-code {
    padding: 0.125em 0.375em;
    border-radius: var(--radius-sm);
    background-color: var(--color-bg-tertiary);
    color: var(--color-text-primary);
    font-family: var(--font-mono);
    font-size: 0.875em;
    overflow-wrap: anywhere;
  }

  .mp-kbd {
    display: inline-block;
    padding: 0.0625em 0.4em;
    border: var(--border-width-thin) solid var(--color-border-emphasis);
    border-block-end-width: var(--border-width-medium);
    border-radius: var(--radius-sm);
    background-color: var(--color-bg-secondary);
    color: var(--color-text-primary);
    font-family: var(--font-mono);
    font-size: 0.8125em;
    line-height: var(--leading-small);
    white-space: nowrap;
  }

  .mp-code-block {
    box-sizing: border-box;
    overflow: hidden;
    min-width: 0;
    margin: 0;
    border: var(--border-width-thin) solid var(--code-border);
    border-radius: var(--radius-md);
    background-color: var(--code-bg);
    box-shadow: var(--elevation-raised);
    color: var(--code-text);
  }

  .mp-code-block:has(pre:focus-visible) {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  .mp-code-block__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-block-end: var(--border-width-thin) solid var(--code-border);
    color: var(--code-comment);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
  }

  .mp-code-block pre {
    margin: 0;
    padding: var(--space-5) var(--space-6);
    overflow-x: auto;
    background: transparent;
    color: var(--code-text);
    font-family: var(--font-mono);
    font-size: var(--text-code);
    line-height: var(--leading-code);
    tab-size: 2;
  }

  .mp-code-block pre:focus-visible {
    outline: none;
  }

  .mp-code-block code {
    padding: 0;
    background: none;
    color: inherit;
    font: inherit;
  }

  .mp-code-block :is(.mp-syntax-keyword, .token.keyword, .token.atrule, .hljs-keyword) { color: var(--code-keyword); }
  .mp-code-block :is(.mp-syntax-string, .token.string, .token.attr-value, .hljs-string) { color: var(--code-string); }
  .mp-code-block :is(.mp-syntax-function, .token.function, .token.property, .hljs-title, .hljs-attr) { color: var(--code-function); }
  .mp-code-block :is(.mp-syntax-number, .token.number, .token.boolean, .hljs-number, .hljs-literal) { color: var(--code-number); }
  .mp-code-block :is(.mp-syntax-comment, .token.comment, .hljs-comment) {
    color: var(--code-comment);
    font-style: italic;
  }

  /* ---- Divider (divider) ------------------------------------ */

  /* Divider — a fading rule between sections. Prefer whitespace first. */

  .mp-divider {
    --mp-divider-space: var(--space-16);

    box-sizing: border-box;
    display: block;
    max-width: var(--container-sm);
    height: var(--border-width-thin);
    margin: var(--mp-divider-space) auto;
    border: 0;
    background: var(--gradient-divider);
  }

  .mp-divider[data-size="sm"] { --mp-divider-space: var(--space-8); }
  .mp-divider[data-size="lg"] { --mp-divider-space: var(--space-24); }

  /* Full-width solid rule for structure inside components and panels. */
  .mp-divider[data-variant="full"] {
    max-width: none;
    margin-inline: 0;
    background: var(--color-border-default);
  }

  @media (forced-colors: active) {
    .mp-divider {
      height: 0;
      border-block-start: var(--border-width-thin) solid;
    }
  }

  /* ---- Table (table) ---------------------------------------- */

  /* Table — tabular data. Wrap in .mp-table-wrap for horizontal scrolling,
     a rounded frame and (with a max height) a sticky header. */

  .mp-table-wrap {
    --mp-table-max-height: none;

    box-sizing: border-box;
    max-height: var(--mp-table-max-height);
    overflow: auto;
    border: var(--border-default);
    border-radius: var(--radius-md);
  }

  .mp-table-wrap:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  .mp-table {
    --mp-table-cell-padding: var(--space-3) var(--space-4);

    width: 100%;
    border-collapse: collapse;
    color: var(--color-text-primary);
    font-family: var(--font-sans);
    font-size: var(--text-small);
    font-variant-numeric: tabular-nums;
    line-height: var(--leading-small);
  }

  .mp-table caption {
    padding: var(--space-3) var(--space-4);
    caption-side: top;
    color: var(--color-text-secondary);
    text-align: start;
  }

  .mp-table :is(th, td) {
    padding: var(--mp-table-cell-padding);
    border-block-end: var(--border-default);
    text-align: start;
    vertical-align: top;
  }

  .mp-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: var(--color-bg-secondary);
    color: var(--color-text-tertiary);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    white-space: nowrap;
  }

  .mp-table tbody th {
    font-weight: var(--weight-semibold);
  }

  .mp-table tbody tr:last-child > * {
    border-block-end: 0;
  }

  .mp-table :is(th, td)[data-align="end"] {
    text-align: end;
  }

  .mp-table[data-density="compact"] {
    --mp-table-cell-padding: var(--space-2) var(--space-3);
  }

  .mp-table[data-variant="striped"] tbody tr:nth-child(even) > * {
    background-color: var(--color-bg-hover);
  }

  .mp-table[data-variant="interactive"] tbody tr:hover > * {
    background-color: var(--color-bg-hover);
  }

  /* ---- Stat (stat) ------------------------------------------ */

  /* Stat — one headline number with its label and change over time.
     data-trend draws the arrow; data-sentiment decides the color, because
     "down" is good news for some metrics. */

  .mp-stat {
    display: grid;
    align-content: start;
    gap: var(--space-1);
    min-width: 0;
    margin: 0;
    color: var(--color-text-primary);
    font-family: var(--font-sans);
  }

  .mp-stat__label {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
    line-height: var(--leading-small);
  }

  .mp-stat__value {
    margin: 0;
    color: var(--color-text-primary);
    font-family: var(--font-serif);
    font-size: var(--text-h1);
    font-weight: var(--weight-bold);
    font-variant-numeric: lining-nums tabular-nums;
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-display);
  }

  .mp-stat__delta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
    line-height: var(--leading-small);
  }

  .mp-stat__delta[data-trend="up"]::before { content: "↑" / ""; }
  .mp-stat__delta[data-trend="down"]::before { content: "↓" / ""; }
  .mp-stat__delta[data-sentiment="positive"] { color: var(--color-success-text); }
  .mp-stat__delta[data-sentiment="negative"] { color: var(--color-error-text); }

  /* ---- Chart (chart) ---------------------------------------- */

  /* Chart — a figure shell (title, legend, caption) plus a CSS bar list for
     the most common education metric: one value per category. Series colors
     come from the validated --color-chart-* palette, assigned in order.
     Values are always printed, so identity and magnitude never rely on color. */

  .mp-chart {
    --mp-chart-bar: 0.75rem;

    box-sizing: border-box;
    display: grid;
    align-content: start;
    gap: var(--space-4);
    min-width: 0;
    margin: 0;
    color: var(--color-text-primary);
    font-family: var(--font-sans);
  }

  .mp-chart__header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2) var(--space-6);
  }

  .mp-chart__title {
    margin: 0;
    font-size: var(--text-body);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-small);
  }

  .mp-chart__legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--color-text-secondary);
    font-size: var(--text-small);
  }

  .mp-chart__key {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
  }

  .mp-chart__key::before {
    content: "";
    width: 0.75rem;
    height: 0.75rem;
    border-radius: var(--radius-sm);
    background-color: var(--mp-chart-color);
  }

  /* Series slots — fixed order, never cycled. */
  .mp-chart [data-series="1"] { --mp-chart-color: var(--color-chart-1); }
  .mp-chart [data-series="2"] { --mp-chart-color: var(--color-chart-2); }
  .mp-chart [data-series="3"] { --mp-chart-color: var(--color-chart-3); }
  .mp-chart [data-series="4"] { --mp-chart-color: var(--color-chart-4); }
  .mp-chart [data-series="5"] { --mp-chart-color: var(--color-chart-5); }
  .mp-chart [data-series="6"] { --mp-chart-color: var(--color-chart-6); }

  .mp-chart__bars {
    display: grid;
    grid-template-columns: minmax(6rem, max-content) minmax(0, 1fr) max-content;
    align-items: center;
    gap: var(--space-3) var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-small);
    line-height: var(--leading-small);
  }

  /* Each row lays its three parts onto the shared columns (subgrid keeps the
     <li> a real list item; display: contents can drop its role). */
  .mp-chart__row {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: center;
  }

  .mp-chart__label {
    color: var(--color-text-secondary);
  }

  .mp-chart__track {
    display: flex;
    gap: 2px;
    height: var(--mp-chart-bar);
    overflow: hidden;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background-color: var(--color-bg-hover);
  }

  .mp-chart__fill {
    --mp-chart-value: 0%;
    --mp-chart-color: var(--color-chart-1);

    /* May shrink, so stacked segments absorb their 2px gaps proportionally. */
    flex: 0 1 auto;
    width: var(--mp-chart-value);
    /* Data end is rounded; the baseline end stays square. */
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background-color: var(--mp-chart-color);
  }

  /* Stacked bars: only the last segment's data end is rounded. */
  .mp-chart__fill:not(:last-child) {
    border-radius: 0;
  }

  .mp-chart__value {
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
    font-weight: var(--weight-medium);
    text-align: end;
  }

  .mp-chart__caption {
    color: var(--color-text-tertiary);
    font-size: var(--text-xs);
    line-height: var(--leading-small);
  }

  /* Keep the data visible when the OS replaces colors. */
  @media (forced-colors: active) {
    .mp-chart__fill {
      background-color: CanvasText;
    }

    .mp-chart__key::before {
      border: var(--border-width-thin) solid CanvasText;
    }
  }

  /* ---- Icon (icon) ------------------------------------------ */

  /* Icon — sizes and colors an inline SVG from the icon tokens. Line icons
     only (outlined, rounded caps), per DESIGN-SYSTEM.md §7.3. */

  .mp-icon {
    --mp-icon-size: var(--size-icon-md);

    display: inline-block;
    flex: none;
    width: var(--mp-icon-size);
    height: var(--mp-icon-size);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: middle;
  }

  .mp-icon[data-size="sm"] { --mp-icon-size: var(--size-icon-sm); }
  .mp-icon[data-size="lg"] { --mp-icon-size: var(--size-icon-lg); }
  .mp-icon[data-size="xl"] { --mp-icon-size: var(--size-icon-xl); }

  /* Accent icons carry a register or status; the default inherits text color. */
  .mp-icon[data-tone="human"] { color: var(--color-human-text); }
  .mp-icon[data-tone="digital"] { color: var(--color-digital-text); }
  .mp-icon[data-tone="success"] { color: var(--color-success-text); }
  .mp-icon[data-tone="warning"] { color: var(--color-warning-text); }
  .mp-icon[data-tone="error"] { color: var(--color-error-text); }

  /* ---- Alert (alert) ---------------------------------------- */

  /* Alert — an inline message that explains state: info, success, warning,
     error, or a human-register editorial note. */

  .mp-alert {
    --mp-alert-accent: var(--color-info);
    --mp-alert-bg: var(--color-info-bg);
    --mp-alert-title: var(--color-info-text);
    --mp-alert-icon: var(--mp-alert-accent);

    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border: var(--border-width-thin) solid color-mix(in srgb, var(--mp-alert-accent) 30%, transparent);
    border-inline-start: var(--border-width-thick) solid var(--mp-alert-accent);
    border-radius: var(--radius-md);
    background-color: var(--mp-alert-bg);
    color: var(--color-text-primary);
    font-family: var(--font-sans);
    font-size: var(--text-small);
    line-height: var(--leading-small);
  }

  .mp-alert[data-tone="success"] {
    --mp-alert-accent: var(--color-success);
    --mp-alert-bg: var(--color-success-bg);
    --mp-alert-title: var(--color-success-text);
  }

  .mp-alert[data-tone="warning"] {
    --mp-alert-accent: var(--color-warning);
    --mp-alert-bg: var(--color-warning-bg);
    --mp-alert-title: var(--color-warning-text);
    /* --color-warning is 2.1:1 on light washes: the icon carries meaning. */
    --mp-alert-icon: var(--color-warning-text);
  }

  .mp-alert[data-tone="error"] {
    --mp-alert-accent: var(--color-error);
    --mp-alert-bg: var(--color-error-bg);
    --mp-alert-title: var(--color-error-text);
  }

  .mp-alert[data-tone="human"] {
    --mp-alert-accent: var(--color-action-primary);
    --mp-alert-bg: var(--color-human-bg);
    --mp-alert-title: var(--color-human-text);
  }

  .mp-alert__icon {
    flex: none;
    width: var(--size-icon-sm);
    height: var(--size-icon-sm);
    color: var(--mp-alert-icon);
  }

  .mp-alert__content {
    display: grid;
    flex: 1;
    align-content: start;
    gap: var(--space-1);
    min-width: 0;
  }

  .mp-alert__content > p {
    margin: 0;
  }

  .mp-alert__title {
    margin: 0;
    color: var(--mp-alert-title);
    font-size: var(--text-body);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-small);
  }

  .mp-alert__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
  }

  /* ---- Progress (progress) ---------------------------------- */

  /* Progress — the native <progress> element, determinate or indeterminate,
     plus a spinner for short waits with no measurable progress. */

  .mp-progress {
    --mp-progress-height: 0.5rem;
    --mp-progress-track: var(--color-bg-tertiary);
    --mp-progress-value: var(--color-action-secondary);

    box-sizing: border-box;
    appearance: none;
    display: block;
    width: 100%;
    height: var(--mp-progress-height);
    overflow: hidden;
    border: 0;
    border-radius: var(--radius-full);
    background-color: var(--mp-progress-track);
    color: var(--mp-progress-value);
  }

  .mp-progress::-webkit-progress-bar {
    border-radius: var(--radius-full);
    background-color: var(--mp-progress-track);
  }

  .mp-progress::-webkit-progress-value {
    border-radius: var(--radius-full);
    background-color: var(--mp-progress-value);
    transition: inline-size var(--transition-default);
  }

  .mp-progress::-moz-progress-bar {
    border-radius: var(--radius-full);
    background-color: var(--mp-progress-value);
  }

  .mp-progress[data-tone="human"] { --mp-progress-value: var(--color-action-primary); }
  .mp-progress[data-tone="success"] { --mp-progress-value: var(--color-success-text); }

  .mp-progress[data-size="sm"] { --mp-progress-height: 0.25rem; }
  .mp-progress[data-size="lg"] { --mp-progress-height: 0.75rem; }

  .mp-progress:indeterminate {
    background-image: linear-gradient(90deg, transparent, var(--mp-progress-value) 30%, var(--mp-progress-value) 70%, transparent);
    background-repeat: no-repeat;
    background-size: 40% 100%;
    animation: mp-progress-slide var(--duration-loop) var(--ease-in-out) infinite;
  }

  .mp-progress:indeterminate::-webkit-progress-bar { background-color: transparent; }
  .mp-progress:indeterminate::-moz-progress-bar { background-color: transparent; }

  @keyframes mp-progress-slide {
    from { background-position: -66.7% 0; }
    to { background-position: 166.7% 0; }
  }

  .mp-spinner {
    --mp-spinner-size: 1.25rem;

    box-sizing: border-box;
    display: inline-block;
    flex: none;
    width: var(--mp-spinner-size);
    height: var(--mp-spinner-size);
    border: var(--border-width-medium) solid var(--color-bg-tertiary);
    border-block-start-color: var(--color-action-secondary);
    border-radius: var(--radius-full);
    vertical-align: middle;
    animation: mp-spinner-rotate calc(var(--duration-loop) / 2) linear infinite;
  }

  .mp-spinner[data-size="sm"] { --mp-spinner-size: 1rem; }
  .mp-spinner[data-size="lg"] { --mp-spinner-size: 2rem; }

  @keyframes mp-spinner-rotate {
    to { rotate: 1turn; }
  }

  @keyframes mp-progress-pulse {
    50% { opacity: 0.35; }
  }

  /* Reduced motion: no sliding or spinning, but never a frozen frame that
     looks finished — the indicator breathes in place. */
  @media (prefers-reduced-motion: reduce) {
    .mp-progress:indeterminate {
      background-position: 50% 0;
      animation: mp-progress-pulse var(--duration-loop) var(--ease-in-out) infinite;
    }

    .mp-spinner {
      border-color: var(--color-action-secondary);
      animation: mp-progress-pulse var(--duration-loop) var(--ease-in-out) infinite;
    }
  }

  /* ---- Skeleton (skeleton) ---------------------------------- */

  /* Skeleton — placeholder shapes while content loads. Decorative: the region
     that is loading carries aria-busy and a status message. */

  .mp-skeleton {
    --mp-skeleton-width: 100%;
    --mp-skeleton-height: 1rem;

    display: block;
    width: var(--mp-skeleton-width);
    height: var(--mp-skeleton-height);
    border-radius: var(--radius-sm);
    background:
      linear-gradient(90deg, transparent, var(--color-bg-hover), transparent) 0 0 / 50% 100% no-repeat,
      var(--color-bg-active);
    animation: mp-skeleton-shimmer var(--duration-loop) var(--ease-in-out) infinite;
  }

  /* Text lines: body line height, slightly shorter last line. */
  .mp-skeleton[data-variant="text"] {
    --mp-skeleton-height: 0.75em;
    margin-block: 0.4em;
  }

  .mp-skeleton[data-variant="text"]:last-child:not(:only-child) {
    --mp-skeleton-width: 60%;
  }

  .mp-skeleton[data-variant="circle"] {
    --mp-skeleton-width: var(--space-10);
    --mp-skeleton-height: var(--space-10);
    border-radius: var(--radius-full);
  }

  .mp-skeleton[data-variant="block"] {
    --mp-skeleton-height: var(--space-32);
    border-radius: var(--radius-lg);
  }

  @keyframes mp-skeleton-shimmer {
    from { background-position: -100% 0, 0 0; }
    to { background-position: 200% 0, 0 0; }
  }

  @keyframes mp-skeleton-pulse {
    50% { opacity: 0.55; }
  }

  /* Reduced motion: the shimmer's sweep becomes a slow in-place pulse. */
  @media (prefers-reduced-motion: reduce) {
    .mp-skeleton {
      background: var(--color-bg-active);
      animation: mp-skeleton-pulse var(--duration-loop) var(--ease-in-out) infinite;
    }
  }

  /* ---- Empty state (empty-state) ---------------------------- */

  /* Empty state — what a view shows when there is nothing in it yet: an
     illustration or icon, a serif title, one sentence and the next action. */

  .mp-empty {
    box-sizing: border-box;
    display: grid;
    justify-items: center;
    align-content: start;
    gap: var(--space-3);
    max-width: var(--container-sm);
    margin-inline: auto;
    padding: var(--space-10) var(--space-6);
    color: var(--color-text-primary);
    font-family: var(--font-sans);
    text-align: center;
  }

  .mp-empty[data-variant="bordered"] {
    border: var(--border-width-thin) dashed var(--color-border-emphasis);
    border-radius: var(--radius-lg);
  }

  .mp-empty__media {
    display: grid;
    place-items: center;
    width: var(--space-20);
    height: var(--space-20);
    margin-bottom: var(--space-2);
    border-radius: var(--radius-full);
    background-color: var(--color-human-bg);
    color: var(--color-human-text);
  }

  .mp-empty__title {
    margin: 0;
    font-family: var(--font-serif);
    font-size: var(--text-h3);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-subheading);
    letter-spacing: var(--tracking-subheading);
  }

  .mp-empty__body {
    max-width: 45ch;
    margin: 0;
    color: var(--color-text-secondary);
    line-height: var(--leading-body);
  }

  .mp-empty__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-3);
  }

  /* ---- Toast (toast) ---------------------------------------- */

  /* Toast — brief confirmation of something the person just did, announced
     politely and gone after a few seconds. Lives in one live region per page;
     components/membrane.js provides MembranePalette.toast() and data-mp-toast. */

  .mp-toast-region {
    box-sizing: border-box;
    position: fixed;
    inset-block-end: var(--space-6);
    inset-inline-end: var(--space-6);
    z-index: var(--z-toast);
    display: grid;
    gap: var(--space-3);
    width: min(24rem, 100% - 2 * var(--space-4));
    pointer-events: none;
  }

  .mp-toast {
    --mp-toast-accent: var(--color-info);
    --mp-toast-title: var(--color-text-primary);

    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    border: var(--border-default);
    border-inline-start: var(--border-width-thick) solid var(--mp-toast-accent);
    border-radius: var(--radius-md);
    background-color: var(--color-bg-elevated);
    box-shadow: var(--elevation-overlay);
    color: var(--color-text-primary);
    font-family: var(--font-sans);
    font-size: var(--text-small);
    line-height: var(--leading-small);
    pointer-events: auto;
    transition: opacity var(--transition-enter), translate var(--transition-enter);
  }

  /* Set by membrane.js while a dismissed toast plays its exit. */
  .mp-toast[data-leaving] {
    opacity: 0;
    translate: 0 var(--space-2);
    transition: opacity var(--transition-exit), translate var(--transition-exit);
  }

  @starting-style {
    .mp-toast {
      opacity: 0;
      translate: 0 var(--space-2);
    }
  }

  .mp-toast[data-tone="success"] { --mp-toast-accent: var(--color-success); --mp-toast-title: var(--color-success-text); }
  .mp-toast[data-tone="warning"] { --mp-toast-accent: var(--color-warning); --mp-toast-title: var(--color-warning-text); }
  .mp-toast[data-tone="error"] { --mp-toast-accent: var(--color-error); --mp-toast-title: var(--color-error-text); }

  .mp-toast__content {
    display: grid;
    flex: 1;
    align-content: start;
    gap: var(--space-1);
    min-width: 0;
  }

  .mp-toast__content > p {
    margin: 0;
  }

  .mp-toast__title {
    color: var(--mp-toast-title);
    font-weight: var(--weight-semibold);
  }

  .mp-toast__close {
    appearance: none;
    display: inline-grid;
    flex: none;
    place-items: center;
    width: var(--size-control-sm);
    height: var(--size-control-sm);
    margin: calc(-1 * var(--space-2)) calc(-1 * var(--space-2)) 0 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--color-text-secondary);
    font: inherit;
    font-size: var(--text-body);
    line-height: 1;
    cursor: pointer;
  }

  .mp-toast__close:hover {
    background-color: var(--color-bg-hover);
    color: var(--color-text-primary);
  }

  .mp-toast__close:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  @media print {
    .mp-toast-region:not([data-placement="inline"]) {
      display: none;
    }
  }

  /* A region placed inside page content (docs, previews) instead of floating. */
  .mp-toast-region[data-placement="inline"] {
    position: static;
    width: auto;
    max-width: 24rem;
  }

  /* Touch screens: the close button grows to the 44px touch target. */
  @media (pointer: coarse) {
    .mp-toast__close { width: var(--size-touch-target); height: var(--size-touch-target); }
  }

  /* ---- Tooltip (tooltip) ------------------------------------ */

  /* Tooltip — a short, non-essential hint shown on hover and keyboard focus.
     Pure CSS; components/membrane.js adds Escape-to-dismiss (WCAG 1.4.13). */

  .mp-tooltip {
    position: relative;
    display: inline-flex;
  }

  .mp-tooltip__content {
    --mp-tooltip-gap: var(--space-2);

    box-sizing: border-box;
    position: absolute;
    inset-block-end: calc(100% + var(--mp-tooltip-gap));
    inset-inline-start: 50%;
    z-index: var(--z-tooltip);
    width: max-content;
    max-width: 16rem;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    background-color: var(--color-bg-inverse);
    box-shadow: var(--elevation-overlay);
    color: var(--color-text-inverse);
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    line-height: var(--leading-small);
    text-align: center;
    opacity: 0;
    translate: -50% var(--space-1);
    visibility: hidden;
    transition:
      opacity var(--transition-exit),
      translate var(--transition-exit),
      visibility var(--transition-exit);
  }

  /* Invisible bridge across the gap, so the pointer can travel from the
     trigger onto the tooltip without it closing (WCAG 1.4.13 "hoverable"). */
  .mp-tooltip__content::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    height: var(--mp-tooltip-gap);
  }

  .mp-tooltip:not([data-dismissed]):is(:hover, :has(:focus-visible)) > .mp-tooltip__content {
    opacity: 1;
    translate: -50% 0;
    visibility: visible;
    /* Wait a beat before appearing, so passing the pointer over a toolbar
       doesn't flash every hint. */
    transition:
      opacity var(--transition-enter) var(--duration-fast),
      translate var(--transition-enter) var(--duration-fast),
      visibility var(--transition-enter) var(--duration-fast);
  }

  .mp-tooltip[data-placement="bottom"] > .mp-tooltip__content {
    inset-block: calc(100% + var(--mp-tooltip-gap)) auto;
    translate: -50% calc(-1 * var(--space-1));
  }

  .mp-tooltip[data-placement="bottom"]:not([data-dismissed]):is(:hover, :has(:focus-visible)) > .mp-tooltip__content {
    translate: -50% 0;
  }

  .mp-tooltip[data-placement="bottom"] > .mp-tooltip__content::before {
    inset-block: auto 100%;
  }

  /* ---- Dialog (dialog) -------------------------------------- */

  /* Dialog — the native <dialog> element, opened modally with showModal()
     or the invoker attributes (commandfor / command="show-modal"). */

  .mp-dialog {
    --mp-dialog-width: 35rem;
    --mp-dialog-bg: var(--color-bg-elevated);
    --mp-dialog-fg: var(--color-text-primary);
    --mp-dialog-body: var(--color-text-secondary);

    box-sizing: border-box;
    width: min(var(--mp-dialog-width), 100% - 2 * var(--space-4));
    max-height: min(85dvh, 100% - 2 * var(--space-4));
    margin: auto;
    padding: 0;
    overflow: auto;
    border: var(--border-default);
    border-radius: var(--radius-xl);
    background-color: var(--mp-dialog-bg);
    box-shadow: var(--elevation-modal);
    color: var(--mp-dialog-fg);
    font-family: var(--font-sans);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    opacity: 0;
    translate: 0 var(--space-2);
    /* Closing: a quick ease-in exit. (A transition uses the timing of the
       state it is moving *to*.) */
    transition:
      opacity var(--transition-exit),
      translate var(--transition-exit),
      overlay var(--duration-fast) allow-discrete,
      display var(--duration-fast) allow-discrete;
  }

  .mp-dialog[open] {
    display: flex;
    flex-direction: column;
    opacity: 1;
    translate: 0 0;
    /* Opening: a slower ease-out entrance. */
    transition:
      opacity var(--transition-enter),
      translate var(--transition-enter),
      overlay var(--duration-normal) allow-discrete,
      display var(--duration-normal) allow-discrete;
  }

  @starting-style {
    .mp-dialog[open] {
      opacity: 0;
      translate: 0 var(--space-2);
    }
  }

  .mp-dialog::backdrop {
    background-color: var(--color-overlay-bg);
    backdrop-filter: blur(var(--blur-backdrop));
    opacity: 0;
    transition:
      opacity var(--transition-exit),
      overlay var(--duration-fast) allow-discrete,
      display var(--duration-fast) allow-discrete;
  }

  .mp-dialog[open]::backdrop {
    opacity: 1;
    transition:
      opacity var(--transition-enter),
      overlay var(--duration-normal) allow-discrete,
      display var(--duration-normal) allow-discrete;
  }

  @starting-style {
    .mp-dialog[open]::backdrop {
      opacity: 0;
    }
  }

  .mp-dialog[data-size="sm"] { --mp-dialog-width: 25rem; }
  .mp-dialog[data-size="lg"] { --mp-dialog-width: 50rem; }

  .mp-dialog__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-6) 0;
  }

  .mp-dialog__title {
    margin: 0;
    font-family: var(--font-serif);
    font-size: var(--text-h3);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-subheading);
    letter-spacing: var(--tracking-subheading);
  }

  .mp-dialog__body {
    flex: 1;
    padding: var(--space-4) var(--space-6);
    overflow-y: auto;
    color: var(--mp-dialog-body);
  }

  .mp-dialog__body > :first-child { margin-top: 0; }
  .mp-dialog__body > :last-child { margin-bottom: 0; }

  .mp-dialog__footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6) var(--space-6);
  }

  /* Freeze the page behind an open modal. */
  :root:has(.mp-dialog:modal) {
    overflow: hidden;
  }

  /* ---- Navbar (navbar) -------------------------------------- */

  /* Navbar — the sticky, translucent site header. Responds to its own width
     (container query), not the viewport, so it also works inside panels. */

  .mp-navbar {
    --mp-navbar-bg: var(--color-bg-primary);
    --mp-navbar-fg: var(--color-text-primary);
    --mp-navbar-link: var(--color-text-secondary);
    --mp-navbar-link-hover: var(--color-text-primary);
    --mp-navbar-link-bg-hover: var(--color-bg-hover);
    --mp-navbar-link-current: var(--color-human-text);
    --mp-navbar-indicator: var(--color-action-primary);

    box-sizing: border-box;
    position: sticky;
    top: 0;
    z-index: var(--z-nav);
    container-type: inline-size;
    border-block-end: var(--border-default);
    background-color: color-mix(in srgb, var(--mp-navbar-bg) 88%, transparent);
    backdrop-filter: blur(var(--blur-backdrop));
    color: var(--mp-navbar-fg);
    font-family: var(--font-sans);
  }

  /* In-page anchors land below the sticky bar instead of under it. */
  :root:has(.mp-navbar) {
    scroll-padding-top: calc(var(--size-nav) + var(--space-4));
  }

  @media print {
    .mp-navbar {
      display: none;
    }
  }

  .mp-navbar__inner {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: var(--space-6);
    width: min(100% - 2 * var(--site-margin), var(--container-xl));
    min-height: var(--size-nav);
    margin-inline: auto;
  }

  .mp-navbar__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    border-radius: var(--radius-sm);
    color: var(--mp-navbar-fg);
    font-family: var(--font-serif);
    font-size: var(--text-h4);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-heading);
    text-decoration: none;
    white-space: nowrap;
  }

  .mp-navbar__nav {
    margin-inline-start: auto;
  }

  .mp-navbar__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .mp-navbar__link {
    display: inline-flex;
    align-items: center;
    min-height: var(--size-touch-target);
    padding: 0 var(--space-3);
    border-radius: var(--radius-full);
    color: var(--mp-navbar-link);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-label);
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color var(--transition-fast), color var(--transition-fast);
  }

  .mp-navbar__link:hover {
    background-color: var(--mp-navbar-link-bg-hover);
    color: var(--mp-navbar-link-hover);
  }

  .mp-navbar__link[aria-current="page"] {
    color: var(--mp-navbar-link-current);
    text-decoration-line: underline;
    text-decoration-thickness: var(--border-width-medium);
    text-decoration-color: var(--mp-navbar-indicator);
    text-underline-offset: 0.5em;
  }

  :is(.mp-navbar__brand, .mp-navbar__link):focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  .mp-navbar__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  /* Narrow: brand + actions on top, links in a horizontally scrolling row. */
  @container (max-width: 48rem) {
    .mp-navbar__inner {
      flex-wrap: wrap;
      gap: 0 var(--space-4);
      min-height: var(--size-nav-mobile);
    }

    .mp-navbar__actions {
      margin-inline-start: auto;
    }

    .mp-navbar__nav {
      order: 3;
      width: 100%;
      margin-inline: calc(-1 * var(--space-3));
      overflow-x: auto;
      scrollbar-width: none;
      /* Fade the trailing edge so a clipped row reads as "scroll for more". */
      mask-image: linear-gradient(to right, currentColor calc(100% - var(--space-8)), transparent);
    }

    .mp-navbar__links {
      flex-wrap: nowrap;
      /* Room to scroll the last link clear of the fade. */
      padding-inline-end: var(--space-8);
    }
  }

  /* ---- Breadcrumb (breadcrumb) ------------------------------ */

  /* Breadcrumb — the path from the site root to the current page. */

  .mp-breadcrumb {
    color: var(--color-text-secondary);
    font-family: var(--font-sans);
    font-size: var(--text-small);
    line-height: var(--leading-small);
  }

  .mp-breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .mp-breadcrumb__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
  }

  .mp-breadcrumb__item + .mp-breadcrumb__item::before {
    content: "/" / "";
    color: var(--color-text-tertiary);
  }

  .mp-breadcrumb__link {
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    text-decoration-line: underline;
    text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
    text-underline-offset: 0.2em;
  }

  .mp-breadcrumb__link:hover {
    color: var(--color-text-primary);
    text-decoration-color: currentColor;
  }

  .mp-breadcrumb__link:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  .mp-breadcrumb__link[aria-current="page"] {
    color: var(--color-text-primary);
    font-weight: var(--weight-medium);
    text-decoration: none;
  }

  /* ---- Tabs (tabs) ------------------------------------------ */

  /* Tabs — the WAI-ARIA tabs pattern. Visual state follows aria-selected;
     components/membrane.js supplies click and arrow-key behavior. */

  .mp-tabs {
    --mp-tabs-fg: var(--color-text-secondary);
    --mp-tabs-fg-hover: var(--color-text-primary);
    --mp-tabs-fg-selected: var(--color-text-primary);
    --mp-tabs-bg-hover: var(--color-bg-hover);
    --mp-tabs-indicator: var(--color-action-primary);
    --mp-tabs-track: var(--color-bg-tertiary);
    --mp-tabs-bg-selected: var(--color-bg-primary);

    display: grid;
    align-content: start;
    gap: var(--space-4);
    min-width: 0;
    font-family: var(--font-sans);
  }

  .mp-tabs__list {
    display: flex;
    gap: var(--space-1);
    overflow-x: auto;
    border-block-end: var(--border-default);
    scrollbar-width: thin;
  }

  .mp-tabs__tab {
    box-sizing: border-box;
    appearance: none;
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--size-control-md);
    margin: 0 0 calc(-1 * var(--border-width-thin));
    padding: 0 var(--space-4);
    border: 0;
    border-block-end: var(--border-width-medium) solid transparent;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    background: transparent;
    color: var(--mp-tabs-fg);
    font-family: inherit;
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-state);
  }

  .mp-tabs__tab:hover {
    background-color: var(--mp-tabs-bg-hover);
    color: var(--mp-tabs-fg-hover);
  }

  .mp-tabs__tab[aria-selected="true"] {
    border-block-end-color: var(--mp-tabs-indicator);
    color: var(--mp-tabs-fg-selected);
  }

  /* Inset ring: the scrolling tab list would clip an outside outline. */
  .mp-tabs__tab:focus-visible {
    outline: var(--focus-ring);
    outline-offset: calc(-1 * var(--border-width-medium));
  }

  .mp-tabs__panel {
    min-width: 0;
    border-radius: var(--radius-sm);
  }

  .mp-tabs__panel:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  /* Segmented-control look for switching views of the same content. */
  .mp-tabs[data-variant="pill"] .mp-tabs__list {
    width: fit-content;
    max-width: 100%;
    padding: var(--space-1);
    border: 0;
    border-radius: var(--radius-full);
    background-color: var(--mp-tabs-track);
  }

  .mp-tabs[data-variant="pill"] .mp-tabs__tab {
    min-height: var(--size-control-sm);
    margin: 0;
    border: 0;
    border-radius: var(--radius-full);
  }

  .mp-tabs[data-variant="pill"] .mp-tabs__tab[aria-selected="true"] {
    background-color: var(--mp-tabs-bg-selected);
    box-shadow: var(--elevation-raised);
  }

  /* Touch screens: compact pill tabs grow to the 44px touch target. */
  @media (pointer: coarse) {
    .mp-tabs[data-variant="pill"] .mp-tabs__tab { min-height: var(--size-touch-target); }
  }

  /* ---- Accordion (accordion) -------------------------------- */

  /* Accordion — native <details>/<summary> disclosure. Adjacent accordions
     share borders; give them the same name="" to allow only one open. */

  .mp-accordion {
    border-block-end: var(--border-default);
    color: var(--color-text-primary);
    font-family: var(--font-sans);
  }

  .mp-accordion:not(.mp-accordion + .mp-accordion) {
    border-block-start: var(--border-default);
  }

  .mp-accordion__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: var(--size-control-md);
    padding: var(--space-3) var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--text-body);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-small);
    list-style: none;
    cursor: pointer;
    transition: background-color var(--transition-fast);
  }

  .mp-accordion__summary::-webkit-details-marker {
    display: none;
  }

  /* Chevron: a rotated corner, pointing down when closed and up when open. */
  .mp-accordion__summary::after {
    content: "";
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    border-block-end: var(--border-width-medium) solid var(--color-text-secondary);
    border-inline-end: var(--border-width-medium) solid var(--color-text-secondary);
    rotate: 45deg;
    translate: 0 -25%;
    transition: rotate var(--transition-state), translate var(--transition-state);
  }

  .mp-accordion[open] > .mp-accordion__summary::after {
    rotate: 225deg;
    translate: 0 25%;
  }

  .mp-accordion__summary:hover {
    background-color: var(--color-bg-hover);
  }

  .mp-accordion__summary:focus-visible {
    outline: var(--focus-ring);
    outline-offset: calc(-1 * var(--border-width-medium));
  }

  .mp-accordion__content {
    padding: 0 var(--space-2) var(--space-5);
    color: var(--color-text-secondary);
    font-size: var(--text-body);
    line-height: var(--leading-body);
  }

  .mp-accordion__content > :first-child { margin-top: 0; }
  .mp-accordion__content > :last-child { margin-bottom: 0; }

  /* Smooth open/close where the browser can animate to height: auto. */
  @supports (interpolate-size: allow-keywords) {
    .mp-accordion {
      interpolate-size: allow-keywords;
    }

    .mp-accordion::details-content {
      block-size: 0;
      overflow: hidden;
      transition:
        block-size var(--transition-enter),
        content-visibility var(--duration-normal) allow-discrete;
    }

    .mp-accordion[open]::details-content {
      block-size: auto;
    }
  }

  /* ---- Pagination (pagination) ------------------------------ */

  /* Pagination — numbered page links with previous/next. The current page is
     marked with aria-current="page"; unavailable ends with aria-disabled. */

  .mp-pagination {
    font-family: var(--font-sans);
    font-size: var(--text-small);
  }

  .mp-pagination__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .mp-pagination__link {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    min-width: var(--size-touch-target);
    min-height: var(--size-touch-target);
    padding: 0 var(--space-3);
    border-radius: var(--radius-full);
    color: var(--color-text-secondary);
    font-weight: var(--weight-medium);
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    transition: background-color var(--transition-fast), color var(--transition-fast);
  }

  .mp-pagination__link:hover:not([aria-current="page"], [aria-disabled="true"]) {
    background-color: var(--color-bg-hover);
    color: var(--color-text-primary);
  }

  .mp-pagination__link[aria-current="page"] {
    background-color: var(--color-action-secondary);
    color: var(--color-text-on-accent);
  }

  .mp-pagination__link[aria-disabled="true"] {
    opacity: var(--state-disabled-opacity);
    cursor: not-allowed;
  }

  .mp-pagination__link:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  .mp-pagination__gap {
    display: inline-flex;
    justify-content: center;
    min-width: var(--space-8);
    color: var(--color-text-tertiary);
  }

  /* Narrow: keep previous, current and next; hide the other numbers. */
  @container (max-width: 28rem) {
    .mp-pagination__item:not(:first-child, :last-child):not(:has([aria-current="page"])) {
      display: none;
    }
  }

  .mp-pagination {
    container-type: inline-size;
  }

  /* ---- Steps (steps) ---------------------------------------- */

  /* Steps — progress through an ordered sequence: course modules, onboarding,
     a multi-page form. aria-current="step" marks the current step;
     data-status="complete" marks finished ones (content state, not styling). */

  .mp-steps {
    counter-reset: mp-step;
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--font-sans);
  }

  .mp-steps__item {
    --mp-steps-marker: 2rem;
    --mp-steps-ring: var(--color-border-input);
    --mp-steps-line: var(--color-border-default);

    counter-increment: mp-step;
    position: relative;
    display: grid;
    grid-template-columns: var(--mp-steps-marker) minmax(0, 1fr);
    column-gap: var(--space-4);
    padding-bottom: var(--space-6);
  }

  .mp-steps__item:last-child {
    padding-bottom: 0;
  }

  /* Marker: the step number, a check when complete. */
  .mp-steps__item::before {
    content: counter(mp-step);
    box-sizing: border-box;
    display: grid;
    place-items: center;
    width: var(--mp-steps-marker);
    height: var(--mp-steps-marker);
    border: var(--border-width-medium) solid var(--mp-steps-ring);
    border-radius: var(--radius-full);
    background-color: var(--color-bg-primary);
    color: var(--color-text-secondary);
    font-size: var(--text-small);
    font-weight: var(--weight-semibold);
    font-variant-numeric: tabular-nums;
  }

  /* Connector from this marker down to the next. */
  .mp-steps__item:not(:last-child)::after {
    content: "";
    position: absolute;
    inset-block: calc(var(--mp-steps-marker) + var(--space-1)) var(--space-1);
    inset-inline-start: calc(var(--mp-steps-marker) / 2 - var(--border-width-thin));
    width: var(--border-width-medium);
    border-radius: var(--radius-full);
    background-color: var(--mp-steps-line);
  }

  .mp-steps__item[data-status="complete"] {
    --mp-steps-ring: var(--color-action-secondary);
    --mp-steps-line: var(--color-action-secondary);
  }

  .mp-steps__item[data-status="complete"]::before {
    content: "✓" / "";
    background-color: var(--color-action-secondary);
    color: var(--color-text-on-accent);
  }

  .mp-steps__item[aria-current="step"] {
    --mp-steps-ring: var(--color-action-primary);
  }

  .mp-steps__item[aria-current="step"]::before {
    color: var(--color-human-text);
    box-shadow: 0 0 0 var(--space-1) var(--color-human-bg);
  }

  .mp-steps__label {
    grid-column: 2;
    align-self: center;
    min-height: var(--mp-steps-marker);
    display: flex;
    align-items: center;
    margin: 0;
    color: var(--color-text-primary);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-small);
  }

  .mp-steps__item:not([data-status="complete"], [aria-current="step"]) .mp-steps__label {
    color: var(--color-text-secondary);
    font-weight: var(--weight-medium);
  }

  .mp-steps__description {
    grid-column: 2;
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-small);
    line-height: var(--leading-small);
  }

  /* Horizontal: markers in a row, labels underneath. */
  .mp-steps[data-orientation="horizontal"] {
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
  }

  .mp-steps[data-orientation="horizontal"] .mp-steps__item {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    row-gap: var(--space-2);
    padding: 0 var(--space-2);
    text-align: center;
  }

  .mp-steps[data-orientation="horizontal"] .mp-steps__label,
  .mp-steps[data-orientation="horizontal"] .mp-steps__description {
    grid-column: 1;
    min-height: 0;
  }

  .mp-steps[data-orientation="horizontal"] .mp-steps__item:not(:last-child)::after {
    inset-block: calc(var(--mp-steps-marker) / 2 - var(--border-width-thin)) auto;
    inset-inline: calc(50% + var(--mp-steps-marker) / 2 + var(--space-2)) calc(-50% + var(--mp-steps-marker) / 2 + var(--space-2));
    width: auto;
    height: var(--border-width-medium);
  }

  /* ---- Menu (menu) ------------------------------------------ */

  /* Menu — a list of actions in a native popover, opened by a button with
     popovertarget. Anchored to its button with CSS anchor positioning where
     supported; components/membrane.js positions it elsewhere and adds the
     menu keyboard pattern. */

  .mp-menu {
    --mp-menu-bg: var(--color-bg-elevated);
    --mp-menu-fg: var(--color-text-primary);
    --mp-menu-item-bg-hover: var(--color-bg-hover);
    --mp-menu-danger: var(--color-error-text);
    --mp-menu-label: var(--color-text-tertiary);

    box-sizing: border-box;
    min-width: 12rem;
    max-width: 20rem;
    margin: 0;
    padding: var(--space-1);
    border: var(--border-default);
    border-radius: var(--radius-md);
    background-color: var(--mp-menu-bg);
    box-shadow: var(--elevation-overlay);
    color: var(--mp-menu-fg);
    font-family: var(--font-sans);
    font-size: var(--text-small);
    opacity: 0;
    translate: 0 calc(-1 * var(--space-1));
    transition:
      opacity var(--transition-exit),
      translate var(--transition-exit),
      overlay var(--duration-fast) allow-discrete,
      display var(--duration-fast) allow-discrete;
  }

  .mp-menu:popover-open {
    display: grid;
    opacity: 1;
    translate: 0 0;
    transition:
      opacity var(--transition-enter),
      translate var(--transition-enter),
      overlay var(--duration-normal) allow-discrete,
      display var(--duration-normal) allow-discrete;
  }

  @starting-style {
    .mp-menu:popover-open {
      opacity: 0;
      translate: 0 calc(-1 * var(--space-1));
    }
  }

  @supports (position-area: block-end) {
    .mp-menu {
      position-area: block-end span-inline-end;
      position-try-fallbacks: flip-block, flip-inline;
      inset: auto;
      margin-block: var(--space-1);
    }
  }

  .mp-menu__item {
    box-sizing: border-box;
    appearance: none;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    min-height: var(--size-control-sm);
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
  }

  .mp-menu__item:hover,
  .mp-menu__item:focus-visible {
    background-color: var(--mp-menu-item-bg-hover);
  }

  .mp-menu__item:focus-visible {
    outline: var(--focus-ring);
    outline-offset: calc(-1 * var(--border-width-medium));
  }

  .mp-menu__item[data-tone="danger"] {
    color: var(--mp-menu-danger);
  }

  .mp-menu__item:disabled,
  .mp-menu__item[aria-disabled="true"] {
    opacity: var(--state-disabled-opacity);
    cursor: not-allowed;
  }

  .mp-menu__item > svg {
    flex: none;
    width: var(--size-icon-sm);
    height: var(--size-icon-sm);
  }

  .mp-menu__separator {
    height: var(--border-width-thin);
    margin: var(--space-1) var(--space-2);
    border: 0;
    background: var(--color-border-default);
  }

  .mp-menu__label {
    margin: 0;
    padding: var(--space-2) var(--space-3) var(--space-1);
    color: var(--mp-menu-label);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
  }

  /* Touch screens: items grow to the 44px touch target. */
  @media (pointer: coarse) {
    .mp-menu__item { min-height: var(--size-touch-target); }
  }
}