/* ============================================================================
   Parental Control Wiki — diagrams.css
   ----------------------------------------------------------------------------
   Stile für die fünf SVG-Diagramme, die von Wiki-Artikeln inline eingebettet
   werden. Diese Datei ist der CSS-Vertrag für die Diagramme; sie wird über
   den Post-Build-Injektor post-build-pcw-diagrams.js auf jeder Seite
   verlinkt.

   Architektur-Anker:
     - Die fünf SVG-Dateien unter quartz/quartz/static/diagrams/ verwenden
       AUSSCHLIESSLICH Klassen — keine style="..."-Attribute, keine festen
       Hex-Farben. Die Farben kommen aus den --pcw-*-Tokens, die wiederum
       in pcw-design.css definiert sind. Wer einen Token verschlechtert,
       schlägt dort im Kontrasttest fehl — und die Diagramme reissen
       gleichzeitig mit, weil sie auf denselben Tokens sitzen.
     - CSP `style-src 'self'` (docker/Caddyfile) verbietet Inline-<style>
       und Inline-`style="..."`; die SVGs werden deshalb über Klassen
       gestaltet, nicht über Attribute.
     - Die fünf SVGs sind nachweislich kommentiert (siehe SVG-Quellen),
       welches öffentlich-rechtliche Muster Pate stand und dass nur die
       Interaktionslogik übernommen wurde — kein GOV.UK-Look, keine
       NHS-Anmutung, keine staatliche Optik.

   Klassenverzeichnis:
     .pcw-diagram                  — alle Diagramme
     .pcw-diagram-text             — Textknoten (Labels, Fragen, Aussagen)
     .pcw-diagram-text--muted      — Sekundärtext (Erklärungen unter Knoten)
     .pcw-diagram-text--step       — Nummerierte Schrittbeschriftung
     .pcw-diagram-text--title      — Diagrammtitel (oberhalb)
     .pcw-diagram-text--question   — Fragetext
     .pcw-diagram-text--outcome    — Endpunkt-Erklärung
     .pcw-diagram-text--branch     — Zweig-Beschriftung (Ja/Nein/etc.)
     .pcw-diagram-text--uncertain  — "Ich bin nicht sicher"-Hinweis
     .pcw-diagram-edge             — Verbindungslinien
     .pcw-diagram-edge--back       — Rückweg-Pfeil
     .pcw-diagram-node             — Knoten-Box
     .pcw-diagram-node--start      — Anfangsknoten
     .pcw-diagram-node--end        — Endknoten
     .pcw-diagram-node--step       — nummerierter Schritt
     .pcw-diagram-node--question   — Fragestation
     .pcw-diagram-node--outcome    — Ergebnisknoten
     .pcw-diagram-node--task       — Aufgabe
     .pcw-diagram-node--task-done  — Aufgabe erledigt
     .pcw-diagram-node--task-open  — Aufgabe offen
     .pcw-diagram-node--task-attn  — Aufgabe mit Aufmerksamkeitsbedarf
     .pcw-diagram-node--group      — Container-Rahmen für Aufgabengruppen
     .pcw-diagram-node--unsure     — "Ich bin nicht sicher"-Knoten
     .pcw-diagram-edge             — Pfeillinien
     .pcw-diagram-back-label       — Beschriftung "Zurück"
     .pcw-diagram-marker-end       — Pfeilspitze
     .pcw-diagram-step-number      — Nummer in einem Schritt
     ========================================================================== */

/* ---- BASIS ----------------------------------------------------------------
   Alle SVG-Wurzeln. Systemschrift (kein externer Font-Aufruf), Tabular-Zahlen
   für Schritt-Nummern, festgelegter viewBox — das SVG skaliert proportional,
   weil die maximale Breite 100 % ist und die Höhe automatisch wächst. */
.pcw-diagram {
  display: block;
  width: 100%;
  height: auto;
  max-width: 720px;
  margin: var(--pcw-space-4) auto;
  font-family: var(--bodyFont, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  font-size: 14px;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--pcw-ink);
  background: transparent;
}

