/* Chapter 3: scene text, the molar-mass builder and the mole calculator. */

/* SVG text: sizes come from each element's font-size attribute, so no font shorthand here. */
.mo-text, .mo-big, .mo-note, .mo-lcd, .mo-atom { font-family: system-ui, sans-serif; }
.mo-text { font-weight: 600; fill: #e8eefc; }
.mo-text.gold { font-weight: 800; fill: #ffd166; }
.mo-big { font-weight: 800; fill: #fff; }
.mo-big.gold { fill: #ffd166; }
.mo-big.green { fill: #4ade80; }
.mo-ital { font-style: italic; font-family: Georgia, 'Times New Roman', serif; }
.mo-note { font-weight: 600; fill: #9fb4dd; }
.mo-atom { font-weight: 800; fill: #fff; }
.mo-lcd { font: 700 30px ui-monospace, SFMono-Regular, Menlo, monospace; fill: #7cf29c; }

.mo-vapour path { animation: mo-drift 3.2s ease-in-out infinite; transform-box: fill-box; }
@keyframes mo-drift {
  0% { opacity: 0; transform: translateY(14px); }
  45% { opacity: .55; }
  100% { opacity: 0; transform: translateY(-34px); }
}
@media (prefers-reduced-motion: reduce) { .mo-vapour path { animation: none; } }

/* Molar-mass builder */
.mm-name { font-weight: 600; color: #9fb4dd; font-size: .8em; }
.mm-layout { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: max(10px, 1.6cqw); }
.pt-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1 1 340px; max-width: 560px; }
.pt-grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  grid-template-rows: repeat(6, auto);
  gap: max(3px, .4cqw);
  width: 100%;
}
.pt-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1.05;
  padding: 0;
  border-radius: .45em;
  border: 2px solid #4b6a6a;
  background: #1f4a4a;
  color: #fff;
  font: inherit;
  line-height: 1.05;
  cursor: pointer;
}
.pt-tile.metal { background: #2c3d66; border-color: #56658a; }
.pt-tile b { font-size: 1.05em; }
.pt-tile span { font-size: .62em; color: #cfd9ef; }
.pt-tile:hover:not(:disabled) { border-color: #ffd166; }
.pt-tile:focus-visible { outline: 3px solid var(--gold); outline-offset: 1px; }
.pt-tile:active:not(:disabled) { transform: scale(.94); }
.pt-tile:disabled { opacity: .55; cursor: default; }
.pt-tile.hint { box-shadow: 0 0 0 3px var(--gold); opacity: 1; }

.mm-side { display: flex; flex-direction: column; align-items: center; gap: max(6px, .9cqw); flex: 1 1 260px; max-width: 420px; }
.mm-tray {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
  min-height: 2.6em; width: 100%;
  padding: .45em; border-radius: .7em;
  border: 2px dashed #3a4f7d; background: #0f1a33;
}
.mm-tray.shake { animation: shake .4s; }
.mm-chip { display: inline-flex; align-items: center; gap: .35em; padding: .25em .3em .25em .7em; border-radius: 999px; background: #22345e; border: 1px solid #56658a; font-weight: 700; }
.mm-chip b { color: var(--gold); }
.mm-minus {
  width: 1.7em; height: 1.7em; border-radius: 50%;
  border: 1px solid #8fa3c8; background: #14213d; color: #fff;
  font: 800 1em system-ui, sans-serif; line-height: 1; cursor: pointer;
}
.mm-minus:disabled { opacity: .35; cursor: default; }
.mm-empty { color: #9fb4dd; font-size: .9em; align-self: center; }
.mm-sum { margin: 0; text-align: center; font: 700 1.05em ui-monospace, SFMono-Regular, Menlo, monospace; color: #ffe7a8; }
.mm-built-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }
.mm-built { display: flex; flex-wrap: wrap; gap: 6px; }
.mm-built-chip { padding: .2em .6em; border-radius: 999px; background: #1f5a3a; border: 1px solid var(--ok); font-weight: 700; font-size: .9em; }

/* Mole calculator */
.calc-question { margin: 0; font-size: 1.1em; line-height: 1.45; text-align: center; }
.calc-question b { color: var(--gold); }
.calc-picture { width: min(100%, 44cqw); align-self: center; }
.calc-picture svg { display: block; width: 100%; height: auto; }
.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-choice { text-align: center; font: 800 1.05em ui-monospace, SFMono-Regular, Menlo, monospace; min-width: 9em; }
.calc-choice.hint { box-shadow: 0 0 0 3px var(--gold); }
.calc-m { margin: 0; font-weight: 700; }
.calc-src { color: var(--ok); font-weight: 600; font-size: .9em; }
.calc-field { display: flex; align-items: center; gap: 6px; font-weight: 700; color: #cfd9ef; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.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:focus { outline: none; border-color: var(--gold); }
.calc-input:disabled { opacity: .85; }
.calc-input.wrong, .calc-input.shake { border-color: var(--bad); }
.calc-input.correct { border-color: var(--ok); background: #143a28; }
.calc-unit { font-weight: 700; color: #cfd9ef; }

@container (max-width: 620px) {
  .calc-picture { width: 100%; }
  .pt-tile span { font-size: .55em; }
}