/* ============================================================================
   全站修正层（★ 2026-10-14，docs/68 E1 + E4）
   为什么单独一个文件：这几个值定义在 `app.css` 的 `:root` 里，而那个文件有并发会话在改。
   这里用"同优先级 + 后加载"覆盖（layout 先引 app.css，再引本文件）。
   ── E1 对比度：三个值原来都不达 WCAG AA（正文小字 3.47:1、主按钮白字 3.33:1、错误红 4.44:1）
   ── E4 阅读宽度：题面/笔记/服务说明原来一行 ~90+ 字符（1440px 下近 1000px），法务文本最难读
   ============================================================================ */
:root{
  /* E1：原来 #7D8B9C(3.47:1) → #66717F(4.96:1)；#22A06B 上的白字 3.33:1 → #178053(4.94:1)；#C4544F(4.44:1) → #B3453F(4.81:1) */
  --text-3:#66717F;
  --accent:#178053;
  --accent-d:#0F6A45;   /* ★ 2026-10-15：浅色下"强调色文字"再压一档（薄荷底 4.40→5.90 / wash 4.49→6.02） */
  --red:#B3453F;
}
/* E4：长文正文限宽到 68ch（≈ 中文 34 字/行）——只作用于**散文**，
   代码块/表格/示意图保持原宽（那些是要横向看的）。 */
.md > p, .md > ul, .md > ol, .md > blockquote,
.md > h1, .md > h2, .md > h3, .md > h4, .md > h5, .md > h6{max-width:68ch}
/* L2：页脚补一条信息带（原来稀疏页面"内容到 600px 就结束"） */
footer .in{flex-wrap:wrap;gap:6px 14px}
footer .finfo{color:var(--text-3);font-size:12px}

/* ============================================================================
   后台「口径说明」折叠块（★ 2026-10-15，docs/73 §D）
   动机：台账/会员这两页原来把"账怎么算"的解释散在表格上下前后，看的时候吵、要查的时候又找不到。
   做法：原生 <details>（零 JS）收成一处，**平时看不见、要查点开** —— 苹果式的"信息随需出现"。
   ============================================================================ */
details.spec{margin:12px 0;border:1.5px dashed rgba(27,36,48,.35);background:var(--panel-2)}
details.spec > summary{cursor:pointer;padding:7px 12px;font-family:var(--mono);font-size:12px;color:var(--text-2);
  list-style:none;user-select:none}
details.spec > summary::-webkit-details-marker{display:none}
details.spec > summary::before{content:"▸ ";color:var(--accent-d);font-weight:700}
details.spec[open] > summary::before{content:"▾ "}
details.spec > summary:hover{color:var(--text-1)}
details.spec .sp-body{padding:2px 14px 12px;font-size:12.5px;line-height:1.95;color:var(--text-2);border-top:1.5px dashed rgba(27,36,48,.2)}
details.spec .sp-body b{color:var(--text-1)}

/* ★ 2026-10-15（用户要求）：页脚只留备案号，并**靠右下侧**。 */
footer .in{justify-content:flex-end;text-align:right}

/* ★ 2026-10-15（用户要求）：级别页三张卡（考点笔记 · 编程题 · 客观题）同在一行；窄屏仍单列。 */
@media (min-width:901px){ .tracks{grid-template-columns:repeat(3,minmax(0,1fr))} }
/* 笔记区：用与编程题/客观题一样的列表样式（.plist/.prow），并给"当前展开"的三张卡统一选中态 */
.track[data-show]{cursor:pointer}
.track.soon[data-show]{cursor:pointer}

/* ============================================================================
   ★★ 2026-10-15 第三轮：苹果 HIG 三批整改（依据 docs/86 §4；本文件是**全站修正层**，
   在 app.css 之后加载，所以"全站级"改动都落在这里）
     · 第 1 批（无障碍红线）：对比度 / 键盘焦点 / 屏幕阅读器工具类 / 触摸目标 / 状态不只靠颜色
     · 第 2 批（平台约定）：深色模式 / 安全区 / 表格横向滚动
     · 第 3 批（交互细节）：常驻气泡"不打扰的收起"
   ============================================================================ */

