/**
 * DuSunnah Audio - library, player, series contents and transcript.
 *
 * Inherits the approved system: the wrapper carries .dus-home as well as
 * .dus-audiolib, so css/home.css supplies every token. Nothing here restyles
 * the masthead, the footer, the article template or the articles archive.
 *
 * .dus-audiolib, NOT .dus-audio - home.css already owns .dus-audio for the
 * homepage's two-column audio band.
 *
 * THE INTENTION: a scholarly publisher that happens to have an excellent audio
 * system. Typography carries the page; thin rules divide it; the waveform
 * player is the one frankly digital instrument and is allowed to look like one.
 *
 * What is deliberately NOT here: decorative gradients (the only gradients left
 * are the functional progress tracks), shadows other than the one floating
 * filter panel, pill badges, cards around lessons, and a label over every
 * control. Radii are 3-4px, never rounded-rectangle styling for its own sake.
 *
 * TWO MEASURES: --arch (1040) is the listening canvas; --read (760) is the
 * reading measure for prose.
 */

body.page-template-tpl-audio #main-content,
body.post-type-archive-audio #main-content,
body.tax-audio-category #main-content,
body.single-audio #main-content {
	margin: 0;
	padding: 0;
	max-width: none;
}

.dus-audiolib {
	--arch: 1040px;
	--read: 728px;
	--wave-h: 60px;
	padding: 0 0 80px;
}

.dus-aud__wrap {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 var(--gut);
}

.dus-aud__col,
.dus-aud__lesson {
	max-width: var(--arch);
}

/* ============================================================ INTRO */

.dus-aud__intro { padding: 44px 0 0; }

.dus-aud__kicker {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--acc);
}

.dus-aud__title {
	margin: 10px 0 0;
	font-size: 40px;
	line-height: 1.08;
	letter-spacing: -.025em;
	font-weight: 800;
}

.dus-aud__lede {
	margin: 12px 0 0;
	max-width: 58ch;
	font-size: 16px;
	line-height: 1.6;
	color: var(--body);
}

/* ============================================================ SEARCH */

.dus-aud__search { margin: 30px 0 0; }

.dus-aud__field {
	display: flex;
	align-items: center;
	gap: 14px;
	height: 60px;
	padding: 0 7px 0 20px;
	background: #fff;
	border: 1px solid #cfc7bf;
	border-radius: 4px;
	color: var(--muted);
	transition: border-color .15s, box-shadow .15s;
}

.dus-aud__field:focus-within {
	border-color: var(--acc);
	box-shadow: 0 0 0 3px rgba(168, 80, 26, .10);
}

.dus-aud__field input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
	border: 0;
	outline: 0;
	background: transparent;
	font: inherit;
	font-size: 17px;
	color: var(--ink);
	-webkit-appearance: none;
	appearance: none;
}

.dus-aud__field input::placeholder { color: #8e8e8e; opacity: 1; }

.dus-aud__go {
	flex: 0 0 auto;
	height: 46px;
	padding: 0 22px;
	border: 0;
	border-radius: 3px;
	background: var(--acc);
	color: #fff;
	font: inherit;
	font-size: 14.5px;
	font-weight: 600;
	cursor: pointer;
}

.dus-aud__go:hover { background: var(--acc-d); }

.dus-aud__scope { margin: 9px 0 0; font-size: 12.5px; color: var(--muted); }

/* ============================================================ SUBJECTS */

.dus-aud__subjects {
	display: flex;
	gap: 8px;
	margin: 28px 0 0;
	padding-bottom: 4px;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent);
	mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent);
}

.dus-aud__subjects::-webkit-scrollbar { display: none; }

.dus-aud__subject {
	flex: 0 0 auto;
	scroll-snap-align: start;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 14px;
	border: 1px solid var(--line);
	border-radius: 3px;
	background: #fff;
	color: var(--ink);
	font-size: 14px;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	transition: border-color .15s, color .15s;
}

.dus-aud__subject:hover { border-color: var(--acc); color: var(--acc); }

.dus-aud__subject.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }

.dus-aud__n { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

.dus-aud__subject.is-active .dus-aud__n { color: rgba(255, 255, 255, .72); }

/* ============================================================ BAR */

.dus-aud__bar {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin: 30px 0 0;
	padding-bottom: 9px;
	border-bottom: 1px solid var(--ink);
}

.dus-aud__count { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }

.dus-aud__filters { position: relative; }

.dus-aud__filters > summary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 11px;
	border: 1px solid var(--line);
	border-radius: 3px;
	background: #fff;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink);
	cursor: pointer;
	list-style: none;
}

.dus-aud__filters > summary::-webkit-details-marker { display: none; }

.dus-aud__filters > summary:hover,
.dus-aud__filters[open] > summary { border-color: var(--ink); }

.dus-aud__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--acc); }

/* The one shadow in this file: a genuinely floating layer. */
.dus-aud__filterform {
	position: absolute;
	right: 0;
	z-index: 5;
	width: 272px;
	margin-top: 5px;
	padding: 16px;
	background: #fff;
	border: 1px solid #cfc7bf;
	border-radius: 4px;
	box-shadow: 0 6px 22px rgba(0, 0, 0, .07);
}

.dus-aud__ff { margin: 0 0 14px; }

.dus-aud__ff label {
	display: block;
	margin-bottom: 6px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--muted);
}

.dus-aud__ff select {
	width: 100%;
	height: 40px;
	padding: 0 10px;
	border: 1px solid var(--line);
	border-radius: 3px;
	background: #fff;
	font: inherit;
	font-size: 14px;
	color: var(--ink);
}

.dus-aud__ffact { display: flex; align-items: center; gap: 16px; margin: 0; }

.dus-aud__apply {
	height: 38px;
	padding: 0 16px;
	border: 0;
	border-radius: 3px;
	background: var(--ink);
	color: #fff;
	font: inherit;
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
}

.dus-aud__reset {
	font-size: 13.5px;
	color: var(--acc);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

.dus-aud__active {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
	margin: 14px 0 0;
}

.dus-aud__active-label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--muted);
}

.dus-aud__chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 11px;
	border: 1px solid var(--acc);
	border-radius: 3px;
	background: #faf1ea;
	color: var(--acc-d);
	font-size: 13px;
	line-height: 1;
	text-decoration: none;
}

