/* ══ Mac-Schicht: Dialoge nach Mac-Art (M2, seit 25.10.2026) ════════════
   Gegenstück zu bedienung.js. Jede Regel hängt an html.mac (mac-frueh.js);
   am iPhone kommen die Dialoge als Blatt von unten (handy-huelle.css), am
   iPad und in der klassischen Ansicht bleiben sie, wie sie waren.

   Ein Blatt am Mac hängt an der Unterkante der Symbolleiste (gemessen in
   bedienung.js, --mac-blatt-oben), der Grund dahinter wird nur leicht
   abgedunkelt und nicht weichgezeichnet: Man sieht noch, woran man gerade
   war. Vorher verschwamm die ganze Seite (styles.css 3 px, die Farbwelten
   10 px), und der Dialog stand in der Fenstermitte. */

html.mac { --mac-schleier: rgb(0 0 0 / .14); }
html.mac[data-theme="dark"] { --mac-schleier: rgb(0 0 0 / .34); }

html.mac .modal-overlay {
  align-items: flex-start;
  padding: calc(var(--mac-blatt-oben, 0px) + var(--sp-2)) var(--sp-4) var(--sp-4);
  background: var(--mac-schleier);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  /* Der zuletzt geöffnete Dialog liegt oben (Stufe aus bedienung.js), auch
     wenn er in index.html früher steht: Todo-Formular über der Karte. Unter
     den Meldungen (#toast, 500) bleibt jede Stufe. */
  z-index: calc(400 + var(--mac-stufe, 0));
}
/* Der Schleier blendet nicht ein, und das Blatt hält nach dem Hereingleiten
   keinen Endzustand fest (backwards statt both): Ein Elternteil mit laufender
   Deckkraft-Animation wird zur Grenze für backdrop-filter, dann sähe das
   Milchglas des Blatts in Glas nur den Schleier und die Seite schiene klar
   durch das Formular. */
html.mac .modal-overlay.active { animation: none; }
html.mac .modal-overlay > .modal {
  max-height: calc(100vh - var(--mac-blatt-oben, 0px) - var(--sp-2) - var(--sp-4));
  box-shadow: var(--shadow-lg);
  animation: mac-blatt-ein var(--dur-2) var(--ease-out) backwards;
}

/* Lange Blätter (Ziele, Kosten, Benachrichtigungen): Titel und Knöpfe
   bleiben stehen, nur das Teil direkt über der Knopfzeile rollt (in allen
   14 Dialogen der Inhalt, der wächst). Vorher rollte das ganze Blatt, und
   „Speichern“ stand unter dem Fensterrand. Die übrigen Teile schrumpfen nie;
   reicht das nicht, rollt wie bisher das ganze Blatt. Die 4 px Innenrand
   halten den Fokusring der Felder am Rand sichtbar. */
html.mac .modal-overlay:not(.mac-pop) > .modal > * { flex-shrink: 0; }
html.mac .modal-overlay:not(.mac-pop) > .modal > :has(+ .modal-actions) {
  flex-shrink: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
html.mac .modal-overlay:not(.mac-pop) > .modal > :has(+ .modal-actions):not([style*="padding"]) {
  margin: -4px;
  padding: 4px;
}

/* Kein ✕ im Blatt: Geschlossen wird mit „Abbrechen“ oder „Fertig“ unten
   rechts (bedienung.js setzt „Fertig“, wo es kein „Abbrechen“ gibt) und mit
   Esc. Der Knopf bleibt im DOM, Esc und „Fertig“ nehmen seinen Weg. Das
   Popover an der Karte behält ihn: Dort gibt es keine Knopfzeile, und ein
   Klick daneben schließt nicht über Getipptem. */
html.mac .modal-overlay:not(.mac-pop) .modal-header .modal-close { display: none; }

/* Den Fokus hält bei Dialogen ohne Feld der Dialog selbst (tabindex -1). */
html.mac .modal:focus { outline: none; }
/* Die beiden Wachen der Tab-Falle (bedienung.js): fokussierbar, aber
   unsichtbar und außerhalb des Flusses, sonst kämen zwei Abstände hinzu. */
html.mac .mac-wache {
  position: fixed; top: 0; left: 0;
  width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%);
}

