/* Every badge on the site (CLAUDE.md rule 11; owner, 2026-10-19). This file owns a badge's centring; a page's own CSS gives each
   badge only its look: colour, border, radius, font, horizontal padding, and its size (height, and width where it has one; or,
   for a badge whose label wraps onto more lines on a narrow screen, .badge--grow and the padding above and below it).

     <x class="badge …"><span class="badge__text">Label</span></x>
     two-part chip:  <x class="badge …"><span class="badge__text">Focus</span><span class="badge__text">Undereye wrinkles</span></x>

   The outer is a flex row that centres its labels on the cross axis. Each label is one block, line-height 1, trimmed to the
   letters' cap height and baseline (text-box), so flex centres the letters themselves. A badge sets its height (no vertical padding, no min-height); flex centres the trimmed letters in it, and nothing else moves them (Ben, 2026-10-22: no nudging).
   scripts/badge-audit.mjs checks every badge on the site against this, in every state, at iPhone resolution. */

/* one device pixel, for rounding to the screen's pixel grid */
:root{--dpx:1px}
@media (min-resolution:2dppx),(-webkit-min-device-pixel-ratio:2){:root{--dpx:.5px}}
@media (min-resolution:3dppx),(-webkit-min-device-pixel-ratio:3){:root{--dpx:calc(1px/3)}}

/* the badge: a flex row (or row-reverse) centring its labels (display is left overridable so a page can hide a badge) */
.badge{display:inline-flex;align-items:center!important;justify-content:center!important;line-height:1!important;box-sizing:border-box!important;padding-top:0!important;padding-bottom:0!important;min-height:0!important}
.badge.badge--block{display:flex}
/* a badge whose words start at its left edge (a full-width row chip, as the plan mockups' Focus / Start / Avoid / Boost rows): the
   labels start the row and are still centred across it */
.badge.badge--start{justify-content:flex-start!important}
/* a badge inside a badge (a dot-and-label level inside a chip) sizes to its label unless it sets its own --badge-h */
.badge .badge{--badge-h:initial}
.badge[hidden]{display:none!important}

/* the label: one block, line-height 1, trimmed to cap height and baseline, placed only by the badge's flex centring. Like the text it replaced, it shrinks
   to the badge's width down to its longest word, so its words wrap where they did before (a narrow phone, a zoomed display).
   Its display is not forced, so a page rule or a script can still hide it (a done step's number gives way to its check);
   scripts/badge-audit.mjs fails a shown label that is not a block */
.badge>.badge__text[hidden]{display:none!important}
.badge>.badge__text{display:block;flex:0 1 auto;line-height:1!important;text-box:trim-both cap alphabetic!important;padding-top:0!important;padding-bottom:0!important;margin-top:0!important;margin-bottom:0!important;position:static!important;transform:none!important;vertical-align:baseline!important}
/* a label written to wrap keeps its own line spacing (only its first and last lines are trimmed) */
.badge>.badge__text.badge__text--lines{line-height:var(--badge-lines,1.3)!important}
/* a two-line label placed by its own line boxes, as it was before the sweep (the quiz's supplement tiles, Ben 2026-10-20): not
   trimmed, so the block sits where its lines put it */
.badge>.badge__text.badge__text--untrimmed{text-box:normal!important}
/* a badge whose height follows its label's lines (a sentence that wraps on a narrow phone) has no height: equal padding above
   and below the label (--badge-pad-y) centres it */
.badge.badge--grow{height:auto!important;padding-top:var(--badge-pad-y,0px)!important;padding-bottom:var(--badge-pad-y,0px)!important}

/* No nudges (Ben, 2026-10-22: "how hard is it to centre text within a badge … NO NUDGING"): the label is the trimmed letters,
   and the badge's flex centring is the only thing that places them. */

/* The overlay badge (DF-444/445, Ben 2026-10-27/28): one size and one type for every badge laid over a before/after or
   now-versus-target picture — the home's viewer and its desktop cards, the plan's viewer and its ten-year faces, quiz B14 and the
   diagnosis's Hidden damage. A page keeps its own positioning, colours and clip rules (left, right, top, background, color,
   max-width, overflow, z-index); this gives the 30px height, 12px sides, 8px corners, 6px gap and the 11.5px caps. Where the pair
   is shown in halves, oona-tag-fit.js steps a label down (never up) until the badge keeps 12px between its own edges and its
   half's. The class goes on the same element as .badge (CLAUDE.md rule 11: the label is a .badge__text child). */
.ov-tag{position:absolute;top:12px;z-index:4;box-sizing:border-box;height:30px;--badge-h:30px;padding:0 12px;border-radius:8px;display:inline-flex;gap:6px;white-space:nowrap;pointer-events:none;transition:opacity .2s ease}
.ov-tag>.badge__text{flex:none;white-space:nowrap;font-family:var(--ts-sans);font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:inherit}