/* Rueckfragen und Rueckwege (frage.js).
 *
 * Alle Farben, Radien und Zeiten kommen aus den Marken-Variablen in
 * styles.css. Nichts hier ist fest gesetzt - sonst stuende der Dialog im
 * dunklen Thema als weisses Rechteck da, und jede spaetere Aenderung an der
 * Marke ginge an ihm vorbei.
 *
 * Die Knoepfe tragen die vorhandenen Klassen .btn / .btn.primary / .btn.danger
 * aus styles.css. Ein eigener Knopfstil waere ein zweiter Knopfstil - und
 * spaetestens beim naechsten Feinschliff sehen die beiden verschieden aus.
 */

/* ------------------------------------------------------------- Die Ebene */

.frg-ebene {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  /* Gleicher Schleier wie .overlay in styles.css: Eine Frage, die anders
     abdunkelt als die Dialoge darunter, wirkt wie ein fremdes Fenster. */
  background: rgba(11, 11, 11, .45);
  backdrop-filter: blur(3px);
  animation: frg-ebene-auf var(--dur-schnell) var(--easing);
}

@keyframes frg-ebene-auf {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* -------------------------------------------------------------- Das Blatt */

.frg-blatt {
  /* Schmal halten. Eine Frage, die so breit ist wie ein Formular, sieht aus
     wie ein Formular - und wird ueberflogen statt gelesen. */
  width: min(420px, 100%);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
  /* Der leichte Auftritt von unten sagt "das gehoert zur Seite" statt
     "der Browser meldet sich". */
  animation: frg-blatt-auf var(--dur-normal) var(--easing);
}

@keyframes frg-blatt-auf {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to { opacity: 1; transform: none; }
}

/* Gefaehrliche Handlung: EIN ruhiger Streifen an der Oberkante, sonst nichts.
 * Bewusst kein roter Kasten und kein Warndreieck - ein Dialog, der schreit,
 * wird weggeklickt statt gelesen. Der Streifen faellt beim Hinsehen auf und
 * unterscheidet die Frage von der harmlosen daneben; mehr braucht es nicht.
 * Er ist mit --border gemischt, damit er im dunklen Thema nicht gleisst. */
.frg-blatt.gefahr {
  border-top: 3px solid color-mix(in srgb, var(--critical) 55%, var(--border));
  padding-top: 22px;
}

.frg-titel {
  margin: 0;
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-primary);
}

.frg-text {
  margin-top: 12px;
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--text-secondary);
  /* Einfache Umbrueche aus dem Text bleiben stehen. Die Texte kommen zum Teil
     aus Waechtern ("Der Rapport ist noch nicht gespeichert."), die ihre eigene
     Gliederung mitbringen. */
  white-space: pre-line;
}

.frg-text p { margin: 0 0 8px; }
.frg-text p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ Fuss */

.frg-fuss {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 20px;
}

/* Auf dem Handy untereinander und ueber die ganze Breite - nebeneinander sind
 * zwei Knoepfe dort so schmal, dass man den falschen trifft.
 *
 * column-reverse dreht die Reihenfolge: Der zustimmende Knopf steht OBEN, der
 * Abbruch unten am Daumen. Wer das Handy in einer Hand haelt, trifft zuerst
 * den Abbruch - und der ist der ungefaehrliche von beiden. */
@media (max-width: 480px) {
  .frg-fuss { flex-direction: column-reverse; }
  .frg-fuss .btn { width: 100%; justify-content: center; }
}

/* --------------------------------------------------------- Der Rueckweg */

.frg-rueckweg {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  /* Ueber den Meldungen der App (z-index 100 bis 120), unter der Frageebene
     (900): Eine Frage, die sich oeffnet, gehoert nach vorn. */
  z-index: 200;
  width: min(420px, calc(100vw - 32px));
  background: var(--text-primary);
  color: var(--surface-1);
  border-radius: 12px;
  box-shadow: var(--shadow);
  overflow: hidden;
  animation: frg-rueckweg-auf var(--dur-normal) var(--easing);
}

@keyframes frg-rueckweg-auf {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

.frg-rueckweg-zeile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 12px 16px;
}

.frg-rueckweg-text {
  flex: 1;
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1.4;
}

.frg-rueckweg-knopf {
  flex: none;
  /* Der Rueckweg ist das einzige Bedienbare hier und muss auch so aussehen:
     eigener Rahmen statt blosser Textlink. Ein unterstrichenes Wort in einer
     Meldung uebersieht man. */
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .35);
  color: inherit;
  font: inherit;
  font-size: var(--fs-md);
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: background var(--dur-schnell) var(--easing);
}

.frg-rueckweg-knopf:hover { background: rgba(255, 255, 255, .14); }

.frg-rueckweg-knopf:focus-visible {
  outline: 2px solid var(--surface-1);
  outline-offset: 2px;
}

/* Die ablaufende Frist als schmaler Streifen an der Unterkante. Er zeigt, wie
 * viel Zeit bleibt - ohne Zahl, die man erst lesen muesste. Die Dauer setzt
 * frage.js als --frg-dauer, damit beide dasselbe meinen. */
.frg-rueckweg-balken {
  height: 3px;
  background: var(--accent);
  transform-origin: left center;
  animation: frg-frist var(--frg-dauer, 8000ms) linear forwards;
}

@keyframes frg-frist {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

/* ------------------------------------------------------ Weniger Bewegung */

/* Wer Bewegung abgestellt hat, bekommt keine. Der Fristbalken bleibt trotzdem
 * in Bewegung: Er ist keine Verzierung, sondern die einzige Anzeige, wie viel
 * Zeit zum Zurueckholen noch bleibt. Ihn stillzustellen hiesse, die Auskunft
 * wegzunehmen statt die Unruhe. */
@media (prefers-reduced-motion: reduce) {
  .frg-ebene,
  .frg-blatt,
  .frg-rueckweg {
    animation: none;
  }
}