/* -----------------------------------------------------------------
   Dark palette. Skins change these eleven values and nothing else,
   so every panel, border and label moves together.
   -------------------------------------------------------------- */
.alh {
	--alh-d-bg: #14110c;
	--alh-d-panel: #1b1610;
	--alh-d-card: #1d1913;
	--alh-d-raise: #241d13;
	--alh-d-well: #17140f;
	--alh-d-line: #2f271c;
	--alh-d-line2: #3a2f1d;
	--alh-d-line3: #6b5327;
	--alh-d-head: #f6efe2;
	--alh-d-text: #ece3d2;
	--alh-d-text-rgb: 233, 224, 207;
	--alh-d-accent: #b8791f;
	--alh-d-accent2: #e2ac52;
	--alh-d-accent3: #f0cd93;
	--alh-d-accent-rgb: 226, 172, 82;
	--alh-d-ink: #2a1f0b;
}

/* An element marked hidden must stay hidden. Any author rule that sets
   display — and several here do — silently beats the hidden attribute,
   which is how the sleep menu ended up permanently open on top of the
   play button. */
.alh [hidden] {
	display: none !important;
}

/* Aumaujaya Lyrics Hub
   Palette follows the site's existing devotional cream/gold.
   Typography comes from the settings via CSS custom properties. */

.alh {
	max-width: 1180px;
	margin: 2rem auto 3rem;
	padding: 0 1rem;
}

.alh-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.85rem;
	color: #6b6357;
	margin-bottom: 0.85rem;
}

.alh-crumbs a {
	color: #6b6357;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.alh-crumbs a:hover {
	color: var(--alh-d-accent);
	border-bottom-color: #e5d3b0;
}

.alh-title {
	font-family: var(--alh-title-font, inherit);
	font-size: var(--alh-title-size, 30px);
	line-height: 1.3;
	color: #2a2620;
	margin: 0 0 0.75rem;
}

.alh-h2 {
	font-size: 1.15rem;
	color: #2a2620;
	margin: 2rem 0 0.9rem;
}

.alh-intro {
	max-width: 66ch;
	color: #554f45;
	line-height: 1.7;
	margin-bottom: 1.25rem;
}

.alh-count {
	font-size: 0.85rem;
	color: #8a8073;
	margin: 0 0 1.4rem;
}

/* ---------- Category chips ---------- */
.alh-filters,
.alh-terms {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin: 0 0 1.5rem;
}

.alh-filter,
.alh-term {
	display: inline-block;
	padding: 0.35rem 0.85rem;
	border: 1px solid #ece4d6;
	border-radius: 999px;
	background: #fffdf8;
	color: #6b6357;
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
}

.alh-filter:hover,
.alh-term:hover {
	border-color: #e0c894;
	color: #8a5a12;
}

.alh-filter.is-active {
	background: var(--alh-d-accent);
	border-color: var(--alh-d-accent);
	color: #fff;
}

/* ---------- Grids ---------- */
.alh-grid {
	display: grid;
	gap: 1.15rem;
	grid-template-columns: repeat(var(--alh-cols, 3), minmax(0, 1fr));
}

