/* Language selector (src/lib/lang-select.mjs). A <details> disclosure with real links: works without JavaScript.
   Logical properties only, so it mirrors in right-to-left languages. */
.lang-select{position:relative;display:inline-block;font-size:14px;line-height:1.2}
.lang-select details{position:relative}
.lang-select summary{list-style:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;min-width:44px;padding-inline:10px;border:1px solid var(--line,rgba(160,190,230,.25));border-radius:var(--r,10px);color:var(--ink,#eaf1fb);font-weight:600;cursor:pointer;white-space:nowrap}
.lang-select summary::-webkit-details-marker{display:none}
.lang-select summary:hover{border-color:var(--ink3,rgba(234,241,251,.56))}
.lang-select summary:focus-visible,.lang-select .ls-menu a:focus-visible{outline:2px solid var(--focus,#00aeef);outline-offset:2px}
.lang-select summary svg{width:18px;height:18px;flex:0 0 auto}
.lang-select .ls-menu{position:absolute;inset-block-start:calc(100% + 6px);inset-inline-end:0;z-index:80;min-width:200px;max-height:min(70vh,520px);overflow:auto;margin:0;padding:6px;list-style:none;background:var(--panel,#0d1f3a);border:1px solid var(--line,rgba(160,190,230,.25));border-radius:12px;box-shadow:0 24px 60px -24px #000}
.lang-select .ls-menu li{margin:0;padding:0}
.lang-select .ls-menu a{display:flex;align-items:center;min-height:44px;padding-inline:12px;border-radius:8px;color:var(--ink,#eaf1fb);text-decoration:none;font-weight:500}
.lang-select .ls-menu a:hover{background:rgba(0,174,239,.12)}
.lang-select .ls-menu a[aria-current="true"]{font-weight:700;background:rgba(0,174,239,.16)}
.lang-select .ls-menu a[aria-current="true"]::after{content:"\2713";margin-inline-start:auto;padding-inline-start:12px}
@media (max-width:640px){
  .lang-select .ls-cur{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}   /* icon only on phones; the name stays for screen readers */
  .lang-select summary{padding-inline:0;justify-content:center}
  .lang-select .ls-menu{position:fixed;inset-inline:12px;inset-block-start:64px;min-width:0}
}

/* Header fit. The top bar holds the logo, the search box, six menus, the selector, Log in / Register / Start free. At full size that
   needs about 1640px in English, 1980px in French and 1890px in Spanish (longer labels), but the bar was fixed at 1240px, so on a
   laptop the right-hand end was cut off. A rule of 1 November 2026 then hid the menus below those widths, which left most laptops
   with no menus at all. Instead the bar now tightens in steps, measured in each language with a 24px margin for scroll bars:
     1  search box as an icon (it already is at 1280px and below), menu labels closer together;
     2  also the logo without its name and the selector without its name (both stay as icons; the names stay for screen readers);
     3  also Log in and Register move into the menu sheet (as they already do at 1180px and below), and the menu button shows.
   Menus stay visible down to 1001px in English, 1240px in French, 1180px in Spanish. Below that, and in languages with no measured
   steps, the bar uses its compact form (menu button + the menu sheet) as before. */
@media (min-width:1001px) and (max-width:2099px){ .nav .wr{max-width:none} }
@media (min-width:1700px){ html:lang(en) .nav .wr{max-width:1760px} }
@media (min-width:1001px) and (max-width:1699px){
  html:lang(en) .nav .ss-trigger{min-width:0;width:42px;flex:0 0 42px;padding:0;justify-content:center}
  html:lang(en) .nav .ss-trigger .ss-label,html:lang(en) .nav .ss-trigger kbd,html:lang(en) .nav .kbd{display:none}
  html:lang(en) .nav .ni>a.nl{padding-inline:10px 2px}
  html:lang(en) .nav .ni>a:only-child{padding-inline:10px}
}
@media (min-width:1001px) and (max-width:1419px){
  html:lang(en) .nav .logo .wm,html:lang(en) .nav .lang-select .ls-cur{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  html:lang(en) .nav .logo{margin-right:6px}
}
@media (min-width:1001px) and (max-width:1180px){
  html:lang(en) .nav .burger{display:inline-flex!important;width:var(--h,44px);padding:0;font-size:20px}
}
@media (min-width:1240px) and (max-width:2099px){
  html:lang(fr) .nav .ss-trigger{min-width:0;width:42px;flex:0 0 42px;padding:0;justify-content:center}
  html:lang(fr) .nav .ss-trigger .ss-label,html:lang(fr) .nav .ss-trigger kbd,html:lang(fr) .nav .kbd{display:none}
  html:lang(fr) .nav .ni>a.nl{padding-inline:10px 2px}
  html:lang(fr) .nav .ni>a:only-child{padding-inline:10px}
}
@media (min-width:1240px) and (max-width:1749px){
  html:lang(fr) .nav .logo .wm,html:lang(fr) .nav .lang-select .ls-cur{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  html:lang(fr) .nav .logo{margin-right:6px}
}
@media (min-width:1240px) and (max-width:1489px){
  html:lang(fr) .nav .navr .btn[data-auth]{display:none}
  html:lang(fr) .nav .burger{display:inline-flex!important;width:var(--h,44px);padding:0;font-size:20px}
}
@media (min-width:1180px) and (max-width:2099px){
  html:lang(es) .nav .ss-trigger{min-width:0;width:42px;flex:0 0 42px;padding:0;justify-content:center}
  html:lang(es) .nav .ss-trigger .ss-label,html:lang(es) .nav .ss-trigger kbd,html:lang(es) .nav .kbd{display:none}
  html:lang(es) .nav .ni>a.nl{padding-inline:10px 2px}
  html:lang(es) .nav .ni>a:only-child{padding-inline:10px}
}
@media (min-width:1180px) and (max-width:1659px){
  html:lang(es) .nav .logo .wm,html:lang(es) .nav .lang-select .ls-cur{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  html:lang(es) .nav .logo{margin-right:6px}
}
@media (min-width:1180px) and (max-width:1399px){
  html:lang(es) .nav .navr .btn[data-auth]{display:none}
  html:lang(es) .nav .burger{display:inline-flex!important;width:var(--h,44px);padding:0;font-size:20px}
}
/* The compact form: French below 1240px, Spanish below 1180px, and any language without measured steps below 2100px. */
@media (min-width:1001px) and (max-width:1239px){
  html:lang(fr) .nav .ni,html:lang(fr) .nav .kbd{display:none!important}
  html:lang(fr) .nav .burger{display:inline-flex!important;width:var(--h,44px);padding:0;font-size:20px}
}
@media (min-width:1001px) and (max-width:1179px){
  html:lang(es) .nav .ni,html:lang(es) .nav .kbd{display:none!important}
  html:lang(es) .nav .burger{display:inline-flex!important;width:var(--h,44px);padding:0;font-size:20px}
}
@media (min-width:1001px) and (max-width:2099px){
  html:not(:lang(en)):not(:lang(fr)):not(:lang(es)) .nav .ni,html:not(:lang(en)):not(:lang(fr)):not(:lang(es)) .nav .kbd{display:none!important}
  html:not(:lang(en)):not(:lang(fr)):not(:lang(es)) .nav .burger{display:inline-flex!important;width:var(--h,44px);padding:0;font-size:20px}
}
@media (min-width:2100px){ html:not(:lang(en)) .nav .wr{max-width:2060px} }
/* In the compact bar the Log in and Register buttons are in the menu sheet (mobile menu script), so they leave the bar before it
   overflows; on narrow screens "Start free" goes too (it is in the sheet as well). The selector and the menu button always stay. */
@media (max-width:1180px){ .nav .navr .btn[data-auth]{display:none} }
@media (max-width:700px){ .nav .navr .btn.p{display:none} }