/* ============================================================
   十年回看 — 「我的」页专用样式（2026-09-30 改版）
   ------------------------------------------------------------
   为什么单独一个文件、而不塞进 style.css：
     这一页改「分组折叠」的同时，style.css 里正有另一轮全站改动在并行，
     混在一个文件里就没法只推这一页。单独放 ⇒ 这一页能独立上线、独立回退。
   ★ 依赖 style.css 的变量（--card / --line-2 / --r-md / --ink-* / --bg-* /
     --accent）⇒ 必须在 style.css 之后加载（见 me.html 里的 link 顺序）。
   ============================================================ */

/* ============================================================
   「我的」页：分组折叠（apple.com「设置」那种一行一入口）
   ------------------------------------------------------------
   2026-09-30 老板说这页「滑下去很长很长、太乱了」。
   改法不是删功能，是改层级：每个板块先收成一行，标题右边直接给出
   关键数字（几期 / 几条），想看细节再展开 ⇒ 页面长度不再随数据增长。
   ★ 用原生 <details>：零 JS、键盘可达、iOS Safari 原生支持。
   ============================================================ */
.stack{
  background:var(--card);border:1px solid var(--line-2);
  border-radius:var(--r-md);overflow:hidden;
}
.stack > * + *{border-top:1px solid var(--line-2)}
.stack > :empty{display:none}          /* 面板没画出来时，别留下一条孤零零的分隔线 */
/* 同理：前面那一格是空的（正在加载 / 没有内容），后一格顶部也不该有分隔线。
   ★ 2026-09-30 起「数据与隐私」这一组里并排放了两个面板
   （我的数据 / 不再接收），谁先画出来都不该在卡片顶上留一条悬空的线。 */
.stack > :empty + *{border-top:0}

.fold{display:block}
.fold > summary{
  list-style:none;cursor:pointer;min-height:56px;
  display:flex;align-items:center;gap:12px;padding:14px 20px;
  font-size:16.5px;color:var(--ink);-webkit-tap-highlight-color:transparent;
}
.fold > summary::-webkit-details-marker{display:none}
.fold > summary::marker{content:""}
.fold > summary:hover{background:var(--bg-2)}
.fold > summary .fold-t{flex:1;min-width:0;font-weight:600}
.fold > summary .fold-v{flex:none;font-size:14.5px;color:var(--ink-4)}
.fold > summary .fold-v.mono{
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:15px;letter-spacing:2px;color:var(--ink-3);
}
.fold > summary .fold-x{
  flex:none;width:9px;height:9px;margin-left:2px;
  border-right:1.8px solid var(--ink-5);border-bottom:1.8px solid var(--ink-5);
  transform:rotate(-45deg);transition:transform .2s ease-out;
}
.fold[open] > summary .fold-x{transform:rotate(45deg)}
.fold-body{padding:0 20px 20px}

/* 一行式输入：标签在左、输入框在右（苹果设置里那种） */
.field.row{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.field.row > span{
  display:block;flex:none;width:96px;margin:0;
  font-size:14.5px;font-weight:400;color:var(--ink-body);
}
.field.row input[type=text]{flex:1;min-width:0;width:auto}

/* 它记住的事：一条一行 */
.mem-item{display:flex;gap:10px;align-items:flex-start;padding:10px 0}
.mem-item + .mem-item{border-top:1px solid var(--line-2)}

/* 我听过的：一行一期 + 一条细进度 */
.prow{padding:12px 0}
.prow + .prow{border-top:1px solid var(--line-2)}
.prow-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.pbar{height:3px;background:var(--bg-4);border-radius:2px;margin:8px 0 2px;overflow:hidden}
.pbar > i{display:block;height:100%;background:var(--accent)}
.prow .btn{margin-top:4px}

/* 提问记录：问题一行，点开才出回答 */
.qa{border-top:1px solid var(--line-2)}
.qa:first-of-type{border-top:0}
.qa > summary{
  list-style:none;cursor:pointer;min-height:48px;
  display:flex;gap:10px;align-items:flex-start;padding:13px 0;
  font-size:14.5px;color:var(--ink-body);-webkit-tap-highlight-color:transparent;
}
.qa > summary::-webkit-details-marker{display:none}
.qa > summary::marker{content:""}
.qa > summary::before{
  content:"";flex:none;width:6px;height:6px;margin-top:7px;border-radius:50%;
  background:var(--ink-5);transition:background .2s ease-out;
}
.qa[open] > summary::before{background:var(--accent)}
.qa-q{flex:1;min-width:0}
.qa[open] .qa-q{color:var(--ink)}
.qa-a{font-size:14.5px;line-height:1.7;color:var(--ink-3);white-space:pre-wrap;padding:0 0 16px}

/* 认领码 */
.claim-code{
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:22px;letter-spacing:4px;color:var(--ink);
}

/* ★ 坑（实测）：`.group-label:first-of-type{margin-top:0}`（本文件 371 行）本意是
   「第一个分组标题紧贴页头、不额外留白」。但改版后「我的记录」成了 .wrap 里的第一个
   div ⇒ 它被当成「第一个标题」抹成 0，整块糊在引导语底下。
   这里把这一处补回来；只命中「引导语紧跟标题」的结构，不影响别的页。 */
.wrap > .sub + .group-label{margin-top:24px}