/* practice.css — Practice mode: hub, setup, session and routines.

   Cut from the single style.css on 2026-08-02. The <link> order in
   index.html IS the cascade order these were split at; reordering the
   tags changes which rule wins. */

/* ══════════════════════════════ Practice ════════════════════════════════
   The hub, the shared setup, the two ear routines and the score screen, plus
   the three pieces of chrome the chords routine adds to the Browse detail
   pane. Every value here is one of the app's own tokens — Practice is meant
   to look like a destination that was always there.

   Not cut by build_chords_only.py: the destination ships in both
   publications. The ear routines are gated in practice.js on the same test
   the Find destination uses, so in the open build the hub simply shows
   Chords in every key alone and none of these rules is reached. */

#practiceView { position: relative; }
/* The strip, the rail and the action bar are outside the scroll, so the
   column between them is what stretches (every other page IS its own
   .page-scroll and gets this from .view). */
#practiceView > .page-scroll { flex: 1; min-height: 0; }

/* ---- the strip over a routine (and over the Browse pane in session) */
.pr-strip {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.9rem;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}
.pr-strip-lab {
  font-family: var(--font-cond);
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.pr-strip-mid { color: var(--muted); font-size: 0.8rem; }
.pr-strip-space { flex: 1; }

/* ---- the round progress rail under it */
.pr-rail { flex: none; height: 3px; background: var(--border); }
.pr-rail-fill { height: 100%; width: 0; background: var(--accent); transition: width 0.2s; }

/* ---- the setup page's action bar, pinned under the scroll */
.pr-foot {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
  padding: 0.55rem 0.9rem;
  background: var(--bg);
  border-top: 1px solid var(--border);
}
.pr-foot-sum { color: var(--muted); font-size: 0.8rem; }

.pr-start {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 0.5rem;
  padding: 0.5rem 1.1rem;
  cursor: pointer;
}
.pr-start.off, .pr-start:disabled {
  border-color: var(--border);
  background: var(--panel);
  color: var(--muted);
  opacity: 0.5;
  cursor: default;
}

/* ---- hub: one card per routine */
.pr-card { display: flex; align-items: center; gap: 0.7rem; cursor: pointer; }
.pr-card:hover, .pr-card:focus-visible { border-color: var(--accent); outline: none; }
.pr-card-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 0.6rem;
  background: var(--chip-bg);
  color: var(--accent-ink);
  font-size: 1.1rem;
}
.pr-card-icon svg { width: 20px; height: 20px; }
.pr-card-txt { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; flex: 1; }
.pr-card-name { font-size: 1.02rem; font-weight: 600; }
.pr-card-blurb { font-size: 0.84rem; color: var(--muted); }
.pr-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.15rem; }
.pr-tag {
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.72rem;
  padding: 0.1rem 0.5rem;
}
.pr-chev { flex: none; color: var(--muted); }

