/* ── Tag v1.0 (MPR DS v1.11.0) ── */
    /* Archetype: status/label pill. Non-interactive by default.
       Interactive variants (selectable, dismissible, clickable) extend the base.
       Semantic categories map to existing feedback color tokens. */
    .tag {
      display: inline-flex; align-items: center;
      gap: var(--tag-icon-gap);
      padding: var(--tag-padding-v) var(--tag-padding-h);
      border-radius: var(--tag-radius);
      border: var(--tag-border-width) solid transparent;
      font-family: var(--font-family-base);
      font-size: var(--tag-font-size);
      font-weight: var(--font-weight-semibold);
      letter-spacing: -0.01em; line-height: 1.5;
      white-space: nowrap; user-select: none;
      box-sizing: border-box;
    }
    .tag i.fi {
      font-size: var(--tag-icon-size);
      display: inline-flex; align-items: center;
      line-height: 0; flex-shrink: 0;
    }
    /* ── Semantic categories ── */
    .tag-neutral  { background: var(--color-surface-primary);   color: var(--color-text-subtle); }
    .tag-primary  { background: var(--color-primary-muted);   color: var(--color-text-default); }
    .tag-success  { background: var(--color-success-subtle);  color: var(--color-success-text); }
    .tag-warning  { background: var(--color-warning-subtle);  color: var(--color-warning-text); }
    .tag-error    { background: var(--color-danger-subtle);   color: var(--color-danger); }
    .tag-info     { background: var(--color-info-subtle);     color: var(--palette-blue-500); }
    /* ── Brand categories (inheriting from previous badge) ── */
    .tag-warm  { background: var(--color-warm);    color: var(--color-text-default); }
    .tag-cool     { background: var(--color-cool-soft); color: var(--color-text-default); }
    .tag-feature { background: var(--color-feature);   color: var(--color-feature-text); }
    /* ── Sizes ── */
    .tag-sm { font-size: var(--tag-font-size); padding: 2px var(--tag-padding-h); }
    .tag-md { font-size: var(--tag-font-size); padding: var(--tag-padding-v) var(--tag-padding-h); }
    .tag-lg { font-size: 13px; padding: var(--space-1) var(--space-3); }
    /* ── Interactive: selectable ── */
    .tag-selectable { cursor: pointer; transition: opacity var(--motion-duration-fast) var(--motion-easing-standard); }
    .tag-selectable:hover { opacity: 0.82; }
    .tag-selectable:active { opacity: 0.72; }
    .tag-selectable.is-selected {
      border-color: currentColor;
      box-shadow: inset 0 0 0 1px currentColor;
    }
    .tag-selectable:focus-visible,
    .tag-selectable.is-focus {
      outline: var(--focus-ring-width) solid var(--color-border-focus);
      outline-offset: var(--focus-ring-offset-compact);
    }
    /* ── Interactive: clickable ── */
    .tag-clickable { cursor: pointer; transition: opacity var(--motion-duration-fast) var(--motion-easing-standard); }
    .tag-clickable:hover { opacity: 0.82; }
    .tag-clickable:active { opacity: 0.72; }
    .tag-clickable:focus-visible,
    .tag-clickable.is-focus {
      outline: var(--focus-ring-width) solid var(--color-border-focus);
      outline-offset: var(--focus-ring-offset-compact);
    }
    /* ── Dismissible ── */
    .tag-dismissible { padding-right: var(--space-1); }
    .tag-dismiss {
      display: inline-flex; align-items: center; justify-content: center;
      width: var(--tag-dismiss-size); height: var(--tag-dismiss-size);
      border-radius: var(--radius-full);
      cursor: pointer; flex-shrink: 0;
      border: none; background: transparent; padding: 0;
      color: inherit; opacity: 0.7;
      transition: opacity var(--motion-duration-fast) var(--motion-easing-standard);
      font-family: var(--font-family-base); font-size: var(--tag-icon-size);
    }
    .tag-dismiss:hover { opacity: 1; }
    .tag-dismiss:focus-visible {
      outline: var(--focus-ring-width) solid var(--color-border-focus);
      outline-offset: var(--focus-ring-offset-compact);
    }
    /* ── Disabled ── */
    .tag.is-disabled { opacity: var(--opacity-disabled); pointer-events: none; }
    /* ── Snapshot hover (V&E grid) ── */
    .tag-selectable.is-hover,
    .tag-clickable.is-hover { opacity: 0.82; }
    /* ── Group ── */
    .tag-group {
      display: flex; flex-wrap: wrap;
      gap: var(--tag-group-gap) var(--tag-group-gap);
    }
    /* ── Demo helpers ── */
    .tag-demo-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
    .tag-states-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: var(--space-3) var(--space-6);
    }
    .tag-state-item { display: flex; flex-direction: column; gap: var(--space-1); }
    .tag-state-label {
      font-size: 11px; font-weight: var(--font-weight-semibold);
      text-transform: uppercase; letter-spacing: 0.06em;
      color: var(--color-text-subtle);
    }