/* ============================================================
   DIAGRAM FIGURES
   Styling for the build-time inline-SVG figures (`_lib/diagrams.js`)
   and the figure toolbar (download / full screen).
   All diagram colour lives here as custom properties, so a single
   [data-theme="dark"] block re-skins every chart interior.
   ============================================================ */

:root {
  --diagram-bg:           #FDFCFF;
  --diagram-panel:        #F1EDFF;
  --diagram-panel-alt:    #E4DDFB;
  --diagram-panel-accent: #FFF1D6;
  --diagram-zebra:        #F7F5FF;
  --diagram-stroke:       #C9BDF3;
  --diagram-ink:          #241F52;
  --diagram-ink-strong:   #2E1065;
  --diagram-ink-muted:    #4C4674;
  --diagram-ink-accent:   #92400E;
  --diagram-grid:         #D6CDF2;
  --diagram-line:         #6D28D9;
  --diagram-line-soft:    #9F7AEA;
  --diagram-budget:       #B91C1C;

  --dg-1: #7C3AED;
  --dg-2: #C2410C;
  --dg-3: #047857;
  --dg-4: #B91C1C;
  --dg-5: #0369A1;
  --dg-6: #B45309;
  --dg-on: #FFFFFF;

  --dg-chip-ok-bg:    #D1FAE5;
  --dg-chip-ok-ink:   #065F46;
  --dg-chip-no-bg:    #FEE2E2;
  --dg-chip-no-ink:   #991B1B;
  --dg-chip-warn-bg:  #FEF3C7;
  --dg-chip-warn-ink: #92400E;
  --dg-chip-note-bg:  #EDE9FE;
  --dg-chip-note-ink: #4C1D95;
}

[data-theme="dark"] {
  --diagram-bg:           #171331;
  --diagram-panel:        #241D47;
  --diagram-panel-alt:    #2E2559;
  --diagram-panel-accent: #45350F;
  --diagram-zebra:        #1E1940;
  --diagram-stroke:       #4A3F78;
  --diagram-ink:          #EDE9FE;
  --diagram-ink-strong:   #F4F1FF;
  --diagram-ink-muted:    #B9B1D8;
  --diagram-ink-accent:   #FCD34D;
  --diagram-grid:         #453B70;
  --diagram-line:         #A78BFA;
  --diagram-line-soft:    #7C6BC0;
  --diagram-budget:       #FCA5A5;

  --dg-chip-ok-bg:    #123528;
  --dg-chip-ok-ink:   #6EE7B7;
  --dg-chip-no-bg:    #401A1A;
  --dg-chip-no-ink:   #FCA5A5;
  --dg-chip-warn-bg:  #45350F;
  --dg-chip-warn-ink: #FCD34D;
  --dg-chip-note-bg:  #2A2154;
  --dg-chip-note-ink: #C4B5FD;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --diagram-bg:           #171331;
    --diagram-panel:        #241D47;
    --diagram-panel-alt:    #2E2559;
    --diagram-panel-accent: #45350F;
    --diagram-zebra:        #1E1940;
    --diagram-stroke:       #4A3F78;
    --diagram-ink:          #EDE9FE;
    --diagram-ink-strong:   #F4F1FF;
    --diagram-ink-muted:    #B9B1D8;
    --diagram-ink-accent:   #FCD34D;
    --diagram-grid:         #453B70;
    --diagram-line:         #A78BFA;
    --diagram-line-soft:    #7C6BC0;
    --diagram-budget:       #FCA5A5;

    --dg-chip-ok-bg:    #123528;
    --dg-chip-ok-ink:   #6EE7B7;
    --dg-chip-no-bg:    #401A1A;
    --dg-chip-no-ink:   #FCA5A5;
    --dg-chip-warn-bg:  #45350F;
    --dg-chip-warn-ink: #FCD34D;
    --dg-chip-note-bg:  #2A2154;
    --dg-chip-note-ink: #C4B5FD;
  }
}

/* ── Figure chrome ── */
.diagram {
  position: relative;
  margin: var(--space-8) 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--diagram-bg);
  padding: var(--space-3) var(--space-3) var(--space-2);
  box-shadow: var(--shadow-sm);
}
.diagram > svg {
  display: block;
  width: 100%;
  height: auto;
  font-family: var(--font-sans);
}
.diagram figcaption {
  margin-top: var(--space-2);
  padding: 0 var(--space-2) var(--space-1);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  color: var(--color-text-muted);
}
.diagram:fullscreen,
.diagram:-webkit-full-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-8);
  background: var(--color-bg);
  border-radius: 0;
}
.diagram:fullscreen > svg { max-height: 85vh; }

