/* Zeichenflaeche (skizze.js).
 *
 * Alle Farben, Radien, Zeiten und Schriftgroessen kommen aus den
 * Marken-Variablen in styles.css. Fest gesetzt ist hier genau eine Sache: das
 * Papier und die Tinte auf dem Blatt. Warum, steht bei .skz-blatt.
 *
 * Die Knoepfe im Fuss tragen die vorhandenen Klassen .btn / .btn.primary /
 * .btn.danger aus styles.css - ein eigener Knopfstil waere ein zweiter
 * Knopfstil. Die Werkzeugknoepfe bekommen einen eigenen (.skz-knopf), weil sie
 * etwas anderes sind: quadratisch, nur Sinnbild, und sie tragen einen Zustand
 * (gedrueckt/nicht gedrueckt), den .btn nicht kennt.
 *
 * Praefix skz- durchgehend, damit nichts hiervon in eine andere Ansicht
 * ausbricht.
 */

/* ------------------------------------------------------------- Die Ebene */

.skz-ebene {
  position: fixed;
  inset: 0;
  /* Ueber den Dialogen aus app.js (50/60) und ueber den Meldungen (100-120),
     aber UNTER den Rueckfragen aus frage.js (ab 900): Wenn dort eine Frage
     aufgeht, gehoert sie vor die Skizze und nicht dahinter. */
  z-index: 800;
  display: flex;
  padding: 16px;
  background: rgba(11, 11, 11, .55);
  backdrop-filter: blur(3px);
  animation: skz-auf var(--dur-schnell) var(--easing);
}

@keyframes skz-auf {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ----------------------------------------------------------- Die Flaeche */

.skz-flaeche {
  /* Gross. Eine Skizze, die in einem 420px-Kaestchen entsteht, wird eine
     Skizze fuer ein 420px-Kaestchen - und im Rapport sieht man nichts.
     min-height: 0 ist noetig, damit die Buehne weiter unten im Flexfluss
     schrumpfen darf; ohne das waechst sie ueber den Bildschirm hinaus. */
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: min(1100px, 100%);
  max-height: 100%;
  margin: auto;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  animation: skz-blatt-auf var(--dur-normal) var(--easing);
}

@keyframes skz-blatt-auf {
  from { opacity: 0; transform: translateY(10px) scale(.99); }
  to { opacity: 1; transform: none; }
}

.skz-kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}

.skz-titel {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-primary);
  /* Der Titel kommt aus den Daten (Objekt- oder Rapportname). Er darf lang
     sein, aber er darf die Zeile nicht sprengen. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ------------------------------------------------------ Werkzeugleiste */

.skz-leiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}

.skz-gruppe {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Ein feiner Strich zwischen den Gruppen statt Abstand allein: Bei fuenf
   Werkzeugen, drei Staerken, fuenf Farben und drei Verlaufsknoepfen ist eine
   Reihe aus sechzehn gleich aussehenden Kaestchen ohne Gliederung nicht
   lesbar. Der Strich faellt weg, sobald die Leiste umbricht - dann steht die
   Gruppe ohnehin fuer sich. */
.skz-gruppe + .skz-gruppe {
  padding-left: 14px;
  border-left: 1px solid var(--border);
}

.skz-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 38px: die kleinste Flaeche, die ein Finger auf einem Diensthandy sicher
     trifft, ohne dass die Leiste zwei Zeilen hoch wird. Auf dem Handy weiter
     unten wachsen sie auf 44. */
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--dur-schnell) var(--easing),
              color var(--dur-schnell) var(--easing);
}

.skz-knopf:hover:not([disabled]) {
  background: var(--surface-sunken);
  color: var(--text-primary);
}

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

/* Der gewaehlte Zustand kommt aus aria-pressed und nicht aus einer Klasse.
   So kann er gar nicht auseinanderlaufen: Was die Sprachausgabe sagt, ist
   genau das, was man sieht. Eine zusaetzliche Klasse waere eine zweite
   Wahrheit, die beim naechsten Umbau vergessen wird. */
.skz-knopf[aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--accent-fg);
}

