{#
  Hand-drawn SVG primitives.

  Paths are copied verbatim from design_handoff_agent_drop/prototype/tokens.jsx.
  The handoff says:

    "They're deliberately imperfect and shouldn't be re-drawn by hand."

  So don't tidy them up. Don't simplify. Don't regenerate.

  Whimsy is pinned at 10 for Agent Drop, so these render unconditionally — no
  threshold gating here. Call sites should wrap in a container with
  `position: relative` for the absolutely-positioned primitives
  (hand_circle, pen_underline).
#}

{# Imperfect hand-drawn circle — drawn behind the "N new" counter and similar
   emphasis marks. Absolutely positioned so it sits behind the foreground text;
   callers provide the `position: relative` context. #}
{% macro hand_circle(color="var(--color-peach-deep)", size=36, stroke_width=2) -%}
<svg
  width="{{ size }}"
  height="{{ size }}"
  viewBox="0 0 36 36"
  aria-hidden="true"
  focusable="false"
  style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 0; pointer-events: none;"
>
  <path
    d="M18 3 Q 28 4, 32 11 T 32 24 Q 28 33, 17 33 T 4 24 Q 2 14, 8 7 T 19 3"
    stroke="{{ color }}"
    stroke-width="{{ stroke_width }}"
    fill="none"
    stroke-linecap="round"
    opacity="0.9"
  />
</svg>
{%- endmacro %}


{# Wobbly pen underline — sits beneath source tags / meta labels.
   Width is driven by `length_chars * 7.3`, matching the prototype's ~7.3px
   per-char heuristic. Absolutely positioned at bottom: -4px of its container. #}
{% macro pen_underline(length_chars=10, color="var(--color-peach)") -%}
{%- set w = (length_chars * 7.3) | round(2) -%}
<svg
  width="{{ w }}"
  height="6"
  viewBox="0 0 {{ w }} 6"
  preserveAspectRatio="none"
  aria-hidden="true"
  focusable="false"
  style="display: block; position: absolute; left: 0; bottom: -4px; pointer-events: none;"
>
  <path
    d="M2 3 Q {{ (w * 0.3) | round(2) }} 1.5, {{ (w * 0.5) | round(2) }} 3 T {{ (w - 2) | round(2) }} 3"
    stroke="{{ color }}"
    stroke-width="1.2"
    fill="none"
    stroke-linecap="round"
    opacity="0.6"
  />
</svg>
{%- endmacro %}


{# Brush mark — decorative hand-drawn stroke for urgent / high priority.
   Two overlapping paths: main stroke (3.2 width, 0.85 opacity) + undertone
   (1.4 width, 0.35 opacity). Two size variants per the handoff: 48x14 for
   urgent, 28x10 for high. #}
{% macro brush_mark(variant="urgent", color="var(--color-peach-deep)") -%}
  {%- if variant == "high" -%}
    {%- set w = 28 -%}
    {%- set h = 10 -%}
  {%- else -%}
    {%- set w = 48 -%}
    {%- set h = 14 -%}
  {%- endif -%}
<svg
  width="{{ w }}"
  height="{{ h }}"
  viewBox="0 0 48 14"
  aria-hidden="true"
  focusable="false"
  style="display: inline-block; vertical-align: middle;"
>
  <path
    d="M2 7 Q 8 3, 14 6 T 26 7 Q 34 9, 42 5 L 46 8"
    stroke="{{ color }}"
    stroke-width="3.2"
    stroke-linecap="round"
    fill="none"
    opacity="0.85"
  />
  <path
    d="M3 9 Q 10 10, 18 8 T 34 9 Q 40 10, 45 10"
    stroke="{{ color }}"
    stroke-width="1.4"
    stroke-linecap="round"
    fill="none"
    opacity="0.35"
  />
</svg>
{%- endmacro %}


{# Loose arrow — empty-state curved arrow, rotated 8 degrees.
   Paths copied verbatim from tokens.jsx LooseArrow. #}
{% macro loose_arrow(color="var(--color-ink-mute)", width=90, height=60) -%}
<svg
  width="{{ width }}"
  height="{{ height }}"
  viewBox="0 0 90 60"
  aria-hidden="true"
  focusable="false"
  style="display: inline-block; transform: rotate(8deg);"
>
  <path
    d="M8 10 Q 30 14, 50 28 T 76 48"
    stroke="{{ color }}"
    stroke-width="1.6"
    fill="none"
    stroke-linecap="round"
  />
  <path
    d="M68 44 L 76 48 L 72 40"
    stroke="{{ color }}"
    stroke-width="1.6"
    fill="none"
    stroke-linecap="round"
    stroke-linejoin="round"
  />
</svg>
{%- endmacro %}