/* ---------- 第 1 批 · 对比度（实测值见 docs/86 §2；全部按 WCAG 公式算过） ---------- */
:root{
  --text-3:#5C6673;    /* 卡头灰底 4.37→5.13 · 奶油纸 4.47→5.26 · 白底 4.96→5.83 */
  --mid:#6E88AC;       /* 白底 2.49→3.63（图形元素 ≥3:1 即可） */
  --amber-tx:#8A6508;  /* 奶油纸上的琥珀小字 2.33→4.80（新 token：只用于文字，不用于大色块） */
  /* ★ 2026-10-15（深/浅色走查）：把"强调色的**文字**用途"和"承载白字的**底色**用途"分开。
     之前两者都用 `--accent`：浅色模式修对比度时把 `--accent` 压到 #178053，
     而深色模式又把 `--accent` 提亮成 #3BC98A ⇒ 白字落在浅绿上（2.12）几乎看不见。 */
  --accent-bg:#178053;  /* 白字放它上面：4.94 ✓（浅色）；深色同样用它 */
  --red-bg:#B3453F;     /* 白字放它上面：5.47 ✓ */
  --amber-tx2:#7A5A05;  /* 更深的琥珀（用在薄荷绿底 #EDF7F1 等浅色底上） */
}
.pill.wait{color:var(--amber-tx)}          /* 原来用 --amber(#C79A3A) 当文字色 */
.gtable .no{color:var(--text-3)}           /* ✗ 标记 1.63→5.83 */
.st .s{color:var(--text-3)}                /* 会员状态卡的状态行 4.37→5.13 */
.banner.warn{color:var(--amber-tx)}        /* 警告条文字 3.74→4.56（奶油纸底） */

/* ---------- 第 1 批 · 键盘焦点：凡是可操作的都要看得见 ---------- */
:where(a,button,summary,[tabindex],input,select,textarea,label.chk):focus-visible{
  outline:3px solid var(--ink); outline-offset:2px;
}
:where(.btn,.tab,.cbtn,.btn.sm):focus-visible{
  outline:3px solid var(--accent-d); outline-offset:2px;
  box-shadow:0 0 0 5px rgba(34,160,107,.28);   /* 在深色底上也能看见 */
}
/* 焦点不要被 sticky 头部遮住 */
:target{scroll-margin-top:80px}

/* ---------- 第 1 批 · 屏幕阅读器工具类（给 JS 生成的 caption 用） ---------- */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- 第 1 批 · 状态不能只靠颜色（补文字/符号由服务端与 JS 负责，这里给样式） ---------- */
.role .tag,.mem .tag{font-size:11px}

/* ---------- 第 1 批 · 触摸目标：鼠标下紧凑、触摸设备 ≥44px（苹果最小点按尺寸） ---------- */
@media (pointer:fine){
  .btn.sm{min-height:32px;padding:6px 12px}
}
@media (pointer:coarse){
  .btn,.btn.sm{min-height:44px;padding:10px 14px;font-size:14px}
  .cbtn{min-height:36px;padding:6px 10px}
  .pill{min-height:26px;padding:3px 9px}
  .tabs .tab{padding:10px 14px}
  .qnav a{min-width:34px;min-height:34px;line-height:34px}
}

