/**
 * Terovania KAWAI Audio Samples — shared styles (editor + frontend).
 *
 * Values mirror the kawai.eu CA901 reference player (computed styles,
 * 2026-07-04): panel bg #f5f5f5 r6px p16, icon buttons that turn accent
 * red on hover, track rows 8px padding with #e1e1e1 active/hover fill.
 */

.kwusp-audio {
	--kwusp-audio-bg: #f1f1f1;
	--kwusp-audio-fg: #161616;
	--kwusp-audio-body: #2e2e2e;
	--kwusp-audio-soft: #484848;
	--kwusp-audio-muted: #636363;
	--kwusp-audio-line: #bebebe;
	--kwusp-audio-accent: #fe0b19;
	--kwusp-audio-card: #f5f5f5;
	--kwusp-audio-fill: #e1e1e1;
	--kwusp-audio-radius: 0.375rem;
	--kwusp-audio-transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);

	box-sizing: border-box;
	color: var(--kwusp-audio-fg);
}

.kwusp-audio *,
.kwusp-audio *::before,
.kwusp-audio *::after {
	box-sizing: inherit;
}

.kwusp-audio__heading {
	margin: 0 0 1rem;
	font-size: clamp(1.35rem, 2.3vw, 2rem);
	line-height: 1.15;
	font-weight: 700;
	color: var(--kwusp-audio-fg);
}

.kwusp-audio__panel {
	width: 100%;
	padding: 1rem;
	border-radius: var(--kwusp-audio-radius);
	background: var(--kwusp-audio-card);
}

.kwusp-audio__native {
	display: none;
}

.kwusp-audio__transport {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.kwusp-audio__play-toggle {
	width: 1.5rem;
	height: 1.5rem;
	flex: 0 0 1.5rem;
	display: inline-grid;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--kwusp-audio-fg);
	cursor: pointer;
	transition: none;
}

.kwusp-audio__play-toggle:hover {
	background: transparent;
	color: var(--kwusp-audio-accent);
	box-shadow: none;
	outline: none;
}

.kwusp-audio__play-toggle:focus-visible {
	color: var(--kwusp-audio-accent);
	outline: 2px solid color-mix(in srgb, var(--kwusp-audio-accent) 35%, transparent);
	outline-offset: 0.15rem;
}

.kwusp-audio__icon {
	display: block;
	width: 1.5rem;
	height: 1.5rem;
}

.kwusp-audio__timeline-wrap {
	flex: 1 1 auto;
	min-width: 0;
}

.kwusp-audio__current-row {
	display: block;
	min-width: 0;
}

.kwusp-audio__eyebrow {
	margin: 0 0 0.2rem;
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--kwusp-audio-muted);
}

.kwusp-audio__current-title {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.625;
	color: var(--kwusp-audio-fg);
}

.kwusp-audio__timeline-row {
	display: grid;
	grid-template-columns: auto minmax(5rem, 1fr) auto;
	gap: 0.5rem;
	align-items: center;
	margin-top: 0;
}

.kwusp-audio__time {
	min-width: 1.95rem;
	font-size: 0.8rem;
	line-height: 1.4286;
	color: var(--kwusp-audio-muted);
	font-variant-numeric: tabular-nums;
}

.kwusp-audio__time:last-child {
	text-align: right;
}

.kwusp-audio__seek,
.kwusp-audio__volume-range {
	--kwusp-range-progress: 0%;
	width: 100%;
	height: 0.375rem !important;
	margin: 0;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0.5rem;
	background: linear-gradient(to right, #FE0C19 0%, #e5e7eb 0%);
	accent-color: #FE0C19;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.kwusp-audio__volume {
	flex: 0 0 7rem;
	display: flex;
	gap: 0.5rem;
	align-items: center;
}

.kwusp-audio__volume-range {
	width: 5rem;
	height: 0.25rem !important;
	flex: 0 0 5rem;
}

.kwusp-audio__mute-toggle {
	width: 1.5rem;
	height: 1.5rem;
	flex: 0 0 1.5rem;
	display: inline-grid;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--kwusp-audio-soft);
	cursor: pointer;
	transition: none;
}

.kwusp-audio__mute-toggle:hover {
	background: transparent;
	color: var(--kwusp-audio-accent);
	box-shadow: none;
	outline: none;
}

.kwusp-audio__mute-toggle:focus-visible {
	color: var(--kwusp-audio-accent);
	outline: 2px solid color-mix(in srgb, var(--kwusp-audio-accent) 35%, transparent);
	outline-offset: 0.16rem;
}

.kwusp-audio__divider {
	margin: 1rem 0;
	border-top: 1px solid var(--kwusp-audio-line);
}

.kwusp-audio__track-list-label {
	margin: 0 0 0.5rem;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.625;
	color: var(--kwusp-audio-soft);
}

.kwusp-audio__track-list {
	list-style: none;
	margin: 0;
	padding: 0;
	padding-inline-start: 0;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.kwusp-audio ol.kwusp-audio__track-list {
	padding-left: 0;
	padding-inline-start: 0;
}

.kwusp-audio__track-item {
	margin: 0;
	padding: 0;
}

.kwusp-audio__track-button {
	width: 100%;
	display: block;
	padding: 0.5rem;
	border: 0;
	border-radius: var(--kwusp-audio-radius);
	background: transparent;
	color: var(--kwusp-audio-body);
	font: inherit;
	line-height: 1.625;
	text-align: left;
	cursor: pointer;
	transition: background-color var(--kwusp-audio-transition), color var(--kwusp-audio-transition);
}

.kwusp-audio__track-button:hover,
.kwusp-audio__track-button:focus-visible {
	background: var(--kwusp-audio-fill);
	color: var(--kwusp-audio-body);
	box-shadow: none;
	outline: none;
}

.kwusp-audio__track-button.is-active {
	background: var(--kwusp-audio-fill);
	color: var(--kwusp-audio-accent);
	font-weight: 600;
}

.kwusp-audio__track-title {
	font-weight: inherit;
	line-height: inherit;
}

.kwusp-audio__track-composer {
	color: var(--kwusp-audio-muted);
	font-size: 0.88rem;
	line-height: 1.35;
}

.kwusp-audio__empty {
	margin: 0;
	color: var(--kwusp-audio-muted);
	font-style: italic;
}

@media (max-width: 720px) {
	.kwusp-audio__transport {
		align-items: flex-start;
		display: grid;
		grid-template-columns: 1.5rem minmax(0, 1fr) minmax(5.75rem, 7rem);
		gap: 0.55rem;
	}

	.kwusp-audio__timeline-wrap {
		min-width: 0;
	}

	.kwusp-audio__volume {
		flex: 0 0 auto;
		min-width: 0;
		justify-content: flex-end;
	}

	.kwusp-audio__volume-range {
		width: 4rem;
		flex-basis: 4rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kwusp-audio__track-button,
	.kwusp-audio__play-toggle {
		transition: none;
	}
}