/* THE TOLL BENCH CERTIFICATION BADGE (Steven 2026-10-13).
   templates/components/_certified_badge.html, macro certified_badge().

   "You get this yellow badge with the black target and black text, and then
   a number behind it, and that's the number of people it has helped."
   One shape: the brand yellow pill, a thin black line just inside its edge
   ("a little line around it"; inside, so it shows on the black header and
   on a white card alike, and it takes no room), the black target in front,
   the black words, then the count behind a hairline. One voice at every
   size, the header's mono caps, the number in the same font and size as
   the word (Steven 2026-10-13). Two sizes: sm, the header's own; md, the
   cards', a step larger. The target is one plain ring and its centre (the
   macro draws it; no outer ring). Design tokens only. */

.cert-badge {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: calc(var(--space-1) * .75);
  box-sizing: border-box;
  max-width: 100%;
  border: 1px solid var(--color-yellow-400);
  border-radius: var(--radius-full);
  background: var(--color-yellow-400);
  box-shadow: inset 0 0 0 1px var(--color-black);
  color: var(--color-black);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  vertical-align: middle;
}
a.cert-badge:hover { background: var(--color-yellow-500); border-color: var(--color-yellow-500); color: var(--color-black); }
a.cert-badge:focus-visible { outline: 2px solid var(--interactive-focus-ring); outline-offset: 1px; }

/* One plain target, black, in front (the macro draws it: the bullseye's inner
   ring and centre, Steven 2026-10-13). */
.cert-badge__target {
  display: block;
  flex: 0 0 auto;
  width: 1.1em;
  height: 1.1em;
  color: var(--color-black);
  stroke-width: 2.5;
}
.cert-badge__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* The number behind it: the people it has helped, after a hairline, in the
   word's own font and size. */
.cert-badge__count {
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  padding-left: calc(var(--space-1) * .75);
  border-left: 1px solid var(--color-black);
  font: inherit;
  font-variant-numeric: tabular-nums;
}

/* sm: the header's tag voice (layout-cards-header.css .lc-brand__sub), the
   sub line's own 9px, set tight (no tracking) so the badge line is no wider
   than "TOLL Bench" above it, and 14px tall, so the header keeps its
   height. */
.cert-badge--sm {
  gap: calc(var(--space-1) / 2);
  padding: calc(var(--space-1) * .375) var(--space-1) calc(var(--space-1) * .375) calc(var(--space-1) / 2);
  font-family: var(--font-mono);
  font-size: calc(var(--text-xs) * .75);
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-normal);
  text-transform: uppercase;
}
.cert-badge--sm .cert-badge__target { width: 1em; height: 1em; }
.cert-badge--sm .cert-badge__count { padding-left: calc(var(--space-1) / 2); }

/* md: the cards', the same voice as the header (Steven 2026-10-13: "it
   should use the same font that's in the brand at the top"): mono caps a
   step larger, the number in the same font at the same size as the word
   (it used to read full height beside small caps: "the number is really
   big"). */
.cert-badge--md {
  gap: var(--space-1);
  padding: calc(var(--space-1) * .75) var(--space-2) calc(var(--space-1) * .75) calc(var(--space-1) + 1px);
  font-family: var(--font-mono);
  font-size: calc(var(--text-xs) * .875);
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.cert-badge--md .cert-badge__target { width: 1.1em; height: 1.1em; }
.cert-badge--md .cert-badge__count { padding-left: var(--space-1); }

/* A badge and what it certifies after it (the proposal card's stamp row,
   feed/_agent_passport_popup.html win_stamp_row): one line, wrapping on a
   phone, the skill names in the stamp row's quiet words. */
.cert-line {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  max-width: 100%;
  min-width: 0;
}
.cert-line__for {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  line-height: 1.4;
}

/* A badge standing alone at the start of its line in a card's column (the
   shop's media cards, the recipe page's head, the shelf row): it keeps its
   own width instead of stretching across the column. */
.cert-tag {
  display: inline-flex;
  align-self: flex-start;
  max-width: 100%;
  min-width: 0;
}
.media-card__body > .cert-tag { margin-bottom: var(--space-1); }

/* EARNING IS GREY (Steven 2026-10-13 night: "Earning should not be the same
   colour as a real cert. Make it grey."): the macro marks an "Earning
   certificate" badge cert-badge--earning, the same shape at every size (the
   seal on a picture, the md badge on a card or the passport) with no yellow
   anywhere: the tertiary surface for the fill, the strong border token for
   its edge and inner line, the muted text colour for the target, the words
   and the count's hairline. A real certificate keeps the brand yellow. */
.cert-badge--earning {
  border-color: var(--border-default);
  background: var(--surface-tertiary);
  box-shadow: inset 0 0 0 1px var(--border-strong);
  color: var(--text-muted);
}
.cert-badge--earning .cert-badge__target { color: var(--text-muted); }
.cert-badge--earning .cert-badge__count { border-left-color: var(--border-strong); }
a.cert-badge--earning:hover { border-color: var(--border-strong); background: var(--surface-secondary); color: var(--text-muted); }

/* BLACK AND WHITE ON A WHITE CARD (Steven 2026-10-14 morning, the shop's
   Toll Bench Certified shelf rows: "It's the mini cert, and the number of
   people delivered. It can be black and white on this page (our pill)."):
   the macro's tone='mono' marks the pill cert-badge--mono, the same shape
   with no yellow: the white fill (its edge the fill's own colour), the thin
   black line inside the edge, the black target, the black words and the
   black count behind the black hairline. The yellow stays the default
   everywhere else; an Earning certificate badge stays grey in any tone. */
.cert-badge--mono {
  border-color: var(--color-white);
  background: var(--color-white);
  box-shadow: inset 0 0 0 1px var(--color-black);
  color: var(--color-black);
}
.cert-badge--mono .cert-badge__target { color: var(--color-black); }
.cert-badge--mono .cert-badge__count { border-left-color: var(--color-black); }
a.cert-badge--mono:hover { border-color: var(--surface-secondary); background: var(--surface-secondary); color: var(--color-black); }

/* QUIET IN THE SITE HEADER (Steven 2026-10-14, his crop of the header's
   "BETA · [the yellow pill: target + CERTIFY AI WORK]": "the pill here is
   too much."): the macro's tone='quiet' marks the header's badge
   cert-badge--quiet, no pill and no line: no fill, no edge, no inner line,
   no padding; the macro's own target in the header's yellow, then the words
   in the sub line's own mono caps, size, tracking and yellow
   (layout-cards-header.css .lc-brand__sub), so "◎ CERTIFYING AI
   BUSINESSES" reads as one line of type (the target a word space from the
   words), the target starting the line (no Beta before it since Steven
   2026-10-14 ~15:15: "remove Beta, and make it say, Certifying AI
   Businesses."). The header only; the pill stays everywhere else. */
.cert-badge.cert-badge--quiet {
  gap: calc(var(--space-1) * 1.5);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}
.cert-badge--quiet .cert-badge__target { color: inherit; }