/* Desk K1 · staff basics: spot, contour, steps, linespace, hear, find. Extends app.css with its tokens only.
   Reduced motion keeps the same timings as fades. Written by Claude for P2-92, 29 Oct 2026. */

/* Answer buttons that carry a small picture or caption above the word */
.k1-dirs .key-btn { min-height: 4.75rem; }
.k1-dir { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; padding: .4rem .3rem; }
.k1-dir .key-name { overflow-wrap: anywhere; }
.k1-sub { font: 500 .85rem/1.2 var(--sans); color: var(--ink-soft); text-align: center; }
.key-btn.is-correct .k1-sub, .key-btn.is-wrong .k1-sub { color: currentColor; }
.k1-arrow { width: 1.6rem; height: 1.6rem; }
.k1-arrow.is-up { transform: rotate(-90deg); }
.k1-arrow.is-down { transform: rotate(90deg); }
.btn .k1-arrow { width: 1.25rem; height: 1.25rem; }
.k1-yesno .key-name { white-space: normal; overflow-wrap: anywhere; line-height: 1.15; }

/* Hearing two notes: a tile for each, lit while its note sounds */
.k1-tiles { display: flex; justify-content: center; gap: 1rem; }
.k1-tile { flex: 0 1 9rem; min-height: 6.5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem;
  border: 2px solid var(--line); border-radius: var(--r); background: var(--card); color: var(--ink-soft);
  transition: background-color var(--fade), border-color var(--fade), color var(--fade), transform var(--fade); }
.k1-tile-num { font: 600 2.2rem/1 var(--serif); }
.k1-tile-word { font-size: .95rem; font-weight: 650; }
.k1-tile.is-playing { background: var(--accent-bg); border-color: var(--accent); color: var(--ink); }
@media (prefers-reduced-motion: no-preference) { .k1-tile.is-playing { transform: scale(1.04); } }

/* Numbers written under the notes of a staff (drawn inside the picture so they scale with it) */
.k1-num { fill: var(--ink-soft); font-family: var(--serif); font-weight: 600; }
.k1-tappable .staff-svg { cursor: pointer; }

/* Find it: the staff takes touches, the note follows the pointer */
.k1-find .staff-svg { cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.k1-find { width: 100%; max-width: 34rem; margin-inline: auto; }
.k1-find .staff-svg { max-height: 14rem; }
.k1-layer .note.is-current { color: var(--current); }
.k1-how { text-align: center; }
.k1-findq .button-row .btn { flex: 0 1 auto; }