/* ==========================================================================
   导航与栏目 · V1.9（一级导航 6 栏目衍生）
   覆盖：顶部全局搜索 / 底部 6 Tab / 栏目筛选条 / 事件卡片 / 人物年表 /
        泳道时间树（科技树 / 农业树）/ 详情页（里程碑·争议·误解·来源）
   依赖 style.css 的主题变量（--card / --ink / --line / --cinnabar / --r-m …），
   深浅色自动适配，不写死颜色。
   ========================================================================== */

/* ---------- 1. 顶部全局搜索栏 ---------- */
.top-search{
  position:relative; display:flex; align-items:center; gap:8px;
  flex:1 1 auto; min-width:0; max-width:430px; margin:0 14px;
  padding:0 14px; height:36px;
  background:var(--paper-3); border:1px solid var(--line); border-radius:999px;
  color:var(--ink-4); transition:border-color .16s, background .16s;
}
.top-search:focus-within{border-color:var(--cinnabar-soft); background:var(--card); color:var(--ink-2)}
.top-search svg{flex:0 0 auto}
.top-search input{
  flex:1 1 auto; min-width:0; border:0; background:transparent; outline:none;
  font-size:14px; color:var(--ink); height:100%;
}
.top-search input::placeholder{color:var(--ink-4)}
.ts-hint{
  position:absolute; top:calc(100% + 6px); left:0; z-index:70;
  padding:6px 12px; font-size:12.5px; white-space:nowrap;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-s);
  box-shadow:var(--shadow-2); color:var(--ink-2);
}
.ts-hint a{color:var(--cinnabar)}
/* 铃铛红点 */
.icon-btn{position:relative}
.icon-btn.has-dot::after{
  content:""; position:absolute; top:6px; right:6px; width:7px; height:7px;
  background:var(--cinnabar); border-radius:50%; border:1.5px solid var(--card);
}

/* ---------- 2. 底部 6 Tab ---------- */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:80;
  display:flex; justify-content:space-around; align-items:stretch;
  background:var(--card); border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom, 0);
  box-shadow:0 -2px 12px rgba(40,32,20,.06);
}
.tabbar a{
  flex:1 1 0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; padding:7px 2px 8px; min-width:0;
  font-size:11.5px; color:var(--ink-3); text-decoration:none;
  transition:color .16s;
}
.tabbar a svg{flex:0 0 auto}
.tabbar a.on{color:var(--cinnabar); font-weight:600}
.tabbar a.on svg{stroke-width:2}
.tabbar a span{white-space:nowrap}
/* 底部让位：内容不再被 Tab 遮住 */
@media (min-width:861px){
  body{padding-bottom:58px}
}
.foot{padding-bottom:20px}

/* ---------- 3. 栏目筛选条 ---------- */
.fbar{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px;
  margin:0 0 18px; padding:12px 14px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-m);
}
.fbar-view{display:flex; gap:4px; background:var(--paper-3); border-radius:999px; padding:3px}
.fbar-view .fchip{border:0; background:transparent}
.fbar-view .fchip.on{background:var(--card); color:var(--cinnabar); box-shadow:var(--shadow-1)}
.fbar-filters,.fbar-types{display:flex; flex-wrap:wrap; align-items:center; gap:6px}
.fsep{width:1px; align-self:stretch; background:var(--line); margin:0 2px}
.fchip{
  display:inline-block; padding:5px 12px; border-radius:999px; font-size:13px;
  border:1px solid var(--line); background:var(--card); color:var(--ink-2);
  text-decoration:none; white-space:nowrap; transition:.15s;
}
.fchip:hover{border-color:var(--cinnabar-soft); color:var(--cinnabar)}
.fchip.on{background:var(--cinnabar); border-color:var(--cinnabar); color:#fff; font-weight:500}
.fsel,.fin{
  padding:6px 10px; font-size:13px; color:var(--ink);
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-s);
  outline:none;
}
.fsel:focus,.fin:focus{border-color:var(--cinnabar-soft)}
.fin{min-width:180px}
.fbar-count{margin-left:auto; font-size:12.5px; color:var(--ink-3); white-space:nowrap}
.empty-note{
  padding:34px 20px; text-align:center; color:var(--ink-3); font-size:14px;
  background:var(--paper-3); border:1px dashed var(--line-strong); border-radius:var(--r-m);
}

