/*
 * The song page.
 *
 * All three layers are in the DOM at once; only the active one is shown. That
 * is what keeps the toggle instant and the reader's place intact.
 */

/* ── Layer toggle ────────────────────────────────────────────────────────── */

.gks-toggle {
	display: flex;
	gap: 0;
	flex-wrap: wrap;
	border-bottom: 1px solid var(--wp--preset--color--rule);
	margin-bottom: var(--wp--preset--spacing--60);
}

.gks-toggle__btn {
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	padding: 0.55rem 0.9rem;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--ibm-plex-sans);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	line-height: 1.4;
}

.gks-toggle__btn:hover {
	color: var(--wp--preset--color--contrast);
}

.gks-toggle__btn[aria-selected='true'] {
	color: var(--wp--preset--color--contrast);
	border-bottom-color: var(--wp--preset--color--accent);
	font-weight: 500;
}

/* ── Which layer shows ───────────────────────────────────────────────────── */

/*
 * The actual rules are emitted per song, from the layer keys that language
 * defines — see GKS_Blocks::layer_css(). They cannot live here: a key is
 * whatever the archivist called it, and a hardcoded list would silently stop
 * working the moment a language gains a layer.
 *
 * Written as CSS rather than set by script so the page never flashes every
 * layer at once before JavaScript arrives.
 */

/* ── Blocks ──────────────────────────────────────────────────────────────── */

.gks-lyrics {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--60);
}

/*
 * The label column hugs its own text instead of reserving a fixed 8.5rem.
 * A stanza label is usually a single digit, so a fixed column left a hand's
 * width of nothing between the number and the line it belongs to.
 */
.gks-blk {
	display: grid;
	/*
	 * The label column is sized, not left to fill.
	 *
	 * `auto` took whatever the lines column did not, so the wider the page the
	 * further a stanza's number drifted from its own lines — four hundred
	 * pixels of nothing between them once the page stopped being narrow. Worse,
	 * the amount depended on the label, so a chorus and a stanza started their
	 * lines in different places.
	 *
	 * A floor wide enough for the longest label there is keeps every block
	 * agreeing, and justify-content stops the track stretching into the space
	 * left over. The labels are interface words — Chorus, Stanza 1 — so the
	 * floor is set by those and not by the lyrics.
	 */
	grid-template-columns: minmax(4.5rem, max-content) minmax(0, var(--wp--custom--measure));
	justify-content: start;
	gap: 0 0.9rem;
	align-items: start;
}

/*
 * A chorus needs no rule down its side. Its label already says कोरस where a
 * stanza says a number, and that is the distinction doc 02 asks for — drawing
 * it twice only added a line that cut the block off from its own label.
 */

.gks-blk__label {
	padding-top: 0;
}

/*
 * A label reads at the size of the words beside it.
 *
 * It was set as a small uppercase marker, which does two wrong things at once:
 * it sits at a different size from the line it introduces, and uppercase means
 * nothing in Devanagari, Tamil, Telugu or Malayalam — none of them have cases.
 * The archivist's own processed pages set it plainly, at the size of the lyric.
 */
.gks-blk__plain,
.gks-blk__seek {
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
}

/*
 * Each label takes the size AND line height of its own layer, so its first
 * line sits on the same baseline as the first line of the block.
 */
.gks-lbl {
	font-size: calc(var(--wp--preset--font-size--lyric-native) * var(--gks-read, 1));
}

.gks-lbl--latin {
	font-family: var(--wp--preset--font-family--literata);
	font-size: calc(var(--wp--preset--font-size--lyric) * var(--gks-read, 1));
	line-height: var(--wp--custom--line-height--lyric);
}

/* No cue set: plain text, with nothing that looks like a control. */
.gks-blk__plain {
	color: var(--wp--preset--color--faint);
	display: inline-block;
}

/*
 * A cue is set: the label turns teal, and that is all.
 *
 * Teal appears nowhere else in the lyric area, so on its own it already means
 * one thing — this can be clicked and it will move the recording. Adding a rule
 * under it and a timestamp beside it said the same thing three times and pulled
 * the eye off the words, which are what the page is for.
 */
