/* ============================================================
   vibe Coding 课程 · 共享样式（teach 工作区共享皮肤）
   每个 lesson/reference HTML 都 <link> 这个文件：
   <link rel="stylesheet" href="../assets/course.css">
   取向：暖调、克制、专业，为零基础学员长时间阅读优化。
   配色用暖中性灰 + 一个沉稳的蓝强调 + 语义色，并有一层轻量深度。
   ============================================================ */

:root {
  /* 暖中性（灰里带一点暖，避免冷硬） */
  --paper: #fbf9f3;          /* 页面底色：暖近白 */
  --surface: #ffffff;        /* 卡片/浮层底色 */
  --ink: #221f1a;            /* 主文字：暖近黑 */
  --ink-soft: #5d564c;       /* 次要文字 */
  --ink-faint: #948c7e;      /* 第三级/元数据 */
  --rule: #e8e2d6;           /* 边框/分隔线 */
  --rule-soft: #f0ebe1;      /* 更浅的分隔 */

  /* 蓝强调（比默认网页蓝更沉、更专业） */
  --accent: #2a5fd0;         /* 链接/强调/主按钮 */
  --accent-strong: #1f49a8;  /* hover / active */
  --accent-bg: #eaf0fc;      /* 选中/高亮底 */

  /* 语义色 */
  --win: #0e7a52;            /* 小赢 / 正确 / 成功 */
  --win-bg: #e4f4ec;
  --warn: #b06a12;           /* 坑 / 注意 */
  --warn-bg: #fbf0dd;
  --error: #c23a2c;          /* 错误 / 反例 */
  --error-bg: #fbeae6;

  --code-bg: #f3f1ea;        /* 代码底 */
  --quiz-bg: #f7f4ec;        /* 交互块底（暖） */

  /* 深度（暖调阴影） */
  --shadow-1: 0 1px 2px rgba(70,55,35,.05), 0 2px 6px rgba(70,55,35,.05);
  --shadow-2: 0 6px 20px rgba(70,55,35,.10);

  --maxw: 44rem;
  --radius: 11px;
  --radius-sm: 7px;
  --font: -apple-system, "Segoe UI", Roboto, "PingFang SC",
          "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --mono: "SF Mono", "JetBrains Mono", Menlo, Consolas, "Courier New", monospace;
}

* { box-sizing: border-box; }
::selection { background: var(--accent-bg); }

