/* DRK scientific visuals — dependency-free SVG figures for knowledge pages. */
.drk-sciviz {
  --sv-accent: var(--accent);
  --sv-ink: var(--ink);
  --sv-muted: var(--muted);
  --sv-paper: var(--paper);
  --sv-soft: var(--soft);
  --sv-line: var(--line);
  margin: clamp(2rem, 5vw, 3.5rem) 0;
  border-block: 1px solid var(--sv-line);
  padding-block: clamp(1.2rem, 3vw, 1.8rem);
  font-family: var(--sans);
  break-inside: avoid;
}
.drk-sciviz-head { display: grid; gap: .25rem; margin-bottom: 1rem; }
.drk-sciviz-kicker { color: var(--sv-accent); font: 700 .68rem/1.5 var(--sans); letter-spacing: .11em; text-transform: uppercase; }
.drk-sciviz-title { color: var(--sv-ink); font: 600 clamp(1rem, 2vw, 1.2rem)/1.35 var(--sans); }
.drk-sciviz-stage { width: 100%; min-height: 220px; border: 1px solid var(--sv-line); background: var(--sv-soft); display: grid; place-items: center; overflow: hidden; }
.drk-sciviz-fallback { max-width: 34rem; padding: 2rem; color: var(--sv-muted); font: .875rem/1.65 var(--sans); text-align: center; }
.drk-sciviz.is-rendered .drk-sciviz-fallback { display: none; }
.drk-sciviz-svg { display: block; width: 100%; height: auto; min-height: 220px; max-height: 430px; color: var(--sv-ink); }
.drk-sciviz-equation { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .75rem; align-items: start; padding: .9rem 0 .2rem; color: var(--sv-ink); }
.drk-sciviz-equation > span { color: var(--sv-accent); font: 700 1rem/1.5 var(--serif); }
.drk-sciviz-equation code { white-space: normal; overflow-wrap: anywhere; background: transparent; color: inherit; padding: 0; font: .875rem/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.drk-sciviz figcaption { margin-top: .55rem; color: var(--sv-muted); font: .8125rem/1.6 var(--sans); }
.drk-sciviz .sv-paper { fill: var(--sv-paper); }
.drk-sciviz .sv-paper-cut { fill: var(--sv-paper); stroke: var(--sv-line); stroke-width: 2; }
.drk-sciviz .sv-line,
.drk-sciviz .sv-axis,
.drk-sciviz .sv-guide,
.drk-sciviz .sv-arrow,
.drk-sciviz .sv-outline,
.drk-sciviz .sv-outline-circle,
.drk-sciviz .sv-dashed,
.drk-sciviz .sv-contour,
.drk-sciviz .sv-heat-line { fill: none; stroke: var(--sv-line); stroke-width: 2; }
.drk-sciviz .sv-axis { stroke: var(--sv-muted); stroke-width: 1.5; }
.drk-sciviz .sv-guide { stroke-dasharray: 5 6; stroke-width: 1.3; }
.drk-sciviz .sv-dashed { stroke-dasharray: 8 7; }
.drk-sciviz .sv-guide-strong { stroke: var(--sv-accent); stroke-width: 1.6; stroke-dasharray: 5 5; }
.drk-sciviz .sv-accent-line,
.drk-sciviz .sv-stem-accent,
.drk-sciviz .sv-stem-strong { stroke: var(--sv-accent); fill: none; stroke-width: 3; }
.drk-sciviz .sv-stem-strong { stroke-width: 5; }
.drk-sciviz .sv-arrow-head { fill: var(--sv-muted); stroke: none; }
.drk-sciviz .sv-node { fill: var(--sv-paper); stroke: var(--sv-line); stroke-width: 2; }
.drk-sciviz .sv-node-accent { fill: var(--sv-soft); stroke: var(--sv-accent); stroke-width: 2.5; }
.drk-sciviz .sv-point { fill: var(--sv-paper); stroke: var(--sv-muted); stroke-width: 2; }
.drk-sciviz .sv-point-accent { fill: var(--sv-accent); stroke: var(--sv-paper); stroke-width: 2; }
.drk-sciviz .sv-point-strong { fill: var(--sv-ink); stroke: var(--sv-paper); stroke-width: 2; }
.drk-sciviz .sv-cell { fill: var(--sv-paper); stroke: var(--sv-line); stroke-width: 1; }
.drk-sciviz .sv-cell-accent { fill: color-mix(in srgb, var(--sv-accent) 20%, var(--sv-paper)); stroke: var(--sv-accent); stroke-width: 1; }
.drk-sciviz .sv-cell-strong { fill: var(--sv-accent); stroke: var(--sv-ink); stroke-width: 1.5; }
.drk-sciviz .sv-area,
.drk-sciviz .sv-area-accent { fill: color-mix(in srgb, var(--sv-accent) 16%, transparent); stroke: none; }
.drk-sciviz .sv-area-accent { fill: color-mix(in srgb, var(--sv-accent) 22%, transparent); }
.drk-sciviz .sv-curve,
.drk-sciviz .sv-curve-alt,
.drk-sciviz .sv-curve-accent,
.drk-sciviz [class*="sv-curve-series"] { fill: none; stroke: var(--sv-muted); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.drk-sciviz .sv-curve-alt { stroke: var(--sv-ink); stroke-dasharray: 7 6; }
.drk-sciviz .sv-curve-accent { stroke: var(--sv-accent); stroke-width: 3.2; }
.drk-sciviz .sv-curve-series { opacity: .55; }
.drk-sciviz .series-0 { opacity: .28; }
.drk-sciviz .series-1 { opacity: .38; }
.drk-sciviz .series-2 { opacity: .50; }
.drk-sciviz .series-3 { opacity: .65; }
.drk-sciviz .sv-shape { fill: var(--sv-paper); stroke: var(--sv-line); }
.drk-sciviz .sv-venn-a,
.drk-sciviz .sv-venn-b,
.drk-sciviz .sv-venn-c { fill: color-mix(in srgb, var(--sv-accent) 12%, transparent); stroke: var(--sv-accent); stroke-width: 2; }
.drk-sciviz .sv-venn-b { fill: color-mix(in srgb, var(--sv-ink) 8%, transparent); }
.drk-sciviz .sv-venn-c { fill: color-mix(in srgb, var(--sv-muted) 10%, transparent); }
.drk-sciviz .sv-heat-1 { fill: color-mix(in srgb, var(--sv-accent) 8%, var(--sv-paper)); }
.drk-sciviz .sv-heat-2 { fill: color-mix(in srgb, var(--sv-accent) 28%, var(--sv-paper)); }
.drk-sciviz .sv-heat-3 { fill: color-mix(in srgb, var(--sv-accent) 55%, var(--sv-paper)); }
.drk-sciviz .sv-contour-accent { fill: none; stroke: var(--sv-accent); stroke-width: 3; }
.drk-sciviz .sv-label,
.drk-sciviz .sv-small,
.drk-sciviz .sv-tiny,
.drk-sciviz .sv-note,
.drk-sciviz .sv-formula { fill: var(--sv-ink); font-family: var(--sans); }
.drk-sciviz .sv-label { font-size: 15px; font-weight: 600; }
.drk-sciviz .sv-small { fill: var(--sv-muted); font-size: 12px; }
.drk-sciviz .sv-tiny { fill: var(--sv-muted); font-size: 10px; }
.drk-sciviz .sv-note { fill: var(--sv-muted); font-size: 12px; }
.drk-sciviz .sv-formula { font: 13px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
:root[data-drk-contrast="high"] .drk-sciviz .sv-cell-accent,
:root[data-drk-contrast="high"] .drk-sciviz .sv-area,
:root[data-drk-contrast="high"] .drk-sciviz .sv-area-accent,
:root[data-drk-contrast="high"] .drk-sciviz .sv-venn-a,
:root[data-drk-contrast="high"] .drk-sciviz .sv-venn-b,
:root[data-drk-contrast="high"] .drk-sciviz .sv-venn-c { fill: transparent; stroke: var(--sv-accent); }
:root[data-drk-contrast="high"] .drk-sciviz .sv-heat-1,
:root[data-drk-contrast="high"] .drk-sciviz .sv-heat-2,
:root[data-drk-contrast="high"] .drk-sciviz .sv-heat-3 { fill: transparent; stroke: var(--sv-ink); stroke-width: 1; }
@media (max-width: 600px) {
  .drk-sciviz-stage { min-height: 180px; }
  .drk-sciviz-svg { min-height: 180px; }
  .drk-sciviz .sv-note { font-size: 13px; }
}
@media (forced-colors: active) {
  .drk-sciviz-stage,
  .drk-sciviz { border-color: CanvasText; }
  .drk-sciviz svg * { forced-color-adjust: auto; }
}
@media print {
  .drk-sciviz { break-inside: avoid; margin-block: 1.2rem; }
  .drk-sciviz-stage { background: #fff; min-height: 180px; }
  .drk-sciviz-svg { max-height: 300px; }
}