.gks-blk__seek {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	color: var(--wp--preset--color--accent);
	display: inline-block;
	text-align: left;
}

.gks-blk__seek:hover {
	color: var(--wp--preset--color--contrast);
}

/* ── Lines ───────────────────────────────────────────────────────────────── */

.gks-blk__lines {
	min-width: 0;
}

.gks-ln {
	margin: 0;
	color: var(--wp--preset--color--contrast);
}

/*
 * Romanized and English are Latin, so they take Literata at the Latin metrics.
 * The native line keeps whatever its script needs — see tokens.css.
 */
.gks-ln--latin {
	font-family: var(--wp--preset--font-family--literata);
	font-size: var(--wp--preset--font-size--lyric);
	line-height: var(--wp--custom--line-height--lyric);
}

.gks-ln[data-l^='meaning'] {
	color: var(--wp--preset--color--body);
	font-style: italic;
}

/* The printed catchword, sitting where the page puts it. */
.gks-cue {
	margin: 0.5rem 0 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	font-family: var(--wp--preset--font-family--ibm-plex-sans);
}

.gks-song[data-layer='native'] .gks-cue {
	font-family: inherit;
}

/*
 * Playing now.
 *
 * A soft wash behind the block the recording has reached, and nothing else —
 * no border, no rounded corner, no shadow. A stanza should still look like a
 * stanza; the tint says where you are, it does not turn the block into a card.
 *
 * It spreads a little past the text on each side so the words are not sitting
 * flush against the edge of the wash, and the negative margin keeps the lines
 * on the same left edge as every other block.
 *
 * Only one block carries this at a time, and only once playback passes a known
 * timestamp — a song with no timings never shows it at all.
 */
.gks-blk.is-playing .gks-blk__lines {
	background: var(--gks-now);

	/*
	 * The bleed is a shadow spread, not padding with a negative margin.
	 *
	 * Padding plus a negative margin moved nothing but did widen the box by a
	 * full 1rem on the left — which is wider than the 0.9rem gap between the
	 * label and the lines, so the wash swallowed that gap and the label ended
	 * up touching the block. A spread grows the paint only; the text and the
	 * gap stay exactly where they are, in every block, playing or not.
	 *
	 * 0.4rem leaves half the gap still showing, so a playing chorus is spaced
	 * off its label the same way a stanza is.
	 */
	box-shadow: 0 0 0 0.4rem var(--gks-now);
}

/* ── Side panel ──────────────────────────────────────────────────────────── */

.gks-songpage__aside {
	margin-top: var(--wp--preset--spacing--80);
	padding-top: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--rule-soft);
}

.gks-meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	margin: 0;
}

.gks-meta dt {
	font-family: var(--wp--preset--font-family--ibm-plex-sans);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--wp--preset--color--faint);
	margin-bottom: 0.3rem;
}

.gks-meta dd {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast);
}

