/* ============================================================
   Clash中文社区 · base.css
   设计令牌 / 重置 / 排版 / 按钮 / 头部 / 页脚 / 布局基元 / reveal
   风格:千禧年中文 BBS 考古复原——米黄暖纸底、1px 藏青实线、
   直角、零投影、零渐变、零发光。
   ============================================================ */

/* ---------------- 设计令牌(全站颜色只许出现在这里) ---------------- */
:root{
  /* 纸面三级 */
  --paper:#F3EAD6;        /* 页面底色 */
  --paper-raised:#FAF4E4; /* 面板/卡片底 */
  --paper-sunk:#E9DFC4;   /* 版头/表头/页脚底 */
  /* 藏青线框与强调 */
  --line:#33415E;         /* 1px 实线边框 */
  --navy:#1F3A66;         /* 主强调(链接/当前态) */
  --navy-deep:#14294C;    /* 深强调(hover/标题强调词) */
  /* 墨色文字两级 */
  --ink:#2B2925;
  --ink-soft:#6F6754;
  /* 语义色 */
  --ok:#3F6B4C;
  --amber:#9C6E1A;
  --cinnabar:#BE3A2B;     /* 朱红:置顶/首推/主按钮/篆刻章 */
  /* 遮罩(仅移动端导航 veil 使用) */
  --veil:rgba(43,41,37,.45);

  /* 字体栈(字体文件由 assets/fonts/fonts.css 提供) */
  --font-display:"Songti SC","STSong","SimSun","NSimSun",serif;
  --font-body:"Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --font-mono:"JetBrains Mono","Courier New",Consolas,monospace;

  /* 布局 */
  --wrap:1120px;
  --gutter:24px;
  --topbar-h:58px;
  --radius:0;
  --sec-gap:72px;
}

/* ---------------- 重置 ---------------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{
  height:100%;
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
body{
  min-height:100%;
  display:flex;
  flex-direction:column;
  overflow-x:hidden;
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.75;
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body > main{flex:1 0 auto;width:100%} /* width:100%:.wrap 的 margin-inline:auto 在 body 纵向 flex 里属于横轴 auto 边距,会让 stretch 失效、main 按内容最大宽排版而撑破视口 */
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
table{border-collapse:collapse}
::selection{background:var(--navy);color:var(--paper-raised)}
a:focus-visible,button:focus-visible,summary:focus-visible,[role="tab"]:focus-visible{
  outline:2px solid var(--navy);
  outline-offset:2px;
}

/* 移动端菜单展开时锁死背景滚动(滚动穿透防御) */
html.nav-open{overflow:hidden}

