/**
 * Compendion Serienguide — Trek-Episoden-Uebersicht.
 *
 * Struktur an den Retro-Katalog angelehnt: dunkle Panel-Karten je Staffel
 * (surface-panel), Akzent aus Palette-Tokens, Segmented-Control fuer den
 * Staffel-Filter. Im Masterlist-Modus (LOG): offene Folgen gedaempft, die naechste
 * mit Akzent-Badge. Farben ausschliesslich ueber Tokens (--wp--preset--color--*
 * / --compendion-color-*). Pill 999px, Karte 1rem.
 *
 * @package Compendion_WP_Theme
 */

.csg {
	margin-block: 1.5rem;
	--csg-card-bg:   var(--compendion-color-surface-panel, #22151e);
	--csg-ink:       var(--compendion-color-on-surface-panel, #f4f1f2);
	--csg-accent:    var(--wp--preset--color--primary, #c00191);
	--csg-hover:     color-mix(in srgb, var(--csg-ink) 8%, transparent);
	--csg-hairline:  color-mix(in srgb, var(--csg-ink) 14%, transparent);

	/* Lose Filter-Pills (Status/Serie): Struktur + Maße folgen 1:1 Retro (geteilte
	 * `.cmp-pill`-Basis), nur die Farbe ist SG. Aktiv in der Serien-Akzentfarbe. */
	--cmp-pill-active-bg:    var(--csg-accent);
	--cmp-pill-active-fg:    var(--compendion-color-on-primary, var(--wp--preset--color--base, #fff));
	/* Inaktiv-Border am Panel-Ink statt am Seiten-`contrast` (Default der Basis):
	 * das SG-Toolbar-Panel kann hell sein (GHU surface-panel creme), wo contrast
	 * (weiß) verschwände. Gleiche 25 %/55 %-Stärke wie DML — nur die Farbe (Ink)
	 * weicht ab, alles andere bleibt pixelgleich. Muster wie `--cmp-cat-controls-rule`. */
	--cmp-pill-border:       color-mix( in srgb, var(--csg-ink) 25%, transparent );
	--cmp-pill-border-hover: color-mix( in srgb, var(--csg-ink) 55%, transparent );

	--cmp-search-radius:       0.5rem;
	--cmp-search-border:       var(--csg-hairline);
	--cmp-search-bg:           var(--csg-card-bg);
	--cmp-search-pad:          0.5rem 1.9rem 0.5rem 0.85rem;
	/* Schriftgröße erbt (wie bisher `font: inherit`) — NICHT über eine `--cmp-*`-
	 * Variable, weil ein CSS-Keyword als Custom-Property-Wert die Property selbst
	 * erben lässt statt den Wert zu speichern; siehe `.csg__search`-Regel unten. */

	--cmp-progress-fill: var(--csg-accent);

	/* Geteilte Katalog-Karte (`cmp-cat-card`, compendion-catalog.css): GHU-Skin.
	 * Akzent default = Primärfarbe; je Kachel inline `--cmp-accent` = Serienfarbe. */
	--cmp-card-bg:    var(--csg-card-bg);
	--cmp-card-ink:   var(--csg-ink);
	--cmp-accent:     var(--csg-accent);
	--cmp-hover-tint: var(--csg-hover);

	--cmp-cat-filters-dir:   row;
	--cmp-cat-filters-gap:   0.75rem 1.25rem;
	--cmp-cat-filters-align: flex-end;

	--cmp-cat-controls-gap:   0.75rem 1.25rem;
	--cmp-cat-controls-mt:    0.9rem;
	--cmp-cat-controls-pt:    0.9rem;
	--cmp-cat-controls-align: flex-end;
	--cmp-cat-controls-rule:  color-mix( in srgb, var(--csg-ink) 13%, transparent );
}

/* Lese-Spalte zentriert auf breiten Screens (folgt dem Retro-Muster). */
.csg__intro,
.csg__stats,
.csg__bar {
	max-width: 60rem;
	margin-inline: auto;
}

/* --- Intro -------------------------------------------------------------- */

.csg__intro {
	margin-block-end: 0.75rem;
}

.csg__intro-title {
	margin: 0 0 0.35rem;
	font-size: clamp(1.7rem, 4vw, 2.4rem);
	line-height: 1.15;
}

.csg__intro-text {
	margin: 0;
	max-width: 60ch;
	opacity: 0.88;
}

.csg__stats {
	margin: 0 0 1rem;
	font-size: 0.9rem;
	opacity: 0.78;
}

/* --- Steuerleiste ------------------------------------------------------- */

/* Toolbar-Container (Bar/Filter/Steuerung), lose Pills (`csg-pill`/`cmp-pill`,
 * inkl. Ansicht/Sortierung), Suchfeld und Fortschrittsbalken liegen jetzt in
 * compendion-catalog.css (`cmp-*`). Hier bleiben nur die Serienguide-Abweichungen
 * (Akzent-Aktiv, Panel-Suche) — als `--cmp-*`-Variablen oben am `.csg`-Scope. */

.csg__bar {
	margin-block-end: 1.25rem;
}

.csg__search-wrap {
	flex: 1 1 14rem;
}

/* Suchfeld erbt die Schriftgröße (Basis-Skin kommt aus `cmp-search__input`). */
.csg__search {
	font-size: inherit;
}

.csg__search::placeholder {
	color: var(--csg-ink);
	opacity: 0.55;
}

.csg :focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* --- Staffeln ----------------------------------------------------------- */

.csg__seasons {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.csg-season {
	background: var(--csg-card-bg);
	color: var(--csg-ink);
	border-radius: 1rem;
	border: 1px solid var(--csg-hairline);
	border-left: 4px solid var(--csg-accent);
	/* Tiefe wie DML `.crk-cart` — die Karte hebt sich satt vom Seiten-Hintergrund
	 * ab, statt als dünner Balken zu schweben. */
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.18);
	padding: 0.85rem 1.05rem;
	transition: box-shadow 0.15s, border-color 0.15s;
}

.csg-season[open] {
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.26);
}

/* Subtiler Hover auf der ganzen Karte (Muster DML `.crk-cart:hover`): leicht
 * angehobener Schatten, Akzent-Border bleibt intakt. */
.csg-season:hover {
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.26);
}

.csg-season[hidden] {
	display: none;
}

/* Staffel-Kopf = klickbares <summary>. Default-Disclosure-Marker weg, eigener
 * Chevron rechts (rotiert bei [open]). */
.csg-season__head {
	display: flex;
	align-items: center;
	gap: 0.6rem 0.9rem;
	flex-wrap: wrap;
	margin: 0;
	font-size: 1.15rem;
	cursor: pointer;
	list-style: none;
}

.csg-season__head::-webkit-details-marker {
	display: none;
}

.csg-season__title {
	font-weight: 700;
	font-size: 1.05rem;
}

/* Chevron als letztes Element (mr-auto schiebt ihn nach rechts). */
.csg-season__head::after {
	content: "";
	margin-inline-start: auto;
	width: 0.5rem;
	height: 0.5rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	opacity: 0.6;
	transition: transform 0.15s;
}

.csg-season[open] > .csg-season__head::after {
	transform: rotate(45deg);
}

.csg-season__head:hover {
	color: var(--csg-accent);
}

.csg-season__list {
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0;
	/* Folgen je Staffel fliessen in responsive CSS-Columns (Muster Retro-Katalog
	 * `.crk__list`): `column-width` schaltet je nach Breite 1–4 Spalten, break-
	 * inside-Schutz hält jede Zeile zusammen. Kompakt = schmalere Spalten (mehr),
	 * Detail = breitere (das Jahr braucht Platz) — s. View-Block weiter unten. */
	column-width: 19rem;
	column-gap: 1.5rem;
}

/* --- Folgen-Zeile ------------------------------------------------------- */

.csg-ep {
	display: grid;
	grid-template-columns: 4rem 1fr auto;
	align-items: baseline;
	gap: 0.3rem 0.6rem;
	padding: 0.28rem 0.4rem;
	border-radius: 0.5rem;
	border-top: 1px solid var(--csg-hairline);
	/* Zeile nie zwischen zwei Spalten zerreissen (gleiches Schutzmuster wie
	 * Retro `.crk-row`), greift im 2-Spalten-Modus auf breiten Screens. */
	break-inside: avoid;
}

.csg-ep:first-child {
	border-top: 0;
}

.csg-ep[hidden] {
	display: none;
}

.csg-ep:hover {
	background: var(--csg-hover);
}

.csg-ep__code {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	/* Panel-Ink statt Akzent: der Akzent (= primary) ist gegen den variablen
	 * surface-panel NICHT kontrast-sicher — auf der olivgrünen LOG-Palette kaum
	 * lesbar. Ink (on-surface-panel) liest auf jeder Palette; der Akzent lebt im
	 * Staffel-Rand + „nächste"-Badge weiter. */
	color: var(--csg-ink);
	white-space: nowrap;
}

/* Titel-Block: Haupttitel + gedaempfter Zweittitel untereinander. */
.csg-ep__titles {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.05rem;
}

.csg-ep__title {
	color: inherit;
	text-decoration: none;
	font-weight: 500;
}

a.csg-ep__title:hover {
	text-decoration: underline;
}

.csg-ep__title-alt {
	font-size: 0.8rem;
	opacity: 0.62;
}

/* Podcast-Episoden-Pille (rechts), Muster wie Retro `crk-game__ep`. */
.csg-ep__ep {
	align-self: center;
	font-size: 0.78rem;
	font-weight: 700;
	text-decoration: none;
	padding: 0.05rem 0.55rem;
	border-radius: 999px;
	color: inherit;
	white-space: nowrap;
	/* Etwas kräftigere Ink-Tönung, damit die Pille auch auf hellen Paletten als
	 * eigenständiges Element liest (Ink-Text auf Ink-Tint bleibt kontrast-sicher). */
	background: color-mix( in srgb, currentColor 18%, transparent );
}

a.csg-ep__ep:hover,
a.csg-ep__ep:focus-visible {
	background: var(--csg-accent);
	color: var(--wp--preset--color--contrast, #fff);
}

/* Keine Zeilen-Dämpfung: offene und besprochene Folgen erscheinen gleich stark
 * (Arne 2026-06-15). Der Unterschied liegt allein in Pille/Link (besprochen) bzw.
 * „nächste"-Badge (erste offene), nicht in der Opazität der Zeile. */

/* „nächste"-Badge (rechte Spalte, wo bei besprochenen Folgen die Pille sitzt):
 * Akzent-Füllung + on-primary-Text, damit der Einstiegspunkt klar heraussticht. */
.csg-ep__next {
	align-self: center;
	font-size: 0.68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 0.05rem 0.55rem;
	border-radius: 999px;
	white-space: nowrap;
	background: var(--csg-accent);
	color: var(--compendion-color-on-primary, var(--wp--preset--color--contrast, #fff));
}

.csg__noresults {
	margin-top: 1rem;
	opacity: 0.8;
}

/* Ruhiger Cross-Promo-Hinweis (kein Kasten): Hairline oben, gedämpft. */
.csg__promo {
	display: block;
	max-width: 60rem;
	margin: 2rem auto 0;
	padding-top: 1rem;
	border-top: 1px solid var(--csg-hairline);
	font-size: 0.92rem;
	line-height: 1.6;
	opacity: 0.82;
}

.csg__promo p {
	margin: 0;
	max-width: 65ch;
}

/* --- Multi-Serien-Katalog (GHU) ----------------------------------------- */

.csg__filtergroup {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

/* Staffel-Filtergruppe ist server-seitig ausgeblendet, bis JS sie nach
 * Serienauswahl füllt. `[hidden]` allein greift nicht gegen `display:flex`. */
.csg__filtergroup[hidden] {
	display: none;
}

/* Filtergruppen-Label exakt wie DML (`cmp-pills__label`): klein, fett, VERSAL. */
.csg__filter-label {
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	opacity: 0.6;
}

/* Panel-Umschaltung: Cover + Kompakt teilen das Staffel-Kachel-Panel, „Alle
 * Folgen" die flache Liste. `data-csg-view` am Root steuert die Sichtbarkeit;
 * No-JS-Default = Kompakt (Root trägt `compact`, Folgen-Panel server-seitig
 * `hidden`). In der Alle-Folgen-Ansicht überschreibt die Regel das `[hidden]`. */
.csg--multi[data-csg-view="episodes"] [data-csg-panel="seasons"] {
	display: none;
}

.csg--multi[data-csg-view="episodes"] [data-csg-panel="episodes"] {
	display: block;
}

/* --- Staffel-Kachel-Panel: geteilte `cmp-cat-card`-Basis + GHU-Spezifika ---
 * Card-Box/Cover/Meta/Titel kommen aus compendion-catalog.css (`cmp-cat-card`);
 * hier nur GHU-Eigenes: Cover-Text „TNG 4", Cover-Progress-Overlay, Serienfarbe
 * und die Ansichts-Dichte (Cover-Mosaik vs. Kompakt-Grid). */

/* Kompakt = horizontale Karten im mehrspaltigen Grid (Cover links, Meta rechts). */
.csg--multi[data-csg-view="compact"] .csg__seasons-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(22rem, 100%), 1fr));
	gap: 1rem;
	align-items: start;
}

/* Cover = dichtes Mosaik (Cover voll breit oben, Meta darunter), Maße wie DML. */
.csg--multi[data-csg-view="cover"] .csg__seasons-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(8.5rem, 100%), 1fr));
	gap: 0.7rem;
	align-items: stretch;
}

/* „TNG 4"-Text mittig im Cover-Feld (3:4 + Akzent-BG kommen aus
 * `cmp-cat-card__cover`). Weiß + Schatten liest auf den Serienfarben. */
.csg-tile__badge {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: #fff;
	font-weight: 800;
	letter-spacing: 0.01em;
	font-size: 0.95rem;
	line-height: 1.1;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

/* Fortschritts-Overlay am unteren Cover-Rand (DML `crk-cart__cover-meta`-Muster);
 * Einblendung nur in der Cover-Ansicht (s. u.). */
.csg-tile__cover-count {
	flex: 0 0 auto;
	font-size: 0.62rem;
	font-weight: 700;
	color: #fff;
	font-variant-numeric: tabular-nums;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}

.csg-tile__cover-bar {
	flex: 1 1 auto;
	height: 0.28rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.3);
	overflow: hidden;
}

.csg-tile__cover-fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: #fff;
}

