/* ===========================================================
   layout.css · 应用骨架：顶栏 / 左侧大纲 / 内容区 / 翻页
   =========================================================== */

/* 汉堡：无头部后，改为移动端浮动按钮 */
.hamburger{
  position: fixed; top: 12px; left: 12px; z-index: 56;
  display: none; width: 38px; height: 38px; border: 1px solid var(--line);
  background: #fff; border-radius: var(--r-sm); box-shadow: var(--sh-1);
  align-items: center; justify-content: center; gap: 4px;
}
.hamburger span{ display: block; width: 17px; height: 2px; background: var(--ink); border-radius: 2px; }

/* 骨架 */
.shell{ display: flex; align-items: flex-start; }

/* 左侧大纲 */
.sidebar{
  position: sticky; top: 0; align-self: flex-start;
  width: var(--sidebar-w); flex: 0 0 var(--sidebar-w);
  height: 100vh; overflow-y: auto;
  padding: var(--s4) var(--s3) var(--s6);
  background: var(--bg-soft);
}
.sidebar .brand{ padding: 0 var(--s2) var(--s3); }
.brand-link{ display: flex; align-items: center; gap: 10px; color: var(--ink); }
.brand-link:hover{ color: var(--brand-700); }
.brand-link svg{ width: 30px; height: 30px; flex: none; border-radius: 8px; }
.brand-link b{ font-size: var(--fs-lg); font-weight: 800; line-height: 1.3; }
.sidebar .brand small{ display: block; color: var(--muted); font-size: var(--fs-sm); margin-top: 6px; }
.sidetools{ padding: 0 var(--s2) var(--s3); }

