/**
 * Horeka Quick OS — Sound Experience strip.
 *
 * A full-width bar above the gallery, ~60 px tall. The control is a mixer
 * speed dial: 0 stops, 1/2/3
 * select and play, and the cap snaps to the detent like the real knob. Under
 * the cap a small four-blade rotor turns at the speed the recording is
 * actually at — the cap is the control, the rotor is the motor, and neither
 * costs the page any extra height. The waveform doubles as the scrubber.
 *
 * Palette follows the PDP: brand green #2C8515 for anything live, navy #0D1B40
 * for type. Every animated property is transform/opacity. The three runtime
 * inputs are CSS custom properties written by hq-sound.js:
 *   --hq-snd-amp   0..1  amplitude envelope at the current playhead
 *   --hq-snd-spin  s     seconds per rotor revolution for the active stage
 *   --hq-snd-knob  deg   the detent the cap is turned to
 */

.hq-snd {
    --hq-snd-amp: 0;
    --hq-snd-spin: 0.9s;
    --hq-snd-green: #2C8515;
    --hq-snd-navy: #0D1B40;
    --hq-snd-line: #e3e6ef;
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0;
    padding: 7px 15px;
    border: 0;
    border-bottom: 1px solid #f0f0f0;
    background: #fff;
    color: var(--hq-snd-navy);
    font-variant-numeric: tabular-nums;
}

/* Desktop sits inside the content column, so it gets the card treatment. */
.hq-snd--d {
    margin: 0 0 14px;
    padding: 8px 14px;
    border: 1px solid var(--hq-snd-line);
    border-radius: 12px;
}

.hq-snd-mid {
    flex: 1 1 auto;
    min-width: 0;
}

.hq-snd-line {
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.2;
    white-space: nowrap;
}

.hq-snd-ttl { font-size: 12.5px; font-weight: 800; flex: 0 0 auto; letter-spacing: -.1px; }

.hq-snd-flag {
    flex: 0 0 auto;
    font-size: 8.5px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: .5px;
    padding: 1px 4px;
    border-radius: 3px;
    background: #fff5cc;
    color: #6b4e00;
}

/* The active stage and what it is for — fills the gap, truncates first. */
.hq-snd-now {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 11.5px;
    color: #5b6478;
}

.hq-snd-live {
    flex: 0 0 auto;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--hq-snd-green);
}

.hq-snd-wave {
    display: block;
    width: 100%;
    height: 22px;
    margin-top: 3px;
    cursor: pointer;
    touch-action: manipulation;
}

/* ── the speed dial ───────────────────────────────────────────────────────
   The knob is skinned per machine: colours come from custom properties the
   renderer writes inline, sampled off that appliance's own product photo
   (see hq_sound_skin()). Shape and mechanics are shared; only the finish
   changes, so the Premia gets its glossy burgundy knob and dotted tick arc
   while the Sujata gets brushed silver with a slotted indicator.

   Skin variables, with fallbacks so an unskinned profile still looks right:
     --hq-dial-plate / --hq-dial-edge    the control panel and its bevel
     --hq-dial-cap / --hq-dial-cap2      cap centre and edge
     --hq-dial-rim                       ring around the cap
     --hq-dial-ink                       printed ticks and numerals
     --hq-dial-marker                    position indicator
   Modifier classes: --slot / --wedge (indicator), --gloss / --brushed. */
.hq-snd-knob {
    position: relative;
    flex: 0 0 62px;
    width: 62px;
    height: 62px;
    cursor: grab;
    touch-action: none;          /* the drag gesture is ours, not the page's */
    -webkit-tap-highlight-color: transparent;
}
.hq-snd-knob:active { cursor: grabbing; }
.hq-snd-knob:focus-visible { outline: 2px solid var(--hq-snd-green); outline-offset: 3px; border-radius: 13px; }

/* The control panel: a moulded plastic square with a lit bevel, the way it is
   on the machine. Rounded like the PDP's own cards so it still belongs here. */
