/* Pseudonymisierer — was allein diese Anwendung betrifft.
 *
 * Tafel und Bausteine stehen in `gemeinsam/`: dort die Farben und Maße, hier
 * das Dreispaltenlayout (Eingabe — Tabelle — Ausgabe) und die Markierungen.
 * Wer eine Farbe oder einen Knopf braucht, holt ihn von dort und baut ihn
 * nicht ein zweites Mal.
 *
 * Diese Anwendung baut enger als ihre Geschwister: Drei Spalten nebeneinander
 * lassen weniger Luft. Wo ein Maß deshalb abweicht, steht hier die einzelne
 * Deklaration und nicht der Baustein noch einmal.
 *
 * Die Farben der Kategorien (Person, Firma, Ort, Straße, Postleitzahl, Zahl,
 * Geburtsdatum) sind zugleich die Farben der Markierungen im Text. Sie müssen
 * deshalb in beiden Tafeln als Untergrund lesbar bleiben — geprüft wird gegen
 * `--text`, nicht gegen `--auf-farbe`.
 */

/* --------------------------------------------- Die Farben dieser Anwendung */

:root {
  /* Der Ton dieser Anwendung: violett, das Sachgebiet „Rechtsprechung“ auf der
     Übersicht — derselbe Ton, den `public/icon.svg` bereits trägt. Nur die
     Kopfleiste greift ihn ab. */
  --ton-app: var(--ton-violett);

  /* Die Kategorien. Die Töne kommen aus `gemeinsam/tafel.css` und werden hier
     nur benannt — so folgen sie der dunklen Fassung von selbst. */
  --person: var(--ton-blau);
  --firma: var(--ton-violett);
  --ort: var(--ton-petrol);
  --strasse: var(--ton-gruen);
  --plz: var(--ton-magenta);
  --zahl: var(--ton-ocker);
  --datum: var(--ton-rot);

  /* Als Markierung im Text liegt die Kategorienfarbe stark aufgehellt unter
     der Schrift. Diese Untergründe stehen hier und nicht in der gemeinsamen
     Tafel: Sie sind auf das Lesen im Fließtext gerechnet und werden nur hier
     gebraucht. */
  --person-grund: #d7e6f7;
  --firma-grund: #e4dcf7;
  --ort-grund: #d2eeee;
  --strasse-grund: #d8f0e0;
  --plz-grund: #f6dcec;
  --zahl-grund: #f6e6c8;
  --datum-grund: #f7dedb;
}

:root[data-thema="dunkel"] {
  /* Abgedunkelt statt aufgehellt: Die Markierung liegt unter heller Schrift. */
  --person-grund: #1b3350;
  --firma-grund: #2e2547;
  --ort-grund: #113a3a;
  --strasse-grund: #143220;
  --plz-grund: #3a1c30;
  --zahl-grund: #3a2d14;
  --datum-grund: #3d1f1c;
}

/* Diese Anwendung führt eine einzige Farbe, und das ist die der Person: Sie
   ist die häufigste Kategorie und zugleich der Grundton der Oberfläche. */
:focus-visible { outline-color: var(--person); }

/* ---------------------------------------------- Kopfleiste — enger gefasst */

/* Nicht `sticky`: Unter der Leiste steht kein rollender Rumpf, sondern drei
   Spalten, die jede für sich rollen. Höhe und Polster bleiben dagegen die der
   Bausteine — die Kopfzeile sieht in jedem Werkzeug des Hauses gleich aus. */
.kopf { position: static; }
/* Die Meldung darf schrumpfen, statt die Schaltflächen hinauszuschieben, und
   diese brechen nicht um: Beides machte die Leiste höher. */
.kopf__meldung { min-width: 0; }
.kopf__aktionen { flex-wrap: nowrap; }

/* -------------------------------------------------------------------- Bühne */

/* Drei Spalten, die Tabelle in der Mitte schmaler. Die Höhe ist fest an das
   Fenster gebunden: Gerollt wird in der einzelnen Spalte, nicht in der Seite —
   sonst liefe beim Vergleichen von Eingabe und Ausgabe die eine davon. */
.buehne {
  display: grid;
  grid-template-columns: 1fr minmax(330px, 0.72fr) 1fr;
  gap: 12px;
  padding: 12px;
  /* Was die Kopfleiste übriglässt, abzüglich der Fußzeile. Keine der beiden
     Höhen ist eine feste Zahl — beide hängen am Umbruch —, deshalb misst sie
     `gemeinsam/leistenhoehen.js` nach. Die Ersatzwerte gelten nur, bis das
     Skript gelaufen ist. */
  height: calc(100dvh - var(--hoehe-kopfleiste, 55px) - var(--hoehe-fusszeile, 84px));
  min-height: 420px;
}