body {
  margin: 0 auto;
  max-width: var(--maxw);
  padding: 2.6rem 1.3rem 5rem;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.06rem;
  line-height: 1.78;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* —— 标题（层级靠字号 + 字重 + 颜色，不喧哗）—— */
h1, h2, h3 { line-height: 1.3; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: 1.92rem; margin: 0 0 .35rem; }
h2 { font-size: 1.3rem; margin: 2.6rem 0 .85rem; padding-bottom: .35rem; border-bottom: 1px solid var(--rule); }
h3 { font-size: 1.08rem; margin: 1.7rem 0 .5rem; }

p, li { color: var(--ink); }
a { color: var(--accent); text-decoration: none; border-bottom: 1px solid rgba(42,95,208,.28); transition: color .15s, border-color .15s; }
a:hover { color: var(--accent-strong); border-bottom-color: var(--accent-strong); }
small, .muted { color: var(--ink-soft); }
strong, b { font-weight: 700; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* —— 课头：阶段 / 课号 / 主资源 —— */
.lesson-meta {
  font-size: .82rem; color: var(--ink-faint);
  letter-spacing: .05em; text-transform: uppercase;
  margin-bottom: .25rem; font-weight: 600;
}

/* —— 小赢横幅（每节一个）—— */
.win {
  display: flex; gap: .6rem; align-items: flex-start;
  background: var(--win-bg); border: 1px solid rgba(14,122,82,.22); border-left: 4px solid var(--win);
  border-radius: var(--radius); padding: .85rem 1.05rem; margin: 1.5rem 0;
}
.win b { color: var(--win); }

/* —— 通用 callout / 坑提醒 —— */
.callout { background: var(--surface); border: 1px solid var(--rule); border-left: 4px solid var(--rule);
  border-radius: var(--radius); padding: .85rem 1.05rem; margin: 1.3rem 0; box-shadow: var(--shadow-1); }
.callout.warn { background: var(--warn-bg); border-color: rgba(176,106,18,.25); border-left-color: var(--warn); box-shadow: none; }
.callout.warn b { color: var(--warn); }
.callout.action { background: #eef4ff; border-color: rgba(31,111,235,.18); border-left-color: var(--accent); box-shadow: none; }
.callout.action b { color: var(--accent); }

/* —— 动手步骤 —— */
ol.steps { counter-reset: step; list-style: none; padding-left: 0; }
ol.steps > li {
  counter-increment: step; position: relative;
  padding: .3rem 0 .3rem 2.3rem; margin: .5rem 0;
}
ol.steps > li::before {
  content: counter(step); position: absolute; left: 0; top: .2rem;
  width: 1.55rem; height: 1.55rem; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: .85rem; font-weight: 600;
  display: grid; place-items: center;
}

/* —— 代码 —— */
code { font-family: var(--mono); background: var(--code-bg);
  padding: .12em .4em; border-radius: 5px; font-size: .92em; }
pre { background: var(--code-bg); padding: 1rem; border-radius: var(--radius);
  overflow-x: auto; line-height: 1.55; border: 1px solid var(--rule); }
pre code { background: none; padding: 0; }

/* —— 小测 / 反馈 —— */
.quiz { background: var(--quiz-bg); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 1.05rem 1.1rem; margin: 1.5rem 0; box-shadow: var(--shadow-1); }
.quiz > p:first-child { font-weight: 600; margin-top: 0; }
.quiz .options { display: grid; gap: .5rem; margin: .6rem 0; }
.quiz button {
  text-align: left; font: inherit; cursor: pointer;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-sm);
  padding: .6rem .85rem; transition: border-color .15s, background .15s, box-shadow .15s, transform .1s;
}
.quiz button:hover { border-color: var(--accent); box-shadow: var(--shadow-1); }
.quiz button:active { transform: translateY(1px); }
.quiz button.correct { border-color: var(--win); background: var(--win-bg); }
.quiz button.wrong { border-color: var(--error); background: var(--error-bg); }
.quiz .feedback { margin-top: .6rem; font-size: .95rem; color: var(--ink-soft); min-height: 1.2em; }

/* —— 术语/参考链接条 —— */
.refbar { font-size: .9rem; color: var(--ink-soft);
  border-top: 1px solid var(--rule); margin-top: 2.6rem; padding-top: 1rem;
  display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; }

/* —— 问老师提醒（每节结尾）—— */
.ask-teacher { margin-top: 1.7rem; font-size: .95rem; color: var(--ink-soft);
  background: var(--rule-soft); border-radius: var(--radius); padding: .8rem 1.05rem;
  border-left: 3px solid var(--rule); }

/* —— 参考卡（reference/*.html，为打印优化）—— */
.ref-card h1 { font-size: 1.55rem; }
.ref-card .lead { color: var(--ink-soft); font-size: 1.02rem; margin: .4rem 0 1.5rem; }
.ref-card table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.ref-card th, .ref-card td { border: 1px solid var(--rule); padding: .55rem .7rem; text-align: left; vertical-align: top; }
.ref-card th { background: var(--code-bg); }

/* 目录 */
.ref-card .toc { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: .85rem 1.1rem; margin: 1.5rem 0; font-size: .95rem; box-shadow: var(--shadow-1); }
.ref-card .toc b { display: block; margin-bottom: .3rem; color: var(--ink-faint);
  font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; }
.ref-card .toc ol { margin: 0; padding-left: 1.3rem; }

/* 经验法则 / 一句话要点高亮 */
.ref-card .rule { background: var(--win-bg); border-left: 4px solid var(--win);
  border-radius: var(--radius); padding: .75rem 1rem; margin: 1rem 0; }
.ref-card .rule::before { content: "经验法则 "; font-weight: 700; color: var(--win); }

/* 做 / 别做 对照 */
.ref-card .dodont { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin: 1rem 0; }
.ref-card .do, .ref-card .dont { border-radius: var(--radius); padding: .75rem .9rem; font-size: .97rem; }
.ref-card .do { background: var(--win-bg); border: 1px solid rgba(14,122,82,.3); }
.ref-card .dont { background: var(--error-bg); border: 1px solid rgba(194,58,44,.28); }
.ref-card .do b { color: var(--win); }
.ref-card .dont b { color: var(--error); }
.ref-card .do ul, .ref-card .dont ul { margin: .3rem 0 0; padding-left: 1.1rem; }

/* 数值刻度等成排的小标记 */
.ref-card .scale { font-family: var(--mono); background: var(--code-bg);
  padding: .5rem .7rem; border-radius: var(--radius-sm); display: inline-block; margin: .3rem 0; }

/* 来源署名条 */
.ref-card .source { font-size: .85rem; color: var(--ink-faint);
  border-top: 1px solid var(--rule); margin-top: 2rem; padding-top: .8rem; }

/* —— 可视示例演示块（reference 卡的核心：能展示就别只说）—— */
.ref-card .demo { position: relative; border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 1.25rem 1rem .95rem; margin: .9rem 0; background: var(--surface); box-shadow: var(--shadow-1); }
.ref-card .demo::before { content: "示例"; position: absolute; top: -.62rem; left: .8rem;
  background: var(--paper); padding: 0 .4rem; font-size: .68rem; letter-spacing: .08em;
  color: var(--ink-faint); }
.ref-card .demo[data-cap]::before { content: attr(data-cap); }
.ref-card .demo-cap { font-size: .82rem; color: var(--ink-soft); margin: 0 0 .5rem; }
/* 并排示例（好/坏 对照用真实渲染） */
.ref-card .demo-row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin: .9rem 0; }
.ref-card .demo-row .demo { margin: 0; }
.ref-card .tag-good, .ref-card .tag-bad { font-size: .8rem; font-weight: 700; display: block; margin-bottom: .45rem; }
.ref-card .tag-good { color: var(--win); }
.ref-card .tag-bad { color: var(--error); }
/* 色块 / 芯片 */
.ref-card .swatches { display: flex; flex-wrap: wrap; gap: .5rem; margin: .6rem 0; align-items: center; }
.ref-card .swatch { display: inline-block; width: 1.15rem; height: 1.15rem; border-radius: 4px;
  vertical-align: -.22rem; margin-right: .35rem; border: 1px solid rgba(0,0,0,.12); }
.ref-card .chip { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--mono);
  font-size: .82rem; background: var(--code-bg); padding: .2rem .55rem; border-radius: 6px; }
