/* Authenticated product navigation: preserve the full information
   architecture without forcing the whole page wider than a phone. */
.nav{min-width:0;overflow:hidden}
.nav-brand,.nav-right,.nav-actions,.nav-link{min-width:0}
.nav-right,.nav-actions{scroll-padding-inline:16px}
.nav-link{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding-inline:10px;
  border:1px solid transparent;
  border-radius:999px;
  transition:color .15s ease,background .15s ease,border-color .15s ease;
}
.nav-link[aria-current="page"]{
  color:var(--action,#FFE500);
  background:rgba(255,229,0,.08);
  border-color:rgba(255,229,0,.24);
}
.private-environment-badge{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  margin-left:8px;
  padding:0 9px;
  border:1px solid rgba(255,229,0,.28);
  border-radius:999px;
  color:var(--action,#FFE500);
  background:rgba(255,229,0,.08);
  font:700 9px/1 var(--mono,ui-monospace,monospace);
  letter-spacing:.1em;
  text-transform:uppercase;
  white-space:nowrap;
}
.private-environment-switch{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding-inline:10px;
  border:1px solid rgba(255,229,0,.2);
  border-radius:999px;
  color:var(--action,#FFE500)!important;
  font-size:11px;
  text-decoration:none;
  white-space:nowrap;
}
.private-environment-switch:focus-visible{
  outline:3px solid var(--action,#FFE500);
  outline-offset:3px;
}
.nav[data-environment="staging"] .private-environment-badge{
  color:#0a0611;
  background:var(--action,#FFE500);
  border-color:var(--action,#FFE500);
}
.nav-link:focus-visible,.nav-brand:focus-visible{
  outline:3px solid var(--action,#FFE500);
  outline-offset:3px;
}

/* Keep the full authenticated information architecture inside a desktop
   viewport. The destinations remain one line and scroll within their own
   rail instead of widening the page or colliding with the environment ID. */
@media (min-width:901px){
  .nav{
    display:grid;
    grid-template-columns:max-content max-content minmax(0,1fr);
    justify-content:stretch;
    gap:12px;
  }
  .nav-right,.nav-actions{
    width:100%;
    min-width:0;
    flex-wrap:nowrap;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scrollbar-width:thin;
  }
  .nav-link,.private-environment-switch{flex:0 0 auto}
}

@media (max-width:900px){
  .nav{
    display:grid;
    grid-template-columns:44px minmax(0,1fr);
    grid-template-areas:"brand environment" "rail rail";
    padding:8px max(10px,env(safe-area-inset-right)) 8px max(10px,env(safe-area-inset-left));
    gap:8px;
    overflow:hidden;
  }
  .nav-brand{
    grid-area:brand;
    flex:0 0 44px;
    width:44px;
    height:44px;
    justify-content:center;
    font-size:0;
  }
  .nav-brand .logo{width:28px}
  .private-environment-badge{
    grid-area:environment;
    align-self:center;
    justify-self:start;
    margin-left:0;
  }
  .private-environment-switch{flex:0 0 auto;padding-inline:12px;scroll-snap-align:start}
  .nav-right,.nav-actions{
    grid-area:rail;
    flex:1 1 auto;
    min-width:0;
    flex-wrap:nowrap;
    gap:4px;
    padding:2px 1px;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    mask-image:linear-gradient(to right,transparent 0,#000 22px,#000 calc(100% - 22px),transparent 100%);
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 22px,#000 calc(100% - 22px),transparent 100%);
  }
  .nav-right::-webkit-scrollbar,.nav-actions::-webkit-scrollbar{display:none}
  .nav-link{
    display:inline-flex;
    flex:0 0 auto;
    align-items:center;
    justify-content:center;
    min-width:44px;
    min-height:44px;
    padding:0 10px;
    scroll-snap-align:start;
  }
  .nav-link[aria-current="page"]{
    color:#09020e;
    background:var(--action,#FFE500);
    border-color:var(--action,#FFE500);
    box-shadow:0 0 20px rgba(255,229,0,.16);
  }
  .nav-actions .nav-secondary{display:inline-flex}
}

@media (prefers-reduced-motion:reduce){
  .nav-link{transition:none}
  .nav-right,.nav-actions{scroll-behavior:auto}
}