/* Chapter 4: growth-curve art text, hint highlight, curve builder, population lab and the exam data table. */

.gc-count { font: 800 40px system-ui, sans-serif; fill: var(--gold); }
.gc-axis { font: 700 30px system-ui, sans-serif; }
.gc-tick { font: 600 24px system-ui, sans-serif; }
.gc-phase { font: 800 30px system-ui, sans-serif; }
.gc-step { font: 700 28px system-ui, sans-serif; }
.gc-mini { font: 600 22px system-ui, sans-serif; }
.gc-icon-text { font: 800 30px system-ui, sans-serif; fill: #7a5800; }
.gc-icon-text.light { fill: #fff; }
.gc-axis:not([fill]), .gc-tick:not([fill]), .gc-phase:not([fill]), .gc-step:not([fill]), .gc-mini:not([fill]) { fill: #e8eefc; }
.gc-axis.gold, .gc-tick.gold, .gc-step.gold, .gc-mini.gold { fill: var(--gold); }

.chip-btn.hint { box-shadow: 0 0 0 3px var(--gold); }

.cb-prompt { margin: 0; text-align: center; line-height: 1.4; }
.cb-prompt b { color: var(--gold); }
.cb-options { min-height: 2.6em; }
.cb-shape { display: inline-flex; align-items: center; gap: .45em; }
.cb-shape svg { width: 1.8em; height: 1.8em; color: #fff; flex: none; }
.cb-name { font: 800 17px system-ui, sans-serif; }
.cb-axis { font: 700 16px system-ui, sans-serif; fill: #e8eefc; }
.cb-axis.gold { fill: var(--gold); }
.cb-axis.muted { fill: #9fb4dd; }

.pop-grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr);
  gap: max(10px, 1.6cqw);
  width: 100%;
  align-items: start;
}
.pop-left, .pop-right { display: flex; flex-direction: column; gap: 6px; }
.pop-flask, .pop-chart { width: 100%; border-radius: .8em; background: #0d1730; overflow: hidden; }
.pop-flask svg, .pop-chart svg { width: 100%; height: auto; display: block; }
.pop-flask svg { max-height: 30cqw; }
.pop-flask-temp { font: 800 30px system-ui, sans-serif; fill: var(--gold); }
.pop-phase { font: 800 13px system-ui, sans-serif; }
.pop-meters { display: grid; gap: 4px; }
.pop-meter { display: grid; grid-template-columns: 6.5em minmax(0, 1fr) 3em; align-items: center; gap: 6px; font-size: .85em; font-weight: 700; }
.pop-meter b { text-align: right; font-variant-numeric: tabular-nums; }
.pop-bar { height: .8em; border-radius: 999px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.pop-bar i { display: block; height: 100%; width: 0; border-radius: inherit; transition: width .15s linear; }
.pop-controls { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 18px; }
.pop-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pop-controls .chip-btn { padding: .35em .7em; font-size: .9em; }

.ex-table-wrap { display: block; max-width: 100%; overflow-x: auto; }
.ex-table { border-collapse: collapse; margin: .6em auto; font-size: .78em; font-weight: 600; }
.ex-table th, .ex-table td { border: 1px solid rgba(255, 255, 255, .25); padding: .25em .45em; text-align: center; white-space: nowrap; }
.ex-table th { color: var(--gold); text-align: left; }

@container (max-width: 620px) {
  .pop-grid { grid-template-columns: 1fr; }
  .pop-flask { max-width: 260px; justify-self: center; }
  .ex-table { font-size: .68em; }
  .ex-table th, .ex-table td { padding: .2em .25em; }
}