/* ==========================================================================
   AXI-x Pairs v0.1 — the score.                       (extension; not SNX core)
   pairs.js writes five tokens and a few data attributes on a stage; every
   visible thing about a pair is drawn here, by the engine's own rules reading
   the stage's tokens instead of the page's. A .pr-stage is an ordinary SNX
   stage on another pair.
   ========================================================================== */
/* rows are explicit so slivers can run the full height (grid-row: 1 / -1) */
.pr-stage{grid-template-rows:repeat(var(--pr-rows,5),var(--snx-row));grid-auto-rows:0}
/* law 2: a sliver is a grid item one microcolumn wide — the arithmetic, not a
   drawn convention; z1 like the engine's: over empty fields, behind text */
.pr-stage .pr-sl{grid-row:1/-1;z-index:1;display:block;min-width:0;pointer-events:none;
  background:var(--snx-signal);mix-blend-mode:multiply;opacity:.85}
/* the corner label, entirely from what the script wrote */
.pr-stage::after{
  content:attr(data-pair) ' · union ' attr(data-union) ' · ' attr(data-ruling);
  position:absolute;left:5px;top:4px;z-index:8;pointer-events:none;
  font-family:var(--snx-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--snx-ink-60);
}
.pr-stage[data-micro]:not([data-micro=""])::after{content:attr(data-pair) ' · union ' attr(data-union) ' · ' attr(data-micro) 'px · ' attr(data-ruling)}
/* the union drawn: gaps as cells, lines as marks (the instrument's ruler) */
.pr-ruler{position:relative;display:grid;height:64px;border:2px solid var(--snx-ink);background:var(--snx-chalk);
  background-image:linear-gradient(to right,var(--snx-ink-18) 0 1px,transparent 1px);background-size:calc(100%/var(--u,35)) 100%;margin-top:14px}
.pr-gap{container-type:inline-size;display:flex;align-items:center;justify-content:center;min-width:0;
  font-family:var(--snx-mono);font-size:10.5px;font-variant-numeric:tabular-nums;color:var(--snx-ink-60)}
.pr-gap.is-col{background:var(--snx-paper-dim)}
.pr-gap.is-sliver{background:var(--snx-signal);color:var(--snx-chalk);font-weight:600}
@container (max-width:13px){.pr-gap span{display:none}}
.pr-line{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;pointer-events:none;background:var(--snx-ink)}
.pr-line.o{background:var(--snx-navy);top:-7px;bottom:-7px}
@media (prefers-reduced-motion:reduce){.pr-stage .pr-gen{transition:none}}