/*
 * faehigkeiten.css — Nachschlagewerk und Fähigkeits-Blatt.
 *
 * Ausschliesslich Design-Tokens aus `querschnitt/design/tokens.css`;
 * keine Hexfarbe, kein freier Pixelwert (→ BAUANLEITUNG §6). Die Fase,
 * die Kanten und die Bewegung kommen aus den Bauteilen `.tafel`,
 * `.knopf`, `.marke`, `.umschalter`, `.leerzustand`, `.overlay`.
 *
 * Gliederung:
 *   1. Ansicht (Rahmen, Kopf, Einleitung)
 *   2. Werkzeugleiste (Suche, Filter, Trefferzahl)
 *   3. Liste + Eintrag
 *   4. Fähigkeits-Blatt (Overlay)
 */

/* ==================================================================
 * 1. Ansicht
 * ================================================================== */

/*
 * Lokale Ergänzung: `tokens.css` kennt Linien-FARBEN, aber keine
 * Linien-BREITE. Statt querschnitt anzufassen, steht die Haarlinie hier
 * als Modul-Token — dann bleibt der eine Wert an einer Stelle.
 */
.nachschlagewerk,
.faehigkeitsblatt__overlay {
	--haarlinie: 1px;
}

.nachschlagewerk {
	display: flex;
	flex-direction: column;
	gap: var(--raum-5);
	width: min(96rem, 100%);
	margin-inline: auto;
	padding: var(--raum-5) var(--raum-5) var(--raum-8);
}

.nachschlagewerk__kopf {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: end;
	gap: var(--raum-3) var(--raum-5);
}

.nachschlagewerk__zurueck {
	align-self: center;
}

.nachschlagewerk__titelzeile {
	display: grid;
	gap: var(--raum-1);
}

.nachschlagewerk__oberzeile {
	color: var(--plasma);
}

.nachschlagewerk__titel {
	font-size: var(--grad-riese);
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
}

/* Die Herkunft der Daten gehört sichtbar dazu — es sind fremde Texte. */
.nachschlagewerk__quelle {
	align-self: center;
	max-width: 16rem;
	text-align: right;
	line-height: 1.4;
}

.nachschlagewerk__einleitung-inhalt {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr));
	align-items: start;
	gap: var(--raum-3) var(--raum-6);
	padding-left: var(--raum-6);
}

.nachschlagewerk__einleitung-etikett {
	grid-column: 1 / -1;
}

/* Signal-Streifen: das hier sind Regeln, kein Vorwort. */
.nachschlagewerk__einleitung::after {
	content: "";
	position: absolute;
	top: var(--schnitt);
	bottom: 0;
	left: 0;
	width: var(--kante);
	background: linear-gradient(to bottom, var(--signal), var(--signal-tief));
	box-shadow: 0 0 var(--raum-4) color-mix(in srgb, var(--signal) 55%, transparent);
	pointer-events: none;
}

.nachschlagewerk__einleitung-etikett {
	color: var(--signal);
}

.nachschlagewerk__einleitung p:not(.etikett) {
	color: var(--text-leise);
	font-size: var(--grad-klein);
	max-width: 78ch;
}

/* ==================================================================
 * 2. Werkzeugleiste — bleibt beim Blättern oben stehen
 * ================================================================== */
.nachschlagewerk__werkzeug {
	position: sticky;
	top: 0;
	z-index: var(--ebene-klebrig);
	display: grid;
	grid-template-columns: minmax(16rem, 32rem) 1fr;
	grid-template-areas:
		"suche zaehler"
		"filter filter";
	align-items: center;
	gap: var(--raum-3) var(--raum-4);
	padding: var(--raum-3) 0;
	background: color-mix(in srgb, var(--tiefe-grund) 88%, transparent);
	backdrop-filter: blur(var(--raum-2));
}

/* Haarlinie als Abschluss, die nach aussen ausläuft */
.nachschlagewerk__werkzeug::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: var(--kante-gross);
	background: linear-gradient(to bottom, var(--linie-still), transparent);
	pointer-events: none;
}

