/* Percussions Rack web UI (pr-ui.js): the plug-in's look, at its 970x470 layout, scaled as a whole */
@font-face { font-family: "PR Fors"; src: url(/pr/fors.woff2) format("woff2"); font-display: block; }
@font-face { font-family: "PR Tumb"; src: url(/pr/tumb.woff2) format("woff2"); font-display: block; }

.pr-rack { --pr-cream: #efe3de; --pr-green: #24553c; --pr-navy: #15295b; --pr-orange: #fbb232; position: relative; width: 100%; }
.pr-frame { position: relative; width: 100%; overflow: hidden; }
.pr-stage { position: absolute; left: 0; top: 0; background: var(--pr-navy); user-select: none; -webkit-user-select: none; touch-action: none; }
.pr-stage * { box-sizing: border-box; }
.pr-bg { position: absolute; display: block; pointer-events: none; }
.pr-sprite { position: absolute; background-repeat: no-repeat; }
.pr-drag { cursor: ns-resize; }
.pr-click, .pr-pad { cursor: pointer; }

.pr-label {
  position: absolute; display: flex; align-items: center; justify-content: center; white-space: nowrap; pointer-events: none;
  font-family: "PR Fors", sans-serif; color: var(--pr-cream); line-height: 1; letter-spacing: 0.01em;
}
.pr-shadow { position: absolute; border-radius: 50%; background: #000; pointer-events: none; }
.pr-dot { position: absolute; border-radius: 50%; background: var(--pr-cream); box-shadow: 0 0 0 1.3px #000; pointer-events: none; }

/* pitch: ring knob drawn like RingKnob::paint */
.pr-ring {
  position: absolute; border-radius: 50%; --a: 0deg;
}
.pr-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pr-ring-needle {
  position: absolute; left: 50%; top: 50%; width: 2px; height: 14px; margin-left: -1px; background: #000;
  transform-origin: 50% 0; transform: rotate(calc(var(--a) + 180deg));
}
.pr-switch { position: absolute; padding: 0; border: 0; background: none; cursor: pointer; }
.pr-switch svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pr-switch-ball { transition: transform .15s ease; }
.pr-switch.on .pr-switch-ball { transform: translateX(-17px); }

/* rack buttons: slot (bottom left) and key (3 px up / right, pressed onto the slot when selected) */
.pr-rackbtn { position: absolute; padding: 0; border: 0; background: none; cursor: pointer; }
.pr-rackbtn::before {
  content: ""; position: absolute; left: 0; bottom: 0; right: 3px; top: 3px; background: #8368ef; border: 1.5px solid #000; box-sizing: border-box;
}
.pr-rackbtn span {
  position: absolute; left: 3px; top: 0; right: 0; bottom: 3px; display: flex; align-items: center; justify-content: center;
  background: var(--pr-cream); border: 1.5px solid #000; box-sizing: border-box; font-family: "PR Tumb", serif; font-size: 13px; color: #000;
  padding-top: 1px; transition: transform .08s ease;
}
.pr-rackbtn:hover span { filter: brightness(1.06); }
.pr-rackbtn.selected span, .pr-rackbtn:active span { transform: translate(-3px, 3px); background: #bf6bae; }

.pr-preset {
  position: absolute; padding: 0; border: 0; background: none; cursor: pointer;
  font-family: "PR Fors", sans-serif; font-size: 13px; color: #000; letter-spacing: 0.02em; white-space: nowrap;
}

/* keyboard drawer: the plug-in's keyboard (KeyboardDrawer.cpp), keyswitches + one octave. Cream keys with black
   outlines on a black shadow 2 px down-left; played keys press into it and turn orange */
/* the texture at exactly its 2x size (64 rows): stretched, its dots beat into stripes */
.pr-drawer { position: absolute; background: var(--pr-navy) url(/pr/ui-drawer.webp) 0 1px / 970px 64px no-repeat; }
.pr-pk-bed, .pr-pk-slot { position: absolute; background: #000; }
.pr-pk {
  position: absolute; display: flex; align-items: flex-end; justify-content: center; padding: 0 0 5px; cursor: pointer;
  background: var(--pr-cream); border: 1.5px solid #000; box-sizing: border-box; color: #000;
}
.pr-pk--black { background: #34323e; color: var(--pr-cream); padding-bottom: 4px; }
.pr-pk--ks { background: #8368ef; color: #000; }
.pr-pk--ks.selected { background: #bf6bae; }
.pr-pk b { font-family: "PR Fors", sans-serif; font-weight: 400; font-size: 11px; line-height: 1; pointer-events: none; }
.pr-pk--black b { font-size: 9px; }
.pr-pk--ks b { font-family: "PR Tumb", serif; font-size: 13px; }
.pr-pk--black.pr-pk--ks b { font-size: 11px; }
.pr-pk:hover { filter: brightness(1.06); }
.pr-pk.down, .pr-pk:active { background: var(--pr-orange); color: #000; transform: translate(-2px, 2px); }
.pr-pk-tag {
  position: absolute; z-index: 5; transform: translate(-50%, -100%); padding: 3px 6px 2px; background: #000; color: var(--pr-cream);
  font-family: "PR Fors", sans-serif; font-size: 9px; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
  pointer-events: none; opacity: 0; transition: opacity .12s ease;
}
.pr-pk-tag.on { opacity: 1; }

/* controls the web version doesn't offer */
.pr-disabled { cursor: not-allowed !important; }
.pr-tip {
  position: absolute; z-index: 30; transform: translate(-50%, -100%); padding: 4px 7px 3px; background: #000; color: var(--pr-cream);
  font-family: "PR Fors", sans-serif; font-size: 10px; letter-spacing: .03em; white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity .12s ease;
}
.pr-tip.on { opacity: 1; }