/* Jumalateenistuse salvestuse mängija (js/recording-player.js) — sektsioonid,
   transkript, otsing. Kasutab teema enda värvimuutujaid (style.css :root), nii
   et välimus sobib ülejäänud saidiga: rahulik paber-toon, sage põhivärv ja
   vase-toonis (--brass) aktsent sektsioonide tähistel ja esiletõstul.
   Ilma JS-ita (.is-enhanced puudub) jääb nähtavale tavaline <audio controls>.
   Põhimängija juhtelemendid on teadlikult minimaalsed (▶ ja ajajoon); kui praegu mängiv rida kerides päise alt
   välja läheb, kleepub selle koopia (.kmk-sticky: ▶ ja peatüki pikkune riba) päise alla.
   LIGIPÄÄSETAVUS (WCAG 2.2 AA): kontrast ≥4,5:1 (--kmk-time, --kmk-ring; --ink-faint EI kõlba tekstiks),
   põhikiri ≥18 px, puutealad ≥44 px (puuteekraanil/kitsal ekraanil), nähtav fookus (--kmk-focus). */

:root {
	--kmk-time: #474D49;  /* ajatemplid, väiketekst: 8,2:1 paberil, 5,7:1 edenemisriba täitel (--ink-soft jääks seal 4,1:1) */
	--kmk-ring: #6B716C;  /* sõlmede ja väikenuppude ääred: 4,7:1 paberil (mittetekstiline ≥3:1) */
	--kmk-fill: #E8D7B3;  /* praeguse sektsiooni edenemisriba täide (--brass-100 peal) */
	--kmk-focus: #2B2F2C; /* fookusrõngas: 12,8:1 paberil, loeb ka heleda-pruuni (aktiivse rea) peal */
}

/* [hidden] peab võitma allpool olevad display-reeglid (autori CSS display
   kirjutab brauseri enda [hidden] reegli üle). */
.kmk-rec [hidden] { display: none !important; }
.kmk-rec {
	--kmk-rec-thumb: 16px;
	margin: 0 0 32px;
	padding: 0; /* teema üldine "section { padding }" ei tohi kaarti paisutada */
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 10px;
	box-shadow: var(--shadow);
	overflow: hidden;
}
.kmk-rec-wrap { max-width: 760px; }
.kmk-rec-audio { display: block; width: 100%; margin: 0; }
/* allalaadimine: pealkiri ja VÄIKESED nupud samal real (kasutaja 2026-10-18); klõpsutsoon on siiski ≥44 px kõrge */
.kmk-rec-dl { margin: 0; padding: 12px 22px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.kmk-rec-dl-title { margin: 0; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kmk-time); }
.kmk-rec-dl-list { display: contents; } /* nupud on pealkirjaga ühes voos: esimene mahub pealkirja reale (ul-il on role="list") */
.kmk-rec-dl li { list-style: none; }
.kmk-pill.kmk-dl { position: relative; min-height: 0; padding: 2px 10px; font-size: 0.75rem; line-height: 1.5; }
.kmk-pill.kmk-dl::after { content: ''; position: absolute; inset: -9px 0; }
.kmk-dl-size { color: inherit; }
.kmk-rec.is-enhanced .kmk-rec-audio { display: none; }

/* ---- mängija ------------------------------------------------------------ */
.kmk-rec-player { padding: 20px 22px 18px; }
.kmk-rec-row { display: flex; align-items: center; gap: 18px; }
.kmk-rec-main { flex: 1; min-width: 0; }

.kmk-rec-play {
	flex: none; width: 56px; height: 56px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--sage); color: #fff; border: 0; cursor: pointer; padding: 0; /* sama täidetud --sage mis peamisel pillil */
	transition: background 0.15s ease;
}
.kmk-rec-play:hover { background: var(--sage-deep); }
.kmk-rec-play svg { width: 26px; height: 26px; }

/* "Praegu <sektsioon>" */
.kmk-rec-now { margin: 0 0 6px; min-height: 1.4em; font-size: 1.05rem; line-height: 1.4; color: var(--ink-soft); }
.kmk-rec-now-label { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kmk-time); margin-right: 6px; }
.kmk-rec-now-title { font-weight: 500; color: var(--ink); }

/* seekriba: natiivne vahemik (klaviatuur, ligipääsetavus) enda joonistatud rajaga;
   --p (0..1) on edenemine, tähiste asukoht arvutatakse sama valemiga nagu
   pöidla keskpunkt (7 = pool pöidla laiusest). */
