/* =============================================================================
 * Der Schreibtisch benimmt sich wie ein Betriebssystem — Präsentation
 * (Vorgabe Betreiber, 2026-10-16; Logik: assets/kernel.js, Block „Betriebssystem")
 *
 * Fünf Teile:
 *   1 · Ein Fenster im Hintergrund trägt eine graue Ampel (wie am Mac)
 *   2 · Die Menüleiste des Kernels statt der Attrappen des Bundles
 *   3 · Der Menü-Baustein (Leiste und Dock)
 *   4 · Der App-Umschalter (⌥Tab)
 *   5 · Die Fahrt ins Dock und heraus
 *
 * Alles nur am Schreibtisch (`wide`, ohne App-Shell) — Telefon und iPad sehen keine Regel
 * davon (dort gibt es keine Titelleiste und keine Menüs in der Leiste). Keine Schatten, keine
 * Verläufe; Glas nur, wo Suche und Dock-Mediathek es schon tragen.
 * Gepinnt durch mockups/tests/schreibtisch-os.test.js (Kontraste werden dort nachgerechnet).
 * ==========================================================================*/


/* ── 1 · Fokus: die Ampel eines Fensters im Hintergrund ist grau ──────────────────────────
 * Der Bundle markiert den Inhalt jedes Fensters, das nicht das aktive ist
 * (`.vilo-win-inactive`) und dimmt dessen Titel — die Ampel blieb farbig, zwei Fenster sahen
 * gleich „vorn" aus. Wie am Mac: grau, solange der Zeiger nicht auf der Ampel liegt; darüber
 * zeigt sie wieder Farbe und Symbol (das Symbol blendet der Bundle selbst über `group-hover`
 * ein). Die Grautöne halten 3:1 gegen die Titelleiste (WCAG 1.4.11 — die Knöpfe bleiben
 * bedienbar): dunkel #262626, hell #e9e9ec (fenster-hell.css). Im Glas der schmalen Fenster
 * steht die Leiste auf dem Bild selbst; dort Weiss mit Deckung, wie Titel und Neu-laden-Knopf. */
html[data-vilo-class="wide"]:not([data-vilo-appshell]) .window-shadow:has(> .rounded-2xl > .vilo-win-inactive) div.bg-neutral-800 > div.flex.items-center.gap-2:not(:hover) > button.window-btn.rounded-full {
  background-color: #737378;
}
html[data-vilo-class="wide"][data-vilo-erscheinung="hell"]:not([data-vilo-appshell]) .window-shadow:has(> .rounded-2xl > .vilo-win-inactive) div.bg-neutral-800 > div.flex.items-center.gap-2:not(:hover) > button.window-btn.rounded-full {
  background-color: #808085;
}
html[data-vilo-class="wide"]:not([data-vilo-appshell]) .window-shadow[data-vilo-glas]:has(> .rounded-2xl > .vilo-win-inactive) div.bg-neutral-800 > div.flex.items-center.gap-2:not(:hover) > button.window-btn.rounded-full {
  background-color: rgba(255, 255, 255, .55);
}


/* ── 2 · Die Menüleiste des Kernels ──────────────────────────────────────────────────────
 * Die Menüs des Bundles (Ablage · Bearbeiten · Darstellung · Fenster · Hilfe und die
 * App-Menüs) bleiben im DOM und gehen nur aus dem Bild, solange der Kernel seine eigene
 * Leiste führt (`data-vilo-os-leiste`). Ohne Kernel stehen sie wieder da — sichtbar, nicht
 * kaputt.
 *
 * Die Leiste des Kernels folgt denselben Regeln wie die des Bundles: auf dem Home-Bildschirm
 * (kein App-Name-Span, s. menubar-desktop.css) und auf einem leeren Schreibtisch
 * (schreibtische.css) steht nur das Logo. Fällt `:has()` aus, stehen Darstellung, Fenster und
 * Hilfe auch auf dem Home-Bildschirm — jeder Eintrag darin tut dort, was er sagt, oder steht
 * gesperrt da. */
