/* Left sidebar reserved for melody fingering stacks (Band Onion). */

:root {
    /* Tall minimap buttons (clarinet): width. Wide buttons (flute/trumpet/trombone): height. */
    --fingering-melody-button-cross-size: 44px;
    /* Matches piano --key-gap / KEY_GAP (4px). */
    --fingering-melody-button-gap: 4px;
    /* Vertical spacing between clarinet row groups (extra conceptual layer). */
    --fingering-melody-row-gap: 10px;
    /* Same radius value as piano --white-key-r at 44px (round(44 × 0.13) → 6px). */
    --fingering-melody-button-radius: 6px;
    /* Outer-edge corners — matches ilophone overlay / piano first- & last-key (12px). */
    --fingering-melody-bookend-radius: 12px;
    /* Fixed pitch-label column (e.g. Eb5, C#4) — same width on every minimap card. */
    --fingering-melody-label-width: 30px;
    --fingering-melody-label-pad-y: 3px;
    /* Chromatic / out-of-key minimap cards (still show real fingerings). */
    --fingering-melody-out-of-key-scale: 0.85;
    --fingering-melody-out-of-key-radius: 10px;
    /* Instrument shell — matches ilophone / piano-inner padding and bookend radius. */
    --fingering-chassis-pad: 4px;
    --fingering-chassis-radius: 16px;
    --fingering-chassis-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.15);
    --fingering-area-gutter: 40px;
    --fingering-area-side-inset: 20px;
    --fingering-area-max-width: 1340px;
    --fingering-area-left: max(0px, (100vw - var(--fingering-area-max-width)) / 2 + var(--fingering-area-side-inset));
    --fingering-area-width: 0px;
    --fingering-area-overlay-height: 96px;
    /* Legacy aliases — prefer --fingering-area-* in new rules */
    --bandonion-float-fingerings-w: var(--fingering-area-width);
    --bandonion-float-fingerings-h: var(--fingering-area-overlay-height);
}

fingering-area {
    display: none;
    flex: 0 0 auto;
    min-width: 0;
}

body.has-melody-fingerings fingering-area {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
}

/* Ilophone-style chevrons inside the instrument chassis when the minimap stack has more than 8 notes. */
.melody-stack-scroll-btn {
    display: none;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    align-self: center;
    width: 24px;
    height: 24px;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.65);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: color 80ms ease, transform 80ms ease;
}

body.has-melody-stack-scroll .melody-stack-scroll-btn {
    display: flex;
}

.melody-stack-scroll-btn:disabled {
    opacity: 0.28;
    pointer-events: none;
}

.melody-stack-scroll-btn:active:not(:disabled) {
    color: rgba(255, 255, 255, 1);
    transform: scale(0.85);
}

.melody-stack-scroll-btn svg {
    width: 14px;
    height: 14px;
    pointer-events: none;
}

/* Recorder HStack pill: left / right chevrons beside the strip. */
body.has-melody-stack-scroll.recorder-layout .melody-stack-scroll-btn--lower svg {
    transform: rotate(90deg);
}

body.has-melody-stack-scroll.recorder-layout .melody-stack-scroll-btn--higher svg {
    transform: rotate(-90deg);
}

#fingering-chassis {
    display: none;
    box-sizing: border-box;
    width: fit-content;
    max-width: 100%;
    padding: var(--fingering-chassis-pad);
    border-radius: var(--fingering-chassis-radius);
    background: var(--instrument-color, #ff9500);
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.2),
        0 8px 24px rgba(0, 0, 0, 0.22),
        var(--fingering-chassis-inset-highlight);
}

body.has-melody-fingerings #fingering-chassis {
    display: flex;
    flex-direction: inherit;
}

body.has-melody-stack-scroll #fingering-chassis {
    align-items: center;
    gap: var(--fingering-melody-button-gap);
}

body.has-melody-fingerings #fingering-chassis:has(#melody-fingerings:empty) {
    display: none;
}

body.has-melody-fingerings fingering-area #melody-fingerings {
    flex-direction: inherit;
}

/* Recorder HStack: chassis is a horizontal strip like ilophone. */
body.has-melody-fingerings.recorder-layout #fingering-chassis {
    flex-direction: row;
    align-items: center;
}

/* Inside the recorder glass pill, let the outer wrap carry depth — keep a subtle inner highlight only. */
body.has-floating-fingerings #floating-fingerings-wrap > #fingering-chassis {
    box-shadow: var(--fingering-chassis-inset-highlight);
}

/* Wide stacks (trumpet / flute / trombone): vertical gap between rows = piano key gap. */
body.has-melody-fingerings.trumpet-layout #melody-fingerings,
body.has-melody-fingerings.flute-layout #melody-fingerings,
body.has-melody-fingerings.trombone-layout #melody-fingerings {
    gap: var(--fingering-melody-button-gap);
}

