/* KDP dashboard styles.
   Idea: like opening a book at its copyright page and contents: paper, ink and a ribbon bookmark.
   The only bold element is the date at the top of the overview (large serif); "Today" is a three-column list (date,
   item, status); everything else stays quiet.
   Four font sizes only: 12 (notes), 14 (body), 18 (section titles), 44 (the date).
   Colours: paper, ink, pencil grey, hairline, binding blue (selection and links), red (overdue, problems), orange
   (today, running).
   Charts use a colour-blind-checked order of eight colours; do not reorder it.

   KDP 看板样式。
   设计思路：像翻开一本书的版权页与目录——纸、墨、一条书签丝带。
   唯一“大胆”的地方是总览页首的日期（宋体大字）；“今天要做的事”是三栏清单（日期、事项、状态）；其余安静。
   字号只用四级：12（注）、14（正文）、18（栏目标题）、44（页首日期）。
   颜色：纸、墨、铅笔灰、细线、装帧蓝（选中与链接）、红（过期、出了问题）、橙（今天、进行中）。
   图表配色沿用经过色盲校验的八色顺序，不要随意调换。 */

:root {
  color-scheme: light;
  /* Core colours */
  /* 核心色 */
  /* Paper: cool white, not cream */
  /* 纸：冷白，不用米色 */
  --paper: #f6f7f9;
  /* Sheets for the drawer and pop-ups */
  /* 抽屉、弹出层的纸页 */
  --leaf: #ffffff;
  /* Ink: blue-black */
  /* 墨：蓝黑墨水 */
  --ink: #1d2430;
  --ink-2: #4a5260;
  /* Pencil grey: notes and secondary text (5.0:1 on paper, 4.8:1 on light grey, readable at small sizes) */
  /* 铅笔灰：说明、次要（纸上 5.0:1，浅灰底上 4.8:1，小字也够清楚） */
  --pencil: #646b77;
  /* Hairline: still visible in the light theme */
  /* 细线：浅色下也要看得见 */
  --rule: #d5d9e0;
  /* Binding blue: selection and links */
  /* 装帧蓝：选中、链接 */
  --binding: #2d5b8a;
  /* Red: overdue and problems */
  /* 红：过期与出了问题 */
  --ribbon: #b3261e;
  /* Orange: today and running (5.0:1 on paper) */
  /* 橙：今天、正在进行（纸上 5.0:1） */
  --today: #ad4f0a;

  /* Aliases used by the charts and shared class names */
  /* 兼容图表与旧类名的别名 */
  --page: var(--paper);
  --surface: var(--leaf);
  --surface-2: #f0f2f5;
  --surface-3: #e8ebef;
  --border: var(--rule);
  --border-strong: #bfc5ce;
  --text: var(--ink);
  --text-2: var(--ink-2);
  --text-3: var(--pencil);
  --grid: #e3e6eb;
  --axis: #c3c8d0;
  --accent: var(--binding);
  --accent-soft: rgba(45, 91, 138, 0.10);
  --accent-text: var(--binding);
  --good: #2e7d4f;
  --good-text: #286f45;
  --good-soft: rgba(46, 125, 79, 0.10);
  --warn: #a8690b;
  --warn-text: #8a5508;
  --warn-soft: rgba(168, 105, 11, 0.10);
  --bad: var(--ribbon);
  --bad-text: var(--ribbon);
  --bad-soft: rgba(179, 38, 30, 0.08);
  --neutral-soft: rgba(29, 36, 48, 0.05);
  --promo: rgba(46, 139, 106, 0.12);
  --promo-line: #2e8b6a;
  --change: #5b4bb0;
  --shadow-lg: 0 18px 50px rgba(29, 36, 48, 0.16);
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #eda100;
  --series-5: #e87ba4;
  --series-6: #008300;
  --series-7: #4a3aa7;
  --series-8: #e34948;

  --serif: "Source Serif 4", "Noto Serif SC", "Songti SC", "STSong", serif;
  --font: -apple-system, system-ui, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #14171c; --leaf: #1b1f26; --ink: #e7e9ec; --ink-2: #b6bcc6; --pencil: #8a919d; --rule: #30363f;
    --binding: #8db4e2; --ribbon: #ee7468; --today: #f09a4e;
    --surface-2: #20252d; --surface-3: #282e37; --border-strong: #3a414c; --grid: #262b33; --axis: #3d444f;
    --accent-soft: rgba(141, 180, 226, 0.14);
    --good: #5cbf86; --good-text: #6fcb95; --good-soft: rgba(92, 191, 134, 0.14);
    --warn: #e3a64a; --warn-text: #ebb766; --warn-soft: rgba(227, 166, 74, 0.14);
    --bad-soft: rgba(238, 116, 104, 0.12);
    --neutral-soft: rgba(231, 233, 236, 0.06);
    --promo: rgba(70, 180, 140, 0.16); --promo-line: #46b48c; --change: #a59af0;
    --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.5);
    --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500;
    --series-5: #d55181; --series-6: #2f9e3f; --series-7: #9085e9; --series-8: #e66767;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #14171c; --leaf: #1b1f26; --ink: #e7e9ec; --ink-2: #b6bcc6; --pencil: #8a919d; --rule: #30363f;
  --binding: #8db4e2; --ribbon: #ee7468; --today: #f09a4e;
  --surface-2: #20252d; --surface-3: #282e37; --border-strong: #3a414c; --grid: #262b33; --axis: #3d444f;
  --accent-soft: rgba(141, 180, 226, 0.14);
  --good: #5cbf86; --good-text: #6fcb95; --good-soft: rgba(92, 191, 134, 0.14);
  --warn: #e3a64a; --warn-text: #ebb766; --warn-soft: rgba(227, 166, 74, 0.14);
  --bad-soft: rgba(238, 116, 104, 0.12);
  --neutral-soft: rgba(231, 233, 236, 0.06);
  --promo: rgba(70, 180, 140, 0.16); --promo-line: #46b48c; --change: #a59af0;
  --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.5);
  --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500;
  --series-5: #d55181; --series-6: #2f9e3f; --series-7: #9085e9; --series-8: #e66767;
}

