/* chemistry (SMILES) editor — each molecule is a nested <svg.chem-mol> inside the one root <svg>.
   A nested svg is the click/hover target; it paints no fill of its own, so show selection as an
   outlined rounded rectangle around it and give its label the accent colour. */

/* every rendered structure sits on a light backdrop so the dark bonds stay legible in any theme */
.chem-root { background: #fff; border-radius: 6px; }
/* in the "You get" example panes the root svg should scale down to fit the column */
.flow-eg-out .chem-root, .mde-diagram-pane .chem-root { max-width: 100%; height: auto; }

.dia-chemistry .flow-canvas svg.chem-mol { cursor: pointer; }
.dia-chemistry .flow-canvas svg.chem-mol.dia-pick-hover {
  outline: 2px solid rgba(59, 110, 246, 0.55);
  outline-offset: 2px;
  border-radius: 6px;
}
.dia-chemistry .flow-canvas svg.chem-mol.dia-pick-sel {
  outline: 3px solid var(--accent, #3b6ef6);
  outline-offset: 2px;
  border-radius: 6px;
}

.dia-chemistry .flow-canvas text.chem-label {
  font: 600 14px/1.2 var(--sans, system-ui, sans-serif);
  fill: #334155;
}

/* quick-insert fragment buttons wrap neatly in the properties panel */
.dia-chemistry .chem-frags { flex-wrap: wrap; gap: 4px; }