/* Chapter 8: scene text, percentage calculator, empirical formula machine, molecular formula calculator. */

.f8-text { font: 600 30px system-ui, sans-serif; fill: #e8eefc; }
.f8-text.bold, .f8-gold { font-weight: 800; fill: #ffd166; }
.f8-text.ok { font-weight: 800; fill: #8ce99a; }
.f8-text.bad { font-weight: 800; fill: #ff8a8a; }
.f8-note { font: 600 22px system-ui, sans-serif; fill: #9fb4dd; }
.f8-note.bad { fill: #ff8a8a; }
.f8-head { font: 800 34px system-ui, sans-serif; fill: #fff; }
.f8-sym { font: 800 52px system-ui, sans-serif; fill: #fff; }
.f8-big { font: 800 44px system-ui, sans-serif; fill: #fff; }
.f8-atom { font-family: system-ui, sans-serif; font-weight: 800; text-anchor: middle; dominant-baseline: central; }
.f8-cell { font: 600 24px system-ui, sans-serif; fill: #e8eefc; }
.f8-cell.head { font-weight: 800; fill: #fff; }
.f8-cell.gold { font-weight: 800; fill: #ffd166; }
.f8-label-dark { font: 800 24px system-ui, sans-serif; fill: #14213d; }

.calc-question { margin: 0; font-size: 1.1em; line-height: 1.45; text-align: center; }
.calc-question b { color: var(--gold); }
.calc-note { margin: 0; font-size: .85em; color: #9fb4dd; text-align: center; }
.calc-body { display: flex; flex-direction: column; gap: max(8px, 1.2cqw); width: 100%; align-items: center; }
.calc-step { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.calc-step[hidden] { display: none; }
.calc-values { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 14px; }
.calc-field { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; font-weight: 700; color: #cfd9ef; }
.calc-input {
  width: 6.5em;
  font: 700 1em ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: .45em .6em;
  border-radius: .6em;
  border: 2px solid #3a4f7d;
  background: #0f1a33;
  color: #fff;
}
.calc-input.short { width: 4em; }
.calc-input:focus { outline: none; border-color: var(--gold); }
.calc-input:disabled { opacity: .85; }
.calc-input.wrong { border-color: var(--bad); }
.calc-input.correct { border-color: var(--ok); background: #143a28; }
.calc-unit { font-weight: 700; color: #cfd9ef; }

.pc-wrap { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: max(10px, 2cqw); width: 100%; }
.pc-visual { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pc-pie { width: max(130px, 17cqw); }
.pc-pie svg { display: block; width: 100%; height: auto; }
.pc-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; font-weight: 700; }
.pc-legend i { display: inline-block; width: .9em; height: .9em; margin-right: .35em; border-radius: 50%; vertical-align: -.1em; border: 1px solid rgba(0, 0, 0, .4); }
.pc-steps { display: flex; flex-direction: column; gap: max(8px, 1cqw); flex: 1 1 280px; align-items: center; }

.fm-wrap { width: 100%; overflow-x: auto; }
.fm-table { margin: 0 auto; border-collapse: collapse; font-weight: 700; }
.fm-table th, .fm-table td { padding: .35em .6em; border: 1px solid rgba(255, 255, 255, .25); text-align: center; min-width: 5em; }
.fm-table thead th { font-size: 1.15em; color: #fff; background: rgba(77, 171, 247, .18); }
.fm-table thead th small { display: block; font-size: .65em; font-weight: 600; color: #9fb4dd; }
.fm-table tbody th { text-align: left; white-space: nowrap; color: #cfd9ef; font-weight: 700; }
.fm-table tr { transition: opacity .4s, background .4s; }
.fm-table tr.fm-dim { opacity: .3; }
.fm-table tr.fm-active { background: rgba(255, 209, 102, .1); }
.fm-table td.fm-ok { color: #c9f7d4; }
.fm-table td.fm-smallest { box-shadow: inset 0 0 0 3px var(--gold); }
.fm-input { width: 4.6em; padding: .3em .4em; }
.fm-prompt { display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 2.6em; }
.fm-prompt .lab-label { margin: 0; text-align: center; }
.fm-choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.fm-choices .chip-btn { width: auto; }
.chip-btn.fm-hint { box-shadow: 0 0 0 3px var(--gold); }
.fm-formula { margin: 0; font-size: 1.5em; font-weight: 800; color: var(--gold); }

@container (max-width: 620px) {
  .fm-table th, .fm-table td { padding: .3em .35em; min-width: 3.6em; }
  .fm-input { width: 3.8em; }
  .pc-pie { width: 40%; }
}