@charset "UTF-8";
/* ============================================================
   familyVO Demo Player — player.css
   Per PLAYER_Build_Instructions.docx + StartHere brand tokens
   ============================================================ */

:root {
    /* Player tokens — overridable */
    --player-min-width:    260px;
    --player-max-width:    none;       /* build #7: was 360px — was capping the player at 360px even when its column was 600px+ wide */
    --waveform-bg:         #d8e4ee;
    --waveform-played:     #f3531b;
    --waveform-unplayed:   #aedaf1;
    --waveform-marker:     #d52b1e;       /* tall RED marker line for char markers */
    --player-bg:           #ffffff;
    --player-text:         #1a1a2e;
    --player-accent:       #f3531b;
    --player-muted:        #8e96a4;
    --player-border:       #d8e4ee;
    --player-highlight:    rgba(243,83,27,.10);
    --video-thumb-width:   161px;   /* build #5: 30% smaller (was 230px) */
    --video-thumb-height:  91px;    /* build #5: 30% smaller (was 130px) */
    --volume-floor:        0.20;
}

/* ----------- WRAPPER --------------------------------------- */
.demo-player {
    width: 100%;
    min-width: var(--player-min-width);
    max-width: var(--player-max-width);
    background: var(--player-bg);
    border: 1px solid var(--player-border);
    border-radius: 23px;                 /* Round 55: +5px from 18px */
    box-shadow: 0 6px 22px rgba(0,0,0,.08);
    color: var(--player-text);
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    overflow: hidden;
    position: relative;
}

/* ----------- TRANSPORT ------------------------------------- */
.dp-transport {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: linear-gradient(180deg, #fafdff, #eef5fb);
    border-bottom: 1px solid var(--player-border);
}
.dp-btn {
    background: var(--player-accent);
    border: none;
    border-radius: 50%;
    width: 38px; height: 38px;
    color: #fff;
    cursor: pointer;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    transition: transform .12s, box-shadow .12s;
    padding: 0;
}
.dp-btn:hover { transform: scale(1.07); box-shadow: 0 4px 10px rgba(243,83,27,.4); }
.dp-btn--secondary {
    background: #fff;
    color: var(--player-accent);
    border: 2px solid var(--player-accent);
    width: 32px; height: 32px;
    flex: 0 0 32px;
    font-size: .9rem;
}
.dp-time {
    font-family: 'Courier New', monospace;
    font-size: .85rem;
    color: var(--player-muted);
    min-width: 78px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.dp-volume {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    flex: 0 0 auto;
}
.dp-volume__icon { font-size: 1rem; color: var(--player-muted); }
.dp-volume input[type=range] {
    -webkit-appearance: none;
    appearance: none;
    width: 70px;
    height: 4px;
    border-radius: 4px;
    background: var(--player-border);
    outline: none;
    cursor: pointer;
}
.dp-volume input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--player-accent);
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
    cursor: pointer;
}
.dp-volume input[type=range]::-moz-range-thumb {
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--player-accent);
    border: 2px solid #fff;
    cursor: pointer;
}

/* Hidden until video mode */
.dp-btn--video-only { display: none; }
.demo-player.is-video .dp-btn--video-only { display: inline-flex; }

/* ----------- WAVEFORM CANVAS ------------------------------- */
.dp-waveform-wrap {
    position: relative;
    background: #fff;
    padding: 10px 12px;
    border-bottom: 1px solid var(--player-border);
}
.dp-waveform {
    width: 100%;
    height: 56px;
    display: block;
    cursor: pointer;
    touch-action: none;
}

/* ----------- VIDEO AREA ------------------------------------ */
.dp-video-wrap {
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s ease-in-out;
    background: #000;
    position: relative;          /* anchor for the fullscreen overlay button */
}
.demo-player.is-video .dp-video-wrap,
.dp-video-wrap.is-video {
    /* build #11: also reveal when class is on the wrap itself, since the
       wrap may now live OUTSIDE the .demo-player (relocated to column 2). */
    max-height: 260px;
}
.dp-video {
    width: 100%;
    aspect-ratio: 16/9;
    display: block;
    background: #000;
}

