/* Language picker shared by every page: a pill in the footer opening an anchored
   panel on wide screens and a bottom sheet on phones. */
.language-trigger {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 0 18px 0 15px;
  border: 1px solid #ffffff1c;
  border-radius: 999px;
  background: #262628;
  box-shadow: 0 0 0 4px #ffffff08;
  color: #f2f2f4;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background .22s ease, border-color .22s ease;
}
.language-trigger:hover, .language-trigger[aria-expanded="true"] { background: #303033; border-color: #ffffff30; }
.language-trigger:focus-visible { outline: 2px solid #b318ff; outline-offset: 4px; }
.language-globe { flex-shrink: 0; color: #c8c8cd; }
.language-region { color: #9c9ca3; font-weight: 400; }
.footer-language noscript a { display: block; margin-top: 8px; color: #f5f5f7; }

.language-panel {
  position: fixed;
  inset: auto var(--language-right, 24px) var(--language-bottom, 24px) auto;
  width: min(340px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #ececf0;
  overflow: visible;
}
.language-panel[open] { display: flex; flex-direction: column; gap: 8px; }
.language-panel::backdrop { background: #0000008c; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.language-sheet {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid #ffffff14;
  border-radius: 18px;
  background: #212123;
  box-shadow: 0 24px 70px #00000080;
  overflow: hidden;
}
.language-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 16px 14px 24px;
  border-bottom: 1px solid #ffffff14;
}
.language-head h2 { margin: 0; color: #fff; font-size: 15px; font-weight: 500; letter-spacing: -.01em; line-height: 1.3; }
.language-close {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: #3a3a3d;
  color: #fff;
  cursor: pointer;
  transition: background .2s ease;
}
.language-close:hover { background: #4a4a4e; }
.language-list {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 8px;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #ffffff30 transparent;
}
.language-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 12px 11px 16px;
  border-radius: 12px;
  color: #fff;
  text-decoration: none;
  transition: background .18s ease;
}
.language-option:hover, .language-option:focus-visible { background: #ffffff0f; }
.language-option:focus-visible { outline: 2px solid #b318ff; outline-offset: -2px; }
.language-names { display: grid; gap: 3px; min-width: 0; }
.language-native { font-size: 15px; font-weight: 500; line-height: 1.3; }
.language-native span { margin-left: 5px; color: #9c9ca3; font-weight: 400; }
.language-local { color: #b7b7bd; font-size: 12px; line-height: 1.3; }
.language-check {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.language-option[aria-current="true"] .language-check { background: #f5f5f7; color: #111113; }
.language-empty { margin: 0; padding: 4px 24px 22px; color: #9c9ca3; font-size: 14px; }
.language-search {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  min-height: 50px;
  padding: 0 22px;
  border: 1px solid #ffffff14;
  border-radius: 999px;
  background: #212123;
  color: #b7b7bd;
  cursor: text;
}
.language-search:focus-within { border-color: #b318ff; }
.language-search input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font: inherit;
  font-size: 15px;
  outline: none;
}
.language-search input::placeholder { color: #8e8e95; }
.language-search input::-webkit-search-cancel-button { filter: invert(1) opacity(.6); }

.language-panel[open] { animation: language-rise .26s cubic-bezier(.2, .8, .2, 1); transform-origin: bottom right; }
.language-panel[open]::backdrop { animation: language-fade .26s ease; }
.language-panel.closing { animation: language-fall .18s ease forwards; }
.language-panel.closing::backdrop { animation: language-fade .18s ease reverse forwards; }
@keyframes language-rise { from { opacity: 0; transform: translateY(10px) scale(.97); } }
@keyframes language-fall { to { opacity: 0; transform: translateY(10px) scale(.97); } }
@keyframes language-fade { from { opacity: 0; } }

/* Phones: a full-width sheet anchored to the bottom, large touch targets, and
   the search field kept inside the sheet above the home indicator. */
@media (max-width: 600px) {
  .language-trigger { min-height: 44px; }
  .language-panel {
    inset: auto 0 0 0;
    width: 100%;
    max-height: 88dvh;
  }
  .language-panel[open] { gap: 0; }
  .language-sheet {
    flex: 1 1 auto;
    border-width: 1px 0 0;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -16px 50px #00000080;
  }
  .language-sheet::before {
    content: "";
    align-self: center;
    width: 38px;
    height: 5px;
    margin-top: 8px;
    border-radius: 3px;
    background: #ffffff38;
  }
  .language-head { padding: 10px 16px 14px 20px; }
  .language-close { width: 38px; height: 38px; }
  .language-list { padding: 8px 10px; }
  .language-option { min-height: 60px; padding: 12px 12px 12px 14px; }
  .language-native { font-size: 16px; }
  .language-local { font-size: 13px; }
  .language-search {
    margin: 0;
    min-height: 0;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    border-width: 1px 0 0;
    border-radius: 0;
    border-color: #ffffff14;
    background: #212123;
  }
  .language-search:focus-within { border-color: #ffffff14; }
  .language-search input {
    min-height: 46px;
    padding: 0 16px;
    border-radius: 999px;
    background: #2e2e31;
    font-size: 16px; /* Avoids the iOS zoom on focus. */
  }
  .language-search { position: relative; }
  .language-search > svg { position: absolute; left: 30px; bottom: calc(27px + env(safe-area-inset-bottom)); pointer-events: none; }
  .language-search input { padding-left: 40px; }
  .language-panel[open] { animation-name: language-slide; }
  .language-panel.closing { animation-name: language-slide-out; }
  @keyframes language-slide { from { transform: translateY(100%); } }
  @keyframes language-slide-out { to { transform: translateY(100%); } }
}

html.language-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .language-panel[open], .language-panel.closing,
  .language-panel[open]::backdrop, .language-panel.closing::backdrop { animation: none; }
  .language-trigger, .language-option, .language-close { transition: none; }
}