/* chips.css — all chip variants. A chip is a compact monochrome inline
   label, square corners, draftsman feel. Variants tune emphasis (-strong),
   semantics (-verified, -bundled), or interactivity (-action). */

.chip {
  display: inline-block; font-size: 11px; line-height: 1.6;
  font-variation-settings: var(--mono); letter-spacing: .02em;
  padding: 0 .5em; border: 1px solid var(--hair); border-radius: 0;
  color: var(--grey); background: var(--paper); white-space: nowrap; vertical-align: middle;
}
a.chip { text-decoration: none; }
a.chip:hover { color: var(--paper); background: var(--ink); border-color: var(--ink); }

/* private / emphasis — inverted ink-on-paper */
.chip-strong { border-color: var(--ink); color: var(--paper); background: var(--ink); }

/* chip-verified: positive affirmation — a publisher-signature attribution chip
   on a package version row. Quiet (no strong fill) so it reads as metadata; the
   leading mark is the hand-drawn pic verified-glyph (a sage-check seal) added
   inline in the template, rather than a CSS ✓, so it carries the same brand
   character as the rest of the marks. */
.chip-verified { border-color: var(--ink); color: var(--ink); }

/* chip-bundled marks a package that ships with this gastropod build (the
   snail-shell spiral is gastropod's identity mark). Inverted ink-on-paper so
   it stands out from the plain-chip row of ecosystem labels next to it. */
.chip-bundled { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip-bundled .ico { filter: invert(1); }

/* a chip that is also a button or link (toggle visibility, configure) */
.chip-action {
  font-family: inherit; cursor: pointer; text-decoration: none;
}
.chip-action:hover { border-color: var(--ink); color: var(--ink); }
.chip-strong.chip-action:hover { color: var(--paper); opacity: .85; }

/* dashed-border "coming soon" variant */
.chip-soon { color: var(--faint); border-style: dashed; }

/* "fix this soon" warning chip — ochre fill against ink text. Pairs
   with .chip-strong (red / "fix now") for the admin storage alert
   in the footer; the two together carry the severity spectrum
   without inventing a third class. */
/* Ochre fill is light in both themes, so the text must NOT use --ink (which
   flips to off-white in dark mode -> 1.57:1, unreadable). Fixed dark ink. */
.chip-warn { border-color: var(--ochre); color: var(--ink-on-accent); background: var(--ochre); }
a.chip-warn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.chip-row { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }

/* chip-tag: smaller, quieter chip for doc/news tags. Inline next to
   titles + above doc bodies. Lower-case content (tags are lowercased
   at parse time), monospace weight stays consistent with the chip
   family but the size drops a notch so a row of three tags doesn't
   visually outshout the doc title they hang off. */
.chip-tag { font-size: 10px; padding: 0 .4em; opacity: .85; }
.chip-tag:hover { opacity: 1; }

/* chip-updated: a passive "last updated" stamp shown alongside the doc tags.
   Same small size as a tag, but faint + dashed so it reads as metadata, not a
   clickable tag (it's a <span>, never a link). */
.chip-updated { font-size: 10px; padding: 0 .4em; color: var(--faint); border-style: dashed; }

/* doc-tags: the strip rendered above a doc body (under the H1) and
   between titles + tag chips on the docs index. Inline-flex with a
   little gap; no leading margin so it tucks right under the heading. */
.doc-tags { display: inline-flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 1rem; align-items: center; }
.post-list .chip-tag { margin-left: .35rem; }

/* cara-chips: the chip strip inside an open carapace cell. */
.cara-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0 0 0.55rem; }

/* chip-source: the lead-origin label in the admin /leads table. Keeps the
   plain monochrome chip body and adds a colored left-border accent per source
   so pricing / demo / waitlist / enterprise are scannable at a glance without
   four loud fills. Falls back to a plain chip for any unrecognized source. */
.chip-source { border-left-width: 3px; text-transform: lowercase; }
.chip-source-pricing    { border-left-color: var(--sage); }
.chip-source-demo       { border-left-color: var(--lavender); }
.chip-source-waitlist   { border-left-color: var(--ochre); }
.chip-source-enterprise { border-left-color: var(--ink); }