/*
 * Watchiet Music: responsive dark shell. Mobile-first.
 * Test targets: 320, 360, 390, 768, 1024, 1440 px.
 * The button grid uses container queries so it also adapts to narrow theme content areas.
 */
.wmds,
.wmds *,
.wmds *::before,
.wmds *::after {
	box-sizing: border-box;
}

/* The black shell sits inside the theme's content area. The theme's own header, footer and page title are left alone so their text stays readable. */

.wmds {
	width: 100%;
	max-width: var(--wmds-max);
	margin: 0 auto;
	padding: 0 var(--wmds-space-4);
	color: var(--wmds-text);
	background: var(--wmds-bg);
	font-family: var(--wmds-font);
	font-size: var(--wmds-fs-0);
	line-height: 1.55;
	overflow-wrap: break-word;
	position: relative;
}

.wmds ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wmds img {
	max-width: 100%;
	height: auto;
}

/* Skip link: visually hidden (still focusable) until it receives keyboard focus. */
.wmds .wmds-skip {
	position: absolute;
	left: var(--wmds-space-3);
	top: var(--wmds-space-3);
	z-index: 100000;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	background: #fff;
	color: #000;
	border-radius: var(--wmds-radius-sm);
	text-decoration: none;
}

.wmds .wmds-skip:focus {
	width: auto;
	height: auto;
	margin: 0;
	padding: var(--wmds-space-3) var(--wmds-space-4);
	overflow: visible;
	clip-path: none;
}

/* Visible focus for everything interactive. */
.wmds a:focus-visible,
.wmds button:focus-visible,
.wmds [tabindex]:focus-visible {
	outline: 3px solid var(--wmds-focus);
	outline-offset: 2px;
}

.wmds .wmds-content:focus {
	outline: none;
}

/* Header. */
.wmds .wmds-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wmds-space-3);
	padding: var(--wmds-space-4) 0;
	border-bottom: 1px solid var(--wmds-border);
}

.wmds .wmds-brand {
	display: flex;
	align-items: center;
	gap: var(--wmds-space-3);
	min-height: var(--wmds-tap);
}

.wmds .wmds-logo {
	max-height: 48px;
	width: auto;
}

.wmds .wmds-brand-name {
	font-size: var(--wmds-fs-1);
	font-weight: 800;
	letter-spacing: 0.02em;
	color: var(--wmds-text);
}

/* Navigation. Top nav only from tablet width; bottom nav on phones. */
.wmds .wmds-nav--top {
	display: none;
}

.wmds .wmds-nav-item {
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wmds-space-2);
	min-height: var(--wmds-tap);
	min-width: var(--wmds-tap);
	padding: 0 var(--wmds-space-4);
	color: var(--wmds-muted);
	border-radius: var(--wmds-radius-sm);
}

.wmds .wmds-soon {
	white-space: nowrap;
	padding: 0 var(--wmds-space-2);
	font-size: 0.75rem;
	color: var(--wmds-on-primary);
	background: var(--wmds-primary);
	border-radius: 999px;
}

.wmds .wmds-nav--bottom {
	position: sticky;
	bottom: 0;
	z-index: 10;
	margin: var(--wmds-space-5) calc(var(--wmds-space-4) * -1) 0;
	padding-bottom: env(safe-area-inset-bottom, 0);
	background: #0a0a0d;
	border-top: 1px solid var(--wmds-border);
}

.wmds .wmds-nav--bottom ul {
	display: grid;
	/* Four across on phones; wraps to more rows when text is enlarged (WCAG reflow). */
	grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
}

.wmds .wmds-nav--bottom .wmds-nav-item {
	width: 100%;
	padding: 0 var(--wmds-space-1);
	font-size: 0.85rem;
	text-align: center;
	white-space: normal;
}

/* Offline notice. */
.wmds .wmds-offline {
	margin-top: var(--wmds-space-4);
	padding: var(--wmds-space-3) var(--wmds-space-4);
	background: #2b1d00;
	color: #ffe2a8;
	border: 1px solid #b7791f;
	border-radius: var(--wmds-radius-sm);
}

.wmds .wmds-offline[hidden] {
	display: none;
}

