/* Architect/Lab v4 — single sidebar and a compact, scrollable lesson dropdown. */
.layout{grid-template-columns:252px minmax(0,1fr)}
.side{overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#3b526a transparent;z-index:3}
.side nav{display:flex;flex-direction:column;gap:5px;overflow:visible;margin-top:28px}
.side nav>button,.side .lesson-menu-row>[data-page="learn"]{width:100%;min-height:43px;border-radius:11px;text-align:left;padding:10px 12px;font-size:13px;white-space:normal;line-height:1.35}
.side nav>button:focus-visible,.side button:focus-visible{outline:2px solid #84e9d8;outline-offset:2px}
.side .lesson-menu-group{width:100%;min-width:0}
.side .lesson-menu-row{display:flex;align-items:center;gap:3px;border-radius:12px;min-width:0}
.side .lesson-menu-row>[data-page="learn"]{flex:1;min-width:0}
.side .lesson-nav-toggle{appearance:none;display:flex;align-items:center;gap:5px;justify-content:center;flex:none;background:#192e42;color:#a8d9d0;border:1px solid #35546b;padding:7px 8px;border-radius:9px;min-height:36px;min-width:54px;cursor:pointer}
.side .lesson-nav-toggle:hover,.side .lesson-menu-group.is-expanded .lesson-nav-toggle{border-color:#77cfbd;background:#214c52;color:white}
.side .lesson-nav-count{font-weight:850;font-size:12px;font-variant-numeric:tabular-nums}
.side .lesson-nav-chevron{font-size:18px;display:block;transform:translateY(-2px);transition:transform .16s ease}
.side .lesson-menu-group.is-expanded .lesson-nav-chevron{transform:translateY(-2px) rotate(180deg)}
.side .lesson-nav-dropdown{margin:5px 0 8px;border:1px solid #344d62;border-radius:13px;padding:7px;background:#0d1e30}
.side .lesson-nav-dropdown[hidden]{display:none!important}
.side .lesson-nav-hint{font-size:10px;color:#8eaabf;line-height:1.4;padding:5px 7px 8px;border-bottom:1px solid #244058;margin-bottom:7px}
.side .lesson-nav-list{max-height:294px;overflow-y:auto;overscroll-behavior:contain;padding-right:3px;scrollbar-width:thin;scrollbar-color:#4d7984 #12273a}
.side .lesson-nav-list::-webkit-scrollbar{width:6px}
.side .lesson-nav-list::-webkit-scrollbar-track{background:#12273a;border-radius:99px}
.side .lesson-nav-list::-webkit-scrollbar-thumb{background:#4d7984;border-radius:99px}
.side .sidebar-lesson{appearance:none;display:flex;align-items:center;gap:7px;width:100%;background:transparent;border:1px solid transparent;color:#bfd3e3;border-radius:9px;padding:9px 6px;text-align:left;cursor:pointer;margin-bottom:2px}
.side .sidebar-lesson:hover{background:#1d354b}
.side .sidebar-lesson-num{width:26px;height:27px;display:grid;place-items:center;flex:none;border-radius:7px;background:#263e51;color:#a6bdce;border:1px solid #3b5368;font-size:10px;font-weight:850;font-variant-numeric:tabular-nums}
.side .sidebar-lesson-copy{min-width:0;flex:1;display:block}
.side .sidebar-lesson-title{display:block;color:#e0edf7;font-size:11px;font-weight:760;line-height:1.38}
.side .sidebar-lesson-vi{display:block;color:#9ab9c9;font-size:10px;line-height:1.45;margin-top:3px}
.side .sidebar-lesson-state{font-size:13px;align-self:center;color:#7792a9;font-weight:900}
.side .sidebar-lesson.is-opened{background:#302b29;border-color:#6c5239}
.side .sidebar-lesson.is-opened .sidebar-lesson-num{background:#805b2d;color:#fff;border-color:#a77d43}
.side .sidebar-lesson.is-opened .sidebar-lesson-state{color:#e6b778}
.side .sidebar-lesson.is-done{background:#153c35;border-color:#376b60}
.side .sidebar-lesson.is-done .sidebar-lesson-num{background:#0d755c;color:#fff;border-color:#65c3a7}
.side .sidebar-lesson.is-done .sidebar-lesson-state{color:#79e7be}
.side .sidebar-lesson.is-selected{border-color:#85d9cd;box-shadow:inset 3px 0 #8aebd7;background:#22494f}
.side .sidebar-lesson.is-selected .sidebar-lesson-title{color:white}
.side .sidebar-lesson:focus-visible{outline:2px solid #a5f1e1;outline-offset:1px}
#learn .course-shell{display:block}
#learn .course-reader{width:100%;max-width:none}
#learn .course-intro{padding:17px 24px;margin:13px 0 15px;gap:14px;border-radius:14px}
#learn .course-intro h2{font-size:20px;margin:4px 0}
#learn .course-intro p{font-size:12px;line-height:1.5;margin:2px 0}
#learn .course-count{padding:9px 13px;border-radius:10px;font-size:10px}
#learn .course-count strong{font-size:22px}
#learn .journey-body{max-width:1070px;margin:auto}
#learn .course-reader .reader-header{padding:24px 30px 18px}
#learn .steps-overview{padding:15px 30px}
#learn .course-reader .reader-title{font-size:26px}
.side .sound-pref{margin:15px 1px 0;border-top:1px solid #2b4256;padding:15px 3px 3px}
.side .sound-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:9px;text-align:left;border-radius:11px;padding:10px 12px;background:#162e43;color:#d0e6eb;border:1px solid #355366;cursor:pointer}
.side .sound-toggle:hover{background:#23475a;border-color:#65b7ab}
.side .sound-toggle[aria-pressed="true"]{border-color:#4b9383;background:#1a423f}
.side .sound-icon{font-size:17px}
.side .sound-label{font-size:12px;line-height:1.45;flex:1;font-weight:750}
.side .sound-value{font-size:10px;color:#a2dcd0;font-weight:800}
.side .sound-help{font-size:10px;color:#8baabe;line-height:1.45;margin:7px 7px 0}
@media(max-width:750px){
 .layout{display:block}
 .side{height:auto;max-height:none;position:relative;padding:14px 17px;overflow:visible}
 .side nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin-top:13px;overflow:visible}
 .side nav>button{font-size:12px;padding:10px 9px}
 .side .lesson-menu-group{grid-column:1/-1}
 .side .lesson-nav-dropdown{margin:6px 0 4px}
 .side .lesson-nav-list{max-height:228px}
 .side .sound-pref{margin-top:7px;padding-top:9px}
 .side .sound-toggle{max-width:320px;padding:7px 10px}
 .side .sound-help{margin-left:1px}
 #learn .course-intro{padding:15px 17px}
 #learn .course-intro h2{font-size:18px}
 #learn .course-reader .reader-header{padding:20px 18px}
 #learn .steps-overview{padding:15px 17px}
}
@media(prefers-reduced-motion:reduce){.side .lesson-nav-chevron{transition:none}}