/* markdown.org tools — ASCII paint editor styles.
   The rendered drawing is a monospace character grid (assets/core/ascii-render.js): a white
   background, faint cell lines, and one <text> per non-space character. The editor turns that
   same stage <svg> into a paint surface, so most styling here is about the tool buttons, the
   drag previews and the blinking text cursor drawn INSIDE the svg. */

.ascii-svg { display: block; max-width: none; }
.ascii-svg .ascii-grid line { stroke: #e5e9f0; }
.ascii-svg .ascii-ink text { fill: #1a2233; }

/* the canvas is focusable (for the Text tool); hide the focus ring, we show a caret instead */
.dia-ascii .flow-canvas.ascii-canvas { outline: none; }
.dia-ascii .flow-canvas .ascii-svg { cursor: crosshair; }

/* tool buttons: a compact grid of toggles in the Tools panel */
.ascii-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ascii-tools .ascii-toolbtn { width: 100%; }
.ascii-tools .ascii-toolbtn.ascii-tool-on {
  background: var(--accent, #3b6ef6);
  border-color: var(--accent, #3b6ef6);
  color: #fff;
}

/* one-character input for the pen glyph */
.ascii-char { width: 3.2em; text-align: center; font-family: ui-monospace, Menlo, Consolas, monospace; }

/* a thin rule separating tool options from the grid-size fields */
.ascii-sep { height: 1px; background: #e5e9f0; margin: 10px 0 6px; }

/* live drag preview cells drawn into the stage svg */
.ascii-svg .ascii-prev-cell { fill: rgba(59, 110, 246, 0.14); stroke: rgba(59, 110, 246, 0.5); stroke-width: 1; }
.ascii-svg .ascii-prev-ink {
  fill: var(--accent, #3b6ef6);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 15px; text-anchor: middle; dominant-baseline: central;
}

/* the Text-tool caret: a filled accent cell that blinks */
.ascii-svg .ascii-caret { fill: rgba(59, 110, 246, 0.35); stroke: var(--accent, #3b6ef6); stroke-width: 1.5; }
.ascii-svg .ascii-caret.ascii-caret-off { fill: transparent; stroke: transparent; }