/* Content. */
.wmds .wmds-content {
	padding: var(--wmds-space-5) 0 var(--wmds-space-4);
	/* The grid adapts to the width the THEME gives the shell, not only the screen width. */
	container-type: inline-size;
	container-name: wmds-content;
}

/* Hero. */
.wmds .wmds-hero {
	position: relative;
	overflow: hidden;
	margin: 0 0 var(--wmds-space-6);
	padding: var(--wmds-space-6) var(--wmds-space-5);
	border: 1px solid var(--wmds-border);
	border-radius: calc(var(--wmds-radius) + 4px);
	background: var(--wmds-surface-2);
	background:
		radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--wmds-primary) 55%, #000) 0%, rgba(0, 0, 0, 0) 60%),
		radial-gradient(90% 120% at 100% 100%, color-mix(in srgb, var(--wmds-accent) 45%, #000) 0%, rgba(0, 0, 0, 0) 60%),
		var(--wmds-surface);
}

.wmds .wmds-title {
	margin: 0 0 var(--wmds-space-2);
	font-size: var(--wmds-fs-3);
	font-weight: 800;
	line-height: 1.1;
	color: var(--wmds-text);
	max-width: 18ch;
}

.wmds .wmds-lead {
	margin: 0;
	max-width: 36rem;
	font-size: var(--wmds-fs-1);
	color: #e6e8ee;
}

/* Decorative equaliser bars (hidden from assistive technology). */
.wmds .wmds-bars {
	display: flex;
	align-items: flex-end;
	gap: 4px;
	height: 32px;
	margin-bottom: var(--wmds-space-4);
}

.wmds .wmds-bars i {
	display: block;
	width: 6px;
	height: 100%;
	border-radius: 3px;
	background: #fff;
	transform-origin: bottom;
	animation: wmds-bar 1.2s ease-in-out infinite;
}

.wmds .wmds-bars i:nth-child(2) { animation-delay: -0.3s; }
.wmds .wmds-bars i:nth-child(3) { animation-delay: -0.6s; }
.wmds .wmds-bars i:nth-child(4) { animation-delay: -0.9s; }
.wmds .wmds-bars i:nth-child(5) { animation-delay: -0.45s; }

@keyframes wmds-bar {
	0%, 100% { transform: scaleY(0.25); }
	50% { transform: scaleY(1); }
}

.wmds .wmds-subtitle {
	margin: 0 0 var(--wmds-space-3);
	font-size: var(--wmds-fs-1);
	color: var(--wmds-text);
}

/* Buttons for functions that arrive in later phases. */
.wmds .wmds-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wmds-space-3);
}

.wmds .wmds-card {
	display: flex;
	min-width: 0;
}

.wmds .wmds-btn {
	appearance: none;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wmds-space-1);
	width: 100%;
	min-height: var(--wmds-tap);
	margin: 0;
	padding: var(--wmds-space-4);
	font: inherit;
	text-align: left;
	color: var(--wmds-text);
	background: var(--wmds-surface);
	border: 1px solid var(--wmds-border);
	border-radius: var(--wmds-radius);
	cursor: not-allowed;
}

.wmds .wmds-btn:hover {
	border-color: #4a4f5c;
	background: var(--wmds-surface-2);
}

.wmds .wmds-phase {
	display: inline-block;
	padding: 2px var(--wmds-space-3);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wmds-on-primary);
	background: var(--wmds-primary);
	border-radius: 999px;
}

.wmds .wmds-card-title {
	max-width: 100%;
	overflow-wrap: anywhere;
	font-weight: 700;
	font-size: var(--wmds-fs-1);
	line-height: 1.25;
}

.wmds .wmds-card-text {
	max-width: 100%;
	overflow-wrap: anywhere;
	color: var(--wmds-muted);
}

.wmds .wmds-status {
	max-width: 100%;
	overflow-wrap: anywhere;
	margin-top: auto;
	padding-top: var(--wmds-space-2);
	font-size: 0.85rem;
	font-weight: 600;
	color: #ffd089;
}

/* Large phones / small tablets. */
@media (min-width: 600px) {
	.wmds {
		padding: 0 var(--wmds-space-5);
	}

	.wmds .wmds-nav--bottom {
		margin: var(--wmds-space-5) calc(var(--wmds-space-5) * -1) 0;
	}

	.wmds .wmds-hero {
		padding: var(--wmds-space-7) var(--wmds-space-6);
	}
}

