/* Razzia Manager — Oberfläche in der Formensprache von Razzia.
 *
 * Alle Werte hier sind aus Razzia selbst übernommen, nicht nachempfunden: die
 * Farb-Tokens aus packages/web/src/index.css, die Komponentenformen aus
 * Button.tsx, Card.tsx, Input.tsx, Switch.tsx und Background.tsx, Schrift und
 * Logo als Originaldateien aus dem Image. Wo Razzia etwas nicht kennt — ein
 * Sekundärknopf, eine Faktenliste, ein Zustands-Chip — steht im Kommentar,
 * aus welchem vorhandenen Muster es abgeleitet ist.
 */

/* ------------------------------------------------------------------ Schrift
 * Rubik Variable, dieselben Dateien, die Razzia ausliefert. Selbst gehostet:
 * der Server steht in einem internen Netz und soll nichts nachladen müssen.
 */
@font-face {
  font-family: "Rubik Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url("fonts/rubik-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Rubik Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url("fonts/rubik-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* ------------------------------------------------------------------- Tokens
 * 1:1 aus Razzias @theme. Die Grautöne sind die Tailwind-v4-Palette, auf die
 * Razzia seine semantischen Namen legt.
 */
:root {
  --primary: #ff9900;
  --secondary: #1a140b;

  --background: #ffffff;
  --foreground: #364153;
  --muted: #f3f4f6;
  --muted-foreground: #6a7282;
  --accent: #d1d5dc;
  --accent-foreground: #4a5565;

  /* Textfarbe auf dunklem Grund und die Tinte der harten Schatten — beide
   * benutzt Razzia in seinen Spielansichten. */
  --cream: #fff4e4;
  --ink: #14181d;

  --red: #fb2c36;
  --red-strong: #e7000b;
  --green: #05df72;
  --green-text: #00a63e;
  --yellow: #f0b100;
  --yellow-edge: #d08700;

  /* Ein gedecktes Orange für Verweise auf weißem Grund. Das reine #ff9900
   * hat auf Weiß zu wenig Kontrast, um Text zu tragen. */
  --link: #a35c00;

  --r-sm: 0.25rem;
  --r-md: 0.375rem;
  --r-lg: 0.5rem;
  --r-xl: 0.75rem;
  --r-2xl: 1rem;
  --r-4xl: 2rem;

  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Razzia setzt bg-secondary auf den body selbst, nicht auf einen Wrapper. */
body {
  margin: 0;
  background: var(--secondary);
  color: var(--cream);
  font-family: "Rubik Variable", ui-sans-serif, system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Razzia setzt das ausdrücklich, weil Tailwind es nicht mehr tut. */
button:not(:disabled),
[role="button"]:not(:disabled) {
  cursor: pointer;
}

code,
pre,
.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
}

/* --------------------------------------------------------------- Hintergrund
 * Zwei große, um 20 Grad gedrehte Quadrate in primary/15, halb aus dem Bild
 * geschoben — genau Background.tsx. Razzia zeigt darauf eine einzelne Karte in
 * Bildschirmhöhe; diese Oberfläche wird länger, deshalb sitzt die Fläche fest
 * im Ausschnitt und wandert nicht mit dem Inhalt.
 */
.deco {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.deco span {
  position: absolute;
  display: block;
  background: rgb(255 153 0 / 0.15);
  border-radius: var(--r-4xl);
  transform: rotate(20deg);
}
.deco span:first-child {
  top: -70vmin;
  left: -50vmin;
  min-width: 120vmin;
  min-height: 120vmin;
}
.deco span:last-child {
  right: -10vmin;
  bottom: -45vmin;
  min-width: 75vmin;
  min-height: 75vmin;
}

/* ------------------------------------------------------------------ Gerüst */
.page {
  position: relative;
  z-index: 10;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.masthead {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  width: 100%;
  max-width: 64rem;
  margin: 0 auto;
  padding: 2rem 1.5rem 1.5rem;
}
.masthead .logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}
/* h-16 ist Razzias Maß für die zentrierte Startseite; als Kopfzeile einer
 * Arbeitsfläche trägt der Schriftzug in halber Höhe besser. */
.masthead .logo img {
  height: 1.875rem;
  display: block;
}
.masthead .logo b {
  color: var(--cream);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding-top: 0.25rem;
}

/* Navigation im Ton von Razzias Fußzeilen-Link: weiß, halbdeckend, beim
 * Zeigen aufhellend. */
.masthead nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-left: auto;
}
.masthead nav a,
.masthead nav button {
  color: rgb(255 255 255 / 0.5);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  transition: color 0.15s;
}
.masthead nav a:hover,
.masthead nav button:hover,
.masthead nav a.current {
  color: rgb(255 255 255 / 0.85);
}
.masthead nav form {
  display: contents;
}

main {
  width: 100%;
  max-width: 64rem;
  margin: 0 auto;
  padding: 0 1.5rem 3rem;
  flex: 1;
}

/* Einstiegsseiten — Anmelden und Einrichten — folgen Background.tsx: Logo und
 * Karte stehen gemeinsam in der Mitte des Ausschnitts, das Logo in Razzias
 * eigener Größe (h-16), die Fußzeile klebt unten und zieht die Mitte nicht
 * nach oben. Die Kopfzeile mit der Navigation gibt es hier nicht: wer nicht
 * angemeldet ist, hat nichts zu navigieren.
 */
body.entry .page {
  justify-content: center;
}
body.entry .masthead {
  max-width: none;
  justify-content: center;
  padding: 0 1.5rem 2.5rem;
}
body.entry .masthead .logo {
  gap: 1rem;
}
body.entry .masthead .logo img {
  height: 4rem;
}
body.entry .masthead .logo b {
  font-size: 1.5rem;
  padding-top: 0.5rem;
}
body.entry main {
  flex: 0 0 auto;
  padding-bottom: 0;
}
body.entry .card.narrow {
  margin: 0 auto;
}
body.entry .credits {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

/* Fußzeile wie in Background.tsx: klein, zentriert, zurückgenommen. */
.credits {
  padding: 0 1.5rem 1.5rem;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgb(255 255 255 / 0.5);
}
.credits a {
  color: inherit;
  text-decoration: none;
}
.credits a:hover {
  color: rgb(255 255 255 / 0.8);
}

/* ------------------------------------------------------------------- Karten
 * Card.tsx: bg-background, rounded-xl, p-4, shadow-sm. Die Polsterung ist
 * eine Stufe größer, weil die Karten deutlich mehr tragen als ein Passwortfeld.
 */
.card {
  background: var(--background);
  color: var(--foreground);
  border-radius: var(--r-xl);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.25rem;
}
.card.narrow {
  max-width: 20rem;
  margin: 3rem auto;
  padding: 1.25rem;
}

.card h1 {
  margin: 0 0 1rem;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--foreground);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.card.narrow h1 {
  font-size: 1.25rem;
  justify-content: center;
  margin-bottom: 0.75rem;
}
.card h1 .count {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted-foreground);
  background: var(--muted);
  border-radius: var(--r-md);
  padding: 0.125rem 0.5rem;
}

.lead {
  margin: -0.5rem 0 1rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
  font-weight: 500;
}
.card.narrow .lead {
  text-align: center;
  margin-bottom: 1rem;
}

/* ------------------------------------------------------------------- Knöpfe
 * Primär genau Button.tsx: bg-primary, rounded-lg, font-semibold, weiß,
 * Aufhellen beim Zeigen, Abdunkeln beim Drücken. Größen sm und md sind
 * Razzias eigene Stufen.
 *
 * Sekundär und zerstörend kennt Razzia nicht. Sekundär ist deshalb aus
 * Input.tsx abgeleitet — weiße Fläche, 2 px in accent, Text in foreground —
 * und zerstörend nimmt das bg-red-500, mit dem Razzia Fehlerflächen füllt.
 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  border: 0;
  border-radius: var(--r-lg);
  padding: 0.3125rem 0.75rem;
  font-size: 0.875rem;
  background: var(--background);
  color: var(--foreground);
  box-shadow: inset 0 0 0 2px var(--accent);
  transition: filter 0.12s, background-color 0.12s, box-shadow 0.12s;
}
.btn:hover {
  background: var(--muted);
}
.btn:active {
  filter: brightness(0.97);
}
.btn:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--primary);
}

.btn.primary {
  background: var(--primary);
  color: #fff;
  box-shadow: none;
}
.btn.primary:hover {
  background: var(--primary);
  filter: brightness(1.05);
}
.btn.primary:active {
  filter: brightness(0.95);
}
.btn.primary:focus-visible {
  box-shadow: 0 0 0 3px rgb(255 153 0 / 0.4);
}

.btn.destructive {
  background: var(--red);
  color: #fff;
  box-shadow: none;
}
.btn.destructive:hover {
  background: var(--red);
  filter: brightness(1.05);
}
.btn.destructive:active {
  filter: brightness(0.95);
}

/* Razzias md-Stufe, für die Absender der Formulare. */
.btn.md {
  padding: 0.5rem 1.125rem;
  font-size: 1.0625rem;
}
.btn.block {
  width: 100%;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: none;
}

/* ------------------------------------------------------------------ Eingaben
 * Input.tsx: rounded-lg, border-2 in accent, im Fokus primary, font-semibold,
 * kein Fokusring. Die Schriftgröße ist 1 rem statt text-lg — ein Formular mit
 * sechs Feldern liest sich sonst wie ein Plakat.
 */
.field {
  display: block;
}
.field > span.name {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--accent-foreground);
}

input[type="text"],
input[type="password"],
input:not([type]),
select {
  display: block;
  width: 100%;
  margin-top: 0.375rem;
  padding: 0.5rem 0.75rem;
  font: inherit;
  font-weight: 600;
  color: var(--foreground);
  background: var(--background);
  border: 2px solid var(--accent);
  border-radius: var(--r-lg);
  outline: none;
  transition: border-color 0.12s;
}
input:focus,
select:focus {
  border-color: var(--primary);
  outline: none;
}
input::placeholder {
  color: var(--muted-foreground);
  font-weight: 500;
}

.hint {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted-foreground);
}
.hint code {
  background: var(--muted);
  border-radius: var(--r-sm);
  padding: 0 0.25rem;
  font-size: 0.75rem;
}
.hint.warn {
  color: var(--yellow-edge);
}
.hint.plain {
  margin: 0;
}
.hint.spaced {
  margin-top: 0.875rem;
}

/* Die Abstände in den schmalen Karten kommen aus der Stildatei und nicht aus
 * style-Attributen im Markup: die Sicherheitsrichtlinie der Seite verbietet
 * Inline-Stile (style-src 'self' ohne 'unsafe-inline'), damit eingeschleustes
 * Markup nichts umgestalten kann. */
.card.narrow form input + input {
  margin-top: 0.5rem;
}
.card.narrow form .btn,
.card.narrow > .btn {
  margin-top: 1rem;
}

/* Kontrollkästchen im Ton von Switch.tsx: accent im Ruhezustand, primary wenn
 * gesetzt, rounded-md. */
label.check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--foreground);
  flex-wrap: wrap;
}
label.check input[type="checkbox"] {
  appearance: none;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  flex: none;
  background: var(--accent);
  border: 0;
  border-radius: var(--r-md);
  transition: background-color 0.12s;
}
label.check input[type="checkbox"]:checked {
  background: var(--primary);
}
label.check input[type="checkbox"]:checked::after {
  content: "";
  display: block;
  width: 0.3rem;
  height: 0.6rem;
  margin: 0.14rem 0 0 0.4rem;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
label.check input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
label.check .hint {
  flex-basis: 100%;
  margin-top: 0;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.125rem 1.25rem;
  align-items: start;
}
.grid .wide {
  grid-column: 1 / -1;
}
.grid .submit {
  grid-column: 1 / -1;
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
}
.divide {
  grid-column: 1 / -1;
  height: 2px;
  background: var(--muted);
  border-radius: 1px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.row form {
  display: contents;
}
form.inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
form.inline input:not([type="checkbox"]) {
  width: auto;
  flex: 1 1 12rem;
  max-width: 24rem;
  margin-top: 0;
}

/* -------------------------------------------------------------------- Chips
 * Razzia färbt Zustände flächig und setzt den Rand einen Ton dunkler
 * (bg-yellow-500 mit border-yellow-600, bg-amber-700 mit border-amber-800).
 * Genau dieses Paar liegt den lauten Chips zugrunde.
 *
 * Laut ist aber nur, was Aufmerksamkeit verdient. Ein Zustand, der in Ordnung
 * ist, bleibt ruhig und trägt nur ein grünes Quadrat — sonst leuchtet die
 * halbe Seite grün und die eine rote Meldung geht darin unter.
 */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.1875rem 0.5rem;
  border-radius: var(--r-md);
  border: 2px solid var(--accent);
  background: var(--muted);
  color: var(--accent-foreground);
  white-space: nowrap;
}
.pill i {
  display: block;
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 2px;
  background: var(--muted-foreground);
}
.pill.good i {
  background: var(--green-text);
}
.pill.bad {
  background: var(--red);
  border-color: var(--red-strong);
  color: #fff;
}
.pill.bad i {
  background: #fff;
}
.pill.warn {
  background: var(--yellow);
  border-color: var(--yellow-edge);
  color: #3d2b00;
}
.pill.warn i {
  background: #3d2b00;
}

.status {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-bottom: 1rem;
}

/* ---------------------------------------------------------------- Meldungen
 * Razzias Toaster: weiße Fläche, gerundet, Schatten, font-weight 700. Der
 * 2-px-Rand in der Zustandsfarbe folgt derselben Rand-Logik wie die Chips.
 */
.messages {
  margin-bottom: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.msg {
  background: var(--background);
  border: 2px solid var(--accent);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  padding: 0.6875rem 0.9375rem;
  display: flex;
  gap: 0.6875rem;
  align-items: flex-start;
}
.msg::before {
  content: "";
  flex: none;
  width: 0.625rem;
  height: 0.625rem;
  margin-top: 0.375rem;
  border-radius: 2px;
  background: var(--accent);
}
.msg p {
  margin: 0;
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--foreground);
  white-space: pre-wrap;
  overflow-wrap: break-word;
  min-width: 0;
}
.msg.ok {
  border-color: var(--green-text);
}
.msg.ok::before {
  background: var(--green-text);
}
.msg.error {
  border-color: var(--red);
}
.msg.error::before {
  background: var(--red);
}
.msg.error p {
  color: var(--red-strong);
}
.msg.info {
  border-color: var(--primary);
}
.msg.info::before {
  background: var(--primary);
}

/* ------------------------------------------------------------------ Instanz
 * Eine Instanz ist eine Karte in der Karte: muted als Fläche, damit sie sich
 * vom weißen Grund abhebt, ohne einen zweiten Schatten zu brauchen.
 */
.instance {
  background: var(--muted);
  border-radius: var(--r-xl);
  padding: 1rem 1.125rem;
  margin-bottom: 0.75rem;
}
.instance:last-child {
  margin-bottom: 0;
}
.instance > header {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-wrap: wrap;
}
.instance h2 {
  margin: 0;
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--foreground);
  letter-spacing: -0.01em;
}
.instance .state {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted-foreground);
}
.dot {
  flex: none;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 2px;
  background: var(--accent);
}
.dot.on {
  background: var(--green-text);
}
.dot.off {
  background: var(--muted-foreground);
}

