/* EmiTechLogic Article Reader — player styling
   Token system: quiet dev-tool chrome, one deliberate accent, no card shadows. */

.emi-reader {
	--emi-bg: #ffffff;
	--emi-surface: #f6f7f8;
	--emi-border: #e2e5e8;
	--emi-text: #1b1f23;
	--emi-muted: #6b7280;
	--emi-accent: #0f6b5c;
	--emi-accent-contrast: #ffffff;

	box-sizing: border-box;
	max-width: 640px;
	margin: 1.75rem 0;
	border: 1px solid var(--emi-border);
	border-radius: 4px;
	background: var(--emi-surface);
	color: var(--emi-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 14px;
}

@media (prefers-color-scheme: dark) {
	.emi-reader:not([data-theme="light"]) {
		--emi-bg: #14181c;
		--emi-surface: #1c2128;
		--emi-border: #30363d;
		--emi-text: #e6edf3;
		--emi-muted: #8b949e;
		--emi-accent: #4fd1b5;
		--emi-accent-contrast: #0b1210;
	}
}
.emi-reader[data-theme="dark"] {
	--emi-bg: #14181c;
	--emi-surface: #1c2128;
	--emi-border: #30363d;
	--emi-text: #e6edf3;
	--emi-muted: #8b949e;
	--emi-accent: #4fd1b5;
	--emi-accent-contrast: #0b1210;
}

.emi-reader * {
	box-sizing: border-box;
}

/* Many WordPress themes apply their own button/select resets (fixed
   widths, hidden overflow, their own colors) that otherwise clip or
   recolor our controls. "all: unset" strips that inherited styling
   before we apply our own, so the player looks the same on any theme. */
.emi-reader button,
.emi-reader select {
	all: unset;
	box-sizing: border-box !important;
	font-family: inherit !important;
	cursor: pointer !important;
}

.emi-reader__bar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
}

.emi-reader__btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	box-sizing: border-box !important;
	height: 34px !important;
	min-height: 34px !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	padding: 0 14px !important;
	margin: 0 !important;
	flex: 0 0 auto !important;
	border: 1px solid var(--emi-border) !important;
	border-radius: 999px !important;
	background-color: var(--emi-bg) !important;
	background-image: none !important;
	color: var(--emi-text) !important;
	cursor: pointer !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	letter-spacing: normal !important;
	text-indent: 0 !important;
	text-decoration: none !important;
	text-transform: none !important;
	white-space: nowrap !important;
	overflow: visible !important;
	vertical-align: middle !important;
	box-shadow: none !important;
	transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease, transform 0.1s ease !important;
}

.emi-reader__btn:hover:not(:disabled) {
	border-color: var(--emi-accent) !important;
	color: var(--emi-accent) !important;
	background-color: var(--emi-bg) !important;
}

.emi-reader__btn:active:not(:disabled) {
	transform: scale(0.97);
}

.emi-reader__btn:focus-visible {
	outline: 2px solid var(--emi-accent) !important;
	outline-offset: 2px !important;
}

.emi-reader__btn:disabled {
	opacity: 0.45 !important;
	cursor: default !important;
}

.emi-reader__btn svg {
	display: inline-block !important;
	width: 15px !important;
	height: 15px !important;
	flex: 0 0 auto !important;
	fill: currentColor !important;
	color: inherit !important;
	vertical-align: middle !important;
}

.emi-reader__btn-label {
	display: inline-block !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	color: inherit !important;
	white-space: nowrap !important;
}

.emi-reader__btn--primary,
.emi-reader__btn--primary:hover:not(:disabled) {
	background-color: var(--emi-accent) !important;
	color: var(--emi-accent-contrast) !important;
	border-color: var(--emi-accent) !important;
	padding: 0 18px !important;
}
.emi-reader__btn--primary:hover:not(:disabled) {
	filter: brightness(1.08);
}

.emi-reader__gear[aria-expanded="true"] {
	background-color: var(--emi-border) !important;
	color: var(--emi-text) !important;
}

