/* ==========================================================================
   hanzen doodle layer
   Doodle is punctuation, not wallpaper. Containers and controls stay crisp;
   the hand-drawn feel lives in six places only:

     1. the hero sticker frame, its arrow and two gold sparkles (stage.css)
     2. one doodle icon per section head, in a 44px jade chip  (.doodle-icon-chip)
     3. a hand-drawn check on every list bullet                (.points li)
     4. a rough jade underline under one italic phrase per heading (.doodle-underline)
     5. a hand-drawn arrow between the three steps             (.step-arrow)
     6. the point-up tap hint on the method tiles              (.tile-hint)

   Every icon renders through the .da-ico mask (24px chip, 20px inline) in
   --accent or --ink, never a third colour. Every doodle element is aria-hidden.
   Filters come from the zero-size <svg> right after <body>: #doodle-rough
   (scale 4.5, everything) and #doodle-rough-strong (the hero frame only).
   Colours come from tokens.css, so all of this recolours with the 日/月 dial.
   ========================================================================== */

/* ---------- the icons: alpha from the pack svg, colour from currentColor ---------- */
.da-ico {
  display: inline-block; flex: none;
  width: 24px; height: 24px;
  background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
          mask: var(--ico) center / contain no-repeat;
}
.da-ico--inline { width: 20px; height: 20px; vertical-align: -.2em; }
.da-ico--rocket   { --ico: url(../assets/doodle/rocket.svg); }
.da-ico--bulb     { --ico: url(../assets/doodle/bulb.svg); }
.da-ico--pencil   { --ico: url(../assets/doodle/pencil.svg); }
.da-ico--eye      { --ico: url(../assets/doodle/eye.svg); }
.da-ico--bubble   { --ico: url(../assets/doodle/speech-bubble.svg); }
.da-ico--star     { --ico: url(../assets/doodle/star.svg); }
.da-ico--point-up { --ico: url(../assets/doodle/point-up.svg); }
.da-ico--phone    { --ico: url(../assets/doodle/phone.svg); }
.da-ico--arrow-up { --ico: url(../assets/doodle/arrow-up.svg); }
.da-ico--check    { --ico: var(--da-check); }

:root {
  /* the hand-drawn tick, inlined so a list never waits on a request */
  --da-check: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 13 C 7 15, 9 18, 10 20 C 13 12, 17 6, 21 3" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  --doodle-stroke: 2px;
}

/* ---------- 2. section icon chip: 44px jade ring, 24px glyph ---------- */
.doodle-icon-chip {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; color: var(--accent); isolation: isolate;
}
.doodle-icon-chip::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border: var(--doodle-stroke) solid var(--accent); border-radius: 50%;
  background: var(--card);
  filter: url(#doodle-rough);
}

/* ---------- 3. hand-drawn check bullets ---------- */
.points { list-style: none; padding: 0; }
.points li { position: relative; padding-left: 2.1rem; }
.points li::before {
  content: ""; position: absolute; left: .1rem; top: .2em;
  width: 1.2rem; height: 1.2rem; background: var(--accent);
  -webkit-mask: var(--da-check) center / contain no-repeat;
          mask: var(--da-check) center / contain no-repeat;
  filter: url(#doodle-rough);
}

/* ---------- 4. rough jade underline under the italic phrase ---------- */
.doodle-underline { position: relative; white-space: nowrap; }
.doodle-underline::after {
  content: ""; position: absolute; left: -.04em; right: -.04em; bottom: -.04em;
  height: .09em; max-height: 5px; min-height: 3px;
  background: var(--accent); border-radius: var(--r-pill); opacity: .9;
  filter: url(#doodle-rough);
}

/* ---------- 5. the step arrow (inline stroked svg, draws in on reveal) ---------- */
.step-arrow {
  width: 64px; height: 28px; color: var(--ink); flex: none;
  fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 700ms var(--ease-out) 250ms;
}
.is-in .step-arrow, .step-arrow.is-in { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) { .step-arrow { stroke-dashoffset: 0; transition: none; } }

/* ---------- 6. the tap hint on tiles (point-up, 20px) ---------- */
.tile-hint { position: absolute; top: 14px; right: 14px; color: var(--ink); opacity: .7; transition: opacity var(--d-ui); }