/* ---------- Base ---------- */
/* ---------- 基础 ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 14px/1.6 var(--font); overflow-x: hidden;
}
/* Clickable text is always binding blue and underlined, so it is obviously clickable */
/* 能点的文字一律装帧蓝＋下划线，一眼看出可以点 */
a { color: var(--binding); text-decoration: underline; text-decoration-thickness: 1px;
    text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--binding) 45%, transparent); }
a:hover { text-decoration-color: var(--binding); text-decoration-thickness: 2px; }
a.mark { text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--binding); outline-offset: 2px; border-radius: 4px; }
.btn-primary:focus-visible { outline-offset: 2px; box-shadow: 0 0 0 2px var(--paper); }
code, .mono { font-family: var(--mono); font-size: 12px; }
.num, .fig, .n { font-variant-numeric: tabular-nums; }
.muted { color: var(--pencil); }
.dim { color: var(--ink-2); }
.small { font-size: 12px; }
.nowrap { white-space: nowrap; }
.hidden { display: none !important; }
.quiet { color: var(--pencil); }
.pt { color: var(--pencil); font-size: 12px; white-space: nowrap; }
.my { white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

.wrap { max-width: 1040px; margin: 0 auto; padding: 0 28px; }

/* ---------- Top bar: logo, tabs, update ---------- */
/* ---------- 顶栏：图标、分页、更新 ---------- */
.top { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--rule); }
.top-in { display: flex; align-items: center; gap: 22px; min-height: 56px; }
.mark { display: grid; place-items: center; width: 30px; height: 30px; color: var(--ink); flex: none; border-radius: 6px; }
.mark:hover { background: var(--neutral-soft); text-decoration: none; }
.mark svg { width: 24px; height: 24px; }
.tabs { display: flex; gap: 2px; align-self: stretch; }
.tab { border: 0; background: none; padding: 0 10px; cursor: pointer; color: var(--pencil); white-space: nowrap;
  font-size: 14px; position: relative; }
.tab:hover { color: var(--ink); }
.tab[aria-current="page"] { color: var(--ink); font-weight: 600; }
.tab[aria-current="page"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; background: var(--ink); }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.sync-text { font-size: 12px; color: var(--pencil); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; border-bottom: 1px dotted var(--border-strong); }
.sync-text:hover { color: var(--ink); }
/*
 * Language menu: a small native select with a globe
 * 语言选单：带地球图示的原生下拉
 */
.lang-select { position: relative; display: inline-flex; align-items: center; flex: none; }
.lang-select .i { position: absolute; left: 8px; width: 14px; height: 14px; color: var(--ink-2); pointer-events: none; }
.lang-select select { appearance: none; -webkit-appearance: none; height: 32px; padding: 0 26px 0 28px; font: inherit; font-size: 12px;
  color: var(--ink); background: var(--neutral-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 7px center / 12px;
  border: 0; border-radius: 7px; cursor: pointer; }
.lang-select select:hover { box-shadow: 0 0 0 1px var(--rule); }
.prices-h { font-size: 12px; color: var(--pencil); font-weight: 500; margin: 12px 0 6px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 12px; border-radius: 6px; border: 1px solid var(--border-strong); background: var(--leaf);
  cursor: pointer; font-size: 14px; white-space: nowrap;
}
.btn:hover { background: var(--surface-2); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: var(--ink); color: var(--paper); border-color: transparent; }
.btn-primary:hover { background: color-mix(in srgb, var(--ink) 86%, var(--paper)); }
.btn-icon { width: 32px; padding: 0; }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: var(--neutral-soft); }
.btn-sm { height: 28px; padding: 0 8px; font-size: 12px; }
.split { display: inline-flex; }
.split .btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.split .btn:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; width: 28px; padding: 0;
  border-left: 1px solid color-mix(in srgb, var(--paper) 30%, transparent); }
.spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent;
  animation: spin 0.8s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
svg.i { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.popover { position: absolute; z-index: 50; min-width: 260px; padding: 8px;
  background: var(--leaf); border: 1px solid var(--border-strong); border-radius: 8px; box-shadow: var(--shadow-lg); }
.popover h4 { font-size: 12px; color: var(--pencil); font-weight: 400; padding: 4px 8px 6px; }
.check-row { display: flex; gap: 10px; align-items: flex-start; padding: 7px 8px; border-radius: 6px; cursor: pointer; }
.check-row:hover { background: var(--neutral-soft); }
.check-row input { margin: 4px 0 0; accent-color: var(--binding); }
.check-row small { display: block; color: var(--pencil); font-size: 12px; }
.popover-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px;
  border-top: 1px solid var(--rule); margin-top: 6px; padding: 8px 4px 2px; }
.pop-field { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 8px; padding: 6px 6px; font-size: 14px; }
.pop-field span { color: var(--pencil); font-size: 12px; }

/* ---------- Scope (whose books) ---------- */
/* ---------- 看谁 ---------- */
.scope { display: flex; align-items: center; gap: 14px; padding: 18px 0 0; flex-wrap: wrap; }
.scope-chips { display: flex; gap: 4px; }
.scope-chips button { height: 30px; padding: 0 12px; border-radius: 15px; border: 1px solid transparent; background: none;
  cursor: pointer; font-size: 14px; color: var(--ink-2); }
