/* Auto Scroll Reader. Override the custom properties in your theme to restyle. */
:root {
	--asr-accent: #e2352f;
	--asr-accent-text: #fff;
	--asr-bar-bg: rgba(20, 20, 22, 0.92);
	--asr-bar-text: #fff;
}

/* Our own scrollTo() calls must be instant; smooth scrolling would fight the loop. */
html.asr-playing { scroll-behavior: auto !important; }

/* Own line */
.asr-start-wrap { margin: 14px 0 6px; }
.asr-start {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	margin: 0;
	padding: 0.6em 1.15em 0.6em 0.9em;
	border: 0;
	border-radius: 999px;
	background: var(--asr-accent);
	color: var(--asr-accent-text);
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.01em;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: filter 0.15s, transform 0.15s;
}
.asr-start:hover { filter: brightness(1.08); }
.asr-start:active { transform: scale(0.97); }
.asr-start:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }
.asr-start svg { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; }
.asr-start.is-playing { opacity: 0.75; }
/* Own line even when the parent is a flex row. */
.asr-start-wrap { display: block; flex: 0 0 100%; width: 100%; }

.asr-bar {
	--asr-offset: 0px;
	position: fixed;
	left: 50%;
	bottom: calc(14px + var(--asr-offset) + env(safe-area-inset-bottom, 0px));
	transform: translateX(-50%);
	z-index: 2147483000;
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 6px;
	border-radius: 999px;
	background: var(--asr-bar-bg);
	color: var(--asr-bar-text);
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	font: 600 15px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
	transition: bottom 0.2s;
}
.asr-bar[hidden] { display: none; }

.asr-b {
	width: 44px;   /* 44px = comfortable touch target */
	height: 44px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.asr-b:hover:not(:disabled) { background: rgba(255, 255, 255, 0.12); }
.asr-b:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.asr-b:disabled { opacity: 0.35; cursor: default; }
.asr-b svg { width: 22px; height: 22px; fill: currentColor; }
.asr-toggle { background: var(--asr-accent); color: var(--asr-accent-text); }
.asr-toggle:hover:not(:disabled) { background: var(--asr-accent); filter: brightness(1.1); }
.asr-close { font-size: 26px; opacity: 0.8; }

.asr-speed {
	min-width: 3.4em;
	text-align: center;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	font-size: 14px;
}

@media print { .asr-start, .asr-bar { display: none !important; } }

/* Desktop (added by JS when wide screen + mouse): vertical bar in the left gutter,
   clear of bottom/sticky ads. Top to bottom: play/pause, faster, speed, slower, close. */
.asr-bar.asr-side {
	--asr-left: 16px;
	flex-direction: column;
	left: var(--asr-left);
	top: 50%;
	bottom: auto;
	transform: translateY(-50%);
	border-radius: 30px;
	transition: none;
}
.asr-side .asr-toggle { order: 1; }
.asr-side .asr-faster { order: 2; }
.asr-side .asr-speed { order: 3; padding: 6px 0; min-width: 0; }
.asr-side .asr-slower { order: 4; }
.asr-side .asr-collapse { order: 5; }
.asr-side .asr-close { order: 6; }

/* ---------- collapse / minimize ---------- */
.asr-collapse svg { transition: transform 0.15s; }
.asr-bar:not(.asr-side) .asr-collapse svg { transform: rotate(0deg); }     /* bottom bar: v = drop down */
.asr-bar.asr-side .asr-collapse svg { transform: rotate(90deg); }          /* side bar:   < = tuck left */

/* Collapsed: only the expand tab is left, as thin as possible, against the edge. */
.asr-bar.asr-collapsed { padding: 0; gap: 0; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25); }
.asr-bar.asr-collapsed > :not(.asr-collapse) { display: none; }
.asr-bar.asr-collapsed .asr-collapse { position: relative; border-radius: inherit; }
.asr-bar.asr-collapsed .asr-collapse svg { width: 16px; height: 16px; }
/* Accent colour while still scrolling, grey when paused. */
.asr-bar.asr-collapsed.asr-is-playing { background: var(--asr-accent); color: var(--asr-accent-text); }
/* Invisible larger hit area so the thin tab is still easy to tap. */
.asr-bar.asr-collapsed .asr-collapse::before { content: ""; position: absolute; inset: -14px; }

/* Bottom (phones/tablets): a short tab sitting on the bottom edge (above any sticky ad). */
.asr-bar.asr-collapsed:not(.asr-side) {
	bottom: calc(var(--asr-offset) + env(safe-area-inset-bottom, 0px));
	border-radius: 10px 10px 0 0;
}
.asr-bar.asr-collapsed:not(.asr-side) .asr-collapse { width: 52px; height: 18px; }
.asr-bar.asr-collapsed:not(.asr-side) .asr-collapse svg { transform: rotate(180deg); } /* ^ = bring back up */

/* Side (desktop): a thin strip flush on the left edge. */
.asr-bar.asr-side.asr-collapsed { border-radius: 0 10px 10px 0; }
.asr-bar.asr-side.asr-collapsed .asr-collapse { width: 16px; height: 56px; }
.asr-bar.asr-side.asr-collapsed .asr-collapse svg { transform: rotate(-90deg); }      /* > = pull out */