.kmk-rec-track { position: relative; height: 24px; --p: 0; }
.kmk-rec-seek {
	-webkit-appearance: none; appearance: none; background: transparent;
	position: absolute; inset: 0; width: 100%; height: 24px; margin: 0; cursor: pointer;
}
.kmk-rec-seek::-webkit-slider-runnable-track {
	height: 6px; border-radius: 3px;
	background: linear-gradient( to right, var(--sage-deep) 0, var(--sage-deep) calc( var(--kmk-rec-thumb) / 2 + ( 100% - var(--kmk-rec-thumb) ) * var(--p) ), var(--line) calc( var(--kmk-rec-thumb) / 2 + ( 100% - var(--kmk-rec-thumb) ) * var(--p) ), var(--line) 100% );
}
.kmk-rec-seek::-moz-range-track { height: 6px; border-radius: 3px; background: var(--line); }
.kmk-rec-seek::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--sage-deep); }
.kmk-rec-seek::-webkit-slider-thumb {
	-webkit-appearance: none; appearance: none; margin-top: -5px;
	width: var(--kmk-rec-thumb); height: var(--kmk-rec-thumb); border-radius: 50%;
	background: var(--paper); border: 3px solid var(--sage-deep); box-sizing: border-box;
}
.kmk-rec-seek::-moz-range-thumb {
	width: var(--kmk-rec-thumb); height: var(--kmk-rec-thumb); border-radius: 50%;
	background: var(--paper); border: 3px solid var(--sage-deep); box-sizing: border-box;
}
.kmk-rec-seek:focus-visible { outline: 3px solid var(--kmk-focus); outline-offset: 4px; border-radius: 4px; }


.kmk-rec-times { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 0.85rem; color: var(--kmk-time); font-variant-numeric: tabular-nums; }
/* ajajoonega salvestusel pole päist: horisontaalne seekriba on nähtamatu (vahemikuväli jääb
   klaviatuuriga fookustatavaks), "Praegu …" ja "0:00 / 1:21:58" puuduvad — ▶/paus ja aeg on nupul joonel */
.has-rail .kmk-rec-track { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset( 50% ); white-space: nowrap; }
.has-rail .kmk-rec-now, .has-rail .kmk-rec-times { display: none; }
.has-rail .kmk-rec-player { padding: 0; }
.has-rail .kmk-rec-status { margin: 0; padding: 14px 22px 0; }

/* veateade (nähtav ainult vea korral) */
.kmk-rec-status { margin: 10px 0 0 74px; font-size: 0.95rem; font-style: italic; color: var(--ink-soft); }

/* väikesed nupud (transkripti otsingu ↑ ↓) */
.kmk-rec-btn {
	font-family: var(--font-mono); font-size: 0.85rem; padding: 8px 14px; border-radius: 20px;
	background: transparent; color: var(--ink-soft); border: 1px solid var(--line); cursor: pointer;
}
.kmk-rec-btn:hover { border-color: var(--sage); color: var(--sage); }
.kmk-rec-btn[hidden] { display: none; }
.kmk-rec-play:focus-visible, .kmk-rec-btn:focus-visible, .kmk-rec-tx-btn:focus-visible, .kmk-rec-sections a:focus-visible,
.kmk-rec-copy:focus-visible, .kmk-pill:focus-visible, .kmk-sticky button:focus-visible, .kmk-rec-follow-label input:focus-visible {
	outline: 3px solid var(--kmk-focus); outline-offset: 2px;
}
.kmk-rec.has-error .kmk-rec-player { opacity: 0.6; }

/* ---- sektsioonid ehk sisukord ------------------------------------------- */
.kmk-rec-sections { border-top: 1px solid var(--line); padding: 18px 22px 22px; }
.kmk-rec-sections h3, .kmk-rec-transcript h3 {
	margin: 0 0 10px; font-family: var(--font-mono); font-size: 0.74rem; font-weight: 500;
	letter-spacing: 0.08em; text-transform: uppercase; color: var(--kmk-time);
}
/* rühmadega salvestusel kannavad põhiosade pealkirjad struktuuri; "Sektsioonid" jääb ainult ekraanilugejale */
.kmk-rec-sr, .has-rail .kmk-rec-sections > h3 {
	position: absolute !important; width: 1px; height: 1px; margin: -1px !important; padding: 0;
	overflow: hidden; clip: rect( 0 0 0 0 ); clip-path: inset( 50% ); white-space: nowrap; border: 0;
}
.kmk-rec-sections ol { list-style: none; margin: 0; padding: 0; }
.kmk-rec-groups { position: relative; }
.kmk-rec-group + .kmk-rec-group { margin-top: 18px; } /* pealkiri on nimekirja sees (ilma ajajooneta salvestusel); telefonis pealkirju pole ja vahe on 0 */

/* põhiosa (kategooria) pealkiri (serif); klikitav: hüppab põhiosa algusesse. Ajajoonega salvestusel
   on kategooriad nimekirjast väljas PAREMAL eraldi veerus (vt allpool). Aktiivse põhiosa pealkiri on
   tumedam (allkriipsu pole). */
.kmk-rec-group-title {
	margin: 0 0 3px; padding: 0 0 0 10px; font-family: var(--font-display); font-size: 1.15rem; font-weight: 500;
	line-height: 1.3; letter-spacing: 0; text-transform: none; color: var(--ink-soft);
	transition: color 0.15s ease, border-color 0.15s ease;
}
.kmk-rec-group-link { color: inherit; text-decoration: none; }
.kmk-rec-group-link:hover { color: var(--ink); }
.kmk-rec-group.is-current .kmk-rec-group-title { color: var(--ink); }

