/* ========== RECORDER ========== */
/* Soprano recorder: a single inline SVG (105 × 581 viewBox) drawn as a tall,
   narrow chassis with 8 tone holes (T offset to the left, the rest stacked
   along the body's vertical centerline). Visual language matches the clarinet
   and flute fingerings: outlined chassis + outlined holes that fill solid
   when the active pattern engages them. Colors flow from --recorder-ink /
   --recorder-ink-inverse so the .selected mini-snapshot can flip the entire
   diagram to the instrument accent color in one swap. */

.recorder-stack {
    /* Hole-diameter unit clamp — recorder holes are 40px in the source SVG,
       so a 40px circle ≈ 1 unit. Uses the same vertical-aware sizing as the
       clarinet so a tablet-portrait layout doesn't tower over the staff. */
    --u: clamp(14px, 5.1vh, 46px);
    --recorder-ink: rgba(255, 255, 255, 0.9);
    --recorder-ink-inverse: var(--instrument-color, #FFCC00);

    width: 100%;
    height: 100%;
    /* viewBox is 105 wide × 581 tall (≈ 1 : 5.5). Min-size keeps the
       diagram usable when the parent doesn't supply explicit dimensions. */
    min-width: calc(var(--u) * (105 / 44));
    min-height: calc(var(--u) * (581 / 44));
    /* Cap horizontal growth — same reasoning as .clarinet-stack. */
    max-width: 84px;

    display: flex;
    justify-content: center;
    align-items: stretch;
}

.recorder-svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
    color: var(--recorder-ink);
}

/* Body chassis: outlined mouthpiece, body tube, decorative band, foot. */
.recorder-svg .recorder-chassis path,
.recorder-svg .recorder-chassis rect {
    fill: none;
    stroke: var(--recorder-ink);
    stroke-width: 4;
}

/* The decorative ring band gets filled (it's a thin solid stripe in the
   source artwork, not just an outlined rect). */
.recorder-svg .recorder-band {
    fill: var(--recorder-ink);
    stroke: none;
}

/* Tone holes: outlined by default; the fill layer can be clipped for
   half-hole states while the outline remains intact. */
.recorder-svg .rkey-outline {
    fill: none;
    stroke: var(--recorder-ink);
    stroke-width: 4;
    transition: stroke 0.15s;
}

.recorder-svg .rkey-fill {
    fill: none;
    stroke: none;
    transition: fill 0.15s;
}

.recorder-svg .rkey.filled .rkey-fill,
.recorder-svg .rkey.half-bottom .rkey-fill,
.recorder-svg .rkey.half-top .rkey-fill,
.recorder-svg .rkey.half-left .rkey-fill,
.recorder-svg .rkey.half-right .rkey-fill {
    fill: var(--recorder-ink);
}

.recorder-svg .rkey.half-bottom .rkey-fill {
    clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
}

.recorder-svg .rkey.half-top .rkey-fill {
    clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
}

.recorder-svg .rkey.half-left .rkey-fill {
    clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
}

.recorder-svg .rkey.half-right .rkey-fill {
    clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
}

/* Out-of-range: dim the entire diagram. The chassis doesn't take this class
   since it's purely decorative — only the holes flip. */
.recorder-svg .rkey.out-of-range .rkey-outline {
    stroke: rgba(255, 255, 255, 0.3);
}