/* 搜索 */
.sidebar-search{ position: relative; margin: 0 var(--s2) var(--s3); }
.sidebar-search .ic{ position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); }
.sidebar-search input{
  width: 100%; padding: 9px 12px 9px 32px; border: 1px solid var(--line-strong);
  border-radius: var(--r-full); background: #fff; font-size: var(--fs-sm); color: var(--ink);
}
.sidebar-search input:focus{ outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(14,165,233,.15); }
.search-results{ margin: 0 var(--s2) var(--s3); display: grid; gap: 5px; max-height: 46vh; overflow: auto; }
.search-results a{
  display: block; padding: 8px 11px; border-radius: var(--r-sm); background: #fff;
  border: 1px solid var(--line); font-size: var(--fs-sm); color: var(--ink-2);
}
.search-results a:hover{ border-color: var(--brand); color: var(--brand-700); }
.search-results .r-no{ color: var(--brand); font-family: var(--font-code); font-size: 12px; }
.search-results .r-t{ font-weight: 700; color: var(--ink); }
.search-results .r-s{ display: block; color: var(--muted); font-size: 12px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-results mark{ background: var(--accent-soft); color: #991B1B; border-radius: 3px; padding: 0 2px; }
.search-results .r-empty{ color: var(--muted); font-size: var(--fs-sm); padding: 6px 2px; }
.hash-hit{ outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r); }

/* 二级菜单：一级=篇（可折叠），二级=课 */
.stage{ margin-bottom: var(--s1); }
.stage-title{
  width: 100%; display: flex; align-items: center; gap: 10px; text-align: left;
  background: transparent; border: 0; padding: 11px var(--s2); border-radius: var(--r-sm);
  font-size: var(--fs-body); font-weight: 800; color: var(--brand-700);
  transition: background .15s;
}
.stage-title:hover{ background: #fff; }
.stage-title .dot2{ width: 10px; height: 10px; border-radius: 3px; background: var(--brand); flex: none; }
.stage-title .st-name{ flex: 1; }
.stage-title .st-count{
  font-family: var(--font-code); font-size: 13px; color: var(--muted);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-full); padding: 1px 9px;
}
.stage-title .chev2{ width: 18px; height: 18px; color: var(--muted); transition: transform .25s; flex: none; }
.stage[data-open="true"] .stage-title .chev2{ transform: rotate(180deg); color: var(--brand); }

.navwrap{ display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; }
.stage[data-open="true"] .navwrap{ grid-template-rows: 1fr; }
.navwrap > .inner{ overflow: hidden; }

.navlist{ list-style: none; padding: 2px 0 10px 4px; margin-left: 9px; border-left: 2px solid var(--line); }
.navlist a{
  display: flex; align-items: baseline; gap: 10px;
  padding: 9px var(--s2); border-radius: var(--r-sm);
  color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.5;
  transition: background .15s, color .15s, transform .15s;
}
.navlist a .no{ font-family: var(--font-code); font-size: 13px; color: var(--muted); min-width: 24px; }
.navlist a:hover{ background: #fff; color: var(--brand-700); transform: translateX(3px); }
.navlist a.is-active{ background: #fff; color: var(--brand-700); font-weight: 800; box-shadow: var(--sh-1); }
.navlist a.is-active .no{ color: var(--accent); }
.navlist a.is-done .no::after{ content: " ✓"; color: var(--ok); }

/* 侧栏右边线：可拖动调宽（整条竖线热区） */
.resizer{ flex: 0 0 0; width: 0; align-self: stretch; position: relative; z-index: 6; cursor: col-resize; }
.resizer::after{ content: ""; position: absolute; top: 0; bottom: 0; left: -7px; width: 15px; cursor: col-resize; }
.resizer::before{
  content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px;
  background: var(--line); transition: background .15s, width .15s;
}
.resizer:hover::before, .resizer.dragging::before{ background: var(--brand); width: 3px; }

/* 抓取把手（悬停出现） */
.resizer .grip{
  position: absolute; top: 26px; left: -9px; width: 18px; height: 44px;
  border-radius: 99px; background: #fff; border: 1px solid var(--line-strong);
  box-shadow: var(--sh-1); display: grid; place-items: center;
  opacity: 0; transition: opacity .15s;
}
.resizer:hover .grip, .resizer.dragging .grip{ opacity: 1; }
.resizer .grip::after{ content: ""; width: 5px; height: 18px; border-left: 2px dotted var(--muted); }
body.resizing{ cursor: col-resize; user-select: none; }

/* 内容区 */
.content{
  flex: 1 1 auto; min-width: 0;
  padding: clamp(24px, 4vw, 56px) clamp(20px, 5vw, 72px) 120px;
  max-width: 1120px;
  margin: 0 auto;
}

/* 章节头部 */
.chapter-head{ margin-bottom: var(--s5); }
.chapter-head .kicker{
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-sm); font-weight: 800; letter-spacing: .06em;
  color: var(--brand-700); background: var(--brand-soft);
  padding: 6px 14px; border-radius: var(--r-full); margin-bottom: var(--s3);
}
.chapter-head h1{ font-size: clamp(28px, 3.6vw, 40px); }
.chapter-head .goal{
  margin-top: var(--s3); font-size: var(--fs-lg); color: var(--ink-2);
  border-left: 6px solid var(--brand); padding: 6px 0 6px 18px; background: linear-gradient(90deg, var(--brand-soft), transparent 70%);
  border-radius: 0 var(--r) var(--r) 0;
}

/* 区块标题 */
.sec-title{
  display: flex; align-items: center; gap: 14px;
  margin: var(--s6) 0 var(--s3);
  font-size: var(--fs-h3);
}
.sec-title .dot{ width: 14px; height: 14px; border-radius: 4px; background: var(--brand); flex: none; }
.sec-title.red .dot{ background: var(--accent); }

/* 翻页 */
.pager{ display: flex; gap: var(--s3); margin-top: var(--s7); flex-wrap: wrap; }
.pager a{
  flex: 1 1 260px; display: flex; flex-direction: column; gap: 6px;
  padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); transition: transform .18s, box-shadow .18s, border-color .18s;
}
.pager a:hover{ transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--brand); }
.pager a small{ color: var(--muted); font-size: var(--fs-sm); }
.pager a b{ font-size: var(--fs-lg); }
.pager a.next{ text-align: right; align-items: flex-end; }

/* 讲师 / 学员 视图切换（按钮已隐藏，功能保留：把 .mode-toggle 的 display 改成 inline-flex 即可显示） */
.mode-toggle{
  display: none; align-items: center; gap: 6px;
  padding: 4px 6px; border: 0; background: none;
  color: var(--muted); font-size: var(--fs-sm); font-weight: 700;
  border-radius: var(--r-sm);
}
.mode-toggle:hover{ color: var(--brand-700); }
.mode-toggle.is-student{ color: var(--brand); }
.mode-toggle svg{ width: 16px; height: 16px; }

/* 学员视图：隐藏所有“讲师专属”内容（讲解目标 / 讲师提示 / 常见误区） */
html[data-mode="student"] .chapter-head .goal,
html[data-mode="student"] .callout{ display: none; }

/* 页脚 */
.foot{ margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--line); color: var(--muted); font-size: var(--fs-sm); }

/* 回到顶部 */
.totop{
  position: fixed; right: 22px; bottom: 22px; z-index: 55;
  width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line);
  background: #fff; box-shadow: var(--sh-2); display: none; place-items: center;
}
.totop.show{ display: grid; }
.totop svg{ width: 22px; height: 22px; }