/* ============================================================
   nav.css — the global top menu (#app-nav, js/nav.js).

   The bar lives OUTSIDE #root so it survives every route swap.
   `--app-nav-h` is what the full-height layouts (.wiz-root,
   .home-page, .sessions-page, .ops-page, .auth-wrap) subtract from the
   viewport; it collapses to 0 on the logged-out auth screens,
   where body.has-app-nav is absent.
   ============================================================ */

:root { --app-nav-h: 0px; }
body.has-app-nav { --app-nav-h: 54px; }

.app-nav {
  position: sticky;
  top: 0;
  z-index: 60; /* under the re-auth scrim (90) and wizard modals */
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--app-nav-h);
  padding: 0 var(--space-4);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--grey-200);
}
.app-nav[hidden] { display: none; }

/* ---------- brand ---------- */

.app-nav-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px; margin-right: var(--space-2);
  border-radius: var(--radius-md);
  color: var(--ink-700);
}
.app-nav-brand:hover { background: var(--grey-100); color: var(--ink-800); }
.app-nav-brand img { height: 20px; display: block; }
.app-nav-brand span {
  font-family: var(--font-display); font-weight: 700; font-size: 14.5px;
  letter-spacing: -0.01em; white-space: nowrap;
}

/* ---------- top-level items ---------- */

.app-nav-items { display: flex; align-items: center; gap: 2px; }

/* Each group owns its trigger + dropdown, so the pop aligns to the trigger
   without any JS positioning (the group is full-bar height, so `top: 100%`
   lands the pop just under the bar). */
.app-nav-group { position: relative; display: flex; align-items: center; height: 100%; }

.app-nav-item {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 11px;
  background: none; border: 0; border-radius: var(--radius-md);
  font-size: 13.5px; font-weight: 700; color: var(--ink-600);
  white-space: nowrap; cursor: pointer;
  transition: background .15s var(--ease-out), color .15s var(--ease-out);
}
.app-nav-item:hover { background: var(--grey-100); color: var(--ink-800); }
.app-nav-item[aria-expanded="true"] { background: var(--grey-100); color: var(--ink-800); }
.app-nav-item--active { color: var(--red-600); background: var(--red-50); }
.app-nav-item--active:hover { background: var(--red-50); color: var(--red-700); }
.app-nav-item .app-nav-caret { color: var(--grey-400); margin-left: -1px; }

.app-nav-spacer { flex: 1; }

/* ---------- account button ---------- */

.app-nav-account { max-width: 340px; }
.app-nav-account .app-nav-who {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 600; color: var(--grey-500);
}
.app-nav-account .app-nav-role, .app-nav-account .app-nav-caret { flex-shrink: 0; }
.app-nav-avatar {
  width: 24px; height: 24px; flex-shrink: 0; border-radius: var(--radius-pill);
  background: var(--red-50); color: var(--red-500);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; text-transform: uppercase;
}

.app-nav-role {
  font-size: 9.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--blue-600); background: var(--info-bg);
  padding: 3px 7px; border-radius: var(--radius-pill);
}

/* ---------- dropdown ---------- */

.app-nav-pop {
  position: absolute; top: 100%; left: 0; z-index: 61;
  min-width: 250px; max-width: min(340px, calc(100vw - 24px));
  padding: 6px;
  background: var(--paper);
  border: 1px solid var(--grey-200); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.app-nav-pop[hidden] { display: none; }
.app-nav-pop--right { left: auto; right: 0; }

.app-nav-pop-title {
  font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--grey-400); padding: 8px 10px 6px;
}
.app-nav-pop-sep { height: 1px; background: var(--grey-100); margin: 5px 4px; }

.app-nav-link {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 9px 10px;
  background: none; border: 0; border-radius: var(--radius-md);
  font-size: 13.5px; font-weight: 600; color: var(--ink-700);
  text-align: left; cursor: pointer;
}
.app-nav-link:hover { background: var(--grey-50); color: var(--ink-800); }
.app-nav-link--active { background: var(--red-50); color: var(--red-600); }
.app-nav-link--active:hover { background: var(--red-50); color: var(--red-700); }
.app-nav-link[disabled] { opacity: .5; cursor: not-allowed; }
.app-nav-link[disabled]:hover { background: none; color: var(--ink-700); }
.app-nav-link--danger { color: var(--error); }
.app-nav-link--danger:hover { background: var(--error-bg); color: var(--error); }

.app-nav-link .app-nav-link-ico { flex-shrink: 0; color: var(--grey-400); display: inline-flex; }
.app-nav-link--active .app-nav-link-ico { color: var(--red-500); }
.app-nav-link .app-nav-link-main { flex: 1; min-width: 0; }
.app-nav-link .app-nav-link-sub {
  display: block; font-size: 11.5px; font-weight: 500; color: var(--grey-500); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.app-nav-note { padding: 4px 10px 9px; font-size: 11.5px; color: var(--grey-500); }

/* ---------- mobile: everything collapses into one panel ---------- */

.app-nav-burger { display: none; }

@media (max-width: 860px) {
  .app-nav { padding: 0 var(--space-3); gap: 6px; }
  .app-nav-brand span { display: none; }
  .app-nav-items { display: none; }
  .app-nav-account .app-nav-who, .app-nav-account .app-nav-caret { display: none; }
  .app-nav-burger { display: inline-flex; }

  /* Pinned to the viewport instead of the trigger — the groups are too
     narrow at this width for a trigger-anchored popover to fit. */
  .app-nav-pop {
    position: fixed; top: calc(var(--app-nav-h) + 4px);
    left: var(--space-3); right: var(--space-3);
    min-width: 0; max-width: none;
    max-height: calc(100dvh - var(--app-nav-h) - 24px); overflow-y: auto;
  }
  .app-nav-pop--right { left: auto; right: var(--space-3); min-width: 240px; }
}

.app-nav-pref {
  padding: 8px 12px 10px;
}
.app-nav-pref .create-progress-toggle-sub { font-size: 12px; }