/* msyjdoc reader — mobile-first, works unchanged inside a mini-program webview.
   No external fonts, images or scripts: every request stays on this origin. */

/* An author `display` on the element beats the UA sheet's [hidden] rule, so
   without this the reading panel stays in the page and 朗读 looks dead. */
[hidden] { display: none !important; }

:root {
  --fs: 20px;
  --lh: 1.9;
  --measure: 34em;
  --gap: 0.9em;
  --bg: #f7f5ef;
  --fg: #26241f;
  --muted: #6b6558;
  --panel: #ffffff;
  --line: #d8d2c4;
  --accent: #8a3b12;
  --focus: #0b57d0;
  --hl: rgba(138, 59, 18, 0.14);
}

[data-theme="night"] {
  --bg: #14161a;
  --fg: #dfe3e8;
  --muted: #97a0ab;
  --panel: #1c2027;
  --line: #2d333d;
  --accent: #e0a45c;
  --focus: #7fb3ff;
  --hl: rgba(224, 164, 92, 0.22);
}

[data-theme="eye"] {
  --bg: #c7e0c9;
  --fg: #1f2a20;
  --muted: #4d5e4f;
  --panel: #d6ebd7;
  --line: #a8c4aa;
  --accent: #1d5b2a;
  --focus: #14591f;
  --hl: rgba(29, 91, 42, 0.18);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  /* Reading text must survive a screen reader's own text styling. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  line-height: 1.6;
  padding-bottom: env(safe-area-inset-bottom);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -999px; top: 0;
  background: var(--panel);
  color: var(--accent);
  padding: 10px 16px;
  z-index: 20;
}
.skip-link:focus { left: 8px; top: 8px; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.site-head {
  /* Kernels without env() support (mini-program webview on old iOS/X5) drop an
     entire declaration containing an unknown function, so the plain padding is
     declared first and the safe-area version overrides it. */
  padding: 14px 16px 10px;
  padding: calc(14px + env(safe-area-inset-top)) 16px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.book-title { margin: 0; font-size: 1.15rem; line-height: 1.4; }
.book-sub { margin: 4px 0 0; font-size: 0.8rem; color: var(--muted); }

.toolbar, .pager {
  position: sticky;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.toolbar { top: 0; }
.pager {
  position: static;
  border-bottom: 0;
  border-top: 1px solid var(--line);
  justify-content: space-between;
}
.tool-group { display: inline-flex; align-items: center; gap: 6px; }
.tool-value { min-width: 2.2em; text-align: center; font-variant-numeric: tabular-nums; }
.pager-pos { color: var(--muted); font-size: 0.85rem; }

.btn {
  min-height: 44px;
  min-width: 44px;
  padding: 8px 14px;
  font-size: 1rem;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}
.btn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); font-weight: 700; }
.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-mini { min-height: 44px; padding: 8px 14px; font-size: 0.9rem; }
.btn:disabled { opacity: 0.45; cursor: default; }

.tts-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 12px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.tts-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tts-actions .btn { flex: 1 1 6em; }
/* Grid items default to min-width:auto, which lets a long <option> widen the
   whole column and overflow a 320px phone. */
.tts-panel > * { min-width: 0; }
.field { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; }
.field > span { flex: 0 0 5.2em; color: var(--muted); }
.field select {
  flex: 1;
  min-height: 44px;
  min-width: 0;
  padding: 8px;
  font-size: 1rem;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.field input[type="range"] { flex: 1; min-width: 0; min-height: 44px; }
.field output { flex: 0 0 auto; min-width: 3ch; text-align: right; font-variant-numeric: tabular-nums; }
.hint { margin: 0; font-size: 0.85rem; color: var(--muted); }

.toc-panel {
  position: fixed;
  /* explicit offsets instead of the `inset` shorthand: unsupported before
     Safari 14.1 / Chromium 87, which would leave the overlay unpositioned. */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  overflow-y: auto;
  padding: 12px;
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
  background: var(--bg);
}
.toc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.toc-head h2 { margin: 0; font-size: 1.05rem; }
.toc-list { list-style: none; margin: 12px 0 0; padding: 0; }
.toc-list li { border-bottom: 1px solid var(--line); }
.toc-item {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 12px 8px;
  text-align: left;
  font-size: 1rem;
  color: var(--fg);
  background: none;
  border: 0;
  cursor: pointer;
}
.toc-item[aria-current="true"] { color: var(--accent); font-weight: 700; }
.toc-vol { margin: 18px 0 6px; font-size: 0.85rem; color: var(--muted); }

.reader { max-width: 720px; margin: 0 auto; }

/* The protected text. Selection and the long-press callout are off, but the
   characters stay in the DOM so TalkBack/VoiceOver read them normally. */
.prose {
  margin: 0 auto;
  max-width: var(--measure);
  padding: 18px 16px 40px;
  font-size: var(--fs);
  line-height: var(--lh);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.prose h2 { font-size: 1.25em; line-height: 1.5; margin: 0 0 1.2em; }
.prose p { margin: 0 0 var(--gap); text-indent: 2em; }
.prose p.no-indent, .prose .dialogue { text-indent: 0; }
.prose .loading, .prose .failed { text-indent: 0; color: var(--muted); }
.prose .current { background: var(--hl); }

.state {
  margin: 0;
  padding: 24px 16px;
  text-align: center;
  color: var(--muted);
}

/* ---- audio page (audio.html) ---- */
.audio-box {
  padding: 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.audio-title { margin: 0 0 12px; font-size: 1.05rem; font-weight: 700; }
.audio-main { display: flex; flex-direction: column; gap: 10px; }
.audio-play { align-self: flex-start; min-width: 7.5em; }
.audio-seek { display: flex; }
.audio-seek input[type="range"] { flex: 1; width: 100%; min-width: 0; min-height: 44px; }
.audio-time {
  margin: 0;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.rate-list { display: flex; flex-wrap: wrap; gap: 8px; }
/* 故意不给 flex-grow：五个倍速按钮在 320px 宽下必然换行，一 grow 就变成
   第二行那个独占整行的胖按钮，看上去像被选中的那一个。 */
.rate-opt { flex: 0 1 auto; min-width: 5.5em; text-align: center; }
/* Kept in the document but invisible: some older webview kernels refuse to
   decode a media element taken out with display:none. */
.audio-el {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.toc-item:disabled { color: var(--muted); cursor: default; }
.toc-item-meta {
  display: block;
  margin-top: 4px;
  font-size: 0.8rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

@media print {
  .prose { display: none; }
  body::after {
    content: "本文受版权保护，不允许打印。";
    display: block;
    padding: 24px;
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}