/* earpaper – frontend player.
 *
 * LIGHT mode, visual sibling of
 *   dashboard/src/components/player/article-player-preview.tsx
 *
 * Branding is driven from the earpaper backend (Sprint 3+). The wrapper
 * receives `--earpaper-accent` and `--earpaper-accent-soft` as inline
 * style — see Earpaper_Player::render(). The legacy `--ep-accent`
 * variable still resolves so any third-party CSS that targeted it
 * keeps working.
 *
 * Sync warning: HTML structure here is shared with the React preview.
 * Don't drift them — visual parity is the whole point of Sprint 3b.
 */

.earpaper-player {
    --ep-accent: var(--earpaper-accent, #F16500);
    --ep-accent-soft: var(--earpaper-accent-soft, #FAC0A0);
    --ep-bg: #ffffff;
    --ep-track: #e8e8ec;      /* surface-container-high */
    --ep-text: #1a1c1f;       /* on-surface */
    --ep-muted: #44474c;      /* on-surface-variant */
    --ep-ghost: rgba(196, 198, 205, 0.4); /* outline-variant @ 40% */

    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    margin: 24px 0;
    background: var(--ep-bg);
    /* Sonic-Curator no-line rule: never a hard 1 px border. Use the
     * tonal ghost-outline so the player floats on light pages without
     * looking like a card-in-a-card. */
    border: 1px solid var(--ep-ghost);
    border-radius: 12px;
    box-shadow: 0 2px 8px 0 rgba(26, 28, 31, 0.04);
    font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif;
    color: var(--ep-text);
}

/* Brand-relevant properties get !important + doubled selector specificity
   so theme stylesheets (e.g. packaging-journal.de's green button override
   plus inherited padding/box-sizing that squashed the SVG) can't bleed
   through. We also lock down padding, margin, box-sizing, outline and
   the flex layout so the SVG always renders at its full size. */
.earpaper-player .earpaper-player__btn {
    background: var(--ep-accent) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 50% !important;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    outline: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}
.earpaper-player .earpaper-player__btn {
    cursor: pointer;
    transition: transform 0.1s ease, filter 0.15s ease;
    box-shadow: 0 2px 8px 0 rgba(26, 28, 31, 0.12);
}
.earpaper-player .earpaper-player__btn:hover {
    /* Slight tone shift via filter so we don't have to compute a
     * second darker hex per accent. Stays brand-true for any color. */
    filter: brightness(0.93);
}
.earpaper-player__btn:active {
    transform: scale(0.96);
}
.earpaper-player__btn:focus-visible {
    outline: 2px solid var(--ep-accent);
    outline-offset: 3px;
}

/* SVG sizing — size hard, NEVER set `display:` here. The play/pause
 * swap is driven by display:none on the inactive variant; an
 * !important display:block would show both at once. */
.earpaper-player .earpaper-player__btn svg,
.earpaper-player .earpaper-player__icon {
    width: 24px !important;
    height: 24px !important;
    flex-shrink: 0 !important;
}
.earpaper-player__icon {
    fill: currentColor;
}
.earpaper-player__icon--pause { display: none; }
.earpaper-player.is-playing .earpaper-player__icon--play { display: none; }
.earpaper-player.is-playing .earpaper-player__icon--pause { display: block; }

.earpaper-player__body {
    flex: 1;
    min-width: 0;
}

.earpaper-player__title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ep-text);
    margin-bottom: 10px;
}

.earpaper-player__progress {
    width: 100%;
    height: 4px;
    background: var(--ep-track);
    border-radius: 999px;
    overflow: hidden;
    cursor: pointer;
}
.earpaper-player__bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(to right, var(--ep-accent-soft), var(--ep-accent));
    border-radius: 999px;
    transition: width 0.1s linear;
}

.earpaper-player__meta {
    margin-top: 8px;
    font-size: 12px;
    color: var(--ep-muted);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}
.earpaper-player__sep {
    margin: 0 4px;
}

.earpaper-player__audio {
    display: none;
}

/* Pending state — Sprint 3b client-side status check sets this while
 * audio is still being generated. Player is visible but inert. */
.earpaper-player.is-pending .earpaper-player__btn {
    cursor: default !important;
    opacity: 0.6;
}
.earpaper-player.is-pending .earpaper-player__bar {
    background: var(--ep-track) !important;
    animation: earpaper-pulse 1.6s ease-in-out infinite;
}
@keyframes earpaper-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
}

/* =======================================================================
 * Dark theme — applied via .earpaper-player--dark
 *
 * Strategy mirrors dashboard's <ArticlePlayerPreview playerTheme="dark">:
 *   surface       → primary (#041627)
 *   text          → white / on-primary-container
 *   play button   → lightened accent so it pops against navy
 *   play icon     → primary (Deep Navy) for contrast on the bright disc
 *   progress bar  → lightenHex(accent, 0.6) → lightenHex(accent, 0.3)
 *                   (player.css already has accent_soft; the second stop
 *                   is the regular accent at 0.85 to keep one variable)
 * ======================================================================= */
.earpaper-player.earpaper-player--dark {
    --ep-bg: #041627;
    --ep-track: rgba(255, 255, 255, 0.10);
    --ep-text: #ffffff;
    --ep-muted: #8192a7;       /* on-primary-container */
    --ep-ghost: rgba(116, 119, 125, 0.20);
}
.earpaper-player.earpaper-player--dark .earpaper-player__btn {
    background: var(--ep-accent-soft) !important;
    color: #041627 !important;
}
.earpaper-player.earpaper-player--dark .earpaper-player__btn:hover {
    background: var(--ep-accent-soft) !important;
    filter: brightness(1.05);
}
.earpaper-player.earpaper-player--dark .earpaper-player__icon {
    fill: #041627;
}
.earpaper-player.earpaper-player--dark .earpaper-player__bar {
    background: linear-gradient(to right, var(--ep-accent-soft), var(--ep-accent));
}

@media (max-width: 600px) {
    .earpaper-player {
        gap: 12px;
        padding: 14px 16px;
    }
    .earpaper-player .earpaper-player__btn {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
    }
    .earpaper-player .earpaper-player__btn svg,
    .earpaper-player .earpaper-player__icon {
        width: 20px !important;
        height: 20px !important;
    }
}