.nachschlagewerk__suche {
	grid-area: suche;
	position: relative;
}

.nachschlagewerk__filter {
	grid-area: filter;
}

.nachschlagewerk__filterknopf {
	display: inline-flex;
	align-items: center;
	gap: var(--raum-2);
	min-height: var(--griff); /* Fingerfläche, → BAUANLEITUNG §7 */
}

.nachschlagewerk__filterzahl {
	padding-left: var(--raum-2);
	border-left: var(--haarlinie) solid currentcolor;
	color: var(--text-still);
	font-size: var(--grad-winzig);
	opacity: 0.7;
}

.nachschlagewerk__filterknopf[aria-pressed="true"] .nachschlagewerk__filterzahl {
	color: var(--signal-hell);
	opacity: 1;
}

.nachschlagewerk__zaehler {
	grid-area: zaehler;
	justify-self: end;
	color: var(--text-leise);
	white-space: nowrap;
}

.nachschlagewerk__fehlertext {
	font-family: var(--schrift-zahl);
	font-size: var(--grad-winzig);
	color: var(--blut);
}

/* Schmalere Tablets: Kopfzeile verschlanken, Zähler unter die Suche */
@media (width < 62rem) {
	.nachschlagewerk__kopf {
		grid-template-columns: auto 1fr;
	}

	.nachschlagewerk__quelle {
		display: none;
	}

	.nachschlagewerk__werkzeug {
		grid-template-columns: 1fr;
		grid-template-areas:
			"suche"
			"filter"
			"zaehler";
	}

	.nachschlagewerk__zaehler {
		justify-self: start;
	}
}

/* ==================================================================
 * 3. Liste + Eintrag
 * ================================================================== */
.nachschlagewerk__liste {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
	gap: var(--raum-4);
	padding: 0;
	list-style: none;
}

.faehigkeit {
	--kategorie-farbe: var(--linie-wach);

	transition:
		transform var(--zeit-normal) var(--kurve-aus),
		background var(--zeit-normal) var(--kurve-aus),
		filter var(--zeit-normal) var(--kurve-aus);
}

/* Kategorie-Streifen links — die einzige feste Farbcodierung der Ansicht.
 * Sie steht nie allein: dieselbe Kategorie steht als Marke daneben. */
.faehigkeit::after {
	content: "";
	position: absolute;
	top: var(--schnitt);
	bottom: 0;
	left: 0;
	width: var(--kante);
	background: var(--kategorie-farbe);
	box-shadow: 0 0 var(--raum-3) color-mix(in srgb, var(--kategorie-farbe) 60%, transparent);
	pointer-events: none;
}

/* Eine Farbe je Kategorie — dieselbe Zuordnung in Liste und Blatt. */
.faehigkeit[data-kategorie="kampf"],
.faehigkeitsblatt__kategorie[data-kategorie="kampf"] {
	--kategorie-farbe: var(--blut);
}

.faehigkeit[data-kategorie="verteidigung"],
.faehigkeitsblatt__kategorie[data-kategorie="verteidigung"] {
	--kategorie-farbe: var(--stufe-blau);
}

.faehigkeit[data-kategorie="bewegung"],
.faehigkeitsblatt__kategorie[data-kategorie="bewegung"] {
	--kategorie-farbe: var(--plasma);
}

.faehigkeit[data-kategorie="ausruestung"],
.faehigkeitsblatt__kategorie[data-kategorie="ausruestung"] {
	--kategorie-farbe: var(--stufe-gelb);
}

.faehigkeit[data-kategorie="unterstuetzung"],
.faehigkeitsblatt__kategorie[data-kategorie="unterstuetzung"] {
	--kategorie-farbe: var(--gift);
}

.faehigkeit[data-kategorie="sonstiges"],
.faehigkeitsblatt__kategorie[data-kategorie="sonstiges"] {
	--kategorie-farbe: var(--signal);
}

