/* ============================================
   CBETA 經典閱讀 — "Temple Scroll" Design System
   ============================================ */

/* 缺字補充字型：僅作罕用字最後備援，unicode-range 排除常用漢字
   區塊以避免一般經文觸發 3.6 MB 下載。詳見
   docs/superpowers/specs/2026-06-02-cbeta-supplement-webfont-design.md */
@font-face {
  font-family: 'CBETA Supplement';
  src: url('../fonts/CBETASupplement.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal italic;
  font-display: swap;
  unicode-range:
    U+2E80-2EFF,    /* CJK 部首補充 */
    U+3400-4DBF,    /* CJK Ext A */
    U+F900-FAFF,    /* CJK 相容表意文字 */
    U+20000-2A6DF,  /* CJK Ext B */
    U+2A700-2EE5F,  /* CJK Ext C/D/E/F/I（相鄰） */
    U+2F800-2FA1F,  /* CJK 相容補充 */
    U+30000-323AF;  /* CJK Ext G/H */
}

:root {
  /* — Paper & Ink palette — */
  --bg-primary: #F5EFE0;
  --bg-secondary: #EDE6D4;
  --bg-elevated: #FAF6EC;
  --bg-drawer: #F0E9D8;
  --text-primary: #2C1810;
  --text-secondary: #6B5744;
  --text-tertiary: #9C8B78;
  --accent: #007564;
  --accent-light: #00B398;
  --accent-faint: rgba(0, 117, 100, 0.08);
  --border: rgba(0, 117, 100, 0.12);
  --border-strong: rgba(0, 117, 100, 0.22);
  --shadow-sm: 0 1px 3px rgba(44, 24, 16, 0.06);
  --shadow-md: 0 4px 16px rgba(44, 24, 16, 0.08);
  --shadow-lg: 0 8px 32px rgba(44, 24, 16, 0.12);
  --highlight-bg: rgba(255, 215, 0, 0.3);
  --highlight-border: rgba(218, 165, 32, 0.6);

  /* — Typography — */
  --font-body: 'Noto Serif TC', 'Songti SC', 'SimSun', 'CBETA Supplement', serif;
  --font-ui: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', 'CBETA Supplement', sans-serif;
  --font-serif: 'Noto Serif TC', 'Songti SC', 'SimSun', 'CBETA Supplement', serif;
  --font-kai: 'KaiTi', 'DFKai-SB', 'BiauKai', 'STKaiti', 'CBETA Supplement', serif;
  --font-system: system-ui, -apple-system, 'CBETA Supplement', sans-serif;
  --font-size-base: 19px;
  --font-size-sm: 15px;
  --font-size-xs: 13px;
  --line-height: 1.9;

  /* — Spacing — */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* — Layout — */
  --top-bar-h: 52px;
  --drawer-w: min(92vw, 420px);
  --toc-w: min(80vw, 320px);
  --radius: 8px;
  --radius-lg: 14px;

  /* — Transitions — */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --duration: 0.3s;
  --duration-slow: 0.5s;
}

/* ===== NIGHT MODE ===== */
body.night-mode {
  --bg-primary: #1A1714;
  --bg-secondary: #221F1A;
  --bg-elevated: #2A261F;
  --bg-drawer: #1E1B16;
  --text-primary: #DCD0BA;
  --text-secondary: #B2A48F;
  --text-tertiary: #A49888;
  --accent: #00CCAD;
  --accent-light: #00EBC7;
  --accent-faint: rgba(0, 204, 173, 0.1);
  --border: rgba(0, 204, 173, 0.12);
  --border-strong: rgba(0, 204, 173, 0.2);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
  --highlight-bg: rgba(196, 147, 90, 0.2);
  --highlight-border: rgba(196, 147, 90, 0.4);
}

body.night-mode .ink-wash-bg {
  opacity: 0.03;
}

/* ===== RESET & BASE ===== */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--font-ui);
  background: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100dvh;
  overflow-x: hidden;
  transition: background var(--duration) var(--ease-out),
              color var(--duration) var(--ease-out);
}

/* 遮罩開啟時鎖住背景捲動。position:fixed 的遮罩擋得住點擊、擋不住捲動，
   而 iOS Safari 不吃 body { overflow: hidden }，只有把 body 抽離文件流才有效。
   `top` 由 app.js 的 setOverlayOpen() 寫成負的原捲動位置（畫面因此不跳動），
   關閉時清掉並捲回原處。**別在樣式表裡給這個 class 寫 top**，會蓋掉還原值。 */
body.scroll-locked {
  position: fixed;
  left: 0;
  width: 100%;
  overflow: hidden;
}

/* Ink wash atmospheric background */
.ink-wash-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.06;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(0, 117, 100, 0.3) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 100%, rgba(0, 90, 77, 0.2) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(0, 179, 152, 0.1) 0%, transparent 70%);
  transition: opacity var(--duration) var(--ease-out);
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 4px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 4px;
}

/* ===== TOP BAR ===== */
.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--top-bar-h);
  display: flex;
  align-items: center;
  padding: 0 var(--space-sm);
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  transition: background var(--duration) var(--ease-out),
              border-color var(--duration) var(--ease-out);
}

.top-bar__btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: var(--radius);
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.top-bar__btn:active {
  background: var(--accent-faint);
  color: var(--accent);
}

/* Brand (logo + site name) */
.top-bar__brand {
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: var(--text-primary);
  flex-shrink: 0;
  cursor: pointer;
  transition: opacity 0.15s;
}
.top-bar__brand:active {
  opacity: 0.7;
}
.top-bar__logo {
  flex-shrink: 0;
  border-radius: 6px;
  object-fit: contain;
}
.top-bar__site-name {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--text-primary);
  transition: color var(--duration) var(--ease-out);
}
.top-bar__sep {
  color: var(--text-muted, #999);
  font-size: 14px;
  margin: 0 2px;
  flex-shrink: 0;
  opacity: 0.4;
}

/* Hide site name on small screens, show logo only */
@media (max-width: 520px) {
  .top-bar__site-name { display: none; }
  .top-bar__sep { display: none !important; }
}

.top-bar__title {
  flex: 1;
  min-width: 0;
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  color: var(--text-primary);
  letter-spacing: 0.05em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 var(--space-sm);
  transition: color var(--duration) var(--ease-out);
}

.top-bar__actions {
  display: flex;
  gap: 0;
  flex-shrink: 0;
}

/* ===== DRAWER (Scripture Selector) ===== */
.drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(20, 12, 8, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration) var(--ease-out),
              visibility var(--duration);
  backdrop-filter: blur(2px);
}
.drawer-overlay.open {
  opacity: 1;
  visibility: visible;
}

.drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 201;
  width: var(--drawer-w);
  background: var(--bg-drawer);
  transform: translateX(-100%);
  transition: transform var(--duration-slow) var(--ease-out),
              background var(--duration) var(--ease-out),
              box-shadow var(--duration-slow) var(--ease-out);
  display: flex;
  flex-direction: column;
}
.drawer.open {
  transform: translateX(0);
  box-shadow: var(--shadow-lg);
}

.drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-md) var(--space-sm);
  flex-shrink: 0;
}

.drawer__title {
  font-family: var(--font-ui);
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.04em;
}

.drawer__close {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  border-radius: var(--radius);
}
.drawer__close:active {
  background: var(--accent-faint);
}