/* 间距条（让"4px vs 48px"看得见） */
.ref-card .gaprow { display: flex; align-items: center; gap: .7rem; margin: .35rem 0; font-size: .85rem; color: var(--ink-soft); }
.ref-card .gapbox { display: flex; }
.ref-card .gapbox span { width: 1.5rem; height: 1.5rem; background: var(--accent); border-radius: 3px; }
.ref-card .ruler { display: flex; align-items: flex-end; gap: .5rem; margin: .6rem 0; flex-wrap: wrap; }
.ref-card .ruler i { background: var(--accent); border-radius: 3px 3px 0 0; display: block; }
.ref-card .ruler figure { margin: 0; text-align: center; font-family: var(--mono); font-size: .72rem; color: var(--ink-faint); }

@media (max-width: 34rem) { .ref-card .dodont, .ref-card .demo-row { grid-template-columns: 1fr; } }

/* ============================================================
   侧边目录 (TOC Sidebar)
   固定在页面左侧，可展开/收起
   ============================================================ */

#toc-sidebar {
  position: fixed;
  left: 0;
  top: 0;
  width: 264px;
  height: 100dvh;
  z-index: 100;
  transform: translateX(0);
  transition: transform 0.44s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

/* 收起：整块向左滑出（transform 硬件加速，不做 width 压缩，内容不重排） */
#toc-sidebar.collapsed {
  transform: translateX(-102%);
}

