/* SHARED·TOPICCHIP (1146) — the tap-to-add pill on onboarding's "tell us" step.
 * Job: "Pick the topics that interest you." A small set of pills, off / on / hover.
 * Owns the BARE .chip rules — the fallback for any .chip element not nested inside a more
 * specific selector. ⚠️ CROSS-LISTED: a descendant .xfc .chip lives in explorefoot.css
 * (line 13) and the browchip replacements in browchip.css (.bc--area, .bc--nav) cover
 * their own contexts; both have higher specificity than this bare rule and WIN inside
 * those call sites. Do not migrate the descendant selectors into this file. Do not
 * split the bare rule by site.
 *
 * status: todo (Lane A — card-mirror check 16's ENFORCED allowlist is
 *   ['draft', 'draft-final', 'locked'] at _card-mirror.js:55; status todo skips the
 *   HOST-CONTEXT + WB-missing gates. The wb page is owed separately, per D-736.)
 *
 * token-exception markers (verbatim move — values preserved byte-for-byte):
 *   - .chip-grid margin 12px 0 14px          (14px off-grid per check 23, _grid-snap.js:117)
 *   - .chip padding 6px 14px                (6px AND 14px off-grid per check 23)
 *   - .chip font-size var(--size-12)        (raw --size-* instead of --text-* role token
 *                                            per check 25, 25-type-role-scope.sh:18,35)
 *
 * CARD CSS IS SELF-CONTAINED (LANE-RULES §3). Every element styled under this card's
 * root class has its declarations explicitly here; zero reliance on page or
 * user-agent defaults.
 *
 * REVERSE-PORT (Lane A): if this card ever moves status to `draft`, this file MUST
 * be linked from web/index.html AND the 4 app.css rules MUST stay deleted. Until
 * then, status todo means the WB page is absent (D-736 owed) and linking this file
 * is OUTSIDE SCOPE for this brief.
 */
.chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 14px;                          /* token-exception */
}

.chip {
  padding: 6px 14px;                            /* token-exception */
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: var(--size-12);                    /* token-exception */
  font-weight: 500;
  color: var(--ink-600);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.chip:hover {
  border-color: var(--accent);
  background: var(--surface-hover-wash);
}

.chip.on {
  background: var(--accent);
  color: var(--paper);
  border-color: var(--accent);
}