/* ==========================================================================
   AXI-x Metric v0.1 — the score.                      (extension; not SNX core)
   metric.js writes numbers; everything visible about a widget is here.
   A widget (.mt) is an ordinary .snx-b placed by the score; its kind decides
   what is drawn. Numerals are Plex Mono, tabular, on the √φ scale.
   ========================================================================== */
.mt{overflow:hidden;font-family:var(--snx-mono);font-variant-numeric:tabular-nums;color:var(--snx-ink);--mt-ink:var(--snx-navy)}
.mt-label{position:absolute;left:12px;top:8px;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--snx-ink-60);font-weight:600;z-index:3;max-width:calc(100% - 24px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mt-num{position:absolute;left:12px;bottom:8px;font-weight:600;letter-spacing:-.02em;line-height:1;z-index:3;color:var(--mt-ink)}
.mt-num small{font-size:.5em;font-weight:400;margin-left:.15em;letter-spacing:0;color:var(--snx-ink-60)}
.mt-delta{position:absolute;right:12px;bottom:10px;font-size:11px;letter-spacing:.06em;color:var(--snx-ink-60);z-index:3}
.mt-delta.up{color:var(--snx-navy)}.mt-delta.down{color:var(--snx-dusk)}
.mt-err{position:absolute;right:12px;top:8px;font-size:9px;letter-spacing:.06em;color:var(--snx-ink-40);z-index:3;white-space:nowrap}
/* law 6: the block that changed last carries the signal for a moment */
.mt[data-lit]{--mt-ink:var(--snx-signal)}
.mt[data-lit] .mt-fill,.mt[data-lit] .mt-barfill,.mt[data-lit] .mt-line{--mt-ink:var(--snx-signal)}

/* ---------- law 2: the numeral ---------- */
.mt[data-kind=numeral]{--bg:var(--snx-chalk)}
.mt[data-kind=numeral] .mt-num{font-size:var(--snx-s6)}
@media (max-width:1023px){.mt[data-kind=numeral] .mt-num{font-size:var(--snx-s5)}}
@media (max-width:639px){.mt[data-kind=numeral] .mt-num{font-size:var(--snx-s4)}}
.mt[data-kind=numeral].big .mt-num{font-size:var(--snx-s8)}
@media (max-width:639px){.mt[data-kind=numeral].big .mt-num{font-size:var(--snx-s6)}}

/* ---------- law 3: the meter — whole microcolumns of the union, with both grids as ticks ---------- */
.mt[data-kind=meter]{--bg:var(--snx-paper-dim)}
.mt-fill{position:absolute;left:0;top:0;bottom:0;z-index:1;background:var(--mt-ink);
  width:calc(var(--q,0)*100%/var(--m,35));
  transition:width var(--snx-t-move) var(--snx-ease),background-color var(--snx-t-fast) ease}
/* ticks: the base grid's lines (dark) and the overlay's (navy), inside the block's own span */
.mt[data-kind=meter]::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background-image:linear-gradient(to right,var(--snx-ink-18) 0 1px,transparent 1px),linear-gradient(to right,rgba(27,42,155,.35) 0 1px,transparent 1px);
  background-size:calc(100%/var(--s,1)) 100%,calc(100%*var(--snx-base)/(var(--s,1)*var(--snx-over))) 100%}
.mt[data-kind=meter] .mt-num{font-size:var(--snx-s3);mix-blend-mode:difference;color:var(--snx-chalk)}
.mt[data-kind=meter] .mt-label{mix-blend-mode:difference;color:var(--snx-chalk)}
.mt[data-kind=meter] .mt-err{mix-blend-mode:difference;color:var(--snx-paper)}
/* a meter may be scored to the base grid or the overlay grid only: fewer ticks, coarser fill */
.mt[data-kind=meter][data-ruler=base]::after{background-image:linear-gradient(to right,var(--snx-ink-18) 0 1px,transparent 1px)}
.mt[data-kind=meter][data-ruler=over]::after{background-image:linear-gradient(to right,rgba(27,42,155,.35) 0 1px,transparent 1px);background-size:calc(100%*var(--snx-base)/(var(--s,1)*var(--snx-over))) 100%}

/* ---------- law 4: bars of whole rows; the callout anchored where the browser can ---------- */
.mt[data-kind=bars]{--bg:var(--snx-chalk)}
.mt-bar{position:absolute;bottom:0;top:0;width:calc(100%/var(--n,1));left:calc(var(--i,0)*100%/var(--n,1));padding:0 3px}
.mt-barfill{position:absolute;left:3px;right:3px;bottom:var(--snx-row);height:calc(var(--h,1)*(100% - var(--snx-row))/var(--avail,1));background:var(--mt-ink);transition:height var(--snx-t-move) var(--snx-ease),background-color var(--snx-t-fast) ease}
.mt-barlabel{position:absolute;left:3px;right:3px;bottom:0;height:var(--snx-row);display:flex;align-items:center;justify-content:center;font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--snx-ink-60);text-align:center;line-height:1.2;overflow:hidden}
.mt-callout{font-size:11px;font-weight:600;color:var(--snx-ink);letter-spacing:.02em;background:var(--snx-chalk);padding:1px 4px;border:1px solid var(--snx-ink-18)}
/* inside the bar, when the browser cannot anchor */
.mt-bar > .mt-callout{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(var(--snx-row) + var(--h,1)*(100% - var(--snx-row))/var(--avail,1) + 4px)}
/* anchored: the callout sits on the bar's top edge, centred, wherever the bar is */
@supports (anchor-name:--x) and (bottom:anchor(top)){
  .mt-callout.anchored{position:absolute;bottom:anchor(top);left:anchor(center);translate:-50% -4px;position-try-fallbacks:flip-block}
}
.mt[data-kind=bars] .mt-label{top:8px}

/* ---------- law 5: the sparkline — a walk along grid lines ---------- */
.mt[data-kind=spark]{--bg:var(--snx-white)}
.mt-svg{position:absolute;inset:0;width:100%;height:100%;z-index:1;overflow:visible}
.mt-line{fill:none;stroke:var(--mt-ink);stroke-width:2;stroke-linejoin:miter;stroke-linecap:square;transition:stroke var(--snx-t-fast) ease}
.mt-dot{fill:var(--snx-signal)}
.mt[data-kind=spark] .mt-num{font-size:var(--snx-s4)}
/* the half-row lines and the microcolumns, on request */
.mt[data-kind=spark]::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity 200ms ease;
  background-image:linear-gradient(to bottom,var(--snx-ink-18) 0 1px,transparent 1px),linear-gradient(to right,var(--snx-ink-18) 0 1px,transparent 1px);
  background-size:100% calc(var(--snx-row)/2),calc(100%/var(--m,35)) 100%}
.mt-grids .mt[data-kind=spark]::after,.mt-grids .mt[data-kind=meter]::after{opacity:1}
.mt[data-kind=meter]::after{opacity:1}

/* narrow bars: smaller labels at 5×3, none at 3×2 (the table carries the names) */
@media (max-width:1023px){.mt-barlabel{font-size:7.5px;letter-spacing:.02em;overflow-wrap:anywhere}}
@media (max-width:639px){.mt-barlabel{font-size:0;color:transparent}}
@media (prefers-reduced-motion:reduce){.mt-fill,.mt-barfill{transition:none}}