/* trumpet-fingering.css — Styles for TrumpetFingering component
   Loaded alongside bandonion.html's stylesheet.
   Only includes diagram-specific styles; layout rules that reference
   body.trumpet-layout stay in the parent page stylesheet. */

#trumpet-row {
    gap: 20px;
}

.trumpet-circle {
    width: 80px;
    height: 80px;
    font-size: 28px;
}

/* Trumpet bell graphic: isosceles triangle with rounded corners (apex left,
   base right) filled left-to-right by --bell-fill to show wind-power / partial.
   Dimensions are in the native 40×72 coordinate space; zoom: 0.4 on the
   .instrument-fingering-button-inner scales it down to ~16×29px rendered. */
.trumpet-bell {
    position: relative;
    width: 40px;
    height: 72px;
    flex-shrink: 0;
    clip-path: path('M 4.18,33.94 Q 2,36 4.18,38.06 L 32.91,65.19 Q 38,70 38,63 L 38,9 Q 38,2 32.91,6.81 Z');
    background: rgba(0, 0, 0, 0.15);
}

.trumpet-bell::before {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: var(--bell-fill, 0%);
    background: rgba(0, 0, 0, 0.8);
}

.instrument-fingering-button.selected .trumpet-bell {
    background: color-mix(in srgb, var(--instrument-color) 15%, transparent);
}

.instrument-fingering-button.selected .trumpet-bell::before {
    background: var(--instrument-color);
}