/* Chrome for the review previews. One copy.

   The shipping page hand-duplicates this block across the two Astro routes and the two
   files in this repo, which is four copies and they have already drifted: the source
   shells still said "real time agent activity" months after the live page was corrected
   to "modelled agent activity". Everything here is driven off a small set of custom
   properties, so a preview that only wants different type or different colour overrides
   the properties and touches nothing else.

   Defaults reproduce the page as it stands today, so a preview that sets no properties
   is a like-for-like comparison. */

:root{
  --ax-bg:#07080b;          /* the ocean, and the page behind it */
  --ax-fg:#e6e8ea;          /* numbers, wordmark */
  --ax-fg-2:#8b9099;        /* labels */
  --ax-fg-3:#6a6f78;        /* control labels */
  --ax-fg-4:#454a52;        /* the disclosure line */
  --ax-line:#23262d;
  --ax-surface:#14161b;
  --ax-accent:#f0a44a;      /* slider fill. See preview 70 for why this is wrong. */
  --ax-link:#c9974e;
  --ax-font:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --ax-mono:var(--ax-font);
  --ax-num:var(--ax-font);  /* numerals: same stack today, tabular in preview 70 */
  --ax-radius:6px;
  --ax-caps:.04em;
  --ax-ease:cubic-bezier(.2,.6,.2,1);
  --ax-dur:250ms;
}

*,*::before,*::after{box-sizing:border-box}

/* The site serves the wordmark from /fonts/ for every page, so this points there rather
   than at the copy sitting beside the renderer in tokenmap. */
@font-face{font-family:"Teraplex Wordmark";src:url("/fonts/teraplex-wordmark.ttf") format("truetype");
  font-display:swap}

html,body{margin:0;height:100%;background:var(--ax-bg);color:var(--ax-fg-2);
  font:13px/1.5 var(--ax-font);overflow:hidden;-webkit-font-smoothing:antialiased}

/* The lift is how band.js keeps the readout off the field on a screen too tall to hold both
   in their natural places. It is 0 on every window where they already clear each other, so
   this is inert on a desktop. The canvas keeps its full window size and only moves, because
   the renderer sizes its grid from innerWidth/innerHeight: shrinking the box here would
   stretch the field rather than reposition it. The strip the canvas uncovers at the bottom
   is the same colour as the canvas, so there is no seam to hide. */
#stage{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  transform:translateY(calc(-1 * var(--band-lift,0px)))}
canvas{display:block;background:var(--ax-bg)}

/* ---- lockup ---------------------------------------------------------------- */
#brand{position:fixed;left:22px;top:20px;display:flex;align-items:center;gap:13px;z-index:3}
#brand svg{width:38px;height:21px;display:block;flex:none}
.wm{font-family:"Teraplex Wordmark",var(--ax-font);font-size:19px;letter-spacing:.10em;
  color:var(--ax-fg);line-height:1}
/* The piece's own name, set in the wordmark at the same +10% tracking so it reads as one
   lockup with TERAPLEX above it. A step down in size and in weight of colour: the brand is
   the brand, this is what you are looking at. Site-side; see AIATLAS_RENDERER_SYNC.md at
   the repo root for every delta this folder carries over the renderer it was copied from. */
.piece{font-family:"Teraplex Wordmark",var(--ax-font);font-size:15px;letter-spacing:.10em;
  color:#9aa0a8;line-height:1;margin-top:7px}
.sub{font-size:11px;letter-spacing:var(--ax-caps);color:#5c616a;margin-top:5px;
  font-family:var(--ax-mono)}
.note{font-size:10px;letter-spacing:.03em;color:var(--ax-fg-4);margin-top:3px;
  font-family:var(--ax-mono)}
.note a,.brandlink{color:#6b7079;text-decoration:none;border-bottom:1px solid #2a2e35}
.note a:hover,.brandlink:hover{color:var(--ax-link);border-bottom-color:var(--ax-link)}
.brandlink:focus-visible,#panel-toggle:focus-visible,#hud a:focus-visible{
  outline:2px solid var(--ax-fg);outline-offset:2px}

/* ---- readout --------------------------------------------------------------- */
#hud{position:fixed;left:0;right:0;bottom:0;padding:14px 18px 16px;z-index:2;
  background:linear-gradient(to top,rgba(7,8,11,.96),rgba(7,8,11,0));
  transition:opacity var(--ax-dur) var(--ax-ease);
  display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center}
#hud.hide{opacity:0;pointer-events:none;visibility:hidden}
.stat{white-space:nowrap;font-family:var(--ax-mono)}
.stat b{color:var(--ax-fg);font-weight:500;font-variant-numeric:tabular-nums;
  font-family:var(--ax-num)}
.ctl{display:flex;align-items:center;gap:8px;white-space:nowrap}
.ctl label{color:var(--ax-fg-3);font-family:var(--ax-mono)}
input[type=range]{width:110px;accent-color:var(--ax-accent);background:none}
select,button{background:var(--ax-surface);color:#c9ccd1;border:1px solid var(--ax-line);
  border-radius:var(--ax-radius);padding:4px 8px;font:inherit;cursor:pointer}
.val{color:var(--ax-fg);font-variant-numeric:tabular-nums;min-width:46px;
  font-family:var(--ax-num)}
