/* Picker is moved into the topbar via JS so it doesn't sit on top of
     the existing nav buttons. Default position is offscreen; .lang-picker.in-nav
     resets layout for inline rendering inside .ui-topbar-right. */
  .lang-picker{position:absolute;left:-9999px;top:-9999px;font-family:inherit}
  /* 2026-08-12, per the founder: the CLOSED pill is a flag and nothing else. It
     used to read "English" beside the flag at every width above 720px,
     which spent the widest label in the topbar rail saying the thing the
     flag already says, in the language the reader can obviously already
     read. The flag-only treatment below is not new. it was the phone
     arm of the old @media block, and this promotes it to every width.
     The OPEN native list still carries full language names, which is
     where a name is actually load-bearing (you cannot pick a language
     you cannot read the name of), and the select keeps its aria-label.

     Mechanically: the pill chrome moves onto the WRAPPER and the select
     becomes a transparent hit target laid over it, because a <select>
     cannot be styled down to a bare glyph across engines. The flag text
     comes from data-flag, which the change handler mirrors off the
     selected option. */
  .lang-picker.in-nav{
    position:relative;left:auto;top:auto;
    display:inline-flex;align-items:center;justify-content:center;gap:3px;
    min-width:44px;min-height:36px;padding:0 9px;
    border-radius:14px;border:1px solid var(--border);
    background:rgba(255,255,255,.04);cursor:pointer;
    transition:border-color .16s ease
  }
  .lang-picker.in-nav:hover{border-color:rgba(255,255,255,.28)}
  .lang-picker.in-nav::before{
    content:attr(data-flag);font-size:1.02rem;line-height:1;
    /* One flag per language, so no tracking hack is needed here. The
       negative letter-spacing that used to live on this rule existed
       only to stop the two-flag English pair widening the pill past
       its neighbours. */
    white-space:nowrap;pointer-events:none
  }
  /* Chevron survives the label. Without it a lone flag reads as decoration
     rather than a control, and nothing else on the bar says it opens. */
  .lang-picker.in-nav::after{
    content:"";width:8px;height:5px;flex:none;opacity:.5;pointer-events:none;
    background:currentColor;
    -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><polyline points='1.5 2 6 6 10.5 2' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
    mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><polyline points='1.5 2 6 6 10.5 2' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain
  }
  #langPickerSel{
    position:absolute;inset:0;width:100%;height:100%;
    appearance:none;-webkit-appearance:none;
    max-width:none;font-size:0;padding:0;margin:0;box-sizing:border-box;
    opacity:0;border:none;background:none;cursor:pointer;font-family:inherit;
  }
  #langPickerSel option{font-size:.78rem}
  /* Google Translate strips */
  .goog-te-banner-frame.skiptranslate,.goog-te-gadget-icon{display:none!important}
  body{top:0!important}
  .goog-tooltip,.goog-tooltip:hover{display:none!important}
  .goog-text-highlight{background:transparent!important;box-shadow:none!important}
  #google_translate_element{display:none}