/* Language dropdown — the landing pages and every module page that ships the
   Fan Zone top bar (header.bar). js/lang-dropdown.js wraps the <ul id="switcher">
   the page fills (PageLang.renderSwitcher or quiz_remote.js) into .lang-dd and
   adds the trigger button. Load it after landingb.min.css / page-bar.min.css.

   Selectors go through `.lang-dd.lang-dd #switcher` and the display rules carry
   !important on purpose: page-bar.css styles the flags through `header.bar
   #switcher`, and lang-switcher.css forces `display:flex !important`. */
.bar:has(.lang-dd.open){z-index:60}
.lang-dd{position:relative;flex:0 0 auto;z-index:20}
.lang-dd[hidden]{display:none !important}
/* trigger: the current flag, same squircle ring as before, plus a chevron */
.lang-dd.lang-dd .lang-dd__btn{display:flex;align-items:center;justify-content:flex-end;gap:6px;width:auto !important;min-width:0 !important;height:44px;
  padding:0 !important;margin:0;border-radius:0;cursor:pointer;font:inherit;line-height:1;
  color:var(--ink,var(--secondary-color)) !important;background:none !important;border:0 !important;
  box-shadow:none !important}
/* !important above: the form pages ship a blanket `button{… !important}` rule
   (selfiecam / quiz_remote sheets) that painted the trigger as a submit button. */
.lang-dd.lang-dd .lang-dd__btn img{width:34px;height:34px;max-width:none;margin:0;display:block;object-fit:cover;
  border-radius:50%;corner-shape:squircle;border:3px solid var(--primary-color);opacity:1;filter:none}
:root[data-theme="light"] .lang-dd.lang-dd .lang-dd__btn img{border-color:var(--secondary-color)}
.lang-dd.lang-dd .lang-dd__btn svg{display:block !important;width:14px;height:14px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .18s}
.lang-dd.lang-dd.open .lang-dd__btn svg{transform:rotate(180deg)}
/* the list the page renders, turned into the menu panel */
.lang-dd.lang-dd #switcher{position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:20;
  display:flex !important;visibility:hidden;opacity:0;pointer-events:none;flex-direction:column !important;flex-wrap:nowrap;align-items:stretch;justify-content:flex-start;gap:2px;
  width:max-content !important;min-width:176px;max-width:80vw;max-height:60vh;overflow-y:auto;margin:0;padding:6px;
  list-style:none;border-radius:16px;
  background:color-mix(in srgb,var(--background-color,#0b0f17) 92%,var(--ink,var(--secondary-color)));
  border:1px solid color-mix(in srgb,var(--ink,var(--secondary-color)) 16%,transparent);
  box-shadow:0 14px 34px rgba(0,0,0,.42);transition:opacity .14s}
/* Closed is visibility, not display:none — assets/js/i18n.js only keeps a fan's
   stored language when the page renders a flag for it (screenupLangOffered
   reads getClientRects), so an undisplayed list reset the choice on reload. */
.lang-dd.lang-dd.open #switcher{visibility:visible;opacity:1;pointer-events:auto}
/* trigger too close to the inline-start edge for a panel hung from its end */
.lang-dd.lang-dd--start #switcher{inset-inline-end:auto;inset-inline-start:0}
.lang-dd.lang-dd #switcher li{display:block !important;float:none;flex:0 0 auto;margin:0 !important;padding:0;width:auto !important;list-style:none}
.lang-dd.lang-dd #switcher li a{display:flex;position:static !important;float:none;align-items:center;gap:10px;padding:7px 10px 7px 7px;margin:0;
  width:auto;height:auto;line-height:1.2;border-radius:11px;corner-shape:round;overflow:visible;
  text-decoration:none;text-transform:none;letter-spacing:0;text-align:start;
  color:var(--ink,var(--secondary-color));font-family:var(--secondary-font-family);font-weight:600;
  font-size:15px}
.lang-dd.lang-dd #switcher li a:hover{background:color-mix(in srgb,var(--ink,var(--secondary-color)) 8%,transparent)}
.lang-dd.lang-dd #switcher li a.active{background:color-mix(in srgb,var(--primary-color) 16%,transparent)}
.lang-dd.lang-dd #switcher li img{width:30px;height:30px;max-width:none;margin:0;display:block;flex:0 0 auto;
  object-fit:cover;border-radius:50%;corner-shape:squircle;
  border:2px solid color-mix(in srgb,var(--primary-color) 55%,transparent);opacity:1;transform:none;filter:none}
.lang-dd.lang-dd #switcher li a.active img{border-color:var(--primary-color);transform:none;box-shadow:none}
.lang-dd.lang-dd #switcher li img:hover{transform:none}
.lang-dd__name{flex:1 1 auto;white-space:nowrap}
.lang-dd.lang-dd .lang-dd__tick{display:block !important;width:16px;height:16px;flex:0 0 auto;fill:none;stroke:var(--ink,var(--primary-color));
  stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;visibility:hidden}
.lang-dd.lang-dd #switcher li a.active .lang-dd__tick{visibility:visible}