.faehigkeit:hover {
	/* -2px: die halbe kleinste Rastereinheit — angehoben, nicht gesprungen */
	transform: translateY(calc(var(--raum-1) / -2));
	background: var(--plasma);
	filter: drop-shadow(0 0 var(--raum-4) color-mix(in srgb, var(--plasma) 35%, transparent));
}

/* Die Einträge einer Reihe sind gleich hoch (Rasterdisziplin); der
 * Original-Schalter sitzt deshalb immer unten bündig. */
.faehigkeit__inhalt {
	display: flex;
	flex-direction: column;
	gap: var(--raum-3);
	height: 100%;
	padding: var(--raum-4) var(--raum-4) var(--raum-4) var(--raum-5);
}

.faehigkeit__original {
	margin-top: auto;
}

.faehigkeit__kopf {
	display: flex;
	align-items: start;
	justify-content: space-between;
	gap: var(--raum-3);
}

.faehigkeit__namen {
	display: grid;
	gap: var(--raum-1);
	min-width: 0;
}

.faehigkeit__name {
	font-family: var(--schrift-display);
	font-size: var(--grad-gross);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: var(--laufweite-titel);
	color: var(--text);
	overflow-wrap: anywhere;
}

.faehigkeit__name-de {
	font-size: var(--grad-klein);
	line-height: 1.3;
	color: var(--text-leise);
}

.faehigkeit__marken {
	display: flex;
	flex-wrap: wrap;
	justify-content: end;
	gap: var(--raum-1);
	flex: none;
	max-width: 40%;
}

/* Die Marke erbt die Kategorie-Farbe vom Eintrag; im Blatt bringt sie
 * ihre eigene mit (dort gibt es keinen Eintrag darüber). */
.faehigkeitsblatt__kategorie {
	--kategorie-farbe: var(--linie-wach);
}

.faehigkeit__kategorie,
.faehigkeitsblatt__kategorie {
	border-color: color-mix(in srgb, var(--kategorie-farbe) 55%, transparent);
	background: color-mix(in srgb, var(--kategorie-farbe) 12%, transparent);
	color: var(--kategorie-farbe);
}

.faehigkeit__text {
	font-size: var(--grad-klein);
	line-height: 1.6;
	color: var(--text);
	max-width: none;
}

.faehigkeit__hinweis {
	padding: var(--raum-2) var(--raum-3);
	border-left: var(--kante) solid var(--plasma-tief);
	background: color-mix(in srgb, var(--plasma) 6%, transparent);
	color: var(--text-leise);
	font-size: var(--grad-winzig);
	line-height: 1.45;
	max-width: none;
}

/* ------------------------------------------------------------------
 * Ausklappbares Original — als Leiste, nicht als Browser-Dreieck
 * ------------------------------------------------------------------ */
.faehigkeit__original,
.faehigkeitsblatt__original {
	padding-top: var(--raum-1);
	background-image: linear-gradient(to right, var(--linie-wach), transparent 70%);
	background-size: 100% var(--haarlinie);
	background-repeat: no-repeat;
}

.faehigkeit__original-schalter,
.faehigkeitsblatt__original-schalter {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--raum-2);
	min-height: var(--griff);
	list-style: none;
	cursor: pointer;
	font-family: var(--schrift-display);
	font-size: var(--grad-winzig);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--laufweite-etikett);
	color: var(--text-still);
	transition: color var(--zeit-flink) var(--kurve-aus);
}

.faehigkeit__original-schalter::-webkit-details-marker,
.faehigkeitsblatt__original-schalter::-webkit-details-marker {
	display: none;
}

/* Eigener Winkel statt Default-Dreieck */
.faehigkeit__original-schalter::after,
.faehigkeitsblatt__original-schalter::after {
	content: "";
	width: 0.5em;
	height: 0.5em;
	border-right: 0.12em solid currentcolor;
	border-bottom: 0.12em solid currentcolor;
	transform: rotate(45deg) translate(-0.1em, -0.1em);
	transition: transform var(--zeit-normal) var(--kurve-aus);
}

