/* learn-header.css — the Learn header, drawn like the rest of acult.
   ------------------------------------------------------------------------
   The other acult pages (blog, help centre, pricing) share one header:
   the mark with its section name beside it, the site links, a light/dark
   button, the EN / हिं pill with a gold selection, and a red "Open acult"
   button on the far right. Learn had drifted — a navy uppercase button, a
   navy language pill, no section name, and different links on different
   notes. This sheet brings it in line. It loads last, and everything is
   scoped to the header so the footer's copy of the button is untouched. */

header{
  background:color-mix(in srgb, var(--void) 78%, transparent);
  backdrop-filter:saturate(1.5) blur(18px);-webkit-backdrop-filter:saturate(1.5) blur(18px);
}
header .nav{min-height:68px;padding-block:12px;gap:14px}
header .logo img{height:28px}

/* the section name, after a hairline, as on the blog and help centre */
header .logo-sec{
  flex:0 0 auto;display:flex;align-items:center;align-self:center;
  padding-left:14px;margin-left:-2px;border-left:1px solid var(--line);
  height:20px;line-height:1;
  font-family:var(--font-body);font-size:14px;font-weight:600;letter-spacing:0;
  color:var(--muted);text-decoration:none;white-space:nowrap;transition:color .2s;
}
header .logo-sec:hover{color:var(--ink)}
body[data-lang="both"] header .logo-sec .hi{display:none}

/* site links */
header .nav-links{gap:6px;margin-left:auto}
header .nav-links a{
  font-family:var(--font-body);font-size:14.5px;font-weight:500;letter-spacing:0;
  color:var(--body);padding:8px 12px;border-radius:10px;transition:color .2s,background .2s;
}
header .nav-links a:hover{color:var(--ink);background:var(--line-2)}
header .nav-links a[aria-current="page"]{color:var(--ink);font-weight:600;background:var(--line-2)}

header .ctl{gap:10px}

/* light / dark */
header .themeb{width:40px;height:40px;border-radius:12px;color:var(--ink)}
header .themeb:hover{border-color:var(--ctl-line,var(--line));color:var(--ink)}
header .themeb svg{width:18px;height:18px}

