/* ===== TERMINOLOGY VISUALS — DESIGN SYSTEM ===== */

/*
  Visual Identity:
  - Colors: green=#00c896, red=#ff4d4f, white=#fff, muted=#777, secondary=#b3b3b3,
            grid=#2a2a2a, amber=#ffb400, purple=#a855f7
  - Font sizes: 8 (tiny), 9 (secondary), 10 (primary), 11 (emphasis), 13 (large)
  - Stroke widths: 1 (grid/axis), 1.5 (primary), 2 (emphasis)
  - All text ≥5px from viewBox edges
  - Labels offset 8–16px from elements
*/

.tv-wrap {
  background: var(--bg);
  border-radius: 8px;
  padding: 20px 16px;
  margin-bottom: 12px;
  overflow-x: auto;
  max-width: 520px;
}

.tv-wrap svg {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 480px;
  height: auto;
}

.tv-caption {
  font-size: .82rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-top: 0;
  margin-bottom: 16px;
  max-width: 520px;
}

/* ===== Responsive ===== */
@media (max-width: 600px) {
  .tv-wrap {
    padding: 14px 10px;
    max-width: 100%;
    border-radius: 6px;
  }

  .tv-wrap svg {
    max-width: 100%;
  }

  .tv-caption {
    font-size: .78rem;
  }
}