/* Was NUR die Cloud-Fassung angeht.
 *
 * Eine eigene Datei, weil styles.css und gestalt-squadrai.css Kopien des
 * Cockpits sind. Wer in eine Kopie hineinschreibt, kann sie beim naechsten
 * Mal nicht mehr sauber erneuern, und der eigene Zusatz geht dabei entweder
 * verloren oder haelt die Erneuerung auf.
 *
 * Hier steht nur, was die beiden Systeme UNTERSCHEIDET. Alles, was sie
 * gemeinsam haben, bleibt in den Kopien, wo es hingehoert.
 */

/* Das Schild neben dem Schriftzug.
 *
 * Warum ein Wort und kein Zeichen: Die Marke ist eine Wortmarke, und das AI
 * traegt bereits den Akzent. Ein zweites Symbol daneben konkurriert mit ihr,
 * eine zweite Akzentfarbe erst recht. Das Schild bleibt deshalb im leisen Ton
 * und traegt nur die Kontur.
 *
 * Und es steht NEBEN der Marke, nicht darin: "SQUADRAI Cloud" als ein Wort
 * waere ein zweiter Produktname. Es ist derselbe Mitarbeiter, nur an einem
 * anderen Ort. */
.sq-schild {
  display: inline-flex;
  align-items: center;
  /* KEIN eigener Abstand.
   *
   * `.sq-marke` ist ein Flex-Kasten mit `gap: 0.58em`, und der gilt zwischen
   * ALLEN Kindern, also auch vor dem Schild. Ein eigenes margin kam beim
   * ersten Anlauf obendrauf: gesetzt waren 9 Punkte, gemessen 21, und das
   * Schild schwamm sichtbar davon. Das Mass bringt die Marke mit, hier wird
   * es nicht zweitgetippt. */
  padding: 2px 7px 1px;
  border: 1px solid currentColor;
  border-radius: 999px;
  /* Klein, aber mit Laufweite: Ein kurzes Wort in Versalien liest sich sonst
     als Abkuerzung. */
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
  opacity: 0.62;
  /* Es soll nie mitwachsen, wenn der Schriftzug groesser gesetzt wird: Sonst
     wird aus dem Schild ein zweiter Titel. */
  flex: none;
  white-space: nowrap;
}

/* In der Kopfleiste sitzt es auf der Grundlinie des Schriftzugs. */
.topbar .sq-schild { transform: translateY(1px); }

/* Auch vor der Anmeldung gilt der Abstand der Marke, nicht ein eigener. */

/* Am Handy ist die Kopfleiste weg und oben steht die schmale Leiste. Auch
   dort soll man auf den ersten Blick sehen, wo man ist. */
.mobile-bar .mb-title::after {
  content: "Cloud";
  margin-left: 8px;
  padding: 2px 6px 1px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.62;
  vertical-align: 1px;
}

/* Der Kreisel der Warteschleife. Eigene Drehung, damit sie nicht davon
   abhaengt, ob das Cockpit-Stilblatt eine mitbringt: Eine Sanduhr, die nicht
   dreht, sieht aus wie ein Standbild, und genau das soll sie widerlegen. */
@keyframes sq-dreh { to { transform: rotate(360deg); } }