/* ===========================================================================
   AGORA — SELBSTLAUF (#/selbst)
   ===========================================================================
   Eigenes Blatt, weil die Seite eine Anordnung mitbringt, die es sonst nirgends
   gibt: eine Runde ist eine KETTE (benutzt → gefunden → gefixt → ausgerollt →
   nachgeschaut), und eine Kette ist keine Liste. ui/agora.css bleibt
   unangetastet (Owner-Regel: „nicht ungefragt anfassen").

   🔴 KEIN EIGENES #hex, KEINE FREIEN px. Jede Farbe aus den Variablen in
   agora.css (--flaeche, --flaeche-hoch, --flaeche-tief, --rahmen, --akzent,
   --akzent-hauch, --akzent-rand, --gut, --gut-grund, --warn, --warn-grund,
   --schlecht, --schlecht-grund, --gedaempft, --text), jeder Abstand aus --luft /
   --raster-abstand / --karte-innen, jede Ecke aus --radius, jede Linie aus
   --linie, jede Bewegung aus --schnell/--normal/--kurve. Zahlen hier sind
   entweder ein Faktor auf eine dieser Variablen oder ein `em`/`ch` (also an die
   Schrift gebunden).
   =========================================================================== */

.selbst-seite { max-width: none; }
.selbst-vorwort { max-width: 62ch; color: var(--gedaempft); }

/* --- Kopf: Schalter, Takt, Deckel ----------------------------------------- */
.selbst-kopf {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--kachel-min), 1fr));
  gap: var(--luft);
  margin: var(--raster-abstand) 0;
}
.selbst-kachel {
  background: var(--flaeche);
  border: var(--linie) solid var(--rahmen);
  border-radius: var(--radius);
  padding: var(--luft);
  display: flex;
  flex-direction: column;
  gap: calc(var(--luft) * .4);
}
.selbst-kachel-wort {
  font-size: var(--schrift-klein);
  color: var(--gedaempft);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.selbst-kachel-zahl {
  font-size: 1.7em;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.selbst-kachel-satz { font-size: var(--schrift-klein); color: var(--gedaempft); }
.selbst-kachel.gut { border-left: calc(var(--linie) * 3) solid var(--gut); }
.selbst-kachel.warn { border-left: calc(var(--linie) * 3) solid var(--warn); }
.selbst-kachel.schlecht { border-left: calc(var(--linie) * 3) solid var(--schlecht); }
.selbst-kachel.ruhig { border-left: calc(var(--linie) * 3) solid var(--gedaempft); }

/* Der Schalter selbst: ein Knopf, der seinen Zustand SAGT statt ihn zu zeigen.
   Ein reines Symbol wäre an dieser Stelle die falsche Sparsamkeit — hier hängt
   dran, ob das OS von allein Läufe startet. */
.selbst-schalter {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--luft) * .5);
  min-height: var(--tap);
  padding: calc(var(--luft) * .5) var(--luft);
  border-radius: var(--radius);
  border: var(--linie) solid var(--rahmen);
  background: var(--flaeche-hoch);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  transition: background var(--schnell) var(--kurve), border-color var(--schnell) var(--kurve);
}
.selbst-schalter:hover { background: var(--akzent-hauch); border-color: var(--akzent-rand); }
.selbst-schalter[data-an="1"] { background: var(--gut-grund); border-color: var(--gut); }
.selbst-schalter[disabled] { opacity: .55; cursor: default; }
.selbst-punkt {
  width: .7em; height: .7em; border-radius: 50%;
  background: var(--gedaempft);
  flex: 0 0 auto;
}
.selbst-schalter[data-an="1"] .selbst-punkt { background: var(--gut); }

