/* KH Czytanie – przyciski, pasek odtwarzacza i podświetlanie tekstu.
 *
 * Bez flexowego „gap”, bez „min()” i bez „:focus-visible”, bo przeglądarki
 * telewizorów i starszych tabletów ich nie znają. Zamiast tego marginesy,
 * „max-width” i zwykłe „:focus” – efekt ten sam, a działa wszędzie.
 */

:root {
	--khc-accent: #2d4a6b;          /* przycisk i pasek */
	--khc-accent-2: #ddbd85;        /* złoty akcent */
	--khc-sentence: rgba(221, 189, 133, .30);
	--khc-word: #ffd34e;
	--khc-word-text: #1f1f1f;
	--khc-bar-bg: rgba(255, 255, 255, .96);
	--khc-bar-text: #2b2b2b;
	--khc-btn-scale: 1;             /* 1.6–2 pod telewizor */
}

/* ---------- przyciski „Czytaj” ---------- */

.khc-start {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	margin: 6px 0 26px;
}
.khc-start.khc-sec { margin: 4px 0 18px; }

.khc-btn {
	display: inline-flex;
	align-items: center;
	margin: 3px 14px 3px 0;
	padding: calc(10px * var(--khc-btn-scale)) calc(22px * var(--khc-btn-scale)) calc(10px * var(--khc-btn-scale)) calc(14px * var(--khc-btn-scale));
	border: 0;
	border-radius: 999px;
	background: var(--khc-accent);
	color: #fff;
	font-weight: 600;
	font-size: calc(15px * var(--khc-btn-scale));
	line-height: 1.2;
	font-family: inherit;
	letter-spacing: .01em;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(45, 74, 107, .25);
	transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.khc-btn:hover { background: #24405f; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(45, 74, 107, .32); }

/* Obwódka zaznaczenia. Zwykłe :focus, żeby było widoczne także wtedy, gdy
   czytelnik wędruje po stronie pilotem albo klawiszem Tab. */
.khc-btn:focus { outline: 4px solid var(--khc-accent-2); outline-offset: 3px; }

.khc-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: calc(28px * var(--khc-btn-scale));
	height: calc(28px * var(--khc-btn-scale));
	margin-right: calc(10px * var(--khc-btn-scale));
	border-radius: 50%;
	background: var(--khc-accent-2);
	color: var(--khc-accent);
}
.khc-ico svg { width: calc(16px * var(--khc-btn-scale)); height: calc(16px * var(--khc-btn-scale)); fill: currentColor; }
.khc-meta { margin: 3px 0; color: #888; font-size: calc(13px * var(--khc-btn-scale)); }

/* mniejszy wariant przy sekcjach */
.khc-sec .khc-btn {
	padding: calc(6px * var(--khc-btn-scale)) calc(16px * var(--khc-btn-scale)) calc(6px * var(--khc-btn-scale)) calc(9px * var(--khc-btn-scale));
	font-size: calc(13px * var(--khc-btn-scale));
}
.khc-sec .khc-ico {
	width: calc(22px * var(--khc-btn-scale));
	height: calc(22px * var(--khc-btn-scale));
	margin-right: calc(8px * var(--khc-btn-scale));
}
.khc-sec .khc-ico svg { width: calc(12px * var(--khc-btn-scale)); height: calc(12px * var(--khc-btn-scale)); }
.khc-sec .khc-meta { font-size: calc(12px * var(--khc-btn-scale)); }

/* sekcja właśnie czytana */
.khc-start.is-active .khc-btn { background: #24405f; box-shadow: 0 0 0 3px var(--khc-accent-2); }
.khc-start.is-loading .khc-btn { opacity: .75; cursor: progress; }

/* ---------- podświetlanie ---------- */

.khc-w { transition: background-color .12s ease; border-radius: 0; }
.khc-open .khc-w { cursor: pointer; }
.khc-open a .khc-w { cursor: inherit; }
.khc-w.khc-s {
	background-color: var(--khc-sentence);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
.khc-w.khc-on {
	background-color: var(--khc-word);
	color: var(--khc-word-text);
	border-radius: 3px;
}

/* ---------- pasek na dole ---------- */

.khc-bar {
	position: fixed;
	left: 50%;
	bottom: 14px;
	z-index: 99990;
	display: flex;
	align-items: center;
	width: calc(100% - 24px);
	max-width: 760px;
	padding: 8px 10px;
	box-sizing: border-box;
	border: 1px solid rgba(0, 0, 0, .08);
	border-radius: 16px;
	background: var(--khc-bar-bg);
	color: var(--khc-bar-text);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	font-family: inherit;
	transform: translate(-50%, 140%);
	opacity: 0;
	transition: transform .25s ease, opacity .25s ease;
}
.khc-bar.is-open { transform: translate(-50%, 0); opacity: 1; }
.khc-open body { padding-bottom: 96px; }

.khc-b {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	margin: 0 3px;
	padding: 0 6px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: inherit;
	font-weight: 600;
	font-size: 14px;
	line-height: 1;
	font-family: inherit;
	cursor: pointer;
}
.khc-b svg { width: 22px; height: 22px; fill: currentColor; }
.khc-b:hover { background: rgba(0, 0, 0, .06); }
.khc-b:focus { outline: 3px solid var(--khc-accent); outline-offset: 2px; }
.khc-pp { min-width: 46px; height: 46px; border-radius: 50%; background: var(--khc-accent); color: #fff; }
.khc-pp:hover { background: #24405f; }
.khc-pp svg { width: 24px; height: 24px; }
.khc-pp:focus { outline-color: var(--khc-accent-2); }
.khc-fl { opacity: .45; }
.khc-fl.is-on { opacity: 1; color: var(--khc-accent); }

.khc-mid { flex: 1 1 auto; min-width: 0; padding: 0 6px; }
.khc-row { display: flex; justify-content: space-between; font-size: 12px; line-height: 1.3; margin-bottom: 4px; }
.khc-ttl { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding-right: 10px; color: #555; }
.khc-time { flex: 0 0 auto; font-variant-numeric: tabular-nums; color: #333; font-weight: 600; }

.khc-seek {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	height: 6px;
	margin: 0;
	border-radius: 3px;
	background: #e3e3e3;
	accent-color: var(--khc-accent);
	cursor: pointer;
}
.khc-seek:focus { outline: 3px solid var(--khc-accent); outline-offset: 3px; }
.khc-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--khc-accent); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.khc-seek::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--khc-accent); border: 2px solid #fff; }

@media (max-width: 600px) {
	.khc-bar { bottom: 0; width: 100%; border-radius: 16px 16px 0 0; padding: 8px 4px calc(8px + env(safe-area-inset-bottom)); }
	.khc-b { min-width: 34px; margin: 0 1px; }
	.khc-fw, .khc-fl { display: none; }
	.khc-ttl { display: none; }
	.khc-row { justify-content: flex-end; }
}

@media print {
	.khc-ui { display: none !important; }
	.khc-w.khc-s, .khc-w.khc-on { background: none !important; box-shadow: none !important; }
}