/*
 * Status chips (README "Status chips"): pill, padding 4px 11px, 12px/700, optional 13px icon.
 * Tones: ok, warn, err (+ solid), blue, neutral, draft (dashed), accent ("Acknowledgment required").
 * Rendered by status_chip(status, label, icon:, solid:, tone:).
 */
@layer components {
  .chip {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
  }
  .chip .icon { font-size: 13px; }

  /* In column stacks (auth heads, page heads, cards) a chip hugs its content instead of stretching. */
  :is(.auth__head, .page-head__text, .card, .stack, .empty, .sheet) > .chip { align-self: flex-start; }

  .chip--ok { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
  .chip--warn { background: var(--color-warn-soft); color: var(--color-warn-text); }
  .chip--err { background: var(--color-err-soft); color: var(--color-err-text); }
  .chip--err.chip--solid { background: var(--color-err); color: var(--color-bg); }
  .chip--blue { background: var(--color-blue-soft); color: var(--color-blue-deep); }
  .chip--neutral { background: var(--color-neutral-200); color: var(--color-neutral-800); }
  .chip--accent { background: var(--color-accent-100); color: var(--color-accent-800); }
  .chip--draft {
    padding: 2.5px 9.5px;
    border: 1.5px dashed var(--color-neutral-600);
    background: transparent;
    color: var(--color-neutral-800);
  }

  /* Count next to a heading ("Required actions 4") */
  .count-badge {
    min-width: 28px;
    height: 28px;
    padding: 0 9px;
    display: inline-grid;
    place-items: center;
    border-radius: var(--radius-pill);
    background: var(--color-text);
    color: var(--color-bg);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
  }
  .count-badge--sm { min-width: 24px; height: 24px; padding: 0 8px; font-size: 12px; }
}