/* Round 12: fullscreen button overlaid on the slide-down video screen
   (same style as .md-fs-btn on the main demo). Hidden until video plays. */
.dp-video-fs-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    display: none;               /* shown when .is-video on the wrap */
    align-items: center;
    justify-content: center;
    transition: background .15s;
    z-index: 3;
}
.dp-video-fs-btn:hover { background: rgba(0, 0, 0, 0.85); }
.demo-player.is-video .dp-video-fs-btn,
.dp-video-wrap.is-video .dp-video-fs-btn { display: flex; }

/* ----------- PLAYLIST -------------------------------------- */
.dp-playlist {
    list-style: none;
    margin: 0;
    padding: 6px 0 6px 10px;            /* build #12: indent 10px from the player border */
    /* Round 15: was 380px — too short on actor pages, list got cut.
       Allow the playlist to expand fully so all demos are visible. */
    max-height: 1200px;
    overflow-y: auto;
}
.dp-playlist::-webkit-scrollbar { width: 6px; }
.dp-playlist::-webkit-scrollbar-thumb { background: var(--player-border); border-radius: 4px; }

.dp-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--player-border);
    cursor: pointer;
    transition: background .12s;
}
.dp-row:last-child { border-bottom: none; }
.dp-row:hover { background: #f7fbfe; }
.dp-row.is-playing {
    background: var(--player-highlight);
    border-left: 3px solid var(--player-accent);
    padding-left: 9px;
}

.dp-row__play {
    background: transparent;
    border: 2px solid var(--player-accent);
    color: var(--player-accent);
    border-radius: 50%;
    width: 28px; height: 28px;
    flex: 0 0 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: .75rem;
    padding: 0;
}
.dp-row.is-playing .dp-row__play {
    background: var(--player-accent);
    color: #fff;
}

.dp-row__title {
    flex: 1 1 auto;
    font-size: .9rem;
    color: var(--player-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dp-row__downloads {
    display: flex;
    gap: 4px;
    flex: 0 0 auto;
}
.dp-dl {
    background: #fff;
    border: 1px solid var(--player-border);
    border-radius: 6px;
    /* round 3: match play button height (28px) for easier touch tap */
    height: 28px;
    min-width: 36px;
    padding: 0 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .68rem;
    font-weight: 700;
    color: var(--player-muted);
    cursor: pointer;
    transition: all .12s;
    text-decoration: none;
    line-height: 1;
    white-space: nowrap;
    box-sizing: border-box;
}
.dp-dl:hover {
    background: var(--player-accent);
    color: #fff;
    border-color: var(--player-accent);
    text-decoration: none;
}
.dp-dl.is-disabled,
.dp-dl[aria-disabled="true"] {
    opacity: .35;
    cursor: not-allowed;
    pointer-events: none;
}

/* Video row layout */
.dp-row--video { flex-wrap: wrap; flex-direction: column; align-items: stretch; gap: 6px; padding: 10px 12px; }
.dp-row--video .dp-row__top {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}
.dp-row--video .dp-row__thumb {
    width: var(--video-thumb-width);
    height: var(--video-thumb-height);
    max-width: 100%;
    margin: 0 auto;
    object-fit: cover;
    border-radius: 6px;
    background: #1a1a1a;
    cursor: pointer;
    display: block;
}
.dp-row--video .dp-row__thumb-wrap {
    position: relative;
    width: var(--video-thumb-width);
    height: var(--video-thumb-height);
    max-width: 100%;
    margin: 0 auto;
}
.dp-row--video .dp-row__thumb-wrap::after {
    content: '▶';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,.7);
    font-size: 2.2rem;
    pointer-events: none;
    opacity: .85;
}

/* Limit reached message */
.dp-limit-msg {
    display: none;
    padding: 8px 12px;
    background: #fff5eb;
    color: var(--player-accent);
    border-top: 1px solid var(--player-border);
    font-size: .82rem;
    text-align: center;
}
.demo-player.is-limited .dp-limit-msg { display: block; }

/* ----------- FULLSCREEN MODAL ------------------------------ */
.dp-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.92);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
}
.dp-modal.is-open { display: flex; }
.dp-modal__video {
    width: 80vw;
    max-width: 1200px;
    aspect-ratio: 16/9;
    background: #000;
}
.dp-modal__close {
    position: absolute;
    top: 18px;
    right: 22px;
    background: rgba(255,255,255,.15);
    border: none;
    color: #fff;
    font-size: 1.6rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    line-height: 1;
}
.dp-modal__close:hover { background: rgba(255,255,255,.3); }

