/* flute-fingering.css — Styles for the FluteFingering component
   Mirrors the pattern of clarinet-fingering.css / recorder-fingering.css.
   Loaded alongside the parent page's stylesheet. */

.flute-stack {
    --u: clamp(14px, 5.1vh, 46px);
    --flute-ink: rgba(255, 255, 255, 0.9);
    --flute-ink-inverse: var(--instrument-color, #007AFF);

    width: 100%;
    height: 100%;
    /* viewBox is 366 × 88 with key diameter 42vb → these multipliers give
       the same intrinsic footprint as the old div layout (~400px × ~96px). */
    min-width:  calc(var(--u) * (366 / 42));
    min-height: calc(var(--u) * (88 / 42));

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

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

/* Empty keys: outline-only. `.filled` inverts to a solid ink fill, and
   the label flips to --flute-ink-inverse so it stays legible. */
.flute-svg .circle > circle,
.flute-svg .circle > ellipse,
.flute-svg .circle > rect {
    fill: none;
    stroke: var(--flute-ink);
    stroke-width: 4;
    transition: fill 0.15s, stroke 0.15s;
}

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

.flute-svg .flute-label {
    fill: var(--flute-ink);
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Rounded', ui-rounded, system-ui, sans-serif;
    font-weight: 700;
    font-size: 18px;
    text-anchor: middle;
    dominant-baseline: central;
    pointer-events: none;
    user-select: none;
    transition: fill 0.15s;
}

.flute-svg .flute-label-slim {
    font-size: 10px;
}

.flute-svg .circle.filled > text {
    fill: var(--flute-ink-inverse);
}

.flute-svg .circle.out-of-range > circle,
.flute-svg .circle.out-of-range > ellipse,
.flute-svg .circle.out-of-range > rect {
    stroke: rgba(255, 255, 255, 0.3);
}

.flute-svg .circle.out-of-range > text {
    fill: rgba(255, 255, 255, 0.3);
}

/* ── Mini fingering-button overrides ──────────────────────────────────────
   When rendered inside a small `.instrument-fingering-button`, ink should
   be black against the white button background; the selected accent color
   promotes it to the instrument hue. Labels stay hidden at this scale. */

.instrument-fingering-button-inner .flute-stack {
    --flute-ink: rgba(0, 0, 0, 0.9);
    --flute-ink-inverse: transparent;
    /* Drop the live-view --u fallback so the SVG fills the button box. */
    min-width: 0;
    min-height: 0;
}

.instrument-fingering-button-inner .flute-svg .flute-label {
    fill: transparent;
}

.instrument-fingering-button.selected .instrument-fingering-button-inner .flute-stack {
    --flute-ink: var(--instrument-color);
    --flute-ink-inverse: #fff;
}

.instrument-fingering-button.selected .instrument-fingering-button-inner .flute-svg .flute-label {
    fill: transparent;
}

/* Disable transitions inside snapshot buttons so state changes are instant. */
.instrument-fingering-button-inner .flute-svg .circle > circle,
.instrument-fingering-button-inner .flute-svg .circle > ellipse,
.instrument-fingering-button-inner .flute-svg .circle > rect,
.instrument-fingering-button-inner .flute-svg .flute-label {
    transition: none !important;
}