/* ============================================================================
   ink.css — anything specific to the drawing surface itself that pages.css's
   layout classes do not already cover. Kept separate so Phase 4 (full ink
   toolbar: colour swatches, stickers, washi tape) has one obvious file to
   grow instead of hunting through pages.css.
   ============================================================================ */

.ink-surface { cursor: crosshair; background: transparent; }

.ink-color-dot {
  width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px var(--line-strong); cursor: pointer; padding: 0;
}
.ink-color-dot--active { box-shadow: 0 0 0 2px var(--brand); }

/* Row wrapper for the color swatches / line-thickness buttons that
   Journal.inkExtras() (js/ui.js) renders below the Pen/Highlighter/Eraser
   row — same flex-wrap behavior as .ink-toolbar so both stay usable at
   phone width without a horizontal scroll. */
.ink-extra-row { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); flex-wrap: wrap; }