.faehigkeit__original[open] > .faehigkeit__original-schalter::after,
.faehigkeitsblatt__original[open] > .faehigkeitsblatt__original-schalter::after {
	transform: rotate(-135deg) translate(-0.1em, -0.1em);
}

.faehigkeit__original-schalter:hover,
.faehigkeit__original[open] > .faehigkeit__original-schalter,
.faehigkeitsblatt__original-schalter:hover,
.faehigkeitsblatt__original[open] > .faehigkeitsblatt__original-schalter {
	color: var(--plasma);
}

.faehigkeit__original-text,
.faehigkeitsblatt__original-text {
	padding: 0 0 var(--raum-2) var(--raum-3);
	border-left: var(--kante) solid var(--linie);
	font-size: var(--grad-winzig);
	line-height: 1.55;
	color: var(--text-leise);
	max-width: none;
	animation: einblenden var(--zeit-normal) var(--kurve-aus);
}

/* ------------------------------------------------------------------
 * Ladeplatzhalter
 * ------------------------------------------------------------------ */
.nachschlagewerk__skelett .faehigkeit__inhalt {
	gap: var(--raum-2);
}

.nachschlagewerk__balken {
	display: block;
	height: var(--raum-3);
	width: 100%;
}

.nachschlagewerk__balken--titel {
	height: var(--raum-5);
	width: 60%;
	margin-bottom: var(--raum-2);
}

.nachschlagewerk__balken--kurz {
	width: 35%;
	margin-bottom: var(--raum-3);
}

/* ==================================================================
 * 4. Fähigkeits-Blatt (Overlay)
 * ================================================================== */
.faehigkeitsblatt__titelzeile {
	display: grid;
	gap: var(--raum-1);
	min-width: 0;
}

.faehigkeitsblatt__titelzeile .etikett {
	color: var(--plasma);
}

.faehigkeitsblatt__kartentext {
	font-family: var(--schrift-display);
	font-size: var(--grad-gross);
	font-weight: 700;
	letter-spacing: var(--laufweite-titel);
	overflow-wrap: anywhere;
}

.faehigkeitsblatt__schliessen {
	flex: none;
}

.faehigkeitsblatt__inhalt {
	padding: var(--raum-5);
}

.faehigkeitsblatt__erklaerung {
	display: grid;
	gap: var(--raum-4);
}

.faehigkeitsblatt__marken {
	display: flex;
	flex-wrap: wrap;
	gap: var(--raum-2);
}

.faehigkeitsblatt__namen {
	display: grid;
	gap: var(--raum-1);
}

.faehigkeitsblatt__name-en {
	font-family: var(--schrift-display);
	font-size: var(--grad-titel);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: var(--laufweite-titel);
}

.faehigkeitsblatt__name-de {
	font-size: var(--grad-normal);
	color: var(--text-leise);
}

.faehigkeitsblatt__text {
	font-size: var(--grad-normal);
	line-height: 1.65;
	max-width: 62ch;
}

.faehigkeitsblatt__hinweis {
	padding: var(--raum-3) var(--raum-4);
	border-left: var(--kante) solid var(--plasma-tief);
	background: color-mix(in srgb, var(--plasma) 8%, transparent);
	color: var(--plasma-hell);
	font-size: var(--grad-klein);
	max-width: none;
}

.faehigkeitsblatt__original-inhalt {
	display: grid;
	gap: var(--raum-1);
	padding-bottom: var(--raum-2);
}

.faehigkeitsblatt__original-name {
	padding-left: var(--raum-3);
	border-left: var(--kante) solid var(--linie);
	font-family: var(--schrift-display);
	font-size: var(--grad-klein);
	font-weight: 600;
	color: var(--text-leise);
}

.faehigkeitsblatt__rohtext {
	font-family: var(--schrift-zahl);
	font-size: var(--grad-klein);
	color: var(--plasma-hell);
}

.faehigkeitsblatt__ratlos-rat {
	font-size: var(--grad-klein);
	max-width: 46ch;
}

.faehigkeitsblatt__fuss {
	display: flex;
	justify-content: end;
	padding: 0 var(--raum-5) var(--raum-5);
}