.scope-chips button:hover { background: var(--neutral-soft); color: var(--ink); }
.scope-chips button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.scope-chips button.soft { border-color: var(--border-strong); color: var(--ink); }
.scope-book { display: inline-flex; align-items: center; gap: 2px; }
.scope-book.on .select { border-color: var(--ink); color: var(--ink); font-weight: 600; }
.scope-book .clear { width: 28px; height: 28px; border: 0; background: none; border-radius: 6px; cursor: pointer; color: var(--pencil); display: grid; place-items: center; }
.scope-book .clear:hover { background: var(--neutral-soft); color: var(--ink); }
.filter-btn { color: var(--pencil); margin-left: auto; }
.filter-btn.on { color: var(--binding); }
.select {
  appearance: none; -webkit-appearance: none; height: 30px; padding: 0 28px 0 10px; border-radius: 6px;
  border: 1px solid var(--border-strong); background: var(--leaf); color: var(--ink); font: inherit; font-size: 14px;
  background-image: linear-gradient(45deg, transparent 50%, var(--pencil) 50%), linear-gradient(135deg, var(--pencil) 50%, transparent 50%);
  background-position: calc(100% - 14px) calc(50% - 1px), calc(100% - 10px) calc(50% - 1px); background-size: 4px 4px; background-repeat: no-repeat;
  cursor: pointer; max-width: 100%;
}

main { padding: 28px 0 80px; }
.page { display: grid; gap: 44px; }

/* ---------- Masthead: today's date (the only large type) ---------- */
/* ---------- 页首：今天的日期（唯一的大字） ---------- */
.masthead { max-width: 760px; }
/* The weekday sits on the same baseline as the large date */
/* 星期和大字日期落在同一条基线上 */
h1.today { font-family: var(--serif); font-size: 44px; line-height: 1.15; letter-spacing: 0.02em; font-weight: 600;
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 14px; }
h1.today .wd { font-family: var(--font); font-size: 18px; font-weight: 400; color: var(--ink-2); letter-spacing: 0.02em; }
.month-line { margin-top: 14px; font-size: 18px; line-height: 1.7; color: var(--ink-2); }
.month-line .fig { color: var(--ink); font-weight: 600; }
.fig.pending { color: var(--pencil); font-weight: 400; }
.month-line .aside { display: block; font-size: 12px; color: var(--pencil); }
.yday { margin-top: 6px; color: var(--ink-2); }
.help { border: 0; background: none; padding: 0; margin-left: 4px; color: var(--pencil); cursor: pointer; vertical-align: -2px; display: inline-grid; }
.help:hover { color: var(--ink); }

/* ---------- Section titles ---------- */
/* ---------- 栏目标题 ---------- */
.sec-title, .card-h h2 { font-family: var(--serif); font-size: 18px; font-weight: 600; letter-spacing: 0.01em; }
/* Units next to chart titles: copies, pages, US dollars (USD) */
/* 图表标题旁的单位：本、页、美元（USD） */
.card-h h2 .unit { font-family: var(--font); font-size: 12px; margin-left: 10px; font-weight: 400; color: var(--ink-2); letter-spacing: 0; }

/* ---------- Today ----------
   One notice strip at the top (things to watch, never folded); below it two groups, "To do" and "Coming up".
   Three columns per row: a fixed-width date, the item and a small status on the right; rows without a checkbox keep
   the same space so the text lines up.
   Colours: overdue red, today orange, later grey (the same on the overview, the records page and the calendar).

   ---------- 今天要做的事 ----------
   最上面一条提示条（要留意的问题，不折叠）；下面“要做的”“即将发生”两组。
   每行三栏：固定宽的日期、事项、右边小状态；没有勾选框的行也留出同样的位置，文字对齐。
   颜色：过期红、今天橙、以后灰（首页、记录页、日历一致）。 */
.tasks .sec-title { margin-bottom: 12px; }
.notice { border: 1px solid color-mix(in srgb, var(--warn) 30%, var(--rule)); border-left: 3px solid var(--warn);
  background: var(--warn-soft); border-radius: 6px; padding: 6px 14px; margin-bottom: 20px; }
.notice.bad { border-color: color-mix(in srgb, var(--ribbon) 26%, var(--rule)); border-left-color: var(--ribbon); background: var(--bad-soft); }
.notice-list { list-style: none; margin: 0; padding: 0; }
.notice-row { padding: 6px 0; }
.notice-row + .notice-row { border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); }
.notice-line, .notice-row summary { display: flex; align-items: baseline; gap: 2px 12px; flex-wrap: wrap; }
.notice-row summary { cursor: pointer; list-style: none; }
.notice-row summary::-webkit-details-marker { display: none; }
.notice-row summary .chev { align-self: center; margin-left: -8px; }
/* Disclosure arrow: inline SVG, pointing right when closed and down when open */
/* 展开／收起的箭头：内联 SVG，收起朝右，展开转为朝下 */
svg.chev { width: 14px; height: 14px; color: var(--pencil); transition: transform 0.15s ease; flex: none; }
details[open] > summary svg.chev { transform: rotate(90deg); }
.notice-text { font-weight: 600; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.notice-row.bad .notice-text { color: var(--ribbon); }
.notice-when { margin-left: auto; font-size: 12px; color: var(--pencil); white-space: nowrap; font-variant-numeric: tabular-nums; }
.notice-sub, .notice-items { color: var(--ink-2); font-size: 12px; margin: 4px 0 2px; }
.notice-items { padding-left: 18px; }
.notice-items li { margin: 2px 0; overflow-wrap: anywhere; }
.notice .browser-ctl { margin-top: 6px; }

.task-group + .task-group { margin-top: 22px; }
.task-h { font-size: 12px; font-weight: 600; color: var(--pencil); letter-spacing: 0.04em; padding-bottom: 6px; }
.task-list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--rule); }
.task { display: grid; grid-template-columns: 36px 112px minmax(0, 1fr) auto; column-gap: 12px; align-items: center;
  min-height: 42px; padding: 3px 0; border-top: 1px solid var(--rule); }