/* Tabs */
.drawer__tabs {
  display: flex;
  padding: 0 var(--space-md);
  gap: var(--space-xs);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  /* tab 文字是 nowrap，六個 tab 的 min-content 約 359px，窄螢幕（drawer = 92vw）
     放不下時會撐破 drawer 右緣；drawer 無 overflow，關閉後溢出的字會露在畫面左上。
     改為可橫向捲動：溢出被裁在 tab 列內，六個 tab 仍可滑動觸及。 */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* 捲到底時不把剩餘的捲動量交給外層（避免 iOS 橡皮筋回彈連動整頁） */
  overscroll-behavior: contain;
}

.drawer__tab {
  flex: 1;
  padding: var(--space-sm) var(--space-xs);
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
  font-weight: 400;
  color: var(--text-tertiary);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.drawer__tab.active {
  color: var(--accent);
  font-weight: 500;
  border-bottom-color: var(--accent);
}

/* Breadcrumb */
.breadcrumb {
  padding: var(--space-sm) var(--space-md);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  min-height: 0;
  flex-shrink: 0;
}
.breadcrumb:empty {
  display: none;
}
.breadcrumb__item {
  background: none;
  border: none;
  color: var(--accent);
  font-size: var(--font-size-xs);
  font-family: var(--font-ui);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  /* 目錄 label 可能又長又無斷點 —— 如冊別 › 歷代藏經補輯 › J 嘉興大藏經選錄 › J32 底下那個
     「JB277 (=X0679+X0424+…+JB277) 雲棲法彙」共 103 字，其中 95 字是無空格的連續 ASCII，
     瀏覽器找不到換行點，該項的 min-content 寬遠大於 drawer 寬（min(92vw, 420px)）。
     `.drawer` 無 overflow 裁切（見 .drawer__tabs 的同類陷阱），撐破後不只在面板內爆版，
     drawer 關閉（translateX(-100%)）後溢出那段還會留在閱讀畫面上蓋住經文。
     限制單項最寬為容器寬並以 ellipsis 截斷；扣掉的 2em 是留給前面的 `›` 分隔符，
     否則長項獨佔一行、分隔符會被擠成孤零零的一行。完整名稱由 JS 寫進 title 屬性。 */
  max-width: calc(100% - 2em);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.breadcrumb__item:active {
  background: var(--accent-faint);
}
/* 「回上一層」：麵包屑最前面的固定入口（深度 ≥ 2 才由 JS 產生）。
   路徑是純文字連結，這顆是按鈕，所以給淡底色 chip 讓兩者一眼可分。 */
.breadcrumb__back {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  padding: 2px 8px 2px 5px;
  background: var(--accent-faint);
  border: none;
  border-radius: 999px;
  color: var(--accent);
  font-family: var(--font-ui);
  font-size: var(--font-size-xs);
  line-height: 1.5;
  cursor: pointer;
  transition: background 0.15s;
}
.breadcrumb__back:active {
  background: var(--accent-light);
  color: #fff;
}

/* 當前所在的層：不可點，用灰字與前面可點的綠色路徑區隔（截斷規則與 .breadcrumb__item 相同） */
.breadcrumb__current {
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  font-family: var(--font-ui);
  font-weight: 500;
  padding: 2px 4px;
  max-width: calc(100% - 2em);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.breadcrumb__sep {
  color: var(--text-tertiary);
  opacity: 0.5;
}

/* Drawer content area */
.drawer__content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  /* 捲到底時不把剩餘的捲動量交給外層（避免 iOS 橡皮筋回彈連動整頁） */
  overscroll-behavior: contain;
}

.tab-panel {
  display: none;
  padding: var(--space-sm) 0;
}
.tab-panel.active {
  display: block;
}

/* Catalog list */
.catalog-list {
  list-style: none;
}
.catalog-list__item {
  padding: 12px var(--space-md);
  font-size: 15px;
  color: var(--text-primary);
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.15s;
  font-family: var(--font-ui);
  line-height: 1.5;
}
/* 少數 label 是無空格的連續 ASCII（如 J32 的「JB277 (=X0679+X0424+…+JB277) 雲棲法彙」，
   95 字無斷點），瀏覽器無處換行 → 該列往右溢出約 440px，drawer 關閉後還會留在閱讀畫面上
   （與 .breadcrumb__item 同源，詳見該處註解）。列表是要讀內容的，所以讓它斷行而非截斷。
   `min-width: 0` 是必要的：文字是 flex item，預設 min-width auto 不會收縮到內容寬以下。 */
.catalog-list__item,
.catalog-list__item > span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.catalog-list__item:active {
  background: var(--accent-faint);
}
.catalog-list__item::after {
  content: '';
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--text-tertiary);
  border-bottom: 1.5px solid var(--text-tertiary);
  transform: rotate(-45deg);
  flex-shrink: 0;
  margin-left: var(--space-sm);
}
.catalog-list__item--work {
  font-family: var(--font-ui);
  color: var(--text-secondary);
}
.catalog-list__item--work::after {
  display: none;
}
.catalog-list__item--work .work-juan {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  flex-shrink: 0;
}
/* 外部 HTML 文件節點（node_type = html，如「序」「編輯說明」）：
   本身是 <a target="_blank">，右側 chevron 換成外開箭頭表示會離開本站 */
.catalog-list__item--html {
  text-decoration: none;
}
.catalog-list__item--html::after {
  content: '↗';
  width: auto;
  height: auto;
  border: 0;
  transform: none;
  font-size: 13px;
  color: var(--text-tertiary);
}

/* Creator groups */
.creator-search {
  padding: var(--space-sm) var(--space-md);
  position: sticky;
  top: 0;
  background: var(--bg-drawer);
  z-index: 1;
}
.creator-search__input {
  width: 100%;
  padding: 10px 14px;
  font-size: 15px;
  font-family: var(--font-ui);
  color: var(--text-primary);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}
.creator-search__input:focus {
  border-color: var(--accent);
}
.creator-search__input::placeholder {
  color: var(--text-tertiary);
}

.stroke-groups {
  padding: var(--space-sm) 0;
}
.stroke-group__title {
  padding: var(--space-xs) var(--space-md);
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-faint);
  letter-spacing: 0.1em;
  position: sticky;
  top: 52px;
  z-index: 1;
}
.stroke-group__list {
  list-style: none;
}
.stroke-group__item {
  padding: 10px var(--space-md);
  font-size: 15px;
  color: var(--text-primary);
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  transition: background 0.15s;
}
.stroke-group__item:active {
  background: var(--accent-faint);
}
.stroke-group__item-aliases {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kw-match {
  font-style: normal;
  color: var(--accent);
  background: var(--accent-faint);
  border-radius: 2px;
  padding: 0 1px;
}

/* Dynasty list */
.dynasty-list {
  list-style: none;
  padding: var(--space-sm) 0;
}
.dynasty-list__item {
  padding: 12px var(--space-md);
  font-size: 15px;
  color: var(--text-primary);
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.15s;
}
.dynasty-list__item:active {
  background: var(--accent-faint);
}
.dynasty-list__years {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  white-space: nowrap;
}
.dynasty-list__count {
  font-size: var(--font-size-xs);
  color: var(--accent);
  background: var(--accent-faint);
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: var(--space-sm);
  flex-shrink: 0;
}

/* Works panel */
.drawer__works {
  position: absolute;
  inset: 0;
  background: var(--bg-drawer);
  display: flex;
  flex-direction: column;
  z-index: 5;
  transition: background var(--duration) var(--ease-out);
}
.drawer__works.hidden {
  display: none;
}

.works-back {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-md);
  background: none;
  border: none;
  color: var(--accent);
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
  cursor: pointer;
}

