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

/* Flexible sizing — same recipe as .flute-stack: wrapper fills 100% of its
   container, the inner SVG handles proportional scaling, and a --u-based
   min-width/min-height fallback keeps the slide visible when the parent has
   no resolvable size. */
.trombone-slide {
    --u: clamp(14px, 5.1vh, 46px);

    width: 100%;
    height: 100%;
    /* viewBox is 360 × 80; using tube half-height of 40 mirrors flute's
       proportions so both horizontal SVGs scale together. */
    min-width:  calc(var(--u) * (360 / 40));
    min-height: calc(var(--u) * (80 / 40));

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

.trombone-svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

/* Tube shell — solid white interior + dark-ink outline. The white interior
   lets the position number (black by default) stay readable when the capsule
   is empty (position 7, no fill). */
.trombone-tube {
    fill: #fff;
    stroke: #241414;
    stroke-width: 4;
    stroke-linejoin: round;
}

/* Progress bar fill — black by default; tints to --instrument-color on
   .selected (see rule below). */
.trombone-fill {
    fill: #241414;
}

/* Label: dark ink against the white tube interior for most positions.
   Position 1's label rides inside the full fill and gets .on-fill added
   to flip it to white for contrast. */
.trombone-position-label {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Rounded", "Segoe UI", Roboto, sans-serif;
    font-size: 32px;
    font-weight: 700;
    dominant-baseline: middle;
    fill: #241414;
}

.trombone-position-label.on-fill {
    fill: #fff;
}

/* Out-of-range: hide fill + label so the empty tube outline reads as
   "no valid position for this note". */
.trombone-slide.out-of-range .trombone-fill,
.trombone-slide.out-of-range .trombone-position-label {
    display: none;
}

/* Selected mini fingering — tint fill, outline, and label with instrument color. */
.instrument-fingering-button.selected .instrument-fingering-button-inner .trombone-fill {
    fill: var(--instrument-color);
}
.instrument-fingering-button.selected .instrument-fingering-button-inner .trombone-tube {
    stroke: var(--instrument-color);
}
.instrument-fingering-button.selected .instrument-fingering-button-inner .trombone-position-label {
    fill: var(--instrument-color);
}
.instrument-fingering-button.selected .instrument-fingering-button-inner .trombone-position-label.on-fill {
    fill: #fff;
}

/* Mini trombone — drop the live-view --u fallback so the slide fills whatever
   size the button-inner resolves to. Mirrors the clarinet/flute mini treatment. */
.instrument-fingering-button-inner .trombone-slide {
    min-width: 0;
    min-height: 0;
}

/* Drop the tube's white interior in mini buttons so the button's background
   shows through the empty portion of the slide. */
.instrument-fingering-button-inner .trombone-tube {
    fill: transparent;
}

/* Trombone bell: right triangle (horizontal bottom, vertical right side,
   apex at bottom-left). Width = 1/3 of SVG capsule; height = width/2.
   Filled left-to-right by --bell-fill, same mechanic as .trumpet-bell. */
.trombone-bell {
    position: relative;
    width: 60px;
    height: 30px;
    flex-shrink: 0;
    clip-path: polygon(0% 100%, 100% 100%, 100% 0%);
    background: rgba(0, 0, 0, 0.15);
}

.trombone-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 .trombone-bell {
    background: color-mix(in srgb, var(--instrument-color) 15%, transparent);
}

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