/* ═══════════════════════════════════════════════════════════════════════════
   Escargo UI standard — Badge / Chip / Pill / Tag (canonical component classes)
   Standard doc: HELM-Escargo-UI-Chips-Standard.md (BINDING naming + a11y rules).
   Six components, named for their JOB, never their shape:
     .esc-notification-badge  NotificationBadge — compact count/alert attached to
                              another element (unread messages, pending bookings)
     .esc-count-badge         CountBadge — standalone count capsule (99+ cap)
     .esc-filter-chip         FilterChip — interactive <button> filter/selection;
                              toggle state via aria-pressed
     .esc-removable-chip      RemovableChip — value + SEPARATE labelled remove
                              <button> (never one control doing both jobs)
     .esc-status-pill         StatusPill — short status text, fully rounded;
                              colour + TEXT together, never colour alone
     .esc-category-tag        CategoryTag — non-interactive category metadata;
                              never styled to look clickable
   Generic shape-names are BANNED — the list + rationale live in the standard
   doc (HELM-Escargo-UI-Chips-Standard.md); the gate's drift tripwire enforces it.
   Tokens come from site.css (--forest/--lime/--pale/--line/--ink/--muted).
   ═══════════════════════════════════════════════════════════════════════════ */

/* NotificationBadge — circle for one digit, capsule for more; parent is relative */
.esc-notification-badge{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#b91c1c;color:#fff;font:700 11px/18px Inter,system-ui,sans-serif;text-align:center}
.esc-count-badge{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 8px;border-radius:999px;background:var(--forest);color:#fff;font:700 12px Inter,system-ui,sans-serif}

/* FilterChip — a real <button>; selected state via aria-pressed */
.esc-filter-chip{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:var(--white);color:var(--ink);font:700 .88rem Inter,system-ui,sans-serif;cursor:pointer}
.esc-filter-chip:hover{background:var(--pale)}
.esc-filter-chip[aria-pressed="true"]{background:var(--lime);border-color:transparent;color:var(--forest-deep)}
.esc-filter-chip:focus-visible{outline:3px solid var(--forest);outline-offset:2px}

/* RemovableChip — the value area and the remove <button> are SEPARATE controls */
.esc-removable-chip{display:inline-flex;align-items:center;gap:2px;min-height:44px;padding:0 4px 0 14px;border:1px solid var(--line);border-radius:999px;background:var(--pale);color:var(--ink);font:600 .88rem Inter,system-ui,sans-serif}
.esc-removable-chip .esc-chip-remove{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;margin-left:2px;border:0;border-radius:999px;background:transparent;color:var(--muted);font-size:1rem;cursor:pointer}
.esc-removable-chip .esc-chip-remove:hover{background:var(--line);color:var(--ink)}
.esc-removable-chip .esc-chip-remove:focus-visible{outline:3px solid var(--forest);outline-offset:1px}

/* StatusPill — status colours are semantic; text always carries the meaning */
.esc-status-pill{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;border-radius:999px;font:700 .72rem Inter,system-ui,sans-serif;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap}
.esc-status-green{background:var(--lime);color:var(--forest-deep)}          /* completed · active · verified */
.esc-status-amber{background:#fdf3d7;color:#8a6d1a;border:1px solid #eeddad} /* waiting · attention needed */
.esc-status-red{background:#fde8e8;color:#9b1c1c;border:1px solid #f5c6c6}   /* failed · expired · cancelled */
.esc-status-blue{background:#e3edfb;color:#1e4d8c;border:1px solid #c9dcf5}  /* scheduled · assigned · processing */
.esc-status-grey{background:var(--pale);color:var(--muted);border:1px solid var(--line)} /* inactive · draft · unavailable */

/* CategoryTag — quiet metadata; must not look clickable */
.esc-category-tag{display:inline-flex;align-items:center;padding:4px 10px;border-radius:8px;background:var(--pale);border:1px solid var(--line);color:var(--muted);font:700 .72rem Inter,system-ui,sans-serif;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}