/* sektsiooni rida: aeg + nimetus; klikitav; aktiivne rida on esile tõstetud. Tekst on igal real
   ühesuurune ja read on ÜHTLASE VAHEGA (kasutaja 2026-10-18: "ühtlane nimekiri ja ühtlaste vahedega" —
   sõlmede vahe ei sõltu sektsiooni kestusest). */
.kmk-rec-sections li a {
	--kmk-row-pl: 10px; /* rea vasak polster; sõlme (punkti) x arvutus kasutab seda (vt .kmk-rec-s-time::before) */
	position: relative; display: flex; align-items: baseline; gap: 12px; padding: 5px 10px 5px var(--kmk-row-pl); border-radius: 6px;
	color: var(--ink); text-decoration: none;
}
.kmk-rec-sections li a:hover { background: var(--sage-100); text-decoration: none; }
/* praegune rida: edenemisriba taustana (js seab --kmk-prog 0..100); tekst jääb tumedaks (kontrast ≥5,7:1 täitel).
   Pruun 3 px hetkeaja triip on joonistatud sama gradienti (täide | triip | taust), seega katab ta riba KOGU kõrguse
   (kasutaja 2026-10-18: "täpselt sama mõõduga kui värviriba kõrgus, ääri ümber ei ole") ja lõikub riba ümarate nurkadega. */
.kmk-rec-sections li a.is-active {
	background: linear-gradient( to right,
		var(--kmk-fill) calc( var(--kmk-prog, 0) * 1% - 1.5px ),
		var(--brass) calc( var(--kmk-prog, 0) * 1% - 1.5px ), var(--brass) calc( var(--kmk-prog, 0) * 1% + 1.5px ),
		var(--brass-100) calc( var(--kmk-prog, 0) * 1% + 1.5px ) );
}
.kmk-rec-sections li a.is-active .kmk-rec-s-time { color: var(--ink); }
/* praeguse rea edenemisriba on klõpsatav/lohistatav (js "sektsioonide klõps"): triip näitab kohta; puutel kerib püstine
   liigutus lehte, rõhtne riba */
.kmk-rec-sections li a.is-active { touch-action: pan-y; }
.is-scrubbing, .is-scrubbing * { -webkit-user-select: none; user-select: none; cursor: ew-resize !important; }
.kmk-rec-s-time { font-family: var(--font-mono); font-size: 0.9rem; color: var(--kmk-time); font-variant-numeric: tabular-nums; flex: none; min-width: 3.2em; }
/* tunni+ aegadega salvestusel (1:02:25) on veerg laiem, et nimetused jookseksid kõigis rühmades sirgelt */
.kmk-rec-hours .kmk-rec-s-time { min-width: 4.4em; }
.kmk-rec-s-title { font-size: 1.125rem; line-height: 1.35; } /* põhikiri ≥18 px */

/* ---- vertikaalne ajajoon (js lisab .has-rail ja joone elemendid) -----------
   Sektsioonid on joone sõlmed; joon täitub esimesest sõlmest praeguse sektsiooni sõlmeni ja ▶ nupp seisab
   sellel sõlmel — need HÜPPAVAD peatüki vahetudes (kasutaja 2026-10-18: "ei pea enam reaalajas liikuma";
   peatüki sees näitab edenemist rea edenemisriba). Joon lõpeb viimasel sõlmel (lõpuringi pole).
   --kmk-rail = joone keskjoone kaugus sisukorra vasakust servast, --kmk-indent = tekstide taane. */
.kmk-rec.has-rail { --kmk-rail: 28px; --kmk-indent: 50px; }
.has-rail .kmk-rec-groups { padding-left: var(--kmk-indent); }
.kmk-rec-rail, .kmk-rec-rail-hit { position: absolute; left: var(--kmk-rail); }
.kmk-rec-rail { width: 2px; margin-left: -1px; border-radius: 1px; background: var(--line); pointer-events: none; }
.kmk-rec-rail-fill { position: absolute; left: 0; top: 0; width: 100%; height: 0; border-radius: 1px; background: var(--sage-deep); transition: height 0.2s ease; }
.kmk-rec-rail-hit { width: 30px; margin-left: -15px; cursor: pointer; user-select: none; -webkit-user-select: none; }
.seek-focus .kmk-rec-rail { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--kmk-focus); }

/* sõlmed: tühi ring = tulemas, täidetud = läbitud, vasepruun = praegu.
   Sõlm on KELLAAJA elemendi külge (mitte rea keskele): see on alati kellaaja tekstiga samal kõrgusel, ka siis, kui pikk
   pealkiri murdub mitmele reale ja aken (laius) muutub — kasutaja 2026-10-19: "kellajad peaks joonduma koos punktiga
   joonel; hetkel võivad lahkneda, kui akna suurust muuta". Sama kõrguse (kellaaja keskpunkt) võtab js (layoutRail)
   joone, nupu ja täite jaoks. X: joone keskjoon (--kmk-rail) miinus rea vasak serv (--kmk-indent) ja rea vasak polster. */