.works-title {
  padding: 0 var(--space-md) var(--space-sm);
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border);
}

.works-list {
  list-style: none;
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* 捲到底時不把剩餘的捲動量交給外層（避免 iOS 橡皮筋回彈連動整頁） */
  overscroll-behavior: contain;
}
.works-list--inline {
  /* When rendered inside a tab-panel (no flex parent / parent already scrolls) */
  flex: none;
  overflow-y: visible;
}

/* TOC search row (input + button) */
.toc-search__row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.toc-search__input {
  flex: 1;
  min-width: 0;
}
.toc-search__btn {
  flex: none;
  padding: 0 16px;
  font-size: 14px;
  font-family: var(--font-ui);
  color: #fff;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}
.toc-search__btn:hover {
  background: var(--accent-light, var(--accent));
}
.toc-search__btn:active {
  opacity: 0.8;
}
.toc-search__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Goto error / hint message */
.goto-message {
  margin-top: 10px;
  padding: 10px 12px;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
  color: #b94a48;
  background: rgba(185, 74, 72, 0.08);
  border: 1px solid rgba(185, 74, 72, 0.25);
  border-radius: var(--radius);
  word-break: break-all;
}
body.night-mode .goto-message {
  color: #f1a7a5;
  background: rgba(241, 167, 165, 0.1);
  border-color: rgba(241, 167, 165, 0.3);
}
.works-list__item {
  padding: 12px var(--space-md);
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.works-list__item:active {
  background: var(--accent-faint);
}
.works-list__title {
  font-family: var(--font-ui);
  font-size: 15px;
  color: var(--text-primary);
  line-height: 1.5;
}
.works-list__meta {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  margin-top: 2px;
}

/* ===== TOC PANEL ===== */
.toc-overlay {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgba(20, 12, 8, 0.35);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration) var(--ease-out),
              visibility var(--duration);
}
.toc-overlay.open {
  opacity: 1;
  visibility: visible;
}

.toc-panel {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 151;
  width: var(--toc-w);
  background: var(--bg-elevated);
  transform: translateX(-100%);
  transition: transform var(--duration-slow) var(--ease-out),
              background var(--duration) var(--ease-out),
              box-shadow var(--duration-slow) var(--ease-out);
  display: flex;
  flex-direction: column;
}
.toc-panel.open {
  transform: translateX(0);
  box-shadow: var(--shadow-lg);
}

.toc-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.toc-panel__title {
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.04em;
}

/* 目錄面板頂端的「經典資訊」固定入口（在 #tocContent 之外，不受 renderToc 清空影響） */
.toc-panel__info {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  padding: var(--space-md);
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
  color: var(--accent);
  background: var(--accent-faint);
  border: none;
  border-bottom: 1px solid var(--border);
  text-align: left;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.2s var(--ease-out);
}

.toc-panel__info:active {
  opacity: 0.7;
}

.toc-panel__close {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  border-radius: var(--radius);
}

.toc-panel__content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* 捲到底時不把剩餘的捲動量交給外層（避免 iOS 橡皮筋回彈連動整頁） */
  overscroll-behavior: contain;
  padding: var(--space-sm) 0;
}

.toc-panel__empty {
  padding: var(--space-xl);
  text-align: center;
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

/* TOC tree
   每一列有兩個獨立動作：左側三角 = 展開／收合下層（面板不關），
   其餘整片 = 開啟該段經文（並關閉面板）。面板內刻意不放文字說明，
   分界靠「靜止安靜、按下才亮」傳達：三角區與標題區各自有獨立的
   hover/:active 底色，使用者第一次按下去就知道這是兩顆按鈕。
   修改時請保留這組互動回饋。 */
.toc-tree {
  list-style: none;
}
/* 層級縮排走這裡的 padding-left（--toc-depth 由 app.js 寫在列上）。
   不可改回 .toc-tree .toc-tree { padding-left } —— 縮排若加在 ul 上，葉節點
   沒有 toggle 佔位，標題左緣會與同層父節點的三角對齊而非與父節點標題對齊。 */
.toc-item {
  display: flex;
  align-items: stretch;
  padding-left: calc(var(--space-sm) + var(--toc-depth, 0) * 12px);
  font-size: 15px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
  line-height: 1.4;
  font-family: var(--font-ui);
}

/* 左側三角：展開／收合。靜止時淡到接近純指示，按下才顯出「這是一顆按鈕」。
   實心三角是 disclosure 標記，不可換成箭頭或 chevron —— 右指箭頭在列表裡
   代表「進入／開啟」，會與右側標題的「開啟經文」撞語意。 */
.toc-item__toggle {
  flex-shrink: 0;
  width: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.toc-item__toggle:hover,
.toc-item__toggle:active {
  background: var(--accent-faint);
  color: var(--accent);
}
.toc-item__caret {
  transition: transform 0.2s;
}
.toc-item__toggle.expanded .toc-item__caret {
  transform: rotate(90deg);
}

/* 右側：開啟該段經文 */
.toc-item__label {
  flex: 1;
  min-width: 0;
  padding: 10px var(--space-md) 10px 0;
  font: inherit;
  color: inherit;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
/* 葉節點沒有 toggle，補上等寬空位，讓標題左緣與同層父節點的標題切齊 */
.toc-item:not(.toc-item--branch) > .toc-item__label {
  padding-left: 36px;
}
.toc-item__label:hover,
.toc-item__label:active {
  background: var(--accent-faint);
  color: var(--accent);
}
/* 有下層的列：標題略加強，與葉節點分出層次 */
.toc-item--branch > .toc-item__label {
  color: var(--text-primary);
  font-weight: 500;
}
.toc-item.active {
  color: var(--accent);
  font-weight: 500;
  background: var(--accent-faint);
}

/* ===== MAIN READING AREA ===== */
.reading-area {
  position: relative;
  z-index: 1;
  padding-top: var(--top-bar-h);
  min-height: 100dvh;
}

/* Welcome screen */
.welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100dvh - var(--top-bar-h));
  padding: var(--space-2xl);
  text-align: center;
  animation: fadeIn 0.8s var(--ease-out);
}
.welcome__icon {
  color: var(--text-tertiary);
  margin-bottom: var(--space-lg);
}
.welcome__icon img {
  border-radius: 12px;
}
.welcome__title {
  font-family: var(--font-ui);
  font-size: 22px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-md);
  letter-spacing: 0.06em;
}
.welcome__desc {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-sm);
}
.welcome__hint {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
}
/* 歡迎畫面頁尾：關於我們入口（另一個入口在設定面板底部） */
.welcome__footer {
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
}
.welcome__about {
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  background: none;
  border: none;
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  transition: color var(--transition);
}
.welcome__about:hover {
  color: var(--accent);
}

/* Scripture content */
.scripture {
  max-width: 680px;
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md) var(--space-2xl);
  animation: scrollReveal 0.6s var(--ease-out);
}

.scripture__header {
  padding-bottom: var(--space-lg);
  margin-bottom: var(--space-lg);
  border-bottom: 1px solid var(--border);
}

.scripture__title {
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.06em;
  line-height: 1.4;
  margin-bottom: var(--space-sm);
}

