/* Плеер музыкальных аффирмаций — полоса над шапкой главной.

   Полоса, а не карточка в потоке: плеер должен быть виден сразу и
   оставаться доступным, но не претендовать на первый экран, который у
   лендинга занят делом. Отсюда высота в 56 px и приглушённый фон —
   это инструмент рядом с содержанием, а не содержание.

   Цвета берём из переменных лендинга (--gold, --panel, --brd, --muted),
   чтобы полоса не выглядела приклеенной из другого проекта. */

.plr {
  position: relative;
  z-index: 60;
  background: linear-gradient(180deg, rgba(12,16,30,.98), rgba(8,11,22,.98));
  border-bottom: 1px solid var(--brd, rgba(170,190,255,.13));
  font-family: 'Manrope', system-ui, sans-serif;
}

.plr-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding-top: 8px;
  padding-bottom: 8px;
}

/* ---------- кнопки ---------- */
.plr-btn {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  padding: 0;
  border: 1px solid var(--brd, rgba(170,190,255,.13));
  border-radius: 50%;
  background: var(--panel, rgba(140,160,220,.055));
  color: var(--txt, #DCE4FA);
  cursor: pointer;
  transition: border-color .18s, color .18s, background .18s;
}
.plr-btn:hover { border-color: var(--brd2, rgba(170,190,255,.26)); color: var(--head, #F2F5FF); }
.plr-btn:focus-visible { outline: 2px solid var(--gold, #E3C08A); outline-offset: 2px; }
.plr-btn svg { width: 18px; height: 18px; display: block; }

/* Play крупнее прочих и золотая: это единственная кнопка, которую ищут. */
.plr-play {
  width: 40px; height: 40px;
  border-color: rgba(227,192,138,.42);
  background: rgba(227,192,138,.10);
  color: var(--gold, #E3C08A);
}
.plr-play:hover { background: rgba(227,192,138,.18); color: #F4DDB4; }
.plr-play svg { width: 21px; height: 21px; }

/* Одна из двух иконок всегда скрыта — какая, решает класс на контейнере. */
.plr .plr-i-pause,
.plr.playing .plr-i-play { display: none; }
.plr.playing .plr-i-pause { display: block; }

.plr .plr-i-muted,
.plr.muted .plr-i-loud { display: none; }
.plr.muted .plr-i-muted { display: block; }
.plr.muted .plr-mute { color: var(--muted, #8590B4); }

/* ---------- середина: название и перемотка ---------- */
.plr-mid {
  flex: 1 1 auto;
  min-width: 0;              /* иначе длинное название растянет полосу */
  display: flex;
  align-items: center;
  gap: 18px;
}

.plr-title { min-width: 0; flex: 0 1 auto; display: flex; flex-direction: column; }
.plr-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted, #8590B4);
  white-space: nowrap;
}
.plr-title b {
  font-size: 14px; font-weight: 600; color: var(--head, #F2F5FF);
  line-height: 1.3;
  /* Одна строка с многоточием: названия бывают длинными, а полоса одна. */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.plr-sub {
  font-size: 11.5px; color: var(--muted, #8590B4);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.plr-seek { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; }
.plr-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: var(--muted, #8590B4);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}

/* Полоса перемотки. Свой вид у range задаётся только через -webkit- и
   -moz- псевдоэлементы, общего способа нет — отсюда дублирование.
   Пройденная часть рисуется градиентом по переменной --done, которую
   ставит скрипт: у range нет своего способа показать прогресс. */
.plr-range {
  flex: 1 1 auto; min-width: 60px;
  -webkit-appearance: none; appearance: none;
  height: 16px;                 /* область захвата, сама полоска тоньше */
  background: transparent;
  cursor: pointer;
}
.plr-range::-webkit-slider-runnable-track {
  height: 4px; border-radius: 999px;
  background: linear-gradient(90deg,
    var(--gold, #E3C08A) 0 var(--done, 0%),
    var(--panel2, rgba(140,160,220,.10)) var(--done, 0%) 100%);
}
.plr-range::-moz-range-track {
  height: 4px; border-radius: 999px;
  background: linear-gradient(90deg,
    var(--gold, #E3C08A) 0 var(--done, 0%),
    var(--panel2, rgba(140,160,220,.10)) var(--done, 0%) 100%);
}
.plr-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--gold, #E3C08A);
  border: 0;
  margin-top: -3.5px;           /* центрируем по дорожке в 4px */
  box-shadow: 0 0 8px -1px rgba(227,192,138,.8);
}
.plr-range::-moz-range-thumb {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--gold, #E3C08A); border: 0;
  box-shadow: 0 0 8px -1px rgba(227,192,138,.8);
}
.plr-range:focus-visible { outline: 2px solid var(--gold, #E3C08A); outline-offset: 3px; }

/* ---------- громкость ----------
   Ползунок висит над кнопкой и появляется при наведении. Он внутри той же
   области :hover, что и кнопка, — иначе исчезал бы в щели между ними,
   пока курсор едет.

   Громкость по умолчанию 15 %. Причина простая: у человека может быть
   выкручен системный звук, и первое же нажатие play на полной громкости —
   это не знакомство с музыкой, а испуг. Тихий старт с видимым ползунком
   предлагает прибавить, а не заставляет убавлять. */
.plr-vol { position: relative; flex: 0 0 auto; }

.plr-vol-pop {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 12px 10px 10px;
  border: 1px solid var(--brd2, rgba(170,190,255,.26));
  border-radius: 14px;
  background: rgba(9,12,22,.98);
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.9);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .16s, transform .16s, visibility .16s;
  z-index: 5;
}
/* Мостик до кнопки: без него курсор проходит над зазором в 8px, окно
   считает, что его покинули, и закрывается прямо под пальцем. */
.plr-vol-pop::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -10px; height: 10px;
}
.plr-vol:hover .plr-vol-pop,
.plr-vol:focus-within .plr-vol-pop,
.plr-vol.open .plr-vol-pop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.plr-vol-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--gold, #E3C08A);
  font-variant-numeric: tabular-nums;
}

/* Вертикальный range.
   Вертикаль даёт writing-mode, а не appearance: slider-vertical. Разница
   принципиальная: со slider-vertical браузер рисует собственный контрол и
   игнорирует стили дорожки и бегунка — ползунок выходил системно-синим,
   как из другого интерфейса. С appearance: none наши стили работают,
   а вертикальным его делает режим письма.
   Поворот через transform не годится вовсе: он смещает область захвата
   относительно видимой полосы, и ползунок «не берётся» под курсором. */
.plr-vol-range {
  -webkit-appearance: none;
  appearance: none;
  writing-mode: vertical-lr;
  direction: rtl;              /* низ = тише, верх = громче */
  width: 22px;
  height: 96px;
  background: transparent;
  cursor: pointer;
}
.plr-vol-range::-webkit-slider-runnable-track {
  width: 4px; border-radius: 999px;
  background: linear-gradient(to top,
    var(--gold, #E3C08A) 0 var(--vol, 15%),
    var(--panel2, rgba(140,160,220,.10)) var(--vol, 15%) 100%);
}
.plr-vol-range::-moz-range-track {
  width: 4px; border-radius: 999px;
  background: linear-gradient(to top,
    var(--gold, #E3C08A) 0 var(--vol, 15%),
    var(--panel2, rgba(140,160,220,.10)) var(--vol, 15%) 100%);
}
.plr-vol-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--gold, #E3C08A); border: 0;
  /* В вертикальном режиме поперечная ось — горизонталь, и центрируем
     бегунок по ней: (12 - 4) / 2 = 4 пикселя влево. */
  margin-left: -4px;
  box-shadow: 0 0 9px -1px rgba(227,192,138,.85);
}
.plr-vol-range::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--gold, #E3C08A); border: 0;
  box-shadow: 0 0 9px -1px rgba(227,192,138,.85);
}
.plr-vol-range:focus-visible { outline: 2px solid var(--gold, #E3C08A); outline-offset: 3px; }

/* Подсказка показывается, пока громкость не трогали. После первой же
   попытки она не нужна: человек уже понял, как это работает. */
.plr-vol-hint {
  font-size: 9.5px;
  letter-spacing: .06em;
  color: var(--muted, #8590B4);
  white-space: nowrap;
  transition: opacity .2s;
}
.plr-vol.touched .plr-vol-hint { opacity: 0; }

/* Ссылки на площадки исполнителя: те же кнопки, но приглушённее —
   это выход с сайта, а не управление плеером. */
.plr-out { text-decoration: none; color: var(--muted, #8590B4); }
.plr-out:hover { color: var(--gold, #E3C08A); border-color: rgba(227,192,138,.42); }

/* ---------- список треков ---------- */
.plr-list-toggle { position: relative; }
.plr-count {
  position: absolute; top: -3px; right: -3px;
  min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: 999px;
  background: var(--gold, #E3C08A); color: #0B0E18;
  font-size: 9.5px; font-weight: 700; line-height: 15px; text-align: center;
}
.plr.list-open .plr-list-toggle { border-color: var(--gold, #E3C08A); color: var(--gold, #E3C08A); }

.plr-playlist {
  border-top: 1px solid var(--brd, rgba(170,190,255,.13));
  background: rgba(6,9,18,.99);
  max-height: 46vh;
  overflow-y: auto;
}
.plr-tracks { list-style: none; margin: 0; padding: 8px 0; }
.plr-track {
  width: 100%;
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center; gap: 12px;
  padding: 9px 10px;
  border: 0; border-radius: 10px;
  background: transparent; color: inherit;
  text-align: left; cursor: pointer;
  font-family: inherit;
  transition: background .16s;
}
.plr-track:hover { background: rgba(140,160,220,.10); }
.plr-track:focus-visible { outline: 2px solid var(--gold, #E3C08A); outline-offset: -2px; }
.plr-track-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: var(--muted, #8590B4); text-align: right;
}
.plr-track-name { min-width: 0; display: flex; flex-direction: column; }
.plr-track-name b {
  font-size: 13.5px; font-weight: 600; color: var(--txt, #DCE4FA);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.plr-track-name span {
  font-size: 11.5px; color: var(--muted, #8590B4);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.plr-track-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: var(--muted, #8590B4);
}
/* Текущий трек — золотом. Отмечаем и точкой: цвет один не должен быть
   единственным носителем смысла. */
.plr-track.cur .plr-track-name b { color: var(--gold, #E3C08A); }
.plr-track.cur .plr-track-num::after {
  content: "●"; display: block; font-size: 7px; color: var(--gold, #E3C08A);
}

/* Скрытый <audio>: элемент нужен, его вид — нет. display:none местами
   мешает воспроизведению, поэтому убираем размером. */
.plr audio { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }

/* ---------- узкие экраны ----------
   На телефоне полоса перемотки уезжает под название: рядом они дают
   каждому по 90 px, и не читается ни то, ни другое. */
@media (max-width: 760px) {
  .plr-wrap { flex-wrap: wrap; gap: 10px; padding-bottom: 10px; }
  .plr-mid { order: 5; flex: 1 1 100%; flex-direction: column; align-items: stretch; gap: 6px; }
  .plr-title { flex-direction: row; align-items: baseline; gap: 8px; }
  .plr-kicker { display: none; }   /* место дороже подписи */
  .plr-seek { width: 100%; }
}
@media (max-width: 420px) {
  .plr-sub { display: none; }
}

/* Кому важна неподвижность — тому неподвижность. Плеер не анимирован,
   но переходы на кнопках убираем вместе со всем остальным. */
@media (prefers-reduced-motion: reduce) {
  .plr-btn, .plr-track { transition: none; }
}