/* ==========================================================================
 * 资料阅读器（三栏）—— edu.php?act=article
 * 左：本课程资料树（可收起） / 中：正文 / 右：本页大纲（滚动高亮）
 * 变量全部走 --zai-*，三套主题自动跟随
 * ========================================================================== */

.zr {
  --zr-side-w: 268px;
  --zr-toc-w: 230px;
  --zr-gap: 28px;
  display: grid;
  grid-template-columns: var(--zr-side-w) minmax(0, 1fr) var(--zr-toc-w);
  gap: var(--zr-gap);
  max-width: 1460px;
  width: 100%;                 /* body 是 flex 列容器：显式撑满，别让 grid 收缩成一窄条 */
  margin: 0 auto;
  padding: 22px var(--zai-space-lg) 56px;
  align-items: start;
  transition: grid-template-columns .22s var(--zai-ease-out, ease);
}
.zr[data-toc="0"] { grid-template-columns: var(--zr-side-w) minmax(0, 1fr); }
.zr[data-tree="0"] { grid-template-columns: minmax(0, 1fr) var(--zr-toc-w); }
.zr[data-tree="0"][data-toc="0"] { grid-template-columns: minmax(0, 1fr); }
/* 兜底：数据说没有这一栏时，就算模板多渲染了也一并隐藏，避免子元素数多于列数导致换行错位 */
.zr[data-tree="0"] .zr-side,
.zr[data-toc="0"] .zr-toc { display: none; }
.zr.is-collapsed { grid-template-columns: 0 minmax(0, 1fr) var(--zr-toc-w); }
.zr.is-collapsed[data-toc="0"] { grid-template-columns: 0 minmax(0, 1fr); }

/* ---------------------------------------------------------------- 左栏 */
.zr-side {
  position: sticky;
  top: calc(var(--zai-header-h, 56px) + 16px);
  max-height: calc(100vh - var(--zai-header-h, 56px) - 32px);
  display: flex;
  flex-direction: column;
  background: var(--zai-surface);
  border: 1px solid var(--zai-border, rgba(20,30,60,.1));
  border-radius: var(--zai-radius-lg, 12px);
  overflow: hidden;
  transition: opacity .18s ease, transform .18s ease;
}
.zr.is-collapsed .zr-side {
  opacity: 0;
  transform: translateX(-12px);
  pointer-events: none;
  border-width: 0;
}

.zr-side-hd {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 14px 12px 12px 14px;
  border-bottom: 1px solid var(--zai-border, rgba(20,30,60,.08));
}
.zr-course { flex: 1; min-width: 0; text-decoration: none; color: inherit; }
.zr-course-t {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--zai-text-primary);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.zr-course:hover .zr-course-t { color: var(--zai-color-primary); }
.zr-course-sub {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  letter-spacing: .5px;
  color: var(--zai-text-muted);
}
.zr-btn-collapse {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--zai-border, rgba(20,30,60,.12));
  border-radius: 7px;
  background: transparent;
  color: var(--zai-text-secondary);
  cursor: pointer;
  font-size: 16px; line-height: 1;
  transition: background .14s, color .14s, border-color .14s;
}
.zr-btn-collapse:hover {
  background: var(--zai-surface-sunken);
  color: var(--zai-color-primary);
  border-color: var(--zai-color-primary-soft);
}

.zr-tree { flex: 1; overflow-y: auto; padding: 8px 8px 14px; }
.zr-tree-empty { margin: 14px 10px; font-size: 12.5px; color: var(--zai-text-muted); }

.zr-ch { margin-bottom: 4px; }
.zr-ch-t {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 7px 8px;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .3px;
  color: var(--zai-text-muted);
  border-radius: 6px;
  text-align: left;
  transition: background .14s, color .14s;
}
.zr-ch-t:hover { background: var(--zai-surface-sunken); color: var(--zai-text-secondary); }
.zr-ch-arrow { font-size: 14px; line-height: 1; opacity: .55; transition: transform .16s ease; }
.zr-ch.is-open .zr-ch-arrow { transform: rotate(90deg); }
.zr-ch-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zr-ch-num { font-size: 10.5px; font-weight: 500; opacity: .55; }
.zr-ch-body { display: none; padding-left: 2px; }
.zr-ch.is-open .zr-ch-body { display: block; }
.zr-item {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 7px 9px;
  margin: 1px 0;
  border-radius: 7px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--zai-text-secondary);
  text-decoration: none;
  transition: background .14s, color .14s;
}
.zr-item:hover { background: var(--zai-surface-sunken); color: var(--zai-text-primary); }
.zr-item-dot {
  flex: 0 0 auto;
  width: 5px; height: 5px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--zai-border-strong, rgba(20,30,60,.22));
}
.zr-item-t {
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.zr-item.is-on {
  background: var(--zai-color-primary-soft);
  color: var(--zai-color-primary);
  font-weight: 600;
}
.zr-item.is-on .zr-item-dot { background: var(--zai-color-primary); }

/* 收起后的浮出按钮 */
.zr-fab {
  position: fixed;
  left: 10px;
  top: calc(var(--zai-header-h, 56px) + 22px);
  z-index: 30;
  width: 30px; height: 30px;
  display: none;
  align-items: center; justify-content: center;
  border: 1px solid var(--zai-border, rgba(20,30,60,.12));
  border-radius: 8px;
  background: var(--zai-surface);
  color: var(--zai-text-secondary);
  box-shadow: var(--zai-shadow-sm, 0 2px 8px rgba(20,30,60,.08));
  cursor: pointer;
  font-size: 16px; line-height: 1;
}
.zr.is-collapsed .zr-fab { display: flex; }
.zr-fab:hover { color: var(--zai-color-primary); }

/* ---------------------------------------------------------------- 中栏 */
.zr-main { min-width: 0; }
.zr-doc {
  max-width: 792px;
  margin: 0 auto;
  padding: 6px 4px 0;
}
.zr-crumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-bottom: 14px;
  font-size: 12.5px;
  color: var(--zai-text-muted);
}
.zr-crumb a { color: var(--zai-text-secondary); text-decoration: none; }
.zr-crumb a:hover { color: var(--zai-color-primary); }
.zr-crumb span { opacity: .5; }

