/* A quiet practice desk: warm brass accents, blue-grey surfaces, generous reading space. */
:root { --muted:#adb8c8; --lesson-paper:#19212b; --lesson-card:#151c24; --lesson-hover:#222e3c; --lesson-line:#384655; --lesson-brass:#edc587; }
.hub-tab { border:0;background:transparent;color:var(--muted);padding:12px 20px;font-weight:600;min-height:44px; }
.hub-tab.active { color:var(--lesson-brass);box-shadow:inset 0 -2px var(--lesson-brass); }
.learning-view { flex:1;min-height:0;overflow-y:auto;background:var(--lesson-paper);padding:24px clamp(18px,4vw,64px) 48px; }
.learning-top { display:flex;align-items:center;justify-content:space-between;color:var(--muted);border-bottom:1px solid var(--lesson-line);padding-bottom:16px;margin-bottom:32px; }
#learningBody { max-width:1000px;margin:auto;line-height:1.8; }
#learningBody h1 { font-size:clamp(26px,3vw,40px);font-weight:650;line-height:1.3;margin:18px 0; }
#learningBody h2 { font-size:20px;margin:22px 0 10px; }
#learningBody p { margin:12px 0;max-width:70ch; }
#learningBody .lead { color:#c2cddd;font-size:17px; }
.tuning-caption { color:var(--lesson-brass);font-size:13px; }
.course-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;margin:26px 0; }
.course-tile { color:var(--text);background:none;text-align:left;border:0;border-top:1px solid var(--lesson-line);padding:20px 4px;cursor:pointer;min-height:150px; }
.course-tile p,.course-tile span { color:var(--muted);line-height:1.7; }
.course-tile:hover { background:var(--lesson-hover); }
.legacy-course-links { margin:8px 0 24px;padding:14px 16px;border:1px solid var(--lesson-line);border-radius:10px;background:var(--lesson-card); }
.legacy-course-links summary { min-height:44px;display:flex;align-items:center;color:var(--muted);font-weight:600;cursor:pointer; }
.legacy-course-links summary:focus-visible { outline:3px solid var(--lesson-brass);outline-offset:3px; }
.legacy-course-links p { color:var(--muted); }
.legacy-course-actions { display:flex;flex-wrap:wrap;gap:10px; }
.legacy-course-actions button { min-height:44px; }
.task-list { margin:32px 0; }
.review-recommendation { display:flex;align-items:center;justify-content:space-between;gap:20px;margin:28px 0;padding:20px 22px;border:1px solid var(--lesson-line);border-left:3px solid var(--lesson-brass);border-radius:10px;background:var(--lesson-card); }
.review-recommendation h2 { margin:4px 0!important; }
.review-recommendation p { margin:6px 0!important; }
.review-kicker { color:var(--lesson-brass);font-size:12px;font-weight:700;letter-spacing:.08em; }
.review-recommendation .primary-btn { flex:none;min-height:44px; }
.task { display:grid;grid-template-columns:100px 1fr 80px;gap:18px;align-items:center;width:100%;text-align:left;border:0;border-top:1px solid var(--lesson-line);padding:22px 8px;background:transparent;color:var(--text); }
.task strong { font-size:21px;font-weight:600; }.task span{color:var(--lesson-brass)}
.lesson-steps { display:flex;gap:8px;flex-wrap:wrap;margin:24px 0; }
.lesson-steps button { background:transparent;color:var(--muted);border:1px solid var(--lesson-line);padding:10px 16px;border-radius:8px; }
.lesson-steps [aria-current="step"]{background:var(--lesson-brass);color:#19212b;border-color:var(--lesson-brass);}
#lessonStep { padding:20px 0;min-height:220px;font-size:16px; }
#lessonStep li { margin:10px 0 10px 24px; }
.lesson-footer { display:flex;justify-content:space-between;border-top:1px solid var(--lesson-line);padding-top:20px; }
.demo-string { display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:10px 0; }
.demo-string>span { min-width:70px; }.demo-string button { min-height:44px;min-width:40px; }
.lesson-example { display:inline-flex;flex-direction:column;width:220px;max-width:100%;margin:10px; }
.current-slot { outline:3px solid var(--lesson-brass);background:#423924!important; }
.rv-grid b { font-size:22px; }.rv-grid { grid-auto-columns:minmax(25px,1fr); }
.ce-tune { display:inline;overflow-wrap:anywhere; }.tv-bar{flex-wrap:wrap;gap:10px;}
button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible { outline:3px solid var(--lesson-brass);outline-offset:3px; }
button { touch-action:manipulation; } .cp-board select{min-height:44px} .cs-controls{flex-wrap:wrap}
#learningBody a{color:#a7c6ff;text-decoration:underline;}
@media(max-width:760px){.hub-tab{padding:10px 12px}.learning-view{padding:14px 16px 40px}.learning-top{margin-bottom:16px}.course-grid{grid-template-columns:1fr}.task{grid-template-columns:1fr;gap:5px;padding:18px 8px}.task span:last-child{display:none}.review-recommendation{align-items:stretch;flex-direction:column;padding:16px}.review-recommendation .primary-btn{width:100%}.ce-controls label{width:auto;flex:1 1 110px}.ce-controls select{min-width:0}.ce-body{padding:12px}.ce-tune{font-size:12px;flex-basis:100%}.ce-detail{min-height:0}.cs-stage{flex-wrap:wrap}.topbar .brand-sub{display:none}.lesson-steps button{padding:8px 10px}.demo-string{gap:5px}.demo-string>span{min-width:58px}
  /* Core practice controls stay reachable on touch screens (WCAG 2.5.8 target guidance). */
  .ce-view button,.ce-view select,.ce-view input[type="range"]{min-height:44px}
  .ce-view .tv-bar .ghost-btn.sm{min-width:44px;min-height:44px}
  .ce-view .rv-actions button{min-width:44px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.learning-active .sidebar { display:none; }
.learning-active #menuBtn { visibility:hidden; }

.cp-board {display:block;} .cp-board-actions {display:flex;gap:8px;flex-wrap:wrap;} #cpCollected {display:flex;flex-wrap:wrap;gap:16px;margin-top:16px;} #cpCollected svg {max-height:200px;}
@media(max-width:760px){.modern-practice #chordChallengeView .rv-actions{position:sticky;top:0;bottom:auto;z-index:5;padding:10px 0 max(8px,env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(25,33,43,.88),var(--lesson-paper) 28%);}}
.lesson-embedded-board { display:block; width:100%; height:320px; min-height:260px; margin:18px 0 10px; padding:0; }
.lesson-embedded-board #board { display:block; height:100%; }
.lesson-embedded-board + .board-scroll { display:block; margin-bottom:14px; }

.modern-practice .sidebar {display:none;} .modern-practice #menuBtn {visibility:hidden;}
@media(max-width:600px){.lesson-embedded-board{height:270px;min-height:230px}}