.nav{
  position:sticky; 
  top:0; 
  z-index:30;
  background:color-mix(in oklab, var(--surface) 85%, transparent);
  border-bottom:1px solid var(--border);
}

.nav-bar{
  display:flex; 
  align-items:center; 
  gap:1rem; 
  padding:.6rem 0; 
  min-height:56px;
}

.brand{
  display:flex; 
  align-items:center; 
  gap:.45rem; 
  font-weight:var(--fw-bold);
}

.brand .logo{
  display:grid; 
  place-items:center; 
  width:28px; height:28px; 
  border-radius:8px;
  background:var(--primary); color:var(--primary-contrast); 
  font-weight:800;
}

.brand .word{
  opacity:.9;
}

.nav-menu{
  display:flex; 
  align-items:center; 
  gap:1rem; 
  margin-left:auto;
}

.nav-left{
  display:flex; 
  gap:.35rem;
}

.nav-link{
  position:relative; 
  padding:.45rem .75rem; 
  border-radius:10px; 
  font-weight:600; 
  color:var(--text);
  transition:background .18s;
}

.nav-link:hover{
  background:color-mix(in oklab, var(--primary) 10%, transparent);
}

.nav-link.active::after{
  content:""; 
  position:absolute; 
  left:.75rem; 
  right:.75rem; 
  bottom:.3rem;
  height:2px; 
  border-radius:2px; 
  background:var(--primary);
}

/* Compact, wrap-friendly typeahead */

/* container */
.nav-search{ 
  position:relative; 
}

/* popover */
.nav-suggest{
  position:absolute;
  top:100%;
  left:0;
  right:0;
  margin-top:.3rem;
  padding:.25rem;
  background:color-mix(in oklab, var(--surface) 98%, transparent);
  border:1px solid var(--border);
  border-radius:10px;
  box-shadow:0 10px 24px rgba(2,6,23,.12);
  list-style:none;
  max-height:16rem;
  overflow-y:auto;
  overflow-x:hidden;
  z-index:60;
}

.nav-suggest:empty{ display:none; }

/* row */
.nav-suggest .opt{
  display:grid;
  grid-template-columns: 30px 1fr auto;   /* smaller avatar */
  align-items:center;
  gap:.5rem;
  padding:.45rem .55rem;
  border-radius:8px;
  cursor:pointer;
  transition:background .15s ease;
}

.nav-suggest .opt:hover{ 
  background:color-mix(in oklab, var(--primary) 10%, transparent);
}
.nav-suggest .opt.active{
  background:color-mix(in oklab, var(--primary) 16%, transparent);
}

/* media cell */
.opt-media{
  width:30px; height:30px;
  border-radius:7px;
  background:color-mix(in oklab, var(--surface) 92%, transparent);
  display:grid; place-items:center;
  overflow:hidden;
}
.opt-media img{
  width:100%; height:100%;
  object-fit:cover;
}
.opt-fallback{ font-size:1rem; opacity:.85; }

/* text cell */
.opt-main{
  min-width:0;
  display:grid;
  row-gap:.1rem;
}

/* allow full names and titles; clamp to 2 lines */
.opt-title{
  font-weight:600;
  font-size:.92rem;
  line-height:1.25;
  white-space:normal;
  overflow:hidden;
  display:-webkit-box;
  -webkit-box-orient:vertical;
}

/* one line for subtext */
.opt-sub{
  font-size:.82rem;
  line-height:1.2;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* badge cell smaller */
.opt-meta{ display:flex; align-items:center; justify-content:flex-end; min-width:max-content; }
.nav-suggest .badge{
  font-size:.7rem;
  line-height:1;
  padding:.12rem .4rem;
  border-radius:.4rem;
  border:1px solid var(--border);
  background:color-mix(in oklab, var(--surface) 90%, transparent);
}

/* mobile tweaks */
@media (max-width: 879.98px){
  .nav-suggest{
    left:.6rem; right:.6rem;
    border-radius:9px;
    max-height:50vh;
  }
  .nav-suggest .opt{
    grid-template-columns: 26px 1fr auto;
    gap:.45rem;
    padding:.4rem .5rem;
  }
  .opt-media{ width:26px; height:26px; border-radius:6px; }
  .opt-title{ font-size:.9rem; }
  .opt-sub{ font-size:.8rem; }
}

/* scrollbar polish */
.nav-suggest::-webkit-scrollbar{ width:10px; }
.nav-suggest::-webkit-scrollbar-thumb{
  background:color-mix(in oklab, var(--border) 80%, transparent);
  border:3px solid transparent;
  border-radius:999px;
  background-clip:padding-box;
}


.nav-actions{
  display:flex; 
  align-items:center; 
  gap:.5rem;
}

.nav-user{
  position:relative;
}

.nav-user summary{
  list-style:none; 
  cursor:pointer; 
  padding:.4rem .6rem; 
  border:1px solid var(--border);
  border-radius:10px; 
  background:var(--surface);
}

.nav-user[open] summary{
  filter:brightness(1.02);
}

.nav-user .menu{
  position:absolute; 
  right:0; 
  top:calc(100% + .5rem); 
  background:var(--surface);
  border:1px solid var(--border); 
  border-radius:12px;
  box-shadow:var(--shadow);
  padding:.4rem; 
  min-width:170px; 
  display:grid; 
  z-index:50;
}

.nav-user .menu a,.nav-user .menu .linklike{
  padding:.55rem .6rem;
}

.linklike{
  background:none; 
  border:0; 
  text-align:left; 
  cursor:pointer; 
  color:inherit;
}

.nav-toggle{
  display:inline-flex; 
  align-items:center; 
  justify-content:center; 
  width:40px; 
  height:40px;
  border:1px solid var(--border); 
  border-radius:10px; 
  background:var(--surface);
}

.nav-burger{
  width:18px; 
  height:2px; 
  background:currentColor; 
  position:relative;
}

.nav-burger::before,.nav-burger::after{
  content:""; 
  position:absolute; 
  left:0; 
  width:18px; 
  height:2px; 
  background:currentColor;
}

.nav-burger::before{
  top:-6px;
}

.nav-burger::after{
  top:6px;
}

@media (min-width: 880px){
  .nav-toggle{
    display:none;
  }

  .nav-menu{
    display:flex !important;
  }
}
@media (max-width: 879.98px){
  .nav-menu{
    display:none; 
    position:absolute; 
    left:0; 
    right:0; 
    top:56px;
    background:color-mix(in oklab, var(--surface) 92%, transparent);
    border-bottom:1px solid var(--border); 
    padding:1rem 0;
    box-shadow:0 10px 30px rgba(2,6,23,.08);
  }

  .nav-menu.open{
    display:grid; 
    gap:1rem;
  }

  .nav-left{
    flex-direction:column; 
    align-items:flex-start; 
    padding:0 1rem;
  }

  .nav-search{
    padding:0 1rem;
  }

  .nav-actions{
    padding:0 1rem;
  }

  .nav-search input{
    min-width:0; width:100%;
  }
}