@scope (mark-ui) {
  :where(:scope) {
    --mark-bg:     var(--md-sys-color-warning-container);
    --mark-fg:     var(--md-sys-color-warning-on-surface);
    --mark-px:     var(--a-space-0-5);
    --mark-radius: var(--a-radius-xs);
  }

  :scope {
    /* Inline so it sits in normal text flow without breaking baselines.
       Padding-inline only — vertical padding would push line-height. */
    display: inline;
    box-sizing: border-box;
    padding-inline: var(--mark-px);
    background: var(--mark-bg);
    color: var(--mark-fg);
    border-radius: var(--mark-radius);
    /* Preserve text decoration from ancestors (e.g. link underlines) */
    text-decoration: inherit;
  }

  /* Variants — same role × state pair as alert-ui / tag-ui */
  :scope[variant="info"] {
    --mark-bg: var(--md-sys-color-info-container);
    --mark-fg: var(--md-sys-color-info-on-surface);
  }
  :scope[variant="success"] {
    --mark-bg: var(--md-sys-color-success-container);
    --mark-fg: var(--md-sys-color-success-on-surface);
  }
  :scope[variant="danger"] {
    --mark-bg: var(--md-sys-color-danger-container);
    --mark-fg: var(--md-sys-color-danger-on-surface);
  }
  :scope[variant="muted"] {
    --mark-bg: var(--a-bg-muted);
    --mark-fg: var(--md-sys-color-neutral-on-surface);
  }
}
