/*
	Garcia Project — Jerry Garcia Band Radio (web)

	Tablet and desktop refinements only. The iPhone presentation in radio.css is the
	specification; iPad and desktop simply give the same single column more room and grow the
	dials and player text. Nothing here reintroduces the old console or hero layout.
*/

/*
	Site-wide theme sheets re-impose ordered-list numbering on the ON THIS TAPE list, printing
	"1. 2. 3." in front of the custom 01/02/03 index inside every show's track list. An
	id-scoped marker kill in the last-loaded sheet wins over any theme rule, on every device.
*/
#radio-tracks,
#radio-tracks li {
	list-style: none;
}

#radio-tracks li::marker {
	content: none;
}

/* --------------------------------------------------- youtube supplemental sources */

/* Supplemental, curated YouTube sources share the source panel's rhythm but never render as
   another Archive recording selector: their own labelled section, compact rows. */
.radio-yt-sources {
	margin-top: 12px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.radio-yt-source-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 7px 8px;
	border-radius: 8px;
	background: rgba(255, 255, 255, .04);
}

.radio-yt-source-text {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
	font: 400 14px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: var(--ink);
}

.radio-yt-source-text strong {
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.radio-yt-watch {
	padding: 6px 12px;
	font-size: 13px;
}

/* One dialog serves every video: same native-<dialog> behavior as the EQ and library panels,
   responsive down to a phone, with a 16:9 player that never overflows the viewport. */
.radio-yt-dialog {
	width: min(92vw, 820px);
	max-height: min(90vh, 640px);
	border: 1px solid rgba(219, 171, 84, .5);
	border-radius: 14px;
	background: var(--radio-panel);
	color: var(--ink);
	padding: 0;
}

.radio-yt-dialog::backdrop {
	background: rgba(10, 5, 20, .82);
}

.radio-yt-panel {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 14px;
}

.radio-yt-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.radio-yt-dialog-title {
	margin: 0;
	font: 700 12px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	letter-spacing: 2px;
	color: var(--radio-gold);
	text-transform: uppercase;
}

.radio-yt-close {
	padding: 6px 12px;
	font-size: 12px;
}

.radio-yt-frame {
	aspect-ratio: 16 / 9;
	width: 100%;
	border-radius: 10px;
	overflow: hidden;
	background: #000;
}

.radio-yt-frame iframe {
	width: 100%;
	height: 100%;
	display: block;
	border: 0;
}

.radio-yt-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
}

.radio-yt-external {
	color: var(--radio-gold);
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
}

.radio-yt-external:hover {
	text-decoration: underline;
}

.radio-yt-channel {
	margin: 0;
	font: 400 12px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: var(--dim);
	text-align: right;
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}


/* ---------------------------------------------------------------- tablet */

@media (min-width: 600px) {
	:root {
		--page-pad: 24px;
	}

	/* Overlap tuning for the banner breaking through the card's top edge. The artwork's
	   transparent top margin scales with its rendered width (13px of 1410), so the pull has to
	   grow with the viewport or the crest would rise too little on wider cards. */
	.radio-header {
		padding-bottom: 34px;
	}

	.radio-dials-title {
		margin-top: -34px;
	}

	.radio-stack,
	.radio-archive-links {
		max-width: 680px;
	}

	.radio-dial-bezel {
		width: min(180px, 100%);
	}

	.radio-vu-window {
		height: 78px;
	}

	.radio-vu strong {
		font-size: 10px;
	}

	.radio-rack-handle {
		height: 101px;
	}

	.radio-now-show {
		font-size: 24px;
	}

	.radio-now-track {
		font-size: 18px;
	}

	.radio-transport {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		justify-items: center;
		gap: 0;
		width: min(100%, 460px);
		max-width: 460px;
		margin-inline: auto;
	}

	/* The position bar belongs to the transport, so it takes the same width and the same centering
	   rather than stretching across the whole card and overhanging the buttons it belongs to. */
	.radio-progress {
		max-width: 460px;
		margin-inline: auto;
	}

	.radio-tour-list li {
		font-size: 15px;
	}
}

/* --------------------------------------------------------------- desktop */

