body{
  font-family:var(--ff-sans);
  font-variant-numeric:tabular-nums;
}

.topbar{
  min-height:64px;
  padding:calc(var(--s-3) + var(--safe-top)) var(--s-6) var(--s-3);
  background:var(--c-surface-1);
  border-bottom:1px solid var(--c-line);
  box-shadow:none;
}

.container,
.footer{
  max-width:var(--container-max);
}

.nav-desktop{
  gap:var(--s-2);
}

.nav-segment > summary.nav-link{
  display:inline-flex;
  align-items:center;
  gap:var(--s-1);
  min-height:36px;
  padding:0 var(--s-3);
  border:1px solid transparent;
  border-radius:var(--r-md);
  color:var(--c-ink-3);
  font-size:var(--fs-sm);
  font-weight:var(--fw-semibold);
  text-transform:uppercase;
}

.nav-logout{
  display:inline-flex;
  align-items:center;
  min-height:36px;
  padding:0 var(--s-3);
}

.nav-segment > summary.nav-link:hover,
.nav-segment[open] > summary.nav-link,
.nav-segment > summary.nav-link.active{
  color:var(--c-brand);
  background:var(--c-surface-2);
  border-color:var(--c-line);
}

.nav-segment > summary.nav-link::after{
  display:none;
}

.nav-segment .icon-chevron{
  width:12px;
  height:12px;
  transition:transform var(--motion-2) var(--ease-out);
}

.nav-segment[open] .icon-chevron{
  transform:rotate(180deg);
}

.nav-menu-pop{
  min-width:180px;
}

.menu-label{
  padding:var(--s-2) var(--s-3) var(--s-1);
  color:var(--c-ink-3);
  font-size:var(--fs-xs);
  line-height:var(--lh-xs);
  font-weight:var(--fw-semibold);
  text-transform:uppercase;
}

.menu-item.active{
  color:var(--c-brand);
  background:var(--c-surface-2);
  border-color:var(--c-line);
}

.nav-link:focus-visible{
  outline:0;
  border-color:var(--c-brand);
  box-shadow:0 0 0 3px var(--c-focus-ring);
}

@media (max-width:1100px){
  .nav-desktop{
    display:none;
  }

  .nav-mobile{
    display:inline-block;
  }
}

@media (max-width:640px){
  .topbar{
    padding:calc(var(--s-2) + var(--safe-top)) var(--s-3) var(--s-2);
  }
}