/* ==========================================================================
   导航结构 · 以用户问题组织（顶部导航为主）
   -------------------------------------------------------------------------
   设计来源：《历史线需求开发文档 补充稿 V1.5》的信息架构：
     · 一级导航 = 探索 / 朝代 / 时间线 / 问答·搜索 / 我的
     · 内容实体（人物、词条、专题、地图、工具）不进一级导航，
       经「探索页二级入口 + 页面内关联 + 搜索」到达
   形态（2026-10-21 按用户要求改为顶部导航，取消底部悬浮 Tab）：
     · 桌面：顶栏横排常显 5 项，二级入口收进「更多」下拉
     · 移动：顶栏汉堡展开同一面板（一级在前，二级分组在后）
   ========================================================================== */

/* ---------- 1. 顶部导航条 ---------- */
.nav{display:flex; align-items:center; gap:2px; flex:1 1 auto; min-width:0}
.nav-main{display:flex; align-items:center; gap:2px; min-width:0; overflow:auto; scrollbar-width:none}
.nav-main::-webkit-scrollbar{display:none}
.nav-main a{
  padding:7px 13px; border-radius:999px; font-size:14.5px; white-space:nowrap;
  color:var(--ink-2); transition:background .16s,color .16s;
}
.nav-main a:hover{background:var(--paper-3); color:var(--ink)}
.nav-main a.on{background:var(--cinnabar-bg); color:var(--cinnabar); font-weight:600}
/* 分隔线与二级分组在桌面隐藏，由「更多」按钮展开 */
.nav-div{display:none}
.nav-sub{display:none}
.nav-sub.open{
  display:flex; flex-direction:column; gap:2px; position:absolute;
  top:calc(var(--nav-h) - 6px); right:12px; z-index:66; min-width:188px; padding:8px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-m);
  box-shadow:var(--shadow-2);
}
.nav-sub a{padding:9px 12px; border-radius:var(--r-s); font-size:14px; color:var(--ink-2); white-space:nowrap}
.nav-sub a:hover{background:var(--paper-3); color:var(--ink)}
.nav-sub a.on{background:var(--cinnabar-bg); color:var(--cinnabar); font-weight:600}
.nav .nav-cap{
  padding:6px 12px 4px; font-size:11px; letter-spacing:.14em; color:var(--ink-4); font-weight:700;
}
/* 桌面端也要显示「更多」按钮（style.css 默认只在窄屏显示） */
#btn-menu{display:grid}

/* ---------- 2. 窄屏：汉堡展开同一面板 ---------- */
@media (max-width:860px){
  .nav{
    position:fixed; inset:var(--nav-h) 0 auto 0; flex-direction:column; align-items:stretch;
    gap:0; background:var(--card); border-bottom:1px solid var(--line);
    padding:8px 12px 14px; box-shadow:var(--shadow-2);
    transform:translateY(-8px); opacity:0; pointer-events:none; transition:.18s;
    max-height:76vh; overflow:auto;
  }
  .nav.open{transform:none; opacity:1; pointer-events:auto}
  .nav-main{flex-direction:column; align-items:stretch; overflow:visible}
  .nav-main a{padding:11px 12px; border-radius:var(--r-s); font-size:15.5px}
  .nav-div{display:block; height:1px; background:var(--line); margin:9px 2px}
  .nav-sub{display:flex; flex-direction:column; gap:0}
  .nav-sub.open{position:static; min-width:0; padding:0; border:0; border-radius:0; box-shadow:none; background:transparent}
}

/* 顶栏动作区靠右 */
.topbar-actions{margin-left:auto; display:flex; gap:6px; flex:0 0 auto}
a.icon-btn{text-decoration:none}

