/* ==========================================================================
   AXI-x Chrome v0.1 — the score.                      (extension; not SNX core)
   chrome.js reads and writes numbers; everything visible about the chrome is
   here. The header (.ch) is sticky and a scroll-state container; inside it a
   hand-placed shore (.sh[data-hand]) whose stage is an open SNX stage on the
   page's grid. The footer (.chf) is the same kind of stage.
   ========================================================================== */
/* law 5: named site-wide — one declaration, every page that loads this file */
@view-transition{navigation:auto}
.ch-mark{view-transition-name:ch-mark}
.ch-l1{view-transition-name:ch-link-1}
.ch-l2{view-transition-name:ch-link-2}
.ch-l3{view-transition-name:ch-link-3}
.ch-census{view-transition-name:ch-census}
.chf{view-transition-name:ch-footer}
::view-transition-group(*){animation-duration:420ms;animation-timing-function:var(--snx-ease)}
/* the chrome holds: its groups neither fade nor move unless the score moves them */
::view-transition-old(ch-mark),::view-transition-old(ch-link-1),::view-transition-old(ch-link-2),::view-transition-old(ch-link-3),::view-transition-old(ch-census),::view-transition-old(ch-footer){animation:none;mix-blend-mode:normal}
::view-transition-new(ch-mark),::view-transition-new(ch-link-1),::view-transition-new(ch-link-2),::view-transition-new(ch-link-3),::view-transition-new(ch-census),::view-transition-new(ch-footer){animation:none;mix-blend-mode:normal}

/* ---------- the header ---------- */
.ch{position:sticky;top:0;z-index:30;container-type:scroll-state;padding-top:14px;margin-bottom:26px}
.ch .sh{--sh-rows:1}
.ch .sh-stage{min-height:var(--snx-row);overflow:visible}
.ch .sh::after{content:none}
/* the sheet: the paper the chrome stands on, which lifts with it (law 4) */
.ch-sheet{position:absolute;inset:-14px -24px -8px;z-index:-1;background:var(--snx-paper);pointer-events:none}
.ch-sheet::after{content:'';position:absolute;inset:0;background:rgba(19,22,40,.22);z-index:-1;opacity:0;transition:opacity var(--snx-t-fast) ease;
  transform:translate(calc(100cqw/var(--snx-union)),calc(var(--snx-row)*.375))}
@container scroll-state(stuck: top){.ch-sheet::after{opacity:1}}
.ch.is-stuck .ch-sheet::after{opacity:1}
/* gaps: open — the sheet is not drawn and the page shows between the blocks */
.ch[data-gaps=open] .ch-sheet{background:transparent}

