/* Gefuehrte Erfassung - Gestaltung zu public/gefuehrt.js.

   Arbeitet ausschliesslich mit den Werten aus styles.css: Farben ueber
   var(), Schriftgroessen ueber --fs-xs..--fs-2xl, Abstaende in 4/8/12/
   16/24px. Keine neuen Farben, keine neuen Groessen, kein Schatten.

   =====================================================================
   DIE LEITENDE ENTSCHEIDUNG: EINE FRAGE FUELLT DEN BILDSCHIRM

   Das ist der Unterschied zum Rapport-Editor daneben, und er ist kein
   Geschmack. Der Editor zeigt alles auf einmal, weil man dort prueft
   und nachtraegt - da will man den Ueberblick. Hier wird ERINNERT, und
   Erinnern vertraegt keine Konkurrenz: Wer beim Beantworten von "Wer?"
   schon die naechsten vier Felder im Blick hat, denkt an das Ausfuellen
   statt an die Nacht. Darum steht die Frage gross und allein, mit viel
   Luft darum. Die Frage ist die Beschriftung des Feldes und traegt
   deshalb die groesste Schrift dieser Ansicht - nicht die Ueberschrift
   des Dialogs.

   ZWEITE ENTSCHEIDUNG: KEIN FORTSCHRITTSBALKEN.

   Ein Balken, der sich fuellt, macht aus dem Ausfuellen ein Spiel mit
   Endpunkt - und ein Spiel gewinnt man, indem man alle Felder fuellt.
   Genau das soll hier NICHT passieren (siehe Regel 2 in gefuehrt.js:
   eine Luecke ist besser als eine erfundene Angabe). Die Schiene oben
   ist darum eine Liste von Wegmarken, keine Fuellstandsanzeige.
   Beantwortete Fragen bekommen einen Punkt und etwas mehr Tinte, aber
   kein Haekchen und keine Farbe.

   Geladen in index.html nach styles.css. */

/* ============================================================== Blatt */

/* Schmaler als der Rapport-Editor (der ist ein Formular, das ist ein
   Gespraech). Zeilen ueber etwa 70 Zeichen liest man schlechter, und
   ein Textfeld, das sich ueber den ganzen Bildschirm zieht, laedt zum
   Roman ein - hier will man drei praezise Saetze. */
.gf-sheet {
  max-width: 640px;
}

.gf-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Schiebt die Knoepfe am Fuss und im Kopf auseinander. Eigene Klasse
   statt der geliehenen .grow: Dieses Modul soll nicht davon abhaengen,
   wie eine fremde Hilfsklasse morgen definiert ist. */
.gf-luft {
  flex: 1;
  min-width: 0;
}

/* =========================================================== Schiene */

