/* Chapter 10: structural formulas, scene text, the condensed-formula builder, the molecule namer and builder. */

.sc-text { font: 600 32px system-ui, sans-serif; fill: #e8eefc; }
.sc-text.big { font-size: 34px; font-weight: 700; }
.sc-text .gold, .sc-note.gold { fill: var(--gold); }
.sc-name { font: 800 42px system-ui, sans-serif; fill: var(--gold); }
.sc-name.small { font-size: 34px; }
.sc-note { font: 600 26px system-ui, sans-serif; fill: #9fb4dd; }
.sc-note.bad { fill: #ff8a8a; }
.sc-head { font: 800 28px system-ui, sans-serif; fill: #9fb4dd; letter-spacing: .02em; }
.sc-head.yes { font-size: 36px; fill: #8ce99a; }
.sc-head.no { font-size: 36px; fill: #ff8a8a; }
.sc-mono { font: 700 30px system-ui, sans-serif; fill: #fff; letter-spacing: .02em; }
.sc-mono.big { font-size: 36px; }
.sc-faint { font: 800 40px system-ui, sans-serif; fill: rgba(159, 180, 221, .22); }
.sc-glow { stroke: var(--gold); stroke-opacity: .55; stroke-width: 12; stroke-linecap: round; }
.sc-elem { font: 800 56px system-ui, sans-serif; }
.sc-row { fill: rgba(255, 255, 255, .04); }
.sc-row.alt { fill: rgba(255, 255, 255, .08); }
.sc-panel { fill: rgba(8, 14, 30, .55); stroke-width: 3; }
.sc-panel.yes { stroke: rgba(140, 233, 154, .6); }
.sc-panel.no { stroke: rgba(255, 138, 138, .6); }
.sc-chip { fill: #1d2b4b; stroke: #3a4f7d; stroke-width: 2; }
.sc-chip-text { font: 800 34px system-ui, sans-serif; fill: #fff; }
.sc-ring { fill: rgba(255, 209, 102, .08); stroke: var(--gold); stroke-width: 5; stroke-dasharray: 14 10; }
.sc-zoom { fill: #0d1730; stroke: rgba(255, 255, 255, .75); stroke-width: 4; }
.sc-atom-c { fill: rgba(255, 255, 255, .14); stroke: #e8eefc; stroke-width: 3; }
.sc-atom-h { fill: rgba(169, 187, 220, .18); stroke: #a9bbdc; stroke-width: 3; }
.sc-atom-letter { font: 800 30px system-ui, sans-serif; fill: #fff; }
.sc-electron { font: 800 36px system-ui, sans-serif; }
.sc-electron.c { fill: #fff; }
.sc-electron.h { fill: #74c0fc; }
.mol-ring { fill: rgba(255, 255, 255, .03); stroke: rgba(255, 255, 255, .45); stroke-width: 3; stroke-dasharray: 10 8; }
.atom-ball { font: 800 34px system-ui, sans-serif; fill: #14213d; }
.atom-ball.small { font-size: 22px; }

/* Structural formulas */
.mol-bond { stroke: #cfd9ef; stroke-linecap: round; }
.mol-t { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-weight: 700; }
.mol-t.c { font-weight: 800; }
.mol-num { font-family: system-ui, sans-serif; font-weight: 800; fill: var(--gold); paint-order: stroke; stroke: #0d1730; stroke-width: 4px; }
.mol-num.alt { fill: #ff8a8a; }
.mol-path { fill: none; stroke: rgba(255, 209, 102, .35); stroke-linecap: round; stroke-linejoin: round; }
circle.mol-path { fill: rgba(255, 209, 102, .35); stroke: none; }
.mol-path.bad { stroke: rgba(255, 138, 138, .45); }
circle.mol-path.bad { fill: rgba(255, 138, 138, .45); }
.mol-hit { fill: transparent; }
.mol-c[role="button"] { cursor: pointer; }
.mol-c[role="button"]:hover .mol-hit { fill: rgba(255, 255, 255, .14); }
.mol-c:focus { outline: none; }
.mol-c:focus-visible .mol-hit { stroke: #fff; stroke-width: 3; }
.mol-c.sel .mol-hit { fill: rgba(255, 209, 102, .45); stroke: var(--gold); stroke-width: 3; }
.mol-c.hint .mol-hit { stroke: var(--gold); stroke-width: 4; stroke-dasharray: 6 5; animation: mol-blink 1s ease-in-out infinite; }
@keyframes mol-blink { 50% { stroke-opacity: .2; } }
.mol-bondhit { fill: rgba(255, 209, 102, .12); stroke: rgba(255, 209, 102, .5); stroke-width: 2; stroke-dasharray: 5 4; cursor: pointer; }
.mol-bondhit:hover, .mol-bondhit:focus-visible { fill: rgba(255, 209, 102, .3); outline: none; }

/* Activities */
.quiz-mol { display: block; width: auto; max-width: min(100%, 42cqw); height: auto; max-height: 20cqw; margin: .5em auto 0; }
.namer-stage { width: min(100%, 66cqw); align-self: center; display: flex; justify-content: center; }
.namer-stage svg { display: block; width: auto; max-width: 100%; height: auto; max-height: 24cqw; }
.namer-stage.builder svg { max-height: 21cqw; }
.builder-empty { margin: 0; padding: 2em 1em; color: #9fb4dd; font-weight: 700; text-align: center; }
.tile-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: max(5px, .7cqw); }
.tile-row[hidden] { display: none; }
.tile-row .lab-label { margin-right: .2em; }
.tile-row .chip-btn { text-align: center; font-weight: 700; padding: .45em .8em; }
.chip-btn.on { border-color: var(--gold); background: #2c3d66; }
.name-build, .formula-build {
  margin: 0;
  min-height: 1.5em;
  font: 800 1.35em system-ui, sans-serif;
  color: var(--gold);
  text-align: center;
  overflow-wrap: anywhere;
}
.formula-build { padding: .3em .8em; border-radius: .5em; background: rgba(255, 255, 255, .06); }
.formula-build.empty { font: 600 .9em system-ui, sans-serif; color: #9fb4dd; }

@container (max-width: 620px) {
  .quiz-mol { max-width: 90%; max-height: 40cqw; }
  .namer-stage { width: 100%; }
  .namer-stage svg, .namer-stage.builder svg { max-height: 48cqw; }
  .name-build, .formula-build { font-size: 1.1em; }
}

@media (prefers-reduced-motion: reduce) {
  .mol-c.hint .mol-hit { animation: none; }
}