/* ============================================================
   Stack and Value — Track 6 visual polish, part 2
   Sticky audio player bar (article pages only)

   Companion to sticky-player.js. The bar is injected by that
   script; it does not exist in any template, so this file only
   styles it when it appears.

   Layout rules:
   - position: fixed, shown/hidden with transform only. It
     overlays the bottom edge of the page and never adds,
     removes, or resizes page content, so showing or hiding it
     cannot shift the article.
   - All colors come from theme variables that dark-mode.css
     already overrides under prefers-color-scheme: dark.
   - Reduced motion: the slide-in is switched off entirely.
   ============================================================ */

.sv-sticky-player {
    position: fixed;
    left: 50%;
    bottom: 0;
    z-index: 5000;
    display: flex;
    align-items: center;
    gap: 12px;
    width: min(680px, calc(100% - 24px));
    padding: 10px 12px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    margin-bottom: 12px;
    color: var(--color-primary-text);
    background-color: var(--background-color);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    box-shadow: 0 12px 32px -8px rgb(0 0 0 / 0.3);
    transform: translate(-50%, 0);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.sv-sticky-player[hidden] {
    display: flex;
    visibility: hidden;
    opacity: 0;
    transform: translate(-50%, 130%);
    pointer-events: none;
}

/* Play / pause: a round accent button, big enough to tap. */
.sv-sticky-play {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    font-size: 1.8rem;
    line-height: 1;
    color: #fff;
    cursor: pointer;
    background-color: var(--ghost-accent-color, #16a34a);
    border: 0;
    border-radius: 50%;
}

.sv-sticky-play:hover {
    opacity: 0.9;
}

/* Title + voice line. The title truncates rather than wrapping
   the bar taller, so the bar keeps one fixed height. */
.sv-sticky-meta {
    flex: 1 1 auto;
    min-width: 0;
}

.sv-sticky-title {
    overflow: hidden;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sv-sticky-voice {
    font-size: 1.2rem;
    color: var(--color-secondary-text);
}

/* Resume prompt: shown instead of the seek row when the reader
   is picking up an episode they left partway through. */
.sv-sticky-resume {
    font-size: 1.3rem;
    color: var(--color-secondary-text);
}

.sv-sticky-resume strong {
    color: var(--color-primary-text);
}

/* Seek row: range slider plus time readout. accent-color gives
   the slider the site green in browsers that support it. */
.sv-sticky-seek {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-top: 2px;
}

.sv-sticky-range {
    flex: 1 1 auto;
    min-width: 80px;
    cursor: pointer;
    accent-color: var(--ghost-accent-color, #16a34a);
}

.sv-sticky-time {
    flex: 0 0 auto;
    font-size: 1.2rem;
    font-variant-numeric: tabular-nums;
    color: var(--color-secondary-text);
    white-space: nowrap;
}

/* Dismiss button: small, quiet, always visible so a reader can
   get the bar out of the way. Closing pauses playback (see
   sticky-player.js) so audio never keeps playing invisibly. */
.sv-sticky-close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    font-size: 1.8rem;
    line-height: 1;
    color: var(--color-secondary-text);
    cursor: pointer;
    background: transparent;
    border: 0;
    border-radius: 50%;
}

.sv-sticky-close:hover {
    color: var(--color-primary-text);
    background-color: var(--color-lighter-gray);
}

.sv-sticky-play:focus-visible,
.sv-sticky-close:focus-visible,
.sv-sticky-range:focus-visible {
    outline: 2px solid var(--ghost-accent-color, #16a34a);
    outline-offset: 3px;
}

/* Narrow screens: drop the voice line to keep one compact row,
   and let the seek row sit below the title row. */
@media (max-width: 520px) {
    .sv-sticky-player {
        flex-wrap: wrap;
        gap: 8px 10px;
    }

    .sv-sticky-voice {
        display: none;
    }

    .sv-sticky-seek {
        flex-basis: 100%;
        order: 3;
    }
}

/* Dark mode: lift the bar off the dark page a little more. */
@media (prefers-color-scheme: dark) {
    .sv-sticky-player {
        background-color: #1f2329;
        border-color: rgb(255 255 255 / 0.14);
        box-shadow: 0 12px 32px -8px rgb(0 0 0 / 0.7);
    }
}

/* Reduced motion: appear and disappear instantly, no slide. */
@media (prefers-reduced-motion: reduce) {
    .sv-sticky-player {
        transition: none;
    }
}