/* Tall stacks (clarinet column): horizontal gap within a row = piano key gap. */
body.clarinet-layout.has-melody-fingerings:not(.recorder-layout) .instrument-fingering-row-group {
    gap: var(--fingering-melody-button-gap);
    align-items: stretch;
}

body.clarinet-layout.has-melody-fingerings .instrument-fingering-row {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* Clarinet: larger vertical gap between row groups. */
body.clarinet-layout.has-melody-fingerings:not(.recorder-layout) #melody-fingerings {
    gap: var(--fingering-melody-row-gap);
}

/* Recorder HStack: horizontal gap between tall buttons. */
body.has-melody-fingerings.recorder-layout #melody-fingerings {
    gap: var(--fingering-melody-button-gap);
}

/* Melody minimap cards: 6px on all corners (same r as piano white keys at 44px). */
body.has-melody-fingerings .instrument-fingering-button {
    border-radius: var(--fingering-melody-button-radius);
}

body.has-melody-fingerings .instrument-fingering-button.active::before {
    border-radius: inherit;
}

/* ── Bookend corners (ilophone first-bar / last-bar, piano first-key / last-key) ── */
/* Default joint radius on every card; only perimeter corners bump to bookend radius. */

/* Recorder HStack: outer left / right ends of the strip */
body.has-melody-fingerings.recorder-layout #melody-fingerings > .instrument-fingering-row:first-child .instrument-fingering-button {
    border-radius:
        var(--fingering-melody-bookend-radius)
        var(--fingering-melody-button-radius)
        var(--fingering-melody-button-radius)
        var(--fingering-melody-bookend-radius);
}

body.has-melody-fingerings.recorder-layout #melody-fingerings > .instrument-fingering-row:last-child .instrument-fingering-button {
    border-radius:
        var(--fingering-melody-button-radius)
        var(--fingering-melody-bookend-radius)
        var(--fingering-melody-bookend-radius)
        var(--fingering-melody-button-radius);
}

body.has-melody-fingerings.recorder-layout #melody-fingerings > .instrument-fingering-row:only-child .instrument-fingering-button {
    border-radius: var(--fingering-melody-bookend-radius);
}

/* Clarinet grid: inner joints stay 6px — override only the four stack corners below,
   not every left/right column on every row (that rounded interior corners). */
body.clarinet-layout.has-melody-fingerings:not(.recorder-layout) .instrument-fingering-row-group > .instrument-fingering-row .instrument-fingering-button {
    border-radius: var(--fingering-melody-button-radius);
}

/* Trumpet / flute / trombone column: softer top & bottom on stack ends
   (DOM first-child = bottom with column-reverse). */
body.has-melody-fingerings.trumpet-layout #melody-fingerings > .instrument-fingering-row:first-child .instrument-fingering-button,
body.has-melody-fingerings.flute-layout #melody-fingerings > .instrument-fingering-row:first-child .instrument-fingering-button,
body.has-melody-fingerings.trombone-layout #melody-fingerings > .instrument-fingering-row:first-child .instrument-fingering-button {
    border-radius:
        var(--fingering-melody-button-radius)
        var(--fingering-melody-button-radius)
        var(--fingering-melody-bookend-radius)
        var(--fingering-melody-bookend-radius);
}

body.has-melody-fingerings.trumpet-layout #melody-fingerings > .instrument-fingering-row:last-child .instrument-fingering-button,
body.has-melody-fingerings.flute-layout #melody-fingerings > .instrument-fingering-row:last-child .instrument-fingering-button,
body.has-melody-fingerings.trombone-layout #melody-fingerings > .instrument-fingering-row:last-child .instrument-fingering-button {
    border-radius:
        var(--fingering-melody-bookend-radius)
        var(--fingering-melody-bookend-radius)
        var(--fingering-melody-button-radius)
        var(--fingering-melody-button-radius);
}

body.has-melody-fingerings.trumpet-layout #melody-fingerings > .instrument-fingering-row:only-child .instrument-fingering-button,
body.has-melody-fingerings.flute-layout #melody-fingerings > .instrument-fingering-row:only-child .instrument-fingering-button,
body.has-melody-fingerings.trombone-layout #melody-fingerings > .instrument-fingering-row:only-child .instrument-fingering-button {
    border-radius: var(--fingering-melody-bookend-radius);
}

/* Clarinet grid perimeter — only the four corners of the stack (DOM first group = bottom). */
body.clarinet-layout.has-melody-fingerings:not(.recorder-layout) #melody-fingerings > .instrument-fingering-row-group:first-child > .instrument-fingering-row:first-child .instrument-fingering-button {
    border-bottom-left-radius: var(--fingering-melody-bookend-radius);
}