.emi-reader__status {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.emi-reader__label {
	font-size: 13px;
	font-weight: 600;
	color: var(--emi-text);
}

.emi-reader__progress {
	height: 3px;
	background: var(--emi-border);
	border-radius: 2px;
	overflow: hidden;
}

.emi-reader__progress-fill {
	height: 100%;
	width: 0%;
	background: var(--emi-accent);
	transition: width 0.2s ease;
}

.emi-reader__count {
	font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
	font-size: 11px;
	color: var(--emi-muted);
}

.emi-reader__panel {
	border-top: 1px solid var(--emi-border);
	padding: 10px 12px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.emi-reader__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.emi-reader__row-label {
	font-size: 12px;
	color: var(--emi-muted);
	flex: 0 0 auto;
}

.emi-reader__voice,
.emi-reader__lang {
	display: inline-block !important;
	flex: 1 1 auto !important;
	max-width: 260px !important;
	min-width: 0 !important;
	height: 30px !important;
	border: 1px solid var(--emi-border) !important;
	border-radius: 4px !important;
	background-color: var(--emi-bg) !important;
	color: var(--emi-text) !important;
	padding: 0 8px !important;
	font-size: 12px !important;
	line-height: 30px !important;
}

.emi-reader__speeds {
	display: flex;
	gap: 4px;
}

.emi-reader__speed-btn {
	all: unset;
	box-sizing: border-box !important;
	cursor: pointer !important;
	border: 1px solid var(--emi-border) !important;
	border-radius: 4px !important;
	background-color: var(--emi-bg) !important;
	color: var(--emi-muted) !important;
	font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace !important;
	font-size: 11px !important;
	line-height: 1 !important;
	padding: 5px 8px !important;
	text-align: center !important;
}

.emi-reader__speed-btn:hover {
	border-color: var(--emi-accent) !important;
	color: var(--emi-accent) !important;
}

.emi-reader__speed-btn.is-active {
	background-color: var(--emi-accent) !important;
	border-color: var(--emi-accent) !important;
	color: var(--emi-accent-contrast) !important;
}

.emi-reader__hint {
	margin: 2px 0 0;
	font-size: 11.5px;
	color: var(--emi-muted);
}

/* Paragraphs the reader can jump to on click */
.emi-reader-clickable {
	cursor: pointer;
	transition: background 0.15s ease, box-shadow 0.15s ease;
	border-radius: 2px;
}
.emi-reader-clickable:hover {
	background: rgba(15, 107, 92, 0.06);
	box-shadow: -3px 0 0 var(--emi-accent);
}
@media (prefers-color-scheme: dark) {
	.emi-reader-clickable:hover {
		background: rgba(79, 209, 181, 0.1);
	}
}

.emi-reader--pointer {
	max-width: 640px;
}
.emi-reader__jump {
	display: block !important;
	width: 100% !important;
	background-color: transparent !important;
	border: none !important;
	color: var(--emi-muted) !important;
	font-size: 12px !important;
	padding: 8px 12px !important;
	cursor: pointer !important;
	text-align: left !important;
}
.emi-reader__jump:hover {
	color: var(--emi-accent) !important;
}

/* Highlighted paragraph while being read */
.emi-reader-highlight {
	background: rgba(15, 107, 92, 0.08);
	outline: 2px solid rgba(15, 107, 92, 0.25);
	outline-offset: 3px;
	border-radius: 2px;
	transition: background 0.2s ease, outline-color 0.2s ease;
}
@media (prefers-color-scheme: dark) {
	.emi-reader-highlight {
		background: rgba(79, 209, 181, 0.12);
		outline-color: rgba(79, 209, 181, 0.3);
	}
}

@media (max-width: 480px) {
	.emi-reader__bar {
		flex-wrap: wrap;
	}
	.emi-reader__status {
		order: 3;
		flex: 1 1 100%;
	}
	.emi-reader__voice,
	.emi-reader__lang {
		max-width: none;
	}
	.emi-reader__row {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.emi-reader__progress-fill,
	.emi-reader-highlight {
		transition: none;
	}
}