/* ---------- pixel cursors (generated by tools/cursors.py) ---------- */
:root{
  --cur-arrow: -webkit-image-set(url("../img/cursors/arrow.png") 1x, url("../img/cursors/arrow@2x.png") 2x) 1 1, url("../img/cursors/arrow.png") 1 1;
  --cur-hand: -webkit-image-set(url("../img/cursors/hand.png") 1x, url("../img/cursors/hand@2x.png") 2x) 5 1, url("../img/cursors/hand.png") 5 1;
  --cur-loupe: -webkit-image-set(url("../img/cursors/loupe.png") 1x, url("../img/cursors/loupe@2x.png") 2x) 6 6, url("../img/cursors/loupe.png") 6 6;
}

/* the whole page gets the arrow; anything clickable gets the hand */
body{cursor: var(--cur-arrow), auto}
a, button, .kbd, .role, .chip, .clockwrap, .lb-x, summary, [role="button"]
  {cursor: var(--cur-hand), pointer}
.role.soon, .btn.inert{cursor: var(--cur-arrow), default}
/* a loupe over the dithered plates: they open in the lightbox */
.plate, .plate *{cursor: var(--cur-loupe), zoom-in}
/* never override a text caret */
input, textarea{cursor: text}

@media (hover: none), (pointer: coarse){
  body, a, button, .kbd, .role, .chip, .clockwrap, .lb-x,
  .plate, .plate *{cursor: auto}
}