/* ===== 版本页 ===== */
/* 设计与理由见 PROMPT/07_版本页.md
 * 本文件禁止出现 backdrop-filter 和 will-change，滑入只动 transform。 */
.ver-page {
  --card-radius: 20px;
  --card-radius-in: 5px;       /* 组内相邻的角，与设置页 / API 页同一套 */
  --card-gap: 2px;
  --card-bg: var(--c-surface-2);
  --card-pad: 16px;
  --press-bg: var(--c-surface-3);

  /* 字号 / 字重不在这里定义：统一走 base.css :root 的 --page-title-* / --label-* / --row-* */

  position: absolute;          /* #app 是 position: relative，见 base.css */
  inset: 0;
  z-index: 11;                 /* 与 .api-page 同层：两者都开在设置页之上，且不会同时显示 */
  display: flex;
  flex-direction: column;
  background: var(--c-surface);   /* 必须不透明，完整盖住设置页 */

  transform: translateX(100%);
  visibility: hidden;
  transition:
    transform 0.3s var(--ease),
    visibility 0s linear 0.3s;
}

.ver-page.show {
  transform: translateX(0);
  visibility: visible;
  transition:
    transform 0.3s var(--ease),
    visibility 0s;
}

.ver-scroll {
  flex: 1;                     /* .scroll-area 不带 flex: 1 */
  min-height: 0;
  /* 安全区一律用加法，不能用 max() */
  padding: calc(12px + var(--sat)) 20px calc(32px + var(--sab));
}

/* ===== 顶栏：与 css/setting-api.css 的 .api-header 一族逐值一致 ===== */
/* 改了这里就要同步改 API 页；等第三个二级页出现时抽进 base.css，见 PROMPT/07_版本页.md */
.ver-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;                  /* 兜底：标题块比返回键矮时不至于把按钮挤出去 */
  /* 左右各让出返回键的宽度，标题才是相对整页居中而不是相对剩余空间 */
  padding: 0 44px;
}

.ver-heading {
  min-width: 0;
  text-align: center;
}

.ver-back {
  position: absolute;
  left: 0;
  /* 上下拉满 + margin auto 做垂直居中，把 transform 完整留给 :active 的缩放 */
  top: 0;
  bottom: 0;
  margin: auto 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--c-surface-2);
  color: var(--c-text);              /* reicon 内部用 currentColor */
  transition: transform 0.15s var(--ease), background var(--dur) var(--ease);
}
.ver-back:active {
  transform: scale(0.88);
  background: var(--press-bg);
}

.ver-title {
  margin: 0;
  /* 不能用 --font-display：fonts/标题.woff2 只子集化了 "Qu Phone"，中文会静默回退 */
  font-family: var(--font-ui);
  font-size: var(--page-title-size);
  font-weight: var(--page-title-weight);
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--c-text);
}

/* 与标题同属 .ver-heading，这一行就是标题与副标题之间唯一的间距来源 */
.ver-subtitle {
  margin-top: 5px;
  white-space: nowrap;
  /* letter-spacing 会在最后一个字母后面也加一份，居中文本要补等量左边距抵消 */
  margin-left: 0.18em;
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  line-height: 1.2;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-hint);
}

/* ===== 分组小标题：与 .api-section-label 同参数 ===== */
.ver-section-label {
  margin: 26px 0 10px;
  padding-left: 4px;
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-hint);
}

/* ===== 版本号卡：形态照搬 API 页的额度卡 ===== */
.ver-card {
  padding: var(--card-pad);
  border-radius: var(--card-radius);
  background: var(--card-bg);
}

.ver-num {
  font-size: var(--metric-size);
  font-weight: var(--metric-weight);
  line-height: 1.1;
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
}

.ver-build {
  margin-top: 6px;
  font-size: var(--row-value-size);
  line-height: 1.4;
  color: var(--c-hint);
}

/* ===== 行组 ===== */
/* 这里没有搜索筛选，可见行就是 DOM 行，所以外角可以交给 :first-child / :last-child；
 * 设置页和选模型弹窗要用 JS 打类是因为它们会隐藏行，别照着那边改这里 */
.ver-rows {
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
}

.ver-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 0 18px;
  text-align: left;
  background: var(--card-bg);
  border-radius: var(--card-radius-in);
  transition: background var(--dur) var(--ease);
}
.ver-row:first-child {
  border-top-left-radius: var(--card-radius);
  border-top-right-radius: var(--card-radius);
}
.ver-row:last-child {
  border-bottom-left-radius: var(--card-radius);
  border-bottom-right-radius: var(--card-radius);
}
.ver-row:active { background: var(--press-bg); }

.ver-row-label {
  flex: 1;
  min-width: 0;
  font-size: var(--row-name-size);
  font-weight: var(--row-name-weight);
  color: var(--c-text);
}

.ver-row-chevron {
  flex: none;
  display: flex;
  align-items: center;
  color: var(--c-hint);
}

/* 减弱动态效果：取消横向位移与按压缩放，直接显示 / 隐藏 */
@media (prefers-reduced-motion: reduce) {
  .ver-page,
  .ver-page.show {
    transform: none;
    transition: visibility 0s;
  }
  .ver-back { transition: background var(--dur) var(--ease); }
  .ver-back:active { transform: none; }
}