@media (min-width: 900px) {
	/* Desktop target: the crest's visible top sits ~20px above the card's border and ~20px below
	   the nav links, and the banner element itself rides ~32px above the border. */
	.radio-header {
		padding-bottom: 40px;
	}

	.radio-dials-title {
		margin-top: -38px;
	}

	/* Desktop overshoots further: a 26px negative margin puts the artwork 12px past the card's
	   border, which still clears the artwork's own ~6px transparent margin so the visible
	   artwork crosses the border by ~6px — the same effect as the crest breaking the top edge.
	   The stack's 24px side padding absorbs the overhang, leaving 82px clear of the viewport even
	   at 900px wide, so the page can never overflow. */
	.radio-dials-logo {
		width: calc(100% + 52px);
		margin: 0 -26px;
	}

	.radio-stack {
		max-width: 760px;
		padding-bottom: 48px;
	}

	.radio-archive-links {
		max-width: 760px;
	}

	.radio-dials {
		gap: 24px;
	}

	.radio-dial-bezel {
		width: min(190px, 100%);
	}

	.radio-selected strong {
		font-size: 16px;
	}

	.radio-selected > span {
		font-size: 13px;
	}

	.radio-tour-list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}

	.radio-about-copy {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 24px;
		align-items: start;
	}

	.radio-about-copy p:last-of-type {
		margin-bottom: 0;
	}
}

/* --------------------------------------------------- very wide screens */

/* RadioView keeps a fixed-size ScrollView on every device, so cap the column instead of
   letting the cards stretch across a desktop display. */
@media (min-width: 1200px) {
	.radio-stack,
	.radio-archive-links {
		max-width: 780px;
	}
}

/* ------------------------------------------------------- short viewports */

/* Keep the dials and the player reachable when the window is shorter than the card. */
@media (max-height: 620px) and (min-width: 600px) {
	.radio-dial-bezel {
		width: min(150px, 100%);
	}

	.radio-vu-window {
		height: 62px;
	}

	.radio-rack-handle {
		height: 85px;
	}
}
/* ------------------------------------------------------- setlist deep-link return */

/* Shown only when the radio was opened from a Setlists show page (validated ?return= hint).
   A compact secondary bar above the banner: never competes with the dials or transport. */
.radio-return-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 10px 12px 0;
	padding: 7px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(219, 171, 84, .35);
	color: var(--radio-gold, #dbab54);
	font: 600 12px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	text-decoration: none;
}

.radio-return-link:hover {
	background: rgba(219, 171, 84, .14);
}

.radio-playlist-status { border: 1px solid var(--radio-gold, #dbab54); border-radius: 12px; padding: 12px; margin-bottom: 16px; background: rgba(219,171,84,.09); }
.radio-playlist-status[hidden] { display: none; }
.radio-playlist-status p { margin: 0 0 8px; overflow-wrap: anywhere; }
.radio-playlist-status p:first-child { color: var(--radio-gold, #dbab54); font-weight: 700; }
.radio-playlist-status button { margin: 4px 6px 0 0; }
.radio-lib-row.is-playing { border-left: 4px solid var(--radio-gold, #dbab54); background: rgba(219,171,84,.12); }
.radio-lib-share-group { flex: 1 1 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.radio-lib-share-group p { margin: 0; font-size: 12px; }
.radio-lib-share-group input { width: 100%; box-sizing: border-box; }
.radio-lib-share-feedback { font-size: 12px; color: var(--radio-gold, #dbab54); }
.radio-playlist-help, #radio-recreation-links { font-size: 12px; line-height: 1.5; }
#radio-recreation-links { padding-left: 18px; margin: 8px 0; }
#radio-recreation-links a { color: var(--radio-gold, #dbab54); }
.radio-show-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.radio-show-nav .radio-gold-button { min-width: 0; box-sizing: border-box; }
.radio-show-nav .radio-gold-button.is-playlist { flex-direction: column; gap: 3px; background: #d8c5ee; color: #321d47; }
.radio-show-nav .radio-gold-button.is-playlist:hover:not(:disabled) { background: #e5d6f5; }
.radio-show-playlist-label { display: block; font-size: 10px; line-height: 1; letter-spacing: .1em; font-weight: 700; }