/* Clear destinations, readable groups, and room for the primary action. */
.mobile-bottom-nav { display:none; }
.home-subjects { margin-top:30px; }
.home-subjects > .section-head { align-items:center; gap:12px; margin-bottom:14px; }
.home-subjects h2 { font-size:1.15rem; line-height:1.4; }
.home-subjects > .section-head .textlink { font-size:.8rem; white-space:nowrap; min-height:44px; display:inline-flex; align-items:center; }
.home-subject-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.home-subject { --subject-accent:var(--brand-secondary); display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:14px; padding:22px 18px; border:1px solid var(--line); border-radius:16px; color:var(--text); background:var(--panel); text-decoration:none; }
.home-subject-music { --subject-accent:var(--brand-primary); }
.home-subject-language { --subject-accent:#bdc9ec; }
.home-subject-icon { display:grid; place-items:center; width:44px; height:44px; border-radius:13px; color:var(--subject-accent); background:color-mix(in srgb,var(--subject-accent) 12%,var(--panel)); }
.home-subject-icon .icon { width:25px; height:25px; }
.home-subject strong { display:block; font-size:1rem; }
.home-subject small { display:block; margin-top:5px; color:var(--muted); font-size:.77rem; line-height:1.6; }
.home-subject > .icon { width:15px; color:var(--subject-accent); }
.home-subject:hover { border-color:var(--subject-accent); background:color-mix(in srgb,var(--subject-accent) 4%,var(--panel)); }
.home-subject:focus-visible,.mobile-bottom-nav a:focus-visible { outline:3px solid var(--brand-primary); outline-offset:3px; }
.home-next { background:linear-gradient(125deg,color-mix(in srgb,var(--brand-secondary) 13%,var(--panel)),var(--panel)); }
.home-next .btn { min-height:50px; padding-inline:24px; }
.ux-disclosure { margin-top:18px; border:1px solid var(--line); border-radius:14px; background:var(--panel); }
.ux-disclosure > summary { cursor:pointer; padding:17px 20px; color:var(--text); font-size:.88rem; line-height:1.6; font-weight:600; }
.ux-disclosure > summary::marker { color:var(--brand-secondary); }
.ux-disclosure > summary:focus-visible,.context-more > summary:focus-visible { outline:3px solid var(--brand-primary); outline-offset:-3px; border-radius:12px; }
.ux-disclosure-body,.ux-disclosure > .home-explore-links { padding:0 20px 20px; }
.start-page .start-explore > summary { padding:17px 20px; }
.ux-disclosure > .home-explore-links { margin-top:0; }
.progress-history > .panel { margin:0; border:0; padding-top:0; }
#main[data-page="progress"] > .stats { margin-bottom:26px; }
#main[data-page="progress"] .account-teaser { margin-top:24px; }
.progress-music .rhythm-progress { margin-bottom:0; }
.context-more { min-width:0; }
.context-more > summary { cursor:pointer; display:list-item; padding:10px 15px; color:var(--muted); font-size:.83rem; line-height:1.5; border:1px solid var(--line); border-radius:10px; }
.context-more[open] { flex-basis:100%; }
.context-more[open] > summary { width:max-content; max-width:100%; color:var(--text); }
.context-more > div { display:flex; flex-wrap:wrap; gap:5px; padding-top:8px; }
[data-browse-window] > [hidden] { display:none !important; }
.browse-more { grid-column:1/-1; display:grid; justify-items:center; gap:10px; padding:18px 0 8px; }
.browse-more p { margin:0; color:var(--muted); font-size:.78rem; }
.browse-more .btn { min-width:190px; min-height:46px; }
.voice-card-grid:has(> :only-child) { grid-template-columns:minmax(0,460px); justify-content:center; }
#voice-preview .voice-active-badge { display:none; }
#voice-preview .voice-card-top .voice-avatar { display:none; }
#voice-preview .voice-pace { line-height:1.6; }
@media (max-width:1150px) {
 .home-subject-grid { grid-template-columns:1fr; gap:10px; }
 .home-subject { min-height:88px; padding:16px 18px; }
}
@media (max-width:960px) {
 .workspace { padding-bottom:calc(92px + env(safe-area-inset-bottom,0px)); }
 .mobile-bottom-nav:not(:empty) { position:fixed; z-index:60; left:12px; right:12px; bottom:calc(8px + env(safe-area-inset-bottom,0px)); display:flex; align-items:stretch; width:auto; max-width:620px; margin:0 auto; padding:6px; border:1px solid color-mix(in srgb,var(--brand-secondary) 25%,var(--line)); border-radius:20px; background:var(--panel); box-shadow:0 8px 30px #0005; }
 .mobile-bottom-nav a { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; min-height:58px; min-width:0; padding:7px 3px; border-radius:14px; text-decoration:none; color:var(--muted); font-size:.64rem; font-weight:550; line-height:1.35; }
 .mobile-bottom-nav .icon { width:21px; height:21px; }
 .mobile-bottom-nav a > span { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
 .mobile-bottom-nav a.active { color:var(--brand-primary); background:color-mix(in srgb,var(--brand-primary) 10%,var(--panel)); }
 .nav-is-open .mobile-bottom-nav { visibility:hidden; }
 .context-nav { gap:5px; }
 .context-nav > a { flex-shrink:0; }
 #main { scroll-margin-bottom:100px; }
}
@media (max-width:640px) {
 .home-subjects { margin-top:25px; }
 .home-subjects > .section-head { align-items:flex-start; flex-direction:column; gap:0; }
 .home-subjects > .section-head .textlink { min-height:32px; }
 .home-subjects h2 { font-size:1.07rem; }
 .home-subject small { font-size:.76rem; }
 .home-next .btn { width:100%; justify-content:center; }
 .home-next-actions { align-items:stretch; }
 .home-next-actions .textlink { font-size:.8rem; }
 .home-welcome h1 { font-size:2.05rem; }
 #main[data-page="progress"] .stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
 #main[data-page="progress"] .stat { min-width:0; display:block; padding:17px 10px; }
 #main[data-page="progress"] .stat-icon { display:none; }
 #main[data-page="progress"] .stat strong { font-size:1.3rem; }
 #main[data-page="progress"] .stat span { font-size:.66rem; line-height:1.5; margin-top:6px; }
 #main[data-page="progress"] .course-grid { gap:10px; }
 #main[data-page="progress"] .course-card { display:grid; grid-template-columns:55px minmax(0,1fr); }
 #main[data-page="progress"] .course-art { height:auto; min-height:110px; padding:14px; }
 #main[data-page="progress"] .course-art > .icon { width:26px; height:26px; }
 #main[data-page="progress"] .course-art .big-number { display:none; }
 #main[data-page="progress"] .course-body { padding:15px; }
 #main[data-page="progress"] .course-body > p { display:none; }
 #main[data-page="progress"] .course-body h3 { margin:5px 0 10px; font-size:.95rem; }
 #main[data-page="progress"] .course-footer { margin-top:10px; font-size:.65rem; }
 .ux-disclosure > summary { padding:16px; font-size:.82rem; }
 .ux-disclosure-body,.ux-disclosure > .home-explore-links { padding:0 16px 16px; }
 .context-more > summary { min-height:44px; padding:11px; font-size:.75rem; }
}

.library-search { display:flex; align-items:center; gap:14px; min-height:62px; padding:16px 18px; margin:0 0 26px; border:1px solid var(--line); border-radius:14px; background:var(--panel); color:var(--muted); text-decoration:none; font-size:.88rem; }
.library-search svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.7; flex:none; }
.library-search > :last-child { margin-left:auto; color:var(--brand-secondary); }
.library-search:hover { color:var(--text); border-color:var(--brand-secondary); }
.library-search:focus-visible { outline:3px solid var(--brand-primary); outline-offset:3px; }

/* Each screen size has one primary navigation. The desktop sidebar is not a mobile drawer. */
@media(max-width:960px){
 #sidebar { display:none !important; }
}