@layer components {
  /* Tags — language / attribute labels. */
  .tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px var(--space-2);
    font-size: var(--text-xs);
    color: var(--ink-2);
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 999px;
  }
  .tag--accent { color: var(--accent); background: rgba(43, 90, 122, 0.07); border-color: rgba(43, 90, 122, 0.3); }

  /* Filter chips — an applied filter the user can remove. */
  .chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-1) 2px var(--space-2);
    font-size: var(--text-xs);
    background: var(--surface);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-sm);
  }
  .chip__label { color: var(--ink-2); }
  .chip__remove {
    display: inline-flex;
    padding: 0;
    color: var(--ink-3);
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
  }
  .chip__remove:hover { color: var(--seal); }
  .chip__remove .icon { width: 0.9em; height: 0.9em; }
}