/* ============================================================
   General Nephrology — site/src/study.css
   閱讀輔助 (study mode): #study-btn / .study-panel / focus-mode /
   章節摺疊 / --fs-scale 字級 / .back-top
   沿用 style.css tokens; 新增變數僅 --study- 開頭 (亮暗兩套皆定義)。
   ============================================================ */

/* ------------------------------------------------------------
   tokens (--study-*, 亮色)
   ------------------------------------------------------------ */
:root {
  --study-dim-text: #5b6d77;   /* focus-mode 一般文字 (白底 ≈5.8:1, AA) */
  --study-fab-text: #ffffff;   /* .back-top 按鈕文字 (teal-700 上 ≈4.7:1) */
}

/* 暗色 A: 跟隨系統 (除非手動選亮色) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --study-dim-text: #9fb2bc;  /* ≈7:1 on #0d151c */
    --study-fab-text: #062f2b;  /* 亮 teal 上深字 */
  }
}

/* 暗色 B: 手動切換 */
:root[data-theme="dark"] {
  --study-dim-text: #9fb2bc;
  --study-fab-text: #062f2b;
}

/* ------------------------------------------------------------
   base
   ------------------------------------------------------------ */
[hidden] { display: none !important; }

/* 字級縮放 (JS 設定 documentElement 的 --fs-scale; 契約固定公式) */
.note-body {
  font-size: calc(1rem * var(--fs-scale, 1));
}

/* ------------------------------------------------------------
   topbar 按鈕: #study-btn (沿用 .icon-btn)
   ------------------------------------------------------------ */
#study-btn {
  width: 38px;
  font-weight: 650;
  font-size: 0.94rem;
  letter-spacing: 0.02em;
}

/* ------------------------------------------------------------
   .study-panel: 桌機浮層 (topbar 下方右側)
   ------------------------------------------------------------ */
.study-panel {
  position: fixed;
  top: calc(var(--topbar-h) + env(safe-area-inset-top) + 10px);
  right: max(12px, env(safe-area-inset-right));
  z-index: 60;
  width: 280px;
  max-width: calc(100vw - 24px);
  padding: 10px 14px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-2);
  font-size: 0.875rem;
}

.study-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 2px;
}
.study-row + .study-row { border-top: 1px solid var(--border); }

.study-row.study-actions {
  gap: 8px;
  padding: 10px 2px 4px;
}
.study-row.study-actions + .study-row { border-top: 0; }

.study-label {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
}

/* 字級: A− / A+ (36px 觸控目標) */
.study-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  background: var(--surface);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 650;
  cursor: pointer;
}
.study-step:hover { border-color: var(--border-strong); background: var(--accent-soft); }

.study-value {
  flex: 0 0 auto;
  min-width: 46px;
  text-align: center;
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

/* 開關 (aria-pressed=true → 主色填滿) */
.study-toggle {
  position: relative;
  flex: 0 0 auto;
  width: 46px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--study-toggle-border, #8b969d);
  border-radius: 999px;
  background: var(--surface);
  cursor: pointer;
}
.study-toggle::before {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-start: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: 0 1px 2px rgba(18, 38, 48, 0.25);
  transform: translateY(-50%);
  transition: transform 0.18s ease;
}
.study-toggle:hover { border-color: var(--primary); }
.study-toggle[aria-pressed="true"] {
  background: var(--primary);
  border-color: var(--primary);
}
.study-toggle[aria-pressed="true"]::before { transform: translate(22px, -50%); }

/* 次要按鈕: 全部展開 / 全部收合 */
.study-act {
  flex: 1 1 0;
  min-width: 0;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  background: var(--surface);
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 550;
  cursor: pointer;
  white-space: nowrap;
}
.study-act:hover { border-color: var(--border-strong); background: var(--accent-soft); }

/* 手機 <700px: 置底 bottom sheet */
@media (max-width: 699px) {
  .study-panel {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
    border-radius: var(--radius-l) var(--radius-l) 0 0;
    border-bottom: 0;
  }
}

/* ------------------------------------------------------------
   重點模式: body.focus-mode
   ------------------------------------------------------------ */
body.focus-mode .note-body {
  color: var(--study-dim-text);
}
body.focus-mode .note-body :is(strong, b) {
  color: var(--strong);
  font-weight: 700;
}
body.focus-mode .note-body mark {
  color: var(--mark-text);
  font-weight: 700;
}
/* 標題/rule 色維持原 class (style.css), 不受 dim 影響 */

/* ------------------------------------------------------------
   章節可摺疊: h2.is-collapsible / h2.is-collapsed
   ------------------------------------------------------------ */
.note-body h2.is-collapsible {
  cursor: pointer;
  user-select: none;
}
.note-body h2.is-collapsible::before {
  content: "▾";
  display: inline-block;
  margin-inline-end: 0.32em;
  color: var(--link);
  font-size: 0.72em;
  line-height: 1;
  vertical-align: 0.12em;
  transition: transform 0.16s ease;
}
.note-body h2.is-collapsible.is-collapsed::before {
  content: "▸";
}
.note-body h2.is-collapsible:focus-visible {
  outline: 2px solid var(--ring, var(--link));
  outline-offset: 4px;
  border-radius: 2px;
}

/* ------------------------------------------------------------
   回到頂部: .back-top
   ------------------------------------------------------------ */
.back-top {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 60;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--primary);
  color: var(--study-fab-text);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-1);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.back-top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.back-top:hover { background: var(--link-hover); }