/* ---------- 3. 朝代 Tab ---------- */
.dyn-find{
  display:flex; gap:10px; align-items:center; margin:0 0 18px;
}
.dyn-find input{
  flex:1 1 auto; min-width:0; padding:11px 15px; font-size:15px;
  border:1px solid var(--line); border-radius:999px; background:var(--card); color:var(--ink);
}
.dyn-find input:focus{outline:2px solid var(--cinnabar-bg); border-color:var(--cinnabar-soft)}
.dyn-find .dyn-count{font-size:12.5px; color:var(--ink-3); white-space:nowrap}

.dyn-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); gap:14px}
.dyn-card{
  display:flex; flex-direction:column; gap:8px; padding:16px 17px 14px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-m);
  box-shadow:var(--shadow-1); transition:border-color .16s, transform .16s;
}
.dyn-card:hover{border-color:var(--line-strong); transform:translateY(-1px)}
.dyn-top{display:flex; align-items:baseline; gap:8px}
.dyn-top b{font-family:var(--serif); font-size:19px; letter-spacing:.02em}
.dyn-top span{font-size:12px; color:var(--ink-3)}
.dyn-sum{font-size:13.5px; line-height:1.75; color:var(--ink-2);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.dyn-meta{display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; padding-top:4px}
.dyn-meta i{font-style:normal; font-size:11.5px; color:var(--ink-3);
  background:var(--paper-3); border-radius:5px; padding:2px 7px}
.dyn-bar{height:4px; border-radius:99px; opacity:.85}
.dyn-empty{padding:36px 20px; text-align:center; color:var(--ink-3); font-size:14px}
/* 卡片上的「兴起 / 衰亡」线索行 */
.dyn-clue{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  font-size:12.5px; color:var(--ink-3); line-height:1.6;
}
.dyn-clue em{
  font-style:normal; font-size:11px; font-weight:700; letter-spacing:.08em;
  padding:1px 6px; border-radius:5px; background:var(--paper-3); color:var(--ink-4);
}
.dyn-clue i{font-style:normal; color:var(--ink-4)}
.dyn-role p{font-size:13.5px; line-height:1.85}

/* ---------- 4. 我的 Tab ---------- */
.me-user{
  display:flex; align-items:center; gap:14px; padding:18px 20px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-m); box-shadow:var(--shadow-1);
}
.me-user .mu-ava{
  width:46px; height:46px; border-radius:50%; background:var(--cinnabar); color:#fff;
  display:grid; place-items:center; font-family:var(--serif); font-size:20px; font-weight:700; flex:0 0 auto;
}
.me-user .mu-info{flex:1 1 auto; min-width:0}
.me-user .mu-info b{display:block; font-size:15.5px}
.me-user .mu-info span{font-size:12.5px; color:var(--ink-3)}
.me-user .mu-act{display:flex; gap:8px; flex:0 0 auto}

.me-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; margin-top:16px}
.me-card{
  display:flex; gap:12px; align-items:flex-start; padding:16px 17px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-m);
  box-shadow:var(--shadow-1); transition:border-color .16s, transform .16s;
}
.me-card:hover{border-color:var(--line-strong); transform:translateY(-1px)}
.me-card .mc-ico{
  width:38px; height:38px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background:var(--paper-3); font-size:18px;
}
.me-card .mc-body{min-width:0}
.me-card .mc-body b{display:block; font-size:14.5px; margin-bottom:3px}
.me-card .mc-body span{font-size:12.5px; line-height:1.6; color:var(--ink-3)}
.me-card .mc-n{font-size:12px; color:var(--cinnabar); font-weight:600}

/* ---------- 5. 问答/搜索：模式切换 ---------- */
.qa-modes{
  display:inline-flex; gap:4px; padding:4px; margin:0 0 16px;
  background:var(--paper-3); border-radius:999px; border:1px solid var(--line);
}
.qa-modes button{
  border:0; background:transparent; cursor:pointer; padding:7px 20px; border-radius:999px;
  font-size:14px; color:var(--ink-3); font-family:var(--sans); transition:.16s;
}
.qa-modes button.on{background:var(--card); color:var(--cinnabar); font-weight:600; box-shadow:var(--shadow-1)}
.qa-tip-switch{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:12.5px; color:var(--ink-3); margin:0 0 14px;
}
.qa-tip-switch button{
  border:1px dashed var(--line-strong); background:transparent; color:var(--cinnabar);
  border-radius:999px; padding:3px 12px; font-size:12.5px; cursor:pointer; font-family:var(--sans);
}
.qa-tip-switch button:hover{background:var(--cinnabar-bg)}

