/* Operian OS — FENSTER-GLAS: ein schmales App-Fenster am Schreibtisch in Liquid Glass
 * ============================================================================
 *
 * Vorgabe Betreiber (2026-10-02, Bestellungen am Telefon neben der am Schreibtisch): „Ich will
 * auf Desktop dieses Fenster genau so zeigen wie auf Mobile — sehr schmales Fenster, selber
 * Style, Hintergrund des Fensters in Liquid Blur."
 *
 * WER WAS TUT — dieselbe Abmachung wie auf dem Telefon (assets/app-glas.css):
 *   · der Kernel öffnet die App schmal (viloOeffneSchmal), setzt `data-vilo-glas` an das
 *     Fenster, solange es schmal ist (Block „App-Glas", SCHMAL_FENSTER · agSchmal), und sagt es
 *     der App (`vilo:app-glas`) — erst dann gibt sie ihren Grund ab und zeigt ihren
 *     Telefon-Zuschnitt;
 *   · DIESE Datei gibt dem Fenster statt seines Grundes das Glas.
 *
 * WARUM HIER EIN WEICHZEICHNER AM FENSTER STEHEN DARF, auf dem Telefon aber nicht: dort liegen
 * die Karten im iframe, und die Wurzel eines Dokuments ist eine Backdrop-Grenze (WebKit sähe
 * nichts). Hier steht der Filter an der FENSTERHÜLLE im Dokument der Shell — er sieht, was
 * hinter dem Fenster liegt (Hintergrund, Widgets, andere Fenster), in jeder Engine. Der Filter
 * ist wörtlich der des Grundes hinter einer Glas-App auf dem Telefon (app-glas.css §3), damit
 * beide Geräte dasselbe Material zeigen.
 *
 * FAIL-CLOSED: ohne `backdrop-filter` bleibt die Hülle eine deckende, dunkle Platte — die App
 * zeigt darauf ihren hellen Zuschnitt, lesbar, nur ohne Durchblick. Ohne das Attribut (breites
 * Fenster, iPad, Telefon, `prefers-reduced-transparency`) greift keine einzige Regel.
 *
 * DER PREIS, benannt: das Glas zeigt, was dahinter liegt. Über dem Hintergrund (dafür ist es
 * gebaut) steht der weisse Titel der App wie auf dem Telefon; zieht man das Fenster über ein
 * HELLES Fenster, wird der Grund hell und der Titel blass — dieselbe Einbusse, die der Betreiber
 * für den Telefon-Zuschnitt freigegeben hat. Der leichte Nachtschleier mildert sie, ohne die
 * Farbe des Bildes zu nehmen.
 *
 * Keine Schatten (die Elevation des Fensters ist die des Bundles, unverändert). Spezifität
 * (0,5,2) und mehr — über den hellen Fensterregeln aus fenster-hell.css (0,3,2) bzw. (0,4,3).
 * Gepinnt durch mockups/tests/fenster-glas-desktop.test.js.
 * ==========================================================================*/

/* ── 1 · Die Hülle trägt das Glas ─────────────────────────────────────────────────────────
 * Rückfall zuerst: eine deckende dunkle Platte (der Ton liegt unter dem Nachtschleier des
 * Glases, damit der Wechsel ohne Filter nicht heller wird). */
html[data-vilo-class="wide"]:not([data-vilo-appshell]) .window-shadow[data-vilo-glas] > div.rounded-2xl {
  background: #1b1f36;
  /* Die Lichtkante: eine Kontur INNEN, über dem Inhalt gemalt (ein inset-Schatten läge unter
     dem iframe). Licht, keine Elevation. */
  outline: 1px solid rgba(255, 255, 255, .22);
  outline-offset: -1px;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  html[data-vilo-class="wide"]:not([data-vilo-appshell]) .window-shadow[data-vilo-glas] > div.rounded-2xl {
    background: rgba(10, 30, 90, .2);
    -webkit-backdrop-filter: blur(30px) saturate(1.8);
    backdrop-filter: blur(30px) saturate(1.8);
  }
}

/* ── 2 · Titelleiste und Inhaltsfläche ohne eigenen Grund ────────────────────────────────
 * Die Leiste geht nahtlos in die App über (auf dem Telefon gibt es sie gar nicht); ihre
 * Trennlinie steht inline im Bundle, deshalb `!important`. */
html[data-vilo-class="wide"]:not([data-vilo-appshell]) .window-shadow[data-vilo-glas] div.bg-neutral-800 {
  background: transparent;
  border-bottom-color: transparent !important;
}
html[data-vilo-class="wide"]:not([data-vilo-appshell]) .window-shadow[data-vilo-glas] div.bg-neutral-900 {
  background: transparent;
}
/* Das iframe spricht dieselbe Farbsprache wie das Dokument darin (die App steht in Glas fest
   hell) — sonst malt Chromium dem Rahmen eine deckende Leinwand. */
html[data-vilo-class="wide"]:not([data-vilo-appshell]) .window-shadow[data-vilo-glas] iframe {
  color-scheme: light;
}

/* ── 3 · Titel und Neu-laden-Knopf weiss auf dem Glas ────────────────────────────────────
 * Der Hauch Schatten ist der des Titels in der App (Licht, keine Elevation). Aktiv .92,
 * inaktiv .62 — derselbe Abstand wie zwischen den beiden Zuständen des Bundles. */
html[data-vilo-class="wide"]:not([data-vilo-appshell]) .window-shadow[data-vilo-glas] div.bg-neutral-800 span.text-white\/80 {
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 1px 3px rgba(10, 10, 60, .45);
}
html[data-vilo-class="wide"]:not([data-vilo-appshell]) .window-shadow[data-vilo-glas] div.bg-neutral-800 span.text-white\/40 {
  color: rgba(255, 255, 255, .62);
  text-shadow: 0 1px 3px rgba(10, 10, 60, .45);
}
html[data-vilo-class="wide"]:not([data-vilo-appshell]) .window-shadow[data-vilo-glas] .window-btn.text-white\/40 {
  color: rgba(255, 255, 255, .72);
}
html[data-vilo-class="wide"]:not([data-vilo-appshell]) .window-shadow[data-vilo-glas] .window-btn.text-white\/40:hover {
  color: #fff;
}