/* Operian OS — SCHREIBTISCHE auf dem Desktop: Pille, Fahrt, Übersicht
 * ============================================================================
 *
 * Vorgabe Betreiber (2026-10-02): mehrere Arbeitsflächen wie am Mac, gewechselt mit zwei
 * Fingern auf dem Trackpad, mit der Maus oder der Tastatur — „1:1 auch mit den drei Punkten
 * und dem Button, wo man alle Desktops in klein sehen kann".
 *
 *   Schreibtisch 1   Widgets + Fenster;  2 … freie Arbeitsflächen;  rechts ein leerer
 *   über dem Dock    die PILLE: ein Punkt je Schreibtisch und „Alle Schreibtische"
 *   Übersicht        alle Schreibtische in klein — die Karten SIND die Fenster
 *
 * Logik, Gesten, Zustand: assets/kernel.js, Block „Schreibtische". Jede Regel hier hängt an
 * `data-vilo-sd-an` (nur Klasse `wide`, angemeldet) oder an einem Element, das der Kernel nur
 * dort anlegt — Telefon und iPad sehen keine einzige. Keine Schatten (Stilregel).
 *
 * ZWEI SPEZIFITÄTEN TRAGEN, und beide sind Absicht: der Kernel hängt seine Regel für
 * verborgene Fenster (`.window-shadow[data-vilo-minimized]`, (0,2,0) mit !important) zur
 * LAUFZEIT ans Ende des <head>, also NACH diese Datei. Wer sie überstimmen muss (Rolle, Karte,
 * Stillstand), steht deshalb strikt darüber — (0,3,1) und mehr —, nie gleichauf.
 * ==========================================================================*/


/* ── 1 · Die Fahrt ─────────────────────────────────────────────────────────────
 * Während ein Schreibtisch gleitet, hält die ROLLE seine Fenster im Bild, auch wenn die
 * Logik sie schon verborgen hat; der Kernel bewegt sie über `translate` (die Lage eines
 * Fensters steht im `transform` von framer und bleibt unberührt). Mit dem Zug des Fingers
 * folgt die Variable, danach eine Animation. Unter dem Finger fängt ein gleitendes Fenster
 * keinen Zeiger: die Maus läge sonst auf einem iframe, und die Shell bekäme nichts mehr. */
html[data-vilo-sd-an] .window-shadow[data-vilo-sd-rolle],
html[data-vilo-sd-an] .vilo-dw-layer[data-vilo-sd-rolle] {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: none !important;
  transition: none !important;
  translate: var(--vilo-sd-versatz, 0px) 0;
}
/* Einen Frame lang nach einer Fahrt: ein gehendes Fenster verliert seine Rolle und wäre sonst
   für 0,22 s an seinem alten Platz zu sehen, wo es erst ausblendete. */
html[data-vilo-sd-still] .window-shadow[data-vilo-minimized],
html[data-vilo-sd-still] .window-shadow,
html[data-vilo-sd-still] .vilo-dw-layer {
  transition: none !important;
}
/* Die Widgets liegen nur auf Schreibtisch 1. Verborgen, nicht entfernt: ihre iframes leben
   weiter, beim Zurückblättern lädt nichts neu. */
html[data-vilo-sd-weg] .vilo-dw-layer {
  visibility: hidden;
}
/* Mit der Maus beginnt der Bundle auf der freien Fläche seinen Auswahlrahmen (er wählt nichts,
   er malt nur). Solange die Schreibtische der Maus folgen, steht er nicht im Bild — dasselbe
   gilt für die Seiten am iPad (Block „Seiten"). */
html[data-vilo-kein-rahmen] .desktop-bg.relative > div.pointer-events-none[class*="z-[9998]"] {
  display: none !important;
}
/* Seitlich gehört die Fläche dem Kernel: Chromes Zurück-Geste (zwei Finger) verliesse sonst
   die Shell, und ein Finger auf einem Touch-Bildschirm würde seitlich gerollt statt geführt. */
html[data-vilo-sd-an],
html[data-vilo-sd-an] body {
  overscroll-behavior-x: none;
}
html[data-vilo-sd-an] .desktop-bg-click {
  touch-action: pan-y;
}


/* ── 2 · Ein maximiertes Fenster auf einem ANDEREN Schreibtisch ────────────────
 * Es bleibt maximiert (der Kernel nimmt den Zustand nicht zurück, sonst fährt es beim
 * Zurückblättern mit einem Tween des Bundles herein). Der Bundle fährt aber Leiste und Dock
 * aus dem Bild, solange IRGENDEIN nicht-minimiertes Fenster maximiert ist — auch dieses.
 * Trägt der gezeigte Schreibtisch selbst kein maximiertes Fenster (kein
 * `data-vilo-fullscreen`), holen diese zwei Regeln beide zurück; !important schlägt den
 * Transform von framer. */
html[data-vilo-sd-verdeckt]:not([data-vilo-fullscreen]) div[class*="z-[9999]"].glass-dock {
  transform: none !important;
}
html[data-vilo-sd-verdeckt]:not([data-vilo-fullscreen]) div[class*="bottom-4"][class*="justify-center"] > div {
  transform: none !important;
  opacity: 1 !important;
}

