/* molecule-3d-viewer — tool CSS. Chunk 6b retired the layout rules onto
   the design system (§29 studio layout, --top-props variant, and the
   .check-line style for the display checkboxes): the unit toggle and
   check labels. What is left here is tool-specific: the formula line,
   the example chips row, the display checkbox list, the results
   buttons, the details table, and the game rows. */
.tool-body .formula-line {
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  margin: 12px 0 0;
}
.tool-body .chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.tool-body .chip-row .btn {
  padding: 8px 12px;
  font-size: 14px;
  min-height: 36px;
}
.tool-body .check-list {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}
.tool-body #results .btn {
  width: 100%;
  text-align: left;
  margin-top: 8px;
}
.tool-body #details td:last-child {
  white-space: normal;
  word-break: break-all;
}
.tool-body .game-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.tool-body .game-row .field {
  flex: 1;
  margin: 0;
}
.tool-body .game-row .field select {
  height: 100%;
}
.tool-body .game-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.tool-body .hint {
  color: var(--lg-muted);
  font-size: 14px;
  margin: 8px 0 0;
}

/* Chunk 9 (test 8): the details legend, easy-words text, PubChem link,
   game feedback/reveal and the Check button keep their layout by rule
   now, not by inline styles. The initially-hidden panels (detailsCard,
   gameCard, gamePlay, gameReveal) use the hidden attribute; the tool JS
   shows them with style.display = "block", which overrides it. */
.tool-body #legend3d {
  margin-top: 12px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
  font-size: 14px;
  line-height: 1.7;
}
.tool-body #easy3d {
  font-size: 14px;
  line-height: 1.7;
}
.tool-body .details-pubchem {
  margin: 12px 0 0;
}
.tool-body #checkGuessBtn {
  align-self: flex-end;
}
.tool-body #gameFeedback {
  margin-top: 12px;
  line-height: 1.6;
}
.tool-body #gameReveal {
  margin-top: 12px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
  line-height: 1.7;
}