.spalte {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
  box-shadow: var(--schatten);
  overflow: hidden;
}

.spalte__kopf {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--linie);
  background: var(--flaeche);
}

.spalte__titel { font-size: 14px; }
.spalte__zahl { flex: 1; color: var(--text-leise); font-size: 12px; }
.spalte__werkzeuge { display: flex; gap: 6px; margin-left: auto; }

.spalte__inhalt {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

/* Unter 1000 px stehen die drei untereinander: Eingabe, Tabelle, Ausgabe.
   Die feste Fensterhöhe fällt dabei weg — gerollt wird dann die Seite. */
@media (max-width: 1000px) {
  .buehne {
    grid-template-columns: 1fr;
    height: auto;
  }
  .spalte__inhalt { max-height: 70vh; }
}

/* ------------------------------------------------------------- Textflächen */

.textflaeche {
  padding: 14px 16px;
  font: 14px/1.6 var(--schrift-text);
  white-space: pre-wrap;
  overflow-wrap: break-word;
  tab-size: 4;
  /* Der Text ist nicht bearbeitbar, aber auswählbar: Das Markieren geschieht
     über die Auswahl. */
  cursor: text;
}

.textflaeche--ausgabe { background: var(--eingabe-grund); min-height: 100%; }

/* Die Markierung im Text. Der Untergrund kommt von der Kategorie, die Schrift
   bleibt die des Textes — eine eingefärbte Schrift läse sich schlechter, und
   gelesen werden muss hier. */
.marke {
  background: var(--grundfarbe, var(--linie));
  color: inherit;
  border-bottom: 2px solid var(--randfarbe, var(--linie-stark));
  border-radius: 2px;
  padding: 0 1px;
}

.marke--person  { --grundfarbe: var(--person-grund);  --randfarbe: var(--person); }
.marke--firma   { --grundfarbe: var(--firma-grund);   --randfarbe: var(--firma); }
.marke--ort     { --grundfarbe: var(--ort-grund);     --randfarbe: var(--ort); }
.marke--strasse { --grundfarbe: var(--strasse-grund); --randfarbe: var(--strasse); }
.marke--plz     { --grundfarbe: var(--plz-grund);     --randfarbe: var(--plz); }
.marke--zahl    { --grundfarbe: var(--zahl-grund);    --randfarbe: var(--zahl); }
.marke--datum   { --grundfarbe: var(--datum-grund);   --randfarbe: var(--datum); }

/* Die Stellen der in der Tabelle gewählten Zeile. */
.marke--gewaehlt { outline: 2px solid var(--randfarbe); outline-offset: 1px; }

/* Kurz nach dem Sprung von der Tabelle aus. */
.marke--gezeigt { animation: aufblitzen 1.6s ease-out; }

@keyframes aufblitzen {
  0%, 40% { box-shadow: 0 0 0 4px var(--randfarbe); }
  100% { box-shadow: 0 0 0 4px transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .marke--gezeigt { animation: none; outline: 3px solid var(--randfarbe); }
}

.leerhinweis {
  padding: 24px 20px;
  color: var(--text-leise);
  font-size: 14px;
}
.leerhinweis p { margin: 0 0 6px; }
.leerhinweis__leise { font-size: 12.5px; opacity: 0.85; }

/* ------------------------------------------------------- Die Bestandteile */

.teile {
  padding: 10px 12px;
  border-bottom: 1px solid var(--linie);
  background: var(--grund);
}

.teile__titel { margin: 0 0 6px; font-size: 13px; font-weight: 600; }
.teile__liste { display: flex; flex-direction: column; gap: 2px; }

.teile__zeile {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
}
.teile__zeile:hover { background: var(--flaeche); }

.teile__wort { font-weight: 600; }
.teile__zahl { color: var(--text-leise); font-size: 12px; }
.teile__fuss { display: flex; gap: 8px; margin-top: 8px; }

/* --------------------------------------------------------- Die Zuordnung */

/* Feste Spaltenbreiten: Ohne sie richtet sich die Tabelle nach ihrem längsten
   Klartext aus und schiebt die Auswahlliste aus der Spalte hinaus. */
.zuordnung {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 13px;
}

.zuordnung col.zuordnung__spalte-klartext  { width: 29%; }
.zuordnung col.zuordnung__spalte-kategorie { width: 27%; }
.zuordnung col.zuordnung__spalte-pseudonym { width: 23%; }
.zuordnung col.zuordnung__spalte-fund      { width: 9%; }
.zuordnung col.zuordnung__spalte-weg       { width: 12%; }

.zuordnung th, .zuordnung td {
  padding: 4px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--linie);
}

.zuordnung thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--flaeche);
  color: var(--text-leise);
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* `overflow-wrap` und nicht `word-break`: Getrennt wird erst, wenn ein Wort
   sonst nicht passte — sonst zerfiele „Blumengasse“ mitten im Wort. */
