/*
 * Shared CSS for algorithm stepper visualizations
 * Used by stepper-binaersok and future søke-/sorteringssteppere
 */

/* ── Nye semantiske farger: de tre pekerne ── */
:root {
  --alg-low: #64b5f6;
  --alg-low-bg: rgba(100,181,246,0.14);
  --alg-mid: #ff9100;
  --alg-mid-bg: rgba(255,145,0,0.12);
  --alg-mid-border: rgba(255,145,0,0.35);
  --alg-high: #f06292;
  --alg-high-bg: rgba(240,98,146,0.14);
  --alg-bug: #ef5350;
  --alg-bug-bg: rgba(239,83,80,0.12);
  --alg-bug-border: rgba(239,83,80,0.40);
}
:root.light {
  --alg-low: #1565c0;
  --alg-low-bg: rgba(21,101,192,0.10);
  --alg-mid: #b05000;
  --alg-mid-bg: rgba(176,80,0,0.10);
  --alg-mid-border: rgba(176,80,0,0.35);
  --alg-high: #ad1457;
  --alg-high-bg: rgba(173,20,87,0.10);
  --alg-bug: #c62828;
  --alg-bug-bg: rgba(198,40,40,0.08);
  --alg-bug-border: rgba(198,40,40,0.35);
}

/* ── Panelet som holder hele visualiseringen ── */
/* Ekstra sidepolstring: pekere kan havne like utenfor sporet når low eller
   high passerer kanten av listen. */
.alg-panel {
  flex: 1; padding: 20px 28px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px; overflow-y: auto;
}

/* Sporet: array + pekerrader deler samme bredde slik at kolonnene flukter */
.alg-track { width: 100%; max-width: 620px; }

/* ── Array-rad (samme mønster som arrays.css) ── */
.arr-container {
  display: flex; align-items: stretch; width: 100%;
  border: 1px solid var(--accent-border);
  border-radius: 6px; overflow: hidden;
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.arr-container.visible { opacity: 1; transform: translateY(0); }

.arr-slot {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 8px 2px;
  border-right: 1px solid var(--border);
  background: transparent;
  transition: background 0.3s ease, opacity 0.35s ease, border-color 0.3s ease;
}
.arr-slot:last-child { border-right: none; }

/* Slot-tilstander */
.arr-slot.testing { background: var(--alg-mid-bg); }
.arr-slot.testing .arr-value { color: var(--alg-mid); }
.arr-slot.pass { background: var(--accent-bg); }
.arr-slot.pass .arr-value { color: var(--accent); font-weight: 600; }
.arr-slot.dimmed { opacity: 0.28; }

.arr-index {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; font-weight: 400;
  color: var(--text-dimmest);
  margin-bottom: 4px; line-height: 1;
}
.arr-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; font-weight: 500;
  color: var(--accent-node-text);
  line-height: 1;
  transition: color 0.3s ease;
}

/* ── Pekerrader: én rad per peker, så de aldri kolliderer ── */
.alg-pointers { margin-top: 6px; }
.alg-ptr-row { position: relative; height: 15px; }

.alg-ptr {
  position: absolute; top: 0;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 3px;
  white-space: nowrap;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; font-weight: 500;
  line-height: 1;
  opacity: 0;
  transition: left 0.4s ease, opacity 0.3s ease;
}
.alg-ptr.visible { opacity: 1; }
.alg-ptr .caret { font-size: 8px; line-height: 1; }

.alg-ptr.low { color: var(--alg-low); }
.alg-ptr.mid { color: var(--alg-mid); }
.alg-ptr.high { color: var(--alg-high); }

/* ── Variabel-chips: fungerer også som fargeforklaring for pekerne ── */
.alg-vars {
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
  opacity: 0; transition: opacity 0.4s ease;
}
.alg-vars.visible { opacity: 1; }
.alg-chip {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 500;
  padding: 3px 10px; border-radius: 10px;
  border: 1px solid transparent;
  transition: all 0.3s ease;
}
.alg-chip.low { color: var(--alg-low); background: var(--alg-low-bg); border-color: var(--alg-low-bg); }
.alg-chip.mid { color: var(--alg-mid); background: var(--alg-mid-bg); border-color: var(--alg-mid-border); }
.alg-chip.high { color: var(--alg-high); background: var(--alg-high-bg); border-color: var(--alg-high-bg); }

/* Frosne verdier: løkka går videre, men low, mid og high endrer seg ikke lenger */
.alg-vars.stuck .alg-chip { border-style: dashed; border-color: currentColor; }

/* ── Scenariofaner: velg hvilket target vi skal lete etter ──
   Den aktive fanen er selve mål-pillen, og bruker lilla som alle andre
   navngitte referanser i stepperne. */