.gf-schiene {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.gf-stufe {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: var(--fs-sm);
  padding: 4px 10px;
  border-radius: 8px;
  cursor: pointer;
}

.gf-stufe:hover {
  background: var(--surface-sunken);
  color: var(--text-primary);
}

.gf-stufe:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Beantwortet: etwas mehr Tinte, ein Punkt davor. Kein Haekchen, keine
   Farbe - es ist eine Notiz an den Menschen, kein Lob. */
.gf-stufe.ist-beantwortet {
  color: var(--text-secondary);
}

.gf-stufe.ist-beantwortet::before {
  content: "\00B7\00A0";
  font-weight: 700;
}

.gf-stufe.ist-hier {
  background: var(--surface-sunken);
  border-color: var(--border-strong);
  color: var(--text-primary);
  font-weight: 600;
}

/* ============================================================= Frage */

.gf-kopf {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* "Schritt 3 von 6" - klein und still. Es beantwortet nur die eine
   Frage "wie lange noch", und die stellt man im Vorbeigehen. */
.gf-zaehler {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.gf-wort {
  font-size: var(--fs-2xl);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -.01em;
}

.gf-feld {
  margin-bottom: 0;
}

/* Die eigentliche Frage. Groesser als eine normale Feldbeschriftung,
   weil sie hier den Platz einer Ueberschrift einnimmt - und in normaler
   Staerke statt fett: Eine Frage wird gestellt, nicht angeordnet. */
.gf-frage {
  font-size: var(--fs-xl);
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.35;
}

/* Der Hinweis steht UEBER dem Feld und nicht darunter. Was unter einem
   Feld steht, liest man erst, wenn man schon getippt hat - dann ist es
   eine Korrektur statt einer Hilfe. */
.gf-hinweis {
  margin-bottom: 4px;
  line-height: 1.5;
}

.gf-satz {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Der Freibrief: die Erlaubnis, nichts zu schreiben. Er steht auf jedem
   Schritt, weil die Erlaubnis genau dann gebraucht wird, wenn jemand
   vor einer Frage sitzt, die er nicht beantworten kann - und nicht
   einmal am Anfang, wo sie noch niemanden betrifft. */
.gf-freibrief {
  margin: 0;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  line-height: 1.5;
}

.gf-sheet textarea {
  min-height: 140px;
}

/* ======================================================== Zeitstrahl */

.gf-strahl {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Uhrzeit schmal, Ereignis so breit wie moeglich, Entfernen ganz aussen.
   Die Uhrzeit steht links, weil der Zeitstrahl von links nach rechts
   gelesen wird wie eine Chronik - und weil die Hand nach dem Tippen der
   Zeit von selbst ins Textfeld weiterwandert. */
.gf-zeile {
  display: grid;
  grid-template-columns: 7.5rem 1fr auto;
  gap: 8px;
  align-items: center;
}

.gf-zeile .gf-zeit {
  font-variant-numeric: tabular-nums;
}

/* Der Entfernen-Knopf ist bewusst leise: Eine Zeile zu loeschen ist
   keine Handlung, die man anpreist. Erst beim Zeigen wird er deutlich. */
.gf-weg {
  color: var(--text-muted);
  padding-inline: 8px;
}

.gf-weg:hover {
  color: var(--critical-ink, var(--text-primary));
}

.gf-strahl-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ========================================================= Uebersicht */

/* Feldname und Inhalt untereinander statt in zwei Spalten. Zwei Spalten
   waeren am Rechner huebscher, aber der Sachverhalt ist hier der
   laengste Text der ganzen Ansicht; in einer halben Spalte wird er zur
   Schlucht. Und geprueft wird am Handy, im Auto, vor Dienstschluss. */
.gf-vorschau {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.gf-vfeld {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 12px 0 0;
}

.gf-vfeld:first-child {
  margin-top: 0;
}

/* pre-wrap ist hier keine Kosmetik, sondern die halbe Zusage des
   Moduls: Der Zeitverlauf besteht aus Zeilenumbruechen. Wuerde die
   Vorschau sie zusammenziehen, zeigte sie einen anderen Text als den,
   der uebergeben wird - und die Zusage "genau das wandert in den
   Rapport" waere gebrochen, ohne dass es jemand sieht. */
.gf-vtext {
  margin: 0;
  padding: 8px 12px;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--text-primary);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.6;
}

/* Eine Luecke ist hier kein Fehler, sondern ein zulaessiges Ergebnis -
   darum grau und ohne Rahmen, nicht rot. */
.gf-vtext.ist-leer {
  background: transparent;
  border-style: dashed;
  color: var(--text-muted);
  font-size: var(--fs-md);
}

/* ============================================================== Handy */

@media (max-width: 560px) {
  /* Die Uhrzeit ueber das Ereignis statt daneben: Bei 7,5rem fuer die
     Zeit bliebe fuer den Text eine Spalte, in die drei Woerter passen. */
  .gf-zeile {
    grid-template-columns: 1fr auto;
  }

  .gf-zeile .gf-zeit {
    grid-column: 1 / -1;
  }

  .gf-wort {
    font-size: var(--fs-xl);
  }

  .gf-frage {
    font-size: var(--fs-lg);
  }
}