/* ============================================================
   Chips & Tags
   ------------------------------------------------------------
   Two small pill primitives, plus a flex-wrap container.

     .pb-chip  — interactive pill (filter, toggle, suggestion).
                 Subtle by default, darkens on hover, and gets a
                 solid fill in its `.on` (selected/active) state.
                 Usually rendered as a <button>, so it inherits
                 the global keyboard focus ring from base.css.
     .pb-tag   — static label chip (read-only metadata). Same
                 fill, gentler radius, no hover / no pointer.
     .pb-chips — flex-wrap row that lays chips/tags out with a
                 consistent gap.

   `.pb-chip.ai` re-tints a chip with the AI accent (indigo),
   for AI-suggested / AI-only moments.

   Token-based throughout — no hard-coded colours, radii,
   spacing or shadows.
   ============================================================ */

/* ---- Container ---- */
.pb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4375rem;
}

/* ---- Interactive chip ---- */
.pb-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.375rem 0.8125rem;
  border: none;
  border-radius: var(--r-pill);
  background: var(--surface-warm);
  color: var(--text-soft);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

/* Icon glyph inside a chip — tracks the text colour, one notch softer. */
.pb-chip > pb-icon { flex: 0 0 auto; line-height: 0; }
.pb-chip svg {
  width: 15px;
  height: 15px;
  color: var(--text-faint);
  transition: color var(--dur) var(--ease);
}

/* Trailing count / meta text (e.g. a result tally). */
.pb-chip .ct { color: var(--text-faint); }

/* Hover — darken the fill and firm up the text. */
.pb-chip:hover {
  background: color-mix(in srgb, var(--text) 8%, var(--surface-warm));
  border-color: var(--border-strong);
  color: var(--text);
}
.pb-chip:hover svg { color: var(--text-soft); }

/* Selected / active — solid darker fill, borderless. */
.pb-chip.on {
  background: color-mix(in srgb, var(--text) 8%, var(--surface-warm));
  border-color: transparent;
  color: var(--text);
}
.pb-chip.on svg { color: var(--text-soft); }

/* ---- AI-tinted chip ---- */
.pb-chip.ai {
  background: var(--ai-tint);
  border-color: var(--ai-border);
  color: var(--ai);
}
.pb-chip.ai svg { color: var(--ai); }
.pb-chip.ai:hover {
  background: var(--ai-tint);
  border-color: var(--ai);
  color: var(--ai);
}
.pb-chip.ai:hover svg { color: var(--ai); }