/* ---- Study mode: just the neck, large, with a floating control bar ---- */
.study-bar { display: none; }
body.study .app-header, body.study .pop, body.study h1, body.study p.subtitle, body.study .controls-sidebar,
body.study .legend-box, body.study .view-bar { display: none !important; }
body.study .app-layout { max-width: none; }
body.study .main-content { width: 100%; }
body.study .fretboard-wrapper { display: flex; justify-content: center; }
body.study .now-playing { font-size: 22px; margin-top: 10px; }
body.study .study-bar {
    display: flex; align-items: center; gap: 8px;
    position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
    background: var(--surface-panel); border: 1px solid var(--line-strong); border-left: 4px solid var(--action);
    padding: 8px 12px; z-index: 100; box-shadow: var(--shadow-float);
    flex-wrap: wrap; justify-content: center; width: max-content; max-width: calc(100vw - 20px); white-space: nowrap;
}
.study-bar button { padding: 8px 12px; font-size: 13px; }
.study-bar #study-bpm { font-family: 'Oswald', sans-serif; font-size: 18px; color: var(--action); min-width: 80px; }
.study-bar .study-play { background: var(--action); color: var(--on-action); border-color: var(--action); min-width: 90px; }
.study-bar .study-exit { color: var(--destructive); }

/* ---- Ear training ---- */
.quiz-panel { display: none; flex-direction: column; align-items: center; gap: 8px; margin-top: 6px; }
body.quiz #quiz-panel { display: flex; }
body.quiz .view-bar, body.build .view-bar { display: none; }
.build-panel { display: none; }
body.build .build-panel { display: flex; }
body.build .board-hint { display: none; }
/* during the exercise the controls column is paused: the app sets the challenge */
body.build .controls-sidebar { pointer-events: none; opacity: 0.35; filter: grayscale(0.6); }
.build-progress { font-family: 'Oswald', sans-serif; color: var(--action); }
.quiz-text { font-family: 'Oswald', sans-serif; font-size: 18px; letter-spacing: 1px; color: var(--ink); min-height: 24px; }
.quiz-text.ok { color: var(--success); }
.quiz-text.bad { color: var(--danger); }
.quiz-buttons { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.quiz-buttons button { padding: 8px 14px; font-size: 12px; }
.quiz-buttons .quiz-exit { color: var(--destructive); }
.quiz-score { font-size: 12px; color: var(--control-ink); letter-spacing: 1px; }
.quiz-sub { font-size: 11px; color: var(--quiz-sub); letter-spacing: 0.5px; margin-top: -4px; }
/* during the quiz notes are unlabelled dots: you answer by ear */
/* no labels and no colours during the quiz: the colour would give the interval away */
body.quiz .note.visible:not(.quiz-reveal) {
    color: transparent !important; background: var(--quiz-dot) !important;
    border: 1px solid var(--quiz-dot-ring) !important; opacity: 0.9 !important; transform: scale(0.85) !important;
}
body.quiz .note[data-step]::after { display: none; }
.fret.quiz-hit-ok .note, .fret.quiz-hit-ok { box-shadow: inset 0 0 0 3px var(--success); }
.fret.quiz-hit-bad { box-shadow: inset 0 0 0 3px var(--danger); }
.note.quiz-reveal { outline: 3px solid var(--success); outline-offset: 2px; opacity: 1 !important; transform: scale(1.3) !important; }

/* ---- Find it ---- */
.findit-panel { display: none; }
body.findit .findit-panel { display: flex; }
body.findit .view-bar, body.findit .board-hint { display: none; }
/* the question is set by the app: controls pause, as in Build */
body.findit .controls-sidebar { pointer-events: none; opacity: 0.35; filter: grayscale(0.6); }
.build-size { width: auto; grid-template-columns: repeat(2, 1fr); margin: 2px 0; }
.build-size button { padding: 6px 12px; font-size: 11px; }