/* The shared header (server/sitenav.js) on every page and in the app, its Library menu, and the phone tab bar.
   Colours, fonts and buttons come from base.css; the base .nav, .credits, .avatar and .menu rules live there too. */
.nav{top:env(safe-area-inset-top,0px)}
.nav-links{align-items:center}
.nav-links a{white-space:nowrap}
.nav .guestbar .btn,.nav .credits{white-space:nowrap}
.nav .acct .avatar{display:grid;place-items:center;flex:none}
/* the account's avatar (public/avatars.js); initials on the soft circle only as a fallback */
.nav .avatar.has-av{background:transparent;box-shadow:none;padding:0;overflow:hidden}
.nav .avatar svg{display:block;width:38px;height:38px}
.nav .avatar.has-av:hover svg,.nav .avatar.has-av[aria-expanded="true"] svg{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--acc-line);border-radius:50%}
.nav .menu .who:has(.who-av svg){display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:10px;align-items:center}
.nav .menu .who-av{display:none}
.nav .menu .who:has(.who-av svg) .who-av{display:block;grid-row:1/3;width:36px;height:36px}
.nav .menu .who-av svg{display:block}
.nav .menu{width:250px}
.nav .menu a{color:inherit}
.nav .menu .menu-hint{color:var(--muted);font-size:12.5px;font-weight:500}
.nav .menu #menuOut{margin-top:6px;border-top:1px solid var(--line);border-radius:0 0 8px 8px;padding-top:11px}
.nav .menu-prefs{display:none}
/* The header stays put while pages load and between pages (server/sitenav.js says how):
   - one width on every page (the practice layout in base.css is as wide), and the scrollbar's room is kept on short
     pages too, so the centred header does not move by half a scrollbar between pages (Windows draws classic scrollbars);
   - the labels whose width places the rest use the header faces below: preloaded and font-display: optional, so they
     are drawn in their final font from the first paint and never swap. Vietnamese keeps the system font (base.css). */