/* blocks of the chrome */
.ch .snx-b{--rs:1;background:var(--bg,var(--snx-chalk))}
.ch-mark{--c:1;--s:1;--r:1;text-decoration:none;color:var(--snx-ink);display:block}
.ch-mark .snx-pad{display:flex;align-items:center;gap:12px;padding:0 14px;height:100%}
.ch-mark .gl{--gl-size:calc(var(--snx-row) - 20px)}
.ch-mark b{font-family:var(--snx-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.ch-link{text-decoration:none;color:var(--snx-ink);display:block;--bg:var(--snx-chalk)}
.ch-link .snx-pad{display:flex;align-items:center;gap:10px;padding:0 14px;height:100%;font-family:var(--snx-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--snx-ink-60)}
.ch-link .gl{--gl-size:calc(var(--snx-row) - 28px)}
.ch-link:hover{--bg:var(--snx-mint)}
.ch-link[aria-current]{--bg:var(--snx-white);outline:2px solid var(--snx-ink);outline-offset:-2px}
.ch-link[aria-current] .snx-pad{color:var(--snx-ai-deep)}
.ch-census{--bg:var(--snx-butter)}
.ch-census .snx-pad{display:flex;align-items:center;padding:0 14px;height:100%;font-family:var(--snx-mono);font-size:10px;letter-spacing:.08em;color:var(--snx-ink-60);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-menu{display:none;--bg:var(--snx-chalk)}
.ch-menu button{appearance:none;border:0;background:transparent;width:100%;height:100%;display:flex;align-items:center;justify-content:center;gap:10px;font-family:var(--snx-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--snx-ink);cursor:pointer;padding:0 14px}
.ch-menu button .gl{--gl-size:calc(var(--snx-row) - 24px)}
.ch-menu button:focus-visible{outline:2px solid var(--snx-signal);outline-offset:-2px}

/* law 2: at 7×5 the links stand on the overlay grid — columns 2, 3, 4 of 5 — and the census on the fifth */
@media (min-width:1024px){
  .ch-o{--r:1;grid-column:calc((var(--oc,2) - 1)*var(--snx-base) + 1)/span var(--snx-base)}
  .ch-l1{--oc:2}.ch-l2{--oc:3}.ch-l3{--oc:4}
  .ch-census{--oc:5}
}
/* 5×3: the overlay has three columns; the links move to the base grid */
@media (max-width:1023px){
  .ch-l1{--c:2;--s:1;--r:1}.ch-l2{--c:3;--s:1;--r:1}.ch-l3{--c:4;--s:1;--r:1}
  .ch-census{--c:5;--s:1;--r:1}
  .ch-link .gl{display:none}
}
/* 3×2: the menu (law 6) — the links fold into a block and open on a second row of the same stage */
@media (max-width:639px){
  .ch-menu{display:block;--c:3;--s:1;--r:1}
  .ch-census{display:none}
  .ch-link{display:none}
  .ch.is-open .ch-link{display:block}
  .ch.is-open .ch-l1{--c:1;--s:1;--r:2}.ch.is-open .ch-l2{--c:2;--s:1;--r:2}.ch.is-open .ch-l3{--c:3;--s:1;--r:2}
  .ch.is-open .sh{--sh-rows:2}
  .ch-link .snx-pad{padding:0 10px;font-size:10px;letter-spacing:.08em}
  .ch-mark .snx-pad{padding:0 10px}
}
/* the chart and the grids, on request, as the shore draws them */
.ch .sh-sea{z-index:0}

/* ---------- the footer (law 7) ---------- */
.chf{margin-top:72px;padding-top:14px;border-top:2px solid var(--snx-ink)}
.chf .snx-stage{min-height:calc(var(--snx-row)*3)}
.chf .snx-b{background:var(--bg,var(--snx-chalk))}
.chf .snx-pad{padding:12px 14px;font-family:var(--snx-mono);font-size:10.5px;letter-spacing:.06em;color:var(--snx-ink-60);line-height:1.5}
.chf .snx-pad b{color:var(--snx-ink);font-weight:600}
.chf a{color:inherit}
.chf-who{--c:1;--s:4;--r:1;--rs:2}
.chf-census{--c:5;--s:3;--r:1;--rs:2;--bg:var(--snx-butter)}
.chf-links{--c:1;--s:7;--r:3;--rs:1;--bg:transparent}
.chf-links .snx-pad{display:flex;gap:18px;flex-wrap:wrap;padding:12px 2px}
@media (max-width:1023px){.chf .snx-stage{min-height:calc(var(--snx-row)*4)}.chf-who{--c:1;--s:3}.chf-census{--c:4;--s:2}.chf-links{--s:5;--rs:2}}
@media (max-width:639px){.chf .snx-stage{min-height:calc(var(--snx-row)*9)}.chf-who{--c:1;--s:3;--r:1;--rs:3}.chf-census{--c:1;--s:3;--r:4;--rs:3}.chf-links{--c:1;--s:3;--r:7;--rs:3}.chf .snx-pad{font-size:9.5px}}
@media (prefers-reduced-motion:reduce){.ch-sheet::after{transition:none}::view-transition-group(*){animation-duration:0s}}