/*
 * utilities -- wenige Helfer für Abstand und Ausrichtung. Sie beschreiben
 * keine Sache, sondern nur ihre Lage im Layout; deshalb stehen sie hier und
 * nicht als Modifier an einem Block.
 *
 * stack: senkrechter Abstand zwischen Geschwistern, Ausprägungen --tight
 * und --loose.
 * cluster: waagerechte Reihe, die früh umbricht; --between schiebt die Enden
 * auseinander, --seamless nimmt den Abstand ganz weg (für Reihen aus
 * Symbolknöpfen, deren Abstand aus ihrem unsichtbaren Überstand entsteht).
 * flush-inline-start / flush-inline-end: zieht die unsichtbare Trefferfläche
 * eines Symbolknopfs nach außen, damit das Symbol selbst auf der Inhaltskante
 * sitzt.
 * visually-hidden: für Vorleseprogramme da, für das Auge nicht.
 * only-narrow: verschwindet, sobald die Verwaltung ihre Seitenspalte zeigt.
 */

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.stack--tight {
  gap: var(--space-3);
}

.stack--loose {
  gap: var(--space-7);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.cluster--between {
  justify-content: space-between;
}

/* Reihen aus Symbolknöpfen: die Trefferflächen stoßen aneinander, der
   sichtbare Abstand entsteht allein aus ihrem unsichtbaren Überstand */
.cluster--seamless {
  gap: 0;
}

.flush-inline-start {
  margin-inline-start: var(--control-flush);
}

.flush-inline-end {
  margin-inline-end: var(--control-flush);
}

/* Für Vorleseprogramme da, für das Auge nicht */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Nur solange die Navigation im Drawer liegt. Der Umschaltpunkt ist derselbe
   wie in admin.css, wo die Seitenspalte dauerhaft erscheint */
@media (min-width: 1024px) {
  .only-narrow {
    display: none;
  }
}