/* ---------------- 布局基元 ---------------- */
/* 版心:任何断点下 padding-inline 都不许归零(防贴边铁律) */
.wrap{
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
/* 区块节奏:只声明纵向 padding,严禁横向简写覆盖版心留白 */
.sec{
  padding-top:var(--sec-gap);
  padding-bottom:var(--sec-gap);
}
.sec--line{border-top:1px solid var(--line)}

/* 通用网格(子项 min-width:0 防长内容撑破) */
.grid{display:grid;gap:14px}
.grid > *{min-width:0}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

/* 文本小工具 */
.t-mono{font-family:var(--font-mono)}
.t-muted{color:var(--ink-soft)}
.t-small{font-size:12px}
.t-center{text-align:center}

/* 跳转链接(无障碍) */
.skip-link{
  position:absolute;left:-999px;top:0;z-index:200;
  background:var(--navy);color:var(--paper-raised);
  padding:8px 16px;font-size:13px;
}
.skip-link:focus{left:8px;top:8px}

/* ---------------- 基础排版 ---------------- */
h1,h2,h3,h4{color:var(--ink);line-height:1.35;font-weight:700}
h1{font-size:clamp(28px,4vw,40px);letter-spacing:.01em}
h2{font-size:clamp(21px,2.6vw,26px)}
h3{font-size:18px}
h4{font-size:15.5px}
strong{font-weight:700}

/* 正文流(教程/文档/博客文章通用) */
.prose{font-size:15.5px;line-height:1.85;color:var(--ink)}
.prose > * + *{margin-top:1em}
.prose h2{
  margin-top:2.2em;padding-bottom:10px;
  font-size:22px;border-bottom:1px solid var(--line);
}
.prose h2::before{
  content:"";display:inline-block;width:9px;height:9px;
  background:var(--navy);margin-right:10px;vertical-align:2px;
}
.prose h3{
  margin-top:1.9em;font-size:17px;
  border-left:4px solid var(--navy);padding-left:12px;
}
.prose h4{margin-top:1.6em;font-size:15.5px}
.prose p{margin-top:1em}
.prose a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.prose a:hover{color:var(--navy-deep)}
.prose ul{margin-top:1em}
.prose ul li{position:relative;padding-left:1.3em;margin-top:.45em}
.prose ul li::before{
  content:"";position:absolute;left:0;top:.72em;
  width:7px;height:7px;background:var(--navy);
}
.prose ol{margin-top:1em;padding-left:1.6em;list-style:decimal}
.prose ol li{margin-top:.45em}
.prose img{border:1px solid var(--line);margin-top:1.2em}
.prose hr{border:0;border-top:1px solid var(--line);margin:2.2em 0}
.prose blockquote{
  margin-top:1.2em;padding:12px 18px;
  border:1px solid var(--line);border-left:4px solid var(--navy);
  background:var(--paper-raised);color:var(--ink-soft);
}
.prose table{margin-top:1.2em}

/* 代码:行内与块 */
code{
  font-family:var(--font-mono);font-size:.88em;
  background:var(--paper-sunk);padding:1px 6px;
}
pre{
  margin-top:1.2em;padding:14px 16px;
  border:1px solid var(--line);background:var(--paper-sunk);
  font-family:var(--font-mono);font-size:13px;line-height:1.7;
  overflow-x:auto;max-width:100%;
}
pre code{background:none;padding:0;font-size:inherit}

/* ---------------- 按钮 ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-size:15px;font-weight:600;line-height:1.4;
  padding:11px 28px;border:1px solid transparent;
  border-radius:var(--radius);white-space:nowrap;
}
.btn svg{width:16px;height:16px;flex:0 0 auto}
.btn-primary{background:var(--cinnabar);border-color:var(--cinnabar);color:var(--paper-raised)}
.btn-primary:hover{filter:brightness(.92)}
.btn-ghost{background:var(--paper-raised);border-color:var(--navy);color:var(--navy)}
.btn-ghost:hover{background:var(--navy);color:var(--paper-raised)}
.btn-navy{background:var(--navy);border-color:var(--navy);color:var(--paper-raised)}
.btn-navy:hover{background:var(--navy-deep);border-color:var(--navy-deep)}
.btn-sm{padding:8px 18px;font-size:13px}
.btn.is-disabled{opacity:.55;pointer-events:none}

/* ---------------- 头部(header.js 注入) ---------------- */
.site-header{position:relative;z-index:90}
.topbar{
  position:relative;z-index:2;
  height:var(--topbar-h);
  display:flex;align-items:center;gap:18px;
  padding-inline:28px;
  border-bottom:1px solid var(--line);
  background:var(--paper);
}
.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto;min-width:0}
.brand-mark{width:28px;height:28px;flex:0 0 auto;display:block}
.brand-name{
  font-family:var(--font-display);font-size:19px;font-weight:700;
  letter-spacing:.04em;color:var(--ink);white-space:nowrap;
}
.brand-domain{
  font-family:var(--font-mono);font-size:11px;color:var(--ink-soft);
  padding-top:4px;white-space:nowrap;
}
.mainnav{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav-link{
  display:inline-flex;align-items:center;
  font-size:14px;color:var(--ink-soft);
  padding:6px 13px;white-space:nowrap;
}
.nav-link:hover{color:var(--navy-deep);background:var(--paper-sunk)}
.nav-link.is-active{background:var(--navy);color:var(--paper-raised);font-weight:600}
.nav-link.is-active:hover{background:var(--navy);color:var(--paper-raised)}

/* 工具区:语言切换 + 汉堡(窄屏必须仍贴最右) */
.topbar-tools{display:flex;align-items:center;gap:10px;margin-left:14px;flex:0 0 auto}
.lang-drop{position:relative}
.lang-btn{
  display:inline-flex;align-items:center;gap:5px;
  font-size:12px;color:var(--ink-soft);
  border:1px solid var(--line);background:var(--paper-raised);
  padding:5px 10px;white-space:nowrap;min-height:32px;
}
.lang-btn:hover{color:var(--navy-deep)}
.lang-caret{font-size:10px}
.lang-menu{
  position:absolute;top:calc(100% + 6px);right:0;z-index:6;
  min-width:140px;
  background:var(--paper-raised);border:1px solid var(--line);
}
.lang-item{
  display:block;width:100%;padding:9px 14px;
  font-size:13px;color:var(--ink);white-space:nowrap;
}
.lang-item:hover{background:var(--paper-sunk);color:var(--navy-deep)}
.lang-item.is-current{background:var(--paper-sunk);color:var(--navy);font-weight:600}
.lang-item.is-current::before{
  content:"";display:inline-block;width:6px;height:6px;
  background:var(--navy);margin-right:8px;vertical-align:2px;
}

/* 汉堡按钮(≥44px 触达) */
.nav-toggle{
  display:none;
  min-width:44px;min-height:44px;
  align-items:center;justify-content:center;
  border:1px solid var(--line);background:var(--paper-raised);
}
.nt-bars{display:flex;flex-direction:column;gap:4px;align-items:center}
.nt-bars i{
  display:block;width:20px;height:2px;background:var(--ink);
  transition:transform .2s ease,opacity .2s ease;
}
html.nav-open .nt-bars i:nth-child(1){transform:translateY(6px) rotate(45deg)}
html.nav-open .nt-bars i:nth-child(2){opacity:0}
html.nav-open .nt-bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* 遮罩:层级低于顶条与抽屉所在的 .site-header 顶层容器 */
.nav-veil{
  position:fixed;inset:0;z-index:1;
  background:var(--veil);
}
.nav-veil[hidden]{display:none}

/* ---------------- 页脚(footer.js 注入) ---------------- */
.site-footer{
  border-top:1px solid var(--line);
  background:var(--paper-sunk);
}
.foot-main{padding-top:44px;padding-bottom:36px}
.foot-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1.2fr .8fr;
  gap:32px;
}
.foot-grid > *{min-width:0}
.foot-brand .brand{margin-bottom:12px}
.foot-brand .brand-mark{width:30px;height:30px}
.foot-tag{font-size:13px;line-height:1.8;color:var(--ink-soft);max-width:34em}
.foot-domain{
  margin-top:10px;font-family:var(--font-mono);font-size:11px;
  letter-spacing:.05em;color:var(--ink-soft);
}
.foot-title{
  font-size:12px;font-weight:700;letter-spacing:.14em;
  color:var(--ink);margin-bottom:12px;
}
.foot-title::before{
  content:"";display:inline-block;width:7px;height:7px;
  background:var(--navy);margin-right:8px;vertical-align:1px;
}
.foot-col a{
  display:block;padding:5px 0;
  font-size:13px;color:var(--ink-soft);
}
.foot-col a:hover{color:var(--navy-deep);text-decoration:underline;text-underline-offset:3px}
.foot-base{border-top:1px solid var(--line)}
.foot-base-in{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px 24px;flex-wrap:wrap;
  padding-top:14px;padding-bottom:14px;
  font-size:12px;color:var(--ink-soft);
}
.foot-mono{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em}