/* ---------- 4. 事件栏目卡片 / 时间线视图 ---------- */
.ev-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); gap:14px}
.ev-card{
  display:flex; flex-direction:column; gap:7px; padding:15px 16px 13px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-m);
  box-shadow:var(--shadow-1); text-decoration:none; color:inherit;
  transition:border-color .16s, transform .16s;
}
.ev-card:hover{border-color:var(--line-strong); transform:translateY(-1px)}
.ev-card.is-mil{border-left:3px solid var(--cinnabar)}
.ev-top{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.ev-year{font-size:13px; font-weight:600; color:var(--cinnabar); font-variant-numeric:tabular-nums}
.ev-imp{font-size:11px; padding:1px 8px; border-radius:999px; border:1px solid var(--line); color:var(--ink-3)}
.ev-imp.i-core{color:var(--cinnabar); border-color:var(--cinnabar-soft); background:var(--cinnabar-bg)}
.ev-mil{font-size:11px; padding:1px 8px; border-radius:999px; background:var(--ink); color:var(--card)}
.ev-name{margin:0; font-size:15.5px; line-height:1.45}
.ev-sum{margin:0; font-size:13px; color:var(--ink-2); line-height:1.65;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.ev-meta{display:flex; flex-wrap:wrap; gap:6px 10px; font-size:12px; color:var(--ink-3); margin-top:auto}
.ev-dyn{border:1px solid var(--line); border-radius:var(--r-s); padding:0 7px}

.tlv{display:flex; flex-direction:column; gap:18px}
.tlv-group{border-left:3px solid var(--line); padding-left:14px}
.tlv-ghead{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:0 0 8px; border-bottom:1px dashed var(--line); margin-bottom:6px;
  font-size:14px; font-weight:600;
}
.tlv-ghead a{color:var(--ink); text-decoration:none}
.tlv-ghead a:hover{color:var(--cinnabar)}
.tlv-ghead span{font-size:12px; color:var(--ink-3); font-weight:400}
.tlv-row{
  display:flex; align-items:baseline; gap:12px; padding:6px 8px; border-radius:var(--r-s);
  text-decoration:none; color:inherit;
}
.tlv-row:hover{background:var(--paper-3)}
.tlv-year{flex:0 0 86px; font-size:12.5px; color:var(--cinnabar); font-variant-numeric:tabular-nums}
.tlv-title{flex:1 1 auto; font-size:14px}
.tlv-type{flex:0 0 auto; font-size:11.5px; color:var(--ink-3)}

/* ---------- 5. 人物栏目 ---------- */
.pp-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px}
.pp-card{
  display:flex; flex-direction:column; gap:6px; padding:15px 16px 13px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-m);
  box-shadow:var(--shadow-1); text-decoration:none; color:inherit;
  transition:border-color .16s, transform .16s;
}
.pp-card:hover{border-color:var(--line-strong); transform:translateY(-1px)}
.pp-top{display:flex; justify-content:space-between; align-items:baseline; gap:8px}
.pp-top b{font-size:15.5px}
.pp-top span{font-size:12px; color:var(--ink-3)}
.pp-roles{font-size:12px; color:var(--cinnabar)}
.pp-life{font-size:12.5px; color:var(--ink-3)}
.pp-bio{margin:0; font-size:13px; color:var(--ink-2); line-height:1.65}
.pp-meta{margin-top:auto; font-size:12px; color:var(--ink-3)}

.pt-wrap{overflow-x:auto; background:var(--card); border:1px solid var(--line); border-radius:var(--r-m)}
.pt-table{width:100%; border-collapse:collapse; font-size:13.5px}
.pt-table th{
  text-align:left; padding:10px 14px; font-size:12px; color:var(--ink-3); font-weight:600;
  border-bottom:1px solid var(--line); background:var(--paper-3); white-space:nowrap;
}
.pt-table td{padding:9px 14px; border-bottom:1px solid var(--line); vertical-align:top}
.pt-table tr:last-child td{border-bottom:0}
.pt-table tr:hover td{background:var(--paper-3)}
.pt-year{white-space:nowrap; color:var(--cinnabar); font-variant-numeric:tabular-nums}
.pt-name a{color:var(--ink); text-decoration:none; font-weight:500}
.pt-name a:hover{color:var(--cinnabar)}
.pt-roles{display:block; font-size:11.5px; color:var(--ink-3); font-weight:400; margin-top:1px}
.pt-dyn{white-space:nowrap; color:var(--ink-2)}
.pt-life{color:var(--ink-3); font-size:12.5px}
.pt-sep td{
  background:var(--paper-3); font-size:12px; color:var(--ink-3); font-weight:600;
  padding:6px 14px; text-align:center;
}

