/* TypeDojo — finger / hands guide
   Hand illustrations overlaid on the on-screen keyboard, shown when the Fingers
   toggle is on. The overlay is anchored to .keyboard-bg (which is position:
   relative in keyboard.css). Image swapping is driven by keyboard.js.

   To align a key: add one .hands__img--<side>[data-file="<key>"] rule and tune
   top + left/right until the finger sits on its key. Left hand is anchored from
   the left, right hand from the right. */

.hands {
  position: absolute;
  inset: 0;
  pointer-events: none;               /* never blocks the keys */
  z-index: 5;
  display: none;                      /* shown only when the Fingers guide is on */
}
.keyboard-bg.show-fingers .hands { display: block; }

/* Each hand is absolutely placed so we can nudge it PER KEY (like TypeDojo's
   .finger-X rules). 50% is the scale where the finger-spread matches our keys. */
.hands__img {
  position: absolute;
  width: 45%;
  height: auto;
  /* glide to the next key instead of snapping (no opacity → no flash) */
  transition: top 0.2s ease-out, left 0.2s ease-out, right 0.2s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .hands__img { transition: none; }
}
.hands__img--left  { top: 35%; left: -1%; }    /* resting left hand (same as F) */
.hands__img--right { top: 35%; right: 8%; }    /* resting right hand (same as J) */

/* ── Per-key alignment — tune top + left/right until the finger sits on its key.
   Add one rule per key as they're wired in keyboard.js (HAND_KEYS). ── */
/* Number row — one row above QWERTY, so the reach is higher again. Split 1-5
   left / 6-= right, the standard assignment. The shifted symbols (!@#$%^&*()_+)
   share these rules: they resolve to the same SVG and the same hand.
   Starting estimates — tune by eye. */
.hands__img--left[data-file="backtick"] { top: -4%; left: -15%; }  /* ` ~ — tune */
.hands__img--left[data-file="1"] { top: -2%; left: -8%; }   /* 1 ! — tune */
.hands__img--left[data-file="2"] { top: 7%; left: -2%; }   /* 2 @ — tune */
.hands__img--left[data-file="3"] { top: -1%; left: -3%; }   /* 3 # — tune */
.hands__img--left[data-file="4"] { top: -2%; left: 4%; }   /* 4 $ — tune */
.hands__img--left[data-file="5"] { top: 0%; left:  6%; }   /* 5 % — tune */

.hands__img--right[data-file="6"] { top: -9%; right: 20%; }  /* 6 ^ — tune */
.hands__img--right[data-file="7"] { top: -1%; right: 24%; }  /* 7 & — tune */
.hands__img--right[data-file="8"] { top: 1%; right: 18%; }  /* 8 * — tune */
.hands__img--right[data-file="9"] { top: 3%; right: 19%; }  /* 9 ( — tune */
.hands__img--right[data-file="0"] { top: -2%; right:  12%; }  /* 0 ) — tune */
.hands__img--right[data-file="substract"] { top: 0%; right: 6%; }  /* - _ — tune */
.hands__img--right[data-file="add"]       { top: 0%; right: -1%; }  /* = + — tune */

/* Top row — the hand reaches up; each key shifts differently, so own rule each.
   Starting estimates (TypeDojo's pattern + our baseline) — tune by eye. */
.hands__img--left[data-file="q"] { top: 22%; left: -6%; }   /* Q — tune */
.hands__img--left[data-file="w"] { top: 27%; left: -2%; }   /* W — tune */
.hands__img--left[data-file="e"] { top: 27%; left: -1%; }   /* E — tune */
.hands__img--left[data-file="r"] { top: 24%; left: -1%; }   /* R — tune */
.hands__img--left[data-file="t"] { top: 24%; left: 2%; }    /* T — tune */