.task:first-child { border-top-color: var(--ink); }
.task-check { width: 36px; display: flex; align-items: center; justify-content: center; }
.task-date { color: var(--pencil); font-variant-numeric: tabular-nums; white-space: nowrap; }
.task-text { min-width: 0; overflow-wrap: anywhere; color: var(--ink); }
.task-when { font-size: 12px; color: var(--pencil); white-space: nowrap; text-align: right; }
.task.bad .task-date, .task.bad .task-when { color: var(--ribbon); }
.task.now .task-date, .task.now .task-when { color: var(--today); }
.task.bad .task-when, .task.now .task-when { font-weight: 600; }
.task.done .task-text { color: var(--pencil); text-decoration: line-through; text-decoration-color: var(--border-strong); }
.task.more { display: none; }
.task-group.open .task.more { display: grid; }
.tasks-more { display: inline-flex; align-items: center; min-height: 36px; margin-left: 48px; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--binding); font-size: 14px; text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--binding) 45%, transparent); }
.tasks-more:hover { text-decoration-color: var(--binding); }
/* Checkbox: a thin ink square; a ticked item is struck through; a 36×36 tap area around it */
/* 勾选框：墨色细框的方格，勾上后事项划掉；外面一层 36×36 的点按范围 */
.check-hit { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 6px; cursor: pointer; flex: none; }
.check-hit:hover { background: var(--neutral-soft); }
.check-hit .todo-check { transform: none; }
.check-hit:hover .todo-check:not(:disabled) { border-color: var(--binding); }
.todo-check { appearance: none; -webkit-appearance: none; flex: none; width: 16px; height: 16px; margin: 0; border: 1.5px solid var(--border-strong);
  border-radius: 3px; background: var(--surface); cursor: pointer; display: inline-grid; place-content: center; transform: translateY(2px); }
.todo-check::before { content: ""; width: 9px; height: 9px; clip-path: polygon(14% 52%, 0 66%, 38% 100%, 100% 22%, 86% 8%, 38% 72%);
  background: var(--surface); transform: scale(0); transition: transform .12s ease-out; }
