/* player_links.css — обложка и исполнитель плеера — ссылки (player_links.js, владелец 18.10).
   Вне @layer: правила плеера в vault.css лежат в слое responsive, а кнопке
   нужно снять оформление браузера (рамка, отступы, шрифт) поверх них. Размеры,
   фон и скругление обложки остаются из vault.css. */

/* Обложка мини-плеера — кнопка «Открыть альбом» (на компьютере; в полосе
   телефона она inert, и нажатие уходит полосе — плеер на весь экран). */
.pb-cover {
    border: 0; padding: 0; margin: 0;
    font: inherit; color: inherit;
    display: block; cursor: pointer;
    -webkit-appearance: none; appearance: none;
    position: relative;
    transition: box-shadow .12s ease, filter .12s ease;
}
.pb-cover[inert] { cursor: inherit; }
.pb-cover:not([inert]):hover { filter: brightness(1.12); box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .55); }
.pb-cover:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pb-cover.pl-busy, .np-art-link.pl-busy { cursor: progress; }

/* Ищем альбом: обложка темнеет, по центру — кружок; в полноэкранном плеере
   под ним подпись «Ищу альбом…» (data-busy-label, player_links.js). Диктору —
   живая строка .pl-sr. Без анимации (prefers-reduced-motion) кружок стоит. */
.pb-cover.pl-busy img { opacity: .45; }
.pb-cover.pl-busy::after, .np-art-link.pl-busy::after {
    content: ''; position: absolute; left: 50%; top: 50%;
    width: 22px; height: 22px; margin: -11px 0 0 -11px;
    border: 3px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%;
    box-sizing: border-box; animation: pl-spin .8s linear infinite; pointer-events: none;
}
.np-art-link.pl-busy::after { width: 44px; height: 44px; margin: -22px 0 0 -22px; border-width: 4px; }
.np-art-link.pl-busy::before {
    content: attr(data-busy-label); position: absolute; left: 0; right: 0; top: calc(50% + 34px);
    text-align: center; color: #fff; font-size: 15px; font-weight: 600;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .7); pointer-events: none;
}
@keyframes pl-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .pb-cover.pl-busy::after, .np-art-link.pl-busy::after { animation: none; border-right-color: #fff; }
}
.pl-sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Обложка полноэкранного плеера: кнопка поверх картинки (и заглушки без неё).
   Рамка фокуса — внутри: у .np-art overflow: hidden и скругление. */
.np-art-link {
    position: absolute; inset: 0; z-index: 1;
    width: 100%; height: 100%;
    border: 0; padding: 0; margin: 0;
    background: transparent; color: inherit; font: inherit;
    border-radius: inherit; cursor: pointer;
    -webkit-appearance: none; appearance: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .15s ease;
}
.np-art-link[hidden] { display: none; }
.np-art-link:hover { background: rgba(255, 255, 255, .05); }
.np-art-link:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--accent); }
.np-art-link.pl-busy { background: rgba(0, 0, 0, .5); }

/* Исполнитель — кнопка на каждое имя совместного кредита; разделители —
   текстом. Длинное имя обрезается многоточием в самой кнопке (кнопка в
   строке — блок: многоточие строки на неё не ложится). Высота строки —
   та же, что у строки имени, и край — по верху: у блока с overflow: hidden
   базовая линия — нижний край, и «&», «feat.» между кнопками всплывали вверх. */
.pl-artist {
    border: 0; padding: 0 2px; margin: 0 -2px;
    background: none; color: inherit; font: inherit;
    -webkit-appearance: none; appearance: none;
    cursor: pointer; text-align: left;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    vertical-align: top; unicode-bidi: isolate; border-radius: 4px;
    transition: color .12s ease;
}
/* Строка названия и имени мини-плеера — во всю свою колонку: по ширине
   содержимого она округлялась на долю точки уже кнопки, и «Radiohead»
   становилось «Radiohe…» при пустом месте справа (WebKit). */
.player-bar .pb-meta { flex: 1 1 auto; }
.pl-artist:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.pl-artist:focus-visible { outline: none; color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }

/* Несколько исполнителей в полноэкранном плеере — до двух строк, перенос
   только между именами: на телефоне «A & B feat. C» иначе прятал C за краем.
   Вторая строка — в счёт высоты колонки (--np-rest, vault.css), чтобы
   обложка уменьшилась, а не уехала вниз строка громкости. */
.np-artist.pl-multi { white-space: normal; line-height: 20px; max-height: 40px; }   /* -webkit-line-clamp у WebKit ставил «…» и после последнего имени */
.now-playing:has(#np-artist.pl-multi) { --np-rest: 356px; }
.now-playing.has-vol:has(#np-artist.pl-multi) { --np-rest: 402px; }

/* Палец: цель 44 точки — и ни точки поверх названия трека или строки альбома
   (ревью 18.10: на iPad лёжа нажатие в середину названия открывало
   исполнителя, а строка альбома сверху съедала низ цели до 33 точек). Строке
   имени даны те же отступы, что кнопке, иначе её overflow: hidden обрезал бы
   цель по высоте текста. Узкое имя («U2») — не уже 44. */
@media (pointer: coarse) {
    .pl-artist { padding: 14px 4px; margin: -14px -4px; min-width: 44px; }
    /* Мини-плеер (компьютер с пальцем, iPad лёжа; в полосе телефона имя —
       текст): цель — от низа названия до края полосы (полоса 74, отступ 10 —
       поле −12 уводит её на край). Строка названия на 2 точки ниже, весь
       текст выше: 18 + 6 + 16 + 22 − 6 = 56 — ряд по центру полосы, цель 44 до её края (WebKit, 1180×820). */
    .player-bar .pb-meta:has(.pb-artist.pl-links) .pb-title { line-height: 18px; }
    .player-bar .pb-artist.pl-links { line-height: 16px; padding: 6px 4px 22px; margin: 0 -4px -6px; }
    .player-bar .pb-artist.pl-links .pl-artist { padding: 6px 4px 22px; margin: -6px -4px -22px; }
    /* Полноэкранный плеер: цель занимает в колонке свои 44 точки (13 + 18 + 13)
       между названием и альбомом; на них обложка меньше (--np-rest: +19 к
       334/380 — была строка 5 + 18 и поле альбома 2). */
    .np-artist.pl-links { line-height: 18px; padding: 13px 4px; margin: 0 -4px; }
    .np-artist.pl-links .pl-artist { padding: 13px 4px; margin: -13px -4px; }
    .np-artist.pl-links + .np-album { margin-top: 0; }
    .now-playing:has(#np-artist.pl-links) { --np-rest: 353px; }
    .now-playing.has-vol:has(#np-artist.pl-links) { --np-rest: 399px; }
    /* Две строки по 32: цель (32 + 12 = 44) заходит на соседнюю строку на 6
       точек — мимо букв соседнего имени (проверено попаданием в WebKit).
       Колонке — 76 вместо 25 (+51). */
    .np-artist.pl-multi { line-height: 32px; max-height: 76px; padding: 6px 4px; margin: 0 -4px; }
    .np-artist.pl-multi .pl-artist { padding: 6px 4px; margin: -6px -4px; }
    .now-playing:has(#np-artist.pl-multi) { --np-rest: 385px; }
    .now-playing.has-vol:has(#np-artist.pl-multi) { --np-rest: 431px; }
}