/* ─── Global page layout ───────────────────────────────────────── */
body {
  font-family: sans-serif;
  text-align: center;
  margin: 1rem;
  background: #d5c887;          /* parchment-beige background */
}

/* ─── Toolbar buttons ─────────────────────────────────────────── */
#toolbar {
  margin-bottom: 0.5em;
}

button {
  margin: 0 0.3em;
  padding: 0.4em 0.8em;
}

/* ─── Canvas container (keeps border, disables pinch-zoom) ───── */
#canvas-container {
  display: inline-block;
  border: 2px solid #444;
  touch-action: none;           /* preserve raw pointer events */
}

/* ─── Drawing surface ─────────────────────────────────────────── */
#draw-canvas {
  background: #ffffff;          /* white “paper” inside beige page */
  cursor: crosshair;
  /* size can come from HTML width/height attributes (e.g. 1200×600);
     if you remove those, uncomment the next two lines to make CSS
     control size instead, with responsive scaling:
  width: 100%;
  max-width: 1200px;
  */
}

/* ─── Inline text box for typed atoms ─────────────────────────── */
.atom-input {
  position: absolute;
  font: 32px Arial;
  text-align: center;
  padding: 0;
  margin: 0;
  border: 1px solid #888;
  width: 60px;                  /* wide enough for two letters */
  outline: none;
  background: #ffffff;          /* blends into the canvas */
}

/* ─── Status readout ──────────────────────────────────────────── */
#status {
  margin-top: 0.6em;
}

/* ─── Debug thumbnails ────────────────────────────────────────── */
#debug {
  margin-top: 1em;
}

#debug img {
  border: 1px solid #888;
  max-width: 200px;
  image-rendering: pixelated;
}