/* Site-wide music player bar: templates/snippets/player_bar.html, static/js/pt-player.js.
   The bar sits on Ink in light and dark mode alike, like the waveform player
   (pt-audio.css), so the amber controls read the same everywhere. */
/* Set on <html> too: the toast and #mainContent rules below sit outside the bar. */
html.pt-player-on, .pt-player { --pt-player-height: 4.75rem; }
.pt-player {
    --pt-player-progress: 0%;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--pt-ink, #161616); color: #fff;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .28);
    padding-bottom: env(safe-area-inset-bottom);
    font: var(--pt-text-body, 400 .9375rem/1.65 sans-serif);
}
.pt-player[hidden] { display: none; }
/* The site toast (articleapp/components/toast.html) stays in the page at
   opacity 0 when hidden; it must not catch taps meant for the bar under it. */
html.pt-player-on .toast-container { pointer-events: none; bottom: var(--pt-player-height) !important; }
html.pt-player-on .toast-container .toast.show { pointer-events: auto; }
/* The page scrolls clear of the bar. */
html.pt-player-on #mainContent { padding-bottom: calc(var(--pt-player-height) + 1rem); }
html.pt-player-on.pt-shell-on { overflow: hidden; }

.pt-player-main {
    display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center; gap: 1rem; height: var(--pt-player-height); padding: 0 1rem;
}
.pt-player.is-busy .pt-player-main { opacity: .6; pointer-events: none; }

