/* ==========================================================================
   Suche — Palette (⌘K) und Ergebnisseite /suche
   Ergaenzt assets/css/app.css und verwendet ausschliesslich dessen
   Tokens (ARCHITEKTUR §7). Keine Karten, keine Verlaeufe, keine
   eigenen Farbwerte: so bleibt die Suche in allen 20 Themes lesbar.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Treffer-Hervorhebung
   Die UA-Vorgabe fuer <mark> (gelb auf schwarz) faellt in den dunklen
   Themes auseinander. Darum ueberall die Akzentfarbe.
   -------------------------------------------------------------------------- */

/* Das <dialog> selbst ist nur der Rahmen fuer die Positionierung: keine
   Browservorgabe (weisse Flaeche, schwarzer Rand, eigene Breite) darf
   durchschlagen — Form und Flaeche traegt allein .suchpalette-fenster. */
dialog.suchpalette[open] {
	display: grid;
	justify-items: center;
	align-items: start;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	border: 0;
	background: transparent;
	color: inherit;
	padding: 10vh var(--raum-4) var(--raum-4);
}

.suchpalette-fenster {
	display: flex;
	flex-direction: column;
	width: min(42rem, 100%);
	max-height: 80vh;
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
	overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
	dialog.suchpalette[open] .suchpalette-fenster {
		animation: suchpalette-auf 0.12s ease-out;
	}
}

@keyframes suchpalette-auf {
	from { opacity: 0; transform: translateY(-0.4rem); }
	to   { opacity: 1; transform: none; }
}

/* Eingabezeile ------------------------------------------------------------ */

.suchpalette-feld {
	display: flex;
	align-items: center;
	gap: var(--raum-3);
	flex: none;
	padding: var(--raum-3) var(--raum-4);
	border-bottom: 1px solid var(--border);
}

.suchpalette-icon {
	flex: none;
	color: var(--text-faint);
}

.suchpalette-eingabe {
	flex: 1;
	min-width: 0;
	border: 0;
	background: none;
	padding: 0;
	font: inherit;
	font-size: var(--t-1);
	color: var(--text);
}

.suchpalette-eingabe::placeholder {
	color: var(--text-faint);
}

.suchpalette-eingabe:focus {
	outline: none;
}

/* Safari zeichnet sonst ein eigenes Loeschkreuz in Systemfarbe */
.suchpalette-eingabe::-webkit-search-decoration,
.suchpalette-eingabe::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.suchpalette-schliessen {
	flex: none;
	display: flex;
	background: none;
	border: 0;
	padding: var(--raum-1);
	color: var(--text-faint);
	cursor: pointer;
	border-radius: var(--radius-sm);
}

.suchpalette-schliessen:hover {
	color: var(--text);
	background: var(--surface-2);
}

/* Ergebnisse -------------------------------------------------------------- */

.suchpalette-koerper {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.suchpalette-liste {
	list-style: none;
	margin: 0;
	padding: 0;
}

.suchpalette-liste:empty {
	display: none;
}

.suchpalette-liste > li {
	padding: var(--raum-2) var(--raum-2) var(--raum-3);
}

.suchpalette-liste > li + li {
	border-top: 1px solid var(--border);
}

.suchpalette-gruppe {
	display: block;
	padding: var(--raum-1) var(--raum-3) var(--raum-2);
	color: var(--text-faint);
	font-size: var(--t--2);
}

.suchpalette-treffer {
	display: grid;
	grid-template-columns: 1.25rem minmax(0, 1fr);
	gap: var(--raum-3);
	padding: var(--raum-2) var(--raum-3);
	border-radius: var(--radius-sm);
	color: var(--text);
	text-decoration: none;
	cursor: pointer;
}

.suchpalette-treffer[aria-selected="true"] {
	background: var(--surface-2);
}

.suchpalette-treffer:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: -2px;
}

.suchpalette-treffer-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 1.5em;
	color: var(--text-faint);
}

.suchpalette-treffer-text {
	display: block;
	min-width: 0;
}

