/* ==========================================================================
   NZEP 资料库 · assets/profile.css —— 个人中心（profile.html）专用样式
   --------------------------------------------------------------------------
   为什么单独一个文件：这些规则以前直接写在 profile.html 的 <head> 里（两百来行
   <style>），改版时得在 469 行 HTML 中间翻；而且手机上看着还行、电脑端一直像
   "一堆积木"：卡片两列宽窄不一（412 / 837 两种宽度）、每块自带一套标题和留白、
   分组说明与卡片标题在视觉上抢同一层。现在统一成：
     · 桌面（>= 1000px）两栏：左 220px 目录（sticky）+ 右 980px 正文列；
     · 每块都是一张同构卡片：标题 + 一行说明 / 正文 / 可选的操作行；
     · 一套字号（标题 24 / 分组 18 / 卡片 15 / 正文 14 / 说明 13），
       这一页没有小于 12px 的字（全局 .tiny 不动，别的页面不收影响）；
     · 颜色、边框、圆角只取 nzep.css 的令牌（--text / --border-soft / --bad …），
       没有引入新色板。
   作用域：几乎所有规则都挂在 body.pf-page（这一页的 <body> 类）或 .pf-main 下，
   不会波及别的页面。手机端（< 1000px）单列，目录变成顶部横向胶囊条。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 页面外壳：给两栏腾出宽度（站点默认 .w-layout 上限 78rem、.w-main 54rem，
      两栏摆进去右边只剩不到 700px，所以只在这个页面放宽到 90rem）
   -------------------------------------------------------------------------- */
body.pf-page { font-size: 14px; }
body.pf-page .w-layout { max-width: 90rem; }
body.pf-page .w-main.pf-main { max-width: none; }
body.pf-page .w-footer { max-width: 90rem; }

.pf-main .pf-title { font-size: 24px; line-height: 1.3; }
.pf-lede {
  margin: .5rem 0 1.5rem; max-width: 68ch;
  font-size: 13px; line-height: 1.6; color: var(--text-2);
}

/* --------------------------------------------------------------------------
   2. 两栏外壳：目录 + 正文
   -------------------------------------------------------------------------- */