/* ---------- 3b. 朝代百科档案（/period/<id>） ---------- */
/* 档案速览：左标题右内容的两列定义表，窄屏自动折行 */
.dyn-facts{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:0 22px;
  margin:0 0 4px; padding:16px 18px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-m); box-shadow:var(--shadow-1);
}
.dyn-facts > div{display:flex; gap:10px; padding:7px 0; border-bottom:1px dashed var(--line)}
.dyn-facts > div:last-child{border-bottom:0}
.dyn-facts dt{flex:0 0 46px; font-size:12.5px; color:var(--ink-4); font-weight:700; letter-spacing:.06em}
.dyn-facts dd{margin:0; font-size:13.5px; line-height:1.7; color:var(--ink-2)}

.dyn-sec{margin-top:26px}
.dyn-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:12px}
.dyn-item{
  padding:15px 17px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-m); box-shadow:var(--shadow-1);
}
.dyn-item h3{
  margin:0 0 7px; font-size:15px; font-family:var(--serif); color:var(--ink);
  letter-spacing:.02em;
}
.dyn-item p{margin:0; font-size:13.5px; line-height:1.85; color:var(--ink-2)}
/* 积弊一栏用淡红左边线，与制度栏区分，扫读时不会混 */
.dyn-decay .dyn-item{border-left:3px solid color-mix(in srgb,var(--cinnabar) 55%,transparent)}
.dyn-arc .dyn-item{border-left:3px solid color-mix(in srgb,var(--cinnabar) 30%,transparent)}
.dyn-sys .dyn-item{border-left:3px solid var(--line-strong)}
.dyn-deb .dyn-item{background:var(--paper-3)}
.dyn-para{margin:0; font-size:14px; line-height:1.95; color:var(--ink-2)}
.entry .entry-w{display:block; font-size:12.5px; color:var(--ink-3); margin-top:4px; line-height:1.6}
.entry.static{cursor:default}
.entry.static:hover{transform:none}

/* ---------- 5. V1.6 朝代分期与关键事件策展 ---------- */
/* 分期导航 / 内容形态入口：同一套「名称 + 说明」小卡 */
.dp-chips{display:flex; flex-wrap:wrap; gap:8px}
.dp-chip{
  display:flex; flex-direction:column; gap:2px; align-items:flex-start;
  padding:8px 14px; border:1px solid var(--line); border-radius:var(--r-m);
  background:var(--card); cursor:pointer; text-align:left;
  transition:border-color .16s, transform .16s;
}
.dp-chip:hover{border-color:var(--cinnabar-soft); transform:translateY(-1px)}
.dp-chip b{font-family:var(--serif); font-size:14.5px; letter-spacing:.02em; color:var(--ink)}
.dp-chip span{font-size:11.5px; color:var(--ink-3)}
a.dp-chip{text-decoration:none}

