/*
 * Compendion Netzwerksuche – Ergebnis-Zeilen fuer die Live-Meilisearch-Suche
 * auf `/suche/`. Such-Feld + Filter-Pillen kommen unveraendert aus
 * `compendion-cardlist.css` (`.ccl-search`, `.ccl-pills`, `.ccl-pill`,
 * `.ccl-spinner`) – dieses File deckt nur, was dort fehlt: Ergebnis-Zeile,
 * Snippet-Highlight, Status-/Leerzustand.
 *
 * Farben ausschliesslich ueber Theme-/Site-Palette-Tokens (feedback_contrast_
 * convention): jede background-Flaeche traegt ihr definiertes on-Token.
 *
 * Flaechen seit Lauf 10f (Arne 2026-09-04, „keine farbigen Karten auf
 * farbigem Grund"): Suchfeld + Pillen bleiben auf dem Seitengrund (base =
 * Show-Vollton); Status + Trefferliste sitzen in einem `surface`-Panel
 * (`.cs-panel`, wie Content-Karten sonst im Theme), die Karten selbst als
 * definiertes Overlay auf surface (`color-mix(contrast N%, transparent)` +
 * `--c-on-surface-overlay`, Overlay-Regel der Kontrastkonvention) — NICHT
 * `surface-soft`: das faellt im Dark Mode mit `surface` auf denselben Ton
 * zusammen (DML gemessen 2026-09-04: #4A143C vs. #4F1440), die Karte waere
 * unsichtbar. Die Show-Farbe (primary) erscheint nur als schmaler Balken
 * links an der Karte und in der Typ-Badge.
 */

/* `.compendion-wide-layout` (Template-Main) laeuft volle Breite (Fundus/
 * Podcasts/Profil-Konvention) – `.compendion-search` selbst bleibt ungedeckelt,
 * jeder Abschnitt zentriert sich stattdessen EINZELN mit seiner eigenen Breite
 * (Korrekturrunde 2, Arne 2026-08-28: Suchfeld/Pillen bleiben wie zuvor,
 * NUR die Ergebnisliste bekommt eine eigene, groessere Breite). */

/* Suchfeld + Pillen: unveraendert aus Korrekturrunde 1 (WP-Content-Size,
 * exakt das compendion-mitwirkende-overview.css-Muster). */
.compendion-search .ccl-search,
.compendion-search .ccl-bar {
	width: 100%;
	max-width: var(--wp--style--global--content-size, 720px);
	margin-inline: auto;
}

/* `.ccl-search__field`/`.ccl-search__input` deckeln in compendion-cardlist.css
 * bewusst auf 28rem (Fundus/Anderswo: Suchfeld neben Titel) – hier soll das
 * Feld stattdessen die volle Breite seiner eigenen Zeile fuellen. Scoped auf
 * `.compendion-search`, damit die anderen Cardlist-Seiten unangetastet bleiben. */
.compendion-search .ccl-search__field,
.compendion-search .ccl-search__input {
	max-width: 100%;
}

/* Eingabefeld auf eigener Palettenflaeche (Arne 2026-09-04): `surface` mit
 * `on-surface`-Ink statt base-auf-base (Feld war auf dem Show-Vollton nur
 * ein Rahmen, Placeholder in rohem `muted` → auf DML dunkel auf Magenta).
 * Placeholder explizit mit dem 4,5:1-geprueften `--c-on-surface-muted`
 * (Verschaerfung der Kontrastkonvention 2026-08-26). Rand + Fokus in
 * primary (Show-Farbe), Loesch-× erbt die on-surface-Ink. */
.compendion-search .ccl-search__input {
	border-color: var(--wp--preset--color--primary);
	background-color: var(--wp--preset--color--surface);
	color: var(--compendion-color-on-surface, var(--wp--preset--color--contrast));
}

.compendion-search .ccl-search__input::placeholder {
	color: var(--c-on-surface-muted, var(--compendion-color-on-surface, var(--wp--preset--color--contrast)));
	opacity: 1;
}

.compendion-search .ccl-search__input:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.compendion-search .ccl-search__clear {
	color: var(--compendion-color-on-surface, var(--wp--preset--color--contrast));
}

