/* Site shell: the sections stack in one scrolling document, in the order of sections/sections.js.
   Each section styles itself under its own root class (.s-<id>); nothing here is section specific. */
* { box-sizing: border-box; }
html, body { margin: 0; background: #070707; }
html { scrollbar-gutter: stable; }   /* the scrollbar's room stays when the lock hides it: nothing reflows */
/* while a transition plays (core/navigator.js): the page cannot be scrolled at all, not even by a finger
   already dragging or a fling already running; no bounce, no pull-to-refresh */
html.locked { overflow: hidden; overscroll-behavior: none; }
[hidden] { display: none !important; }

#site { position: relative; }
#site > .section, #site > .leadin { position: relative; }

/* the dithered joins between blocks (core/seam.js) */
#site > .seam { display: block; position: relative; pointer-events: none; image-rendering: pixelated; }

/* the replay button every section uses (core/replay.js); place it inside a positioned box */
.replay-btn {
  position: absolute; z-index: 60; right: 16px; bottom: 14px;
  background: none; border: 0; padding: 6px 4px; cursor: pointer;
  font: 9px/1 "Silkscreen", "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .12em;
  color: var(--replay-fg, #5e5a53);
}
.replay-btn:hover, .replay-btn:focus-visible { color: var(--replay-hover, #ebe7de); outline: none; }

/* transition layers: the frozen copy of the screen, then the transition's own drawing on top */
.freeze, .tx-layer {
  position: fixed; inset: 0; overflow: hidden; pointer-events: none;
  touch-action: none;   /* a new touch on the cover never pans: decided at touch-down, without waiting on JS */
}
.freeze { z-index: 900; pointer-events: auto; }   /* swallows clicks meant for the live page underneath */
.tx-layer { z-index: 910; }
.freeze > .ghost { position: absolute; margin: 0; }
.freeze > .seam { image-rendering: pixelated; }

/* admin shell (~) */
.shell {
  position: fixed; left: 12px; top: 12px; z-index: 1000;
  width: min(560px, calc(100vw - 24px));
  padding: 10px 12px; background: rgba(7, 7, 7, .92); border: 1px solid #3a3833;
  font: 12px/1.5 "IBM Plex Mono", ui-monospace, monospace; color: #a8a39a;
}
.shell .out { margin: 0; max-height: 40vh; overflow-y: auto; white-space: pre-wrap; word-break: break-word; }
.shell .out:empty { display: none; }
.shell .out .ok { color: #ebe7de; }
.shell .out .err { color: #d9826b; }
.shell form { display: flex; gap: .6em; align-items: baseline; }
.shell label { color: #5e5a53; white-space: nowrap; }
.shell input {
  flex: 1; min-width: 0; padding: 0; border: 0; outline: none; background: none;
  font: inherit; color: #ebe7de; caret-color: #ebe7de;
}

/* language switch (core/lang.js): top centre, above the transitions, under the admin shell */
.lang-switch {
  position: fixed; z-index: 950; top: 8px; left: 50%; transform: translateX(-50%);
  display: flex; border: 1px solid #3a3833; background: rgba(7, 7, 7, .88);
  font: 9px/1 "Silkscreen", "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .1em;
}
.lang-switch button {
  padding: 7px 10px; border: 0; background: none; cursor: pointer;
  font: inherit; letter-spacing: inherit; color: #5e5a53;
}
.lang-switch button:hover, .lang-switch button:focus-visible { color: #ebe7de; outline: none; }
.lang-switch button[aria-pressed="true"] { background: #ebe7de; color: #070707; cursor: default; }