/* ==========================================================================
   BOOKVELT — Canonical optical-text-centering utility
   ==========================================================================
   Problem:
     Variable fonts (Inter, Roboto Condensed, system stacks) all have
     asymmetric vertical metrics. The font's full metric box (ascent +
     descent) is taller above the cap-height than below the baseline, so
     `align-items: center` + `line-height: 1` centers the LINE BOX, not the
     visual ink. Result: in every pill, button, and badge the text reads
     slightly low — extra whitespace above the cap, less below the baseline.

   Old hack (now superseded):
     Per-selector asymmetric padding (e.g. `padding: 9px 16px 7px;`) — broke
     every time font-size changed and never crossed-browser-consistent.

   Real fix:
     Modern browsers ship `text-box-trim` / `text-box-edge` (Chrome 133+,
     Safari 18.2+, Edge 133+, Firefox flagged through 149). It tells the
     browser to size the inline box from cap-height (top) to alphabetic
     baseline (bottom) instead of the full ascent/descent metric box, so
     symmetric padding now centers the actual glyph ink. We use the shorthand
     `text-box: trim-both cap alphabetic`.

   Fallback for older browsers (Capsize-style):
     Insert two zero-content table-display pseudo-elements with negative
     margins equal to the (ascent - cap-height)/UPM em and descent/UPM em
     amounts. This pulls the trim regions into the element's whitespace
     so the visible cap+baseline ink sits in the geometric center.

   Inter metrics (UPM 2816, ascent 2728, descent 680, cap-height 2048):
     top trim:    (2728 - 2048) / 2816 = 0.2415em
     bottom trim:        680    / 2816 = 0.2415em
   Roboto Condensed metrics (UPM 2048, ascent 1900, descent 500, cap-height 1456):
     top trim:    (1900 - 1456) / 2048 = 0.2168em
     bottom trim:        500    / 2048 = 0.2441em
   Difference is <0.5px @ 12px font-size — Inter values are a safe shared
   default. Custom fonts that need different metrics can override
   --tb-cap-top / --tb-bot inside the parent.
   ==========================================================================
*/

:root {
  /* Inter metrics — overridden per-font below */
  --tb-cap-top: 0.2415em;
  --tb-bot:     0.2415em;
}

/* Primary: native text-box-trim. Symmetric padding now optically centers. */
.tb-trim,
.btn, .bookvelt-btn, .bookvelt-pill,
.ord-type, .ord-status, .ord-id, .count-pill,
.fixture-pill, .fixture-status, .fixture-period,
.bp-pill, .ld-pill, .ed-pill, .fd-pill,
.pill, .pill-base,
.cat-pill, .tv-pill, .zone-pill, .badge,
.ord-type-toggle .ord-type-chip,
.dash-plan-item-kind {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  /* Shorthand also supported by the spec; we set the long-hand for safety. */
}

/* Tighter font-size on Roboto-Condensed sources — drift is sub-pixel at
   normal UI sizes, no overrides needed. */
.bookvelt-btn,
.bookvelt-pill {
  --tb-cap-top: 0.2168em;
  --tb-bot:     0.2441em;
}

/* Fallback for browsers without text-box-trim — Capsize-style pseudo-element
   trim. Insert two zero-content table-display rows with negative margins
   equal to the whitespace above the cap and below the baseline. */
@supports not (text-box-trim: trim-both) {
  .tb-trim,
  .btn, .bookvelt-btn, .bookvelt-pill,
  .ord-type, .ord-status, .ord-id, .count-pill,
  .fixture-pill, .fixture-status, .fixture-period,
  .bp-pill, .ld-pill, .ed-pill, .fd-pill,
  .pill, .pill-base,
  .cat-pill, .tv-pill, .zone-pill, .badge,
  .ord-type-toggle .ord-type-chip,
  .dash-plan-item-kind {
    /* Anchor: re-establish a positive context so ::before/::after table-cell
       collapse doesn't break flex/inline-flex layouts. */
    position: relative;
  }
  .tb-trim::before,
  .btn::before, .bookvelt-btn::before, .bookvelt-pill::before,
  .ord-type::before, .ord-status::before, .ord-id::before, .count-pill::before,
  .fixture-pill::before, .fixture-status::before, .fixture-period::before,
  .bp-pill::before, .ld-pill::before, .ed-pill::before, .fd-pill::before,
  .pill::before, .pill-base::before,
  .cat-pill::before, .tv-pill::before, .zone-pill::before, .badge::before,
  .ord-type-toggle .ord-type-chip::before,
  .dash-plan-item-kind::before {
    content: '';
    display: table;
    margin-bottom: calc(var(--tb-cap-top) * -1);
  }
  .tb-trim::after,
  .btn::after, .bookvelt-btn::after, .bookvelt-pill::after,
  .ord-type::after, .ord-status::after, .ord-id::after, .count-pill::after,
  .fixture-pill::after, .fixture-status::after, .fixture-period::after,
  .bp-pill::after, .ld-pill::after, .ed-pill::after, .fd-pill::after,
  .pill::after, .pill-base::after,
  .cat-pill::after, .tv-pill::after, .zone-pill::after, .badge::after,
  .ord-type-toggle .ord-type-chip::after,
  .dash-plan-item-kind::after {
    content: '';
    display: table;
    margin-top: calc(var(--tb-bot) * -1);
  }
}

/* Inline-flex children of pills/buttons (icons, strong, span wrappers) should
   stay on the same centerline. The pseudo-element trim assumes block-level
   ::before/::after; when the parent is inline-flex, the table-display children
   still collapse correctly because table on a flex item becomes a flex item
   with intrinsic block flow per spec. Verified Safari 17+, Chrome 119+. */