/* Ein leerer Schreibtisch hat keine vordere App. Der Bundle führt aber weiter das zuletzt
   fokussierte Fenster als aktiv — sein Name und seine Menüs stünden über einer leeren Fläche,
   und ein Menü dort wirkte auf ein Fenster, das man nicht sieht. Also: nur das Logo, wie auf
   dem Home-Bildschirm (menubar-desktop.css). Ein MINIMIERTES Fenster des gezeigten
   Schreibtischs zählt als „da" — dort gilt weiter die macOS-Lesart aus menubar-desktop.css. */
html[data-vilo-sd-leer] div[class*="z-[9999]"] > div:first-child > span.text-white\/80.text-xs.font-semibold.px-2,
html[data-vilo-sd-leer] div[class*="z-[9999]"].glass-dock > div:first-child > div.flex.items-center.gap-0.ml-1 {
  display: none;
}


/* ── 3 · Die Pille ─────────────────────────────────────────────────────────────
 * Über dem Dock, mittig in der Bühne (Kind von `.desktop-bg.relative`, damit sie mittig
 * bleibt, wenn die Assistenten-Bahn die Bühne schmälert). Ein Punkt je Schreibtisch, der
 * gezeigte als Kapsel, rechts „Alle Schreibtische". Dasselbe Glas wie die Pille am iPhone —
 * seit 2026-10-02 das helle des Docks darunter (Vorgabe Betreiber: die dunkle Glaszeile der
 * Suche über der hellen Dock-Pille war „ein zu starker Bruch"); ohne Unterstützung die
 * deckende Platte. Die Höhe des Docks misst der
 * Kernel (`--vilo-sd-dock`). */
.vilo-sd-pille {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: max-content;
  bottom: calc(16px + var(--vilo-sd-dock, 92px) + 10px);
  height: 32px;
  box-sizing: border-box;
  padding: 0 2px 0 6px;
  border-radius: 16px;
  z-index: 9989;
  display: none;
  align-items: center;
  gap: 2px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: #1a1c22;
  color: rgba(255, 255, 255, .88);
  font: 600 13px/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .vilo-sd-pille {
    background: rgba(255, 255, 255, .12);
    -webkit-backdrop-filter: blur(50px) saturate(200%);
    backdrop-filter: blur(50px) saturate(200%);
  }
}
html[data-vilo-sd-an]:not([data-vilo-fullscreen]):not([data-vilo-sd-ueb]):not([data-vilo-dw]):not([data-vilo-dock-edit]) .vilo-sd-pille {
  display: flex;
}
.vilo-sd-punkte {
  display: flex;
  align-items: center;
  height: 100%;
}
/* 22×30 je Punkt (WCAG 2.5.8: 24 px Abstand der Mitten); gezeichnet ist der 6-px-Punkt, der
   gezeigte als Kapsel. Jeder Punkt IST ein Knopf — .4 auf dem Glas hält 3.4:1 (1.4.11). */
