/*
 * Note Reading Trainer (/tools/note-reading/). Loaded after site.css and scales.css (which holds the
 * keyboard picture's .pk-* styles); uses site tokens. Mobile first: clef/level, staff, feedback and answers in
 * one column; settings and progress move beside it from 1100 px.
 */

/* ------------------------------------------------------------------ layout */
.nr { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1100px) { .nr { grid-template-columns: minmax(0, 1.8fr) minmax(19rem, 1fr); gap: var(--s-6); } }
.nr-stage { text-align: left; padding: var(--s-4); }
@media (min-width: 640px) { .nr-stage { padding: var(--s-5) var(--s-6) var(--s-6); } }
.nr-side { display: grid; gap: var(--s-4); }
.nr-panel h2 { margin: 0 0 var(--s-3); font-size: var(--step-1); }
.nr-panel .field { margin-bottom: var(--s-3); }
.nr-panel .switch { display: flex; margin-top: var(--s-2); line-height: 1.3; }
.nr-h3 { margin: var(--s-4) 0 var(--s-2); font-size: 1.0625rem; font-family: var(--font-body); font-weight: 700; letter-spacing: 0; }

/* ------------------------------------------------------------------ pickers */
.nr-pick { display: grid; gap: var(--s-3); grid-template-columns: minmax(0, 1fr); margin-bottom: var(--s-3); }
.nr-pick .field { margin-bottom: 0; }
.nr-pick select { width: 100%; }
.nr-panel { scroll-margin-top: var(--s-4); outline: none; }
.nr-current { margin: var(--s-1) 0 0; color: var(--muted); }
.nr-current a { display: inline-flex; align-items: center; min-height: 24px; font-weight: 650; }
.nr-level-hint { margin: 0; }
.nr-idle { margin: 0; }
@media (max-width: 420px) { .nr-feedback { min-height: 4.6em; } }
.nr-keymode { margin: var(--s-2) 0 var(--s-3); display: inline-flex; flex-wrap: wrap; }
.nr-keymode-legend { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.nr-naming-note { margin: 0 0 var(--s-3); padding: var(--s-2) var(--s-3); border-left: 4px solid var(--saffron-edge); background: var(--surface-2); border-radius: 0 var(--r-sm) var(--r-sm) 0; }

/* ------------------------------------------------------------------ staff */
.nr-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-1) var(--s-4); }
.nr-prompt { margin: 0; font-size: var(--step-1); }
.nr-score { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--muted); }
.nr-staff {
  margin-top: var(--s-3); padding: var(--s-2) var(--s-3); border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line); color: var(--text);
}
.nr-svg { display: block; width: 100%; height: auto; max-height: min(46vh, 22rem); margin: 0 auto; overflow: visible; }
@media (min-width: 640px) { .nr-svg { max-height: min(44vh, 24rem); max-width: 36rem; } }
.nr-lines rect, .nr-ledger { fill: currentColor; }
.nr-clef, .nr-acc, .nr-notehead { fill: currentColor; }
.nr-svg.is-right .nr-note .nr-notehead, .nr-svg.is-right .nr-note .nr-acc, .nr-svg.is-right .nr-key .nr-acc { fill: var(--teal); }
.nr-svg.is-wrong .nr-note .nr-notehead, .nr-svg.is-wrong .nr-note .nr-acc, .nr-svg.is-wrong .nr-key .nr-acc { fill: var(--rose); }
.nr-label {
  font: 700 1.05px var(--font-body); fill: var(--text);
  paint-order: stroke; stroke: var(--surface); stroke-width: .28px; stroke-linejoin: round;
}

/* ------------------------------------------------------------------ feedback */
.nr-feedback { min-height: 5.5em; margin-top: var(--s-3); }
.nr-verdict { margin: 0; font-weight: 750; font-size: 1.125rem; }
.nr-feedback.is-right .nr-verdict { color: var(--teal); }
.nr-feedback.is-wrong .nr-verdict { color: var(--rose); }
.nr-explain { margin: var(--s-1) 0 0; max-width: 46em; }
.nr-next { margin-top: var(--s-3); }

/* ------------------------------------------------------------------ answers */
.nr-answers { display: grid; gap: var(--s-2); margin-top: var(--s-3); }
.nr-row { display: grid; gap: 6px; grid-template-columns: repeat(7, minmax(0, 1fr)); }
/* Seven 44 px buttons do not fit a 360 px phone: four to a row there. */
@media (max-width: 479px) { .nr-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 480px) { .nr-answers.is-swara.is-acc .nr-row { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.nr-ans {
  display: inline-flex; align-items: center; justify-content: center; gap: 1px; min-width: 0; min-height: 48px; padding: 4px 2px;
  border-radius: var(--r-md); border: 2px solid var(--line-strong); background: var(--surface); color: var(--text);
  font-weight: 750; font-size: 1.0625rem; line-height: 1.1; text-align: center; overflow-wrap: anywhere;
  box-shadow: 0 3px 0 var(--line-strong); margin-bottom: 3px;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.nr-ans:hover { background: var(--surface-2); }
.nr-ans:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line-strong); }
.nr-ans small { font-size: .8em; font-weight: 650; }
.nr-answers.is-swara .nr-ans { font-size: .9375rem; }
.nr-ans.is-right { background: var(--teal); border-color: var(--teal); color: var(--bg); box-shadow: 0 3px 0 var(--teal); }
.nr-ans.is-wrong { border-color: var(--rose); border-style: dashed; color: var(--rose); }
.nr-pending { margin: var(--s-2) 0 0; font-weight: 650; color: var(--indigo); }

/* ------------------------------------------------------------------ keyboard picture */
.nr-piano { margin-top: var(--s-4); max-width: 30rem; }
/* piano-ui.js sizes the keys from the box's clientWidth, which includes padding: no side padding here, so one
   octave fits a phone without the box scrolling (see the build report). */
.nr-piano .piano-scroll { padding-left: 0; padding-right: 0; }
.nr-piano-note { margin: var(--s-2) 0 0; }

/* ------------------------------------------------------------------ speed */
.nr-speed { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin-top: var(--s-3); padding: var(--s-2) var(--s-3); border-radius: var(--r-md); background: var(--surface-2); }
.nr-clock { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; }
.nr-speed-btn { min-height: 44px; padding: 6px 18px; font-size: var(--step--1); box-shadow: 0 3px 0 var(--line-strong); }

/* ------------------------------------------------------------------ progress */
.nr-weak { list-style: none; padding: 0; margin: 0 0 var(--s-2); display: grid; gap: 4px; }
.nr-weak li { display: flex; justify-content: space-between; gap: var(--s-3); padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.nr-weak-name { font-weight: 650; }
.nr-weak-count { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nr-reset { min-height: 44px; padding: 6px 18px; font-size: var(--step--1); box-shadow: 0 3px 0 var(--line-strong); margin-top: var(--s-2); }

@media (forced-colors: active) {
  .nr-lines rect, .nr-ledger, .nr-clef, .nr-acc, .nr-notehead { fill: CanvasText !important; }
  .nr-ans.is-right { forced-color-adjust: none; outline: 3px solid Highlight; }
}