/* 来源：paper-reader 227e4de `site/r/css/base.css`，改动见 SOURCE.md
   基础样式：重置、页面框架、通用控件（圆按钮、描边按钮、实心按钮、分段按钮、行内文字按钮、输入框）、浮层、“a · b”不折行、
   启动慢时的“正在载入…”、脚本错误条。视觉照 0.8a 原型（docs/proto/css/app.css，主人 2026-10-21 先按推荐）：米黄底、宋体标题、
   细线；深色纯黑 + 烫金；墨水屏只用黑、#333、白（css/eink-base.css）。
   颜色一律来自 vendor/brief-core/tokens.css（四套主题：sepia、white、dark、eink），不新增颜色；全站用 rem（跟随系统字号），
   只有线宽、触控尺寸用 px。触控目标自身 ≥48px（--tap），不用负边距或伪元素扩点按区（DESIGN §1，原型规则 2）。 */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; height: 100dvh; overflow: hidden;
  background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 1rem; line-height: 1.6;
  -webkit-tap-highlight-color: transparent;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
button:disabled { cursor: default; opacity: .55; }
h1, h2, h3, h4, p, ol, ul, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
svg { display: block; flex: none; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 4px; }
[tabindex="-1"]:focus-visible { outline: none; }
[hidden] { display: none !important; }
.no-anim *, .no-anim *::before, .no-anim *::after { transition: none !important; animation: none !important; }
html[data-reduce] *, html[data-reduce] *::before, html[data-reduce] *::after { transition: none !important; animation: none !important; }
:lang(en) { font-family: var(--latin-serif); }
.num { font-variant-numeric: lining-nums tabular-nums; }
.sp { flex: 1; }

/* ---------- 页面框架（main.js 的 data-view：lib 书架、设置、配对；read 阅读页） ---------- */
#app { height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); }
.pane { position: relative; min-width: 0; height: 100dvh; overflow-y: auto; overflow-x: hidden; overscroll-behavior-y: contain; overflow-anchor: none; scrollbar-width: thin; scrollbar-color: var(--s3) transparent; }
#app[data-view="lib"] > #reader { display: none; }
#app[data-view="read"] > #lib { display: none; }
#reader { min-width: 0; height: 100dvh; }
.wrap { padding-inline: var(--m); margin-inline: auto; max-width: calc(40em + 2 * var(--m)); }

/* ---------- 通用控件 ---------- */
.ib { width: var(--tap); height: var(--tap); border-radius: var(--r-full); display: inline-grid; place-items: center; color: var(--ink2); flex: none; }
.ib svg { width: 24px; height: 24px; fill: currentColor; }
.ib:active { background: var(--s3); }
.btn-line { min-height: var(--tap); min-width: var(--tap); padding: 0 16px; border-radius: var(--r-full); border: 1px solid var(--rule-ink); background: transparent; color: var(--ink); font-size: .875rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 4px; text-align: center; }
.btn-line svg { width: 18px; height: 18px; fill: currentColor; }
.btn-fill { min-height: var(--tap); min-width: var(--tap); padding: 0 20px; border-radius: var(--r-full); background: var(--acc); color: var(--on-acc); font-weight: 600; }
/* 行内的文字按钮（重试 ›、回去 ›、回书架 ›）：看得见的字，自身至少 48×48，在自己那一行里把行撑高 */
.lnk { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); min-width: var(--tap); padding: 0 4px; color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; vertical-align: baseline; }
.in { min-height: var(--tap); padding: 0 14px; border: 1px solid var(--rule-ink); border-radius: var(--r-s); background: var(--bg); color: var(--ink); font: inherit; font-size: 1.0625rem; }
/* 分段按钮（单选）：每格自身 ≥48×48；选中的反色（不只靠颜色：aria-checked，墨水屏黑底白字） */
.segs { display: flex; flex-wrap: wrap; gap: 6px; }
.seg { min-height: var(--tap); min-width: var(--tap); padding: 0 14px; border: 1px solid var(--rule); border-radius: var(--r-full); font-size: .875rem; background: var(--bg); color: var(--ink); }
.seg[aria-checked="true"] { background: var(--inv-bg); color: var(--inv-ink); border-color: var(--inv-bg); font-weight: 600; }

