/* Journey navigation: one left rail, with learning routes as child links. */
.first-setup .actions{justify-content:center}
#nav{inset:0 auto 0 0;width:224px;padding:18px 12px;display:block;background:#fff;border:1px solid #dfe7df;border-radius:0;box-shadow:0 8px 28px #193d3808;backdrop-filter:none;overflow:auto}
#nav[hidden]{display:none}
#nav .nav-kicker{font-size:10px;letter-spacing:1.8px;color:#667b75;font-weight:750;margin:0 12px 16px;display:block}
#nav button[data-page],#nav button[data-tab],#nav button[data-test-route]{width:100%;display:flex;align-items:center;gap:12px;text-align:left;min-height:48px;padding:12px;border-radius:10px;margin:3px 0;color:#536b61;font-size:14px;font-weight:600;transform:none}
#nav button.active{background:#eaf2e8;color:#225f4b}
#nav .nav-symbol{width:24px;height:24px;flex:none;display:grid;place-items:center;line-height:1;color:#678278;transition:color .18s ease,transform .18s ease}
#nav .nav-symbol svg{display:block;width:23px;height:23px}
#nav button.active .nav-symbol{color:#225f4b}
@media(hover:hover){#nav button[data-page]:hover .nav-symbol{color:#225f4b;transform:translateY(-1px)}}
@media(prefers-reduced-motion:reduce){#nav .nav-symbol{transition:none}}
#nav .nav-suboptions{margin:4px 0 12px 21px;border-left:1px solid #dfe7df;padding-left:10px}
#nav .nav-suboptions[hidden]{display:none}
#nav button[data-tab],#nav button[data-test-route]{font-size:13px;font-weight:450;min-height:44px;padding:10px}
#nav button[data-tab].active,#nav button[data-test-route].active{font-weight:650;background:#f1f6ed}
#nav .nav-toggle{display:none}
body:has(#nav:not([hidden])) main#app{width:calc(100% - 224px);max-width:1120px;margin-left:max(224px,calc(224px + (100vw - 1344px)/2));margin-right:0;padding-bottom:40px}
#nav button:focus-visible{outline:3px solid #9bbf9e;outline-offset:2px}
@media(max-width:1000px){
 body:has(#nav:not([hidden])) main#app{width:100%;margin:auto;padding-bottom:100px}
 #nav{inset:auto auto 18px 16px;width:auto;overflow:visible;padding:0;border:0;background:transparent;box-shadow:none}
 #nav .nav-toggle{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;min-height:48px;border:1px solid #cbd9cc;background:#225f4b;color:white;border-radius:12px;box-shadow:0 4px 16px #193d3820}
 #nav .nav-items{display:none;position:fixed;left:0;top:0;bottom:0;width:236px;max-height:100dvh;overflow:auto;background:#fff;border:1px solid #dfe7df;border-radius:0;padding:24px 12px 88px;box-shadow:0 12px 32px #193d3820}
 #nav.is-open .nav-items{display:block}
}
#nav button.active::after{display:none}
#nav .nav-collapse{min-height:44px;width:44px;display:grid;place-items:center;margin:0 0 12px auto;padding:8px;border:1px solid #dfe7df;border-radius:10px;background:#fff;color:#225f4b;font-size:20px}
@media(min-width:1001px){#nav.is-collapsed{width:72px;padding:12px 8px}#nav.is-collapsed .nav-kicker,#nav.is-collapsed .nav-label,#nav.is-collapsed .nav-suboptions{display:none}#nav.is-collapsed button[data-page]{justify-content:center;padding:12px 8px}#nav.is-collapsed .nav-collapse{margin:0 auto 12px;transform:none}body:has(#nav.is-collapsed:not([hidden])) main#app{width:calc(100% - 72px);max-width:1120px;margin-left:max(72px,calc(72px + (100vw - 1192px)/2))}}
@media(max-width:1000px){#nav .nav-collapse{display:none}}

/* Centre the setup card in the area below the existing header. */
body:has(#nav[hidden]) main#app{min-height:calc(100dvh - 76px);display:grid;align-items:center;padding-top:24px;padding-bottom:24px}
body:has(#nav[hidden]) .first-setup{width:100%;margin:0 auto}
@media(max-width:760px){body:has(#nav[hidden]) main#app{min-height:calc(100dvh - 68px)}}
@media(min-width:1001px){body:has(#nav:not([hidden]))>header{padding-left:248px}body:has(#nav.is-collapsed:not([hidden]))>header{padding-left:96px}}
#nav,main#app,body>header{transition:width .22s ease,margin-left .22s ease,padding-left .22s ease}
#nav .nav-suboptions{max-height:240px;opacity:1;overflow:hidden;transition:max-height .22s ease,opacity .18s ease,margin .22s ease}
#nav .nav-suboptions.is-folded{max-height:0;opacity:0;margin-top:0;margin-bottom:0;border-color:transparent;pointer-events:none}
#nav .nav-chevron{margin-left:auto;font-size:12px;transition:transform .22s ease}
#nav [aria-expanded=true] .nav-chevron{transform:rotate(180deg)}
@media(max-width:1000px){#nav .nav-toggle{position:relative;z-index:1}#nav.is-open .nav-items{animation:nav-reveal .2s ease-out}}
@keyframes nav-reveal{from{transform:translateX(-16px);opacity:0}to{transform:translateX(0);opacity:1}}
@media(prefers-reduced-motion:reduce){#nav,main#app,body>header,#nav .nav-suboptions,#nav .nav-chevron{transition:none}#nav.is-open .nav-items{animation:none}}
.reduce-motion #nav,.reduce-motion main#app,.reduce-motion body>header,.reduce-motion #nav .nav-suboptions,.reduce-motion #nav .nav-chevron{transition:none}
.reduce-motion #nav.is-open .nav-items{animation:none}

/* Keep the unchanged blue brand inside the navigation rail. */
#nav .nav-brand{font-size:20px;gap:9px;min-height:44px;margin:0 2px 16px;white-space:nowrap}
#nav .nav-brand img{width:34px;height:34px;flex:none}
#nav .nav-brand .brand-wordmark small{display:block;font-size:9px}
#nav .nav-brand:focus-visible{outline:3px solid #9bbf9e;outline-offset:2px;border-radius:8px}
@media(min-width:1001px){body:has(#nav:not([hidden])) header>.brand{display:none}#nav.is-collapsed .nav-brand{justify-content:center;margin:0 0 16px}#nav.is-collapsed .nav-brand .brand-wordmark{display:none}}

/* Full-screen learning keeps the same rail, initially icon-only. */
body:is(:has(#study-screen:not([hidden])),:has(#settings[open] .flow-cards)) #nav{z-index:65;inset:0 auto 0 0;width:224px;padding:18px 12px;background:#fff;border:1px solid #dfe7df;overflow:auto;box-shadow:none}
body:is(:has(#study-screen:not([hidden])),:has(#settings[open] .flow-cards)) #nav .nav-items{display:block;position:static;width:auto;max-height:none;overflow:visible;padding:0;border:0;box-shadow:none;animation:none}
body:is(:has(#study-screen:not([hidden])),:has(#settings[open] .flow-cards)) #nav .nav-toggle{display:none}
body:is(:has(#study-screen:not([hidden])),:has(#settings[open] .flow-cards)) #nav .nav-collapse{display:grid}
body:is(:has(#study-screen:not([hidden])),:has(#settings[open] .flow-cards)) #nav.is-collapsed{width:72px;padding:12px 8px}
body:is(:has(#study-screen:not([hidden])),:has(#settings[open] .flow-cards)) #nav.is-collapsed .nav-kicker,body:is(:has(#study-screen:not([hidden])),:has(#settings[open] .flow-cards)) #nav.is-collapsed .nav-label,body:is(:has(#study-screen:not([hidden])),:has(#settings[open] .flow-cards)) #nav.is-collapsed .nav-suboptions,body:is(:has(#study-screen:not([hidden])),:has(#settings[open] .flow-cards)) #nav.is-collapsed .nav-chevron,body:is(:has(#study-screen:not([hidden])),:has(#settings[open] .flow-cards)) #nav.is-collapsed .brand-wordmark{display:none}
body:is(:has(#study-screen:not([hidden])),:has(#settings[open] .flow-cards)) #nav.is-collapsed .nav-brand{justify-content:center;margin:0 0 16px}
body:is(:has(#study-screen:not([hidden])),:has(#settings[open] .flow-cards)) #nav.is-collapsed button[data-page]{justify-content:center;padding:12px 8px}
body:is(:has(#study-screen:not([hidden])),:has(#settings[open] .flow-cards)) #nav.is-collapsed .nav-collapse{margin:0 auto 12px}
#study-screen{left:224px;transition:left .22s ease}
body:has(#nav.is-collapsed) #study-screen{left:72px}
@media(max-width:1000px){#study-screen{left:72px}}
@media(prefers-reduced-motion:reduce){#study-screen{transition:none}}
.reduce-motion #study-screen{transition:none}

/* A compact brand row with a clear, reachable collapse control. */
#nav .nav-head{display:flex;align-items:center;gap:6px;margin-bottom:20px}
#nav .nav-head .nav-brand{font-size:18px;gap:6px;min-width:0;flex:1;margin:0}
#nav .nav-head .nav-brand img{width:28px;height:28px}
#nav .nav-head .brand-wordmark small{font-size:8px}
#nav .nav-head .nav-collapse{flex:none;margin:0;width:44px;height:44px;border:1px solid #e0e9df;background:#f2f6ef;border-radius:12px;transition:background .18s ease,box-shadow .18s ease}
#nav .nav-head .nav-collapse:hover{background:#e4eee0;box-shadow:0 3px 8px #193d3810}
#nav .nav-collapse svg{transition:transform .22s ease}
#nav.is-collapsed .nav-collapse svg{transform:rotate(180deg)}
@media(min-width:1001px){#nav.is-collapsed{width:96px}body:has(#nav.is-collapsed:not([hidden])) main#app{width:calc(100% - 96px);margin-left:max(96px,calc(96px + (100vw - 1216px)/2))}body:has(#nav.is-collapsed:not([hidden]))>header{padding-left:120px}}
body:is(:has(#study-screen:not([hidden])),:has(#settings[open] .flow-cards)) #nav.is-collapsed{width:96px}
body:has(#nav.is-collapsed) #study-screen{left:96px}
@media(max-width:1000px){#study-screen{left:96px}}
@media(prefers-reduced-motion:reduce){#nav .nav-collapse svg{transition:none}}
.reduce-motion #nav .nav-collapse svg{transition:none}

/* The rail already carries the brand; avoid a second logo in the study bar. */
body:has(#nav:not([hidden])) .study-bar .study-brand{display:none}

#nav.is-collapsed .nav-chevron{display:none}

/* Learning steps are a full-screen route too, with the same usable rail. */
#settings[open]:has(.flow-cards){position:fixed;inset:0 0 0 224px;z-index:60;width:auto;max-width:none;height:100dvh;max-height:none;margin:0;border:0;border-radius:0;background:#f5f7f3;padding:28px clamp(16px,4vw,64px);overflow:auto}
#settings[open]:has(.flow-cards)>*{max-width:900px;margin-left:auto;margin-right:auto}
body:has(#nav.is-collapsed) #settings[open]:has(.flow-cards){left:96px}
body:has(#settings[open] .flow-cards){overflow:hidden}
@media(max-width:1000px){#settings[open]:has(.flow-cards){left:96px}}

/* Keep the account control at the actual right edge of the workspace. */
body:has(#nav:not([hidden]))>header{padding-right:24px}#journey-account{margin-left:12px}body:has(#nav:not([hidden]))>header>.header-support{margin-right:auto}
@media(max-width:600px){body:has(#nav:not([hidden]))>header{padding-right:12px}}