/* Freehand annotation overlay for hub.gazar.dev single-file pages
 * (cheat sheets, system-design walkthroughs, project briefs).
 *
 * Mirrors the slide-deck pen (assets/deck.css) so the UX is consistent across
 * the hub: same toggle button, the same black/red/blue swatches and the same
 * eraser. The difference from the deck pen is that this overlay spans a full
 * SCROLLING document, not a single viewport-sized slide. The drawing itself is
 * stored per page in localStorage (see assets/annotate.js).
 *
 * Self-contained: these pages do NOT load deck.css, so every value the deck
 * borrows from its design-system variables is inlined here with the hub palette.
 */

/* The canvas is fixed to the viewport (cheap, even on very tall pages) and the
 * strokes are re-projected on scroll, so they stay glued to the page content. */
#annotateCanvas{
  position:fixed; inset:0;
  z-index:2147483000;
  pointer-events:none;          /* clicks/scroll pass through until the pen is on */
  touch-action:none;
}
body.annotate-on #annotateCanvas{ pointer-events:auto; cursor:crosshair; }

.pentools{
  position:fixed; left:16px; bottom:16px;
  z-index:2147483001;
  display:flex; align-items:center; gap:8px;
  font-family:"Inter","Helvetica Neue",Arial,sans-serif;
}
.ptbtn{
  width:38px; height:38px; padding:0;
  border:2px solid rgba(9,36,75,.22); background:#fff; border-radius:10px;
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  font-size:17px; line-height:1;
  box-shadow:0 1px 2px rgba(9,36,75,.06), 0 8px 24px rgba(9,36,75,.12);
  transition:transform .12s ease, background .12s ease, border-color .12s ease;
}
.ptbtn:hover{ transform:translateY(-1px); }
.ptbtn.active{ background:#09244B; border-color:#09244B; }

.palette{ display:none; align-items:center; gap:8px; }
body.annotate-on .palette{ display:inline-flex; }

.swatch{
  width:28px; height:28px; padding:0; border-radius:50%;
  border:2px solid #fff; box-shadow:0 0 0 2px rgba(9,36,75,.22);
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease;
}
.swatch:hover{ transform:translateY(-1px); }
.swatch.sel{ box-shadow:0 0 0 3px #09244B; transform:scale(1.1); }

/* Never print the annotation chrome. */
@media print{ #annotateCanvas, .pentools{ display:none !important; } }