.scripture__meta {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  line-height: 1.5;
}

/* Juan selector */
.juan-selector {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}
.juan-selector__select {
  padding: 6px 28px 6px 12px;
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239C8B78' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
}

/* Scripture body — the heart of the reading experience */
.scripture__body {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height);
  color: var(--text-primary);
  letter-spacing: 0.02em;
  word-break: break-all;
  overflow-wrap: break-word;
  transition: color var(--duration) var(--ease-out);
}

/* CBETA HTML content styling */
/* 段落刻意不縮排：與偈頌 .lg（CBETA 自帶 margin-left:1em）並置時，2em 縮排會讓
   正文開頭落在偈頌後面。CBETA 原始 HTML 的 <p> 本來就不帶 text-indent（實測九部
   經 641 個 <p>，638 個無 inline style，其餘 3 個是 margin-left）。段落分界靠
   margin-bottom 即可，不要再加回首行縮排。 */
.scripture__body p {
  margin-bottom: 0.8em;
}

/* 署名靠右，比照傳統版式的落款位置 */
.scripture__body .byline {
  text-align: right;
  font-size: 16px;
  color: var(--text-secondary);
  margin: var(--space-lg) 0;
  text-indent: 0;
}

.scripture__body .juan {
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  color: var(--accent);
  margin: var(--space-xl) 0 var(--space-lg);
  text-indent: 0;
  letter-spacing: 0.1em;
}

.scripture__body .lg {
  padding: var(--space-sm) var(--space-lg);
  margin: var(--space-md) 0;
}

.scripture__body .lg-row {
  text-indent: 0;
  display: flex;
  justify-content: center;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 1.5em;
  margin: 0;
  line-height: 0.5;
}

.scripture__body .lg-cell {
  display: inline-block;
  line-height: var(--line-height);
}

/* 窄螢幕：回收水平留白，讓偈頌盡量維持雙句並排 */
/* 詳見 docs/superpowers/specs/2026-08-12-mobile-verse-layout-design.md */
@media (max-width: 520px) {
  .scripture__body .lg {
    padding-inline: 0;
  }

  .scripture__body .lg-row {
    justify-content: flex-start;  /* 原 center：置中會把 text-indent 的縮排差額
                                     平分兩側，CBETA 的標點懸掛對齊就歪掉 0.5em */
    gap: 0 0.5em;                 /* column-gap 1.5em→0.5em；row-gap 歸零 */
  }
}

/* 不要覆蓋 .lg 的 inline margin-left 或 .lg-cell 的 inline text-indent。
   那不是浪費的留白，是 CBETA 的標點懸掛排版：開引號「凸出版心，讓該行首字
   與其他行對齊。兩種寫法都有 —— .lg 給 margin-left:1em 配首 cell 的
   text-indent:-1em（T0235），或各 row 首 cell 給 text-indent:1em（T0262，
   實測 127 處）。壓掉任何一邊，左緣就不齊了。 */

/* Tabular blocks (e.g. 編年史類年表) — CSS Grid 真表格呈現 */
/* 欄數由 JS decorateBipTables() 偵測並寫入 --bip-cols；colspan / rowspan 透過屬性選擇器 */
.scripture__body .bip-table {
  display: grid;
  grid-template-columns: repeat(var(--bip-cols, 4), minmax(0, 1fr));
  margin: var(--space-md) 0;
  font-size: 0.78em;
  line-height: 1.45;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}

/* row 是語意 wrapper，讓 cell 直接參與 parent grid 的 auto-placement */
.scripture__body .bip-table-row {
  display: contents;
}

/* CBETA HTML 偶爾在 row 之間夾 <a class="facsimile"> 等無視覺意義的標記 anchor — */
/* 它們會被 grid auto-placement 當成一個 cell 推位導致整張表錯位，從 grid flow 拿掉 */
.scripture__body .bip-table > :not(.bip-table-row):not(.lb) {
  display: none;
}

.scripture__body .bip-table-cell {
  padding: 4px 6px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  text-indent: 0;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* colspan / rowspan — 屬性選擇器（GA0009/6 + T2037/1 實測 2~4，上限拉到 8 保險） */
.scripture__body .bip-table-cell[colspan="2"] { grid-column: span 2; }
.scripture__body .bip-table-cell[colspan="3"] { grid-column: span 3; }
.scripture__body .bip-table-cell[colspan="4"] { grid-column: span 4; }
.scripture__body .bip-table-cell[colspan="5"] { grid-column: span 5; }
.scripture__body .bip-table-cell[colspan="6"] { grid-column: span 6; }
.scripture__body .bip-table-cell[colspan="7"] { grid-column: span 7; }
.scripture__body .bip-table-cell[colspan="8"] { grid-column: span 8; }
.scripture__body .bip-table-cell[rowspan="2"] { grid-row: span 2; }
.scripture__body .bip-table-cell[rowspan="3"] { grid-row: span 3; }
.scripture__body .bip-table-cell[rowspan="4"] { grid-row: span 4; }
.scripture__body .bip-table-cell[rowspan="5"] { grid-row: span 5; }
.scripture__body .bip-table-cell[rowspan="6"] { grid-row: span 6; }
.scripture__body .bip-table-cell[rowspan="7"] { grid-row: span 7; }
.scripture__body .bip-table-cell[rowspan="8"] { grid-row: span 8; }

/* .lb 在 bip-table 的 row 之間：顯示行首時須橫跨整列，避免被當成單一 grid cell */
body.show-lb .scripture__body .bip-table > .lb {
  display: block;
  grid-column: 1 / -1;
  padding: 2px 6px;
  border-bottom: 1px solid var(--border);
}

/* 行內註解 / 雙行夾註 — 縮小字級、淡色、前後加全形括號區隔正文 */
/* 兩個 class 常同時出現在 <small> 上，用 :not 避免雙重括號 */
.scripture__body .inline-note,
.scripture__body .doube-line-note:not(.inline-note) {
  font-size: 0.85em;
  color: var(--text-tertiary);
}

.scripture__body .inline-note::before,
.scripture__body .doube-line-note:not(.inline-note)::before {
  content: "（";
}

.scripture__body .inline-note::after,
.scripture__body .doube-line-note:not(.inline-note)::after {
  content: "）";
}

.scripture__body .note-orig,
.scripture__body .note {
  font-size: 0.8em;
  color: var(--text-tertiary);
  vertical-align: super;
}

.scripture__body .head {
  font-size: 1.1em;
  font-weight: 600;
  color: var(--text-primary);
  text-indent: 0;
  margin: var(--space-lg) 0 var(--space-md);
}

/* Search highlight in scripture */
.scripture__body .search-highlight,
.scripture__body mark {
  background: var(--highlight-bg);
  border-bottom: 2px solid var(--highlight-border);
  padding: 1px 2px;
  border-radius: 2px;
}
.scripture__body .search-highlight.active {
  background: var(--highlight-border, #e8a735);
  color: #fff;
  border-radius: 3px;
}

/* ===== Search Navigation Bar ===== */
.search-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 90;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--bg-elevated);
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 8px rgba(0,0,0,0.08);
  transition: background var(--duration) var(--ease-out);
}
.search-nav__btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.search-nav__btn:active {
  background: var(--accent-faint);
  color: var(--accent);
}
.search-nav__info {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--text-secondary);
  min-width: 80px;
  text-align: center;
}
.search-nav__close {
  position: absolute;
  right: 12px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-muted, #999);
  cursor: pointer;
  border-radius: var(--radius);
}
.search-nav__close:active {
  background: var(--accent-faint);
}
/* 「回搜尋結果」入口 —— 位置對稱於右側的 .search-nav__close，兩者都用 absolute
   脫離 flex 流，中間的上下筆導航才能維持置中。display 由 JS 控制（只在高亮來自
   全文搜尋時顯示），樣式表請不要宣告它的 display */