.gks-meta a {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

.gks-meta a:hover {
	text-decoration: underline;
}

.gks-meta__sub {
	color: var(--wp--preset--color--muted);
}

/* ── Narrow screens ──────────────────────────────────────────────────────── */

@media (max-width: 48rem) {
	.gks-blk {
		grid-template-columns: 1fr;
		gap: 0.4rem;
	}

	.gks-blk__label {
		padding-top: 0;
	}

	/* Big enough to hit while standing and holding a phone. */
	.gks-blk__seek {
		padding-block: 0.35rem;
	}

	.gks-toggle {
		overflow-x: auto;
		flex-wrap: nowrap;
	}

	.gks-toggle__btn {
		white-space: nowrap;
	}
}

/* ── Head ────────────────────────────────────────────────────────────────── */

.gks-songhead {
	margin-bottom: var(--wp--preset--spacing--50);
}

.gks-crumb {
	font-family: var(--wp--preset--font-family--ibm-plex-sans);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	align-items: baseline;
}

.gks-crumb a {
	color: inherit;
	text-decoration: none;
}

.gks-crumb a:hover {
	color: var(--wp--preset--color--accent);
}

.gks-crumb i {
	font-style: normal;
	color: var(--wp--preset--color--rule);
}

/*
 * The title never switches script — settled decision 5. It stays as printed,
 * with the romanization and the meaning on one quiet line beneath.
 */
.gks-songtitle {
	margin: 0.4em 0 0.2em;
	line-height: 1.35;
	text-wrap: balance;
}

.gks-songtitle__under {
	font-family: var(--wp--preset--font-family--literata);
	font-size: var(--wp--preset--font-size--lyric);
	font-style: italic;
	font-weight: 300;
	color: var(--wp--preset--color--muted);
	margin: 0;
	max-width: 46ch;
}

/* ── Player ──────────────────────────────────────────────────────────────── */

.gks-player {
	border-block: 1px solid var(--wp--preset--color--rule-soft);
	padding-block: var(--wp--preset--spacing--40);
	margin-bottom: var(--wp--preset--spacing--60);
}

.gks-player__bar {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--ibm-plex-sans);
}

.gks-player__play {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	border: 0;
	border-radius: 50%;
	width: 2.75rem;
	height: 2.75rem;
	flex-shrink: 0;
	cursor: pointer;
	display: grid;
	place-items: center;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1;
	padding: 0;
}

.gks-player__play:hover {
	filter: brightness(1.1);
}

.gks-player__time {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	font-variant-numeric: tabular-nums;
	min-width: 3rem;
}

.gks-player__time--total {
	text-align: right;
}

.gks-player__seek {
	flex: 1;
	min-width: 0;
	appearance: none;
	height: 3px;
	border-radius: 2px;
	background: var(--wp--preset--color--rule);
	cursor: pointer;
}

.gks-player__seek::-webkit-slider-thumb {
	appearance: none;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	border: 0;
}

.gks-player__seek::-moz-range-thumb {
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	border: 0;
}

.gks-player__rate,
.gks-player__get {
	background: none;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 3px;
	color: var(--wp--preset--color--muted);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	padding: 0.2rem 0.5rem;
	cursor: pointer;
	text-decoration: none;
	line-height: 1.5;
	font-variant-numeric: tabular-nums;
}

.gks-player__rate:hover,
.gks-player__get:hover {
	color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
}

.gks-player__note {
	font-family: var(--wp--preset--font-family--ibm-plex-sans);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	margin: 0.7rem 0 0;
}

/* ── The bar above the lyrics ────────────────────────────────────────────── */

/*
 * Named apart from the PLAYER's bar, which is also a bar and was also called
 * .gks-bar. The player's rules reached this one and pinned the layer tabs and
 * the text-size buttons across the bottom of the screen, over the words. They
 * belong here, at the head of the lyrics, scrolling away with them.
 */
.gks-readbar {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	flex-wrap: wrap;
	border-bottom: 1px solid var(--wp--preset--color--rule);
	margin-bottom: var(--wp--preset--spacing--60);
}

.gks-readbar .gks-toggle {
	border-bottom: 0;
	margin-bottom: 0;
}

.gks-tools {
	display: flex;
	align-items: center;
	gap: 0.2rem;
	padding-bottom: 0.4rem;
}

.gks-tools__btn {
	background: none;
	font-variant-numeric: tabular-nums;
	border: 0;
	color: var(--wp--preset--color--muted);
	cursor: pointer;
	font-family: var(--wp--preset--font-family--ibm-plex-sans);
	font-size: var(--wp--preset--font-size--label);
	/* Big enough to hit while standing and holding a phone. */
	min-width: 2.25rem;
	min-height: 2.25rem;
	display: grid;
	place-items: center;
	border-radius: 3px;
	line-height: 1;
}

.gks-tools__btn:hover {
	color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--surface);
}

