/* ==========================================================================
   shared/term-pill.css - THE INLINE TERM PILL, ONE RULE (P2606, P2613)
   --------------------------------------------------------------------------
   A term pill is the small dotted chip that sits inside a sentence and
   defines a word on hover or focus (<abbr class="term" data-tip="...">).

   WHY ONE SHARED RULE. The touch sweep (P2594) found the pill glued to the
   bracket or comma beside it, and the fix lane patched one page with its own
   margin. The repo then had the `.term` name defined in more than one place
   with different spacing (P2606). The spacing, the box, the containment and
   the baseline now live here, once. A page that uses the pill links this
   file and declares only its own PALETTE (border colour, fill, ink), because
   the palette tokens are page-local and the theme-contrast ratchet judges a
   page's border-on-fill pair by selector in that page's own file.

   WHAT A PAGE MUST DECLARE ITSELF (and nothing else):
     .term{border-bottom-color:...;background:...;color:...}
   and a variant such as .term.e that changes only those three properties.

   NO OTHER ELEMENT IN THE SITE MAY USE THE CLASS NAME `.term`. The account
   admin legend used to call its row key `.term`; it is `.legend-key` now, so
   this name means one thing.

   THE FOUR THINGS THIS RULE CARRIES, each for a reason that cost a bug card:

   1. display:inline-block + contain:layout + z-index:var(--layer-menu)
      (P1424, tests/aventos-guide-nav-fit.test.cjs). A [data-tip]::after
      tooltip is laid out at rest on every pill even though it never paints,
      and when its resting position passed the page's scrollable edge it
      widened the document. contain:layout closes that, but containment has
      NO EFFECT on an inline box, so the pill must be inline-block. The
      explicit --layer-menu z-index is what lets the contained pill's
      tooltip clear a sticky navigation as one unit (containment alone makes
      a stacking context with no z-index, which would trap the tooltip behind
      the nav).

   2. margin-inline:.15em (P2594). The pill carries its own 4 px of padding
      inside the box; only a hair outside keeps the box off a bracket or a
      comma. No spacing token is that small, so it stays in em and follows
      the surrounding font size.

   3. THE BASELINE OFFSET (P2613). An element with layout containment has no
      baseline of its own, so the browser puts the BOTTOM of the pill on the
      line's baseline and the pill's text rides about 8 px above the words
      around it (measured on the Aventos install guide, 7.2 to 9.9 px). The
      offset lowers the pill by exactly the distance from its bottom edge to
      its own text baseline:
          border-bottom width
        + half the leftover line height   ( 50% of the pill's own line-height,
                                            because a vertical-align percentage
                                            is taken of the element's own
                                            line-height )
        - the font's half ascent-minus-descent  ( 0.3638em for Inter: ascent
                                            0.96875em, descent 0.2412em )
      as one calc(), so it follows font size and line height with no
      per-page number. Measured after the fix on every pill in the guide:
      within 0.65 px of the neighbouring words, down from 7.2 to 9.9 px.
      If the page font ever changes from Inter, re-measure and change the
      0.3638em constant only; the 50% and the border width are exact.

   4. :focus-visible ring. The pill is a focusable <abbr tabindex="0">.
   ========================================================================== */
.term {
  --term-pill-rule: 1.5px;
  display: inline-block;
  contain: layout;
  z-index: var(--layer-menu);
  padding: 0 4px;
  margin-inline: .15em;
  border-bottom: var(--term-pill-rule) dotted currentColor;
  border-radius: 4px;
  cursor: help;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
  vertical-align: calc(0.3638em - 50% - var(--term-pill-rule));
}
.term:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
}