/* Tablets and up: top navigation replaces the bottom bar. */
@media (min-width: 768px) {
	.wmds .wmds-nav--top {
		display: block;
	}

	.wmds .wmds-nav--top ul {
		display: flex;
		flex-wrap: wrap;
		gap: var(--wmds-space-2);
	}

	.wmds .wmds-nav--bottom {
		display: none;
	}
}

/* Laptops. */
@media (min-width: 1024px) {
	.wmds {
		padding: 0 var(--wmds-space-6);
	}
}

/* Button grid: columns depend on the space available to the content area. */
@container wmds-content (min-width: 560px) {
	.wmds .wmds-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@container wmds-content (min-width: 860px) {
	.wmds .wmds-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Wide desktops. */
@media (min-width: 1440px) {
	.wmds {
		--wmds-max: 1320px;
	}
}

/* Respect reduced-motion and forced-colours preferences. */
@media (prefers-reduced-motion: reduce) {
	.wmds *,
	.wmds *::before,
	.wmds *::after {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}

	.wmds .wmds-bars i {
		transform: scaleY(0.6);
	}
}

@media (forced-colors: active) {
	.wmds .wmds-btn,
	.wmds .wmds-hero {
		border: 1px solid CanvasText;
	}
}

/* ------------------------------------------------------------------
 * Phase 2: account screens, forms, buttons and notices (dark, mobile first)
 * ------------------------------------------------------------------ */
.wmds a.wmds-brand-link {
	display: inline-flex;
	align-items: center;
	gap: var(--wmds-space-3);
	color: var(--wmds-text);
	text-decoration: none;
}

.wmds a.wmds-nav-item {
	text-decoration: none;
	color: var(--wmds-text);
}

.wmds a.wmds-nav-item.is-current {
	background: var(--wmds-surface-2);
	box-shadow: inset 0 -3px 0 var(--wmds-primary);
}

.wmds a.wmds-nav-item:hover {
	background: var(--wmds-surface-2);
}

/* Action buttons and links (live, unlike the disabled phase buttons). */
.wmds .wmds-action {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--wmds-tap);
	min-width: var(--wmds-tap);
	padding: 0 var(--wmds-space-5);
	margin: 0;
	font: inherit;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	color: var(--wmds-text);
	background: transparent;
	border: 2px solid #ffffff;
	border-radius: 999px;
	cursor: pointer;
}

.wmds .wmds-action:hover {
	background: #1d1f26;
}

.wmds .wmds-action--primary {
	color: var(--wmds-on-primary);
	background: var(--wmds-primary);
	border-color: var(--wmds-primary);
}

.wmds .wmds-action--primary:hover {
	background: var(--wmds-primary);
	filter: brightness(1.15);
}

.wmds .wmds-action--danger {
	color: #fff;
	background: #b42318;
	border-color: #b42318;
}

.wmds .wmds-action--danger:hover {
	background: #d92d20;
}

.wmds .wmds-cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wmds-space-3);
	margin: var(--wmds-space-5) 0 0;
}

/* Panel that holds account forms. */
.wmds .wmds-panel {
	padding: var(--wmds-space-5) var(--wmds-space-4);
	background: var(--wmds-surface);
	border: 1px solid var(--wmds-border);
	border-radius: calc(var(--wmds-radius) + 4px);
}

.wmds .wmds-h2 {
	margin: 0 0 var(--wmds-space-4);
	font-size: var(--wmds-fs-2);
	line-height: 1.2;
	color: var(--wmds-text);
}

.wmds .wmds-h3 {
	margin: var(--wmds-space-6) 0 var(--wmds-space-3);
	font-size: var(--wmds-fs-1);
	color: var(--wmds-text);
}

.wmds .wmds-muted,
.wmds .wmds-hint {
	color: var(--wmds-muted);
}

.wmds .wmds-hint {
	display: block;
	margin-top: var(--wmds-space-1);
	font-size: 0.875rem;
}

.wmds a {
	color: #9ec1ff;
}

/* Notices. */
.wmds .wmds-notice {
	margin: 0 0 var(--wmds-space-4);
	padding: var(--wmds-space-3) var(--wmds-space-4);
	border: 1px solid;
	border-radius: var(--wmds-radius-sm);
}