/* EN / हिं — gold selection, as on every other page */
header .lang{padding:3px;gap:2px}
header .lang button{
  font-family:var(--font-body);font-size:11.5px;font-weight:700;letter-spacing:.06em;
  padding:7px 12px;color:var(--muted);
}
header .lang button.on{background:#F4B860;color:#221641}
html[data-theme="light"] header .lang button.on{background:#A8720E;color:#fff}

/* Open acult — the red button every acult header ends with */
header .appbtn{
  margin-left:0;height:40px;padding:0 20px;border-radius:12px;border:0;gap:0;
  background:linear-gradient(135deg,#d0243f,#9d1a44);color:#fff;
  font-family:var(--font-body);font-size:14px;font-weight:700;
  letter-spacing:0;text-transform:none;
  box-shadow:0 10px 24px -12px #d0243f;
  transition:transform .15s,box-shadow .15s,filter .15s;
}
header .appbtn svg{display:none}
header .appbtn:hover{background:linear-gradient(135deg,#d0243f,#9d1a44);color:#fff;filter:brightness(1.06);
  transform:translateY(-1px);box-shadow:0 14px 28px -12px #d0243f}
header .appbtn:focus-visible{outline:2px solid #F4B860;outline-offset:2px}
html:not([data-theme="light"]) header .appbtn{background:linear-gradient(135deg,#ff4d6a,#c2275b);box-shadow:0 10px 24px -12px #ff4d6a}

/* the progress chips that Learn adds at the start of the controls keep the
   row's height */
header .profb,header .xp-pill{height:40px;box-sizing:border-box}

/* Tablets and small laptops: the links go behind the menu button rather
   than squeezing the row. Same menu as the phone layout. */
@media(max-width:1120px){
  header .nav{position:relative}
  header .nav-links{display:none}
  header .ctl{margin-left:auto}
  header .navburger{
    display:grid;place-items:center;flex:0 0 auto;
    width:40px;height:40px;border-radius:12px;
    border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer;
  }
  header .navburger svg{width:18px;height:18px}
  header .navburger[aria-expanded="true"]{border-color:var(--ctl-line,var(--line))}
  header .ctl .navburger{order:9}
  header .navmenu{
    display:block;position:absolute;top:calc(100% - 6px);right:26px;
    min-width:220px;padding:6px;border-radius:14px;z-index:70;
    background:var(--panel);border:1px solid var(--line);
    box-shadow:0 18px 44px rgba(0,0,0,.25);
    opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity .16s,transform .16s,visibility .16s;
  }
  header .navmenu.open{opacity:1;visibility:visible;transform:none}
  header .navmenu-item{
    display:flex;align-items:center;gap:10px;padding:0 12px;height:42px;border-radius:9px;
    font-family:var(--font-body);font-size:14.5px;font-weight:500;color:var(--ink);
    text-decoration:none;white-space:nowrap;background:none;border:0;box-shadow:none;
    width:auto;justify-content:flex-start;letter-spacing:0;text-transform:none;
  }
  header .navmenu-item:hover{background:var(--line-2);transform:none;filter:none}
  header .navmenu-item svg{display:none}
  header .navmenu-item .lbl{display:inline}
  header .navmenu-item[aria-current="page"]{font-weight:700}
  /* the copy of Open acult in the menu is a plain row, in the brand red */
  header .navmenu-item.appbtn,header .navmenu a[href="/"]:last-child{color:var(--brand);font-weight:700}
}

/* Phones: mark, progress, light/dark, language and the menu. Open acult
   lives in the menu (the mark also goes back to the app). */
@media(max-width:640px){
  header .nav{min-height:62px;padding-block:10px;gap:8px}
  header .logo img{height:24px}
  header .logo-sec{display:none}
  header .nav .appbtn{display:none}
  header .ctl{gap:6px}
  header .themeb,header .navburger{width:34px;height:34px;border-radius:999px}
  header .themeb svg,header .navburger svg{width:16px;height:16px}
  header .profb,header .xp-pill{height:34px}
  header .lang{padding:2px;gap:1px}
  header .lang button{padding:6px 9px;font-size:10.5px;letter-spacing:.04em}
  header .navmenu{right:16px}
}
@media(max-width:380px){
  header .logo img{height:21px}
  header .ctl{gap:4px}
  header .themeb,header .navburger{width:32px;height:32px}
  header .profb,header .xp-pill{height:32px}
  header .lang button{padding:5px 7px}
  header .navmenu{right:14px}
}
/* the narrowest phones: the study-progress star steps out (the Jigyasu chip
   beside it still shows progress) so the menu button is never cut off */
@media(max-width:360px){
  header .xp-pill{display:none}
}

/* ==========================================================================
   One row, one family (29 Oct 2026)
   - A subscriber doesn't see the site links, and they were what pushed the
     controls to the right: everything then bunched up against the logo and
     left the rest of the bar empty. The controls now hold the right edge on
     their own.
   - The controls share one shape: 40px tall, fully rounded, the same hairline
     and panel, so the row reads as a set rather than four different boxes.
   - The level chip says what it is in words — a gold star, "Jigyasu", and the
     points as "0 XP" — instead of a spaced-out code.
   ========================================================================== */
header .ctl{margin-left:auto}
header .nav-links + .ctl{margin-left:0}
html.ac-subbed header .ctl{margin-left:auto}
header .ctl{gap:8px}
header .themeb,header .lang,header .profb{height:40px;box-sizing:border-box;border:1px solid var(--line);background:var(--panel);box-shadow:0 1px 0 rgba(255,255,255,.03) inset}
html[data-theme="light"] header .themeb,html[data-theme="light"] header .lang,html[data-theme="light"] header .profb{background:#fff;border-color:rgba(22,24,58,.1);box-shadow:0 6px 16px -14px rgba(22,24,58,.5)}
header .themeb{width:40px;border-radius:999px;display:grid;place-items:center}
header .lang{border-radius:999px;display:inline-flex;align-items:center}
header .lang button{height:32px;padding:0 13px;border-radius:999px;font-size:12px}
header .appbtn{border-radius:999px;padding:0 22px;margin-left:4px}
header .themeb:hover,header .lang:hover,header .profb:hover{border-color:var(--ctl-line,var(--line))}

/* the level chip */
header .profb{display:inline-flex;align-items:center;gap:8px;padding:0 5px 0 12px;border-radius:999px;cursor:pointer}
header .profb::before{content:"";flex:none;width:15px;height:15px;background:var(--gold);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5l2.6 7.1 7.4.3-5.8 4.6 2 7.2L12 16.5l-6.2 4.2 2-7.2L2 8.9l7.4-.3z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5l2.6 7.1 7.4.3-5.8 4.6 2 7.2L12 16.5l-6.2 4.2 2-7.2L2 8.9l7.4-.3z'/%3E%3C/svg%3E") center/contain no-repeat}
header .profb-l{font:600 13.5px/1 var(--font-body);letter-spacing:0;text-transform:none;color:var(--ink)}
header .profb-l.hi{font-family:var(--font-hi);font-size:14px}
header .profb-x{display:inline-flex;align-items:center;gap:3px;height:28px;padding:0 10px;border-radius:999px;background:var(--gold-soft);color:var(--gold);font:800 12.5px/1 var(--font-body)}
header .profb-x::after{content:"XP";font-size:10px;font-weight:700;opacity:.8}
header .profb:hover .profb-x{background:color-mix(in srgb,var(--gold) 24%,transparent)}
header .profb:focus-visible,header .themeb:focus-visible,header .lang button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

@media(max-width:640px){
  header .ctl{gap:6px}
  header .themeb,header .lang,header .profb{height:34px}
  header .themeb{width:34px}
  header .lang button{height:28px;padding:0 9px;font-size:10.5px}
  header .profb{padding:0 4px 0 9px;gap:6px}
  header .profb-x{height:24px;padding:0 7px;font-size:11.5px}
  header .profb-x::after{display:none}
}
@media(max-width:380px){
  header .themeb,header .lang,header .profb{height:32px}
  header .themeb{width:32px}
  header .lang button{height:26px;padding:0 7px}
}
/* the menu button (tablets and phones) joins the set */
@media(max-width:1120px){
  header .navburger{border-radius:999px;background:var(--panel);border-color:var(--line)}
  html[data-theme="light"] header .navburger{background:#fff;border-color:rgba(22,24,58,.1);box-shadow:0 6px 16px -14px rgba(22,24,58,.5)}
}
/* the study-points pill on notes (drills and answers) — same family, its own
   mark (a target, not a second star) so it isn't read as a copy of the level chip */
header .xp-pill{height:40px;padding:0 12px 0 11px;gap:7px;border-color:var(--line);background:var(--panel);color:var(--ink)}
html[data-theme="light"] header .xp-pill{background:#fff;border-color:rgba(22,24,58,.1);box-shadow:0 6px 16px -14px rgba(22,24,58,.5)}
header .xp-pill .xp-star{display:none}
header .xp-pill::before{content:"";flex:none;width:15px;height:15px;background:var(--gold);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='4.5'/%3E%3Ccircle cx='12' cy='12' r='1' fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='4.5'/%3E%3Ccircle cx='12' cy='12' r='1' fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat}
header .xp-pill .xp-n{font:700 13px/1 var(--font-body)}
header .xp-pill:hover{border-color:var(--ctl-line,var(--line));color:var(--ink)}
@media(max-width:640px){header .xp-pill{height:34px;padding:0 9px 0 8px}}
@media(max-width:380px){header .xp-pill{height:32px}}