/* ==========================================================================
   AXI-x Manifest v0.1 — the score.                 (extension; not SNX core)
   manifest.js writes numbers; everything visible about a manifest is here.
   A manifest (.mf) is a container; its lattice (.mf-stage) is an ordinary
   SNX stage whose pair is chosen by the manifest's OWN width — @container,
   not @media. The engine's tokens are re-declared on the lattice so that
   every engine rule (blocks, planes, slivers, shadows) reads the manifest's
   pair and row, not the page's.
   ========================================================================== */
.mf{position:relative;container:manifest / inline-size;min-width:0;z-index:2}
/* z2: a manifest is bounded both ways — nothing it draws leaves the block, and
   the page's slivers (z1) stop at its edge rather than crossing a world */
.mf-stage{
  position:absolute;inset:0;border:1px solid var(--snx-ink);background:var(--snx-chalk);
  grid-template-rows:repeat(var(--mf-rows,4),1fr);grid-auto-rows:0;
  /* pocket edition: the default below 270px */
  --snx-base:3;--snx-over:2;--snx-union:6;--snx-sliver-a:2;--snx-sliver-b:3;
}
@container manifest (min-width:270px){.mf-stage{--snx-base:5;--snx-over:3;--snx-union:15;--snx-sliver-a:5;--snx-sliver-b:9}}
@container manifest (min-width:540px){.mf-stage{--snx-base:7;--snx-over:5;--snx-union:35;--snx-sliver-a:14;--snx-sliver-b:20}}
/* slivers by the manifest's pair, not the viewport's: full microcolumn at 7×5,
   a thin centred bar below it (the engine's own rule, re-keyed to the container) */
@container manifest (min-width:540px){
  .mf-stage.snx-slivers::before,.mf-stage.snx-slivers::after{width:calc(100%/var(--snx-union))}
  .mf-stage.snx-slivers::before{left:calc(var(--snx-sliver-a)*100%/var(--snx-union))}
  .mf-stage.snx-slivers::after{left:calc(var(--snx-sliver-b)*100%/var(--snx-union))}
}
@container manifest (max-width:539.98px){
  .mf-stage.snx-slivers::before,.mf-stage.snx-slivers::after{width:5px}
  .mf-stage.snx-slivers::before{left:calc((var(--snx-sliver-a) + .5)*100%/var(--snx-union) - 2.5px)}
  .mf-stage.snx-slivers::after{left:calc((var(--snx-sliver-b) + .5)*100%/var(--snx-union) - 2.5px)}
}
/* tiles: colour changes cross-fade; placement moves are FLIP (script) */
.mf-tile{transition:background-color var(--snx-t-move) ease}
/* the corner label: entirely from what the script wrote */
.mf::after{
  content:attr(data-mf) ' · ' attr(data-pair) ' · ' attr(data-rows) 'r · g' attr(data-gen);
  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);
}
/* an empty slot is a window: plane −1, where a manifest could crystallize */
.mf[data-slot]{cursor:default}
.mf[data-slot]:not(.is-live){background:var(--snx-paper-dim)}
.mf[data-slot]:not(.is-live)::before{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 12px 20px rgba(19,22,40,.38),inset 0 -5px 10px rgba(19,22,40,.16),inset 4px 0 10px rgba(19,22,40,.18)}
.mf[data-slot]:not(.is-live)::after{content:'slot ' attr(data-slot) ' · window'}
.mf[data-slot].is-live{cursor:pointer}
.mf[data-slot].is-selected .mf-stage{outline:3px solid var(--snx-ai);outline-offset:-3px}
.mf[data-slot].is-selected::after{color:var(--snx-ai-deep);font-weight:600}
.mf[data-slot]:focus-visible{outline:2px solid var(--snx-signal);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.mf-tile{transition:none}}