/* ==========================================================================
   The drawing board for a molecule, and the skeletal formulas it draws.

   Every colour is a token from main.css, so the board follows the theme with
   the rest of the page: the paper is the data surface (`--paper`), the bonds
   and labels are its ink, a site letter is the accent, and an atom with too
   many bonds is drawn in the warning colour as well as named in words.
   ========================================================================== */

.mol-editor { display: grid; gap: 8px; margin-top: 12px; }

.mol-toolbar { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.mol-toolgroup { display: flex; flex-wrap: wrap; gap: 4px; }
.mol-tool {
  min-width: 32px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-inset);
  color: var(--ink);
  font: 600 12.5px/1 var(--mono);
  cursor: pointer;
}
.mol-tool:hover { border-color: var(--ink-faint); }
.mol-tool.on {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
  color: var(--accent);
}
.mol-tool:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.mol-tool-icon { width: 18px; height: 18px; vertical-align: middle; }
.mol-tool-icon polygon, .mol-tool-icon circle { fill: none; stroke: currentColor; stroke-width: 1.6; }
.mol-tool-wedge polygon { fill: currentColor; stroke-width: 1; stroke-linejoin: round; }
.mol-tool-hash line { stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }

.mol-paper {
  max-width: 760px;
  border: 1px solid var(--paper-border);
  border-radius: var(--radius-sm);
  background: var(--paper);
  overflow: hidden;
}
.mol-canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 520 / 300;
  touch-action: none;
  cursor: crosshair;
  user-select: none;
}
.mol-canvas[data-tool="move"] { cursor: move; }
.mol-canvas[data-tool="erase"] { cursor: not-allowed; }
.mol-canvas[data-tool="wedge"], .mol-canvas[data-tool="hash"] { cursor: pointer; }
.mol-canvas:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

/* The formula itself, wherever it is drawn. */
.mol-bond { stroke: var(--paper-ink); stroke-width: 1.6; stroke-linecap: round; }
.mol-wedge { fill: var(--paper-ink); stroke: var(--paper-ink); stroke-width: 0.8; stroke-linejoin: round; }
.mol-hash { stroke-width: 1.3; stroke-linecap: butt; }
.mol-ghost { stroke: var(--accent); stroke-dasharray: 4 3; }
.mol-knock { fill: var(--paper); }
.mol-label { fill: var(--paper-ink); font: 600 14px/1 var(--sans); }
.mol-site { fill: var(--accent); font: 700 12px/1 var(--sans); }
.mol-star { fill: var(--paper-ink-dim); font: 700 13px/1 var(--sans); }
/* A CIP descriptor: the letter italic, as printed in a name. */
.mol-star.mol-cip { font: 600 11px/1 var(--sans); }
.mol-cip-letter { font-style: italic; }
.mol-problem .mol-label { fill: var(--danger); }
.mol-problem-dot { fill: none; stroke: var(--danger); stroke-width: 2; }

.mol-status { margin: 0; font-size: 12.5px; color: var(--ink-dim); }
.mol-status.bad { color: var(--danger); }
.mol-smiles-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.mol-smiles-row .field-label { margin: 0; }
.mol-smiles {
  flex: 1 1 220px;
  min-width: 0;
  font: 13px/1.3 var(--mono);
}
.mol-error { margin: 0; font-size: 12px; color: var(--danger); min-height: 0; }
.mol-error:empty { display: none; }
.mol-help { margin: 0; }

.mol-solvent { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 4px; }
.mol-solvent .field-label { margin: 0; }
.mol-solvent select { width: auto; min-width: 220px; max-width: 100%; }

/* The tile that stands for a drawing among the specimens. */
.tile-drawn .ground { fill: var(--paper); }
/* The board fills the whole tile: the drawing is 4 : 3 and the tile is not,
   and the tile's own grey round a white board read as a box in a box. */
.specimen-tile .tile-art:has(> svg.tile-drawn) { background: var(--paper); }
.tile-drawn .mol-bond { stroke-width: 2.2; }
.tile-drawn .mol-hash { stroke-width: 1.8; }

/* On a result page: the structure, lettered as the table is. */
.mol-figure { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto; }
.predicted-structure .card-body { padding-top: 6px; }