.zr-title {
  margin: 0 0 12px;
  font-size: 30px;
  line-height: 1.32;
  font-weight: 700;
  letter-spacing: -.4px;
  color: var(--zai-text-primary);
}
.zr-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--zai-border, rgba(20,30,60,.08));
  font-size: 12.5px;
  color: var(--zai-text-muted);
}
.zr-meta-dot { opacity: .5; }
.zr-meta-txt { color: var(--zai-text-secondary); }
.zr-meta-ops { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }

.zr-summary {
  margin: 0 0 20px;
  padding: 12px 14px;
  border-left: 3px solid var(--zai-color-primary-soft);
  border-radius: 0 8px 8px 0;
  background: var(--zai-surface-sunken);
  font-size: 14px;
  line-height: 1.75;
  color: var(--zai-text-secondary);
}

/* 正文排版：阅读宽度 + 标题层级 + 锚点偏移 */
.zr-body { font-size: 15.5px; line-height: 1.85; color: var(--zai-text-primary); }
.zr-body > *:first-child { margin-top: 0; }
.zr-body h1, .zr-body h2, .zr-body h3, .zr-body h4 {
  scroll-margin-top: calc(var(--zai-header-h, 56px) + 20px);
  color: var(--zai-text-primary);
  line-height: 1.45;
}
.zr-body h1 { font-size: 25px; font-weight: 700; margin: 34px 0 14px; letter-spacing: -.2px; }
.zr-body h2 { font-size: 21px; font-weight: 700; margin: 30px 0 12px; }
.zr-body h3 { font-size: 17.5px; font-weight: 650; margin: 24px 0 10px; }
.zr-body h4 { font-size: 15.5px; font-weight: 650; margin: 20px 0 8px; }
.zr-body p { margin: 0 0 14px; }
.zr-body img { max-width: 100%; height: auto; border-radius: 8px; }
.zr-body blockquote {
  margin: 16px 0;
  padding: 10px 16px;
  border-left: 3px solid var(--zai-color-primary-soft);
  background: var(--zai-surface-sunken);
  border-radius: 0 8px 8px 0;
  color: var(--zai-text-secondary);
}
.zr-body table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14px; }
.zr-body th, .zr-body td {
  border: 1px solid var(--zai-border, rgba(20,30,60,.12));
  padding: 8px 10px;
  text-align: left;
}
.zr-body th { background: var(--zai-surface-sunken); font-weight: 600; }
.zr-body code {
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--zai-surface-sunken);
  font-size: .92em;
}
.zr-body pre {
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--zai-surface-sunken);
  overflow-x: auto;
}
.zr-body pre code { padding: 0; background: none; }

.zr-foot {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--zai-border, rgba(20,30,60,.08));
}

/* ---------------------------------------------------------------- 右栏 */
.zr-toc {
  position: sticky;
  top: calc(var(--zai-header-h, 56px) + 16px);
  max-height: calc(100vh - var(--zai-header-h, 56px) - 32px);
  display: flex;
  flex-direction: column;
  padding-left: 4px;
}
.zr-toc-hd {
  padding: 0 0 10px 10px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .6px;
  color: var(--zai-text-muted);
}
.zr-toc-list {
  overflow-y: auto;
  border-left: 1px solid var(--zai-border, rgba(20,30,60,.08));
  padding-left: 2px;
}
.zr-toc-i {
  display: block;
  padding: 5px 8px 5px 10px;
  margin-left: -1px;
  border-left: 2px solid transparent;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--zai-text-secondary);
  text-decoration: none;
  border-radius: 0 6px 6px 0;
  transition: color .14s, background .14s, border-color .14s;
  overflow: hidden;
  text-overflow: ellipsis;
}
.zr-toc-i:hover { color: var(--zai-text-primary); background: var(--zai-surface-sunken); }
.zr-toc-i.lv2 { padding-left: 22px; }
.zr-toc-i.lv3 { padding-left: 34px; font-size: 12px; }
.zr-toc-i.is-on {
  color: var(--zai-color-primary);
  border-left-color: var(--zai-color-primary);
  background: var(--zai-color-primary-soft);
  font-weight: 600;
}
.zr-toc-empty {
  padding: 4px 10px;
  font-size: 12px;
  line-height: 1.8;
  color: var(--zai-text-muted);
}

/* ---------------------------------------------------------------- 响应式 */
@media (max-width: 1240px) {
  .zr, .zr[data-toc="1"] { grid-template-columns: var(--zr-side-w) minmax(0, 1fr); }
  .zr-toc { display: none; }
  .zr.is-collapsed { grid-template-columns: 0 minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .zr, .zr[data-toc="1"], .zr[data-tree="1"] { grid-template-columns: minmax(0, 1fr); padding: 14px 14px 40px; }
  .zr-side { display: none; }
  .zr-fab { display: none !important; }
  .zr-title { font-size: 23px; }
  .zr-body { font-size: 15px; line-height: 1.8; }
  .zr-meta-ops { margin-left: 0; width: 100%; }
}