.suchpalette-titel {
	display: block;
	font-weight: 500;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

.suchpalette-pfad {
	display: block;
	color: var(--text-muted);
	font-size: var(--t--2);
}

.suchpalette-snippet {
	display: block;
	margin-top: var(--raum-1);
	color: var(--text-muted);
	font-size: var(--t--1);
	line-height: 1.45;
	overflow-wrap: anywhere;
}

.suchpalette-meta {
	display: block;
	margin-top: var(--raum-1);
	color: var(--text-faint);
	font-size: var(--t--2);
}

/* Leerer Zustand, Hinweise, letzte Suchen --------------------------------- */

.suchpalette-status {
	padding: var(--raum-3) var(--raum-4) var(--raum-4);
}

.suchpalette-status[hidden] {
	display: none;
}

.suchpalette-hinweis {
	margin: 0;
	color: var(--text-muted);
	font-size: var(--t--1);
}

.suchpalette-letzte-titel {
	margin: var(--raum-4) 0 var(--raum-2);
	color: var(--text-faint);
	font-size: var(--t--2);
}

.suchpalette-letzte {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--raum-2);
}

.suchpalette-letzte-knopf {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: 0.1rem var(--raum-2);
	color: var(--text-muted);
	font: inherit;
	font-size: var(--t--1);
	cursor: pointer;
}

.suchpalette-letzte-knopf:hover {
	color: var(--text);
	border-color: var(--accent);
}

/* Fusszeile --------------------------------------------------------------- */

.suchpalette-fuss {
	flex: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--raum-4);
	padding: var(--raum-2) var(--raum-4);
	border-top: 1px solid var(--border);
	color: var(--text-faint);
	font-size: var(--t--2);
}

/* Die Tastenmarken in Lesegroesse: das globale `kbd` ist relativ zur
   Umgebung (0.8em) und wuerde in der 13-px-Fusszeile auf 10 px fallen. */
.suchpalette-fuss kbd {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.6em;
	margin-right: 0.25em;
	padding: 0.05em 0.4em;
	/* Systemschrift: Pfeile, ⏎ und ⌘ fehlen in Instrument Sans und IBM
	   Plex Mono, der Ersatz fiel winzig aus. */
	font-family: ui-monospace, "SF Mono", Menlo, "Segoe UI", system-ui, sans-serif;
	font-size: var(--t-0);
	line-height: 1.4;
}

/* --------------------------------------------------------------------------
   3. Ergebnisseite /suche
   -------------------------------------------------------------------------- */

.suchseite-zahl {
	margin: var(--raum-5) 0 var(--raum-3);
	color: var(--text-muted);
	font-size: var(--t--1);
}

/* Abschnittsueberschrift der Trefferliste: 16/600 wie jede andere
   (docs/DESIGN.md §3) — Abstand oben --raum-6, unten --raum-2. */
.suchseite-gruppe {
	margin: var(--raum-6) 0 var(--raum-2);
	font-size: var(--t-2);
}

.suchtreffer {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: none;
}

.suchtreffer > li {
	display: grid;
	grid-template-columns: 1.25rem minmax(0, 1fr);
	gap: var(--raum-3);
	padding: var(--raum-3) 0;
	border-top: 1px solid var(--border);
}

.suchtreffer > li:last-child {
	border-bottom: 1px solid var(--border);
}

.suchtreffer-icon {
	display: flex;
	align-items: center;
	height: 1.5em;
	color: var(--text-faint);
}

.suchtreffer-haupt {
	min-width: 0;
}

.suchtreffer-titel {
	font-weight: 500;
	overflow-wrap: anywhere;
}

.suchtreffer-pfad {
	display: block;
	color: var(--text-muted);
	font-size: var(--t--2);
}

.suchtreffer-snippet {
	margin-top: var(--raum-1);
	color: var(--text-muted);
	font-size: var(--t--1);
}

/* --------------------------------------------------------------------------
   4. Schmale Fenster und Druck
   -------------------------------------------------------------------------- */

@media (max-width: 520px) {
	dialog.suchpalette[open] {
		padding: 0;
	}

	.suchpalette-fenster {
		width: 100%;
		height: 100%;
		max-height: none;
		border: 0;
		border-radius: 0;
	}

	.suchpalette-fuss {
		display: none;
	}
}

@media print {
	dialog.suchpalette {
		display: none !important;
	}
}


/* Trefferzeilen (docs/DESIGN.md §5.3): Symbol, Titel mit Pfad, Meta rechts. */
.suchtreffer > li {
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr) minmax(160px, 28%);
	gap: 4px 12px;
	align-items: start;
	padding: 8px 0;
	border-bottom: 1px solid var(--border);
}

.suchtreffer > li:last-child {
	border-bottom: 0;
}

.suchtreffer-meta {
	font-size: var(--t--2);
	color: var(--text-muted);
	text-align: right;
	padding-top: 2px;
}

.suchtreffer-snippet {
	margin: 2px 0 0;
	font-size: var(--t--1);
	color: var(--text-muted);
	max-width: 80ch;
}

.suchseite-zahl.mono {
	font-family: inherit;
}