/* ===== 设置页面 ===== */
/* 设计与理由见 PROMPT/05_设置页.md
 * 本文件禁止出现 backdrop-filter 和 will-change，滑入只动 transform。 */
.settings-page {
  /* 分组视觉参数：只有这一处定义 */
  --row-radius-out: 20px;      /* 整组最上 / 最下的外角，大圆角 */
  --row-radius-in: 5px;        /* 组内相邻的角，很小 */
  --row-gap: 2px;              /* 行与行之间的透明缝 */
  --row-h: 44px;
  --row-bg: var(--c-surface-2);
  --row-bg-active: var(--c-surface-3);

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

  position: absolute;          /* #app 是 position: relative，见 base.css */
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  background: var(--c-surface);   /* 必须不透明，完整盖住主屏 */

  /* 关闭态：移出屏幕；visibility 延后到滑出结束再切，避免残留内容被点到 */
  transform: translateX(100%);
  visibility: hidden;
  transition:
    transform 0.3s var(--ease),
    visibility 0s linear 0.3s;
}

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

/* .scroll-area 只负责滚动行为、不带 flex: 1，需要撑开的容器自己写（base.css） */
.settings-scroll {
  flex: 1;
  min-height: 0;
  /* 安全区一律用加法，不能用 max() */
  padding: calc(12px + var(--sat)) 20px calc(24px + var(--sab));
}

/* ===== 顶栏：返回键 + 左对齐标题，同一行（与档案页 / 世界书页一致） ===== */
.settings-head {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 标题占满返回键右侧的剩余宽度并左对齐 —— 不要改成居中 */
.settings-heading {
  flex: 1;
  min-width: 0;
}

.settings-back {
  flex: none;
  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);
}
.settings-back:active {
  transform: scale(0.88);
  background: var(--row-bg-active);
}

.settings-eyebrow {
  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);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.settings-title {
  margin: 6px 0 0;
  font-size: var(--title-size);
  font-weight: var(--title-weight);
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--c-text);              /* 主文字用深灰，不用纯黑（base.css 的约定） */
}

/* ===== 搜索框 ===== */
.settings-search {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  margin-top: 20px;
  padding: 0 18px;
  border-radius: 24px;
  background: var(--c-surface-2);
  color: var(--c-hint);              /* 放大镜图标颜色 */
}

.settings-search input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  padding: 0;
  font-family: inherit;
  /* 必须 >= 16px，否则 iOS 一聚焦就把整页放大 */
  font-size: 16px;
  color: var(--c-text);
  -webkit-appearance: none;
  appearance: none;
}
.settings-search input::placeholder {
  color: var(--c-hint);
}
/* 去掉 Safari 给 type="search" 附加的原生装饰与清除按钮 */
.settings-search input::-webkit-search-decoration,
.settings-search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

/* ===== 分组 ===== */
.settings-group-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);
}

/* 一整块卡片：行间只留一条极窄透明缝，缝两侧小圆角，整组外角才是大圆角 */
.settings-rows {
  display: flex;
  flex-direction: column;
  gap: var(--row-gap);
}

.settings-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  height: var(--row-h);
  padding: 0 18px;
  text-align: left;
  background: var(--row-bg);         /* 所有行统一一个底色，不做深浅交错 */
  border-radius: var(--row-radius-in);
  transition: background var(--dur) var(--ease);
}
.settings-row:active {
  background: var(--row-bg-active);
}

/* 外角类由 JS 在每次筛选后打到「可见的」首 / 末行上。
 * 不要换成 :first-child / :last-child —— 它匹配 DOM 而不是可见行，首行被筛掉后整组顶部会塌 */
.settings-row.is-first {
  border-top-left-radius: var(--row-radius-out);
  border-top-right-radius: var(--row-radius-out);
}
.settings-row.is-last {
  border-bottom-left-radius: var(--row-radius-out);
  border-bottom-right-radius: var(--row-radius-out);
}

.settings-row.is-hidden,
.settings-group.is-hidden {
  display: none;
}

.settings-row-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  color: var(--c-accent-dark);       /* reicon 内部用 currentColor */
}

