/* Shared navigation hierarchy for every learning page. */
.app-shell .grouped-sidebar{padding:20px 14px;background:#f8faf9}
.grouped-sidebar .brand{margin-bottom:18px}
.menu-group-title{display:flex;align-items:center;gap:7px;margin:0 10px 8px;font-size:11px;font-weight:800;letter-spacing:.2px;color:#61756c;line-height:1.5}
.menu-group-title:before{content:'';width:5px;height:5px;border-radius:50%;background:#4b9278}
.menu-group-play .menu-group-title:before{background:#c79335}.menu-group-family .menu-group-title:before{background:#8282b1}
.grouped-sidebar .menu-group+.menu-group{border-top:1px solid #e0e8e3;padding-top:16px;margin-top:16px}
.app-shell .grouped-sidebar .nav-item{min-height:44px;margin:3px 0;padding:7px 9px;gap:8px;border:1px solid transparent;border-radius:10px;font-size:13px;font-weight:600;color:#435e51;box-shadow:none}
.app-shell .grouped-sidebar .nav-item:hover{background:#eaf1ed;border-color:#dce7df}
.app-shell .grouped-sidebar .nav-item.selected{background:#205641;color:white;border-color:#205641;box-shadow:0 3px 8px #20564118}
.app-shell .grouped-sidebar .nav-item .nav-art,.app-shell .grouped-sidebar .nav-item .dino-nav-icon{width:30px;height:30px;flex:0 0 30px}
.grouped-sidebar .menu-label{white-space:nowrap}.menu-pill{margin-left:auto;border-radius:5px;padding:2px 5px;font-size:9px;white-space:nowrap;background:#e5eee8;color:#42745a}
.grouped-sidebar .selected .menu-pill{background:#ffffff24;color:#fff}.grouped-sidebar .nav-arrow{font-size:20px;line-height:1;margin-left:auto;color:inherit}
.grouped-sidebar .side-bottom{margin-top:22px;padding:14px 0 0;border-top:1px solid #e0e8e3}.grouped-sidebar .side-note b{font-size:11px;color:#6b8073}.grouped-sidebar .side-note p{font-size:10px;color:#829187}
.grouped-sidebar a:focus-visible,.grouped-mobile a:focus-visible{outline:3px solid #dba944;outline-offset:2px}
.mobile-links.grouped-mobile{gap:12px;padding:14px 20px;overflow:visible;white-space:normal}
.grouped-mobile .menu-group{width:100%;min-width:0}.grouped-mobile .menu-group-title{margin:0 0 6px;font-size:10px}.grouped-mobile .menu-group-links{display:flex;flex-wrap:wrap;gap:6px}
.mobile-links.grouped-mobile a.nav-item{margin:0;min-height:36px;padding:7px 10px;display:flex;gap:6px;font-size:12px;color:#496153;background:#f6f9f7;border:1px solid #e0e8e3;border-radius:8px}
.mobile-links.grouped-mobile a.selected{color:white;background:#205641;border-color:#205641}.grouped-mobile .menu-pill{display:none}
@media(min-width:901px){body .app-shell{grid-template-columns:280px minmax(0,1fr)}body .app-shell.sidebar-collapsed{grid-template-columns:76px minmax(0,1fr)}}
.sidebar-toggle{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:36px;border:1px solid #dce6df;background:#fff;color:#426653;border-radius:9px;font-size:12px;margin-bottom:12px;cursor:pointer}
.sidebar-toggle:hover{background:#e9f2ed}.sidebar-toggle:focus-visible{outline:3px solid #dba944;outline-offset:2px}
.sidebar-account{padding:16px;background:white;border:1px solid #dce7df;border-radius:15px;margin:0 0 22px;box-shadow:0 4px 14px #20564105}.sidebar-account strong{display:block;font-size:15px;color:#254f3b;overflow-wrap:anywhere}.sidebar-account p{font-size:11px;color:#76887c;margin:7px 0 13px}.sidebar-account-kicker{font-size:10px;color:#6b8e79;display:block;margin-bottom:6px}
.sidebar-account form{display:grid;gap:7px}.sidebar-account form label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.sidebar-account input:not([type=hidden]){width:100%;min-width:0;height:39px;padding:9px 11px;border:1px solid #dce5df;border-radius:8px;background:#fafcfb;color:#294d3a;font-size:12px}.sidebar-account input:focus{outline:2px solid #508767;outline-offset:1px}
.sidebar-account .sidebar-login-button{display:block;width:100%;padding:11px;border:0;border-radius:8px;background:#205641;color:#fff;text-align:center;font-size:12px;font-weight:700;cursor:pointer}.sidebar-account-links{display:flex;justify-content:space-between;gap:8px;margin-top:12px;font-size:10px;color:#637b6c}.sidebar-account-links a:hover{text-decoration:underline}
@media(min-width:901px){.sidebar-collapsed .grouped-sidebar .brand,.sidebar-collapsed .sidebar-account,.sidebar-collapsed .menu-group-title,.sidebar-collapsed .menu-label,.sidebar-collapsed .menu-pill,.sidebar-collapsed .nav-arrow,.sidebar-collapsed .side-bottom,.sidebar-collapsed .sidebar-toggle-label{display:none}.sidebar-collapsed .grouped-sidebar .nav-item{justify-content:center;padding:6px 0}.sidebar-collapsed .grouped-sidebar .menu-group+.menu-group{margin-top:10px;padding-top:10px}}
@media(max-width:900px){body .app-shell{grid-template-columns:minmax(0,1fr)}body .app-shell .grouped-sidebar{display:flex;padding:12px 18px;border-right:0;border-bottom:1px solid #e0e8e3}.grouped-sidebar .sidebar-toggle{margin:0;justify-content:flex-start;padding-left:14px}.grouped-sidebar #sidebar-content{padding-top:14px}.sidebar-collapsed #sidebar-content{display:none}.mobile-links.grouped-mobile{display:none!important}.grouped-sidebar .brand{display:none}.grouped-sidebar .menu-group-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.grouped-sidebar .menu-label{white-space:normal}.grouped-sidebar .sidebar-account{max-width:440px;margin:0 auto 18px}.grouped-sidebar .menu-pill{display:none}.grouped-sidebar .side-bottom{display:none}}
/* Boundary control stays reachable in both sidebar widths. */
.app-shell .grouped-sidebar{position:relative;overflow:visible}
.grouped-sidebar .sidebar-toggle{position:absolute;top:32px;right:-15px;z-index:60;width:30px;height:42px;min-height:42px;margin:0;padding:0;display:flex;justify-content:center;border-radius:12px;background:#fff;border:1px solid #cddfd3;box-shadow:0 3px 10px #234b3820;color:#2b6647}
.grouped-sidebar .sidebar-toggle-label{display:none}.sidebar-toggle-chevron{font-size:27px;line-height:1;transition:transform .2s}.sidebar-collapsed .sidebar-toggle-chevron{transform:rotate(180deg)}
.grouped-sidebar .sidebar-toggle:hover{background:#eaf4ed;border-color:#82ac91}
@media(min-width:901px){.sidebar-collapsed #sidebar-content{padding-top:66px}}
@media(max-width:900px){.grouped-sidebar .sidebar-toggle{top:8px;right:18px;width:36px;height:36px;min-height:36px}.app-shell .grouped-sidebar{min-height:52px}.grouped-sidebar #sidebar-content{padding-top:40px}.sidebar-toggle-chevron{transform:rotate(90deg)}.sidebar-collapsed .sidebar-toggle-chevron{transform:rotate(-90deg)}}
@media(prefers-reduced-motion:reduce){.sidebar-toggle-chevron{transition:none}}
