/* Language switcher (shared by every page: landing pages + session.html).
   Loaded after style.css - relies on its .icon-btn / .icon classes.
   Language picker.
   Narrow screens: bottom sheet sliding up. Wide screens (>= 600px, the
   first responsive breakpoint in this project): centered modal. Surface
   styling is the same frosted-glass recipe as .duration / .icon-btn. */

.lang-overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0s linear 0.28s;
}

.lang-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.28s ease, visibility 0s;
}

.lang-sheet {
  width: 100%;
  max-width: 30rem;
  /* Tall enough for all seven 48px rows without scrolling on a normal phone
     (~430px incl. handle + safe area); only very short screens scroll. */
  max-height: 60vh;
  max-height: 60dvh;
  display: flex;
  flex-direction: column;
  padding: 0 0.75rem calc(0.75rem + env(safe-area-inset-bottom));
  border-radius: 1.75rem 1.75rem 0 0;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: none;
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.lang-overlay.is-open .lang-sheet {
  transform: translateY(0);
}

.lang-sheet.is-dragging {
  transition: none;
}

/* Swipe-down handle. Big touch target, small visible bar. */
.lang-grabber {
  flex: none;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 1.75rem;
  cursor: grab;
  touch-action: none;
}

.lang-grabber span {
  width: 2.5rem;
  height: 0.25rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.3);
}

.lang-list {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  overflow-y: auto;
  touch-action: pan-y;
  overscroll-behavior: contain;
}

.lang-option {
  flex: none;
  min-height: 48px;
  padding: 0 1.25rem;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--fg);
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 400;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}

.lang-option:active {
  transform: scale(0.98);
}

.lang-option:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: -2px;
}

/* Active language: the semi-transparent white pill, same family as the
   pressed/active state of the stepper buttons. */
.lang-option.is-active {
  background: rgba(255, 255, 255, 0.16);
  font-weight: 500;
}

@media (min-width: 600px) {
  .lang-overlay {
    align-items: center;
  }

  .lang-sheet {
    width: 20rem;
    max-height: 90vh;
    padding: 0.75rem;
    border-radius: 1.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transform: scale(0.94);
    opacity: 0;
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
  }

  .lang-overlay.is-open .lang-sheet {
    transform: scale(1);
    opacity: 1;
  }

  .lang-grabber {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lang-overlay,
  .lang-sheet {
    transition-duration: 0.01s;
  }
}


/* The globe button: identical position, size and look on every page. Absolute
   (not fixed) so it scrolls away with landing pages, like the old text links,
   and sits in the same corner as the home button on the app screen. */
.lang-corner {
  position: absolute;
  z-index: 5;
  top: calc(1.5rem + env(safe-area-inset-top));
  right: calc(1.5rem + env(safe-area-inset-right));
}