/* WAP 编程课程：学习页布局、目录索引、章节导航 */
.wap-tut {
  --wt-blue: #005a9c; --wt-text: #1a1a1a; --wt-muted: #595959;
  --wt-surface: #fff; --wt-surface2: #f5f7fa; --wt-border: #d6d9dd;
  --wt-radius: 8px; --wt-space: 12px;
  --wt-font: system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px;
  font-family: var(--wt-font); color: var(--wt-text); margin: 1.5rem 0;
}
.wap-tut__side { min-width: 0; }
.wap-tut__tocwrap {
  background: var(--wt-surface2); border: 1px solid var(--wt-border);
  border-radius: var(--wt-radius); padding: 10px; max-height: 70vh; overflow: auto;
}
.wap-tut__toggle {
  display: flex; align-items: center; gap: 8px; width: 100%; margin-bottom: 8px; padding: 10px 12px;
  font: inherit; font-weight: 600; text-align: left; cursor: pointer;
  border: 1px solid var(--wt-border); border-radius: var(--wt-radius);
  background: var(--wt-surface); color: var(--wt-text);
}
.wap-tut__toggle:hover { border-color: var(--wt-blue); color: var(--wt-blue); }
.wap-tut__toggle:focus-visible { outline: 2px solid var(--wt-blue); outline-offset: 2px; }
.wap-tut__toggle-ic {
  flex: 0 0 auto; width: 1em; height: 1em; position: relative;
  transition: transform .2s ease;
}
/* 三条横线的「列表」图标 */
.wap-tut__toggle-ic::before {
  content: ""; position: absolute; inset: 0; margin: auto; height: 2px; width: 100%;
  background: currentColor; border-radius: 2px;
  box-shadow: 0 -5px 0 0 currentColor, 0 5px 0 0 currentColor;
}
.wap-tut__toggle::after { content: "▾"; margin-left: auto; color: var(--wt-muted); }
.wap-tut__toggle[aria-expanded="true"]::after { content: "▴"; }
.wap-tut__list { list-style: none; margin: 0; padding: 0; counter-reset: ch; }
.wap-tut__item { margin: 0; }
.wap-tut__item a {
  display: flex; gap: 8px; align-items: baseline; padding: 7px 9px; border-radius: 6px;
  text-decoration: none; color: var(--wt-text); font-size: 14px; line-height: 1.45;
}
.wap-tut__item a:hover { background: rgba(0, 90, 156, .08); color: var(--wt-blue); }
.wap-tut__item.is-current > a { background: var(--wt-blue); color: #fff; font-weight: 600; }
.wap-tut__num { flex: 0 0 auto; min-width: 1.6em; color: var(--wt-muted); font-variant-numeric: tabular-nums; font-size: 12px; }
.wap-tut__item.is-current .wap-tut__num { color: rgba(255,255,255,.8); }
.wap-tut__group + .wap-tut__group { margin-top: 12px; }
.wap-tut__group-t { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--wt-muted); text-transform: uppercase; padding: 6px 9px 2px; }

.wap-tut__main { min-width: 0; }
.wap-tut__title { margin-top: 0; line-height: 1.3; }
.wap-tut__content :where(h2) { margin-top: 1.6em; }
.wap-tut__content :where(p, li) { line-height: 1.75; }
.wap-tut__content :where(code) { background: var(--wt-surface2); padding: 1px 5px; border-radius: 4px; font-size: .92em; }
.wap-tut__content :where(pre:not(.wapcr)) { overflow: auto; }
.wap-tut__content :where(img) { max-width: 100%; height: auto; }

.wap-tut-code { margin: 1em 0; }
.wap-tut-code__tag {
  display: inline-block; font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--wt-muted); background: var(--wt-surface2); border: 1px solid var(--wt-border);
  border-bottom: 0; border-radius: 6px 6px 0 0; padding: 3px 10px; margin-bottom: -1px;
}
.wap-tut-code .wapcr { margin: 0; border-radius: 0 6px 6px 6px; }