.todo-check:hover:not(:disabled) { border-color: var(--binding); }
.todo-check:checked { background: var(--ink); border-color: var(--ink); }
.todo-check:checked::before { transform: scale(1); }
.todo-check:disabled { cursor: default; opacity: .55; }
.todo-check[aria-busy="true"] { opacity: .45; cursor: progress; }
.todo-check:focus-visible { outline: 2px solid var(--binding); outline-offset: 2px; }
.li-check { flex: none; min-width: 16px; padding-top: 1px; }
.li-check .check-hit { margin: -10px; }
.li-check .tag { white-space: nowrap; }
.todo-extra { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--rule); font-size: 13px; }
.todo-extra h3 { font-size: 13px; font-weight: 600; margin: 0 0 4px; }
.todo-extra ul { margin: 4px 0 0; padding-left: 18px; color: var(--ink-2, var(--pencil)); }
.todo-extra li { margin: 2px 0; overflow-wrap: anywhere; }
.sync-state { margin-left: 8px; color: var(--pencil); white-space: nowrap; }
.sync-state.bad { color: var(--ribbon); }
.sync-short { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
pre.raw, details.raw pre { white-space: pre-wrap; word-break: break-all; font-size: 12px; background: var(--surface-2);
  padding: 8px; border-radius: 6px; max-height: 220px; overflow: auto; }

/* ---------- Books: square cards (hairline separators, no big radius or shadow) ---------- */
/* ---------- 书：方块卡片（细线分隔，不做大圆角和阴影） ---------- */
.shelf .sec-title { margin-bottom: 12px; }
.books { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.bcard { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 16px 16px 14px; text-align: left; min-width: 0;
  background: none; border: 0; border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule); font: inherit; color: inherit; }
/* The title is the link; ::after stretches its tap area over the whole card, and keyboard focus outlines the card */
/* 书名是链接；::after 把点按范围铺满整张卡片，键盘聚焦时整张卡片显示外框 */
.bc-link { color: inherit; text-decoration: none; }
.bc-link::after { content: ""; position: absolute; inset: 0; z-index: 1; cursor: pointer; }
.bc-link:hover { text-decoration: none; }
.bc-link:focus-visible { outline: none; }
.bcard:has(.bc-link:focus-visible) { outline: 2px solid var(--binding); outline-offset: -2px; border-radius: 4px; }
.books .bcard:nth-child(3n) { border-right: 0; }
.books .bcard:nth-child(3n + 1) { padding-left: 0; }
.books .bcard:nth-child(3n) { padding-right: 0; }
.bcard:hover .bc-title { color: var(--binding); }
.bc-top { display: flex; gap: 12px; min-width: 0; }
.bc-top .cover { width: 52px; height: 78px; }
.bc-head { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.bc-title { font-family: var(--serif); font-size: 18px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; margin: 0; }
.bc-sub { font-size: 12px; color: var(--pencil); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bc-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--ink-2); margin-top: 4px; }
.bc-meta .ku { color: var(--binding); }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong); display: inline-block; margin-right: -4px; }
.dot.good { background: var(--good); } .dot.info { background: var(--binding); } .dot.warn { background: var(--warn); } .dot.bad { background: var(--ribbon); }
.bc-stats { margin: 0; display: grid; gap: 5px; font-size: 14px; }
.bc-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px; align-items: baseline; }
.bc-row dt { font-size: 12px; color: var(--pencil); }
.bc-row dd { margin: 0; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; font-variant-numeric: tabular-nums; }
.bc-row .of { color: var(--pencil); font-size: 12px; margin-left: 3px; }
.bc-row .meter { display: inline-flex; width: 56px; gap: 2px; margin: 0; align-self: center; }
.bc-note { font-size: 12px; color: var(--pencil); }
.bc-month { display: grid; grid-template-columns: 64px repeat(3, minmax(0, 1fr)); gap: 8px; align-items: end; border-top: 1px solid var(--rule); padding-top: 10px; margin-top: auto; }
.bc-cap { font-size: 12px; color: var(--pencil); align-self: end; padding-bottom: 2px; }
.bc-month > div { display: flex; flex-direction: column; text-align: right; }
.bc-l { font-size: 12px; color: var(--pencil); white-space: nowrap; }
.bc-n { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bc-yday { font-size: 12px; color: var(--pencil); }
.bc-yday.up { color: var(--good-text); }
/* Books in preparation: no reduced opacity (small text would get too faint); the title uses the secondary ink */
/* 准备中的书：不降透明度（小字会不够清楚），书名改用次要墨色 */
.bcard.prep .bc-title { color: var(--ink-2); }
.bc-prep { font-size: 12px; color: var(--pencil); margin: 0; }
.state { font-size: 12px; color: var(--pencil); }
@media (max-width: 960px) {
  .books { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .books .bcard:nth-child(n) { border-right: 1px solid var(--rule); padding: 16px; }
  .books .bcard:nth-child(2n) { border-right: 0; padding-right: 0; }
  .books .bcard:nth-child(2n + 1) { padding-left: 0; }
}
@media (max-width: 640px) {
  .books { grid-template-columns: minmax(0, 1fr); }
  .books .bcard:nth-child(n) { border-right: 0; padding: 16px 0 14px; }
  .bc-stats { grid-template-columns: 1fr 1fr; gap: 8px 16px; }
  .bc-row { grid-template-columns: 1fr; gap: 0; }
}
/* KU term table: on narrow screens one block per book, text wraps, no horizontal scrolling */
/* KU 本期表：窄画面改成每本书一块，文字自动换行，不需要横向滑动 */
@media (max-width: 720px) {
  table.t.ku { min-width: 0; }
  table.t.ku thead { display: none; }
  table.t.ku, table.t.ku tbody, table.t.ku tr, table.t.ku td { display: block; width: 100%; }
  table.t.ku tr { padding: 10px 0; border-bottom: 1px solid var(--rule); }
  table.t.ku td { border: 0; padding: 2px 0; white-space: normal; display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 8px; text-align: left; }
  table.t.ku td.r { text-align: left; }
  table.t.ku td::before { content: attr(data-l); color: var(--pencil); font-size: 12px; }
  table.t.ku td:first-child { display: block; font-weight: 600; padding-bottom: 4px; }
  table.t.ku td:first-child::before { content: none; }
}
.cover {
  width: 36px; height: 54px; border-radius: 2px; flex: none; overflow: hidden; position: relative;
  display: grid; place-items: center; color: #fff; font-weight: 600; font-size: 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.cover img { width: 100%; height: 100%; object-fit: cover; }
.cover.lg { width: 84px; height: 126px; font-size: 32px; border-radius: 3px; }
/* No cover yet: a light dashed box with "no cover" and the short name */
/* 还没有封面：浅色虚线框，写“未上传封面”和简称 */
.cover.none { background: var(--surface-2); border: 1px dashed var(--border-strong); box-shadow: none; color: var(--pencil);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 3px 2px;
  font-size: 11px; font-weight: 400; line-height: 1.15; text-align: center; }
.cover.none .cv-none > span { display: block; }
.cover.none .cv-name { color: var(--ink-2); font-weight: 600; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cover.lg.none { font-size: 12px; gap: 6px; }

/* ---------- Sections (other tabs and the drawer): no card frames, separated by space and titles ---------- */
/* ---------- 区块（其他分页与详情）：不做卡片框，用留白与标题分开 ---------- */
.card { min-width: 0; }
.card-h { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; padding-bottom: 10px; }
.card-h .sub { font-size: 12px; color: var(--pencil); }
.card-h .right { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.card-b { padding: 0; }
.card-note { padding-top: 8px; font-size: 12px; color: var(--pencil); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px; }
.trend .chart { border-top: 1px solid var(--rule); padding-top: 8px; }

/* Segmented switches */
/* 分段切换 */
.seg { display: inline-flex; padding: 2px; background: var(--neutral-soft); border-radius: 7px; flex-wrap: wrap; }
.seg button { border: 0; background: transparent; padding: 3px 10px; font-size: 12px; border-radius: 5px; cursor: pointer; color: var(--ink-2); white-space: nowrap; }
.seg button[aria-pressed="true"] { background: var(--leaf); color: var(--ink); font-weight: 600; box-shadow: 0 0 0 1px var(--rule); }
.seg button:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---------- Charts ---------- */
/* ---------- 图表 ---------- */
/* Tooltips stay inside the chart (confine); clip their first-appearance overflow so a tap on a phone does not make the page jump */
/* 提示框一律限制在图内（confine）；裁掉它初次出现时的临时溢出，免得手机上点一下整页跳动 */
.chart { width: 100%; height: 280px; overflow: hidden; }
.chart.sm { height: 220px; }
.chart.xs { height: 240px; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; padding-top: 8px; font-size: 12px; color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.legend i.line { height: 2px; width: 12px; border-radius: 0; }
.legend i.area { background: var(--promo-line); border: 0; height: 4px; width: 14px; border-radius: 2px; align-self: center; }
.legend i.mark { width: 0; height: 12px; border-left: 2px dashed var(--change); border-radius: 0; }
.empty { padding: 24px 0; color: var(--pencil); font-size: 14px; border-top: 1px solid var(--rule); }
.empty b { display: block; color: var(--ink-2); font-weight: 600; margin-bottom: 2px; }
.empty p { margin: 0; max-width: 520px; }

/* ---------- Status text (no coloured pills) ---------- */
/* ---------- 状态小字（不做底色胶囊） ---------- */
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong); }
.pill.plain::before { display: none; }
.pill.good::before { background: var(--good); }
.pill.info { color: var(--binding); }
.pill.info::before { background: var(--binding); }
.pill.warn { color: var(--warn-text); }
.pill.warn::before { background: var(--warn); }
.pill.bad { color: var(--ribbon); }
.pill.bad::before { background: var(--ribbon); }
.pill.today { color: var(--today); font-weight: 600; }
.pill.today::before { background: var(--today); }
.tag { display: inline-flex; align-items: center; font-size: 12px; color: var(--pencil); white-space: nowrap; }
.tag.accent { color: var(--binding); }
.tag.warn { color: var(--warn-text); }
.tag.bad { color: var(--ribbon); }
.tag.good { color: var(--good-text); }
.book-title { font-family: var(--serif); font-weight: 600; font-size: 18px; line-height: 1.3; overflow-wrap: anywhere; }
.book-meta { font-size: 12px; color: var(--pencil); margin-top: 2px; overflow-wrap: anywhere; }
.book-tags { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; align-items: center; }
.meter { display: flex; gap: 2px; margin-top: 4px; }
.meter i { flex: 1; height: 4px; border-radius: 2px; background: var(--surface-3); }
.meter i.on { background: var(--promo-line); }
.swatch-dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; flex: none; margin-right: 6px; vertical-align: 1px; }

/* ---------- Lists and tables ---------- */
/* ---------- 列表与表格 ---------- */
.list { display: flex; flex-direction: column; }
.li { display: flex; gap: 14px; padding: 10px 0; border-top: 1px solid var(--rule); align-items: flex-start; min-width: 0; }
.li-date { width: 84px; flex: none; font-size: 12px; color: var(--pencil); line-height: 1.5; }
.li-date b { display: block; font-size: 14px; color: var(--ink); font-weight: 600; }
.li-date .li-wd { display: block; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Records page: file paths and screenshot evidence fold away in small expandable blocks */
/* 记录页：文件路径和截图证据收在可展开的小块里 */
details.evidence { margin-top: 4px; font-size: 12px; }
details.evidence > summary { list-style: none; cursor: pointer; color: var(--binding); display: inline-flex; align-items: center; gap: 4px; min-height: 28px; }
details.evidence > summary::-webkit-details-marker { display: none; }
details.evidence > summary .chev { color: currentColor; width: 12px; height: 12px; }
details.evidence .li-sub { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 8px; }
details.evidence .ev-l { color: var(--pencil); }
details.evidence code { overflow-wrap: anywhere; color: var(--ink-2); }
.li-main { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.li-sub { font-size: 12px; color: var(--pencil); margin-top: 2px; }
.li-right { margin-left: auto; flex: none; display: flex; gap: 8px; align-items: center; }
.li.done .li-title { color: var(--pencil); }
.li.struck .li-title { text-decoration: line-through; color: var(--pencil); }

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.t { width: 100%; border-collapse: collapse; font-size: 14px; }
table.t th { text-align: left; font-weight: 400; color: var(--pencil); font-size: 12px; padding: 6px 10px 8px; border-bottom: 1px solid var(--ink); white-space: nowrap; }
table.t td { padding: 9px 10px; border-bottom: 1px solid var(--rule); vertical-align: top; }
table.t th:first-child, table.t td:first-child { padding-left: 0; }
table.t td.r, table.t th.r { text-align: right; font-variant-numeric: tabular-nums; }

.kv { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px 14px; font-size: 14px; margin: 0; }
.kv dt { color: var(--pencil); font-size: 12px; padding-top: 2px; }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: 12px; padding: 2px 8px; border-radius: 4px; background: var(--surface-2); color: var(--ink); overflow-wrap: anywhere; }
.prices { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 4px 16px; }
.price { padding: 4px 0; font-size: 12px; border-bottom: 1px solid var(--rule); }
.price b { display: block; font-size: 14px; font-weight: 600; }
.price.main b { color: var(--binding); }
.diff { display: grid; gap: 4px; font-size: 12px; margin-top: 4px; }
.diff .from { color: var(--pencil); text-decoration: line-through; }
.diff-row { display: grid; grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr); gap: 6px; align-items: start; }
.diff-row .arrow { color: var(--pencil); text-align: center; }
.ok-mark { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; font-size: 12px; font-weight: 700; vertical-align: -3px; margin-right: 2px; }
.ok-mark.y { color: var(--good-text); }
.ok-mark.n { color: var(--pencil); }
.ok-mark.w { color: var(--warn-text); }

/* ---------- Calendar ---------- */
/* ---------- 日历 ---------- */
.cal-head { display: flex; align-items: center; gap: 6px; }
.cal-head h3 { font-family: var(--serif); font-size: 18px; min-width: 120px; text-align: center; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.cal-wd { font-size: 12px; color: var(--pencil); padding: 6px 6px; border-bottom: 1px solid var(--rule); }
.cal-day {
  min-height: 92px; padding: 6px; border: 0; border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 3px; cursor: pointer; background: none; text-align: left; font: inherit; color: inherit; min-width: 0;
}
.cal-day:nth-child(7n) { border-right: 0; }
.cal-day:hover { background: var(--neutral-soft); }
.cal-day.other { color: var(--pencil); }
/* Days of the neighbouring months: grey text, not opacity (small text must stay readable) */
/* 相邻月份：文字改灰，不用透明度（小字要够清楚） */
.cal-day.other .cal-ev { color: var(--pencil); }
.cal-day.sel { box-shadow: inset 0 0 0 2px var(--binding); }
.cal-n { font-size: 12px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; }
.cal-day.today .cal-n { background: var(--ink); color: var(--paper); font-weight: 600; }
.cal-ev { font-size: 12px; line-height: 1.35; padding: 0 4px; border-radius: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-ev.promo { background: var(--promo); border-left: 3px solid var(--promo-line); }
.cal-ev.promo.cancel { opacity: 0.5; text-decoration: line-through; }
.cal-ev.todo { color: var(--pencil); padding-left: 0; }
.cal-ev.todo.bad { color: var(--ribbon); }
.cal-ev.todo.now { color: var(--today); }
.cal-ev.todo::before { content: "· "; }
.cal-ev.todo.done { color: var(--pencil); text-decoration: line-through; }
.cal-ev.change { color: var(--change); padding-left: 0; }
.cal-more { font-size: 12px; color: var(--pencil); }
.cal-dots { display: none; gap: 3px; flex-wrap: wrap; justify-content: center; }
.cal-dots i, .cal-legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.cal-dots i.promo, .cal-legend i.promo { background: var(--promo-line); }
.cal-dots i.todo, .cal-legend i.todo { background: var(--pencil); }
.cal-dots i.todo.bad { background: var(--ribbon); }
.cal-dots i.todo.now { background: var(--today); }
.cal-dots i.change, .cal-legend i.change { background: var(--change); }
.cal-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--ink-2); }
.cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cal-detail { margin-top: 18px; }
.cal-detail h3 { font-size: 14px; margin-bottom: 4px; }

/* ---------- Book drawer (one sheet of paper) ---------- */
/* ---------- 书的详情（抽屉：一页纸） ---------- */
.scrim { position: fixed; inset: 0; background: rgba(20, 23, 28, 0.36); z-index: 60; opacity: 0; transition: opacity 0.2s; }
.scrim.open { opacity: 1; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(700px, 100vw); z-index: 61;
  background: var(--leaf); border-left: 1px solid var(--rule); box-shadow: var(--shadow-lg);
  transform: translateX(100%); transition: transform 0.22s ease; display: flex; flex-direction: column;
}
.drawer.open { transform: none; }
.drawer-head { display: flex; gap: 18px; padding: 22px 24px 16px; border-bottom: 1px solid var(--rule); align-items: flex-start; }
.drawer-head .close { margin-left: auto; flex: none; }
.drawer-body { overflow-y: auto; overflow-x: hidden; padding: 20px 24px 48px; display: grid; gap: 32px; overscroll-behavior: contain; }
.drawer .card-h h3 { font-family: var(--serif); font-size: 18px; }
.drawer-nav { display: flex; gap: 2px 12px; flex-wrap: wrap; margin-top: 10px; }
.drawer-nav a { font-size: 13px; color: var(--binding); }
.drawer-nav a:hover { color: var(--binding); }
.versus { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.versus > div { min-width: 0; }
.versus h4 { font-size: 12px; color: var(--pencil); font-weight: 400; margin-bottom: 2px; }
.versus .big { font-family: var(--serif); font-size: 18px; font-weight: 600; }

/* ---------- Toasts and misc ---------- */
/* ---------- 提示与杂项 ---------- */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(16px); z-index: 80;
  background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 8px; font-size: 14px;
  box-shadow: var(--shadow-lg); opacity: 0; transition: opacity 0.2s, transform 0.2s; max-width: calc(100vw - 32px); pointer-events: none;
}
.toast.show { opacity: 1; transform: translateX(-50%); }
.footer { font-size: 12px; color: var(--pencil); display: grid; gap: 4px; }
.links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.link-btn { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; }
.fatal { padding: 28px 0; display: grid; gap: 12px; justify-items: start; }
.fatal details { width: 100%; }
.fatal summary { cursor: pointer; color: var(--pencil); font-size: 12px; }
.fatal pre { white-space: pre-wrap; word-break: break-all; background: var(--surface-2); padding: 12px; border-radius: 6px; font-size: 12px; margin: 8px 0 0; }
/* Loading: spinner above the text, centred as a group */
/* 载入中：转圈和文字上下排、作为一组居中 */
.loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 50vh; color: var(--pencil); }
.chip-filter { display: flex; flex-wrap: wrap; gap: 4px; }
.chip-filter button { border: 0; background: none; border-radius: 12px; padding: 2px 10px; font-size: 12px; cursor: pointer; color: var(--ink-2); }
.chip-filter button:hover { background: var(--neutral-soft); }
.chip-filter button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
details.fold > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 10px; padding-bottom: 10px; flex-wrap: wrap; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary .t { font-family: var(--serif); font-size: 18px; font-weight: 600; white-space: nowrap; }
details.fold > summary .t { display: inline-flex; align-items: center; gap: 6px; }
details.fold > summary .t .chev { width: 16px; height: 16px; }
details.fold > summary .sub { font-size: 12px; color: var(--pencil); }
details.fold > summary .right { margin-left: auto; }

/* ---------- Demo banner (only on the static demo site, see js/demo.js) ----------
   Orange is the "today, running" colour; only a little of it is mixed into the background and the text stays ink,
   so the contrast is enough in both themes.

   ---------- 演示站横幅（只在静态演示站出现，见 js/demo.js）----------
   橙色是“今天、进行中”的颜色；底色只混一点，正文仍是墨色，深浅两种主题对比度都够。 */
.demo-banner { background: color-mix(in srgb, var(--today) 10%, var(--paper)); border-bottom: 1px solid color-mix(in srgb, var(--today) 35%, var(--rule)); }
.demo-in { display: flex; align-items: baseline; gap: 10px; padding-top: 8px; padding-bottom: 8px; }
.demo-badge { flex: none; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--paper);
  background: var(--today); border-radius: 4px; padding: 0 6px; line-height: 18px; }
.demo-text { font-size: 13px; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
/*
 * Links keep the text colour (same contrast) and are marked by an underline.
 * 链接沿用正文颜色（对比度相同），以下划线区分。
 */
.demo-oss { white-space: nowrap; }
.demo-link { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.demo-link:hover { text-decoration-thickness: 2px; }
.demo-footer { border-top: 1px solid var(--rule); margin-top: 24px; }
.demo-foot-in { padding-top: 12px; padding-bottom: 20px; font-size: 12px; color: var(--pencil); }
.demo-foot-in .demo-link { color: inherit; font-weight: 400; }

/* ---------- Narrow screens ---------- */
/* ---------- 窄屏 ---------- */
@media (max-width: 900px) {
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .wrap { padding: 0 16px; }
  .top-in { flex-wrap: wrap; gap: 0 10px; min-height: 0; padding-top: 8px; }
  .mark { order: 0; }
  .top-actions { order: 1; gap: 6px; }
  .tabs { order: 2; width: 100%; height: 40px; overflow-x: auto; scrollbar-width: none; margin: 0 -6px; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { padding: 0 8px; }
  .tab[aria-current="page"]::after { left: 8px; right: 8px; }
  .scope { gap: 8px; padding-top: 12px; }
  .scope-chips { flex: 1 1 100%; }
  .scope-chips button { padding: 0 10px; }
  .scope-book { flex: 1; min-width: 0; }
  .scope-book .select { width: 100%; }
  .page { gap: 32px; }
  .masthead { padding-top: 8px; }
  h1.today { font-size: 32px; }
  h1.today .wd { font-size: 16px; }
  .month-line { font-size: 14px; margin-top: 10px; }
  /* Narrow screens: the date goes above the item, the checkbox column stays, text still lines up */
  /* 窄画面：日期放在事项上面，勾选栏不变，文字仍对齐 */
  .task { grid-template-columns: 36px minmax(0, 1fr) auto; column-gap: 10px; align-items: start; padding: 6px 0; }
  .task-check { grid-row: 1 / span 2; height: 36px; margin-top: -4px; }
  .task-date { grid-column: 2; grid-row: 1; font-size: 12px; }
  .task-when { grid-column: 3; grid-row: 1; }
  .task-text { grid-column: 2 / span 2; grid-row: 2; }
  .tasks-more { margin-left: 46px; }
  .notice { padding: 6px 12px; }
  .chart { height: 240px; }
  .cal-day { min-height: 52px; padding: 4px 2px; align-items: center; }
  .cal-ev, .cal-more { display: none; }
  .cal-dots { display: flex; }
  .cal-wd { text-align: center; padding: 4px 0; }
  .drawer-head { padding: 16px 16px 12px; gap: 12px; }
  .drawer-body { padding: 16px 16px 48px; gap: 28px; }
  .cover.lg { width: 60px; height: 90px; font-size: 24px; }
  .versus { grid-template-columns: 1fr 1fr; }
  .kv { grid-template-columns: 76px minmax(0, 1fr); }
  .li-date { width: 66px; }
  .li { gap: 10px; }
  .li-right { max-width: 40%; flex-wrap: wrap; justify-content: flex-end; }
  details.fold > summary .right { margin-left: 0; width: 100%; }
  table.t th, table.t td { padding: 8px 6px; }
  .filter-btn { margin-left: 0; }
}
/* Touch screens: buttons, switches and small menus get at least a 32px tap area */
/* 触屏：按钮、切换、小目录的点按范围至少 32px */
@media (max-width: 720px), (pointer: coarse) {
  button.help { width: 32px; height: 32px; margin: -4px -4px -4px 0; vertical-align: -10px; }
  .sync-text { min-height: 32px; border-bottom: 0; text-decoration: underline dotted var(--border-strong); text-underline-offset: 4px; }
  .scope-book .clear { width: 32px; height: 32px; }
  .scope-chips button, .select { height: 32px; }
  .split .btn:last-child { width: 32px; }
  .btn-sm { height: 32px; }
  .seg button { min-height: 32px; }
  .chip-filter button { min-height: 32px; }
  .drawer-nav { gap: 0 4px; }
  .drawer-nav a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 6px; }
  .drawer-nav a:first-child { padding-left: 0; }
  details.evidence > summary { min-height: 32px; }
  .tasks-more { min-height: 36px; }
}
@media (max-width: 400px) {
  /* Very narrow: show only the time (e.g. "16:17") instead of hiding it */
  /* 很窄时只写时间（如“16:17”），不整个藏起来 */
  .sync-long { display: none; }
  .sync-short { display: inline; }
}
details.sub-fold { margin-top: 16px; }
details.sub-fold > summary { cursor: pointer; color: var(--binding); font-size: 14px; padding: 4px 0 8px; }
table.t td:first-child { white-space: nowrap; }
@media (max-width: 720px) {
  table.t { min-width: 560px; }
  .li-date { width: 76px; }
  /* Monthly table in the drawer: every number column stays visible, notes wrap, no sideways scrolling */
  /* 书的详情里的月份表：数字栏都要看得到，备注改为换行，不用左右滑 */
  .drawer table.t { min-width: 0; font-size: 13px; }
  .drawer table.t th, .drawer table.t td { padding-left: 6px; padding-right: 6px; }
  .drawer table.t td:first-child { white-space: normal; }
}
#theme-pop { min-width: 168px; }
.menu-item { display: flex; align-items: center; gap: 8px; width: 100%; height: 40px; padding: 0 10px; border: 0; background: none;
  border-radius: 6px; cursor: pointer; font-size: 14px; text-align: left; }
.menu-item:hover { background: var(--neutral-soft); }
.menu-item .tick { width: 16px; display: inline-grid; color: var(--binding); }
.popover.tip { min-width: 0; max-width: min(320px, calc(100vw - 16px)); padding: 10px 12px; font-size: 12px; line-height: 1.6; color: var(--ink-2); }
.help[aria-expanded="true"] { color: var(--binding); }
.help { width: 24px; height: 24px; place-items: center; margin-left: 2px; vertical-align: -6px; border-radius: 50%; }
.legend span { cursor: default; }

/* Remote browser: status and buttons in the notice row */
/* 远程浏览器：提醒行里的状态与按钮 */
.browser-ctl { margin-top: 8px; display: grid; gap: 6px; }
.browser-state { margin: 0; font-size: 13px; color: var(--ink-2); display: flex; align-items: center; gap: 6px; }
.browser-next { margin: 0; font-size: 12px; color: var(--pencil); }
.browser-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.browser-acts .btn { text-decoration: none; }