/* Compose · Dynamics (How loud) · the instrument face: the page's own tokens and overlays (FACE §2, §7). The kit is face.css.
   Lights: the take and the rule are the mover (--ae-walk); the band is the place (--ae-land); a surprise is blue; the
   instrument's measured response is this unit's identity hue, --acc, one step below the focal level bar (D-29). */
.fp-dynamics {
  --dy-surp: var(--surp);
  --dy-surp-25: color-mix(in srgb, var(--surp) 25%, transparent);
  --dy-inst: color-mix(in srgb, var(--acc) 55%, var(--text2));
  --dy-inst-60: color-mix(in srgb, var(--dy-inst) 40%, transparent);
  --dy-inst-14: color-mix(in srgb, var(--dy-inst) 7%, transparent);
  --dy-inst-w: 1.25px;
}
.fp-dynamics .face-pic { outline: none; }
.fp-dynamics .face-pic:focus-visible { outline: 2px solid var(--face-sel); outline-offset: -2px; }

/* HTML over the picture: play the drawn notes, the pager, "how it was measured" */
.fp-dynamics .face .ov { position: absolute; }
.fp-dynamics .face .fbtn[aria-disabled="true"] { color: var(--face-quiet); cursor: default; }
.fp-dynamics .face .fbtn:focus-visible, .fp-dynamics .face .flink:focus-visible { outline: 2px solid var(--face-sel); outline-offset: 3px; }
.fp-dynamics .face .fbtn.round { width: var(--face-btn-h); padding: 0; }
.fp-dynamics .face .flink { font: inherit; font-size: 12.5px; color: var(--text2); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline dotted var(--face-quiet); text-underline-offset: 4px; white-space: nowrap; }
.fp-dynamics .face .flink:hover { color: var(--text); }
.fp-dynamics .face .pop { position: absolute; z-index: 3; background: var(--face-chip); border: 1px solid var(--border2); border-radius: var(--radius-sm); box-shadow: var(--elev-1); padding: 14px 16px 12px; font-size: 12.5px; line-height: 1.5; color: var(--text2); backdrop-filter: blur(6px); }
.fp-dynamics .face .pop[hidden] { display: none; }
.fp-dynamics .face .pop h3 { margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text2); }
.fp-dynamics .face .pop p { margin: 0 0 8px; }
.fp-dynamics .face .pop b { color: var(--text); font-weight: 500; }
.fp-dynamics .face .pop .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--text); }
.fp-dynamics .face .pop kbd { font: inherit; font-family: var(--mono); color: var(--text); }
@media (pointer: coarse) { .fp-dynamics .face .fbtn.round { min-width: 44px; } }

/* handles on demand (Melody's rule, translated): the quiet mark is always there; the handle shows when its part is hovered or selected */
.fp-dynamics .face svg .dy-zn .dy-hd { opacity: 0; transition: opacity 120ms ease; }
.fp-dynamics .face svg .dy-zn:hover .dy-hd, .fp-dynamics .face svg .dy-zn.on .dy-hd { opacity: 1; }
.fp-dynamics .face svg .dy-zn:hover .dy-idle, .fp-dynamics .face svg .dy-zn.on .dy-idle { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .fp-dynamics .face svg .dy-zn .dy-hd { transition: none; } }

.fp-dynamics { --dy-handle: #6c52e6; --dy-handle-rim: #8f78ff; }   /* the same handle as Melody's range */
.fp-dynamics .face svg .dy-rail .thumb { cursor: ns-resize; }

.fp-dynamics .face svg .dy-wall { cursor: ns-resize; }