/* ============================================================== sketches ====
   Stick figures drawn with one pen line, in the design's own inks: ink for the
   figure, teal for what Prept adds, red only for the thing that went wrong. No
   faces and no fills beyond a speech bubble, so a sketch reads as a note in a
   margin rather than as clip art.

   Shared by the landing page and the app, so the same person looks the same
   wherever they turn up. Reads tokens.css only.

   Markup: an inline <svg class="sketch"> whose strokes carry .ln (with .acc or
   .bad), speech bubbles .bub, labels .tx and data points .dot.
   ========================================================================= */

.sketch { display: block; width: 100%; height: auto; overflow: visible; }

.sketch .ln { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* A sketch of how things go without Prept is drawn in grey, the way a memory
   is. Accent and warning strokes keep their colour either way. */
.sketch.muted .ln { stroke: var(--ink-3); }
.sketch .ln.acc { stroke: var(--accent); }
.sketch .ln.bad { stroke: var(--crit); }
/* A track for something drawn over it, such as a bar before its value. */
.sketch .ln.faint { stroke: var(--line-strong); }

.sketch .bub { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.2; stroke-linejoin: round; }
.sketch .bub.good { stroke: var(--accent-line); }
.sketch .bub.bad { stroke: var(--crit); }

.sketch .tx { font-family: var(--font-mono); font-size: 10px; fill: var(--ink-2); }
.sketch .tx.k { font-size: 8px; letter-spacing: .12em; fill: var(--ink-3); }
.sketch .tx.acc { fill: var(--accent); }
.sketch .tx.bad { fill: var(--crit); }
.sketch .dot { fill: var(--accent); }
.sketch .dot.bad { fill: var(--crit); }

/* The draw-in. A page opts in by putting .js on the root before first paint,
   so a sketch never flashes drawn and then vanishes; without script it simply
   shows. Adding .drawn plays it once. .still marks one that has already been
   seen and must not replay when its screen is rebuilt. */
@media (prefers-reduced-motion: no-preference) {
  .js .sketch .ln {
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    transition: stroke-dashoffset 1.4s var(--ease);
    transition-delay: var(--delay, 0s);
  }
  .js .sketch :is(.tx, .bub, .dot) {
    opacity: 0;
    transition: opacity .5s var(--ease);
    transition-delay: calc(var(--delay, 0s) + .8s);
  }
  .js .sketch.drawn .ln { stroke-dashoffset: 0; }
  .js .sketch.drawn :is(.tx, .bub, .dot) { opacity: 1; }
  .js .sketch.still :is(.ln, .tx, .bub, .dot) { transition: none; }
}