/* Reaction cards (scripts/site/reaction-card.mjs, site/reaction.js). Loaded only on pages that hold a card. The card sits on the same dark plate as the diagrams in both themes. */
figure.rxn { --text: #e8e0cc; --muted: #9aa3b2; --panel: #0b0f18; --line: #1f2a3d; --gold: var(--heritage-gold); margin: 1.6em -4px; padding: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; color: var(--text); }
figure.rxn [hidden] { display: none !important; }
.rxn-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.rxn-head strong { font-size: 17px; }
.rxn-eq { margin: 4px 0 8px; font: 500 17px/1.3 var(--mono); color: var(--gold); overflow-wrap: anywhere; }
.rxn-svg { display: block; width: 100%; height: auto; background: #05070c; border-radius: 3px; }
.rxn-svg .rxn-label { fill: var(--text); font: 600 15px var(--sans); }
.rxn-ctl { display: flex; align-items: center; gap: 10px; margin: 10px 0 6px; }
.rxn-ctl button { flex: none; min-width: 72px; min-height: 40px; padding: 6px 14px; background: #1b2438; color: var(--text); border: 1px solid #33425f; border-radius: 3px; font: 600 14px var(--sans); cursor: pointer; }
.rxn-ctl button:hover { background: #26324c; }
.rxn-ctl input[type=range] { flex: 1 1 auto; min-width: 0; min-height: 40px; accent-color: var(--gold); }
.rxn-phase { flex: none; min-width: 11em; font: 12.5px var(--mono); color: var(--muted); text-align: right; }
.rxn-read { font: 13px/1.5 var(--mono); font-variant-numeric: tabular-nums; }
.rxn-line { display: grid; grid-template-columns: minmax(0, 1fr) minmax(70px, 28%); align-items: center; gap: 10px; margin: 3px 0; }
.rxn-bar { display: block; height: 6px; background: #1b2438; border-radius: 3px; overflow: hidden; }
.rxn-bar i { display: block; height: 100%; background: #ff7a5a; }
.rxn-bar.e i { background: #b05cff; }
.rxn-bonds { margin: 8px 0 0; font-size: 14px; color: var(--muted); }
figure.rxn figcaption { margin-top: 10px; font-size: 15.5px; color: var(--text); }
.rxn-zoom { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--muted); }
.rxn-zoom li { max-width: none; margin: 0; }
.rxn-zoom span { font-family: var(--mono); color: var(--gold); }
.rxn-zoom [aria-current] { color: var(--text); font-weight: 600; }
.rxn-more { margin: 8px 0 0; font-size: 14px; }
figure.rxn a { color: var(--plume-cyan); }
@media (max-width: 640px) {
  figure.rxn { margin-left: 0; margin-right: 0; padding: 10px; }
  .rxn-phase { min-width: 0; flex: 1 1 100%; order: 3; text-align: left; }
  .rxn-ctl { flex-wrap: wrap; }
  .rxn-line { grid-template-columns: 1fr; gap: 3px; }
  .rxn-svg .rxn-label { font-size: 17px; }
}
.rxn-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.2em; }
.rxn-entry { min-width: 0; }
.rxn-list h3 { margin-bottom: .2em; }
.rxn-entry > .rxn-article { margin: .2em 0 0; }