.wmds .wmds-notice p {
	margin: 0;
}

.wmds .wmds-notice p + p {
	margin-top: var(--wmds-space-2);
}

.wmds .wmds-notice--success {
	background: #0e2417;
	border-color: #1f7a45;
	color: #c9f2d6;
}

.wmds .wmds-notice--error {
	background: #2b1010;
	border-color: #b42318;
	color: #ffd7d2;
}

.wmds .wmds-notice--info {
	background: #0f1c2e;
	border-color: #3b6db3;
	color: #cfe3ff;
}

/* Forms. */
.wmds .wmds-form {
	display: block;
	max-width: 40rem;
}

.wmds .wmds-field {
	margin: 0 0 var(--wmds-space-4);
}

.wmds .wmds-field label {
	display: block;
	margin-bottom: var(--wmds-space-1);
	font-weight: 600;
}

.wmds .wmds-req {
	font-weight: 400;
	color: var(--wmds-muted);
}

.wmds .wmds-input {
	display: block;
	width: 100%;
	max-width: 100%;
	min-height: var(--wmds-tap);
	padding: var(--wmds-space-2) var(--wmds-space-3);
	font: inherit;
	font-size: max(16px, var(--wmds-fs-0));
	color: var(--wmds-text);
	background: #0a0a0d;
	border: 1px solid #5a6070;
	border-radius: var(--wmds-radius-sm);
}

.wmds textarea.wmds-input {
	min-height: 8rem;
	resize: vertical;
}

.wmds .wmds-input::placeholder {
	color: #9aa0ad;
}

.wmds .wmds-input:focus-visible {
	outline: 3px solid var(--wmds-focus);
	outline-offset: 2px;
}

.wmds .wmds-input[aria-invalid="true"] {
	border-color: #ff6b5e;
	border-width: 2px;
}

.wmds .wmds-fieldset {
	margin: 0 0 var(--wmds-space-4);
	padding: 0;
	border: 0;
	min-width: 0;
}

.wmds .wmds-fieldset legend {
	padding: 0;
	margin-bottom: var(--wmds-space-2);
	font-weight: 700;
}

.wmds .wmds-radios,
.wmds .wmds-checks {
	display: grid;
	gap: var(--wmds-space-2);
}

.wmds .wmds-checks {
	grid-template-columns: repeat(auto-fill, minmax(min(8.5rem, 100%), 1fr));
}

.wmds .wmds-checks--col {
	grid-template-columns: 1fr;
}

.wmds .wmds-radio,
.wmds .wmds-check {
	display: flex;
	align-items: flex-start;
	gap: var(--wmds-space-3);
	min-height: var(--wmds-tap);
	padding: var(--wmds-space-2) var(--wmds-space-3);
	background: #0a0a0d;
	border: 1px solid var(--wmds-border);
	border-radius: var(--wmds-radius-sm);
	font-weight: 400;
	cursor: pointer;
}

.wmds .wmds-field .wmds-check {
	display: flex;
	margin-bottom: 0;
	font-weight: 400;
}

.wmds .wmds-radio input,
.wmds .wmds-check input {
	flex: 0 0 auto;
	width: 1.25rem;
	height: 1.25rem;
	margin: 0.15rem 0 0;
	accent-color: var(--wmds-primary);
}

/* Spam trap: out of sight, not display:none (some bots skip those). */
.wmds .wmds-hp {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Account tabs. */
.wmds .wmds-tabs ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wmds-space-2);
	margin-bottom: var(--wmds-space-5);
}

.wmds .wmds-tab {
	display: inline-flex;
	align-items: center;
	min-height: var(--wmds-tap);
	padding: 0 var(--wmds-space-4);
	text-decoration: none;
	color: var(--wmds-text);
	background: var(--wmds-surface-2);
	border: 1px solid var(--wmds-border);
	border-radius: 999px;
}

.wmds .wmds-tab.is-current {
	color: var(--wmds-on-primary);
	background: var(--wmds-primary);
	border-color: var(--wmds-primary);
}

/* Facts list. */
.wmds .wmds-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
	gap: var(--wmds-space-3);
	margin: 0 0 var(--wmds-space-5);
}