/*
 * Reader text size. Only the lyrics scale — labels, metadata and chrome stay
 * put, so the page does not lose its shape as the words grow.
 */
.gks-song {
	--gks-read: 1;
}

.gks-song .gks-ln {
	font-size: calc(var(--wp--preset--font-size--lyric-native) * var(--gks-read));
}

.gks-song .gks-ln--latin {
	font-size: calc(var(--wp--preset--font-size--lyric) * var(--gks-read));
}

/* ── Nearby songs, and the actions ───────────────────────────────────────── */

.gks-songnav {
	display: flex;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--70);
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--rule-soft);
	font-family: var(--wp--preset--font-family--ibm-plex-sans);
	font-size: var(--wp--preset--font-size--small);
}

.gks-songnav a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	display: inline-flex;
	gap: 0.4rem;
	align-items: center;
}

.gks-songnav a:hover {
	color: var(--wp--preset--color--accent);
}

.gks-actions {
	display: flex;
	gap: var(--wp--preset--spacing--40);
	flex-wrap: wrap;
	margin-top: var(--wp--preset--spacing--50);
	font-family: var(--wp--preset--font-family--ibm-plex-sans);
	font-size: var(--wp--preset--font-size--small);
}

.gks-action {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	color: var(--wp--preset--color--muted);
	font: inherit;
	text-decoration: none;
}

.gks-action:hover {
	color: var(--wp--preset--color--accent);
}

/* ── Printing ────────────────────────────────────────────────────────────── */

@media print {
	.gks-header,
	.gks-footer,
	.gks-player,
	.gks-tools,
	.gks-toggle,
	.gks-actions,
	.gks-songnav,
	.gks-skip {
		display: none !important;
	}

	/* On paper there is no toggle, so every layer that exists is shown. */
	.gks-song [data-l] {
		display: block !important;
	}

	.gks-blk {
		break-inside: avoid;
	}
}

/* ── Page shape ──────────────────────────────────────────────────────────── */

/*
 * From the approved mockup: a 1180px canvas with 56px gutters, and below the
 * title the page splits into a 610px reading column and a 406px sidebar with
 * 52px between them.
 *
 * The lyric column is the fixed one. The sidebar takes what is left, so a
 * narrower window shortens the sidebar first and leaves the words alone.
 */
/*
 * The same box as the header, the footer and every other page.
 *
 * It used to cap at 73.75rem and then pad 3.5rem inside that, which left the
 * song's title thirty-two pixels to the right of the logo above it. Capping at
 * the measure PLUS its gutter, the way the header and footer do, puts the
 * title under the logo at every width.
 *
 * No padding-block here: #gks-content carries the page's top and bottom for
 * every page, this one included.
 */
.gks-songpage {
	max-width: calc(73.75rem + var(--wp--preset--spacing--50) * 2);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--50);
}

.gks-songpage__grid {
	display: grid;
	/*
	 * The lyric column is the fixed one, at the 610px the mockup draws. The
	 * sidebar takes whatever is left — which is what the note above has always
	 * claimed and what the second fixed column here quietly prevented.
	 */
	grid-template-columns: minmax(0, 38.125rem) minmax(0, 1fr);
	gap: 3.25rem;
	align-items: start;
	padding-top: 2.25rem;
}

.gks-songpage__main {
	min-width: 0;
}

.gks-songpage__side {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--50);
}

/* In the sidebar these are stacked panels, not page-width sections. */
.gks-songpage__side .gks-songpage__aside {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.gks-songpage__side .gks-meta {
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--40);
}

.gks-songpage__side .gks-actions {
	margin-top: 0;
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--rule-soft);
	flex-direction: column;
	gap: 0.5rem;
	align-items: flex-start;
}

/*
 * The play button is near-black rather than teal — in the mockup teal is
 * reserved for the seek cues in the lyrics, so it means exactly one thing.
 */
.gks-player__play {
	background: var(--wp--preset--color--contrast);
	width: 3.25rem;
	height: 3.25rem;
}

