/* ========== CLARINET ========== */
/* The clarinet fingering is a single inline SVG with the key geometry taken
   from the "Combined Shape" Sketch export. Both the stack wrapper and the
   SVG fill 100% of whatever container they're placed in, in BOTH dimensions.
   The SVG's default preserveAspectRatio="xMidYMid meet" keeps the drawing
   proportional (letterboxing the short axis as needed).

   If a parent doesn't provide a resolvable height (e.g. percentage heights
   collapse when the parent has height: auto), the --u-based min-width /
   min-height fallback kicks in so the fingering never disappears. Parents
   that DO have explicit width/height simply win — the stack grows to fill
   them completely. */

.clarinet-stack {
    /* Circle unit clamp — same range as the old div layout. Used only as a
       fallback minimum so the stack has a size when its parent doesn't. */
    --u: clamp(14px, 5.1vh, 46px);
    /* Default ink (empty keys' stroke + label color). Mini snapshots and the
       .selected state override these two variables — nothing else in this
       file hard-codes colors. */
    --clarinet-ink: rgba(255, 255, 255, 0.9);
    --clarinet-ink-inverse: var(--instrument-color, #34C759);

    width: 100%;
    height: 100%;
    min-width: calc(var(--u) * (100 / 44));   /* viewBox-width  / 44 × --u */
    min-height: calc(var(--u) * (423 / 44));  /* viewBox-height / 44 × --u */
    /* Cap horizontal growth — the stack sizes to parent width, which can be
       generous, but the clarinet reads fine well under this and anything
       taller just wastes vertical space (aspect ratio ≈ 1:4.2). */
    max-width: 84px;

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

.clarinet-stack.clarinet-stack-alt {
    /* Alt variant has a wider viewBox (155 × 423) — bump both the intrinsic
       fallback width and the cap so the G# lever has room. */
    min-width: calc(var(--u) * (155 / 44));
    max-width: 130px;
}

.clarinet-svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
    color: var(--clarinet-ink); /* feeds currentColor defaults below */
}

/* Decorative chassis: top register vent (default), plus the thumb-rest ribs
   on the "clarinet-alt" variant. Not interactive, never fills — just outlined
   with the same ink as empty keys. */
.clarinet-svg .clarinet-chassis rect,
.clarinet-svg .clarinet-thumb-rest rect {
    fill: none;
    stroke: var(--clarinet-ink);
    stroke-width: 4;
}

/* Every interactive key starts out transparent with an outline. Once `.filled`
   is on the <g>, the shape inside fills with the same ink. */
.clarinet-svg .ckey > circle,
.clarinet-svg .ckey > ellipse,
.clarinet-svg .ckey > rect,
.clarinet-svg .ckey > path {
    fill: none;
    stroke: var(--clarinet-ink);
    stroke-width: 4;
    transition: fill 0.15s, stroke 0.15s;
}

.clarinet-svg .ckey.filled > circle,
.clarinet-svg .ckey.filled > ellipse,
.clarinet-svg .ckey.filled > rect,
.clarinet-svg .ckey.filled > path {
    fill: var(--clarinet-ink);
}

/* Capsule keys (Eb, C#) are visually absent when not engaged — fade out
   both their outline and label. `visibility: hidden` on the <g> would also
   work but opacity keeps the transition smooth. */
.clarinet-svg .ckey-capsule > rect {
    stroke-opacity: 0;
}
.clarinet-svg .ckey-capsule > text {
    opacity: 0;
}
.clarinet-svg .ckey-capsule.filled > rect {
    stroke-opacity: 1;
}
.clarinet-svg .ckey-capsule.filled > text {
    opacity: 1;
}

/* Dashed hand-position hint between key 3 and key 4. It's a reading aid for
   where the right hand goes; it disappears as soon as C# itself is pressed
   (that capsule visually takes its place). */
.clarinet-svg .clarinet-hand-boundary-line {
    stroke: var(--clarinet-ink);
    stroke-width: 1;
    stroke-dasharray: 4 3;
    opacity: 0.35;
    transition: opacity 0.15s;
}
.clarinet-stack.c-sharp-pressed .clarinet-hand-boundary-line {
    opacity: 0;
}

/* Labels: ~36% of a circle for main circles, smaller for slim ovals,
   capsules, pinky ovals, and the G# lever. Central baseline + middle anchor
   centers the text on each key regardless of glyph metrics. */
.clarinet-svg .clarinet-label {
    fill: var(--clarinet-ink);
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Rounded', ui-rounded, system-ui, sans-serif;
    font-weight: 700;
    font-size: 16px;              /* main circles (44vb diameter) */
    text-anchor: middle;
    dominant-baseline: central;
    pointer-events: none;
    user-select: none;
    transition: fill 0.15s;
}
.clarinet-svg .clarinet-label-slim    { font-size: 7px; }   /* A key, R key tall ovals */
.clarinet-svg .clarinet-label-capsule { font-size: 6px; }   /* Eb, C# horizontal capsules */
.clarinet-svg .clarinet-label-oval    { font-size: 5.5px; } /* R1–R4 pinky ovals */
.clarinet-svg .clarinet-label-gsharp  { font-size: 7px; }   /* G# lever handle */

/* When a key is filled, flip the label to the inverse ink so it stays
   legible against the newly solid fill. */
.clarinet-svg .ckey.filled > text {
    fill: var(--clarinet-ink-inverse);
}

/* Out-of-range: dim everything. Only non-capsule keys get this class (see
   update() in clarinet-fingering.js) so the Eb/C# capsules' hidden state
   isn't overridden. */
.clarinet-svg .ckey.out-of-range > circle,
.clarinet-svg .ckey.out-of-range > ellipse,
.clarinet-svg .ckey.out-of-range > rect,
.clarinet-svg .ckey.out-of-range > path {
    stroke: rgba(255, 255, 255, 0.3);
}
.clarinet-svg .ckey.out-of-range > text {
    fill: rgba(255, 255, 255, 0.3);
}