.alg-tabs {
  display: flex; flex-direction: column;
  align-items: center; gap: 6px;
}
.alg-tabs-caption {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-dimmest);
}
.alg-tab-row { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }

.alg-tab {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 5px 12px; border-radius: 10px;
  background: var(--node-bg);
  border: 1px solid var(--node-border);
  cursor: pointer; font: inherit;
  -webkit-appearance: none; appearance: none;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.alg-tab .num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; font-weight: 600;
  color: var(--text-dim); line-height: 1;
  transition: color 0.25s ease;
}
.alg-tab .hint {
  font-family: 'Inter', sans-serif;
  font-size: 9px; line-height: 1.2;
  color: var(--text-dimmest);
  transition: color 0.25s ease;
}
.alg-tab:hover { border-color: var(--var-pill-border); }
.alg-tab.active {
  background: var(--var-pill-bg);
  border-color: var(--var-pill-border);
}
.alg-tab.active .num { color: var(--var-pill-text); }
.alg-tab.active .hint { color: var(--var-pill-text); opacity: 0.75; }

/* Scenarioet med feil i koden skiller seg ut når det er valgt */
.alg-tab.bug:hover { border-color: var(--alg-bug-border); }
.alg-tab.bug.active {
  background: var(--alg-bug-bg);
  border-color: var(--alg-bug-border);
}
.alg-tab.bug.active .num { color: var(--alg-bug); }
.alg-tab.bug.active .hint { color: var(--alg-bug); opacity: 0.8; }

/* ── Sammenligningslinje: rundens poeng ── */
.alg-compare {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; font-weight: 500;
  color: var(--text-dim);
  min-height: 18px;
  opacity: 0; transition: opacity 0.3s ease;
}
.alg-compare.visible { opacity: 1; }
.alg-compare .op { color: var(--alg-mid); font-weight: 600; padding: 0 4px; }
.alg-compare.hit { color: var(--accent); }
.alg-compare.hit .op { color: var(--accent); }
/* Løkka stopper: ingenting mer å sjekke, så linjen tones ned */
.alg-compare.stop { color: var(--text-dimmest); }
.alg-compare.stop .op { color: var(--text-dimmest); }

/* ── Resultat-chip ── */
.alg-result {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 500;
  padding: 4px 14px; border-radius: 12px;
  background: var(--accent-bg);
  border: 1px solid var(--accent-border);
  color: var(--accent-node-text);
  opacity: 0; transition: opacity 0.4s ease;
}
.alg-result.visible { opacity: 1; }
.alg-result.miss {
  background: var(--node-bg);
  border-color: var(--node-border);
  color: var(--text-dim);
}
.alg-result.loop {
  background: var(--alg-bug-bg);
  border-color: var(--alg-bug-border);
  color: var(--alg-bug);
}

/* ── Zoom-knapper over undertekstlinjen ── */
.zoom-controls { flex-direction: row; bottom: 95px; }
:fullscreen .zoom-controls, .is-fullscreen .zoom-controls { bottom: 180px; }

/* ── Fullskjerm-skalering ── */
:fullscreen, :fullscreen body { height: 100%; max-height: 100vh; overflow: hidden; }
:fullscreen .panels, .is-fullscreen .panels { flex: 1; min-height: 0; }
:fullscreen .alg-panel, .is-fullscreen .alg-panel { padding: 36px 32px; gap: 22px; }
:fullscreen .alg-track, .is-fullscreen .alg-track { max-width: 1000px; }
:fullscreen .arr-index, .is-fullscreen .arr-index { font-size: 12px; }
:fullscreen .arr-value, .is-fullscreen .arr-value { font-size: 19px; }
:fullscreen .arr-slot, .is-fullscreen .arr-slot { padding: 14px 4px; }
:fullscreen .alg-ptr-row, .is-fullscreen .alg-ptr-row { height: 22px; }
:fullscreen .alg-ptr, .is-fullscreen .alg-ptr { font-size: 13px; }
:fullscreen .alg-ptr .caret, .is-fullscreen .alg-ptr .caret { font-size: 11px; }
:fullscreen .alg-chip, .is-fullscreen .alg-chip { font-size: 15px; padding: 4px 14px; }
:fullscreen .alg-tabs-caption, .is-fullscreen .alg-tabs-caption { font-size: 12px; }
:fullscreen .alg-tab, .is-fullscreen .alg-tab { padding: 8px 20px; }
:fullscreen .alg-tab .num, .is-fullscreen .alg-tab .num { font-size: 18px; }
:fullscreen .alg-tab .hint, .is-fullscreen .alg-tab .hint { font-size: 12px; }
:fullscreen .alg-compare, .is-fullscreen .alg-compare { font-size: 19px; }
:fullscreen .alg-result, .is-fullscreen .alg-result { font-size: 17px; padding: 6px 20px; }