/* CHARUS shared compact-header language presentation.
   header.css owns the shared header base; this focused companion owns only the
   <=920px language-control geometry and interaction states. The body[data-page]
   scope keeps this system contract authoritative over legacy page CSS while
   allowing an equally scoped later page exception such as Work/Inwork's
   intentional English-only state. */
@media(max-width:920px){
  body[data-page] .mobile-language-switch{
    --language-option-x:0%;
    appearance:none;
    -webkit-appearance:none;
    display:flex;
    align-items:center;
    justify-self:start;
    width:calc(100% - 1.7rem);
    min-width:0;
    height:44px;
    min-height:44px;
    margin:.2rem .85rem 0;
    padding:0;
    border-top:1px solid color-mix(in srgb,var(--ink) 10%,transparent);
    font-size:.9rem;
    font-weight:400;
    letter-spacing:0;
    line-height:1;
    text-align:left;
  }

  body[data-page] .mobile-language-switch .language-switch__option{
    left:0;
    top:calc(50% + .05rem);
    width:auto;
  }

  body[data-page] .mobile-language-switch .language-switch__option[aria-current="true"]{
    opacity:1;
    transform:translate(var(--language-option-x),-50%);
  }

  body[data-page] .mobile-language-switch .language-switch__option[aria-current="false"]{
    opacity:0;
    transform:translate(var(--language-option-x),72%);
  }

  body[data-page] .mobile-language-switch:is(:hover,:focus-visible) .language-switch__option[aria-current="true"]{
    opacity:0;
    transform:translate(var(--language-option-x),-172%);
  }

  body[data-page] .mobile-language-switch:is(:hover,:focus-visible) .language-switch__option[aria-current="false"]{
    opacity:1;
    transform:translate(var(--language-option-x),-50%);
  }

  body[data-page] .mobile-language-switch:focus-within:not(:hover):not(:focus-visible) .language-switch__option[aria-current="true"]{
    opacity:1;
    transform:translate(var(--language-option-x),-50%);
  }

  body[data-page] .mobile-language-switch:focus-within:not(:hover):not(:focus-visible) .language-switch__option[aria-current="false"]{
    opacity:0;
    transform:translate(var(--language-option-x),72%);
  }

  body[data-page] .mobile-language-switch.is-language-commit .language-switch__option[aria-current="true"]{
    opacity:1 !important;
    transform:translate(var(--language-option-x),-50%) !important;
  }

  body[data-page] .mobile-language-switch.is-language-commit .language-switch__option[aria-current="false"]{
    opacity:0 !important;
    transform:translate(var(--language-option-x),72%) !important;
  }
}

@media(max-width:920px) and (hover:none){
  body[data-page] .mobile-language-switch:hover .language-switch__option[aria-current="true"]{
    opacity:1;
    transform:translate(var(--language-option-x),-50%);
  }

  body[data-page] .mobile-language-switch:hover .language-switch__option[aria-current="false"]{
    opacity:0;
    transform:translate(var(--language-option-x),72%);
  }

  body[data-page] .mobile-language-switch:focus-visible .language-switch__option[aria-current="true"]{
    opacity:0;
    transform:translate(var(--language-option-x),-172%);
  }

  body[data-page] .mobile-language-switch:focus-visible .language-switch__option[aria-current="false"]{
    opacity:1;
    transform:translate(var(--language-option-x),-50%);
  }
}

@media(max-width:920px) and (prefers-reduced-motion:reduce){
  body[data-page] .mobile-language-switch .language-switch__option{
    transition-duration:.01ms;
  }
}