/* ===========================================================================
   v060 - language switch in the sidebar
   ---------------------------------------------------------------------------
   The switch already existed, but only inside the settings panel, and 大哥 could
   not find it. It is the kind of control people look for in the navigation, so
   it now sits at the bottom of the sidebar as well.

   The buttons reuse the existing `[data-lang]` hook, so index.html's
   renderLanguageButtons() keeps both places in sync automatically.
   =========================================================================== */

.sidebarLang {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 12px 4px 0;
}

.sidebarLangLabel {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #8ea3bd;
  margin-right: 2px;
}

/* the sidebar is dark, so these are the light-on-dark variants - the panel
   buttons in the settings dialog are a separate, light style */
.sidebarLang .langBtn {
  flex: 0 0 auto;
  min-width: 46px;
  padding: 5px 9px;
  border: 1px solid #2c4a70;
  border-radius: 8px;
  background: transparent;
  color: #cfe0f5;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
}

.sidebarLang .langBtn:hover {
  border-color: #4a7ac0;
  color: #fff;
}

.sidebarLang .langBtn.active {
  background: #315efb;
  border-color: #315efb;
  color: #fff;
}

/* the collapsed sidebar has no room for words */
.app.sidebar-collapsed .sidebarLang {
  justify-content: center;
}

.app.sidebar-collapsed .sidebarLangLabel {
  display: none;
}

/* ---------- phone header ------------------------------------------------ */

/* The phone uses a completely different shell (`.mobileHeader` + `.mobileNav`);
   the sidebar is `display:none` there, so a switch living only in the sidebar
   would be invisible to exactly the user who could not find it. The header has
   room for one button, so it shows the language you would switch TO. */
.mobileLangBtn {
  flex: 0 0 auto;
  min-width: 44px;
  height: 30px;
  margin-right: 8px;
  padding: 0 9px;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 8px;
  background: transparent;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.mobileLangBtn:active {
  background: rgba(255, 255, 255, .2);
}