/* PINHOLE's page: the shared skin and stage are ../module.css (site/public/module.css); this is only what's its own. The page is gold like every module's; only the panel's own lights keep their colour, and
   the picture on the glass is the room's. */

/* 20 HP at the line's scale */
.stage { --panel-ratio: 101.3 / 128.5; --panel-max: 560px; --panel-max-narrow: 520px; overflow-x: clip; }
.stage:focus { outline: none; }
.panel2d { overflow: visible; isolation: isolate; }
.stage-panel { position: relative; z-index: 2; }

/* the room's controls, above the panel */
.room { margin: 0 auto 0.7rem; box-sizing: border-box;
  width: min(100%, calc(80vh * var(--panel-ratio, 101.3 / 128.5)), var(--panel-max, 560px), calc(100cqw * 128.5 / 101.3 * var(--panel-ratio, 101.3 / 128.5))); }
.room-do { display: grid; grid-template-columns: 1fr 2fr 2fr; gap: 3px; }
.room-do button { appearance: none; background: none; border: 1px solid var(--s-line); color: var(--ink, #d7d2c4); font: 400 0.72rem/1.2 "Space Mono", ui-monospace, monospace; padding: 0.5em 0.1em; min-width: 0; white-space: nowrap; overflow: hidden; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.room-do button:hover, .room-do button:focus-visible { background: rgba(212, 175, 55, 0.14); outline: none; }
.room-do button[aria-pressed="true"] { background: rgba(212, 175, 55, 0.24); border-color: rgba(212, 175, 55, 0.7); }
.room-do button:disabled { opacity: 0.45; cursor: default; }
.own-note { margin: 0.35rem 0 0; font: 400 0.7rem/1.35 "Space Mono", ui-monospace, monospace; color: var(--ink, #d7d2c4); opacity: 0.8; min-height: 1.35em; }
@media (max-width: 620px) { .room-do button { min-height: 44px; font-size: 0.74rem; white-space: normal; } }

/* the ports: the ring, the lens, the glass and its hood */
.ph-ring, .ph-lens, .ph-glass, .ph-hood, .ph-touch, .ph-tick, .ph-spro { position: absolute; }
.ph-ring { z-index: 3; border-radius: 50%; cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent; }
.ph-ring.held { cursor: grabbing; }
.ph-ring img { display: block; width: 100%; height: 100%; pointer-events: none; }
.ph-ring:focus-visible, .ph-lens:focus-visible, .ph-touch:focus-visible { outline: 2px solid rgba(212, 175, 55, 0.8); outline-offset: 1px; }
.ph-lens { z-index: 4; border-radius: 50%; background-size: 100% 100%; cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent; }
.ph-glass { z-index: 2; border-radius: 50%; overflow: hidden; background: #050506; }
.ph-glass canvas { display: block; width: 100%; height: 100%; filter: blur(0.5px); }
.ph-line { position: absolute; left: 0; right: 0; height: 1px; background: rgba(240, 216, 120, 0.9); pointer-events: none; }
.ph-line1 { background: rgba(240, 216, 120, 0.5); }
.ph-hood { z-index: 3; display: block; pointer-events: none; }
.ph-touch { z-index: 4; border-radius: 50%; cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent; }
.ph-tick, .ph-spro { z-index: 1; border-radius: 0.25em; opacity: 0; pointer-events: none; background: var(--lit); box-shadow: 0 0 5px 0 var(--lit); }
.p2 { z-index: 6; }

/* beside the panel: the two waves, and what VIDEO's sending */
.seen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
.seen figure { margin: 0; }
.seen figcaption { font: 400 0.66rem/1.3 "Space Mono", ui-monospace, monospace; color: var(--ink, #d7d2c4); opacity: 0.75; margin-bottom: 2px; }
#scope { display: block; width: 100%; aspect-ratio: 4 / 3; }
#tube { display: block; width: 100%; aspect-ratio: 4 / 3; background: #000; image-rendering: pixelated; }
.status { min-height: 2.8em; }
.readout { min-height: 2.8em; font: 400 0.74rem/1.4 "Space Mono", ui-monospace, monospace; color: var(--ink); }
#patch-note { min-height: 7.2em; }