/* ==========================================================================
   tutorial.html 专属样式:课堂例题式分步教程
   依赖 base.css / components.css 的设计令牌,不重复定义已有组件
   ========================================================================== */

/* 锚点跳转给吸顶目录留位 */
.lesson{scroll-margin-top:84px}

/* 板书步骤头:粉笔圈编号 + 粉笔字标题 + 等宽小注 */
.lesson-head{
  display:flex;align-items:center;gap:16px;
  margin-bottom:24px;
}
.lesson-num{
  flex-shrink:0;
  width:46px;height:46px;
  border:2px solid var(--accent);border-radius:50%;
  color:var(--accent);
  font-family:var(--font-mono);font-size:15px;letter-spacing:1px;
  display:flex;align-items:center;justify-content:center;
  transform:rotate(-2deg);
}
.lesson-title{
  font-family:var(--font-display);
  font-size:clamp(26px,3.4vw,38px);
  letter-spacing:3px;line-height:1.25;
}
.lesson-title .u{
  text-decoration:underline wavy var(--accent) 2px;
  text-underline-offset:8px;
}
.lesson-side{
  margin-left:auto;flex-shrink:0;
  font-family:var(--font-mono);font-size:12.5px;letter-spacing:1px;
  color:var(--text-muted);
}

/* 提示块里的链接(板面上需要粉笔黄波浪下划线) */
.callout a{
  color:var(--accent);
  text-decoration:underline wavy var(--accent) 1px;
  text-underline-offset:4px;
}
.callout a:hover{color:var(--accent-dark)}

/* .prose 里的步骤列表:盖掉正文 ol 的默认数字与缩进,避免与粉笔圈编号重叠 */
.prose ol.steps{list-style:none;padding-left:0}

/* 「接下来读什么」导航卡 */
.next-card{padding:26px 26px 22px}
.next-card-title{
  font-family:var(--font-display);
  font-size:21px;letter-spacing:2px;
  margin-bottom:8px;
}
.next-card p{font-size:14px;line-height:1.85;color:var(--ink-soft);margin-bottom:14px}
.next-link{
  font-family:var(--font-mono);font-size:13px;
  color:var(--accent-deep);
}
.next-link:hover{text-decoration:underline wavy var(--accent-dark) 1px;text-underline-offset:4px}

/* 窄屏收紧:讲义纸留白压缩,步骤头小注隐藏 */
@media (max-width:640px){
  .lesson-head{gap:12px;margin-bottom:18px;flex-wrap:wrap}
  .lesson-num{width:40px;height:40px;font-size:13px}
  .lesson-side{display:none}
  .lesson .paper{padding:26px 20px;min-width:0;max-width:100%}
  .lesson .paper pre{max-width:100%;overflow-x:auto}
}