/* static/nav.css
   Topbar chrome (style only, geometry lives in 02_shell.css)
*/

:root{
  --nav-h: 56px;
}

/* container */
.topbar{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  height: var(--nav-h);
  z-index: 2500;

  display: flex;
  align-items: center;
  gap: 12px;

  padding: 0 14px;
  box-sizing: border-box;

  background: linear-gradient(180deg, var(--bg-elevated), var(--surface));
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(12px);
}

/* brand */
.topbar__brandwrap{ display: inline-flex; }
.topbar__brand{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--text);           /* ✅ force */
}
.topbar__brand:hover{ text-decoration: none; }

.topbar__logo{
  width: 28px;
  height: 28px;
  display: block;
  object-fit: contain;
}

/* links */
.topbar__links{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ✅ HARDEN anchors inside nav */
.topbar a{
  text-decoration: none;
  color: inherit;
}
.topbar a:hover{
  text-decoration: none;
}

/* icon button links */
.nav-link{
  width: 40px;
  height: 40px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;

  line-height: 1;              /* ✅ prevents weird baseline layout */
}

.nav-link:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
}

.nav-link.is-active{
  background: rgba(120,220,255,.14);
  border-color: rgba(120,220,255,.35);
}

.nav-link__icon{
  width: 18px;
  height: 18px;
  display: block;
  object-fit: contain;
}

/* spacer */
.topbar__spacer{ margin-left: auto; }

/* right slot */
.topbar__right{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}
.topbar__right > *{ flex: 0 0 auto; }

/* sr-only */
.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}