body.clarinet-layout.has-melody-fingerings:not(.recorder-layout) #melody-fingerings > .instrument-fingering-row-group:first-child:not(.instrument-fingering-row-group--remainder) > .instrument-fingering-row:last-child .instrument-fingering-button {
    border-bottom-right-radius: var(--fingering-melody-bookend-radius);
}

body.clarinet-layout.has-melody-fingerings:not(.recorder-layout) #melody-fingerings > .instrument-fingering-row-group:last-child > .instrument-fingering-row:first-child .instrument-fingering-button {
    border-top-left-radius: var(--fingering-melody-bookend-radius);
}

body.clarinet-layout.has-melody-fingerings:not(.recorder-layout) #melody-fingerings > .instrument-fingering-row-group:last-child > .instrument-fingering-row:last-child .instrument-fingering-button {
    border-top-right-radius: var(--fingering-melody-bookend-radius);
}

/* Partial bottom row: only the leftmost outer corner — not the last button in the row */
body.clarinet-layout.has-melody-fingerings:not(.recorder-layout) #melody-fingerings > .instrument-fingering-row-group--remainder > .instrument-fingering-row:first-child .instrument-fingering-button {
    border-radius: var(--fingering-melody-button-radius);
    border-bottom-left-radius: var(--fingering-melody-bookend-radius);
}

/* Ilophone-aligned pitch labels inside minimap cards (not beside them). */
body.has-melody-fingerings {
    --il-label-size: 14px;
    --il-label-weight: 600;
}

body.has-melody-fingerings .instrument-fingering-row {
    gap: 0;
}

body.has-melody-fingerings .instrument-fingering-row-label {
    display: none;
}

body.has-melody-fingerings .instrument-fingering-button {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    gap: var(--fingering-melody-button-gap);
    padding: var(--fingering-melody-label-pad-y) 6px;
    overflow: visible;
}

body.has-melody-fingerings .instrument-fingering-pitch-label {
    flex: 0 0 var(--fingering-melody-label-width);
    width: var(--fingering-melody-label-width);
    min-width: var(--fingering-melody-label-width);
    max-width: var(--fingering-melody-label-width);
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "SF Pro Rounded", ui-rounded, system-ui, sans-serif;
    font-size: var(--il-label-size, 14px);
    font-weight: var(--il-label-weight, 600);
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
    padding: var(--fingering-melody-label-pad-y) 0;
}

body.has-melody-fingerings .instrument-fingering-button--placeholder .instrument-fingering-pitch-label {
    min-height: calc(var(--il-label-size, 14px) * 1.1 + 2 * var(--fingering-melody-label-pad-y));
}