.hands__img--right[data-file="y"] { top: 24%; right: 17%; }  /* Y — tune */
.hands__img--right[data-file="u"] { top: 23%; right: 14%; }  /* U — tune */
.hands__img--right[data-file="i"] { top: 26%; right: 11%; }  /* I — tune */
.hands__img--right[data-file="o"] { top: 28%; right: 11%; }  /* O — tune */
.hands__img--right[data-file="p"] { top: 21%; right: 9%; }   /* P — tune */

/* Top row, outboard of P — all three are right pinky, each a bit further out.
   The shifted forms { } | share these: same key, same hand, same SVG.
   Starting estimates — tune by eye. */
.hands__img--right[data-file="bracket_open"]  { top: 18%; right: 2%; }  /* [ { — tune */
.hands__img--right[data-file="bracket_close"] { top: 22%; right: 2%; }  /* ] } — tune */
.hands__img--right[data-file="pipe"]          { top: 21%; right: 0%; }  /* \ | — tune */

/* Home row — same hand position; each SVG just presses a different finger. */
.hands__img--left[data-file="a"],
.hands__img--left[data-file="s"],
.hands__img--left[data-file="d"],
.hands__img--left[data-file="f"]  { top: 35%; left: -1%; }   /* A S D F */
.hands__img--left[data-file="g"]  { top: 35%; left: 2%; }   /* G (index stretch) — tune */

.hands__img--right[data-file="h"] { top: 35%; right: 11%; }   /* H (index stretch) — tune */
.hands__img--right[data-file="j"],
.hands__img--right[data-file="k"],
.hands__img--right[data-file="l"],
.hands__img--right[data-file="colon"] { top: 35%; right: 8%; }   /* J K L ; : */
/* One key outboard of ; — the pinky stretches right, so it gets its own rule
   rather than sharing the home position. Covers " as well. */
.hands__img--right[data-file="apostrophe"] { top: 41%; right: 7%; }  /* ' " — tune */

/* Bottom row — the fingers curl down; each key shifts differently, own rule each.
   Starting estimates — tune by eye. (, . / use their SVG filenames.) */
.hands__img--left[data-file="z"] { top: 22%; left: 4%; }    /* Z — tune */
.hands__img--left[data-file="x"] { top: 30%; left: 3%; }    /* X — tune */
.hands__img--left[data-file="c"] { top: 30%; left: 4%; }    /* C — tune */
.hands__img--left[data-file="v"] { top: 40%; left: -2%; }   /* V — tune */
.hands__img--left[data-file="b"] { top: 37%; left: 2%; }   /* B — tune */

/* ── Shift — the hand NOT reaching for the key holds it, so these two are the
   only poses that appear on the opposite side from the letter being typed.
   Both are pinky-down at the far outside edge of the bottom row, so each hand
   sits lower and further out than for any letter. Starting estimates — tune. ── */
.hands__img--left[data-file="shift_left"]   { top: 37%; left: -2%; }  /* Left Shift — tune */
.hands__img--right[data-file="shift_right"] { top: 37%; right: 6%; }  /* Right Shift — tune */

.hands__img--right[data-file="n"] { top: 26%; right: 3%; }   /* N — tune */
.hands__img--right[data-file="m"] { top: 30%; right: -1%; }  /* M — tune */
.hands__img--right[data-file="lessthen"]    { top: 30%; right: 7%; }   /* , — tune */
.hands__img--right[data-file="greaterthan"] { top: 30%; right: 10%; }  /* . — tune */
.hands__img--right[data-file="qus"]         { top: 33%; right: 10%; }  /* / — tune */

/* ── Space — a thumb, and the only key where the hand alternates: you use the
   thumb of the hand that did NOT just type. Both poses reach in toward the
   middle of the bar, a row below the bottom letters. Estimates — tune. ── */
.hands__img--left[data-file="left_space"]   { top: 37%; left:  1%; }   /* space, left thumb — tune */
.hands__img--right[data-file="right_space"] { top: 37%; right: 9%; }  /* space, right thumb — tune */