/* 站点共用样式（设计系统）—— 克制、简洁、浅深色两套。
   改这里＝所有页面一起变；页面里不要再写死颜色。
   字体：界面用系统字体；只有真正显示「阅读/编辑正文」的页面才各自引 /shared/fonts.css（不再全站引）。 */


/* ── 设计令牌（2026-09-21 统一）：颜色/圆角/间距/宽度都在这里，页面里不要再写死 ── */
:root{
  /* 圆角（2026-09-25 照 Primer：默认 6px，不是 Apple 的 6/9/12/16）。
     Primer 靠「1px 边框 + 6px 圆角」立形，不靠大圆角；嵌套小件 3px，胶囊仍 pill。
     四级名保留不变（全站都在用），只是数值改成 Primer 口径。 */
  --r-xs:3px; --r-sm:6px; --r-md:6px; --r-lg:6px; --r-pill:999px;
  --radius-s:var(--r-sm); --radius:var(--r-md);        /* 兼容老名字 */
  /* 间距：4 的倍数。Primer 4/8/12/16/24/32；本站长文节奏需要更松的尾部，保留 44。 */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:44px;
  /* 控件高度按断点分档（用户 2026-09-25 定：不同尺寸下组件用不同尺寸）。
     基准 32px＝Primer control-medium-size(2rem)。窄屏降到 28（本站图标按钮 30×26 是既定口径，
     不一刀切 44px）。宽屏以上 32。responsive.css 各档覆盖 --ctl-*。 */
  --ctl-icon:30px; --ctl-icon-h:26px; --ctl-text:32px; --ctl-input:32px;
  /* 宽度：三档容器（自适应，见 responsive.css） */
  --w-read:720px; --w-page:1000px; --w-wide:1600px; --w-menu:340px;   /* 弹出菜单/胶囊清单的最大宽 */
  /* 层级 */


  /* 字号（2026-09-25 照 Primer：xs 12 / sm 14 / base 16 / lg 20，标题 32/24/20）。
     仍用 clamp 保留流体感，但**下限不得低于 Primer 值**——以前下限 12.5/14.5 偏小，
     是「细节不够 Primer」的一大来源。 */
  /* Primer 标度是**定值**不是区间：base 恒 16px，h1 恒 32px。流体放大反而会跑偏
     （实测 --fs-base 在 1280 上顶到 17px、h1 顶到 38px，都比 Primer 大一号）。
     「大屏更清楚」不靠放大字号，靠 --w-page 容器和留白 —— 这才是 GitHub 的做法。
     例外只留 --fs-read（阅读台大字，本就需要流体）。 */
  --fs-xs:12px;
  --fs-sm:14px;
  --fs-base:16px;
  --fs-md:17px;
  --fs-lg:20px;
  --fs-xl:24px;   /* h2 */
  --fs-2xl:32px;  /* h1 */
  --fs-3xl:32px;
  /* 行高：Primer 1.25/1.5。旧 --lh-normal 1.62 是 Apple 风，节奏偏松 → 1.5 */
  --lh-tight:1.25; --lh-snug:1.4; --lh-normal:1.5; --lh-loose:1.75;
  /* 字间距 */
  --ls-tight:-.01em; --ls-normal:0; --ls-wide:.01em; --ls-caps:.04em;
  /* 阅读面正文的舒适宽度 */
  --measure:68ch;
  --measure-list:45em;
  /* 灰阶（页面里别再用 #333/#999/#eee 这类写死值）
     下限：正文/次要文字在 --bg/--panel/--panel-2 上都要 ≥4.5:1（axe color-contrast），
     所以 --dim/--faint/--dim-2 不允许再往浅走（2026-09-22 修：旧 --faint #8e8e93 只有 2.99~3.26）。 */
  --fg-2:#333; --fg-3:#666; --dim-2:#6e6e73; --hair:#e8e8ed;
  --surf-1:#ffffff; --surf-2:#fafafa; --surf-3:#f2f2f5;
  /* 深色「应用面」：聊天/内省/阅读这类整屏应用用（浅色模式下也可用） */
  --app-bg:#0f1115; --app-panel:#161a20; --app-line:rgba(255,255,255,.10);
  --term-bg:#161b22;   /* 终端底色（xterm 区），2026-09-30 从 agent/app.css 提出来 */
  --app-fg:#e8eaf0; --app-dim:#98a0ad; --app-acc:#5aa9ff;
  /* 语义色（涨跌、日历事件、警示）——页面里别写死 */
  --app-panel-2:#1b202a; --app-line-2:#26364f; --app-dim-2:#6b7480;
  --app-ok:#3fb950; --app-ok-bg:#12261a; --app-ok-line:#245c33;
  --app-warn-fg:#ffd479; --app-warn-bg:#2a2113; --app-warn-line:#6b4a17;
  --app-err:#ff9d95; --app-err-bg:#2a1618;
  --pos:#17703a; --neg:#b32d20; --evt-blue:#1667d0; --evt-red:#c5221f; --evt-soft:#eaf2fd;
  /* 彩色底（事件块、徽标、图例）上的字：两主题同值 —— 白字通用；亮色底（日历「延时·课后服务」橙）才用深字，
     由使用处按色相亮度挑（日历 eventDidMount 实测亮度 >0.35 用深字）。别在页面里写 #fff。 */
  --ink-on-color:#ffffff; --ink-on-color-dark:#1d1d1f;
  /* 彩色事件块（日历 = 分类色来自接口）：「底 = 色相混 --panel 的比例」与「月视图彩字混 --fg 的比例」。
     浅色 = 全色实底 + 彩字；深色 = 静音底 + 亮字（深色块里改这两个比例）。 */
  --ev-fill-mix:100%; --ev-dot-mix:62%;
  /* 日历分类色（一色一义，2026-09-21）：三·四年级=蓝 / 七·八年级=紫 / 延时·课后服务=橙 /
     学校通知·会议·校历=灰蓝 / 个人日历=绿；时间记录、生日是两册辅助日历，各占一色。
     这里是唯一色值来源：桥 calendar-bridge.py 也读这一份（不另存色值），页面只按 API 返回值上色。 */
  --cal-c-grade34:#1A73E8; --cal-c-grade78:#7C3AED; --cal-c-after:#F9AB00;
  --cal-c-notice:#5A7A96; --cal-c-personal:#0B8043;
  --cal-c-time:#00838F; --cal-c-birthday:#C2185B;
  --z-head:20; --z-btn:60; --z-panel:61; --z-modal:80;
  /* 动效时长 */
  --t-fast:.12s; --t-mid:.18s;
}
:root{
  /* 界面无衬线＝各端系统 UI 字体（iOS/安卓原生、Windows 雅黑、macOS 苹方）：
     不下载自托管 Noto Sans SC，界面文字一样清晰，首屏少几百 KB；阅读/编辑仍用下面的自托管宋体。 */
  --font-read: "Noto Serif SC", "Source Serif 4", Georgia, "Songti SC", SimSun, serif;
  --font-ui: -apple-system, "Segoe UI", "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", system-ui, sans-serif;
  /* ── Primer 官方色板（2026-09-25 照 GitHub 抄）─────────────────────────
     值来自 @primer/css 22.3.1 dist/primer.css 实抓（/root/scripts/primer-ref.json，
     重新生成：python3 /root/scripts/primer-ref.py）。不再用 Apple 灰（#1d1d1f/#f5f5f7）。
     旧值留在 --legacy-* 仅供回滚对照，任何页面都不该再引用。 */
  --bg:#ffffff; --panel:#ffffff; --panel-2:#f6f8fa;
  --line:#d1d9e0; --line-2:#d1d9e0b3; --line-strong:#818b98;
  --fg:#1f2328; --dim:#59636e;
  /* --faint 与三个语义色在 Primer 原值下不满足本站 4.5:1 门（#9198a1 on 白＝2.91；
     ok/warn/err 压自身 16% 淡底分别是 4.09/3.96/4.07）。GitHub 自己在这些位置用的是
     「可读档」而不是 subtle 档，所以这里沿 Primer 色相、只压到刚好达标：
     求解见 /root/.hermes/cache/scratch/contrast-solve.py，
     结果 /root/logs/primer-contrast-solve.json。视觉差几不可辨，达标是真的。 */
  --faint:#697079;
  /* --acc 压到 #0558b8：Primer 官方 #0969da 当**文字**压同色淡底（选中 chip、高亮行）
     时最差只有 4.01:1（18% 淡底），<4.5 → 全站 30 多处 .on/[aria-selected] 都受影响。
     沿同一色相压深一档后：18% 淡底 5.10、白底 6.79，全部达标，色相不变、肉眼几乎看不出。
     这就是 Primer 自己处理 subtone 的办法（用可读档而不是 accent-fg 那一档）。 */
  --acc:#0558b8; --acc-soft:#ddf4ff; --ok:#0b7028; --warn:#8b5800; --err:#bd101b;
  --legacy-bg:#f5f5f7; --legacy-panel-2:#fbfbfd; --legacy-line:rgba(0,0,0,.085);
  --legacy-fg:#1d1d1f; --legacy-dim:#5f5f66; --legacy-faint:#6e6e73; --legacy-acc:#0963e8;
  --overlay:rgba(0,0,0,.45);          /* 遮罩/抽屉背景，唯一来源 */
  --radius:var(--r-md); --radius-s:var(--r-sm);
  --shadow:0 1px 2px rgba(0,0,0,.04), 0 10px 26px rgba(0,0,0,.06);
  --shadow-s:0 1px 2px rgba(0,0,0,.05);
  /* 琴键（/piano）：永远白上黑下，深色主题也不反转（真钢琴就是白键黑键） */
  --pk-white:#ffffff; --pk-white-press:#e9ebef; --pk-white-line:rgba(0,0,0,.16);
  --pk-black:#1c1e22; --pk-black-press:#3b3f47; --pk-black-line:rgba(255,255,255,.14);
  /* 谱面纸：谱永远白纸黑符，两模式同值；深色下不许拿 --panel 当纸 */
  --paper:#ffffff; --paper-ink:#111214; --paper-line:#8a8a8f;
  --panel2:#f0f0f3; --bad:#d93a3a;
  --font: var(--font-ui);
  /* Windows：直接用它自己的雅黑（原生 hinting 最清晰），不再下载思源黑体 */
  --font-win-ui: "Microsoft YaHei UI", "Microsoft YaHei", "微软雅黑", -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-win-read: "Microsoft YaHei UI", "Microsoft YaHei", "微软雅黑", -apple-system, "Segoe UI", system-ui, sans-serif;
  --mono:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  /* 音乐/仪器类页面（调音器 / 节拍器 / 播放器 / 乐谱）读数与仪表：18 个尺寸/排版令牌。
     颜色一律复用上面的语义色（--acc 当前/可交互、--ok/--warn 结果、--dim 无信号），这里不新增色值。
     名字只此一处（口径见技能 music-ui-design，旧名 --fs-hero/--dot/--h-touch/--track/--tick/--glow 已作废）。
     2026-09-23 立：起因是两块面板各自写死 clamp(30px,9vw,56px) 等值，读数只有 35px。 */
  --fs-read:clamp(56px,18vw,116px); --ls-read:-.02em; --fw-read:300;
  --read-gap:var(--sp-1);
  --glow-read:0 0 18px color-mix(in srgb,var(--acc) 45%,transparent);
  --meter-h:clamp(56px,9vw,84px); --meter-tick:10px; --meter-tick-w:1px;
  --needle-w:4px; --needle-t:var(--t-fast);
  --beat-dot:clamp(14px,4vw,22px); --beat-dot-strong:calc(var(--beat-dot) * 1.4); --beat-gap:var(--sp-1);
  --beat-on:var(--acc); --beat-strong:var(--acc); --beat-weak:var(--line);
  --ctl-size:clamp(56px,16vw,76px); --step-size:clamp(34px,10vw,44px);
}
@media (prefers-color-scheme: dark){
  :root{
    --fg-2:#e6e6ea; --fg-3:#c9c9cf; --dim-2:#9a9aa0; --hair:rgba(255,255,255,.10);
    --surf-1:#191b1e; --surf-2:#1f2226; --surf-3:#22252a;
    --app-bg:#0d0f12; --app-panel:#15181d; --app-fg:#e8eaf0; --app-dim:#98a0ad;
    --bg:#0d1117; --panel:#151b23; --panel-2:#010409;
    --line:#3d444d; --line-2:#3d444db3; --line-strong:#656c76;
    --fg:#f0f6fc; --dim:#9198a1; --faint:#7e858f;   /* #656c76 压深底只有 3.26–3.87，提到 #7e858f（4.65）*/
    --acc:#4493f8; --panel2:#22252a;   /* 深色：#4493f8 压 18% 深底 5.26:1，本来就达标 */ --bad:#f85149; --acc-soft:#388bfd1a; --ok:#3fb950; --warn:#d29922; --err:#fd564e;
    --pos:#57b877; --neg:#f0736b;   /* 深色下旧值 --neg #d9534f 压 panel 只有 4.41、压自身淡底 3.73 */
    /* 事件块：静音底（色相只留 50%）＋白字 → 实测最差 5.5:1；月视图彩字混白多一点才够亮 */
    --ev-fill-mix:50%; --ev-dot-mix:60%;
    --overlay:rgba(0,0,0,.62);
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 34px rgba(0,0,0,.38);
    --shadow-s:0 1px 2px rgba(0,0,0,.45);
    /* 注意：--pk-* 与 --paper 故意不在此覆盖——琴键与谱纸在深色下保持原样 */
  }
}

