/**
 * The pointer, everywhere.
 *
 * An arrow is the one thing on screen that still says "office software" in an
 * app made of crayons and letters, so the whole product points with a crayon
 * instead: pink at rest, tilting purple over anything that does something.
 *
 * Drawn in CSS as a data URI rather than fetched or scripted, for two reasons.
 * A cursor that arrives late flickers, and a cursor that depends on JavaScript
 * is an arrow on any device where the script fails — which on a school tablet
 * is a device that is otherwise working fine.
 *
 * The tip points up and to the left, where every hand already expects a
 * pointer to aim, with the held end trailing down to the right and out of the
 * way of whatever is being pointed at. The crayon is drawn nib-down, the way
 * it is held, and the outer group turns it half a turn — a rotation and not a
 * mirror, so the gold band stays on the end it was drawn on and the shape
 * stays a crayon rather than its reflection.
 *
 * The hotspot is the nib, measured off the turned drawing rather than
 * guessed: (9 7) at rest and (13 5) over anything live, the two states
 * leaning at
 * different angles and so not sharing a tip. Left at the corner of
 * the box, a child aiming at a letter would miss it by the width of the
 * crayon, which is exactly the kind of miss they would blame themselves for.
 *
 * `!important` on the interactive rule is deliberate and narrow. Every page in
 * this app sets `cursor: pointer` on its own buttons — dozens of rules, all
 * more specific than a bare `button` selector — and without it those would
 * quietly win and hand the arrow back.
 */

:root {
  --crayon-rest: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Cg transform='rotate(180 17 17)'%3E%3Cg transform='rotate(-38 17 17)'%3E%3Crect x='12' y='3' width='11' height='19' rx='3' fill='%23ff4d94'/%3E%3Crect x='12' y='3' width='11' height='6' rx='3' fill='%23ffc93c'/%3E%3Cpath d='M12 22h11l-5.5 8z' fill='%23ffe0b2'/%3E%3Cpath d='M15.4 26.9h4.2l-2.1 3.1z' fill='%2317385c'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 9 7;
  --crayon-live: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Cg transform='rotate(180 17 17)'%3E%3Cg transform='rotate(-14 17 17)'%3E%3Crect x='12' y='3' width='11' height='19' rx='3' fill='%237c3aed'/%3E%3Crect x='12' y='3' width='11' height='6' rx='3' fill='%23ffc93c'/%3E%3Cpath d='M12 22h11l-5.5 8z' fill='%23ffe0b2'/%3E%3Cpath d='M15.4 26.9h4.2l-2.1 3.1z' fill='%2317385c'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 13 5;
}

body { cursor: var(--crayon-rest), auto; }

a, button, summary, label, select,
[role="button"], .card, .letter, .lesson, .class-tile, .letter-chip {
  cursor: var(--crayon-live), pointer !important;
}

/* One pen on the writing surface.
 *
 * The lesson draws the pen the child has actually unlocked, tip on the line,
 * from the moment the finger goes down until it lifts (drawPointer in
 * game.js). The crayon here is a second pen over that same stroke — two nibs
 * on one line, and the wrong one leading, since the earned pen is the one
 * doing the drawing.
 *
 * So the crayon stands down for the length of a stroke and comes back as soon
 * as the finger lifts. `:active` is exactly that span and needs no script,
 * which keeps this file's promise that the pointer never depends on one.
 * Hiding it outright would leave a child hovering over a blank box with
 * nothing to aim, which is worse than the thing being fixed.
 */
.canvas-wrap:active,
.canvas-wrap:active canvas { cursor: none; }

/* Text entry keeps the I-beam: a crayon over a PIN box would say "draw here". */
input[type="text"], input[type="password"], input[type="number"], textarea {
  cursor: text !important;
}

/* Disabled things should not look pressable. */
:disabled, [aria-disabled="true"] { cursor: not-allowed !important; }

/* The paint the pointer leaves behind; see src/cursor.js. Inert, so it never
   eats a click. */
.paint {
  position: fixed; top: 0; left: 0;
  width: 14px; height: 14px; border-radius: 50%;
  pointer-events: none; z-index: 9999;
  will-change: transform, opacity;
}

/* Nothing to decorate on a touch screen, and the canvas in the lesson wants
   the finger unadorned. */
@media (hover: none) {
  body, a, button, summary, label, select,
  [role="button"], .card, .letter, .lesson, .class-tile, .letter-chip {
    cursor: auto !important;
  }
}