/* 关键事件矩阵：按时期分组 */
.dp-period{margin-top:30px; scroll-margin-top:78px}
.dp-head{display:flex; flex-wrap:wrap; align-items:baseline; gap:12px; justify-content:space-between}
.dp-title{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.dp-title h3{margin:0; font-family:var(--serif); font-size:19px; display:inline-flex; align-items:center; gap:9px}
.dp-title h3 i{
  font-style:normal; font-size:11.5px; color:var(--cinnabar); background:var(--cinnabar-bg);
  border-radius:999px; padding:2px 9px; letter-spacing:.04em;
}
.dp-range{font-size:12.5px; color:var(--ink-3)}
.dp-tiers{display:flex; gap:6px}
.dp-oneline{margin:12px 0 0; font-size:15px; line-height:1.9; color:var(--ink)}
.dp-q{margin:6px 0 14px; font-size:13.5px; color:var(--ink-2)}
.dp-q b{color:var(--cinnabar); margin-right:8px; font-weight:600}
.dp-stages{margin:0 0 14px; display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.dp-stages b{font-size:12px; color:var(--ink-4); font-weight:700; letter-spacing:.04em}
.dp-stages .chip{font-size:12px; padding:2px 9px}
.dp-pn{display:flex; justify-content:space-between; gap:10px; margin-top:14px}
.dp-pn span{flex:1}
.dp-pn-i{background:none; border:0; padding:6px 0; font-size:13px; color:var(--cinnabar); cursor:pointer}
.dp-pn-i:hover{text-decoration:underline}

.dp-matrix{width:100%; border-collapse:collapse}
.dp-matrix th{
  text-align:left; font-size:11.5px; letter-spacing:.08em; color:var(--ink-4); font-weight:700;
  padding:8px 10px; border-bottom:1px solid var(--line-strong); white-space:nowrap;
}
.dp-matrix td{padding:12px 10px; border-bottom:1px solid var(--line); vertical-align:top; font-size:13.5px}
.dp-matrix tr:last-child td{border-bottom:0}
.dp-matrix tr[data-tier="A"] td{background:color-mix(in srgb,var(--cinnabar) 4%,transparent)}
.mx-date{white-space:nowrap; color:var(--ink-2); font-size:12.5px; width:120px}
.mx-t a{font-weight:600; font-size:14.5px}
.mx-s{margin-top:3px; font-size:12.5px; line-height:1.7; color:var(--ink-3)}
.mx-type{width:62px}
.mx-type .chip{font-size:11.5px; padding:2px 8px}
.mx-tier{width:42px}
.mx-forms{width:230px}
.mx-forms .chip{font-size:11.5px; padding:2px 8px; margin:0 4px 4px 0}
.c-form i{font-style:normal; color:var(--ink-4); margin-left:4px; font-size:10.5px}

/* 分级徽标：A 朱砂强调 / B 靛蓝 / C 灰 / D 虚线灰 */
.tier{
  display:inline-block; min-width:20px; text-align:center; padding:1px 7px; border-radius:999px;
  font-size:11px; font-weight:700; letter-spacing:.04em; line-height:1.7;
}
.tier.t-a{background:var(--cinnabar-bg); color:var(--cinnabar)}
.tier.t-b{background:color-mix(in srgb,#3d5580 13%,transparent); color:#3d5580}
.tier.t-c{background:var(--paper-3); color:var(--ink-3)}
.tier.t-d{background:transparent; color:var(--ink-4); border:1px dashed var(--line-strong)}

/* 分期说明 */
.dp-note{margin-top:30px; scroll-margin-top:78px}
.dp-note h3{margin:0 0 10px; font-size:15px}
.dp-note p{margin:0 0 8px; font-size:13.5px; line-height:1.9; color:var(--ink-2)}
.dp-note p b{color:var(--cinnabar); margin-right:6px}

/* 朝内时间线：默认只看 A 级，可切 B / 全部 */
.tl-tier{margin-bottom:14px}
#tl-list[data-mode="A"] li[data-tier="B"],
#tl-list[data-mode="A"] li[data-tier="C"],
#tl-list[data-mode="A"] li[data-tier="D"]{display:none}
#tl-list[data-mode="AB"] li[data-tier="C"],
#tl-list[data-mode="AB"] li[data-tier="D"]{display:none}
#tl-list .tl-date{display:flex; align-items:center; gap:8px}

.dp-forms{margin-top:30px}

@media (max-width:720px){
  .dp-matrix{min-width:600px}
  .dp-period .card.pad-l{overflow-x:auto}
}

/* ---------- 6. 打印：隐藏导航层 ---------- */
@media print{
  .nav, .nav-sub.open{display:none !important}
}