/* =========================================================================
   VPNLW — deepdoc.css
   仅用于 zh-CN/handbook.html:页首排版、两列文档布局、侧栏速查卡。
   只补充本页结构,不重定义 base.css / components.css 已有组件。
   ========================================================================= */

/* ------------------------------------------------------------- 页首 */
.hb-hero{
  position:relative;
  padding-top:52px;
  padding-bottom:6px;
  overflow-x:clip;
}

.hb-title{
  margin:8px 0 0;
  font-size:clamp(1.9rem,4.2vw,2.9rem);
  line-height:1.16;
}

.hb-lede{
  max-width:68ch;
  margin-top:16px;
  font-size:16px;
  line-height:1.78;
  color:var(--text-muted);
}
.hb-lede a{
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:3px;
}

.hb-facts{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:22px;
  min-width:0;
}
.hb-fact{
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:30px;
  padding:4px 12px;
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  background:var(--bg-panel);
  box-shadow:0 1px 0 var(--w-90) inset;
  font-size:12px;
  color:var(--text-muted);
  white-space:nowrap;
}
.hb-fact b{
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:600;
  color:var(--accent);
}

.hb-rule{
  height:1px;
  margin-top:28px;
  background:linear-gradient(90deg,var(--line-strong),transparent 74%);
}

/* ------------------------------------------------------- 两列文档布局 */
.hb-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 286px;
  gap:44px;
  align-items:start;
  min-width:0;
}

.hb-main{min-width:0}
.hb-prose{max-width:none}

/* ----------------------------------------------------------- 侧栏 */
.hb-aside{
  position:sticky;
  top:calc(var(--header-h) + 24px);
  display:grid;
  gap:14px;
  min-width:0;
}

.hb-side{
  padding:16px 16px 14px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--bg-panel);
  box-shadow:var(--shadow-card);
  min-width:0;
}

.hb-side-title{
  margin:0 0 10px;
  font-family:var(--font-body);
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  color:var(--text-muted);
}

.hb-side dl{display:grid;gap:8px;margin:0}
.hb-side dl > div{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}
.hb-side dt{
  flex:none;
  font-size:11.5px;
  color:var(--text-muted);
}
.hb-side dd{
  margin:0;
  min-width:0;
  font-size:12px;
  text-align:right;
  color:var(--text);
}
.hb-side dd.mono{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  color:var(--accent);
}

.hb-side-links{display:grid;gap:2px}
.hb-side-links a{
  display:flex;
  align-items:center;
  min-height:32px;
  padding:4px 0;
  font-size:12.5px;
  color:var(--text);
  text-decoration:none;
}
.hb-side-links a:hover{
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:3px;
}

/* ------------------------------------------------- 正文节奏与章节标题 */
.hb-prose h2{
  margin-top:44px;
  padding-top:4px;
}
.hb-prose section:first-of-type h2{margin-top:24px}
.hb-prose h3{margin-top:24px}
.hb-prose .table-scroll{margin:18px 0 22px}
.hb-prose pre{margin:16px 0 22px}
.hb-prose .callout{margin:24px 0 8px}

/* ------------------------------------------------------- 断点 */
@media (max-width:980px){
  .hb-layout{
    grid-template-columns:minmax(0,1fr);
    gap:28px;
  }
  .hb-aside{
    position:static;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }
}

@media (max-width:640px){
  .hb-hero{padding-top:34px}
  .hb-title{font-size:clamp(1.55rem,7vw,2.05rem)}
  .hb-lede{font-size:14.5px}
  .hb-fact{white-space:normal}
  .hb-aside{grid-template-columns:minmax(0,1fr)}
}