/* Find the note — builds on styles.css, chords.css (stage, transport) and scales.css (fretboard). Design system: brand/design-guide.md */

.nf-stage { grid-template-rows: none; gap: 14px; min-height: 0; }

/* the prompt: "Find  C  on the A string" */
.nf-prompt { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 16px; min-height: 76px; text-align: center; }
.nf-ask { color: var(--text-muted); font-size: 18px; font-weight: 500; }
.nf-note { color: var(--amber); font: 600 clamp(48px, 9cqw, 72px)/1 var(--font-ui); letter-spacing: -0.02em; }
.nf-where { color: var(--text); font-size: 20px; font-weight: 500; }
.nf-where b { color: var(--amber); font-weight: 700; }
.nf-note.is-hidden { color: var(--text-quiet); }
.nf-stage[data-state='idle'] .nf-prompt { align-items: center; }
.nf-stage[data-state='idle'] .nf-ask { font-size: 20px; }

.nf-feedback { min-height: 24px; margin: -4px 0 0; color: var(--text-muted); font-size: 16px; font-weight: 600; text-align: center; }
.nf-feedback[data-tone='good'] { color: var(--good); }
.nf-feedback[data-tone='bad'] { color: var(--danger); }

/* the neck: tap targets on every fret; the asked-about string picked out in amber */
.notes-page .fb-note { cursor: default; pointer-events: none; }
.fb-hit { fill: transparent; }
.fretboard.is-tappable .fb-hit { cursor: pointer; }
.fretboard.is-tappable .fb-hit:hover { fill: rgba(232, 220, 196, 0.1); }
.fb-string.is-hl { stroke: var(--amber); }
.fb-strname.is-hl { fill: var(--amber); font-weight: 700; }

/* spots between rounds, by how well you know them */
.fb-note.is-strong .fb-dot { fill: #142219; stroke: var(--good); }
.fb-note.is-strong text { fill: var(--good); }
.fb-note.is-weak .fb-dot { stroke: var(--amber); }
.fb-note.is-weak text { fill: var(--amber); }
.fb-note.is-new .fb-dot { stroke: rgba(232, 220, 196, 0.45); stroke-dasharray: 3 3; }
.fb-note.is-new text { fill: var(--text-muted); }
/* during a round: the right answer (green), your wrong tap (red ring), where it was (amber) */
.fb-note.is-answer .fb-dot { fill: var(--good); stroke: var(--good); }
.fb-note.is-answer text { fill: var(--ink); }
.fb-note.is-wrong .fb-dot { fill: #2a1513; stroke: var(--danger); stroke-width: 2.5; }
.fb-note.is-wrong text { fill: var(--danger); }

.nf-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; min-height: 20px; margin: -6px 0 0; color: var(--text-quiet); font-size: 13px; }
.nf-legend span { display: inline-flex; align-items: center; gap: 7px; }
.nf-legend-tip { color: var(--text-quiet); }
.nf-key { width: 10px; height: 10px; border: 1.5px solid var(--ivory); border-radius: 50%; }
.nf-key.is-strong { border-color: var(--good); background: #142219; }
.nf-key.is-weak { border-color: var(--amber); }
.nf-key.is-new { border: 1.5px dashed rgba(232, 220, 196, 0.45); }

/* Name it: the twelve notes laid out like a keyboard, sharps over the gaps between naturals */
.nf-pad { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 6px; }
.nf-pad[hidden] { display: none; }
.nf-key-btn {
  grid-column: span 2;
  grid-row: 2;
  height: 48px;
  padding: 0;
  border: 1px solid var(--on-stage-line);
  border-radius: var(--radius-control);
  background: var(--on-stage);
  color: var(--text);
  font-size: 18px;
  font-weight: 600;
  transition: background-color var(--ease), border-color var(--ease);
}
.nf-key-btn.is-sharp { grid-row: 1; height: 40px; color: var(--text-muted); font-size: 14px; }
.nf-key-btn[data-pc='1'] { grid-column: 2 / span 2; }
.nf-key-btn[data-pc='3'] { grid-column: 4 / span 2; }
.nf-key-btn[data-pc='6'] { grid-column: 8 / span 2; }
.nf-key-btn[data-pc='8'] { grid-column: 10 / span 2; }
.nf-key-btn[data-pc='10'] { grid-column: 12 / span 2; }
.nf-key-btn:hover:not(:disabled) { border-color: rgba(232, 220, 196, 0.3); background: rgba(232, 220, 196, 0.06); }
.nf-key-btn:disabled { opacity: 0.5; cursor: default; }
.nf-key-btn.is-right { border-color: var(--good); background: var(--good-tint); color: var(--good); opacity: 1; }
.nf-key-btn.is-wrong { border-color: var(--danger); background: rgba(238, 131, 121, 0.12); color: var(--danger); opacity: 1; }


/* settings */
#reset-btn.confirming { color: var(--danger); }

/* exercises, then your neck */
.nf-progress { padding: 14px 20px 20px; border-top: 1px solid var(--divider); }
.nf-progress-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.nf-progress-head .nf-sub { margin: 0; }
.nf-progress-empty { margin: 0; color: var(--text-muted); font-size: 14px; }
.nf-strings { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.nf-string-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; }
.nf-string-row b { font-size: 15px; font-weight: 700; }
.nf-string-row small { grid-column: 2 / -1; color: var(--text-quiet); font-size: 12px; }
.nf-string-num { color: var(--text-muted); font-size: 13px; font-weight: 600; white-space: nowrap; }
.nf-bar { display: block; height: 6px; overflow: hidden; border-radius: 3px; background: rgba(232, 220, 196, 0.1); }
.nf-bar i { display: block; height: 100%; background: var(--denim); transform-origin: left; }
.nf-sub { margin: 22px 0 8px; color: var(--text-muted); font-size: 14px; font-weight: 600; }
.nf-rounds { display: grid; margin: 0; padding: 0; list-style: none; }
.nf-round { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--divider); font-size: 14px; font-weight: 600; }
.nf-round > span { display: grid; }
.nf-round small { color: var(--text-quiet); font-size: 12px; font-weight: 500; }
.nf-round-score { justify-items: end; color: var(--text-muted); }
.nf-round-score b { color: var(--text); font-size: 16px; }

@media (max-width: 560px) {
  .nf-ask { font-size: 16px; }
  .nf-where { font-size: 17px; }
  .nf-key-btn { height: 44px; font-size: 16px; }
  .nf-key-btn.is-sharp { font-size: 11px; }
}