*{box-sizing:border-box}
html{font-family:var(--font-ui);font-size:var(--fs-base);line-height:var(--lh-normal);-webkit-text-size-adjust:100%}
html.os-win{--font-ui:var(--font-win-ui);--font-read:var(--font-win-read)}
body{font-family:var(--font-ui);
  margin:0;background:var(--bg);color:var(--fg);
  font-size:var(--fs-base);line-height:var(--lh-normal);
  /* 不要写 -webkit-font-smoothing:antialiased —— Windows 上它会关掉 ClearType，字就发虚 */
}
a{color:var(--acc);text-decoration:none}
a:hover{text-decoration:underline}
/* 正文块中的链接不能只靠颜色区分；按钮、卡片、导航等显式组件继续覆写为 none。 */
:where(p,blockquote,figcaption,dd,.prose) a{text-decoration:underline;text-underline-offset:.12em}
/* 标题：Primer 靠**字号**分层次，h1 不加粗（f1 用 400/600 mixin），
   h2/h3 用 600。旧站 h1 600+34px、h2 700+17px，层级和气质都不像 GitHub。 */
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.01em}
/* Primer 22.3.1 的 .h1–.h6 是 **mobile-first** 两档：窄屏用 -mobile 值，
   到 min-width:768px 才换成桌面值。这里照抄（h1 26→32 / h2 22→24），
   别再写成固定 32px —— 320px 宽的 32px 标题会顶满一行，Primer 不会那样。 */
