/**
 * Compendion Catalog — geteilte Basis für DML-Retro-Katalog + Serienguide.
 *
 * Hier liegt das STRUKTURELLE Skelett der Steuer-Komponenten, das beide Kataloge
 * teilen: Toolbar-3-Ebenen, Segmented Control, lose Filter-Pill, Suchfeld,
 * Fortschrittsbalken, Badge-Basis. DML Retro ist die Referenz — die Default-Werte
 * hier sind Retros Werte (`crk`). Eine Domäne, die abweicht, setzt die wenigen
 * `--cmp-*`-Skin-Variablen auf ihrem Wurzel-Scope (so macht es der Serienguide auf
 * `.csg`, um seine bisherige Optik pixelgenau zu behalten). Domänen-Spezifisches
 * (Farben, Akzente, Scrubber, Serien-Abschnitte) bleibt in den Domänen-Dateien.
 *
 * Geladen VOR den Domänen-CSS (Dependency), damit Domänen-Regeln überschreiben
 * können. Die Elemente tragen die `cmp-*`-Klassen ADDITIV neben ihren `crk-`/`csg-`-
 * Klassen (JS-Hooks + Domänen-Anker bleiben unangetastet).
 *
 * @package Compendion_WP_Theme
 */

/* === Toolbar: 3 Ebenen (Suche → Filter → Steuerung) ===================== */

/* Ebene 1 (Suche oben) + allgemeine Leiste: Pillgruppen/Suche nebeneinander,
 * brechen auf schmalen Screens sauber um. */
.cmp-cat__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1rem;
}

/* Ebene 2 — Filter (lose Pillgruppen). Retro stapelt vertikal; eine Domäne mit
 * horizontalen Filtern setzt `--cmp-cat-filters-dir: row` (+ -gap/-align). */
.cmp-cat__filters {
	display: flex;
	flex-direction: var( --cmp-cat-filters-dir, column );
	flex-wrap: wrap;
	gap: var( --cmp-cat-filters-gap, 0.55rem );
	align-items: var( --cmp-cat-filters-align, stretch );
}

/* Ebene 3 — Steuerung (Ansicht · Sortierung · Auf/Zuklappen) direkt über der
 * Liste, durch eine dezente Trennlinie von den Filtern abgesetzt. */