/* Player on mobile expand a bit */
@media (max-width: 760px) {
    .demo-player {
        max-width: 100%;
        margin: 0 auto;
    }
    .dp-row--video .dp-row__thumb,
    .dp-row--video .dp-row__thumb-wrap {
        width: 100%;
        max-width: 360px;
        height: auto;
        aspect-ratio: 230/130;
    }
}

/* ============================================================
   v3 ADDITIONS — Play All, category icons, MP3+WAV download icons,
   blue-accent waveform, larger flex height, marker click
   ============================================================ */

/* Player container — flex height, no fixed cap
   build #11: removed `padding: 18px 20px 20px` so the orange dp-header
   sits flush against the 4px blue outline of the .demo-player container.
   No internal padding means the header reaches edge-to-edge. */
.demo-player {
    height: auto;
    min-height: 0;
    max-height: none;
    padding: 0;
    overflow: visible;
    width: 100%;
    border: 2px solid var(--c-blue-light, #aedaf1);
    border-radius: 23px;                 /* Round 55: +5px from 18px */
    background: #fff;
    box-shadow: 0 4px 20px rgba(0,0,0,.06);
}

/* Blue accents (NOT orange) */
.demo-player .dp-btn--play {
    background: #0e4ccc;
    color: #fff;
    /* build #4: rounded RECTANGLE (not circle) */
    border-radius: 10px;
    width: 56px;
    height: 38px;
    flex: 0 0 56px;
    font-size: 1.1rem;
}
.demo-player .dp-btn--play.is-playing { background: #0a3aa8; }
.demo-player .dp-btn--restart {
    background: #fff;
    color: #0e4ccc;
    border: 2px solid #aedaf1;
}
.demo-player .dp-row.is-playing {
    background: rgba(174,218,241,0.35);
    border-left: 3px solid #0e4ccc;
}

/* build #4: Play-All button row (below waveform) */
.dp-playall-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;                      /* Round 19: space between prev/playall/next */
    padding: 10px 12px 4px;
    background: #fff;
}
.dp-playall-row .dp-btn--playall {
    margin: 0;                    /* override the margin-left:auto from transport context */
}

/* Round 19 — Prev/Next track buttons that flank the Play All button.
   Mirrors the Play All pill style but compact (icon-only). */
.dp-playall-row .dp-btn--prev,
.dp-playall-row .dp-btn--next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 38px;
    padding: 0;
    border-radius: 8px;
    border: 2px solid #0e4ccc;
    background: #fff;
    color: #0e4ccc;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    flex: 0 0 auto;
    transition: background .14s ease, color .14s ease, transform .12s ease;
}
.dp-playall-row .dp-btn--prev:hover,
.dp-playall-row .dp-btn--next:hover {
    background: #0e4ccc;
    color: #fff;
    transform: translateY(-1px);
}
.dp-playall-row .dp-btn--prev:focus-visible,
.dp-playall-row .dp-btn--next:focus-visible {
    outline: 2px solid #f3531b;
    outline-offset: 2px;
}
@media (max-width: 760px) {
    .dp-playall-row {
        gap: 6px;
    }
    .dp-playall-row .dp-btn--prev,
    .dp-playall-row .dp-btn--next {
        width: 40px;
        height: 36px;
        font-size: 1rem;
    }
}
/* Round 14: ensure Play-All button is a rounded RECTANGLE on all screens.
   Without this, the generic .dp-btn rule (border-radius:50%, fixed 38×38)
   wins over .dp-btn--playall from site.css due to source order, making
   the button render as an orange/blue circle on mobile.
   Round 20: also FORCE white text — the .dp-btn--secondary class on the
   same button sets color to var(--player-accent) (orange), which made the
   text disappear when the active background turns orange (is-playall). */
