/* ------------------------------
   Keys HUD (header)
------------------------------ */
.key-icon { width: 18px; height: 18px; vertical-align: middle; }
.key-chip { display:inline-flex; align-items:center; gap:6px; }

/* ------------------------------
   Reviewer progress bar HUD (header)
------------------------------ */
.login-stack{
  display: inline-flex;
  flex-direction: column;
  align-items: center; /* centers bar under username */
}

.reviewer-progress-wrap{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 0.2rem;
  flex: 0 0 auto;
}

.reviewer-progress-row{
  display: flex;
  align-items: center;
  gap: 8px;
}

.reviewer-level-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  padding: 0 8px;
  border-radius: 999px;
  background: #2563eb;
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  user-select: none;
  white-space: nowrap;
}

.reviewer-progress-bar{
  width: 96px;
  max-width: 34vw;
  height: 10px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
}

.reviewer-progress-fill{
  height: 100%;
  width: 0%;
  background: #2563eb;
  border-radius: 999px;
  transition: width 250ms ease;
}

.reviewer-progress-text{
  display: none;
}


/* ------------------------------
   Two-row header wrapper for HUD
   Works with:
     <div class="container header-inner header-two-row">
       <div class="header-top-row">...</div>
       <div class="header-hud-row">...</div>
     </div>
------------------------------ */

.header-two-row{
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.header-top-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: nowrap;       /* <-- key: never split logo/nav into 2 lines */
  min-width: 0;            /* allows nav to shrink/scroll */
}


/* Row 2: HUD */
.header-hud-row{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;

  /* Keep it visually "collapsed" when children are display:none */
  padding: 0;
  margin: 0;
}

@media (max-width: 640px){
  /* Keep the entire top row (logo + nav) on one line */
  .header-top-row{
    flex-wrap: nowrap;
  }

  .header-top-row .main-nav{
    width: auto;
    display: flex;
    gap: 0.6rem;
    flex-wrap: nowrap;
    white-space: nowrap;

    /* allow the nav to scroll horizontally if needed */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;

    /* critical: allow flexbox to shrink it instead of wrapping */
    min-width: 0;
  }

  /* Optional: hide scrollbars on mobile-ish browsers */
  .header-top-row .main-nav::-webkit-scrollbar{
    display: none;
  }

  .header-hud-row{
    width: 100%;
  }
}



/* ------------------------------
   Compact Logout button (HUD only)
------------------------------ */
.header-hud-row #logoutBtn{
  padding: 0.2rem 0.55rem;
  font-size: 0.75rem;
  line-height: 1;
  border-radius: 999px;
}

/* Logo mark can be a link (compact header) */
.logo-mark{
  text-decoration: none;
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* --------------------------------------------------
   Fix: header-inner styles were affecting header-two-row
-------------------------------------------------- */
/* Ensure the two-row header isn't forced to center by .header-inner */
.header-inner.header-two-row{
  align-items: stretch;
}