/* v0.18 Cycle training: the stage-complete card on short phone screens.
   A Cycle hand adds the Next / Discard row, so the board (and the card laid
   over it) is shorter than in the legacy training: here the card drops its
   lamps (the lesson card above already shows every lesson lit) and tightens
   so all three actions stay on screen without scrolling. Cycle pages only. */
@media (max-height: 760px) {
  body[data-session="cycle"] .tutor-done { padding: 8px 12px; }
  body[data-session="cycle"] .tutor-done-card { gap: 6px; padding: 12px 14px 12px; }
  body[data-session="cycle"] .tutor-done-card .result-crest,
  body[data-session="cycle"] .tutor-done-lamps { display: none; }
  body[data-session="cycle"] .tutor-done-card h2 { font-size: 26px; }
  body[data-session="cycle"] .tutor-done-text { font-size: 13px; line-height: 1.4; }
  body[data-session="cycle"] .tutor-done-actions { grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 2px; }
  /* The lead action (Find a match, or the Next stage while deck cards are unlearned) spans the row. */
  body[data-session="cycle"] .tutor-done-actions > .btn.primary { grid-column: 1 / -1; }
  body[data-session="cycle"] .tutor-done-actions > #btn-tutor-extra[hidden] + #btn-tutor-home { grid-column: 1 / -1; }
}

/* The discard lesson: the chosen card says Discard comes next (not a lane),
   and the Discard button is the lit target. */
.hand.tut-discard .card.tut-want[aria-pressed="true"]::after { content: "Now Discard"; }
.hand.tut-discard .cy-discard:not(:disabled) {
  border-color: var(--gold-hot, var(--tk-gold-hot));
  box-shadow: 0 0 0 2px rgba(var(--tk-gold-hot-rgb), .55), 0 0 18px rgba(var(--tk-gold-hot-rgb), .45);
}

/* Onboarding upgrade (2026-10): Pause beside Skip, the retry button, the
   paused sheet, the ghost card that drags from the live card to the live
   lane (motion), and its static equivalent (reduced motion): an arrow with
   the card and lane in words. Decoration never takes input. */
.tutor-ctl { display: flex; gap: 6px; align-items: start; }
.tutor-pause { min-width: 44px; padding: 0 10px; display: grid; place-items: center; }
.tutor-pause .pause-bars { display: block; width: 10px; height: 13px; border-left: 3.5px solid currentColor; border-right: 3.5px solid currentColor; box-sizing: border-box; }
.tutor-retry { align-self: start; margin-top: 6px; min-height: 40px; padding: 6px 16px; font-size: 14px; }
.tutor[data-state="success"] .tutor-text { color: var(--gold-hot); font-weight: 700; }
.tutor[data-state="success"] .tutor-state { color: var(--gold-hot); }
.tutor[data-state="retry"] .tutor-state { color: #ffb38a; }
.tutor[data-state="live"] .tutor-state::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: currentColor;
}
.tutor-held { z-index: 7; }
.tutor-held #btn-tutor-back:disabled { opacity: .45; }
.tutor-ghost {
  position: fixed; left: 0; top: 0; z-index: 40; pointer-events: none; will-change: transform, opacity;
  width: 46px; height: 60px; margin: -30px 0 0 -23px; border-radius: 9px; opacity: 0;
  border: 2px solid var(--gold-hot); background: rgba(14, 19, 46, .55) center / cover no-repeat;
  box-shadow: 0 0 18px rgba(255, 224, 160, .55), 0 6px 14px rgba(0, 0, 0, .5);
}
.tutor-ghost::after {
  /* the fingertip */
  content: ""; position: absolute; right: -9px; bottom: -9px; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255, 244, 210, .9); box-shadow: 0 0 0 3px rgba(255, 214, 140, .45), 0 3px 8px rgba(0, 0, 0, .5);
}
.tutor-arrow { position: fixed; inset: 0; z-index: 39; pointer-events: none; width: 100%; height: 100%; overflow: visible; }
.tutor-arrow line { stroke: var(--gold-hot, #ffd98a); stroke-width: 3; stroke-dasharray: 8 6; }
.tutor-arrow circle { fill: none; stroke: var(--gold-hot, #ffd98a); stroke-width: 3; }
.tutor-arrow-label {
  position: fixed; z-index: 40; pointer-events: none; transform: translate(-50%, -130%); white-space: nowrap;
  padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--tk-gilt-ink, #2a1d08);
  background: var(--gold-hot, #ffd98a); box-shadow: 0 3px 10px rgba(0, 0, 0, .5);
}