.settings-row-label {
  flex: 1;
  min-width: 0;
  font-size: var(--row-name-size);
  font-weight: var(--row-name-weight);
  line-height: 1.3;
  color: var(--c-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.settings-row-value {
  flex: none;
  font-size: var(--row-value-size);
  line-height: 1.3;
  color: var(--c-sub);
  white-space: nowrap;
}

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

/* ===== 搜索无结果 ===== */
.settings-empty {
  padding: 48px 24px;
  text-align: center;
  font-size: 14px;
  color: var(--c-hint);
}

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

/* ===== 字体样式页 ===== */
/* 页面外壳（.api-page / .api-header / .api-card / .api-modal…）整套复用 css/setting-api.css，
 * 这里只写字体页独有的部件。
 *
 * 本文件在 index.html 里排在 setting-api.css 之前，同名同权重的规则会被它盖掉 ——
 * 所以下面凡是碰到 .api-* 类的规则都必须带 .font-page 前缀，靠特指度取胜，不能靠顺序。
 * 本页同样禁止 backdrop-filter 和 will-change。 */

/* ===== 预览卡 ===== */
/* 不写 font-family：整站字体就是 --font-ui，让它自然继承才是切换后的真实效果 */
.font-preview-zh {
  font-size: 20px;
  line-height: 1.5;
  color: var(--c-text);
}

.font-preview-en {
  margin-top: 4px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--c-sub);
}

.font-preview-name {
  margin-top: 12px;
  font-size: var(--row-value-size);
  line-height: 1.3;
  color: var(--c-hint);
}

/* ===== 字体列表 ===== */
/* 「系统默认」那行没有删除键，圆角不能写死在 .font-row-side 上 ——
 * 右侧外角一律打给行内最后一个子元素，有没有删除键都成立 */
.font-list {
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
}

.font-row {
  display: flex;
  align-items: stretch;
  gap: var(--card-gap);
}

.font-row-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-height: 56px;
  padding: 10px 16px;
  text-align: left;
  background: var(--card-bg);
  border-radius: var(--card-radius-in);
  transition: background var(--dur) var(--ease);
}
.font-row-main:active { background: var(--press-bg); }

.font-row:first-child .font-row-main { border-top-left-radius: var(--card-radius); }
.font-row:first-child > :last-child { border-top-right-radius: var(--card-radius); }
.font-row:last-child .font-row-main { border-bottom-left-radius: var(--card-radius); }
.font-row:last-child > :last-child { border-bottom-right-radius: var(--card-radius); }

.font-row-name {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  font-size: var(--row-name-size);
  font-weight: var(--row-name-weight);
  line-height: 1.3;
  color: var(--c-text);
}
.font-row-name span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 勾始终渲染，只切透明度：选中与否行高不跳 */
.font-row-name re-icon {
  color: var(--c-accent-dark);
  opacity: 0;
}
.font-row.is-selected .font-row-name re-icon { opacity: 1; }

.font-row-sub {
  max-width: 100%;
  font-size: var(--row-value-size);
  line-height: 1.3;
  color: var(--c-sub);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.font-row-side {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  padding: 0 12px;
  background: var(--card-bg);
  border-radius: var(--card-radius-in);
  color: var(--c-hint);
  font-size: var(--row-value-size);
  white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.font-row-side:active { background: var(--press-bg); }
/* 二次确认态：全站严格灰阶，只靠文案和深浅区分，不用红色 */
.font-row.is-confirming .font-row-side {
  background: var(--c-accent-dark);
  color: var(--c-bg);
}

/* ===== 导入按钮与说明 ===== */
.font-page .font-import { margin-top: 12px; }

.font-tip {
  margin-top: 12px;
  padding: 0 4px;
  font-size: var(--row-value-size);
  line-height: 1.5;
  color: var(--c-hint);
}

/* ===== 导入弹窗 ===== */
/* 卡片是 flex 列且限高，表单区自己滚，按钮和取消键始终留在视野里 */
.font-page .font-form {
  flex: 1;
  min-height: 0;
  overscroll-behavior: contain;     /* 表单滚到头不把滚动链传给背后的 .api-scroll */
}

/* button 是收缩到内容宽的，.api-btn 那条 flex: 1 只在 .api-btn-row 里生效，单独用必须自己撑满 */
.font-page .font-modal-btn {
  width: 100%;
  margin-top: 4px;
}

/* 校验中：两条导入路径一起锁，避免连点导入出两份 */
.font-page .api-btn.is-loading {
  opacity: 0.6;
  pointer-events: none;
}

/* 「或」分隔线：两侧细线由伪元素撑开，不用额外标签 */
.font-or {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0;
  font-size: var(--row-value-size);
  color: var(--c-hint);
}
.font-or::before,
.font-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--c-border-m);
}

.font-page .font-form .font-tip { margin-bottom: 2px; }