/*
 * Episode player bar (includes/player.php, js/player.js).
 *
 * Same palette as the content cards in fm.css: near-black panel, copper
 * accent, warm off-white text.
 *
 * Canonical copy lives in shared/player.css; bin/sync-shared.sh copies it into
 * every site's css/ directory. Edit the shared copy, never a per-site copy.
 * The CMS sites set `a { color: red !important }`, hence the !important on
 * the title link.
 */

.fm-player {
    --fm-copper: #cb9662;
    --fm-copper-light: #e2ac74;
    --fm-copper-pale: #f2c99f;
    --fm-ink: #f2efe6;
    --fm-panel: rgba(18, 18, 18, 0.96);
    --fm-track: rgba(242, 239, 230, 0.25);

    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    background: var(--fm-panel);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-top: 3px solid var(--fm-copper);
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.3);
    color: var(--fm-ink);
    font-family: TitilliumText-Regular, var(--fm-font, system-ui, sans-serif);
}

/* Keep the end of every page clear of the bar. js/player.js keeps
   --fm-player-h equal to the bar's real height; these are first guesses. */
:root {
    --fm-player-h: 74px;
}

body:has(> .fm-player) {
    padding-bottom: var(--fm-player-h) !important;
}

/* The CMS sites' scroll cue (fm.css) is fixed near the bottom of the screen;
   keep it above the bar instead of underneath it */
body:has(> .fm-player) .fm-scroll-cue {
    bottom: calc(var(--fm-player-h) + clamp(1rem, 4vh, 2.5rem));
}

.fm-player-inner {
    display: grid;
    grid-template-columns: auto auto auto auto minmax(0, 1fr) auto auto auto;
    grid-template-areas:
        "play vol prev back meta fwd next toggle"
        "play vol prev back seek fwd next toggle";
    align-items: center;
    column-gap: 0.35rem;
    row-gap: 0.15rem;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0.45rem 1rem 0.55rem;
}

/* Let the title row and the seek bar take their own places in the grid */
.fm-player-main {
    display: contents;
}

.fm-player-play   { grid-area: play; }
.fm-player-volume { grid-area: vol; }
.fm-player-prev   { grid-area: prev; }
.fm-player-back   { grid-area: back; }
.fm-player-meta   { grid-area: meta; }
.fm-player-seek   { grid-area: seek; }
.fm-player-fwd    { grid-area: fwd; }
.fm-player-next   { grid-area: next; }
.fm-player-toggle { grid-area: toggle; }


/* Buttons ------------------------------------------------------------ */

.fm-player-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--fm-ink);
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease, transform 0.2s ease;
}

.fm-player-btn svg {
    width: 26px;
    height: 26px;
    fill: currentColor;
}

.fm-player-btn svg text {
    font: 700 6.5px/1 system-ui, sans-serif;
    fill: currentColor;
}

.fm-player-btn:hover {
    color: var(--fm-copper-light);
}

.fm-player-btn[aria-disabled="true"] {
    opacity: 0.35;
    cursor: default;
}

.fm-player-btn[aria-disabled="true"]:hover {
    color: var(--fm-ink);
}

/* One focus style for everything in the bar, clearly visible on the dark panel */
.fm-player .fm-player-btn:focus-visible,
.fm-player input[type="range"]:focus-visible,
.fm-player-title:focus-visible {
    outline: 2px solid var(--fm-copper-pale);
    outline-offset: 2px;
}

.fm-player-play {
    width: 48px;
    height: 48px;
    margin-right: 0.35rem;
    background: var(--fm-copper);
    color: #1a1a1a;
}

.fm-player-play:hover {
    background: var(--fm-copper-light);
    color: #1a1a1a;
}

.fm-player-play svg {
    width: 28px;
    height: 28px;
}

.fm-player .fm-icon-pause,
.fm-player .fm-icon-muted,
.fm-player[data-state="playing"] .fm-icon-play,
.fm-player.is-muted .fm-icon-vol {
    display: none;
}

.fm-player[data-state="playing"] .fm-icon-pause,
.fm-player.is-muted .fm-icon-muted {
    display: block;
}

/* Buffering: a ring turning around the play button */
.fm-player[data-state="loading"] .fm-player-play {
    position: relative;
}

.fm-player[data-state="loading"] .fm-player-play::after {
    content: "";
    position: absolute;
    inset: -4px;
    border: 2px solid transparent;
    border-top-color: var(--fm-copper-pale);
    border-radius: 50%;
    animation: fm-player-spin 0.9s linear infinite;
}

@keyframes fm-player-spin {
    to { transform: rotate(360deg); }
}