/* Zwei Spalten, nicht drei: eine Adresse mit Port und Pfad braucht Platz,
 * sonst bricht sie mitten im Wort um und wird unlesbar. */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
  gap: 0.3125rem 2rem;
  margin: 0.875rem 0 1rem;
}
.facts > div {
  display: flex;
  gap: 0.625rem;
  min-width: 0;
  font-size: 0.875rem;
  align-items: baseline;
}
.facts dt {
  flex: 0 0 5rem;
  color: var(--muted-foreground);
  font-weight: 600;
}
/* Für Listen mit längeren Bezeichnungen — sonst bricht „Im Container“ um. */
.facts.labels-wide dt {
  flex-basis: 7.5rem;
}
.facts dd {
  margin: 0;
  min-width: 0;
  font-weight: 600;
  color: var(--foreground);
  overflow-wrap: break-word;
}
/* Hier durchgehend unterstrichen, nicht erst beim Zeigen: das sind die
 * Adressen, die man aufruft, und sie sollen ohne Suchen als Verweis zu
 * erkennen sein. */
.facts a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.facts a:hover {
  color: #8a4e00;
  text-decoration-thickness: 2px;
}

/* Der IP-Verweis neben einer Adresse. Kein Text, deshalb die Optik der
 * Sekundärknöpfe im Kleinen: weiße Fläche, 2 px in accent, im Zeigen der Rand
 * in primary. Nicht unterstrichen — es ist ein Ziel, kein Wort. */