.back-top:focus-visible {
  outline: 2px solid var(--ring, var(--link));
  outline-offset: 2px;
}

/* ------------------------------------------------------------
   print: 一律隱藏
   ------------------------------------------------------------ */
@media print {
  #study-btn,
  .study-panel,
  .back-top { display: none; }
}

/* ------------------------------------------------------------
   動效偏好
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .study-toggle::before,
  .note-body h2.is-collapsible::before,
  .back-top {
    transition: none;
  }
}

/* ============================================================
   追加批次: 書籤與繼續閱讀 (.bookmark-btn / .nav-bookmarks*)
   色彩全部沿用 style.css tokens, 無新增變數
   ============================================================ */

/* --- 收藏按鈕 (.note-meta 內的小型 pill, 未收藏 ☆ / 已收藏 ★) --- */
.bookmark-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  padding: 2px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.5;
  cursor: pointer;
}
.bookmark-btn:hover {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--text);
}
/* 已收藏: 淡主色底 + 主色字 */
.bookmark-btn[aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: var(--primary);
  color: var(--link);
}
.bookmark-btn[aria-pressed="true"]:hover {
  background: var(--accent-soft);
  border-color: var(--primary);
  color: var(--link-hover);
}
.bookmark-btn:focus-visible {
  outline: 2px solid var(--ring, var(--link));
  outline-offset: 2px;
}

/* --- 側欄「我的收藏」區塊 (插在 .nav-home 之後) --- */
.nav-bookmarks {
  margin: 12px 0 2px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.nav-bookmarks-title {
  padding: 0 8px 6px;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.nav-bookmarks-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-bookmarks-list li { margin: 0; }

/* --- 收藏項目: 沿用 .nav-link, 單行省略號截斷 --- */
.nav-bookmarks .bookmark-item {
  display: block;
  white-space: nowrap;
  line-clamp: none;
  -webkit-line-clamp: none;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- 列印: 一律隱藏 --- */
@media print {
  .bookmark-btn,
  .nav-bookmarks { display: none; }
}

/* ============================================================
   追加批次: WCAG 對比修法 (dev/reports/contrast.md §三.3)
   .study-toggle 未啟用邊框 3:1 (非文字對比):
   亮 #8b969d (vs --bg #ffffff) / 暗 #536571 (vs --bg #0d151c)。
   以 --study-* token 供 .study-toggle 的 border 引用; hover 與
   aria-pressed="true" 直接設 border-color: var(--primary),
   不經此 token → 不受影響 (token 版本遵循「亮暗兩套皆定義」慣例)。
   ============================================================ */
:root {
  --study-toggle-border: #8b969d;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --study-toggle-border: #536571;
  }
}

:root[data-theme="dark"] {
  --study-toggle-border: #536571;
}