/* INLÉ's page: the shared skin and stage are ../module.css (site/public/module.css); this is only what's its own,
   as FRITH's page (../../frith/site/style.css) at 28 HP (26 HP until rev 0.4). The page is gold like every module's; the screen keeps its own
   inks (black, white, yellow, red). */

/* 28 HP at the line's scale (as a 20 HP panel's 560 and 520 px; RIGGED's, STECKER's), the wider column (as OVERSHOT's) */
.stage { --panel-ratio: 141.94 / 128.5; --panel-max: 784.5px; --panel-max-narrow: 728.5px; }
.stage-inner { max-width: 1260px; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.stage-hint { max-width: none; }

/* the screen in the window: js/stage.js places the window (the face's, in panel %), the canvas at the screen's active
   area inside it (0.3 mm past the window's edge all round) and the panel edge's shade over it */
.ep-window { position: absolute; overflow: hidden; z-index: 1; }
.ep-screen { position: absolute; display: block; image-rendering: pixelated; }
.ep-shade { position: absolute; inset: 0; pointer-events: none; }

/* beside the panel: its state */
.scope-box .status { margin-top: 0; }

@media (max-width: 900px) {
  .stage-inner { grid-template-columns: minmax(0, 1fr); }
}