.csg-tile__season {
	font-size: 0.8rem;
	opacity: 0.72;
	font-variant-numeric: tabular-nums;
}

.csg-tile__title {
	font-weight: 700;
	transition: color 0.15s;
}

/* Fortschrittsbalken füllt die Meta-Spaltenbreite (Kachel + Drawer). */
.csg-tile__body .csg-progress__track {
	width: 100%;
	height: 0.5rem;
}

/* Chevron rechts (nur Kompakt). */
.csg-tile__toggle {
	flex: 0 0 auto;
	margin-inline-start: auto;
	width: 0.55rem;
	height: 0.55rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	opacity: 0.55;
	transition: transform 0.15s;
}

.csg-tile[open] > .csg-tile__head .csg-tile__toggle {
	transform: rotate(45deg);
}

.csg-tile__head:hover .csg-tile__title {
	color: var(--cmp-accent);
}

.csg-tile__list {
	list-style: none;
	margin: 0;
	padding: 0;
	column-width: 19rem;
	column-gap: 1.5rem;
}

/* Fortschritts-Füllung trägt die Serienfarbe (Kachel + Drawer). */
.csg-tile .csg-progress__fill,
.csg-cover__inner .csg-progress__fill {
	background: var(--cmp-accent, var(--csg-accent));
}

