/* Accessible progressive Mermaid diagrams for the genetics guide. */
.guide-diagram { min-width: 0; max-width: 100%; padding: 1rem; overflow: hidden; border: 1px solid var(--glass-border, rgba(255,255,255,.18)); border-radius: 1rem; background: rgba(18,30,65,.5); }
.guide-diagram [hidden] { display: none !important; }
.guide-diagram__fallback { margin: 0 0 1rem; color: var(--sage-light, #d9e7d8); line-height: 1.65; }
.guide-diagram__trigger { display: none; min-width: 48px; min-height: 48px; padding: .7rem 1rem; border: 1px solid var(--gold-light, #f5c842); border-radius: .75rem; background: #173d35; color: var(--gold-light, #f5c842); font: inherit; font-weight: 650; cursor: pointer; }
html.guide-diagrams-enabled .guide-diagram__trigger { display: inline-flex; align-items: center; justify-content: center; }
.guide-diagram__trigger:hover { background: #205347; }
.guide-diagram__trigger:focus-visible { outline: 3px solid var(--gold-light, #f5c842); outline-offset: 3px; }
.guide-diagram__status { min-height: 1.5em; margin: .75rem 0 0; color: var(--sage-light, #d9e7d8); }
.guide-diagram__visual { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
.guide-diagram__visual svg { display: block; max-width: 100%; height: auto; margin-inline: auto; }
.guide-diagram[data-diagram-state="loading"] .guide-diagram__trigger { cursor: progress; }
@media (prefers-reduced-motion: reduce) { .guide-diagram *, .guide-diagram *::before, .guide-diagram *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }