/* PLAIN BOB'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 wool keeps its red. */

/* 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; }

/* the rope hangs past the panel's foot when it's pulled */
.panel2d { overflow: visible; isolation: isolate; }
.stage-panel { position: relative; z-index: 2; }

/* the windows: each cell a clipped piece of the light's picture */
.p2-cell { position: absolute; pointer-events: none; opacity: 0; z-index: 1; background: #fff7e6; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.p2-halo { position: absolute; pointer-events: none; opacity: 0; z-index: 1; background: radial-gradient(closest-side, rgba(255, 244, 222, 0.6), rgba(255, 244, 222, 0)); }
.p2 { z-index: 2; }

/* the rope: on top of everything; only the grip takes a hand */
.p2-rope { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.p2-rope-move { position: absolute; inset: 0; pointer-events: none; will-change: transform; }
.p2-rope-shade { position: absolute; background: rgba(0, 0, 0, 0.62); border-radius: 45%; filter: blur(4px); will-change: transform; }
.p2-cord-shade { position: absolute; background: rgba(0, 0, 0, 0.5); filter: blur(2px); transform-origin: 50% 0; will-change: transform; }
.p2-cordbox { position: absolute; overflow: hidden; }
.p2-cord { position: absolute; background-repeat: repeat-y; background-size: 100% auto; will-change: transform; }
.p2-tail { position: absolute; background-repeat: repeat-y; background-size: 100% auto; }
.p2-sally { position: absolute; display: block; pointer-events: none; }
.p2-eye { position: absolute; display: block; pointer-events: none; }
.p2-grip { position: absolute; pointer-events: auto; touch-action: none; cursor: grab; border-radius: 6px; -webkit-tap-highlight-color: transparent; }
.p2-grip.held { cursor: grabbing; }
.p2-grip:focus-visible { outline: 2px solid rgba(212, 175, 55, 0.7); outline-offset: 1px; }

/* beside the panel: how high it's swinging, and the rows as a braid */
#scope { display: block; width: 100%; height: 200px; }
.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; }