/* The shared music-workbook shell. Music and tools retain their own surfaces. */
body {
    --text-main: #262c29;
    --text-soft: #51584f;
    --muted: #61675e;
    --accent: #686e50;
    --action-dark: #b34732;
    --line-dark: #d7d8ca;
    --radius-control: 6px;
    --radius-panel: 8px;
}
body[data-app-surface] { background: #f5f3eb; }
.navbar { background: #f5f3ebf5; backdrop-filter: blur(12px); }
.nav-logo { font-size: .95rem; letter-spacing: -.025em; }
.brand-mark { border: 0; border-radius: 0; color: var(--text-main); }
.nav-links a { font-weight: 600; }
.nav-links a.active, .nav-links a:hover { background: #e8e9dd; }
.nav-btn.primary { border-color: var(--line-dark); background: transparent; color: var(--text-main); }
.nav-btn.primary:hover { background: #e8e9dd; }
.btn { font-weight: 700; min-height: 44px; }
.btn-secondary { background: transparent; }
.btn-ghost:hover, .btn-secondary:hover { background: #e8e9dd; }
.panel-dark, .panel-floating, .cockpit-surface { background: #faf9f3; box-shadow: none; }
.spotlight-panel::before, .border-glow::before { display: none; }
.border-glow { box-shadow: none; border-color: var(--line-dark); }
.form-input, .form-field input, .form-field select { background: #fffdf8; border-color: #c6c9bb; }
.form-field label { font-weight: 600; }
.form-error, .status-error { color: #9d3327; }
.empty-state { background: #eeeee4; border: 0; border-radius: 4px; }
.empty-state p:last-child { margin-bottom: 0; }
.command-menu, .user-menu { background: #faf9f3; box-shadow: 0 12px 32px #262c291c; border-color: var(--line-dark); }
.user-menu::before { background: #faf9f3; border-color: var(--line-dark); }
.user-menu a:hover, .user-menu button:hover, .user-menu a:focus-visible, .user-menu button:focus-visible { background: #e8e9dd; border-color: #b8bda7; }
.user-menu .danger { color: #9d3327; }
.bottom-nav { background: #f5f3ebfa; border-color: var(--line-dark); box-shadow: 0 -3px 20px #262c290b; }
.bottom-nav a.active { color: #9f3d2b; background: #ece5d8; }
.page-title { font-size: clamp(2.3rem, 4vw, 3.6rem); letter-spacing: -.025em; }
.page-copy { font-size: 1rem; }
.eyebrow { font-size: .68rem; letter-spacing: .12em; font-weight: 700; }
.app-page { padding-top: 112px; }
.text-link { display: inline-flex; align-items: center; gap: 16px; padding-block: 12px; font-weight: 700; font-size: .88rem; }
.text-link:hover { text-decoration: underline; text-underline-offset: 4px; }
[hidden] { display: none !important; }
[data-reveal] { opacity: 1; transform: none; }
@media (max-width: 760px) { .app-page { padding-top: 96px; } .page-title { font-size: 2.4rem; } }
.recommended-practice { background: #ebeee1; }
.auth-card-header h1, .profile-card-header h2 { font-family: var(--font-display); font-weight: 400; }
.auth-card { box-shadow: 0 8px 28px #26312408; }
.profile-page { color-scheme: light; }
.profile-page::before { display: none; }
.profile-card, .profile-record-card { background: #faf9f3; }
.profile-field .form-input { background: #fffdf8; border-color: #c6c9bb; }
.profile-summary-list, .profile-avatar { background: #e8ebde; box-shadow: none; }
.profile-status.success { color: #376740; }
.profile-status.error { color: #9d3327; }
.aural-hero { min-height: 0; grid-template-columns: 1fr; padding: 0 0 24px; border: 0; border-bottom: 1px solid var(--line-dark); border-radius: 0; background: transparent; box-shadow: none; }
.aural-hero::after, .aural-hero-mark { display: none; }
.aural-hero .page-title { font-size: clamp(2.3rem, 4vw, 3.6rem); }
.aural-back-link { margin-bottom: 12px; }
.aural-grade-panel { padding: 0 0 24px; border: 0; border-bottom: 1px solid var(--line-dark); border-radius: 0; background: transparent; }
.aural-grade-selector button { min-height: 60px; }
.aural-grade-selector button[aria-pressed="true"] { color: #fffdf7; box-shadow: none; }
.aural-mode-card, .aural-setup { background: #faf9f3; box-shadow: none; }
.aural-mode-card:hover, .aural-mode-card[aria-pressed="true"] { border-color: #818c68; box-shadow: none; transform: none; }
.aural-mode-number { color: #62685d; }
.aural-section-heading h2, .aural-setup-heading h2 { font-family: var(--font-display); font-weight: 400; }
.aural-stage-copy, .aural-task-card, .aural-coach-card, .aural-note-sequence, .aural-tap-pad, .aural-written-response, .aural-audio-transport, .aural-stage-tabs { background: #eeeee4; }
.aural-funding { padding-top: 20px; border-top: 1px solid var(--line-dark); font-size: .8rem; }
.aural-funding select { width: 100%; min-height: 42px; margin-block: 8px; background: #fffdf8; border: 1px solid #c6c9bb; border-radius: 6px; color: var(--text-main); padding: 8px; }
.aural-exercise-status[data-state="error"] { color: #9d3327; }
.aural-exercise-status[data-state="complete"] { color: #376740; }
.nav-links.mobile-open { background: #faf9f3; box-shadow: 0 12px 32px #262c291c; }
.profile-danger-card .eyebrow, .profile-section-icon--danger, .profile-delete-btn, .profile-delete-btn:hover, .profile-delete-btn:focus-visible { color: #9d3327; }
.profile-page > section[aria-labelledby="account-ai-title"] { padding: 28px; margin-top: 28px; }
#personal-key-form label, #personal-key-form input { display: block; width: 100%; }
#personal-key-form input { min-height: 44px; margin-block: 8px; padding: 10px; background: #fffdf8; color: #262c29; border: 1px solid #c6c9bb; border-radius: 6px; }
#personal-key-form p, #personal-key-status, #account-usage { font-size: .85rem; }
.aural-exercise-status[data-state="playing"], .aural-exercise-status[data-state="recording"] { color: #9d3327; }
@media(max-width: 900px) {
 .aural-setup-layout { display: contents; }
 .aural-coach-card { order: 1; }
}
/* Clavendo: warm paper, burgundy rules and an editorial music layout. */
body { --font-display: Georgia, 'Times New Roman', serif; --text-main:#11151c; --text-soft:#243957; --muted:#5d6268; --accent:#9e1238; --action-dark:#a20c35; --line-dark:#d3cec7; --radius-control:2px; --radius-panel:2px; }
body[data-app-surface] { background:#faf8f2; color:var(--text-main); }
h1,h2,h3 { font-family:var(--font-display); font-weight:400; }
.navbar { background:#faf8f2f5; border-bottom:0; }
.navbar .container { border-bottom:1px solid var(--action-dark); grid-template-columns:1fr auto 1fr; min-height:78px; }
.nav-logo { grid-column:2; grid-row:1; justify-self:center; font:400 2.1rem var(--font-display); color:var(--text-main); }
.nav-links { grid-column:1; grid-row:1; justify-self:start; gap:16px; }
.nav-links a,.nav-btn { font:400 1.05rem var(--font-display); color:var(--text-main); border-radius:0; min-height:44px; }
.nav-links a.active,.nav-links a:hover { background:transparent; border-bottom-color:var(--action-dark); }
.nav-actions { grid-column:3; grid-row:1; }
.nav-btn.primary { border:0; }
.btn-primary:hover { background:#7e0929; }
.btn-secondary:hover,.btn-ghost:hover { background:#f0e7e5; }
.panel-dark,.panel-floating,.cockpit-surface,.aural-mode-card,.aural-setup { background:transparent; box-shadow:none; }
/* Floating studio tools need their own opaque surface over the score. */
.studio-drawer.panel-floating {
    z-index: 1200;
    background: #fffdf8;
    color: var(--text-main);
    border-color: var(--line-dark);
    box-shadow: 0 12px 40px #11151c26;
    color-scheme: light;
    overscroll-behavior: contain;
}
.studio-drawer :is(.drawer-section, .saved-take-card, .coach-empty-state, .coach-panel, .coach-next-card, .aif-card, .coach-tabs, .file-loaded, .connection-item, .volume-control, .audio-setting, .note-display, .take-metrics span, .coach-take-summary div, .mistake-summary-grid div, .pm-result-stat, .mistake-row, .coach-action-list button) {
    border-color: var(--line-dark);
    background: #faf8f2;
}
.studio-drawer :is(h2, h3, .take-metrics strong, .coach-take-summary strong, .mistake-summary-grid strong, .pm-result-value, .mistake-row, .coach-action-list button) { color: var(--text-main); }
.studio-drawer :is(.drawer-section > h3, .note-display .label, .pedal-hint, .pedal-btn kbd, .take-metrics span, .coach-take-summary div, .mistake-summary-grid div, .pm-result-stat, .aif-auth-state p, .aif-error-state p) { color: var(--muted); }
.studio-drawer :is(.upload-zone, .pedal-btn, .setting-input, select) {
    background: #fffdf8;
    color: var(--text-main);
    border-color: var(--line-dark);
}
.studio-drawer select { max-width: 100%; min-height: 36px; padding: 6px; border: 1px solid var(--line-dark); border-radius: var(--radius-control); }
.studio-drawer .coach-tab { color: var(--text-soft); }
.studio-drawer :is(.coach-tab.active, .pedal-btn.active) { background: #f1e5e8; color: #910b30; border-color: #a20c35; }
.studio-drawer :is(.connection-item:hover, .upload-zone:hover, .mistake-row:hover, .coach-action-list button:hover) { background: #f0e7e5; }
.studio-drawer :is(.aif-state-kicker, .eyebrow) { color: #910b30; }
.studio-drawer :is(.take-status-pill, .mistake-type) { color: #28603f; background: #e5eee6; }
.studio-drawer :is(.take-status-pill.recording, .take-status-pill.empty, .mistake-type.missed, .mistake-type.extra) { color: #962d26; background: #f8e7e4; }
.studio-drawer :focus-visible { outline-color: #a20c35; }
.studio-drawer :is(.volume-slider, .setting-slider) { min-width: 0; width: 100%; accent-color: #a20c35; }
.studio-drawer .audio-setting { display: grid; grid-template-columns: minmax(0, 1fr) 64px; }
.studio-drawer .audio-setting label { grid-column: 1 / -1; }
.studio-drawer .setting-input { width: 100%; padding: 4px 6px; }
.studio-drawer .file-loaded .details { min-width: 0; overflow-wrap: anywhere; }
.studio-drawer .pedal-controls { flex-wrap: wrap; }
.studio-drawer .pedal-hint { flex-basis: 100%; }
.studio-drawer .coach-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.studio-drawer .coach-tab { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 760px) {
    #setup-drawer, #coach-drawer { right: 0; }
    .studio-drawer.panel-floating { padding-bottom: max(18px, env(safe-area-inset-bottom)); }
}
.score-workspace:fullscreen, .score-workspace.score-focus-fullscreen { background: #fffdf8; }
.progress-fill { background:var(--action-dark); }
.bottom-nav a.active { background:#f1e5e8; color:#910b30; }
:focus-visible { outline:2px solid #a20c35; outline-offset:4px; }
@media(max-width:760px) {
 .navbar .container { grid-template-columns:1fr auto; gap:8px; min-height:72px; }
 .nav-logo { grid-column:1; justify-self:start; font-size:1.6rem; }
 .nav-actions { grid-column:2; gap:0; } .nav-actions .nav-btn { font-size:.9rem; padding-inline:8px; }
 .navbar .nav-links { display:none; } .mobile-toggle { display:none; }
 .bottom-nav { display:grid; } .page-container { width:calc(100% - 32px); }
}
.studio-app { padding-top:78px; background:#faf8f2; }
.studio-topbar { background:#faf8f2; border-color:var(--line-dark); }
.studio-score-stage,.score-workspace,.sheet-display,.studio-state-card { background:#fffdf8; }
#manual-empty-state { border:1px dashed #a20c35; border-radius:0; max-width:760px; margin:36px auto; padding:48px 24px; }
#manual-empty-state h2 { font-size:2.6rem; }
.studio-mode-label { color:#9e1238; }
.studio-app .studio-title-group h1 { font-family:var(--font-display); }
.aural-answer-choice { border-radius:2px; }
.aural-answer-choice[aria-pressed="true"] { border-color:#a20c35; background:#f4e8eb; }
@media(max-width:760px) { .studio-app { padding-top:72px; } #manual-empty-state { margin:16px 4px; padding:28px 12px; } }
.btn-primary { font:400 1.1rem var(--font-display); }
@media(max-width:760px) { .navbar .nav-actions { display:flex; } }
#visualizer-empty-state > span { color:var(--muted); }
body[data-app-surface="studio"] .navbar {display:block;}
.studio-transport {background:#faf8f2;color:var(--text-soft);border-top:1px solid var(--line-dark);}
.studio-transport .control-btn,.studio-transport .play-btn {background:transparent;border-color:var(--line-dark);color:var(--text-soft);border-radius:2px;}
.pm-progress-time,.transport-measure,.pm-tempo-unit {color:var(--text-soft);}
.transport-record-action {background:#a20c35;border-color:#a20c35;border-radius:2px;}
#manual-empty-state > svg {color:#a20c35;}
@media(max-width:760px) { .studio-topbar {top:72px;} }
.studio-transport #tempo-input {color:var(--text-soft);background:transparent;}
#manual-empty-state.dragover {background:#f5e5e9;border-color:#7e0929;}
#manual-empty-state {width:calc(100% - 40px);max-width:1100px;display:grid;grid-template-columns:1.5fr 1fr;gap:28px;padding:0;border:0;text-align:left;}
.own-import-copy {text-align:center;padding:34px 22px;border:1px dashed #a20c35;}
.own-import-copy > svg {width:44px;height:44px;color:#a20c35;stroke-width:1.3;}
.own-import-copy .own-file-types {font-size:.78rem;margin-top:18px;}
#manual-empty-state .own-score-guide {border-left:1px solid var(--line-dark);padding:12px 0 0 28px;}
#manual-empty-state .own-score-guide h2 {font-size:1.8rem;}
.own-score-guide ol {padding-left:20px;color:var(--text-soft);font-size:.9rem;}
.own-score-guide li {margin:12px 0;}
#manual-empty-state .own-score-guide p {font-size:.8rem;}
@media(max-width:760px) { #manual-empty-state {position:relative;inset:auto;width:100%;grid-template-columns:1fr;align-content:start;gap:20px;margin:16px 0;padding:0;} #manual-empty-state h2 {font-size:2rem;line-height:1.15;} #manual-empty-state .own-score-guide {border-left:0;border-top:1px solid var(--line-dark);padding:18px 12px;} }