/* ===========================================================================
   THE DOCKED PLAYER BAR
   Meks Audio Player's own furniture, restyled for ATC. CSS only, over the
   plugin's markup: the plugin updates and any edit inside it would be wiped.

   WHY IT COULD NOT BE DONE BEFORE. The bar can only be styled when it holds
   a real <audio>. Until archive playback was fixed it fell back to an embed,
   which handed the whole bar to a third-party iframe with nothing of ours to
   target. Native audio is what makes this possible.

   WHAT WAS WRONG: an angled yellow-to-black split belonging to no part of
   the brand system, plugin-default transport controls, and on mobile a large
   unformatted yellow band under the controls carrying only two icons, with
   the episode name nowhere to be seen.
   =========================================================================== */

/* One ground, full width, no angle. */
.meks-ap {
	background: var(--atc-black, #0A0A0A) !important;
	border-top: 3px solid var(--atc-yellow, #FFE600);
	font-family: var(--atc-font, "Poppins", -apple-system, sans-serif);
}
/*
 * THE ANGLED SPLIT IS NOT A SEPARATE LAYER. meks-ap-bg sits on the SAME
 * element as meks-ap (class="meks-ap meks-ap-bg"), so there is nothing to
 * hide: setting the background above is what removes the angle.
 *
 * Do NOT "fix" this into .meks-ap.meks-ap-bg { display: none }. That is the
 * bar itself, and it would hide the player completely.
 */

/* --- the episode name --------------------------------------------------- */
.meks-ap .meks-ap-slot-l {
	background: none !important;
	transform: none !important;
	-webkit-transform: none !important;
	min-width: 0;
}
.meks-ap .meks-ap-title,
.meks-ap .meks-ap-slot-l a {
	color: var(--atc-white, #FFFFFF) !important;
	font-size: 14px;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -0.01em;
	text-transform: none;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* --- transport ---------------------------------------------------------- */
.meks-ap .mejs-container,
.meks-ap .mejs-controls { background: none !important; }

.meks-ap .mejs-playpause-button button {
	background-color: var(--atc-yellow, #FFE600) !important;
	border-radius: 999px;
}
.meks-ap .mejs-playpause-button button:hover { opacity: .9; }

.meks-ap .mejs-time,
.meks-ap .mejs-currenttime,
.meks-ap .mejs-duration {
	color: var(--atc-ink-300, #CFCFCF) !important;
	font-size: 12px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* Progress: grey rail, yellow fill, so position reads at a glance. */
.meks-ap .mejs-time-rail .mejs-time-total { background: var(--atc-ink-700, #2E2E2E) !important; }
.meks-ap .mejs-time-rail .mejs-time-loaded { background: var(--atc-ink-600, #565656) !important; }
.meks-ap .mejs-time-rail .mejs-time-current { background: var(--atc-yellow, #FFE600) !important; }
.meks-ap .mejs-time-handle-content { border-color: var(--atc-yellow, #FFE600) !important; }

.meks-ap .mejs-horizontal-volume-current,
.meks-ap .mejs-volume-current { background: var(--atc-yellow, #FFE600) !important; }

.meks-ap .mejs-speed-button > button,
.meks-ap .mejs-skip-back-button button,
.meks-ap .mejs-jump-forward-button button { color: var(--atc-white, #FFFFFF); }

.meks-ap .megaphone-player-action a,
.meks-ap .meks-ap-prev,
.meks-ap .meks-ap-next,
.meks-ap .meks-ap-toggle { color: var(--atc-white, #FFFFFF) !important; }
.meks-ap .megaphone-player-action a:hover,
.meks-ap .meks-ap-prev:hover,
.meks-ap .meks-ap-next:hover,
.meks-ap .meks-ap-toggle:hover { color: var(--atc-yellow, #FFE600) !important; }

.meks-ap a:focus-visible,
.meks-ap button:focus-visible { outline: 3px solid var(--atc-yellow, #FFE600); outline-offset: 2px; }

/* --- mobile ------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
	/*
	 * The unformatted yellow band was the left slot keeping a desktop
	 * background and transform while its contents wrapped. It now sits above
	 * the controls on the same black ground, carrying the episode name, which
	 * is the one thing a listener needs and the one thing it did not show.
	 */
	.meks-ap .meks-ap-slot-l {
		display: block !important;
		width: 100% !important;
		padding: 10px 16px 0 !important;
		background: none !important;
	}
	.meks-ap .meks-ap-title { font-size: 13px; -webkit-line-clamp: 1; }
	.meks-ap .mejs-duration, .meks-ap .mejs-time-separator { display: none; }
}