/**
 * Fundstellenliste in den Suchergebnissen.
 *
 * Bewusst zurückhaltend und ohne feste Farben: die Darstellung erbt Schrift und
 * Farben vom Theme und funktioniert damit auch im Dark Mode.
 */

/* --- Suchformular --- */

.pts-form {
	margin: 0 0 1.5rem;
}

.pts-form__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.5rem;
}

.pts-form__input {
	flex: 1 1 16rem;
	min-width: 0;
	padding: 0.5em 0.75em;
	border: 1px solid color-mix( in srgb, currentColor 40%, transparent );
	border-radius: 4px;
	background: transparent;
	color: inherit;
	font: inherit;
}

.pts-form__submit {
	flex: 0 0 auto;
	padding: 0.5em 1.25em;
	border: 1px solid currentColor;
	border-radius: 4px;
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.pts-form__submit:hover,
.pts-form__submit:focus-visible {
	background: color-mix( in srgb, currentColor 12%, transparent );
}

.pts-form__row--options {
	font-size: 0.9em;
	opacity: 0.85;
}

.pts-form__field {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.pts-form__field select {
	padding: 0.25em 0.4em;
	border: 1px solid color-mix( in srgb, currentColor 40%, transparent );
	border-radius: 4px;
	background: transparent;
	color: inherit;
	font: inherit;
}

.pts-form__field--check {
	cursor: pointer;
}

/* --- Eigenständige Ergebnisliste --- */

.pts-results__count {
	margin: 0 0 0.5rem;
	font-weight: 600;
}

.pts-results__hint {
	margin: 0;
	opacity: 0.75;
}

.pts-results__list {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.pts-result {
	margin: 0 0 2rem;
}

.pts-result__title {
	margin: 0 0 0.15rem;
	font-size: 1.15em;
	line-height: 1.3;
}

.pts-result__title a {
	color: inherit;
	text-decoration: none;
}

.pts-result__title a:hover,
.pts-result__title a:focus-visible {
	text-decoration: underline;
}

.pts-result__meta {
	margin: 0;
	font-size: 0.85em;
	opacity: 0.65;
}

.pts-result__excerpt {
	margin: 0.5rem 0 0;
}

.pts-results__pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin-top: 1.5rem;
}

.pts-results__pagination .page-numbers {
	padding: 0.3em 0.7em;
	border: 1px solid color-mix( in srgb, currentColor 25%, transparent );
	border-radius: 4px;
	text-decoration: none;
	color: inherit;
}

.pts-results__pagination .page-numbers.current {
	background: color-mix( in srgb, currentColor 15%, transparent );
	font-weight: 700;
}

.pts-results__pagination .page-numbers.dots {
	border-color: transparent;
}

/* --- Fundstellen --- */

.pts-hits {
	/*
	 * Bezugsrahmen für die Spaltenumbrüche weiter unten. Entscheidend ist der
	 * Platz im Inhaltsbereich, nicht die Fensterbreite: in einer schmalen
	 * Spalte oder Seitenleiste ist das Fenster breit und der Kasten trotzdem
	 * eng.
	 */
	container-type: inline-size;
	container-name: pts-hits;

	margin: 1rem 0 0;
	padding: 0.75rem 1rem;
	border-left: 3px solid currentColor;
	background: color-mix( in srgb, currentColor 5%, transparent );
	font-size: 0.9em;
}

.pts-hits__heading {
	margin: 0 0 0.5rem;
	font-weight: 600;
	opacity: 0.75;
}

.pts-hits__filter {
	display: inline-block;
	margin-inline-start: 0.5rem;
	padding: 0.1em 0.5em;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-weight: 400;
	text-decoration: none;
}

.pts-hits__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Feste Spalten statt Flexbox.
 *
 * Mit Flexbox bestimmte die längste Kapitelmarke die Breite der Meta-Spalte –
 * jede Zeile stand woanders, und lange Marken schoben den Textausschnitt weg.
 * Als Raster liegen Zeit, Kapitel, Zitat, Sprecher und Knopf in allen Zeilen
 * exakt untereinander, unabhängig vom Inhalt.
 *
 * minmax( 0, … ) ist nötig, weil Raster-Spalten sonst nicht unter ihre
 * Mindestinhaltsbreite schrumpfen und ein langes Wort die Spalte sprengt.
 */
.pts-hit {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) 4.75rem 2.5rem;
	align-items: start;
	gap: 0.5rem;
	padding: 0.45rem 0;
	border-top: 1px solid color-mix( in srgb, currentColor 15%, transparent );
}

.pts-hit:first-child {
	border-top: 0;
}

/*
 * Die Spalten werden ausdrücklich zugewiesen. Ohne das rutschte der
 * Abspielknopf in die Sprecherspalte, sobald eine Fundstelle keinen Sprecher
 * hat – etwa bei einer technischen Tonspur.
 */
.pts-hit__link {
	grid-column: 1;
	display: grid;
	grid-template-columns: 10.5rem minmax( 0, 1fr );
	align-items: start;
	gap: 0.25rem 0.75rem;
	text-decoration: none;
	color: inherit;
}

.pts-hit__link:hover .pts-hit__text,
.pts-hit__link:focus-visible .pts-hit__text {
	text-decoration: underline;
}

.pts-hit__meta {
	display: grid;
	grid-template-columns: 4.25rem minmax( 0, 1fr );
	align-items: start;
	gap: 0.25rem 0.5rem;
}

.pts-hit__time {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	white-space: nowrap;
}

/* Lange Kapitelmarken umbrechen, statt die Zeile zu sprengen. */
.pts-hit__chapter {
	opacity: 0.7;
	font-style: italic;
	overflow-wrap: anywhere;
	hyphens: auto;
}

.pts-hit__text {
	min-width: 0;
	overflow-wrap: anywhere;
}

.pts-hit__text mark {
	background: color-mix( in srgb, currentColor 20%, transparent );
	color: inherit;
	padding: 0 0.1em;
	border-radius: 2px;
}

.pts-hit__voice {
	grid-column: 2;
	justify-self: start;
	padding: 0.05em 0.5em;
	border: 1px solid color-mix( in srgb, currentColor 30%, transparent );
	border-radius: 999px;
	font-size: 0.85em;
	text-decoration: none;
	opacity: 0.8;
	color: inherit;
	overflow-wrap: anywhere;
}

/* --- Playbutton in der rechten Spalte --- */

.pts-hit__play {
	grid-column: 3;
	justify-self: end;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 1px solid color-mix( in srgb, currentColor 35%, transparent );
	border-radius: 50%;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.pts-hit__play:hover,
.pts-hit__play:focus-visible {
	background: color-mix( in srgb, currentColor 12%, transparent );
}

/* Dreieck bzw. Pausebalken rein aus Rahmen gezeichnet – kein Bild nötig. */
.pts-hit__play-icon {
	width: 0;
	height: 0;
	margin-inline-start: 0.15em;
	border-style: solid;
	border-width: 0.35rem 0 0.35rem 0.6rem;
	border-color: transparent transparent transparent currentColor;
}

.pts-hit__play.is-playing,
.pts-bar.is-playing .pts-bar__toggle {
	background: color-mix( in srgb, currentColor 18%, transparent );
}

.pts-hit__play.is-playing .pts-hit__play-icon,
.pts-bar.is-playing .pts-hit__play-icon {
	width: 0.55rem;
	height: 0.7rem;
	margin-inline-start: 0;
	border-width: 0 0 0 0.18rem;
	border-color: currentColor;
	box-shadow: inset -0.18rem 0 0 currentColor;
}

/*
 * Wenig Platz: die feste Spalte für Zeit und Kapitel ließe dem Zitat zu wenig
 * Raum. Dann rücken Kapitel und Sprecher unter den Text, der Abspielknopf
 * bleibt rechts stehen.
 *
 * Maßgeblich ist die Breite des Fundstellenkastens, nicht die des Fensters –
 * sonst bliebe das dreispaltige Raster in einer schmalen Inhaltsspalte stehen
 * und quetschte das Zitat auf ein paar Wörter je Zeile.
 */
@container pts-hits ( max-width: 34rem ) {
	.pts-hit {
		grid-template-columns: minmax( 0, 1fr ) 2.5rem;
	}

	.pts-hit__link {
		grid-column: 1;
		grid-row: 1;
		grid-template-columns: minmax( 0, 1fr );
	}

	.pts-hit__voice {
		grid-column: 1;
		grid-row: 2;
	}

	.pts-hit__play {
		grid-column: 2;
		grid-row: 1 / span 2;
		align-self: start;
	}
}

/* Fallback für Browser ohne Container-Queries: dann eben nach Fensterbreite. */
@supports not ( container-type: inline-size ) {
	@media ( max-width: 46rem ) {
		.pts-hit {
			grid-template-columns: minmax( 0, 1fr ) 2.5rem;
		}

		.pts-hit__link {
			grid-column: 1;
			grid-row: 1;
			grid-template-columns: minmax( 0, 1fr );
		}

		.pts-hit__voice {
			grid-column: 1;
			grid-row: 2;
		}

		.pts-hit__play {
			grid-column: 2;
			grid-row: 1 / span 2;
			align-self: start;
		}
	}
}

/* --- Statusleiste am unteren Rand --- */

.pts-bar {
	position: fixed;
	z-index: 9999;
	inset-inline: 0;
	inset-block-end: 0;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.6rem 1rem;
	background: Canvas;
	color: CanvasText;
	border-top: 1px solid color-mix( in srgb, CanvasText 25%, transparent );
	box-shadow: 0 -2px 12px rgba( 0, 0, 0, 0.12 );
	font-size: 0.9rem;
}

.pts-bar[hidden] {
	display: none;
}

.pts-bar__toggle,
.pts-bar__close {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 1px solid color-mix( in srgb, currentColor 35%, transparent );
	border-radius: 50%;
	background: transparent;
	color: inherit;
	font-size: 1.1rem;
	cursor: pointer;
}

.pts-bar__info {
	flex: 1 1 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 0.75rem;
	min-width: 0;
}

.pts-bar__title {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pts-bar__time {
	font-variant-numeric: tabular-nums;
	opacity: 0.7;
}

.pts-bar__link {
	flex: 0 0 auto;
	color: inherit;
}

.pts-hits__more > summary {
	margin-top: 0.5rem;
	cursor: pointer;
	opacity: 0.75;
}

/* Fallback für Browser ohne color-mix(). */
@supports not ( background: color-mix( in srgb, currentColor 5%, transparent ) ) {
	.pts-hits {
		background: rgba( 127, 127, 127, 0.08 );
	}

	.pts-hit {
		border-top-color: rgba( 127, 127, 127, 0.25 );
	}

	.pts-hit__text mark {
		background: rgba( 127, 127, 127, 0.3 );
	}
}