/**
 * Media Store — Single track / album redesign (Apple-Music-inspired).
 * UI only: premium hero, interactive track rows, album table, equalizer.
 */

/* ── Hero polish ─────────────────────────────────────────────────────────── */
.mst-single-hero__cover {
	border-radius: 14px;
	box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.05);
}
.mst-single-hero__cover-wrap { position: relative; }
.mst-single-hero__cover-wrap::after { /* soft accent glow */
	content: ''; position: absolute; inset: 8% 8% -6% 8%; z-index: -1;
	background: radial-gradient( ellipse at center, rgba(92,110,244,0.35), transparent 70% );
	filter: blur(34px); opacity: 0.8;
}
.mst-single-hero__title { font-size: clamp(1.8rem, 4vw, 2.9rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; }
.mst-single-hero__creator { font-size: 1.15rem; color: var(--mst-accent, #ff5f6d); font-weight: 600; margin-top: 4px; }
.mst-single-hero__metaline { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: rgba(255,255,255,0.5); margin-top: 6px; font-weight: 600; }
.mst-single-hero__actions { gap: 10px; margin-top: 22px; align-items: center; flex-wrap: wrap; }
.mst-single-hero__playbtn { font-weight: 600; gap: 8px; }
.mst-single-hero__actions .mst-card-actions { display: inline-flex; gap: 6px; }

/* ── Track table ─────────────────────────────────────────────────────────── */
.mst-ttable { width: 100%; }
.mst-ttable__head {
	display: grid; align-items: center; gap: 12px; padding: 0 12px 8px;
	font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255,255,255,0.4);
	border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: 6px;
}
.mst-ttable--album .mst-trow, .mst-ttable--album .mst-ttable__head {
	grid-template-columns: 40px minmax(0,2.4fr) minmax(0,1.6fr) minmax(0,1.6fr) auto 56px;
}
.mst-ttable--single .mst-trow { grid-template-columns: 40px 1fr auto 56px; }

.mst-trow {
	display: grid; align-items: center; gap: 12px; height: 50px; padding: 0 12px;
	border-radius: 10px; color: #fff; position: relative;
	transition: background 0.2s cubic-bezier(.2,.8,.2,1);
}
.mst-trow:hover { background: rgba(255,255,255,0.06); }
.mst-trow.is-current { background: rgba(92,110,244,0.1); }

/* Number / play / equalizer cell — the ENTIRE cell is the play button so the
   click always lands (the index/equalizer are decorative overlays). */
.mst-trow__num { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.5); font-variant-numeric: tabular-nums; font-size: 0.9rem; }
.mst-trow__index { transition: opacity 0.15s; pointer-events: none; }
.mst-trow__eq { position: absolute; inset: 0; margin: auto; display: flex; align-items: center; justify-content: center; gap: 2px; opacity: 0; pointer-events: none; }
.mst-trow__play {
	position: absolute; inset: 0; z-index: 2;
	width: 100%; height: 100%; padding: 0; border: 0; background: none; color: #fff; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
}
.mst-trow__play svg { opacity: 0; transition: opacity 0.15s, transform 0.12s; }
.mst-trow:hover .mst-trow__index { opacity: 0; }
.mst-trow:hover .mst-trow__play svg { opacity: 1; }
.mst-trow__play:hover svg { transform: scale(1.15); }

/* Equalizer (playing) */
.mst-trow__eq i { width: 3px; height: 15px; background: var(--mst-accent, #5c6ef4); border-radius: 1px; transform: scaleY(0.3); transform-origin: center bottom; animation: mst-eq 0.95s ease-in-out infinite; }
.mst-trow__eq i:nth-child(2) { animation-delay: 0.18s; }
.mst-trow__eq i:nth-child(3) { animation-delay: 0.36s; }
.mst-trow__eq i:nth-child(4) { animation-delay: 0.12s; }
@keyframes mst-eq { 0%,100% { transform: scaleY(0.28); } 50% { transform: scaleY(1); } }
.mst-trow.is-current .mst-trow__index { opacity: 0; }
.mst-trow.is-current .mst-trow__eq { opacity: 1; }
.mst-trow.is-current:not(.is-playing) .mst-trow__eq i { animation-play-state: paused; }
/* Hover a current row → reveal play to restart/seek */
.mst-trow.is-current:hover .mst-trow__eq { opacity: 0; }
.mst-trow.is-current:hover .mst-trow__play svg { opacity: 1; }

/* Title / artist / album */
.mst-trow__title { min-width: 0; }
.mst-trow__title a { color: #fff; text-decoration: none; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.mst-trow__title a:hover { text-decoration: underline; }
.mst-trow.is-current .mst-trow__title a { color: var(--mst-accent, #8b97ff); }
.mst-trow__artist, .mst-trow__album { min-width: 0; }
.mst-trow__artist a, .mst-trow__album a { color: rgba(255,255,255,0.6); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.mst-trow__artist a:hover, .mst-trow__album a:hover { color: #fff; text-decoration: underline; }
.mst-trow__time { color: rgba(255,255,255,0.5); font-variant-numeric: tabular-nums; font-size: 0.85rem; text-align: right; }

/* Hover-only actions */
.mst-trow__actions { display: flex; align-items: center; gap: 2px; justify-content: flex-end; opacity: 0; transition: opacity 0.18s ease; }
.mst-trow:hover .mst-trow__actions, .mst-trow:focus-within .mst-trow__actions { opacity: 1; }
.mst-trow__act { width: 30px; height: 30px; border: 0; background: none; color: rgba(255,255,255,0.6); cursor: pointer; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; }
.mst-trow__act:hover { color: #fff; background: rgba(255,255,255,0.12); }
.mst-trow__act.mst-card-action--fav.is-active { color: #ff375f; }
.mst-trow__act.mst-card-action--fav.is-active svg { fill: #ff375f; stroke: #ff375f; }

/* Focus-visible (keyboard) */
.mst-trow__play:focus-visible, .mst-trow__act:focus-visible, .mst-trow__title a:focus-visible {
	outline: 2px solid var(--mst-accent, #5c6ef4); outline-offset: 2px; border-radius: 6px;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) { /* tablet: hide Album column */
	.mst-ttable--album .mst-trow, .mst-ttable--album .mst-ttable__head { grid-template-columns: 40px minmax(0,2.4fr) minmax(0,1.6fr) auto 56px; }
	.mst-trow__album, .mst-ttable__head .mst-trow__album { display: none; }
}
@media (max-width: 600px) { /* mobile: stacked, compact */
	.mst-ttable--album .mst-trow, .mst-ttable--album .mst-ttable__head { grid-template-columns: 34px 1fr auto 48px; }
	.mst-trow__artist, .mst-ttable__head .mst-trow__artist { display: none; }
	.mst-ttable--single .mst-trow { grid-template-columns: 34px 1fr auto 48px; }
	.mst-trow__act { width: 36px; height: 36px; } /* 44px-ish touch incl. gap */
	.mst-trow__actions { opacity: 1; } /* no hover on touch — keep More reachable */
	.mst-trow__actions .mst-trow__act:not([data-ms-action="more"]) { display: none; } /* keep only More on phones */
}
@media (hover: none) and (pointer: coarse) {
	.mst-trow__index { opacity: 0; } .mst-trow__play { opacity: 1; } /* play always tappable on touch */
	.mst-trow.is-current .mst-trow__play { opacity: 0; } .mst-trow.is-current .mst-trow__eq { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.mst-trow, .mst-trow__play, .mst-trow__index, .mst-trow__actions, .mst-trow__act { transition: none; }
	.mst-trow__eq i { animation: none; transform: scaleY(0.6); }
}