/* Keep personal learning access beside the existing public navigation. */
.account-navigation{display:flex;align-items:center;gap:.75rem;flex:0 0 auto;color:var(--foreground);font-size:.875rem}
.header nav.account-navigation{display:flex}
.account-navigation .button{min-height:44px;padding:.7rem 1rem;white-space:nowrap;background:var(--action-surface);color:var(--on-action);border-radius:var(--radius-control);font-size:.875rem}
.account-navigation .button:hover{background:var(--action-hover)}
.account-navigation .text-link{display:flex;align-items:center;min-height:44px;font-size:.875rem}
.account-navigation [hidden]{display:none!important}
.course-access-slot:empty{display:none}
.course-access-slot{display:flex;gap:.5rem;flex-wrap:wrap;margin:.75rem 0}
.course-access-slot .course-access-button{min-height:44px;padding:.7rem 1rem;font-size:.875rem;background:var(--action-surface);color:var(--on-action);border:1px solid var(--action-surface);border-radius:var(--radius-control)}
body:has([data-account-navigation])>.header,body:has([data-account-navigation])>.topbar{position:sticky;top:0;z-index:30;background:var(--surface-base)}
body:has([data-account-navigation])>.header{height:auto;min-height:88px;padding-block:1rem;flex-wrap:wrap;gap:1rem}
.topbar:has([data-account-navigation])>.wrap{flex-wrap:wrap;gap:1rem}
html:has([data-account-navigation]){scroll-padding-top:10rem}
.introduction-accessbar{position:sticky;top:0;z-index:30;max-width:49rem;margin:0 auto;padding:1rem 2rem;background:var(--p1-paper);border-bottom:1px solid var(--p1-line)}
.introduction-accessbar .introduction-brand{margin:0}
.prescios-p1 .account-navigation a.button,.prescios-p1 .course-access-slot a.button{color:var(--on-action);text-decoration:none;font-weight:600}
.prescios-p1 .intro-course,.prescios-p1 h2,.prescios-p1 h3{scroll-margin-top:10rem}
.account-navigation a:focus-visible,.course-access-slot a:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}
@media(max-width:600px){.introduction-accessbar{padding:.75rem 1.15rem}.introduction-accessbar .brand-link{width:9rem}.introduction-accessbar .account-navigation{order:3;flex-basis:100%}}
@media(max-width:600px){.account-navigation{flex:1 1 auto;gap:.75rem;justify-content:flex-end}.account-navigation .button{padding:.65rem .85rem}.account-navigation .text-link{font-size:.875rem}.header:has([data-account-navigation])>.brand{width:9.5rem}.header:has([data-account-navigation]) nav:not(.account-navigation){display:none}.topbar:has([data-account-navigation]) .nav{display:none}}
@media print{.account-navigation,.course-access-slot,.introduction-accessbar{display:none!important}body:has([data-account-navigation])>.header,body:has([data-account-navigation])>.topbar{position:static}}
