/* -------------------------------------------------------------------------
   Tastenbelegung — gerenderte Tastatur (Modul „keybinds")

   Geteilte Komponente: wird im Frontend (page-keybinds.php) UND im wp-admin
   (Blue Horizon → Tastenbelegung) gerendert. Deshalb eine eigene Datei statt
   eines Abschnitts in style.css — im Admin ist style.css nicht geladen.

   Alle Farben laufen über die bh-Tokens, mit Fallback-Werten, damit die Datei
   ohne style.css (= im Admin) allein funktionsfähig ist. Light-Mode schaltet
   über die Tokens automatisch mit; die wenigen Ausnahmen stehen am Ende.
   ------------------------------------------------------------------------- */

.bh-keyboard-scroll {
	--bh-kb-u: 46px;          /* Kantenlänge einer 1u-Taste */
	--bh-kb-gap: 6px;         /* Abstand zwischen Tasten */
	--bh-kb-bw: 1px;          /* Rahmenbreite einer Taste */
	overflow-x: auto;
	overflow-y: hidden;
	padding-bottom: 4px;
	/* Scroll-Schatten als Hinweis, dass rechts noch Tastatur kommt (schmale
	   Displays: die Tastatur ist bewusst nicht geschrumpft, sondern scrollbar,
	   weil Tasten unter ~34px unlesbar werden). */
	background:
		linear-gradient(to right, var(--bh-bg-elevated, #17171A) 30%, rgba(0, 0, 0, 0)) left center / 28px 100% no-repeat,
		linear-gradient(to left, var(--bh-bg-elevated, #17171A) 30%, rgba(0, 0, 0, 0)) right center / 28px 100% no-repeat;
	background-attachment: local, local;
}

.bh-keyboard {
	display: flex;
	align-items: flex-start;
	gap: 22px;
	width: max-content;
	min-width: 100%;
	padding: 18px;
	border: 1px solid var(--bh-border, #27272A);
	border-radius: var(--bh-radius-card, 10px);
	background: var(--bh-bg-elevated, #17171A);
	box-shadow: var(--bh-shadow-2, 0px 2px 8px rgba(0, 0, 0, 0.4));
	font-family: var(--bh-font-sans, system-ui, sans-serif);
}

.bh-keyboard__block {
	display: flex;
	flex-direction: column;
	gap: var(--bh-kb-gap);
}

.bh-keyboard__row {
	display: flex;
	gap: var(--bh-kb-gap);
}

/* --- Einzelne Taste ---------------------------------------------------- */

.bh-key {
	/* Breite in Tasten-Einheiten inkl. der übersprungenen Zwischenräume,
	   damit mehrfach breite Tasten exakt mit dem Raster abschließen. */
	--bh-key-w: 1;
	box-sizing: border-box;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: calc(var(--bh-key-w) * var(--bh-kb-u) + (var(--bh-key-w) - 1) * var(--bh-kb-gap));
	height: var(--bh-kb-u);
	padding: 2px;
	border: var(--bh-kb-bw) solid var(--bh-border, #27272A);
	border-radius: 7px;
	background: var(--bh-bg-muted, #111113);
	color: var(--bh-ink-muted, #A1A1AA);
	font-family: inherit;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.1;
	text-align: center;
	/* KEIN overflow:hidden — das würde die ::after-Brücke der hohen Tasten
	   (ISO-Enter, Ziffernblock + / Enter) abschneiden. Den Kappen-Text
	   klammert .bh-key__cap selbst. */
}

.bh-key--gap {
	border-color: transparent;
	background: none;
}

.bh-key__cap {
	display: block;
	max-width: 100%;
	padding: 0 3px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Nur für Screenreader und „Seite ohne CSS": die belegte Aktion hängt an der
   Taste selbst, nicht nur im per JS gefüllten Detail-Feld. */
.bh-key__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	overflow: hidden;
	white-space: nowrap;
}

/* --- Belegte Taste ----------------------------------------------------- */

.bh-key.is-bound {
	--bh-key-color: var(--bh-indigo, #3e43f0);
	border-color: color-mix(in srgb, var(--bh-key-color) 55%, transparent);
	/* Flächig, nicht als Verlauf: die hohen Tasten überbrücken die
	   Raster-Lücke mit background:inherit — ein Verlauf liefe im Steg neu an
	   und hinterließe eine sichtbare Naht. */
	background: color-mix(in srgb, var(--bh-key-color) 14%, var(--bh-bg-muted, #111113));
	color: var(--bh-ink, #FAFAFA);
	font-weight: 600;
}

/* Punkt in der Ecke: macht eine Belegung auch ohne Farbwahrnehmung erkennbar
   (Farbe allein wäre kein ausreichender Unterschied). */
.bh-key__dot {
	position: absolute;
	top: 3px;
	right: 3px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--bh-key-color, #3e43f0);
}

button.bh-key {
	cursor: pointer;
	transition: transform 0.12s ease, border-color 0.12s ease, background-color 0.12s ease;
}

button.bh-key:hover {
	border-color: var(--bh-border-strong, #3F3F46);
	color: var(--bh-ink, #FAFAFA);
	transform: translateY(-1px);
}

button.bh-key.is-bound:hover {
	border-color: var(--bh-key-color);
}

button.bh-key:focus-visible {
	outline: 2px solid var(--bh-link, #8B93FF);
	outline-offset: 2px;
}

/* Ausgewählte Taste (Detail-Anzeige im Frontend, Editor-Auswahl im Admin). */
button.bh-key[aria-pressed="true"] {
	border-color: var(--bh-key-color, var(--bh-link, #8B93FF));
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--bh-key-color, #8B93FF) 45%, transparent);
	transform: translateY(-1px);
}

/* --- Hohe Tasten (Enter, Ziffernblock „+" und „Enter") -----------------
   Zwei Hälften in aufeinanderfolgenden Zeilen, die zu EINER Taste
   zusammenwachsen. Die Oberhälfte überbrückt die Raster-Lücke per ::after,
   statt die Zeilenhöhe zu verändern (das würde die drei Blöcke gegeneinander
   verschieben). Die Beschriftung steht nur auf der Unterhälfte.

   Wichtig: .bh-key darf kein overflow:hidden haben, sonst wird die Brücke
   abgeschnitten. Und .is-bound muss flächig getönt sein (kein Verlauf), weil
   die Brücke den Hintergrund per inherit übernimmt. */

.bh-key--tall-top {
	border-bottom-width: 0;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.bh-key--tall-top::after {
	content: "";
	position: absolute;
	top: 100%;
	left: calc(-1 * var(--bh-kb-bw));
	right: calc(-1 * var(--bh-kb-bw));
	height: var(--bh-kb-gap);
	border-left: var(--bh-kb-bw) solid;
	border-right: var(--bh-kb-bw) solid;
	border-color: inherit;
	background: inherit;
}

.bh-key--tall-bottom {
	border-top-width: 0;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

/* --- Stufe der ISO-Enter-Taste ----------------------------------------
   Das Oberteil (1.5u) reicht 0.25u weiter nach links als das Unterteil
   (1.25u) — die typische L-Form. Der waagerechte Versatz beider linken Kanten
   beträgt im Flex-Raster exakt 0.25 * (Tastengröße + Abstand); die Formel gilt
   bei jeder Tastengröße, skaliert also mit den Breakpoints mit.

   --bh-key-step ist die Breitendifferenz der beiden Hälften in u. Wer das
   Layout per bh_keyboard_layout-Filter ändert, muss sie mitziehen. */

.bh-key--iso-top {
	--bh-key-step: 0.25;
}

/* Brücke über die Lücke: beginnt erst an der linken Kante des Unterteils. */
.bh-key--iso-top::after {
	left: calc(var(--bh-key-step) * (var(--bh-kb-u) + var(--bh-kb-gap)) - var(--bh-kb-bw));
}

/* Rahmen unter dem Überhang — schließt die Stufe. Als border-top eines
   0-hohen Streifens, damit border-color:inherit die Farbe der Taste erbt
   (ein background könnte das nicht). */
.bh-key--iso-top::before {
	content: "";
	position: absolute;
	top: 100%;
	left: calc(-1 * var(--bh-kb-bw));
	width: calc(var(--bh-key-step) * (var(--bh-kb-u) + var(--bh-kb-gap)) + var(--bh-kb-bw));
	height: 0;
	border-top: var(--bh-kb-bw) solid;
	border-color: inherit;
}

/* --- Legende ----------------------------------------------------------- */

.bh-kb-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
	font-family: var(--bh-font-sans, system-ui, sans-serif);
	font-size: 13px;
	color: var(--bh-ink-dim, #71717A);
}

.bh-kb-legend__item {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0;
}

.bh-kb-legend__dot {
	width: 9px;
	height: 9px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--bh-key-color, #3e43f0);
}

.bh-kb-legend__count {
	font-family: var(--bh-font-mono, ui-monospace, monospace);
	font-size: 11px;
	color: var(--bh-ink-muted, #A1A1AA);
}

/* --- Tooltip (Frontend) -------------------------------------------------
   Ein einzelnes Element, von keybinds.js an <body> gehängt und per
   getBoundingClientRect positioniert. Bewusst NICHT als CSS-Popover im
   Tasten-Element: die Tastatur sitzt in einem horizontal scrollenden
   Container (overflow-x:auto/overflow-y:hidden), der ein Popover oben/unten
   abschneiden und an den Rändern Phantom-Scroll erzeugen würde.
   Optisch identisch zum Neustart-Popover am Header-Status (.bh-status-pop).
   Ohne JS bleibt der native title-Tooltip der Taste. */

.bh-kb-tip {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 200;
	width: max-content;
	max-width: 240px;
	padding: 10px 13px;
	border: 1px solid var(--bh-border, #27272A);
	border-radius: var(--bh-radius-md, 6px);
	background: var(--bh-bg-elevated, #17171A);
	box-shadow: var(--bh-shadow-3, 0px 4px 16px rgba(0, 0, 0, 0.5));
	font-family: var(--bh-font-sans, system-ui, sans-serif);
	opacity: 0;
	transform: translateY(-4px);
	pointer-events: none;
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.bh-kb-tip[hidden] {
	/* Theme-Falle: Klassen, die display setzen, gewinnen sonst gegen hidden.
	   Hier zwar unkritisch (kein display gesetzt), aber konsistent zu den
	   übrigen per JS versteckten Komponenten. */
	display: none;
}

.bh-kb-tip.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Spitze zur Taste. --bh-tip-arrow wird von JS gesetzt, damit sie auch dann
   auf die Tastenmitte zeigt, wenn das Tooltip am Bildschirmrand geklemmt hat. */
.bh-kb-tip::after {
	content: "";
	position: absolute;
	left: var(--bh-tip-arrow, 50%);
	width: 8px;
	height: 8px;
	margin-left: -4px;
	border: 1px solid var(--bh-border, #27272A);
	background: var(--bh-bg-elevated, #17171A);
	transform: rotate(45deg);
}

.bh-kb-tip--above::after {
	bottom: -5px;
	border-top: 0;
	border-left: 0;
}

.bh-kb-tip--below::after {
	top: -5px;
	border-bottom: 0;
	border-right: 0;
}

.bh-kb-tip__head {
	display: flex;
	align-items: center;
	gap: 9px;
}

.bh-kb-tip__key {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	min-width: 26px;
	height: 24px;
	padding: 0 7px;
	border: 1px solid color-mix(in srgb, var(--bh-key-color, #3e43f0) 55%, transparent);
	border-radius: 5px;
	background: color-mix(in srgb, var(--bh-key-color, #3e43f0) 16%, transparent);
	color: var(--bh-ink, #FAFAFA);
	font-family: var(--bh-font-mono, ui-monospace, monospace);
	font-size: 12px;
	font-weight: 600;
}

.bh-kb-tip__action {
	margin: 0;
	color: var(--bh-ink, #FAFAFA);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
}

.bh-kb-tip__note {
	margin: 7px 0 0;
	padding-top: 7px;
	border-top: 1px solid var(--bh-border, #27272A);
	color: var(--bh-ink-muted, #A1A1AA);
	font-size: 12px;
	line-height: 1.5;
}

.bh-kb__hint {
	margin: 0 0 16px;
	color: var(--bh-ink-dim, #71717A);
	font-size: 14px;
}

@media (prefers-reduced-motion: reduce) {
	.bh-kb-tip {
		transition: none;
	}
}

.bh-kb__empty {
	margin: 0 0 16px;
	color: var(--bh-ink-dim, #71717A);
}

/* --- Responsive --------------------------------------------------------
   Die Tastatur wird nur begrenzt verkleinert; darunter scrollt sie
   horizontal, statt unlesbar zu werden. */

@media (max-width: 1240px) {
	.bh-keyboard-scroll { --bh-kb-u: 42px; }
}

@media (max-width: 1024px) {
	.bh-keyboard-scroll { --bh-kb-u: 38px; }
	.bh-keyboard { gap: 16px; padding: 14px; }
}

@media (max-width: 768px) {
	.bh-keyboard-scroll { --bh-kb-u: 35px; --bh-kb-gap: 5px; }
	.bh-keyboard { gap: 12px; padding: 12px; }
	.bh-key { font-size: 11px; border-radius: 6px; }
	.bh-kb-tip { max-width: 220px; }
}

/* --- Light-Mode -------------------------------------------------------- */

:root[data-theme="light"] .bh-key.is-bound {
	/* Auf hellem Grund trägt der Farbtint zu wenig — Rahmen und Text
	   übernehmen die Unterscheidung. */
	border-color: color-mix(in srgb, var(--bh-key-color) 65%, transparent);
	background: color-mix(in srgb, var(--bh-key-color) 10%, var(--bh-bg, #ffffff));
}

:root[data-theme="light"] .bh-keyboard-scroll {
	background-image:
		linear-gradient(to right, var(--bh-bg-elevated) 30%, rgba(255, 255, 255, 0)),
		linear-gradient(to left, var(--bh-bg-elevated) 30%, rgba(255, 255, 255, 0));
}