/* ============================================================
   ng.liuxia.xin/diag · 资料包站内容样式 v1
   复用 NG 设计系统令牌(tokens.css)，墨绿扛结构、琥珀做判断/CTA。
   本文件承载：资料包阅读排版 + 迷你导航 + 门禁层 + 自测引导区。
   六轴速览可视化专属样式在 guide-framework.html 页内(见 frontend-design 重构)
   ============================================================ */

/* ---------- 资料包页基础布局 ---------- */
.diag-page{ background:var(--ng-cream); color:var(--ng-fg); }
.diag-wrap{ max-width:860px; margin:0 auto; padding:56px 24px 80px; }

/* 资料包迷你导航（速览/方法论/案例集 + 重新验证） */
.diag-tabs{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  border-bottom:1px solid var(--ng-line); padding-bottom:16px; margin-bottom:40px;
}
.diag-tabs .dt-label{
  font-family:"SFMono-Regular","Consolas",monospace; font-size:10px;
  letter-spacing:.22em; color:var(--ng-fg-muted); margin-right:6px;
}
.diag-tabs a{
  font-size:13.5px; color:var(--ng-fg); text-decoration:none;
  padding:6px 12px; border-radius:999px; border:1px solid transparent;
  transition:all .16s ease-out;
}
.diag-tabs a:hover{ color:var(--ng-green); background:var(--ng-green-soft); }
.diag-tabs a.on{ color:#fff; background:var(--ng-green); }
.diag-tabs .dt-relock{
  margin-left:auto; font-family:"SFMono-Regular","Consolas",monospace;
  font-size:11px; letter-spacing:.08em; color:var(--ng-fg-muted);
  background:none; border:1px dashed var(--ng-line); border-radius:8px; padding:6px 10px; cursor:pointer;
}
.diag-tabs .dt-relock:hover{ color:var(--ng-amber-deep); border-color:var(--ng-amber-soft); }

/* ---------- 资料包正文排版 ---------- */
.diag-article .d-head{ margin-bottom:36px; }
.diag-article .d-kicker{
  font-family:"SFMono-Regular","Consolas",monospace; font-size:11px; letter-spacing:.28em;
  color:var(--ng-amber-deep); text-transform:uppercase; margin-bottom:14px;
}
.diag-article h1{
  font-family:"Songti SC","STSong","SimSun",serif; font-size:34px; line-height:1.3;
  color:var(--ng-fg); margin:0 0 14px; font-weight:700; letter-spacing:.01em;
}
.diag-article .d-lede{ font-size:17px; line-height:1.85; color:var(--ng-fg); }
.diag-article .d-lede b{ color:var(--ng-green); color:var(--ng-fg); }

.diag-article h2{
  font-family:"Songti SC","STSong","SimSun",serif; font-size:24px; line-height:1.4;
  color:var(--ng-fg); margin:52px 0 16px; letter-spacing:.01em;
  display:flex; align-items:center; gap:12px;
}
.diag-article h2::before{
  content:""; width:6px; height:20px; background:var(--ng-amber); border-radius:2px; flex:0 0 auto;
}
.diag-article h3{
  font-size:17px; color:var(--ng-green-deep); margin:32px 0 10px; font-weight:700;
}
.diag-article p{ font-size:16px; line-height:1.95; color:var(--ng-fg); margin:0 0 18px; }
.diag-article p b{ color:var(--ng-fg); }
.diag-article p .em, .diag-article .em{ color:var(--ng-amber-deep); font-style:normal; }

/* 列表 */
.diag-article ul, .diag-article ol{ margin:0 0 20px; padding-left:22px; }
.diag-article li{ font-size:16px; line-height:1.9; margin:6px 0; }
.diag-article li b{ color:var(--ng-green-deep); }

/* 引用/判断卡 */
.diag-article blockquote{
  margin:28px 0; padding:20px 24px; background:var(--ng-amber-pale);
  border-left:4px solid var(--ng-amber); border-radius:0 12px 12px 0;
}
.diag-article blockquote p{ font-size:17px; line-height:1.8; margin:0; color:var(--ng-fg); }
.diag-article blockquote p b{ color:var(--ng-amber-deep); }

/* 表格 */
.diag-article table{ width:100%; border-collapse:collapse; margin:24px 0 28px; font-size:14.5px; }
.diag-article th{
  background:var(--ng-green); color:#fff; text-align:left; padding:11px 14px;
  font-weight:600; font-size:13.5px;
}
.diag-article td{ padding:11px 14px; border-bottom:1px solid var(--ng-line); vertical-align:top; line-height:1.75; }
.diag-article tr:nth-child(even) td{ background:rgba(231,239,233,.4); }
.diag-article td b{ color:var(--ng-green-deep); }

/* 读中引导卡（切换阅读节奏） */
.diag-note{
  margin:26px 0; padding:18px 22px; background:var(--ng-cream-deep);
  border:1px solid var(--ng-line); border-radius:12px; font-size:15px; line-height:1.8; color:var(--ng-fg-muted);
}
.diag-note b{ color:var(--ng-fg); }

/* 页内锚点跳转（章内 toc） */
.diag-toc{
  margin:30px 0; padding:20px 24px; background:var(--ng-green-soft); border-radius:12px;
}
.diag-toc .toc-title{ font-size:12px; letter-spacing:.2em; color:var(--ng-green-deep); font-weight:700; margin-bottom:12px; }
.diag-toc a{ display:inline-block; margin:0 12px 8px 0; color:var(--ng-green-deep); text-decoration:none; font-size:14px; border-bottom:1px dashed var(--ng-line); }
.diag-toc a:hover{ color:var(--ng-amber-deep); }

/* 页底"下一篇" */
.diag-next{
  margin-top:48px; padding-top:28px; border-top:1px solid var(--ng-line);
  display:flex; justify-content:flex-end;
}
.diag-next a{
  text-decoration:none; color:var(--ng-green); text-align:right;
  border-bottom:none; display:inline-block;
}
.diag-next a:hover{ color:var(--ng-amber-deep); }
.diag-next .dn-lbl{ font-size:11px; letter-spacing:.22em; color:var(--ng-fg-muted); display:block; margin-bottom:6px; }
.diag-next .dn-t{ font-size:17px; font-weight:700; }

/* ---------- 自测表引导区（D7 · 每份资料包页末） ---------- */
.diag-cta{
  margin:56px 0 8px; padding:28px 28px; background:var(--ng-green);
  border-radius:16px; color:#fff; text-align:center;
}
.diag-cta h3{ font-family:"Songti SC","STSong","SimSun",serif; font-size:22px; margin:0 0 10px; color:#fff; }
.diag-cta p{ font-size:15px; line-height:1.85; color:#E7EFE9; margin:0 0 22px; }
.diag-cta p b{ color:#fff; }
.diag-cta .cta-btn{
  display:inline-block; background:var(--ng-amber); color:#fff; text-decoration:none;
  font-weight:700; font-size:16px; padding:14px 34px; border-radius:10px;
  transition:background .16s ease-out;
}
.diag-cta .cta-btn:hover{ background:var(--ng-amber-deep); }
.diag-cta .cta-sub{ margin-top:16px; font-size:13px; color:#BFD2C6; }
.diag-cta .cta-sub a{ color:#fff; }

/* ---------- 门禁层 ---------- */
.diag-gate{
  position:fixed; inset:0; z-index:60; display:none; align-items:center; justify-content:center;
  background:var(--ng-cream); padding:24px;
}
.diag-gate-in{ max-width:440px; width:100%; text-align:center; }
.diag-gate-mark{
  font-family:"Songti SC","STSong","SimSun",serif; font-size:14px; letter-spacing:.3em;
  color:var(--ng-amber-deep); margin-bottom:18px;
}
.diag-gate h2{
  font-family:"Songti SC","STSong","SimSun",serif; font-size:28px; color:var(--ng-fg); margin:0 0 12px; line-height:1.4;
}
.diag-gate p{ font-size:15px; line-height:1.85; color:var(--ng-fg-muted); margin:0 0 28px; }
.diag-gate-label{ display:block; text-align:left; font-size:13px; color:var(--ng-fg-muted); margin-bottom:8px; }
.diag-gate input{
  width:100%; padding:14px 16px; font-size:17px; letter-spacing:.05em; color:var(--ng-fg);
  border:2px solid var(--ng-line); border-radius:10px; background:#fff; box-sizing:border-box;
  outline:none; transition:border-color .16s ease-out;
}
.diag-gate input:focus{ border-color:var(--ng-green); }
.diag-gate button{
  width:100%; margin-top:14px; padding:14px; font-size:16px; font-weight:700; color:#fff;
  background:var(--ng-green); border:0; border-radius:10px; cursor:pointer; transition:background .16s;
}
.diag-gate button:hover{ background:var(--ng-green-deep); }
.diag-gate button:disabled{ opacity:.6; cursor:not-allowed; }
.diag-gate-err{
  display:none; margin-top:14px; padding:12px 14px; background:var(--ng-amber-pale);
  border:1px solid var(--ng-amber-soft); border-radius:10px; font-size:13.5px; color:var(--ng-amber-deep); line-height:1.7; text-align:left;
}
.diag-gate-foot{ margin-top:26px; font-size:12.5px; color:var(--ng-fg-muted); line-height:1.8; }
.diag-gate-foot a{ color:var(--ng-green-deep); text-decoration:underline; }

/* 正文默认隐藏（未验证时）；验证后由 JS 显示 */
.diag-content{ display:none; }

/* ---------- 移动端 ---------- */
@media(max-width:640px){
  .diag-wrap{ padding:36px 18px 56px; }
  .diag-article h1{ font-size:27px; }
  .diag-article h2{ font-size:20px; }
  .diag-article p{ font-size:16px; }
  .diag-cta{ padding:24px 18px; }
}