/* The UC Signature series' faces (js/music/sig/*). Each panel is drawn on
   canvases; this only sizes the stage, lays the controls over it and gives
   them a focus ring that follows their shape. The panels keep their own
   colours (they are instruments, not the room's chrome), so nothing here
   changes with the page's theme. */

.sig { position: relative; display: flex; justify-content: center; min-width: 0; padding-bottom: var(--s1, 4px); }
.sig__stage { position: relative; flex: 0 0 auto; max-width: 100%; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.sig__can { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sig__layer { position: absolute; inset: 0; pointer-events: none; }
.sig .sig__ctl { position: absolute; left: 0; top: 0; pointer-events: auto; border-radius: 50%; touch-action: none; outline: none; cursor: grab; }
.sig .sig__ctl[data-held] { cursor: grabbing; }
.sig .sig__ctl[data-shape="rect"] { border-radius: 8px; }
.sig .sig__ctl[data-shape="rule"] { border-radius: 6px; cursor: ew-resize; }
/* A face with a drawer (kit.js spec.drawer): the panel and, under it, a clip that grows,
   holding the drawer's stage at its foot, so the drawer comes out from under the panel. */
.sig.sig--drawer { flex-direction: column; align-items: center; justify-content: flex-start; }
.sig--drawer > .sig__stage { margin-top: auto; }
.sig__drawer { position: relative; flex: 0 0 auto; height: 0; max-width: 100%; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; margin-bottom: auto; transition: height 320ms cubic-bezier(.4, 0, .2, 1); }
.sig__dstage { position: relative; flex: 0 0 auto; max-width: 100%; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
@media (prefers-reduced-motion: reduce) { .sig__drawer { transition: none; } }
/* A face's badge that opens its drawer: a press, not a drag. */
.sig .sig__act[data-action="finish"] { cursor: pointer; border-radius: 5px; }
/* UC Rack: a strip's nameplate is a handle (grabbed, it moves); a spare is a press; the eject a press. */
.sig .sig__act[data-action^="mv_"] { cursor: grab; border-radius: 8px; }
.sig .sig__act[data-action^="mv_"][data-spare="true"] { cursor: pointer; border-radius: 10px; }
.sig .sig__act[data-action^="mv_"][data-dragging] { cursor: grabbing; }
.sig .sig__act[data-action^="rm_"] { cursor: pointer; border-radius: 50%; }
/* UC All in One: its lit object (WebGL) under the kit's canvases, inside the stage. */
.sig--allinone .sig__stage { isolation: isolate; }
.sig--allinone .sig__gl { z-index: -1; pointer-events: none; }
.sig .sig__ctl:focus-visible { box-shadow: 0 0 0 2px rgb(255 255 255 / 0.9), 0 0 0 4px rgb(0 0 0 / 0.55); }
.sig .sig__ctl[hidden] { display: none; }
/* A row of lit push buttons (a choice): the group lays nothing out; each button is placed by the face. */
.sig .sig__grp { position: absolute; inset: 0; pointer-events: none; }
.sig .sig__btn { position: absolute; left: 0; top: 0; pointer-events: auto; border-radius: 6px; outline: none; cursor: pointer; touch-action: none; }
.sig .sig__btn:focus-visible { box-shadow: 0 0 0 2px rgb(255 255 255 / 0.9), 0 0 0 4px rgb(0 0 0 / 0.55); }
.sig .sig__btn[hidden] { display: none; }
/* A read-out's mark (a meter, a figure, the picture in the glass): nothing to see or press, only its hover tip. */
.sig .sig__read { position: absolute; left: 0; top: 0; pointer-events: auto; touch-action: none; }
.sig .sig__read[hidden] { display: none; }
/* (A finger needs a target of at least 36 px, whatever the scale.) */
@media (pointer: coarse) { .sig .sig__ctl { min-width: 36px; min-height: 36px; } }

/* The visual view of a signature plugin: the panel is the whole body. */
.mu-pf[data-view="visual"] .mu-pf__body > .sig { flex: 0 0 auto; }
.mu-win[data-fixed] .mu-pf[data-view="visual"] .mu-pf__body > .sig { flex: 1 1 auto; align-items: center; }