﻿/* ==========================================================================
   RAIL.CSS — 左侧可隐藏垂直导航 + 档案式大字排版
   在 brutal.css 之后加载，只重排布局，不动任何功能
   ========================================================================== */
:root{ --rail: 268px; --ease2: cubic-bezier(.175,.885,.32,1.275); }

/* ---------- 主体：给侧栏让位 ---------- */
#app{ padding-left: var(--rail); transition: padding-left .38s var(--ease2); }
body.nav-off #app{ padding-left: 0; }
body.nav-off .site-head{ transform: translateX(calc(-1 * var(--rail) - 8px)); }
body.nav-peek #app{ padding-left: var(--rail); }
body.nav-peek .site-head{ transform: none; }

main.wrap{ max-width: none; margin: 0; padding: 44px 56px 96px; }
footer.site-foot{ margin-left: 0; padding-left: 56px; padding-right: 56px; }
@media (max-width:900px){ main.wrap{ padding: 28px 20px 72px; } footer.site-foot{ padding: 18px 20px; } }

/* ---------- 侧栏本体：深蓝招牌 ---------- */
.site-head{
  position: fixed; top: 0; left: 0; bottom: 0;
  width: var(--rail); height: 100vh; max-width: none;
  margin: 0; padding: 20px 18px 18px;
  background: #004B99; color: #fff;
  border: 0; border-right: 3px solid #111;
  display: flex; flex-direction: column; gap: 16px;
  overflow-y: auto; overflow-x: hidden;
  z-index: 90;
  transition: transform .38s var(--ease2);
  box-shadow: 4px 0 0 rgba(17,17,17,.12);
}
.site-head::-webkit-scrollbar{ width: 8px }
.site-head::-webkit-scrollbar-thumb{ background: #E6192E; border-radius: 0 }

.head-inner{
  display: flex; flex-direction: column; align-items: stretch;
  gap: 16px; max-width: none; margin: 0; padding: 0;
}

/* Logo 变成贴在蓝底上的白色贴纸 */
.site-head .brand{ display: block; margin: 0; padding: 0; transform: none }
.site-head .logo-mark{
  display: block; background: #fff; border: 2.5px solid #111;
  box-shadow: 4px 4px 0 #111; padding: 8px 10px; line-height: 0;
}
.site-head .logo-mark svg{ height: 44px; width: 100%; display: block }

/* 搜索框：白底黑框，聚焦红边 */
.site-head .search{
  max-width: none; width: 100%; margin: 0;
  background: #fff; border: 2.5px solid #111; box-shadow: 4px 4px 0 #111;
  padding: 8px 10px; color: #111;
}
.site-head .search span{ color: #004B99; font-size: 13px }
.site-head .search input{ background: transparent; color: #111; font-size: 13px }
.site-head .search input::placeholder{ color: #777 }
.site-head .search:focus-within{ border-color: #E6192E; box-shadow: 4px 4px 0 #E6192E }

/* 用户区挪到最下面 */
.site-head > .head-right{
  order: 9; margin-top: auto; padding-top: 16px; border-top: 2px dashed rgba(255,255,255,.45);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: #fff;
}
.site-head .head-right .hname{ color: #fff; font-family: var(--mono); font-size: 12px }
.site-head .head-right .avatar{ border: 2px solid #111 !important; background:#fff }
.site-head .head-right .btn{
  background: #fff; color: #111; border: 2.5px solid #111; box-shadow: 3px 3px 0 #111;
  padding: 5px 10px; font-size: 11px;
}
.site-head .head-right .btn:hover{ background: #FFDE59; transform: translate(-1px,-1px) }

/* 导航：竖排，选中项白底深蓝字 + 红粗线 */
.site-head .tabs{
  display: flex; flex-direction: column; gap: 4px;
  max-width: none; margin: 0; padding: 0; overflow: visible;
}
.site-head .tab{
  width: 100%; justify-content: flex-start; text-align: left;
  background: transparent; color: #fff; border: 0; box-shadow: none;
  border-left: 4px solid transparent; border-radius: 0;
  padding: 9px 12px; font-family: var(--mono); font-size: 12px;
  letter-spacing: .06em; text-transform: uppercase; transition: background .16s, color .16s, padding .16s;
}
.site-head .tab:hover{ background: rgba(255,255,255,.14); box-shadow: none; transform: none; color: #fff }
.site-head .tab.on{
  background: #fff; color: #004B99; border-left: 6px solid #E6192E;
  font-weight: 700; box-shadow: 2px 2px 0 #111;
}
.site-head .tab .cnt{ background: #E6192E; color: #fff }
.site-head .tab.on .cnt{ background: #E6192E; color: #fff }

/* 侧栏里的目录 */
.side-toc{ margin-top: 2px; border-top: 2px dashed rgba(255,255,255,.45); padding-top: 14px }
.side-toc:empty{ display: none }
.side-toc .toc-box{
  border: 0; box-shadow: none; background: transparent; padding: 0; margin: 0;
}
.side-toc .toc-box b{
  color: rgba(255,255,255,.72); font-size: 10px; letter-spacing: .12em; margin-bottom: 8px;
  border-bottom: 2px solid rgba(255,255,255,.25); padding-bottom: 6px;
}
.side-toc .toc-box a{
  color: #fff; font-size: 12.5px; line-height: 1.45; padding: 5px 0 5px 12px;
  border-left: 3px solid transparent; transition: padding .2s var(--ease2), background .2s;
}
.side-toc .toc-box a:hover{ color: #fff; background: rgba(255,255,255,.12) }
.side-toc .toc-box a.on{
  color: #fff; background: rgba(230,25,46,.9); border-left: 5px solid #FFDE59;
  padding-left: 14px; font-weight: 700;
}
.side-toc .toc-box a::before{ display: none }
.side-toc .toc-box a.lv3{ padding-left: 24px }
.side-toc .toc-box a.lv4{ padding-left: 34px }

/* ---------- 折叠按钮 & 边缘热区 ---------- */
#railToggle{
  position: fixed; left: calc(var(--rail) + 14px); top: 18px; z-index: 95;
  width: 38px; height: 38px; display: grid; place-items: center;
  background: #fff; color: #111; border: 2.5px solid #111; box-shadow: 3px 3px 0 #111;
  font-family: var(--mono); font-size: 14px; cursor: pointer;
  transition: left .38s var(--ease2), transform .16s, background .16s;
}
#railToggle:hover{ background: #FFDE59; transform: translate(-1px,-1px); box-shadow: 4px 4px 0 #111 }
body.nav-off #railToggle{ left: 14px }
#railEdge{ position: fixed; left: 0; top: 0; bottom: 0; width: 14px; z-index: 94; }
body:not(.nav-off) #railEdge{ display: none }
#railEdge:hover{ background: linear-gradient(90deg, rgba(230,25,46,.85), transparent) }

/* ---------- 主内容：极简、留白、无卡片 ---------- */
main .card{
  background: #fff; border: 0; box-shadow: none; padding: 0;
}
main .layout{ display: block; max-width: 1200px }
main .stack{ gap: 54px }
main .stack > .card{ border-top: 3px solid #111; padding-top: 26px }
main .stack > .card:first-child{ border-top: 0; padding-top: 0 }

/* 词条标题：超大、允许换行、允许突破阅读宽度 */
main .article-head h1{
  font-size: clamp(46px, 7.4vw, 104px);
  line-height: .88; letter-spacing: -.03em;
  margin: 4px 0 18px; max-width: 1080px;
  color: #111; text-wrap: balance;
}
main .article-head{ margin-bottom: 26px }

/* 辅助信息：档案标签感 */
main .article-meta{
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: #666; display: flex; flex-wrap: wrap; gap: 6px 22px;
  border-top: 1.5px dashed #bbb; border-bottom: 1.5px dashed #bbb; padding: 8px 0;
}

/* 正文阅读宽度 720px，大标题突破 */
main .wikibody, main .article-head p{ max-width: 720px }
main .wikibody{ font-size: 16.5px; line-height: 1.75 }
main .wikibody h2{
  font-size: clamp(28px, 3vw, 42px); letter-spacing: -.02em;
  margin: 40px 0 12px; padding-bottom: 6px; border-bottom: 3px solid #111;
  max-width: 900px;
}
main .wikibody h3{ font-size: 24px; margin: 30px 0 10px; max-width: 900px }

/* 帖子头部：不用卡片，直接用一条粗线收口 */
main .article-head .tag{ background: #FFDE59; }
main .hero{ border: 0; box-shadow: none; background: transparent !important; padding: 0 0 18px; overflow: visible }
main .hero::before{ display: none }
main .hero h1{ font-size: clamp(44px, 6.6vw, 88px); line-height: .9; color: #111; max-width: 1000px }
main .hero-logo{ justify-content: flex-start; margin: 0 0 20px }
main .hero-logo svg{ width: min(360px, 78%) }

/* 统计条：细长横排，用竖线分割 */
main .stat-strip{
  display: flex; gap: 0; border-top: 3px solid #111; border-bottom: 3px solid #111;
  background: #fff; margin: 8px 0 6px;
}
main .stat{ flex: 1; border: 0; box-shadow: none; padding: 16px 18px; border-left: 1.5px dashed #ccc }
main .stat:first-child{ border-left: 0 }
main .stat b{ font-size: 34px; letter-spacing: -.02em }
main .stat span{ font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #666 }
main .stat.alert b{ color: #E6192E }

/* 词条卡片列表：去掉卡片框，改成报纸条目 */
main .cards{ gap: 0; display: block; border-top: 3px solid #111 }
main .acard{
  border: 0; border-bottom: 1.5px dashed #bbb; box-shadow: none; background: #fff;
  display: grid; grid-template-columns: 1fr 150px; gap: 24px; padding: 20px 4px;
  transform: none; align-items: start;
}
main .acard:hover{ transform: none; box-shadow: none; background: #FAFAF8 }
main .acard .thumb{ order: 2; height: 96px; border: 2px solid #111; grid-row: 1 }
main .acard .body{ order: 1; padding: 0; gap: 6px; grid-row: 1 }
main .acard h3{ font-size: 26px; letter-spacing: -.02em }
main .acard p{ font-size: 13.5px; color: #444 }
main .acard .row{ font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; color: #666; text-transform: uppercase }

/* 详情页右栏：细长垂直列表，虚线分隔 */
main .layout > aside{ margin-top: 40px; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0 34px; border-top: 3px solid #111 }
main .layout > aside > .card{ border-top: 0; border-left: 1.5px dashed #ccc; padding: 18px 22px 0 22px }
main .layout > aside > .card:first-child{ border-left: 0; padding-left: 0 }
main .layout > aside .side-h{ font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #004B99; border-bottom: 2px solid #111; padding-bottom: 6px }
main .layout > aside .mini{ border-bottom: 1.5px dashed #ccc }
@media (max-width:1100px){ main .layout > aside{ grid-template-columns: 1fr 1fr } }
@media (max-width:760px){
  main .layout > aside{ grid-template-columns: 1fr }
  main .layout > aside > .card{ border-left: 0; padding: 16px 0 0 }
  main .acard{ grid-template-columns: 1fr; }
  main .acard .thumb{ display: none }
}

/* 需要强调的区块才保留粗框 + 硬阴影 */
main .infobox{ border: 3px solid #111 !important; box-shadow: 6px 6px 0 #111 !important; padding: 34px 18px 16px !important; background:#fff }
main .banner.bad, main .banner.warn, main .danger-zone, main .case, main .neg-form{
  border: 3px solid #111 !important; box-shadow: 6px 6px 0 #111; background: #fff;
}
main .banner.bad{ border-left: 10px solid #E6192E !important }
main .banner.warn{ border-left: 10px solid #FFDE59 !important }
main .danger-zone{ border: 3px dashed #E6192E !important; box-shadow: none }

/* 按钮：色块 + 硬阴影，悬停物理按压 */
.btn{
  border: 2.5px solid #111; box-shadow: 3px 3px 0 #111; background: #fff; color: #111;
  font-family: var(--mono); font-size: 12px; letter-spacing: .05em; text-transform: uppercase;
  padding: 9px 16px; border-radius: 0;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover{ transform: translate(-2px,-2px); box-shadow: 5px 5px 0 #111; background: #FFDE59 }
.btn:active{ transform: translate(2px,2px); box-shadow: 1px 1px 0 #111 }
.btn.primary{ background: #004B99; color: #fff }
.btn.primary:hover{ background: #004B99; filter: brightness(1.12) }
.btn.bad{ background: #E6192E; color: #fff }
.btn.ghost{ background: transparent; box-shadow: none; border: 0; border-bottom: 3px solid #111; padding: 4px 2px }
.btn.ghost:hover{ background: transparent; color: #E6192E; border-bottom-color: #E6192E; transform: none; box-shadow: none }

/* 目录在正文里不再出现（已经搬进侧栏） */
main .toc-box{ display: none }

/* ---------- 滚动进度条：更细 ---------- */
#pbar{ height: 3px }
#pbar i{ background: #E6192E }

/* ---------- 进场：clip-path 自下而上 ---------- */
@keyframes riseClip{ from{ opacity:.35; clip-path: inset(0 0 100% 0); transform: translateY(12px) } to{ opacity:1; clip-path: inset(0 0 0 0); transform: none } }
main .article-head, main .wikibody, main .hero{ animation: riseClip .62s cubic-bezier(.22,1,.36,1) both }
main .wikibody{ animation-delay: .06s }
body.boot .card, body.boot .acard, body.boot .stat, body.boot .hero{ animation: riseClip .6s cubic-bezier(.22,1,.36,1) both }
@media (prefers-reduced-motion: reduce){
  main .article-head, main .wikibody, main .hero, body.boot .card, body.boot .acard, body.boot .stat{ animation:none }
  #app, .site-head{ transition: none }
}



/* ---------- 语言切换按钮 ---------- */
.lang-toggle{
  margin-top: 14px; width: 100%; text-align: left;
  background: transparent; color: #fff; border: 0;
  border-left: 4px solid rgba(255,255,255,.45);
  padding: 7px 12px; cursor: pointer;
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  transition: background .16s, border-color .16s;
}
.lang-toggle:hover{ background: rgba(255,255,255,.14); border-left-color: #FFDE59 }
