/* Shared, article-scoped teaching diagrams. No motion or script is required. */
.research-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.research-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.research-panel { min-width: 0; padding: 1rem; background: #fff; border: 1px solid #cddfd5; border-radius: 10px; }
.article-body .research-panel > strong { display: block; margin-bottom: .5rem; color: #183c36; font-size: 1rem; }
.article-body .research-panel p { margin: 0; font-size: .875rem; }
.research-tag { display: inline-block; margin-bottom: .6rem; padding: .2rem .55rem; background: #e6f0ea; border-radius: 5px; color: #196751; font-size: .75rem; font-weight: 700; }
.research-tag.amber { background: #fff0d9; color: #805115; }
.research-tag.blue { background: #e8eef9; color: #35567d; }
.research-tag.rose { background: #fbe9e6; color: #923e36; }
.research-options { display: grid; gap: .7rem; margin-top: 1rem; }
.research-options details { min-width: 0; border: 1px solid #cddfd5; border-radius: 10px; background: #fff; }
.research-options summary { min-height: 48px; padding: .8rem 1rem; border-radius: 10px; color: #196751; cursor: pointer; font-weight: 600; font-size: .875rem; }
.research-options summary:hover, .research-options details[open] summary { background: #e8f2eb; }
.research-options summary:focus-visible, .research-controls :is(button, input):focus-visible { outline: 3px solid #196751; outline-offset: 3px; }
.article-body .research-options details p { padding: 1rem; margin: 0; border-top: 1px solid #d4e5de; font-size: .875rem; }
.research-wells { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .6rem; max-width: 380px; margin: 1.2rem auto; }
.research-well { display: grid; place-items: center; aspect-ratio: 1; border: 2px solid #507f6b; border-radius: 50%; background: #deeee5; color: #183c36; font-size: .8rem; font-weight: 700; }
.research-well.control { border-style: dashed; border-color: #996524; background: #fff0d9; color: #805115; }
.research-connector { padding: .65rem 0; text-align: center; color: #196751; font-weight: 700; font-size: .85rem; }
.research-ledger { display: grid; gap: .75rem; }
.research-ledger-row { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 1rem; align-items: start; padding: 1rem; border: 1px solid #cddfd5; border-radius: 10px; background: #fff; }
.article-body .research-ledger-row p { margin: .3rem 0 0; font-size: .875rem; }
.research-ledger-row > span { font-family: monospace; color: #196751; font-size: .85rem; }
.research-bars { display: grid; gap: 1rem; padding: 1rem; border: 1px solid #cddfd5; background: #fff; border-radius: 10px; }
.research-bar-label { display: flex; justify-content: space-between; gap: .5rem; font-size: .85rem; }
.research-track { height: 14px; margin-top: .4rem; background: #edf2ef; border-radius: 4px; overflow: hidden; }
.research-fill { display: block; width: var(--value); height: 100%; background: #196751; }
.research-fill.blue { background: #547a9f; }
.research-fill.amber { background: #a87936; }
.research-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 1rem 0; }
.research-controls button { min-height: 44px; padding: .55rem .8rem; border: 1px solid #8faf9e; border-radius: 7px; background: #fff; color: #183c36; font: inherit; font-size: .85rem; cursor: pointer; }
.research-controls button[aria-pressed="true"] { color: #fff; background: #196751; }
.research-controls label { flex: 1 1 100%; font-size: .875rem; font-weight: 600; }
.research-controls input { width: 100%; accent-color: #196751; }
.research-svg { display: block; width: 100%; height: auto; }
@media (max-width: 640px) {
  .research-grid, .research-grid.three { grid-template-columns: 1fr; }
  .research-ledger-row { grid-template-columns: 1fr; gap: .35rem; }
}

.research-controls[hidden] { display: none; }