/* ─────────────────────────────────────────────────────────────────────────
   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. docs/dev/web/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-* / .interest-*
                               class, via that class's --chip-accent-* pair
     .chip--success/--danger/
       --warning/--info/--neutral
                               status colour, sourced from tokens (#208 item 0)
     .chip--grants             a journey step that grants capabilities
     .chip--keyed              amber edge outside an operator-chosen fill
     .chip--sm / .chip--lg     three sizes counting the default
     .chip--label              uppercase micro-label (status)
     .chip--dashed             set but inert — a flag nothing reads
     .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);
  }

  /* Same reason as .btn[hidden] in button.css: .chip sets display, so the UA
     sheet's [hidden] rule loses and a hidden chip would still show. */
  .chip[hidden] { display: none; }

  /* ── 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);
  }

  /* Generic hover affordance for any linked chip — added so .ppill--link's
     hover survives its migration onto .chip. Placed before the --solid and
     --typed hovers below so those still win at equal specificity. #208. */
  a.chip:hover { border-color: var(--color-accent); }

  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);
  }

  /* ── Status ────────────────────────────────────────────────────────
     Five, and the label carries the state — the colour carries severity
     only. Seven outreach statuses land on five of these because the chip
     already says "Pending" vs "Running" in words. Issue #208 item 0. */
  .chip--success {
    background: var(--color-success-bg);
    border-color: var(--color-success-border);
    color: var(--color-success);
  }

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

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

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

  .chip--neutral {
    background: var(--color-surface-2);
    border-color: var(--color-border);
    color: var(--color-text-muted);
  }

  /* A step that hands out authority. Amber, not red: consequential, not
     broken, and it does not collide with the red NO USER badge beside it on
     the team roster. METIS-pub#339. */
  .chip--grants {
    background: var(--color-warning-bg);
    border-color: var(--color-warning-border);
    color: var(--color-warning);
  }

  /* The signal that survives an operator-chosen fill. Two surfaces take their
     background from step.config.color_bg, an arbitrary hex an administrator
     typed, so a colour-only mark is invisible on exactly the step that most
     needs it. This is drawn OUTSIDE the fill: a step tinted amber cannot
     swallow it.

     3px is a literal because border widths already are throughout this sheet
     (.chip itself writes 1px solid); there is no width scale and #339 does not
     invent one. */
  .chip--keyed,
  .kanban-column--keyed .kanban-column__header {
    border-left: 3px solid var(--color-warning);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  /* The per-capability glyph inside a chip: sized to the text it sits with, so
     it inverts and scales with whatever the chip's colour turns out to be. */
  .chip__icon {
    width: 1em;
    height: 1em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
  }

  /* Colour comes from the --chip-accent-bg/-fg custom properties, which a
     sibling .holon-type-* / .journey-type-* / .interest-* class declares on
     the same element (base.css). Those classes must set the custom
     properties, not background/color directly — a rule in @layer base that
     sets background/color loses to this rule regardless of specificity,
     because @layer components always beats @layer base. Issue #208 item 0b. */
  .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);
  }

  /* A flag present in a config but not the boolean true, so no reader acts on
     it — and an unregistered key, which nothing reads at all. Dashed says
     "written down but not live"; it replaces .step-access-chip--unset. */
  .chip--dashed { border-style: dashed; }

  .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);
  }
}