/* Chapter 7: scene text, step calculators and the stoichiometry table. */

.c7-text { font: 700 34px system-ui, sans-serif; fill: #e8eefc; }
.c7-text.bold { font-weight: 800; fill: #fff; }
.c7-text.big { font-size: 42px; font-weight: 800; }
.c7-text.gold, .c7-big, .c7-huge { fill: #ffd166; }
.c7-text.bad, .c7-note.bad { fill: #ff8a8a; }
.c7-note { font: 600 26px system-ui, sans-serif; fill: #9fb4dd; }
.c7-big { font: 800 90px system-ui, sans-serif; }
.c7-huge { font: 800 120px system-ui, sans-serif; }
.c7-mono { font: 700 40px ui-monospace, SFMono-Regular, Menlo, monospace; fill: #e8eefc; }
.c7-eq { font-weight: 800; font-family: system-ui, sans-serif; fill: #fff; }
.c7-atom { font-weight: 800; font-family: system-ui, sans-serif; }
.c7-display { font: 800 50px ui-monospace, SFMono-Regular, Menlo, monospace; fill: #4ade80; }
.c7-row { font: 700 28px system-ui, sans-serif; fill: #cfd9ef; }
.c7-cellnote { font: 600 20px system-ui, sans-serif; fill: #9fb4dd; text-anchor: middle; }

.calc-question { margin: 0; font-size: 1.1em; line-height: 1.45; text-align: center; }
.calc-question b { color: var(--gold); }
.calc-data { display: block; margin-top: .3em; font-size: .85em; color: #9fb4dd; }
.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: 9em;
  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.correct { border-color: var(--ok); background: #143a28; }
.calc-unit { font-weight: 700; color: #cfd9ef; }

.st-eq { display: block; margin-bottom: .3em; font-weight: 800; font-size: 1.05em; color: #fff; }
.st-wrap { width: 100%; display: flex; justify-content: center; }
.st-table { border-collapse: separate; border-spacing: max(4px, .6cqw); width: min(100%, 52cqw); }
.st-table th { font-weight: 800; color: #cfd9ef; text-align: center; padding: .2em .4em; }
.st-table th[scope="row"] { text-align: left; white-space: nowrap; font-weight: 700; }
.st-table td { text-align: center; }
.st-cell, .st-given {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 2.6em;
  font: 800 1em ui-monospace, SFMono-Regular, Menlo, monospace;
  border-radius: .6em;
}
.st-given { background: rgba(255, 255, 255, .08); border: 2px solid transparent; color: #fff; }
.st-cell { color: #ffd166; background: #1d2b4b; border: 2px dashed #6f8bc4; cursor: pointer; transition: background .2s, border-color .2s; }
.st-cell:hover:not(:disabled) { border-color: #ffd166; }
.st-cell:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.st-cell.target { border-color: #ffd166; }
.st-cell.correct { color: #fff; border-style: solid; }
.st-cell:disabled { cursor: default; }
.st-cell small { font: 600 .7em system-ui, sans-serif; color: #c9f7d4; }
.st-work { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 14px; min-height: 2.8em; }
.st-placeholder { margin: 0; color: #9fb4dd; text-align: center; }

@container (max-width: 620px) {
  .st-table { width: 100%; }
  .calc-input { width: 7.5em; }
}