.header{border-bottom:1px solid var(--color-border)}.header__logo{font-size:var(--text-xl);font-weight:var(--font-weight-bold);color:var(--color-neutral-700);:where([theme=dark]) &{color:var(--color-neutral-300)}}.header__desktop{display:none}@media only screen and (min-width:60em){.header__desktop{display:flex}.header__mobile{display:none}}.header__backdrop{opacity:0;visibility:hidden;position:fixed;inset:0;z-index:50;transition:opacity .15s;&:before{content:"";position:absolute;inset:0;background-color:rgb(0 0 0/30%)}&[data-open=true]{visibility:visible;opacity:1}}.header__login-link{display:inline-flex;align-items:center;height:2.25rem;padding:.5rem 1rem;font-size:var(--text-sm);font-weight:var(--font-weight-medium);color:white;background-color:var(--color-primary);border-radius:9999px;box-shadow:var(--shadow-sm);&:focus-visible,&:hover{background-color:color-mix(in oklab,var(--color-primary) 90%,transparent)}}.header__icon-btn{display:inline-flex;align-items:center;justify-content:center;height:2.25rem;width:2.25rem;border-radius:var(--radius-md);&:focus-visible,&:hover{color:var(--accent-foreground);background-color:var(--accent)}}.header-avatar{position:relative;display:flex;height:2.5rem;width:2.5rem;align-items:center;justify-content:center;overflow:hidden;border-radius:9999px;color:var(--color-neutral-600);background-color:var(--accent);:where([theme=dark]) &{color:var(--color-neutral-400);background-color:var(--color-slate-700)}}.header-avatar__fallback{display:flex;height:100%;width:100%;align-items:center;justify-content:center}.header-avatar__initial{font-size:var(--text-lg);font-weight:var(--font-weight-semibold)}.header-avatar__image{position:absolute;inset:0;height:100%;width:100%;object-fit:cover;opacity:0;transition:opacity .15s;&[data-loaded=true]{opacity:1}}.nav__list{font-size:var(--text-sm)}.nav__menu{--gap:4px;position:absolute;top:100%;visibility:hidden;opacity:0;transition:all .1s;z-index:50;transform:translateY(0);min-width:180px;background:var(--popover);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:.25rem;box-shadow:var(--shadow-md);&:before{content:"";position:absolute;top:0;left:0;width:100%;height:calc(var(--gap) + 2px);transform:translateY(-100%)}&:focus-visible{visibility:visible;opacity:1}}.nav__chevron{transition:transform .2s}.nav__item{&.has-popup{position:relative;.nav__menu[data-open=true]{visibility:visible;opacity:1;transform:translateY(var(--gap))}}&.active{box-shadow:0 -2px 0 0 inset var(--color-primary);color:var(--color-neutral-800);:where([theme=dark]) &{color:var(--color-neutral-200)}}}.nav__link{margin-block:.5rem;color:var(--color-neutral-500);font-weight:var(--font-weight-medium);border-radius:var(--radius-xs);&[aria-expanded=true]{.nav__chevron{transform:rotate(180deg)}}:where([theme=dark]) &{color:var(--color-neutral-400)}&:hover{opacity:.8}}.nav__menu-link{padding:.75rem;border-radius:var(--radius-xs);color:var(--color-neutral-500);font-weight:var(--font-weight-medium);:where([theme=dark]) &{color:var(--color-neutral-400)}&:focus-visible,&:hover{opacity:.8;color:var(--accent-foreground);background:var(--accent);:where([theme=dark]) &{color:var(--color-neutral-400)}}&.active{color:var(--color-primary);background-color:var(--accent)}}.header__nav-icon{height:1rem;width:1rem}.mobile-nav{position:fixed;top:0;bottom:0;right:0;width:280px;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);background:var(--bg-color);transition:transform .1s ease-in;transform:translateX(100%);z-index:1000;font-size:var(--text-sm);border-top-left-radius:var(--radius-xl);border-bottom-left-radius:var(--radius-xl);&[data-open=true]{transform:translateX(0);box-shadow:var(--shadow-2xl)}}.mobile-nav__subtitle{font-weight:var(--font-weight-bold);color:var(--color-neutral-500);margin:0 0 .75rem;text-transform:uppercase}.mobile-nav__list{display:grid;gap:.5rem}.header-dropdown-menu{position:absolute;top:100%;right:0;visibility:hidden;opacity:0;transition:all .1s;z-index:50;transform:translateY(0) scale(.95);transform-origin:top right;margin-top:.25rem;min-width:8rem;width:max-content;background:var(--popover);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:.25rem;box-shadow:var(--shadow-md);&[data-open=true]{transform:scale(1);visibility:visible;opacity:1}}.header-dropdown-menu__item{display:flex;align-items:center;gap:.75rem;width:100%;padding:.375rem .5rem;cursor:default;color:var(--accent-foreground);&:focus-visible,&:hover{background-color:var(--accent)}svg{color:var(--muted-foreground)}}.header-dropdown-menu__item--destructive{--accent:color-mix(in oklab,var(--destructive) 10%,transparent);--accent-foreground:var(--destructive);--muted-foreground:var(--destructive)}.mobile-theme-select{border:1px solid var(--color-border);border-radius:9999px}.mobile-theme-select__button{padding:.25rem;border-radius:50%;&[data-active=true]{background-color:var(--color-neutral-700);color:var(--color-neutral-100)}}.mobile-nav__link{display:flex;align-items:center;gap:.75rem}.mobile-logout-btn{border:transparent;color:var(--destructive);background-color:color-mix(in oklab,var(--destructive) 10%,transparent);transition:background .1s;&:hover{background-color:color-mix(in oklab,var(--destructive) 20%,transparent)}[theme=dark] &{color:white;background-color:color-mix(in oklab,var(--destructive) 70%,transparent);&:hover{background-color:color-mix(in oklab,var(--destructive) 90%,transparent)}}}