.demo-player .dp-btn--playall,
.dp-playall-row .dp-btn--playall {
    border-radius: 8px !important;
    width: auto !important;
    height: auto !important;
    flex: 0 0 auto !important;
    padding: 10px 20px;
    min-width: 0;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
    color: #fff !important;
    border: none !important;
}
.demo-player .dp-btn--playall:hover,
.dp-playall-row .dp-btn--playall:hover { color: #fff !important; }
@media (max-width: 760px) {
    .demo-player .dp-btn--playall,
    .dp-playall-row .dp-btn--playall {
        padding: 9px 16px;
        font-size: 0.86rem;
    }
}

/* Per-row category icon */
.dp-row__cat-icon {
    display: inline-block;
    width: 24px;
    text-align: center;
    margin-right: 6px;
    font-size: 1.05rem;
    color: #0e4ccc;
}

/* Download icons on rows */
.dp-row__downloads {
    display: inline-flex;
    gap: 6px;
    margin-left: auto;
    align-items: center;
}
.dp-dl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    /* Round 12: taller download buttons for easier touch tap (was 24px) */
    height: 32px;
    min-width: 50px;
    padding: 0 11px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    line-height: 1;
    box-sizing: border-box;
}
.dp-dl__icon { font-size: 0.85rem; }
.dp-dl__label { letter-spacing: 0.5px; }
.dp-dl--mp3 { background: #0e4ccc; }
.dp-dl--wav { background: #aedaf1; color: #0e4ccc; }
.dp-dl--mp4 { background: #2a2a2a; }
.dp-dl:hover { opacity: 0.85; text-decoration: none; }

/* Playlist row tweaks */
.dp-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    list-style: none;
    margin: 0;
    border-left: 3px solid transparent;
}
.dp-row:hover { background: rgba(174,218,241,0.18); }
.dp-row__title {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.92rem;
}
.dp-row__play {
    /* build #5: rounded rectangle (was circle) */
    width: 36px;
    height: 24px;
    flex: 0 0 36px;
    border-radius: 6px;
    background: transparent;
    border: 2px solid #0e4ccc;
    color: #0e4ccc;
    font-size: 0.78rem;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}
.dp-row.is-playing .dp-row__play {
    background: #0e4ccc;
    color: #fff;
}
.dp-row__thumb-wrap {
    /* build #5: video thumbs reduced 30% (86×50 → 60×35) */
    width: 60px;
    height: 35px;
    border-radius: 6px;
    overflow: hidden;
    flex: 0 0 auto;
    background: #e8eef6;
    position: relative;
}
.dp-row__thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.dp-row__thumb-wrap::after {
    content: '▶';
    position: absolute;
    inset: 0;
    color: #fff;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: 0 1px 4px rgba(0,0,0,.5);
    opacity: 0.85;
}

/* Mobile: stack downloads under title */
@media (max-width: 600px) {
    .dp-row { flex-wrap: wrap; }
    .dp-row__downloads { margin-left: 32px; flex-basis: 100%; }
}

/* ============================================================
   build #16: MAIN DEMO WIDGET (column 2, .voiceprofile-section)
   Self-contained video widget independent from the audio player.
   ------------------------------------------------------------ */
.main-demo {
    margin-top: 12px;
    background: var(--player-bg, #f5faff);
    border: 1px solid var(--player-border, #d6e4f5);
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.main-demo.is-empty {
    opacity: 0.5;
    pointer-events: none;
}
.md-video-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    background: #000;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
}
.md-video {
    width: 100%;
    height: 100%;
    display: block;
    background: #000;
}
.md-fs-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 4px;
    background: rgba(0,0,0,0.55);
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
    z-index: 2;
}
.md-fs-btn:hover { background: rgba(0,0,0,0.85); }

.md-transport {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.md-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--player-border, #d6e4f5);
    background: #fff;
    color: var(--player-accent, #0e4ccc);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .12s, transform .12s;
}
.md-btn:hover { background: var(--player-highlight, #eaf2ff); }
.md-btn:active { transform: scale(0.94); }
.md-btn--play {
    background: var(--player-accent, #0e4ccc);
    color: #fff;
    border-color: var(--player-accent, #0e4ccc);
}
.md-btn--play:hover { background: #0a3aa3; }

.md-time {
    font-family: monospace;
    font-size: 0.78rem;
    color: var(--c-muted, #5a6b85);
    min-width: 80px;
    flex-shrink: 0;
}
.md-volume {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}
.md-volume__icon { font-size: 0.9rem; }
.md-volume input[type=range] {
    width: 70px;
    cursor: pointer;
}

.md-progress-wrap {
    width: 100%;
}
.md-progress {
    width: 100%;
    height: 6px;
    background: var(--player-border, #d6e4f5);
    border-radius: 3px;
    cursor: pointer;
    overflow: hidden;
}
.md-progress__bar {
    height: 100%;
    width: 0%;
    background: var(--player-accent, #0e4ccc);
    transition: width 0.1s linear;
    border-radius: 3px;
}

/* Mobile tightening */
@media (max-width: 600px) {
    .md-transport { gap: 6px; }
    .md-volume input[type=range] { width: 60px; }
    .md-time { min-width: 70px; font-size: 0.72rem; }
}

/* ===================================================================
   build #17 — Specialty mode: actor name pill on each playlist row
   In specialty mode, the player gathers demos from many actors. Each
   row shows the actor's first name in a small colored pill, plus a
   colored left border so the eye groups by actor at a glance.
   =================================================================== */
.dp-row--has-actor {
    border-left: 4px solid var(--actor-color, #0e4ccc);
    padding-left: 10px;
}
.dp-row--has-actor.is-playing {
    border-left-width: 5px;
    padding-left: 9px;
}
.dp-row__actor {
    --actor-color: #0e4ccc;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    margin-left: 6px;
    background: var(--actor-color);
    color: #fff;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.02em;
    white-space: nowrap;
    box-shadow: 0 1px 0 rgba(0,0,0,0.08);
}

/* ===================================================================
   build #17 — Color-coded actor icons on the face-strip
   Round 44: RESTORED the 3px colored ring + drop shadow on
   face-area portraits. Selection cue is both the orange name label
   AND the colored ring around the portrait.
   =================================================================== */
/* Round 45: removed colored outline from face-strip portraits.
   The colored outline is for player actor icons only, NOT the face area.
.face-actor[data-actor-color] .face-actor__img,
.face-actor.has-actor-color .face-actor__img {
    box-shadow:
        0 0 0 3px var(--actor-color, transparent),
        0 4px 14px rgba(0,0,0,0.12);
}
*/

/* ===================================================================
   Build #17 feedback round 1 — Specialty player row redesign
   New layout: [round actor icon photo] [Actor Name pill] [▶] [title]
   Replaces emoji category icons with the actor's circular photo.
   =================================================================== */

/* Round actor icon photo (replaces .dp-row__cat-icon emoji) */
.dp-row__actor-icon{
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    background: #e8eef6;
    box-shadow:
        0 0 0 2px var(--actor-color, #0e4ccc),
        0 1px 3px rgba(0,0,0,0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 4px;
}
.dp-row__actor-icon img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Override: in specialty mode, the actor name pill comes BEFORE the
   play button, sitting right next to the icon photo. */
.dp-row--has-actor .dp-row__actor{
    margin-left: 0;
    margin-right: 6px;
    flex: 0 0 auto;
    min-width: 64px;
    justify-content: center;
    /* Slightly larger so the name reads cleanly next to the photo */
    padding: 3px 12px;
    font-size: 0.74rem;
}

/* In specialty mode, the play button comes AFTER the pill, before title.
   Default flex order is fine — DOM order already places it third now.
   We only need to make sure the title can still flex-grow and ellipsis. */
.dp-row--has-actor .dp-row__play{
    margin-left: 4px;
}
.dp-row--has-actor .dp-row__title{
    flex: 1 1 auto;
    min-width: 0;
}

/* Tighten the colored left-border now that the icon already shows
   actor identity — keep it as a subtle accent, not a thick stripe. */
.dp-row--has-actor{
    border-left-width: 3px;
}

/* Mobile: stack pill below the play row when very narrow */
@media (max-width: 480px){
    .dp-row--has-actor .dp-row__actor{
        font-size: 0.68rem;
        min-width: 0;
        padding: 2px 8px;
    }
    .dp-row__actor-icon{
        flex: 0 0 30px;
        width: 30px;
        height: 30px;
    }
}

/* ===================================================================
   Build #17 feedback round 1 — In-player specialty pulldown
   Lives inside the .dp-header so users can switch specialties without
   scrolling back up to the strip.
   =================================================================== */
.dp-header{
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.dp-header .dp-actor-name{
    flex: 1 1 auto;
    min-width: 0;
    /* Round 56: Arial Narrow or similar narrow, readable, web-optimized font */
    font-family: 'Arial Narrow', Arial, Helvetica, sans-serif;
    font-weight: 700;
    letter-spacing: 0.01em;
}
.dp-specialty-switch{
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: #fff;
    margin-left: auto;
}
.dp-specialty-switch__lbl{
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: 0.7rem;
    color: #fff;
}
.dp-specialty-select{
    appearance: none;
    -webkit-appearance: none;
    background: #fff;
    border: 1.5px solid var(--player-accent, #0e4ccc);
    color: var(--player-accent, #0e4ccc);
    border-radius: 999px;
    padding: 5px 28px 5px 12px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--player-accent, #0e4ccc) 50%),
        linear-gradient(135deg, var(--player-accent, #0e4ccc) 50%, transparent 50%);
    background-position:
        calc(100% - 14px) 50%,
        calc(100% - 9px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    transition: background-color .15s, color .15s;
}
.dp-specialty-select:hover{
    background-color: var(--player-accent, #0e4ccc);
    color: #fff;
    background-image:
        linear-gradient(45deg, transparent 50%, #fff 50%),
        linear-gradient(135deg, #fff 50%, transparent 50%);
    background-position:
        calc(100% - 14px) 50%,
        calc(100% - 9px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}
.dp-specialty-select:focus{
    outline: 2px solid var(--player-accent, #0e4ccc);
    outline-offset: 2px;
}
@media (max-width: 480px){
    .dp-specialty-switch{
        flex: 1 1 100%;
        margin-left: 0;
        justify-content: flex-end;
    }
}

/* ============================================================
   ROUND 2 FEEDBACK — Mobile player rework (≤760px)
   - Move downloads to RIGHT of play button + title (already there
     in source order; reinforce on mobile)
   - Strip icons from download buttons
   - Make play & download buttons full row-height for easier tapping
   ============================================================ */
@media (max-width: 760px) {
    .demo-player .dp-row {
        align-items: stretch;                /* full height */
        padding: 0;
        min-height: 56px;
    }
    .demo-player .dp-row > .dp-row__actor-icon,
    .demo-player .dp-row > .dp-row__actor {
        align-self: center;
        margin-left: 8px;
    }
    .demo-player .dp-row__play {
        width: 56px;
        height: auto;
        align-self: stretch;
        flex: 0 0 56px;
        border-radius: 0;
        border: none;
        background: var(--player-accent, #0e4ccc);
        color: #fff;
        font-size: 1.05rem;
    }
    .demo-player .dp-row.is-playing .dp-row__play {
        background: #08329a;
    }
    .demo-player .dp-row__title {
        align-self: center;
        padding: 8px 6px;
    }
    .demo-player .dp-row__downloads {
        align-self: stretch;
        display: flex;
        flex-direction: row;
        gap: 0;
        margin-left: auto;
    }
    .demo-player .dp-dl {
        border: none;
        border-left: 1px solid var(--player-border, #e2e8f0);
        border-radius: 0;
        padding: 0 12px;
        font-size: 0.78rem;
        font-weight: 700;
        background: #f5f8fc;
        color: var(--player-text, #1c1c1c);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 48px;
    }
    .demo-player .dp-dl:hover,
    .demo-player .dp-dl:active {
        background: var(--player-accent, #0e4ccc);
        color: #fff;
    }
    /* Hide any embedded icon span/svg/img inside download buttons */
    .demo-player .dp-dl > svg,
    .demo-player .dp-dl > img,
    .demo-player .dp-dl > .dp-dl__icon {
        display: none !important;
    }
    /* Override the older small-screen rule that pushed downloads
       to a wrapped second row */
    @media (max-width: 600px) {
        .demo-player .dp-row { flex-wrap: nowrap !important; }
        .demo-player .dp-row__downloads {
            margin-left: auto !important;
            flex-basis: auto !important;
        }
    }
}

/* ==================================================================
   Round 18 — "Coming soon" placeholder row
   Demo rows flagged with comingSoon: greyed out, not clickable.
   ================================================================== */
.dp-row--coming-soon {
    opacity: 0.55;
    cursor: default !important;
    background: repeating-linear-gradient(
        45deg,
        transparent 0 6px,
        rgba(14, 76, 204, 0.04) 6px 12px
    );
}
.dp-row--coming-soon:hover {
    background: repeating-linear-gradient(
        45deg,
        transparent 0 6px,
        rgba(14, 76, 204, 0.04) 6px 12px
    );
}
.dp-row--coming-soon .dp-row__play {
    color: #9aa3b8 !important;
    pointer-events: none;
}
.dp-row--coming-soon .dp-row__title {
    font-style: italic;
    color: #6b7290;
}
.dp-row--coming-soon .dp-row__title::after {
    content: " ⏳";
    font-style: normal;
    margin-left: 4px;
}


/* Round 39 — visible Play All + clipped title corners */
.demo-player {
  overflow: hidden !important;
  border-radius: 18px !important;
}
.demo-player .dp-header {
  overflow: hidden !important;
  border-radius: 22px 22px 0 0 !important;   /* Round 55: +5px from 17px */
  /* Round 56: 5px gap between Demo title and play button */
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
/* Round 56: 5px gap between the play button and the Demo title.
   Header (title) bottom + Transport (play btn) top = 5px total. */
.demo-player .dp-transport {
  padding-top: 5px !important;
}
.demo-player .dp-btn--playall,
.dp-playall-row .dp-btn--playall {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #fff !important;
  color: var(--player-accent, #f3531b) !important;
  border: 2px solid var(--player-accent, #f3531b) !important;
  border-radius: 999px !important;
  opacity: 1 !important;
  visibility: visible !important;
  min-height: 32px !important;
  padding: 6px 12px !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 8px rgba(243,83,27,.16) !important;
}
.demo-player .dp-btn--playall:hover,
.dp-playall-row .dp-btn--playall:hover {
  background: var(--player-accent, #f3531b) !important;
  color: #fff !important;
}


/* ==================================================================
   Round 40 — demo-list clipping fix + actor-pill overlap
   ================================================================== */

/* Allow playlist horizontal gaps to flex to 0 so content never clips */
.demo-player .dp-playlist {
  overflow-x: hidden !important;
}
.dp-row {
  gap: 0 !important;
  min-width: 0 !important;
}
.dp-row__title {
  min-width: 0 !important;
  flex: 1 1 0% !important;
}
/* Flex the internal gaps between icon/pill/play/title/downloads to 0 minimum */
.dp-row > * {
  flex-shrink: 1 !important;
  min-width: 0 !important;
}
/* Keep the actor icon and play button from shrinking below their natural size */
.dp-row__actor-icon {
  flex: 0 0 36px !important;
  min-width: 36px !important;
}
.dp-row__play {
  flex: 0 0 36px !important;
  min-width: 36px !important;
}
.dp-row__downloads {
  flex: 0 0 auto !important;
  min-width: 0 !important;
}

/* Actor-pill merge: pill overlaps icon from the left; icon stays truly circular.
   Round 45: removed clip-path so icon is a perfect circle with 2px color ring. */
.dp-row--has-actor .dp-row__actor {
  margin-left: -4px !important;
  margin-right: 4px !important;
  border-radius: 0 999px 999px 0 !important;
  padding-left: 8px !important;
  z-index: 0 !important;
}
/* Keep the colored ring on the actor icon — truly round, no clipping */
.dp-row--has-actor .dp-row__actor-icon {
  box-shadow:
      0 0 0 2px var(--actor-color, #0e4ccc),
      0 1px 3px rgba(0,0,0,0.10) !important;
  border-right: none !important;
  position: relative !important;
  z-index: 1 !important;
  /* No clip-path — icon is a perfect circle */
}

/* Mobile adjustments for merged icon+pill */
@media (max-width: 480px) {
  .dp-row__actor-icon {
    flex: 0 0 30px !important;
    min-width: 30px !important;
  }
  .dp-row--has-actor .dp-row__actor {
    font-size: 0.68rem !important;
    padding: 2px 6px 2px 4px !important;
    margin-left: -3px !important;
  }
}

/* ==================================================================
   Round 46 — Player refinements
   ================================================================== */

/* <761px: Remove rounded corners from title area, full-width player */
@media (max-width: 760px) {
  .demo-player {
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
  }
  .demo-player .dp-header {
    border-radius: 0 !important;
  }
  .player-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .demo-player {
    width: 100% !important;
  }
  /* Round 46: remove left/right padding from parent containers so
     the player sits truly edge-to-edge on mobile. */
  .main-row-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .sp-col3 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* >760px: Increase corner radius by 2px (18→20) */
@media (min-width: 761px) {
  .demo-player {
    border-radius: 25px !important;       /* Round 55: +5px from 20px */
  }
  .demo-player .dp-header {
    border-radius: 24px 24px 0 0 !important;  /* Round 55: +5px from 19px */
  }
  .player-section .demo-player {
    border-radius: 21px !important;       /* Round 55: +5px from 16px */
  }
}

/* >760px: Demo list left margin 3px, right margin 3px */
@media (min-width: 761px) {
  .dp-playlist {
    padding-left: 3px !important;
    padding-right: 3px !important;
  }
  .dp-row__downloads {
    gap: 0 !important;    /* remove horizontal gap between mp3/wav */
    margin-right: 3px;
  }
}

/* Download icon: bracket with arrow pointing down into it */
.dp-dl__icon--download::before {
  content: "⤓";    /* arrow pointing down into bracket */
}

/* ===================================================================
   Round 55 — Container query: hide actor name pills when player < 300px
   When the player narrows below 300px, the actor name pills take up too
   much horizontal space. Hide them and remove the wav button right margin
   to give more room for play buttons and titles.
   =================================================================== */
.demo-player {
  container-type: inline-size;
  container-name: player;
}

@container player (max-width: 299px) {
  .dp-actor-name,
  .dp-row__actor {
    display: none !important;
  }
  .dp-dl--wav {
    margin-right: 0 !important;
  }
}

/* ==================================================================
   Round 58 — player font/gap correction
   ================================================================== */
.demo-player .dp-header .dp-actor-name {
  font-family: var(--font-h, 'Rise of Kingdom', Georgia, serif) !important;
  font-weight: 800 !important;
  letter-spacing: normal !important;
}

.demo-player .dp-row__title {
  font-family: 'Arial Narrow', 'Roboto Condensed', 'Liberation Sans Narrow', Arial, sans-serif !important;
  font-weight: 300 !important;
  margin-left: 5px !important;
}

.demo-player .dp-row {
  column-gap: 0 !important;
  gap: 0 !important;
}