.vilo-sd-punkt {
  width: 24px;
  height: 30px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.vilo-sd-punkt::before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .4);
  transition: width .2s ease, background-color .2s ease;
}
.vilo-sd-punkt:hover::before {
  background: rgba(255, 255, 255, .7);
}
.vilo-sd-punkt[aria-current="true"]::before {
  width: 16px;
  background: #fff;
}
.vilo-sd-uebersicht {
  width: 30px;
  height: 28px;
  margin: 0 0 0 4px;
  padding: 0;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, .14);
  border-radius: 0 14px 14px 0;
  background: transparent;
  color: rgba(255, 255, 255, .78);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.vilo-sd-uebersicht:hover {
  color: #fff;
}
.vilo-sd-uebersicht svg {
  width: 17px;
  height: 17px;
  display: block;
}
.vilo-sd-punkt:focus-visible,
.vilo-sd-uebersicht:focus-visible {
  outline: 2px solid #8b5cf6;
  outline-offset: -3px;
  border-radius: 8px;
}
@media (prefers-reduced-motion: reduce) {
  .vilo-sd-punkt::before { transition: none; }
}
.vilo-sd-ansage {
  position: fixed;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* ── 4 · Die Übersicht ─────────────────────────────────────────────────────────
 * Schichten (in der Bühne): GRUND z 5 · RAHMEN (Hintergrund im Kleinen) z 6 · Widget-Ebene
 * z 7 · Fenster ab z 20 (Rang des Kernels, `--vilo-sd-z`). Davor, im <body>, die PLÄTZE
 * (z 9993): je Karte ein Knopf, der die Klicks und das Ziehen fängt. Die Menüleiste (z 9999)
 * bleibt bedienbar, der Dock tritt ab. */
@keyframes vilo-sd-ein {
  from { opacity: 0; }
}
.vilo-sd-grund {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: rgba(8, 8, 12, .72);
  pointer-events: none;
  animation: vilo-sd-ein .25s ease;
  transition: opacity .25s ease;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .vilo-sd-grund {
    background: rgba(8, 8, 12, .5);
    -webkit-backdrop-filter: blur(24px) saturate(160%) brightness(.6);
    backdrop-filter: blur(24px) saturate(160%) brightness(.6);
  }
}
html[data-vilo-sd-ueb="zu"] .vilo-sd-grund {
  opacity: 0;
}
html[data-vilo-sd-ueb] div[class*="bottom-4"][class*="justify-center"] {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .2s ease;
}
.vilo-sd-rahmen {
  position: absolute;
  z-index: 6;
  overflow: hidden;
  border-radius: 12px;
  outline: 1px solid rgba(255, 255, 255, .18);
  background-size: cover;
  background-position: center;
  pointer-events: none;
  transition: left .32s cubic-bezier(.32, .72, 0, 1), top .32s cubic-bezier(.32, .72, 0, 1),
    width .32s cubic-bezier(.32, .72, 0, 1), height .32s cubic-bezier(.32, .72, 0, 1),
    border-radius .32s ease, opacity .2s ease;
}
.vilo-sd-rahmen[data-voll] {
  border-radius: 0;
  outline-color: transparent;
}
.vilo-sd-rahmen[data-ein] {
  opacity: 0;
  transition: none;
}
.vilo-sd-rahmen[data-aus] {
  opacity: 0;
}
/* Die Karten SIND die Fenster: verkleinert um die linke obere Ecke, an ihren Platz verschoben
   (sdVersatz rechnet, dass der Transform von framer dabei herausfällt). Ein verborgenes Fenster
   eines anderen Schreibtischs ist hier im Bild; bedient wird keines — die Plätze davor nehmen
   die Zeiger. */
html[data-vilo-sd-an] .window-shadow[data-vilo-sd-karte],
html[data-vilo-sd-an] .vilo-dw-layer[data-vilo-sd-karte] {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: none !important;
  transform-origin: 0 0 !important;
  translate: var(--vilo-sd-tx, 0px) var(--vilo-sd-ty, 0px);
  scale: var(--vilo-sd-s, 1);
  transition: translate .32s cubic-bezier(.32, .72, 0, 1), scale .32s cubic-bezier(.32, .72, 0, 1), opacity .2s ease !important;
}
html[data-vilo-sd-an] .window-shadow[data-vilo-sd-karte] {
  z-index: var(--vilo-sd-z, 20) !important;
}
html[data-vilo-sd-an] .vilo-dw-layer[data-vilo-sd-karte] {
  z-index: 7 !important;
}
html[data-vilo-sd-an] .window-shadow[data-vilo-sd-karte][data-vilo-sd-ein],
html[data-vilo-sd-an] .vilo-dw-layer[data-vilo-sd-karte][data-vilo-sd-ein] {
  opacity: 0 !important;
  transition: none !important;
}
html[data-vilo-sd-an] .window-shadow[data-vilo-sd-karte][data-vilo-sd-aus],
html[data-vilo-sd-an] .vilo-dw-layer[data-vilo-sd-karte][data-vilo-sd-aus] {
  opacity: 0 !important;
}
html[data-vilo-sd-an] .window-shadow[data-vilo-sd-karte][data-vilo-sd-zug] {
  z-index: 9000 !important;
  transition: none !important;
}
.vilo-sd-front {
  position: fixed;
  inset: 0;
  z-index: 9993;
  animation: vilo-sd-ein .2s ease;
  transition: opacity .2s ease;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
html[data-vilo-sd-ueb="zu"] .vilo-sd-front {
  opacity: 0;
  pointer-events: none;
}
.vilo-sd-platz {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  outline: 2px solid transparent;
  outline-offset: 4px;
  transition: left .32s cubic-bezier(.32, .72, 0, 1), top .32s cubic-bezier(.32, .72, 0, 1),
    width .32s cubic-bezier(.32, .72, 0, 1), height .32s cubic-bezier(.32, .72, 0, 1), outline-color .15s ease;
}
.vilo-sd-platz:hover {
  outline-color: rgba(255, 255, 255, .4);
}
.vilo-sd-platz[aria-current="true"] {
  outline-color: rgba(255, 255, 255, .9);
}
.vilo-sd-platz[data-ziel] {
  outline: 3px solid #8b5cf6;
}
.vilo-sd-platz:focus-visible {
  outline: 3px solid #8b5cf6;
}
html[data-vilo-sd-zieht] .vilo-sd-platz {
  cursor: grabbing;
}
.vilo-sd-name {
  position: absolute;
  left: 50%;
  top: calc(100% + 14px);
  translate: -50% 0;
  white-space: nowrap;
  color: rgba(255, 255, 255, .92);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
  pointer-events: none;
}
.vilo-sd-platz[data-leer] .vilo-sd-name {
  color: rgba(255, 255, 255, .7);
}
@media (prefers-reduced-motion: reduce) {
  .vilo-sd-grund,
  .vilo-sd-front { animation: none; transition: none; }
  .vilo-sd-rahmen,
  .vilo-sd-platz { transition: none; }
  html[data-vilo-sd-an] .window-shadow[data-vilo-sd-karte],
  html[data-vilo-sd-an] .vilo-dw-layer[data-vilo-sd-karte] { transition: none !important; }
}