/* AMAR Player 0.3.2 — "The 78" (design direction 2, upgrade/player-design/mockups.html, chosen 2026-10-12).
   A shellac disc whose paper label (section colour) carries the record company and the title in Arabic and English;
   the time runs round the disc's edge. The disc stands still: it turns only with .amar-player--spin (off).
   Colours follow the page's section (page-head.css --sec-*). Side by side when the player is wide, stacked when narrow
   (phones, CD side boxes): a container query on the player itself.
   Selectors carry .amar-player twice where the theme's .entry-content button / input rules would otherwise win. */
.amar-player {
	--ap-sec: var(--sec-bg, #b84329);
	--ap-sec-fg: var(--sec-fg, #fff);
	--ap-ink: var(--ink, #22221f);
	--ap-paper: var(--paper, #f1f0ec);
	--ap-line: var(--line, #a8a8a0);
	--ap-hair: color-mix(in srgb, var(--ap-line) 55%, transparent);
	--ap-muted: var(--muted, #595955);
	--ap-focus: var(--accent, #ce5a36);
	--ap-disc: 200px;
	container-type: inline-size;
	position: relative;
	margin: 0 0 1.5em;
	color: var(--ap-ink);
	font-size: 16px;
	line-height: 1.4;
}
.amar-player [lang="ar"], .amar-player:lang(ar) { font-family: var(--font-ar, 'Noto Sans Arabic', Tahoma, sans-serif); }
.amar-player [lang="en"] { font-family: var(--font, 'Manrope', Arial, sans-serif); }

/* ---------- deck: the record + what is playing ---------- */
.amar-player .amar-player__deck { display: grid; grid-template-columns: var(--ap-disc) minmax(0, 1fr); gap: 22px; align-items: center; }

.amar-player .amar-player__disc { position: relative; width: var(--ap-disc); aspect-ratio: 1; cursor: pointer; }
/* the time, round the edge */
.amar-player .amar-player__arc {
	position: absolute; inset: -7px; border-radius: 50%;
	background: conic-gradient(var(--ap-sec) calc(var(--p, 0) * 1%), color-mix(in srgb, var(--ap-line) 60%, transparent) 0);
	-webkit-mask: radial-gradient(circle, transparent calc(50% - 4px), #000 calc(50% - 3px));
	mask: radial-gradient(circle, transparent calc(50% - 4px), #000 calc(50% - 3px));
}
/* shellac: fine grooves, a dark run-out ring, a soft sheen */
.amar-player .amar-player__vinyl {
	position: absolute; inset: 0; border-radius: 50%;
	background:
		conic-gradient(from 210deg, transparent 0 8%, rgba(255, 255, 255, .13) 12%, transparent 18% 58%, rgba(255, 255, 255, .09) 62%, transparent 68%),
		radial-gradient(circle, transparent 0 41%, rgba(255, 255, 255, .07) 41.5% 42%, transparent 42.5%),
		repeating-radial-gradient(circle, #151513 0 1.2px, #2a2a27 1.6px 2.4px),
		#1a1a18;
	box-shadow: 0 1px 0 rgba(0, 0, 0, .25), inset 0 0 0 1px #000;
}
.amar-player--spin.is-playing .amar-player__vinyl { animation: amar-player-turn 3.2s linear infinite; }
@keyframes amar-player-turn { to { transform: rotate(360deg); } }
/* the paper label */
.amar-player .amar-player__label {
	position: absolute; inset: 28%; border-radius: 50%;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 7%;
	color: var(--ap-sec-fg); text-align: center; overflow: hidden;
	background: radial-gradient(circle, var(--ap-sec) 0 66%, color-mix(in srgb, var(--ap-sec) 80%, #000) 67% 69%, var(--ap-sec) 70%);
	box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .15);
}
.amar-player .amar-player__label::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px; border-radius: 50%; background: var(--ap-paper); box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); }
.amar-player .amar-player__co { font: 800 9px/1 var(--font, 'Manrope', Arial, sans-serif); letter-spacing: .22em; text-transform: uppercase; }
.amar-player .amar-player__la, .amar-player .amar-player__le {
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-width: 100%;
}
.amar-player .amar-player__la { margin-bottom: 9px; font-size: 11px; font-weight: 600; line-height: 1.25; }
.amar-player .amar-player__le { margin-top: 9px; font-size: 8.5px; line-height: 1.2; }

.amar-player .amar-player__info { display: grid; gap: 10px; min-width: 0; }
.amar-player .amar-player__side {
	max-width: none; margin: 0; color: var(--ap-sec); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.amar-player .amar-player__side:lang(ar) { letter-spacing: 0; font-size: 13px; }
.amar-player .amar-player__now { display: flex; flex-direction: column; gap: 2px; max-width: none; margin: 0; }
.amar-player .amar-player__title { font-size: 22px; font-weight: 700; line-height: 1.2; text-wrap: balance; overflow-wrap: anywhere; }
/* the other language's title starts where the title starts (its own direction would push it to the far side) */
.amar-player .amar-player__alt { align-self: flex-start; color: var(--ap-muted); font-size: 17px; overflow-wrap: anywhere; }

/* buttons and time stay left-to-right on Arabic pages, as in most media players */
.amar-player .amar-player__controls { display: flex; align-items: center; gap: 10px; direction: ltr; }
.amar-player.amar-player button.amar-player__btn {
	position: relative; display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; min-height: 0; padding: 0;
	color: var(--ap-ink); background: transparent; border: 1px solid var(--ap-ink); border-radius: 50%; cursor: pointer;
	transition: background-color .15s, color .15s, border-color .15s;
}
.amar-player.amar-player button.amar-player__play { width: 56px; height: 56px; color: var(--ap-paper); background: var(--ap-ink); }
.amar-player.amar-player button.amar-player__btn:hover { color: var(--ap-paper); background: var(--ap-ink); }
.amar-player.amar-player button.amar-player__play:hover { color: var(--ap-sec-fg); background: var(--ap-sec); border-color: var(--ap-sec); }
.amar-player.amar-player button.amar-player__btn[hidden] { display: none; }
.amar-player .amar-player__icon { width: 22px; height: 22px; fill: currentColor; }
.amar-player .amar-player__play .amar-player__icon { width: 26px; height: 26px; }
.amar-player .amar-player__icon--pause, .amar-player.is-playing .amar-player__icon--play { display: none; }
.amar-player.is-playing .amar-player__icon--pause { display: block; }
/* loading: a ring round the play button that fades in and out (nothing on the player turns) */
.amar-player .amar-player__spin { position: absolute; inset: -5px; border: 2px solid var(--ap-sec); border-radius: 50%; opacity: 0; pointer-events: none; }
.amar-player.is-loading .amar-player__spin { animation: amar-player-wait 1.1s ease-in-out infinite alternate; }
@keyframes amar-player-wait { from { opacity: .15; } to { opacity: 1; } }
.amar-player .amar-player__time { max-width: none; margin: 0 0 0 auto; color: var(--ap-muted); font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* a fine line for exact seeking (the edge of the disc shows the same time) */
.amar-player .amar-player__info input.amar-player__seek[type="range"][min] {
	--p: 0%;
	width: 100%; height: 24px; min-height: 24px; max-width: none; margin: 0; padding: 0; direction: ltr;
	background: transparent; border: 0; cursor: pointer; appearance: none; -webkit-appearance: none;
}
.amar-player .amar-player__seek::-webkit-slider-runnable-track { height: 3px; background: linear-gradient(to right, var(--ap-sec) var(--p), var(--ap-hair) var(--p)); }
.amar-player .amar-player__seek::-webkit-slider-thumb { width: 14px; height: 14px; margin-top: -5.5px; background: var(--ap-paper); border: 2px solid var(--ap-ink); border-radius: 50%; -webkit-appearance: none; }
.amar-player .amar-player__seek::-moz-range-track { height: 3px; background: var(--ap-hair); }
.amar-player .amar-player__seek::-moz-range-progress { height: 3px; background: var(--ap-sec); }
.amar-player .amar-player__seek::-moz-range-thumb { width: 12px; height: 12px; background: var(--ap-paper); border: 2px solid var(--ap-ink); border-radius: 50%; }

.amar-player .amar-player__msg { max-width: none; margin: 14px 0 0; padding: 8px 12px; background: #fff; border-inline-start: 4px solid var(--ap-focus); font-size: 15px; }
.amar-player .amar-player__msg[hidden] { display: none; }

/* ---------- the list: one small record per recording ---------- */
.amar-player .amar-player__head {
	margin: 22px 0 0; padding: 0 0 8px; color: var(--ap-muted); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.amar-player .amar-player__head:lang(ar) { letter-spacing: 0; font-size: 14px; }
.amar-player ol.amar-player__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ap-line); }
.amar-player li.amar-player__item { margin: 0; padding: 0; border-bottom: 1px solid var(--ap-hair); }
.amar-player.amar-player button.amar-player__track {
	display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 12px;
	width: 100%; min-height: 48px; padding: 10px 4px; color: inherit; background: transparent; border: 0; border-radius: 0;
	font: inherit; font-weight: 400; text-align: start; cursor: pointer;
}
.amar-player.amar-player button.amar-player__track:hover { background: rgba(255, 255, 255, .55); }
.amar-player .amar-player__dot { position: relative; width: 28px; height: 28px; border-radius: 50%; background: repeating-radial-gradient(circle, #1d1d1b 0 1px, #34342f 1.4px 2px); }
.amar-player .amar-player__dot::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: #bdb9ad; }
.amar-player .amar-player__track[aria-current="true"] .amar-player__dot::after { background: var(--ap-sec); }
.amar-player .amar-player__names { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.amar-player .amar-player__name { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.amar-player .amar-player__track[aria-current="true"] .amar-player__name { font-weight: 800; }
.amar-player .amar-player__name-alt { align-self: flex-start; color: var(--ap-muted); font-size: 14px; overflow-wrap: anywhere; }
.amar-player .amar-player__d { color: var(--ap-muted); font-size: 14px; font-variant-numeric: tabular-nums; }

.amar-player .amar-player__buy { max-width: none; margin: 0; padding: 16px 0 0; }
.amar-player .amar-player__oncd { align-self: flex-start; margin-top: 2px; color: var(--ap-sec); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.amar-player .amar-player__oncd:lang(ar) { letter-spacing: 0; font-size: 13px; }
/* recordings held back because they are on an AMAR CD */
.amar-player .amar-player__cdnote { margin: 16px 0 0; padding: 14px 16px; background: color-mix(in srgb, var(--ap-sec) 8%, transparent); border-inline-start: 4px solid var(--ap-sec); }
.amar-player .amar-player__cdnote p { max-width: none; margin: 0; }
.amar-player .amar-player__cdnote p.amar-player__cdlinks { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 10px; }
.amar-player .amar-player__cdlinks a:not(.ed-button) { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.amar-player button:focus-visible, .amar-player input:focus-visible, .amar-player a:focus-visible { outline: 3px solid var(--ap-focus); outline-offset: 2px; }
.amar-player .amar-player__audio { display: none; }

/* ---------- narrow: the record on top, centred ---------- */
@container (max-width: 520px) {
	.amar-player .amar-player__deck { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 18px; text-align: center; }
	.amar-player .amar-player__disc { width: min(240px, 78cqi); }
	.amar-player .amar-player__info { justify-items: center; width: 100%; }
	.amar-player .amar-player__alt { align-self: center; }
	.amar-player .amar-player__controls { flex-wrap: wrap; justify-content: center; }
	.amar-player .amar-player__time { flex-basis: 100%; margin: 0; text-align: center; }
	.amar-player .amar-player__title { font-size: 20px; }
}
@container (max-width: 300px) {
	.amar-player .amar-player__la { font-size: 10px; -webkit-line-clamp: 1; }
	.amar-player .amar-player__le { visibility: hidden; } /* keeps its line, so the title sits above the centre hole */
}

/* artist pages: the theme's frame already says "Listen · Recordings from the AMAR archive" */
.artist-hero__player .amar-player .amar-player__head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.artist-hero__player .amar-player ol.amar-player__list { margin-top: 22px; }

@media (prefers-reduced-motion: reduce) {
	.amar-player--spin.is-playing .amar-player__vinyl { animation: none; }
	.amar-player.is-loading .amar-player__spin { animation: none; opacity: 1; }
	.amar-player.amar-player button.amar-player__btn { transition: none; }
}

/* ---------- older browsers (no color-mix() / container queries, e.g. iOS 15): plain colours, and always stacked ---------- */
@supports not (color: color-mix(in srgb, red, blue)) {
	.amar-player { --ap-hair: rgba(168, 168, 160, .55); }
	.amar-player .amar-player__arc { background: conic-gradient(var(--ap-sec) calc(var(--p, 0) * 1%), rgba(168, 168, 160, .6) 0); }
	.amar-player .amar-player__label { background: var(--ap-sec); }
	.amar-player .amar-player__cdnote { background: rgba(0, 0, 0, .04); }
	.amar-player.amar-player button.amar-player__track:hover { background: rgba(0, 0, 0, .04); }
}
@supports not (container-type: inline-size) {
	.amar-player .amar-player__deck { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 18px; text-align: center; }
	.amar-player .amar-player__disc { width: min(240px, 78%); }
	.amar-player .amar-player__info { justify-items: center; width: 100%; }
	.amar-player .amar-player__alt { align-self: center; }
	.amar-player .amar-player__controls { flex-wrap: wrap; justify-content: center; }
	.amar-player .amar-player__time { flex-basis: 100%; margin: 0; text-align: center; }
}

/* responsive QA 2026-11-05: "See the CD" and its neighbours: 44px tap areas */
.amar-player .amar-player__cdlinks a:not(.ed-button) { display: inline-flex; align-items: center; min-height: 44px; }