/* Draw sub-tool (shape) picker — the Annotate "Draw" tool's pen / line / arrow /
   rectangle / ellipse / eraser selector. Mirrors .pf-width-row + .pf-swatch-row
   (sign.css) so the three controls sit in the tool-options row as one cohesive
   set. Kept in its own file so the Draw feature stays self-contained (and out of
   the shared sign.css). */
.pf-draw-shape-row {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
/* inline-flex above beats the UA [hidden] rule, so hide explicitly — the same
   (0,2,0) trick .pf-width-row[hidden] uses. */
.pf-draw-shape-row[hidden] { display: none; }
.pf-draw-shape-row:not([hidden]) {
  animation: kpRise .15s cubic-bezier(.2,.7,.3,1) both;
}

.pf-draw-shape-btn {
  width: 30px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
}
.pf-draw-shape-btn svg { width: 16px; height: 16px; display: block; }
.pf-draw-shape-btn:hover { border-color: var(--border); }
.pf-draw-shape-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.pf-draw-shape-btn.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
  color: var(--accent);
}

/* Freehand highlighter swath. The path already carries stroke-opacity:0.4; the
   multiply blend lets page text stay crisp underneath (white space takes the
   color, dark text just darkens) — identical to the rect Highlight's .pf-hl-fill.
   Lives on the <svg> (not the placement box) so move/resize chrome stays opaque.
   .sign-stage-inner's isolation:isolate pins the blend backdrop to the white page
   canvas, so it survives dark mode / mobile compositors (see the highlight fix). */
.pf-draw-hl { mix-blend-mode: multiply; }

/* Eraser sub-tool: the layer deletes a drawing on click rather than inking, so a
   distinct cursor signals the mode (mirrors the .pf-hand-mode cursor swap). */
.sign-place-layer.pf-erase-mode { cursor: cell; }

@media (max-width: 720px) {
  /* Match the other toolbar controls' touch target on phones. */
  .pf-draw-shape-btn { min-height: 44px; }
}