/*
 * Tier badges — the SEAL and the CHIP.
 *
 * SHARED BY BOTH BUNDLES, deliberately (owner asked the right question,
 * 2026-07-16: "do we need a separate bundle or a common bundle called from
 * both places?"). The storefront (kdb.css) and the Store OS (counter.css) are
 * two entirely separate bundles — the app shell is a standalone document that
 * never loads kdb.css — so anything both surfaces show has to live somewhere
 * both can reach. That is this file, enqueued by functions.php and <link>ed by
 * the app shell in inc/counter.php.
 *
 * Duplicating it instead was the tempting option: the two bundles ALREADY
 * duplicate the nine brand tokens and both @font-face blocks, and those have
 * not drifted in all this time. But tokens are nine stable one-liners; this is
 * a component whose geometry is measured to a tenth of a percent, and that is
 * precisely the kind of thing that drifts silently — a chip 2px shorter in the
 * POS than on the storefront is a bug nobody reports.
 *
 * It is safe to add a third file here, which was worth checking before doing
 * it: /assets/ is ALREADY the service worker's static prefix, every asset URL
 * carries ?v=<mtime> via kdb_asset_ver() so editing this file changes its URL
 * and busts the cache by itself, and the SW's precache is best-effort so an
 * extra entry cannot fail an install.
 *
 * Drawn, not shipped as the PNGs in Logo/Current/Tier Badges — see the note in
 * inc/tier-badge.php for why (tiers are admin-editable data; art is not).
 * Those PNGs are the design reference: this must match THEM.
 *
 * ⚠ Never on an ink ground (the spec places badges on Paper, Cream, or card
 *   white), and never Kare Red (that dot belongs to the logo mark alone).
 * ⚠ The palette arrives as custom properties from PHP (kdb_tier_style) — never
 *   hardcode a tier colour here. A renamed or newly added tier has no art and
 *   no hardcoded anything; it is drawn from whatever PHP hands over.
 */

/* CHIP — pill + dot + name. Spec: 32pt tall, Montserrat 500 / 11pt / .26em. */
.kdb-tchip {
  display: inline-flex; align-items: center; gap: .58em;
  height: 32px; padding: 0 13px 0 11px;
  border: 1.5px solid var(--kdb-t-line, var(--kdb-line));
  border-radius: 999px;
  background: var(--kdb-t-wash, transparent);
  font-family: var(--kdb-ui, 'Montserrat', system-ui, sans-serif);
  font-size: 11px; font-weight: 500; line-height: 1;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--kdb-t-deep, var(--kdb-ink));
  white-space: nowrap; vertical-align: middle;
}
.kdb-tchip.is-sm { height: 24px; padding: 0 10px 0 8px; font-size: 9px; gap: .5em; border-width: 1px; }
.kdb-tchip-dot { width: .82em; height: .82em; border-radius: 50%; background: var(--kdb-t-deep, var(--kdb-ink)); flex: none; }
/* letter-spacing also trails the LAST letter — pull it back or the pill
   reads right-heavy against the dot. */
.kdb-tchip-l { margin-right: -.26em; }

/* SEAL — ring, inner ring, initial, dot, name. Spec proportions, measured off
   seal-*.png: ring stroke 1.4% of ø · inner ring inset 5.8% · initial 37.5% of
   ø at 45% height (optically above centre) · dot 4.7% of ø at 69% height. */
.kdb-tseal {
  display: inline-flex; flex-direction: column; align-items: center;
  gap: calc(var(--kdb-t-size, 108px) * .105);
  font-family: var(--kdb-ui, 'Montserrat', system-ui, sans-serif);
}
.kdb-tseal-ring {
  position: relative; flex: none;
  width: var(--kdb-t-size, 108px); height: var(--kdb-t-size, 108px);
  border-radius: 50%;
  border: max(1.5px, calc(var(--kdb-t-size, 108px) * .014)) solid var(--kdb-t-line, var(--kdb-line));
  background: var(--kdb-t-wash, transparent);
}
.kdb-tseal-ring::before {
  content: ""; position: absolute; inset: calc(var(--kdb-t-size, 108px) * .058);
  border-radius: 50%;
  border: max(1px, calc(var(--kdb-t-size, 108px) * .007)) solid var(--kdb-t-faint, var(--kdb-line));
}
.kdb-tseal-ini {
  position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%);
  font-family: var(--kdb-disp, 'Cormorant Garamond', Georgia, serif);
  font-style: italic; font-weight: 500; font-size: calc(var(--kdb-t-size, 108px) * .375);
  line-height: 1; color: var(--kdb-t-deep, var(--kdb-ink));
  /* spec: optical nudge -0.06em. text-indent cancels the trailing side of it
     so the glyph stays optically centred rather than drifting left. */
  letter-spacing: -.06em; text-indent: -.06em;
}
.kdb-tseal-dot {
  position: absolute; top: 69%; left: 50%; transform: translate(-50%, -50%);
  width: calc(var(--kdb-t-size, 108px) * .047); height: calc(var(--kdb-t-size, 108px) * .047);
  border-radius: 50%; background: var(--kdb-t-deep, var(--kdb-ink));
}
.kdb-tseal-l {
  font-size: 11px; font-weight: 500; line-height: 1;
  letter-spacing: .3em; text-transform: uppercase; /* spec: .3em on the seal */
  color: var(--kdb-t-deep, var(--kdb-ink));
  margin-right: -.3em; /* same trailing-space pull-back as the chip */
}