.wap-tut-nav { margin-top: 2.5rem; border-top: 1px solid var(--wt-border); padding-top: 14px; }
.wap-tut-crumb { font-size: 13px; color: var(--wt-muted); margin-bottom: 10px; }
.wap-tut-crumb a { color: var(--wt-blue); text-decoration: none; }
.wap-tut-count { color: var(--wt-muted); }
.wap-tut-pager { display: flex; gap: 10px; justify-content: space-between; flex-wrap: wrap; }
.wap-tut-pager a, .wap-tut-pager span {
  flex: 1 1 220px; padding: 10px 12px; border: 1px solid var(--wt-border); border-radius: var(--wt-radius);
  text-decoration: none; color: var(--wt-text); font-size: 14px; background: var(--wt-surface);
}
.wap-tut-pager a:hover { border-color: var(--wt-blue); color: var(--wt-blue); }
.wap-tut-pager .wap-tut-next { text-align: right; }
.wap-tut-pager .is-disabled { color: #a0a0a0; background: var(--wt-surface2); }
.wap-tut__empty { color: var(--wt-muted); }

/* ── 布局：≥768px 左侧目录常驻（两栏）；<768px 目录改为左侧抽屉 ───────── */
@media (min-width: 768px) {
  .wap-tut { grid-template-columns: 240px minmax(0, 1fr); gap: 22px; align-items: start; }
  .wap-tut__side { position: sticky; top: 24px; }
  /* 宽屏：目录栏顶部保留「收起目录」按钮（可把整栏收起、正文变宽） */
  .wap-tut__toggle { display: flex; }
  .wap-tut__tocwrap { display: block !important; max-height: calc(100vh - 130px); overflow: auto; }
  .wap-tut--single { grid-template-columns: 240px minmax(0, 1fr); gap: 22px; }
  .wap-tut--single .wap-tut__tocwrap { max-height: calc(100vh - 110px); }

  /* 收起状态：整栏隐藏，正文占满（可从底部操作条的「目录」按钮恢复） */
  html[data-wap-tut-toc="collapsed"] .wap-tut,
  html[data-wap-tut-toc="collapsed"] .wap-tut--single { grid-template-columns: minmax(0, 1fr); }
  html[data-wap-tut-toc="collapsed"] .wap-tut__side { display: none; }
}
@media (min-width: 1200px) {
  .wap-tut { grid-template-columns: 270px minmax(0, 1fr); gap: 28px; }
  .wap-tut--single { grid-template-columns: 270px minmax(0, 1fr); gap: 28px; }
}

/* ── 底部操作条里的「目录」开关 ─────────────────────────────────────
 * 常驻显示（不管左侧索引当前是否可见），与「学习 / 朗读」放在同一栏。
 * 按钮走 UX Kit 的 .wap-ux-btn 外观（同一栏统一），这里只补强调 / 图标。
 * 若 UX Kit 未加载（没有 .wap-ux-float 样式），用 .wap-tut__dock 兜底成同样的悬浮条。 */
.wap-tut__dock {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 100003;
  display: flex; gap: 8px; padding: 8px; align-items: center;
  background: linear-gradient(135deg, #0b3d62 0%, #005a9c 55%, #0a6ea8 100%);
  border: 1px solid rgba(255, 255, 255, .22); border-radius: 18px;
  box-shadow: 0 14px 34px rgba(3, 30, 56, .45), inset 0 1px 0 rgba(255, 255, 255, .10);
  max-width: calc(100vw - 24px); overflow-x: auto;
}
.wap-tut__dock-ic { font-size: 15px; line-height: 1; }
/* 按钮外观兜底（UX Kit 未加载、没有 .wap-ux-btn 样式时也不至于「裸奔」）；
   与 UX Kit 同栏外观一致：浅色半透明底 + 白字。 */
.wap-tut__dock .wap-tut__dock-btn {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font: inherit; font-size: 14.5px; font-weight: 800; line-height: 1; padding: 9px 14px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .34); border-radius: 11px;
  background: rgba(255, 255, 255, .16); color: #fff;
}
.wap-tut__dock .wap-tut__dock-btn:hover { background: rgba(255, 255, 255, .30); border-color: #fff; color: #fff; }
/* 「目录」开 / 关的高亮：琥珀色，在蓝底操作条上最扎眼 */
.wap-tut__dock .wap-tut__dock-btn.is-on {
  background: #ffc53d; border-color: #ffc53d; color: #3a2a00;
  box-shadow: 0 6px 18px rgba(255, 197, 61, .42);
}
/* 左侧索引被收起时：按钮高亮成琥珀色 + 轻提醒动画，避免「忽略了这一块」 */
@media (min-width: 768px) {
  html[data-wap-tut-toc="collapsed"] body .wap-ux-float .wap-tut__dock-btn {
    background: #ffc53d; border-color: #ffc53d; color: #3a2a00 !important;
    box-shadow: 0 6px 18px rgba(255, 197, 61, .42);
    animation: wap-tut-dock-attn .8s ease 3;
  }
  html[data-wap-tut-toc="collapsed"] body .wap-ux-float .wap-tut__dock-btn:hover { background: #ffd76a; border-color: #ffd76a; color: #3a2a00 !important; }
  @media (prefers-reduced-motion: reduce) {
    html[data-wap-tut-toc="collapsed"] body .wap-ux-float .wap-tut__dock-btn { animation: none; }
  }
}
@keyframes wap-tut-dock-attn { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@media (max-width: 767px) { .wap-tut__dock { bottom: 12px; gap: 6px; padding: 6px; } }

/* 手机：目录不自上而下挤压正文，而是从左侧滑出 */
@media (max-width: 767px) {
  .wap-tut { gap: 10px; }
  .wap-tut__toggle {
    display: inline-flex; align-items: center; width: auto; margin: 0 0 8px;
    position: sticky; top: 8px; z-index: 5;
  }
  .wap-tut__tocwrap {
    display: block; position: fixed; top: 0; left: 0; bottom: 0;
    width: min(84vw, 320px); height: 100%; max-height: none;
    padding: 46px 12px 40px; border: 0; border-right: 1px solid var(--wt-border);
    border-radius: 0; box-shadow: 4px 0 22px rgba(0, 0, 0, .2);
    transform: translateX(-105%); transition: transform .22s ease;
    z-index: 100001; overflow: auto;
  }
  .wap-tut__tocwrap.is-open { transform: none; }
  .wap-tut__close {
    position: absolute; top: 8px; right: 10px;
    font: inherit; font-size: 13px; padding: 6px 10px; cursor: pointer;
    border: 1px solid var(--wt-border); border-radius: 6px;
    background: var(--wt-surface); color: var(--wt-text);
  }
  .wap-tut__backdrop {
    position: fixed; inset: 0; background: rgba(0, 0, 0, .42);
    opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 100000;
  }
  .wap-tut__backdrop.is-open { opacity: 1; pointer-events: auto; }
}
@media (min-width: 768px) { .wap-tut__close { display: none; } }

@media (prefers-color-scheme: dark) {
  .wap-tut {
    --wt-text: #e8eaed; --wt-muted: #a8adb4; --wt-surface: #1f2329;
    --wt-surface2: #171a1f; --wt-border: #343a42; --wt-blue: #6cb6ff;
  }
  .wap-tut__item.is-current > a { color: #10131a; }
  .wap-tut__dock { background: linear-gradient(135deg, #08192a 0%, #0f2740 55%, #0a3050 100%); border-color: #343a42; }
}
/* 站点「深色模式」开关（UX Kit）也覆盖悬浮目录按钮 */
html[data-wap-theme="dark"] .wap-tut__dock { background: linear-gradient(135deg, #08192a 0%, #0f2740 55%, #0a3050 100%); border-color: #2c3d52; }
html[data-wap-theme="dark"] .wap-tut__dock .wap-tut__dock-btn { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .28); color: #eaf2ff; }
html[data-wap-theme="dark"] .wap-tut__dock .wap-tut__dock-btn:hover { background: rgba(255, 255, 255, .26); color: #fff; border-color: #fff; }
html[data-wap-theme="dark"] .wap-tut__dock .wap-tut__dock-btn.is-on { background: #ffc53d; border-color: #ffc53d; color: #3a2a00; }

/* 课程单篇：左侧导航菜单（只显示当前分类章节）+ 正文两栏 */
.wap-tut--single { margin: 1rem 0 2rem; }
.wap-tut--single .wap-tut__side { align-self: start; }
.wap-tut--single .wap-tut__group-t { padding-top: 2px; }
.wap-tut--single .wap-tut__main { min-width: 0; }
.wap-tut-crumb { font-size: 13px; color: var(--wt-muted); margin: 0 0 10px; }
.wap-tut-crumb a { color: var(--wt-blue); text-decoration: none; }
.wap-tut-crumb a:hover { text-decoration: underline; }
/* 单篇里的章节导航 */
.wap-tut--single .wap-tut-nav { margin-top: 2rem; border-top: 1px solid var(--wt-border); padding-top: 14px; }

/* 目录标题上的章节数 */
.wap-tut__group-n { float: right; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--wt-muted); }

/* 代码片段（不可直接运行）：静态展示 + 引导到实训台 */
.wap-tut-frag { margin: 1em 0; border: 1px solid var(--wt-border); border-radius: 8px; overflow: hidden; }
.wap-tut-frag__bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 6px 10px; background: var(--wt-surface2); border-bottom: 1px solid var(--wt-border);
  font-size: 12px; color: var(--wt-muted);
}
.wap-tut-frag__tag { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.wap-tut-frag__note { flex: 1 1 auto; }
.wap-tut-frag__open { color: var(--wt-blue); font-weight: 600; text-decoration: none; white-space: nowrap; }
.wap-tut-frag__open:hover { text-decoration: underline; }
.wap-tut-frag pre { margin: 0; border-radius: 0; border: 0; }