.skz-knopf[disabled] {
  opacity: .4;
  cursor: not-allowed;
}

.skz-knopf.skz-gefahr:hover:not([disabled]) {
  background: color-mix(in srgb, var(--critical) 12%, transparent);
  color: var(--critical-ink);
}

/* ------------------------------------------------------------- Farbwahl */

/* Der Farbknopf zeigt seine Tinte als Scheibe. Die Tinte selbst setzt
   skizze.js als --skz-tinte am Element, weil sie aus den Daten kommt. */
.skz-farbe::before {
  content: "";
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--skz-tinte, #000);
  /* Der Rand ist noetig: Die schwarze Tinte auf dunklem Grund waere sonst ein
     Loch, kein Knopf. Er ist die Textfarbe der Umgebung bei geringer Deckung -
     eine Haarlinie, kein eigenes Grau. */
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--text-primary) 22%, transparent);
}

.skz-farbe[aria-pressed="true"]::before {
  /* Gewaehlt: ein Ring in der Papierfarbe, dann einer in der Textfarbe. Zwei
     Ringe, weil einer entweder gegen helle oder gegen dunkle Tinte verliert. */
  box-shadow: 0 0 0 2px var(--surface-2), 0 0 0 4px var(--text-primary);
}

/* --------------------------------------------------------- Die Buehne */

.skz-buehne {
  flex: 1;
  min-height: 0;
  display: flex;
  padding: 14px 18px;
  /* Die Buehne ist grau, das Blatt darin hell: So sieht man, wo das Papier
     aufhoert - und damit, was ausgegeben wird und was nicht. */
  background: var(--surface-sunken);
}

.skz-blatt {
  position: relative;
  margin: auto;
  aspect-ratio: var(--skz-verhaeltnis, 4 / 3);
  /* Hineinpassen, nie ueberragen: Das Blatt nimmt, was die Buehne hergibt, und
     behaelt dabei sein Seitenverhaeltnis. Damit sind Bildschirmgroesse,
     Hochkant/Querformat und Fensterziehen mit zwei Zeilen erledigt. */
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  overflow: hidden;
  /* Das Papier. In BEIDEN Themen hell, denn die Skizze wird ausgegeben und auf
     hellem Grund weiterverwendet - im Rapport, im PDF, auf Papier. Ein dunkles
     Blatt im dunklen Thema saehe schoener aus und zeigte etwas anderes, als
     hinterher herauskommt. Derselbe Wert steht als PAPIER in skizze.js; wer
     einen aendert, muss den anderen mitaendern. */
  background: #fbfcfa;

  /* Die wichtigste Zeile der Datei fuer das Handy: Ohne touch-action: none
     nimmt der Browser die erste Fingerbewegung als Scrollen an, verschiebt die
     Seite und schickt ein pointercancel - der Strich reisst nach dem ersten
     Zentimeter ab. Mit none gehoert jede Bewegung auf dieser Flaeche der
     Zeichnung, und nur ihr. */
  touch-action: none;
  /* Ohne das markiert ein langsamer Zug den Text ringsum statt zu zeichnen,
     und auf dem Handy erscheint die Lupe. */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  cursor: crosshair;
}

.skz-blatt[data-werkzeug="text"] { cursor: text; }

.skz-lage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Die Zeigerereignisse nimmt das Blatt entgegen, nicht die einzelne Flaeche.
     Sonst laege die Vorschau oben und schluckte alles, was darunter
     gezeichnet werden soll. */
  pointer-events: none;
}

/* -------------------------------------------------------- Text setzen */

.skz-texteingabe {
  position: absolute;
  /* Kein Innenabstand und kein Rahmen: Der Text soll beim Tippen genau dort
     stehen, wo er nachher gezeichnet wird. Jeder Innenabstand waere eine
     Verschiebung, die man erst am fertigen Bild bemerkt. Der gestrichelte
     Umriss liegt ausserhalb des Flusses und verschiebt nichts. */
  margin: 0;
  padding: 0;
  border: 0;
  outline: 1px dashed var(--accent);
  background: transparent;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  line-height: 1;
  min-width: 40px;
  max-width: 90%;
  z-index: 2;
}

