/* Readable, user-controlled explanation figures. */
.explain-figure { padding: 1.1rem; }
.explain-controls { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin:.8rem 0; }
.explain-controls button { font:inherit; color:#234c40; border:1px solid #a8b7a6; border-radius:.6rem; background:#fffdf7; padding:.5rem .8rem; cursor:pointer; line-height:1.4; }
.explain-controls button[aria-pressed="true"] { color:#fffdf7; background:#245642; border-color:#245642; }
.explain-controls button:focus-visible { outline:3px solid #ae741a; outline-offset:3px; }
.explain-controls button:disabled { opacity:.5; cursor:default; }
.explain-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,175px),1fr)); gap:.75rem; margin:1rem 0; }
.explain-card { border:1px solid #c6d1c1; padding:.85rem; border-radius:.7rem; background:#fffdf7; min-width:0; }
.explain-card strong,.explain-card small { display:block; }
.explain-card small { font-size:.9rem; color:#4c6054; line-height:1.55; margin-top:.35rem; }
.explain-card[data-active="true"] { background:#f8eccf; border:2px solid #a47123; }
.explain-number { display:block; font-size:1.45rem; font-weight:800; line-height:1.5; color:#285a44; }
.explain-result { padding:.9rem 1rem; border-left:3px solid #3d815d; background:#eef3e7; line-height:1.65; margin:1rem 0; }
.explain-label { display:block; font-weight:700; margin-top:.8rem; }
.explain-svg { display:block; width:100%; height:auto; max-width:600px; margin:.7rem auto; font-family:Manrope,sans-serif; }
.explain-svg text { fill:#21483c; }
.explain-plot { display:block; width:100%; height:auto; max-width:700px; margin:.8rem auto; }
.explain-input { font:inherit; max-width:100%; }
@media(max-width:480px) { .explain-figure { padding:.85rem; } .explain-controls button { padding:.5rem .65rem; } }