.search-nav__back {
  position: absolute;
  left: 12px;
  align-items: center;
  gap: 4px; /* 只作用在圖示與標籤之間 —— 標籤整段包在單一 span 內，
               否則裸文字節點會變成另一個 flex item，「搜尋結果」中間會多一個空隙 */
  min-height: 36px;
  padding: 0 8px;
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--accent);
  background: none;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  white-space: nowrap;
}
.search-nav__back:active {
  background: var(--accent-faint);
}
/* 有左側按鈕時，用 padding 把置中的上下筆群組推進「左按鈕與右 ✕ 之間」置中。
   左 110px：左鈕實測 12–106（12 起點 + 圖示 14 + gap 4 + 四個全形字 + padding 16，
   字寬隨字型會落在 56–60），留 4px 餘裕；右 48px = 36(✕) + 12(right)。
   數值改動請重新量測，勿憑估算 —— 這幾個數字是量出來的，不是算出來的。
   class 由 JS 與按鈕的 display 一起切換 */
.search-nav--has-back {
  padding-left: 110px;
  padding-right: 48px;
}
/* 極窄螢幕（≤360px）：文字縮成「結果」，左側 padding 一併縮到 68px，
   否則 320px 下中間群組會被擠到溢出 */
@media (max-width: 360px) {
  .search-nav__back-long {
    display: none;
  }
  .search-nav--has-back {
    padding-left: 80px;
  }
}
body.has-search-nav .reading-area {
  padding-bottom: 64px;
}
/* 搜尋導航列出現時把目錄浮動鈕抬到列的上方。它原本的 bottom: var(--space-lg)
   會讓它壓在這條 56px 高的列上面（DOM 順序在後、z-index 同為 90，所以蓋在上層），
   左側「回搜尋結果」按鈕正好在那個位置，不抬起來會被蓋住、連點擊都被它吃掉 */
body.has-search-nav .fab-toc {
  bottom: calc(56px + var(--space-lg));
}

/* Local (in-juan) search bar */
.local-search-bar {
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 95;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  width: calc(100% - 24px);
  max-width: 480px;
}
.local-search-bar__input {
  flex: 1;
  min-width: 0;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 14px;
  outline: none;
}
.local-search-bar__input:focus {
  border-color: var(--accent);
}
.local-search-bar__count {
  font-family: var(--font-ui);
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  min-width: 56px;
  text-align: center;
  flex-shrink: 0;
}
.local-search-bar__btn,
.local-search-bar__close {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-secondary);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.local-search-bar__close {
  border: none;
  color: var(--text-tertiary);
}
.local-search-bar__btn:hover,
.local-search-bar__btn:active,
.local-search-bar__close:hover {
  background: var(--accent-faint);
  color: var(--accent);
}
.local-search-bar__btn:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Footnote / Critical Apparatus (校勘記) */
.scripture__body #back,
.scripture__body #cbeta-copyright {
  display: none;
}

.note-link,
.note-link-cbeta {
  display: inline;
  font-family: var(--font-ui);
  font-size: 0.6em;
  color: var(--accent);
  cursor: pointer;
  vertical-align: super;
  line-height: 1;
  margin: 0 1px;
  opacity: 0.8;
  transition: opacity 0.15s, color 0.15s;
}
.note-link.star {
  font-size: 0.85em;
  vertical-align: baseline;
}
.note-link-cbeta {
  color: var(--accent-light, var(--accent));
  font-style: italic;
}
.note-link:hover,
.note-link:focus-visible,
.note-link-cbeta:hover,
.note-link-cbeta:focus-visible {
  opacity: 1;
  color: var(--accent-light);
  text-decoration: underline;
}
.note-link:focus-visible,
.note-link-cbeta:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-radius: 2px;
}

/* 缺字 (gaijiAnchor) — 保留原有字符/圖片，僅加上互動提示 */
.note-link-gaiji {
  cursor: pointer;
  border-bottom: 1px dotted var(--accent);
  text-decoration: none;
  color: inherit;
  transition: background-color 0.15s;
}
.note-link-gaiji:hover {
  background-color: rgba(170, 130, 80, 0.12);
}
.note-link-gaiji:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-radius: 2px;
}
.note-link-gaiji img {
  vertical-align: middle;
}

/* 缺字 tooltip 內的圖片 */
.note-tooltip .gaiji-figure {
  margin-top: 0.6em;
}
.note-tooltip .gaiji-figure img {
  max-width: 100%;
  max-height: 180px;
  display: inline-block;
}
.note-tooltip a {
  color: var(--accent-light, var(--accent));
  text-decoration: underline;
}

.note-tooltip {
  position: absolute;
  z-index: 400;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 12px 36px 12px 14px;
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
  line-height: 1.7;
  color: var(--text-primary);
  animation: popIn 0.15s var(--ease-out);
  max-width: 90vw;
  word-break: break-all;
}
.note-tooltip--above {
  animation: popInAbove 0.15s var(--ease-out);
}
@keyframes popInAbove {
  from { opacity: 0; transform: scale(0.95) translateY(4px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.note-tooltip__content {
  color: var(--text-secondary);
}
.note-tooltip__content .gaijiAnchor {
  color: var(--accent);
  text-decoration: underline;
  cursor: help;
}

.note-tooltip__close {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--text-tertiary);
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.15s, color 0.15s;
}
.note-tooltip__close:hover {
  background: var(--border);
  color: var(--text-primary);
}

/* CBETA specific classes */
/* Hidden state — taken out of flow so it occupies no space, but keeps a layout
   box at its static position so scrollIntoView still works for TOC navigation. */
.scripture__body .lb {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  font-size: 0;
  pointer-events: none;
  scroll-margin-top: calc(var(--top-bar-h) + 12px);
}

.scripture__body div[id^="p"],
.scripture__body a[name] {
  scroll-margin-top: calc(var(--top-bar-h) + 12px);
}

/* When 顯示行首 is enabled, render .lb as a small faded superscript label */
body.show-lb .scripture__body .lb {
  position: static;
  display: inline;
  width: auto;
  height: auto;
  overflow: visible;
  font-size: 0.6em;
  line-height: 1;
  vertical-align: super;
  color: var(--text-tertiary);
  opacity: 0.7;
  margin: 0 2px;
  white-space: nowrap;
  font-family: var(--font-ui);
  user-select: none;
  pointer-events: auto;
}
body.show-lb .scripture__body .lb::before {
  content: '[';
}
body.show-lb .scripture__body .lb::after {
  content: ']';
}

.scripture__body div[id^="p"] {
  margin-bottom: 0.5em;
}

/* Scripture navigation */
.scripture__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg) 0;
  margin-top: var(--space-xl);
  border-top: 1px solid var(--border);
}

.scripture__nav-btn {
  padding: 10px 18px;
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
  color: var(--accent);
  background: var(--accent-faint);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.15s;
}
.scripture__nav-btn:active {
  background: var(--accent);
  color: var(--bg-primary);
}
.scripture__nav-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.scripture__nav-info {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
}

