/* Shared audio-player styles for the DJ console (show_dj.html) and the
   performer playlist (performer_playlist.html). Both pages render the same
   .dj-track rows and the same sticky player, so they share one stylesheet.
   Rules for the tunes panel and the low-pass gauge are DJ-only and simply go
   unused on the playlist page. */

/* ── Reset & base ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

.dj-container {
    min-height: 100vh;
    background: #1a1a1a;
    color: #f5f5f5;
    display: flex;
    flex-direction: column;
    font-family: system-ui, -apple-system, sans-serif;
}

/* ── Header ──────────────────────────────────────────────────── */
.dj-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #2d2d2d;
    border-bottom: 3px solid #d4af37;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-shrink: 0;
}

.dj-header-text { min-width: 0; flex: 1; }

.dj-show-name {
    color: #d4af37;
    font-size: 1.1rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dj-show-meta {
    color: #aaa;
    font-size: 0.78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dj-exit-btn {
    flex-shrink: 0;
    color: #aaa;
    text-decoration: none;
    font-size: 1.2rem;
    padding: 4px 8px;
    border-radius: 4px;
    line-height: 1;
    transition: color 0.15s;
}
.dj-exit-btn:hover { color: #f5f5f5; }

/* ── Scrollable list ─────────────────────────────────────────── */
.dj-lineup {
    flex: 1;
    overflow-y: auto;
    padding: 8px 8px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dj-section-label {
    color: #888;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 8px 4px 2px;
    margin-top: 4px;
    border-top: 1px solid #2d2d2d;
}

/* ── Show filter (performer playlist) ────────────────────────── */
.dj-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 4px 2px;
}

.dj-filter label {
    color: #888;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0;
}

.dj-filter select {
    flex: 1;
    min-width: 180px;
    background: #2a2a2a;
    color: #f5f5f5;
    border: 1px solid #3a3a3a;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 0.9rem;
    font-family: inherit;
    color-scheme: dark;
}
.dj-filter select:focus {
    outline: none;
    border-color: #d4af37;
}

.dj-filter-clear {
    color: #d4af37;
    font-size: 0.8rem;
    text-decoration: none;
    white-space: nowrap;
}
.dj-filter-clear:hover { text-decoration: underline; }

/* ── Empty state ─────────────────────────────────────────────── */
.dj-empty {
    text-align: center;
    color: #888;
    padding: 48px 20px;
    line-height: 1.5;
}
.dj-empty .material-icons {
    font-size: 3rem;
    color: #3a3a3a;
    display: block;
    margin-bottom: 10px;
}

/* ── Show music collapsible ──────────────────────────────────── */
.dj-show-music {
    background: #242424;
    border: 1px solid #3a3a3a;
    border-radius: 8px;
    overflow: hidden;
}

.dj-panel-toggle {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: none;
    border: none;
    color: #d4af37;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.dj-panel-toggle:hover { background: #2d2d2d; }

.dj-tunes {
    padding: 0 8px 8px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    overflow: hidden;
    transition: all 0.25s ease;
}
.dj-tunes.collapsed {
    height: 0;
    padding: 0 8px;
    visibility: hidden;
}

.dj-tunes-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

/* ── Low-pass filter gauge ───────────────────────────────────── */
.dj-lpf {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    padding: 4px 6px 0;
    touch-action: none;
    cursor: ns-resize;
    user-select: none;
    outline: none;
}
.dj-lpf[hidden] { display: none; }
.dj-lpf.bypassed { opacity: 0.45; }

.dj-lpf svg {
    width: 88px;
    height: 88px;
    display: block;
    pointer-events: none;
}

.dj-lpf-track {
    fill: none;
    stroke: #3a3a3a;
    stroke-width: 10;
}

.dj-lpf-fill {
    fill: none;
    stroke: #d4af37;
    stroke-width: 10;
    stroke-linecap: round;
}
.dj-lpf:active .dj-lpf-fill,
.dj-lpf:focus-visible .dj-lpf-fill {
    stroke: #f5d76e;
}

.dj-lpf-freq {
    fill: #ffffff;
    font-size: 22px;
    font-weight: 700;
}

.dj-lpf-unit {
    fill: #aaaaaa;
    font-size: 11px;
    font-weight: 400;
}

.dj-lpf-name {
    font-size: 0.7rem;
    font-weight: 600;
    color: #d4af37;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ── Kitten fade-in gauge ────────────────────────────────────── */
.dj-fade {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    padding: 4px 6px 0;
    touch-action: none;
    cursor: ns-resize;
    user-select: none;
    outline: none;
}
.dj-fade[hidden] { display: none; }

.dj-fade svg {
    width: 88px;
    height: 88px;
    display: block;
    pointer-events: none;
}

.dj-fade-track {
    fill: none;
    stroke: #3a3a3a;
    stroke-width: 10;
}

.dj-fade-fill {
    fill: none;
    stroke: #7ec8e3;
    stroke-width: 10;
    stroke-linecap: round;
}
.dj-fade:active .dj-fade-fill,
.dj-fade:focus-visible .dj-fade-fill {
    stroke: #a9dbef;
}

.dj-fade-val {
    fill: #ffffff;
    font-size: 22px;
    font-weight: 700;
}

.dj-fade-unit {
    fill: #aaaaaa;
    font-size: 11px;
    font-weight: 400;
}

.dj-fade-name {
    font-size: 0.7rem;
    font-weight: 600;
    color: #7ec8e3;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* While a kitten pre-roll countdown is running, the arc drains in a distinct
   kitten-pink with a soft pulse (the draining itself is driven from JS). */
.dj-fade.counting .dj-fade-fill {
    stroke: #e86ab0;
    animation: dj-fade-countdown-pulse 1s ease-in-out infinite;
}
.dj-fade.counting .dj-fade-val { fill: #e86ab0; }
@keyframes dj-fade-countdown-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
}

/* ── Track row ───────────────────────────────────────────────── */
.dj-track {
    background: #2a2a2a;
    border: 1px solid #3a3a3a;
    border-radius: 8px;
    padding: 10px 10px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.dj-track:hover { background: #303030; }
.dj-track:active { background: #353535; }

.dj-track.playing {
    border-color: #d4af37;
    background: #2e2b1f;
    box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.15);
}

.dj-track-crew { opacity: 0.85; }

.tune-track { padding: 8px 10px; }

.track-missing {
    opacity: 0.5;
    cursor: default;
}
.track-missing:hover { background: #2a2a2a; }

.act-num {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    background: #3a3a3a;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 700;
    color: #d4af37;
    margin-top: 1px;
}
.crew-num {
    font-size: 0.85rem;
    background: #2d2d2d;
    color: #888;
}

.track-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    margin-top: 1px;
}

.track-avatars {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px;
    margin-top: 1px;
    /* cap width so groups of performers wrap (~3 across) */
    max-width: 128px;
}
.track-avatars .performer-avatar {
    width: 40px;
    height: 40px;
    border-radius: 6px;
}

.track-info { flex: 1; min-width: 0; }

.track-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #f5f5f5;
    line-height: 1.2;
}

.track-sub {
    font-size: 0.82rem;
    color: #bbb;
    margin-top: 2px;
    line-height: 1.3;
}

.track-cue {
    font-size: 1.2rem;
    color: #d4af37;
    margin-top: 4px;
    font-style: italic;
}

.track-notes {
    font-size: 0.8rem;
    color: #aaa;
    border-left: 2px solid #3a3a3a;
    padding-left: 8px;
    margin-top: 6px;
    line-height: 1.4;
}
.track-emcee  { border-left-color: #d4af37; color: #d8d2bf; }
.track-kitten { border-left-color: #c87fb8; color: #dcc4d6; }

.external-tag { color: #d4af37; }

.track-badges {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    padding-top: 2px;
}

.badge-complex {
    color: #ff6b6b;
    font-size: 1rem;
    line-height: 1;
    cursor: default;
}

/* Pulsing "now playing" dot */
.now-playing-dot {
    display: none;
    width: 10px;
    height: 10px;
    background: #d4af37;
    border-radius: 50%;
    animation: pulse 1.4s ease-in-out infinite;
    flex-shrink: 0;
    margin-top: 8px;
}
.dj-track.playing .now-playing-dot { display: block; }
@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.4; transform: scale(0.75); }
}

/* ── Sticky bottom player ────────────────────────────────────── */
.dj-player {
    position: sticky;
    bottom: 0;
    z-index: 100;
    background: #2d2d2d;
    border-top: 3px solid #d4af37;
    padding: 10px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.4);
}

.player-now { min-width: 0; }

.player-now-label {
    color: #888;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.player-now-title {
    color: #d4af37;
    font-size: 1rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

.player-now-sub {
    color: #bbb;
    font-size: 0.82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#dj-audio {
    width: 100%;
    height: 40px;
}

/* ── Waveform ─────────────────────────────────────────────────── */
.dj-wave-wrap {
    position: relative;
    width: 100%;
    height: 64px;
    display: none;
    border-radius: 6px;
    overflow: hidden;
    background: #262626;
    touch-action: none;
    cursor: pointer;
    /* Picking a cue pin up is a long press, which is also how both mobile
       platforms ask for a selection callout. Without these the platform's own
       menu opens on top of the pin you just grabbed. */
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}
.dj-wave-wrap.active { display: block; }

/* A class, not an id: act cards render one waveform per card, so this element
   is duplicated many times on the home and show detail pages. */
.dj-waveform {
    display: block;
    width: 100%;
    height: 100%;
}

/* While the shared fetch is in flight the player has no source yet, so the
   controls are dimmed and the status text carries the explanation. A play
   pressed in this window is remembered, not lost. */
.dj-wave-wrap.loading { cursor: progress; }
.act-player.is-loading audio { opacity: 0.5; pointer-events: none; }

/* ── Cue pins ─────────────────────────────────────────────────
   Indicators only: not tappable, not hoverable. A 44px touch target cannot
   fit on a 64px waveform without fighting the scrub-to-seek gesture, and the
   read surface is a phone in a dark room where a hover tooltip is useless.
   The text you actually read is in the rail below.

   A pin has to stay legible over BOTH the unplayed bars (#5a5347) and the
   played ones (#d4af37) — the first attempt reused those exact values and the
   markers were invisible against the waveform they sat on. So: a light gold
   line with a dark outline, which reads on either, plus a solid tab at the top
   edge. The tab is what distinguishes a cue from the playhead, which is the
   same colour but a plain bar — shape carries the meaning, not colour. */
.dj-cue-pins {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.dj-cue-pins[hidden] { display: none; }

.dj-cue-pin {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    margin-left: -1px;
    background: rgba(245, 215, 110, 0.55);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55);
    pointer-events: none;
}

/* The marker tab — 7px square at the top edge, the bit your eye catches. */
.dj-cue-pin::before {
    content: '';
    position: absolute;
    top: 0;
    left: -3px;
    width: 8px;
    height: 6px;
    background: rgba(245, 215, 110, 0.75);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55);
}

.dj-cue-pin.passed,
.dj-cue-pin.passed::before { background: #f5d76e; }

.dj-cue-pin.active {
    background: #f5d76e;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), 0 0 6px #f5d76e;
}
.dj-cue-pin.active::before {
    background: #fff3c4;
    height: 9px;
}

/* ── Draggable pins ───────────────────────────────────────────
   Only on the authoring surfaces, and only for pins the viewer may edit.

   A pin is still not a touch target — it is picked up by pressing and holding
   anywhere within ~22px of it, which is hit-tested in JS. That is what lets a
   2px marker and a full-width scrub gesture live on the same 64px strip: they
   are told apart by the shape of the gesture, not by where it lands. So the
   only job of the styling below is to say "this one moves" and, once it is
   moving, to make the pin unmistakable against nineteen others. */
.dj-cue-pin.draggable::before {
    /* A slightly taller tab: enough to read as a handle, not enough to be
       mistaken for the active-cue state, which is a different colour. */
    height: 9px;
    border-radius: 0 0 2px 2px;
}

.dj-wave-wrap.over-pin { cursor: grab; }
.dj-wave-wrap.cue-dragging { cursor: grabbing; }

/* Everything except the pin in hand recedes, so a dense cue sheet does not
   swallow the one marker that is moving. */
.dj-wave-wrap.cue-dragging .dj-cue-pin { opacity: 0.3; }

.dj-cue-pin.grabbed,
.dj-wave-wrap.cue-dragging .dj-cue-pin.grabbed {
    opacity: 1;
    width: 4px;
    margin-left: -2px;
    background: #fff3c4;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7), 0 0 10px rgba(245, 215, 110, 0.9);
}
.dj-cue-pin.grabbed::before {
    left: -5px;
    width: 14px;
    height: 12px;
    background: #fff3c4;
}

/* The live timecode, following the pin. Nothing else on the waveform reports a
   number, and without one a fine drag has no feedback at all — the pin moves
   less than a pixel per frame by design. */
.dj-cue-drag-readout {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 4px 9px;
    border-radius: 4px;
    background: rgba(20, 20, 20, 0.92);
    border: 1px solid #f5d76e;
    color: #fff3c4;
    font-size: 0.85em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    pointer-events: none;
    z-index: 2;
}
.dj-cue-drag-readout[hidden] { display: none; }

/* ── Cue rail ─────────────────────────────────────────────────
   The primary read surface. Fixed height and always present once the loaded
   track has cues, so the player never reflows mid-show. */
.dj-cue-rail {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 4px 8px;
    border-radius: 6px;
    background-color: #262626;
    font-size: 0.85rem;
    line-height: 1.3;

    /* The countdown IS the row. A gold wash sized by --cue-fill, which JS
       repaints every animation frame — no CSS transition, or it would lag the
       rAF updates and fight every seek and scrub. The text rides on top of it,
       so the rail reads at a glance in a dark room without parsing the number. */
    background-image: linear-gradient(
        to right, rgba(212, 175, 55, 0.30), rgba(212, 175, 55, 0.30)
    );
    background-repeat: no-repeat;
    background-size: var(--cue-fill, 0%) 100%;
    background-position: left center;
}
.dj-cue-rail[hidden] { display: none; }

/* Anchoring the fill to the right is what makes the hold *wipe*: the width
   shrinks from 100% to 0 while the right edge stays put, so the gold retreats
   from the left and off to the right. Approaching (left-anchored) it grows the
   same direction it later empties, which reads as one continuous motion. */
.dj-cue-rail.active { background-position: right center; }

/* The landing flash gets its own layer rather than animating the row's
   background-color. At the instant a cue fires the fill is at its fullest, so
   a gold flash on the background was gold-on-gold — the animation ran and
   there was nothing to see. An overlay is unaffected by whatever the fill is
   doing underneath it. */
.dj-cue-rail::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: #f5d76e;
    opacity: 0;
    pointer-events: none;
    z-index: 0;
}

/* Text above the flash, so it stays readable while the row lights up. */
.dj-cue-rail > * { position: relative; z-index: 1; }

.dj-cue-rail-icon {
    font-size: 1.05rem;
    flex-shrink: 0;
    color: #888;
}

.dj-cue-rail-time {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    color: #888;
}

.dj-cue-rail-body {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #888;
}

.dj-cue-rail-lead {
    flex-shrink: 0;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* A cue that is about to fire is not secondary content, so it steps out of
   the #888–#999 dim range that DESIGN.md reserves for that. */
.dj-cue-rail.lookahead .dj-cue-rail-body,
.dj-cue-rail.lookahead .dj-cue-rail-time,
.dj-cue-rail.lookahead .dj-cue-rail-icon,
.dj-cue-rail.lookahead .dj-cue-rail-lead { color: #ccc; }

/* A cue that has fired is live instruction, so it reads at the same weight as
   one counting in. The moment it lands is carried by the blink below rather
   than by a colour it then sits in — a permanent colour change is invisible if
   you were not looking at the instant it happened, and indistinguishable from
   the next cue's once it settles. */
.dj-cue-rail.active .dj-cue-rail-body,
.dj-cue-rail.active .dj-cue-rail-time,
.dj-cue-rail.active .dj-cue-rail-icon { color: #ccc; }

/* The landing: three hard blinks, the row and the text inverting together, so
   it reads as one flash rather than two effects. Both hang off .firing at the
   same duration and step count, and JS re-triggers the class with a forced
   reflow, so they always start in step. */
.dj-cue-rail.firing::after { animation: cue-flash 0.25s steps(1, end) 3; }

.dj-cue-rail.firing .dj-cue-rail-body,
.dj-cue-rail.firing .dj-cue-rail-time,
.dj-cue-rail.firing .dj-cue-rail-icon {
    animation: cue-text-blink 0.25s steps(1, end) 3;
}

/* steps(1, end) makes these hard on/off blinks rather than fades — this has to
   catch the eye of someone looking at a lighting board, not at the screen.
   The text goes dark exactly while the gold is up, so each blink is a full
   inversion: dark-on-gold, then light-on-dark. */
@keyframes cue-flash {
    0%  { opacity: 0.6; }
    50% { opacity: 0; }
}
@keyframes cue-text-blink {
    0%  { color: #1a1a1a; }
    50% { color: #ccc; }
}

@media (prefers-reduced-motion: reduce) {
    .dj-cue-rail.firing::after,
    .dj-cue-rail.firing .dj-cue-rail-body,
    .dj-cue-rail.firing .dj-cue-rail-time,
    .dj-cue-rail.firing .dj-cue-rail-icon { animation: none; }
}

/* ── Cue list ─────────────────────────────────────────────────
   The disclosure below the transport. `summary` already carries the 44px
   minimum and the chevron comes from CSS — don't add one. */
.dj-cue-list[hidden] { display: none; }

.dj-cue-list > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 4px;
    cursor: pointer;
    color: #d4af37;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    list-style: none;
}
.dj-cue-list > summary::-webkit-details-marker { display: none; }
.dj-cue-list > summary .material-icons { font-size: 1rem; }

.dj-cue-list-rows {
    max-height: 34vh;
    overflow-y: auto;
}

.dj-cue-row {
    display: flex;
    align-items: stretch;
    gap: 4px;
    border-top: 1px solid #333;
}

.dj-cue-row-seek {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 6px 4px;
    background: none;
    border: none;
    color: #f5f5f5;
    font-family: inherit;
    font-size: 0.85rem;
    text-align: left;
    cursor: pointer;
}
.dj-cue-row-seek:hover { background: #303030; }

.dj-cue-row-time {
    color: #d4af37;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.dj-cue-row-icon { font-size: 1rem; color: #888; flex-shrink: 0; }
.dj-cue-row-body {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dj-cue-row-author { color: #888; font-size: 0.78rem; flex-shrink: 0; }

.dj-cue-row-edit {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #888;
    cursor: pointer;
    flex-shrink: 0;
}
.dj-cue-row-edit:hover { color: #d4af37; }

/* Hide/show cues. Lives in the summary row, which already carries the 44px
   minimum, and stays reachable while cues are hidden — it is the way back. */
.dj-cue-toggle {
    margin-left: auto;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #888;
    cursor: pointer;
    flex-shrink: 0;
}
.dj-cue-toggle:hover { color: #d4af37; }
.dj-cue-toggle[aria-pressed="true"] {
    color: #d4af37;
    border-color: #555;
}

/* With the toggle taking the auto margin, Add sits next to it. */
.dj-cue-toggle + .dj-cue-add { margin-left: 0; }

.dj-cue-add {
    margin-left: auto;
    min-height: 44px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: 1px solid #555;
    border-radius: 4px;
    color: #ccc;
    font-family: inherit;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
}
.dj-cue-add:hover { border-color: #d4af37; color: #d4af37; }
.dj-cue-add[hidden] { display: none; }

/* Lineup badge — which acts are annotated, visible while scrolling. */
.badge-cues {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: #888;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
}
.badge-cues .material-icons { font-size: 0.95rem; }

.dj-wave-status {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.72rem;
    color: #999;
    letter-spacing: 0.03em;
    pointer-events: none;
    white-space: nowrap;
}

/* ── Responsive tweaks ───────────────────────────────────────── */
@media (min-width: 600px) {
    .dj-lineup { padding: 10px 12px 0; }
    .dj-track { padding: 12px 12px; }
    .track-title { font-size: 1.05rem; }
    .track-sub { font-size: 0.85rem; }
}

audio {
    accent-color: #d4af37;
    color-scheme: dark;
}

/* ── Position marker ─────────────────────────────────────────── */
.act-position-marker {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 6px;
    pointer-events: none;
    flex-shrink: 0;
}
.act-position-marker::before,
.act-position-marker::after {
    content: '';
    flex: 1;
    height: 2px;
    background: rgba(212, 175, 55, 0.35);
    border-radius: 1px;
}
.act-position-label {
    font-size: 0.6rem;
    color: rgba(212, 175, 55, 0.55);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    white-space: nowrap;
    flex-shrink: 0;
}