.wmds .wmds-facts div {
	padding: var(--wmds-space-3) var(--wmds-space-4);
	background: #0a0a0d;
	border: 1px solid var(--wmds-border);
	border-radius: var(--wmds-radius-sm);
}

.wmds .wmds-facts dt {
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--wmds-muted);
}

.wmds .wmds-facts dd {
	margin: 0;
	font-weight: 700;
	overflow-wrap: anywhere;
}

/* Following list. */
.wmds .wmds-list-item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wmds-space-3);
	padding: var(--wmds-space-3) 0;
	border-bottom: 1px solid var(--wmds-border);
}

.wmds .wmds-inline-form {
	display: inline;
	margin: 0;
}

.wmds.wmds-follow {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wmds-space-3);
	width: auto;
	max-width: 100%;
	margin: 0;
	padding: var(--wmds-space-2) var(--wmds-space-3);
	border-radius: var(--wmds-radius);
}

@media (min-width: 600px) {
	.wmds .wmds-panel {
		padding: var(--wmds-space-6);
	}
}

@media (forced-colors: active) {
	.wmds .wmds-action,
	.wmds .wmds-input,
	.wmds .wmds-radio,
	.wmds .wmds-check,
	.wmds .wmds-notice {
		border: 2px solid CanvasText;
	}
}

/* Finished phases: the card becomes a live link. */
.wmds .wmds-grid--live { margin-bottom: var(--wmds-space-5); }

.wmds a.wmds-btn--live {
	cursor: pointer;
	text-decoration: none;
	border-color: var(--wmds-primary);
}

.wmds a.wmds-btn--live:hover,
.wmds a.wmds-btn--live:focus-visible {
	background: var(--wmds-surface-2);
	border-color: #ffffff;
}

.wmds .wmds-phase--done { background: #1f7a4d; color: #ffffff; }

.wmds .wmds-status--live { color: #9be7b8; }

/* Back and Home on inner pages. */
.wmds .wmds-pagetools {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wmds-space-3);
	padding: var(--wmds-space-3) 0 0;
}

.wmds .wmds-action--small {
	min-height: var(--wmds-tap);
}

/* Phase 3: music studio. */
.wmds .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.wmds .wmds-h4 {
	margin: var(--wmds-space-5) 0 var(--wmds-space-2);
	font-size: 1.05rem;
	font-weight: 700;
}

.wmds .wmds-crumbs {
	margin: 0 0 var(--wmds-space-3);
}

.wmds .wmds-stack > * + * {
	margin-top: var(--wmds-space-3);
}

.wmds .wmds-release-main {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wmds-space-2);
	min-width: 0;
	overflow-wrap: anywhere;
}

.wmds .wmds-rowactions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wmds-space-2);
}

.wmds .wmds-pill {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	border: 1px solid #475467;
	background: #f2f4f7;
	color: #1d2939;
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.5;
}

.wmds .wmds-pill--approved,
.wmds .wmds-pill--published {
	background: #e6f4ea;
	border-color: #0b5d1e;
	color: #064014;
}

.wmds .wmds-pill--submitted,
.wmds .wmds-pill--scheduled,
.wmds .wmds-pill--takedown_requested {
	background: #fff4d6;
	border-color: #7a5200;
	color: #4d3300;
}

.wmds .wmds-pill--needs_correction,
.wmds .wmds-pill--rejected,
.wmds .wmds-pill--taken_down {
	background: #fde8e6;
	border-color: #b42318;
	color: #7a1810;
}

.wmds .wmds-cover {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: var(--wmds-radius-sm);
	border: 1px solid var(--wmds-border);
	background: var(--wmds-surface-2);
}

.wmds .wmds-audio {
	display: block;
	width: 100%;
	max-width: 480px;
	margin: var(--wmds-space-2) 0;
}

.wmds .wmds-todo {
	margin: var(--wmds-space-2) 0 var(--wmds-space-4) var(--wmds-space-5);
	padding: 0;
	list-style: disc;
}

.wmds .wmds-action--secondary {
	color: var(--wmds-text);
	background: transparent;
	border-color: var(--wmds-border);
}

.wmds .wmds-radio,
.wmds .wmds-check {
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
}