/* Scripture copyright block (CBETA 版權資訊) */
/* 顯示/收合由 JS 切 inline style.display —— 別在此加 display 宣告 */
.scripture__copyright {
  margin-top: var(--space-md);
  border-top: 1px solid var(--border);
}

.scripture__copyright-toggle {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: var(--space-sm) 0;
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.15s;
}
.scripture__copyright-toggle:hover,
.scripture__copyright-toggle:active {
  color: var(--accent);
}

.scripture__copyright-content #cbeta-copyright p {
  margin: 0 0 var(--space-md);
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
  line-height: 1.8;
  color: var(--text-tertiary);
}
.scripture__copyright-content a {
  color: var(--accent);
}

/* ===== FAB (TOC button) ===== */
.fab-toc {
  position: fixed;
  bottom: var(--space-lg);
  left: var(--space-md);
  z-index: 90;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-elevated);
  color: var(--accent);
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: transform 0.2s var(--ease-out),
              box-shadow 0.2s,
              background var(--duration) var(--ease-out);
}
.fab-toc:active {
  transform: scale(0.92);
  box-shadow: var(--shadow-sm);
}

/* ===== SELECTION POPUP ===== */
.selection-popup {
  position: fixed;
  z-index: 300;
  display: flex;
  gap: 1px;
  background: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: popIn 0.15s var(--ease-out);
}

.selection-popup__btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 13px 16px;
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--text-primary);
  background: var(--bg-elevated);
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.selection-popup__btn:active {
  background: var(--accent-faint);
}

/* ===== SEARCH OVERLAY ===== */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: var(--bg-primary);
  transform: translateY(100%);
  transition: transform var(--duration-slow) var(--ease-out),
              background var(--duration) var(--ease-out);
  display: flex;
  flex-direction: column;
}
.search-overlay.open {
  transform: translateY(0);
}

.search-overlay__header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-sm);
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
  flex-shrink: 0;
}

.search-overlay__back {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  flex-shrink: 0;
}

.search-overlay__input-wrap {
  flex: 1;
}

.search-overlay__input {
  width: 100%;
  padding: 10px 14px;
  font-family: var(--font-ui);
  font-size: 16px;
  color: var(--text-primary);
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}
.search-overlay__input:focus {
  border-color: var(--accent);
}
.search-overlay__input::placeholder {
  color: var(--text-tertiary);
}

.search-overlay__submit {
  padding: 10px 16px;
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--bg-primary);
  background: var(--accent);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.15s;
}
.search-overlay__submit:active {
  opacity: 0.8;
}

.search-overlay__body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* 捲到底時不把剩餘的捲動量交給外層（避免 iOS 橡皮筋回彈連動整頁） */
  overscroll-behavior: contain;
  padding: var(--space-md);
}

.search-overlay__hint {
  text-align: center;
  padding: var(--space-2xl) var(--space-md);
  color: var(--text-tertiary);
  font-size: 15px;
  line-height: 1.8;
}
.search-overlay__hint-sub {
  font-size: var(--font-size-xs);
  margin-top: var(--space-sm);
  opacity: 0.7;
}

/* Search results */
.search-results__summary {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-md);
}

/* Search facets */
.search-facets {
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.search-facets__header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-ui);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  background: none;
  border: none;
  padding: 2px 0;
  cursor: pointer;
  text-align: left;
}

.search-facets__chevron {
  flex-shrink: 0;
  color: var(--text-tertiary);
  transform: rotate(90deg);
  transition: transform 0.15s;
}

.search-facets--collapsed .search-facets__chevron {
  transform: rotate(0deg);
}

.search-facets--collapsed .search-facets__group,
.search-facets--collapsed .search-facets__actions {
  display: none;
}

.search-facets__header-badge {
  font-family: var(--font-ui);
  font-size: var(--font-size-xs);
  color: var(--accent);
  background: var(--accent-faint);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1px 8px;
}

.search-facets__group {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
}

.search-facets__label {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--text-tertiary);
  white-space: nowrap;
  line-height: 36px;
  flex-shrink: 0;
}

.search-facets__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.search-facets__chips-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.search-facet-chip.facet-chip-hidden {
  display: none;
}

.search-facets__toggle {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--accent);
  background: none;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 8px 14px;
  cursor: pointer;
  align-self: flex-start;
  transition: background 0.15s;
  white-space: nowrap;
}
.search-facets__toggle:active {
  background: var(--accent-faint);
}

.search-facet-chip {
  font-family: var(--font-ui);
  font-size: 15px;
  color: var(--text-secondary);
  background: var(--accent-faint);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 10px 16px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  line-height: 1.3;
}
.search-facet-chip:active {
  background: var(--accent);
  color: var(--bg-primary);
}
.search-facet-chip.active {
  background: var(--accent);
  color: var(--bg-primary);
  border-color: var(--accent);
}

.search-facet-chip__count {
  opacity: 0.7;
  margin-left: 2px;
}

.search-facets__actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}
.search-facets__apply,
.search-facets__clear {
  font-family: var(--font-ui);
  font-size: 15px;
  border-radius: 18px;
  padding: 10px 20px;
  cursor: pointer;
  border: 1px solid var(--border);
  transition: all 0.15s;
  white-space: nowrap;
}
.search-facets__apply {
  background: var(--accent);
  color: var(--bg-primary);
  border-color: var(--accent);
}
.search-facets__apply:disabled {
  background: var(--accent-faint);
  color: var(--text-tertiary);
  border-color: var(--border);
  cursor: default;
}
.search-facets__clear {
  background: none;
  color: var(--text-secondary);
}
.search-facets__clear:disabled {
  color: var(--text-tertiary);
  opacity: 0.5;
  cursor: default;
}

.search-results__list {
  list-style: none;
}

.search-result-item {
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.search-result-item--no-kwic {
  cursor: pointer;
}
.search-result-item--no-kwic:active {
  background: var(--accent-faint);
  margin: 0 calc(-1 * var(--space-md));
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}

.search-result-item__title {
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

.search-result-item__meta {
  font-size: 14px;
  color: var(--text-tertiary);
  margin-bottom: var(--space-sm);
}

.search-result-item__kwic {
  font-family: var(--font-ui);
  font-size: 16px;
  color: var(--text-secondary);
  line-height: 1.8;
}

.search-result-item__kwic em,
.search-result-item__kwic .kw {
  color: var(--accent);
  font-weight: 600;
  font-style: normal;
}

.search-result-item__kwic-empty {
  color: var(--text-tertiary);
  font-size: 14px;
}

.search-result-item__kwic-line {
  display: block;
  padding: 4px 0;
  cursor: pointer;
  transition: background 0.15s;
}
.search-result-item__kwic-line + .search-result-item__kwic-line {
  border-top: 1px solid var(--border);
  margin-top: 4px;
  padding-top: 10px;
}
.search-result-item__kwic-line:hover {
  background: var(--accent-faint);
}
.search-result-item__kwic-line[hidden] {
  display: none;
}

.search-result-item__kwic-lb {
  display: inline-block;
  margin-right: 6px;
  color: var(--text-tertiary);
  font-size: 13px;
  font-family: var(--font-mono, monospace);
  vertical-align: 1px;
}

.search-result-item__kwic mark {
  background: var(--highlight-bg);
  color: var(--accent);
  font-weight: 600;
  padding: 0 2px;
  border-radius: 2px;
}

.search-result-item__kwic-toggle {
  display: inline-block;
  margin-top: 8px;
  padding: 0;
  background: none;
  border: none;
  color: var(--accent);
  font-size: 14px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  transition: color 0.15s;
}
.search-result-item__kwic-toggle:hover {
  color: var(--accent-light, var(--accent));
}

body.night-mode .search-result-item__kwic-line:hover {
  background: rgba(255, 255, 255, 0.06);
}

.search-results__more {
  display: block;
  width: 100%;
  padding: var(--space-md);
  margin-top: var(--space-md);
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
  color: var(--accent);
  background: var(--accent-faint);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: center;
  transition: background 0.15s;
}
.search-results__more:active {
  background: var(--accent);
  color: var(--bg-primary);
}

/* ===== DICTIONARY MODAL ===== */
.dict-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 600;
  background: rgba(20, 12, 8, 0.5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: fadeIn 0.2s var(--ease-out);
}

.dict-modal {
  width: 100%;
  max-width: 480px;
  max-height: 70vh;
  background: var(--bg-elevated);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
  animation: slideUp 0.3s var(--ease-out);
}

.dict-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.dict-modal__title {
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary);
}

.dict-modal__close {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
}

.dict-modal__body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* 捲到底時不把剩餘的捲動量交給外層（避免 iOS 橡皮筋回彈連動整頁） */
  overscroll-behavior: contain;
  padding: var(--space-md);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-secondary);
}

