/* dmarc.css — page-specific styles for /dmarc.html and /de/dmarc.html.

   Separate file because the site CSP is style-src 'self' (no inline styles,
   no style= attributes) and styles.css must not be touched — a change there
   forces a ?v= bump in ~80 HTML files. Prefix: dm-

   Deliberately small: .info-page pre (scroll-contained code blocks),
   .fact-table, .fdrill-table, .gen-toc, .gen-note, .gen-warn, .info-grid and
   .linked-cards already exist in styles.css and are reused as-is. Only what
   has no equivalent there lives here.

   Colour tokens come from styles.css (:root plus the two dark blocks), so this
   file needs no dark-mode rules of its own — every value below is a var(). */

/* --- Standdatum unter dem Lead ------------------------------------------ */
.dm-meta {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-muted);
  border-left: 3px solid var(--line);
  padding-left: 10px;
  margin: 18px 0 4px;
}

/* --- Zwei Spalten: "deckt ab" gegen "deckt nicht ab" -------------------- */
.dm-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 16px;
  margin: 18px 0;
}
.dm-split > div {
  border: 1px solid var(--line-ink);
  padding: 12px 14px;
}
.dm-split h3 {
  margin: 0 0 8px;
  font-size: 0.95rem;
}
.dm-split ul { margin: 0; padding-left: 18px; }
.dm-split li { margin: 4px 0; }
.dm-can h3 { color: var(--pass); }
.dm-cannot h3 { color: var(--fail); }

/* --- Breite Tabellen in einen eigenen Scroll-Container ------------------ */
/* Hinweis: styles.css hat bereits .table-scroll { overflow-x: auto } — für den
   einfachen Fall (z. B. public/tests.html) ist DAS die richtige Klasse.
   .dm-scroll ist ihre Erweiterung um Rahmen und min-width, weil die Tabellen
   dieser Seite sonst am Seitenrand kleben und beim Scrollen nicht erkennbar
   abgeschnitten wirken. Keine neue Scroll-Klasse anlegen — eine der beiden nutzen. */
.dm-scroll {
  overflow-x: auto;
  margin: 14px 0;
  /* der Rahmen sitzt am Container, damit beim Scrollen klar bleibt,
     dass Inhalt abgeschnitten ist */
  border: 1px solid var(--line);
}
.dm-scroll > table { margin: 0; min-width: 34rem; }

/* Zeile eines Tags, das der Standard entfernt hat */
.dm-historic td:first-child { color: var(--text-muted); text-decoration: line-through; }
.dm-historic td { color: var(--text-muted); }

/* --- Kommentierte Beispiel-Records -------------------------------------- */
.dm-example { margin: 20px 0; }
.dm-example h3 {
  margin: 0 0 6px;
  font-size: 0.95rem;
}
.dm-example > p { margin: 8px 0 0; font-size: 0.9rem; }
.dm-example .dm-pitfall {
  font-size: 0.85rem;
  color: var(--warn);
  border-left: 3px solid var(--warn);
  padding-left: 10px;
  margin-top: 8px;
}

/* --- Entscheidungsbaum: verschachtelte <details> ------------------------ */
.dm-tree { margin: 18px 0; }
.dm-tree details {
  border: 1px solid var(--line-ink);
  margin: 8px 0;
  padding: 0;
}
.dm-tree details details {
  border: 0;
  border-left: 2px solid var(--line);
  margin: 6px 0 6px 14px;
}
.dm-tree summary {
  cursor: pointer;
  padding: 9px 12px;
  font-weight: 600;
  font-size: 0.92rem;
  /* Touch-Ziel >= 44px (Mobile-Regel der Site) */
  min-height: 44px;
  display: flex;
  align-items: center;
}
.dm-tree details details > summary {
  font-weight: 500;
  font-size: 0.88rem;
  padding: 8px 10px;
}
.dm-tree summary:hover { color: var(--brand); }
.dm-tree .dm-branch { padding: 0 12px 10px; font-size: 0.9rem; }
.dm-tree .dm-branch > p { margin: 6px 0; }
.dm-tree .dm-fix {
  border-left: 3px solid var(--pass);
  padding-left: 10px;
  color: var(--text);
}

