/* ==========================================================================
   AXI-x Glyph v0.1 — the score.                       (extension; not SNX core)
   glyph.js writes cells and numbers; everything visible about a glyph is here.
   A glyph (.gl) is a square container; each cut (.gl-cut) is a union grid
   U×U in both axes, and the browser chooses the cut by the glyph's own width
   (law 3). Cells are the engine's blocks at a smaller scale: base cells at
   z0, slivers at z1, overlay marks at z6, a plane +1 mark with the engine's
   shadow — one microcolumn right, ⅜ of a cell down.
   ========================================================================== */
.gl{
  --gl-size:48px;
  display:inline-grid;position:relative;
  width:var(--gl-size);aspect-ratio:1;
  container-type:inline-size;
  vertical-align:middle;flex:none;
  /* a lit glyph's signal cell; navy at rest (law 5) */
  --gl-rest:var(--snx-navy);
}
.gl-cut{
  position:absolute;inset:0;
  display:none;
  grid-template-columns:repeat(var(--u),1fr);
  grid-template-rows:repeat(var(--u),1fr);
}
/* law 3: the cut by the glyph's width — the thresholds are the sizes at which a
   microcolumn of the cut is a pixel (35 for the full cut, 15 for the compact) */
.gl-cut[data-cut=sign]{display:grid}
@container (min-width:15px){.gl-cut[data-cut]{display:none}.gl-cut[data-cut=compact]{display:grid}}
@container (min-width:35px){.gl-cut[data-cut]{display:none}.gl-cut[data-cut=full]{display:grid}}
/* a cut forced by hand, for the ladder and the atlas */
.gl[data-force] > .gl-cut[data-cut]{display:none}
.gl[data-force=full] > .gl-cut[data-cut=full],.gl[data-force=compact] > .gl-cut[data-cut=compact],.gl[data-force=sign] > .gl-cut[data-cut=sign]{display:grid}

.gl-cut i{display:block;position:relative;min-width:0;min-height:0;background:var(--bg,var(--snx-ink))}
.gl-cut .gl-b{z-index:0}
/* the slivers: the engine's rule at the glyph's scale — one microcolumn, signal, multiply, z1 */
.gl-cut .gl-sl{z-index:1;background:var(--snx-signal);mix-blend-mode:multiply;opacity:.85}
.gl-cut .gl-o{z-index:6;background:var(--bg,var(--snx-navy))}
/* plane +1: the shadow is a block too */
.gl-cut .gl-up::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:rgba(19,22,40,.22);
  transform:translate(calc(100cqw/var(--u)),calc(100cqw/var(--b)*.375));
}
/* law 5: the signal cell is navy at rest and lit only when the glyph is current */
.gl-cut .gl-sig{background:var(--gl-rest)}
.gl[data-lit] .gl-sig,.gl[data-mark] .gl-sig,
a[aria-current] .gl .gl-sig,a:hover .gl .gl-sig,button[aria-pressed=true] .gl .gl-sig,
.gl-lit .gl .gl-sig{background:var(--snx-signal)}
.gl-cut .gl-sig{transition:background-color var(--snx-t-fast) ease}

/* the grids on request: both grids of the cut, in both axes */
.gl-cut::before{
  content:'';position:absolute;inset:0;z-index:7;pointer-events:none;opacity:0;transition:opacity 200ms ease;
  background-image:
    linear-gradient(to right,var(--snx-ink-18) 0 1px,transparent 1px),
    linear-gradient(to bottom,var(--snx-ink-18) 0 1px,transparent 1px),
    linear-gradient(to right,rgba(27,42,155,.3) 0 1px,transparent 1px),
    linear-gradient(to bottom,rgba(27,42,155,.3) 0 1px,transparent 1px);
  background-size:
    calc(100%/var(--b)) 100%,100% calc(100%/var(--b)),
    calc(100%/var(--o)) 100%,100% calc(100%/var(--o));
}
.gl-grids .gl-cut::before,.gl[data-grids] > .gl-cut::before{opacity:1}
/* the paper under a glyph, on request: shows the square the glyph owns */
.gl-paper .gl,.gl[data-paper]{background:var(--snx-chalk);outline:1px solid var(--snx-ink-18)}

/* law 6: the window — the engine's stage inside a glyph. The row is a column:
   --snx-row is the glyph's cell, so every engine rule (rows, shadows) reads it. */
.gl-window{--gl-rest:var(--snx-signal)}
.gl-win{
  position:absolute;inset:0;display:grid;
  --snx-row:calc(100cqw/var(--snx-base));
  grid-auto-rows:var(--snx-row);
  border-width:1px;
}
/* the engine's slivers at M and S are a fixed 9px bar — wrong inside a glyph; keep them a microcolumn */
@media (max-width:1023px){
  .gl-win.snx-slivers::before,.gl-win.snx-slivers::after{width:calc(100%/var(--snx-union))}
  .gl-win.snx-slivers::before{left:calc(var(--snx-sliver-a)*100%/var(--snx-union))}
  .gl-win.snx-slivers::after{left:calc(var(--snx-sliver-b)*100%/var(--snx-union))}
}
.gl-win .snx-plane1::after{transform:translate(calc(100cqw/var(--snx-union)),calc(var(--snx-row)*.375))}

@media (prefers-reduced-motion:reduce){.gl-cut .gl-sig,.gl-cut::before{transition:none}}