h1{font-size:26px;line-height:var(--lh-tight);font-weight:400;letter-spacing:-.02em}
h2{font-size:22px;line-height:var(--lh-tight);color:var(--fg);font-weight:600;margin-bottom:var(--sp-3)}
h3{font-size:18px;line-height:var(--lh-snug);font-weight:600}
@media (min-width:768px){
  h1{font-size:var(--fs-2xl)}
  h2{font-size:var(--fs-xl)}
  h3{font-size:var(--fs-lg)}
}
p{margin:0}

.wrap{max-width:1000px;margin:0 auto;padding:36px 22px 64px}
.pagehead{margin-bottom:30px}
.pagehead .lede{color:var(--dim);font-size:14px;margin-top:8px}
.block{margin-bottom:34px}

/* 顶部导航（各页共用一处） */
.nav{display:flex;gap:2px;flex-wrap:wrap;margin:-8px 0 22px}
.nav a{color:var(--dim);font-size:13px;padding:4px 10px;border-radius:8px;text-decoration:none}
.nav a:hover{background:var(--acc-soft);color:var(--fg)}
.nav a.on{color:var(--fg)}

/* 卡片网格 */
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.card{
  display:block;padding:15px 16px;border-radius:var(--r-md);
  background:var(--panel);border:1px solid var(--line);
  color:var(--fg);text-decoration:none;transition:border-color .16s ease;
}
/* hover：Primer 卡片 hover 只换边框色，不加阴影（阴影是「浮起来」的语义） */
.card:hover{text-decoration:none;border-color:color-mix(in srgb, var(--acc) 40%, var(--line))}
.card b{display:block;font-size:15px;font-weight:600;letter-spacing:.2px}
.card span{display:block;color:var(--dim);font-size:12.5px;margin-top:5px;line-height:1.5}
.card .meta{margin-top:9px;color:var(--faint);font-size:12px}