/* Now playing */
.pt-player-now { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.pt-player-cover {
    flex: none; width: 3rem; height: 3rem; border-radius: var(--pt-radius-sm, 8px);
    object-fit: cover; background: rgba(255, 255, 255, .08);
}
.pt-player-text { min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.pt-player-title {
    font-weight: 600; font-size: .9375rem; color: #fff; text-decoration: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pt-player-title:hover { text-decoration: underline; color: #fff; }
.pt-player-artist {
    font-size: .8125rem; color: rgba(255, 255, 255, .7); text-decoration: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pt-player-artist:hover { color: var(--pt-amber-500, #FFC107); }

/* Buttons */
.pt-player-btn {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 2.5rem; height: 2.5rem; padding: 0; border: 0; border-radius: 50%;
    background: transparent; color: rgba(255, 255, 255, .78); cursor: pointer;
    transition: color .12s, background .12s;
}
.pt-player-btn:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.pt-player-btn:focus-visible { outline: 2px solid var(--pt-amber-500, #FFC107); outline-offset: 2px; }
.pt-player-btn[disabled] { opacity: .35; cursor: default; }
.pt-player-btn[disabled]:hover { background: transparent; color: rgba(255, 255, 255, .78); }
.pt-player-btn .material-icons { font-size: 1.5rem; margin: 0; }
.pt-player-btn.is-on { color: var(--pt-amber-500, #FFC107); }
/* A dot under repeat and shuffle while they are on, as on music apps. */
.pt-player-btn.is-on::after {
    content: ""; position: absolute; bottom: .3rem; width: 4px; height: 4px; border-radius: 50%;
    background: var(--pt-amber-500, #FFC107);
}
.pt-player-btn { position: relative; }
.pt-player-play {
    width: 3rem; height: 3rem; background: var(--pt-amber-500, #FFC107); color: var(--pt-ink, #161616);
}
.pt-player-play:hover { background: var(--pt-amber-600, #E0A800); color: var(--pt-ink, #161616); transform: scale(1.05); }
.pt-player-play .material-icons { font-size: 1.85rem; }

/* Middle: buttons and the seek bar */
.pt-player-center { display: flex; flex-direction: column; align-items: center; gap: .25rem; min-width: 0; }
.pt-player-controls { display: flex; align-items: center; gap: .25rem; }
.pt-player-line { display: flex; align-items: center; gap: .6rem; width: min(34rem, 100%); }
.pt-player-time {
    font: 500 .75rem/1 var(--pt-font-mono, monospace); font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, .7); flex: none;
}
.pt-player-seek {
    flex: 1; min-width: 0; height: 1rem; margin: 0; padding: 0; background: transparent;
    -webkit-appearance: none; appearance: none; cursor: pointer;
}
.pt-player-seek::-webkit-slider-runnable-track {
    height: 4px; border-radius: 2px;
    background: linear-gradient(to right, var(--pt-amber-500, #FFC107) var(--pt-player-progress), rgba(255, 255, 255, .25) var(--pt-player-progress));
}
.pt-player-seek::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .25); }
.pt-player-seek::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--pt-amber-500, #FFC107); }
.pt-player-seek::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 12px; height: 12px; margin-top: -4px;
    border: 0; border-radius: 50%; background: #fff;
}
.pt-player-seek::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: #fff; }
.pt-player-seek:focus-visible { outline: 2px solid var(--pt-amber-500, #FFC107); outline-offset: 3px; }

/* Right: queue, volume, close */
.pt-player-side { display: flex; align-items: center; justify-content: flex-end; gap: .25rem; min-width: 0; }
.pt-player-volume { display: inline-flex; align-items: center; }
.pt-player-volume input { width: 5.5rem; accent-color: var(--pt-amber-500, #FFC107); }

/* "Next up" panel */
.pt-player-panel {
    border-top: 1px solid rgba(255, 255, 255, .12);
    max-height: min(24rem, 60vh); display: flex; flex-direction: column;
}
.pt-player-panel[hidden] { display: none; }
.pt-player-panel-head {
    display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem .5rem;
}
.pt-player-panel-head h2 { margin: 0; font: 600 1rem/1.3 var(--pt-font-text, sans-serif); color: #fff; }
.pt-player-source { margin: 0 0 0 auto; font-size: .8125rem; color: rgba(255, 255, 255, .7); }
.pt-player-source a { color: var(--pt-amber-500, #FFC107); text-decoration: none; }
.pt-player-source a:hover { text-decoration: underline; }
.pt-player-queue { list-style: none; margin: 0; padding: 0 .5rem .75rem; overflow-y: auto; }
.pt-player-item { display: flex; align-items: center; gap: .25rem; border-radius: var(--pt-radius-md, 12px); }
.pt-player-item:hover { background: rgba(255, 255, 255, .08); }
.pt-player-item-main {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: .75rem;
    padding: .45rem .5rem; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer;
}
.pt-player-item-main:focus-visible { outline: 2px solid var(--pt-amber-500, #FFC107); outline-offset: -2px; }
.pt-player-item-cover {
    position: relative; flex: none; width: 2.5rem; height: 2.5rem; border-radius: var(--pt-radius-sm, 8px);
    overflow: hidden; background: rgba(255, 255, 255, .1);
    display: inline-flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, .5);
}
.pt-player-item-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pt-player-item-text { min-width: 0; display: flex; flex-direction: column; }
.pt-player-item-title { font-size: .875rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-player-item-artist { font-size: .75rem; color: rgba(255, 255, 255, .62); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-player-item.is-current .pt-player-item-title { color: var(--pt-amber-500, #FFC107); }
.pt-player-item.is-failed .pt-player-item-title { color: var(--pt-mist, #BDBDBD); text-decoration: line-through; }
.pt-player-item-eq { display: none; margin-left: auto; align-items: flex-end; gap: 2px; height: 1rem; }
.pt-player-item.is-current .pt-player-item-eq { display: inline-flex; }
.pt-player-item-eq i { width: 3px; border-radius: 1px; background: var(--pt-amber-500, #FFC107); height: .35rem; }
.pt-player-item.is-playing .pt-player-item-eq i { animation: pt-player-eq .9s ease-in-out infinite; }
.pt-player-item-eq i:nth-child(2) { animation-delay: .15s; }
.pt-player-item-eq i:nth-child(3) { animation-delay: .3s; }
@keyframes pt-player-eq { 0%, 100% { height: .3rem; } 50% { height: 1rem; } }
.pt-player-item-remove { width: 2rem; height: 2rem; }
.pt-player-item-remove .material-icons { font-size: 1.1rem; }

@media (prefers-reduced-motion: reduce) {
    .pt-player-item.is-playing .pt-player-item-eq i { animation: none; }
    .pt-player-play:hover { transform: none; }
}

/* Phones: the bar keeps play, previous, next and the queue; the rest moves
   into the panel. */
@media (max-width: 767px) {
    html.pt-player-on, .pt-player { --pt-player-height: 4rem; }
    .pt-player-main { grid-template-columns: minmax(0, 1fr) auto auto; gap: .25rem; padding: 0 .25rem 0 .75rem; }
    .pt-player-center { flex-direction: row; gap: .1rem; }
    .pt-player-line { display: none; }
    .pt-player-cover { width: 2.5rem; height: 2.5rem; }
    /* The queue and close buttons stay; save and volume move into the panel,
       and so do shuffle and repeat, to leave room for the title. */
    .pt-player-only-wide,
    .pt-player-main [data-act=shuffle],
    .pt-player-main [data-act=repeat] { display: none; }
    /* A swipe down closes the bar, a swipe up opens "next up"; the grip says so. */
    .pt-player-main { touch-action: none; }
    .pt-player:not(.is-expanded)::after {
        content: ""; position: absolute; left: 50%; top: 6px; width: 2.25rem; height: 4px; margin-left: -1.125rem;
        border-radius: 2px; background: rgba(255, 255, 255, .28); pointer-events: none;
    }
    /* A thin progress line along the top edge instead of the seek bar. */
    .pt-player::before {
        content: ""; position: absolute; left: 0; top: 0; height: 3px; width: var(--pt-player-progress);
        background: var(--pt-amber-500, #FFC107); transition: width .2s linear;
    }
    .pt-player-panel-line { display: flex; align-items: center; gap: .6rem; padding: .25rem 1rem .5rem; }
    .pt-player-panel-modes { display: flex; align-items: center; gap: .25rem; padding: 0 .75rem .25rem; }
}
@media (min-width: 768px) {
    .pt-player-panel-line, .pt-player-panel-modes { display: none; }
}

/* The frame that holds the page while the music plays. */
/* An iframe is a replaced element: top + bottom with height: auto does not stretch it (it
   stays 150px tall), so the height is given outright: the window less the bar. */
.pt-shell {
    position: fixed; top: 0; left: 0; width: 100%; height: calc(100% - var(--pt-shell-bottom, 0px));
    border: 0; background: var(--pt-bg, #F3F4F6); z-index: 50;
}
html.pt-player-on .pt-shell { --pt-shell-bottom: calc(4rem + env(safe-area-inset-bottom)); }
@media (min-width: 768px) { html.pt-player-on .pt-shell { --pt-shell-bottom: 4.75rem; } }
.pt-shell[hidden] { display: none; }
/* Inside the frame the page fills it; the bar lives in the top window. */
html.pt-in-shell, html.pt-in-shell body { height: 100%; }

/* Play buttons on cards and rows (data-pt-track / data-pt-source). */
.pt-play-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
    background: var(--pt-amber-500, #FFC107); color: var(--pt-ink, #161616);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .3); transition: transform .12s, background .12s;
}
.pt-play-btn:hover { background: var(--pt-amber-600, #E0A800); transform: scale(1.06); }
.pt-play-btn:focus-visible { outline: 2px solid var(--pt-focus-ring, #161616); outline-offset: 2px; }
.pt-play-btn .material-icons { font-size: 1.6rem; margin: 0; color: inherit !important; }
.pt-play-btn.is-sm { width: 2.25rem; height: 2.25rem; }
.pt-play-btn.is-sm .material-icons { font-size: 1.3rem; }