/* =============================================================================
 * Erscheinungsbild HELL — die Fenster, und nur die.
 *
 * Geltungsbereich: `html[data-vilo-erscheinung="hell"]` (gesetzt von `mockups/_theme.js`,
 * siehe dort). Ohne das Attribut ändert diese Datei nichts — der ausgelieferte dunkle
 * Zustand ist die Grundregel, hell ist der Aufsatz.
 *
 * WAS HELL WIRD, UND WARUM NUR DAS
 * --------------------------------
 * Alle neun Hintergrund-Motive des Bundles stehen auf `#0a0a10` — der Hintergrund ist dunkel,
 * egal welches Erscheinungsbild gilt. Alles, was DIREKT darauf liegt, bleibt deshalb, wie es
 * ist: die flächenlose Menüleiste (weiße Schrift auf dem Motiv, siehe CLAUDE.md „Menüleiste
 * ohne Fläche"), die Dock-Pille (Glas, 12 % Weiß), die Widget-Karten im Namensmenü (Glas,
 * dessen Material gemessen und in `widget-glas.test.js` gegen die exakte Zeile gepinnt ist)
 * und die globale Suche. Ein helles Dock über einem fast schwarzen Motiv wäre kein
 * Hellmodus, sondern ein Kontrastfehler — und die weiße Menüleistenschrift auf hellem Grund
 * ist genau die Grenze, die CLAUDE.md dort ausdrücklich offen hält.
 *
 * Hell wird, was einen EIGENEN, deckenden Grund mitbringt und Arbeit trägt:
 *   · das App-Fenster (Titelleiste + Inhaltsfläche) — der Rahmen gehört der Shell,
 *   · die Assistenten-Bahn — ihr eigener Kommentar im Kernel sagt es schon: „die Kante des
 *     Fensters ist Shell-Sache, der Inhalt Sache des iframes, wie bei jedem anderen
 *     App-Fenster auch". Sie ist ein Fenster, also folgt sie den Fenstern.
 * Der INHALT beider (das iframe) kommt aus `_pattern.css` und schaltet über `data-theme`.
 *
 * KEIN BUNDLE-EINGRIFF. Die Titelleiste kommt aus dem eingefrorenen Bundle mit
 * `bg-neutral-800`, die Inhaltsfläche mit `bg-neutral-900`; die Trennlinie darunter steht
 * INLINE (deshalb dort `!important` — gegen ein Inline-Attribut gewinnt keine Spezifität,
 * dieselbe Lage wie bei den Dock-Kachel-Schatten). Anker ist überall `.window-shadow`, die
 * Fensterwurzel: sie kommt im Bundle genau einmal vor, und eine CSS-Regel kann ohnehin nicht
 * in das iframe hineinreichen — dort ist ein eigenes Dokument. Für die Bahn stehen die
 * `.vilo-as*`-Klassen aus `assets/kernel.js`; deren Regeln werden zur Laufzeit als
 * `<style>` in den Kopf gehängt und kämen damit NACH dieser Datei — die Attribut-Selektoren
 * hier sind spezifischer und gewinnen trotzdem.
 *
 * DIE TÖNE SIND GERECHNET, NICHT GEGRIFFEN (gegen den komponierten Pixel, nicht gegen die
 * Deckungszahl). Auf der Titelleiste `#e9e9ec`:
 *     Titel aktiv    rgba(0,0,0,.78)  →  10.4:1
 *     Titel inaktiv  rgba(0,0,0,.58)  →   5.0:1
 *     Knopf          rgba(0,0,0,.50)  →   3.8:1   (Nicht-Text-Bedienelement, WCAG 1.4.11 will
 *                                                  3:1; .42 hielt nur 2.96:1 und war zu hell)
 * Die Inhaltsfläche ist `#f5f5f7` — derselbe Wert wie `--bg` im Hell-Block von
 * `_pattern.css`. Das ist kein Zufall und darf keiner werden: sie steht HINTER dem iframe und
 * ist genau das, was man in dem Moment sieht, in dem das Fenster schon da ist und die App
 * noch nicht gemalt hat. Ein anderer Ton dort wäre ein Aufblitzen bei jedem Öffnen.
 * Gepinnt durch `mockups/tests/erscheinung-flaechen.test.js` (rechnet die Kontraste nach und
 * hält den Gleichstand mit `_pattern.css`).
 * ==========================================================================*/

/* ── App-Fenster: Titelleiste ──────────────────────────────────────────────────────────── */
html[data-vilo-erscheinung="hell"] .window-shadow div.bg-neutral-800 {
  background-color: #e9e9ec;
  border-bottom-color: rgba(0, 0, 0, .10) !important;
}

/* Fenstertitel (mittig). Der Bundle schaltet ihn am Fokus um:
   `${c ? "text-white/80" : "text-white/40"}` — BEIDE Zustände brauchen einen hellen Ton.
   Nur den fokussierten zu übersetzen war ein Fehler: `rgba(255,255,255,.4)` auf #e9e9ec hält
   1.08:1, der Titel eines nicht fokussierten Fensters wäre schlicht weg gewesen. Gefunden im
   Review, nachgerechnet: .58 hält 5.03:1 und bleibt sichtbar leiser als die .78 des aktiven.
   Der Selektor nennt `span`, weil der Neu-laden-Knopf dieselbe Tailwind-Klasse trägt und
   einen anderen Ton bekommt (er ist Bedienelement, kein Text). */
html[data-vilo-erscheinung="hell"] .window-shadow div.bg-neutral-800 span.text-white\/80 {
  color: rgba(0, 0, 0, .78);
}
html[data-vilo-erscheinung="hell"] .window-shadow div.bg-neutral-800 span.text-white\/40 {
  color: rgba(0, 0, 0, .58);
}

/* Rechts: Neu-laden-/Schließen-Knopf. Die drei Ampeln tragen eigene Vollfarben
   (`bg-red-500/80` …) und bleiben unangetastet — sie funktionieren in beiden Modi. */
html[data-vilo-erscheinung="hell"] .window-shadow .window-btn.text-white\/40 {
  color: rgba(0, 0, 0, .50);
}
html[data-vilo-erscheinung="hell"] .window-shadow .window-btn.text-white\/40:hover {
  color: rgba(0, 0, 0, .80);
}

/* ── App-Fenster: Fläche hinter dem iframe ─────────────────────────────────────────────── */
html[data-vilo-erscheinung="hell"] .window-shadow div.bg-neutral-900 {
  background-color: #f5f5f7;
}

/* ── Assistenten-Bahn ─────────────────────────────────────────────────────────────────── */
html[data-vilo-erscheinung="hell"] .vilo-as {
  background: #f5f5f7;
  color: #1d1d1f;
  border-left-color: rgba(0, 0, 0, .12);
}
html[data-vilo-erscheinung="hell"] .vilo-as-kopf {
  border-bottom-color: rgba(0, 0, 0, .10);
}
html[data-vilo-erscheinung="hell"] .vilo-as-titel {
  color: rgba(0, 0, 0, .86);
}
html[data-vilo-erscheinung="hell"] .vilo-as-zu {
  color: rgba(0, 0, 0, .55);
}
html[data-vilo-erscheinung="hell"] .vilo-as-zu:hover {
  background: rgba(0, 0, 0, .07);
  color: #1d1d1f;
}
html[data-vilo-erscheinung="hell"] .vilo-as-griff:hover {
  background: rgba(0, 0, 0, .08);
}