/* 🪤 04.09.2026 Stempel-Heilung nach einem abgebrochenen Deploy -- die Begruendung steht in css/components/fenster.css. */
.tree-wrap {
	max-height: 30vh;
	overflow: auto;
	padding: 8px;
	background: var(--color-panel);
}

.tree-root,
.tree-root ul {
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.tree-root ul {
	margin-left: 12px;
	padding-left: 12px;
	border-left: 1px solid var(--border);
}

.tree-node {
	margin: 3px 0;
}

/* 💣 An `.tree-node` GEBUNDEN, und das muss so bleiben. Diese Datei ist in `index.html` direkt
   verlinkt (Z. 51), eine klassenlose `details > summary`-Regel gilt deshalb fuer JEDES <details>
   der ganzen Seite -- Hinweise-Fenster, Social-Hub, WikiSync-Listen, Postfach. Genau das war sie
   bis zum 12.08.2026, und am 11.08. hat sie den gesendeten Mails im Postfach Adressat, Betreff,
   Datum und Vorschau NEBENeinander in eine Zeile gelegt (behelfsweise behoben mit einer Gegenregel
   in `css/features/mail-inbox.css`, Commit b57210e0). Der Praefix ist die eigentliche Behebung.
   ⚠️ Nicht nur `display` haengt daran: `list-style: none` nimmt dem <summary> auch das
   Aufklapp-Dreieck. Wer die Bindung zurueckdreht, loescht es wieder ueberall auf der Seite.
   Bewacht von `js/app/__tests__/details-summary-scope.test.js`. */
.tree-node details > summary {
	display: flex;
	align-items: center;
	gap: 3px;
	cursor: pointer;
	list-style: none;
}

.tree-node details > summary::-webkit-details-marker {
	display: none;
}

.tree-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	flex: 0 0 16px;
	color: var(--muted);
}

.tree-toggle::before {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 6px solid currentColor;
	transition: transform 0.12s ease;
}

.tree-node details[open] > summary .tree-toggle::before {
	transform: rotate(90deg);
}

.tree-item {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	max-width: 100%;
	min-width: 0;
	padding: 7px 8px;
	/* 🔴 DIESELBE Karte wie .avm-row (css/components/editor-row.css). Hier stand `6px` -- ein Wert,
	   den die Radienskala gar nicht kennt (sm 5, md 8, lg 10), und damit die zweite Kartenform im
	   Haus. Owner 04.09.2026: „entweder karte oder trennlinie" -- und wenn Karte, dann eine. */
	border-radius: var(--radius-md);
	background: transparent;
	color: var(--text-strong);
	font-weight: 700;
	cursor: grab;
	user-select: none;
}

.tree-item:hover,
.tree-item.selected {
	background: var(--panel-hover);
}

.tree-item:active {
	cursor: grabbing;
}

.tree-item.synthetic {
	color: var(--synthetic, #8b5d2a);
}

.tree-item-label {
	display: inline-flex;
	align-items: baseline;
	gap: 0.35em;
	flex: 1 1 auto;
	min-width: 0;
	max-width: 100%;
	white-space: normal;
}

.tree-item-name {
	min-width: 0;
	overflow-wrap: normal;
	word-break: normal;
}

.tree-item-meta {
	flex: 0 0 auto;
	font-size: var(--font-size-caption);
	color: var(--muted);
	white-space: nowrap;
}

/* Die Panel-Fassung der Baumzeile (#wiki-sync-territory-tree) stand hier bis 14.08.2026 und war
   eine wortgleiche Zweitschrift von .wikisync-itemlist .tree-item. Beide stehen jetzt gemeinsam an
   EINER Regel in css/components/region-sync.css.
   ⚠️ Hier NICHTS wieder hinzuschreiben: die Regel dort nennt beide Selektoren, und eine ID-Regel
   an dieser Stelle würde sie mit Spezifität (1,1,0) gegen (0,2,0) wieder überstimmen — also genau
   den Zustand herstellen, der beseitigt wurde.
   🔴 Die Basisregel ".tree-item" weiter oben bleibt: sie ist inline-flex mit cursor:grab und trägt
   den Baum im Territorien-EDITOR, nicht im Panel.
   Gewacht von js/review/__tests__/wikisync-list-form.test.js. */

.tree-map-status,
.legend-map-status {
	position: relative;
	width: 13px;
	height: 13px;
	flex: 0 0 13px;
	border: 2px solid var(--color-map-presence);
	border-radius: 50%;
	background: var(--color-panel);
	box-sizing: border-box;
	color: var(--color-map-presence);
	overflow: hidden;
}

.tree-map-status--own-only::before,
.tree-map-status--children-only::before,
.legend-map-status--children-only::before,
.legend-map-status--own-only::before {
	content: "";
	position: absolute;
	top: 1px;
	bottom: 1px;
	background: currentColor;
}

.tree-map-status--children-only::before,
.legend-map-status--children-only::before {
	left: 1px;
	right: 50%;
	border-radius: 999px 0 0 999px;
}

.tree-map-status--own-only::before,
.legend-map-status--own-only::before {
	left: 50%;
	right: 1px;
	border-radius: 0 999px 999px 0;
}

.tree-map-status--all,
.legend-map-status--all {
	background: currentColor;
}

.tree-separator {
	margin: 9px 0 6px 0;
	padding: 0 8px;
	color: var(--muted-2);
	font-size: var(--font-size-small);
	font-weight: 700;
	letter-spacing: 0.04em;
}

.tree-root ul .tree-separator {
	display: none;
}

.tree-separator::before,
.tree-separator::after {
	content: "---";
	color: var(--muted-2);
}

.tree-separator::before {
	margin-right: 6px;
}

.tree-separator::after {
	margin-left: 6px;
}

.drag-handle {
	flex: 0 0 auto;
	font-size: var(--font-size-small);
	color: var(--muted-2);
	letter-spacing: -1px;
}