/* =====================================================================
   viz.css - stiluri pentru vizualizarile interactive (viz.js)
   ===================================================================== */

.viz {
  margin: 18px 0 22px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  overflow: hidden;
}

.viz > .viz-title {
  font-family: var(--mono);
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--navy);
  background: linear-gradient(180deg, #f8f7f4, #f4f3ee);
  border-bottom: 1px solid var(--border);
  padding: 9px 14px;
  letter-spacing: 0.01em;
}

.viz-stage {
  padding: 10px 12px 4px;
  background: #fbfdfe;
}
.viz-stage svg { width: 100%; height: auto; display: block; }

/* ---- bara de controale ---- */
.viz-ctl {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  background: #faf9f7;
}
.viz-f { display: flex; flex-direction: column; gap: 5px; min-width: 190px; flex: 1 1 190px; }
.viz-f label {
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
}
.viz-f label b { color: var(--c-mc); font-size: 0.8rem; white-space: nowrap; }

.viz-f input[type="range"] {
  width: 100%;
  accent-color: var(--c-mc);
  height: 20px;
  cursor: pointer;
}
.viz-f select {
  font-family: var(--mono);
  font-size: 0.78rem;
  padding: 5px 7px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
}

/* ---- rezultate numerice ---- */
.viz-out {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding: 11px 14px;
  border-top: 1px solid var(--border);
  background: #fff;
}
.viz-kv {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  font-family: var(--mono);
  font-size: 0.76rem;
  background: #f7f6f3;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 9px;
}
.viz-kv i { font-style: normal; color: var(--muted); }
.viz-kv b { color: var(--navy); font-size: 0.82rem; }

.viz-verdict {
  flex-basis: 100%;
  font-family: var(--mono);
  font-size: 0.78rem;
  padding: 7px 11px;
  border-radius: 6px;
  border-left: 3px solid;
}
.viz-verdict.ok   { background: #f9f7f0; border-color: var(--teal);  color: #33634b; }
.viz-verdict.bad  { background: #fdefed; border-color: #c0392b;      color: #8f2b20; }
.viz-verdict.warn { background: #fdf6e8; border-color: #d98c00;      color: #8a5c00; }

.viz-note {
  padding: 10px 14px;
  border-top: 1px dashed var(--border);
  background: #fcfdfe;
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.55;
}

.viz-broken {
  padding: 12px 14px;
  background: #fdefed;
  color: #8f2b20;
  font-size: 0.82rem;
}

@media (max-width: 640px) {
  .viz-ctl { gap: 10px 12px; padding: 10px; }
  .viz-f { min-width: 100%; flex-basis: 100%; }
  .viz-out { padding: 9px 10px; }
}

@media print {
  .viz-ctl { display: none; }
  .viz { break-inside: avoid; page-break-inside: avoid; }
  .viz-note { border-top: 1px solid #ccc; }
}