/* Lockup — vendored from playhead-lockup.jsx's injected stylesheet.
   The JSX in the handoff injects this CSS at runtime; we ship it as a
   plain stylesheet so consumers get it via the standard CSS import.

   --ph-size resolves in this priority:
     1. inline style on .ph-lockup (when caller passes the size prop)
     2. inherited CSS var from chassis size class
     3. literal fallback 0.42 baked into every calc() below (regular tier) */

.ph-lockup {
  display: inline-flex;
  align-items: center;
  color: #ECE7DB;
  line-height: 1;
}
.ph-lockup .ph-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(28px * var(--ph-size, 0.42) * var(--ph-glyph-mult));
  height: calc(28px * var(--ph-size, 0.42) * var(--ph-glyph-mult));
  flex-shrink: 0;
  color: inherit;
  margin-right: var(--ph-glyph-gap);
}
.ph-lockup .ph-glyph svg { display: block; width: 100%; height: 100%; }
.ph-lockup .ph-glyph svg path { fill: currentColor; }
/* Effect-glyph mode (2026-07-11): a DSP's brand effect glyph rides in the
   monogram slot. 1.2× the monogram box height (--ph-fx-scale, locked from
   the "DSP Glyph Lockup" exploration); the box width follows the glyph's
   aspect ratio (--ph-fx-ar = viewBox w/h, set inline by the component).
   Fill defaults to the per-glyph brand color (--ph-fx-color); 'ink' mode
   falls back to currentColor. */
.ph-lockup .ph-glyph.is-fx {
  height: calc(28px * var(--ph-size, 0.42) * var(--ph-glyph-mult) * var(--ph-fx-scale, 1.2));
  width: calc(28px * var(--ph-size, 0.42) * var(--ph-glyph-mult) * var(--ph-fx-scale, 1.2) * var(--ph-fx-ar, 1.5));
}
.ph-lockup .ph-glyph.is-fx svg path,
.ph-lockup .ph-glyph.is-fx svg rect { fill: var(--ph-fx-color, currentColor); }
/* ── Bypass-swap mode (2026-07-13 — De-Esser canon, family-wide) ──
   The chassis wraps the lockup in <button class="…-lockup ph-bypass">
   (aria/title/onClick + the bypassed dim live chassis-side); Lockup
   renders the swap anatomy inside .ph-glyph.ph-swap. Hover crossfades
   effect glyph ⇄ power glyph (200 ms opacity / 240 ms scale+blur,
   90 ms active dip); the one-shot .ph-pulse ring (640 ms) tracks the
   glyph's brand color. Values verbatim from DeEsser.css — the canon
   source. Sizes are calc()'d so 16 px icon / 18 px ring land at the
   regular tier's --ph-size: 0.42. */
.ph-bypass {
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: 0;
  padding: 9px 13px;
  margin: -9px -13px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  font: inherit;
  color: inherit;
}
.ph-lockup .ph-glyph.ph-swap { position: relative; }
.ph-lockup .ph-swap-mono,
.ph-lockup .ph-swap-power { transition: opacity 200ms ease, transform 240ms cubic-bezier(.2,.7,.2,1), filter 200ms ease, color 200ms ease; }
.ph-lockup .ph-swap-power {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  opacity: 0;
  transform: scale(0.8);
  filter: blur(1.5px);
}
.ph-lockup .ph-swap-power svg {
  display: block;
  flex-shrink: 0; /* the 16 px icon deliberately overflows the glyph-hugging is-fx box — DeEsser optical parity */
  width: calc(38.1px * var(--ph-size, 0.42));
  height: calc(38.1px * var(--ph-size, 0.42));
}
/* the generic .ph-glyph path fills (cream / --ph-fx-color) must not
   paint the stroke-only power icon */
.ph-lockup .ph-glyph .ph-swap-power svg path { fill: none; }
.ph-bypass:hover .ph-swap-power { opacity: 1; transform: scale(1); filter: blur(0); }
.ph-bypass:hover .ph-swap-mono { opacity: 0; transform: scale(1.18); filter: blur(1.5px); }
.ph-bypass:active .ph-swap-power { transform: scale(0.9); transition-duration: 90ms; }
.ph-lockup .ph-pulse {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(42.9px * var(--ph-size, 0.42));
  height: calc(42.9px * var(--ph-size, 0.42));
  margin: calc(-21.45px * var(--ph-size, 0.42)) 0 0 calc(-21.45px * var(--ph-size, 0.42));
  border-radius: 50%;
  border: 1px solid currentColor;
  pointer-events: none;
  animation: phPulseRing 640ms cubic-bezier(.2,.7,.3,1) forwards;
  opacity: 0;
}
@keyframes phPulseRing {
  0% { opacity: 0.9; transform: scale(0.55); }
  100% { opacity: 0; transform: scale(1.9); }
}

.ph-lockup .ph-wordmark {
  display: inline-flex;
  align-items: center;
  height: calc(28px * var(--ph-size, 0.42));
  color: inherit;
  flex-shrink: 0;
  margin-right: var(--ph-sep-gap-before);
}
.ph-lockup .ph-wordmark svg {
  display: block;
  height: calc(26px * var(--ph-size, 0.42));
  width: auto;
  transform: translateY(var(--ph-wm-y));
}
.ph-lockup .ph-wordmark svg path { fill: currentColor; }
.ph-lockup .ph-sep {
  display: inline-block;
  width: 1px;
  height: calc(18px * var(--ph-size, 0.42) * var(--ph-sep-mult));
  background: var(--fg-4);
  flex-shrink: 0;
  margin: 0 var(--ph-sep-gap-after) 0 0;
}
.ph-lockup .ph-title {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: calc(22px * var(--ph-size, 0.42) * var(--ph-title-mult));
  color: #A8A396;
  letter-spacing: 0.005em;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  transform: translateY(calc(1px + var(--ph-title-y)));
}