/* 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, five menus, the selector, Log in / Register / Start free. In English that
   needs about 1675px, in French about 2010px and in Spanish about 1920px (longer labels), but the bar was fixed at 1240px, so on a
   laptop the right-hand end (the selector and the buttons) was cut off. Below those widths the bar uses its existing compact form
   (menu button + the mobile sheet) so the selector and the buttons stay inside the screen at the top right. */
@media (min-width:1001px) and (max-width:1699px){
  .nav .ni,.nav .kbd{display:none!important}
  .nav .burger{display:inline-flex!important;width:var(--h,44px);padding:0;font-size:20px}
}
@media (min-width:1700px){ .nav .wr{max-width:1760px} }
@media (min-width:1700px) and (max-width:2099px){
  html:not(:lang(en)) .nav .ni,html:not(:lang(en)) .nav .kbd{display:none!important}
  html:not(:lang(en)) .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} }