/* Chapter 4: scene text, wire/field animations, the step calculators and the grid simulator. */

.tf-text { font: 700 32px system-ui, sans-serif; fill: #e8eefc; }
.tf-text.bold { font-weight: 800; fill: #ffd166; }
.tf-text.dark { font-weight: 800; fill: #14213d; }
.tf-text.hot { font-weight: 800; fill: #ff8787; }
.tf-note { font: 600 26px system-ui, sans-serif; fill: #9fb4dd; }
.tf-count { font: 800 26px system-ui, sans-serif; fill: #ffd166; }
.tf-big { font: 800 64px system-ui, sans-serif; fill: #e8eefc; }
.tf-big.gold { fill: #ffd166; }
.tf-huge { font: 800 96px system-ui, sans-serif; fill: #ffd166; }
.tf-arrow { font: 800 26px system-ui, sans-serif; fill: #ffd166; }
.hot-fill { fill: #ff8787; font-weight: 800; }
.cool-fill { fill: #74c0fc; font-weight: 800; }

.wire-flow { fill: none; stroke-linecap: round; animation: wire-flow 2s linear infinite; }
@keyframes wire-flow { to { stroke-dashoffset: -60; } }
.flux-flow { stroke-dasharray: 18 14; animation: flux-flow 1.4s ease-in-out infinite alternate; }
@keyframes flux-flow { to { stroke-dashoffset: -96; } }
.heat-rise { animation: heat-rise 1.6s ease-in infinite; opacity: 0; }
@keyframes heat-rise {
  0% { transform: translateY(0); opacity: 0; }
  30% { opacity: .9; }
  100% { transform: translateY(-40px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .wire-flow, .flux-flow { animation: none; }
  .heat-rise { animation: none; opacity: .7; }
}

/* Activity pictures */
.tf-pic { display: block; width: min(100%, 30cqw); height: auto; margin: 0 auto; }
.tf-pic.wide { width: min(100%, 46cqw); }
.tf-pic-text { font: 700 22px system-ui, sans-serif; fill: #cfd9ef; }
.tf-pic-gold { font: 800 22px system-ui, sans-serif; fill: #ffd166; }
.id-picture { display: flex; justify-content: center; width: 100%; min-height: 4em; }
.id-card {
  margin: 0;
  max-width: 34em;
  padding: .9em 1.2em;
  border-radius: .8em;
  background: #1d2b4b;
  border: 2px solid #3a4f7d;
  text-align: center;
  line-height: 1.45;
}
.id-card b { color: var(--gold); }
.chip-btn.hint { box-shadow: 0 0 0 3px var(--gold); }

/* Step calculators */
.calc-question { margin: 0; font-size: 1.05em; line-height: 1.45; text-align: center; }
.calc-question b { color: var(--gold); }
.calc-picture[hidden] { display: none; }
.calc-body { display: flex; flex-direction: column; gap: max(8px, 1.1cqw); 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: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; }

/* Grid simulator */
.grid-stage { align-self: center; border-radius: 12px; overflow: hidden; background: rgba(0, 0, 0, .18); }
.sim-txt { font: 800 22px system-ui, sans-serif; fill: #e8eefc; }
.sim-txt.gold { fill: #ffd166; }
.sim-txt.hot { fill: #ff8787; }
.sim-txt.green { fill: #8ce99a; }
.sim-note { font: 600 17px system-ui, sans-serif; fill: #9fb4dd; }
.sim-readout { width: 100%; text-align: center; line-height: 1.45; }
.sim-readout p { margin: .15em 0; }
.sim-readout .gold { color: var(--gold); }
.sim-readout .hot { color: #ff8787; }
.sim-readout .green { color: #8ce99a; }
.grid-table { border-collapse: collapse; align-self: center; font-size: .9em; }
.grid-table[hidden] { display: none; }
.grid-table th, .grid-table td { padding: .25em .8em; text-align: center; border-bottom: 1px solid rgba(255, 255, 255, .15); }
.grid-table th { color: #9fb4dd; font-weight: 700; }
.grid-table tr.now td { color: var(--gold); font-weight: 800; }
.sim-quiz { display: flex; flex-direction: column; align-items: center; gap: max(8px, 1.1cqw); width: 100%; padding-top: max(6px, .8cqw); border-top: 1px solid rgba(255, 255, 255, .15); }
.sim-quiz[hidden] { display: none; }

@container (max-width: 620px) {
  .tf-pic, .tf-pic.wide { width: 100%; }
  .grid-table th, .grid-table td { padding: .2em .4em; }
  .calc-input { width: 7.5em; }
}