/* --- Die laufende Runde ---------------------------------------------------- */
.selbst-live {
  background: var(--akzent-weich);
  border: var(--linie) solid var(--akzent-rand);
  border-radius: var(--radius);
  padding: var(--karte-innen);
  margin-bottom: var(--raster-abstand);
}
.selbst-live-schritte {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--luft) * .5);
  margin-top: calc(var(--luft) * .6);
}
.selbst-schritt {
  font-size: var(--schrift-klein);
  padding: calc(var(--luft) * .25) calc(var(--luft) * .6);
  border-radius: var(--radius);
  border: var(--linie) solid var(--rahmen);
  color: var(--gedaempft);
}
.selbst-schritt[data-jetzt="1"] {
  border-color: var(--akzent);
  background: var(--akzent-hauch);
  color: var(--text);
}
.selbst-schritt[data-durch="1"] { color: var(--gut); border-color: var(--gut); }

/* --- Die Runden ------------------------------------------------------------ */
.selbst-runde {
  background: var(--flaeche);
  border: var(--linie) solid var(--rahmen);
  border-radius: var(--radius);
  margin-bottom: var(--luft);
  overflow: hidden;
}
.selbst-runde-kopf {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: calc(var(--luft) * .6);
  padding: var(--luft) var(--karte-innen);
  background: none;
  border: 0;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  min-height: var(--tap);
}
.selbst-runde-kopf:hover { background: var(--flaeche-hoch); }
.selbst-runde-nr { font-weight: 650; }
.selbst-runde-satz { color: var(--gedaempft); font-size: var(--schrift-klein); }
.selbst-runde-zeit { margin-left: auto; color: var(--gedaempft); font-size: var(--schrift-klein); }
.selbst-runde-koerper { padding: 0 var(--karte-innen) var(--karte-innen); }

/* --- Befunde --------------------------------------------------------------- */
.selbst-befund {
  border-top: var(--linie) solid var(--rahmen);
  padding: var(--luft) 0;
  display: grid;
  gap: calc(var(--luft) * .5);
}
.selbst-befund-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--luft) * .5);
}
.selbst-befund-text { flex: 1 1 24ch; }
/* Der Grund fürs Ignorieren steht leise hinter dem Befund — er erklärt, er
   behauptet nicht. Gleiche Größe wie die Chips daneben. */
.selbst-befund-grund {
  font-size: var(--schrift-klein);
  color: var(--gedaempft);
}
.selbst-chip {
  font-size: var(--schrift-klein);
  padding: calc(var(--luft) * .2) calc(var(--luft) * .55);
  border-radius: var(--radius);
  border: var(--linie) solid var(--rahmen);
  color: var(--gedaempft);
  white-space: nowrap;
}
.selbst-chip.rot { color: var(--schlecht); border-color: var(--schlecht); background: var(--schlecht-grund); }
.selbst-chip.gelb { color: var(--warn); border-color: var(--warn); background: var(--warn-grund); }
.selbst-chip.gruen { color: var(--gut); border-color: var(--gut); background: var(--gut-grund); }
.selbst-chip.still { opacity: .6; }

.selbst-abzuege { display: flex; flex-wrap: wrap; gap: var(--luft); }
.selbst-abzug {
  border: var(--linie) solid var(--rahmen);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--flaeche-tief);
}
/* Die Abzugsbreite hängt an --karten-min, nicht an einer erfundenen Zahl:
   so wächst sie mit der Dichte-Einstellung des Kontos mit. */
.selbst-abzug img { display: block; width: var(--karten-min); height: auto; }
.selbst-abzug figcaption {
  font-size: var(--schrift-klein);
  color: var(--gedaempft);
  padding: calc(var(--luft) * .4) calc(var(--luft) * .6);
}

.selbst-leer {
  border: var(--linie) dashed var(--rahmen);
  border-radius: var(--radius);
  padding: var(--karte-innen);
  color: var(--gedaempft);
  text-align: center;
}
.selbst-fehler {
  border: var(--linie) solid var(--schlecht);
  background: var(--schlecht-grund);
  border-radius: var(--radius);
  padding: var(--luft) var(--karte-innen);
  color: var(--text);
  margin-bottom: var(--luft);
}

/* Auf schmalen Geräten steht die Kette untereinander — nebeneinander wäre sie
   bei 420 px die Textwand, die der Owner an der Lauf-Ansicht bemängelt hat. */
@media (max-width: 700px) {
  .selbst-runde-zeit { margin-left: 0; width: 100%; }
  .selbst-abzug img { width: 100%; }
}