/* ═══════════════════════════════════════════════════════════════════════════
   popup.css — PopUp-Meldungen (DEV-LOG [131]).

   Geladen von der Seite (nach form.css) UND vom Bedienfeld (Vorschau im Tab
   „Seiten"). Das Markup baut popupRender() in lib/popups.php — für beide Orte
   dasselbe.

   AUF DER SEITE EIN <dialog>. Mit Abdunkeln öffnet popup.js es per
   showModal(): es liegt dann im Top Layer (über allem, ohne z-index), die
   Seite dahinter ist inert, der ::backdrop dunkelt ab. Ohne Abdunkeln per
   show(): ein gewöhnliches fixiertes Element, die Seite bleibt bedienbar.

   FARBEN UND MASSE KOMMEN ALS VARIABLEN an der Klasse des PopUps an
   (popupCss(), per ckStyle()): --sec-bg/--sec-fg wie in einer Sektion, damit
   Rollen und Button-Presets dieselben Rückfälle finden, dazu --pop-*. Ein
   Token wird dort zu var(--ci-N) — hier steht kein Farbwert (Regel 2).

   Der Mobilblock steht bei BP_MOBILE (566 px) — der Selbsttest hält die Zahl
   mit den anderen Stylesheets zusammen.
   ═══════════════════════════════════════════════════════════════════════════ */

.pop {
  box-sizing: border-box;
  position: fixed;
  z-index: 150;                       /* über dem Kopf (100), unter der Großansicht (300) */
  margin: 0;
  border: 0;
  /* Innenabstand je Kante (DEV-LOG [133]). */
  padding: var(--pop-pt, 2rem) var(--pop-pr, 2rem) var(--pop-pb, 2rem) var(--pop-pl, 2rem);
  /* Breite aus dem Preset - „Angepasst" ist fit-content (so breit wie der
     Inhalt). Deshalb width + max-width und kein min(): fit-content ist in
     min() ungültig, die Regel fiele ganz weg. */
  width: var(--pop-w, 30rem);
  max-width: calc(100vw - 2rem);
  max-height: calc(100dvh - 2rem);
  overflow: auto;
  overscroll-behavior: contain;
  border-radius: var(--pop-rad, 0.25rem);
  background: var(--sec-bg);
  color: var(--sec-fg);
  line-height: 1.5;
}
/* Das UA-Stylesheet gibt dem geschlossenen <dialog> display:none — unsere
   Regeln oben setzen kein display und lassen das stehen. */
.pop:focus { outline: none; }

/* MITTIG: waagerecht und senkrecht. inset 0 + margin auto zentriert ein
   fixiertes Element, wenn Breite und Höhe feststehen — die Höhe folgt dem
   Inhalt (fit-content). */
.pop--center { inset: 0; margin: auto; height: fit-content; }

/* UNTEN LINKS: die Abstände aus dem Preset greifen NUR hier — „mittig" liest
   --pop-b/--pop-l gar nicht. */
.pop--corner {
  inset: auto auto var(--pop-b, 1.5rem) var(--pop-l, 1.5rem);
  max-width: calc(100vw - 2 * var(--pop-l, 1.5rem));
  max-height: calc(100dvh - var(--pop-b, 1.5rem) - 1rem);
}
/* Angemeldet steht unten die Adminleiste (fest, 300) — das Eck-PopUp rückt
   darüber. Im Rahmen der Mobilansicht gibt es keine. */
.ck-admin:not(.ck-vp) .pop--corner { bottom: calc(var(--pop-b, 1.5rem) + 2.6rem); }

/* DER SCHATTEN: Größe = Unschärfe (der Versatz nach unten ist ein Drittel
   davon), Stärke = Deckkraft des Schwarz. */
.pop--shadow {
  box-shadow: 0 calc(var(--pop-shs, 1.5rem) / 3) var(--pop-shs, 1.5rem)
              color-mix(in srgb, var(--ci-black) var(--pop-sha, 28%), transparent);
}

/* ABDUNKELN: der ::backdrop erbt die Variablen seines <dialog>. Ohne
   Abdunkeln ist das PopUp nicht modal und hat gar keinen Backdrop. */
.pop::backdrop {
  background: color-mix(in srgb, var(--ci-black) var(--pop-dim, 0%), transparent);
}
/* Die Seite scrollt nicht weiter, solange ein modales PopUp offen ist. */
html:has(.pop:modal) { overflow: hidden; }

/* ── Inhalt ─────────────────────────────────────────────────────────────── */
.pop__in {
  display: flex;
  flex-direction: column;
  gap: var(--pop-gap, 1rem);
}
/* Die Schrift kommt aus der Rolle (.t-<rolle>, typoRolesCss()); ein leerer
   Teil steht gar nicht im Markup und nimmt deshalb auch keinen Abstand. */
.pop__t p + p { margin-top: 0.8em; }
.pop__acts { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.pop__btn { cursor: pointer; }

.pop--a-center .pop__in { text-align: center; }
.pop--a-center .pop__acts { justify-content: center; }
.pop--a-end .pop__in { text-align: end; }
.pop--a-end .pop__acts { justify-content: flex-end; }

/* ── Einblenden ─────────────────────────────────────────────────────────── */
@keyframes pop-in { from { opacity: 0; translate: 0 0.8rem; } }
@keyframes pop-dim { from { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .pop[open] { animation: pop-in 0.3s ease-out; }
  .pop[open]::backdrop { animation: pop-dim 0.3s ease-out; }
}

/* ── Vorschau im Bedienfeld ─────────────────────────────────────────────── */
/* Dort ist das PopUp ein <div> in einer Fläche, die ein Browserfenster
   darstellt — absolut statt fixiert, sonst stünde es am Rand des Bedienfelds. */
.pop.pop--pv { position: absolute; z-index: 1; max-width: calc(100% - 2rem); }
.pop--corner.pop--pv { max-width: calc(100% - 2 * var(--pop-l, 1.5rem)); }

/* ── Mobil ──────────────────────────────────────────────────────────────── */
@media (max-width: 566px) {
  /* Das Eck-PopUp geht über die ganze Breite, links und rechts derselbe Rand. */
  .pop--corner { right: var(--pop-l, 1.5rem); width: auto; max-width: none; }
}