/* ═══ 设置 · 账号与设备（/settings · /account）═══
   两屏共用这一份：它们是同一族——一边写偏好，一边写身份与这台设备。

   规格来自 design/委托/05-components.md（按钮 / 输入 / 卡片 / 七种态）与本族构建规格：
   卡 bg n0 · 1px hairline · radius 10 · padding 14/16；卡标题 13.5px/600；
   行与行之间 padding-top 11 + border-top 1px n50；右侧控件外包 min-height 32 命中层。

   颜色一律取令牌。这一份里出现任何 #hex / rgba 都是 bug（selfcheck 会查出来）。 */

.page.set {
  padding: 18px;                                          /* GAP page-pad-18 与其余屏一致 */
}

.set-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;            /* GAP side-w-420 与反馈 / 关于同宽 */
  gap: var(--space-4);
  align-items: start;
}
@media (max-width: 1080px) {
  .set-grid { grid-template-columns: minmax(0, 1fr); }
}

.set-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }  /* GAP card-gap-14 */

/* ── 卡 ── */
.set-card {
  background: var(--c-neutral-0);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-10);
  padding: 14px var(--space-4);                            /* GAP card-pad-14 */
}
.set-ct {
  margin: 0 0 var(--space-3);
  font-size: var(--size-md);
  font-weight: 600;
  color: var(--c-neutral-900);
}

/* ── 一行设置：左标签 + 说明，右控件 ── */
.set-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding-top: 11px;                                       /* GAP row-gap-11 */
  border-top: 1px solid var(--c-neutral-50);
  margin-top: 11px;                                        /* GAP row-gap-11 */
}
.set-card > .set-row:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.set-rl { min-width: 0; flex: 1; }
.set-lb { display: block; font-size: var(--size-base); color: var(--c-neutral-900); }
.set-hint {
  display: block;
  margin-top: 3px;                                         /* GAP hint-gap-3 */
  font-size: var(--size-11);
  line-height: var(--leading-snug);
  color: var(--c-neutral-500);
}
.set-rc { flex-shrink: 0; }

/* ── 段落 ── */
.set-p {
  margin: 0 0 var(--space-2);
  font-size: var(--size-base);
  line-height: var(--leading-normal);
  color: var(--c-neutral-600);
}
.set-p:last-child { margin-bottom: 0; }
.set-p b.n { color: var(--c-neutral-900); }
/* 「最后一次尝试…没取到」那一行：它说的是数据比看起来旧，压一档但不藏。 */
.set-second { color: var(--c-neutral-500); }
.set-note {
  margin: var(--space-2) 0 0;
  font-size: var(--size-11);
  line-height: var(--leading-snug);
  color: var(--c-neutral-500);
}
.set-acts { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); }

/* ── 分段控件（配色 / 密度 / 时区）──
   容器浅底、选中段反白：选中只靠底色深浅，不借强调色（强调色是「未读」的语言）。
   外包一层 32px 命中层，视觉仍是 24。 */
.set-seghit {
  display: inline-flex;
  align-items: center;
  min-height: var(--a11y-floor-target-used);
}
.set-seg {
  display: inline-flex;
  gap: 1px;                                                /* GAP seg-gap-1 */
  padding: 1px;                                            /* GAP seg-pad-1 */
  background: var(--c-neutral-100);
  border-radius: var(--radius-md);
}
.set-segbtn {
  height: var(--control-h-sm);
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--c-neutral-600);
  font-family: inherit;
  font-size: var(--size-sm);
  white-space: nowrap;
  cursor: pointer;
}
/* hover 只改底色，不改字重、不改尺寸 —— 改了整行会抖。 */
.set-segbtn:hover { background: var(--c-neutral-50); color: var(--c-neutral-900); }
.set-segbtn.on {
  background: var(--c-neutral-0);
  color: var(--c-neutral-900);
  font-weight: 600;
}
.set-segbtn:focus-visible { outline-offset: -1px; }

/* ── 定义列表（账号 / 设备的字段）── */
.set-dl {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--space-2) var(--space-4);
  margin: 0 0 var(--space-3);
  font-size: var(--size-base);
  align-items: baseline;
}
.set-dl dt { color: var(--c-neutral-500); }
.set-dl dd { margin: 0; color: var(--c-neutral-900); min-width: 0; overflow-wrap: anywhere; }

/* 一格里并排两段（绝对时刻 · 相对时刻）时中间那个点。 */
.set-dev { display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.set-dot { color: var(--c-neutral-200); }

/* ── 三档异常：原位一行字 + 一个「再试一次」，没有容器 ── */
.set-tiny {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin: var(--space-2) 0 0;
  font-size: var(--size-base);
  color: var(--c-severity-high);
}
.set-why { color: var(--c-neutral-500); }

/* ── 二档异常：就地一条灰左条，有形无色。只影响这一块，别的卡照常。 ── */
.set-degraded {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  border-left: 3px solid var(--c-neutral-400);             /* GAP bar-3 与卡片左条同宽 */
  padding: 2px 0 2px var(--space-3);
  margin-bottom: var(--space-3);
  color: var(--c-neutral-600);
}
.set-degraded > svg { flex-shrink: 0; margin-top: 2px; }   /* GAP icon-align-2 */
.set-degraded .set-tiny { margin-top: 0; }

/* ── 改密码表单 ── */
.set-form .field + .field { margin-top: var(--space-3); }
.set-form .field + .set-count + .field { margin-top: var(--space-3); }
.set-count {
  margin: var(--space-1) 0 0;
  font-size: var(--size-11);
  color: var(--c-neutral-500);
}
.set-count.ok { color: var(--c-neutral-900); }
.set-formerr:empty { display: none; }
.set-formerr {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-size: var(--size-base);
  line-height: var(--leading-snug);
  color: var(--c-severity-high);
}
.set-formerr > svg { flex-shrink: 0; margin-top: 2px; }    /* GAP icon-align-2 */
.set-formerr .btn { margin-top: var(--space-1); }