/* Nectale top bar (owner-approved 2026-10-16, mockup "Navigation bar: final").
   One bar for the 14 site pages; markup comes from scripts/site_nav.py, state from gha-nav.js.
   States live on <nav data-gn="out|in|sub|lic">: signed out, signed in without a plan,
   subscribed, PDF license owner (admin uses "lic"). Everything is scoped to nav.gn so the
   older per-page nav rules (.nav-left, .nav-r, .nav-pill) never reach it, and nothing
   outside the bar is styled here. */
html body > nav.gn{
  background:rgba(255,248,238,.96);color:#2E4964;border-bottom:1px solid #EADFC8;
  -webkit-backdrop-filter:saturate(140%) blur(12px);backdrop-filter:saturate(140%) blur(12px);
  height:86px !important;display:flex !important;flex-wrap:nowrap !important;align-items:center;
  gap:18px !important;padding:0 22px !important;position:sticky;top:0;z-index:50;
  box-shadow:0 2px 8px rgba(0,0,0,.08);font-family:'Quicksand','Nunito',system-ui,sans-serif;
}
nav.gn a{text-decoration:none}
nav.gn .gn-logo{display:flex;flex-shrink:0}
nav.gn .gn-logo img{height:54px;width:auto;background:none !important;border-radius:0;padding:0 !important;display:block}
nav.gn .gn-main,nav.gn .gn-side{display:flex;align-items:center;gap:18px}
nav.gn .gn-side{margin-left:auto;gap:10px}
nav.gn .gn-t{color:#2E4964;font:700 14px 'Quicksand','Nunito',system-ui,sans-serif;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
nav.gn .gn-t:hover{color:#B08900}
nav.gn .gn-t img{width:22px;height:22px}
nav.gn .gn-pill{font:700 14px 'Quicksand','Nunito',system-ui,sans-serif;padding:8px 16px;border-radius:99px;box-shadow:0 2px 8px rgba(0,0,0,.14);white-space:nowrap;transition:filter .12s}
nav.gn .gn-pill:hover{filter:brightness(1.06)}
nav.gn .gn-lib{background:#FFDA70;color:#4A3808}
nav.gn .gn-cta{background:#8A63E8;color:#fff;display:inline-flex;align-items:center;gap:7px;padding:10px 18px}
nav.gn .gn-cta img{width:20px;height:20px}
nav.gn .gn-ico{width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
nav.gn .gn-ico:hover{background:#F3E9D6}
nav.gn .gn-ico img{width:22px;height:22px}
/* hover label under the icon-only links (owner 2026-10-17) */
nav.gn .gn-ico[data-tip]{position:relative}
nav.gn .gn-ico[data-tip]::after{content:attr(data-tip);position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%,-4px);background:#2E4964;color:#fff;font:700 12.5px 'Quicksand','Nunito',system-ui,sans-serif;white-space:nowrap;padding:6px 10px;border-radius:8px;box-shadow:0 6px 14px rgba(0,0,0,.18);opacity:0;pointer-events:none;transition:opacity .12s,transform .12s;z-index:70}
nav.gn .gn-ico[data-tip]:hover::after,nav.gn .gn-ico[data-tip]:focus-visible::after{opacity:1;transform:translate(-50%,0)}
nav.gn .gn-lang{display:inline-flex}
nav.gn .gn-lang .ghalm>button{border:1.5px solid #E3D6BC;border-radius:99px;padding:6px 12px 6px 8px;font-size:14px}
nav.gn .gn-lang .ghalm>button .flimg{width:22px;height:22px;border-radius:50%}
nav.gn .gn-me{position:relative;flex-shrink:0}
nav.gn .gn-av{all:unset;cursor:pointer;width:40px;height:40px;border-radius:50%;background:#2E4964;color:#fff;font:800 16px 'Quicksand','Nunito',system-ui,sans-serif;display:grid;place-items:center;box-shadow:0 0 0 3px #FFF8EE,0 0 0 5px #CFE1F2}
nav.gn .gn-av:focus-visible{outline:3px solid #B08900;outline-offset:3px}
/* reader badge in place of the initial (owner 2026-10-17) */
nav.gn .gn-av.gn-av-b{background:none;box-shadow:none;border-radius:12px;width:48px;height:48px;overflow:hidden}
nav.gn .gn-av.gn-av-b img{width:100%;height:100%;display:block}
nav.gn .gn-av.gn-av-b:hover img{transform:scale(1.06)}
nav.gn .gn-av.gn-av-b img{transition:transform .14s}
/* the badge hops once in a while (owner 2026-10-17): one small double hop every 14 s */
nav.gn .gn-av.gn-av-b{animation:gnHop 14s ease-in-out 5s infinite}
@keyframes gnHop{0%,90%,100%{transform:none}92.5%{transform:translateY(-7px)}95%{transform:none}96.5%{transform:translateY(-3px)}98%{transform:none}}
nav.gn .gn-menu{position:absolute;right:0;top:calc(100% + 12px);background:#fff;border:1px solid #EADFC8;border-radius:14px;box-shadow:0 12px 28px rgba(0,0,0,.16);min-width:230px;padding:8px;z-index:60;display:grid}
nav.gn .gn-menu[hidden]{display:none}
nav.gn .gn-mh{padding:8px 12px 10px;border-bottom:1px solid #F0E6D2;margin-bottom:6px}
nav.gn .gn-mh b{display:block;font:800 14.5px 'Quicksand','Nunito',system-ui,sans-serif;color:#2E4964}
nav.gn .gn-mh span{font-size:12.5px;color:#6A7686}
nav.gn .gn-menu a,nav.gn .gn-menu button{all:unset;cursor:pointer;padding:9px 12px;border-radius:9px;font:700 14px 'Quicksand','Nunito',system-ui,sans-serif;color:#2E4964}
nav.gn .gn-menu a.gn-set{display:flex;align-items:center;gap:10px}
nav.gn .gn-menu a.gn-set>img{width:24px;height:24px;display:block}
nav.gn .gn-mb img{width:24px;height:24px;border-radius:6px;display:block}
nav.gn .gn-menu a:hover,nav.gn .gn-menu button:hover,nav.gn .gn-menu a:focus-visible,nav.gn .gn-menu button:focus-visible{background:#FFF4DF}
nav.gn .gn-menu .gn-out{color:#A0442F}
nav.gn .gn-burger{display:none;width:42px;height:42px;border-radius:10px;border:1.5px solid #E3D6BC;background:none;color:#2E4964;font-size:20px;cursor:pointer;flex-shrink:0}
nav.gn .gn-drawer{display:none}
/* the family "Studying:" chip (gha-shared.js) sits beside the initial instead of mid-bar */
nav.gn > #gha-nav-who{position:static !important;transform:none !important;order:9;flex-shrink:0}

/* ---- state switches ---- */
nav.gn [data-show]{display:none !important}
nav.gn[data-gn="out"] [data-show~="out"],
nav.gn[data-gn="in"]  [data-show~="in"],
nav.gn[data-gn="sub"] [data-show~="sub"],
nav.gn[data-gn="lic"] [data-show~="lic"]{display:inline-flex !important}
nav.gn[data-gn] .gn-drawer [data-show]{display:none !important}
nav.gn[data-gn="out"] .gn-drawer [data-show~="out"],
nav.gn[data-gn="in"]  .gn-drawer [data-show~="in"],
nav.gn[data-gn="sub"] .gn-drawer [data-show~="sub"],
nav.gn[data-gn="lic"] .gn-drawer [data-show~="lic"]{display:flex !important}

/* ---- the menu: one ☰ menu on every screen (owner 2026-10-17: desktop moves Search, Help and Our Approach
   into it too); a card under the bar on desktop, full width on phones; the badge opens the same menu ---- */
nav.gn .gn-burger{display:grid;place-items:center}
nav.gn .gn-menu{display:none !important}
nav.gn.gn-open .gn-drawer{display:grid;position:absolute;top:calc(100% + 8px);right:16px;width:360px;border-radius:16px;overflow:hidden;background:#FFF8EE;border:1px solid #EADFC8;box-shadow:0 14px 30px rgba(0,0,0,.25);max-height:calc(100vh - 110px);overflow-y:auto;padding-bottom:env(safe-area-inset-bottom,0px)}
nav.gn .gn-gh{font:800 11px 'Quicksand','Nunito',system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#8A7A55;padding:14px 22px 6px}
nav.gn .gn-drawer a,nav.gn .gn-drawer .gn-row{display:flex;align-items:center;gap:12px;min-height:52px;padding:0 22px;border-top:1px solid rgba(46,68,89,.09);color:#2E4964;font:700 16px 'Quicksand','Nunito',system-ui,sans-serif;background:none;border-left:0;border-right:0;border-bottom:0;width:100%;text-align:left;cursor:pointer}
nav.gn .gn-drawer a img{width:24px;height:24px}
nav.gn .gn-dot{width:24px;height:24px;border-radius:50%;flex-shrink:0}
nav.gn .gn-acct{display:flex;align-items:center;gap:12px;padding:14px 22px;background:#FFF1D6}
/* the header is the way to Settings & Plan: badge, name and the label all lead to account.html (owner 2026-10-17) */
nav.gn .gn-drawer a.gn-acct{min-height:0;padding:14px 22px;border-top:0;background:#FFF1D6;font:inherit;color:#2E4964}
nav.gn .gn-drawer a.gn-acct:hover{background:#FFE9C2}
nav.gn .gn-acct-t{flex:1;min-width:0}
nav.gn .gn-acct-go{flex:none;display:inline-flex;align-items:center;gap:6px;font:700 13.5px 'Quicksand','Nunito',system-ui,sans-serif;color:#2E4964;background:#fff;border:1.5px solid #EADFC8;border-radius:99px;padding:7px 12px;white-space:nowrap}
nav.gn .gn-acct-go i{font-style:normal;font-size:17px;line-height:1;color:#B08900}
nav.gn .gn-drawer a.gn-acct:hover .gn-acct-go{border-color:#D8B96A}
nav.gn .gn-acct b{display:block;font:800 15px 'Quicksand','Nunito',system-ui,sans-serif}
nav.gn .gn-acct small{color:#6A7686;font-size:12.5px}
nav.gn .gn-langrow{padding:10px 22px 18px;border-top:1px solid rgba(46,68,89,.09)}
nav.gn .gn-drawer .gn-out{color:#A0442F}
@media (max-width:1100px){
  nav.gn.gn-open .gn-drawer{top:100%;left:0;right:0;width:auto;border-radius:0;border:0;border-bottom:1px solid rgba(201,162,39,.35);max-height:calc(100vh - 70px)}
}
/* ---- phone and tablet: logo, button, initial, menu ---- */
@media (max-width:1100px){
  html body > nav.gn{height:auto !important;min-height:66px;padding:8px 14px !important;gap:10px !important}
  nav.gn .gn-logo img{height:42px !important;padding:0 !important;border-radius:0}
  /* Library + Report Card stay in the bar beside the logo; the rest of the row goes to the drawer (owner 2026-10-17) */
  nav.gn .gn-main{gap:8px}
  nav.gn .gn-main a.gn-t{display:none !important}
  nav.gn .gn-main .gn-pill{padding:7px 12px;font-size:13px}
  nav.gn .gn-side > .gn-ico,nav.gn .gn-side > .gn-lang,nav.gn .gn-side > .gn-signin{display:none !important}
  nav.gn .gn-side{gap:8px}
  nav.gn .gn-cta{padding:8px 13px;font-size:13px}
  nav.gn .gn-cta img{width:17px;height:17px}
  nav.gn .gn-av{width:34px;height:34px;font-size:14px}
  nav.gn .gn-av.gn-av-b{width:42px;height:42px}
}
/* Report Card is a text item with its icon (owner 2026-10-17); on phones and tablets it lives in the drawer,
   so Subscribe / Sign up always keep their place in the bar (sign-ups come first) */
nav.gn[data-gn] .gn-drawer a.gn-rcrow{display:none !important}
@media (max-width:1100px){
  nav.gn[data-gn="in"] .gn-drawer a.gn-rcrow,
  nav.gn[data-gn="sub"] .gn-drawer a.gn-rcrow,
  nav.gn[data-gn="lic"] .gn-drawer a.gn-rcrow{display:flex !important}
}
@media (max-width:400px){
  html body > nav.gn{padding:8px 10px !important;gap:8px !important}
  nav.gn .gn-logo img{height:38px !important}
  nav.gn .gn-main{gap:6px}
  nav.gn .gn-main .gn-pill{padding:6px 10px;font-size:12.5px}
  nav.gn .gn-side{gap:6px}
}
@media (max-width:380px){
  nav.gn .gn-cta img{display:none}
}
/* desktop: Report Card sits in the bar, so without My PDFs the Account group is empty — drop its heading */
@media (min-width:1101px){
  nav.gn[data-gn="in"] .gn-drawer .gn-acct-h,nav.gn[data-gn="sub"] .gn-drawer .gn-acct-h{display:none !important}
}
@media (prefers-reduced-motion:reduce){nav.gn .gn-pill{transition:none}nav.gn .gn-av.gn-av-b{animation:none}}