/* 面板 / 列表 */
/* 卡片/面板：Primer 靠 1px 边框立形，**不加阴影**（旧值大圆角+投影是 Apple 风）。
   --shadow-s 保留给真正浮起来的东西（弹窗/抽屉/下拉）。 */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.panel .row{display:flex;gap:12px;align-items:baseline;padding:11px 15px;border-top:1px solid var(--line)}
.panel .row:first-child{border-top:none}
.row .when{color:var(--dim);font-size:12.5px;min-width:96px;white-space:nowrap}
.row .what{flex:1;min-width:0}
.row .tag{color:var(--faint);font-size:12px;white-space:nowrap}
.sep{height:1px;background:var(--line);margin:18px 0}

.foot{color:var(--faint);font-size:12.5px;line-height:1.85}
.foot b{color:var(--dim);font-weight:500}
.muted{color:var(--dim)}
.empty{color:var(--faint);padding:14px 15px}

/* 按钮（幽灵式）：边框 transparent —— Primer 的 .btn 本身没有可见边框，
   有边框的是 .btn.primary / 页面显式加的。给所有按钮加 --line 会变成「每个字都套盒子」。 */
button,.btn{
  font:inherit;font-weight:500;color:var(--fg);background:transparent;border:1px solid transparent;
  border-radius:var(--r-sm);
  /* 高度用 min-height:var(--ctl-text) 定死 32/28 档，padding 上下给 0 ——
     之前 padding:5px 时内容盒＝16px 行高＋10px＝36px，比 min-height 大，min-height 形同虚设，
     量出来全是 36/40/44px。Primer 的 control 是固定高度，水平留白单独给。 */
  min-height:var(--ctl-text);padding:0 16px;
  cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  transition:background .12s ease, color .12s ease, border-color .12s ease;
}
button:hover,.btn:hover{background:var(--acc-soft);text-decoration:none}
.btn.primary{background:var(--acc);color:var(--panel);border-color:transparent}   /* 字色走令牌：浅色=白、深色=深底（深色主题下白字压浅蓝只有 2.82，axe 报缺陷） */
.btn.primary:hover{background:color-mix(in srgb, var(--acc) 88%, #000)}

/* ── 按钮体系（2026-09-28 按 Primer 补齐，状态页的 danger-btn/icon-btn/sv 全换成这套）
   Primer Button 的口径：变体 × 尺寸，primary 强调且一组最多一个，danger 走破坏性，
   invisible/ghost 给工具条。图标走 leading 槽，loading 只转图标、字不动、焦点不丢。
   尺寸一律读 --ctl-* 令牌（responsive.css 按 544/768/1012/1280 覆盖），页内不写死 px。 */
.btn.ghost{background:transparent;border-color:transparent}
.btn.ghost:hover{background:color-mix(in srgb,var(--fg) 8%,transparent)}
.btn.subtle{background:var(--panel-2);border-color:var(--line)}
.btn.subtle:hover{background:color-mix(in srgb,var(--fg) 6%,var(--panel-2))}
.btn.danger{color:var(--panel);background:var(--err);border-color:transparent}
.btn.danger:hover{background:color-mix(in srgb,var(--err) 88%,#000)}
/* 危险但不必抢眼的场合（破坏性入口，不是主操作） */
.btn.danger-quiet{color:var(--err);border-color:color-mix(in srgb,var(--err) 45%,var(--line))}
.btn.danger-quiet:hover{background:color-mix(in srgb,var(--err) 12%,transparent);color:var(--err)}
.btn.sm{min-height:calc(var(--ctl-text) - 4px);padding:0 10px;font-size:var(--fs-xs);gap:4px}
.btn.lg{min-height:calc(var(--ctl-text) + 6px);padding:0 22px;font-size:var(--fs-base)}
.btn.block{width:100%}
/* loading：只转 leading 图标槽，按钮文字保留；aria-disabled 挡重复点击，焦点留在原处 */
.btn[aria-busy="true"]{cursor:progress;color:var(--dim)}
.btn[aria-busy="true"] .status-icon,.btn[aria-busy="true"] .il{animation:btnspin .9s linear infinite}
@keyframes btnspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.btn[aria-busy="true"] .status-icon,.btn[aria-busy="true"] .il{animation:none}}

/* 输入框：跟按钮同一套高度令牌，padding 上下同样归 0（多行框 textarea 除外，见下） */
input,select{
  font:inherit;color:var(--fg);background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:0 12px;min-height:var(--ctl-input);
}
textarea{
  font:inherit;color:var(--fg);background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:8px 12px;   /* 多行框按内容长高，不吃固定控件高 */
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)}

.chip{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;background:var(--acc-soft);color:var(--acc)}
.chip.warn{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}
.chip.ok{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
/* 分类色徽标（日历图例那类「一色一义」的标签）：页面把接口给的原色写进 --c 就行，配色在这里算。
   为什么不在页面里直接 color:原色 —— 原色当文字压在同色 16% 淡底上，浅色主题下黄/橙只有 1.74、
   蓝 3.65、灰蓝 3.72（axe color-contrast 报缺陷）；深色主题下同一批色也只有 2.68~3.26。
   这里按主题把原色向 --fg 混合：浅色混到 **48%**、深色混到 65%。
   48% 是按本站真实日历色（#1A73E8/#7C3AED/#F9AB00/#5A7A96/#0B8043）算出来的：
   最差是琥珀 #F9AB00 的 4.87:1（原来的 52% 只有 4.44，axe 判缺陷）。
   深色混 65% 是因为深底要更亮的字。改比例前先跑
   /root/.hermes/cache/scratch/axe-contrast.py /calendar/ 实测，别靠估。 */
.chip.cat{background:color-mix(in srgb,var(--c,var(--acc)) 16%,transparent);
          color:color-mix(in srgb,var(--c,var(--acc)) 48%,var(--fg))}
@media (prefers-color-scheme: dark){
  .chip.cat{color:color-mix(in srgb,var(--c,var(--acc)) 65%,var(--fg))}
}
/* 状态标签（全站通用）：名称后的小徽标，如「待确认」「暂停」；颜色一律走令牌，别在页里再写一份 */
.tag{display:inline-block;padding:1px 7px;border-radius:var(--r-xs);font-size:var(--fs-sm);line-height:1.55;
     background:var(--acc-soft);color:var(--acc);margin:0 0 0 6px;white-space:nowrap;vertical-align:1px}
.tag.dim{background:var(--panel-2);color:var(--faint)}
.tag.ok{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
.tag.warn{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}
.tag.err{background:color-mix(in srgb,var(--err) 16%,transparent);color:var(--err)}
code,kbd{font-family:var(--mono);font-size:.92em;background:var(--panel-2);border:1px solid var(--line);border-radius:6px;padding:1px 5px}

@media (max-width:543px){
  .wrap{padding:24px 16px 48px}
  /* 这里原来还有一条 h1{font-size:var(--fs-xl)}（24px），
     按的是「Primer 1280 以下降到 24px」这个**记错的**说法。
     2026-09-26 实抓 primer.css 22.3.1 核对：.h1/.f1 是
     26px（窄屏）→ min-width:768px 才 32px，**没有 24px 这一档**。
     这条规则写在 ui.css 末尾、按源序压过前面的 h1{font-size:26px}，
     导致 320/544 档全部渲染成 24px。已删除，标题归共享层两档管。 */
  .grid{grid-template-columns:1fr 1fr;gap:10px}
  .card{padding:13px}
}

/* 长文阅读面（笔记正文、译文）用自托管衬线 */
.prose{font-family:var(--font-read);max-width:var(--measure);line-height:var(--lh-loose)}

/* 公共提示条（唯一实现：SH.toast → .sh-toasts 容器 + .sh-toast，三种色） */
.sh-toasts{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:8px;z-index:var(--z-modal);pointer-events:none}
.sh-toast{background:var(--panel);color:var(--fg);border:1px solid var(--line);border-radius:var(--r-sm);
  box-shadow:var(--shadow);padding:9px 14px;font-size:13.5px;max-width:min(92vw,420px);
  opacity:0;translate:0 6px;transition:opacity var(--t-mid),translate var(--t-mid)}
.sh-toast.in{opacity:1;translate:0 0}
.sh-toast.ok{border-color:var(--ok)}
.sh-toast.warn{border-color:var(--warn)}
.sh-toast.err{border-color:var(--err)}

/* 抽屉与遮罩（唯一实现：SH.drawer + .sh-drawer/.sh-scrim/.sh-drawer-toggle）
   —— 断点只在共享层写一次；≥1012px 时这些类不起作用，侧栏回到正常文档流 */
.sh-scrim{position:fixed;inset:0;background:var(--overlay);z-index:calc(var(--z-head) + 5);
  opacity:0;pointer-events:none;transition:opacity var(--t-fast)}
.sh-scrim.is-open{opacity:1;pointer-events:auto}
.sh-drawer-toggle{display:none!important}          /* 只在 <1012px 出现（见下） */

/* 对话框（原生 <dialog> + SH.modal）：唯一实现，别在页里再写遮罩。
   下面这几条 display/min-width/min-height/height/inset/margin 是为了压过
   旧框架（Pico 有一条无作用域的 dialog{display:flex;position:fixed;inset:0;min-width:100%;min-height:100%}）。 */
dialog.sh-modal{position:fixed;inset:0;margin:auto;height:fit-content;min-width:0;min-height:0;
  border:none;border-radius:var(--r-lg);background:var(--panel);color:var(--fg);
  box-shadow:var(--shadow);padding:var(--sp-4);width:min(92vw,30rem);max-width:92vw;
  max-height:86dvh;overflow:auto}
dialog.sh-modal[open]{display:block}
dialog.sh-modal::backdrop{background:var(--overlay)}
@media (max-width:1011px){
  .sh-drawer{position:fixed;top:0;bottom:0;left:0;z-index:calc(var(--z-head) + 6);
    width:min(84vw,var(--drawer-width,320px));max-width:84vw;background:var(--panel);border-right:1px solid var(--line);
    overflow:auto;padding:var(--sp-3);transform:translateX(-102%);transition:transform .18s ease;
    box-shadow:var(--shadow)}
  .sh-drawer.is-open{transform:none}
  .sh-drawer.sh-drawer-right{left:auto;right:0;width:min(90vw,var(--drawer-width,26rem));max-width:90vw;
    border-right:0;border-left:1px solid var(--line);transform:translateX(102%)}
  .sh-drawer.sh-drawer-right.is-open{transform:none}
  .sh-drawer-toggle{display:inline-flex!important}
  body.drawer-open{overflow:hidden}
}

/* CodeMirror 6 的宿主排版只在共享层收口；页面只决定宿主多宽。 */
.cm-host{min-width:0;min-height:0;overflow:hidden}
.cm-host .cm-editor{height:100%;background:var(--panel);color:var(--fg)}
.cm-host .cm-scroller{font-family:var(--mono);font-size:var(--fs-sm);line-height:var(--lh-snug)}

/* ===== 笔记台（/notes/）里的 CodeMirror 正文排版 =====
   为什么写在共享层而不是页里：页面**不许**写 .cm-* 选择器 —— 那些类名是内核（cm.js）的内部实现，
   版本一变就静默失效（site-visual 的「页内死样式」把第三方类名算缺陷）；共享层是唯一能合法收这些类名的地方。
   要改内核文字样式，先改内核源（/root/scripts/vault-cm/entry.js）重打包；只改「在本页要不要」才来这里。 */
/* ① 翻译台的语义是「中文行＝译文」，内核的 hermesDeco 会给长中文行铺一层淡蓝底。
      笔记正文本来就多是中文，这层底色没有意义 → 笔记页关掉（高亮/待办/注释/脚注的装饰照旧）。 */
[data-site="notes"] #docwrap .cm-hermes-textline{background-color:transparent}
/* ② 引用行（> …）：翻译台在 app.css 里画竖线，笔记页也要有，样式与阅读态的 blockquote 对齐。 */
[data-site="notes"] #docwrap .cm-quote{border-left:3px solid var(--hair);padding-left:var(--sp-2);color:var(--fg-2)}

/* ── 横向柱状条（省空间的用量显示，2026-09-24）───────────────────────
   用途：内存/磁盘/进度这类「一个数占多少比例」，横着一条比文字省一半高度。
   用法：<span class="bar"><i style="width:75%"></i></span>（>.bar.warn/.err 改颜色，宽度由数据给） */
.bar{display:inline-block;width:44px;height:6px;border-radius:999px;background:var(--panel-2);overflow:hidden;vertical-align:middle;margin:0 6px 0 2px}
.bar i{display:block;height:100%;background:var(--ok);border-radius:999px}
.bar.warn i{background:var(--warn)}
.bar.err i{background:var(--err)}
.bar--lg{width:72px;height:7px}
/* 一行图标灯：状态栏用（图标 + 数值，横排，省空间） */
.lamps{display:flex;flex-wrap:wrap;gap:4px 18px;align-items:center;padding:11px 15px;font-size:var(--fs-sm);color:var(--dim)}
.lamps .lamp{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.lamps .il{color:var(--faint)}
.lamps b{color:var(--fg);font-weight:500;font-variant-numeric:tabular-nums}

/* ===== [hidden] 兜底（机制，别删）=====
   HTML 的 hidden 属性只是 UA 样式表里一条 `[hidden]{display:none}`，作者样式里任何
   显式的 display（flex/grid/block…）都能把它盖掉 → 元素「hidden 了还显示」。
   这一类缺陷在本站重复出现过三次（子页签残留、右栏小页占位、购物车式的面板不收）。
   写一条全局兜底，页面里就不必再逐个补 `#x[hidden]{display:none}`。
   反向用法（hidden 却要显示）不要写 `[hidden]{display:block}`，要用 :not([hidden])。 */
[hidden]{display:none!important}

/* 语音输入（2026-09-27）：按钮与状态色，图标用 octicons#mic */
.voice-btn{inline-size:28px;block-size:28px;padding:0;margin-inline-start:4px;
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  border:1px solid var(--bc-muted);border-radius:var(--r-md);background:var(--bg);
  color:var(--fg-muted);cursor:pointer;vertical-align:middle}
.voice-btn:hover{background:var(--acc-soft);color:var(--fg)}
.voice-btn[data-voice="on"]{background:var(--acc);border-color:var(--acc);color:var(--fg-on-accent,#fff)}
.voice-btn[data-voice="err"]{border-color:var(--err);color:var(--err)}
.voice-btn .il{inline-size:16px;block-size:16px}
.voice-unsupported{font-size:var(--fs-sm);color:var(--faint);margin-inline-start:4px}
@media (min-width:544px){.voice-btn{inline-size:32px;block-size:32px}}