/* ===========================================================================
   Modul Urkunden — UEBERGABE.md, Abschnitt 29

   Der Reiter liegt im Turnierbetrieb und **erbt dessen Dichte**: Tabellen,
   Karten auf schmalen Geräten, Knöpfe und Formularfelder stehen bereits in
   app.css und turnierbetrieb.css und werden hier nicht wiederholt. Die
   Ansichtswahl teilt sich die Klasse `.ab-ansichten` mit der Abrechnung —
   zwei gleich aussehende Leisten mit zwei Namen wären eine Einladung, sie
   auseinanderlaufen zu lassen.

   Was hier steht, ist der **Editor**, und der ist in dieser Anwendung ohne
   Vorbild: eine Fläche, auf der Text mit dem Finger verschoben wird.

   Zwei Dinge entscheiden über seine Brauchbarkeit
   ----------------------------------------------
     **Die Bühne ist die Vorlage, nicht das Blatt.** Ihr Seitenverhältnis kommt
     aus dem Bild (`aspect-ratio` im Stil des Elements), und die
     Prozentkoordinaten der Bausteine zählen von ihr. Dieselbe Rechnung steht
     in `app/modules/urkunden/blatt.py` — weicht eine von beiden ab, springt
     die Vorschau gegenüber dem PDF.

     **Die Schriftgröße hängt an der Bühnenhöhe.** Die Bühne trägt ihre eigene
     Höhe als `font-size` (gesetzt in `vorlagen.js`), die Bausteine geben ihre
     Größe in `em`. Damit stimmt die Vorschau bei 360 px genauso wie bei
     1680 px, ohne dass beim Ziehen gerechnet werden muss.

   Alle Farben kommen aus den Variablen in app.css; hier steht kein einziger
   Farbwert außer den halbdurchsichtigen Hilfslinien des Editors, und die sind
   in beiden Farbfassungen sichtbar.
   =========================================================================== */


/* --- Die Liste der Vorlagen ---------------------------------------------- */

.uk-liste {
  display: grid;
  gap: var(--s3);
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .uk-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.uk-kachel {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  padding: var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  background: var(--surface-2);
}

.uk-kachel.vorgewaehlt { border-color: var(--gold); }

/* Die Vorschau ist bewusst klein: Sie beantwortet nur die Frage „welche der
   drei Vorlagen ist das?“. Wer sie prüfen will, drückt Probedruck. */
.uk-bild {
  flex: 0 0 auto;
  width: 84px;
  border: 1px solid var(--line);
  border-radius: var(--r1);
  overflow: hidden;
  background: #fff;
}

.uk-bild img { display: block; width: 100%; height: auto; }


/* --- Der Editor -----------------------------------------------------------
   Auf schmalen Geräten untereinander: erst die Vorlage, dann die Werkzeuge.
   Ab 1000 px nebeneinander, weil dann beides gleichzeitig zu sehen ist — genau
   die Aufteilung, die ARCHITEKTUR.md, Abschnitt 1 für den Desktop verlangt.
   -------------------------------------------------------------------------- */

.uk-editor {
  display: grid;
  gap: var(--s4);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 1000px) {
  .uk-editor { grid-template-columns: minmax(0, 1fr) 320px; }
}

/* Die Höhe ist begrenzt und nicht die Breite: Ein A4-Blatt, das auf 700 px
   Breite gezogen wird, ist tausend Pixel hoch — man verschiebt dann einen
   Baustein, den man nicht sieht. Mit `aspect-ratio` folgt die Breite der
   Höhe von selbst; auf schmalen Geräten greift stattdessen `max-width`. */
.uk-buehne {
  position: relative;
  width: auto;
  height: 76vh;
  max-width: 100%;
  justify-self: center;
  margin-inline: auto;
  border: 1px solid var(--line);
  border-radius: var(--r1);
  overflow: hidden;
  background: #fff;
  /* `font-size` wird in vorlagen.js auf die eigene Höhe gesetzt. Der Wert
     hier ist nur die Notbremse, falls das Skript nicht läuft. */
  font-size: 600px;
  touch-action: none;   /* sonst scrollt das Tablet, statt zu verschieben */
  user-select: none;
}

.uk-buehne > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.uk-baustein {
  position: absolute;
  cursor: grab;
  outline: 1px dashed rgba(128, 128, 128, 0.55);
  outline-offset: 2px;
  /* Ein Baustein liegt auf dem Bild und wird darauf verschoben; ein
     Textumbruch mitten im Ziehen wäre irritierend. */
  overflow-wrap: break-word;
}

.uk-baustein:hover,
.uk-baustein:focus-visible {
  outline-color: var(--gold);
  outline-style: solid;
}

.uk-baustein.aktiv {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Verborgen heißt: liegt hier, wird aber nicht gedruckt. Im Editor bleibt er
   sichtbar — sonst wäre er nicht wiederzufinden — aber deutlich blasser. */
.uk-baustein.verborgen { outline-style: dotted; }

.uk-baustein .uk-linie {
  border-bottom: 0.06em solid currentColor;
  margin: 0.2em 0 0.15em;
}

.uk-baustein .uk-beschriftung,
.uk-baustein .uk-person { text-align: center; }

/* Die Vereinszeilen stehen **je Spieler** und mittig unter dessen Namen
   (Abschnitt 29.10). Im PDF wird dafür die Mitte jedes Namens gemessen; in
   der Vorschau genügt eine gleichmäßige Verteilung — sie zeigt die Absicht,
   und genau geht ohnehin nur das PDF. */
.uk-baustein .uk-vereine {
  display: flex;
  justify-content: space-around;
  gap: 0.5em;
}


/* --- Die Werkzeugspalte --------------------------------------------------- */

.uk-werkzeuge {
  padding: var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  background: var(--surface-2);
}

.uk-bausteinliste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
  max-height: 240px;
  overflow-y: auto;
}

.uk-eintrag {
  display: flex;
  justify-content: space-between;
  gap: var(--s2);
  width: 100%;
  /* 44 px Fingerfläche, auch hier (ARCHITEKTUR.md, Abschnitt 1). */
  min-height: 44px;
  align-items: center;
  padding: var(--s2) var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r1);
  background: var(--surface);
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.uk-eintrag:hover { border-color: var(--gold); }

.uk-eintrag.aktiv {
  border-color: var(--gold);
  background: var(--surface-2);
  font-weight: 650;
}


/* --- Der Hinweis an der Schriftwahl ---------------------------------------
   Zwei Stufen, und sie müssen sich unterscheiden lassen: Der graue Hinweis
   ist eine Handreichung („braucht weniger Breite“), die Warnung dagegen sagt,
   dass auf dieser Schrift ein Name falsch herauskäme. Wer beides gleich
   aussehen lässt, macht aus der Warnung eine weitere Zeile Kleingedrucktes.
   -------------------------------------------------------------------------- */

.uk-schrifthinweis { display: grid; gap: 4px; }

.uk-schrifthinweis .uk-warnung {
  padding: var(--s2) var(--s3);
  border-left: 3px solid var(--warn);
  border-radius: var(--r1);
  background: var(--warn-soft);
  color: var(--warn);
}