@charset "UTF-8";

/* ВЕРСИЯ ФАЙЛА: 1. Подключается как music-day.css?v=1.
   ПРАВИЛО: если правишь этот файл — подними версию в ссылке на единицу
   (v=1 -> v=2) в файле music.php, иначе браузер продолжит отдавать старый.

   Витрина «день за песню» на странице музыки: слева двор, справа список песен
   и кнопки плеера. Файл маленький и отдельный намеренно, как map-points.css
   и music.css: общий style.css отдаётся с PDV_CSS_V, и его подъём заставил бы
   всех посетителей перекачивать сто килобайт стилей ради одной страницы.

   Вид выбран владельцем 29.09.2026 (вариант 1) и проверен глазами на тестовой
   странице. Рамки окон — намеренно «как в медиаплеере», по его же словам. */

/* ---------- Сетка: два окна рядом, на телефоне столбиком ---------- */
.mday {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 18px;
  margin: 26px 0 0;
}
@media (max-width: 860px) {
  .mday { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Окно ---------- */
.mday__win {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-2);
  overflow: hidden;
}
.mday__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .02);
}
.mday__dots { display: flex; gap: 4px; flex: none; }
.mday__dots i {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--line); display: block;
}
.mday__dots i:first-child { background: var(--accent); opacity: .55; }
.mday__bar b { font-size: 13.5px; font-weight: 700; }
.mday__body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-height: 0;
}

