/* ═══ Музыка (задача 7): релизы и чек-лист от даты выхода ═══════════
   Своего макета нет, собрано по трём утверждённым, как разделы задачи 5:
   · карточка-герой со свечением, тон розовый, как точки «Музыки» в календаре;
   · обратный отсчёт одной огромной цифрой, как в Box Box Club;
   · чек-лист галочками, как «Сейчас» на «Сегодня», галочка розовая;
   · просроченное жёлтым, как «молчит» у клиентов: предупреждение, а не ошибка.
   Каркас (m-page, m-cols, m-hero, m-card) из css/more.css. */

.tone-pink { background: #2A1F29; color: #E890D2; }       /* кружок раздела в шторке «Ещё» */
/* круглая кнопка записи закрывала бы даты чек-листа справа, как суммы на «Деньгах»; релиз добавляет «+» в шапке */
body[data-route="music"] .fab { display: none; }

/* ── шапка ────────────────────────────────────────────────────── */
.ms-head-acts { flex: none; display: flex; align-items: center; gap: 8px; }
.ms-add {
  flex: none; width: 44px; height: 44px; border-radius: 22px; display: grid; place-items: center;
  border: 1px solid var(--line-3); background: var(--surface); color: var(--ink); transition: background-color .15s;
}
.ms-add:hover { background: var(--surface-2); }
.ms-back {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 22px;
  border: 1px solid rgba(232, 144, 210, .35); color: #E890D2; font-size: 14px; white-space: nowrap;
  transition: background-color .15s;
}
.ms-back:hover { color: #F2B6E2; background: rgba(232, 144, 210, .08); }

/* ── герой: обратный отсчёт ───────────────────────────────────── */
.ms-hero {
  --hero-a: #3A2236; --hero-b: #1D1720; --glow: rgba(232, 144, 210, .42); --glow-2: rgba(200, 110, 190, .12);
  gap: 10px; padding: 22px 16px 20px;
}
.ms-hero > .ms-edit { position: absolute; top: 10px; right: 10px; color: #CFC4CB; }
.ms-title {
  max-width: 100%; padding: 0 40px; font-family: var(--disp); font-size: 22px; font-weight: 600; line-height: 1.2;
  color: #FFF8F3; text-align: center; overflow-wrap: anywhere;
}
.ms-count { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 2px 0 4px; }
.ms-big {
  font-family: var(--disp); font-size: 104px; font-weight: 700; line-height: .95; letter-spacing: -.04em;
  color: #FFF6FB; text-shadow: 0 0 36px rgba(232, 144, 210, .5);
}
.ms-big.is-word { font-size: 44px; line-height: 1.15; letter-spacing: -.02em; }
.ms-count > span { font-family: var(--disp); font-size: 15px; font-weight: 600; color: #DCCDD7; }
.ms-date {
  height: 30px; padding: 0 12px; border-radius: 15px; display: inline-flex; align-items: center; white-space: nowrap;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1); font-size: 13px; color: #E2D9DE;
}
.ms-prog {
  display: flex; flex-direction: column; align-items: center; gap: 9px; width: 100%; margin-top: 8px; padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .07);
}
/* полоска из пунктов по порядку: сделано залито, сегодня обведено, просрочено жёлтым */
.ms-segs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; width: 100%; max-width: 280px; }
.ms-segs i { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .1); }
.ms-segs i.is-done { background: linear-gradient(90deg, #F5B8E4, #E890D2); box-shadow: 0 0 10px rgba(232, 144, 210, .45); }
.ms-segs i.is-today { background: rgba(232, 144, 210, .18); box-shadow: inset 0 0 0 1.5px #E890D2; }
.ms-segs i.is-late { background: #F2C14E; }
.ms-segs i.is-missed { background: rgba(255, 255, 255, .04); }
.ms-prog-t { font-family: var(--mono); font-size: 12px; color: #CFC4CB; }
.ms-note { max-width: 320px; font-size: 13px; line-height: 1.45; color: #CFC4CB; text-align: center; }

.ms-rule {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 18px;
  background: rgba(232, 144, 210, .07); border: 1px solid rgba(232, 144, 210, .2);
  font-size: 14px; line-height: 1.4; color: #E9DDE5;
}
.ms-rule svg { flex: none; color: #E890D2; }
.ms-next { width: 100%; }

/* ── чек-лист ─────────────────────────────────────────────────── */
.ms-sec, .ms-steps { display: flex; flex-direction: column; gap: 10px; }
.ms-steps { gap: 8px; }
.ms-step {
  gap: 12px; min-height: 62px; padding: 10px 14px 10px 10px; border-radius: 18px;
  background: var(--surface); border: 1px solid var(--line);
}
.ms-step:hover { background: var(--surface-hover); }
.ms-step input:checked { background: #E890D2; }
.ms-step-t { flex: 1; display: flex; flex-direction: column; gap: 3px; line-height: 1.3; }
.ms-step-n { font-size: 15px; font-weight: 500; }
.ms-step-t small { font-size: 12px; color: var(--ink-3); }
.ms-step-d { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: right; }
.ms-step-d b { font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--ink-2); }
.ms-step-d small { font-family: var(--mono); font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.ms-step.done .ms-step-t, .ms-step.done .ms-step-d { text-decoration: none; }   /* зачёркнуто только название */
.ms-step.done .ms-step-d b { color: var(--ink-3); }
.ms-step.is-today { background: linear-gradient(180deg, #24192A 0%, #161618 100%); border-color: rgba(232, 144, 210, .4); }
.ms-step.is-today .ms-step-d small { color: #E890D2; }
.ms-step.is-late { border-color: rgba(242, 193, 78, .32); }
.ms-step.is-late .ms-step-d b, .ms-step.is-late .ms-step-d small { color: #F2C14E; }
.ms-step.is-missed .ms-step-n { color: var(--ink-3); }
.ms-day {
  display: flex; align-items: center; gap: 10px; margin: 4px 2px; font-family: var(--mono); font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; color: #E890D2; white-space: nowrap;
}
.ms-day::before, .ms-day::after { content: ''; flex: 1; height: 1px; background: rgba(232, 144, 210, .28); }

/* ── итоги ────────────────────────────────────────────────────── */
.ms-res { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ms-res-tile {
  display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 14px; border-radius: 20px;
  background: var(--surface); border: 1px solid var(--line);
}
.ms-res-tile b { font-family: var(--disp); font-size: 20px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-res-tile span { font-size: 12px; color: var(--ink-3); }
.ms-res-tile.is-empty b { color: #5E5A55; }
.ms-sum {
  padding: 14px 16px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line);
  font-size: 14px; line-height: 1.5; color: var(--ink-2); white-space: pre-line; overflow-wrap: anywhere;
}
.ms-res-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

/* ── остальные релизы ─────────────────────────────────────────── */
.ms-rel {
  display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 10px 10px 10px 12px;
  border-top: 1px solid var(--line); color: var(--ink); transition: background-color .15s;
}
.ms-rel:first-child { border-top: 0; }
.ms-rel:hover { color: var(--ink); background: var(--surface-hover); }
.ms-rel-d {
  flex: none; width: 48px; height: 48px; border-radius: 14px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px; background: var(--surface-3); line-height: 1.05;
}
.ms-rel-d b { font-family: var(--disp); font-size: 17px; font-weight: 700; }
.ms-rel-d small { font-family: var(--mono); font-size: 10px; text-transform: uppercase; color: var(--ink-3); }
.ms-rel-d.is-ahead { background: #2A1F29; }
.ms-rel-d.is-ahead b { color: #E890D2; }
.ms-rel-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ms-rel-t { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-rel-txt small { font-size: 13px; line-height: 1.35; color: var(--ink-3); }

/* ── шторка «Шаблон» ─────────────────────────────────────────── */
.ms-tpl-list { display: flex; flex-direction: column; gap: 6px; }
.ms-tpl-row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 10px 10px 14px;
  border-radius: 16px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-align: left;
  transition: background-color .15s;
}
button.ms-tpl-row:hover { background: var(--surface-hover); }
.ms-tpl-when { flex: none; width: 104px; font-family: var(--mono); font-size: 11px; line-height: 1.35; color: #E890D2; }
.ms-tpl-t { flex: 1; min-width: 0; font-size: 15px; line-height: 1.3; }
.ms-tpl-row.is-off .ms-tpl-when, .ms-tpl-row.is-off .ms-tpl-t { color: var(--ink-3); }
.ms-tpl-back {
  flex: none; min-height: 44px; padding: 0 16px; border-radius: 22px; border: 1px solid rgba(255, 255, 255, .14);
  font-size: 14px; color: var(--ink-2); transition: background-color .15s;
}
.ms-tpl-back:hover { color: var(--ink); background: rgba(255, 255, 255, .05); }
.ms-tpl-add { gap: 8px; width: 100%; margin-top: 12px; }
.ms-tpl-lbl { margin: 22px 0 8px; }
.ms-rule-form { gap: 12px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }

/* пункт релиза в календаре ведёт ссылкой в раздел: цвет текста как у события-кнопки */
a.cal-ev, a.cal-ev:hover { color: var(--ink); }

/* ── компьютер ────────────────────────────────────────────────── */
@media (min-width: 1180px) {
  .ms-hero { padding: 26px 20px 22px; }
  .ms-big { font-size: 128px; }
}