/*
 * Song map for the embed players (section_nav_controller.js). Everything
 * here is gated on `.is-structured`, which the controller sets only when the
 * track has sections — without it the players look exactly as before.
 *
 * Section colour: hsl(var(--seg-hue) 52% 45%), the same SectionLabel hue as
 * every other structure strip.
 */

.section-nav__scrub { position: relative; flex: 1; min-width: 40px; display: flex; align-items: center; }
.section-nav__scrub > input[type="range"] { flex: 1; min-width: 0; }
.section-nav__bands { display: none; }

/* Bands behind the range input: each section a tinted band that fills in
   its own colour as it plays. */
.is-structured .section-nav__bands {
    display: block; position: absolute; left: 0; right: 0; top: 50%; height: 10px;
    transform: translateY(-50%); pointer-events: none;
}
.section-nav__band {
    position: absolute; top: 2px; bottom: 2px; box-sizing: border-box;
    border-left: 1px solid transparent; border-right: 1px solid transparent; background-clip: padding-box;
    border-radius: 3px; overflow: hidden; background-color: hsl(var(--seg-hue) 52% 45% / .28);
}
.section-nav__band.is-current { top: 0; bottom: 0; }
.section-nav__fill { display: block; height: 100%; width: 0; background: hsl(var(--seg-hue) 52% 45%); }

/* The range input stays on top for dragging + the keyboard; only its
   thumb shows, as the playhead. */
.is-structured .section-nav__scrub > input[type="range"] {
    position: relative; z-index: 1; height: 18px; margin: 0; background: transparent;
    -webkit-appearance: none; appearance: none; cursor: pointer;
}
.is-structured .section-nav__scrub > input[type="range"]::-webkit-slider-runnable-track { height: 18px; background: transparent; }
.is-structured .section-nav__scrub > input[type="range"]::-moz-range-track { height: 18px; background: transparent; }
.is-structured .section-nav__scrub > input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 4px; height: 18px; border: 0; border-radius: 2px;
    background: var(--c-text, #1a1816);
}
.is-structured .section-nav__scrub > input[type="range"]::-moz-range-thumb {
    width: 4px; height: 18px; border: 0; border-radius: 2px; background: var(--c-text, #1a1816);
}
.is-structured .section-nav__scrub > input[type="range"]:focus-visible { outline: 2px solid var(--c-text, #1a1816); outline-offset: 2px; border-radius: 3px; }

/* Chip row: every section, the one playing filled in (tap it to replay). */
.section-nav__chips { display: none; }
.is-structured .section-nav__chips {
    display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth;
}
.section-nav__chips::-webkit-scrollbar { display: none; }
.section-nav__chip {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px;
    border: 1px solid var(--c-border, #d9d2c5); border-radius: 999px; background: var(--c-bg, #fbf7f0);
    color: var(--c-text, #1a1816); font: 500 .6875rem/1 var(--font-text, system-ui, sans-serif);
    white-space: nowrap; cursor: pointer;
}
.section-nav__chip:hover { border-color: hsl(var(--seg-hue) 52% 45%); }
.section-nav__chip:focus-visible { outline: 2px solid var(--c-text, #1a1816); outline-offset: 1px; }
.section-nav__chip.is-current {
    border-color: hsl(var(--seg-hue) 52% 32%); background: hsl(var(--seg-hue) 52% 32%); color: #fff; font-weight: 600;
}
.section-nav__dot { flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: hsl(var(--seg-hue) 52% 45%); }
.section-nav__chip.is-current .section-nav__dot { background: #fff; }
.section-nav__replay-icon {
    display: none; width: 11px; height: 11px; fill: none; stroke: currentColor;
    stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.section-nav__chip.is-current .section-nav__replay-icon { display: block; }

/* Stepper for frames too short for the chip row: ‹ [● Hook ↺] › */
.section-nav__stepper { display: none; }
.is-structured .section-nav__stepper { display: flex; align-items: center; gap: 4px; min-width: 0; }
.section-nav__step {
    flex-shrink: 0; display: grid; place-items: center; width: 22px; height: 22px; padding: 0;
    border: 1px solid var(--c-border, #d9d2c5); border-radius: 50%; background: var(--c-surface-2, #f7f1e4);
    color: var(--c-text, #1a1816); cursor: pointer;
}
.section-nav__step:disabled { opacity: .4; cursor: default; }
.section-nav__step svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.section-nav__current {
    min-width: 0; display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px;
    border: 0; border-radius: 999px; cursor: pointer; color: #fff; background: hsl(var(--seg-hue, 0) 52% 32%);
    font: 600 .6875rem/1 var(--font-text, system-ui, sans-serif);
}
.section-nav__current > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.section-nav__current .section-nav__replay-icon { display: block; flex-shrink: 0; width: 10px; height: 10px; }