.gks-comments {
	margin-top: var(--wp--preset--spacing--80);
	padding-top: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--rule-soft);
}

/*
 * Closed until asked for.
 *
 * Nobody opens a song for the comments, and the list and the form together run
 * longer than most songs. So all that shows is a line saying how many there
 * are; the rest is there, just not drawn.
 */
.gks-fold__head {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
	list-style: none;
	font-family: var(--wp--preset--font-family--ibm-plex-sans);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--wp--preset--color--faint);
	/* Big enough to hit while standing and holding a phone. */
	min-height: 2.75rem;
}

/* Safari draws a triangle of its own unless this is said. */
.gks-fold__head::-webkit-details-marker {
	display: none;
}

.gks-fold__head:hover {
	color: var(--wp--preset--color--accent);
}

.gks-fold__head::after {
	content: '';
	width: 0.45rem;
	height: 0.45rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-0.12rem) rotate(45deg);
	transition: transform 0.15s ease;
}

.gks-fold[open] .gks-fold__head::after {
	transform: translateY(0.06rem) rotate(-135deg);
}

.gks-fold__body {
	padding-top: var(--wp--preset--spacing--40);
}

/* ── Related songs ───────────────────────────────────────────────────────── */

.gks-related {
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--rule-soft);
}

.gks-related__title {
	font-family: var(--wp--preset--font-family--ibm-plex-sans);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--wp--preset--color--faint);
	margin: 0 0 0.75rem;
}

.gks-related__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.gks-related__list a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	display: block;
	line-height: 1.5;
}

.gks-related__list a:hover {
	color: var(--wp--preset--color--accent);
}

.gks-related__sub {
	display: block;
	font-family: var(--wp--preset--font-family--ibm-plex-sans);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

/* ── One column when there is not room for two ───────────────────────────── */

@media (max-width: 64rem) {
	.gks-songpage__grid {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--70);
	}

	/* On a phone the details belong after the words, which is what this does. */
	.gks-songpage__side {
		border-top: 1px solid var(--wp--preset--color--rule-soft);
		padding-top: var(--wp--preset--spacing--50);
	}
}

/* ── Icons ───────────────────────────────────────────────────────────────── */

/*
 * Sized in em, so an icon grows with the text beside it and never needs a size
 * passed per call site. Nudged down a fraction because a 24-grid glyph sits
 * optically high against a Latin baseline.
 */
.gks-icon {
	flex-shrink: 0;
	vertical-align: -0.14em;
}

/* Both transport icons are in the button; only one shows. */
.gks-player__ico--pause,
.gks-player[data-playing] .gks-player__ico--play {
	display: none;
}

.gks-player[data-playing] .gks-player__ico--pause {
	display: block;
}

.gks-player__play .gks-icon {
	font-size: 1.05rem;
}

.gks-player__get .gks-icon {
	font-size: 1.05rem;
	vertical-align: -0.2em;
}

.gks-songnav a .gks-icon,
.gks-action .gks-icon {
	font-size: 1.05rem;
}

.gks-action {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}


/* ── The song page under a thumb ─────────────────────────────────────────── */

@media (max-width: 34rem) {

	/* Share, print and report a typo were 20px tall — a fifth of a fingertip. */
	.gks-action {
		min-height: var(--gks-tap);
		display: flex;
		align-items: center;
		gap: 0.6rem;
	}

	/* The reader's own two, which are pressed mid-song and mid-stanza. */
	.gks-tools__btn {
		min-width: var(--gks-tap);
		min-height: var(--gks-tap);
	}

	/* A layer is switched while standing; the tab has to be a real target. */
	.gks-toggle__btn {
		min-height: var(--gks-tap);
	}

	/* Previous and next song, reached for between verses. */
	.gks-songnav a {
		min-height: var(--gks-tap);
		display: inline-flex;
		align-items: center;
		gap: 0.4rem;
	}

	/* WordPress sets these itself, and sets them small. */
	.gks-fold__body a {
		display: inline-block;
		padding-block: 0.4rem;
	}
}