html{scrollbar-gutter:stable}
@font-face{font-family:'Figtree Nav';font-style:normal;font-weight:500;font-display:optional;src:url(/fonts/figtree-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Figtree Nav';font-style:normal;font-weight:500;font-display:optional;src:url(/fonts/figtree-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Figtree Nav';font-style:normal;font-weight:600;font-display:optional;src:url(/fonts/figtree-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Figtree Nav';font-style:normal;font-weight:600;font-display:optional;src:url(/fonts/figtree-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Bricolage Nav';font-style:normal;font-weight:700;font-display:optional;src:url(/fonts/bricolage-grotesque-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Mono Nav';font-style:normal;font-weight:600;font-display:optional;src:url(/fonts/jetbrains-mono-latin-600-normal.woff2) format('woff2');unicode-range:U+0030-0039}
/* the fallbacks leave out the page's own (swapping) faces: a header face that came too late must not swap in later */
:root:not(:lang(vi)) .nav-links a,:root:not(:lang(vi)) .nav .libbtn,:root:not(:lang(vi)) .nav-act>.langwrap .langbtn,:root:not(:lang(vi)) .nav .guestbar .btn,:root:not(:lang(vi)) .nav .credits{font-family:"Figtree Nav",system-ui,-apple-system,"Segoe UI",sans-serif}
:root:lang(th) .nav-links a,:root:lang(th) .nav .libbtn,:root:lang(th) .nav-act>.langwrap .langbtn,:root:lang(th) .nav .guestbar .btn,:root:lang(th) .nav .credits{font-family:"Figtree Nav","Noto Sans Thai","Leelawadee UI","Tahoma",system-ui,-apple-system,"Segoe UI",sans-serif}
:root:not(:lang(vi)) .nav .brand .brand-name{font-family:"Bricolage Nav",system-ui,sans-serif}
:root:not(:lang(vi)) .nav .credits b{font-family:"Mono Nav",ui-monospace,"SFMono-Regular",Menlo,monospace}
.login-card .railhead{display:none}
@media (max-width:1180px){.nav .credits .plus{display:none}}
.nav .brand{flex:none}
@media (max-width:1060px){.nav-links a,.nav .libbtn{padding:8px 9px}.nav .brand{margin-right:10px}}
/* tight widths before the tab bar takes over: the logo keeps its mark only */
@media (min-width:821px) and (max-width:960px){.nav .brand-name{display:none}}

/* Library ▾ (signed in): Topics, Courses, Calculators, Worksheets */
.nav .lib{position:relative}
.nav .libbtn{border:0;background:transparent;font-size:14.5px;font-weight:500;padding:8px 9px 8px 12px;border-radius:8px;color:var(--muted);display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
.nav .libbtn svg{width:14px;height:14px;flex:none}
.nav .libbtn:hover,.nav .libbtn[aria-current="page"],.nav .libbtn[aria-expanded="true"]{color:var(--ink);background:var(--soft)}
.nav .libmenu{left:0;right:auto;top:44px;width:220px}
[dir="rtl"] .nav .libmenu{left:auto;right:0}
.nav .libmenu a{display:flex;align-items:center;gap:10px}
.nav .libmenu svg{width:16px;height:16px;flex:none;color:var(--muted)}
.libmenu a[data-here],.libsheet a[data-here]{font-weight:700}
.libmenu a[data-here] svg{color:var(--acc-text)}

/* visitors on phones: language and theme behind one small button */
.nav .vprefs{position:relative;display:none}
.nav .prefsmenu{width:auto;padding:8px}
.nav .prefsmenu .menu-prefs{display:flex;align-items:center;gap:8px}
.nav .prefsmenu .langmenu,[dir="rtl"] .nav .prefsmenu .langmenu{position:fixed;top:calc(118px + env(safe-area-inset-top,0px));bottom:auto;left:16px;right:16px;width:auto;max-height:min(420px,calc(100vh - 210px))}
.nav .menu-prefs .langbtn,.nav .menu-prefs .iconbtn{width:auto;min-width:38px;height:38px;border:1px solid var(--line);border-radius:9px;background:var(--surface);padding:0 11px;display:inline-flex;align-items:center;justify-content:center;gap:7px}
.nav .menu-prefs .iconbtn{padding:0}

/* Help & feedback (public/sitenav.js) */
.help-sheet{max-width:460px}
.help-opts{display:grid;gap:8px;margin-top:10px}
.help-opt{display:block;width:100%;text-align:start;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface);text-decoration:none;color:inherit}
.help-opt:hover{border-color:var(--muted)}
.help-opt b{display:block;font-size:15px}
.help-opt span{display:block;color:var(--muted);font-size:13.5px;line-height:1.45;margin-top:3px}

/* phones and small tablets: the header keeps the logo (and, in the app, the streak) and one ☰ button; everything else
   (search, subjects or the app's topic list, the main links, the account, theme and language) is in the menu it opens */
.navmenu-btn,.navsheet{display:none}
@media (max-width:820px){
  .nav-links{display:none}
  .nav .brand{margin-right:auto;min-width:0}
  .nav-act>:not(.navmenu-btn):not(.nav-streak){display:none!important}
  .nav .navmenu-btn{display:grid;width:44px;height:44px;border:0;background:transparent;margin-inline-end:-10px;color:var(--ink)}
  .nav .navmenu-btn svg{width:22px;height:22px}
  .navsheet:not([hidden]){display:flex;flex-direction:column;position:fixed;inset:0;z-index:40;background:color-mix(in srgb,#16161D 35%,transparent)}
  .navsheet-in{background:var(--surface);border-radius:0 0 22px 22px;padding:calc(10px + env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-right,0px)) 22px max(20px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:12px;max-height:92%;overflow-y:auto;overscroll-behavior:contain;box-shadow:0 12px 30px rgba(22,22,29,.14);scrollbar-width:none}
  .navsheet-in::-webkit-scrollbar{display:none}
  .ns-shade{flex:1;min-height:40px;border:0;background:transparent}
  .ns-head{display:flex;align-items:center;gap:6px;min-height:44px}
  .ns-head .brand{margin:0;text-decoration:none;color:inherit}
  .ns-head .brand-name{display:inline}
  .ns-sp{flex:1}
  .ns-head .iconbtn{width:40px;height:40px;border-radius:10px}
  .ns-head .langbtn{height:40px;border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:0 10px;display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:14px}
  .ns-head .ns-x{border:0;background:transparent;width:44px;height:44px;margin-inline-end:-10px;margin-inline-start:4px}
  .ns-head .ns-x svg{width:22px;height:22px}
  .ns-who{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;align-items:center;padding:4px 2px}
  .ns-who b{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ns-who span{grid-row:2;font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ns-who .ns-plan{grid-row:1/3;grid-column:2;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);font-weight:600;font-size:14px}
  .ns-who .ns-plan .plus{font-size:12px;color:var(--muted);border-inline-start:1px solid var(--line);padding-inline-start:8px}
  .ns-search,.ns-browse{display:flex;align-items:center;gap:10px;width:100%;min-height:50px;padding:0 14px;border-radius:14px;border:1.5px solid var(--line);background:var(--surface);font-size:16px;text-align:start}
  .ns-search{color:var(--muted);font-weight:500}
  .ns-search svg{width:18px;height:18px;flex:none}
  .ns-browse{justify-content:space-between;font-weight:700;color:var(--ink)}
  .ns-browse svg{width:18px;height:18px;transition:transform .15s}
  .ns-browse[aria-expanded="true"] svg{transform:rotate(180deg)}
  .ns-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:8px}
  .ns-grid a{display:flex;align-items:center;min-height:38px;padding:4px 12px;border-radius:10px;border:1px solid var(--line);text-decoration:none;color:var(--ink);font-weight:600;font-size:14px;line-height:1.25}
  .ns-links{display:flex;flex-direction:column}
  .ns-links a,.ns-links button{min-height:50px;display:flex;align-items:center;border:0;border-bottom:1px solid var(--soft);background:transparent;padding:0;text-align:start;color:var(--ink);text-decoration:none;font-weight:600;font-size:17px;width:100%}
  .ns-links>:last-child{border-bottom:0}
  .ns-links [aria-current="page"]{color:var(--acc-text)}
  .ns-acct a,.ns-acct button{font-size:15.5px;min-height:46px;font-weight:500}
  .ns-btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .ns-btns .btn{min-height:50px;justify-content:center;border-radius:14px;font-size:16px;font-weight:700;text-decoration:none}
  html.ns-open{overflow:hidden}
  .consent{bottom:0}
}
/* phones: logo, search and the account; language and theme move into the account menu (visitors: the globe button) */
@media (max-width:560px){
  .nav-act{gap:6px}
  .nav-act .nav-pref{display:none}
  .nav .vprefs{display:block}
  .nav .guestbar{gap:6px}
  .nav .guestbar .btn{padding:8px 11px}
  .nav .credits{padding:0 10px}
  .nav .acct .menu-prefs{display:flex;align-items:center;gap:8px;border-top:1px solid var(--line);margin-top:6px;padding:10px 6px 4px}
  .nav .acct .menu-prefs .langmenu{right:auto;left:0;top:auto;bottom:46px}
  .login-card .railhead{display:flex;justify-content:flex-end}
  .login-card .railhead .brand{display:none}
}
@media (max-width:370px){.nav .guestbar .btn{padding:8px 9px}.nav-act{gap:5px}}
[dir="rtl"] .nav .acct .menu-prefs .langmenu{left:auto;right:0}
@media print{.nav,.navsheet{display:none!important}}
/* Topics ▾ / Courses ▾ / Calculators ▾: the full list on top, then the branches in two columns */
.nav .dropmenu{width:340px;padding:6px}
.nav .dropmenu .drop-all{font-weight:650;border-bottom:1px solid var(--line);border-radius:8px 8px 0 0;margin-bottom:4px;padding-bottom:10px}
.nav .dropmenu .drop-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 4px}
.nav .dropmenu .drop-grid a{font-size:13.5px;padding:7px 10px;line-height:1.3}



.nav.nav-tight .nav-links a,.nav.nav-tight .libbtn{padding:8px 7px}
.nav.nav-tight .nav-links{gap:0}
.nav.nav-min .brand-name{display:none}
/* the hover list of a branch, next to the branch list */
.nav .dropmenu .drop-body{display:flex;align-items:stretch}
.nav .dropmenu .drop-grid{flex:0 0 auto;width:326px;align-content:start}
.nav .dropmenu.has-fly{width:720px}
.nav .dropmenu .drop-grid a.on{background:var(--soft);color:var(--ink)}
.nav .dropmenu .drop-fly{flex:1;min-width:0;border-left:1px solid var(--line);margin-left:6px;padding-left:8px;max-height:min(420px,70vh);overflow:auto}
.nav .dropmenu .drop-fly .fly-head{font-weight:650;font-size:13.5px;padding:7px 10px}
.nav .dropmenu .drop-fly .fly-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 4px}
.nav .dropmenu .drop-fly .fly-list a{font-size:13px;padding:6px 10px;line-height:1.3;white-space:normal;overflow-wrap:anywhere}
.nav .dropmenu .drop-fly[data-kind="calculators"] .fly-list,.nav .dropmenu .drop-fly[data-kind="courses"] .fly-list{grid-template-columns:1fr}
/* the cookie question: small and out of the way. Desktop: a pill at the bottom centre, only as wide as its text;
   phones: one thin line along the bottom edge */
.consent{left:50%;right:auto;bottom:14px;transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);margin:0;padding:2px 6px 2px 16px;gap:4px 8px;flex-wrap:nowrap;border-radius:999px;border-color:var(--soft);box-shadow:0 4px 14px rgba(22,22,29,.06);font-size:12px}
.consent p{flex:0 1 auto;line-height:1.35;color:var(--muted)}
.consent a{color:var(--muted)}
.consent>div{gap:0;flex:none}
.consent .btn{border:0;background:transparent;padding:0 9px;min-height:36px;font-size:12px;font-weight:600;color:var(--muted);border-radius:999px}
.consent .btn.primary{color:var(--ink);font-weight:700;background:transparent}
.consent .btn:hover{background:var(--soft)}
@media (max-width:820px){
  .consent{left:0;right:0;bottom:0;transform:none;width:auto;max-width:none;border-radius:0;border:0;border-top:1px solid var(--soft);box-shadow:none;padding:2px max(8px,env(safe-area-inset-right,0px)) calc(2px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));font-size:11px;background:color-mix(in srgb,var(--bg) 96%,transparent)}
  .consent .btn{font-size:11.5px;min-height:40px;padding:0 8px}
}
/* phones: the header has room for the site's name again (the app shows the topic's name instead, public/study.css) */
.brand-topic{display:none}
@media (max-width:820px){.nav .brand .brand-name{display:block;overflow:hidden;text-overflow:ellipsis}}

/* answers everywhere (practice page, ad pages, topic pages, lessons): big rows with a letter badge; the right one gets a ✓ */
/* answers: big rows with a letter badge */
.choices{max-width:none;gap:10px}
.choice{min-height:64px;padding:12px 16px;border-radius:16px;gap:16px;font-size:17px;font-weight:500;box-shadow:0 1px 2px rgba(22,22,29,.04)}
.choice .k{width:38px;height:38px;border-radius:10px;font-family:var(--f-body);font-size:16px;font-weight:700;background:var(--soft);border:0;color:var(--ink)}
.choice{position:relative;overflow:hidden}
.choice .mk{display:none;width:22px;height:22px;flex:none}
.choice.good .mk{display:block;background-size:22px}
/* smooth: colours fade in, the ✓ pops in, the next question slides in (base.css #probView.enter) */
.choice{transition:background-color .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease,transform .12s ease,opacity .2s ease}
.choice:hover:not(:disabled){box-shadow:0 2px 8px rgba(22,22,29,.06)}
.choice .k{transition:background-color .2s ease,color .2s ease}
@media (prefers-reduced-motion:no-preference){.choice.good .mk{animation:mkpop .28s cubic-bezier(.3,1.6,.5,1) both}@keyframes mkpop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}}
.choice.bad{color:var(--ink)}
.choice.bad .ct{text-decoration:none}
.choice.good .k,.choice.bad .k{color:#fff}
.choice:disabled:not(.good):not(.bad):not(.out){opacity:.6}
@keyframes rbar{to{width:100%}}
@media (max-width:560px){.choice{min-height:60px;padding:11px 14px;gap:12px;font-size:16px}.choice .k{width:34px;height:34px}}
@media (prefers-reduced-motion:no-preference){
  .navsheet:not([hidden]){animation:nsFade .2s ease-out}
  .navsheet:not([hidden]) .navsheet-in{animation:nsDown .26s cubic-bezier(.2,.8,.2,1)}
  @keyframes nsFade{from{background:transparent}}
  @keyframes nsDown{from{transform:translateY(-14px);opacity:0}to{transform:none;opacity:1}}
  .consent{animation:nsUp .3s ease-out}
  @keyframes nsUp{from{opacity:0}to{opacity:1}}
}