/* The frame around a help page. tokens.css, markdown.css and theme.css are copies
   from the release-notes site (changelog-nomos) and are not edited here, so they can
   be re-synced; everything specific to these pages lives in this file. */

body {
  padding: 0;                       /* markdown.css pads the body; we pad the column */
  background: var(--nomos-bg);
  color: var(--nomos-text);
}

/* Kopfleiste wie in der Dokumentation: 64 Pixel hoch, Logo 24 Pixel, Titel 16/600,
   Menüpunkte 14/500 mit 12 Pixel Innenabstand, darunter eine Haarlinie. Die Maße
   stammen aus deren Stylesheet, die Farben sind unsere eigenen Tokens - dort sind
   die VitePress-Variablen ohnehin auf dieselben gesetzt. */
.nomos-head {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--nomos-bg);
  border-bottom: 1px solid var(--nomos-line);
}

.nomos-head-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nomos-space-4);
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 32px;
  /* min-height statt height: zwischen dem Umbruchpunkt des Menüs und der
     Media Query darunter würde eine umgebrochene Zeile sonst abgeschnitten. */
  min-height: 64px;
}

.nomos-brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  height: 64px;
  font-size: 16px;
  font-weight: var(--nomos-fw-semibold);
  color: var(--nomos-text);
  text-decoration: none;
}
.nomos-brand img {
  display: block;
  height: 24px;
  width: auto;
  margin-right: 8px;
}
/* Zwei Dateien statt eines Filters, genau wie in der Dokumentation.
   Die Auswahl nennt img mit, sonst gewinnt die Regel .nomos-brand img darüber. */
.nomos-brand img.nomos-logo-dark { display: none; }
:root.dark .nomos-brand img.nomos-logo-light { display: none; }
:root.dark .nomos-brand img.nomos-logo-dark { display: block; }

.nomos-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.nomos-nav a {
  display: flex;
  align-items: center;
  padding: 0 12px;
  line-height: 64px;
  font-size: 14px;
  font-weight: var(--nomos-fw-medium);
  color: var(--nomos-text);
  text-decoration: none;
  transition: color 0.25s;
}
.nomos-nav a:hover,
.nomos-nav a.nomos-nav-here { color: var(--nomos-accent); }
/* Verweise, die die Dokumentation verlassen, tragen dort einen kleinen Pfeil */
.nomos-nav a.nomos-nav-out::after {
  content: "↗";
  margin-left: 3px;
  font-size: 11px;
}

/* Die Kategorie steht jetzt über der Überschrift statt in der Leiste */
.nomos-page .nomos-eyebrow {
  margin: 0 0 var(--nomos-space-2);
  color: var(--nomos-text-muted);
}

.nomos-page {
  max-width: 54rem;
  margin: 0 auto;
  padding: var(--nomos-space-8) var(--nomos-space-6) var(--nomos-space-12);
}

/* A setup page is a sequence of numbered steps and value lists: give the headings
   air and let the first one sit tight under the header. */
.nomos-page h1,
.nomos-page h2 {
  margin-top: var(--nomos-space-10);
  margin-bottom: var(--nomos-space-3);
  font-weight: var(--nomos-fw-semibold);
  line-height: 1.25;
}
.nomos-page > *:first-child { margin-top: 0; }
.nomos-page h3 { margin-top: var(--nomos-space-8); }
.nomos-page li { margin: var(--nomos-space-2) 0; }
.nomos-page li > ul { margin-top: var(--nomos-space-2); }

/* The notice every page opens with: the brand bar of a bare blockquote is too
   quiet for it, so it reads as a card. */
.nomos-page > blockquote:first-of-type {
  margin: 0 0 var(--nomos-space-8);
  padding: var(--nomos-space-4) var(--nomos-space-5);
  border-left: 3px solid var(--nomos-accent);
  border-radius: var(--nomos-radius-md);
  background: var(--nomos-info-bg);
  color: var(--nomos-info-text);
}
.nomos-page > blockquote:first-of-type p { margin: 0; }

/* Tables carry register lists and value ranges; they must not push the page wide.
   Den Rahmen setzt das Layout per Skript um jede Tabelle; passt sie in die Spalte,
   ist er wirkungslos, sonst scrollt sie darin statt die Seite breiter zu machen. */
.nomos-page table { width: 100%; }
.nomos-table-scroll { overflow-x: auto; }

/* Fußzeile mit den Maßen der Dokumentation: 24 Pixel Innenabstand, 0,85 rem,
   zentriert, Abstände 8 und 24 Pixel, darüber der Hinweis, der nur hier gilt. */
.nomos-foot {
  padding: 24px;
  border-top: 1px solid var(--nomos-line);
  color: var(--nomos-text-muted);
  font-size: 0.85rem;
  text-align: center;
}

.nomos-foot-support { margin: 0 0 8px; }

.nomos-foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: center;
}
.nomos-foot-links a {
  color: inherit;
  text-decoration: none;
  transition: color 0.25s;
}
.nomos-foot-links a:hover { color: var(--nomos-accent); }

/* The generated overview on the start page: 104 entries, so they go into columns
   as soon as there is room, and the rows sit tighter than body copy. */
.nomos-index { list-style: none; padding: 0; margin: 0; }
.nomos-index li { margin: 0; line-height: 1.9; break-inside: avoid; }
.nomos-index-group { margin-top: var(--nomos-space-8); }
.nomos-index-group h3 {
  margin-bottom: var(--nomos-space-2);
  padding-bottom: var(--nomos-space-2);
  border-bottom: 1px solid var(--nomos-line);
}

@media (min-width: 700px) {
  .nomos-index { columns: 2; column-gap: var(--nomos-space-10); }
}

/* Unter 900 Pixeln passen Titel und sieben Menüpunkte nicht mehr nebeneinander.
   Die Dokumentation klappt das Menü dort hinter eine Schaltfläche; hier rutscht es
   stattdessen unter den Titel - weniger Technik, gleiche Ziele erreichbar. */
@media (max-width: 900px) {
  .nomos-head { position: static; }
  .nomos-head-inner {
    display: block;
    height: auto;
    padding: var(--nomos-space-4) var(--nomos-space-5);
  }
  .nomos-brand { height: auto; }
  .nomos-nav { justify-content: flex-start; margin-top: var(--nomos-space-2); }
  .nomos-nav a { padding: 0 12px 0 0; line-height: 2; }
}

@media (max-width: 600px) {
  .nomos-head-inner { padding: var(--nomos-space-4); }
  .nomos-page { padding: var(--nomos-space-6) var(--nomos-space-4) var(--nomos-space-10); }
}