/* ── Figure toolbar (injected by figure-tools.js) ── */
.figure-tools {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  display: flex;
  gap: var(--space-1);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--easing-standard);
}
.diagram:hover .figure-tools,
.figure-tools:focus-within { opacity: 1; }
@media (hover: none) { .figure-tools { opacity: 1; } }
.figure-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-primary-700);
  cursor: pointer;
  transition: background-color var(--duration-fast), color var(--duration-fast);
}
.figure-tool:hover { background: var(--color-primary-50); color: var(--color-primary-900); }
.figure-tool:focus-visible { outline: 2px solid var(--color-primary-500); outline-offset: 2px; }
.figure-tool svg { width: 16px; height: 16px; }

/* ── Diagram primitives ── */
.dg-canvas       { fill: var(--diagram-bg); }
.dg-panel        { fill: var(--diagram-panel); stroke: var(--diagram-stroke); stroke-width: 1; }
.dg-panel-alt    { fill: var(--diagram-panel-alt); }
.dg-panel-accent { fill: var(--diagram-panel-accent); stroke: #F59E0B; stroke-width: 1.5; }
.dg-zebra        { fill: var(--diagram-zebra); }
.dg-title        { fill: var(--diagram-ink-strong); font-weight: 600; }
.dg-ink          { fill: var(--diagram-ink); }
.dg-ink-strong   { fill: var(--diagram-ink-strong); font-weight: 600; }
.dg-ink-muted    { fill: var(--diagram-ink-muted); }
.dg-ink-accent   { fill: var(--diagram-ink-accent); font-weight: 600; }
.dg-ink-budget   { fill: var(--diagram-budget); }
.dg-grid         { stroke: var(--diagram-grid); fill: none; }
.dg-line         { stroke: var(--diagram-line); fill: none; }
.dg-line--soft   { stroke: var(--diagram-line-soft); }
.dg-budget       { stroke: var(--diagram-budget); fill: none; }
.dg-arrow        { fill: var(--diagram-line); }
.dg-on-fill      { fill: var(--dg-on); }
.dg-slab         { stroke: var(--diagram-bg); stroke-width: 1.5; }

.dg-fill-s1 { fill: var(--dg-1); }
.dg-fill-s2 { fill: var(--dg-2); }
.dg-fill-s3 { fill: var(--dg-3); }
.dg-fill-s4 { fill: var(--dg-4); }
.dg-fill-s5 { fill: var(--dg-5); }
.dg-fill-s6 { fill: var(--dg-6); }
.dg-stroke-s1 { stroke: var(--dg-1); }
.dg-stroke-s2 { stroke: var(--dg-2); }
.dg-stroke-s3 { stroke: var(--dg-3); }
.dg-stroke-s4 { stroke: var(--dg-4); }
.dg-stroke-s5 { stroke: var(--dg-5); }
.dg-stroke-s6 { stroke: var(--dg-6); }
[data-theme="dark"] .dg-stroke-s2 { stroke: #FDBA74; }
[data-theme="dark"] .dg-stroke-s3 { stroke: #6EE7B7; }
[data-theme="dark"] .dg-stroke-s4 { stroke: #FCA5A5; }
[data-theme="dark"] .dg-stroke-s5 { stroke: #7DD3FC; }
[data-theme="dark"] .dg-stroke-s6 { stroke: #FCD34D; }
[data-theme="dark"] .dg-stroke-s1 { stroke: #A78BFA; }

.dg-chip-ok    { fill: var(--dg-chip-ok-bg); }
.dg-chip-no    { fill: var(--dg-chip-no-bg); }
.dg-chip-warn  { fill: var(--dg-chip-warn-bg); }
.dg-chip-note  { fill: var(--dg-chip-note-bg); }
.dg-chip-ink-ok   { fill: var(--dg-chip-ok-ink); font-weight: 500; }
.dg-chip-ink-no   { fill: var(--dg-chip-no-ink); font-weight: 500; }
.dg-chip-ink-warn { fill: var(--dg-chip-warn-ink); font-weight: 500; }
.dg-chip-ink-note { fill: var(--dg-chip-note-ink); font-weight: 500; }

.dg-band-ok       { fill: var(--dg-chip-ok-bg); }
.dg-band-caution  { fill: var(--dg-chip-warn-bg); }
.dg-band-danger   { fill: var(--dg-chip-no-bg); }
.dg-band-ink-ok      { fill: var(--dg-chip-ok-ink); }
.dg-band-ink-caution { fill: var(--dg-chip-warn-ink); }
.dg-band-ink-danger  { fill: var(--dg-chip-no-ink); }