/* 切换按钮（始终可见）—— 左上角悬浮圆钮，内缩留白、不贴边 */
#toc-toggle {
  position: fixed;
  top: 15px;
  left: 15px;
  z-index: 101;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.8)),
    var(--surface);
  border: 1px solid var(--rule);
  border-radius: 50%;
  box-shadow:
    var(--shadow-1),
    inset 0 1px 0 rgba(255,255,255,.75);
  color: var(--ink-soft);
  font-size: 1.12rem;
  line-height: 1;
  flex-shrink: 0;
  transition:
    color .18s ease,
    background .2s ease,
    box-shadow .22s ease,
    transform .18s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  -webkit-user-select: none;
}

#toc-toggle:hover {
  color: var(--accent);
  background:
    linear-gradient(180deg, #fff, var(--accent-bg)),
    var(--surface);
  box-shadow:
    var(--shadow-2),
    inset 0 1px 0 rgba(255,255,255,.85);
  transform: scale(1.07);
}

#toc-toggle:active {
  transform: scale(.93);
  box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255,255,255,.6);
}

/* 展开时圆钮变为关闭键，落在面板标题左侧 */
#toc-toggle.is-open {
  color: var(--accent);
  border-color: rgba(42,95,208,.28);
}

/* 目录面板 —— 填满滑动容器 */
#toc-panel {
  width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  background:
    linear-gradient(180deg, #fffdf9 0%, var(--surface) 22%);
  border-right: 1px solid var(--rule);
  box-shadow:
    var(--shadow-2),
    inset -1px 0 0 rgba(255,255,255,.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 面板头部 —— 高度容纳左上角悬浮圆钮，标题与圆钮垂直居中对齐 */
#toc-header {
  min-height: 74px;
  padding: 0 .95rem 0 4.15rem;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .1rem;
  flex-shrink: 0;
  position: relative;
}

.toc-header-title {
  font-weight: 700;
  font-size: .98rem;
  letter-spacing: -.01em;
  color: var(--ink);
  line-height: 1.2;
}

.toc-header-sub {
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 600;
}

/* 返回上一页条 */
.toc-back-bar {
  padding: .4rem .9rem;
  border-bottom: 1px solid var(--rule-soft);
  flex-shrink: 0;
}

.toc-back-link {
  display: inline-block;
  font-size: .84rem;
  color: var(--accent);
  text-decoration: none;
  border-bottom: none;
  transition: color .12s;
  cursor: pointer;
}

.toc-back-link:hover {
  color: var(--accent-strong);
}

/* 面板内可滚动列表 */
#toc-list-wrap {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: .5rem .5rem 1.2rem;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
}

/* 细雅滚动条（WebKit） */
#toc-list-wrap::-webkit-scrollbar {
  width: 8px;
}
#toc-list-wrap::-webkit-scrollbar-track {
  background: transparent;
}
#toc-list-wrap::-webkit-scrollbar-thumb {
  background: var(--rule);
  border-radius: 999px;
  border: 2px solid var(--surface);
}
#toc-list-wrap::-webkit-scrollbar-thumb:hover {
  background: var(--ink-faint);
}

/* 单个阶段分组 */
.toc-phase {
  margin: 0 0 .35rem;
}

.toc-phase-title {
  display: block;
  padding: .55rem .55rem .3rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}

/* 目录链接 —— 圆角药丸式，悬浮左移微动效 */
.toc-link {
  position: relative;
  display: block;
  margin: 1px .1rem;
  padding: .34rem .6rem .34rem .95rem;
  border-radius: var(--radius-sm);
  font-size: .85rem;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: none;
  transition:
    color .14s ease,
    background .16s ease,
    transform .16s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5;
}

