/*
  Rechtstexte — eigenständige Seiten, kein Bundle.

  Sie werden von Caddy ausgeliefert und müssen auch dann lesbar sein, wenn der
  Spielserver aus ist. Deshalb kein Import aus `src/ui/styles.css`: die Farbwerte
  stehen hier noch einmal, bewusst als Kopie. Ein Rechtstext, der nicht angezeigt
  wird, weil ein Build fehlt, ist schlimmer als eine doppelte Farbangabe.

  Die Werte selbst sind die des Clients (styles.css :root) — die Seiten sollen
  aussehen wie das Spiel, aus dem man kommt.
*/
:root {
  --bg: #0e121a;
  --surface: rgba(22, 28, 39, 0.92);
  --line: #28303f;
  --ink: #e7ebf3;
  --ink-2: #9aa4b8;
  --accent: #6f95ff;
  --amber: #ffd489;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  /* ~65 Zeichen Lauflänge — ein Rechtstext wird gelesen, nicht überflogen. */
  max-width: 46rem;
  margin: 0 auto;
  padding: 34px 24px 90px;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 34px;
}
nav .brand { font-weight: 600; letter-spacing: -0.01em; }
nav a { color: var(--ink-2); text-decoration: none; font-size: 14px; }
nav a:hover { color: var(--ink); text-decoration: underline; }

h1 { margin: 0 0 6px; font-size: 30px; font-weight: 600; letter-spacing: -0.02em; }

/* Der Zustand des Dokuments, direkt unter dem Titel. Ein Entwurf, den man erst
   im dritten Absatz als solchen erkennt, ist eine Falle. */
.status {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 5px;
  margin-bottom: 26px;
}
.status-draft { color: var(--amber); border: 1px solid rgba(255, 212, 137, 0.4); }
.status-published { color: #8fd6a4; border: 1px solid rgba(143, 214, 164, 0.4); }

h2 { margin: 34px 0 8px; font-size: 18px; font-weight: 600; }
p { margin: 0 0 14px; }
ul { margin: 0 0 14px; padding-left: 22px; }
li { margin-bottom: 7px; }
a { color: var(--accent); }
code { font-family: var(--mono); font-size: 13.5px; }
strong { font-weight: 600; }

.lead { color: var(--ink-2); font-size: 16.5px; }

/* ── Eine fehlende Pflichtangabe soll man SEHEN ──────────────────────────────────
   Eine leere Aufnahmestelle rendert als Lücke: der Satz liest sich wie ein
   Formatierungsfehler, nicht wie eine fehlende Angabe. Bei „Verantwortlicher:"
   gefolgt von nichts ist das die schlechteste Form — man übersieht es beim
   Korrekturlesen und merkt es erst, wenn jemand fragt, wer denn verantwortlich sei.

   ⚠ ALS REGEL UND NICHT JE STELLE. `:empty` trifft JEDE Aufnahmestelle, die noch
   keinen Wert hat — auch eine, die morgen dazukommt. Eine Liste der Pflichtstellen
   müsste jemand pflegen; diese Regel kann man nicht vergessen. Sobald ein Wert da
   ist, hat die Stelle einen Textknoten und die Regel greift nicht mehr.

   Optionale Angaben stören das nicht: ihre Zeile trägt `data-op-row` und ist
   ausgeblendet, solange der Wert fehlt — der Platzhalter darin ist unsichtbar. */
[data-op]:empty::after {
  content: "not filled in";
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--amber);
  border: 1px dashed rgba(255, 212, 137, 0.45);
  border-radius: 4px;
  padding: 0 6px;
  /* Nicht kursiv und nicht fett: es ist eine Markierung, kein Wert. Wer sie für
     einen Namen halten könnte, hätte einen schlechteren Platzhalter vor sich. */
  font-style: normal;
  font-weight: 400;
}

.box {
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: 10px;
  padding: 16px 18px;
  margin: 0 0 22px;
  background: var(--surface);
}
.box h2 { margin-top: 0; }
.box p:last-child, .box ul:last-child { margin-bottom: 0; }
.box-amber { border-left-color: var(--amber); }

footer {
  margin-top: 54px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 13.5px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}
footer a { color: var(--ink-2); }