/* רדיו על הגל – player.css
 * Episode player box (.ah-player), play-button states, live-button loading state, now-playing fades.
 * Driven by alhagal-player.js (state classes is-playing / is-active / is-loading / is-error / is-played / is-changing / is-visible).
 * Colours come from the tokens only (dark mode is automatic). Base .ah-play sizes/variants live in content.css. */

/* ---------- episode player box ---------- */
.ah-player {
	direction: rtl;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: clamp(16px, 2.5vw, 24px);
	background: var(--surface);
	color: var(--ink);
	border: 1px solid var(--line);
	border-radius: var(--r-player, 24px);
	box-sizing: border-box;
	transition: opacity .2s ease;
}
.ah-player__row { display: flex; align-items: center; gap: 16px; min-width: 0; }
.ah-player__row--meta { flex-wrap: wrap; gap: 8px; font-variant-numeric: tabular-nums; }

/* big teal play button */
.ah-player__play {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 68px;
	height: 68px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--teal);
	color: var(--on-accent);
	cursor: pointer;
	transition: transform .15s ease, filter .15s ease;
}
.ah-player__play:hover { transform: scale(1.04); }
.ah-player__play:active { transform: scale(.97); }
.ah-player__play .ah-ico { display: block; width: 28px; height: 28px; }
.ah-player__play .ah-ico--pause { display: none; width: 26px; height: 26px; }
.ah-player__play.is-playing .ah-ico--play { display: none; }
.ah-player__play.is-playing .ah-ico--pause { display: block; }

/* waveform: 64 bars, flex row in RTL so the first bar (index 0) sits on the right */
.ah-player__wave {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	direction: rtl;
	align-items: flex-end;
	gap: 2px;
	height: 64px;
	border-radius: 6px;
	cursor: pointer;
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
}
.ah-player__bar {
	flex: 1 1 0;
	min-width: 0;
	height: var(--h, 40%);
	align-self: flex-end;
	border-radius: 3px;
	background: var(--line);
	pointer-events: none;
	transition: height .15s ease, background-color .15s ease;
}
.ah-player__bar.is-played { background: var(--teal); }
.ah-player__wave:hover .ah-player__bar { height: calc(var(--h, 40%) + 6%); }
@media (max-width: 600px) { .ah-player__wave { gap: 1px; } }

/* row 2: time + round outline buttons */
.ah-player__time {
	font-weight: 800;
	font-size: 15px;
	min-width: 110px;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.ah-player__sep { margin: 0 .35em; color: var(--muted); }
.ah-player__btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-inline-start: auto; }
.ah-player__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: transparent;
	color: var(--ink);
	font: inherit;
	cursor: pointer;
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.ah-player__btn:hover { background: var(--sand); border-color: transparent; color: var(--ink); text-decoration: none; }
.ah-player__btn:active { transform: scale(.96); }
.ah-player__btn .ah-ico { display: block; width: 18px; height: 18px; }
.ah-player__btn[data-ah-skip] .ah-ico { width: 24px; height: 24px; }
.ah-player__btn--speed {
	width: auto;
	min-width: 56px;
	padding: 0 14px;
	border-radius: var(--r-pill, 999px);
	font-weight: 800;
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	direction: ltr;
}

/* focus ring (site convention) */
.ah-player__play:focus-visible,
.ah-player__btn:focus-visible,
.ah-player__wave:focus-visible,
.ah-play:focus-visible,
.ah-live-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* states */
@keyframes ah-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: .55; }
}
.ah-player.is-loading .ah-player__play { animation: ah-pulse 1.2s ease-in-out infinite; }
.ah-player.is-error { opacity: .6; }
.ah-player.is-error .ah-player__play,
.ah-player.is-error .ah-player__wave { cursor: not-allowed; }

/* ---------- card / row / overlay play buttons: state layer on top of content.css ---------- */
.ah-play.is-loading { animation: ah-pulse 1.2s ease-in-out infinite; }
.ah-play.is-error { opacity: .5; cursor: not-allowed; }
.ah-play.is-error:hover { transform: none; }

/* ---------- live buttons / live UI: loading state only (sizes and rings are site.css) ---------- */
[data-ah-live].is-loading { opacity: .75; animation: ah-pulse 1.2s ease-in-out infinite; }
[data-ah-live-ui].is-loading .ah-live-btn__dot,
[data-ah-live].is-loading .ah-live-btn__dot { animation: ah-pulse .8s ease-in-out infinite; }

/* ---------- now-playing slots ---------- */
[data-ah-np="title"],
[data-ah-np="artist"] { transition: opacity .18s ease; }
[data-ah-np="title"].is-changing,
[data-ah-np="artist"].is-changing { opacity: 0; }
[data-ah-np="art"] { opacity: 0; transition: opacity .3s ease; }
[data-ah-np="art"].is-visible { opacity: 1; }

/* hidden <audio> elements the script appends to <body> */
audio[data-ah-audio] { display: none; }

/* ---------- motion off ---------- */
@media (prefers-reduced-motion: reduce) {
	.ah-player, .ah-player *, .ah-play, [data-ah-live], [data-ah-live] *, [data-ah-live-ui] *, [data-ah-np] {
		animation: none !important;
		transition: none !important;
	}
	.ah-player__play:hover, .ah-player__btn:active, .ah-player__play:active { transform: none; }
	.ah-player__wave:hover .ah-player__bar { height: var(--h, 40%); }
}
html.a11y-motion .ah-player, html.a11y-motion .ah-player *, html.a11y-motion .ah-play,
html.a11y-motion [data-ah-live], html.a11y-motion [data-ah-live] *, html.a11y-motion [data-ah-live-ui] *,
html.a11y-motion [data-ah-np] {
	animation: none !important;
	transition: none !important;
}
html.a11y-motion .ah-player__play:hover, html.a11y-motion .ah-player__btn:active, html.a11y-motion .ah-player__play:active { transform: none; }
html.a11y-motion .ah-player__wave:hover .ah-player__bar { height: var(--h, 40%); }