/* 悬浮左侧的细指示条 */
.toc-link::before {
  content: "";
  position: absolute;
  left: .3rem;
  top: 50%;
  width: 3px;
  height: 0;
  border-radius: 999px;
  background: var(--accent);
  transform: translateY(-50%);
  transition: height .18s cubic-bezier(0.16, 1, 0.3, 1);
}

.toc-link:hover {
  color: var(--accent);
  background: var(--accent-bg);
  transform: translateX(2px);
}

.toc-link:hover::before {
  height: 1rem;
}

.toc-link.active {
  color: var(--accent-strong);
  background: linear-gradient(90deg, var(--accent-bg), rgba(234,240,252,.35));
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(42,95,208,.14);
}

.toc-link.active::before {
  height: 1.2rem;
  background: linear-gradient(180deg, var(--accent), var(--accent-strong));
}

/* 分隔线 */
.toc-sep {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rule) 18%, var(--rule) 82%, transparent);
  margin: .5rem .55rem;
}

/* ============================================================
   目录进度条（面板底部）
   ============================================================ */
#toc-progress {
  flex-shrink: 0;
  padding: .7rem .95rem .85rem;
  border-top: 1px solid var(--rule);
  background: linear-gradient(180deg, transparent, rgba(240,235,225,.4));
}

.toc-progress-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  font-size: .74rem;
  color: var(--ink-faint);
  margin-bottom: .4rem;
  white-space: nowrap;
}

.toc-progress-label b {
  color: var(--accent);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.toc-progress-track {
  height: 5px;
  border-radius: 999px;
  background: var(--rule-soft);
  overflow: hidden;
  box-shadow: inset 0 1px 1px rgba(70,55,35,.06);
}

.toc-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
  transition: width .5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================
   展开时链接的错落淡入（尊重减弱动效偏好）
   ============================================================ */
#toc-sidebar:not(.collapsed) .toc-link {
  animation: tocLinkIn .34s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--i, 0) * 22ms + 60ms);
}

@keyframes tocLinkIn {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  #toc-sidebar { transition: none; }
  #toc-sidebar:not(.collapsed) .toc-link { animation: none; }
  .toc-link, .toc-link:hover { transition: color .12s, background .12s; transform: none; }
  #toc-toggle { transition: color .12s, background .12s; }
  .toc-progress-fill { transition: none; }
}

/* ============================================================
   右上角返回指示器 (Nav Pill)
   通过目录跳转后在页面右上角显示上一页位置，点击可返回
   ============================================================ */

.toc-nav-pill {
  position: fixed;
  top: .7rem;
  right: .7rem;
  z-index: 95;
}

.toc-nav-pill-link {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .75rem .3rem .6rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 999px;
  box-shadow: var(--shadow-1);
  font-size: .82rem;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: none;
  transition: box-shadow .15s, border-color .15s, color .12s;
  white-space: nowrap;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.toc-nav-pill-link:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-2);
  color: var(--accent);
}

.toc-nav-pill-arrow {
  font-size: .9rem;
  flex-shrink: 0;
}

.toc-nav-pill-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .toc-nav-pill {
    top: .45rem;
    right: .45rem;
  }
  .toc-nav-pill-link {
    font-size: .78rem;
    padding: .25rem .6rem;
    max-width: 200px;
  }
}

@media print {
  .toc-nav-pill { display: none !important; }
}

/* 移动端遮罩 */
#toc-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(34,31,26,.35);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

@media (max-width: 768px) {
  #toc-overlay.visible {
    display: block;
  }

  #toc-sidebar {
    width: 84vw;
    max-width: 300px;
  }
}

@media print {
  body { max-width: none; font-size: 11pt; background: #fff; }
  .callout, .quiz, .ref-card .demo, .ref-card .toc { box-shadow: none; }
  .quiz button, .ask-teacher { display: none; }
  a { color: var(--ink); border: none; }
  #toc-sidebar,
  #toc-overlay { display: none !important; }
}