/* 📊 Speicher-Balken RAM/VRAM (memviz.js): gestapelte Segmente im PS1-Retro-Stil.
   Projektregel: keine CSS-Gradients — Unterscheidung über Theme-Farben + PNG-Kacheln (--dither/--hatch). */

.mv { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mv-title { font-family: var(--px); font-size: .55rem; font-weight: 700; color: var(--muted); text-transform: uppercase; }
.mv-bar { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mv-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; font-size: .8rem; }
.mv-name { min-width: 0; overflow-wrap: anywhere; }
.mv-name b { font-family: var(--px); font-size: .6rem; }
.mv-name small { color: var(--muted); font-size: .74rem; }
.mv-val { font-family: var(--mono); font-size: .76rem; font-weight: 700; white-space: nowrap; }

.mv-track {
  display: flex; width: 100%; height: 14px; overflow: hidden;
  border: 2px solid var(--line); background: var(--bg); box-shadow: 2px 2px 0 var(--shadow-c);
}
.mv-s { display: block; flex: none; height: 100%; min-width: 1px; background-color: var(--muted); }
.mv-s + .mv-s { border-left: 1px solid var(--bg); }
.mv-s.mv-sep { border-left: 2px solid var(--line); }   /* nächstes Modell */

/* Segment-Arten (Balken und Legenden-Kästchen) */
.mv-base    { background-color: var(--muted); }
.mv-shared  { background-color: var(--muted); background-image: var(--hatch); background-size: 8px 8px; }
.mv-reserve { background-color: var(--surface-2); background-image: var(--hatch); background-size: 8px 8px; }
.mv-model   { background-color: var(--accent); }
.mv-kv      { background-color: var(--accent); opacity: .55; }   /* hellere/dunklere Stufe ohne Verlauf */
.mv-compute { background-color: var(--ok); }
.mv-mmproj  { background-color: var(--ok); opacity: .55; }
.mv-plan    { background-color: var(--accent-soft); background-image: var(--hatch); background-size: 8px 8px; outline: 2px dashed var(--accent); outline-offset: -2px; }
.mv-free    { background-color: var(--bg); }

.mv-leg { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: .74rem; color: var(--muted); }
.mv-leg li { display: inline-flex; align-items: center; gap: 4px; }
.mv-leg b { color: var(--text); font-family: var(--mono); font-weight: 700; }
.mv-sw { display: inline-block; width: 11px; height: 11px; border: 1px solid var(--line); flex: none; }
.mv-sw.mv-plan { outline-width: 1px; outline-offset: -1px; }

/* ab 90 %: Warnfarbe */
.mv-bar.warn .mv-track { border-color: var(--danger); }
.mv-bar.warn .mv-val, .mv-leg .mv-over { color: var(--danger); }
.mv-bar.over .mv-track { outline: 2px dashed var(--danger); outline-offset: 1px; }
.mv-hint, .mv-note { margin: 0; font-size: .8rem; line-height: 1.4; }
.mv-hint { padding: 5px 8px; border: 2px solid var(--danger); background: var(--bg); }
.mv-note { color: var(--muted); }

/* Einsatzorte */
.mv-planbox { padding: 8px 10px; border: 2px dashed var(--line); background: var(--surface-2); }
.ai-eng .mv { margin: 2px 0; }
.lw-memnow { margin-top: 8px; }

/* Bridge-Liste: eine Zeile Mini-Balken */
.mv-mini { display: flex; flex-wrap: wrap; gap: 3px 12px; margin-top: 3px; font-size: .72rem; }
.mv-mi { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.mv-mi .mv-track { width: 84px; height: 9px; border-width: 1px; box-shadow: none; }
.mv-mi .mv-s + .mv-s { border-left: 0; }
.mv-mi .mv-s.mv-sep { border-left: 1px solid var(--line); }
.mv-mini .mv-mi b { font-family: var(--mono); font-weight: 700; font-size: .72rem; white-space: nowrap; overflow: visible; }
.mv-mi.warn .mv-track { border-color: var(--danger); }
.mv-mi.warn b { color: var(--danger); }

@media (max-width: 560px) {
  .mv-track { height: 16px; }
  .mv-val { font-size: .72rem; }
  .mv-mi .mv-track { width: 64px; }
}