/* ---------- 6. 泳道时间树（科技树 / 农业树） ---------- */
.tree{
  position:relative; margin:0 0 14px; padding:14px 16px 18px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-m);
  overflow-x:auto;
}
.tree-axis{position:relative; height:22px; margin:0 0 4px; min-width:760px}
.tree-axis-in{position:relative; height:100%; border-bottom:1px solid var(--line-strong)}
.tree-tick{
  position:absolute; top:0; transform:translateX(-50%);
  font-size:11px; color:var(--ink-3); white-space:nowrap; font-variant-numeric:tabular-nums;
}
.tree-tick::after{
  content:""; position:absolute; left:50%; bottom:-5px; width:1px; height:5px; background:var(--line-strong);
}
.tlane{min-width:760px; margin-top:10px}
.tlane-head{
  display:flex; align-items:center; gap:8px; width:100%;
  padding:6px 8px; border:0; border-radius:var(--r-s); background:transparent;
  cursor:pointer; font-size:13.5px; color:var(--ink-2); text-align:left;
}
.tlane-head:hover{background:var(--paper-3)}
.tl-dot{width:9px; height:9px; border-radius:50%; flex:0 0 auto}
.tlane-head b{font-weight:600; color:var(--ink)}
.tl-n{font-size:11.5px; color:var(--ink-3)}
.tl-arrow{margin-left:auto; font-size:11px; color:var(--ink-3); transition:transform .18s}
.tlane.off .tlane-head .tl-arrow{transform:rotate(-90deg)}
.tlane-track{
  position:relative; height:64px; margin:4px 0 2px;
  border-top:1px dashed var(--line);
}
.tlane.off .tlane-track{display:none}
.tl-grid{position:absolute; top:0; bottom:0; width:1px; background:var(--line); opacity:.55}
.tlane-track .tl-grid{background:var(--line)}

