/**
 * 四语 UI 固定槽位 — 切换语言时外框与视觉中心不位移。
 * 默认基准：英文（图2）；法语更长时以法语为准（见各变量注释）。
 * 宽度为 LXGW WenKai / JetBrains Mono + 对应 font-size/letter-spacing 实测后加 ~0.5rem 余量。
 */

:root {
  /* play gate mode — benchmark: PEOPLE / SCENES (en) */
  --slot-mode-w: 8.75rem;
  --slot-mode-h: 2.75rem;

  /* play gate nav links — benchmark per slot */
  --slot-nav-model-w: 5.65rem; /* Modèles (fr) */
  --slot-nav-collection-w: 5.85rem; /* Collection (en) */
  --slot-nav-explore-w: 5.15rem; /* Explorer (fr) */

  /* play stage bar — benchmark: 四语 max per key */
  --slot-bar-prev-w: 7.35rem; /* Précédente (fr) */
  --slot-bar-next-w: 7.1rem; /* Successiva (it) */
  --slot-bar-collect-w: 6.35rem; /* Collecter (fr) */
  --slot-bar-delete-w: 6.85rem; /* Supprimer (fr) */
  --slot-bar-exit-w: 5.75rem; /* Quitter (fr) */
  --slot-bar-h: 2.05rem;

  /* gallery toolbar import — benchmark: Importer (fr) */
  --slot-import-w: 6.5rem;
  --slot-import-h: 2rem;

  --slot-toolbar-h: 2rem;

  /* gallery toolbar import height on explore page */
  --slot-gallery-action-h: 2.35rem;

  /* collection player — benchmark: 四语 max */
  --slot-col-to-mode-w: 5.75rem; /* → People (en) */
  --slot-col-clear-w: 8.75rem; /* Effacer la correction (fr) */
  --slot-col-close-w: 4.75rem; /* Fermer (fr) */
  --slot-col-action-h: 2.35rem;

  /* collection filters — text-only, min-width for row stability */
  --slot-filter-w: 4.75rem; /* Scenes (en) */
}

/* ---- shared slot chrome ---- */
.xisa-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.xisa-slot--upper {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

html[lang="zh-CN"] .xisa-slot--upper {
  text-transform: none;
  letter-spacing: 0.06em;
}

html[lang="zh-CN"] .xisa-slot--col-clear {
  letter-spacing: 0.04em;
}

/* play gate */
.xisa-slot--mode {
  width: var(--slot-mode-w);
  height: var(--slot-mode-h);
  min-width: var(--slot-mode-w);
  padding: 0;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

html[lang="zh-CN"] .xisa-slot--mode {
  text-transform: none;
  letter-spacing: 0.12em;
}

/* Welcome gate brand — always JetBrains Mono (same as En/Fr/It) */
.gate .brand#xisa-theme-btn {
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.xisa-slot--nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-align: center;
  white-space: nowrap;
  height: 2rem;
  min-height: 2rem;
  padding: 0;
  box-sizing: border-box;
}

.xisa-slot--nav-model {
  width: var(--slot-nav-model-w);
  min-width: var(--slot-nav-model-w);
}

.xisa-slot--nav-collection {
  width: var(--slot-nav-collection-w);
  min-width: var(--slot-nav-collection-w);
}

.xisa-slot--nav-explore {
  width: var(--slot-nav-explore-w);
  min-width: var(--slot-nav-explore-w);
}

/* play bar */
.xisa-slot--bar {
  height: var(--slot-bar-h);
  min-height: var(--slot-bar-h);
  padding: 0 0.35rem;
}

.xisa-slot--bar-prev { width: var(--slot-bar-prev-w); min-width: var(--slot-bar-prev-w); }
.xisa-slot--bar-next { width: var(--slot-bar-next-w); min-width: var(--slot-bar-next-w); }
.xisa-slot--bar-collect { width: var(--slot-bar-collect-w); min-width: var(--slot-bar-collect-w); }
.xisa-slot--bar-delete { width: var(--slot-bar-delete-w); min-width: var(--slot-bar-delete-w); }
.xisa-slot--bar-exit { width: var(--slot-bar-exit-w); min-width: var(--slot-bar-exit-w); }

/* library */
.xisa-slot--import {
  width: var(--slot-import-w);
  min-width: var(--slot-import-w);
  height: var(--slot-import-h);
  min-height: var(--slot-import-h);
  padding: 0 0.35rem;
}

.xisa-slot--lock,
.xisa-slot--shuffle {
  width: var(--slot-toolbar-h);
  min-width: var(--slot-toolbar-h);
  height: var(--slot-toolbar-h);
  min-height: var(--slot-toolbar-h);
  padding: 0;
}

/* collection */
.xisa-slot--filter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--slot-filter-w);
  text-align: center;
}

.xisa-slot--col-action {
  height: var(--slot-col-action-h);
  min-height: var(--slot-col-action-h);
  padding: 0 0.35rem;
}

.xisa-slot--col-to-mode { width: var(--slot-col-to-mode-w); min-width: var(--slot-col-to-mode-w); }
.xisa-slot--col-clear { width: var(--slot-col-clear-w); min-width: var(--slot-col-clear-w); }
.xisa-slot--col-close { width: var(--slot-col-close-w); min-width: var(--slot-col-close-w); }

/*
 * 中文界面：UI 文案统一 LXGW WenKai（不用 JetBrains Mono 渲染汉字）
 */
.player-copy,
.caption {
  font-family: var(--font-caption);
}

html[lang="zh-CN"] .xisa-slot,
html[lang="zh-CN"] .page-meta,
html[lang="zh-CN"] .stats-line,
html[lang="zh-CN"] .toolbar-quad button,
html[lang="zh-CN"] nav a,
html[lang="zh-CN"] nav button,
html[lang="zh-CN"] .filters button,
html[lang="zh-CN"] .viewer-nav button,
html[lang="zh-CN"] .player button,
html[lang="zh-CN"] .gate .modes button,
html[lang="zh-CN"] .gate .links a,
html[lang="zh-CN"] .gate .links button,
html[lang="zh-CN"] .stage .bar button,
html[lang="zh-CN"] .stage .hint,
html[lang="zh-CN"] .toolbar button {
  font-family: var(--font-sans);
  font-weight: 400;
}

html[lang="zh-CN"] header #xisa-theme-btn,
html[lang="zh-CN"] header .brand {
  font-family: var(--font-sans);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

html[lang="zh-CN"] #importBtn,
html[lang="zh-CN"] .toolbar-quad button,
html[lang="zh-CN"] .viewer-nav button,
html[lang="zh-CN"] .player button {
  letter-spacing: 0.04em;
  text-transform: none;
}