html[data-vilo-os-leiste]:not([data-vilo-class="compact"]) div[class*="z-[9999]"].glass-dock > div:first-child > div.flex.items-center.gap-0.ml-1 {
  display: none;
}
html:not([data-vilo-os-leiste]) .vilo-os-leiste,
html[data-vilo-sd-leer] .vilo-os-leiste,
html[data-vilo-os-leiste] div[class*="z-[9999]"].glass-dock > div:first-child:not(:has(> span.text-white\/80.text-xs.font-semibold.px-2)) > .vilo-os-leiste {
  display: none;
}
.vilo-os-leiste {
  display: flex;
  align-items: center;
  margin-left: 4px;
}
/* Die Titel im Maß der Bundle-Titel am Schreibtisch (menubar-desktop.css: 14 px, 6/12 px). */
.vilo-os-titel {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 0;
  margin: 0;
  font: inherit;
  font-size: 14px;
  line-height: 1rem;
  padding: 6px 12px;
  border-radius: 6px;
  color: rgba(255, 255, 255, .6);
  cursor: default;
  transition: color .14s ease, background-color .14s ease;
}
.vilo-os-titel:hover {
  color: rgba(255, 255, 255, .9);
  background-color: rgba(255, 255, 255, .08);
}
/* Der App-Name ist das erste Menü — er bleibt der Span des Bundles (fett, wie am Mac). */
.vilo-os-app {
  border-radius: 6px;
  padding-top: 6px;
  padding-bottom: 6px;
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
  transition: background-color .14s ease;
}
.vilo-os-app:hover {
  background-color: rgba(255, 255, 255, .08);
}
.vilo-os-titel.vilo-os-titel--offen,
.vilo-os-app.vilo-os-titel--offen {
  color: #fff;
  background-color: rgba(255, 255, 255, .15);
}
.vilo-os-titel:focus-visible,
.vilo-os-app:focus-visible {
  outline: 2px solid rgba(255, 255, 255, .55);
  outline-offset: 1px;
}


/* ── 3 · Der Menü-Baustein ────────────────────────────────────────────────────────────────
 * Die Fläche trägt die Klassen der Bundle-Menüs (NM_PANEL_CLS/NM_ITEM_CLS im Kernel) —
 * „vilo", Namensmenü und diese Menüs sehen nebeneinander gleich aus. Hier steht nur, was
 * diese Klassen nicht können: die Lage am <body>, der Cursor der Tastatur, gesperrte Zeilen,
 * die Hakenspalte, Kürzel und Köpfe. Leise Schrift mit ≥ 4,5:1 auf dem Menügrund (#262626):
 * Kürzel .5 → 4,9:1, Köpfe .55 → 5,6:1 (gerechnet im Orakel). */