.dus-aud__chip:hover { background: var(--acc); color: #fff; }

.dus-aud__x { font-size: 15px; opacity: .75; }

/* ============================================================ LIBRARY ROWS */

.dus-aud__list { margin-top: 4px; }

.dus-aud__item {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	padding: 18px 0;
	border-bottom: 1px solid var(--line);
}

.dus-aud__list .dus-aud__item:last-child { border-bottom: 0; }

/* A flat tint, not a gradient wash. */
.dus-aud__item.is-active { background: #fdf7f2; }

.dus-aud__play {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-top: 2px;
	padding: 0;
	border: 1.5px solid var(--acc);
	border-radius: 50%;
	background: #fff;
	color: var(--acc);
	cursor: pointer;
	transition: background .15s, color .15s;
}

.dus-aud__play svg { width: 17px; height: 17px; }

.dus-aud__play:hover { background: var(--acc); color: #fff; }

.dus-aud__play:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }

.dus-aud__icon--pause,
.dus-aud__play.is-playing .dus-aud__icon--play { display: none; }

.dus-aud__play.is-playing { background: var(--acc); color: #fff; }

.dus-aud__play.is-playing .dus-aud__icon--pause { display: block; }

.dus-aud__play--none {
	border-style: dashed;
	border-color: var(--line);
	color: #b9b1a9;
	cursor: default;
}

.dus-aud__body { flex: 1 1 auto; min-width: 0; max-width: var(--read); }

.dus-aud__kick {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 14px;
	margin: 0;
}

.dus-aud__cat {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--acc);
}

/* Real structure, stated as plain marginal text rather than a badge. */
.dus-aud__series {
	font-size: 12px;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

.dus-aud__ttl {
	margin: 7px 0 0;
	font-size: 19px;
	line-height: 1.34;
	letter-spacing: -.012em;
	font-weight: 700;
}

.dus-aud__ttl a { color: inherit; text-decoration: none; }

.dus-aud__ttl a:hover { color: var(--acc); }

.dus-aud__desc {
	margin: 7px 0 0;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--body);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.dus-aud__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 9px;
	margin: 9px 0 0;
	font-size: 12.5px;
	color: var(--muted);
}

/* "Posted by" - editorial authorship. This install records no speaker. */
.dus-aud__by { color: var(--ink); font-weight: 600; }

.dus-aud__sep { color: #c4bcb4; }

/* ============================================================ THE PLAYER */

/*
 * The one frankly digital instrument on the page, and allowed to look it.
 * Warm cream ground, a terracotta hairline instead of a grey box, a filled
 * terracotta control that is unmistakably the first thing to press, and three
 * zones - identity, waveform, controls - separated by air rather than rules.
 */
/*
 * THREE ROWS, never one strip:
 *   1 identity   the cued part's real number and title
 *   2 playback   play, elapsed, waveform, total
 *   3 transport  the secondary controls, visually subordinate
 */
.dus-player {
	display: block;
}

/*
 * The whole player is ONE grid: control | elapsed | waveform | total. The
 * identity and transport rows are placed in the waveform's own column, so they
 * share its left edge by construction rather than by a guessed indent.
 */
.dus-player--full {
	display: grid;
	grid-template-columns: auto auto minmax(0, 1fr) auto;
	column-gap: 18px;
	row-gap: 18px;
	align-items: center;
	padding: 26px 28px 24px;
	background: #fcf9f3;
	border: 1px solid rgba(168, 80, 26, .20);
	border-radius: 4px;
}

/* The row wrapper dissolves so its children join the player's own grid. */
.dus-player--full .dus-player__main { display: contents; }

.dus-player--full .dus-player__head,
.dus-player--full .dus-player__tools { grid-column: 3 / -1; }

.dus-player__play {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 66px;
	height: 66px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--acc);
	color: #fff;
	cursor: pointer;
	transition: background .15s;
}

.dus-player__play svg { width: 26px; height: 26px; }

.dus-player__play:hover { background: var(--acc-d); }

/* Tactility from geometry and tone - never gloss or a drop shadow. */
.dus-player__play:active { transform: scale(.965); }

.dus-player.is-playing .dus-player__play {
	box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .26);
}

.dus-player__play:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }

.dus-player__icon--pause,
.dus-player.is-playing .dus-player__icon--play { display: none; }

.dus-player.is-playing .dus-player__icon--pause { display: block; }

/*
 * ONE OBJECT, not four stacked pieces. A single grid aligns the elapsed time,
 * the waveform and the remaining time on one line, and starts the secondary
 * control strip on the waveform's own left edge. That shared alignment is what
 * makes play -> waveform -> time -> controls read as one instrument.
 */
/*
 * ROW 2 - the playback row. Four columns: control, elapsed, waveform, total.
 * Only the waveform flexes, so it takes every pixel the other three do not and
 * can never collapse into a block beside the button.
 */
.dus-player__main {
	display: grid;
	grid-template-columns: auto auto minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 18px;
}

/*
 * ROW 1 - identity. Present only when a part is genuinely cued, and indented
 * to the waveform's own left edge so the three rows share one spine.
 */
.dus-player__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 14px;
	margin: 0;
}

.dus-player__head[hidden] { display: none; }

/* The genuine lesson number, set as a marginal figure. */
.dus-player__no {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--acc);
	font-variant-numeric: tabular-nums;
}

.dus-player__no[hidden] { display: none; }

/* The number and title already say it; the count would only repeat them. */
.dus-player--full .dus-player__sub { display: none; }