.pf-shell {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.pf-content {
  display: flex; flex-direction: column; gap: 24px;
  min-width: 0; max-width: 980px;
}

/* 目录：桌面常驻，滚动时跟着（sticky） */
.pf-rail {
  position: sticky;
  top: calc(var(--header-h) + 16px);
  align-self: start;
  padding: 12px 8px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: var(--bg-subtle);
}
.pf-rail-t {
  padding: 0 10px 8px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .06em;
  color: var(--text-3);
}
.pf-rail a {
  display: flex; align-items: center;
  min-height: 40px; padding: 0 10px;
  border-left: 2px solid transparent; border-radius: 4px;
  font-size: 13.5px; line-height: 1.4; color: var(--text-2);
  text-decoration: none; white-space: nowrap;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.pf-rail a:hover { background: #fff; color: var(--text); text-decoration: none; }
.pf-rail a.on {
  border-left-color: var(--link);
  background: #fff; color: var(--text-strong); font-weight: 700;
}

/* --------------------------------------------------------------------------
   3. 分组标题（h2 18px）+ 卡片列
   -------------------------------------------------------------------------- */
.pf-group { scroll-margin-top: calc(var(--header-h) + 16px); }
.pf-group-head {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 2px 16px;
  margin: 0 0 16px; padding: 0 0 8px;
  border-bottom: 1px solid var(--border-soft);
}
.pf-group-h {
  display: block; margin: 0; padding: 0; border: 0;
  font-family: var(--serif); font-size: 18px; font-weight: 700;
  line-height: 1.35; color: var(--text-strong);
}
.pf-group-d { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-3); }

.pf-cards { display: flex; flex-direction: column; gap: 16px; }

/* --------------------------------------------------------------------------
   4. 卡片：一套解剖 —— 头（标题 + 一句说明）/ 体 / 脚（可选操作行）
      统一 20px 内边距、8px 圆角、1px 边框、不加投影（与站点的扁平维基风一致）
   -------------------------------------------------------------------------- */
.pf-card {
  margin: 0; padding: 20px; min-width: 0;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  box-shadow: none;
  font-size: 14px; line-height: 1.6; color: var(--text);
  overflow-wrap: break-word;
}
.pf-card-h {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 2px 16px;
  margin: 0 0 16px;
}
.pf-card-t {
  margin: 0;
  font-family: var(--sans); font-size: 15px; font-weight: 600;
  line-height: 1.45; color: var(--text-strong);
}
.pf-card-d {
  margin: 0; max-width: 52%;
  font-size: 13px; line-height: 1.5; color: var(--text-3); text-align: right;
}
.pf-card-b { min-width: 0; }
.pf-card-f {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px;
  margin: 16px 0 0; padding: 12px 0 0;
  border-top: 1px solid var(--border-faint);
}
.pf-card-f-end { justify-content: flex-end; }
.pf-card-f .pf-meta { margin: 0; }

/* 卡片里的说明文字（13px；这一页不再出现 11.5px 的小字） */
.pf-meta {
  display: block; margin: 8px 0; max-width: 78ch;
  font-size: 13px; line-height: 1.6; color: var(--text-3);
}
.pf-card-b > .pf-meta:first-child { margin-top: 0; }
.pf-card-b > .pf-meta:last-child { margin-bottom: 0; }

/* 卡片内部的二级小标题（页面里手写的，以及 app.js 往 #permBox / #appInfoBox
   里注入的 .head 都走这一条；它不是卡片标题，所以比 15px 小一档） */
.pf-card .head {
  margin: 16px 0 8px; padding: 0 0 6px;
  border-bottom: 1px solid var(--border-faint);
  font-family: var(--sans); font-size: 14px; font-weight: 600;
  line-height: 1.5; color: var(--text-strong);
}
.pf-card .head:first-child { margin-top: 0; }
.pf-card .head .tiny { font-weight: 400; }

/* --------------------------------------------------------------------------
   5. 字体层级覆盖：只改这一页，全局 .tiny / .w-btn 的尺寸在别的页面保持原样
   -------------------------------------------------------------------------- */
.pf-main .tiny,
.pf-card .tiny { font-size: 13px; line-height: 1.6; color: var(--text-3); }
.pf-main .w-crumbs { font-size: 12.5px; }
.pf-main .w-license { font-size: 13px; line-height: 1.7; }
.pf-main .w-bar-label { font-size: 12.5px; }
.pf-main .w-tag { font-size: 12.5px; line-height: 1.5; }
.pf-main .w-title-tag { font-size: 12.5px; }

/* 按钮：桌面也按 40px 高做（这一页是设置页，控件大小统一比"紧凑"更重要） */
.pf-main .w-btn {
  min-height: 40px; padding: 0 14px;
  font-size: 13px; line-height: 1.2;
}
.pf-main .w-btn.mini { min-height: 40px; padding: 0 12px; font-size: 13px; }
.pf-main .w-btn.ghost { padding: 0 10px; }

/* 输入框 / 文本域：14px 正文，40px 高 */
.pf-main .w-input,
.pf-main .w-area,
.pf-main select.w-input {
  min-height: 40px; padding: 8px 10px;
  border-radius: 4px;
  font-family: var(--sans); font-size: 14px; line-height: 1.5;
}
.pf-main .w-area { min-height: 96px; line-height: 1.6; resize: vertical; }
.pf-main .w-input-row { display: flex; gap: 8px; align-items: center; }
.pf-main .w-input-row .w-input { flex: 1 1 auto; min-width: 0; }
.pf-code { font-family: var(--mono); font-size: 16px; letter-spacing: .28em; }
.pf-num { max-width: 120px; }
.pf-msg { margin: 0; font-size: 13px; line-height: 1.6; }

/* --------------------------------------------------------------------------
   6. 表单网格：桌面"标签一列 + 控件一列"，窄屏堆叠
   -------------------------------------------------------------------------- */
.pf-card .w-field {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  column-gap: 16px; row-gap: 6px;
  align-items: start;
  margin: 0 0 12px;
}
.pf-card .w-field > label {
  grid-column: 1;
  margin: 0; padding-top: 9px;
  font-size: 13px; font-weight: 600; line-height: 1.4;
  color: var(--text-2);
}
.pf-card .w-field > *:not(label) { grid-column: 2; min-width: 0; }
.pf-card .w-field > .pf-field-note { margin: 0; }
.pf-card .w-field:last-child { margin-bottom: 0; }
.pf-field-top { margin-top: 16px; }

/* --------------------------------------------------------------------------
   7. 行内小结构：资料块 / 授权行 / 勾选行 / 开关行 / 系统通知行
   -------------------------------------------------------------------------- */
.pf-id { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin: 0 0 16px; }
.pf-av {
  width: 64px; height: 64px; flex: 0 0 auto;
  border: 1px solid var(--border-soft); border-radius: 8px;
  object-fit: cover; background: var(--bg-subtle);
}
.pf-id-txt { flex: 1 1 12rem; min-width: 0; }
.pf-name {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--text-strong);
}
.pf-id-txt .pf-meta { margin: 2px 0 0; }
.pf-id-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pf-av-box { margin: 0 0 16px; }

.pf-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 16px; }
.pf-row-txt { flex: 1 1 20rem; margin: 0; max-width: 78ch; font-size: 14px; line-height: 1.6; color: var(--text-2); }

