/* format-chips.css — gf.cx portfolio format-chips primitive
 *
 * A row of small, mono, uppercase "pills" that hang off a reference link —
 * the onward-format chips. First shipped on growth.gf.cx video-teardowns as
 * the BOOK row (BUY · LIBBY · PDF · EPUB) beside a cited book, then reused for
 * media rows (LISTEN · CLIP · WATCH) beside a podcast/video source. The pattern
 * is: give the reader every onward route to the thing as compact tappable
 * chips, instead of one bare link. Same primitive, different vocabulary.
 *
 * This is the shelf promotion of a pattern already applied on 4+ pages
 * (growth /reading/, nilofer, richard-harpin, pedro-pina teardowns) — one
 * source of truth so the chip look can't drift page to page.
 *
 * Markup:
 *   <span class="fmts">
 *     <a class="fmt"     href="…">buy</a>
 *     <a class="fmt"     href="…">libby</a>
 *     <a class="fmt alt" href="…">pdf</a>
 *     <a class="fmt alt" href="…">epub</a>
 *   </span>
 *
 *   .fmts        the inline-flex row (wraps; sits inline beside a link/title)
 *   .fmt         a chip — primary tier (accent)
 *   .fmt.alt     the secondary tier (clay) — e.g. the grey-market formats
 *                (PDF/EPUB) set apart from the first-party ones (BUY/LIBBY)
 *
 * ── Active design-system colours referenced here ──────────────────────
 *   --accent   primary chip fg + tint   (themes per surface/page)
 *   --clay     alt-tier chip fg + tint
 *   --mono     the portfolio mono stack
 * Each maps to a portfolio CSS custom property with a hex fallback, so this
 * file themes automatically on any surface that defines the palette and still
 * renders correctly on bare HTML. color-mix derives the tint from the same
 * token, so a chip recolours from a single variable.
 */

.fmts {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-left: 2px;
  vertical-align: middle;
}

.fmt {
  font-family: var(--mono, ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace);
  font-size: 10px;
  letter-spacing: .4px;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid transparent;
  text-decoration: none;
  color: var(--accent, #7a5230);
  /* plain translucent fallback first, then the token-derived tint on top */
  background: rgba(122, 82, 48, 0.12);
  background: color-mix(in oklch, var(--accent, #7a5230) 12%, transparent);
  transition: .12s;
}

.fmt:hover { border-color: currentColor; }

.fmt.alt {
  color: var(--clay, #9a6a4a);
  background: rgba(154, 106, 74, 0.14);
  background: color-mix(in oklch, var(--clay, #9a6a4a) 14%, transparent);
}