/* Erstausstrahlungsjahr nur in der flachen Alle-Folgen-Liste. */
.csg-tile .csg-ep__year {
	display: none;
}

/* --- Cover-Mosaik: Karte vertikal, „Cover" voll breit, Detail über Drawer -- */

.csg--multi[data-csg-view="cover"] .csg-tile {
	padding: 0.55rem;
}

.csg--multi[data-csg-view="cover"] .csg-tile__head {
	flex-direction: column;
	align-items: stretch;
	gap: 0.45rem;
}

/* Cover voll breit oben; großes „TNG 4". */
.csg--multi[data-csg-view="cover"] .csg-tile__cover {
	width: 100%;
	border-radius: 0.5rem;
}

.csg--multi[data-csg-view="cover"] .csg-tile__badge {
	font-size: clamp(1.15rem, 6vw, 1.9rem);
}

/* Fortschritts-Overlay nur in der Cover-Ansicht einblenden (am Cover-Boden). */
.csg--multi[data-csg-view="cover"] .csg-tile__cover-meta {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 0.4rem 0.35rem 0.25rem;
	background: linear-gradient( to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0) );
	line-height: 1;
}

/* Unter dem Cover nur Serienname (2-zeilig geklemmt); „Staffel N", Chevron und der
 * Kompakt-Fortschritt entfallen (der Fortschritt steht im Cover-Overlay). */
