/* codeeraser.dev — the picture viewer's rules: the stage, the bar
   viewer.js builds under it, the screenshot tabs, full screen. Loaded
   by the six pages that hang a picture, beside style.css (which keeps
   the frame the pictures share with the terminal block); the two
   bench pages hang none and load neither this nor viewer.js. Same
   caching rule as style.css: editing this file means bumping ?v= on
   every page that links it.

   A `.stage` is the window a picture is seen through. With viewer.js
   it becomes a camera — the picture is positioned and sized inside it,
   the stage keeps the picture's own aspect and is capped at most of a
   screen so a tall diagram does not become a wall; without the script
   the picture simply sits in flow at column width. The ground under a
   letterboxed picture is the picture's own: the archify diagrams paint
   #020617 (`.deep`), the hand-drawn ones the page's ink. */
.stage { position: relative; overflow: hidden; background: var(--ink-0); }
.arch.deep .stage { background: #020617; }
.stage img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
/* width stated, or the max-height would transfer through the aspect
   ratio into a narrower stage (CSS Sizing 4 §5.2.1) instead of a
   letterboxed one */
.stage.live { width: 100%; max-height: 78vh; }
.stage.live img { position: absolute; left: 0; top: 0; max-width: none; }
.stage.zoomed { cursor: grab; }
.stage.zoomed.dragging { cursor: grabbing; }
.stage:focus-visible { outline: 2px solid var(--verm); outline-offset: -2px; }

/* the bar exists only once viewer.js has built it, so a reader
   without scripts is never shown buttons that do nothing */
.stage-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px;
  padding: 8px 12px; border-top: 1px solid var(--panel-edge);
  font-family: var(--mono); font-size: 0.78rem; color: var(--muted);
}
.stage-bar button {
  background: var(--panel); border: 1px solid var(--panel-edge); border-radius: 6px;
  padding: 3px 10px; min-width: 2.2em; cursor: pointer; color: var(--text);
}
.stage-bar button:hover { border-color: var(--teal); color: var(--paper); }
.stage-bar .readout { min-width: 3.6em; text-align: center; font-variant-numeric: tabular-nums; color: var(--text); }
.stage-bar .hint { margin-left: auto; }

.arch figcaption, .shot figcaption { padding: 12px 16px; font-size: 0.8rem; color: var(--muted); border-top: 1px solid var(--panel-edge); }
.shot figcaption { font-size: 0.86rem; }
.arch figcaption code, .shot figcaption code { font-family: var(--mono); color: var(--text); font-size: 0.92em; }
/* a paragraph that follows a framed figure (the link onward) keeps
   the same breath every other block has under one */
.arch + p, .gallery + p { margin-top: 14px; }

figure:fullscreen { display: flex; flex-direction: column; margin: 0; border: 0; border-radius: 0; background: var(--ink-0); }
figure:fullscreen .stage { flex: 1; min-height: 0; max-height: none; aspect-ratio: auto !important; }
figure:fullscreen figcaption { display: none; }

/* the screenshot strip: one panel at a time once viewer.js runs (the
   tab list carries `hidden` until then, and every panel is shown;
   `[hidden]` only holds while nothing sets display, hence :not()) */
.tabs:not([hidden]) { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.tabs [role="tab"] {
  font-family: var(--mono); font-size: 0.82rem; color: var(--muted);
  background: var(--panel); border: 1px solid var(--panel-edge); border-radius: 8px;
  padding: 7px 14px; cursor: pointer;
}
.tabs [role="tab"]:hover { color: var(--text); }
.tabs [role="tab"][aria-selected="true"] { color: var(--paper); border-color: var(--teal); box-shadow: inset 0 -2px 0 var(--teal); }
.gallery figure + figure { margin-top: 14px; }

@media (max-width: 640px) {
  .stage-bar .hint { display: none; }
}