/* ============================================================================
   Glossary Visual System — container styles for the SVG diagram renderer.
   The diagrams themselves are themed via the console's CSS variables (day/night
   for free); this file only frames them and gates motion.
   ============================================================================ */
.gvz{width:100%}
.gvz svg{display:block;width:100%;height:auto}

/* High-contrast reading theme for the diagrams (requested): midnight-black canvas, white text,
   more-saturated semantic colors — applied to BOTH the compact card and the full modal, in both
   day & night console themes. Scoped to .gvz so it re-themes the SVG without touching any renderer:
   the SVG fills (fill="var(--ink)" etc.) resolve these custom properties from the .gvz cascade. */
.gvz{
  --ink:#ffffff;        /* primary text → pure white */
  --mut:#c4d0ea;        /* secondary text → bright enough to read on black */
  --panel2:#161f3a;     /* inner panels → a raised midnight, distinct from the canvas */
  --line:#36436e;       /* borders → light enough that structure reads */
  --grass:#27e89b;      /* favorable → more saturated */
  --clay:#ff5d7c;       /* adverse */
  --sky:#3dc4ff;        /* neutral / price */
  --gold:#ffc233;       /* caution */
}

/* gentle "glow" pulse used by a few diagrams (e.g. the anchor focus) */
.gvz-pulse{animation:gvzPulse 3.4s ease-in-out infinite;transform-origin:center}
@keyframes gvzPulse{50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){.gvz-pulse{animation:none}}

/* compact diagram on a glossary card — full width below the definition */
.gloss-diagram{margin-top:10px}
.gloss-card.hasviz .gloss-viz{display:none}
.gloss-diagram .gvz-compact svg{max-height:230px;border:1px solid var(--line);border-radius:12px;
  background:#070b16;padding:8px 6px}

/* full diagram in the term modal — a banner under the title */
.gloss-diagram-full .gvz-full svg{border:1px solid var(--line);border-radius:14px;
  background:#070b16;padding:10px 8px}

/* quiz (recall) mode: a control bar + a subtle dashed hint that the value is blanked */
.gloss-quizbar{margin:2px 0 8px;display:flex;align-items:center;flex-wrap:wrap;gap:4px}
.gloss-diagram-full .gvz-quiz svg{border-style:dashed;border-color:var(--gold)}