Citation

Recipe CSS

This is the exact CSS your kit ships for Citation — token-driven, so it re-themes with every knob. Get it (and the rest) from the configurator's Use kit panel.

/* === Citation ===
   The inline source chip a grounded AI answer hangs its claims on — a numbered
   pill at text baseline. Anchor or span; the number carries the accent, the
   label stays quiet. Group under a message with .cite-row.
     .cite       → the [n] chip: number + optional source label
     .cite-row   → a wrapping row of sources under the answer */
.cite {
  display: inline-flex;
  align-items: center;
  gap: var(--k-s-4);
  padding: 0 var(--k-s-6);
  border: var(--k-bw) solid var(--k-border);
  border-radius: 999px;
  background: var(--k-surface);
  font-size: var(--k-type-caption);
  line-height: 1.5;
  color: var(--k-fg-muted);
  text-decoration: none;
  vertical-align: baseline;
  transition: border-color var(--k-dur-fast, 120ms) var(--k-ease, ease),
              color var(--k-dur-fast, 120ms) var(--k-ease, ease);
}
.cite:hover { border-color: var(--k-primary); color: var(--k-fg); }
.cite__n {
  font-variant-numeric: tabular-nums;
  color: var(--k-primary);
  font-weight: var(--k-weight-semibold);
}
.cite-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--k-s-4);
  margin-top: var(--k-s-6);
}