/* ==========================================================================
   VPNFL — deepdoc.css
   深度指南页(complete-guide.html)专属样式
   只声明本页独有结构:页头区 / 信息行 / 缓滚带 / 章节节奏
   ========================================================================== */

/* --------------------------------------------------------------------------
   页头区
   -------------------------------------------------------------------------- */

.doc-head{
  position:relative;
  padding-top:56px;
  padding-bottom:44px;
  background:linear-gradient(180deg,var(--bg-top) 0%,var(--bg) 70%,var(--bg-bottom) 100%);
}
.doc-head::before,
.doc-head::after{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:0;
}
.doc-head::before{
  inset:-24% -6% auto 52%;
  height:86%;
  background:radial-gradient(closest-side,var(--aqua-06) 0%,var(--accent-06) 48%,transparent 100%);
}
.doc-head::after{
  inset:auto 58% -30% -12%;
  height:70%;
  background:radial-gradient(closest-side,var(--peri-10) 0%,var(--peri-05) 45%,transparent 100%);
}
.doc-head .wrap{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  gap:18px;
  align-items:flex-start;
}
.doc-head .h1{max-width:22ch}
.doc-lede{max-width:62ch}

.doc-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px 22px;
  font-size:13px;
  color:var(--muted);
  min-width:0;
}
.doc-meta span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-width:0;
}
.doc-meta b{
  font-family:var(--font-mono);
  font-weight:700;
  color:var(--accent-dark);
  overflow-wrap:anywhere;
}

.doc-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
}

/* --------------------------------------------------------------------------
   缓滚带(横向缓滚,动效由 motion.js 接管;减速偏好下静止平铺)
   -------------------------------------------------------------------------- */

.ticker{
  overflow:hidden;
  max-width:100%;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  background:var(--bg-panel);
}
.ticker-track{
  display:flex;
  width:max-content;
  will-change:transform;
}
.ticker-unit{
  display:flex;
  align-items:center;
  gap:34px;
  padding:14px 17px;
  white-space:nowrap;
  font-size:13.5px;
  color:var(--muted);
}
.ticker-unit span{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.ticker-unit span::before{
  content:"";
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--accent);
  opacity:.45;
  flex:none;
}

/* --------------------------------------------------------------------------
   正文容器与章节节奏
   -------------------------------------------------------------------------- */

.doc-article{
  position:relative;
  min-width:0;
  max-width:940px;
  margin-inline:auto;
}
.doc-article .prose{max-width:100%}
.doc-article .prose > section + section{margin-top:64px}
.doc-article .prose > section:first-child > h2{margin-top:0}
.doc-article .prose h2{text-wrap:balance}
.doc-article .prose h3{color:var(--text)}
.doc-article .prose table.data-table{min-width:620px}
.doc-article .prose .faq-item{margin-top:10px}
.doc-article .prose .callout{margin-top:26px}
.doc-article .prose .table-scroll{margin-top:22px}

/* 表格里的线路类型/平台名不折行 */
.doc-article .prose .data-table td.cell-strong,
.doc-article .prose .data-table thead th{word-break:keep-all}

/* --------------------------------------------------------------------------
   响应式
   -------------------------------------------------------------------------- */

@media (max-width:1024px){
  .doc-head{padding-top:44px;padding-bottom:36px}
  .doc-article{max-width:100%}
}

@media (max-width:768px){
  .doc-head{padding-top:36px;padding-bottom:30px}
  .doc-head::before{inset:-16% -10% auto 40%;height:70%}
  .doc-head::after{display:none}
  .doc-head .h1{max-width:100%}
  .doc-article .prose > section + section{margin-top:48px}
  .ticker-unit{gap:24px;font-size:12.5px;padding:12px 14px}
}

@media (max-width:640px){
  .doc-head{padding-top:30px;padding-bottom:26px}
  .doc-meta{gap:6px 16px;font-size:12.5px}
  .doc-actions .btn{width:100%}
  .doc-article .prose table.data-table{min-width:560px}
}

@media (prefers-reduced-motion:reduce){
  .ticker-track{transform:none !important}
}