/* Keep the studio menu readable and compact before practice. */
.studio-navigation-toggle,.practice-result-toolbar{display:none}
.reading-mode-switch{display:flex;flex-direction:row;flex-wrap:wrap;gap:6px;margin:0 0 18px}
.reading-mode-switch button{min-height:44px;padding:10px 17px;border:1px solid var(--line);border-radius:7px;background:var(--card);color:var(--accent);font-size:12px}
.reading-mode-switch button.selected{background:#deecf5;border-color:#83abc5;color:var(--ink)}
.ear-topic-controls{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 14px;color:var(--muted);font-size:12px}
.ear-topic-controls button{min-height:44px}
.starter-listening .page-heading{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.starter-listening .practice-help,.starter-listening .rotate-hint{display:none}
.starter-listening .ear-center{padding-top:20px;padding-bottom:20px}
[data-practice-result]{scroll-margin-top:64px;outline:none}

@media(max-width:540px){
 .sidebar{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0 10px;padding:12px 18px}
 .sidebar .brand{font-size:27px;gap:10px;min-width:0}
 .sidebar .brand-mark{width:36px;height:36px;flex-shrink:0}
 .sidebar .brand small{display:none}
 .studio-navigation-toggle{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-width:78px;min-height:44px;padding:9px 12px;background:#ffffff0a;border:1px solid #7897ac88;border-radius:7px;color:#e4f0f8;font-size:12px}
 .studio-navigation-toggle[aria-expanded="true"] span{transform:rotate(180deg)}
 .sidebar #nav{display:none;grid-column:1/-1;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:10px;padding-bottom:0}
 .studio-navigation-open .sidebar #nav{display:grid}
 .sidebar #nav .nav-item{min-width:0;max-width:100%;min-height:44px;padding:8px 4px;gap:0;font-size:11px;line-height:1.35;white-space:normal;overflow:visible;text-overflow:clip}
 .sidebar #nav .nav-item span{min-width:0;max-width:100%;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
 .sidebar #nav .nav-item svg{display:none}
 .topbar{margin:0 18px;min-height:60px;height:auto;padding:8px 0}
 .topbar-actions{width:100%;justify-content:space-between;gap:10px}
 .topbar .topbar-help{display:none}
 .topbar .icon-button{width:44px;height:44px}
 main{padding-top:22px}
 main[data-view="today"]>.page-heading{margin-bottom:19px}
 main[data-view="today"]>.page-heading h1{font-size:30px;line-height:1.1;letter-spacing:-.8px}
 main[data-view="today"]>.page-heading p{font-size:12px;margin-top:10px}
 main[data-view="today"]>.page-heading .eyebrow{margin-bottom:9px;font-size:8px;letter-spacing:1.4px}
 main[data-view="today"]>.studio-maker-note{margin-bottom:18px}
 .welcome-card{padding:20px;gap:20px}
 .welcome-copy h2{font-size:27px;margin:9px 0}
 .welcome-copy>p{font-size:13px;line-height:1.65}
 .welcome-copy .welcome-actions{margin-top:15px}
 .welcome-card .eyebrow{margin-bottom:8px}
 .reading-mode-switch button{flex:1}
 main[data-view="own-music"]>.reading-path-shortcut{display:flex;flex-direction:row;justify-content:space-between;gap:8px;margin-bottom:14px}
 main[data-view="own-music"]>.reading-path-shortcut button{width:auto;flex:0 1 auto;min-height:44px}
 .ear-topic-controls{align-items:center;font-size:11px;gap:8px;margin-bottom:8px}
 .ear-topic-controls .secondary{padding:8px 10px;font-size:11px}
}

/* Portrait exercises use the same small toolbar as landscape exercises. */
@media(max-width:600px){
 .phone-practice .sidebar,.phone-practice .topbar{display:none}
 .phone-practice main{padding:10px 14px 18px}
 .phone-practice .practice-toolbar{margin-top:0}
 .phone-practice .ear-topic-picker{margin-top:0}
 .phone-practice .keyboard-area{overflow-x:auto}
 .phone-practice.starter-listening .ear-center{display:grid;grid-template-columns:60px minmax(0,1fr);gap:4px 14px;text-align:left;align-items:center;padding:14px}
 .phone-practice.starter-listening .listen-button{grid-row:1/4;width:60px;height:60px;margin:0}
 .phone-practice.starter-listening .ear-center h2{font-size:24px;margin:0}
 .phone-practice.starter-listening .ear-center>.quiet-button{justify-self:start;min-height:44px}
}

@media(orientation:landscape) and (max-height:600px){
 .phone-practice .reading-mode-switch{display:none}
 .phone-practice.practice-options-open .reading-mode-switch{display:flex;margin:6px 0}
 .phone-practice .reading-mode-switch button{min-height:44px}
 .phone-practice .sight-room>.sight-link{min-height:44px;display:inline-flex;align-items:center}
 .phone-practice.starter-listening .ear-topic-controls{display:none}
 .phone-practice.starter-listening.practice-options-open .ear-topic-controls{display:flex}
 .phone-practice.starter-listening .ear-center{padding-top:10px;padding-bottom:10px}
}

/* Completion keeps its own compact layout; fullscreen can still exit normally. */
.practice-results .sidebar,.practice-results .topbar,.practice-results .footer,
.practice-results .studio-release-note,.practice-results .studio-maker-intro,.practice-results .studio-about{display:none}
.practice-results .workspace{margin:0;min-height:100dvh}
.practice-results main{max-width:960px;padding:8px max(14px,env(safe-area-inset-right)) 18px max(14px,env(safe-area-inset-left))}
.practice-results .practice-result-toolbar{display:flex;align-items:center;gap:12px;min-height:48px;margin-bottom:8px}
.practice-result-toolbar strong{margin-right:auto;font-size:13px;font-weight:500}
.practice-result-toolbar button{min-height:44px;padding:8px 12px;white-space:nowrap}
.practice-results .page-heading{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.practice-results .reading-path-shortcut,.practice-results .own-heading,.practice-results .sight-heading{display:none}
.practice-results .completion{padding:20px 18px;margin:0 0 16px}
.practice-results .completion .seal{display:none}
.practice-results .completion h2{font-size:32px;margin:0 0 12px}
.practice-results .completion p{font-size:12px;line-height:1.65}
.practice-results .completion-actions{margin-top:16px}
.practice-results .completion-actions button{min-height:44px}
.practice-results .own-music,.practice-results .sight-room{padding:14px;border-radius:10px}
.practice-results .own-piece{margin:0 0 8px}
.practice-results .own-piece h3{font-size:18px}
.practice-results .own-result,.practice-results .sight-result{margin:8px 0 12px;gap:18px}
.practice-results .own-result>strong,.practice-results .sight-score{font-size:44px}
.practice-results .own-result h3,.practice-results .sight-result h3{font-size:22px}
.practice-results .own-result p,.practice-results .sight-result p{font-size:12px;line-height:1.6}
.practice-results .own-actions,.practice-results .sight-actions{margin:12px 0;gap:9px}
.practice-results .own-actions button,.practice-results .sight-actions button{min-height:44px}
.practice-results .staging-banner{padding:2px 12px;font-size:9px}
.practice-results .staging-banner span,.practice-results .staging-banner a{display:none}
@media(orientation:landscape) and (max-height:600px){
 .practice-results main{max-width:none;padding-top:4px}
 .practice-results .practice-result-toolbar{margin-bottom:4px}
 .practice-results .completion{padding:14px 18px}
 .practice-results .own-staff-scroll svg,.practice-results .sight-staff-scroll svg{height:95px;width:auto}
 .practice-results .own-private{margin-top:12px;padding-top:10px}
}

.guest-result-panel h2{margin-bottom:12px}
.guest-result-panel p+p{margin-top:12px}
.guest-result-panel .completion-actions{margin-top:18px}