.has-rail .kmk-rec-s-time { position: relative; }
.has-rail .kmk-rec-s-time::before {
	content: ''; position: absolute; top: 50%; width: 9px; height: 9px; margin-top: -4.5px;
	left: calc( var(--kmk-rail) - var(--kmk-indent) - var(--kmk-row-pl) - 4.5px );
	box-sizing: border-box; border-radius: 50%; background: var(--paper); border: 2px solid var(--kmk-ring);
	transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.has-rail .kmk-rec-sections li a.is-passed .kmk-rec-s-time::before { background: var(--sage-deep); border-color: var(--sage-deep); }
.has-rail .kmk-rec-sections li a.is-active .kmk-rec-s-time::before {
	width: 13px; height: 13px; margin-top: -6.5px; left: calc( var(--kmk-rail) - var(--kmk-indent) - var(--kmk-row-pl) - 6.5px );
	background: var(--brass); border-color: var(--brass); box-shadow: 0 0 0 4px var(--brass-100);
}

/* kategooriate veerg PAREMAL (ajajoonega salvestus, piisavalt lai ekraan): iga kategooria on riba, mis katab
   oma sektsioonide ulatuse (riba pikkus = ridade arv); tulemas = hele, läbitud = tume, praegu = vasepruun */
@media (min-width: 601px) {
	.has-rail .kmk-rec-group { display: grid; grid-template-columns: minmax( 0, 1fr ) minmax( 120px, 28% ); column-gap: 14px; }
	.has-rail .kmk-rec-group + .kmk-rec-group { margin-top: 0; }
	.has-rail .kmk-rec-group > ol { grid-column: 1; grid-row: 1; }
	.has-rail .kmk-rec-group-title { grid-column: 2; grid-row: 1; align-self: stretch; margin: 3px 0; padding: 1px 0 0 12px; border-left: 3px solid var(--line); }
	.has-rail .kmk-rec-group.is-passed .kmk-rec-group-title { border-left-color: var(--sage-deep); }
	.has-rail .kmk-rec-group.is-current .kmk-rec-group-title { border-left-color: var(--brass); }
	.has-rail .kmk-rec-flat .kmk-rec-group { grid-template-columns: minmax( 0, 1fr ); }
}

/* nupp (▶/paus + jooksev aeg): liigub joonel mängimise kohas — mängimise juhtimine ja kursor ühes.
   Algasend on joone alguses (esimese põhiosa sõlmel), esituse käigus libiseb see mööda joont alla.
   Klõps = play/paus, lohistamine mööda joont = hüpe. */
.kmk-rec-knob { position: absolute; left: var(--kmk-rail); top: 0; width: 0; height: 0; z-index: 3; touch-action: none; user-select: none; -webkit-user-select: none; transition: top 0.2s ease; }
.kmk-rec-knob.is-dragging { transition: none; cursor: grabbing; }
.is-laying .kmk-rec-knob, .is-laying .kmk-rec-rail-fill { transition: none; }
.kmk-rec-knob .kmk-rec-play { position: absolute; left: -20px; top: -20px; width: 40px; height: 40px; box-shadow: 0 0 0 4px var(--paper), 0 2px 8px rgba(43,47,44,0.28); }
.kmk-rec-knob .kmk-rec-play svg { width: 18px; height: 18px; }
/* päist pole: sisukord algab kaardi ülaservast, nupu (esimese põhiosa sõlm) ümber on ruumi */
.has-rail .kmk-rec-sections { border-top: 0; padding-top: 24px; }

/* ---- lehe päis ja nupud ---------------------------------------------------------------------------------
   PÄIS on STANDARDSUURUSES — sama .page-hero (padding 28 px, H1 clamp(2.6rem, 6.4vw, 4.6rem), eyebrow) mis sündmuse
   ja uudise lehel (kasutaja 2026-10-18: "pane lehe päis sarnase suurusega kui ülejäänud sama taseme lehtedel");
   siin on ainult salvestuse lisad: pikk eyebrow murdub, meta rida ja "Kuula jutlust". Eyebrow värv on tumedam
   (--sage-deep), et väike tekst läbiks kontrasti AA. */
.kmk-rec-hero .eyebrow { flex-wrap: wrap; justify-content: center; text-align: center; color: var(--sage-deep); }
.kmk-rec-meta { margin: 0 0 18px; font-size: 1.125rem; color: var(--ink-soft); }
.kmk-rec-meta span + span::before { content: ' · '; white-space: pre; } /* arvutis ühel real; kitsal ekraanil iga osa omal real */
.kmk-rec-listen { margin: 0; }

/* NUPUD: SAMA stiil mis Sündmuste ja Uudiste lehe filtrinuppudel (.album-filter.kmk-pill-filter, functions.php):
   mono 0,85 rem, 8 × 14 px, ümar 20 px, hele äär; hõljumisel äär ja tekst --sage; peamine nupp ("Kuula jutlust")
   on sama täidetud --sage nagu valitud kuu-/aastafilter. Puuteekraanil/kitsal ekraanil vähemalt 44 px kõrge. */
.kmk-pill {
	display: inline-flex; align-items: center; gap: 8px;
	font-family: var(--font-mono); font-size: 0.85rem; /* rea kõrgus pärandub kehast, nagu filtrinuppudel (40 px kõrge) */
	padding: 8px 14px; border-radius: 20px; border: 1px solid var(--line);
	background: transparent; color: var(--ink-soft); text-decoration: none; cursor: pointer;
}
.kmk-pill:hover { border-color: var(--sage); color: var(--sage); text-decoration: none; }
.kmk-pill.is-primary { background: var(--sage); border-color: var(--sage); color: #fff; }
.kmk-pill.is-primary:hover { background: var(--sage-deep); border-color: var(--sage-deep); color: #fff; }
.kmk-pill svg { width: 14px; height: 14px; flex: none; }

/* ---- transkript --------------------------------------------------------- */
.kmk-rec-transcript { border-top: 1px solid var(--line); padding: 16px 22px 20px; }
.kmk-rec-tx-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 10px; }
.kmk-rec-tx-head h3 { margin: 0; margin-right: auto; }
.kmk-rec-search-wrap { display: inline-flex; align-items: center; gap: 6px; }
.kmk-rec-search {
	font: inherit; font-size: 1rem; padding: 10px 14px; width: 210px; max-width: 100%; min-height: 44px; box-sizing: border-box;
	border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink);
}
.kmk-rec-search:focus-visible { outline: 3px solid var(--kmk-focus); outline-offset: 2px; }
.kmk-rec-search-count { font-family: var(--font-mono); font-size: 0.85rem; color: var(--ink-soft); min-width: 4.5em; }
.kmk-rec-search-prev, .kmk-rec-search-next { padding: 6px 9px; }
.kmk-rec-search { min-width: 0; } /* kitsal ekraanil kahaneb väli, nupud jäävad 44 px */
.kmk-rec-search-count:empty { display: none; }
.kmk-rec-follow-label { font-size: 0.95rem; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.kmk-rec-follow-label input { accent-color: var(--sage-deep); }
.kmk-rec-tx-note { margin: 0 0 10px; font-size: 0.95rem; color: var(--ink-soft); font-style: italic; }

.kmk-rec-tx { position: relative; max-height: 440px; overflow-y: auto; padding-right: 6px; scrollbar-width: thin; }
.kmk-rec-tx:focus-visible { outline: 3px solid var(--kmk-focus); outline-offset: 2px; }
.kmk-rec-tx p { margin: 0; padding: 8px 10px 8px 4px; border-radius: 6px; display: grid; grid-template-columns: 3.6em 1fr; gap: 10px; align-items: baseline; font-size: 1.125rem; line-height: 1.6; color: var(--ink); cursor: pointer; }
.kmk-rec-tx p:hover { background: var(--cream); }
.kmk-rec-tx p.is-active { background: var(--brass-100); }
/* ajatemplita lõik (lihttekst-transkript): ei ole klõpsatav */
.kmk-rec-tx p:not([data-t]) { cursor: text; grid-template-columns: 1fr; padding-left: 10px; }
.kmk-rec-tx p:not([data-t]):hover { background: transparent; }
.kmk-rec-tx time, .kmk-rec-tx-btn { font-family: var(--font-mono); font-size: 0.85rem; color: var(--kmk-time); font-variant-numeric: tabular-nums; text-align: right; }
.kmk-rec-tx-btn { background: none; border: 0; padding: 2px 0; cursor: pointer; border-radius: 4px; }
.kmk-rec-tx-btn:hover { color: var(--ink); text-decoration: underline; }
.kmk-rec-tx p.is-active .kmk-rec-tx-btn { color: var(--ink); }
.kmk-rec-tx mark { background: #F3D98B; color: var(--ink); border-radius: 2px; padding: 0 1px; }
.kmk-rec-tx mark.is-current { background: #E9B949; outline: 2px solid var(--brass); }

/* ---- kitsas ekraan ------------------------------------------------------- */
@media (max-width: 600px) {
	.kmk-rec-hero .eyebrow::before, .kmk-rec-hero .eyebrow::after { display: none; }
	.kmk-rec-meta span { display: block; }
	.kmk-rec-meta span + span::before { content: none; }
	.kmk-rec-player { padding: 16px 14px 14px; }
	.kmk-rec-row { gap: 12px; }
	.kmk-rec-play { width: 48px; height: 48px; }
	.kmk-rec-play svg { width: 22px; height: 22px; }
	.kmk-rec-status { margin-left: 0; }
	.kmk-rec.has-rail { --kmk-rail: 24px; --kmk-indent: 42px; }
	.has-rail .kmk-rec-status { padding: 12px 14px 0; }
	.has-rail .kmk-rec-sections { padding-top: 20px; }
	.kmk-rec-knob .kmk-rec-play { left: -18px; top: -18px; width: 36px; height: 36px; }
	.kmk-rec-knob .kmk-rec-play svg { width: 16px; height: 16px; }
	.kmk-rec-sections { padding: 14px 14px 16px; }
	/* telefonis põhiosade pealkirju (Pihitalitus, Sõna- ja palvetalitus …) EI näidata (kasutaja 2026-10-19: "võta mobiilivaatest üldse ära need kategooriad"):
	   nimekiri on ühtlane ja ühtlaste vahedega; tahvlis/arvutis on põhiosad paremal veerus */
	.kmk-rec-group-title { display: none; }
	.kmk-rec-group + .kmk-rec-group { margin-top: 0; }
	.kmk-rec-sections li a { padding: 8px; }
	.kmk-rec-transcript { padding: 14px 14px 16px; }
	.kmk-rec-tx { max-height: 60vh; }
	.kmk-rec-tx p { grid-template-columns: 3.2em 1fr; gap: 8px; }
	.kmk-rec-search { width: 100%; }
	.kmk-rec-search-wrap { width: 100%; }
}

/* ---- "kopeeri link" sektsiooni real ---------------------------------------------------- */
/* Nupp on rea naabernupp (mitte lingi sees). Hiirega: nähtav hõljumisel/fookuses ja praegusel real;
   puuteekraanil (pole hõljumist) ainult praegusel real — seal on ka kogu nupp 44 px. Rea parem
   ots on nupu jaoks varatud kõigil ridadel (muidu muutuks pealkirja murdumine aktiivse rea vahetudes). */
.kmk-rec-sections li { position: relative; padding-right: 44px; } /* nupu ala on rea (edenemisriba) VÄLJAS */
.kmk-rec-sections li a { padding-right: 4px; } /* tekst mahub sama laiusesse kui varem (44 + 4 = 48 px nupu jaoks) */
.kmk-rec-copy {
	position: absolute; right: 4px; top: 50%; transform: translateY( -50% ); z-index: 2;
	display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0;
	border: 1px solid transparent; border-radius: 50%; background: transparent; color: var(--kmk-time); cursor: pointer;
	opacity: 0; transition: opacity 0.12s ease, background 0.12s ease;
}
.kmk-rec-copy svg { width: 18px; height: 18px; }
.kmk-rec-sections li:hover .kmk-rec-copy, .kmk-rec-sections li:focus-within .kmk-rec-copy,
.kmk-rec-sections li a.is-active ~ .kmk-rec-copy, .kmk-rec-copy:focus-visible { opacity: 1; }
.kmk-rec-copy:hover { background: var(--paper); border-color: var(--kmk-ring); color: var(--ink); }
.kmk-rec-copy.is-copied { opacity: 1; background: var(--paper); border-color: var(--sage-deep); color: var(--sage-deep); }
@media (hover: none) {
	.kmk-rec-copy { display: none; }
	.kmk-rec-sections li a.is-active ~ .kmk-rec-copy { display: inline-flex; width: 44px; height: 44px; right: 0; }
}
/* telefonis (≤ 600 px) "kopeeri link" nuppu EI OLE (kasutaja 2026-10-19: "jäta mobiilivaates ka see link nupp ära igalt realt") ja
   selle 44 px lai veerg läheb rea edenemisribale: värviriba (ja sellega sama lai kleepuv rida) on laiem, pealkirjad murduvad
   harvem. Tahvlis ja arvutis jääb nupp alles. */
@media (max-width: 600px) {
	.kmk-rec-copy, .kmk-rec-sections li a.is-active ~ .kmk-rec-copy { display: none !important; }
	.kmk-rec-sections li { padding-right: 0; }
}

/* ---- teade (lingi kopeerimine) ------------------------------------------------------------ */
.kmk-toast {
	position: fixed; left: 50%; bottom: calc( 20px + env( safe-area-inset-bottom, 0px ) ); z-index: 95;
	max-width: min( 92vw, 420px ); padding: 12px 18px; border-radius: 10px; box-sizing: border-box;
	background: var(--ink); color: #fff; font-family: var(--font-body); font-size: 1rem; line-height: 1.35; text-align: center;
	box-shadow: 0 8px 24px rgba( 43, 47, 44, 0.3 );
	opacity: 0; transform: translate( -50%, 10px ); pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease;
}
.kmk-toast.is-on { opacity: 1; transform: translate( -50%, 0 ); }
.kmk-toast:empty { display: none; }

/* ---- kleepuv mängiv rida ------------------------------------------------------------------ */
/* js lisab <div class="kmk-sticky"> lehe lõppu. Kui praegu mängiv rida (joonel liikuv ▶ ja rea värviriba) kerides päise
   alt välja läheb, kleepub selle koopia päise alla ja jääb ekraanile (kasutaja 2026-10-18: "mängiv rida on nn sticky").
   Kaart on sama lai ja samas kohas kui salvestuse kaart; ▶ on joonel liikuva nupu kohal ja riba täpselt sama lai ja
   samas kohas kui rea värviriba (js layoutSticky seab left/width ja --kmk-sticky-* mõõtude järgi), sama välimus: täide
   --kmk-fill, pruun käepide, kellaaeg ja peatüki nimi sees; paremal praeguse põhiosa nimi (.has-cat, tabeli kolmanda
   veeru koopia). Ridadeta salvestusel (.is-fluid) on ▶ + riba kogu kaardi laiune. Päis on z-index 100: rida libiseb selle alt välja ja alla tagasi. Kerimise ja kiiruse nuppe pole. */
.kmk-sticky {
	--kmk-sticky-h: 35px; /* riba kõrgus = rea kõrgus (puuteekraanil/kitsal ekraanil 44 px, nagu read) */
	position: fixed; top: 0; left: 0; width: 100%; z-index: 90;
	box-sizing: border-box; padding: 8px 0;
	background: var(--paper); color: var(--ink); font-family: var(--font-body);
	border: 1px solid var(--line); border-top: 0; border-radius: 0 0 10px 10px;
	box-shadow: 0 10px 18px -10px rgba( 43, 47, 44, 0.35 );
	visibility: hidden; transform: translateY( -100% ); transition: transform 0.2s ease, visibility 0s linear 0.2s;
}
.kmk-sticky.is-visible { visibility: visible; transform: none; transition: transform 0.2s ease, visibility 0s; }
.kmk-sticky [hidden] { display: none !important; }

/* ▶: sama koht ja suurus mis joonel liikuval nupul (js seab --kmk-sticky-play-x/-d) */
.kmk-sticky-play {
	position: absolute; z-index: 3; top: 50%;
	left: calc( var(--kmk-sticky-play-x, 0px) - var(--kmk-sticky-play-d, 40px) / 2 );
	width: var(--kmk-sticky-play-d, 40px); height: var(--kmk-sticky-play-d, 40px); margin-top: calc( var(--kmk-sticky-play-d, 40px) / -2 );
	display: inline-flex; align-items: center; justify-content: center; padding: 0;
	border: 0; border-radius: 50%; background: var(--sage); color: #fff; cursor: pointer; transition: background 0.15s ease;
	box-shadow: 0 0 0 4px var(--paper), 0 2px 8px rgba( 43, 47, 44, 0.28 );
}
.kmk-sticky-play:hover { background: var(--sage-deep); }
.kmk-sticky-play-icon { display: inline-flex; }
.kmk-sticky-play-icon svg { width: 18px; height: 18px; }

/* riba: nähtamatu natiivne vahemikväli (hiir, puudutus, klaviatuur, ekraanilugeja; pöial on 1 px lai, et hiire asukoht =
   väärtus; min/max = praeguse peatüki algus/lõpp) + joonistatud riba. --p (0..1, seatud .kmk-sticky peal) on edenemine
   praeguses peatükis. Välimus on sama mis rea värviribal (.kmk-rec-sections a.is-active): hele taust, täide, käepide. */
.kmk-sticky-seek { position: relative; height: var(--kmk-sticky-h); margin-left: var(--kmk-sticky-bar-x, 0px); width: var(--kmk-sticky-bar-w, auto); min-width: 0; }
.kmk-sticky-range {
	-webkit-appearance: none; appearance: none; position: absolute; inset: 0; z-index: 2; width: 100%; height: var(--kmk-sticky-h); margin: 0; padding: 0;
	background: transparent; opacity: 0; cursor: pointer; touch-action: pan-y;
}
.kmk-sticky-range::-webkit-slider-runnable-track { height: var(--kmk-sticky-h); background: transparent; border: 0; }
.kmk-sticky-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 1px; height: var(--kmk-sticky-h); background: transparent; border: 0; }
.kmk-sticky-range::-moz-range-track { height: var(--kmk-sticky-h); background: transparent; border: 0; }
.kmk-sticky-range::-moz-range-thumb { width: 1px; height: var(--kmk-sticky-h); background: transparent; border: 0; border-radius: 0; }
.kmk-sticky-bar { position: absolute; inset: 0; overflow: hidden; border-radius: 6px; background: var(--brass-100); pointer-events: none; }
.kmk-sticky-fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc( var(--p, 0) * 100% ); background: var(--kmk-fill); }
.kmk-sticky-handle { position: absolute; top: 0; bottom: 0; left: calc( var(--p, 0) * 100% ); width: 3px; margin-left: -1.5px; background: var(--brass); } /* riba kogu kõrgus; riba ümarad nurgad lõikavad */
/* sisu samas järjekorras ja kirjas mis real: kellaaeg (mono) ja peatüki nimi */
.kmk-sticky-label { position: absolute; inset: 0; display: flex; align-items: center; gap: 12px; padding: 0 10px; }
.kmk-sticky-time { flex: none; min-width: 3.2em; font-family: var(--font-mono); font-size: 0.9rem; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kmk-sticky.is-hours .kmk-sticky-time { min-width: 4.4em; } /* tunni+ aegadel (1:02:25) on veerg laiem, nagu nimekirjas */
.kmk-sticky-chapter { min-width: 0; font-size: 1.125rem; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kmk-sticky-range:focus-visible + .kmk-sticky-bar { outline: 3px solid var(--kmk-focus); outline-offset: 2px; }

/* põhiosa (missa osa) nimi paremal: tabeli kolmanda veeru koopia — pruun püstjoon (= praegune põhiosa) ja serif-pealkiri,
   sama x-vahemik mis tabelis (js seab --kmk-sticky-cat-x/-w), joone kõrgus = riba kõrgus; ainult kui põhiosad on tabelis
   nimekirjast paremal (arvutis, rühmadega salvestus), muidu js ei lisa .has-cat; pikk nimi murdub kahele reale */
.kmk-sticky-cat { display: none; position: absolute; top: 8px; bottom: 8px; left: var(--kmk-sticky-cat-x, 0px); width: var(--kmk-sticky-cat-w, 0px); box-sizing: border-box; align-items: center; padding-left: 12px; border-left: 3px solid var(--brass); pointer-events: none; }
.kmk-sticky.has-cat .kmk-sticky-cat { display: flex; }
.kmk-sticky-cat-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; font-family: var(--font-display); font-size: 1rem; font-weight: 500; line-height: 1.15; color: var(--ink); }

/* ridadeta salvestus: ▶ ja riba kõrvuti kogu kaardi laiuselt */
.kmk-sticky.is-fluid { --kmk-sticky-h: 44px; display: flex; align-items: center; gap: 8px; padding: 8px; }
.kmk-sticky.is-fluid .kmk-sticky-play { position: static; flex: none; width: 44px; height: 44px; margin: 0; }
.kmk-sticky.is-fluid .kmk-sticky-seek { flex: 1 1 0; margin: 0; width: auto; }

/* puuteekraan/kitsas ekraan: read on ≥44 px kõrged, seega ka riba; kitsal ekraanil võib peatüki nimi murduda kahele reale
   (nagu nimekirjas), mitte jääda "Päeva palve ja pii…" */
@media ( pointer: coarse ), ( max-width: 600px ) {
	.kmk-sticky { --kmk-sticky-h: 44px; }
}
@media ( max-width: 600px ) {
	.kmk-sticky { padding: 6px 0; }
	.kmk-sticky-label { padding: 0 4px 0 8px; }
	.kmk-sticky-chapter { font-size: 1rem; line-height: 1.2; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
}

/* ---- kirjeldus ja tagasilink (teema paneb .kmk-article tekstile 16 px !important) ---------------- */
.single-salvestus .kmk-article .kmk-post-content p, .single-salvestus .kmk-article .kmk-back-link { font-size: 1.125rem !important; }
.single-salvestus .kmk-back-link a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---- puutealad ≥44 px: puuteekraan või kitsas ekraan ------------------------------------------- */
@media ( pointer: coarse ), ( max-width: 600px ) {
	.kmk-pill { min-height: 44px; padding-top: 10px; padding-bottom: 10px; box-sizing: border-box; }
	.kmk-rec-sections li a { min-height: 44px; flex-wrap: wrap; align-content: center; }
	.kmk-rec-s-title { flex: 1 1 0; min-width: 0; }
	.kmk-rec-group-link { display: inline-block; padding: 10px 0; }
	.kmk-rec-knob .kmk-rec-play { left: -22px; top: -22px; width: 44px; height: 44px; }
	.kmk-rec-knob .kmk-rec-play svg { width: 20px; height: 20px; }
	.kmk-rec-btn { min-width: 44px; min-height: 44px; }
	.kmk-rec-follow-label { min-height: 44px; }
	.kmk-rec-tx-btn { min-height: 44px; }
	.kmk-rec-copy { width: 44px; height: 44px; right: 0; }
}
/* tavalise ekraani (mitte puute) hiirega on rida sama kõrge kui varem; kitsal ekraanil on rida kõrgem */
@media ( max-width: 600px ) {
	.kmk-rec-sections li a { --kmk-row-pl: 8px; padding: 6px 4px 6px var(--kmk-row-pl); }
	.kmk-rec-dl { padding: 10px 14px; }
}

@media print {
	.kmk-sticky, .kmk-toast, .kmk-rec-copy { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
	.kmk-rec-play, .kmk-rec-btn, .kmk-rec-group-title, .kmk-rec-group-link, .kmk-rec-rail-fill, .kmk-rec-knob,
	.has-rail .kmk-rec-s-time::before, .kmk-sticky, .kmk-sticky-play, .kmk-toast, .kmk-rec-copy { transition: none; }
}