.wmds .wmds-radio span,
.wmds .wmds-check span {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* ---- Phase 4: Listen page and player ---- */
.wmds .wmds-search { margin-bottom: var(--wmds-space-5); }
.wmds .wmds-filters { display: grid; gap: var(--wmds-space-3); grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.wmds .wmds-subnav ul, .wmds .wmds-tabs ul, .wmds .wmds-pager ul { display: flex; flex-wrap: wrap; gap: var(--wmds-space-2); margin: 0 0 var(--wmds-space-4); padding: 0; list-style: none; }
.wmds .wmds-tab { display: inline-flex; align-items: center; min-height: var(--wmds-tap); padding: 0 var(--wmds-space-4); border: 1px solid var(--wmds-border); border-radius: 999px; color: var(--wmds-text); text-decoration: none; }
.wmds .wmds-tab.is-current { background: var(--wmds-primary); color: var(--wmds-on-primary); border-color: var(--wmds-primary); }
.wmds .wmds-grid--releases { display: grid; gap: var(--wmds-space-4); grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); margin: 0 0 var(--wmds-space-5); padding: 0; list-style: none; }
.wmds .wmds-card--release { padding: 0; background: transparent; border: 0; }
.wmds .wmds-release-link { display: flex; flex-direction: column; gap: var(--wmds-space-1); color: var(--wmds-text); text-decoration: none; }
.wmds .wmds-release-link:hover .wmds-card-title { text-decoration: underline; }
.wmds .wmds-card-title { font-weight: 600; overflow-wrap: anywhere; }
.wmds .wmds-card-sub { color: var(--wmds-muted); font-size: 0.9rem; overflow-wrap: anywhere; }
.wmds .wmds-release-link .wmds-cover { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.wmds .wmds-cover--none { display: block; background: var(--wmds-surface-2); border-radius: var(--wmds-radius-sm); aspect-ratio: 1 / 1; max-width: 100%; }
.wmds .wmds-release-head { display: grid; gap: var(--wmds-space-4); grid-template-columns: minmax(0, 1fr); margin-bottom: var(--wmds-space-5); }
.wmds .wmds-release-head .wmds-cover { width: min(220px, 100%); height: auto; }
.wmds .wmds-release-by { font-size: var(--wmds-fs-1); margin: 0 0 var(--wmds-space-2); }
.wmds .wmds-tracks { margin: 0; padding: 0; list-style: none; }
.wmds .wmds-track { display: grid; grid-template-columns: 1.5rem var(--wmds-tap) minmax(0, 1fr) auto; grid-template-areas: "n play main time" ". tools tools tools"; align-items: center; gap: var(--wmds-space-2); padding: var(--wmds-space-3) 0; border-bottom: 1px solid var(--wmds-border); }
.wmds .wmds-track-n { grid-area: n; color: var(--wmds-muted); font-size: 0.85rem; text-align: right; }
.wmds .wmds-play { grid-area: play; display: inline-flex; align-items: center; justify-content: center; width: var(--wmds-tap); height: var(--wmds-tap); padding: 0; color: var(--wmds-on-primary); background: var(--wmds-primary); border: 0; border-radius: 50%; cursor: pointer; }
.wmds .wmds-play[data-playing] { outline: 2px solid var(--wmds-text); outline-offset: 2px; }
.wmds .wmds-play--off { background: var(--wmds-surface-2); color: var(--wmds-muted); cursor: not-allowed; }
.wmds .wmds-track-main { grid-area: main; display: flex; flex-direction: column; min-width: 0; }
.wmds .wmds-track-title { font-weight: 600; overflow-wrap: anywhere; }
.wmds .wmds-track-sub, .wmds .wmds-track-note { color: var(--wmds-muted); font-size: 0.9rem; overflow-wrap: anywhere; }
.wmds .wmds-track-sub a { color: var(--wmds-text); }
.wmds .wmds-track-time { grid-area: time; color: var(--wmds-muted); font-variant-numeric: tabular-nums; }
.wmds .wmds-track-tools { grid-area: tools; display: flex; flex-wrap: wrap; gap: var(--wmds-space-2); align-items: center; }
.wmds .wmds-track-tools form { display: inline-flex; gap: var(--wmds-space-2); align-items: center; margin: 0; }
.wmds .wmds-track.is-unavailable { opacity: 0.8; }
.wmds .wmds-input--small { min-height: 36px; padding: 0 var(--wmds-space-2); }
.wmds .wmds-tag { display: inline-block; padding: 0 var(--wmds-space-2); font-size: 0.75rem; color: var(--wmds-text); border: 1px solid var(--wmds-muted); border-radius: 4px; }

.wmds .wmds-dock { position: sticky; bottom: 0; z-index: 20; margin: var(--wmds-space-5) calc(var(--wmds-space-4) * -1) 0; background: #0a0a0d; border-top: 1px solid var(--wmds-border); }
.wmds .wmds-dock .wmds-nav--bottom { position: static; margin: 0; border-top: 1px solid var(--wmds-border); }
.wmds .wmds-player { display: grid; gap: var(--wmds-space-2); padding: var(--wmds-space-2) var(--wmds-space-4); grid-template-columns: minmax(0, 1fr); }
.wmds .wmds-player-now { display: flex; gap: var(--wmds-space-3); align-items: center; min-width: 0; }
.wmds .wmds-player-cover { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; }
.wmds .wmds-player-text { display: flex; flex-direction: column; min-width: 0; }
.wmds .wmds-player-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wmds .wmds-player-artist { color: var(--wmds-muted); font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wmds .wmds-player-controls, .wmds .wmds-player-extra { display: flex; flex-wrap: wrap; gap: var(--wmds-space-2); align-items: center; justify-content: center; }
.wmds .wmds-pbtn { display: inline-flex; align-items: center; justify-content: center; min-width: var(--wmds-tap); min-height: var(--wmds-tap); padding: 0 var(--wmds-space-2); color: var(--wmds-text); background: var(--wmds-surface-2); border: 1px solid var(--wmds-border); border-radius: 999px; cursor: pointer; font-size: 1.1rem; }
.wmds .wmds-pbtn--main { color: var(--wmds-on-primary); background: var(--wmds-primary); border-color: var(--wmds-primary); }
.wmds .wmds-pbtn[aria-pressed="true"], .wmds .wmds-pbtn[data-mode="all"], .wmds .wmds-pbtn[data-mode="one"] { outline: 2px solid var(--wmds-text); outline-offset: 1px; }
.wmds .wmds-player-seek { display: flex; gap: var(--wmds-space-2); align-items: center; }
.wmds .wmds-range { flex: 1 1 auto; min-width: 0; min-height: var(--wmds-tap); accent-color: var(--wmds-primary); }
.wmds .wmds-range--vol { flex: 0 1 8rem; }
.wmds .wmds-time { font-variant-numeric: tabular-nums; font-size: 0.85rem; color: var(--wmds-muted); }
.wmds .wmds-player-status { min-height: 1.2em; margin: 0; font-size: 0.85rem; color: var(--wmds-muted); text-align: center; }
.wmds .wmds-queue { max-height: 40vh; overflow: auto; padding-top: var(--wmds-space-2); }
.wmds .wmds-queue ol { margin: 0; padding: 0; list-style: none; }
.wmds .wmds-queue li { display: flex; gap: var(--wmds-space-2); align-items: center; }
.wmds .wmds-queue li.is-current { font-weight: 700; }
.wmds .wmds-qplay { flex: 1 1 auto; min-height: var(--wmds-tap); padding: 0 var(--wmds-space-2); color: var(--wmds-text); background: transparent; border: 0; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.wmds .wmds-queue[hidden], .wmds .wmds-player [hidden] { display: none; }
@media (min-width: 768px) {
	.wmds .wmds-release-head { grid-template-columns: 220px minmax(0, 1fr); }
	.wmds .wmds-player { grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr) minmax(0, 1fr); align-items: center; }
	.wmds .wmds-player-seek { grid-column: 2; grid-row: 2; }
	.wmds .wmds-player-controls { grid-column: 2; grid-row: 1; }
	.wmds .wmds-player-now { grid-column: 1; grid-row: 1 / span 2; }
	.wmds .wmds-player-extra { grid-column: 3; grid-row: 1 / span 2; }
	.wmds .wmds-player-status, .wmds .wmds-queue { grid-column: 1 / -1; }
}
@media (max-width: 420px) { .wmds .wmds-track { grid-template-columns: 1.25rem var(--wmds-tap) minmax(0, 1fr); grid-template-areas: "n play main" ". time time" ". tools tools"; } }
.wmds .wmds-track-tools form { flex-wrap: wrap; max-width: 100%; min-width: 0; }
.wmds .wmds-track-tools .wmds-action, .wmds .wmds-track-tools .wmds-input { max-width: 100%; white-space: normal; }
.wmds .wmds-inline-form { max-width: 100%; }
.wmds .wmds-inline-form .wmds-action { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }

/* Phase 5: plans and payments */
.wmds .wmds-grid--plans { display: grid; gap: var(--wmds-space-4); grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); margin: 0 0 var(--wmds-space-5); padding: 0; list-style: none; }
.wmds .wmds-plan { display: flex; flex-direction: column; gap: var(--wmds-space-2); }
.wmds .wmds-plan .wmds-h3 { margin: 0; }
.wmds .wmds-price { font-size: 1.15rem; font-weight: 700; margin: 0; overflow-wrap: anywhere; }
.wmds .wmds-tablewrap { overflow-x: auto; max-width: 100%; }
.wmds .wmds-table { width: 100%; border-collapse: collapse; }
.wmds .wmds-table th, .wmds .wmds-table td { text-align: left; padding: var(--wmds-space-2) var(--wmds-space-3); border-bottom: 1px solid var(--wmds-line, rgba(255, 255, 255, .15)); vertical-align: top; overflow-wrap: anywhere; }
.wmds .wmds-sub { flex-direction: column; align-items: stretch; gap: var(--wmds-space-2); }
.wmds .wmds-sub > * { margin-top: 0; margin-bottom: 0; max-width: 100%; }
.wmds .wmds-sub-actions { display: flex; flex-wrap: wrap; gap: var(--wmds-space-2); align-items: flex-start; }
.wmds .wmds-sub-actions > p { flex: 1 1 100%; }
.wmds .wmds-sub-actions .wmds-inline-form { margin: 0; }
.wmds .wmds-sub details { max-width: 100%; }
.wmds .wmds-action--wrap { max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: center; }

/* Phase 7: distribution view */
.wmds-dist { margin: 0 0 1rem; }
.wmds-dist .wmds-sub { gap: .5rem; }
.wmds-dist-row { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid rgba(127,127,127,.35); }
.wmds-dist-row p { margin: 0 0 .5rem; }
.wmds-inline { display: inline-block; margin: 0; }

/* Phase 8: earnings and payouts. */
.wmds .wmds-table tfoot th, .wmds .wmds-table tfoot td { font-weight: 600; }
.wmds .wmds-table .wmds-inline { margin: 0; }

/* Phase 9: promotion, reviews, reports, licensing. */
.wmds .wmds-badge--sponsored { display: inline-block; padding: .1rem .5rem; border: 1px solid currentColor; border-radius: 3px; font-size: .8em; font-weight: 600; }
.wmds .wmds-sponsored { margin: 0 0 1rem; padding: .75rem; border: 1px dashed rgba(127,127,127,.6); }
.wmds .wmds-details { margin: .75rem 0; }
.wmds .wmds-details summary { cursor: pointer; font-weight: 600; }
.wmds .wmds-review { margin: 0 0 .75rem; padding: 0 0 .75rem; border-bottom: 1px solid rgba(127,127,127,.35); }
.wmds .wmds-enquiry .wmds-field, .wmds .wmds-details .wmds-field { margin: 0 0 .6rem; }

/* Phase 9: keep forms inside narrow screens and keep small inputs easy to tap. */
.wmds .wmds-details, .wmds .wmds-details .wmds-form, .wmds .wmds-details .wmds-field { min-width: 0; max-width: 100%; box-sizing: border-box; }
.wmds .wmds-details .wmds-input, .wmds .wmds-details input[type="date"] { max-width: 100%; min-width: 0; box-sizing: border-box; }
@media (max-width: 600px) {
	.wmds .wmds-input--small { min-height: 44px; }
	.wmds .wmds-card.wmds-enquiry { flex-wrap: wrap; flex-direction: column; align-items: stretch; }
	.wmds .wmds-form.wmds-inline { display: block; max-width: 100%; }
	.wmds .wmds-form.wmds-inline .wmds-input, .wmds .wmds-form.wmds-inline .wmds-action { max-width: 100%; box-sizing: border-box; }
}

.wmds .wmds-details > summary { display: flex; align-items: center; min-height: 44px; }