/* ============================================================
   Language selector — Saint-Suite theme for the language-service
   dropdown (@salesystems/language-service frontend).
   The package renders FIXED class names (.language-option,
   .lang-opt-*, .lang-search, .lang-list, .lang-divider,
   .lang-dropdown-note); the host owns their look. This file
   reproduces the pre-service inline styling on the gh-* palette.
   ============================================================ */

#language-dropdown {
  max-height: min(60vh, 520px);
  overflow-y: auto;
  scrollbar-width: thin;
}

#language-dropdown .language-option {
  width: 100%;
  padding: 8px 12px;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--gh-text-primary);
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  font-size: 13px;
}
#language-dropdown .language-option:hover,
#language-dropdown .language-option.active {
  background: var(--gh-bg-secondary);
}
#language-dropdown .lang-opt-flag { flex: none; }
#language-dropdown .lang-opt-native {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#language-dropdown .lang-opt-name {
  margin-left: auto;
  flex: none;
  font-size: 11px;
  color: var(--gh-text-secondary);
}
#language-dropdown .add-language-option {
  border: 1px dashed var(--gh-border);
}

#language-dropdown .lang-divider {
  border-top: 1px solid var(--gh-border);
  margin: 4px 0;
}

#language-dropdown .lang-search { padding: 8px; }
#language-dropdown .lang-search input {
  width: 100%;
  padding: 6px 8px;
  background: var(--gh-bg-secondary);
  border: 1px solid var(--gh-border);
  border-radius: 4px;
  color: var(--gh-text-primary);
  font-size: 12px;
  outline: none;
}

#language-dropdown .lang-list {
  max-height: 200px;
  overflow-y: auto;
  scrollbar-width: thin;
}

#language-dropdown .lang-dropdown-note {
  padding: 8px 12px;
  font-size: 11px;
  color: var(--gh-text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Footer toggle look (flag + code sizing / vertical centering) moved to the
   bundled main.css so it can't go cache-stale on this ?v-pinned direct link. */