.dict-entry {
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--border);
}

/* ===== WORK INFO MODAL (經典著錄資訊) ===== */
/* 沿用字典 modal 的視覺語言（底部滑上、上方圓角），但用獨立 class
   以免日後調整字典樣式時意外影響此處 */
.work-info-overlay {
  position: fixed;
  inset: 0;
  z-index: 600;
  background: rgba(20, 12, 8, 0.5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: fadeIn 0.2s var(--ease-out);
}

.work-info-modal {
  width: 100%;
  max-width: 480px;
  max-height: 80vh;
  background: var(--bg-elevated);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
  animation: slideUp 0.3s var(--ease-out);
}

.work-info-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.work-info-modal__title {
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary);
}

.work-info-modal__close {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  background: none;
  border: none;
  cursor: pointer;
}

.work-info-modal__body {
  padding: var(--space-md);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* 捲到底時不把剩餘的捲動量交給外層（避免 iOS 橡皮筋回彈連動整頁） */
  overscroll-behavior: contain;
}

/* 單一欄位：標籤在上、值在下（長內容如 wit / transdesc 才有呼吸空間） */
.work-info-item {
  margin-bottom: var(--space-md);
}

.work-info-item__label {
  display: block;
  margin-bottom: 2px;
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
}

.work-info-item__value {
  display: block;
  font-family: var(--font-ui);
  color: var(--text-primary);
  line-height: 1.6;
  word-break: break-word;
}

.work-info-item__value a {
  color: var(--accent);
}

.work-info-item__value ol {
  margin: 0;
  padding-left: 1.5em;
}

/* 作譯者名字後方的「查作品、Authority」連結組 */
.work-info-links {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
}

/* 降級／錯誤提示列 */
.work-info-notice {
  margin-bottom: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  background: var(--accent-faint);
  border-radius: var(--radius);
}

.work-info-notice__retry {
  margin-left: var(--space-sm);
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
  color: var(--accent);
  background: none;
  border: none;
  text-decoration: underline;
  cursor: pointer;
}

/* ===== ABOUT MODAL ===== */
/* 視覺沿用經典資訊那套（底部滑上 + 上方圓角），但用獨立 class 以免互相影響 */
.about-overlay {
  position: fixed;
  inset: 0;
  z-index: 600;
  background: rgba(20, 12, 8, 0.5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: fadeIn 0.2s var(--ease-out);
}

.about-modal {
  width: 100%;
  max-width: 480px;
  max-height: 80vh;
  background: var(--bg-elevated);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
  animation: slideUp 0.3s var(--ease-out);
}

.about-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.about-modal__title {
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary);
}

.about-modal__close {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  background: none;
  border: none;
  cursor: pointer;
}

.about-modal__body {
  padding: var(--space-md);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* 捲到底時不把剩餘的捲動量交給外層（避免 iOS 橡皮筋回彈連動整頁） */
  overscroll-behavior: contain;
}

.about-section {
  margin-bottom: var(--space-lg);
}

.about-section:last-child {
  margin-bottom: 0;
}

.about-section__title {
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-tertiary);
  margin-bottom: var(--space-sm);
}

.about-section__text {
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-primary);
  word-break: break-word;
}

.about-link {
  color: var(--accent);
}

/* 版本資訊：標籤／值兩欄 */
.about-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-sm) var(--space-md);
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
}

.about-meta__key {
  color: var(--text-tertiary);
}

.about-meta__val {
  color: var(--text-primary);
}

/* 設定面板底部的關於我們列 */
.settings-item--link {
  margin-bottom: 0;
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
}

.settings-about {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-primary);
}

.settings-about__label {
  font-family: var(--font-ui);
  font-size: 15px;
}

.settings-about__chevron {
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.settings-about:hover .settings-about__label,
.settings-about:hover .settings-about__chevron {
  color: var(--accent);
}

/* ===== CONFIRM DIALOG ===== */
.confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 700;
  background: rgba(20, 12, 8, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  animation: fadeIn 0.2s var(--ease-out);
}

.confirm-dialog {
  width: 100%;
  max-width: 340px;
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-md) var(--space-md);
  box-shadow: var(--shadow-lg);
  animation: popIn 0.15s var(--ease-out);
}

.confirm-dialog__message {
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-primary);
  text-align: center;
  margin-bottom: var(--space-lg);
}

.confirm-dialog__actions {
  display: flex;
  gap: var(--space-sm);
}

.confirm-dialog__btn {
  flex: 1;
  padding: 12px;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 500;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}

.confirm-dialog__btn--cancel {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-secondary);
}
.confirm-dialog__btn--cancel:active {
  background: var(--accent-faint);
}

.confirm-dialog__btn--ok {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: var(--bg-primary);
}
.confirm-dialog__btn--ok:active {
  opacity: 0.85;
}
.dict-entry:last-child {
  border-bottom: none;
}
.dict-entry__term {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}
.dict-entry__def {
  font-size: 15px;
  line-height: 1.8;
}
.dict-entry__source {
  margin-top: var(--space-xs);
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--text-tertiary);
}

/* ===== SETTINGS PANEL ===== */
.settings-overlay {
  position: fixed;
  inset: 0;
  z-index: 600;
  background: rgba(20, 12, 8, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  animation: fadeIn 0.2s var(--ease-out);
}

.settings-panel {
  width: 100%;
  max-width: 480px;
  max-height: 85vh;
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
  animation: fadeIn 0.25s var(--ease-out);
  transition: background var(--duration) var(--ease-out);
}

.settings-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-md) var(--space-sm);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.settings-panel__title {
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.04em;
}

.settings-panel__close {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  border-radius: var(--radius);
}

.settings-panel__body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* 捲到底時不把剩餘的捲動量交給外層（避免 iOS 橡皮筋回彈連動整頁） */
  overscroll-behavior: contain;
  padding: var(--space-md);
}

.settings-item {
  margin-bottom: var(--space-lg);
}

.settings-item__label {
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
}