/* --- Glossar ------------------------------------------------------------ */
.dm-glossary { margin: 14px 0; }
.dm-glossary dt {
  font-weight: 600;
  font-size: 0.92rem;
  margin-top: 12px;
}
.dm-glossary dd {
  margin: 3px 0 0;
  padding-left: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* --- Mobile ------------------------------------------------------------- */
@media (max-width: 640px) {
  .dm-split { grid-template-columns: 1fr; }
  .dm-tree details details { margin-left: 8px; }
  .dm-meta { font-size: 0.72rem; }
}

/* ---------- Table of contents (this page only) ----------------------------
   CHAPTER LEVEL ONLY, on purpose. Nesting all 75 sub-headings here was tried
   and reverted: 95 entries over three columns ran past 1000px, so the article
   started a screen and a half below a wall of navigation. The sub-headings sit
   in .dm-subtoc inside their own section instead. 20 entries in three columns
   is about seven rows. */
.dm-toc {
  margin: 26px 0 40px;
  padding: 16px 20px;
  border: 1px solid var(--line-ink);
  background: var(--bg-sunk);
}
.dm-toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 1;
  column-gap: 30px;
}
.dm-toc li {
  break-inside: avoid;
  margin: 0 0 6px;
}
.dm-toc a {
  display: block;
  font-size: 0.86rem;
  line-height: 1.35;
  color: var(--text);
  text-decoration: none;
}
.dm-toc a:hover,
.dm-toc a:focus-visible { color: var(--brand); text-decoration: underline; }

@media (min-width: 700px) { .dm-toc ul { columns: 2; } }
@media (min-width: 1000px) { .dm-toc ul { columns: 3; } }

/* ---------- Per-section sub-navigation ------------------------------------
   Sits directly under the section's h2, so you see a chapter's contents when
   you arrive at it rather than all 75 at once on the landing view. Kept light:
   no box, just an indented rule, so it reads as part of the heading block and
   not as another card. */
.dm-subtoc {
  margin: 0 0 26px;
  padding: 2px 0 2px 14px;
  border-left: 2px solid var(--line);
}
.dm-subtoc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 1;
  column-gap: 28px;
}
.dm-subtoc li {
  break-inside: avoid;
  margin: 0 0 3px;
}
.dm-subtoc a {
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--text-muted);
  text-decoration: none;
}
.dm-subtoc a:hover,
.dm-subtoc a:focus-visible { color: var(--brand); text-decoration: underline; }

@media (min-width: 760px) { .dm-subtoc ul { columns: 2; } }

/* ---------- Contents rail on wide screens ---------------------------------
   Below 1200px nothing changes: the chapter box stays in the flow, exactly as
   it is on narrow screens and on mobile. From 1200px it moves into a LEFT-hand
   column and sticks, so the contents stay reachable on a 27,000-word page.

   <main> has exactly three children — .dm-intro (h1 + lead + meta), the nav and
   .dm-body — which is why this is three rules instead of the row-span arithmetic
   an earlier version needed. The intro spans both columns, so the rail and the
   article start on the same line, level with the first section rather than up
   beside the headline.

   Sticking works because the nav's grid area is row 2, i.e. as tall as the whole
   article, while align-self:start keeps the element itself only as tall as its
   content — that difference is the distance it can travel. minmax(0,1fr) on the
   text column stops a wide table or code block from squeezing the rail.

   Width is a calculation, not a guess: 21 chapter titles, several of them long
   ("What DMARC does — and what it explicitly does not"). At 264px most wrapped
   to three lines, roughly 980px — taller than a typical window. 300px gets the
   majority to two lines, about 790px. max-height plus overflow-y is the guard
   for short windows and for the German titles, which run longer. */
@media (min-width: 1200px) {
  .dm-page {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    column-gap: 44px;
  }
  .dm-intro { grid-column: 1 / -1; }
  .dm-body { grid-column: 2; }
  .dm-page > .dm-toc {
    grid-column: 1;
    align-self: start;
    position: sticky;
    top: 76px;
    /* matches .info-section's own 64px top margin, so the rail lines up with the
       first heading instead of floating above it */
    margin: 64px 0 0;
    padding: 14px 16px;
    max-height: calc(100vh - 108px);
    overflow-y: auto;
  }
  .dm-page > .dm-toc ul { columns: 1; }
  .dm-page > .dm-toc a { font-size: 0.82rem; }
}

/* Position indicator, set by dmarc-toc.js. Styled on aria-current rather than a
   class so the state is announced, not just painted. */
.dm-toc a[aria-current='true'] {
  color: var(--brand);
  font-weight: 600;
}