/* Molecular generation explanations share the discovery guide's figure frame. */
.generation-representations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
.generation-representation { min-width: 0; padding: 1rem; border: 1px solid #d4e5de; border-radius: 10px; background: #fff; }
.article-body .generation-representation-title { margin: 0 0 1rem; color: var(--discovery-ink); font-size: 0.95rem; font-weight: 700; }
.article-body .generation-representation > p:last-child { margin: 0; color: #4e625b; font-size: 0.875rem; }
.generation-strings { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; min-height: 100px; padding-bottom: 1rem; }
.generation-strings code { background: #e9f3ed; color: var(--discovery-accent); font-size: 1.4rem; letter-spacing: 0.08em; }
.generation-molecule { display: block; width: 100%; height: 100px; margin-bottom: 1rem; }
.generation-bonds { stroke: #527a6b; stroke-width: 3; }
.generation-atoms { fill: #e4f0e8; stroke: #bad5c6; stroke-width: 1.5; }
.generation-atoms .generation-oxygen { fill: #faecec; stroke: #e4bcbc; }
.generation-atom-labels { fill: #183c36; text-anchor: middle; font-family: inherit; font-size: 24px; font-weight: 700; }

.generation-plot { padding: 1rem; border: 1px solid #d4e5de; border-radius: 10px; background: #fff; }
.article-body .generation-y-label,
.article-body .generation-x-label { margin: 0; color: #4e625b; font-size: 0.8rem; font-weight: 600; }
.article-body .generation-x-label { margin-top: 0.65rem; text-align: right; }
.generation-plot-area { position: relative; height: clamp(210px, 40vw, 280px); margin-top: 0.8rem; border-left: 2px solid #789d8b; border-bottom: 2px solid #789d8b; background-image: linear-gradient(to right, #e7eeea 1px, transparent 1px), linear-gradient(to bottom, #e7eeea 1px, transparent 1px); background-size: 25% 25%; }
.generation-point { position: absolute; display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; transform: translate(-50%, -50%); color: #fff; font-size: 0.875rem; font-weight: 700; }
.generation-point-a { left: 90%; top: 70%; background: #196751; }
.generation-point-b { left: 40%; top: 10%; background: #416e90; }
.generation-point-c { left: 70%; top: 30%; background: #865719; }
.generation-point-d { left: 30%; top: 80%; background: #64726d; }
.generation-visual:has(.generation-option-a[open]) .generation-point-a,
.generation-visual:has(.generation-option-b[open]) .generation-point-b,
.generation-visual:has(.generation-option-c[open]) .generation-point-c,
.generation-visual:has(.generation-option-d[open]) .generation-point-d { outline: 3px solid #183c36; outline-offset: 3px; }

.generation-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin-top: 1rem; }
.generation-options details { min-width: 0; border: 1px solid #d4e5de; border-radius: 10px; background: #fff; }
.generation-options summary { min-height: 48px; padding: 0.85rem; border-radius: 10px; color: var(--discovery-accent); cursor: pointer; font-size: 0.875rem; font-weight: 600; }
.generation-options summary:hover,
.generation-options details[open] summary { background: #e9f3ed; }
.generation-options summary:focus-visible { outline: 3px solid #196751; outline-offset: -3px; }
.article-body .generation-options details p { margin: 0; padding: 0.85rem; border-top: 1px solid #d4e5de; font-size: 0.875rem; }

@media (max-width: 640px) {
    .generation-representations,
    .generation-options { grid-template-columns: 1fr; }
    .generation-strings { min-height: 0; }
}