.csg--multi[data-csg-view="cover"] .csg-tile__season,
.csg--multi[data-csg-view="cover"] .csg-tile__toggle,
.csg--multi[data-csg-view="cover"] .csg-tile__body .csg-progress {
	display: none;
}

.csg--multi[data-csg-view="cover"] .csg-tile__title {
	font-size: 0.82rem;
	line-height: 1.25;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Inline-Folgenliste im Cover-Mosaik verbergen (Drawer-Klon bleibt sichtbar). */
.csg--multi[data-csg-view="cover"] .csg-tile > .csg-tile__list {
	display: none;
}

/* --- Cover-Detail-Drawer (volle Grid-Zeile unter der Reihe) ------------- */

.csg-cover__drawer {
	grid-column: 1 / -1;
	overflow: hidden;
}

.csg-cover__inner {
	position: relative;
	background: var(--csg-card-bg);
	color: var(--csg-ink);
	border: 1px solid var(--csg-hairline);
	border-left: 4px solid var(--cmp-accent, var(--csg-accent));
	border-radius: 1rem;
	box-shadow: 0 4px 22px rgba(0, 0, 0, 0.3);
	padding: 1rem 1.15rem;
	margin-top: 0.4rem;
}

/* Caret-Dreieck zeigt auf die geklickte Kachel (JS setzt --csg-drawer-caret-left). */
.csg-cover__inner::before {
	content: "";
	position: absolute;
	top: -0.5rem;
	left: var(--csg-drawer-caret-left, 2rem);
	transform: translateX(-50%);
	border-inline: 0.5rem solid transparent;
	border-bottom: 0.5rem solid var(--csg-card-bg);
}

.csg-cover__drawer-head {
	display: flex;
	align-items: center;
	gap: 0.7rem 0.9rem;
	flex-wrap: wrap;
	margin-bottom: 0.75rem;
}

.csg-cover__inner .csg-tile__list {
	column-width: 22rem;
}

/* --- Mobil -------------------------------------------------------------- */

@media (max-width: 600px) {
	.csg-ep {
		grid-template-columns: 3.4rem 1fr auto;
	}

	.csg--detail .csg-ep {
		grid-template-columns: 3.4rem 1fr auto auto;
	}

	/* Cover-Mosaik auf dem Handy dichter (mehr Schilder pro Reihe). */
	.csg--multi[data-csg-view="cover"] .csg__seasons-grid {
		grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
		gap: 0.6rem;
	}

	/* Flache Folgen-Liste einspaltig (Serien-Badge schmaler). */
	.csg-row {
		grid-template-columns: 2.2rem 3.4rem 1fr auto auto;
	}
}

/* --- Fortschritt · Steuer-Panel · Ansicht · Reset (Feature-Runde 2026-06-16) --- */

/* Fortschrittsbalken-Basis (`csg-progress`/__track/__fill/__label) liegt in
 * compendion-catalog.css (`cmp-progress`); Füllfarbe via `--cmp-progress-fill`
 * oben am `.csg`-Scope. Hier nur die Serienguide-Varianten: */

/* Fortschrittsbalken-Breite der Kachel/Drawer steht oben im Kachel-Block
 * (`.csg-tile__body .csg-progress__track { width:100% }`) — füllt die Meta-Spalte. */

/* Steuer-Panel (surface-panel) hebt die Filter vom Seiten-Hintergrund ab
 * (palettenunabhängig, Muster wie Retro `.crk__toolbar`). */
.csg__toolbar {
	max-width: 60rem;
	box-sizing: border-box;
	margin: 0 auto 1.25rem;
	padding: 1rem 1.1rem;
	background: var(--csg-card-bg);
	color: var(--csg-ink);
	border: 1px solid color-mix( in srgb, var(--csg-ink) 14%, transparent );
	border-radius: 1rem;
}

/* --- DML-3-Ebenen-Steuerleiste: Suche → Filter → Steuerung -------------- */

/* Ebene 1 (Suche) nimmt im Panel die volle Breite, mit Abstand zu den Filtern. */
.csg__toolbar .csg__bar {
	max-width: none;
	margin: 0 0 0.85rem;
}

/* Ebenen 2 (Filter) + 3 (Steuerung) der 3-Ebenen-Toolbar liegen in
 * compendion-catalog.css (`cmp-cat__filters`/`cmp-cat__controls`); die
 * Serienguide-Abweichungen (row statt column, flex-end, Spacing, Trennlinie aus
 * `csg-ink`) kommen aus den `--cmp-cat-*`-Variablen oben am `.csg`-Scope. */

/* Auf/Zuklappen-Buttons rechts in der Steuerungs-Zeile. */
.csg__expand-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-inline-start: auto;
	align-self: center;
}

