/* 语音阅读 bar on single posts — markup in template-parts/content/content-single.php, logic in assets/js/ti-speak.js */

.ti_toolgrid {
	display: block;
	margin: 1em auto;
}

.ti-spk {
	--ti-spk-accent: #ee2e3c;
	--ti-spk-rail: #dcdcdc;
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	box-sizing: border-box;
	padding: 8px 10px 8px 8px;
	background: #f5f5f5;
	border-radius: 999px;
	-webkit-user-select: none;
	user-select: none;
}

.ti-spk__btn {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--ti-spk-accent);
	color: #fff;
	cursor: pointer;
	transition: transform .15s ease, background-color .15s ease;
	-webkit-tap-highlight-color: transparent;
}
.ti-spk__btn:hover { background: #d81f2d; }
.ti-spk__btn:active { transform: scale(.94); }
.ti-spk__btn:focus { outline: none; }
.ti-spk__btn:focus-visible { outline: 2px solid var(--ti-spk-accent); outline-offset: 2px; }
.ti-spk__btn:disabled { opacity: .4; cursor: default; }

.ti-spk__ico {
	display: none;
	width: 22px;
	height: 22px;
	fill: currentColor;
}
.ti-spk[data-state="idle"] .ti-spk__ico--play,
.ti-spk[data-state="paused"] .ti-spk__ico--play,
.ti-spk[data-state="empty"] .ti-spk__ico--play,
.ti-spk[data-state="playing"] .ti-spk__ico--pause,
.ti-spk[data-state="ended"] .ti-spk__ico--replay { display: block; }

.ti-spk__main {
	flex: 1;
	min-width: 0;
}

.ti-spk__rate {
	flex: none;
	min-width: 52px;
	height: 28px;
	margin: 0;
	padding: 0 10px;
	border: 1px solid #d0d0d0;
	border-radius: 999px;
	background: #fff;
	color: #333;
	font-size: 13px;
	font-weight: 600;
	line-height: 26px;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.ti-spk__rate:hover { border-color: var(--ti-spk-accent); color: var(--ti-spk-accent); }
.ti-spk__rate:focus { outline: none; }
.ti-spk__rate:focus-visible { outline: 2px solid var(--ti-spk-accent); outline-offset: 2px; }
.ti-spk__rate:disabled { opacity: .4; cursor: default; }

.ti-spk__label {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	line-height: 1.3;
}
.ti-spk__title {
	font-size: 15px;
	font-weight: 600;
	color: #222;
	white-space: nowrap;
}
.ti-spk__meta {
	font-size: 13px;
	color: #888;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Track: 18px hit area around a 4px rail */
.ti-spk__track {
	position: relative;
	height: 18px;
	cursor: pointer;
	touch-action: none;
	-webkit-tap-highlight-color: transparent;
}
.ti-spk__track:focus { outline: none; }
.ti-spk__track:focus-visible .ti-spk__rail { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ti-spk-accent); }

.ti-spk__rail {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 4px;
	margin-top: -2px;
	border-radius: 2px;
	background: var(--ti-spk-rail);
	overflow: hidden;
}
.ti-spk__fill {
	width: 0;
	height: 100%;
	background: var(--ti-spk-accent);
	transition: width .25s linear;
}
.ti-spk__thumb {
	position: absolute;
	top: 50%;
	left: 0;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--ti-spk-accent);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
	transform: translate(-50%, -50%) scale(0);
	transition: transform .15s ease, left .25s linear;
}
.ti-spk:not([data-state="idle"]):not([data-state="empty"]) .ti-spk__thumb { transform: translate(-50%, -50%) scale(1); }
.ti-spk__track:hover .ti-spk__thumb,
.ti-spk__track:focus-visible .ti-spk__thumb,
.ti-spk.is-dragging .ti-spk__thumb { transform: translate(-50%, -50%) scale(1.35); }

/* Follow the finger exactly while dragging */
.ti-spk.is-dragging .ti-spk__fill,
.ti-spk.is-dragging .ti-spk__thumb { transition: none; }

@media (prefers-reduced-motion: reduce) {
	.ti-spk__fill,
	.ti-spk__thumb,
	.ti-spk__btn { transition: none; }
}