.hq-snd-knob::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: var(--hq-dial-plate, #0a0a0c);
    box-shadow:
        inset 0 1px 0 var(--hq-dial-edge, #2c2c32),
        inset 0 0 0 1px rgba(255, 255, 255, .06),
        0 1px 2px rgba(13, 27, 64, .18);
}

.hq-snd-dial { position: absolute; inset: 0; width: 62px; height: 62px; }

.hq-snd-tk {
    stroke: var(--hq-dial-ink, #eef0f3);
    stroke-width: 1.5;
    stroke-linecap: round;
    opacity: .5;
}
.hq-snd-tk--dot {
    stroke: none;
    fill: var(--hq-dial-ink, #eef0f3);
    opacity: .55;
}
.hq-snd-tk.on        { stroke: var(--hq-snd-green); stroke-width: 2.2; opacity: 1; }
.hq-snd-tk--dot.on   { fill: var(--hq-snd-green); opacity: 1; r: 2; }

.hq-snd-num {
    font: 700 7.5px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    fill: var(--hq-dial-ink, #eef0f3);
    text-anchor: middle;
    opacity: .55;
}
.hq-snd-num.on { fill: var(--hq-snd-green); opacity: 1; }

/* The cap. Lit from the top; the rim ring is the machined edge. */
.hq-snd-cap {
    /* sized in % so the dial scales with its box */
    position: absolute;
    left: 17%;
    top: 17%;
    width: 66%;
    height: 66%;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 28%,
        var(--hq-dial-cap, #f6f7f9) 0%,
        var(--hq-dial-cap, #f6f7f9) 22%,
        var(--hq-dial-cap2, #c3c7cf) 88%);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, .45),
        0 3px 7px rgba(0, 0, 0, .25),
        inset 0 0 0 1px var(--hq-dial-rim, #9aa0a8),
        inset 0 -3px 5px rgba(0, 0, 0, .22),
        inset 0 2px 3px rgba(255, 255, 255, .18);
    transform: rotate(var(--hq-snd-knob, -130deg));
    /* mechanical snap, not a slide */
    transition: transform .2s cubic-bezier(.22, .95, .22, 1), box-shadow .2s ease;
}

/* Running: a soft brand-green halo on the panel, the one thing the real
   machine cannot do. */
.hq-snd.is-on .hq-snd-cap {
    box-shadow:
        0 1px 2px rgba(0, 0, 0, .45),
        0 3px 7px rgba(0, 0, 0, .25),
        inset 0 0 0 1px var(--hq-dial-rim, #9aa0a8),
        inset 0 -3px 5px rgba(0, 0, 0, .22),
        inset 0 2px 3px rgba(255, 255, 255, .18),
        0 0 0 3px rgba(44, 133, 21, .22);
}

/* Finishes. Gloss = the Premia's wet-look plastic; brushed = the Sujata's
   spun aluminium. Both are one extra paint on a pseudo-element. */
.hq-snd-cap::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
}
.hq-snd--gloss .hq-snd-cap::before {
    background:
        radial-gradient(ellipse 60% 38% at 34% 20%, rgba(255, 255, 255, .30), rgba(255, 255, 255, 0) 70%),
        radial-gradient(ellipse 70% 50% at 60% 96%, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 70%);
}
.hq-snd--brushed .hq-snd-cap::before {
    background:
        repeating-linear-gradient(90deg,
            rgba(255, 255, 255, .16) 0 1px,
            rgba(0, 0, 0, .05) 1px 2px),
        radial-gradient(ellipse 70% 45% at 40% 22%, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 72%);
    opacity: .75;
}

/* The motor: four blades turning at the stage's rate, under the cap surface. */
.hq-snd-blade {
    position: absolute;
    left: 24%;
    top: 24%;
    width: 52%;
    height: 52%;
    fill: rgba(0, 0, 0, .13);
}
.hq-snd.is-playing .hq-snd-blade {
    animation: hq-snd-spin var(--hq-snd-spin) linear infinite;
    fill: rgba(0, 0, 0, calc(0.10 + var(--hq-snd-amp) * 0.16));
}
/* On a slotted cap the slot is the indicator, so the rotor stays out of it. */
.hq-snd--slot .hq-snd-blade { left: 30%; top: 30%; width: 40%; height: 40%; }

@keyframes hq-snd-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Indicator, two styles. Wedge: a printed mark at the cap's edge, like the
   Premia's. Slot: a moulded channel through the middle, like the Sujata's. */
.hq-snd-cap::after {
    content: "";
    position: absolute;
    border-radius: 2px;
}
.hq-snd--wedge .hq-snd-cap::after {
    left: 50%;
    top: 8%;
    width: 2.5px;
    height: 26%;
    margin-left: -1.25px;
    background: var(--hq-dial-marker, #fff);
    opacity: .85;
}
.hq-snd--slot .hq-snd-cap::after {
    left: 50%;
    top: 24%;
    width: 5px;
    height: 52%;
    margin-left: -2.5px;
    border-radius: 3px;
    background: linear-gradient(180deg, #15161a, #2a2c33);
    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, .7),
        0 1px 0 rgba(255, 255, 255, .35);
}
.hq-snd.is-on.hq-snd--wedge .hq-snd-cap::after { background: var(--hq-snd-green); opacity: 1; }

/* The hum: a ring that breathes with the amplitude. Transform + opacity only. */
.hq-snd-hum {
    position: absolute;
    inset: 2px;
    border-radius: 11px;
    border: 1.5px solid var(--hq-snd-green);
    opacity: calc(var(--hq-snd-amp) * 0.45);
    transform: scale(calc(1 + var(--hq-snd-amp) * 0.03));
    pointer-events: none;
}

.hq-snd.is-loading .hq-snd-knob { opacity: .6; pointer-events: none; }


/* ── the measurement note ──────────────────────────────────────────────────
   A phone has no hover, so the caveat behind the dB figure opens as a small
   popover pinned to the bar. It is absolutely positioned, so opening it never
   moves the page. */
.hq-snd-info {
    flex: 0 0 15px;
    width: 15px;
    height: 15px;
    padding: 0;
    border: 1px solid #ccd3e0;
    border-radius: 50%;
    background: #fff;
    color: #8b93a5;
    font: 700 9px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    cursor: pointer;
}
.hq-snd-info:hover { border-color: var(--hq-snd-green); color: var(--hq-snd-green); }
.hq-snd-info[aria-expanded="true"] {
    border-color: var(--hq-snd-green);
    background: var(--hq-snd-green);
    color: #fff;
}

.hq-snd-foot {
    position: absolute;
    top: calc(100% - 4px);
    right: 15px;
    z-index: 6;
    max-width: 300px;
    padding: 8px 10px;
    border: 1px solid var(--hq-snd-line);
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(13, 27, 64, .16);
    font-size: 10.5px;
    line-height: 1.45;
    color: #5b6478;
    white-space: normal;
}
.hq-snd--d .hq-snd-foot { right: 14px; }

/* The note is closed until the (i) is tapped. Stated explicitly because a bare
   [hidden] attribute loses to any author rule that sets display — which is
   exactly how it once shipped open over the gallery. */
.hq-snd-foot[hidden] { display: none !important; }

/* ── mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .hq-snd { padding: 7px 12px; gap: 9px; }
    .hq-snd-knob { flex-basis: 54px; width: 54px; height: 54px; }
    .hq-snd-dial { width: 54px; height: 54px; }
    .hq-snd-wave { height: 20px; }
    .hq-snd-ttl { font-size: 12px; }
    .hq-snd-foot { right: 12px; max-width: calc(100vw - 32px); }
}

/* Narrow phones: the title gives way, the speed and the number do not. */
@media (max-width: 380px) {
    .hq-snd-ttl { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .hq-snd-cap { transition: none; }
    .hq-snd-hum { transform: none; }
    .hq-snd.is-playing .hq-snd-blade { animation: none; }
}