/* Aus dem Prototyp V3 übernommen (Stilblock Zeilen 2369–2468): „Alles
   zurücksetzen“ — der Knopf am rechten Ende der unteren Leiste und die
   Schau, die vor dem Zurücksetzen zeigt, was gleich verschwindet
   (ui/reset.js). */

/* Dieselbe Geste, dieselbe Scheibe und dieselben Zeiten wie beim Eimer der
   Bildreihe; nur das Zeichen ist der Rücknahmepfeil des Promptfeldes. Die
   Winkel-Eigenschaft --lw-fuell ist in canvas.css angemeldet. */
#alles-zurueck {
  position: relative;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  background: none;
  border: none;
  margin-left: auto;
  padding: 0;
  margin-right: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--zeichen-ruhe);
  transition: color 0.12s;
}
#alles-zurueck:hover {
  color: var(--black);
}
#alles-zurueck svg {
  position: relative;
  z-index: 1;
}
#alles-zurueck::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  border-radius: 50%;
  z-index: 0;
  --lw-fuell: 0deg;
  background: conic-gradient(from 45deg, var(--red) var(--lw-fuell), transparent 0);
  transition: --lw-fuell 0.44s cubic-bezier(0.4, 0, 0.3, 1);
}
body.zurueckmodus #alles-zurueck::before {
  --lw-fuell: 360deg;
}
/* Geladen steht das Zeichen SCHWARZ auf der roten Scheibe, wie der Eimer. */
body.zurueckmodus #alles-zurueck,
body.zurueckmodus #alles-zurueck:hover {
  color: var(--black);
  transition: color 0.44s cubic-bezier(0.4, 0, 0.3, 1);
}
body.zurueckmodus #alles-zurueck svg {
  stroke-width: 1.25;
}

/* ── DIE SCHAU VOR DEM ZURÜCKSETZEN ──────────────────────────────
   Liegt der Knopf auf dem Rücken, zeigt die App zuerst, was der nächste
   Klick wegnimmt: beide Aufklappmenüs und beide Leisten stehen offen, und
   ALLES darin steht rot — Beschriftungen, Chips, Tags, Felder, Knöpfe,
   Zeichen, die Materialplätze. Die Kopfleiste oben rechts bleibt, wie sie
   ist: Anmeldung und Sprache setzt der Knopf nicht zurück. Ausgenommen
   bleibt der Knopf selbst und die OBERE Leiste: dort liegen Bilder, keine
   Einstellungen. */
body.zurueckmodus #panel .sec-label,
body.zurueckmodus #panel .chip,
body.zurueckmodus #panel .tag,
body.zurueckmodus #panel .geo-btn,
body.zurueckmodus #panel textarea,
body.zurueckmodus #panel input,
body.zurueckmodus #panel select,
body.zurueckmodus #panel button,
body.zurueckmodus aside.ctx,
body.zurueckmodus aside.ctx button,
body.zurueckmodus aside.ctx input,
body.zurueckmodus aside.ctx span,
body.zurueckmodus #hist button:not(#alles-zurueck),
body.zurueckmodus #hist .batch-btn,
body.zurueckmodus #hist .batch-cell {
  color: var(--red);
}
/* Der Platzhalter trägt seine eigene Farbe und braucht darum seine eigene
   Zeile — sonst bliebe die Freie Beschreibung als einzige grau. */
body.zurueckmodus #panel textarea::placeholder,
body.zurueckmodus #panel input::placeholder,
body.zurueckmodus aside.ctx input::placeholder {
  color: var(--red);
  opacity: 1;
}
/* Die Kontur der eingeschalteten Chips färbt sich mit — sie hängt an
   currentColor und stünde sonst schwarz um die rote Schrift. */
body.zurueckmodus #panel .chip.on,
body.zurueckmodus #panel .tag.on,
body.zurueckmodus #panel #uprompt.has-text {
  -webkit-text-stroke-color: currentColor;
}
/* Was in der Leiste nicht mit der Schriftfarbe zeichnet, sondern mit
   eigenem Strich und eigener Füllung — die beiden Feststeller, der Würfel
   als Fläche, der Kern der Sonne —, wird hier einzeln rot. */
body.zurueckmodus #hist #shuffle-an circle {
  fill: var(--red);
}
body.zurueckmodus #leisten-pin .pin-frame,
body.zurueckmodus #panel-pin .pin-frame {
  stroke: var(--red);
}
body.zurueckmodus #leisten-pin .lp-bar {
  fill: var(--red);
}
body.zurueckmodus #panel-pin .pin-tri {
  fill: var(--red);
}
body.zurueckmodus #panel-pin .pin-bar {
  stroke: var(--red);
}
/* A/B: die beiden Buchstaben tragen ihre eigene Farbe, und der Strich
   zwischen ihnen ist ein Farbverlauf im ::before. */
body.zurueckmodus #ab-btn .ab-a,
body.zurueckmodus #ab-btn .ab-b {
  color: var(--red);
}
body.zurueckmodus #ab-btn::before {
  background: linear-gradient(
    to bottom right,
    transparent calc(50% - 0.5px),
    var(--red) calc(50% - 0.5px),
    var(--red) calc(50% + 0.5px),
    transparent calc(50% + 0.5px)
  );
}
body.zurueckmodus.sonne-aktiv #sonne-btn .so-btn-kern {
  fill: var(--red);
  stroke: var(--red);
}
/* Was noch nicht an der Reihe ist, steht sonst blass und grau da. In der
   Schau soll man alles lesen können, was gleich verschwindet. */
body.zurueckmodus .panel-scroll > .stufe-zu {
  opacity: 1;
  filter: none;
}
/* Die Randpfeile stehen rot, zeigen sich aber weiterhin NUR, wo es noch
   weitergeht (Klasse „an“). */
body.zurueckmodus .panel-pfeil > i {
  background: var(--red);
}
/* Die Materialplätze tragen ihre rote Fläche. */
body.zurueckmodus .mat-slot::after {
  opacity: 0.7;
}