.cmp-cat__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: var( --cmp-cat-controls-align, center );
	justify-content: space-between;
	gap: var( --cmp-cat-controls-gap, 0.6rem 1rem );
	margin-block-start: var( --cmp-cat-controls-mt, 0 );
	padding-block-start: var( --cmp-cat-controls-pt, 0.85rem );
	border-top: 1px solid var( --cmp-cat-controls-rule, color-mix( in srgb, var(--wp--preset--color--contrast, #000) 13%, transparent ) );
}

/* === Sortier-Pfeil (Asc/Desc) an der aktiven Sortier-Pille ============== */

/* Ansicht + Sortierung sind lose Pills (`.cmp-pill`, s. u.) wie die Filter — kein
 * Segmented Control mehr (2026-06-16). Sortier-Pills tragen einen leeren Pfeil-Slot,
 * den das JS am AKTIVEN Pill mit ↑/↓ füllt; CSS blendet ihn an allen anderen aus. */
.cmp-cat__sort-arrow {
	display: none;
	margin-inline-start: 0.35em;
	font-size: 0.85em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.cmp-pill.is-active .cmp-cat__sort-arrow {
	display: inline-block;
}

.cmp-cat__sort-arrow:empty {
	margin-inline-start: 0;
}

/* === Lose Filter-Pill (Hardware/Status/Serie …) ========================= */

.cmp-pills {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
}

.cmp-pills__label {
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	opacity: 0.6;
	margin-right: 0.35rem;
}

.cmp-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.35rem 0.85rem;
	/* Inaktiv-Border parametrierbar: der Default leitet sich vom Seiten-`contrast`
	 * ab (= Retro, dessen Panel dunkel und contrast hell ist → sichtbar). Ein
	 * Katalog mit HELLEM Panel (z. B. SG auf GHU: surface-panel creme, contrast
	 * weiß → Border unsichtbar) setzt `--cmp-pill-border` auf seinen Panel-Ink,
	 * genau wie es DML für `--cmp-cat-controls-rule` tut. */
	border: 1px solid var( --cmp-pill-border, color-mix( in srgb, var(--wp--preset--color--contrast, #000) 25%, transparent ) );
	border-radius: var( --cmp-pill-radius, 999px );
	background: transparent;
	color: inherit;
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.cmp-pill:hover,
.cmp-pill:focus-visible {
	border-color: var( --cmp-pill-border-hover, color-mix( in srgb, var(--wp--preset--color--contrast, #000) 55%, transparent ) );
	outline: none;
}

/* Aktiv = solides Fill. Retro: contrast/base (mode-sicher). Akzent-Domänen
 * setzen `--cmp-pill-active-bg/-fg`. */
.cmp-pill.is-active {
	background: var( --cmp-pill-active-bg, var(--wp--preset--color--contrast) );
	color: var( --cmp-pill-active-fg, var(--wp--preset--color--base) );
	border-color: var( --cmp-pill-active-bg, var(--wp--preset--color--contrast) );
}

/* Reset-× pro Filtergruppe (sichtbar nur bei aktivem Filter, JS-getoggelt). */
.cmp-pills__reset {
	width: 1.6rem;
	height: 1.6rem;
	margin-left: 0.15rem;
	border: 1px solid color-mix( in srgb, var(--wp--preset--color--contrast, #000) 30%, transparent );
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font-size: 1.05rem;
	line-height: 1;
	opacity: 0.8;
	cursor: pointer;
}

.cmp-pills__reset:hover,
.cmp-pills__reset:focus-visible {
	opacity: 1;
	border-color: var(--wp--preset--color--contrast);
	outline: none;
}

.cmp-pills__reset[hidden] {
	display: none;
}

/* === Suchfeld + Clear-× ================================================= */

.cmp-search {
	position: relative;
	width: 100%;
}

.cmp-search__input {
	width: 100%;
	box-sizing: border-box;
	padding: var( --cmp-search-pad, 0.5rem 2.1rem 0.5rem 0.9rem );
	border: 1px solid var( --cmp-search-border, color-mix( in srgb, var(--wp--preset--color--contrast, #000) 35%, transparent ) );
	border-radius: var( --cmp-search-radius, 999px );
	background: var( --cmp-search-bg, color-mix( in srgb, var(--wp--preset--color--contrast, #000) 8%, transparent ) );
	color: inherit;
	font: inherit;
	font-size: var( --cmp-search-font, 0.95rem );
}

.cmp-search__input:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 1px;
}

/* Nur das Positions-Skelett ist geteilt — Größe/Radius/Opacity/Hover sind
 * domänenspezifisch (Retro: feste 1.5rem-Box mit Pill-Radius; SG: textgroßes ×).
 * Die Domänen-CSS skinnt `crk__search-clear`/`csg__search-clear` zusätzlich. */
.cmp-search__clear {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	appearance: none;
	border: 0;
	background: transparent;
	color: inherit;
	line-height: 1;
	padding: 0;
	cursor: pointer;
}

.cmp-search__clear[hidden] {
	display: none;
}

/* === Fortschrittsbalken ================================================= */

.cmp-progress {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 400;
	font-size: 0.8rem;
}

.cmp-progress__track {
	display: inline-block;
	width: clamp(4rem, 12vw, 7rem);
	height: 0.4rem;
	border-radius: 999px;
	background: color-mix( in srgb, currentColor 16%, transparent );
	overflow: hidden;
}

.cmp-progress__fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var( --cmp-progress-fill, currentColor );
}

.cmp-progress__label {
	opacity: 0.75;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* === Badge-Basis ======================================================== */

/* Schlankes Pillen-Chip-Skelett; Domänen färben es (Akzent/Status) und nutzen es
 * für „Als Nächstes"/Komplett-/Soon-Markierungen. */
.cmp-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	padding: 0.15em 0.5em;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
}

/* === Farbiger Filter-Punkt vor einer Pille (Legende/Wiedererkennung) ===== */

/* DML-Typ-Pills (Home Console = rot …) und Serienguide-Serie-Pills (TNG = blau …)
 * tragen `cmp-pill--dot` + `--cmp-pill-dot:<farbe>`; der Punkt ist ein `::before`
 * mit Kontrast-Ring (klar abgegrenzt auch auf farbigem Panel). */
.cmp-pill--dot::before {
	content: "";
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 999px;
	background: var( --cmp-pill-dot, currentColor );
	box-shadow: 0 0 0 1.5px color-mix( in srgb, var(--wp--preset--color--contrast, #000) 38%, transparent );
	flex: 0 0 auto;
}

/* === Katalog-Karte (Cover-Mosaik + Kompakt) — geteilt DML-Retro + Serienguide ==
 *
 * Die VIEW-UNABHÄNGIGE Karten-Optik: Card-Box (Panel + Akzent-Border-left +
 * Schatten), Kopf-Flex, 3:4-„Cover"-Container, Fortschritts-Overlay-Skelett,
 * Meta-Textspalte, Titel. Die Domäne setzt die Skin-Variablen (`--cmp-card-bg`,
 * `--cmp-card-ink`, `--cmp-accent`, `--cmp-hover-tint`; Defaults = DML-Retro-Werte)
 * und die ANSICHTS-DICHTE (Cover-Mosaik vs. Kompakt-Grid, Cover-Breite) auf ihrem
 * Scope. Klassen ADDITIV neben `crk-cart`/`csg-tile`. */

.cmp-cat-card {
	border-radius: 1rem;
	background: var( --cmp-card-bg, var(--compendion-color-surface-panel, #22151e) );
	color: var( --cmp-card-ink, var(--compendion-color-on-surface-panel, #ffffff) );
	border: 1px solid color-mix( in srgb, currentColor 14%, transparent );
	border-left: 4px solid var( --cmp-accent, var(--wp--preset--color--primary, #c00191) );
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.22);
	padding: 0.9rem 1rem;
	transition: box-shadow 0.15s, border-color 0.15s;
	cursor: pointer;
}

.cmp-cat-card[hidden] {
	display: none;
}

.cmp-cat-card[open] {
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.cmp-cat-card:hover {
	box-shadow:
		inset 0 0 0 999px var( --cmp-hover-tint, color-mix( in srgb, currentColor 6%, transparent ) ),
		0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Offene Drawer-Kachel: Kontrast-Outline + Akzent-Ring/Schatten. */
.cmp-cat-card.is-drawer-open {
	outline: 3px solid var(--wp--preset--color--contrast);
	outline-offset: 2px;
	box-shadow:
		0 0 0 2px var( --cmp-accent, var(--wp--preset--color--primary) ),
		0 8px 22px -6px color-mix( in srgb, var( --cmp-accent, var(--wp--preset--color--primary) ) 60%, transparent );
	position: relative;
	z-index: 1;
}

/* Kopf = <summary>, ohne nativen Marker. */
.cmp-cat-card__head {
	display: flex;
	gap: 0.85rem;
	align-items: center;
	margin: 0;
	cursor: pointer;
	list-style: none;
}

.cmp-cat-card__head::-webkit-details-marker {
	display: none;
}

.cmp-cat-card[open] > .cmp-cat-card__head {
	margin-bottom: 0.7rem;
}

/* „Cover"-Container: 3:4, Akzent-Hintergrund (Bild-Letterbox bzw. Farbfeld), runde
 * Ecken. Breite je Kontext (Kompakt 3.6rem, Cover 100%) — die Domäne setzt sie. */
.cmp-cat-card__cover {
	flex: 0 0 auto;
	position: relative;
	width: 3.6rem;
	aspect-ratio: 3 / 4;
	border-radius: 0.375rem;
	background: var( --cmp-accent, color-mix( in srgb, currentColor 12%, transparent ) );
	overflow: hidden;
}

/* Fortschritts-Overlay am unteren Cover-Rand — Basis ausgeblendet, die Domäne
 * blendet es in der Cover-Ansicht ein. */
.cmp-cat-card__cover-meta {
	display: none;
}

/* Meta = Textspalte (Titel + ggf. Untertitel/Fortschritt). */
.cmp-cat-card__meta {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.cmp-cat-card__title {
	margin: 0;
	font-size: 1.02rem;
	line-height: 1.25;
}