/* ----------------------------------------------------- Hinweis und Fuss */

.skz-hinweis {
  margin: 0;
  padding: 10px 18px 0;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-muted);
}

/* Die Ansage fuer die Sprachausgabe. Sichtbar braucht sie niemand - was
   geschehen ist, sieht man auf dem Blatt. Sie darf aber NICHT display: none
   sein: Ein ausgeblendetes Live-Feld liest keine Sprachausgabe vor. */
.skz-ansage {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skz-fuss {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 14px 18px;
}

/* ------------------------------------------------------- Verwerfen-Frage */

/* Sie legt sich UNTEN an die Flaeche, nicht darueber. Wer gefragt wird, ob er
   seine Skizze wegwirft, will in dem Moment sehen, worum es geht. */
.skz-verwerfen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--critical) 8%, var(--surface-2));
}

.skz-verwerfen-text {
  flex: 1;
  min-width: 200px;
  font-size: var(--fs-md);
  color: var(--text-primary);
}

.skz-verwerfen[hidden] { display: none; }

/* ------------------------------------------------------------ Auf dem Handy */

@media (max-width: 720px) {
  .skz-ebene { padding: 0; }

  .skz-flaeche {
    width: 100%;
    max-height: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
  }

  /* Die Werkzeuge wandern unter die Buehne - dorthin, wo der Daumen ist. Oben
     am Rand eines Handys ist eine Leiste einhaendig nicht zu erreichen, und
     genau einhaendig wird im Dienst gezeichnet. */
  .skz-leiste {
    order: 3;
    border-bottom: 0;
    border-top: 1px solid var(--border);
    /* Umbrechen statt seitlich scrollen: Was aus dem Bild scrollt, findet
       niemand wieder. Zwei Zeilen Werkzeuge sind ehrlicher als eine
       versteckte. */
    gap: 6px 10px;
    padding: 10px 12px;
  }

  .skz-buehne { order: 2; padding: 10px 12px; }
  .skz-hinweis { order: 4; padding: 10px 12px; }
  .skz-fuss { order: 5; padding: 10px 12px 14px; }
  .skz-verwerfen { order: 6; }

  .skz-knopf { width: 44px; height: 44px; }

  .skz-gruppe + .skz-gruppe { padding-left: 10px; }

  .skz-fuss .btn { flex: 1; justify-content: center; }
}

/* Sehr niedrige Fenster (Handy quer): Der Hinweistext frisst dort die halbe
   Zeichenflaeche. Er bleibt fuer die Sprachausgabe erhalten, tritt aber
   optisch zurueck - der Platz gehoert dem Blatt. */
@media (max-height: 520px) {
  .skz-hinweis {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* --------------------------------------------------- Weniger Bewegung */

@media (prefers-reduced-motion: reduce) {
  .skz-ebene,
  .skz-flaeche {
    animation: none;
  }
}

/* ---------------------------------------------------- Hoher Kontrast */

/* Wer hohen Kontrast eingestellt hat, bekommt sichtbare Rahmen an den
   Werkzeugknoepfen. Ohne sie steht dort eine Reihe von Sinnbildern ohne
   erkennbare Knopfflaeche. */
@media (prefers-contrast: more) {
  .skz-knopf { border-color: var(--border-strong); }
  .skz-knopf[aria-pressed="true"] { border-color: var(--accent); border-width: 2px; }
}

/* Fehlerband INNERHALB der Zeichenebene.
   Der Hinweisbalken der App liegt bei z-index 100, diese Ebene bei 800 - eine
   Fehlermeldung der App waere hier unsichtbar. Bei einem Fehler muss der
   Mensch aber erfahren, WARUM nichts geschieht; sonst drueckt er weiter. */
.skz-fehlerband {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translate(-50%, 12px);
  max-width: min(90%, 460px);
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--critical, #b3261e);
  color: #fff;
  font-size: var(--fs-md);
  line-height: 1.45;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-normal, .2s) var(--easing, ease), transform var(--dur-normal, .2s) var(--easing, ease);
}
.skz-fehlerband.ist-da { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .skz-fehlerband { transition: none; } }