.zuordnung__klartext {
  font-weight: 600;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Der Klartext ist eine Schaltfläche, sieht aber wie Text aus: Sie trägt den
   Sprung zur Fundstelle und muss deshalb den Fokus annehmen können. */
.zuordnung__sprung {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow-wrap: break-word;
  hyphens: auto;
}
.zuordnung__sprung:hover { color: var(--person); }

.zuordnung__anzahl { text-align: right; color: var(--text-leise); }
.zuordnung__anzahl--leer { color: var(--warnung); font-weight: 600; }

.zuordnung__zeile { cursor: pointer; }
.zuordnung__zeile:hover { background: var(--grund); }
.zuordnung__zeile--gewaehlt { background: var(--person-grund); }

/* Vorschläge der Erkennung tragen einen Streifen: Der Benutzer soll sehen,
   was er selbst bestimmt hat und was ihm vorgeschlagen wurde. */
.zuordnung__zeile--erkannt th { border-left: 3px solid var(--merke); padding-left: 5px; }

/* ------------------------------------------- Felder und Knöpfe — enger */

.eingabe { min-height: 30px; padding: 4px 6px; border-radius: 5px; color: var(--text); }
.eingabe--knapp { font-size: 12.5px; padding: 3px 4px; min-height: 0; }

.knopf { justify-content: center; }
.knopf:hover { border-color: var(--person); color: var(--person); }
.knopf--haupt { background: var(--person); border-color: var(--person); }
.knopf--haupt:hover { color: var(--auf-farbe); }
.knopf--klein { min-height: 30px; padding: 4px 10px; font-size: 12.5px; }
.knopf--weg { min-height: 26px; width: 26px; font-size: 15px; }

/* ------------------------------------------------------ Fußzeile — enger */

/* Drei Spalten nebeneinander lassen weniger Luft: Der Fuß steht hier
   unmittelbar unter der Bühne und nicht mit dem Abstand, den eine Seite mit
   Fließtext braucht. Überschrieben sind die beiden Deklarationen, nicht der
   Baustein. */
.fuss { margin-top: 0; padding: 6px 16px 10px; }

/* Während eine Datei über der Spalte schwebt. */
.spalte--bereit {
  outline: 2px dashed var(--person);
  outline-offset: -4px;
}

/* Der Fuß der Ausgabespalte: Dateiname und die beiden Wege nach draußen. */
.spalte__fuss {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-top: 1px solid var(--linie);
  background: var(--flaeche);
}

.spalte__fuss .eingabe { flex: 1; min-width: 6em; }

/* ------------------------------------------------------- Schirm — enger */

.schirm__kopf { padding: 12px 16px; }
.schirm__inhalt { padding: 16px 20px 20px; max-height: calc(88vh - 60px); }

/* --------------------------------------------------------------- Die Hilfe */

/* Die Hilfe steht in `gemeinsam/bausteine.css` — Abschnitt „Die Hilfe“. Hier
   standen bis September 2026 fünfzig Zeilen für Absätze, Tabellen und Tasten;
   dasselbe noch einmal in `rira` und `gsl`, jedes mit eigenen Namen.

   Geblieben sind zwei Zusätze, die nur diese Anwendung braucht: Ihr Schirm ist
   der schmale, und der wichtigste Satz — die Warnung, dass die Ausgabe ein
   Vorschlag ist — trägt hier die Fehlerfarbe statt der Grundfarbe. */
.hilfe { max-width: 60ch; }

.hilfe__hinweis {
  border-left-color: var(--fehler);
  background: var(--datum-grund);
}

/* ----------------------------------------------- Bedienung mit dem Finger */

/* Wo mit dem Finger gezielt wird, sind 26 px zu wenig. Vergrößert werden nur
   die Flächen — die Gestaltung bleibt dieselbe. */
@media (pointer: coarse) {
  .knopf--klein { min-height: var(--tippflaeche); padding: 8px 14px; }
  .knopf--weg { min-height: 36px; width: 36px; font-size: 18px; }
  .eingabe--knapp { min-height: 36px; font-size: 14px; }
  .zuordnung th, .zuordnung td { padding: 7px 4px; }
  .teile__zeile { min-height: var(--tippflaeche); }
  /* Der Finger trifft die Zeile leichter als das Wort darin. */
  .zuordnung__sprung { padding: 4px 0; }
}