/* “a · b”：一项连同它后面的“·”不折行（core/ui.js dots），“·”不落在行首；长项（超过 16 个字）整项挪到下一行 */
.nw { white-space: nowrap; }
.nwl { display: inline-block; max-width: 100%; }

/* ---------- 页头（设置页、配对页；和书架页头同一个样子，Q7） ---------- */
.page { padding-bottom: 64px; }
.pg-head { display: flex; align-items: center; gap: 6px; min-height: 60px; border-bottom: 3px solid var(--rule-ink); margin-bottom: 6px; }
.pg-head h1 { font-family: var(--serif); font-size: 1.5rem; font-weight: 400; letter-spacing: .08em; }

/* ---------- 浮层（用户自己打开的；外屏底部，≥600 右侧侧栏，墨水屏整宽） ---------- */
dialog.sheet { padding: 0; border: 0; color: var(--ink); background: var(--bg); width: 100vw; max-width: 100vw; max-height: 86dvh; margin: auto 0 0; border-radius: var(--r-l) var(--r-l) 0 0; box-shadow: var(--shadow); overscroll-behavior: contain; }
dialog.sheet::backdrop { background: var(--scrim); }
@media (min-width: 600px) { dialog.sheet { width: 360px; max-height: 100dvh; height: 100dvh; margin: 0 0 0 auto; border-radius: 0; border-left: 1px solid var(--rule); } }
.sh { padding: 0 var(--m) calc(20px + var(--safe-b)); }
.sh-h { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; min-height: 56px; background: var(--bg); border-bottom: 2px solid var(--rule-ink); }
.sh-h h2 { flex: 1; font-family: var(--serif); font-weight: 400; font-size: 1.25rem; letter-spacing: .06em; }
.sh-row { display: flex; flex-direction: column; gap: 6px; padding: 10px 0 12px; border-bottom: 1px solid var(--rule); }
.sh-k { font-size: .8125rem; color: var(--ink2); }
.sh-item { display: flex; flex-direction: column; justify-content: center; width: 100%; min-height: 52px; padding: 6px 0; border-bottom: 1px solid var(--rule); text-align: left; font-size: .9375rem; }

/* ---------- 提示条（只剩“操作失败、原地没地方写”才用；系统自己做的事一律不弹，DESIGN §1） ---------- */
.snack { position: fixed; z-index: 60; left: 50%; transform: translateX(-50%); bottom: calc(96px + var(--safe-b)); max-width: calc(100vw - 32px); display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 16px; border-radius: var(--r-s); background: var(--inv-bg); color: var(--inv-ink); font-size: .875rem; }
.snack button { color: var(--inv-acc); font-weight: 600; min-height: 48px; }

/* ---------- 启动慢（0.9 秒还没画出第一屏，app/boot.js 加 boot-slow）：页面正中一行“正在载入…”；画出来（data-booted）就没了 ---------- */
#boot-ph { display: none; position: fixed; inset: 0; z-index: 0; align-items: center; justify-content: center; margin: 0; color: var(--ink2); font-size: .9375rem; pointer-events: none; }
html.boot-slow:not([data-booted]) #boot-ph { display: flex; }

/* ---------- 脚本错误（main.js；开发时一眼看见，自测据此判“没有脚本错误”） ---------- */
.diag.err { position: fixed; z-index: 99; top: 0; left: 0; right: 0; margin: 0; padding: 8px; background: #b00; color: #fff; font-family: ui-monospace, monospace; font-size: .75rem; line-height: 1.4; white-space: pre-wrap; }