/* stage.css — the fonts, the dark room and the review chrome around the drawn
   reel (canvas.html, preview.html). The picture itself is one canvas and
   carries no CSS. The page reel's frame, planes, plates, film and forms were
   styled here until it was deleted (2026-09-22). */

@import url("../fonts/fonts.css");

:root {
  /* Brand slots — set by brand.js's applyBrandType. */
  --display: "Archivo";
  --display-weight: 800;
  --body: "Space Mono";
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: #07070a;
  font-family: var(--body), ui-monospace, monospace;
  overflow: hidden;
}

.viewport { position: fixed; inset: 0; }


/* ---- review chrome (never part of a render) ---- */

.chrome {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px 16px;
  padding: 10px 16px;
  background: #0f1113; border-top: 1px solid #23272b;
  color: #cfd4d8; font: 12px/1.5 ui-monospace, monospace;
}
.chrome label { display: inline-flex; align-items: center; gap: 6px;
                text-transform: uppercase; letter-spacing: 0.1em; color: #7f888f; }
.chrome select, .chrome button, .chrome input[type="text"], .chrome input[type="file"] {
  font: inherit; color: #e8edf1; background: #1a1e22;
  border: 1px solid #2f353b; border-radius: 4px; padding: 4px 8px;
}
.chrome button { cursor: pointer; }
.chrome button:hover { background: #252b31; }
.chrome .readout { margin-left: auto; color: #7f888f; }
.chrome .readout b { color: #cfd4d8; font-weight: 400; }