/* The drawing day's canvas — client/hub/drawpad.js.
 *
 * Its own file rather than more of ritual.css because it is the one piece of the ritual card that
 * is a *control surface* rather than a reading surface, and because it loads only on the two pages
 * that can show a drawing day (landing/index.html, hub/index.html).
 *
 * Same discipline as ritual.css: every colour is `var(--hub-x, fallback)`, so the pad takes the
 * Hub's warm palette inside the Hub and the base tokens on the couple's front page. One stylesheet,
 * no second copy, no drift. The SHEET itself is the exception — it is white in every register,
 * because what leaves it is a PNG somebody else opens (docs/STYLE-GUIDE.md §04: the card is the
 * shell, and the only inks are --pink and --blue).
 */

/* Two blocks — the sheet, and everything you do to it. They stack on a phone and on the couple's
   front page (where the card is one column of two), and sit side by side on the Hub room's card,
   which is the full width of the room. `flex-wrap` is the whole mechanism: 320 + 260 does not fit
   a phone and 420 + 260 does fit the room, so no breakpoint has to guess at the card's width. */
.drawpad { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 18px; }
.drawpad-side { flex: 1 1 260px; max-width: 420px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }

/* The sheet is square at both widths so the two halves of a finished day compose the same:
   320 on a phone, 420 from 1024px up (docs/C5-DESIGN.md §4). `min()` keeps it inside a narrow
   card — a 320px sheet in a 300px column would otherwise push the whole page sideways. */
.drawpad-sheet-wrap { --pad-size: min(320px, 100%); width: var(--pad-size); }
.drawpad-sheet {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #fff;
  border: 1px solid var(--hub-line, var(--line));
  border-radius: var(--r8, 8px);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 4%);
  /* The finger draws; it does not scroll the page out from under the drawing. */
  touch-action: none;
  cursor: crosshair;
}

/* ── the tools ──────────────────────────────────────────────────────────────────────────────── */
.drawpad-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.drawpad-inks, .drawpad-widths { display: flex; align-items: center; gap: 6px; }

.drawpad-ink {
  width: 30px; height: 30px; border-radius: 50%; padding: 0;
  border: 2px solid var(--hub-line, var(--line));
  background: var(--ink-swatch);
  box-shadow: inset 0 0 0 3px var(--hub-card, var(--paper-raised));
}
/* The two people's own colours, and the only two there are. Written as literals rather than
   var(--pink)/var(--blue) so the swatch always matches the ink the PNG will actually carry —
   client/hub/drawpad.js INKS says why. */
.drawpad-ink.is-pink { --ink-swatch: #FF7BA3; }
.drawpad-ink.is-blue { --ink-swatch: #5FA0FF; }
.drawpad-ink.is-on { border-color: var(--hub-ink, var(--ink)); box-shadow: inset 0 0 0 2px var(--hub-card, var(--paper-raised)); }
.drawpad-ink:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.drawpad-width {
  width: 32px; height: 32px; padding: 0; border-radius: var(--r8, 8px);
  border: 1.5px solid var(--hub-line, var(--line));
  background: var(--hub-paper, var(--paper));
  display: inline-flex; align-items: center; justify-content: center;
}
.drawpad-width.is-on { border-color: var(--accent); background: var(--hub-card, var(--paper-raised)); }
.drawpad-width:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* The nib is the width, drawn. Sized inline from WIDTHS so the row cannot drift from the ink. */
.drawpad-nib { display: block; border-radius: 50%; background: var(--hub-ink, var(--ink)); }

.drawpad-eraser { font-size: 13px; }
.drawpad-eraser.is-on {
  border-color: var(--accent);
  background: var(--hub-a-tint, var(--pink-tint));
  color: var(--on-pink-tint);
}

.drawpad-helper { margin: 0; font-size: 13px; color: var(--hub-soft, var(--ink-soft)); }
.drawpad-row { margin-top: 0; }
.drawpad-again:disabled { opacity: .45; }

@media (min-width: 1024px) {
  .drawpad-sheet-wrap { --pad-size: min(420px, 100%); }
}