/**
 * @file tags.css
 * @description Shared tag/chip styles — the canonical `.tag-pill` / `.tag-cloud` /
 *   `.tag-editor` classes backing the TagList component (/components/TagList.js).
 *   All colors come from theme tokens so chips flip correctly in dark mode.
 * @structure .tag-cloud (flex row) · .tag-pill (chip, +active/clear/clickable/
 *   overflow modifiers) · .tag-editor (+pills/input) — the editable variant.
 * @usage Loaded via useViewCSS / view <link>; rendered by /components/TagList.js.
 * @version-history
 *   v1.1.0 — 2026-06-02 — Component unification (#16): add layout-only
 *     .tag-pill--clickable / .tag-pill--overflow flags for TagList; add file
 *     header. No color changes.
 *   v1.0.0 — initial shared tag component styles.
 */

/* ── Shared Tag Components ── */

.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.5rem 0;
}

.tag-pill {
  font-size: 0.75rem;
  padding: 3px 10px;
  border-radius: 12px;
  border: 1px solid var(--border, #E5E7EB);
  background: transparent;
  color: var(--text, #1A1A2E);
  cursor: pointer;
  transition: all 0.15s;
}

.tag-pill:hover {
  border-color: var(--accent, #E8564A);
  background: rgba(232,86,74,0.06);
}

.tag-pill.active {
  background: var(--accent, #E8564A);
  color: #fff;
  border-color: var(--accent, #E8564A);
}

/* Layout-only modifiers — no color change vs. base .tag-pill. */
.tag-pill--clickable {
  cursor: pointer;
}

.tag-pill--overflow {
  cursor: default;
}

.tag-clear {
  color: var(--text-dim, #6B7280);
  font-style: italic;
}

.tag-clear.active {
  background: transparent;
  color: var(--text-dim, #6B7280);
  border-color: var(--border, #E5E7EB);
}

/* ── Tag Editor ── */

.tag-editor {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.tag-editor-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.tag-editor-input {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.tag-editor-input input {
  flex: 1;
  font-size: 0.8rem;
  padding: 3px 8px;
}