/**
 * Persistent audio player bar.
 *
 * File Name:     player.css
 * Version:       1.0.0
 * Last Modified: 2026-10-24
 * Package:       TheHomepageExtensions / Assets
 *
 * The bar carries `.thp-gallery-wrap`, so it reads the same design tokens and
 * light/dark switch as the page. It sits above the header band at the same
 * inline padding as the page content, and sticks to the top while scrolling.
 */

.thp-gallery-wrap.thp-player {
	position: sticky;
	inset-block-start: 0;
	z-index: 60;
	padding-block: 0.5rem;
	padding-inline: var(--wp--preset--spacing--40, 2rem);
	min-block-size: 0;

	&[hidden] {
		display: none;
	}

	& .thp-player__inner {
		display: flex;
		align-items: center;
		gap: 0.9rem;
		padding: 0.5rem 0.9rem;
		color: var(--thp-gallery-text);
		background: var(--thp-gallery-card-bg);
		border: 1px solid var(--thp-gallery-card-border);
		border-radius: var(--thp-gallery-card-radius);
		box-shadow: var(--thp-gallery-card-shadow);
		backdrop-filter: blur(14px);
	}

	& .thp-player__toggle,
	& .thp-player__close {
		display: inline-grid;
		place-items: center;
		flex: 0 0 auto;
		inline-size: 2.5rem;
		block-size: 2.5rem;
		padding: 0;
		color: inherit;
		background: transparent;
		border: 1px solid var(--thp-gallery-card-border);
		border-radius: 50%;
		cursor: pointer;

		&:hover {
			background: var(--thp-gallery-hover);
		}

		&:focus-visible {
			outline: 2px solid var(--thp-gallery-focus);
			outline-offset: 2px;
		}
	}

	& .thp-player__toggle {
		color: #ffffff;
		background: var(--thp-gallery-accent);
		border-color: transparent;

		&:hover {
			background: var(--thp-gallery-accent);
			filter: brightness(1.1);
		}
	}

	& .thp-player__icon {
		inline-size: 1.2rem;
		block-size: 1.2rem;
	}

	& .thp-player__icon--pause,
	&.is-playing .thp-player__icon--play {
		display: none;
	}

	&.is-playing .thp-player__icon--pause {
		display: block;
	}

	& .thp-player__close svg {
		inline-size: 1rem;
		block-size: 1rem;
	}

	& .thp-player__meta {
		display: flex;
		flex-direction: column;
		flex: 1 1 10rem;
		min-inline-size: 0;
		line-height: 1.25;
	}

	& .thp-player__label {
		font-size: 0.7rem;
		font-weight: 800;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--thp-gallery-muted);
	}

	&.is-live .thp-player__label {
		color: var(--thp-gallery-cat-listen);
	}

	& .thp-player__title {
		font-size: 0.95rem;
		font-weight: 700;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	& .thp-player__seek {
		flex: 2 1 8rem;
		min-inline-size: 5rem;
		accent-color: var(--thp-gallery-accent);
	}

	& .thp-player__time {
		flex: 0 0 auto;
		min-inline-size: 5.5rem;
		font-size: 0.8rem;
		font-variant-numeric: tabular-nums;
		text-align: end;
		color: var(--thp-gallery-muted);
	}

	@media (max-width: 640px) {
		& .thp-player__seek,
		& .thp-player__time {
			display: none;
		}
	}
}

/* Heading focus after a page swap is a screen-reader aid, not something to draw a box around. */
[tabindex="-1"]:focus {
	outline: none;
}

/* A thin cue while the next page is fetched. */
html.thp-loading body {
	cursor: progress;
}