/* Tabellenhelfer — was allein diese Anwendung betrifft.
 *
 * Tafel und Bausteine stehen in `gemeinsam/`: dort die Farben, Maße, Felder,
 * Knöpfe und Schirme, hier der Grundriss, die Seite und die Linien darauf.
 */

/* Der Ton dieser Anwendung: orange, die Gruppe „Kanzlei“ auf der Übersicht —
   derselbe, den `public/icon.svg` als Hexwert trägt. Er gilt auch im hellen
   Bereich der Seite (`.tafel--hell`), der die Tafel sonst mit Blau als
   Vorgabe neu ansetzte. */
:root, .tafel--hell { --ton-app: var(--ton-orange); }

/* ------------------------------------------------------------ Der Grundriss */

/* Zwei Spalten: links die Seite, rechts die Ausgabe. Die Höhe ist die des
   Fensters abzüglich der Leisten; deren Höhe meldet
   `gemeinsam/leistenhoehen.js` zur Laufzeit, weil die Kopfleiste auf einem
   schmalen Fenster umbricht. Gerollt wird in der Seite, damit die Ausgabe
   stehen bleibt, während man die Seite hinuntergeht. */
.werkstatt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  height: calc(100dvh - var(--hoehe-kopfleiste, 62px) - var(--hoehe-fusszeile, 84px));
  min-height: 420px;
  /* Der Rahmen steht immer da und ist unsichtbar: Erschiene er erst beim
     Ablegen, spränge der Inhalt um seine Breite. */
  border: 2px dashed transparent;
}

.werkstatt--ablage { border-color: var(--ton-app); }

.werkstatt__seite {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border-right: 1px solid var(--linie);
}

/* Die Fußzeile schließt unmittelbar an: Die Werkstatt rechnet ihre Höhe aus
   der des Fensters, und der Abstand, den die Bausteine über den Fuß setzen,
   ließe das ganze Fenster um 32 Pixel rollen. Wie in `kh`. */
#anwendung > .fuss { margin-top: 0; }

@media (max-width: 900px) {
  .werkstatt { grid-template-columns: minmax(0, 1fr); height: auto; }
  .werkstatt__seite { border-right: 0; border-bottom: 1px solid var(--linie); }
  .seitenflaeche { max-height: 75dvh; }
}

/* ------------------------------------------------------------- Seitenwahl */

.seitenwahl {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--linie);
  background: var(--flaeche);
}
.seitenwahl[hidden] { display: none; }
.seitenwahl__beschriftung { font-size: 13px; color: var(--text-leise); }
.seitenwahl__feld { width: 5.5em; }
.seitenwahl__von { font-size: 13px; color: var(--text-leise); }
.seitenwahl__datei {
  margin-left: auto;
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  color: var(--text-leise);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --------------------------------------------------------------- Die Seite */

.seitenflaeche {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 16px;
  background: var(--grund);
}

.seitenflaeche__leer {
  display: grid;
  place-content: center;
  min-height: 100%;
  text-align: center;
  color: var(--text-leise);
}
.seitenflaeche__leer[hidden] { display: none; }
.seitenflaeche__leer-titel { font-size: 18px; font-weight: 600; color: var(--text); }

/* Die Seite ist ein Blatt Papier und bleibt weiß, auch im Dunkeln — die
   Linien darauf nehmen deshalb die helle Fassung ihres Tons. */
.blatt {
  position: relative;
  background: #ffffff;
  box-shadow: var(--schatten);
  cursor: crosshair;
  touch-action: pan-y;
  user-select: none;
}
.blatt[hidden] { display: none; }
.blatt__leinwand { display: block; }
.blatt__linien { position: absolute; inset: 0; }

/* Eine Linie: sichtbar zwei Pixel, zu greifen elf. */
.linie {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 11px;
  margin-left: -5.5px;
  cursor: ew-resize;
  outline: none;
  touch-action: none;
}
.linie::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 4.5px;
  width: 2px;
  background: var(--ton-app);
}
.linie:hover::before,
.linie--gewaehlt::before { left: 4px; width: 3px; }
/* Der Fokus zeigt sich an der Nummer, nicht an der Linie: Ein Ring um einen
   Strich von drei Pixeln sieht aus wie drei Striche. */
.linie:focus-visible::before { left: 4px; width: 3px; }
.linie:focus-visible .linie__marke { outline: 2px solid var(--ton-app); outline-offset: 2px; }

/* Die Nummer oben an der Linie — dieselbe wie in der Liste der Ausgabe. */
.linie__marke {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 20px;
  padding: 1px 5px;
  border-radius: 10px;
  background: var(--ton-app);
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
}
.linie--gezogen .linie__marke { outline: 2px solid var(--ton-app); outline-offset: 2px; }

/* --------------------------------------------------------------- Ausgabe */

.ausgabe {
  /* Der Griff für die gewählte Schaltfläche der Seitenwahl (`.wahl`). */
  --farbe: var(--ton-app);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  overflow: auto;
  padding: 16px;
  background: var(--flaeche);
}
.ausgabe__titel { margin: 0; font-size: 16px; }
/* Ein Feld für den Aufruf, dessen Inhalt tabula nicht nähme — wie in `kh`. */
.eingabe[aria-invalid] { border-color: var(--fehler); }
.feld__hinweis--fehler { color: var(--fehler); }
/* „Seite 12“ und „alle“ neben dem Seitenfeld bleiben in einer Zeile. */
.ausgabe__schnellwahl { flex-wrap: nowrap; }
.ausgabe__untertitel { margin: 8px 0 0; font-size: 14px; }
.ausgabe__feld { font-family: var(--schrift-fest); font-size: 13px; }
/* Der Aufruf bricht um, statt hinter dem Rand zu verschwinden. */
.ausgabe__feld--aufruf { resize: none; overflow-wrap: anywhere; }

.ausgabe__liste { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ausgabe__eintrag { display: flex; align-items: center; gap: 6px; }
.ausgabe__linie {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  color: var(--text);
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-align: left;
  cursor: pointer;
}
.ausgabe__linie:hover { border-color: var(--linie-stark); }
.ausgabe__nummer {
  min-width: 20px;
  padding: 1px 5px;
  border-radius: 10px;
  background: var(--ton-app);
  color: var(--auf-farbe);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
}
.ausgabe__zeiger {
  min-height: 1.5em;
  margin: auto 0 0;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--text-leise);
}

/* ------------------------------------------------------------ Die Schirme */

/* Felder in einem Schirm — Einstellungen, Passwort — mit Abstand
   untereinander; `.maske__gruppe` selbst ist kein Flexkasten. Der Ton wie in
   der Ausgabe. */
.stapel {
  --farbe: var(--ton-app);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.stapel .maske__gruppentitel { margin-bottom: 0; }