.compendion-search .ccl-search__clear:hover,
.compendion-search .ccl-search__clear:focus-visible {
	background: color-mix( in srgb, var(--compendion-color-on-surface, var(--wp--preset--color--contrast)) 12%, transparent );
}

/* Bug (Arne 2026-08-28): natives WebKit-Clear-"×" von `input[type=search]`
 * kollidierte mit dem eigenen `.ccl-search__clear`-Button — zwei ×-Icons
 * nebeneinander sobald Text im Feld steht. Nativen Cancel-Button
 * unterdruecken, eigener Button bleibt die einzige Loesch-Aktion. Scoped
 * auf `.compendion-search`, damit Fundus/Anderswo (dieselbe `.ccl-search__
 * input`-Klasse, aber ohne eigenen Clear-Button-Konflikt) unangetastet
 * bleiben. */
.compendion-search .ccl-search__input::-webkit-search-cancel-button,
.compendion-search .ccl-search__input::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}

/* Ergebnisliste: eigene, breitere Spalte (Arne 2026-08-28 — Zeilenlaenge in
 * den Trefferkarten war bei 720px noch als "zu breit" empfunden worden;
 * 850px ist Arnes expliziter Zielwert, unabhaengig von Suchfeld/Pillen).
 * Seit Lauf 10f traegt das surface-Panel die Breite; Status + Liste fuellen
 * es. Re-Base der Dark-Mode-Akzent-Ink im Panel-Scope (Muster
 * .compendion-projekt-card): der Link-/Heading-Recolor von compendion-dark.css
 * loest `--c-on-base-accent` auf, der "Grund" ist hier aber surface. */
.compendion-search .cs-panel {
	width: 100%;
	max-width: 850px;
	margin-inline: auto;
	padding: 1rem;
	border-radius: 1rem;
	background: var(--wp--preset--color--surface);
	color: var(--compendion-color-on-surface, var(--wp--preset--color--contrast));
	--c-on-base-accent: var(--c-on-surface-overlay, var(--compendion-color-on-surface, var(--wp--preset--color--contrast)));
}

.compendion-search .cs-panel[hidden] {
	display: none;
}

/* Pillen-Zeile + Sortierung nebeneinander (scoped, damit die anderen
 * Cardlist-Seiten ohne Sortier-Feld unangetastet bleiben). */
.compendion-search .ccl-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}

.compendion-search .ccl-pills {
	flex: 1 1 auto;
}

.cs-sort-field {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex: 0 0 auto;
}

.cs-sort-label {
	font-size: 0.8rem;
	color: var(--compendion-color-on-base-muted, var(--wp--preset--color--muted));
	white-space: nowrap;
}

.cs-sort {
	padding: 0.35rem 1rem;
	border: 1px solid var(--ccl-entry-border);
	border-radius: 999px;
	background-color: var(--wp--preset--color--base);
	color: var(--compendion-color-on-base, var(--wp--preset--color--contrast));
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
}

.cs-sort:focus-visible {
	outline: 2px solid var(--ccl-badge-bg);
	outline-offset: 2px;
}

.cs-results {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

/* Karte = das <li> (seit dem Transkript-Link, 2026-09-04: zwei Links in
 * einer Karte, kein <a> im <a>). Overlay auf der surface-Panelflaeche
 * (Paar-Tabelle der Kontrastkonvention: Overlay auf surface → Ink
 * `--c-on-surface-overlay`); Show-Farbe nur als 4px-Balken links (Lauf 10f).
 * Gemischt wird mit der on-surface-Ink, NICHT mit rohem `contrast`: auf der
 * Dachmarke ist contrast = surface (#181816), ein contrast-Overlay hebt dort
 * gar nichts ab (gemessen 2026-09-04); on-surface kontrastiert per
 * Definition gegen surface. */
.cs-hit {
	margin: 0;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--ccl-entry-border);
	border-left: 4px solid var(--wp--preset--color--primary);
	border-radius: 0.75rem;
	background: color-mix( in srgb, var(--compendion-color-on-surface, var(--wp--preset--color--contrast)) 7%, transparent );
	color: var(--c-on-surface-overlay, var(--compendion-color-on-surface, var(--wp--preset--color--contrast)));
	transition: background-color 150ms ease, border-color 150ms ease;
}

