/* nav.css — the top menu: ONE look for every page (index, etf, series, download, account). Nothing about the menu is
   written in a page's own styles.
   The menu starts right after the logo and the sign-in area is pushed to the right edge, so the menu sits at the same
   place on every page whatever the sign-in area holds; the bar has its own width, not the page's. The page you are on
   is marked with an underline, never with a heavier font — a heavier word is wider and would move its neighbours. */
html{scrollbar-gutter:stable}
nav{position:sticky;top:0;z-index:10;background:rgba(11,14,20,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
nav .wrap{max-width:1160px;display:flex;align-items:center;height:62px;gap:0}
.logo{display:inline-flex;align-items:center;font-weight:700;font-size:1.12rem;letter-spacing:-.02em;margin-right:36px;white-space:nowrap}
.logo:before{content:"";width:22px;height:22px;border-radius:6px;flex:none;margin-right:9px;background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 11 L7 6 L10 9 L13 4' stroke='%2306111f' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.logo b{color:var(--accent);font-weight:700}
nav ul{display:flex;gap:30px;list-style:none;margin:0;padding:0;font-size:.95rem;font-weight:400;color:var(--text-2);white-space:nowrap}
nav ul a{display:block;padding:7px 0;box-shadow:inset 0 -2px 0 transparent;transition:color .15s}
nav ul a:hover{color:var(--text)}
nav ul a.on{color:var(--text);box-shadow:inset 0 -2px 0 var(--accent)}
#navAuth{margin-left:auto;padding-left:20px;font-size:.92rem;color:var(--text-2);display:flex;gap:14px;align-items:center;white-space:nowrap}
#navAuth a{color:var(--text)}
#navAuth a.btn.primary{color:var(--accent-ink)}
#navAuth .em{display:inline-block;max-width:170px;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom;color:var(--text-2)}
#navAuth .ac{display:none}
/* a narrow window: the e-mail becomes the word "Account" */
@media(max-width:1060px){#navAuth .em{display:none}#navAuth .ac{display:inline}}

/* ── the member area: its menu, one strip under the top menu on each of its pages ──────────────────────────────────
   The strip is in the page's HTML, empty, with its height — common.js writes it from ONE list (MENU) — so nothing
   moves when it arrives. It scrolls away with the page; the menu above it stays. Seven words: two are pages, five
   are families that open a short list of their pages (Sayed, 2026-10-08: "orgnize the menu with sub menu … we have
   many tab"). Same rule as the top menu: where you are is underlined, never heavier.
   A list opens under the pointer after a tenth of a second (a mouse only crossing the strip opens nothing) and on a
   click or a tap, which pins it. The Viewer's pages carry the same strip in their first line (viewer/css/style.css). */
.mbar{border-bottom:1px solid var(--line);background:var(--surface)}
.mbar .wrap{max-width:1160px;position:relative}
#tabs{display:flex;gap:2px;list-style:none;margin:0 0 0 -14px;padding:0;height:46px;font-size:.93rem;color:var(--text-2);white-space:nowrap}
#tabs>li{display:flex;position:relative}
#tabs>li>a,#tabs>li>button{display:flex;align-items:center;padding:0 12px;box-shadow:inset 0 -2px 0 transparent;transition:color .15s}
#tabs>li>button{background:none;border:0;border-radius:0;font:inherit;color:inherit;cursor:pointer}
#tabs>li>button:after{content:"";width:9px;height:6px;margin-left:7px;opacity:.7;background:currentColor;-webkit-mask:var(--chev) center/contain no-repeat;mask:var(--chev) center/contain no-repeat;transition:transform .15s}
#tabs>li>a:hover,#tabs>li>button:hover,#tabs>li.open>button{color:var(--text)}
#tabs>li>a.on,#tabs>li.on>button{color:var(--text);box-shadow:inset 0 -2px 0 var(--accent)}
#tabs>li.open>button:after{transform:rotate(180deg)}
#tabs .sub{position:absolute;top:100%;left:0;z-index:30;min-width:292px;margin:0;padding:6px;list-style:none;white-space:normal;background:var(--surface);border:1px solid var(--line-2);border-top-color:var(--line);border-radius:0 0 12px 12px;box-shadow:0 18px 40px rgba(0,0,0,.5);visibility:hidden;opacity:0;transition:opacity .12s,visibility 0s .12s}
#tabs li.open>.sub{visibility:visible;opacity:1;transition:opacity .12s}
@media(hover:hover){#tabs li.grp:hover>.sub{visibility:visible;opacity:1;transition:opacity .12s .1s,visibility 0s .1s}}
#tabs .sub a{display:block;padding:8px 12px;border-radius:8px;box-shadow:inset 2px 0 0 transparent}
#tabs .sub a:hover,#tabs .sub a:focus-visible{background:var(--surface-2)}
#tabs .sub b{display:block;font-weight:500;font-size:.95rem;line-height:1.35;color:var(--text)}
#tabs .sub span{display:block;font-size:.82rem;line-height:1.4;color:var(--muted)}
#tabs .sub a.on{background:var(--accent-soft);box-shadow:inset 2px 0 0 var(--accent)}
#tabs .sub a.on b{color:var(--accent)}
/* a page the visitor's plan does not open: a small padlock after its name */
.mbar{--lock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect x='1.5' y='5.2' width='9' height='5.8' rx='1.4'/%3E%3Cpath d='M3.7 5.2V3.8a2.3 2.3 0 0 1 4.6 0v1.4' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E");--chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
#tabs a.lk:after,#tabs .sub a.lk b:after{content:"";display:inline-block;width:11px;height:11px;margin-left:7px;opacity:.75;background:currentColor;-webkit-mask:var(--lock) center/contain no-repeat;mask:var(--lock) center/contain no-repeat}
#tabs .sub a.lk:after{content:none}
/* a narrow window: the seven words wrap instead of sliding (a sliding row would cut the lists off), and a list is as wide as the bar */
@media(max-width:640px){
  #tabs{flex-wrap:wrap;height:auto;min-height:46px;margin-left:-10px}
  #tabs>li{position:static}
  #tabs>li>a,#tabs>li>button{padding:0 10px;height:40px}
  #tabs .sub{left:0;right:0;min-width:0}
}

/* a phone: the same menu, on a second line that slides sideways */
@media(max-width:860px){
  nav .wrap{height:auto;flex-wrap:wrap;padding-top:12px}
  nav ul{order:3;width:100%;gap:22px;overflow-x:auto;padding:6px 0 8px;scrollbar-width:none}
  nav ul::-webkit-scrollbar{display:none}
}
/* a small phone: the hero carries the sign-up button, the bar keeps "Sign in" */
@media(max-width:560px){#navAuth .btn{display:none}}

/* a count beside a link of the sign-in area: the answers waiting on the support page, the conversations in the Inbox */
#navAuth .nb{display:inline-block;margin-left:6px;min-width:18px;padding:0 5px;border-radius:99px;background:var(--accent);color:var(--accent-ink);font-size:.72rem;font-weight:700;line-height:18px;text-align:center;vertical-align:1px}