/* 勾选行：整行可点，>= 40px */
.pf-check {
  display: flex; align-items: flex-start; gap: 10px;
  min-height: 40px; padding: 12px 0;
  border-bottom: 1px solid var(--border-faint);
  cursor: pointer;
}
.pf-check:last-of-type { border-bottom: 0; }
.pf-check input[type="checkbox"] {
  width: 18px; height: 18px; flex: 0 0 auto;
  margin: 3px 0 0; accent-color: var(--link);
}
.pf-check-txt { flex: 1 1 auto; min-width: 0; font-size: 14px; line-height: 1.6; }
.pf-check-txt .pf-meta { margin: 2px 0 0; max-width: none; }

/* 开关行：标题 14 / 说明 13，行高统一 1.6 */
.pf-card .w-switch {
  min-height: 48px; padding: 12px 0;
  border-bottom: 1px solid var(--border-faint);
}
.pf-card .w-switch:last-child { border-bottom: 0; }
.pf-card .w-switch .txt b { display: block; font-size: 14px; font-weight: 600; line-height: 1.6; }
.pf-card .w-switch .txt span { display: block; margin-top: 2px; font-size: 13px; line-height: 1.6; color: var(--text-3); }

/* 开关本体：视觉上 44×24，热区给它 40px 高（手指点得准，按钮又不显得笨） */
.pf-main .w-toggle { width: 44px; height: 40px; flex: 0 0 auto; }
.pf-main .w-toggle i {
  top: 50%; bottom: auto; height: 24px;
  border-radius: 999px; transform: translateY(-50%);
}
.pf-main .w-toggle i::after {
  top: 50%; left: 3px; width: 18px; height: 18px;
  margin-top: -9px; border: 0; border-radius: 50%;
  transform: none;
}
.pf-main .w-toggle input:checked ~ i::after { transform: translateX(20px); }

.pf-sys-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px;
  padding: 12px 0;
}

/* --------------------------------------------------------------------------
   8. 折叠块（长列表默认收起）与危险动作行
   -------------------------------------------------------------------------- */
.pf-fold {
  margin: 0;
  border: 1px solid var(--border-soft); border-radius: 6px;
  background: var(--bg-subtle);
}
.pf-fold + .pf-fold { margin-top: 12px; }
.pf-fold > summary {
  display: flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 12px;
  list-style: none; cursor: pointer;
  border-radius: 6px;
  font-size: 13.5px; font-weight: 600; line-height: 1.4; color: var(--text);
}
.pf-fold > summary::-webkit-details-marker { display: none; }
.pf-fold > summary::before { content: "▸"; font-size: 12px; color: var(--text-3); }
.pf-fold[open] > summary { border-bottom: 1px solid var(--border-faint); border-radius: 6px 6px 0 0; }
.pf-fold[open] > summary::before { content: "▾"; }
.pf-fold-body {
  padding: 12px;
  border-radius: 0 0 6px 6px;
  background: #fff;
}
.pf-fold-body > .head:first-child { margin-top: 0; }

.pf-search { margin: 0 0 8px; }
.pf-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }

/* 删除 / 清缓存 / 退出：一律贴在卡片（或折叠块）最下面，上面一条细线隔开 */
.pf-danger-zone {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 8px 12px;
  margin: 16px 0 0; padding: 16px 0 0;
  border-top: 1px solid var(--border-faint);
}
.pf-danger-zone .pf-meta { margin: 0; }

