/*
 * Figurer i algoritmeforklaringene (inline SVG i .md-filene).
 *
 * Paletten er en kopi av de tre pekerfargene i
 * docs/resources/algoritmer/algoritmer.css og tekst-/kantfargene i
 * docs/resources/shared.css, slik at figurene på siden matcher stepperen
 * i iframen. Endrer du fargene der, må de endres her også.
 */

/* Lys modus (temaet setter data-md-color-scheme="default" på <body>) */
:root {
  --fig-low: #1565c0;
  --fig-mid: #b05000;
  --fig-mid-bg: rgba(176, 80, 0, 0.1);
  --fig-high: #ad1457;
  --fig-text: #212121;
  --fig-dim: rgba(0, 0, 0, 0.55);
  --fig-border: rgba(0, 0, 0, 0.22);
}

/* Mørk modus */
[data-md-color-scheme="slate"] {
  --fig-low: #64b5f6;
  --fig-mid: #ff9100;
  --fig-mid-bg: rgba(255, 145, 0, 0.14);
  --fig-high: #f06292;
  --fig-text: #e0e0e0;
  --fig-dim: rgba(255, 255, 255, 0.5);
  --fig-border: rgba(255, 255, 255, 0.18);
}

.md-typeset .alg-figur {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  margin: 1.4rem auto;
}

.md-typeset .alg-figur .ramme {
  fill: none;
  stroke: var(--fig-border);
}

.md-typeset .alg-figur .verdi {
  font-family: var(--md-code-font-family, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 13px;
  font-weight: 500;
  fill: var(--fig-text);
  text-anchor: middle;
}

.md-typeset .alg-figur .indeks {
  font-family: var(--md-code-font-family, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 8px;
  fill: var(--fig-dim);
  text-anchor: middle;
}

.md-typeset .alg-figur .peker {
  font-family: var(--md-code-font-family, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 11px;
  font-weight: 600;
  text-anchor: middle;
}

.md-typeset .alg-figur .forklaring {
  font-size: 11.5px;
  fill: var(--fig-dim);
  text-anchor: middle;
}

/* Samme fargekoding som stepperen: low blå, mid oransje, high rosa */
.md-typeset .alg-figur .low { fill: var(--fig-low); }
.md-typeset .alg-figur .mid { fill: var(--fig-mid); }
.md-typeset .alg-figur .high { fill: var(--fig-high); }

.md-typeset .alg-figur .mid-felt { fill: var(--fig-mid-bg); }
.md-typeset .alg-figur .mid .verdi,
.md-typeset .alg-figur .verdi.mid-verdi { fill: var(--fig-mid); }

/* Forkastet søkeområde: samme nedtoning som .arr-slot.dimmed i stepperen */
.md-typeset .alg-figur .forkastet { opacity: 0.28; }

/* Mermaid-diagrammer: ikke la dem fylle hele innholdsbredden.
   SVG-en ligger i shadow-DOM, så vi begrenser vertselementet. */
.md-typeset .mermaid {
  max-width: 560px;
  margin: 0 auto;
}