.cs-hit:hover,
.cs-hit:focus-within {
	background: color-mix( in srgb, var(--compendion-color-on-surface, var(--wp--preset--color--contrast)) 12%, transparent );
	border-color: var(--wp--preset--color--primary);
}

/* Hauptlink der Karte: Bild + Text, Farbe erbt von der Karte. */
.cs-hit__link {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 0.85rem 1rem;
	color: inherit;
	text-decoration: none;
	border-radius: 0.75rem;
}

.cs-hit__link:focus-visible,
.cs-hit__transcript:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: -2px;
}

/* Zweiter Link der zusammengefuehrten Karte (Lauf 10e): fuehrt mit
 * `?transkript=<Suchwort>` direkt ins Player-Transkript. */
.cs-hit__transcript {
	display: block;
	margin: 0 1rem 0.85rem;
	padding-top: 0.45rem;
	border-top: 1px solid var(--ccl-entry-border);
	color: var(--c-on-surface-overlay-muted, var(--c-on-surface-muted));
	font-size: 0.9rem;
	line-height: 1.5;
	text-decoration: none;
}

.cs-hit__transcript:hover .cs-hit__transcript-label,
.cs-hit__transcript:focus-visible .cs-hit__transcript-label {
	text-decoration: underline;
}

/* Bild-/Icon-Block je Treffer (Lauf 4, Punkt 4d). Typ-Differenzierung
 * ueber die FORM (Groesse/Seitenverhaeltnis/Radius je Modifier), nicht
 * nur ueber die Text-Badge. Feste Maße verhindern Layout-Sprung beim
 * Nachladen des Bildes. Avatare bleiben eckig-mit-Radius statt rund
 * (feedback_avatare_quadratisch — netzweite Regel, keine Kreise). */
.cs-hit__media {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: color-mix( in srgb, currentColor 8%, transparent );
	border: 1px solid var(--ccl-entry-border);
}

.cs-hit__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cs-hit__icon {
	width: 55%;
	height: 55%;
	color: var(--c-on-surface-overlay-muted, var(--c-on-surface-muted));
}

/* Episode/Transkript: quadratisches Cover links, kleiner Radius. */
.cs-hit__media--episode,
.cs-hit__media--transkript {
	width: 64px;
	height: 64px;
	border-radius: 0.375rem;
}

/* Mitwirkende: so gross wie das Show-Cover (Arne, Lauf 5/5b — Gesichter
 * sollen genauso praesent sein wie Show-Cover), groesserer Radius als
 * Episode — bewusst NICHT rund (netzweite Avatar-Regel). Unterscheidet
 * sich von Episode ueber Radius + Kontext (Typ-Badge „Mitwirkende"). */
.cs-hit__media--contributor {
	width: 88px;
	height: 88px;
	border-radius: 0.9rem;
}

/* Show: groesseres Cover — der Snippet-Text darunter dient als
 * "Untertitel" (Dispatch-Auftrag 4d). */
.cs-hit__media--show {
	width: 88px;
	height: 88px;
	border-radius: 0.75rem;
}

/* Artikel/Seiten: dasselbe kleine Quadrat wie Episoden (Lauf 10d) — die
 * Quelle ist meist das quadratische Show-Cover, das im Querformat
 * angeschnitten wurde. Querformat NUR mit echtem, breiterem Beitragsbild
 * (Backend-Flag `cover_landscape` → Modifier `--landscape`). */
.cs-hit__media--post,
.cs-hit__media--page {
	width: 64px;
	height: 64px;
	border-radius: 0.375rem;
}

.cs-hit__media--landscape {
	width: 96px;
	height: 64px;
}

.cs-hit__body {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	min-width: 0;
}

.cs-hit__meta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.75rem;
}

/* Badge + Treffer-Markierung: Rollen-Paar primary/on-primary, keine
 * Handausnahme mehr (Lauf 11, 2026-09-04). Die Ink-Wahl in site-palette.php
 * laeuft seit dem auf APCA: auf DML-Magenta (#EE01B3) kommt Weiss von selbst
 * (69,8 Lc gegen Schwarz 39,1). Die Lauf-10-Ausnahme (`base`/`on-base`
 * erzwungen) ist damit hinfaellig. Auf Sites mit dunklem primary ist die
 * Pille im Dark Mode weiterhin sichtbar, weil primary dort unveraendert
 * bleibt (Entscheidung J). */
