/*
 * The TTS WP "listen to this article" player, in Slop's clothes.
 *
 * Loaded after the plugin's stylesheet and only where it is (see
 * slop_enqueue_tts_styles()). The plugin guards its player against themes
 * with !important on nearly every rule, so the overrides here carry
 * !important too, with one more element in each selector to win. Colours
 * and fonts are the theme's presets. The plugin's dark-mode rules are
 * overridden as well: Slop is one light design.
 */

:root {
	--slop-tts-ink: var(--wp--preset--color--ink, #16140f);
	--slop-tts-paper: var(--wp--preset--color--paper, #f4f0e6);
	--slop-tts-card: var(--wp--preset--color--card, #fbf9f4);
	--slop-tts-orange: var(--wp--preset--color--orange, #ee5b2b);
	--slop-tts-oat: var(--wp--preset--color--oat, #e8dfcc);
	--slop-tts-sans: var(--wp--preset--font-family--archivo, Archivo, "Helvetica Neue", Arial, sans-serif);
	--slop-tts-mono: var(--wp--preset--font-family--plex-mono, "IBM Plex Mono", ui-monospace, monospace);
	--slop-tts-ease: cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

/* ----- The bar ----- */

body .tts-player {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) auto !important;
	align-items: center !important;
	row-gap: 0.7rem !important;
	/* The player sits in the article column like any other block. */
	max-width: var(--wp--style--global--content-size, 760px) !important;
	margin: 0 auto 2.75rem !important;
	padding: 1rem 1.1rem 1.05rem !important;
	border: 0 !important;
	border-radius: 22px !important;
	background: var(--slop-tts-ink) !important;
	box-shadow: 6px 6px 0 var(--slop-tts-orange) !important;
	color: var(--slop-tts-paper) !important;
	font-family: var(--slop-tts-sans) !important;
	filter: none !important;
}
body .tts-player:hover { filter: none !important; box-shadow: 6px 6px 0 var(--slop-tts-orange) !important; }
body .tts-player span,
body .tts-player div,
body .tts-player button { font-family: var(--slop-tts-sans) !important; }

/* The label above the controls. The empty alt text keeps it out of screen
   readers; the play button already says what it does. */
body .tts-player::before {
	content: "Listen \2014  read aloud by a machine" / "";
	grid-column: 1;
	grid-row: 1;
	font-family: var(--slop-tts-mono) !important;
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	line-height: 1;
	text-transform: uppercase;
	color: color-mix(in oklab, var(--slop-tts-paper) 62%, transparent);
}

/* A small equaliser that dances while the audio plays. */
body .tts-player::after {
	content: "" / "";
	grid-column: 2;
	grid-row: 1;
	justify-self: end;
	width: 22px;
	height: 12px;
	background:
		linear-gradient(var(--slop-tts-orange), var(--slop-tts-orange)) 0 100% / 4px 40% no-repeat,
		linear-gradient(var(--slop-tts-orange), var(--slop-tts-orange)) 50% 100% / 4px 70% no-repeat,
		linear-gradient(var(--slop-tts-orange), var(--slop-tts-orange)) 100% 100% / 4px 30% no-repeat;
	opacity: 0.6;
}
body .tts-player.playing::after {
	opacity: 1;
	animation: slop-tts-eq 0.9s ease-in-out infinite;
}

body .tts-player .tts-player-main {
	grid-column: 1 / -1 !important;
	grid-row: 2 !important;
	gap: 0.6rem !important;
}
body .tts-player .tts-custom-controls { gap: 0.7rem !important; }

/* ----- Play ----- */

body .tts-player button.tts-play-btn {
	width: 52px !important;
	height: 52px !important;
	border: 2px solid var(--slop-tts-ink) !important;
	background: var(--slop-tts-orange) !important;
	background-color: var(--slop-tts-orange) !important;
	box-shadow: 0 0 0 2px var(--slop-tts-orange) !important;
	transition: transform 0.25s var(--slop-tts-ease), box-shadow 0.25s var(--slop-tts-ease) !important;
}
body .tts-player button.tts-play-btn:hover {
	background: var(--slop-tts-orange) !important;
	background-color: var(--slop-tts-orange) !important;
	transform: translate(-2px, -2px) !important;
	box-shadow: 0 0 0 2px var(--slop-tts-orange), 4px 4px 0 2px var(--slop-tts-paper) !important;
}
body .tts-player button.tts-play-btn:active { transform: translate(1px, 1px) scale(0.96) !important; box-shadow: 0 0 0 2px var(--slop-tts-orange) !important; }
body .tts-player button.tts-play-btn:focus-visible { outline: 2px solid var(--slop-tts-paper) !important; outline-offset: 4px !important; }
body .tts-player button.tts-play-btn svg {
	width: 20px !important;
	height: 20px !important;
	fill: var(--slop-tts-ink) !important;
}
body .tts-player.playing button.tts-play-btn { animation: slop-tts-pulse 1.8s ease-out infinite; }

/* ----- Time and progress ----- */

body .tts-player .tts-time {
	min-width: 2.6rem !important;
	font-family: var(--slop-tts-mono) !important;
	font-size: 0.78rem !important;
	font-weight: 500 !important;
	color: color-mix(in oklab, var(--slop-tts-paper) 78%, transparent) !important;
}

body .tts-player .tts-progress-bar {
	height: 10px !important;
	border-radius: 999px !important;
	background: color-mix(in oklab, var(--slop-tts-paper) 16%, transparent) !important;
	overflow: visible !important;
	isolation: isolate;
}
body .tts-player .tts-progress-bar:hover { height: 10px !important; }
body .tts-player .tts-progress-bar::before {
	border-radius: 999px !important;
	background: var(--slop-tts-orange) !important;
}
body .tts-player .tts-progress-bar::after {
	border-radius: 999px !important;
	background: color-mix(in oklab, var(--slop-tts-paper) 14%, transparent) !important;
}
/* The playhead is always there: a paper dot you can grab. */
body .tts-player .tts-progress-thumb {
	width: 18px !important;
	height: 18px !important;
	border: 3px solid var(--slop-tts-orange) !important;
	background: var(--slop-tts-paper) !important;
	box-shadow: none !important;
	transform: translate(-50%, -50%) scale(1) !important;
	transition: transform 0.2s var(--slop-tts-ease) !important;
}
body .tts-player .tts-progress-bar:hover .tts-progress-thumb { transform: translate(-50%, -50%) scale(1.2) !important; }

/* ----- Small controls: volume, highlight, autoscroll, speed ----- */

body .tts-player button.tts-volume-btn,
body .tts-player button.tts-control-btn,
body .tts-player button.tts-speed-button {
	height: 34px !important;
	border-radius: 999px !important;
	color: color-mix(in oklab, var(--slop-tts-paper) 85%, transparent) !important;
	transition: background-color 0.15s ease, color 0.15s ease !important;
}
body .tts-player button.tts-volume-btn,
body .tts-player button.tts-control-btn { width: 34px !important; padding: 0 !important; }
body .tts-player button.tts-volume-btn:hover,
body .tts-player button.tts-control-btn:hover,
body .tts-player button.tts-speed-button:hover,
body .tts-player button.tts-speed-button:focus {
	background: color-mix(in oklab, var(--slop-tts-paper) 14%, transparent) !important;
	background-color: color-mix(in oklab, var(--slop-tts-paper) 14%, transparent) !important;
	color: var(--slop-tts-paper) !important;
}
body .tts-player button.tts-control-btn.active,
body .tts-player button.tts-control-btn.active:hover {
	background: var(--slop-tts-orange) !important;
	background-color: var(--slop-tts-orange) !important;
	color: var(--slop-tts-ink) !important;
}
body .tts-player button.tts-volume-btn:focus-visible,
body .tts-player button.tts-control-btn:focus-visible,
body .tts-player button.tts-speed-button:focus-visible {
	outline: 2px solid var(--slop-tts-paper) !important;
	outline-offset: 2px !important;
}
body .tts-player button.tts-control-btn svg,
body .tts-player button.tts-volume-btn svg { width: 18px !important; height: 18px !important; }
body .tts-player .tts-player-controls { gap: 0.25rem !important; }

body .tts-player button.tts-speed-button {
	min-width: 3.1rem !important;
	padding: 0 0.7rem !important;
	border: 1.5px solid color-mix(in oklab, var(--slop-tts-paper) 35%, transparent) !important;
	font-family: var(--slop-tts-mono) !important;
	font-size: 0.8rem !important;
	font-weight: 500 !important;
}

/* Volume: a paper popover with the site's hard shadow. */
body .tts-player .tts-volume-popover {
	border: 2px solid var(--slop-tts-ink) !important;
	border-radius: 14px !important;
	background: var(--slop-tts-paper) !important;
	box-shadow: 4px 4px 0 var(--slop-tts-ink) !important;
}
body .tts-player .tts-volume-popover::after { border-top-color: var(--slop-tts-paper) !important; }
body .tts-player .tts-volume-popover::before { border-top-color: var(--slop-tts-ink) !important; }
body .tts-player .tts-volume-popover .tts-volume-slider::-webkit-slider-runnable-track { background: color-mix(in oklab, var(--slop-tts-ink) 18%, transparent) !important; }
body .tts-player .tts-volume-popover .tts-volume-slider::-moz-range-track { background: color-mix(in oklab, var(--slop-tts-ink) 18%, transparent) !important; }
body .tts-player .tts-volume-popover .tts-volume-slider::-webkit-slider-thumb { background: var(--slop-tts-orange) !important; border: 2px solid var(--slop-tts-ink) !important; box-shadow: none !important; }
body .tts-player .tts-volume-popover .tts-volume-slider::-moz-range-thumb { background: var(--slop-tts-orange) !important; border: 2px solid var(--slop-tts-ink) !important; box-shadow: none !important; }

/* Speed menu: the plugin moves it to <body>, so it is styled on its own. */
body .tts-speed-menu {
	min-width: 7.5rem !important;
	padding: 0.35rem !important;
	border: 2px solid var(--slop-tts-ink) !important;
	border-radius: 14px !important;
	background: var(--slop-tts-paper) !important;
	background-color: var(--slop-tts-paper) !important;
	box-shadow: 5px 5px 0 var(--slop-tts-ink) !important;
}
body button.tts-speed-option,
body .tts-player button.tts-speed-option {
	border-radius: 8px !important;
	background: transparent !important;
	color: var(--slop-tts-ink) !important;
	font-family: var(--slop-tts-mono) !important;
	font-size: 0.85rem !important;
	font-weight: 500 !important;
}
body button.tts-speed-option:hover,
body button.tts-speed-option:focus-visible {
	background: color-mix(in oklab, var(--slop-tts-orange) 22%, transparent) !important;
	background-color: color-mix(in oklab, var(--slop-tts-orange) 22%, transparent) !important;
	color: var(--slop-tts-ink) !important;
}
body button.tts-speed-option[aria-current="true"],
body button.tts-speed-option[aria-current="true"]:hover {
	background: var(--slop-tts-orange) !important;
	background-color: var(--slop-tts-orange) !important;
	color: var(--slop-tts-ink) !important;
	font-weight: 700 !important;
}
body .tts-speed-option[aria-current="true"]::after { color: var(--slop-tts-ink) !important; }

/* ----- Sticky: the bar follows you down the page ----- */

body .tts-player.tts-sticky {
	bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
	max-width: 440px !important;
	box-shadow: 6px 6px 0 var(--slop-tts-orange), 0 18px 40px rgb(22 20 15 / 0.35) !important;
}
body .tts-player.tts-sticky::before { content: "Now reading" / ""; }
body .tts-player .tts-sticky-close,
body .tts-sticky-close {
	border: 2px solid var(--slop-tts-ink) !important;
	background: var(--slop-tts-orange) !important;
	background-color: var(--slop-tts-orange) !important;
	color: var(--slop-tts-ink) !important;
	box-shadow: 2px 2px 0 var(--slop-tts-ink) !important;
}
body .tts-player .tts-sticky-close:hover,
body .tts-sticky-close:hover { transform: rotate(90deg) !important; }
body .tts-restore-sticky {
	bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
	border: 2px solid var(--slop-tts-ink) !important;
	background: var(--slop-tts-orange) !important;
	background-color: var(--slop-tts-orange) !important;
	color: var(--slop-tts-ink) !important;
	box-shadow: 4px 4px 0 var(--slop-tts-ink) !important;
}
body .tts-restore-sticky svg { fill: var(--slop-tts-ink) !important; }
body .tts-restore-sticky:hover { transform: translate(-2px, -2px) !important; box-shadow: 6px 6px 0 var(--slop-tts-ink) !important; }

/* ----- While the audio is being made ----- */

body .tts-player.tts-player-generating { grid-template-columns: minmax(0, 1fr) !important; }
body .tts-player.tts-player-generating::after { display: none; }
body .tts-player .tts-generating-content { display: flex !important; align-items: center !important; gap: 0.9rem !important; }
body .tts-player .tts-spinner {
	width: 28px !important;
	height: 28px !important;
	border: 3px solid color-mix(in oklab, var(--slop-tts-paper) 20%, transparent) !important;
	border-top-color: var(--slop-tts-orange) !important;
}
body .tts-player .tts-status-message { color: var(--slop-tts-paper) !important; font-weight: 700 !important; }
body .tts-player .tts-status-detail { color: color-mix(in oklab, var(--slop-tts-paper) 65%, transparent) !important; }

/* ----- Following along: the word being read gets a stroke of orange ----- */

/* The word being read gets the same paint swipe as a filled-in blank on the
   brief form: a stroke under the lower half of the word, in the highlight
   colour set under TTS Audio. */
body .tts-highlight-overlay {
	border-radius: 2px !important;
	background: linear-gradient(transparent 52%, var(--tts-highlight-word-color, rgb(238 91 43 / 0.7)) 52%) !important;
	background-color: transparent !important;
}
body .tts-sentence-overlay,
body .tts-paragraph-overlay { border-radius: 10px !important; }

/* On the ink sections the text is paper: the block being read gets a faint
   paper tint instead of oat (which would put paper text on a light box), and
   the orange stroke is screened so it shows on ink and keeps the text light. */
:root {
	--tts-highlight-paragraph-on-dark: color-mix(in srgb, var(--slop-tts-paper) 10%, transparent);
	--tts-highlight-sentence-on-dark: color-mix(in srgb, var(--slop-tts-paper) 12%, transparent);
}
body .tts-highlight-overlay.tts-on-dark { background-color: transparent !important; }

/* ----- Small screens ----- */

@media (max-width: 600px) {
	body .tts-player { padding: 0.85rem 0.85rem 0.9rem !important; }
	body .tts-player .tts-player-main { flex-wrap: wrap !important; row-gap: 0.5rem !important; }
	body .tts-player .tts-custom-controls { flex-basis: 100% !important; gap: 0.5rem !important; }
	body .tts-player button.tts-play-btn { width: 46px !important; height: 46px !important; }
	body .tts-player .tts-time { min-width: 2.3rem !important; font-size: 0.72rem !important; }
}

/* ----- The plugin's dark-mode rules do not apply: Slop is one light design ----- */

@media (prefers-color-scheme: dark) {
	body .tts-player .tts-progress-bar { background: color-mix(in oklab, var(--slop-tts-paper) 16%, transparent) !important; }
	body .tts-player .tts-progress-bar::after { background: color-mix(in oklab, var(--slop-tts-paper) 14%, transparent) !important; }
	body .tts-player .tts-volume-popover { background: var(--slop-tts-paper) !important; border-color: var(--slop-tts-ink) !important; box-shadow: 4px 4px 0 var(--slop-tts-ink) !important; }
	body .tts-player .tts-volume-popover::after { border-top-color: var(--slop-tts-paper) !important; }
	body .tts-player .tts-volume-popover::before { border-top-color: var(--slop-tts-ink) !important; }
	body .tts-speed-menu { background: var(--slop-tts-paper) !important; background-color: var(--slop-tts-paper) !important; border-color: var(--slop-tts-ink) !important; }
	body button.tts-speed-option { color: var(--slop-tts-ink) !important; }
}

/* ----- Motion ----- */

@keyframes slop-tts-eq {
	0%, 100% { background-size: 4px 40%, 4px 70%, 4px 30%; }
	25% { background-size: 4px 90%, 4px 35%, 4px 65%; }
	50% { background-size: 4px 55%, 4px 100%, 4px 45%; }
	75% { background-size: 4px 75%, 4px 50%, 4px 95%; }
}
@keyframes slop-tts-pulse {
	0% { box-shadow: 0 0 0 2px var(--slop-tts-orange), 0 0 0 2px color-mix(in oklab, var(--slop-tts-orange) 60%, transparent); }
	100% { box-shadow: 0 0 0 2px var(--slop-tts-orange), 0 0 0 16px transparent; }
}
@media (prefers-reduced-motion: reduce) {
	body .tts-player.playing::after,
	body .tts-player.playing button.tts-play-btn { animation: none; }
}