.fm-player-toggle svg {
    transition: transform 0.2s ease;
}

.fm-player.is-collapsed .fm-player-toggle svg {
    transform: rotate(180deg);
}


/* Title and time ----------------------------------------------------- */

.fm-player-meta {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    min-width: 0;
    padding: 0 0.4rem;
}

.fm-player-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-family: TitilliumText-Bold, var(--fm-font, system-ui, sans-serif);
    font-size: 1rem;
    color: var(--fm-ink) !important;
    text-decoration: none !important;
}

.fm-player-title:hover {
    color: var(--fm-copper-light) !important;
    text-decoration: underline !important;
    text-underline-offset: 2px;
}

.fm-player-time,
.fm-player-status {
    flex: 0 0 auto;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: rgba(242, 239, 230, 0.8);
}

.fm-player-sep {
    margin: 0 0.15rem;
    color: var(--fm-copper);
}

.fm-player-resume {
    margin-right: 0.3rem;
    color: var(--fm-copper-light);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.75rem;
}

.fm-player-status {
    color: var(--fm-copper-pale);
}

.fm-player-status:empty {
    display: none;
}

/* A message replaces the time until it clears */
.fm-player.has-status .fm-player-time {
    display: none;
}


/* Range inputs: seek bar and volume --------------------------------- */

.fm-player input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 18px;
    margin: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    --fm-pct: 0%;
}

.fm-player input[type="range"]::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(to right, var(--fm-copper) var(--fm-pct), var(--fm-track) var(--fm-pct));
}

.fm-player input[type="range"]::-moz-range-track {
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(to right, var(--fm-copper) var(--fm-pct), var(--fm-track) var(--fm-pct));
}

.fm-player input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    margin-top: -5px;
    border: 0;
    border-radius: 50%;
    background: var(--fm-copper-pale);
}

.fm-player input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border: 0;
    border-radius: 50%;
    background: var(--fm-copper-pale);
}

.fm-player-seek {
    padding: 0 0.4rem !important;
}

.fm-player-volume {
    display: flex;
    align-items: center;
}

.fm-player-vol {
    width: 72px !important;
    margin-right: 0.35rem !important;
}


/* Collapsed: just play, the title and time, and the chevron ---------- */

.fm-player.is-collapsed .fm-player-inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "play meta toggle";
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
}

.fm-player.is-collapsed .fm-player-volume,
.fm-player.is-collapsed .fm-player-prev,
.fm-player.is-collapsed .fm-player-back,
.fm-player.is-collapsed .fm-player-seek,
.fm-player.is-collapsed .fm-player-fwd,
.fm-player.is-collapsed .fm-player-next {
    display: none;
}

.fm-player.is-collapsed .fm-player-play {
    width: 40px;
    height: 40px;
}


/* Phones and narrow tablets: two rows -------------------------------
 *   [play] title / time ............... [chevron]
 *   [prev] [-15] ==== seek bar ==== [+30] [next]
 * Volume is left to the device's own buttons (iOS ignores it anyway).
 */

@media (max-width: 767.98px) {
    :root {
        --fm-player-h: 108px;
    }

    .fm-player-inner {
        grid-template-columns: 44px 44px minmax(0, 1fr) 44px 44px;
        grid-template-areas:
            "play meta meta meta toggle"
            "prev back seek fwd  next";
        column-gap: 0.25rem;
        row-gap: 0.2rem;
        padding: 0.4rem 0.6rem calc(0.4rem + env(safe-area-inset-bottom, 0px));
    }

    .fm-player-volume {
        display: none;
    }

    .fm-player-btn {
        width: 44px;
        height: 44px;
    }

    .fm-player-play {
        width: 44px;
        height: 44px;
        margin-right: 0;
    }

    .fm-player-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding: 0 0.3rem;
    }

    .fm-player-title {
        max-width: 100%;
        font-size: 0.95rem;
    }

    .fm-player-time,
    .fm-player-status {
        font-size: 0.78rem;
    }

    .fm-player-seek {
        height: 44px !important;
        padding: 0 0.15rem !important;
    }

    .fm-player.is-collapsed .fm-player-inner {
        grid-template-columns: 44px minmax(0, 1fr) 44px;
    }

    .fm-player.is-collapsed .fm-player-play {
        width: 44px;
        height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fm-player-btn,
    .fm-player-toggle svg {
        transition: none;
    }

    /* A still, partial ring still says "loading" without moving */
    .fm-player[data-state="loading"] .fm-player-play::after {
        animation: none;
        border-right-color: var(--fm-copper-pale);
    }
}