/* REDLINE's page: the shared skin and stage are ../module.css (site/public/module.css); this is only what's REDLINE's
   own. The page is gold like every module's; only the panel's own lights keep their colour: the tach's cold white and
   red, and WITNESS's lit cap. */

/* 12 HP at the line's scale */
.stage { --panel-ratio: 60.66 / 128.5; --panel-max: 335px; --panel-max-narrow: 311px; overflow-x: clip; }

/* the tach, the redline band and the gear digit: each window's sprite (assets/win-<shape>.png, light as alpha) masks
   the colour the engine gives it, over the face's bare FR4, at the engine's level by opacity; a tick turned about the
   tach's centre by panel2d.js */
.p2-win { position: absolute; pointer-events: none; opacity: 0; z-index: 1; }
.p2-win { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.p2 { z-index: 2; }

/* BLOWER's switch and WITNESS's button, REDLINE's own parts: the same hover as the knobs; the cap sinks while held */
.p2[role="switch"] { cursor: pointer; touch-action: manipulation; border-radius: 50%; }
.p2[role="switch"]:hover svg { filter: drop-shadow(0 0 0.35em rgba(212, 175, 55, 0.75)); }
.p2-button .rl-cap { transform: scale(1); transition: transform 60ms; }
.p2-button.held .rl-cap { transform: scale(0.93); }
/* the lit cap's glow, screened over the panel */
.p2-glow {
  position: absolute; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; z-index: 3; opacity: 0;
  mix-blend-mode: screen; border-radius: 50%;
  background: radial-gradient(circle, rgba(236, 240, 246, 0.6) 0%, rgba(236, 240, 246, 0.22) 30%, rgba(236, 240, 246, 0) 62%);
}

/* beside the panel: the revs as a strip, the last thing that happened, the r/min, the gear and the blower */
#scope { display: block; width: 100%; height: 140px; }
.status { min-height: 1.4em; }
.readout { min-height: 1.4em; font: 400 0.74rem/1.4 "Space Mono", ui-monospace, monospace; color: var(--ink); }
#patch-note { min-height: 7.4em; }