.vilo-os-menue {
  position: fixed !important;
  margin-top: 0 !important;
  z-index: 9998;
  max-height: calc(100vh - 16px);
  overflow-y: auto;
  overscroll-behavior: contain;
  outline: none;
}
.vilo-os-menue .vilo-os-links {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.vilo-os-menue .vilo-os-haken {
  display: none;
}
.vilo-os-menue.vilo-os-menue--haken .vilo-os-haken {
  display: inline-block;
  width: 12px;
  flex: none;
  text-align: center;
}
.vilo-os-menue .vilo-os-kurz {
  margin-left: auto;
  padding-left: 18px;
  font-size: 12px;
  white-space: nowrap;
  color: rgba(255, 255, 255, .5);
}
.vilo-os-menue .vilo-os-eintrag:focus {
  background-color: #3b82f6;
  color: #fff;
  outline: none;
}
.vilo-os-menue .vilo-os-eintrag:focus .vilo-os-kurz,
.vilo-os-menue .vilo-os-eintrag:hover .vilo-os-kurz {
  color: rgba(255, 255, 255, .85);
}
.vilo-os-menue .vilo-os-eintrag:disabled,
.vilo-os-menue .vilo-os-eintrag:disabled:hover {
  color: rgba(255, 255, 255, .28);
  background-color: transparent;
  cursor: default;
}
.vilo-os-menue .vilo-os-eintrag:disabled .vilo-os-kurz {
  color: rgba(255, 255, 255, .28);
}
.vilo-os-menue .vilo-os-trenner {
  margin: 4px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.vilo-os-menue .vilo-os-kopf {
  padding: 6px 12px 3px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, .55);
}
/* Steht das Menü über einer Kachel, liegt deren Name (Tooltip des Bundles) darunter. */
html[data-vilo-os-menue="dock"] .glass-dock .dock-item [class*="-top-12"] {
  opacity: 0 !important;
}


/* ── 4 · Der App-Umschalter ───────────────────────────────────────────────────────────────
 * Dasselbe dunkle Glas wie Suche und Dock-Mediathek (`#vilo-dk-leiste` im Kernel), ohne
 * Unterstützung die deckende Platte. Die gewählte App trägt eine helle Fläche, ihr Name steht
 * darunter — eine Zeile, wie am Mac. */
.vilo-os-um {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 9997;
  max-width: calc(100vw - 48px);
  padding: 16px 16px 12px;
  border-radius: 26px;
  background: rgba(28, 28, 32, .55);
  -webkit-backdrop-filter: blur(30px) saturate(200%) brightness(.14);
  backdrop-filter: blur(30px) saturate(200%) brightness(.14);
  border: 1px solid rgba(255, 255, 255, .10);
  outline: none;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .vilo-os-um { background: #1c1c20; }
}
/* Die ersten 120 ms durchsichtig: ein kurzes Antippen zeigt die Fläche nie. Nicht `hidden` —
   eine verborgene Fläche nimmt keinen Fokus, und die weiteren Tasten sollen hier ankommen. */
.vilo-os-um.vilo-os-um--warte {
  opacity: 0;
}
.vilo-os-um-reihe {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.vilo-os-um-app {
  width: 88px;
  height: 88px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
}
.vilo-os-um-app--an {
  background-color: rgba(255, 255, 255, .16);
}
.vilo-os-um .vilo-search-ico {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 15px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, .08);
}
.vilo-os-um .vilo-search-ico > div {
  width: 64px !important;
  height: 64px !important;
  border-radius: 15px !important;
  box-shadow: none !important;
}
.vilo-os-um .vilo-search-ico svg {
  width: 32px !important;
  height: 32px !important;
}
.vilo-os-um-name {
  margin-top: 10px;
  min-height: 18px;
  text-align: center;
  font: 600 14px/18px -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  color: rgba(255, 255, 255, .92);
}


/* ── 5 · Die Fahrt ins Dock ───────────────────────────────────────────────────────────────
 * DIE LOGIK ÄNDERT SICH SOFORT, DAS BILD FOLGT: `data-vilo-minimized` steht vom ersten
 * Augenblick an, die Rolle hält das Fenster für die Fahrt im Bild — und VOR den anderen: der
 * Fokus ist schon beim nächsten Fenster, und ohne das flöge es hinter ihm durch (gemessen); unter
 * dem Dock (9990) bleibt es, es fährt ja hinein. Sie steht STRIKT über der
 * Verbergen-Regel des Kernels ((0,4,1) gegen (0,2,0), beide `!important`) — der Kernel hängt
 * seinen Stil zur Laufzeit NACH diese Datei, ein Gleichstand verlöre. „weg" nimmt nach der
 * Fahrt das Nachblenden der Verbergen-Regel, sonst stünde das Fenster für 0,22 s noch einmal
 * in voller Grösse da. */
html[data-vilo-class="wide"] .window-shadow[data-vilo-minimized][data-vilo-os-fahrt="hin"] {
  visibility: visible !important;
  opacity: 1 !important;
  transition: none !important;
  pointer-events: none !important;
  z-index: 9989 !important;
}
html[data-vilo-class="wide"] .window-shadow[data-vilo-minimized][data-vilo-os-fahrt="weg"] {
  transition: none !important;
}
html[data-vilo-class="wide"] .window-shadow[data-vilo-os-fahrt="her"] {
  pointer-events: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .vilo-os-titel,
  .vilo-os-app {
    transition: none;
  }
}