/* Onboarding (js/onboard.js): coach control glyphs, touch-size HUD targets */

/* coach steps 1-3: the control itself, drawn beside a one-verb card */
#coach .coach-body { display: flex; align-items: center; gap: 12px; }
#coach .coach-body p { margin: 2px 0 0; }
#coachKeys { display: flex; align-items: center; gap: 5px; flex: none; }
#coachKeys:empty { display: none; }
#coachKeys small { font-size: calc(11px * var(--ts)); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #f0c766; }
#coach .kc { display: inline-grid; place-items: center; min-width: 34px; height: 34px; padding: 0 7px; box-sizing: border-box;
  font: 700 calc(15px * var(--ts)) var(--f-ui, inherit); color: #1b1410; background: linear-gradient(#f6f1e3, #d9cfb4);
  border: 1px solid #8a7a55; border-bottom-width: 4px; border-radius: 6px; box-shadow: 0 2px 4px rgba(0,0,0,.35); }
#coach .kc.wide { min-width: 64px; }
/* a fingertip: a cream disc; "drag" trails a dashed path to an arrowhead, "lift" rises with a fading ring under it */
#coach .gl-finger { position: relative; width: 58px; height: 36px; flex: none; }
#coach .gl-finger i { position: absolute; width: 20px; height: 20px; border-radius: 50%; background: #f6f1e3; box-shadow: 0 0 0 3px rgba(240,199,102,.55); }
#coach .gl-finger b { position: absolute; }
#coach .gl-finger.drag i { left: 2px; top: 8px; animation: glDrag 1.6s ease-in-out infinite; }
#coach .gl-finger.drag b { left: 24px; top: 17px; width: 22px; border-top: 2px dashed #f0c766; }
#coach .gl-finger.drag b::after { content: ""; position: absolute; right: -10px; top: -7px; border: 6px solid transparent; border-left: 9px solid #f0c766; }
#coach .gl-finger.lift i { left: 19px; top: 8px; animation: glLift 1.4s ease-out infinite; }
#coach .gl-finger.lift b { left: 15px; top: 22px; width: 28px; height: 10px; border-radius: 50%; border: 2px solid #f0c766; opacity: .7; }
@keyframes glDrag { 0%, 15% { transform: none; } 70%, 100% { transform: translateX(26px); } }
@keyframes glLift { 0%, 25% { transform: none; opacity: 1; } 100% { transform: translateY(-9px) scale(.8); opacity: .35; } }
/* a mouse, left button lit */
#coach .gl-mouse { position: relative; width: 24px; height: 34px; flex: none; border: 2px solid #f6f1e3; border-radius: 12px 12px 11px 11px; box-sizing: border-box; }
#coach .gl-mouse i { position: absolute; left: 0; top: 0; width: 10px; height: 13px; background: #f0c766; border-radius: 9px 0 0 0; border-right: 1px solid #08222d; }
#coach.in-sheet #coachKeys { display: none; }
@media (prefers-reduced-motion: reduce) { #coach .gl-finger i { animation: none; } }

/* phones: every HUD button and the coach's Skip are a 44 px target */
@media (pointer: coarse) {
  #hud button, #coach #coachSkip { min-width: 44px; min-height: 44px; }
  #coachSkip { padding: 0 10px; }
}