.middle-page { --paper: #edf2ee; --line: #ccddd4; --green: #17534a; --mint: #e1eee6; }
.middle-page .hero { background: #163d3b; }
.middle-page .hero-photo img { object-position: center; }
.middle-page .activity { background: #fcfdf9; }
.activity-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem 1.25rem; align-items: start; }
.middle-page h3 { margin-bottom: .4rem; }
.button-row, .field-row { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .7rem; }
.field-row label { display: grid; gap: .25rem; align-items: center; font-weight: 680; min-width: 0; }
.field-row select, .field-row input { width: 100%; }
.field-row select { min-width: 5rem; }
.middle-page select, .middle-page input[type="number"] { min-height: 2.65rem; padding: .4rem .6rem; border: 1px solid #a7bfb0; border-radius: .55rem; color: var(--ink); background: white; }
.selector-line { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem; margin-bottom: .85rem; font-weight: 730; }
.cell-diagram { padding: .7rem; border-radius: .85rem; background: #eef4e8; }
.cell-diagram svg { display: block; width: 100%; height: auto; }
.cell-diagram .active-part { stroke: #233f68; stroke-width: 5; filter: drop-shadow(0 1px 2px #2a3f6599); }
.cell-diagram rect.active-part { fill-opacity: .26; stroke-width: 8; }
.cell-diagram figcaption { padding-inline: .2rem; }
.button-row button[aria-pressed="true"] { background: #d6eadd; border-color: #4f8b73; }
.result { margin-top: .55rem; }
.experiment-box { margin-top: .65rem; padding: .8rem; border-radius: .7rem; background: #edf3ea; }
.metric { display: inline-block; margin: .45rem 0 .1rem; font-weight: 800; font-size: 1.25rem; color: #215647; font-variant-numeric: tabular-nums; }
.connected-list { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .55rem; padding: 0; margin: .85rem 0 .3rem; list-style: none; }
.connected-list li { display: flex; gap: .45rem; align-items: center; border-radius: .55rem; padding: .35rem .55rem; background: #e3eee3; font-weight: 710; }
.connected-list li + li::before { content: '→'; color: #376c54; }
.middle-page button:disabled { opacity: .65; cursor: default; }
#air-reset { margin-top: .6rem; }
.web-clues { margin-top: 0; }
.web-clues ul { margin: .35rem 0 .5rem; padding-left: 1.25rem; }
.web-clues li + li { margin-top: .3rem; }
.field-arrow { align-self: end; padding-bottom: .45rem; font-size: 1.2rem; color: #386650; }
#web-add, #variables-check, #data-check { margin-top: .55rem; }
.connection-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .4rem; padding: 0; margin: .55rem 0; list-style: none; }
.connection-grid li { padding: .4rem .55rem; border-radius: .5rem; background: #e3eee3; font-weight: 700; }
.genetics-grid { margin-top: .65rem; }
.table-frame { overflow: auto; border: 1px solid #b8cdbf; border-radius: .65rem; }
.middle-page table { width: 100%; border-collapse: collapse; text-align: center; font-variant-numeric: tabular-nums; }
.middle-page th, .middle-page td { padding: .55rem .45rem; border-bottom: 1px solid #d7e2d6; }
.middle-page thead th { background: #e1ece1; }
.middle-page tbody tr:last-child > * { border-bottom: 0; }
.middle-page caption { padding: .5rem; background: #eef4eb; font-weight: 750; }
#punnett th, #punnett td { border-right: 1px solid #d7e2d6; }
#punnett td { background: #fbfdf8; font-weight: 800; }
#punnett td[data-genotype="Aa"] { background: #e0f0e2; }
#punnett td[data-genotype="aa"] { background: #f5ecdb; }
.summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .4rem; margin: .65rem 0; }
.summary-grid > div { padding: .4rem; border: 1px solid #ccddd4; border-radius: .5rem; text-align: center; }
.summary-grid dt { font-weight: 700; }
.summary-grid dd { margin: 0; color: #235948; font-size: 1.05rem; font-weight: 800; }
.variables { align-items: stretch; }
.variables label { flex: 1 1 11rem; }
.middle-page tbody tr.selected-day { background: #ddede0; font-weight: 720; }
.data-note { margin-top: .55rem; }
#data-answer { width: min(12rem,100%); }
.middle-page details summary { font-weight: 750; cursor: pointer; }
.middle-page details p { margin-top: .45rem; }
@media (max-width: 45rem) {
  .activity-grid { grid-template-columns: 1fr; }
  .connection-grid { grid-template-columns: 1fr; }
}