/* 节点：dot + 名称 + 精度徽章，标签上下交错 */
.lnode{
  position:absolute; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  text-decoration:none; color:inherit; max-width:150px;
}
.lnode.up{transform:translateY(-100%) translateY(-14px)}
.lnode.down{transform:translateY(0) translateY(14px)}
.ln-dot{
  width:11px; height:11px; border-radius:50%; flex:0 0 auto;
  border:2px solid var(--card); box-shadow:0 0 0 1px var(--line-strong);
  transition:transform .15s;
}
.lnode:hover .ln-dot{transform:scale(1.35)}
.ln-label{font-size:12.5px; font-weight:500; color:var(--ink); line-height:1.3}
.lnode:hover .ln-label{color:var(--cinnabar)}
.ln-badge{font-size:10.5px; color:var(--ink-3); line-height:1.25}
.ln-route{font-size:10.5px; padding:0 6px; border-radius:999px; border:1px solid var(--line); color:var(--ink-3)}
.ln-route.r-sea{border-color:#3d5a80; color:#3d5a80}
.ln-route.r-land{border-color:#8a5a2b; color:#8a5a2b}
.ln-route.r-local{border-color:#2f6f4f; color:#2f6f4f}
.ln-route.r-guess{border-style:dashed}
/* 争议小圆点 */
.ln-dis{
  position:absolute; top:-6px; right:-8px;
  width:14px; height:14px; border-radius:50%;
  background:var(--cinnabar); color:#fff;
  font-size:9px; line-height:14px; text-align:center; font-style:normal;
}
.tree-legend{
  display:flex; flex-wrap:wrap; gap:6px 18px; align-items:center;
  padding:10px 14px; font-size:12px; color:var(--ink-3);
  background:var(--paper-3); border-radius:var(--r-s);
}
.tree-legend span{display:inline-flex; align-items:center; gap:5px}
.lg-prec{width:9px; height:9px; border-radius:50%; display:inline-block}
.lg-prec.p-ok{background:#2f6f4f}
.lg-prec.p-mid{background:#8a6d1f}
.lg-prec.p-warn{background:#b06a1e}
.lg-prec.p-risk{background:#a8321e}
.tree-legend .lg-dis .ln-dis{position:static; margin-left:2px}
.tree-foot{margin-top:14px}

/* ---------- 7. 精度徽章 ---------- */
.pchip{
  display:inline-block; padding:0 7px; border-radius:999px;
  font-size:10.5px; line-height:17px; font-weight:500; vertical-align:1px;
  border:1px solid var(--line); color:var(--ink-3); background:var(--card);
}
.pchip.p-ok{border-color:#2f6f4f; color:#2f6f4f}
.pchip.p-mid{border-color:#8a6d1f; color:#8a6d1f}
.pchip.p-warn{border-color:#b06a1e; color:#b06a1e}
.pchip.p-risk{border-color:#a8321e; color:#a8321e}

/* ---------- 8. 详情页（科技 / 农业） ---------- */
.dt-alias{font-size:13px; color:var(--ink-3); margin:4px 0 0}
.dt-sum{font-size:14.5px; color:var(--ink-2); line-height:1.75; margin:10px 0 0}
.dt-origin{margin:0 0 20px}
.dt-o-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px}
.dt-o-k{display:block; font-size:11.5px; color:var(--ink-3); margin-bottom:3px}
.dt-o-grid b{font-size:14.5px}
.dt-tl{display:flex; flex-direction:column; gap:0; margin:0 0 20px}
.dt-node{display:flex; gap:16px; padding:14px 0; border-bottom:1px dashed var(--line)}
.dt-node:last-child{border-bottom:0}
.dt-node-time{
  flex:0 0 118px; font-size:13px; color:var(--cinnabar); font-weight:600;
  display:flex; flex-direction:column; gap:3px; align-items:flex-start;
  font-variant-numeric:tabular-nums;
}
.dt-node-body h3{margin:0 0 5px; font-size:15px}
.dt-node-body p{margin:0; font-size:13.5px; color:var(--ink-2); line-height:1.75}
.dt-src{margin-top:7px; font-size:11.5px; color:var(--ink-3); display:flex; flex-wrap:wrap; gap:5px; align-items:center}
.dt-src-chip{
  padding:1px 8px; border:1px solid var(--line); border-radius:999px;
  background:var(--paper-3); color:var(--ink-2);
}
.dt-duo{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px; margin:0 0 20px}
.dt-duo p{margin:6px 0 0; font-size:13.5px; color:var(--ink-2); line-height:1.75}
.dt-duo-k{font-size:12px; color:var(--cinnabar); font-weight:600}
.dt-con{margin:0 0 14px}
.dt-con-p{margin:0 0 12px; font-size:15px}
.dt-con-views{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:12px}
.dt-view{
  padding:12px 14px; background:var(--paper-3); border-radius:var(--r-s);
  border-left:3px solid var(--line-strong);
}
.dt-view-h{display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:13.5px; font-weight:600; margin-bottom:6px}
.dt-view p{margin:0; font-size:13px; color:var(--ink-2); line-height:1.7}
.dt-mis{margin:0 0 12px; display:flex; flex-direction:column; gap:9px}
.dt-mis-w,.dt-mis-r{display:flex; gap:9px; font-size:13.5px; line-height:1.7}
.dt-mis-x{
  flex:0 0 20px; height:20px; border-radius:50%; text-align:center; line-height:20px;
  background:var(--cinnabar-bg); color:var(--cinnabar); font-size:12px; font-weight:700;
}
.dt-mis-v{
  flex:0 0 20px; height:20px; border-radius:50%; text-align:center; line-height:20px;
  background:#e8f2ec; color:#2f6f4f; font-size:12px; font-weight:700;
}
.dt-mis-w{color:var(--ink-3); text-decoration:line-through; text-decoration-color:var(--line-strong)}
.dt-mis-r{color:var(--ink)}
.dt-rel{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 20px}
.rel-chip{
  padding:5px 13px; border:1px solid var(--line); border-radius:999px;
  background:var(--card); font-size:13px; color:var(--ink-2); text-decoration:none;
}
.rel-chip:hover{border-color:var(--cinnabar-soft); color:var(--cinnabar)}
.src-list{display:flex; flex-direction:column; gap:10px}
.src-row{padding:12px 14px; background:var(--paper-3); border-radius:var(--r-s)}
.src-head{display:flex; flex-wrap:wrap; gap:7px; align-items:center; font-size:14px}
.src-head .chip{font-size:11px}
.src-author{font-size:12px; color:var(--ink-3); margin-top:3px}
.src-note{margin:6px 0 0; font-size:12.5px; color:var(--ink-2); line-height:1.65}

/* ---------- 9. 响应式 ---------- */
@media (max-width:860px){
  .top-search{max-width:none; margin:0 8px; height:34px}
  .top-search input{font-size:13.5px}
  .tabbar a{font-size:10.5px; padding:6px 1px 7px}
  .tabbar a svg{width:19px; height:19px}
  body{padding-bottom:56px}
  .fbar-count{margin-left:0; width:100%}
  .dt-node{flex-direction:column; gap:6px}
  .dt-node-time{flex:none; flex-direction:row; align-items:center}
  .tree,.tree-axis,.tlane{min-width:640px}
  .fin{min-width:140px}
}
@media (max-width:560px){
  .brand-txt i{display:none}
  .tabbar a span{font-size:10px}
}