#lg{display:inline-flex;gap:1px;vertical-align:-1px}

/* The panel toggle exists at every width.
   [defect] On the live page it is display:none above 760px and the collapsed state is
   decided once, from a media query, at load. Open the page at 700px wide and widen it and
   the numbers, the legend and all twelve controls are gone with no visible way back: the
   only recovery is the h key, mentioned once in 10px grey. A control that can hide the
   panel has to be able to show it again at whatever width the window happens to be. */
#panel-toggle,#ax-advbtn{position:fixed;bottom:14px;z-index:5;
  padding:8px 13px;font-size:12px;letter-spacing:var(--ax-caps);font-family:var(--ax-mono);
  background:rgba(20,22,27,.92);border:1px solid var(--ax-line);color:#c9ccd1;
  border-radius:var(--ax-radius)}
#ax-advbtn{right:14px}
#panel-toggle{right:104px}
#ax-advbtn[aria-expanded=true]{color:var(--ax-fg);border-color:#3a3f47}
#ax-advbtn:focus-visible{outline:2px solid var(--ax-fg);outline-offset:2px}

/* ---- the controls, until asked for ------------------------------------------
   Twelve of them at the same weight as the numbers is what made the readout look like a
   debug panel. They are still live controls, because the softest assumptions in the model
   being movable is the piece's honesty device, not a convenience. They just are not all on
   screen at once. */
#ax-adv{position:fixed;right:14px;bottom:58px;z-index:6;width:min(430px,calc(100vw - 28px));
  max-height:min(70vh,560px);overflow-y:auto;display:none;
  background:rgba(14,16,20,.985);border:1px solid var(--ax-line);
  border-radius:var(--ax-radius);padding:14px 16px 16px}
#ax-adv.on{display:block}
#ax-adv h3{margin:0 0 4px;font-size:11px;letter-spacing:var(--ax-caps);color:var(--ax-fg-3);
  font-weight:400;font-family:var(--ax-mono)}
#ax-adv h3+p{margin:0 0 12px;font-size:11px;color:var(--ax-fg-4);line-height:1.5}
#ax-adv .ctl{display:flex;justify-content:space-between;gap:10px;padding:4px 0;width:100%}
#ax-adv .ctl label{flex:0 0 9.6em}
#ax-adv #p{margin-top:10px}

/* The readout keeps what is a reading and gives up what is a parameter. */
#hud{padding-right:210px}

/* ---- pointer hint ---------------------------------------------------------- */
/* [defect] The live page writes display:block onto this element from the h handler,
   which outranks the media query that hides it below 760px and drops a mouse-only hint
   on top of the wordmark at phone width. Toggling a class instead keeps the cascade in
   one place, so the media queries below always win. */
#tip{position:fixed;right:18px;top:16px;color:#3f434a;z-index:3;font-family:var(--ax-mono)}
#tip.off{display:none}
@media (max-width:760px){ #tip{display:none} }
@media (pointer:coarse){ #tip{display:none} }

@media (max-width:760px){
  #hud{max-height:62vh;overflow-y:auto;gap:10px 16px;padding:14px 16px 64px}
  #brand{left:16px;top:14px}
  #ax-adv{bottom:58px}
}

/* wall target: the panels show the piece and nothing else.

   Chrome added by a preview is named ax-* or p-*, and this hides all of it by that
   convention rather than by listing every id. Fifteen HUB75 panels over HDMI have no
   readout, no cursor and no way to be operated, so anything a preview adds to the page
   has to disappear here without the preview having to remember to say so. */
.mode-wall #hud,.mode-wall #brand,.mode-wall #tip,.mode-wall #panel-toggle,
.mode-wall [id^="ax-"],.mode-wall [id^="p-"],.mode-wall #exposure{display:none !important}
.mode-wall,.mode-wall body{cursor:none}

/* ---- accessibility --------------------------------------------------------- */
/* [defect] The canvas carries the entire payload and had no text alternative and no live
   region, so the piece did not exist to a screen reader. */
.ax-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* [defect] The page is entirely motion and did not honour a reduced-motion preference.
   It now loads held still on an accumulated exposure with a visible way to start it. */
#ax-still{position:fixed;inset:0;z-index:1;pointer-events:none;display:none}
#ax-motion{position:fixed;left:50%;bottom:76px;transform:translateX(-50%);z-index:4;
  display:none;font-family:var(--ax-mono);letter-spacing:var(--ax-caps)}
.ax-reduced #ax-still{display:block}
.ax-reduced #ax-motion{display:block}
@media (prefers-reduced-motion:reduce){
  #hud{transition:none}
}

/* ---- way out --------------------------------------------------------------- */
/* [defect] Neither route carried the site nav or footer, so someone arriving from social
   had no path to the rest of the site and the method page's only exit was back to the
   map. The lockup is now the link home and the readout carries the two others. */
#ax-exit{margin-left:auto;display:flex;gap:16px;align-items:center;font-family:var(--ax-mono);
  font-size:11px;letter-spacing:var(--ax-caps)}
#ax-exit a{color:#6b7079;text-decoration:none;border-bottom:1px solid #2a2e35}
#ax-exit a:hover{color:var(--ax-link);border-bottom-color:var(--ax-link)}