/* =============================================================================
 *  screens/settings.css — 设置（scoped [data-screen="settings"]）
 *  v5 设置区美学：Moji 克制、hairline 分隔、Geist/Cormorant/Noto 字族。
 *  只用 styles.css 令牌，零裸色值。
 * ========================================================================== */

/* 透明根：让 .phone 星云透出（与其它屏一致，不盖深块） */
[data-screen="settings"] { background: transparent; }

/* —— 头部：返回 + eyebrow + 大标题 + 金调发丝线 —— */
[data-screen="settings"] .set-head {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 8px 20px 18px;
}
[data-screen="settings"] .set-head::after {
  content: ""; position: absolute; left: 20px; right: 20px; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--hairline-strong) 18%, var(--hairline-strong) 82%, transparent);
}
[data-screen="settings"] .set-back { width: 38px; height: 38px; flex: none; }
[data-screen="settings"] .set-head-tt { min-width: 0; }
[data-screen="settings"] .set-eyebrow {
  font-family: var(--display); font-style: italic;
  font-size: 14px; letter-spacing: .16em; color: var(--ink-subtle);
  margin-bottom: 2px;
}
[data-screen="settings"] .set-title {
  font-family: var(--display);
  font-size: 34px; font-weight: 600; line-height: 1; letter-spacing: -.5px;
  color: var(--ink);
}

/* —— 滚动体 —— */
[data-screen="settings"] .set-scroll { padding: 4px 20px 28px; }

/* —— 分组（组间留白 > 组内；base-4 节奏） —— */
[data-screen="settings"] .set-group { margin-top: 28px; }
[data-screen="settings"] .set-group:first-child { margin-top: 18px; }
[data-screen="settings"] .set-grp-h {
  font-size: 11.5px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--ink-subtle);
  margin: 0 2px 10px;
}

/* —— 设置项行（hairline 分隔的列表） —— */
[data-screen="settings"] .set-item {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 2px;
  border-top: 1px solid var(--hairline);
  min-height: 44px;
}
[data-screen="settings"] .set-group > .set-item:first-of-type { border-top: none; }
[data-screen="settings"] .set-item-stack {
  flex-direction: column; align-items: stretch; gap: 14px;
}
[data-screen="settings"] .set-item-tt { min-width: 0; flex: 1; }
[data-screen="settings"] .set-item-name {
  font-size: 15.5px; font-weight: 500; color: var(--ink); letter-spacing: -.01em;
}
[data-screen="settings"] .set-item-sub {
  font-size: 12.5px; color: var(--ink-muted); margin-top: 3px; line-height: 1.45;
}
/* 只读静态值（如「学习语言：日本語」，非控件） */
[data-screen="settings"] .set-item-value {
  font-size: 15px; color: var(--ink-muted); white-space: nowrap;
}

/* —— 三态分段控件（深 / 浅 / 跟随系统）—— */
[data-screen="settings"] .set-seg {
  display: flex; gap: 4px;
  padding: 4px;
  border: 1px solid var(--hairline);
  border-radius: var(--rad-md);
  background: var(--surface);
}
[data-screen="settings"] .set-seg-opt {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 52px; padding: 8px 6px;
  border-radius: var(--rad-sm);
  color: var(--ink-muted);
  border: 1px solid transparent;
  transition: color .18s ease, background .18s ease, border-color .18s ease;
}
[data-screen="settings"] .set-seg-opt:active { transform: scale(.98); }
[data-screen="settings"] .set-seg-label { font-size: 14px; font-weight: 600; letter-spacing: .01em; }
[data-screen="settings"] .set-seg-hint { font-size: 10.5px; color: var(--ink-subtle); letter-spacing: .02em; }
[data-screen="settings"] .set-seg-opt.on {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: var(--hairline-strong);
}
[data-screen="settings"] .set-seg-opt.on .set-seg-hint { color: color-mix(in srgb, var(--accent) 70%, var(--ink-muted)); }

/* 注音/翻译三选：单行排布，比主题分段更紧凑（无 hint，等高 40px） */
[data-screen="settings"] .set-seg .set-seg-opt:not(:has(.set-seg-hint)) { min-height: 40px; }
/* 学习语言：当前仅一项，左对齐不撑满 */
[data-screen="settings"] .set-seg-lang { display: inline-flex; align-self: flex-start; }
[data-screen="settings"] .set-seg-lang .set-seg-opt { flex: none; min-width: 84px; }

/* —— stepper（每次学多少：−/数字/＋） —— */
[data-screen="settings"] .set-step {
  flex: none;
  display: flex; align-items: center; gap: 4px;
  padding: 4px;
  border: 1px solid var(--hairline);
  border-radius: var(--rad-md);
  background: var(--surface);
}
[data-screen="settings"] .set-step-btn {
  width: 34px; height: 34px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--rad-sm);
  color: var(--ink);
  border: 1px solid transparent;
  transition: color .16s ease, background .16s ease, border-color .16s ease;
}
[data-screen="settings"] .set-step-btn:not(:disabled):active { transform: scale(.94); }
[data-screen="settings"] .set-step-btn:not(:disabled):hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-color: var(--hairline-strong);
  color: var(--accent);
}
[data-screen="settings"] .set-step-btn:disabled { color: var(--ink-faint); cursor: default; }
[data-screen="settings"] .set-step-val {
  min-width: 22px; text-align: center;
  font-size: 16px; font-weight: 600; color: var(--ink); letter-spacing: .02em;
}
[data-screen="settings"] .set-step-unit {
  font-size: 12px; color: var(--ink-muted); margin-right: 4px; margin-left: 1px;
}

/* —— 缓存链接行（→ 发现页一键缓存） —— */
[data-screen="settings"] .set-item-link {
  width: 100%; text-align: left; cursor: pointer;
  transition: background .16s ease;
}
[data-screen="settings"] .set-item-link:active { background: color-mix(in srgb, var(--ink) 5%, transparent); }
[data-screen="settings"] .set-chev { flex: none; color: var(--ink-subtle); display: flex; }
[data-screen="settings"] .set-item-link:hover .set-chev { color: var(--accent); }