.dus-player__now {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -.012em;
	color: var(--ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dus-player__sub { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); }

.dus-player__sub[hidden] { display: none; }

.dus-player__transport {
	display: flex;
	align-items: center;
	gap: 16px;
}

.dus-player__time {
	flex: 0 0 auto;
	font-size: 12.5px;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

.dus-player__time--end { min-width: 48px; text-align: right; }

/*
 * The canvas is the picture; the range input above it is the control. Keyboard
 * seeking, click-to-seek and the accessible name all belong to the input, so
 * losing the drawing costs nothing but the drawing.
 */
.dus-player__wave {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	height: var(--wave-h);
}

.dus-player__canvas {
	--dus-wave-on: var(--acc);
	--dus-wave-off: #d8cdc1;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: none;
}

.dus-player.has-wave .dus-player__canvas { display: block; }

.dus-player__range {
	--dus-fill: 0%;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	background: transparent;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

/* The honest fallback when no peaks exist: an ordinary progress line. */
.dus-player__range::-webkit-slider-runnable-track {
	height: 3px;
	margin-top: calc((var(--wave-h) - 3px) / 2);
	border-radius: 2px;
	background: linear-gradient(to right, var(--acc) var(--dus-fill), #e0d8cf var(--dus-fill));
}

.dus-player__range::-moz-range-track {
	height: 3px;
	border-radius: 2px;
	background: linear-gradient(to right, var(--acc) var(--dus-fill), #e0d8cf var(--dus-fill));
}

.dus-player.has-wave .dus-player__range::-webkit-slider-runnable-track { background: transparent; }
.dus-player.has-wave .dus-player__range::-moz-range-track { background: transparent; }

/*
 * The playhead: a precise 3px mark, never a knob.
 *
 * It is pinned to the BARS' painted bounds, not to the wave box. drawWave()
 * draws each bar as `max(0.08, peak) * (--wave-h - 2)` centred in the box, so
 * the painted ink runs from 1px to (--wave-h - 1px) - measured at 1px..59px in
 * a 60px box and 1px..45px in a 46px box. A full-box playhead therefore stood
 * 1px proud of the tallest bar at both ends and, next to this recording's
 * quiet opening and closing peaks, read as a line dropping toward the controls.
 *
 * The WebKit thumb's origin is the RUNNABLE TRACK, itself pushed down by
 * (--wave-h - 3px)/2, so the margin below resolves the thumb's top to exactly
 * 1px. That is arithmetic from the track geometry, not a per-width nudge.
 * Firefox centres its thumb on the track already, so height alone is enough.
 */
.dus-player__range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 3px;
	height: calc(var(--wave-h) - 2px);
	margin-top: calc(1px - (var(--wave-h) - 3px) / 2);
	border: 0;
	border-radius: 0;
	background: var(--acc-d);
}

.dus-player__range::-moz-range-thumb {
	width: 3px;
	height: calc(var(--wave-h) - 2px);
	border: 0;
	border-radius: 0;
	background: var(--acc-d);
}

.dus-player__range:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }

/*
 * The secondary controls are ONE strip, divided by hairlines - a family, not
 * four unrelated boxes. No pills, no individual chrome.
 */
/*
 * ROW 3 - transport. Typographic controls divided by hairlines, NOT a bordered
 * form field. Subordinate to the play control and the waveform above them, and
 * sharing their left edge.
 */
.dus-player__tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	width: auto;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: none;
	overflow: visible;
}

.dus-player__tools > * + * { border-left: 1px solid #e4dbd1; }

.dus-player__tool {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 36px;
	padding: 0 16px;
	border: 0;
	border-radius: 2px;
	background: transparent;
	color: var(--ink);
	font: inherit;
	font-size: 12.5px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
	transition: background .14s, color .14s;
}

.dus-player__tool svg { width: 16px; height: 16px; }

.dus-player__tool:hover { background: #fbf4ee; color: var(--acc-d); }

.dus-player__tool:active { background: #f6e9df; }

.dus-player__tool:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }

/* Active by state, not by decoration: pale terracotta tint and terracotta text. */
.dus-player__tool.is-on {
	background: #fbf0e8;
	color: var(--acc-d);
	box-shadow: inset 0 0 0 1px rgba(168, 80, 26, .28);
}

.dus-player__tool--rate { min-width: 52px; }

.dus-player__tool--icon { padding: 0 14px; }

/* The first control sits flush, so the row aligns with the waveform. */
.dus-player__tools > *:first-child { padding-left: 0; }

.dus-player__tools > *:first-child.dus-player__tool { margin-left: 0; }

.dus-player__icon--muted,
.dus-player.is-muted .dus-player__icon--loud { display: none; }

.dus-player.is-muted .dus-player__icon--muted { display: block; }

.dus-player__vol { display: inline-flex; align-items: center; gap: 10px; padding-right: 14px; }

.dus-player__volrange {
	--dus-fill: 100%;
	width: 84px;
	flex: 0 0 auto;
	height: 20px;
	margin: 0;
	background: transparent;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.dus-player__volrange::-webkit-slider-runnable-track {
	height: 3px;
	margin-top: 8px;
	border-radius: 2px;
	background: linear-gradient(to right, var(--acc) var(--dus-fill), #e0d8cf var(--dus-fill));
}

.dus-player__volrange::-moz-range-track {
	height: 3px;
	border-radius: 2px;
	background: linear-gradient(to right, var(--acc) var(--dus-fill), #e0d8cf var(--dus-fill));
}

.dus-player__volrange::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 11px;
	height: 11px;
	margin-top: -4px;
	border: 0;
	border-radius: 50%;
	background: var(--acc);
}

.dus-player__volrange::-moz-range-thumb {
	width: 11px;
	height: 11px;
	border: 0;
	border-radius: 50%;
	background: var(--acc);
}

.dus-player__more { display: none; }

/* ============================================================ THE BAR */

/*
 * Substantially shallower than the primary player, and quieter: a rule rather
 * than a shadow. It appears only after a deliberate play and persists WITHIN
 * the page. It cannot survive a navigation and nothing here pretends it can.
 */
.dus-player--dock {
	--wave-h: 26px;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 60;
	gap: 16px;
	padding: 9px max(16px, calc((100vw - var(--wrap)) / 2 + var(--gut)));
	background: rgba(252, 249, 243, .97);
	backdrop-filter: blur(8px);
	border-top: 1px solid rgba(168, 80, 26, .24);
}

.dus-player--dock[hidden] { display: none; }

.dus-player--dock .dus-player__play { width: 42px; height: 42px; }

.dus-player--dock .dus-player__play svg { width: 17px; height: 17px; }

/* The dock flattens the same three rows back into one compact line. */
.dus-player--dock {
	display: flex;
	align-items: center;
}

/*
 * min-width:0 throughout. Flex items default to min-content, so without this
 * the identity, transport and controls each refuse to shrink and the row grows
 * wider than the dock - which is what clipped the contents, not the shell.
 */
.dus-player--dock .dus-player__head {
	flex: 0 1 auto;
	width: 200px;
	min-width: 0;
	display: block;
	margin: 0;
	padding-left: 0;
}

.dus-player--dock .dus-player__now,
.dus-player--dock .dus-player__sub {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dus-player--dock .dus-player__now { font-size: 13.5px; }

.dus-player--dock .dus-player__no { font-size: 11.5px; margin-right: 6px; }

.dus-player--dock .dus-player__sub { font-size: 11.5px; margin-top: 2px; }

.dus-player--dock .dus-player__main {
	flex: 1 1 auto;
	min-width: 0;
	column-gap: 14px;
}

.dus-player--dock .dus-player__tools {
	flex: 0 0 auto;
	min-width: 0;
	margin: 0;
	padding-left: 0;
	flex-wrap: nowrap;
}

/* Reserve the bar's height so it never covers the last row or the footer. */
.dus-has-dock .dus-audiolib { padding-bottom: 140px; }

/* ============================================================ SINGLE */

.dus-aud__back {
	display: inline-block;
	margin: 30px 0 0;
	font-size: 13px;
	color: var(--muted);
	text-decoration: none;
}

.dus-aud__back:hover { color: var(--acc); }

.dus-aud__head { padding: 18px 0 0; max-width: var(--read); }

.dus-aud__h1 {
	margin: 10px 0 0;
	font-size: 34px;
	line-height: 1.14;
	letter-spacing: -.024em;
	font-weight: 800;
}

.dus-aud__sub {
	margin: 12px 0 0;
	font-size: 16.5px;
	line-height: 1.6;
	color: var(--body);
}

.dus-aud__facts {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 5px 10px;
	margin: 14px 0 0;
	font-size: 13px;
	color: var(--muted);
}

.dus-aud__listen { margin: 30px 0 0; }

.dus-aud__noaudio {
	margin: 26px 0 0;
	padding: 18px 20px;
	border: 1px dashed var(--line);
	border-radius: 4px;
	font-size: 14px;
	color: var(--muted);
}

.dus-aud__content {
	max-width: var(--read);
	margin: 40px 0 0;
	font-size: 17.5px;
	line-height: 1.88;
	color: var(--body);
}

.dus-aud__content p { margin: 0 0 1em; font-size: inherit; line-height: inherit; }

.dus-aud__content p:not([lang="ar"]) {
	direction: ltr;
	text-align: justify;
	text-align-last: left;
	hyphens: none;
	-webkit-hyphens: none;
}

.dus-aud__content h2 {
	font-family: var(--ft-serif);
	font-size: 26px;
	line-height: 1.28;
	font-weight: 600;
	letter-spacing: -.01em;
	margin: 40px 0 14px;
}
.dus-aud__content h3 {
	font-family: var(--ft-serif);
	font-size: 20px;
	line-height: 1.35;
	font-weight: 600;
	letter-spacing: -.005em;
	margin: 32px 0 12px;
}
.dus-aud__content blockquote {
	margin: 28px 0;
	padding: 0 0 0 22px;
	border-left: 2px solid var(--line);
	color: var(--muted);
}
.dus-aud__content a {
	color: var(--acc);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}
.dus-aud__content ul,
.dus-aud__content ol {
	margin: 0 0 1em;
	padding-left: 24px;
}
.dus-aud__content ul { list-style: disc; }
.dus-aud__content ol { list-style: decimal; }
.dus-aud__content li { margin-bottom: 8px; padding-left: 4px; }

/*
 * Multilingual reading roles inside the audio description — the SAME frozen
 * treatment the Article and single Video use, scoped to .dus-aud__content.
 * inc/arabic.php marks the paragraphs at render time (ordinary Arabic -> Amiri,
 * marker-confirmed Qurʾān -> .dus-quran__ar, its translation -> .dus-quran__tr);
 * inc/honorifics.php + css/honorifics.css handle ﷺ/ﷻ. Arabic is Amiri
 * throughout, sized by register (inline/source/Qurʾān) and set LEFT, matching
 * the Article/Video standard — never justified, never right-aligned.
 */
.dus-aud__content [lang="ar"]:not([class]) {
	font-family: "Amiri", serif;
	font-size: 22px;
	line-height: 2;
	text-align: left;
	direction: rtl;
	unicode-bidi: isolate;
}
.dus-aud__content .dus-quran__ar {
	font-family: "Amiri", serif;
	font-size: 32px;
	line-height: 2;
	text-align: left;
	direction: rtl;
	unicode-bidi: isolate;
	color: var(--ink);
	margin: 26px 0;
}
.dus-aud__content .dus-source__ar {
	font-family: "Amiri", serif;
	font-size: 26px;
	line-height: 1.95;
	text-align: left;
	direction: rtl;
	unicode-bidi: isolate;
	color: var(--ink);
	margin: 26px 0;
}
.dus-aud__content .dus-quran__tr,
.dus-aud__content .dus-source__tr {
	font-size: 16.5px;
	line-height: 1.75;
	color: var(--body);
	margin: 0 0 14px;
}
.dus-aud__content .dus-quran__tr strong,
.dus-aud__content .dus-quran__tr b {
	font-weight: 400;
}

/* Section heads carry the transitions, instead of boxes. */
.dus-aud__sechead {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--ink);
}

.dus-aud__sechead h2 {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -.012em;
}

/* A count, in sentence case - data rather than instruction. */
.dus-aud__count-quiet {
	margin: 0;
	font-size: 12.5px;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

.dus-aud__note { margin: 16px 0 0; font-size: 12px; color: var(--muted); }

/* ============================================================ SERIES */

/*
 * A book's table of contents: number in the margin, title, duration, action at
 * the end. Thin rules, no boxes, no card per lesson.
 */
/* Listening gives way to the contents; the pause is a little longer here. */
.dus-aud__parts { margin: 66px 0 0; }

.dus-parts { margin: 0; padding: 0; list-style: none; }

.dus-part {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 13px 12px 13px 14px;
	margin: 0 -12px 0 -16px;
	border-bottom: 1px solid var(--line);
	border-left: 2px solid transparent;
	cursor: pointer;
	transition: background .15s, border-color .15s;
}

.dus-part:last-child { border-bottom: 0; }

.dus-part:hover { background: #fdfaf6; }

.dus-part__no {
	position: relative;
	flex: 0 0 auto;
	width: 28px;
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: .04em;
	color: #a79d94;            /* marginal, quieter than the title it indexes */
	font-variant-numeric: tabular-nums;
}

.dus-part__name {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--ink);
}

.dus-part__dur {
	flex: 0 0 auto;
	font-size: 12.5px;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

.dus-part__dur:empty { display: none; }

.dus-part__actions { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; }

.dus-part__dl {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	color: #bdb4ab;
	line-height: 0;
}

.dus-part__dl svg { width: 17px; height: 17px; }

.dus-part__dl:hover { color: var(--acc); }

.dus-part__play {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1.5px solid var(--acc);
	border-radius: 50%;
	background: #fff;
	color: var(--acc);
	cursor: pointer;
	transition: background .15s, color .15s;
}

.dus-part__play svg { width: 15px; height: 15px; }

.dus-part__play:hover { background: var(--acc); color: #fff; }

.dus-part__play:active { transform: scale(.94); }

.dus-part__play:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }

/*
 * The playing/played state is announced to screen readers only. Sighted users
 * already have it from the control and the margin mark, so it is never printed
 * as a repeated label down the contents.
 */
.dus-part__state {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.dus-part__icon--pause,
.dus-part__play.is-playing .dus-part__icon--play { display: none; }

.dus-part__play.is-playing { background: var(--acc); color: #fff; }

.dus-part__play.is-playing .dus-part__icon--pause { display: block; }

/* CURRENT: a terracotta margin rule and a flat, pale ground. */
.dus-part.is-active {
	background: #fdf6f0;
	border-left-color: var(--acc);
}

.dus-part.is-active .dus-part__name { color: var(--acc-d); font-weight: 700; }

.dus-part.is-active .dus-part__no { color: var(--acc); }

/* The one unmistakable state: the playing lesson's control fills. */
.dus-part.is-active .dus-part__play {
	background: var(--acc);
	border-color: var(--acc);
	color: #fff;
}

/*
 * PLAYED: one small terracotta mark in the margin. Not a label, and not
 * repeated language down the page.
 */
.dus-part.is-played .dus-part__no::before {
	content: "";
	position: absolute;
	left: -9px;
	top: 50%;
	width: 4px;
	height: 4px;
	margin-top: -2px;
	border-radius: 50%;
	background: var(--acc);
	opacity: .7;
}

.dus-part.is-played .dus-part__name { color: var(--muted); font-weight: 500; }

.dus-part.is-started .dus-part__no { color: var(--acc); }

/* ============================================================ RELATED */

.dus-aud__related { margin: 68px 0 0; }

.dus-aud__list--related { margin-top: 2px; }

.dus-aud__item--related { gap: 14px; padding: 13px 0; }

.dus-aud__item--related .dus-aud__play {
	width: 36px;
	height: 36px;
	border-width: 1px;
	border-color: #d8cec4;
	color: #8a8079;
}

.dus-aud__item--related .dus-aud__play svg { width: 14px; height: 14px; }

.dus-aud__item--related .dus-aud__play:hover { border-color: var(--acc); background: #fff; color: var(--acc); }

.dus-aud__item--related .dus-aud__ttl { font-size: 16px; margin-top: 5px; }

.dus-aud__item--related .dus-aud__cat { font-size: 10.5px; color: var(--muted); }

.dus-aud__item--related .dus-aud__meta { margin-top: 5px; font-size: 12px; }

/* ============================================================ TRANSCRIPT */

/*
 * A bilingual critical edition, not subtitles. Timestamps sit in the margin;
 * Arabic leads with full authority; the English translation follows beneath it.
 */
.dus-tr { margin: 52px 0 0; }

.dus-tr__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 0 12px;
}

/*
 * A language switcher, not a segmented control: one bordered group divided by
 * hairlines, the chosen language marked by a pale terracotta ground and
 * terracotta text. Quiet enough to sit beside scholarly text.
 */
.dus-tr__modes {
	display: inline-flex;
	border: 1px solid #d9d0c7;
	border-radius: 3px;
	background: #fff;
	overflow: hidden;
}

.dus-tr__modes button {
	padding: 8px 15px;
	border: 0;
	border-radius: 0;
	background: transparent;
	font: inherit;
	font-size: 13px;
	color: var(--body);
	cursor: pointer;
	transition: background .14s, color .14s;
}

.dus-tr__modes button + button { border-left: 1px solid #e6ded6; }

.dus-tr__modes button:hover { background: #fbf4ee; color: var(--acc-d); }

.dus-tr__modes button[aria-pressed="true"] {
	background: #fbf0e8;
	color: var(--acc-d);
	font-weight: 600;
	box-shadow: inset 0 0 0 1px rgba(168, 80, 26, .28);
}

.dus-tr__modes button:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }

.dus-tr__find { display: inline-flex; align-items: center; gap: 10px; margin: 0; }

.dus-tr__find input {
	height: 36px;
	width: 200px;
	padding: 0 12px;
	border: 1px solid var(--line);
	border-radius: 3px;
	background: #fff;
	font: inherit;
	font-size: 14px;
	color: var(--ink);
}

.dus-tr__find input:focus { outline: 0; border-color: var(--acc); }

.dus-tr__found { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

.dus-tr__follow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 13px;
	border: 1px solid var(--line);
	border-radius: 3px;
	background: #fff;
	font: inherit;
	font-size: 13px;
	color: var(--muted);
	cursor: pointer;
}

.dus-tr__follow.is-on { color: var(--acc-d); border-color: rgba(168, 80, 26, .35); }

.dus-tr__dot { width: 7px; height: 7px; border-radius: 50%; background: #cfc7bf; }

.dus-tr__follow.is-on .dus-tr__dot { background: var(--acc); }

/* Section markers, set as a quiet line of references. */
.dus-tr__chapters {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 22px;
	padding: 0 0 14px;
	border-bottom: 1px solid var(--line);
}

.dus-tr__chapter {
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
	padding: 4px 0;
	border: 0;
	border-bottom: 1px solid transparent;
	background: none;
	font: inherit;
	font-size: 13.5px;
	color: var(--body);
	cursor: pointer;
	transition: color .14s, border-color .14s;
}

.dus-tr__chapter:hover { color: var(--acc-d); border-bottom-color: rgba(168, 80, 26, .3); }

.dus-tr__chapter:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

/* The section holding the playhead, marked without a pill or a box. */
.dus-tr__chapter.is-current {
	color: var(--acc-d);
	font-weight: 600;
	border-bottom-color: var(--acc);
}

.dus-tr__chapterstamp { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 12px; }

.dus-tr__chapter.is-current .dus-tr__chapterstamp { color: var(--acc); }

.dus-tr__list { margin: 0; padding: 0; list-style: none; }

.dus-tr__seg {
	display: grid;
	grid-template-columns: 62px minmax(0, 1fr) 32px;
	gap: 0 18px;
	padding: 18px 10px 18px 12px;
	margin-left: -14px;
	border-left: 2px solid transparent;
	border-bottom: 1px solid #f1ece6;
}

.dus-tr__seg.is-seekable { cursor: pointer; }

.dus-tr__seg.is-hidden { display: none; }

.dus-tr__aside { padding-top: 2px; }

/* The passage itself. Nothing decorative - it only holds the measure. */
.dus-tr__text { min-width: 0; }

/* The timestamp is itself the control - no separate "play from here" label. */
.dus-tr__stamp {
	padding: 2px 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 12.5px;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
	cursor: pointer;
}

.dus-tr__stamp:hover { color: var(--acc); }

.dus-tr__stamp:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

/* Named only when the speaker changes, as in a printed edition. */
.dus-tr__speaker {
	margin: 0 0 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #a79d94;
}

/*
 * Arabic carries the passage. It is the larger, darker, more generously led
 * setting; the English sits beneath it as the translation, never above it and
 * never larger. Both get room; proximity states the relationship.
 */
.dus-tr__ar {
	margin: 0;
	font-family: "Amiri", "Scheherazade New", serif;
	font-size: 22px;
	line-height: 2.0;
	color: var(--ink);
	text-align: right;
}

.dus-tr__en {
	margin: 13px 0 0;
	font-size: 16px;
	line-height: 1.74;
	color: var(--body);
}

.dus-tr__ar:only-child,
.dus-tr__en:only-child { margin-top: 0; }

.dus-tr[data-mode="ar"] .dus-tr__en { display: none; }
.dus-tr[data-mode="en"] .dus-tr__ar { display: none; }
.dus-tr[data-mode="en"] .dus-tr__en { margin-top: 0; }

/*
 * The active passage: a thin terracotta margin rule and a very pale warm
 * ground. The whole passage, never single words, and everything around it
 * stays completely readable.
 */
.dus-tr__seg.is-current {
	background: #fdf6f0;
	border-left-color: var(--acc);
}

.dus-tr__seg.is-current .dus-tr__stamp { color: var(--acc); font-weight: 600; }

.dus-tr__seg.is-hit { background: #fdfaf6; }

.dus-tr__copy {
	align-self: start;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	background: none;
	color: #bdb4ab;
	cursor: pointer;
	opacity: 0;
	transition: opacity .15s, color .15s;
}

.dus-tr__copy svg { width: 16px; height: 16px; }

.dus-tr__seg:hover .dus-tr__copy,
.dus-tr__seg:focus-within .dus-tr__copy { opacity: 1; }

.dus-tr__copy:hover { color: var(--acc); }

.dus-tr__copy:focus-visible { opacity: 1; outline: 2px solid var(--acc); outline-offset: 2px; }

.dus-tr__copy.is-done { color: var(--acc); opacity: 1; }

.dus-tr__return {
	position: sticky;
	bottom: 18px;
	display: block;
	margin: 20px auto 0;
	padding: 9px 16px;
	border: 1px solid rgba(168, 80, 26, .3);
	border-radius: 3px;
	background: rgba(252, 249, 243, .97);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--acc-d);
	cursor: pointer;
}

.dus-tr__return[hidden] { display: none; }

/* ============================================================ EMPTY / PAGER */

.dus-aud__empty { padding: 44px 0 4px; max-width: 52ch; }

.dus-aud__empty-lead { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.015em; }

.dus-aud__empty-hint { margin: 10px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--body); }

.dus-aud__empty-act { margin: 18px 0 0; }

.dus-aud__pager { margin: 34px 0 0; }

.dus-aud__pager ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }

.dus-aud__pager a,
.dus-aud__pager span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 12px;
	border: 1px solid var(--line);
	border-radius: 3px;
	font-size: 14px;
	color: var(--ink);
	text-decoration: none;
	font-variant-numeric: tabular-nums;
}

.dus-aud__pager a:hover { border-color: var(--acc); color: var(--acc); }

.dus-aud__pager .current { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ============================================================ 1100 */

@media (max-width: 1100px) {

	.dus-aud__wrap { padding: 0 32px; }

	.dus-aud__title { font-size: 36px; }

	.dus-aud__h1 { font-size: 30px; }

	.dus-player--dock .dus-player__head { width: 168px; }

	.dus-tr__find input { width: 170px; }
}

/* ============================================================ 767 */

/*
 * 390 first. The contents list must work one-handed, the waveform must stay
 * seekable, and the Arabic must stay a reading size.
 */
@media (max-width: 767px) {

	.dus-audiolib {
		--read: 100%;
		--wave-h: 46px;
		padding-bottom: 56px;
	}

	.dus-aud__wrap { padding: 0 20px; }

	.dus-aud__intro { padding-top: 30px; }

	.dus-aud__title { font-size: 30px; }

	.dus-aud__lede { font-size: 15px; }

	.dus-aud__field { height: 54px; padding-left: 15px; gap: 11px; }

	.dus-aud__field input[type="search"] { font-size: 16px; }

	.dus-aud__go { height: 42px; padding: 0 15px; font-size: 13.5px; }

	.dus-aud__filterform { width: min(272px, calc(100vw - 40px)); }

	.dus-aud__item { gap: 14px; padding: 15px 0; }

	.dus-aud__ttl { font-size: 17px; }

	.dus-aud__desc { font-size: 13.5px; }

	.dus-aud__meta { font-size: 12px; }

	.dus-aud__h1 { font-size: 25px; }

	.dus-aud__sub { font-size: 15px; }

	.dus-aud__content { font-size: 17px; line-height: 1.85; }

	/* Qurʾān/hadith Arabic stay generously sized on mobile, as on Article/Video. */
	.dus-aud__content [lang="ar"]:not([class]) { font-size: 19px; }
	.dus-aud__content .dus-quran__ar { font-size: 26px; }
	.dus-aud__content .dus-source__ar { font-size: 22px; }
	.dus-aud__content .dus-quran__tr,
	.dus-aud__content .dus-source__tr { font-size: 16px; }

	/*
	 * At narrow widths the times drop beneath the waveform so the waveform
	 * keeps the whole width beside the control instead of being squeezed
	 * between two time labels.
	 */
	/*
	 * At narrow widths the times move BENEATH the waveform, both into the same
	 * cell pushed to opposite ends. They cannot collide, and the waveform keeps
	 * the full width beside the control instead of being squeezed between two
	 * time labels.
	 */
	.dus-player--full {
		grid-template-columns: auto minmax(0, 1fr);
		column-gap: 14px;
		row-gap: 10px;
		padding: 18px 16px 16px;
	}

	.dus-player--full .dus-player__head { grid-column: 1 / -1; }

	.dus-player__play {
		grid-row: 2 / 4;
		grid-column: 1;
		align-self: center;
		width: 56px;
		height: 56px;
	}

	.dus-player__play svg { width: 22px; height: 22px; }

	.dus-player__wave { grid-row: 2; grid-column: 2; }

	/* Both times share one cell; justify-self keeps them at opposite ends. */
	.dus-player__time,
	.dus-player__time--end {
		grid-row: 3;
		grid-column: 2;
		min-width: 0;
	}

	.dus-player__time { justify-self: start; }

	.dus-player__time--end { justify-self: end; text-align: right; }

	.dus-player--full .dus-player__tools { grid-row: 4; grid-column: 1 / -1; }

	.dus-player__tool { min-height: 40px; padding: 0 12px; }

	.dus-player__tool svg { width: 17px; height: 17px; }

	/* Volume is the one control a phone already has hardware for. */
	.dus-player--full .dus-player__vol { display: none; }
}

/*
 * THE DOCK RECOMPOSES EARLIER THAN THE PAGE DOES.
 *
 * At 768 the desktop bar does not fit: identity 168 + tools 417 + gaps 32
 * inside 736px leaves 119px for a row needing ~160, so the waveform collapsed
 * to ZERO width and the duration overlapped the -15 button. Rather than
 * squeeze that arrangement, the two-row composition below takes over for every
 * sub-desktop width, where the waveform keeps real width and the priority
 * controls stay on screen.
 */
@media (max-width: 1023px) {

	.dus-player--dock { display: block; padding: 9px 16px 10px; }

	.dus-player--dock .dus-player__main {
		grid-template-columns: auto minmax(0, 1fr) auto;
		column-gap: 10px;
		row-gap: 4px;
		margin-left: 54px;
	}

	.dus-player--dock .dus-player__play {
		grid-row: auto;
		grid-column: auto;
	}

	.dus-player--dock .dus-player__wave { grid-row: 1; grid-column: 1 / 4; }

	.dus-player--dock .dus-player__time { grid-row: 2; grid-column: 1; }

	.dus-player--dock .dus-player__time--end { grid-row: 2; grid-column: 3; }

	.dus-player--dock .dus-player__play {
		position: absolute;
		left: 16px;
		top: 11px;
		width: 42px;
		height: 42px;
	}

	/* Keeps the title clear of the pinned More/Close pair on its right. */
	.dus-player--dock .dus-player__head {
		width: auto;
		margin-left: 54px;
		margin-right: 110px;
		margin-bottom: 6px;
	}

	.dus-player--dock .dus-player__now { font-size: 13px; }

	.dus-player--dock .dus-player__sub { display: none; }


	/*
	 * The strip itself STAYS RENDERED. More, Return and Close live inside it,
	 * and display:none here took them down with it - the control that reveals
	 * the tools cannot be hidden by the tools.
	 *
	 * At 390 the priority set is identity, play/pause, waveform, elapsed and
	 * duration, -15/+30, speed and close. All of those stay on screen: the
	 * transport WRAPS onto a second row rather than folding away behind a tap.
	 * Only volume and return sit behind More - a phone already has hardware
	 * volume, and return is a convenience rather than a transport control.
	 */
	.dus-player--dock .dus-player__tools {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		margin-top: 10px;
	}

	/* (0,2,0) here against (0,3,0) on the .is-expanded pair, so expand wins. */
	.dus-player--dock .dus-player__vol,
	.dus-player--dock .dus-player__back { display: none; }

	.dus-player--dock.is-expanded .dus-player__vol { display: flex; }

	.dus-player--dock.is-expanded .dus-player__back { display: inline-flex; }

	.dus-player--dock .dus-player__more,
	.dus-player--dock .dus-player__close {
		display: inline-flex;
		position: absolute;
		top: 11px;
		width: 40px;
		min-height: 40px;
		padding: 0;
	}

	.dus-player--dock .dus-player__more { right: 62px; }
	.dus-player--dock .dus-player__close { right: 16px; }

	/*
	 * More and Close stay pinned in BOTH states. They used to drop into the
	 * flow on expand, which moved two controls the moment the bar grew; the
	 * composition should not rearrange itself under the reader's thumb.
	 */

	/* Reserves the taller two-row bar so it never covers the last row. */
	.dus-has-dock .dus-audiolib { padding-bottom: 200px; }
}

@media (max-width: 767px) {

	/* Contents: number and title lead, action stays at the end and tappable. */
	.dus-part {
		gap: 12px;
		padding: 12px 6px 12px 12px;
		margin: 0 -6px 0 -14px;
	}

	.dus-part__no { width: 22px; font-size: 11.5px; }

	.dus-part__name { font-size: 14.5px; }

	.dus-part__dl { width: 36px; height: 36px; }

	.dus-part__play { width: 40px; height: 40px; }

	/* The same widened pauses as desktop, scaled to the phone's shorter column. */
	.dus-aud__parts { margin-top: 50px; }

	.dus-aud__related { margin-top: 54px; }

	.dus-tr { margin-top: 40px; }

	.dus-aud__sechead { flex-wrap: wrap; gap: 4px; }

	/* Transcript: timestamps must not steal reading width, so they move above. */
	.dus-tr__seg {
		grid-template-columns: minmax(0, 1fr) 30px;
		gap: 0 10px;
		padding: 15px 6px 15px 11px;
		margin-left: -12px;
	}

	.dus-tr__aside {
		grid-column: 1 / -1;
		padding-top: 0;
		margin-bottom: 6px;
	}

	.dus-tr__ar { font-size: 20px; line-height: 1.95; }

	.dus-tr__en { font-size: 15.5px; margin-top: 11px; }

	.dus-tr__bar { gap: 10px; }

	.dus-tr__find { width: 100%; }

	.dus-tr__find input { width: 100%; flex: 1 1 auto; }

	.dus-tr__modes button,
	.dus-tr__follow { min-height: 38px; }

	.dus-tr__copy { opacity: 1; }
}

/* ============================================================ MOTION */

@media (prefers-reduced-motion: reduce) {

	.dus-aud__play,
	.dus-part,
	.dus-part__play,
	.dus-player__play,
	.dus-player__tool,
	.dus-tr__copy,
	.dus-aud__subject { transition: none; }
}

/* ============================================================ RELATED AUDIO (Article layout)
 * The single audio lesson reuses the Article .dus-related layout. Audio has no
 * per-item artwork, so the media slot is the neutral .dus-im placeholder with a
 * centred audio mark — the audio identity, not a fake video-style thumbnail. */
.dus-related--audio .dus-related__media--audio {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--muted);
}
.dus-related--audio .dus-related__media--audio svg {
	width: 34px;
	height: 34px;
	opacity: 0.55;
}

/* The shared About-the-scholar box is dropped into the audio lesson column,
   where `.dus-home a` neutralises link colour to inherit. The scholar's name
   correctly inherits ink (matching the Article's author name), but the
   "All work by this scholar" action must read as the Article's terracotta
   link — restore exactly that treatment for it here. */
.dus-aud__lesson .dus-author--scholar .dus-lnk {
	color: var(--acc);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

/* AUDIO CATEGORY ARROWS — CLEAN TEXT-ALIGNED STYLE */
@media (min-width: 769px) {
    .dus-aud__subjects-arrow {
        flex: 0 0 28px;
        width: 28px;
        height: 54px;
        padding: 0;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }

    .dus-aud__subjects-arrow span {
        display: block;
        width: auto;
        height: auto;
        line-height: 1;
        transform: translateY(-1px);
    }

    .dus-aud__subjects-arrow:hover:not(:disabled) {
        background: transparent !important;
        opacity: .72;
    }
}

/* AUDIO CATEGORY STRIP — FADE ENDS */
@media (min-width: 769px) {
    .dus-aud__subjects-wrap::before,
    .dus-aud__subjects-wrap::after {
        width: 48px !important;
    }

    .dus-aud__subjects-wrap::before {
        left: 28px !important;
        background: linear-gradient(to right,#fff 0%,rgba(255,255,255,.92) 22%,rgba(255,255,255,.55) 55%,rgba(255,255,255,0) 100%) !important;
    }

    .dus-aud__subjects-wrap::after {
        right: 28px !important;
        background: linear-gradient(to left,#fff 0%,rgba(255,255,255,.92) 22%,rgba(255,255,255,.55) 55%,rgba(255,255,255,0) 100%) !important;
    }
}

/* ============================================================
   AUDIO LIBRARY CATEGORY NAV — MATCH ARTICLES
   ============================================================ */

.dus-aud__subjects-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 28px 0 0;
}

.dus-aud__subjects-wrap .dus-aud__subjects {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    gap: 8px;
    margin: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior-x: contain;
    scroll-behavior: smooth;
}

.dus-aud__subjects-wrap .dus-aud__subjects::-webkit-scrollbar {
    display: none;
}

.dus-aud__subjects-wrap .dus-aud__subject {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 7px;
    height: 54px;
    min-height: 54px;
    padding: 0 20px;
    border: 1px solid #e3e3e3;
    border-radius: 3px;
    background: #fff;
    color: #555;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
}

.dus-aud__subjects-wrap .dus-aud__subject:hover {
    border-color: #ccc;
    background: #fff;
    color: #111;
    text-decoration: none;
}

.dus-aud__subjects-wrap .dus-aud__subject.is-active {
    border-color: #111;
    background: #111;
    color: #fff;
}

.dus-aud__subjects-wrap .dus-aud__n {
    margin-left: 2px;
    font-size: .82em;
    opacity: .62;
}

.dus-aud__subjects-wrap .dus-aud__subject.is-active .dus-aud__n {
    opacity: .72;
}

.dus-aud__subjects-wrap .dus-cat-childmark {
    display: inline-block;
    margin-right: 2px;
    opacity: .58;
}

@media (max-width: 768px) {
    .dus-aud__subjects-wrap {
        display: block;
        margin-top: 20px;
    }

    .dus-aud__subjects-wrap .dus-aud__subjects {
        margin: 0;
        -webkit-overflow-scrolling: touch;
    }

    .dus-aud__subjects-wrap .dus-aud__subject {
        height: auto;
        min-height: 0;
        padding: 9px 13px;
        font-size: inherit;
        line-height: inherit;
    }
}


/* ============================================================
   AUDIO LIBRARY CATEGORIES — MATCH HOMEPAGE PILLS
   ============================================================ */

.dus-aud__subjects-wrap .dus-aud__subject {
    display: inline-flex !important;
    flex: 0 0 auto;
    align-items: center !important;
    gap: 10px !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 18px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--chip) !important;
    color: var(--body) !important;
    box-shadow: none !important;
    box-sizing: border-box;
    font-size: 14.5px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap;
}

.dus-aud__subjects-wrap .dus-aud__subject:hover {
    background: var(--chip) !important;
    color: var(--ink) !important;
}

.dus-aud__subjects-wrap .dus-aud__subject.is-active {
    background: var(--acc) !important;
    color: #fff !important;
    font-weight: 600 !important;
}

.dus-aud__subjects-wrap .dus-aud__subject.is-active:hover {
    color: #fff !important;
}

.dus-aud__subjects-wrap .dus-aud__n {
    margin-left: 0 !important;
    font-size: .82em !important;
    opacity: .62;
}

.dus-aud__subjects-wrap .dus-aud__subject.is-active .dus-aud__n {
    opacity: .78;
}

.dus-aud__subjects-wrap .dus-cat-childmark {
    display: none !important;
}

@media (max-width: 768px) {
    .dus-aud__subjects-wrap .dus-aud__subject {
        height: 46px !important;
        min-height: 46px !important;
        padding: 0 16px !important;
        font-size: 14px !important;
        line-height: 1 !important;
    }
}


/* ============================================================
   AUDIO CATEGORY ARROWS — EXACT ARTICLE MATCH
   ============================================================ */
@media (min-width: 769px) {
    .dus-aud__subjects-arrow {
        display: none;
        position: relative;
        z-index: 4;
        flex: 0 0 28px;
        width: 28px;
        height: 54px;
        padding: 0;
        margin: 0;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: var(--acc);
        align-items: center;
        justify-content: center;
        font: inherit;
        font-size: 29px;
        line-height: 1;
        cursor: pointer;
        transition: opacity .15s ease;
    }

    .dus-aud__subjects-wrap.is-scrollable .dus-aud__subjects-arrow {
        display: inline-flex;
    }

    .dus-aud__subjects-wrap.is-scrollable .dus-aud__subjects-prev {
        order: -1;
    }

    .dus-aud__subjects-arrow span {
        display: block;
        width: auto;
        height: auto;
        line-height: 1;
        transform: translateY(-1px);
    }

    .dus-aud__subjects-arrow:hover:not(:disabled) {
        color: var(--acc);
        background: transparent !important;
        opacity: .72;
    }

    .dus-aud__subjects-arrow:disabled {
        opacity: .22;
        cursor: default;
    }

    .dus-aud__subjects-arrow:focus,
    .dus-aud__subjects-arrow:focus-visible {
        outline: none;
        box-shadow: none !important;
    }
}

/* ============================================================
   SINGLE AUDIO — CLOSING CTA RHYTHM

   The closing CTA sits outside .dus-audiolib. The audio surface
   already reserves 80px beneath its content, while the canonical
   Article CTA supplies its own 64px top margin.

   Remove only that redundant bottom reservation on single Audio
   so the shared CTA retains the same vertical rhythm as Article.
   ============================================================ */

.dus-audiolib--single {
    padding-bottom: 0;
}


/* ============================================================
   SINGLE AUDIO — FULL-WIDTH LOWER EDITORIAL SEQUENCE

   The main lesson retains its established 1040px / reading
   measures. Only the closing editorial components expand to
   the same 1184px desktop information width as the closing CTA
   and site footer:

       About contributor
       Previous / Next
       Related audio
       Closing CTA
       Footer

   The lesson itself is deliberately untouched.
   ============================================================ */

@media (min-width: 901px) {

    .dus-audiolib--single .dus-aud__lesson {
        max-width: 1184px;
    }

    /*
     * Keep the actual lesson-reading sections on their existing
     * measures. The widened parent exists only to give the lower
     * editorial components the full closing width.
     */
    .dus-audiolib--single .dus-aud__listen,
    .dus-audiolib--single .dus-aud__transcript,
    .dus-audiolib--single .dus-aud__parts {
        max-width: 1040px;
    }

    /*
     * Shared Article lower-page components may carry their own
     * 1040px cap. Override that cap on Single Audio only.
     */
    .dus-audiolib--single .dus-author--scholar,
    .dus-audiolib--single .dus-prevnext,
    .dus-audiolib--single .dus-related {
        width: 100%;
        max-width: 1184px;
    }
}


/* ============================================================
   AUDIO CATEGORY ARROWS — MOBILE DESKTOP-MATCH
   Keep arrows in the same horizontal row as the category pills.
   ============================================================ */
@media (max-width: 768px) {

    .dus-aud__subjects-wrap {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
    }

    .dus-aud__subjects-wrap .dus-aud__subjects {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    .dus-aud__subjects-arrow {
        display: none;
        position: relative;
        z-index: 4;
        flex: 0 0 24px;
        width: 24px;
        height: 46px;
        padding: 0;
        margin: 0;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: var(--acc);
        align-items: center;
        justify-content: center;
        font: inherit;
        font-size: 27px;
        line-height: 1;
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
    }

    .dus-aud__subjects-wrap.is-scrollable .dus-aud__subjects-arrow {
        display: inline-flex;
    }

    .dus-aud__subjects-wrap.is-scrollable .dus-aud__subjects-prev {
        order: -1;
    }

    .dus-aud__subjects-arrow span {
        display: block;
        width: auto;
        height: auto;
        line-height: 1;
        transform: translateY(-1px);
    }

    .dus-aud__subjects-arrow:disabled {
        opacity: .22;
        cursor: default;
    }

    .dus-aud__subjects-arrow:focus,
    .dus-aud__subjects-arrow:focus-visible {
        outline: none;
        box-shadow: none !important;
    }
}


/* ============================================================
   AUDIO PAGINATION — COMPACT MOBILE
   Pagination output is deliberately abbreviated in PHP. Keep
   controls readable rather than shrinking a full page sequence.
   ============================================================ */
@media (max-width: 768px) {
    .dus-aud__pager ul {
        display: flex;
        flex-wrap: nowrap !important;
        align-items: center;
        gap: 5px !important;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .dus-aud__pager li {
        flex: 0 0 auto !important;
        min-width: 0;
    }

    .dus-aud__pager a,
    .dus-aud__pager span {
        width: auto !important;
        min-width: 38px !important;
        height: 42px !important;
        padding: 0 10px !important;
        box-sizing: border-box;
        font-size: 14px !important;
        white-space: nowrap;
    }

    .dus-aud__pager .prev,
    .dus-aud__pager .next {
        min-width: 0 !important;
        padding: 0 11px !important;
        font-size: 13px !important;
    }

    .dus-aud__pager .dots {
        min-width: 22px !important;
        padding: 0 2px !important;
        border-color: transparent !important;
    }
}

/* ==========================================================================
   DUSUNNAH — EXACT FROZEN ARTICLE BODY
   Single Audio written content follows the approved Article reading system.
   Player / transcript UI / metadata / cards / navigation remain independent.
   ========================================================================== */


/* --------------------------------------------------------------------------
   ENGLISH READING REGISTER
   -------------------------------------------------------------------------- */

body.single-audio .dus-aud__content {
    font-family: var(--ft-sans) !important;
    font-size: 17.5px !important;
    line-height: 1.88 !important;
}

body.single-audio .dus-aud__content > p:not([lang="ar"]):not([dir="rtl"]),
body.single-audio .dus-aud__content li:not([lang="ar"]):not([dir="rtl"]),
body.single-audio .dus-aud__content .dus-quran__tr,
body.single-audio .dus-aud__content .dus-source__tr,
body.single-audio .dus-aud__content blockquote p:not([lang="ar"]):not([dir="rtl"]) {
    direction: ltr !important;
    font-family: var(--ft-sans) !important;

    font-size: inherit !important;
    line-height: inherit !important;

    text-align: justify !important;
    text-align-last: left !important;

    hyphens: none !important;
    -webkit-hyphens: none !important;
}


/* --------------------------------------------------------------------------
   ENGLISH HEADINGS
   Same family as body. Existing hierarchy is retained by scale/weight.
   -------------------------------------------------------------------------- */

body.single-audio .dus-aud__content h1,
body.single-audio .dus-aud__content h2,
body.single-audio .dus-aud__content h3,
body.single-audio .dus-aud__content h4,
body.single-audio .dus-aud__content h5,
body.single-audio .dus-aud__content h6 {
    font-family: var(--ft-sans) !important;
}


/* --------------------------------------------------------------------------
   QUR'ANIC ARABIC
   -------------------------------------------------------------------------- */

body.single-audio .dus-aud__content .dus-quran__ar {
    position: relative !important;

    margin-top: 26px !important;
    margin-bottom: 5px !important;

    padding-inline: 1.35em !important;

    direction: rtl !important;
    unicode-bidi: isolate !important;

    font-family: "Amiri", serif !important;
    font-size: 32px !important;
    line-height: 2 !important;
    font-weight: 400 !important;

    text-align: justify !important;
    text-align-last: right !important;

    color: var(--ink) !important;
}

body.single-audio .dus-aud__content .dus-quran__ar::before,
body.single-audio .dus-aud__content .dus-quran__ar::after {
    display: inline !important;
    position: static !important;

    font-family: "Amiri", serif !important;
    font-size: 1em !important;
    line-height: inherit !important;
    font-weight: 400 !important;

    color: var(--acc) !important;
}

body.single-audio .dus-aud__content .dus-quran__ar::before {
    content: "﴿" !important;
    margin-left: .20em !important;
}

body.single-audio .dus-aud__content .dus-quran__ar::after {
    content: "﴾" !important;
    margin-right: .20em !important;
}


/* --------------------------------------------------------------------------
   HADITH / ATHAR / SCHOLARLY ARABIC
   -------------------------------------------------------------------------- */

body.single-audio .dus-aud__content .dus-source__ar,
body.single-audio .dus-aud__content p[lang="ar"]:not(.dus-quran__ar),
body.single-audio .dus-aud__content p[dir="rtl"]:not(.dus-quran__ar),
body.single-audio .dus-aud__content .dus-ar,
body.single-audio .dus-aud__content .dus-arabic-para {
    direction: rtl !important;
    unicode-bidi: isolate !important;

    font-family: "Amiri", serif !important;

    text-align: justify !important;
    text-align-last: right !important;
}


/* --------------------------------------------------------------------------
   SOURCE PAIRS / QUOTATIONS
   -------------------------------------------------------------------------- */

body.single-audio .dus-aud__content blockquote {
    margin: 30px 0 34px !important;
    padding: 1px 0 1px 20px !important;

    border: 0 !important;
    border-left: 2px solid var(--acc) !important;

    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body.single-audio .dus-aud__content .dus-source__ar {
    margin-left: 0 !important;
    margin-bottom: 0 !important;

    padding-left: 20px !important;

    border-left: 2px solid var(--acc) !important;
}

body.single-audio .dus-aud__content .dus-source__tr {
    margin-top: 0 !important;
    margin-bottom: 32px !important;

    padding: 7px 0 1px 20px !important;

    border-left: 2px solid var(--acc) !important;
}


/* --------------------------------------------------------------------------
   ARABIC HONORIFICS
   -------------------------------------------------------------------------- */

body.single-audio .dus-aud__content [lang="ar"] .dus-honorific,
body.single-audio .dus-aud__content [dir="rtl"] .dus-honorific,
body.single-audio .dus-aud__content .dus-quran__ar .dus-honorific,
body.single-audio .dus-aud__content .dus-source__ar .dus-honorific,
body.single-audio .dus-aud__content .dus-ar .dus-honorific,
body.single-audio .dus-aud__content .dus-arabic-para .dus-honorific {
    display: none !important;
}


/* --------------------------------------------------------------------------
   MOBILE
   -------------------------------------------------------------------------- */

@media screen and (max-width: 767px) {

    body.single-audio .dus-aud__content {
        font-size: 17px !important;
        line-height: 1.85 !important;
    }

    body.single-audio .dus-aud__content .dus-quran__ar {
        padding-inline: .85em !important;
        font-size: 26px !important;
    }

    body.single-audio .dus-aud__content .dus-source__ar {
        font-size: 22px !important;
    }

    body.single-audio .dus-aud__content blockquote,
    body.single-audio .dus-aud__content .dus-source__ar,
    body.single-audio .dus-aud__content .dus-source__tr {
        padding-left: 15px !important;
    }
}

/* ================= END EXACT FROZEN ARTICLE BODY ========================= */

/* Audio detail — lower posted-by/date/lesson metadata */
.single-audio .dus-aud__facts {
    margin-top: 14px;
}