.facts a.ip-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.375rem;
  height: 1.375rem;
  margin-left: 0.4375rem;
  vertical-align: -0.3125rem;
  border-radius: var(--r-md);
  background: var(--background);
  color: var(--muted-foreground);
  box-shadow: inset 0 0 0 2px var(--accent);
  text-decoration: none;
  transition: color 0.12s, box-shadow 0.12s;
}
.facts a.ip-link:hover {
  color: var(--link);
  box-shadow: inset 0 0 0 2px var(--primary);
}
.facts a.ip-link svg {
  width: 0.8125rem;
  height: 0.8125rem;
  display: block;
}
.facts code {
  font-size: 0.8125rem;
  font-weight: 600;
}
.pw {
  background: var(--background);
  border: 2px solid var(--accent);
  border-radius: var(--r-md);
  padding: 0 0.375rem;
  font-size: 0.8125rem;
}

/* Passwort verdeckt; das versteckte Kontrollkästchen davor schaltet um. */
.secret {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
}
.secret-toggle:checked ~ .secret-masked,
.secret-toggle:not(:checked) ~ .secret-plain {
  display: none;
}
/* Kleine Knöpfe in der Optik des IP-Verweises */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.375rem;
  height: 1.375rem;
  padding: 0;
  border: 0;
  border-radius: var(--r-md);
  background: var(--background);
  color: var(--muted-foreground);
  box-shadow: inset 0 0 0 2px var(--accent);
  cursor: pointer;
}
.icon-btn:hover,
.secret-toggle:checked + .pw + .pw + .icon-btn {
  color: var(--link);
  box-shadow: inset 0 0 0 2px var(--primary);
}
.icon-btn.copied {
  color: #fff;
  background: var(--primary);
  box-shadow: none;
}
.icon-btn svg {
  width: 0.8125rem;
  height: 0.8125rem;
  display: block;
}
.copy-buffer {
  position: fixed;
  top: -10rem;
  opacity: 0;
}

