/* GIBBOUS'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: the moon's white and the eyes'. */

/* 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 moon: one canvas (js/panel2d.js composes the lit lunes through the window's mask, over a veil on its dark side); the
   eyes: each a piece of assets/lights.png masking a colour, at the engine's level by opacity */
.panel2d { isolation: isolate; }
.p2-moon { position: absolute; pointer-events: none; z-index: 1; }
.p2-moon canvas { display: block; width: 100%; height: 100%; }
.p2-halo { position: absolute; pointer-events: none; z-index: 1; opacity: 0; background: rgb(255, 247, 230);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.p2-win { position: absolute; pointer-events: none; opacity: 0; z-index: 1; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.p2 { z-index: 2; }

/* RESTRAIN: a slider across the foot. Its cap is drawn where it's set; the slot's run takes the hand */
.p2-cap { position: absolute; pointer-events: none; z-index: 3; }
.p2-cap svg { display: block; width: 100%; height: auto; }
.p2-restrain { position: absolute; z-index: 4; cursor: ew-resize; touch-action: none; border-radius: 6px; }
.p2-restrain:focus-visible { outline: 1.5px solid rgba(212, 175, 55, 0.8); outline-offset: 2px; }

/* beside the panel: the month and the night */
#scope { display: block; width: 100%; height: 190px; }
.status { min-height: 4.2em; }
.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; }

/* telling it where it is (js/setclock.js): the sky, the button, what the module said, the line to type */
.where-set { margin-top: 1.2rem; max-width: 40rem; }
.where-sky { border: 0; padding: 0; margin: 0 0 0.8rem; display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; align-items: baseline; font-size: 0.9rem; }
.where-sky legend { font-size: 0.78rem; font-weight: 600; color: var(--ink); margin-bottom: 0.4rem; padding: 0; }
.where-sky input { accent-color: var(--gold); }
.where-guess { font-size: 0.8rem; color: var(--dim); }
.where-go button:disabled { opacity: 0.45; cursor: default; }
.where-say { min-height: 1.4em; font-size: 0.85rem; color: var(--ink); margin-top: 0.6rem; }
.where-line { font-size: 0.85rem; color: var(--dim); overflow-wrap: anywhere; }
.where-line code { font-family: "Space Mono", ui-monospace, monospace; color: var(--ink); white-space: nowrap; }