.cs-hit__type-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.15rem 0.6rem;
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: 999px;
	background: var(--compendion-color-primary-fill, var(--wp--preset--color--primary));
	color: var(--compendion-color-on-primary, var(--wp--preset--color--base));
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size: 0.7rem;
}

.cs-hit__site {
	color: var(--c-on-surface-overlay-muted, var(--c-on-surface-muted));
}

.cs-hit__title {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.3;
	color: inherit;
}

/* Dark-Mode-Heading-Recolor (`:where(h1,h2,h3)` → base-Akzent) greift auch
 * Karten-Titel auf surface — mode-scoped explizit auf die Karten-Ink
 * zuruecksetzen (feedback_contrast_convention, Update 2026-06-24). */
@media (prefers-color-scheme: dark) {
	html:not([data-color-scheme="light"]) .cs-hit__title {
		color: inherit;
	}
}

html[data-color-scheme="dark"] .cs-hit__title {
	color: inherit;
}

.cs-hit__snippet {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--c-on-surface-overlay-muted, var(--c-on-surface-muted));
}

.cs-hit__transcript-label {
	font-weight: 600;
	color: var(--c-on-surface-overlay, var(--compendion-color-on-surface, var(--wp--preset--color--contrast)));
}

.cs-hit__mark {
	background: var(--compendion-color-primary-fill, var(--wp--preset--color--primary));
	color: var(--compendion-color-on-primary, var(--wp--preset--color--base));
	padding: 0 0.15em;
	border-radius: 0.2em;
	font-style: normal;
	font-weight: 700;
}

/* „Mehr anzeigen" (naechste Seite) — Pille auf der surface-Panelflaeche,
 * Show-Farbe als Rand, Ink = on-surface. */
.cs-more {
	display: block;
	margin: 1rem auto 0;
	padding: 0.5rem 1.4rem;
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: 999px;
	background: transparent;
	color: var(--compendion-color-on-surface, var(--wp--preset--color--contrast));
	font: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
}

.cs-more:hover,
.cs-more:focus-visible {
	background: color-mix( in srgb, var(--compendion-color-on-surface, var(--wp--preset--color--contrast)) 12%, transparent );
	outline: none;
}

.cs-more:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.cs-more[hidden] {
	display: none;
}

.cs-status {
	margin: 0 0 0.75rem;
	font-size: 0.9rem;
	color: var(--compendion-color-on-surface-muted, var(--c-on-surface-muted));
}

.cs-status:empty {
	display: none;
}

.cs-status[data-cs-state="loading"]::before {
	content: "";
	display: inline-block;
	width: 0.9rem;
	height: 0.9rem;
	margin-right: 0.4rem;
	vertical-align: -0.15em;
	border: 2px solid var(--ccl-section-line);
	border-top-color: var(--wp--preset--color--primary);
	border-radius: 50%;
	animation: ccl-spin 0.8s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
	.cs-status[data-cs-state="loading"]::before { animation-duration: 2.4s; }
}

.cs-noscript {
	color: var(--compendion-color-on-base-muted, var(--wp--preset--color--muted));
}

@media (max-width: 599px) {
	.compendion-search .cs-panel { padding: 0.6rem; border-radius: 0.75rem; }

	.cs-hit__link { padding: 0.7rem 0.85rem; gap: 0.6rem; }

	.cs-hit__transcript { margin: 0 0.85rem 0.7rem; }

	.cs-hit__media--episode,
	.cs-hit__media--transkript {
		width: 52px;
		height: 52px;
	}

	/* Mitwirkende bleiben auch mobil so gross wie das Show-Cover
	 * (Groessen-Paritaet aus Lauf 5/5b haelt ueber alle Breakpoints). */
	.cs-hit__media--show,
	.cs-hit__media--contributor {
		width: 64px;
		height: 64px;
	}

	.cs-hit__media--post,
	.cs-hit__media--page {
		width: 52px;
		height: 52px;
	}

	.cs-hit__media--landscape {
		width: 76px;
		height: 52px;
	}
}