/* Proof graphics (V22). Ported from Vector's Proof V3 src/css/proof-graphics.css; layout values unchanged.
   Graphics are absolutely positioned right of the number on desktop (no layout change) and sit under the number below 1000px.
   The end frames are baked into the HTML, so they show without JS and with reduced motion. */
.proof[data-proof] .num { white-space: nowrap; }
.proof[data-proof] .num .nt { position: relative; display: inline-block; }
/* graphic: spans numeral top (0.145em below the line box top in Archivo Expanded 800) to the baseline */
.proof[data-proof] .pg { position: absolute; left: 100%; top: 0.145em; display: block; height: calc(var(--cap, 0.688) * 1em); width: auto; margin-left: 0.26em; overflow: visible; }
.proof[data-proof] .pg * { vector-effect: non-scaling-stroke; }
/* With JS on, keep the graphics unpainted until proof-v22.js has set its start frames (no end-frame flash on load).
   Failsafe: if the script never runs, the baked end frames appear after 2.5 s anyway. No JS at all: always visible. */
.js .proof[data-proof]:not([data-pg]) .pg { visibility: hidden; animation: v22-pg-failsafe 0s linear 2.5s forwards; }
@keyframes v22-pg-failsafe { to { visibility: visible; } }
@media (max-width: 999px) {
  /* phone/tablet: graphics sit under their numbers at one legible height (Vector V2 phone mock) */
  .proof[data-proof] .pg { position: static; margin: 12px 0 2px; height: 32px; }
  /* the fill-only stat keeps the same 44px lane so row labels stay level */
  .proof[data-proof] li[data-mode="fill"] .num { padding-bottom: 44px; }
}
/* Stat 4 fill */
.proof[data-proof] .f-out { color: transparent; -webkit-text-stroke: 1.5px var(--cream); }
.proof[data-proof] .f-in { position: absolute; left: 0; top: 0; color: var(--cream); -webkit-text-stroke: 1.5px var(--cream); }