.csg__expand-all {
	appearance: none;
	font: inherit;
	font-size: 0.82rem;
	line-height: 1.2;
	padding: 0.35rem 0.7rem;
	border-radius: 0.5rem;
	border: 1px solid color-mix( in srgb, var(--wp--preset--color--contrast, #000) 30%, transparent );
	background: transparent;
	color: inherit;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
}

.csg__expand-all:hover,
.csg__expand-all:focus-visible {
	background: color-mix( in srgb, var(--wp--preset--color--contrast, #000) 10%, transparent );
	border-color: color-mix( in srgb, var(--wp--preset--color--contrast, #000) 45%, transparent );
}

/* Asc/Desc-Sortier-Pfeil (`cmp-cat__sort-arrow`) liegt in compendion-catalog.css:
 * leerer Slot je Sortier-Pille, nur an der aktiven Pille sichtbar, JS füllt ↑/↓. */

/* Komplett-Badge ✓ neben dem Fortschritts-Label (Staffel/Serie voll besprochen).
 * Trägt die Akzentfarbe (im Multi die Serien-Akzentfarbe via Vererbung), bold. */
.csg-complete {
	font-weight: 800;
	line-height: 1;
	color: var(--csg-accent);
}

.csg-tile .csg-complete,
.csg-cover__inner .csg-complete {
	color: var(--cmp-accent, var(--csg-accent));
}

/* Label-Zeile = Label + Reset-×. */
.csg__filter-labelrow {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

/* Reset-× pro Filtergruppe + Such-Lösch-×. */
.csg-group-reset,
.csg__search-clear {
	appearance: none;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
	line-height: 1;
	padding: 0;
	opacity: 0.6;
}

.csg-group-reset {
	font-size: 0.95rem;
}

.csg-group-reset:hover,
.csg-group-reset:focus-visible,
.csg__search-clear:hover,
.csg__search-clear:focus-visible {
	opacity: 1;
	color: var(--csg-accent);
}

.csg-group-reset[hidden],
.csg__search-clear[hidden] {
	display: none;
}

/* Such-Lösch-× im Eingabefeld rechts. Positions-Skelett kommt aus `cmp-search`/
 * `cmp-search__clear`; hier nur die Serienguide-Feinwerte (Abstand + Glyph-Größe).
 * Der Platz fürs × steckt im `--cmp-search-pad` (rechtes Padding). */
.csg__search-clear {
	right: 0.55rem;
	font-size: 1.15rem;
}

/* --- Ansicht: Kompakt (Default) / Detail -------------------------------- */

/* Erstausstrahlungsjahr: eigene rechtsbuendige Grid-Spalte ganz rechts, nur in
 * der Detail-Ansicht. In Kompakt `display:none` -> faellt aus dem Grid-Fluss,
 * die Zeile bleibt dreispaltig. */
.csg-ep__year {
	align-self: center;
	justify-self: end;
	text-align: right;
	font-size: 0.78rem;
	opacity: 0.6;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.csg--compact .csg-ep__year {
	display: none;
}

/* Detail-Ansicht: Zeile bekommt eine vierte Spalte fuers Jahr (Code · Titel ·
 * Pille · Jahr), und breitere Spalten, weil das Jahr Platz braucht. */
.csg--detail .csg-ep {
	grid-template-columns: 4rem 1fr auto auto;
}

.csg--detail .csg-season__list {
	column-width: 24rem;
}

/* Detail: Haupttitel etwas praesenter, Zweittitel bleibt klein/gedaempft. */
.csg--detail .csg-ep__title {
	font-size: 1rem;
}

/* --- Alle-Folgen-Ansicht: flache Liste (GHU) ---------------------------- */

/* Folgen fliessen in responsive CSS-Columns; Gruppenköpfe (Erstausstrahlung)
 * spannen über alle Spalten (Muster Retro `.crk__list`). */
.csg__episodes {
	list-style: none;
	margin: 0;
	padding: 0;
	column-width: 24rem;
	column-gap: 1.5rem;
}

.csg-row {
	display: grid;
	grid-template-columns: 2.6rem 4rem 1fr auto auto;
	align-items: baseline;
	gap: 0.3rem 0.6rem;
	padding: 0.3rem 0.4rem;
	border-radius: 0.5rem;
	border-top: 1px solid var(--csg-hairline);
	break-inside: avoid;
}

.csg-row[hidden] {
	display: none;
}

.csg-row:hover {
	background: var(--csg-hover);
}

/* Serien-Badge (welche Serie die Folge ist) — Akzent, kompakt. */
.csg-row__series {
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	color: var(--csg-accent);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* Gruppenkopf „CODE Staffel N" — nur bei Erstausstrahlung-Sort, volle Breite;
 * blendet sich aus, wenn alle Folgen darunter weggefiltert sind (JS). */
.csg-group__head {
	column-span: all;
	list-style: none;
	margin: 0.9rem 0 0.3rem;
	padding-bottom: 0.25rem;
	border-bottom: 1px solid var(--csg-hairline);
	font-size: 0.82rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	opacity: 0.85;
}

.csg-group__head:first-child {
	margin-top: 0;
}

.csg-group__head[hidden] {
	display: none;
}