.alh-grid--d {
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

@media (max-width: 1100px) {
	.alh-grid { grid-template-columns: repeat(min(var(--alh-cols, 3), 3), minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	.alh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.alh-grid--d { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
	.alh-grid,
	.alh-grid--d { grid-template-columns: 1fr; }
}

/* ---------- Card, shared ---------- */
.alh-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fffdf8;
	border: 1px solid #ece4d6;
	border-radius: 12px;
	overflow: hidden;
	transition: border-color 0.18s ease, transform 0.18s ease;
}

.alh-card:hover {
	border-color: #e0c894;
	transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
	.alh-card { transition: none; }
	.alh-card:hover { transform: none; }
}

.alh-card__thumb {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	background-color: var(--alh-d-well);
	/* The artwork is also painted as a background, so the tile still shows
	   it if an optimiser or lazy-loader strips the <img> tag. */
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	overflow: hidden;
}

.alh-card__thumb img {
	/* Pinned to the box rather than sized by it. Themes routinely force
	   height:auto or min-height on every image on the page; absolute
	   positioning puts the artwork beyond their reach, so a tile can be
	   neither stretched nor zoomed. */
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	min-height: 0;
	object-fit: cover;
	display: block;
	margin: 0;
}

.alh-card__play {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: rgba(24, 20, 15, 0.62);
	pointer-events: none;
}

.alh-card__play::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 9px 0 9px 14px;
	border-color: transparent transparent transparent #fff;
	transform: translateX(2px);
}

.alh-card:hover .alh-card__play {
	background: rgba(184, 121, 31, 0.9);
}

.alh-card__body {
	padding: 0.8rem 0.95rem 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.alh-card__title {
	font-family: var(--alh-card-font, inherit);
	font-size: var(--alh-card-size, 15px);
	line-height: 1.4;
	font-weight: 600;
	margin: 0;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.alh-card__title a {
	color: #2a2620;
	text-decoration: none;
}

/* A real link covering the whole tile, so tapping the artwork, the play
   badge or the verse all open the song — a play triangle that does nothing
   when you tap it is worse than no play triangle. Being a real anchor
   rather than a pseudo-element, it also right-clicks and middle-clicks
   like any other link. */
.alh-card__cover {
	position: absolute;
	inset: 0;
	z-index: 2;
	text-indent: -9999px;
	overflow: hidden;
}

.alh-card__body,
.alh-card__thumb {
	position: relative;
}

.alh-card__title a {
	position: relative;
	z-index: 3;
}

.alh-card:hover .alh-card__title a {
	color: var(--alh-d-accent);
}

.alh-card__verse {
	font-family: var(--alh-lyrics-font, inherit);
	font-size: 0.92rem;
	line-height: 1.75;
	color: #6b6357;
	margin: 0;
	padding-left: 0.65rem;
	border-left: 2px solid #ece4d6;
	border-radius: 0;
}

.alh-card__meta {
	display: none;
}

.alh-card__tag {
	align-self: flex-start;
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #a08a63;
}

/* ---------- Layout B: featured ---------- */
.alh-card--featured {
	flex-direction: row;
}

.alh-card--featured .alh-card__thumb {
	flex: 0 0 46%;
}

.alh-card--featured .alh-card__body {
	padding: 1.4rem 1.6rem;
	justify-content: center;
	gap: 0.7rem;
}

.alh-card--featured .alh-card__title {
	font-size: calc(var(--alh-card-size, 15px) + 6px);
}

.alh-card--featured .alh-card__verse {
	font-size: 1rem;
}

@media (max-width: 700px) {
	.alh-card--featured { flex-direction: column; }
	.alh-card--featured .alh-card__thumb { flex: none; }
}

/* ---------- Layout C: square poster ---------- */
.alh-card--c .alh-card__thumb {
	aspect-ratio: 1 / 1;
}

.alh-card--c .alh-card__thumb img {
	object-fit: var(--alh-fit, cover);
}

/* ---------- Layout D: verse first ---------- */
.alh-card--d {
	flex-direction: column;
	padding: 0.95rem 1.05rem 1.1rem;
}

.alh-card--d .alh-card__thumb {
	width: 92px;
	aspect-ratio: 16 / 9;
	border-radius: 8px;
	flex: none;
}

.alh-card--d .alh-card__body {
	padding: 0;
}

.alh-card--d .alh-card__verse {
	font-size: 0.98rem;
	line-height: 1.85;
	color: #554f45;
}

.alh-card--d .alh-card__play {
	width: 30px;
	height: 30px;
}

.alh-card--d .alh-card__play::after {
	border-width: 6px 0 6px 10px;
}

/* Head row: small thumb beside the title. */
.alh-card--d {
	display: grid;
	grid-template-columns: 92px minmax(0, 1fr);
	grid-template-areas: "thumb title" "verse verse";
	column-gap: 0.8rem;
	row-gap: 0.7rem;
	align-items: center;
}

.alh-card--d .alh-card__thumb { grid-area: thumb; }

.alh-card--d .alh-card__body {
	grid-area: title;
	gap: 0.3rem;
}

.alh-card--d .alh-card__verse {
	grid-area: verse;
	margin: 0;
}

/* Older iOS Safari has no aspect-ratio; keep the boxes from collapsing. */
@supports not (aspect-ratio: 16 / 9) {
	.alh-card__thumb {
		height: 0;
		padding-bottom: 56.25%;
	}
	.alh-card--c .alh-card__thumb { padding-bottom: 100%; }
	.alh-card__thumb img {
		position: absolute;
		inset: 0;
	}
	.alh-video {
		height: 0;
		padding-bottom: 56.25%;
	}
}

/* ---------- Single song page ---------- */
.alh-video {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: 12px;
	overflow: hidden;
	margin-bottom: 1.1rem;
}

.alh-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.alh-single > section {
	margin-top: 2.25rem;
	padding-top: 1.5rem;
	border-top: 1px solid #f0e8da;
}

.alh-single > section:first-of-type {
	border-top: 0;
	padding-top: 0;
}

.alh-single > section > .alh-h2:first-child {
	margin-top: 0;
}

.alh-lyrics__body,
.alh-translit__body,
.alh-meaning__body {
	overflow-wrap: anywhere;
	font-family: var(--alh-lyrics-font, inherit);
	font-size: var(--alh-lyrics-size, 19px);
	line-height: var(--alh-lyrics-lh, 1.9);
	color: #322d26;
	max-width: 62ch;
}

.alh-lyrics__body p {
	margin: 0 0 1.2rem;
}

.alh-translit__body,
.alh-meaning__body {
	font-size: calc(var(--alh-lyrics-size, 19px) - 3px);
	color: #55503f;
}

.alh-pending {
	padding: 1rem 1.2rem;
	border: 1px dashed #e0c894;
	border-radius: 10px;
	background: #fffaf0;
	color: #8a5a12;
}

/* ---------- Share ---------- */
.alh-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 1.5rem;
}

.alh-share__label {
	font-weight: 600;
	color: #6b6357;
	margin-right: 0.2rem;
}

.alh-share__btn {
	display: inline-block;
	padding: 0.45rem 0.9rem;
	font-size: 0.88rem;
	font-weight: 600;
	border: 0;
	border-radius: 6px;
	color: #fff;
	text-decoration: none;
	cursor: pointer;
}

.alh-share__btn--wa { background: #25d366; }
.alh-share__btn--fb { background: #1877f2; }
.alh-share__btn--x  { background: #14171a; }
.alh-share__btn--tg { background: #229ed9; }

.alh-share__btn--copy {
	background: var(--alh-d-accent);
}

.alh-share__btn:hover { opacity: 0.9; }

.alh-seeall {
	display: inline-block;
	margin-top: 1.2rem;
	padding: 0.55rem 1rem;
	font-weight: 600;
	color: #8a5a12;
	background: #fdf6e8;
	border: 1px solid #ecd9b4;
	border-radius: 6px;
	text-decoration: none;
}

.alh-seeall:hover {
	background: #f8ecd4;
}

.alh-sub {
	margin: 1.75rem 0 0.5rem;
}

/* ---------- Pagination ---------- */
.alh-pager {
	margin-top: 2.2rem;
}

.alh-pager .page-numbers {
	display: inline-block;
	min-width: 38px;
	padding: 0.45rem 0.7rem;
	margin-right: 0.35rem;
	text-align: center;
	border: 1px solid #ece4d6;
	border-radius: 6px;
	background: #fffdf8;
	color: #6b6357;
	font-weight: 600;
	font-size: 0.9rem;
	text-decoration: none;
}

.alh-pager .page-numbers:hover {
	border-color: #e0c894;
	color: #8a5a12;
}

.alh-pager .page-numbers.current {
	background: var(--alh-d-accent);
	border-color: var(--alh-d-accent);
	color: #fff;
}

/* ---------- Phones ---------- */
@media (max-width: 600px) {
	.alh {
		margin: 1.25rem auto 2.25rem;
		padding: 0 1rem;
	}

	/* A 40px title chosen for desktop must not stay 40px on a 360px screen. */
	.alh-title {
		font-size: clamp(20px, 6.2vw, var(--alh-title-size, 30px));
	}

	.alh-h2 {
		font-size: 1.05rem;
		margin-top: 1.75rem;
	}

	.alh-lyrics__body,
	.alh-translit__body,
	.alh-meaning__body {
		font-size: clamp(16px, 4.6vw, var(--alh-lyrics-size, 19px));
	}

	/* Category chips become a swipeable row instead of a tall block. */
	.alh-filters {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		margin-left: -1rem;
		margin-right: -1rem;
		padding: 0 1rem 0.25rem;
	}

	.alh-filters::-webkit-scrollbar { display: none; }

	.alh-filter { white-space: nowrap; }

	/* Thumbs and tap targets. */
	.alh-share__btn,
	.alh-pager .page-numbers {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.alh-share {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.5rem;
	}

	.alh-share__label {
		grid-column: 1 / -1;
		margin: 0;
	}

	.alh-seeall {
		display: block;
		text-align: center;
		min-height: 44px;
		line-height: 30px;
	}

	.alh-card__body { padding: 0.75rem 0.85rem 0.9rem; }
}

/* Very narrow phones: the verse-card thumb gives up some width. */
@media (max-width: 380px) {
	.alh-card--d {
		grid-template-columns: 72px minmax(0, 1fr);
		column-gap: 0.65rem;
		padding: 0.85rem 0.9rem 0.95rem;
	}
}

/* ---------- Print: a clean lyric sheet ---------- */
@media print {
	.alh-video,
	.alh-share,
	.alh-sub,
	.alh-related,
	.alh-filters,
	.alh-pager,
	.alh-crumbs {
		display: none !important;
	}

	.alh {
		max-width: none;
		margin: 0;
		padding: 0;
	}

	.alh-lyrics__body {
		font-size: 14pt;
		line-height: 1.7;
		color: #000;
		max-width: none;
	}

	.alh-single > section {
		border-top: 0;
		padding-top: 0;
	}
}

/* ---------- Lyric tabs ---------- */
.alh-tabs__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0 0 1.25rem;
	border-bottom: 1px solid #ece4d6;
	padding-bottom: 0.6rem;
}

.alh-tabs__tab {
	appearance: none;
	border: 1px solid #ece4d6;
	background: #fffdf8;
	color: #6b6357;
	font-family: inherit;
	font-size: 0.92rem;
	font-weight: 600;
	padding: 0.5rem 1rem;
	min-height: 44px;
	border-radius: 999px;
	cursor: pointer;
	touch-action: manipulation;
}

.alh-tabs__tab:hover {
	border-color: #e0c894;
	color: #8a5a12;
}

.alh-tabs__tab.is-active {
	background: var(--alh-d-accent);
	border-color: var(--alh-d-accent);
	color: #fff;
}

.alh-tabs__tab:focus-visible {
	outline: 2px solid var(--alh-d-accent);
	outline-offset: 2px;
}

/* Before the script runs every panel is visible, so nothing is lost if it
   never does. Once enhanced, only the selected panel shows. */
.alh-tabs.is-enhanced .alh-tabs__panel {
	display: none;
}

.alh-tabs.is-enhanced .alh-tabs__panel.is-active {
	display: block;
}

.alh-tabs:not(.is-enhanced) .alh-tabs__nav {
	display: none;
}

.alh-tabs:not(.is-enhanced) .alh-tabs__panel + .alh-tabs__panel {
	margin-top: 1.75rem;
	padding-top: 1.5rem;
	border-top: 1px solid #f0e8da;
}

/* ---------- Accordion alternative ---------- */
.alh-accordion__item {
	border-bottom: 1px solid #f0e8da;
	padding: 0.35rem 0;
}

.alh-accordion__head {
	cursor: pointer;
	list-style: none;
	padding: 0.85rem 0;
	font-size: 1.05rem;
	font-weight: 600;
	color: #2a2620;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	touch-action: manipulation;
}

.alh-accordion__head::-webkit-details-marker {
	display: none;
}

.alh-accordion__head::before {
	content: "＋";
	color: var(--alh-d-accent);
	font-weight: 400;
}

.alh-accordion__item[open] .alh-accordion__head::before {
	content: "－";
}

/* ---------- Tiles must be tappable ---------- */
.alh-card {
	touch-action: manipulation;
	-webkit-tap-highlight-color: rgba(184, 121, 31, 0.12);
}

.alh-card__cover {
	pointer-events: auto;
}

.alh-card__play {
	pointer-events: none;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Song page stage ---------- */
/* The main column stays first in the source — search engines and screen
   readers meet the song before the suggestions — while the rail can sit
   on whichever side you choose. */
	@media (max-width: 560px) {
	.alh-aside .alh-card {
		grid-template-columns: 148px minmax(0, 1fr);
	}

	.alh-player__bar { justify-content: stretch; }

	.alh-player__btn {
		flex: 1;
		justify-content: center;
		min-height: 44px;
	}
}

/* =================================================================
   Song page templates
   ================================================================= */

.alh-song .alh-scroll {
	max-width: 720px;
	margin: 0 auto;
}

.alh-song .alh-title {
	margin-bottom: 0.5rem;
}

.alh-title--centred {
	text-align: center;
}

.alh-song--manuscript .alh-meta {
	justify-content: center;
}

/* ---------- Player facade ---------- */
.alh-video {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background-color: var(--alh-d-well);
	background-position: center;
	background-size: cover;
	border-radius: 12px;
	overflow: hidden;
}

.alh-video img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.alh-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Pill: a quiet invitation rather than a stage. */

/* Once playing, the pill becomes a proper player. */
.alh-player--pill .alh-video.is-playing {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 12px;
	overflow: hidden;
	background: #000;
}

/* ---------- 1. Manuscript ---------- */
.alh-ornament {
	text-align: center;
	color: var(--alh-d-accent);
	letter-spacing: 0.35em;
	font-size: 1rem;
	margin-bottom: 0.9rem;
}

.alh-rule {
	width: 55%;
	height: 1px;
	margin: 1.9rem auto;
	background: linear-gradient(to right, transparent, #e3d5b8, transparent);
}

.alh-lyrics__body--centred {
	text-align: center;
	max-width: none;
}

.alh-song--manuscript .alh-stanza {
	padding: 0;
	border: 0;
	background: transparent;
	margin-bottom: 1.9rem;
}

.alh-song--manuscript .alh-stanza--refrain .alh-stanza__text {
	color: #8a5a12;
}

.alh-song--manuscript .alh-stanza__label {
	color: #c2a878;
}

.alh-song--manuscript .alh-share {
	justify-content: center;
}

/* ---------- 3. Stanza cards ---------- */
.alh-stanzas {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}

.alh-stanza {
	position: relative;
	padding: 1rem 1.15rem;
	border: 1px solid #ece4d6;
	border-radius: 12px;
	background: #fffdf8;
}

.alh-stanza--refrain {
	background: #fdf6e8;
	border-color: #ecd9b4;
}

.alh-stanza__label {
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #a08a63;
	margin-bottom: 0.5rem;
}

.alh-stanza--refrain .alh-stanza__label {
	color: var(--alh-d-accent);
}

.alh-stanza__text {
	font-family: var(--alh-lyrics-font, inherit);
	font-size: var(--alh-lyrics-size, 19px);
	line-height: var(--alh-lyrics-lh, 1.9);
	color: #322d26;
	overflow-wrap: anywhere;
}

.alh-stanza--refrain .alh-stanza__text {
	color: #6d460c;
}

.alh-stanza__tools {
	display: flex;
	gap: 0.4rem;
	margin-top: 0.7rem;
	opacity: 0;
	transition: opacity 0.16s ease;
}

/* Synced lyric lines — only present on songs imported with timing. */
.alh-timed-lyrics {
	font-family: var(--alh-lyrics-font, inherit);
	font-size: var(--alh-lyrics-size, 19px);
	line-height: var(--alh-lyrics-lh, 1.9);
	color: #322d26;
	overflow-wrap: anywhere;
}

.alh-line {
	cursor: pointer;
	border-radius: 4px;
	padding: 0.05em 0.3em;
	margin: 0 -0.3em;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.alh-line:hover {
	background-color: rgba(184, 121, 31, 0.12);
}

.alh-line:focus-visible {
	outline: 2px solid var(--alh-d-accent, #b8791f);
	outline-offset: 2px;
}

.alh-line.is-active {
	background-color: rgba(184, 121, 31, 0.18);
	color: #6d460c;
	font-weight: 600;
}

.alh-stanza:hover .alh-stanza__tools,
.alh-stanza:focus-within .alh-stanza__tools {
	opacity: 1;
}

/* Touch screens have no hover, so the tools stay visible there. */
@media (hover: none) {
	.alh-stanza__tools { opacity: 1; }
}

.alh-stanza__tool {
	appearance: none;
	border: 1px solid #ece4d6;
	background: #fff;
	color: #6b6357;
	font-family: inherit;
	font-size: 0.78rem;
	font-weight: 600;
	padding: 0.3rem 0.75rem;
	border-radius: 999px;
	cursor: pointer;
	text-decoration: none;
	min-height: 34px;
	display: inline-flex;
	align-items: center;
}

.alh-stanza__tool:hover {
	border-color: #e0c894;
	color: #8a5a12;
}

/* ---------- Quiet accordion (manuscript secondary text) ---------- */
.alh-accordion--quiet {
	max-width: 640px;
	margin: 1.75rem auto 0;
	text-align: left;
}

.alh-aside--below {
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid #f0e8da;
}

.alh-aside--below .alh-grid {
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.alh-aside--below .alh-card {
	grid-template-columns: minmax(0, 1fr);
	display: flex;
	flex-direction: column;
	background: #fffdf8;
	border: 1px solid #ece4d6;
	padding: 0;
}

.alh-aside--below .alh-card__body {
	padding: 0.7rem 0.85rem 0.9rem;
}

.alh-aside--below .alh-card__meta {
	display: block;
}

/* ---------- Sticky mini player ---------- */
/* The holder keeps the player's place in the flow while it is docked, so
   the page never jumps and the dock decision cannot oscillate. */
.alh-player__holder {
	position: relative;
}

/* The player only detaches once it is actually playing and the reader has
   scrolled past it — a thumbnail following you down the page would just be
   in the way. */

@media (max-width: 900px) {
	/* On a phone it rides the top of the screen, the way YouTube does,
	   with the lyric scrolling underneath. */
}

/* =================================================================
   Docked top bar — the compact strip that replaces the player
   ================================================================= */

/* =================================================================
   Sacred layout
   ================================================================= */
.alh-aside--rail .alh-grid {
	grid-template-columns: 1fr;
	gap: 0.85rem;
}

.alh-aside--rail .alh-card {
	display: grid;
	grid-template-columns: 148px minmax(0, 1fr);
	gap: 0.75rem;
	padding: 0;
	border: 0;
	background: transparent;
	align-items: start;
}

.alh-aside--rail .alh-card:hover { transform: none; }

.alh-aside--rail .alh-card__body { padding: 0.1rem 0.2rem 0 0; gap: 0.3rem; }

.alh-aside--rail .alh-card__title {
	font-size: 0.92rem;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.alh-aside--rail .alh-card__verse,
.alh-aside--rail .alh-card__tag { display: none; }

.alh-aside--rail .alh-card__meta { display: block; }

.alh-eyebrow {
	font-size: 0.72rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--alh-d-accent);
	margin-bottom: 0.6rem;
}

/* =================================================================
   Sacred skin — dark ground, gold light
   ================================================================= */
.alh-dark {
	background: var(--alh-d-bg);
	color: var(--alh-d-text);
	padding-top: 1.5rem;
	padding-bottom: 2.5rem;
	max-width: none;
	padding-left: max(1rem, calc((100% - 1180px) / 2));
	padding-right: max(1rem, calc((100% - 1180px) / 2));
}

.alh-dark .alh-title,
.alh-dark .alh-h2,
.alh-dark .alh-archive__title {
	color: var(--alh-d-head);
}

.alh-dark .alh-crumbs,
.alh-dark .alh-crumbs a,
.alh-dark .alh-meta,
.alh-dark .alh-count,
.alh-dark .alh-archive__count {
	color: rgba(var(--alh-d-text-rgb), 0.55);
}

.alh-dark .alh-crumbs a:hover,
.alh-dark .alh-filter:hover,
.alh-dark .alh-term:hover {
	color: var(--alh-d-accent2);
}

.alh-dark .alh-rule {
	background: linear-gradient(to right, transparent, rgba(var(--alh-d-accent-rgb), 0.5), transparent);
}

.alh-dark .alh-ornament { color: var(--alh-d-accent2); }

/* Cards and panels */
.alh-dark .alh-card,
.alh-dark .alh-stanza,
.alh-dark .alh-prevnext__link {
	background: var(--alh-d-card);
	border-color: var(--alh-d-line);
}

.alh-dark .alh-card:hover {
	border-color: var(--alh-d-line3);
}

.alh-dark .alh-card__title a,
.alh-dark .alh-stanza__text {
	color: var(--alh-d-text);
}

.alh-dark .alh-card:hover .alh-card__title a { color: var(--alh-d-accent2); }

.alh-dark .alh-card__verse,
.alh-dark .alh-card__meta,
.alh-dark .alh-card__tag {
	color: rgba(var(--alh-d-text-rgb), 0.5);
}

.alh-dark .alh-card__verse { border-left-color: var(--alh-d-line); }

.alh-dark .alh-aside--rail .alh-card,
.alh-dark .alh-aside .alh-card {
	background: transparent;
}

.alh-dark .alh-aside .alh-card:hover {
	background: var(--alh-d-card);
}

/* Lyrics */
.alh-dark .alh-lyrics__body,
.alh-dark .alh-translit__body,
.alh-dark .alh-meaning__body,
.alh-dark .alh-timed-lyrics {
	color: var(--alh-d-text);
}

.alh-dark .alh-line:hover {
	background-color: rgba(var(--alh-d-accent-rgb), 0.14);
}

.alh-dark .alh-line.is-active {
	background-color: rgba(var(--alh-d-accent-rgb), 0.22);
	color: var(--alh-d-accent3);
}

.alh-dark .alh-translit__body,
.alh-dark .alh-meaning__body {
	color: rgba(var(--alh-d-text-rgb), 0.72);
}

.alh-dark .alh-stanza--refrain {
	background: rgba(var(--alh-d-accent-rgb), 0.1);
	border-color: rgba(var(--alh-d-accent-rgb), 0.32);
}

.alh-dark .alh-stanza--refrain .alh-stanza__text { color: var(--alh-d-accent3); }
.alh-dark .alh-stanza__label { color: rgba(var(--alh-d-accent-rgb), 0.7); }

.alh-dark .alh-stanza__tool {
	background: var(--alh-d-raise);
	border-color: var(--alh-d-line);
	color: rgba(var(--alh-d-text-rgb), 0.75);
}

.alh-dark .alh-stanza__tool:hover {
	border-color: var(--alh-d-line3);
	color: var(--alh-d-accent2);
}

/* Tabs, chips, buttons */
.alh-dark .alh-tabs__nav { border-bottom-color: var(--alh-d-line); }

.alh-dark .alh-tabs__tab,
.alh-dark .alh-filter,
.alh-dark .alh-term,
.alh-dark .alh-player__btn,
.alh-dark .alh-pager .page-numbers {
	background: var(--alh-d-card);
	border-color: var(--alh-d-line);
	color: rgba(var(--alh-d-text-rgb), 0.72);
}

.alh-dark .alh-tabs__tab.is-active,
.alh-dark .alh-filter.is-active,
.alh-dark .alh-pager .page-numbers.current {
	background: var(--alh-d-accent);
	border-color: var(--alh-d-accent2);
	color: var(--alh-d-ink);
}

.alh-dark .alh-player__btn:hover,
.alh-dark .alh-pager .page-numbers:hover {
	border-color: var(--alh-d-line3);
	color: var(--alh-d-accent2);
}

.alh-dark .alh-seeall {
	background: rgba(var(--alh-d-accent-rgb), 0.12);
	border-color: rgba(var(--alh-d-accent-rgb), 0.32);
	color: var(--alh-d-accent2);
}

.alh-dark .alh-seeall:hover {
	background: rgba(var(--alh-d-accent-rgb), 0.2);
	color: var(--alh-d-accent3);
}

.alh-dark .alh-share__label { color: rgba(var(--alh-d-text-rgb), 0.6); }

.alh-dark .alh-accordion__item { border-bottom-color: var(--alh-d-line); }
.alh-dark .alh-accordion__head { color: var(--alh-d-text); }
.alh-dark .alh-accordion__head::before { color: var(--alh-d-accent2); }

.alh-dark .alh-pending {
	background: rgba(var(--alh-d-accent-rgb), 0.08);
	border-color: rgba(var(--alh-d-accent-rgb), 0.35);
	color: var(--alh-d-accent3);
}

.alh-dark .alh-aside--below,
.alh-dark .alh-single > section,
.alh-dark .alh-tabs:not(.is-enhanced) .alh-tabs__panel + .alh-tabs__panel {
	border-top-color: var(--alh-d-line);
}

.alh-dark .alh-intro { color: rgba(var(--alh-d-text-rgb), 0.75); }

/* =================================================================
   Console player
   ================================================================= */
.alh-console {
	background: var(--alh-d-panel);
	border: 1px solid var(--alh-d-line);
	border-radius: 16px;
	padding: 1.1rem 1.25rem 1.25rem;
	color: var(--alh-d-text);
	box-shadow: 0 18px 40px rgba(12, 9, 6, 0.28);
}

.alh-console__head {
	display: flex;
	flex-wrap: nowrap;
	gap: 1.1rem;
	align-items: stretch;
}

.alh-console__head > .alh-console__art {
	flex: 0 0 172px;
}

.alh-console__head > .alh-console__info {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
}

.alh-console__art img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.alh-console__art {
	position: relative;
	width: 100%;
	max-width: 172px;
	aspect-ratio: 16 / 10;
	border-radius: 10px;
	background-color: var(--alh-d-well);
	background-position: center;
	background-size: cover;
	overflow: hidden;
}

.alh-console__artplay {
	position: absolute;
	inset: 0;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	cursor: pointer;
	touch-action: manipulation;
	transition: background 0.16s ease;
}

.alh-console__artplay:hover {
	background: rgba(16, 12, 8, 0.22);
}

.alh-console__info {
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.alh-console .alh-eyebrow {
	margin-bottom: 0.3rem;
	color: var(--alh-d-accent);
}

.alh-console__title {
	font-size: 1.12rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--alh-d-head);
	overflow-wrap: anywhere;
}

.alh-console__channel {
	font-size: 0.82rem;
	color: rgba(var(--alh-d-text-rgb), 0.5);
	margin-top: 0.2rem;
}

/* ---------- Scrub bar ---------- */
.alh-console__scrub {
	position: relative;
	margin-top: auto;
	padding-top: 1rem;
	height: 62px;
	cursor: pointer;
	touch-action: manipulation;
}

.alh-console__bars {
	display: flex;
	align-items: flex-end;
	gap: 3px;
	height: 46px;
	width: 100%;
}

.alh-console__bars span {
	flex: 1;
	min-width: 2px;
	background: rgba(var(--alh-d-text-rgb), 0.16);
	border-radius: 2px 2px 0 0;
	transform-origin: bottom;
	/* Held still until the song is playing. */
	animation: alh-wave 900ms ease-in-out infinite alternate;
	animation-play-state: paused;
}

/* The bars move to show that something is playing. They are not read
   from the recording — a cross-origin YouTube stream cannot be analysed —
   so they mark rhythm and position, nothing more. */
.alh-console.is-playing .alh-console__bars span {
	animation-play-state: running;
	background: rgba(var(--alh-d-accent-rgb), 0.32);
}

.alh-console__bars span:nth-child(3n) { animation-duration: 640ms; }
.alh-console__bars span:nth-child(3n + 1) { animation-duration: 820ms; }
.alh-console__bars span:nth-child(4n) { animation-duration: 1080ms; }
.alh-console__bars span:nth-child(5n) { animation-duration: 760ms; }
.alh-console__bars span:nth-child(2n) { animation-delay: 120ms; }
.alh-console__bars span:nth-child(3n + 2) { animation-delay: 260ms; }
.alh-console__bars span:nth-child(5n + 3) { animation-delay: 400ms; }

@keyframes alh-wave {
	from { transform: scaleY(0.35); }
	to   { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
	.alh-console.is-playing .alh-console__bars span {
		animation: none;
		transform: none;
	}
}

.alh-console__fill {
	position: absolute;
	left: 0;
	bottom: 8px;
	height: 3px;
	width: 0;
	background: linear-gradient(to right, var(--alh-d-accent), var(--alh-d-accent2));
	border-radius: 2px;
	pointer-events: none;
	transition: width 0.2s linear;
}

.alh-console__fill::after {
	content: "";
	position: absolute;
	right: -4px;
	top: -3px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--alh-d-accent3);
}

.alh-console__times {
	display: flex;
	justify-content: space-between;
	font-size: 0.75rem;
	color: rgba(var(--alh-d-text-rgb), 0.45);
	margin-top: 0.2rem;
	font-variant-numeric: tabular-nums;
}

/* ---------- Transport ---------- */
.alh-console__transport {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	margin: 1.1rem 0 0.9rem;
}

.alh-console__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--alh-d-line2);
	background: var(--alh-d-raise);
	color: rgba(var(--alh-d-text-rgb), 0.75);
	font-size: 0.95rem;
	text-decoration: none;
	cursor: pointer;
	touch-action: manipulation;
	transition: border-color 0.16s ease, color 0.16s ease;
}

.alh-console__btn:hover {
	border-color: var(--alh-d-line3);
	color: var(--alh-d-accent3);
}

.alh-console__btn.is-disabled {
	opacity: 0.3;
	cursor: default;
}

.alh-console__btn--main {
	width: 62px;
	height: 62px;
	font-size: 1.25rem;
	background: radial-gradient(circle at 50% 35%, var(--alh-d-accent3), var(--alh-d-accent));
	border-color: var(--alh-d-accent3);
	color: var(--alh-d-ink);
	box-shadow: 0 0 26px rgba(var(--alh-d-accent-rgb), 0.35);
}

.alh-console__btn--main:hover {
	color: var(--alh-d-ink);
}

/* ---------- Foot row ---------- */
.alh-console__foot {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
	flex-wrap: wrap;
}

.alh-console__pill {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	min-height: 42px;
	padding: 0.5rem 1.1rem;
	border-radius: 999px;
	border: 1px solid var(--alh-d-line2);
	background: var(--alh-d-raise);
	color: rgba(var(--alh-d-text-rgb), 0.8);
	font-family: inherit;
	font-size: 0.82rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	touch-action: manipulation;
}

.alh-console__pill:hover { border-color: var(--alh-d-line3); color: var(--alh-d-accent3); }

.alh-console__pill--wa {
	background: #1f7a44;
	border-color: #24924f;
	color: #eafff2;
}

.alh-console__pill--wa:hover { background: #24924f; color: #fff; }

.alh-console__sleepmenu {
	position: absolute;
	left: 0;
	bottom: calc(100% + 8px);
	max-width: calc(100% - 8px);
	flex-wrap: wrap;
	display: flex;
	gap: 4px;
	padding: 6px;
	border-radius: 10px;
	background: var(--alh-d-raise);
	border: 1px solid var(--alh-d-line2);
	z-index: 5;
}

.alh-console__sleepmenu button {
	appearance: none;
	border: 0;
	background: transparent;
	color: rgba(var(--alh-d-text-rgb), 0.8);
	font-family: inherit;
	font-size: 0.78rem;
	padding: 0.4rem 0.6rem;
	border-radius: 6px;
	cursor: pointer;
}

.alh-console__sleepmenu button:hover { background: #32281a; color: var(--alh-d-accent3); }

/* ---------- The video, folded away until asked for ---------- */
.alh-console__video {
	height: 0;
	overflow: hidden;
	border-radius: 12px;
	transition: height 0.25s ease;
}

/* ---------- Docked ---------- */

@media (max-width: 700px) {
	.alh-console { padding: 0.9rem; }
	.alh-console__head { gap: 0.8rem; }
	.alh-console__head > .alh-console__art { flex: 0 0 116px; }
	.alh-console__art { max-width: 116px; }
	.alh-console__title { font-size: 0.98rem; }
	.alh-console__scrub { height: 52px; padding-top: 0.7rem; }
	.alh-console__bars { height: 36px; gap: 2px; }
	.alh-console__transport { gap: 0.4rem; }
	.alh-console__btn { width: 40px; height: 40px; }
	.alh-console__btn--main { width: 56px; height: 56px; }
	.alh-console__foot { justify-content: center; }
	.alh-console__pill--wa { flex: 1; justify-content: center; }
}

/* =================================================================
   Docked bar, redrawn: a floating rounded panel in the centre rather
   than a black strip welded to the edges of the window.
   ================================================================= */

/* ---------- Console, docked ---------- */

/* The bars stay — they are the sign that something is playing. */

.alh-console__btn--close {
	display: none;
}

/* A close control, since the console hides its dock bar. */

/* ---------- The console reads well on the cream skin too ---------- */
.alh-skin-cream .alh-console {
	background: linear-gradient(180deg, #241d14 0%, #191410 100%);
	border-color: var(--alh-d-line2);
}

/* =================================================================
   Docked player — the single definition.
   Every property is stated here, so nothing depends on a rule
   elsewhere still being in force.
   ================================================================= */
.alh-console.is-docked {
	position: fixed;
	top: 14px;
	left: 50%;
	right: auto;
	bottom: auto;
	transform: translateX(-50%);
	z-index: 9999;
	width: min(720px, calc(100% - 24px));
	max-width: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 0;
	border: 1px solid rgba(var(--alh-d-accent-rgb), 0.3);
	border-radius: 16px;
	overflow: hidden;
	background: linear-gradient(180deg, #241d14 0%, var(--alh-d-well) 100%);
	box-shadow:
		inset 0 1px 0 rgba(var(--alh-d-accent-rgb), 0.14),
		0 16px 38px rgba(8, 6, 4, 0.5);
}

.alh-console.is-docked .alh-console__head {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 0.8rem;
}

.alh-console.is-docked .alh-console__art {
	flex: 0 0 116px;
	max-width: 116px;
	aspect-ratio: 16 / 9;
	border-radius: 0;
	align-self: stretch;
}

.alh-console.is-docked .alh-console__artplay { background: transparent; }

.alh-console.is-docked .alh-console__info {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	padding: 0.5rem 0;
	justify-content: center;
}

.alh-console.is-docked .alh-eyebrow,
.alh-console.is-docked .alh-console__times,
.alh-console.is-docked .alh-console__foot,
.alh-console.is-docked .alh-console__video,
.alh-console.is-docked .alh-console__sleepmenu {
	display: none;
}

.alh-console.is-docked .alh-console__title {
	font-size: 0.9rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.alh-console.is-docked .alh-console__channel {
	font-size: 0.74rem;
	margin-top: 0.1rem;
}

.alh-console.is-docked .alh-console__scrub {
	height: 20px;
	padding-top: 0;
	margin-top: 0.35rem;
}

.alh-console.is-docked .alh-console__bars { height: 16px; gap: 2px; }
.alh-console.is-docked .alh-console__fill { bottom: 0; height: 2px; }
.alh-console.is-docked .alh-console__fill::after { width: 7px; height: 7px; top: -2px; }

.alh-console.is-docked .alh-console__transport {
	flex: 0 0 auto;
	margin: 0 0.5rem 0 0.4rem;
	gap: 0.3rem;
}

.alh-console.is-docked .alh-console__btn:not(.alh-console__btn--main):not(.alh-console__btn--close) {
	display: none;
}

.alh-console.is-docked .alh-console__btn--main {
	width: 46px;
	height: 46px;
	font-size: 1rem;
}

.alh-console.is-docked .alh-console__btn--close {
	display: inline-flex;
	width: 32px;
	height: 32px;
	font-size: 1.1rem;
	border-color: transparent;
	background: transparent;
	box-shadow: none;
}

@media (max-width: 700px) {
	.alh-console.is-docked {
		top: 8px;
		width: calc(100% - 16px);
		border-radius: 14px;
	}

	.alh-console.is-docked .alh-console__art { flex: 0 0 92px; max-width: 92px; }
	.alh-console.is-docked .alh-console__title { font-size: 0.82rem; }
	.alh-console.is-docked .alh-console__channel { display: none; }
	.alh-console.is-docked .alh-console__scrub { height: 14px; margin-top: 0.2rem; }
	.alh-console.is-docked .alh-console__bars { height: 12px; }
	.alh-console.is-docked .alh-console__btn--main { width: 42px; height: 42px; }
	.alh-console.is-docked .alh-console__btn--close { width: 28px; }
}

/* =================================================================
   Sacred layout, corrected: player across the top, lyric centred
   beneath it, suggestions below that.
   ================================================================= */
/* =================================================================
   One song page: a single centred column
   ================================================================= */
.alh-song .alh-column {
	max-width: 820px;
	margin: 0 auto;
	width: 100%;
}

.alh-song .alh-reading {
	max-width: 720px;
	margin: 1.5rem auto 0;
}

.alh-song .alh-title {
	margin-top: 1.4rem;
	text-align: left;
}

.alh-song--manuscript .alh-title,
.alh-song--manuscript .alh-meta,
.alh-song--manuscript .alh-share,
.alh-song--manuscript .alh-lyrics__body,
.alh-song--manuscript .alh-tabs__nav {
	justify-content: center;
	text-align: center;
}

.alh-song--manuscript .alh-stanza {
	border: 0;
	background: transparent;
	padding: 0;
	margin-bottom: 1.6rem;
	text-align: center;
}

.alh-song--manuscript .alh-stanza__tools { display: none; }

/* Stanza cards keep their share tools; the plain page shows the lyric as
   flowing text. */
.alh-song--plain .alh-stanza {
	border: 0;
	background: transparent;
	padding: 0;
	margin-bottom: 1.4rem;
}

.alh-song--plain .alh-stanza__tools { display: none; }
.alh-song--plain .alh-stanza__label { display: none; }

.alh-song .alh-aside--below {
	margin-top: 3rem;
	padding-top: 2rem;
}

/* The player sits at the top of the column on every screen size. */
.alh-song .alh-player__holder {
	margin-bottom: 0.5rem;
}

@media (max-width: 700px) {
	.alh-song .alh-column,
	.alh-song .alh-reading {
		max-width: 100%;
	}

	.alh-song .alh-title { margin-top: 1.1rem; }

	/* The console is the first thing on the page and stays compact. */
	.alh-console__foot { gap: 0.5rem; }
	.alh-console__pill { flex: 1 1 auto; justify-content: center; }
}

/* =================================================================
   Sticky player — the docked bar
   ================================================================= */
.alh-player__dockbar {
	display: none;
}

/* Hub layout B keeps a featured tile above the grid. */
.alh-hero {
	margin-bottom: 1.35rem;
}

/* Shortcode wrapper. */
.alh-wrap {
	margin: 1.5rem 0;
}

/* Title and channel in the docked bar (used when the console is not the
   player, and by screen readers when it is). */
.alh-player__dockmeta {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.alh-player__docktitle {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--alh-d-head);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.alh-player__dockchannel {
	font-size: 0.78rem;
	color: rgba(246, 239, 226, 0.55);
}

.alh-player__dockclose {
	appearance: none;
	border: 0;
	background: transparent;
	color: rgba(255, 255, 255, 0.8);
	font-size: 1.25rem;
	line-height: 1;
	width: 40px;
	height: 40px;
	cursor: pointer;
	border-radius: 6px;
	touch-action: manipulation;
}

.alh-player__dockclose:hover {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}

/* =================================================================
   Corrections
   ================================================================= */

/* A round button must be square before it can be round: inside a flex
   row it was being stretched into an oval. */
.alh-console__btn {
	flex: 0 0 auto;
	aspect-ratio: 1;
	padding: 0;
	box-sizing: border-box;
}

.alh-console__btn--main {
	flex: 0 0 62px;
	width: 62px;
	min-width: 62px;
	height: 62px;
}

@media (max-width: 700px) {
	.alh-console__btn--main { flex: 0 0 56px; width: 56px; min-width: 56px; height: 56px; }
}

/* Verse and view count were set so far back they read as disabled text.
   The verse is the reason the card is there. */
.alh-dark .alh-card__verse,
.alh-dark .alh-card__verse {
	color: rgba(var(--alh-d-text-rgb), 0.88);
	border-left-color: rgba(var(--alh-d-accent-rgb), 0.45);
}

.alh-dark .alh-card__meta,
.alh-dark .alh-card__meta {
	color: var(--alh-d-accent2);
	font-weight: 600;
}

.alh-dark .alh-card__tag,
.alh-dark .alh-card__tag {
	color: rgba(var(--alh-d-text-rgb), 0.6);
}

.alh-dark .alh-card__title a,
.alh-dark .alh-card__title a {
	color: var(--alh-d-head);
}

/* =================================================================
   Skins. Each sets the eleven palette values and nothing else.
   ================================================================= */

/* Sacred gold — the default dark. */
.alh-skin-sacred {
	--alh-d-bg: #14110c;
	--alh-d-panel: #1b1610;
	--alh-d-card: #1d1913;
	--alh-d-raise: #241d13;
	--alh-d-well: #17140f;
	--alh-d-line: #322818;
	--alh-d-line2: #3a2f1d;
	--alh-d-line3: #6b5327;
	--alh-d-head: #fbf5ea;
	--alh-d-text: #ece3d2;
	--alh-d-text-rgb: 236, 227, 210;
	--alh-d-accent: #b8791f;
	--alh-d-accent2: #e8b45e;
	--alh-d-accent3: #f7d9a0;
	--alh-d-accent-rgb: 232, 180, 94;
	--alh-d-ink: #2a1f0b;
}

/* Royal indigo — deep blue-violet, warm gold light. */
.alh-skin-indigo {
	--alh-d-bg: #0f0d1c;
	--alh-d-panel: #171331;
	--alh-d-card: #1a1638;
	--alh-d-raise: #221c47;
	--alh-d-well: #0b0916;
	--alh-d-line: #2b2456;
	--alh-d-line2: #362d6b;
	--alh-d-line3: #574a9e;
	--alh-d-head: #f4f1ff;
	--alh-d-text: #e2ddf7;
	--alh-d-text-rgb: 226, 221, 247;
	--alh-d-accent: #6f5bd1;
	--alh-d-accent2: #f2c14e;
	--alh-d-accent3: #ffe3a0;
	--alh-d-accent-rgb: 242, 193, 78;
	--alh-d-ink: #16112c;
}

/* Temple maroon — deep red ground, saffron light. */
.alh-skin-maroon {
	--alh-d-bg: #180a0b;
	--alh-d-panel: #26100f;
	--alh-d-card: #2b1312;
	--alh-d-raise: #351816;
	--alh-d-well: #120607;
	--alh-d-line: #45201d;
	--alh-d-line2: #562a24;
	--alh-d-line3: #8a4436;
	--alh-d-head: #fff2e6;
	--alh-d-text: #f2ddcd;
	--alh-d-text-rgb: 242, 221, 205;
	--alh-d-accent: #c1451f;
	--alh-d-accent2: #ff9d3f;
	--alh-d-accent3: #ffd0a1;
	--alh-d-accent-rgb: 255, 157, 63;
	--alh-d-ink: #2b0f08;
}

/* Tulasi green — forest ground, pale gold light. */
.alh-skin-tulasi {
	--alh-d-bg: #0a1410;
	--alh-d-panel: #0f2019;
	--alh-d-card: #12251d;
	--alh-d-raise: #183026;
	--alh-d-well: #071009;
	--alh-d-line: #1f4033;
	--alh-d-line2: #2a5343;
	--alh-d-line3: #46876c;
	--alh-d-head: #f0fbf3;
	--alh-d-text: #d9ece0;
	--alh-d-text-rgb: 217, 236, 224;
	--alh-d-accent: #2f8f63;
	--alh-d-accent2: #e9c46a;
	--alh-d-accent3: #ffeab4;
	--alh-d-accent-rgb: 233, 196, 106;
	--alh-d-ink: #0d2117;
}

/* Moonlit — cool slate ground, silver-blue light. Quietest of the set. */
.alh-skin-moonlit {
	--alh-d-bg: #0d1117;
	--alh-d-panel: #151b24;
	--alh-d-card: #171e29;
	--alh-d-raise: #1e2733;
	--alh-d-well: #090d12;
	--alh-d-line: #263140;
	--alh-d-line2: #313e50;
	--alh-d-line3: #4d6480;
	--alh-d-head: #f2f6fb;
	--alh-d-text: #dce5f0;
	--alh-d-text-rgb: 220, 229, 240;
	--alh-d-accent: #4a7fb5;
	--alh-d-accent2: #8ec5ff;
	--alh-d-accent3: #cfe6ff;
	--alh-d-accent-rgb: 142, 197, 255;
	--alh-d-ink: #10202f;
}

/* Ink & saffron — near-black ground, single saffron accent. */
.alh-skin-ink {
	--alh-d-bg: #0c0c0d;
	--alh-d-panel: #151516;
	--alh-d-card: #18181a;
	--alh-d-raise: #202023;
	--alh-d-well: #070707;
	--alh-d-line: #2a2a2d;
	--alh-d-line2: #35353a;
	--alh-d-line3: #55555c;
	--alh-d-head: #fafafa;
	--alh-d-text: #e6e6e8;
	--alh-d-text-rgb: 230, 230, 232;
	--alh-d-accent: #e07b18;
	--alh-d-accent2: #ff9f2e;
	--alh-d-accent3: #ffcf94;
	--alh-d-accent-rgb: 255, 159, 46;
	--alh-d-ink: #221204;
}

/* =================================================================
   Corrections, part two
   ================================================================= */

/* The docked button was inheriting a 62px width from the correction
   above while keeping its 46px height — hence the oval. */
.alh-console.is-docked .alh-console__btn--main {
	flex: 0 0 46px;
	width: 46px;
	min-width: 46px;
	height: 46px;
}

.alh-console.is-docked .alh-console__btn--close {
	flex: 0 0 32px;
	width: 32px;
	min-width: 32px;
	height: 32px;
}

@media (max-width: 700px) {
	.alh-console.is-docked .alh-console__btn--main {
		flex: 0 0 42px;
		width: 42px;
		min-width: 42px;
		height: 42px;
	}

	.alh-console.is-docked .alh-console__btn--close {
		flex: 0 0 28px;
		width: 28px;
		min-width: 28px;
		height: 28px;
	}
}

/* The player was mounted in a box collapsed to zero height. YouTube will
   not start playback in a player with no size, which is why pressing play
   changed the icon and produced no sound, and why every control that
   needs a live player then did nothing. It now sits off-screen at a real
   size until the video is asked for. */
.alh-console {
	position: relative;
}

/* =================================================================
   The artwork is the screen
   ================================================================= */
.alh-console__frame {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.alh-console__frame iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* The overlay invites the first tap and then gets out of the way, so
   YouTube's own controls are reachable once a song is running. */
.alh-console__artplay {
	z-index: 2;
}

.alh-console.is-started .alh-console__artplay {
	display: none;
}

/* A phone needs a screen it can actually see: the artwork spans the card
   rather than sitting in a 116px column. */
@media (max-width: 700px) {
	.alh-console__head {
		flex-direction: column;
		gap: 0.85rem;
	}

	.alh-console__head > .alh-console__art {
		flex: 0 0 auto;
		width: 100%;
		max-width: none;
		aspect-ratio: 16 / 9;
	}

}

/* Docked, the screen returns to a thumbnail. */
.alh-console.is-docked .alh-console__head { flex-direction: row; }
.alh-console.is-docked .alh-console__frame { pointer-events: none; }

/* Shown only when YouTube refuses to play a song outside its own site. */
.alh-console__blocked {
	margin: 0 0 0.9rem;
	padding: 0.7rem 0.95rem;
	border: 1px solid rgba(var(--alh-d-accent-rgb), 0.35);
	border-radius: 10px;
	background: rgba(var(--alh-d-accent-rgb), 0.08);
	color: var(--alh-d-accent3);
	font-size: 0.88rem;
	line-height: 1.5;
}

.alh-console__blocked a {
	color: var(--alh-d-accent2);
	font-weight: 600;
}

.alh-console.is-blocked .alh-console__scrub,
.alh-console.is-blocked .alh-console__times {
	opacity: 0.35;
	pointer-events: none;
}

/* When only plain playback is available, the controls that need the API
   are dimmed rather than left looking active and doing nothing. */
.alh-console.is-basic .alh-console__scrub,
.alh-console.is-basic .alh-console__times,
.alh-console.is-basic [data-alh-back],
.alh-console.is-basic [data-alh-forward] {
	opacity: 0.4;
	pointer-events: none;
}

/* Fallback when a transformed ancestor breaks position:fixed — the whole
   player sticks in place instead of floating as a bar. */
.alh-player__holder.is-stuck {
	position: sticky;
	top: var(--alh-stick-top, 10px);
	z-index: 40;
}

/* =================================================================
   Keep the player's own controls on top.

   Other plugins on this site place floating elements over the page as
   you scroll — a subscribe bar among them. Landing on top of the
   transport, such an element swallows the taps meant for play or pause
   and sends them somewhere else entirely. Raising the console gives its
   controls the last word without needing to know what is above them.
   ================================================================= */
.alh-console {
	position: relative;
	z-index: 30;
	isolation: isolate;
}

.alh-console__transport,
.alh-console__foot,
.alh-console__scrub {
	position: relative;
	z-index: 2;
}

.alh-console__btn,
.alh-console__pill {
	position: relative;
	z-index: 3;
}

/* The video frame stays within the artwork and never receives a hover or
   a tap outside it. */
.alh-console__art {
	overflow: hidden;
	contain: paint;
}

/* =================================================================
   Scrub bar: a control you can drag
   ================================================================= */
.alh-console__scrub {
	/* Without this the browser claims the gesture for scrolling the page
	   and the drag never reaches us. */
	touch-action: none;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
}

.alh-console__scrub.is-dragging {
	cursor: grabbing;
}

.alh-console__scrub.is-dragging .alh-console__fill {
	transition: none;
}

/* The handle grows while dragging, so a finger can see where it is. */
.alh-console__scrub.is-dragging .alh-console__fill::after {
	width: 13px;
	height: 13px;
	top: -5px;
	right: -6px;
}

/* A generous invisible strip above and below the bars, so the drag can be
   started without hitting an exact few pixels. */
.alh-console__scrub::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: -10px;
}

.alh-console__bars span {
	pointer-events: none;
}