/* MOUTHPIECE'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 */

/* 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 teeth, over the face; the barb and the tube over them, the parts over those */
.panel2d { isolation: isolate; }
.p2-teeth { position: absolute; pointer-events: none; z-index: 1; filter: drop-shadow(0 0 0.28em rgba(255, 238, 200, 0.55)); }
.p2-tube { position: absolute; pointer-events: none; z-index: 2; display: block; max-width: none; }
.p2 { z-index: 4; }

/* beside the panel: the mouth you shape, and what it reads */
.mouth-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 10px; align-items: start; }
#mouth { display: block; width: 100%; height: 280px; touch-action: none; cursor: grab; outline: none; }
#mouth.held { cursor: grabbing; }
#mouth:focus-visible { outline: 2px solid rgba(212, 175, 55, 0.7); outline-offset: 2px; }
.mouth-side { display: grid; gap: 8px; align-content: start; min-width: 0; }
.pads { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.pad { font: 400 0.8rem/1 "Space Mono", ui-monospace, monospace; color: var(--gold-hi); background: transparent; border: 1px solid var(--s-line); height: 2.4rem; padding: 0 0.5rem; cursor: pointer; touch-action: none; -webkit-user-select: none; user-select: none; }
.pad.wide { touch-action: manipulation; }
.pad:hover { border-color: var(--gold); }
.pad[aria-pressed="true"], .pad.held { background: rgba(212, 175, 55, 0.16); border-color: var(--gold); }
#scope { display: block; width: 100%; height: 150px; }
.status { min-height: 1.4em; }
.readout { min-height: 2.8em; font: 400 0.74rem/1.4 "Space Mono", ui-monospace, monospace; color: var(--ink); }
.own { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--s-line); }
.own .pad { flex: 0 0 11.5rem; }
.own-note { font-size: 0.74rem; color: var(--dim); flex: 1 1 14rem; }
#patch-note { min-height: 6.4em; }
@media (max-width: 460px) { .mouth-grid { grid-template-columns: minmax(0, 1fr); } #scope { height: 96px; } }