/* ─────────────────────────────────────────────────────────────────────────
   CHIP — the one small-label component.

   Replaces .pchip, .ychip, .entity-chip, .rel-badge, .rel-type-badge,
   .type-badge, .journey-pill, .ppill, .pbadge, .interest-tag and
   .status-badge, which were eleven near-identical definitions of the same
   thing scattered across six stylesheets (.journey-pill was defined twice,
   differently, and whichever file loaded last won).

   Extend with a modifier; never fork. A third near-copy means stop and
   consolidate. specs/design-system.md §3.4.

   Anatomy:
     .chip                     shape, spacing, type — one definition
     .chip--subtle             quiet resting state WITH a real border
     .chip--solid              accent fill, for a primary linked entity
     .chip--outline            transparent fill, border only
     .chip--typed              takes its colours from a sibling
                               .holon-type-* / .journey-type-* class
     .chip--sm / .chip--lg     three sizes counting the default
     .chip--label              uppercase micro-label (status)
     .chip--mono               monospace body (IRIS ids, paths)
     .chip__avatar             leading avatar / icon slot
     .chip__name               truncating label
     .chip__remove             trailing dismiss button
   ───────────────────────────────────────────────────────────────────────── */

@layer components {
  .chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    max-width: 100%;
    padding: 2px var(--space-2);
    border: 1px solid transparent;
    border-radius: var(--chip-radius);
    background: var(--chip-bg);
    color: var(--chip-fg);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
    text-decoration: none;
    transition: background var(--transition-fast),
                border-color var(--transition-fast),
                color var(--transition-fast);
  }

  /* ── Variants ──────────────────────────────────────────────────────── */

  /* The quiet default. Issue #208 ask 1: the old .pchip had no border, so at
     rest it dissolved into the page. A border token, not an escape hatch. */
  .chip--subtle {
    background: var(--color-surface);
    border-color: var(--chip-border);
    color: var(--chip-fg);
  }

  .chip--solid {
    background: var(--chip-solid-bg);
    border-color: var(--chip-solid-bg);
    color: var(--chip-solid-fg);
  }

  a.chip--solid:hover {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    color: var(--chip-solid-fg);
  }

  .chip--outline {
    background: transparent;
    border-color: var(--chip-border);
  }

  /* Colour comes from the .holon-type-* / .journey-type-* class set on the
     same element, so a chip stays recognisable per entity type. */
  .chip--typed {
    background: var(--chip-accent-bg);
    color: var(--chip-accent-fg);
  }

  a.chip--typed:hover { text-decoration: underline; }

  /* ── Sizes ─────────────────────────────────────────────────────────
     Three steps, and the default is the one you want almost always.

     --sm is for a label sitting INSIDE a dense table cell or a line of body
     text, where a default chip would push the row taller — the old
     .rel-badge and .interest-tag slots. It is deliberately small; if it
     looks cramped in isolation, it is probably the wrong size for that
     context rather than the wrong size full stop.

     --lg is for a chip that carries an avatar and a name in a page header
     or a participant list — somewhere it is content, not metadata. */
  .chip--sm {
    padding: 0 var(--space-1);
    font-size: var(--text-xs);
  }

  .chip--lg {
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-base);
  }

  /* ── Treatments ────────────────────────────────────────────────────── */
  .chip--label {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: var(--radius-sm);
  }

  .chip--mono { font-family: var(--font-mono); }

  /* "+3 more" overflow indicator at the end of a chip row. */
  .chip--more {
    background: transparent;
    border-color: transparent;
    color: var(--color-text-muted);
  }

  /* ── Parts ─────────────────────────────────────────────────────────── */

  /* Avatar/icon slot. Sits flush against the chip's leading edge, which is
     why the chip's own left padding is dropped when one is present — the
     avatar+link pattern issue #208 ask 3 asked us to name. */
  .chip:has(> .chip__avatar) { padding-left: 2px; }

  .chip--lg:has(> .chip__avatar) { padding-left: var(--space-1); }

  .chip__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.6em;
    height: 1.6em;
    border-radius: var(--radius-full);
    object-fit: cover;
    overflow: hidden;
    background: var(--color-surface-2);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
  }

  .chip__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .chip__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.15em;
    height: 1.15em;
    padding: 0;
    border: none;
    border-radius: var(--radius-full);
    background: transparent;
    color: inherit;
    opacity: 0.45;
    cursor: pointer;
    font-size: inherit;
    line-height: 1;
    transition: opacity var(--transition-fast), background var(--transition-fast);
  }

  .chip__remove:hover {
    opacity: 1;
    background: var(--color-surface-2);
  }

  /* ── Row ───────────────────────────────────────────────────────────── */
  .chip-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    min-width: 0;
    list-style: none;
  }

  .chip-row__empty {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }
}