/* ---------------- 滚动淡入(reveal.js 驱动) ---------------- */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s ease}
.reveal.shown{opacity:1;transform:none}

/* ---------------- 响应式 ---------------- */
@media (max-width:1180px){
  .brand-domain{display:none}
}
@media (max-width:980px){
  .nav-link{padding:6px 9px;font-size:13px}
}
@media (max-width:900px){
  /* 导航收进抽屉:实色面板、整行可点、锁背景滚动 */
  .mainnav{
    position:absolute;top:100%;left:0;right:0;z-index:3;
    display:none;flex-direction:column;align-items:stretch;gap:0;
    margin-left:0;
    background:var(--paper-raised);
    border-bottom:1px solid var(--line);
    max-height:calc(100dvh - var(--topbar-h));
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  html.nav-open .mainnav{display:flex}
  .mainnav .nav-link{
    display:flex;align-items:center;width:100%;
    min-height:48px;padding:10px var(--gutter);
    font-size:15px;border-top:1px solid var(--line);
  }
  .mainnav .nav-link:first-child{border-top:0}
  .nav-toggle{display:inline-flex}
  /* 抽屉化后导航的 margin-left:auto 失效,工具区自己补右贴 */
  .topbar-tools{margin-left:auto}
  .foot-grid{grid-template-columns:1fr 1fr}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  :root{
    --gutter:16px;
    --sec-gap:52px;
  }
  .topbar{padding-inline:16px;gap:10px}
  /* 顶条左右两块在窄屏允许收缩,避免 nowrap 的品牌名+工具区撑破视口 */
  .brand{flex:1 1 auto;min-width:0}
  .brand-name{font-size:17px;overflow:hidden;text-overflow:ellipsis}
  .topbar-tools{flex:0 1 auto;min-width:0}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr;gap:24px}
}

/* ---------------- 动效偏好 ---------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .nt-bars i{transition:none}
}

/* ---------------- 移动端防横向溢出兜底 ---------------- */
/* body 是纵向 flex 容器,其直接子项(main/header/footer)默认 min-width:auto,
   会被内部 min-width:560px 的表格等宽内容撑到 min-content 而撑破视口;
   显式给 flex 子项 min-width:0,使其可收缩到版心宽度,超宽内容改走内部滚动 */
body>main,body>header,body>footer{min-width:0}
/* 横滑容器自身宽度钉死在版心内,内部超宽内容走滚动条 */
.table-wrap,pre{display:block;max-width:100%}
/* 长 URL / 长标识符 / 长文件名允许断行,避免撑破单元格与段落 */
.prose p,.prose li,.prose td,.pane-intro,.dl-lead,.doc-lead,.tut-lead,.article-lede,.cc-desc,.core-note{
  overflow-wrap:break-word;word-break:break-word;
}
/* 表格单元格内的长串同样允许折行兜底 */
.data-table td,.data-table th{overflow-wrap:break-word}
/* 窄屏下取消表格最小宽度,使其可压缩进版心;单元格长内容已允许折行。
   注:components.css 等后加载样式表里有 .data-table{min-width:560px} 与 pre{white-space:pre},
   此处用 !important 确保窄屏兜底不被后加载表覆盖。 */
@media (max-width:640px){
  .data-table{min-width:0 !important}
  .prose pre,.prose pre code,pre,pre code{
    white-space:pre-wrap !important;word-break:break-word !important;
    overflow-wrap:break-word !important;
  }
}