/* ---------- Двор ---------- */
.mday__vis {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: #0d1120;
  aspect-ratio: 16 / 9;
}
.mday__vis canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
.mday__under {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.mday__phase {
  display: inline-block;
  background: var(--accent); color: #171310;
  font-weight: 800; font-size: 13px;
  border-radius: 20px; padding: 3px 12px;
  min-width: 96px; text-align: center;
}
.mday__phase--rain { background: #2f5b7a; color: #e8f2fa; }
.mday__note { color: var(--muted); font-size: 12.5px; margin: 0; }

/* ---------- Список песен в окне ---------- */
.mday__tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.mday__rows {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
  flex: 1; min-height: 60px; max-height: 340px; overflow: auto;
}
.mday__row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: 9px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid transparent;
}
.mday__row.is-cur { border-color: var(--accent); background: rgba(246, 100, 9, .12); }
.mday__n { color: var(--muted); font-size: 12px; min-width: 16px; flex: none; }
.mday__t {
  flex: 1; font-size: 14px; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mday__l {
  color: var(--muted); font-size: 12px; flex: none;
  font-variant-numeric: tabular-nums;
}
.mday__play {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--line); border-radius: 50%;
  background: transparent; color: var(--accent);
  cursor: pointer; transition: .15s;
}
.mday__play:hover { border-color: var(--accent); background: rgba(246, 100, 9, .12); }
/* 30.09.2026. Кнопка у играющей песни в окне. Класс .is-active ставит
   player.js любой кнопке [data-track], а правила для .mday__play.is-active не
   было вовсе — играющая песня в окне ничем не отличалась от остальных, и
   понять, что играет, было нельзя. Вид тот же, что у .track__play.is-active
   и .pdvbar__btn.is-on: оранжевые рамка и глиф, лёгкая подложка. */
.mday__play.is-active {
  border-color: var(--accent); color: var(--accent);
  background: rgba(246, 100, 9, .12);
}
.mday__play .ico { width: 18px; height: 18px; }
.mday__empty {
  display: flex; flex-direction: column; gap: 6px;
  align-items: center; text-align: center;
  color: var(--muted); font-size: 14px;
  border: 1px dashed var(--line); border-radius: 9px;
  padding: 18px 12px;
}
.mday__empty b { color: var(--text); font-size: 15px; }
/* Атрибут hidden сам по себе не прячет блок: у .mday__empty задано display:flex,
   и он перебивает правило браузера для [hidden]. Проверено на живой странице —
   плашка «пусто» стояла под двумя песнями. */
.mday__empty[hidden] { display: none; }

/* ---------- Кнопки плеера в окне ---------- */
/* Что делает плеер, видно в окне. Иначе на странице музыки сообщения плеера
   уходили в скрытую нижнюю полосу: посетитель нажимал «плей» при пустом
   плейлисте, видел ничего и думал, что кнопка сломана. */
.mday__status {
  margin: 0; color: var(--muted); font-size: 12.5px; text-align: center;
  min-height: 17px;
}
.mday__seek {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; border-radius: 6px;
  background: var(--line); cursor: pointer;
  accent-color: var(--accent);
}
.mday__seek::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent);
}
.mday__seek::-moz-range-thumb { width: 16px; height: 16px; border: 0; background: var(--accent); }
.mday__times {
  display: flex; justify-content: space-between;
  color: var(--muted); font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.mday__ctrls { display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; }
.mday__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: none;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--bg-3); color: var(--text);
  cursor: pointer; transition: .15s; padding: 0;
}
.mday__btn:hover { border-color: var(--accent); color: var(--accent-2); }
.mday__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mday__btn .ico { width: 18px; height: 18px; }
.mday__btn--main { background: var(--accent); color: #171310; width: 52px; height: 52px; border-color: var(--accent); }
.mday__btn--main .ico { width: 22px; height: 22px; }
.mday__btn.is-on { border-color: var(--accent); color: var(--accent-2); }
.mday__btn--main.is-on { color: #171310; }
/* 30.09.2026, жалоба владельца с мобильной версии: «на кнопке плей стрелка и
   пауза горят оранжевым при включении и сливаются с основным фоном кнопки.
   Фон кнопки не меняем, только стрелку и паузу — в чёрный при включении, при
   выключенной она и так чёрная».

   НАСТОЯЩАЯ ПРИЧИНА, установлена по скриншоту с телефона владельца. Раньше я
   искал её в data-on="1" и не нашёл: на живом сайте и локально значок был
   чёрным в обоих состояниях. На телефоне виновато НАВЕДЕНИЕ.
   Строка 174: .mday__btn:hover даёт кнопке color: var(--accent-2) — светло-
   оранжевый. Значок рисуется через fill="currentColor", то есть берёт цвет
   кнопки, а фон у главной кнопки оранжевый: светло-оранжевый значок на
   оранжевом фоне и пропадает. На мыши такого не видно — навести и увести
   курсор можно. На телефоне палец оставляет кнопку в «залипшем» наведении:
   нажали «плей» — значок сразу стал светлым, и это длится дальше. Отсюда и
   «горит оранжевым при включении» (включение = нажатие), и «при выключенной
   уже чёрная» (до нажатия наведения ещё не было).
   Поэтому здесь перечислены ВСЕ состояния, в которых кнопка меняет вид:
   базовое, :hover, :active, :focus-visible, .is-on и [data-on="1"] (им
   включается «пауза» вместо «плей»). Правило стоит ПОСЛЕ общих .mday__btn:hover
   и .mday__btn.is-on и при равной специфичности выигрывает у них по порядку.
   Фон не трогаем: он остаётся var(--accent), оранжевым, как просил владелец. */
.mday__btn--main,
.mday__btn--main:hover,
.mday__btn--main:active,
.mday__btn--main:focus-visible,
.mday__btn--main.is-on,
.mday__btn--main[data-on="1"] { color: #171310; }
.mday__btn--text {
  width: auto; border-radius: 20px; padding: 6px 14px;
  font-size: 13px; color: var(--muted);
}
.mday__btn--text:hover { color: var(--accent-2); }

/* Значок главной кнопки: пока песня не играет — плей, пока играет — пауза.
   Рисуются оба, и нужный включается классом. Иначе на странице с плеером не
   работало бы «плей/пауза»: подменять значок на лету пришлось бы вручную. */
.mday__ico-pause { display: none; }
.mday__btn[data-on="1"] .mday__ico-play { display: none; }
.mday__btn[data-on="1"] .mday__ico-pause { display: block; }

/* ---------- Блок альбома ----------
   Решение владельца 30.09.2026: блок альбома — это активная кнопка, нажатие
   переносит все песни в плеер. Вид обязан говорить об этом заранее, иначе
   посетитель видит три блока с картинками и не понимает, что с ними делать.
   Правило наведения живёт здесь, на странице музыки, а не в общем style.css:
   блок альбома выводится только здесь. */
.pls__box { cursor: pointer; }
.pls__box:hover { border-color: var(--accent); }
.pls__box:focus-within { border-color: var(--accent); }
/* Внутри блока остаются свои кнопки, и наведение на них не должно выглядеть
   как «нажат весь блок». */
.pls__add:hover { border-color: var(--accent); }
.pls__box .pls__row { cursor: default; }
/* Подсказка под обложкой: что сделает нажатие. Треугольник нарисован
   рамками, а не значком: маска через переменную молча ломается, если
   переменной нет, и подсказка просто исчезает. */
.pls__cue {
  margin: 0; font-size: 13px; color: var(--muted);
  display: flex; align-items: center; gap: 8px;
}
.pls__cue::before {
  content: ''; flex: none;
  width: 0; height: 0;
  border-left: 9px solid var(--accent);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

/* ---------- Нижняя полоса на странице музыки ----------
   Решение владельца 29.09.2026 (вариант 1): на странице музыки плеер в окне,
   на остальных страницах полоса снизу. Прячется только внутренняя часть полосы,
   а не вся полоса: круглая кнопка-нота, которой возвращают скрытый плеер,
   лежит снаружи и должна остаться. Иначе на этой странице плеер было бы уже
   не вернуть.

   Класс ставит music-day.js, а снимает main.js при каждом переходе без
   перезагрузки: переходы на сайте меняют только содержимое #pdv-content, а
   класс на body иначе остался бы и спрятал полосу на всех страницах сразу. */
body.mday-nobar .pdvbar__inner { display: none; }
body.mday-nobar .pdvbar {
  background: none; border-top: 0; backdrop-filter: none;
  padding: 0; pointer-events: none;
}
/* Страница держит отступ под полосу — без этого под окном осталась бы пустая
   полоса во всю высоту экрана. */
body.mday-nobar.has-player { padding-bottom: 0; }
body.mday-nobar.has-player .nav {
  max-height: none; padding-bottom: 0;
}