/* 卡片里的列表行（我的内容）：一行一个行高 */
.pf-card .w-list { margin: 0; }
.pf-card .w-item { padding: 10px 8px; }
.pf-card .w-item .t { font-size: 14px; }
.pf-card .w-item .m,
.pf-card .w-item .idx { font-size: 12.5px; line-height: 1.6; }

/* --------------------------------------------------------------------------
   9. Cookie 面板（consent.js 注入）：在卡片里不再长成"第二张卡片"
   -------------------------------------------------------------------------- */
.pf-card .cc-panel {
  margin: 12px 0 0; padding: 12px 0 0;
  border: 0; border-top: 1px solid var(--border-faint);
  background: transparent; box-shadow: none;
}
.pf-card .cc-panel .cc-head { font-family: var(--sans); font-size: 14px; font-weight: 600; }
.pf-card .cc-panel .cc-text { margin: 6px 0 10px; font-size: 13px; line-height: 1.7; }
.pf-card .cc-panel .cc-item b { font-size: 14px; }
.pf-card .cc-panel .cc-item span.d { font-size: 12.5px; line-height: 1.6; }
.pf-card .cc-panel .cc-locked { font-size: 12px; }
.pf-card .cc-panel .cc-acts .cc-more { font-size: 12.5px; }

/* 退出：单独一张卡，不再套分组标题 */
.pf-card-exit { margin-top: 0; }

/* --------------------------------------------------------------------------
   10. 窄屏（< 1000px）：单列，目录变成顶部横向胶囊条；触控尺寸 >= 40px
   -------------------------------------------------------------------------- */
@media (max-width: 999.98px) {
  .pf-shell { display: block; }
  .pf-rail {
    position: static;
    display: flex; align-items: center; gap: 4px;
    margin: 0 0 16px; padding: 4px;
    border-radius: 999px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .pf-rail::-webkit-scrollbar { display: none; }
  .pf-rail-t { display: none; }
  .pf-rail a {
    flex: 0 0 auto; min-height: 40px; padding: 0 12px;
    border-left: 0; border: 1px solid transparent; border-radius: 999px;
  }
  .pf-rail a.on { border-color: var(--border-soft); }
  .pf-content { max-width: none; gap: 24px; }

  .pf-group-head,
  .pf-card-h { flex-direction: column; align-items: flex-start; gap: 2px; }
  .pf-card-d { max-width: none; text-align: left; }

  .pf-card { padding: 16px; }
  .pf-card .w-field { grid-template-columns: 1fr; }
  .pf-card .w-field > label { grid-column: 1; padding-top: 0; }
  .pf-card .w-field > *:not(label) { grid-column: 1; }
}

/* 超窄屏：卡片头的说明与标题贴得更紧，别再多占一行 */
@media (max-width: 420px) {
  .pf-card { padding: 14px; }
  .pf-content { gap: 20px; }
  .pf-card-f { gap: 8px; }
  .pf-card-f .w-btn { flex: 1 1 auto; }
}

/* --------------------------------------------------------------------------
   11. 正文之外的小字（顶栏状态 / 侧栏说明 / 页脚）在这个页面也抬到 12px 以上
       —— 只认 body.pf-page，别的页面不受影响
   -------------------------------------------------------------------------- */
body.pf-page .w-status { font-size: 12px; }
body.pf-page .w-side .sec-head { font-size: 12.5px; }
body.pf-page .w-side .sec-body a { font-size: 12.5px; }
body.pf-page .w-side .side-note { font-size: 12.5px; }
body.pf-page .w-footer .f-who { font-size: 12.5px; }
body.pf-page .w-footer .w-legal,
body.pf-page .w-footer .w-legal .copy { font-size: 12.5px; }

/* 768–1023：站点顶栏在这一档本来就贴着边（实测 768 宽时整条超出 10px，
   横向滚动条就是它撑出来的），这一页正文更宽，先把顶栏搜索框收窄一档。
   只认 body.pf-page，别的页面不动；>= 1024 站点自己会收品牌文字，<= 767 走抽屉。 */
@media (min-width: 768px) and (max-width: 1023.98px) {
  body.pf-page .w-topbar .top-search input,
  body.pf-page .w-topbar .top-search input:focus { width: 7.5rem; }
}