/* 🏁 Milestones beside every piece, and the toasts (js/milestones.js,
   2026-09-29). Practice is the game's cyan, skill its gold: the For You
   lab's two bars, eight segments each. Its own file, per the rule. */

/* ---------------------------------------------------------------- the row */
.song-card .sc-ms {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px;
  margin-top: 7px; font-size: 11.5px; line-height: 1.2;
}
.sc-ms .ms-part { display: inline-flex; align-items: center; gap: 6px; }
.sc-ms .ms-lab {
  font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #9aa0b4;
  min-width: 52px;
}
.sc-ms .ms-bar { display: inline-flex; gap: 2px; }
.sc-ms .ms-bar i {
  position: relative; display: block; width: 13px; height: 7px; border-radius: 2px;
  background: rgba(255, 255, 255, .12); overflow: hidden;
}
.sc-ms .ms-bar i b { position: absolute; left: 0; top: 0; bottom: 0; opacity: .45; }
.sc-ms .ms-bar.w i b, .sc-ms .ms-bar.w i.on { background: var(--cyan, #34d3ff); }
.sc-ms .ms-bar.r i b, .sc-ms .ms-bar.r i.on { background: var(--gold, #ffd75e); }
.sc-ms .ms-bar i.on b { opacity: 1; }
.sc-ms .ms-n { color: #cfd3e0; font-variant-numeric: tabular-nums; font-weight: 700; min-width: 24px; }
.sc-ms .ms-next { color: var(--cyan, #34d3ff); font-weight: 700; }
.sc-ms .ms-next span { font-weight: 800; }
@media (max-width: 520px) {
  .sc-ms { gap: 4px 10px; }
  .sc-ms .ms-bar i { width: 10px; }
  .sc-ms .ms-lab { min-width: 46px; }
  .sc-ms .ms-next { flex-basis: 100%; }
}

/* ---------------------------------------------------------------- the toasts */
#ms-toasts {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 210;
  display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none;
  width: min(460px, calc(100vw - 24px));
}
.ms-toast {
  pointer-events: auto; cursor: pointer;
  display: flex; align-items: center; gap: 12px; max-width: 100%;
  background: rgba(8, 10, 22, .94); color: #fff;
  border: 1px solid rgba(52, 211, 255, .75); border-radius: 14px;
  padding: 9px 16px 9px 12px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .55), 0 0 18px rgba(52, 211, 255, .18);
  font-family: "Avenir Next", "Segoe UI", system-ui, sans-serif;
  animation: ms-in .32s cubic-bezier(.2, 1.4, .4, 1);
}
.ms-toast.summary { border-color: var(--gold, #ffd75e); box-shadow: 0 6px 24px rgba(0, 0, 0, .55), 0 0 18px rgba(255, 215, 94, .22); }
.ms-toast.live { padding: 6px 14px 6px 10px; opacity: .96; }
.ms-toast.out { opacity: 0; transform: translateY(-10px); transition: opacity .35s, transform .35s; }
.ms-toast .ms-ico { font-size: 26px; line-height: 1; }
.ms-toast.live .ms-ico { font-size: 20px; }
.ms-toast .ms-txt { display: flex; flex-direction: column; gap: 2px; text-align: left; font-size: 14px; line-height: 1.3; }
.ms-toast .ms-txt small {
  font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--cyan, #34d3ff);
}
.ms-toast.summary .ms-txt small { color: var(--gold, #ffd75e); }
.ms-toast .ms-txt b { color: var(--gold, #ffd75e); }
@keyframes ms-in { from { opacity: 0; transform: translateY(-14px) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ms-toast { animation: none; } }