/* ---------- 第 2 批 · 表格横向滚动容器（JS 会给每张表套 .tblwrap + 补 caption） ---------- */
.tblwrap{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
.tblwrap>table{margin:0}

/* ---------- 第 2 批 · 安全区（刘海 / Home 指示条 / 圆角） ---------- */
.wrap{padding-left:max(36px,env(safe-area-inset-left))!important;padding-right:max(36px,env(safe-area-inset-right))!important}
footer .in{padding-bottom:max(0px,env(safe-area-inset-bottom))}
@media (max-width:900px){
  .wrap{padding-left:max(14px,env(safe-area-inset-left))!important;padding-right:max(14px,env(safe-area-inset-right))!important}
}

/* ---------- 第 3 批 · 常驻气泡"不打扰的收起"：滚过首屏后淡下来，仍可见、悬停/聚焦恢复 ---------- */
.ruler .startpop.tuck{opacity:.42;box-shadow:none}
.ruler .startpop.tuck:hover,.ruler .startpop.tuck:focus-visible{opacity:1;box-shadow:4px 4px 0 rgba(27,36,48,.22)}

/* ============================================================================
   第 2 批 · 深色模式
   做法：① 重映射设计 token（变量级，全站生效）② 覆盖页面样式里**硬编码的浅色底**
   （页面 css 在本文件之后加载，所以用 `html ` 前缀提高优先级）。
   范围（如实说明）：首页 / 级别页 / 答题页 / 题目页 / 笔记 / 报告 / 会员 / 错题本 / 宠物 / 后台 / 服务说明 —— 主流程全覆盖；
   若某个页面专用样式里还有没扫到的浅色块，属于第一版残留，发现即修。
   ============================================================================ */
/* ============================================================================
   深色主题的**两种入口**（用户可在「我的」里选 浅色 / 深色 / 自动）：
     ① `html[data-theme="dark"]` —— JS 把用户的选择（自动→按系统）**解析后**写在 <html> 上；
     ② `@media (prefers-color-scheme: dark)` + `html:not([data-theme])` —— **没有 JS** 时的兜底。
   之所以"JS 解析成具体值"而不是把 auto 交给 CSS：这样只需维护一份暗色规则，
   且用户在「我的」里手选浅色时能**盖过**系统的深色（`[data-theme="light"]` 不命中任何暗色分支）。
   规则来源：docs/86 附录里扫出来的"硬编码浅色块"清单。
   ============================================================================ */
html[data-theme="dark"]{color-scheme:dark;
  --ink:#4A5764; --ink-2:#5A6A7A;
  --accent:#3BC98A; --accent-d:#7FD8B0; --accent-l:#3BC98A; --accent-wash:#17301F;
  --red:#F08A85; --amber:#E0B85C; --amber-tx:#E0B85C; --gold:#E0B85C; --gold-d:#E0B85C;
  --mid:#8FA6C4; --blue:#6FA8DC;
  --accent-bg:#178053; --red-bg:#B3453F; --amber-tx2:#E0B85C;
  --paper:#26241F; --paper-2:#302D26;
  --bg:#12161C; --panel:#1A1F27; --panel-2:#232A35; --panel-3:#1E242C;
  --text-1:#E9EEF4; --text-2:#B7C2CE; --text-3:#9AA7B6;
}
html[data-theme="dark"] body{background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px)}
html[data-theme="dark"] .gtable th.hl .rec, html[data-theme="dark"] .wxcopy .cbtn, html[data-theme="dark"] .pill, html[data-theme="dark"] .track .tic, html[data-theme="dark"] .track .here, html[data-theme="dark"] .kit .ic, html[data-theme="dark"] .kit .samples span, html[data-theme="dark"] .chip, html[data-theme="dark"] .chead .tier, html[data-theme="dark"] .segbar i, html[data-theme="dark"] .qnav a.cur, html[data-theme="dark"] .bigstage .agebig, html[data-theme="dark"] .bigstage .speech, html[data-theme="dark"] .shopitem, html[data-theme="dark"] .petface, html[data-theme="dark"] .petcard, html[data-theme="dark"] .s4row>b, html[data-theme="dark"] .fcard .ic, html[data-theme="dark"] .ntip .cbtn, html[data-theme="dark"] .fcard, html[data-theme="dark"] .role.member .tag, html[data-theme="dark"] .track.on, html[data-theme="dark"] .track.obj.on, html[data-theme="dark"] input:not([type=checkbox]):not([type=radio]):not([type=file]), html[data-theme="dark"] select, html[data-theme="dark"] textarea{background:var(--panel)}
html[data-theme="dark"] .btn.danger, html[data-theme="dark"] .pill.no, html[data-theme="dark"] .opt.bad, html[data-theme="dark"] .diff .col.bad .h, html[data-theme="dark"] .frow.miss, html[data-theme="dark"] .flash.bad{background:#3A2220}
html[data-theme="dark"] .pill.ok, html[data-theme="dark"] .prow.tpl .tp, html[data-theme="dark"] .opt.ok, html[data-theme="dark"] .petstage .postcard, html[data-theme="dark"] .bigstage .speech.st-travel{background:#17301F}
html[data-theme="dark"] .prow.var .tp, html[data-theme="dark"] .bigstage .speech.st-eat, html[data-theme="dark"] .coinpop, html[data-theme="dark"] .petdiary.meh{background:#33301C}
html[data-theme="dark"] .gtable .mem, html[data-theme="dark"] .gtable th.mem{background:#3D3318;color:var(--amber)}
html[data-theme="dark"] .track.code.on, html[data-theme="dark"] .opt.sel, html[data-theme="dark"] .bigstage .speech.st-sleep{background:#222A38}
html[data-theme="dark"] input:focus, html[data-theme="dark"] textarea:focus, html[data-theme="dark"] select:focus, html[data-theme="dark"] .editor.pastebox.dragover, html[data-theme="dark"] .editor.pastebox.dragover .codewrap, html[data-theme="dark"] .editor.pastebox.dragover textarea{background:var(--accent-wash)}
html[data-theme="dark"] .role.member{background:linear-gradient(180deg,var(--panel-2),var(--panel-2) 42%)}
html[data-theme="dark"] .fcard.wide{background:linear-gradient(180deg,var(--panel),var(--panel-2))}
html[data-theme="dark"] .wrongitem.locked{background:repeating-linear-gradient(135deg,#2A3441,#2A3441 10px,#232A35 10px,#232A35 20px)}
html[data-theme="dark"] .banner.warn{background:#33291A;color:var(--amber)}
html[data-theme="dark"] .banner.ok, html[data-theme="dark"] .flash.ok{background:var(--accent-wash)}
html[data-theme="dark"] code, html[data-theme="dark"] pre, html[data-theme="dark"] .codeval, html[data-theme="dark"] .st, html[data-theme="dark"] .st .v{background:var(--panel-2)}
html[data-theme="dark"] .md pre, html[data-theme="dark"] pre{color:var(--text-1)}
html[data-theme="dark"] .uiDlg .box{box-shadow:6px 6px 0 rgba(0,0,0,.55)}
/* ★ 2026-10-15（深浅色走查补丁）：把"底色/文字色"角色分开后，暗色下这些仍需单独指定 */
html[data-theme="dark"] .qa-one .qa-q::before{background:var(--accent-bg)}
html[data-theme="dark"] .prow.tpl .tp{color:var(--accent-d)}
html[data-theme="dark"] .prow.var .tp{color:var(--amber)}
html[data-theme="dark"] .bell-closed{color:var(--red)}
html[data-theme="dark"] .coinpop .c2{color:var(--amber)}
html[data-theme="dark"] .hrow .tle{color:var(--amber)}
html[data-theme="dark"] .ritem .rs2 b.wait{color:var(--amber)}
html[data-theme="dark"] .sol .sh .lk{color:var(--amber)}
html[data-theme="dark"] .petstage .crumbs{color:var(--amber)}
html[data-theme="dark"] .gtable th.mem{background:#3D3318;color:var(--amber)}
html[data-theme="dark"] .hitem .code .note{color:var(--text-3)}
html[data-theme="dark"] .brand .bn{color:var(--text-1)}
html[data-theme="dark"] .track.code.on .tmain .nm{color:var(--text-1)}

@media (prefers-color-scheme: dark){
  html:not([data-theme]){color-scheme:dark;
    --ink:#4A5764; --ink-2:#5A6A7A;
    --accent:#3BC98A; --accent-d:#7FD8B0; --accent-l:#3BC98A; --accent-wash:#17301F;
    --red:#F08A85; --amber:#E0B85C; --amber-tx:#E0B85C; --gold:#E0B85C; --gold-d:#E0B85C;
    --mid:#8FA6C4; --blue:#6FA8DC;
    --paper:#26241F; --paper-2:#302D26;
    --bg:#12161C; --panel:#1A1F27; --panel-2:#232A35; --panel-3:#1E242C;
    --text-1:#E9EEF4; --text-2:#B7C2CE; --text-3:#9AA7B6;
    }
  html:not([data-theme]) body{background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px)}
  html:not([data-theme]) .gtable th.hl .rec, html:not([data-theme]) .wxcopy .cbtn, html:not([data-theme]) .pill, html:not([data-theme]) .track .tic, html:not([data-theme]) .track .here, html:not([data-theme]) .kit .ic, html:not([data-theme]) .kit .samples span, html:not([data-theme]) .chip, html:not([data-theme]) .chead .tier, html:not([data-theme]) .segbar i, html:not([data-theme]) .qnav a.cur, html:not([data-theme]) .bigstage .agebig, html:not([data-theme]) .bigstage .speech, html:not([data-theme]) .shopitem, html:not([data-theme]) .petface, html:not([data-theme]) .petcard, html:not([data-theme]) .s4row>b, html:not([data-theme]) .fcard .ic, html:not([data-theme]) .ntip .cbtn, html:not([data-theme]) .fcard, html:not([data-theme]) .role.member .tag, html:not([data-theme]) .track.on, html:not([data-theme]) .track.obj.on, html:not([data-theme]) input:not([type=checkbox]):not([type=radio]):not([type=file]), html:not([data-theme]) select, html:not([data-theme]) textarea{background:var(--panel)}
  html:not([data-theme]) .btn.danger, html:not([data-theme]) .pill.no, html:not([data-theme]) .opt.bad, html:not([data-theme]) .diff .col.bad .h, html:not([data-theme]) .frow.miss, html:not([data-theme]) .flash.bad{background:#3A2220}
  html:not([data-theme]) .pill.ok, html:not([data-theme]) .prow.tpl .tp, html:not([data-theme]) .opt.ok, html:not([data-theme]) .petstage .postcard, html:not([data-theme]) .bigstage .speech.st-travel{background:#17301F}
  html:not([data-theme]) .prow.var .tp, html:not([data-theme]) .bigstage .speech.st-eat, html:not([data-theme]) .coinpop, html:not([data-theme]) .petdiary.meh{background:#33301C}
  html:not([data-theme]) .gtable .mem, html:not([data-theme]) .gtable th.mem{background:#3D3318;color:var(--amber)}
  html:not([data-theme]) .track.code.on, html:not([data-theme]) .opt.sel, html:not([data-theme]) .bigstage .speech.st-sleep{background:#222A38}
  html:not([data-theme]) input:focus, html:not([data-theme]) textarea:focus, html:not([data-theme]) select:focus, html:not([data-theme]) .editor.pastebox.dragover, html:not([data-theme]) .editor.pastebox.dragover .codewrap, html:not([data-theme]) .editor.pastebox.dragover textarea{background:var(--accent-wash)}
  html:not([data-theme]) .role.member{background:linear-gradient(180deg,var(--panel-2),var(--panel-2) 42%)}
  html:not([data-theme]) .fcard.wide{background:linear-gradient(180deg,var(--panel),var(--panel-2))}
  html:not([data-theme]) .wrongitem.locked{background:repeating-linear-gradient(135deg,#2A3441,#2A3441 10px,#232A35 10px,#232A35 20px)}
  html:not([data-theme]) .banner.warn{background:#33291A;color:var(--amber)}
  html:not([data-theme]) .banner.ok, html:not([data-theme]) .flash.ok{background:var(--accent-wash)}
  html:not([data-theme]) code, html:not([data-theme]) pre, html:not([data-theme]) .codeval, html:not([data-theme]) .st, html:not([data-theme]) .st .v{background:var(--panel-2)}
  html:not([data-theme]) .md pre, html:not([data-theme]) pre{color:var(--text-1)}
  html:not([data-theme]) .uiDlg .box{box-shadow:6px 6px 0 rgba(0,0,0,.55)}

  html:not([data-theme]) .qa-one .qa-q::before{background:var(--accent-bg)}
  html:not([data-theme]) .prow.tpl .tp{color:var(--accent-d)}
  html:not([data-theme]) .prow.var .tp{color:var(--amber)}
  html:not([data-theme]) .bell-closed{color:var(--red)}
  html:not([data-theme]) .coinpop .c2{color:var(--amber)}
  html:not([data-theme]) .hrow .tle{color:var(--amber)}
  html:not([data-theme]) .ritem .rs2 b.wait{color:var(--amber)}
  html:not([data-theme]) .sol .sh .lk{color:var(--amber)}
  html:not([data-theme]) .petstage .crumbs{color:var(--amber)}
  html:not([data-theme]) .gtable th.mem{background:#3D3318;color:var(--amber)}
  html:not([data-theme]) .hitem .code .note{color:var(--text-3)}
  html:not([data-theme]) .brand .bn{color:var(--text-1)}
  html:not([data-theme]) .track.code.on .tmain .nm{color:var(--text-1)}
}

/* ★★ 2026-10-15（用户要求"客观卷与编程场次同名合并展示"）：场次卡里的"本场客观题"一行。
   与 .orow 同一套语言（描边 + 米色纸底 + 箭头），但用 token，深浅色都安全。 */
.sessobj{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:8px 12px;border-bottom:var(--bd);
  background:var(--paper);font-size:13px}
.sessobj .lb{font-weight:700;color:var(--text-2);flex:0 0 auto}
.sessobj a{display:inline-flex;align-items:center;gap:4px;border:1.5px solid var(--ink);background:var(--panel);
  padding:3px 8px;color:var(--text-1);text-decoration:none;box-shadow:var(--sh-sm)}
.sessobj a:hover{background:var(--accent-wash)}
.sessobj a .v{font-weight:700;color:var(--accent-d)}
.sessobj a .go{color:var(--text-3)}

/* ============================================================================
   ★★ 2026-10-15（用户反馈"浅色模式下客观题选项还是看不见"）——**真根因**：
   客观题选项是一堆 `<button class="opt">`，而 `.opt` 从来没有声明自己的 `color`；
   `<button>` 不吃继承，它用浏览器的默认"按钮文字色"（`buttontext`），
   而 `buttontext` 跟随的是**文档的 `color-scheme`**。我们此前只在暗色分支写了 `color-scheme:dark`，
   **浅色分支没有写 `light`**，`<meta name="color-scheme" content="light dark">` 又把选择权交给系统 ⇒
   系统是深色、用户在「我的」里选了「浅色」时：面板是白的，而按钮文字仍是**白**的 ⇒ 选项整体看不见。
   同一原因也影响 input/select/textarea（`fieldtext`）。
   修法两件套：
     ① 每个主题都**显式**声明 color-scheme（不再让系统替我们决定）；
     ② 所有表单控件**显式声明 color**，从此不依赖浏览器默认色。
   ============================================================================ */
:root{color-scheme:light;accent-color:var(--accent-bg)}
html[data-theme="light"]{color-scheme:light}
html[data-theme="dark"]{color-scheme:dark}
button,input,select,textarea,summary{color:var(--text-1)}
.opt{color:var(--text-1)}
input::placeholder,textarea::placeholder{color:var(--text-3);opacity:1}
option{background:var(--panel);color:var(--text-1)}

/* ---------- 第 2 批 · 统一对话框样式（app.js 的 uiAlert/uiConfirm/uiPrompt 用；像素风与站内一致） ---------- */
.uiDlg{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:rgba(18,24,32,.5);padding:20px}
.uiDlg .box{background:var(--panel);border:var(--bd);box-shadow:6px 6px 0 rgba(27,36,48,.32);
  width:100%;max-width:560px;max-height:85vh;overflow:auto}
.uiDlg .h{font-weight:800;font-size:14px;padding:11px 16px;border-bottom:var(--bd);background:var(--panel-2)}
.uiDlg .bd{padding:14px 16px;font-size:14px;line-height:1.75;word-break:break-word}
.uiDlg .in{padding:0 16px 12px}
.uiDlg .uiIn{width:100%;min-height:64px;border:var(--bd);background:var(--panel-2);color:var(--text-1);
  font-family:var(--mono);font-size:13px;line-height:1.6;padding:10px;resize:vertical}
.uiDlg .ft{display:flex;gap:10px;justify-content:flex-end;padding:12px 16px;border-top:var(--bd);background:var(--panel-2)}
@media (pointer:coarse){.uiDlg .ft .btn{min-height:44px}}

/* ---------- 第 3 批 · 台账审计"原文"行内折叠（触屏/读屏都能拿到；替代只给鼠标的 title 悬停） ---------- */
details.raw > summary{cursor:pointer;list-style:none;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
details.raw > summary::-webkit-details-marker{display:none}
details.raw > summary::after{content:" ⤢";color:var(--text-3)}
details.raw[open] > summary{white-space:normal}
details.raw > pre{margin:6px 0 0;padding:8px 10px;background:var(--panel-2);border:1.5px solid var(--ink);
  font-size:11.5px;line-height:1.5;white-space:pre-wrap;word-break:break-all;max-height:240px;overflow:auto}

/* ---------- 2026-10-15 · 笔记/题解里的折叠块（<details> 白名单直通，见 server/lib/md.js） ----------
   为什么要有样式：原生 <details> 默认是浏览器外观（圆点三角 + 无边框），和全站的"方角 + 2px 描边 + 硬投影"不一致；
   这里给它套上站内像素风，同时**保留原生语义**（键盘 Tab/回车/空格天然可用，读屏会念 summary，零 JS）。 */
.md details{margin:12px 0;border:var(--bd);background:var(--panel-2);box-shadow:var(--sh-sm)}
.md details > summary{cursor:pointer;padding:9px 12px;font-weight:700;font-size:13.5px;list-style:none;
  background:var(--panel);border-bottom:2px solid transparent}
.md details > summary::-webkit-details-marker{display:none}
.md details > summary::before{content:"▸ ";color:var(--accent-d);font-weight:700}
.md details[open] > summary::before{content:"▾ "}
.md details[open] > summary{border-bottom-color:var(--ink)}
.md details > *:not(summary){margin:8px 12px}
.md details > .codewrap{margin:8px 0}
.md details > pre{margin:8px 0;padding:0}
.md details > summary:hover{background:var(--accent-wash)}
.md details > summary:focus-visible{outline:3px solid var(--accent-d);outline-offset:-3px}