/**
 * 语言控件样式。
 *
 * 设计约束（57 号步骤 4）：
 * - 单一、紧凑、带文字，不用国旗；
 * - 与既有按钮同一套字阶与间距，不新造视觉语言；
 * - 键盘焦点可见、读屏可识别（aria-pressed 由 JS 维护）。
 */

.lang-switch {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--c-line);
  border-radius: 7px;
  position: relative;
  background: var(--c-panel, #fff);
  flex: 0 0 auto;
}

.lang-switch__btn {
  font: inherit;
  font-size: var(--fs-sm, 13px);
  line-height: 1;
  padding: 7px 9px;
  border: 0;
  background: transparent;
  color: var(--c-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}

.lang-switch__btn + .lang-switch__btn { border-left: 1px solid var(--c-line); }

.lang-switch__btn:hover { color: var(--c-text); background: var(--c-panel-2, #f4f6f8); }

.lang-switch__btn.is-active {
  background: var(--c-accent);
  color: #fff;
  font-weight: 600;
  cursor: default;
}

.lang-switch__btn:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: -2px;
}

.lang-switch[aria-busy="true"] { opacity: .65; }
.lang-switch__status:empty { display:none; }
.lang-switch__status:not(:empty) { position:absolute;right:0;top:calc(100% + 5px);width:220px;padding:8px;border:1px solid var(--c-line);border-radius:6px;background:var(--c-panel,#fff);color:var(--c-danger);font-size:12px;line-height:1.5;z-index:10; }

/* 顶栏：语言控件紧邻简易模式，右侧留一点间距，不挤压账户菜单。 */
.topbar__lang { display: flex; align-items: center; gap: 8px; margin-left: 8px; }

/* 登录卡片：与「简易模式」同排，靠右；窄屏仍保持一行（两个控件都很短）。 */
.auth-lang { display: flex; align-items: center; }
.auth-panel__top .auth-lang { margin-left: auto; }
.auth-panel__top { flex-wrap:wrap; }
.drawer__title { min-width:0;overflow-wrap:anywhere; }
.drawer__language { display:flex;flex-shrink:0; }
html[lang="en"] .graph-depth-select { min-width: 148px; }

/* 英文选项比中文长：宽度按"升序/降序"设计的下拉会把 Ascending 截成 Ascendi。
   只在有空间的视口放宽，窄屏仍由容器决定，避免横向溢出。 */
@media (min-width: 700px) {
  html[lang="en"] select.select { min-width: 132px; }
  /* 图谱查询栏的代数下拉原本固定 110px（放得下"5 代"），英文 "5 generations" 需要更宽。 */
  html[lang="en"] .graph-query { grid-template-columns: minmax(260px, 1.8fr) 150px auto auto; }
}
@media (min-width: 700px) and (max-width: 980px) {
  html[lang="en"] .graph-query { grid-template-columns: minmax(240px, 1fr) 150px auto; }
}

/* 简易模式（大字高对比）下同步放大，避免语言控件成为唯一的小字。 */
body.simple-mode .lang-switch__btn {
  font-size: var(--fs-base, 15px);
  padding: 9px 12px;
}

@media (max-width: 480px) {
  .lang-switch__btn { padding: 6px 7px; font-size: 12px; }
  .topbar__lang { margin-left: 4px; }
  .auth-panel__top { gap: 8px; }
}