/* ---- hub: the progress panel */
.pr-stats { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pr-stat {
  flex: 1 1 8rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  border: 1px solid var(--border);
  border-radius: 0.65rem;
  background: var(--panel);
  padding: 0.6rem 0.7rem;
}
.pr-stat-lab {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.pr-stat-big {
  font-family: var(--font-cond);
  font-size: 1.7rem;
  line-height: 1;
  color: var(--accent-ink);
}
.pr-stat-sub { font-size: 0.78rem; color: var(--muted); }

.pr-sessions { margin-top: 0.7rem; }
.pr-session {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0;
  border-bottom: 1px dotted var(--border);
}
.pr-session-date {
  flex: none;
  width: 4.2rem;
  color: var(--muted);
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
}
.pr-session-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pr-session-name { font-size: 0.86rem; }
.pr-session-set { font-size: 0.74rem; color: var(--muted); }
.pr-session-score {
  font-family: var(--font-cond);
  font-size: 1.05rem;
  color: var(--accent-ink);
}
.pr-review-head { margin: 0.9rem 0 0.4rem; font-size: 0.78rem; color: var(--muted); }
.pr-chiprow { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.pr-setchip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  font-size: 0.78rem;
}
.pr-setchip-n { color: var(--muted); font-size: 0.72rem; }

/* ---- setup */
.pr-back { display: block; margin: 0 0 0.2rem -0.5rem; }
.pr-pl { cursor: pointer; }
.pr-pl:hover { border-color: var(--accent); }
.pr-pl-pick { flex: none; font-size: 0.8rem; color: var(--fg); }
.pr-pl-pick.on { color: var(--accent-ink); }
.pr-rename-btn { flex: none; font-size: 0.78rem; }
.pr-rename {
  flex: 1;
  min-width: 6rem;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--accent);
  border-radius: 0.4rem;
  padding: 0.15rem 0.4rem;
}
.pl-chip.pr-flat { cursor: default; }
.pl-chip.pr-flat:hover { color: var(--muted); border-color: var(--border); }

.pr-saveas {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border: 1px dashed var(--border);
  border-radius: 0.65rem;
  padding: 0.6rem 0.7rem;
  margin-bottom: 0.7rem;
}
.pr-saveas-lab {
  flex: none;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.pr-saveas-input, .pr-search {
  flex: 1;
  width: 100%;
  font: inherit;
  font-size: 0.9rem;
  color: var(--fg);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.4rem 0.6rem;
}
.pr-search { margin-top: 0.7rem; }

.pr-list-head { display: flex; align-items: center; gap: 0.4rem; margin: 0.6rem 0 0.2rem; }
.pr-list-count { flex: 1; color: var(--muted); font-size: 0.78rem; }
/* padding-right: the scrollbar sits over the key on the right of a row. */
.pr-ticklist {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  max-height: 19rem;
  overflow-y: auto;
  padding-right: 0.5rem;
}

.pr-tick {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid transparent;
  border-radius: 0.6rem;
  cursor: pointer;
}
.pr-tick.on { background: var(--panel); }
.pr-tick.out { opacity: 0.45; cursor: default; }
.pr-tick-box {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  border: 1px solid var(--border);
  border-radius: 0.3rem;
  font-size: 0.7rem;
  line-height: 1;
  color: transparent;
}
.pr-tick.on .pr-tick-box {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.pr-tick-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pr-tick-title { font-size: 0.92rem; }
.pr-tick-sub { font-size: 0.76rem; color: var(--muted); }
/* The tune list's own key chip, verbatim: the UI face rather than the
   condensed one, whose ♭ has Bravura metrics and overruns its box. */
.pr-tick-key {
  flex: none;
  font-size: 0.72rem;
  color: var(--accent-ink);
  background: var(--chip-bg);
  border-radius: 0.5rem;
  padding: 0.15rem 0.45rem;
  white-space: nowrap;
}
.pr-empty { color: var(--muted); font-size: 0.8rem; padding: 0.5rem 0.2rem; margin: 0; }

.pr-keys-note { margin-top: 0.1rem; }
.pr-keys { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0.3rem; margin-top: 0.5rem; }
/* The condensed face's ♭ (Bravura metrics) draws wider than its advance, so
   the pill carries side padding rather than the design's hairline .1rem. */
.pr-key {
  font-family: var(--font-cond);
  font-size: 0.95rem;
  line-height: 1.15;
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  background: var(--panel);
  color: var(--muted);
  padding: 0.3rem 0.35rem;
  cursor: pointer;
}
.pr-key:hover { border-color: var(--accent-ink); color: var(--fg); }
.pr-key.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---- in session: the dealt key beside the tune title */
.pr-play-in {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  border: 1px solid var(--accent-ink);
  border-radius: 0.65rem;
  background: var(--chip-bg);
  padding: 0.35rem 1.1rem;
}
.pr-play-in-lab {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
/* The chord-glyph face has Bravura metrics: a ♭ overruns a normal line box,
   so the line height is clamped rather than left to the font. */
.pr-play-in-key {
  display: block;
  font-family: var(--font-cond);
  font-size: 1.7rem;
  line-height: 1;
  color: var(--accent-ink);
}

/* ---- in session: "Next tune ›" where Browse keeps the playlist steppers */
.footer-nav.pr-nav .step-btn { display: none; }
.pr-next {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  height: 2.1rem;
  border-radius: 0.55rem;
  padding: 0 0.9rem;
  cursor: pointer;
}

/* ---- in session: the ⋯ menu's practice block */
.pr-sheet { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.2rem 0 0.6rem; }
.pr-sheet-title { font-family: var(--font-cond); font-size: 1.2rem; font-weight: 700; }
.pr-sheet-lab {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.pr-sheet-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.pr-keychip {
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--chip-bg);
  color: var(--accent-ink);
  font-family: var(--font-cond);
  font-size: 1.05rem;
  line-height: 1;
  padding: 0.32rem 0.7rem;
}
.pr-keychip-add {
  border-style: dashed;
  border-color: var(--border);
  color: var(--muted);
  font-family: inherit;
  font-size: 0.76rem;
  cursor: pointer;
}
.pr-histchip {
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.72rem;
  padding: 0.15rem 0.55rem;
}
.pr-sheet-row {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 0.8rem;
  padding-top: 0.3rem;
}
.pr-sheet-tools {
  display: flex;
  gap: 0.4rem;
  padding-top: 0.5rem;
  margin-top: 0.3rem;
  border-top: 1px solid var(--border);
}

/* ---- the ear routines */
.pr-round { display: flex; flex-direction: column; align-items: center; text-align: center; }
.pr-micro {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.pr-micro-block { margin: 1rem 0 0.4rem; align-self: flex-start; }
.pr-round-title {
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 1.05;
  margin: 0.3rem 0 0.2rem;
  text-wrap: pretty;
}
.pr-round-meta { font-size: 0.82rem; color: var(--muted); }
.pr-ask {
  margin-top: 0.7rem;
  border: 1px solid var(--accent-ink);
  border-radius: 999px;
  background: var(--chip-bg);
  color: var(--accent-ink);
  font-size: 0.85rem;
  padding: 0.25rem 0.8rem;
}

.pr-big {
  margin-top: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 7rem;
  height: 7rem;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--panel);
  color: var(--fg);
  font-size: 1.9rem;
  line-height: 1;
  cursor: pointer;
}
.pr-big.rec {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  animation: pr-pulse 1.5s infinite;
}
.pr-big:disabled { cursor: default; }
.pr-big.busy {
  border-color: var(--accent);
  color: var(--accent-ink);
  animation: pr-spin 1.1s linear infinite;
  cursor: default;
}
@keyframes pr-pulse {
  0% { box-shadow: 0 0 0 0 rgba(61, 107, 163, 0.55); }
  70% { box-shadow: 0 0 0 20px rgba(61, 107, 163, 0); }
  100% { box-shadow: 0 0 0 0 rgba(61, 107, 163, 0); }
}
@keyframes pr-spin { to { transform: rotate(360deg); } }
@keyframes pr-bar {
  0%, 100% { transform: scaleY(0.18); }
  50% { transform: scaleY(1); }
}

.pr-meter { display: flex; align-items: center; gap: 3px; height: 34px; margin-top: 1rem; }
.pr-meter-bar {
  display: block;
  width: 4px;
  height: var(--h, 14px);
  border-radius: 2px;
  background: var(--border);
  transform: scaleY(0.3);
  transform-origin: center;
}
.pr-meter.on .pr-meter-bar {
  background: var(--accent-ink);
  transform: none;
  animation: pr-bar var(--d, 0.5s) ease-in-out infinite;
  animation-delay: var(--o, 0s);
}

.pr-status { max-width: 26rem; font-size: 0.85rem; color: var(--muted); margin: 0.9rem 0 0; }
.pr-skip { margin-top: 0.6rem; }

.pr-verdict {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  text-align: left;
  border-radius: 0.65rem;
  padding: 0.7rem 0.9rem;
}
.pr-verdict.hit { border: 1px solid var(--ok); background: rgba(76, 174, 90, 0.1); color: var(--ok); }
.pr-verdict.miss { border: 1px solid #c96e6e; background: rgba(201, 110, 110, 0.1); color: #c96e6e; }
.pr-verdict-sub { font-size: 0.8rem; opacity: 0.85; }

.pr-result { width: 100%; margin-top: 1.1rem; }
.pr-matches { display: flex; flex-direction: column; gap: 0.3rem; }
.pr-match {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-align: left;
  border: 1px solid transparent;
  border-radius: 0.65rem;
  background: var(--panel);
  padding: 0.5rem 0.6rem;
}
.pr-match.answer { border-color: var(--accent); }
.pr-match-rank { flex: none; width: 1rem; color: var(--muted); font-size: 0.8rem; }
.pr-match-pct {
  flex: none;
  font-family: var(--font-cond);
  font-size: 1.3rem;
  line-height: 1;
  color: var(--accent-ink);
}
.pr-match-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pr-match-title { font-size: 0.9rem; }
.pr-match-where { font-size: 0.74rem; color: var(--muted); }
.pr-answer-chip {
  flex: none;
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: var(--accent-ink);
  font-size: 0.7rem;
  padding: 0.1rem 0.45rem;
}

.pr-round-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 1.1rem;
}

/* ---- Name the tune: the answer list (the whole corpus, never the set) */
.pr-answer { width: 100%; margin-top: 1.2rem; text-align: left; }
.pr-answer.locked { opacity: 0.45; }
.pr-answer-list {
  max-height: 17rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-right: 0.5rem;
}
.pr-pick { background: var(--panel); }
.pr-answer.locked .pr-pick { cursor: default; }

/* ---- the score screen */
.pr-score { display: flex; align-items: center; gap: 0.9rem; }
.pr-score-pct {
  flex: none;
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: 3.4rem;
  line-height: 1;
  color: var(--accent-ink);
}
.pr-score-txt { display: flex; flex-direction: column; gap: 0.2rem; }
.pr-score-sub { font-size: 0.84rem; color: var(--muted); }
.pr-scorerow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--panel);
  border-radius: 0.5rem;
  padding: 0.45rem 0.6rem;
  margin-bottom: 0.25rem;
}
.pr-mark {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  font-size: 0.8rem;
}
.pr-mark.hit { background: rgba(76, 174, 90, 0.15); color: var(--ok); }
.pr-mark.miss { background: rgba(201, 110, 110, 0.15); color: #c96e6e; }
.pr-scorerow-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pr-scorerow-title { font-size: 0.92rem; }
.pr-scorerow-ask { font-size: 0.76rem; color: var(--muted); }
.pr-scorerow-pct { flex: none; color: var(--muted); font-size: 0.8rem; }
.pr-score-tools { justify-content: flex-start; }

/* The excerpt is parsed off screen: nothing of it is ever looked at. */
.pr-synth-host { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 859px) {
  .pr-round-title { font-size: 2.1rem; }
  .pr-keys { grid-template-columns: repeat(6, 1fr); }
  .pr-score-pct { font-size: 2.6rem; }
  /* The strip is one line on a phone too: the routine's name shrinks and the
     set/round text gives way rather than wrapping the row to three lines. */
  .pr-strip { gap: 0.5rem; padding: 0.45rem 0.6rem; }
  .pr-strip-lab { font-size: 0.8rem; }
  .pr-strip-mid {
    font-size: 0.74rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}