/* pillnav.css — the exam-app header as a Crystal-Lab style bar (owner, 25 Oct 2026:
   "top menu ko … aise pills mein karo"). Loaded AFTER premium.css on every /app page, so it
   only overrides the header; mega menus, drawer and page content are untouched.
   Reference: /molecular-symmetry/lab.css .sl-head / .sl-nav (navy bar, gold brand mark, pill tabs). */

header.site-header.hx, .hx {
  background: linear-gradient(135deg, #0b1740 0%, #14224f 55%, #1b2d66 100%) !important;
  background-color: #0f1d4a !important;
  color: #e6ebfa;
  border-bottom: 0;
  box-shadow: 0 10px 30px -18px rgba(11, 23, 64, .7);
  backdrop-filter: none;
}
.hx .hx__row { align-items: center; }

/* brand: gold disc + two-line name, like the lab pages */
.hx .site-brand__mark {
  background: radial-gradient(circle at 32% 28%, #f6dfae, #e2b85a 55%, #b8893a);
  color: #22190a; border-radius: 50%; width: 42px; height: 42px;
  font: 700 15px var(--font-display, Georgia, serif);
  box-shadow: 0 4px 12px rgba(0,0,0,.35), inset 0 1px 2px rgba(255,255,255,.5);
  display: inline-grid; place-items: center;
}
.hx .site-brand__name { color: #f4ecdf; font-family: var(--font-display, Georgia, serif); font-weight: 700; font-size: 16px; letter-spacing: .02em; }
.hx .site-brand__name b { color: #f4ecdf; display: inline; }
.hx .site-brand__tagline { display: block; font: 600 11px var(--font-nav, inherit); letter-spacing: .14em; text-transform: uppercase; color: #b9c4e6; margin-top: 2px; }

/* pills */
@media (min-width: 1240px) {
  .hx .hx__main { gap: 2px; }
  .hx .hx__main > .nav__item > .nav__link,
  .hx .hx__main > .nav__item > .nav__link:hover {
    padding: 9px 13px; border-radius: 10px; font-size: 13.5px; font-weight: 600;
    color: #e6ebfa; opacity: .88; background: transparent; border: 0; box-shadow: none;
  }
  .hx .hx__main > .nav__item > .nav__link:hover,
  .hx .hx__main > .nav__item > .nav__link:focus-visible { opacity: 1; background: rgba(255,255,255,.10); color: #fff; }
  .hx .hx__main > .nav__item.is-current > .nav__link,
  .hx .hx__main > .nav__item > .nav__link[aria-current="page"] {
    opacity: 1; color: #FFD66B; background: rgba(255,214,107,.16);
    box-shadow: inset 0 -2px 0 rgba(255,214,107,.6);
  }
  .hx .hx__main > .nav__item > .nav__link .nav__icon { stroke: currentColor; opacity: .9; width: 15px; height: 15px; }
  .hx .hx__main > .nav__item.is-current > .nav__link .nav__icon { stroke: #FFD66B; }
  .hx .nav__caret { opacity: .7; }
  /* a group that is open shows its mega menu below — keep the trigger lit */
  .hx .hx__main > .nav__item--has-sub.is-open > .nav__link,
  .hx .hx__main > .nav__item--has-sub:hover > .nav__link { background: rgba(255,255,255,.14); opacity: 1; color: #fff; }
}

/* controls on the bar */
.hx .nav-search { background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18); color: #fff; }
.hx .nav-search:focus-within { background: #fff; border-color: #FFD66B; box-shadow: 0 0 0 3px rgba(255,214,107,.25); }
.hx .nav-search__input { color: #fff; }
.hx .nav-search:focus-within .nav-search__input { color: var(--ink, #1d2440); }
.hx .nav-search__input::placeholder { color: #c3cbe6; }
.hx .nav-search:focus-within .nav-search__input::placeholder { color: #7a8296; }
.hx .nav-search__btn { color: #dfe5fb; }
.hx .nav-search:focus-within .nav-search__btn { color: var(--navy, #1b2a5e); }
.hx .nav-upgrade { background: linear-gradient(180deg, #f3d391, #e2b85a 60%, #d19f45); color: #22190a; border: 0; box-shadow: 0 6px 16px rgba(0,0,0,.25); }
.hx .nav-toggle { color: #fff; border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.08); }
.hx .acct-badge { color: #e6ebfa; }
.hx .acct-badge__who, .hx .acct-badge__role, .hx .acct-badge__meta, .hx .acct-badge__text, .hx .acct-badge__credits { color: #e6ebfa; }
.hx .acct-badge .btn { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.28); }
.hx .acct-badge .btn:hover { background: rgba(255,255,255,.2); }
.hx .iconbtn, .hx .icon-btn { color: #fff; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); }
.hx #totalChip, .hx #pwWalletBadge { color: #e6ebfa; }

/* phone: the bar stays navy, the drawer keeps the package's light panel */
@media (max-width: 1239.98px) {
  .hx .hx__msearch input { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.2); }
  .hx .hx__msearch input::placeholder { color: #c3cbe6; }
}

/* phone/tablet: one slim row (Sonnet measured 94px at 375) */
@media (max-width: 699.98px) {
  .hx .site-brand__tagline { display: none; }
  .hx .site-brand__mark { width: 34px; height: 34px; font-size: 13px; }
  .hx .site-brand__name { font-size: 14px; max-width: 170px; }
  .hx .hx__row { min-height: 56px; padding: 6px 0; row-gap: 0; }
  .hx .nav-upgrade { min-width: 44px; min-height: 44px; }
  .hx .nav-toggle { min-width: 44px; min-height: 44px; }
}
@media (min-width: 700px) {
  .hx .site-brand__tagline { font-size: 12px; }
}
/* phone: brand + controls on ONE row (at 320 the Upgrade crown wrapped under the brand) */
@media (max-width: 699.98px) {
  .hx .hx__row { display: flex !important; flex-wrap: nowrap; align-items: center; gap: 8px; }
  .hx .hx__brand { flex: 1 1 auto; min-width: 0; }
  .hx .site-brand__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: none; }
  .hx .hx__ctl { flex: 0 0 auto; display: flex; gap: 6px; margin-left: auto; }
  .hx .hx__nav { flex: 0 0 auto; }
}
@media (max-width: 380px) { .hx .site-brand__name b { display: none; } }