/* PDF-Helfer — was allein diese Anwendung betrifft.
 *
 * Tafel und Bausteine stehen in `gemeinsam/`: dort die Farben, Maße, Felder,
 * Knöpfe und Schirme, hier der Grundriss, das Raster und die Kacheln darin.
 */

/* Der Ton dieser Anwendung: orange, die Gruppe „Kanzlei“ auf der Übersicht —
   derselbe, den `public/icon.svg` als Hexwert trägt. */
:root { --ton-app: var(--ton-orange); }

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

/* Die Leiste oben, darunter das Raster. Die Höhe ist die des Fensters
   abzüglich Kopf und Fuß, deren Höhe `gemeinsam/leistenhoehen.js` zur
   Laufzeit meldet; gerollt wird im Raster, damit die Leiste stehen bleibt. */
.werkstatt {
  display: flex;
  flex-direction: column;
  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); }

/* 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` und `th`. */
#anwendung > .fuss { margin-top: 0; }

/* ----------------------------------------------------------------- Leiste */

.leiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--linie);
  background: var(--flaeche);
  font-size: 13px;
  color: var(--text-leise);
}
.leiste__datei {
  min-width: 0;
  max-width: 40ch;
  overflow: hidden;
  color: var(--text);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.leiste__zahlen { font-variant-numeric: tabular-nums; }
.leiste__beschriftung { margin-left: auto; }
.leiste__groesse { width: 140px; accent-color: var(--ton-app); }

/* ----------------------------------------------------------------- Fläche */

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

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

.mappe {
  display: flex;
  flex-direction: column;
  gap: 20px;
  user-select: none;
}
.mappe--ziehen { cursor: grabbing; }

/* ------------------------------------------------------------------ Teile */

/* Ein Teil wird eine eigene Datei. Ist es der einzige, steht er ohne Kopf
   und ohne Rahmen da — dann gibt es nichts zu unterscheiden. */
.teil {
  padding: 12px;
  border: 1px solid var(--linie);
  border-left: 4px solid var(--ton-app);
  border-radius: var(--rundung);
  background: var(--flaeche);
}
.teil--einzig { padding: 0; border: 0; background: none; }
.teil--einzig > .teil__kopf { display: none; }

.teil__kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.teil__titel { margin: 0; font-size: 14px; font-weight: 600; }

/* So viele Kacheln nebeneinander, wie in der gewählten Größe Platz haben;
   was übrig bleibt, verteilt sich auf sie. `--kachel` setzt der Schieber. */
.teil__raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--kachel, 160px), 1fr));
  gap: 16px;
  min-height: 60px;
}

/* ----------------------------------------------------------------- Kachel */

.karte {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px;
  border: 2px solid transparent;
  border-radius: var(--rundung);
  cursor: grab;
  outline: none;
}
.karte:hover { border-color: var(--linie-stark); }
.karte--gewaehlt,
.karte--gewaehlt:hover { border-color: var(--ton-app); background: color-mix(in srgb, var(--ton-app) 10%, transparent); }
.karte:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ton-app) 45%, transparent); }
.karte--gezogen { opacity: .35; }

/* Das Quadrat, in das die Seite eingepasst wird — hoch, quer oder gedreht. */
.karte__buehne {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
}

/* Die Seite ist ein Blatt Papier und bleibt weiß, auch im Dunkeln. */
.karte__leinwand {
  display: block;
  background: #ffffff;
  box-shadow: var(--schatten);
}
.karte:not(.karte--gezeichnet) .karte__leinwand { visibility: hidden; }

/* Bis die Seite gezeichnet ist, steht ihre Nummer da. */
.karte__platzhalter {
  position: absolute;
  inset: 8px 18%;
  display: grid;
  place-items: center;
  border: 1px dashed var(--linie-stark);
  border-radius: 2px;
  color: var(--text-leise);
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}
.karte--gezeichnet .karte__platzhalter { display: none; }

.karte__unterschrift {
  overflow: hidden;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--text-leise);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.karte--gewaehlt .karte__unterschrift { color: var(--text); font-weight: 600; }

/* Die Werkzeuge erscheinen, wenn die Maus über der Kachel steht oder sie
   den Fokus hat. Auf dem Papier stehen sie auf eigenem Grund, damit sie im
   Dunkeln nicht als helle Zeichen auf Weiß verschwinden. */
.karte__werkzeuge {
  position: absolute;
  bottom: 6px;
  left: 50%;
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--linie);
  border-radius: 8px;
  background: var(--flaeche);
  box-shadow: var(--schatten);
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity .12s;
  pointer-events: none;
}
.karte:hover .karte__werkzeuge,
.karte:focus-visible .karte__werkzeuge { opacity: 1; pointer-events: auto; }
/* Während des Ziehens stünden sie nur im Weg — auch an der gezogenen Seite. */
.mappe--ziehen .karte .karte__werkzeuge { opacity: 0; pointer-events: none; }

/* Enger als die Bausteine: Vier Knöpfe zu 34 Pixeln passten auf die
   kleinste Kachel nicht. */
.karte__werkzeuge .knopf--zeichen,
.karte__werkzeuge .knopf--weg { width: 28px; min-height: 28px; height: 28px; }
.karte__werkzeuge .ikon { width: 16px; height: 16px; }
/* Die Schere an einer Seite, vor der schon geteilt ist: Sie hebt die
   Teilung wieder auf und steht deshalb im Ton der Anwendung. */
.karte__werkzeuge .knopf--aktiv { color: var(--ton-app); border-color: var(--ton-app); }

/* ---------------------------------------------------------------- Ziehen */

/* Das Schild unter dem Zeiger und der Strich, wo die Seiten hinkommen.
   Beide liegen fest über allem und fangen keinen Zeiger — die Stelle
   darunter wird mit `elementFromPoint` gesucht. */
.ziehgeist {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  padding: 4px 10px;
  border-radius: 12px;
  background: var(--ton-app);
  color: var(--auf-farbe);
  font-size: 12px;
  font-weight: 600;
  pointer-events: none;
  box-shadow: var(--schatten);
}
.einfuegemarke {
  position: fixed;
  z-index: 49;
  width: 3px;
  border-radius: 2px;
  background: var(--ton-app);
  pointer-events: none;
}