/* 🍞 @FILE static/legal.css — 法律文本页（隐私政策 / 用户协议）长文排版
 * @WHY 法务文本以"可读、可扫、可打印"为第一目标，与营销页版式诉求不同，故独立成文件；
 *      令牌与 .wrap/.btn/.foot 复用 static/base.css（不重复定义 :root，避免双真源）。
 * @GOTCHA 本文件**只**做排版，不承载任何条款正文 —— 正文写在 templates/privacy.html、
 *         templates/terms.html 里（改条款只改 HTML，不动样式）。
 * @COUPLED templates/privacy.html、templates/terms.html（本文件唯一使用方）
 * 参照：ui-ux-pro-max skill 的 "Editorial / Document" 方向 —— 长文首重行高与层级，
 *      正文 16px/1.85、标题与正文对比明确、宽度上限 76ch（超过则眼动回扫困难）。
 */
.doc-head{ background:var(--color-primary); color:#fff; padding:var(--s8) 0 var(--s7); }
.doc-head .crumb{ font-size:13.5px; color:rgba(255,255,255,.62); margin-bottom:var(--s4); }
.doc-head .crumb a{ color:rgba(255,255,255,.78); text-decoration:none; }
.doc-head .crumb a:hover{ color:#fff; text-decoration:underline; }
.doc-head h1{ color:#fff; font-size:clamp(26px,3.4vw,36px); font-weight:800; }
.doc-head .meta{ margin-top:var(--s4); font-size:14px; color:rgba(255,255,255,.72); display:flex; flex-wrap:wrap; gap:var(--s2) var(--s5); }

.doc-wrap{ padding:var(--s8) 0; }
.doc-layout{ display:grid; gap:var(--s7); grid-template-columns:1fr; }

/* 目录（长文导航） */
.toc{ background:var(--color-card); border:1px solid var(--color-border); border-radius:var(--radius);
      padding:var(--s5); box-shadow:var(--shadow-card); align-self:start; }
.toc h2{ font-size:14px; letter-spacing:.06em; color:var(--color-muted-foreground); margin-bottom:var(--s3); }
.toc ol{ list-style:none; counter-reset:t; }
.toc li{ counter-increment:t; padding:5px 0; font-size:14.5px; }
.toc li::before{ content:counter(t) ". "; color:var(--color-muted-foreground); }
.toc a{ color:var(--color-secondary); text-decoration:none; }
.toc a:hover{ color:var(--color-accent); text-decoration:underline; }

/* 正文 */
.doc{ background:var(--color-card); border:1px solid var(--color-border); border-radius:var(--radius);
      padding:var(--s6) var(--s5); box-shadow:var(--shadow-card); max-width:76ch; }
.doc > p{ margin:var(--s4) 0; font-size:16px; line-height:1.85; color:var(--color-secondary); }
.doc > p:first-child{ margin-top:0; }
.doc .lead{ font-size:15.5px; color:var(--color-muted-foreground); padding:var(--s4) var(--s5);
            background:var(--color-background); border-left:3px solid var(--color-accent); border-radius:0 8px 8px 0; }
.doc section{ scroll-margin-top:var(--s7); }
.doc h2{ font-size:20px; margin:var(--s8) 0 var(--s4); padding-bottom:var(--s2); border-bottom:1px solid var(--color-border); }
.doc h2:first-of-type{ margin-top:var(--s6); }
.doc h3{ font-size:16.5px; margin:var(--s5) 0 var(--s2); color:var(--color-foreground); }
.doc p{ margin:var(--s3) 0; }
.doc ul,.doc ol{ margin:var(--s3) 0; padding-left:1.4em; }
.doc li{ margin:var(--s2) 0; }
.doc li::marker{ color:var(--color-muted-foreground); }
.doc strong{ color:var(--color-foreground); font-weight:600; }
.doc a{ color:var(--color-accent); text-decoration:none; border-bottom:1px solid rgba(3,105,161,.35); }
.doc a:hover{ border-bottom-color:var(--color-accent); }
.doc code{ background:var(--color-muted); border-radius:5px; padding:1px 6px; font-size:14px;
           font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color:var(--color-foreground); }

/* 表格（条款里的对照项） */
.doc table{ width:100%; border-collapse:collapse; margin:var(--s4) 0; font-size:14.5px; }
.doc th,.doc td{ border:1px solid var(--color-border); padding:10px 12px; text-align:left; vertical-align:top; }
.doc th{ background:var(--color-background); color:var(--color-foreground); font-weight:600; }

/* 提示条（重要条款 / 待办占位） */
.note{ margin:var(--s5) 0; padding:var(--s4) var(--s5); border-radius:8px; font-size:14.5px;
       background:#EBF4FB; border:1px solid #C9E0F2; color:#0C4A6E; }
.note strong{ color:#0C4A6E; }

/* 联系区块 */
.doc-contact{ margin-top:var(--s6); padding:var(--s5); background:var(--color-background);
              border:1px solid var(--color-border); border-radius:var(--radius); }
.doc-contact h3{ margin-top:0; }
.doc-contact dl{ font-size:15px; }
.doc-contact dl > div{ display:flex; gap:var(--s4); padding:var(--s2) 0; }
.doc-contact dt{ flex:0 0 84px; color:var(--color-muted-foreground); }
.doc-contact dd{ color:var(--color-foreground); font-weight:500; word-break:break-word; }

/* 文末返回 */
.doc-foot{ margin-top:var(--s6); padding-top:var(--s5); border-top:1px solid var(--color-border);
           display:flex; flex-wrap:wrap; gap:var(--s3); }

@media (min-width:1024px){
  .doc-layout{ grid-template-columns:236px 1fr; gap:var(--s8); }
  .doc{ padding:var(--s7) var(--s7); }
  .toc{ position:sticky; top:var(--s5); }
}
@media (max-width:1023px){
  .toc ol{ columns:2; column-gap:var(--s5); }
}
@media (max-width:560px){
  .doc{ padding:var(--s5) var(--s4); }
  .doc-contact dl > div{ flex-direction:column; gap:2px; }
  .doc-contact dt{ flex:none; font-size:13.5px; }
}