.settings-item__control {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}

.settings-font-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-faint);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.15s;
  flex-shrink: 0;
}
.settings-font-btn:active {
  background: var(--accent);
  color: var(--bg-primary);
}

.settings-font-value {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  min-width: 44px;
  text-align: center;
}

.settings-range {
  width: 100%;
  height: 4px;
  appearance: none;
  -webkit-appearance: none;
  background: var(--border);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.settings-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  background: var(--accent);
  border-radius: 50%;
  border: 2px solid var(--bg-elevated);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
.settings-range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: var(--accent);
  border-radius: 50%;
  border: 2px solid var(--bg-elevated);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

/* Toggle switch */
.settings-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.settings-toggle__label {
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-secondary);
}
.settings-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.settings-toggle__track {
  position: relative;
  width: 44px;
  height: 24px;
  background: var(--border-strong);
  border-radius: 12px;
  flex-shrink: 0;
  transition: background 0.2s;
}
.settings-toggle__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: var(--bg-elevated);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s var(--ease-out);
}
.settings-toggle input:checked + .settings-toggle__track {
  background: var(--accent);
}
.settings-toggle input:checked + .settings-toggle__track .settings-toggle__thumb {
  transform: translateX(20px);
}
.settings-toggle input:focus-visible + .settings-toggle__track {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Background color options */
.settings-bg-options {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.settings-bg-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm);
  background: none;
  border: 2px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.2s;
  min-width: 56px;
}
.settings-bg-btn.active {
  border-color: var(--accent);
}

.settings-bg-btn__swatch {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
}
.settings-bg-btn__swatch--default {
  background: #F5EFE0;
}
.settings-bg-btn__swatch--warm {
  background: #F5E6C8;
}
.settings-bg-btn__swatch--green {
  background: #E3EDCD;
}
.settings-bg-btn__swatch--white {
  background: #FFFFFF;
  border: 1px solid #ddd;
}
.settings-bg-btn__swatch--grey {
  background: #EAEAEA;
}
.settings-bg-btn__swatch--night {
  background: #1A1714;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.settings-bg-btn__name {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--text-tertiary);
  white-space: nowrap;
}

/* Font family options */
.settings-font-family-options {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.settings-font-family-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm);
  background: none;
  border: 2px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.2s;
  min-width: 56px;
}
.settings-font-family-btn.active {
  border-color: var(--accent);
}

.settings-font-family-btn__preview {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--text-primary);
  background: var(--accent-faint);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.settings-font-family-btn__preview--serif {
  font-family: var(--font-serif);
}
.settings-font-family-btn__preview--sans {
  font-family: var(--font-ui);
}
.settings-font-family-btn__preview--kai {
  font-family: var(--font-kai);
}
.settings-font-family-btn__preview--system {
  font-family: var(--font-system);
}

.settings-font-family-btn__name {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--text-tertiary);
  white-space: nowrap;
}

/* Settings preview */
.settings-preview {
  position: sticky;
  top: calc(-1 * var(--space-md));
  z-index: 1;
  margin: calc(-1 * var(--space-md)) calc(-1 * var(--space-md)) var(--space-lg);
  padding: var(--space-md);
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-body);
  line-height: var(--line-height);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
  transition: font-size 0.2s var(--ease-out),
              background 0.3s var(--ease-out);
}

/* ===== BACKGROUND THEMES ===== */
body.bg-warm {
  --bg-primary: #F5E6C8;
  --bg-secondary: #ECD9B5;
  --bg-elevated: #FAF0DC;
  --bg-drawer: #F0DEC0;
}
body.bg-green {
  --bg-primary: #E3EDCD;
  --bg-secondary: #D6E4BA;
  --bg-elevated: #EBF3D8;
  --bg-drawer: #DDE8C5;
}
body.bg-white {
  --bg-primary: #FFFFFF;
  --bg-secondary: #F5F5F5;
  --bg-elevated: #FFFFFF;
  --bg-drawer: #FAFAFA;
}
body.bg-grey {
  --bg-primary: #EAEAEA;
  --bg-secondary: #E0E0E0;
  --bg-elevated: #F2F2F2;
  --bg-drawer: #E5E5E5;
}
/* Night mode overrides all bg themes */
body.night-mode.bg-warm,
body.night-mode.bg-green,
body.night-mode.bg-white,
body.night-mode.bg-grey {
  --bg-primary: #1A1714;
  --bg-secondary: #221F1A;
  --bg-elevated: #2A261F;
  --bg-drawer: #1E1B16;
}

/* ===== LOADING ===== */
.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl);
}
.loading__spinner {
  width: 32px;
  height: 32px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.loading__text {
  margin-top: var(--space-md);
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
}

/* ===== TOAST ===== */
.toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 700;
  padding: 10px 20px;
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
  color: var(--bg-primary);
  background: var(--text-primary);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, transform 0.3s var(--ease-out), visibility 0.3s;
  white-space: nowrap;
}
.toast.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* ===== HISTORY & BOOKMARKS ===== */
.history-section {
  width: 100%;
  max-width: 480px;
  margin-top: var(--space-lg);
  text-align: left;
}
.history-section__title {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--border);
  letter-spacing: 0.04em;
}
.history-section__title svg {
  flex-shrink: 0;
  opacity: 0.6;
}
.history-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--border);
}
.history-section__head .history-section__title {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.history-section__clear {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-tertiary);
  font-family: var(--font-ui);
  font-size: var(--font-size-xs);
  padding: 4px 8px;
  border-radius: var(--radius);
  transition: background 0.15s, color 0.15s;
}
.history-section__clear:hover,
.history-section__clear:active {
  background: var(--accent-faint);
  color: var(--accent);
}
.history-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.history-list__item {
  display: flex;
  align-items: center;
  padding: 10px var(--space-sm);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.15s;
  gap: var(--space-sm);
}
.history-list__item:hover,
.history-list__item:active {
  background: var(--accent-faint);
}
.history-list__info {
  flex: 1;
  min-width: 0;
}
.history-list__title {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.history-list__meta {
  font-family: var(--font-ui);
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  margin-top: 2px;
}
.history-list__delete {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--text-tertiary);
  cursor: pointer;
  border-radius: 50%;
  opacity: 1;
  transition: background 0.15s, color 0.15s;
}
.history-list__delete:hover,
.history-list__delete:active {
  background: var(--border);
  color: var(--accent);
}
.history-list__more {
  display: block;
  width: 100%;
  margin-top: var(--space-xs);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--accent);
  font-family: var(--font-ui);
  font-size: var(--font-size-xs);
  padding: 8px;
  border-radius: var(--radius);
  transition: background 0.15s;
}
.history-list__more:hover,
.history-list__more:active {
  background: var(--accent-faint);
}
.top-bar__btn.bookmarked svg {
  fill: var(--accent);
  stroke: var(--accent);
}

/* ===== ANIMATIONS ===== */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes scrollReveal {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes popIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ===== RESPONSIVE ===== */
@media (min-width: 768px) {
  .scripture {
    padding: var(--space-xl) var(--space-2xl) var(--space-2xl);
  }

  .scripture__title {
    font-size: 28px;
  }

  .scripture__body {
    font-size: 20px;
  }
}

@media (min-width: 1024px) {
  .drawer {
    --drawer-w: 460px;
  }
  .toc-panel {
    --toc-w: 340px;
  }
}

/* ===== UTILITY ===== */
.hidden {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}