.pcw-diagram-text {
  font-family: var(--bodyFont, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  font-size: 14px;
  fill: var(--pcw-ink);
  paint-order: stroke fill;
}

.pcw-diagram-text--muted {
  fill: var(--pcw-ink-muted);
  font-size: 12px;
}

.pcw-diagram-text--step {
  font-weight: 600;
  fill: var(--pcw-ink);
}

.pcw-diagram-text--title {
  font-family: var(--headerFont, serif);
  font-size: 16px;
  font-weight: 600;
  fill: var(--pcw-ink);
}

.pcw-diagram-text--question {
  font-weight: 600;
  fill: var(--pcw-ink);
}

.pcw-diagram-text--outcome {
  fill: var(--pcw-ink);
  font-size: 13px;
}

.pcw-diagram-text--branch {
  font-size: 12px;
  font-weight: 600;
  fill: var(--pcw-ink-muted);
}

.pcw-diagram-text--uncertain {
  fill: var(--pcw-ink-muted);
  font-style: italic;
  font-size: 12px;
}

/* ---- KNOTEN --------------------------------------------------------------
   Box-Form: 6 px Radius, 1 px Rand, transparenter Füller im hellen Modus,
   im dunklen Modus denselben Token. Die Tönung wird über die
   --pcw-*-Varianten pro Knotentyp gesetzt. */
.pcw-diagram-node {
  fill: var(--pcw-bg);
  stroke: var(--pcw-border);
  stroke-width: 1.5;
}

.pcw-diagram-node--start {
  fill: var(--pcw-accent);
  stroke: var(--pcw-accent);
}

.pcw-diagram-node--start .pcw-diagram-text {
  fill: var(--pcw-accent-ink);
  font-weight: 600;
}

.pcw-diagram-node--end {
  fill: var(--pcw-bg-raised);
  stroke: var(--pcw-accent);
  stroke-width: 2;
}

.pcw-diagram-node--step {
  fill: var(--pcw-bg-raised);
  stroke: var(--pcw-border);
}

.pcw-diagram-node--question {
  fill: var(--pcw-bg-raised);
  stroke: var(--pcw-accent);
  stroke-width: 1.5;
}

.pcw-diagram-node--outcome {
  fill: var(--pcw-bg);
  stroke: var(--pcw-border);
}

.pcw-diagram-node--unsure {
  fill: var(--pcw-bg);
  stroke: var(--pcw-ink-muted);
  stroke-dasharray: 4 3;
}

.pcw-diagram-node--task {
  fill: var(--pcw-bg-raised);
  stroke: var(--pcw-border);
}

.pcw-diagram-node--task-done {
  fill: var(--pcw-bg);
  stroke: var(--pcw-accent);
  stroke-width: 1.5;
}

.pcw-diagram-node--task-done .pcw-diagram-step-number {
  fill: var(--pcw-accent);
}

.pcw-diagram-node--task-open {
  fill: var(--pcw-bg-raised);
  stroke: var(--pcw-border);
}

.pcw-diagram-node--task-attn {
  fill: var(--pcw-warn);
  stroke: var(--pcw-warn-ink);
  stroke-width: 1.5;
}

.pcw-diagram-node--task-attn .pcw-diagram-text {
  fill: var(--pcw-warn-ink);
}

.pcw-diagram-node--group {
  fill: transparent;
  stroke: var(--pcw-border);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}

.pcw-diagram-group-label {
  fill: var(--pcw-ink-muted);
  font-size: 11px;
  font-weight: 600;
  font-variant: small-caps;
  letter-spacing: 0.04em;
}

/* ---- KANTEN --------------------------------------------------------------
   Pfeillinien zwischen Knoten. Stroke kommt aus --pcw-border (UI-Schwelle
   3:1), Pfeilspitze als <marker> am Ende. Die Rückweg-Linie ist gestrichelt
   und nutzt --pcw-ink-muted, damit sie als sekundärer Pfad lesbar ist. */
.pcw-diagram-edge {
  stroke: var(--pcw-border);
  stroke-width: 1.5;
  fill: none;
}

.pcw-diagram-edge--back {
  stroke: var(--pcw-ink-muted);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
  fill: none;
}

.pcw-diagram-back-label {
  fill: var(--pcw-ink-muted);
  font-size: 11px;
  font-style: italic;
}

.pcw-diagram-step-number {
  fill: var(--pcw-accent);
  font-weight: 700;
  font-size: 14px;
  font-variant-numeric: tabular-nums lining-nums;
}

/* ---- MOBILE --------------------------------------------------------------
   Bei 360 px Breite muss das SVG noch lesbar sein. Wir setzen die
   Mindeststrichbreite leicht hoch (1.5 px) und nutzen grosszügige Innen­
   abstände, damit Knoten-Boxen nicht zusammenklappen. Skalierung erfolgt
   über viewBox — der Browser rechnet alles proportional. */
@media (max-width: 480px) {
  .pcw-diagram {
    font-size: 13px;
  }
  .pcw-diagram-text {
    font-size: 13px;
  }
  .pcw-diagram-text--muted {
    font-size: 11px;
  }
}

/* ---- REDUZIERTE BEWEGUNG ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .pcw-diagram * {
    transition: none;
    animation: none;
  }
}