@keyframes mac-blatt-ein {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes mac-pop-ein {
  from { opacity: 0; transform: scale(.98); }
  to   { opacity: 1; transform: none; }
}

/* ── Popover: der Karten-Dialog des Bretts an seiner Karte ──────────────
   Kein Schleier: Das Brett bleibt sichtbar, die Karte daneben auch. Lage
   aus bedienung.js (--mac-pop-x/-y), immer ganz im Fenster. */
html.mac .modal-overlay.mac-pop { background: transparent; padding: 0; animation: none; }
html.mac .modal-overlay.mac-pop > .modal {
  position: fixed;
  left: var(--mac-pop-x, var(--sp-3));
  top: var(--mac-pop-y, var(--sp-3));
  max-width: calc(100vw - 2 * var(--sp-3));
  max-height: calc(100vh - 2 * var(--sp-3));
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--border);
  animation: mac-pop-ein var(--dur-1) var(--ease) backwards;
}
html.mac .mac-popover { width: auto; min-width: 280px; }

/* ── frage, eingabe, meldung ───────────────────────────────────────────── */
html.mac .mac-frage { width: 420px; gap: var(--sp-4); padding: var(--sp-5); }
html.mac .mac-frage-text {
  margin: 0;
  /* Rückfragen aus confirm() tragen Zeilenumbrüche (M15b übernimmt sie). */
  white-space: pre-line;
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--text);
}
html.mac .mac-frage .form-group input { font-weight: var(--fw-normal); }

/* ── Menü: ⋯, Kontextmenü (bedienung.js, menue()) ───────────────────────
   Wie ein Mac-Menü: schmal, Zeilen ohne Rahmen, die markierte Zeile in der
   Akzentfarbe der Farbwelt, Kürzel rechts. Über jedem Dialog, unter den
   Meldungen. */
html.mac .mac-menue {
  position: fixed;
  left: var(--mac-menue-x, var(--sp-3));
  top: var(--mac-menue-y, var(--sp-3));
  z-index: 499;
  min-width: 200px;
  max-width: 320px;
  max-height: calc(100vh - 2 * var(--sp-3));
  overflow-y: auto;
  padding: var(--sp-1);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-lg);
  font-size: var(--fs-sm);
}
html.mac[data-skin="glas"] .mac-menue {
  backdrop-filter: saturate(1.6) blur(24px);
  -webkit-backdrop-filter: saturate(1.6) blur(24px);
}
html.mac .mac-menue:focus { outline: none; }
html.mac .mac-menue-eintrag {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  width: 100%;
  padding: var(--sp-1) var(--sp-3);
  border: 0;
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: default;
}
html.mac .mac-menue-eintrag:focus { outline: none; background: var(--brand); color: var(--brand-ink); }
html.mac .mac-menue-eintrag.gefahr { color: var(--crit-ink); }
html.mac .mac-menue-eintrag.gefahr:focus { background: var(--crit-soft); color: var(--crit-ink); }
html.mac .mac-menue-eintrag:disabled { color: var(--text-subtle); }
html.mac .mac-menue-titel { flex: 1; }
/* Spalte für den Haken einer Wahl (Hell · Dunkel · System): schmal, der
   Titel rückt dicht heran wie in den Menüs von macOS. */
html.mac .mac-menue-haken { flex: none; width: 12px; margin-right: calc(6px - var(--sp-4)); font-weight: var(--fw-semi); }
html.mac .mac-menue-kuerzel { color: var(--text-muted); font-size: var(--fs-xs); }
html.mac .mac-menue-eintrag:focus .mac-menue-kuerzel { color: inherit; }
html.mac .mac-menue-trenner { height: 1px; margin: var(--sp-1) var(--sp-3); background: var(--border); }

@media (prefers-reduced-motion: reduce) {
  html.mac .modal-overlay > .modal { animation: none; }
}