/* ========== CLARINET ========== */
/* The clarinet layout is a tall vertical column (A key + 6 circles + pinky
   ovals) so it has to shrink continuously as the viewport gets shorter.
   Everything is expressed as multiples of a single "circle unit" (--u) that
   scales between 18px and 58px based on available viewport height. */

/* Layout hooks are class-based so snapshot clones (e.g. mini HStack below the
   song title) pick up the same styles. The live element still carries
   id="clarinet-stack" for JS hookups. */
.clarinet-stack {
    /* ~46px on tall windows, shrinks down to ~14px on very short windows.
       Tuned so the full column (~10 circle-heights tall) plus the scale
       buttons below always fit in the viewport. Mini snapshots override
       --u to a small fixed value. */
    --u: clamp(14px, 5.1vh, 46px);
    display: flex;
    gap: 4px;
    align-items: flex-start;
    justify-content: center;
}

.clarinet-circle {
    width: var(--u);
    height: var(--u);
    font-size: calc(var(--u) * 0.345);
    border-width: max(1.5px, calc(var(--u) * 0.07));
}

/* Top A key and the "R" oval above T — both true vertical ellipses (50%
   radius, not pills) that keep a ~1.38:1 height:width ratio, half the width
   of a circle. */
.clarinet-a-key,
.clarinet-t-top-key {
    width: calc(var(--u) * 0.5);
    height: calc(var(--u) * 1.38);
    border-radius: 50%;
    font-size: calc(var(--u) * 0.31);
}

/* Horizontal pinky ellipses (R1, R2, R3, R4). Circle width × half circle
   height, true ovals (50% radius, not pills). */
.clarinet-r-oval {
    width: var(--u);
    height: calc(var(--u) * 0.5);
    border-radius: 50%;
    font-size: calc(var(--u) * 0.224);
}

/* Capsule keys (Eb, C#) sit between circles. They're circle-wide and 1/3
   circle-tall, and their negative vertical margins let them occupy the gap
   between the two circles they sit between. */
.clarinet-capsule {
    width: var(--u);
    height: calc(var(--u) * 0.33);
    border-radius: 9999px;
    border: max(1.5px, calc(var(--u) * 0.07)) solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(var(--u) * 0.19);
    position: relative;
    font-weight: 700;
    color: #fff;
    user-select: none;
    pointer-events: none;
    margin-top: calc(var(--u) * -0.2);
    margin-bottom: calc(var(--u) * -0.2);
}

.clarinet-capsule.filled {
    background: #fff;
    border-color: #fff;
    color: #000;
}

/* Vertical G# capsule: 33% circle width, same tall height as the other ovals.
   Doubled class selector so it wins border-radius against global .circle. */
.clarinet-circle.clarinet-gsharp-key {
    width: calc(var(--u) * 0.33);
    height: calc(var(--u) * 1.38);
    border-radius: 9999px;
    font-size: calc(var(--u) * 0.224);
}

.clarinet-main-column,
.clarinet-thumb-column,
.clarinet-gsharp-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--u) * 0.2);
}

.clarinet-thumb-column {
    /* Offset the thumb column down by half a circle height so its "R" oval
       aligns with the middle of the main column's A key. */
    margin-top: calc(var(--u) * 0.5);
    /* Stretch to main column height so R2/R4 can hug the bottom. */
    align-self: stretch;
}

/* Push R2/R4 to the bottom of the thumb column, matching R1/R3 in the main column. */
.clarinet-pinky-top {
    margin-top: auto;
}

/* Keep adjacent pinky ovals (R1→R3, R2→R4) at a fixed ~4px visual gap
   regardless of the larger column gap. Negative margin eats (column-gap − 4px). */
.clarinet-r-oval + .clarinet-r-oval {
    margin-top: calc(4px - var(--u) * 0.2);
}

/* Visibility class for capsules that are off. `visibility: hidden` so layout
   space is preserved — otherwise the column's spacing would shift. */
.clarinet-hidden {
    visibility: hidden;
}

/* When C# capsule is hidden, show a dashed line to indicate hand position boundary (Eb between 2–3 must not show a line — only C# has .clarinet-hand-boundary). */
.clarinet-capsule.clarinet-hidden.clarinet-hand-boundary::before {
    content: '';
    position: absolute;
    width: calc(var(--u) * 0.8);
    height: 0;
    border-top: max(1px, calc(var(--u) * 0.034)) dashed rgba(255, 255, 255, 0.35);
    visibility: visible;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* Unused legacy elements — kept as no-ops for any leftover markup. */
#clarinet-separator,
.clarinet-thumb-spacer {
    display: none;
}

.clarinet-gsharp-spacer {
    flex: 1;
}