/* Tonic badge — ilophone pill, contained inside the fixed label slot */
body.has-melody-fingerings .instrument-fingering-button.is-tonic .instrument-fingering-pitch-label {
    position: relative;
    z-index: 0;
    color: var(--tonic-circle-color, #fff);
}

body.has-melody-fingerings .instrument-fingering-button.is-tonic .instrument-fingering-pitch-label::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--tonic-circle-bg, var(--instrument-color, #ffcc00));
    opacity: 0.8;
    border-radius: 999px;
    pointer-events: none;
    z-index: -1;
}

body.has-melody-fingerings .instrument-fingering-button-inner {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Wide cards (trumpet / flute / trombone): label left, diagram right */
body.has-melody-fingerings.trumpet-layout .instrument-fingering-button,
body.has-melody-fingerings.flute-layout .instrument-fingering-button {
    flex-direction: row;
    height: var(--fingering-melody-button-cross-size);
    min-height: var(--fingering-melody-button-cross-size);
    max-height: var(--fingering-melody-button-cross-size);
    width: auto;
    padding: var(--fingering-melody-label-pad-y) 8px var(--fingering-melody-label-pad-y) 6px;
}

body.has-melody-fingerings.trumpet-layout .instrument-fingering-row,
body.has-melody-fingerings.flute-layout .instrument-fingering-row {
    width: 100%;
}

body.has-melody-fingerings.trumpet-layout .instrument-fingering-button-inner,
body.has-melody-fingerings.flute-layout .instrument-fingering-button-inner {
    max-height: calc(var(--fingering-melody-button-cross-size) - 6px);
}

/* Tall cards (clarinet / recorder): diagram top, label bottom */
body.clarinet-layout.has-melody-fingerings .instrument-fingering-button {
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: max(
        var(--fingering-melody-button-cross-size),
        calc(var(--fingering-melody-label-width) + 12px)
    );
    min-width: max(
        var(--fingering-melody-button-cross-size),
        calc(var(--fingering-melody-label-width) + 12px)
    );
    max-width: max(
        var(--fingering-melody-button-cross-size),
        calc(var(--fingering-melody-label-width) + 12px)
    );
    height: auto;
    min-height: min-content;
    max-height: none;
    padding: 5px 6px 5px;
    overflow: hidden;
}

/* Intrinsic SVG height — do not flex-shrink to 0 (breaks remainder-row singles). */
body.clarinet-layout.has-melody-fingerings .instrument-fingering-button-inner {
    flex: 0 0 auto;
    width: 100%;
    min-height: min-content;
}

body.clarinet-layout.has-melody-fingerings .instrument-fingering-pitch-label {
    flex-shrink: 0;
}

body.clarinet-layout.has-melody-fingerings .instrument-fingering-button--placeholder .instrument-fingering-placeholder {
    flex: 1 1 auto;
    width: auto;
    min-width: 10px;
    max-width: 10px;
    min-height: 0;
    max-height: none;
    align-self: stretch;
}

/* Remainder row: single column — don't flex-stretch to an empty row height */
body.clarinet-layout.has-melody-fingerings .instrument-fingering-row-group--remainder > .instrument-fingering-row {
    flex: 0 0 auto;
}

body.has-melody-fingerings.trumpet-layout .instrument-fingering-button--placeholder .instrument-fingering-placeholder,
body.has-melody-fingerings.flute-layout .instrument-fingering-button--placeholder .instrument-fingering-placeholder {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    min-height: 10px;
    max-height: 10px;
    width: auto;
    align-self: stretch;
}

/* Notation clears the fingering area + gutter on desktop VStack layouts */
@media (min-width: 801px) {
    body.has-floating-fingerings.trumpet-layout #instrument-area,
    body.has-floating-fingerings.flute-layout #instrument-area,
    body.has-floating-fingerings.trombone-layout #instrument-area,
    body.has-floating-fingerings.clarinet-layout:not(.recorder-layout) #instrument-area {
        padding-left: calc(var(--fingering-area-width) + var(--fingering-area-gutter));
    }

    body.has-floating-fingerings.trumpet-layout fingering-area,
    body.has-floating-fingerings.flute-layout fingering-area,
    body.has-floating-fingerings.trombone-layout fingering-area,
    body.has-floating-fingerings.clarinet-layout:not(.recorder-layout) fingering-area {
        position: fixed;
        left: var(--fingering-area-left);
        top: var(--toolbar-bottom, 50px);
        height: calc(100vh - var(--toolbar-bottom, 50px));
        overflow-y: auto;
        justify-content: flex-end;
        z-index: 10;
    }

    body.has-floating-fingerings.trumpet-layout fingering-area #fingering-chassis,
    body.has-floating-fingerings.flute-layout fingering-area #fingering-chassis,
    body.has-floating-fingerings.trombone-layout fingering-area #fingering-chassis,
    body.has-floating-fingerings.clarinet-layout:not(.recorder-layout) fingering-area #fingering-chassis {
        flex-direction: column-reverse;
        flex-shrink: 0;
    }

    body.has-floating-fingerings.trumpet-layout fingering-area #melody-fingerings,
    body.has-floating-fingerings.flute-layout fingering-area #melody-fingerings,
    body.has-floating-fingerings.trombone-layout fingering-area #melody-fingerings,
    body.has-floating-fingerings.clarinet-layout:not(.recorder-layout) fingering-area #melody-fingerings {
        display: flex;
        flex-direction: column-reverse;
        overflow-y: auto;
        justify-content: flex-end;
        width: auto;
        max-width: none;
        margin: 0;
        padding: 0;
    }
}

/* Minimap column: cancel the legacy full-bleed scroll hack — the chassis is the instrument. */
body.has-melody-fingerings #melody-fingerings {
    width: auto;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

/* Bottom runway for the fixed nav pill (recorder: fingerings + nav; VStack: nav only). */
body.has-floating-fingerings #instrument-area {
    padding-bottom: var(--fingering-area-overlay-height);
}

body.has-floating-fingerings {
    scroll-padding-bottom: var(--fingering-area-overlay-height);
    scroll-padding-top: 16px;
}

/* Out-of-key chromatic tones: slightly rounder than in-key tiles, scaled down. */
body.has-melody-fingerings .instrument-fingering-button--out-of-key {
    border-radius: var(--fingering-melody-out-of-key-radius, 10px) !important;
    overflow: hidden;
    transform: scale(var(--fingering-melody-out-of-key-scale, 0.85));
    transform-origin: center center;
}

body.has-melody-fingerings .instrument-fingering-button--out-of-key.active::before {
    border-radius: inherit;
}

body.has-melody-fingerings .instrument-fingering-button--out-of-key.is-tonic .instrument-fingering-pitch-label::before {
    border-radius: var(--fingering-melody-out-of-key-radius, 10px);
}