/* Aufklappbares ohne eigene Farbe, nur mit einer Trennlinie in accent. */
details {
  margin-top: 0.625rem;
  border-top: 2px solid var(--accent);
  padding-top: 0.625rem;
}
summary {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--accent-foreground);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.4375rem;
}
summary::-webkit-details-marker {
  display: none;
}
summary::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform 0.15s;
}
details[open] summary::before {
  transform: rotate(90deg);
}
summary:hover {
  color: var(--foreground);
}
details.danger summary {
  color: var(--red-strong);
}
details > *:not(summary) {
  margin-top: 0.6875rem;
}

/* --------------------------------------------------------------------- Logs
 * Der Kasten nimmt die Tinte, die Razzia für seine harten Schatten benutzt,
 * und die Cremefarbe, mit der es auf dunklem Grund schreibt.
 */
.log {
  background: var(--ink);
  color: var(--cream);
  border-radius: var(--r-xl);
  padding: 1rem 1.125rem;
  margin: 0 0 1rem;
  font-size: 0.8125rem;
  line-height: 1.55;
  overflow: auto;
  max-height: 34rem;
}

.empty {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--muted-foreground);
  margin: 0;
}

@media (max-width: 40rem) {
  .masthead {
    padding: 1.5rem 1rem 1rem;
  }
  .masthead nav {
    gap: 1rem;
  }
  main {
    padding: 0 1rem 2rem;
  }
  .card {
    padding: 1rem 1.125rem;
  }
  .facts dt {
    flex-basis: 4.5rem;
  }
}