/* v3.9.4：手机端「顶部导航」与「分类筛选标签」改为等宽网格，解决参差不齐 */

/* ========== 一、顶部导航：3 列网格 ========== */
@media (max-width: 768px) {
  .top-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    align-items: stretch;
    justify-content: stretch;
    margin: 8px 0 6px;
    padding: 0;
    width: 100%;
  }
  /* 顶层 11 项：首页 / 计算工具 / 7 个下拉 / 全网搜索 / 全站导航，每项等宽 */
  .top-nav > a,
  .top-nav > .nav-dd { width: 100%; min-width: 0; margin: 0; }
  .top-nav > .nav-dd { display: flex; }

  .top-nav > a,
  .top-nav > .nav-dd > .nav-dd-toggle {
    display: flex;
    align-items: center;
    justify-content: flex-start;   /* 左对齐：三列文字起点连成竖线 */
    gap: 0;
    padding: 11px 22px 11px 14px;  /* 右侧留出箭头位 */
    font-size: 13.6px;
    font-weight: 500;
    line-height: 1.25;
    border-radius: 9px;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
    position: relative;
  }
  /* 箭头固定在格子右边缘，不参与文字排版，避免带箭头的项文字偏移 */
  .top-nav > .nav-dd > .nav-dd-toggle .nav-dd-caret {
    position: absolute;
    right: 9px; top: 50%;
    transform: translateY(-50%);
    margin: 0;
    font-size: 9px;
  }
  /* 当前栏目只加底色与下划线，字号字重与其他项一致（原来加粗会显得大小不齐） */
  .top-nav a.active { font-weight: 600; }

  /* 4 字以内不折行；万一超长（如「企业破产法律分析」）允许折成两行而不撑破格子 */
  .top-nav > a,
  .top-nav > .nav-dd > .nav-dd-toggle { white-space: normal; word-break: keep-all; }

  /* 当前栏目下划线：网格内改为定宽，贴在格子左侧文字下方 */
  .top-nav a.active::after {
    left: 14px; right: auto; width: 22px;
    transform: none; bottom: 5px;
  }

  /* 金色「全站导航」保持高亮，但在网格内与其他项同宽 */
  .top-nav a.nav-sitemap {
    grid-column: span 2;   /* 末行：全网搜索 1 格 + 全站导航 2 格 = 满行，更整齐 */
    display: flex; align-items: center; justify-content: center;
    gap: 4px; padding: 10px 2px; font-size: 13px;
    width: 100%; min-width: 0; max-width: none;
    box-sizing: border-box;
  }
  .top-nav .nav-dd-caret { font-size: 9px; margin-left: 1px; }
}

/* 更窄的机器（≤360px）：字号再收一档，避免「辅助法律分析」类长词挤成三行 */
@media (max-width: 360px) {
  .top-nav > a,
  .top-nav > .nav-dd > .nav-dd-toggle { font-size: 12.2px; padding: 9px 2px; }
}

/* ========== 二、分类筛选标签：等宽网格 + 文字左、数字右 ========== */
.home-quickfind-tabs,
.tools-cat-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 7px;
  align-items: stretch;
}
.tools-cat-tab {
  display: flex;
  align-items: center;
  justify-content: space-between;   /* 名称靠左、数量靠右，纵向对齐 */
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
  min-height: 38px;
  padding: 7px 12px;
  border-radius: 10px;
  white-space: normal;
  line-height: 1.3;
  text-align: left;
}
.tools-cat-tab .cat-tab-count { flex: none; }
/* 激活态不需要位移动画，避免网格内抖动 */
.tools-cat-tab:hover { transform: none; }

@media (max-width: 768px) {
  .home-quickfind-tabs,
  .tools-cat-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .tools-cat-tab { min-height: 40px; padding: 8px 10px; font-size: 12.8px; }
  .tools-cat-tab .cat-tab-count { font-size: 10.5px; padding: 1px 7px; }
}
@media (max-width: 360px) {
  .tools-cat-tab { font-size: 12.2px; padding: 8px; }
}

/* ========== 二·补、办公应用「分组标题」窄屏换行（v2.55.x） ==========
   .cat-block h3 是 display:flex，组名 / 计数 / <small> 组说明挤在同一行，
   375px 下「PDF 处理」会被压成竖排三行、说明与计数错位。
   窄屏改为：组名+计数一行，说明独占下一行。桌面端规则不变。 */
@media (max-width: 768px) {
  .cat-block h3 { flex-wrap: wrap; align-items: baseline; row-gap: 2px; }
  .cat-block h3 small { flex: 1 1 100%; }
}

/* ========== 三、其他板块的筛选条 / 标签条（v3.9.5） ==========
   扫描发现的参差容器：start 五维筛选、案例库来源筛选、援引统计筛选、导图筛选、全站导航。
   统一改为等宽网格，避免"宽度随文字长短变化 + 居中换行"造成的犬牙交错。 */
@media (max-width: 768px) {
  /* ① 场景导航 · 五维筛选（内联 flex，需 !important 覆盖） */
  #fRole, #fCat, #fEvt, #fInd, #fOcc {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }
  #fRole > .chip, #fCat > .chip, #fEvt > .chip, #fInd > .chip, #fOcc > .chip {
    width: 100%;
    box-sizing: border-box;
    padding: 7px 4px;
    border-radius: 8px;
    font-size: 12.3px;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ② 案例库 · 来源筛选 */
  .fchips {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
  .fchips > * { width: 100%; box-sizing: border-box; text-align: center; }

  /* ③ 援引统计 · 筛选条 */
  .filters {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    align-items: stretch;
  }
  .filters > * { width: 100%; box-sizing: border-box; }

  /* ④ 思维导图 · 筛选条（18 项，3 列） */
  .tp-filter {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  .tp-filter > * { width: 100%; box-sizing: border-box; text-align: center; }

  /* ⑤ 全站导航 · 分类列表 */
  .sn-nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
  .sn-nav > * { width: 100%; box-sizing: border-box; }
}

@media (max-width: 360px) {
  #fRole > .chip, #fCat > .chip, #fEvt > .chip, #fInd > .chip, #fOcc > .chip { font-size: 11.8px; }
  .tp-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ========== 四、页眉三块（汉堡 / 品牌 / 时钟）单行对齐（v3.9.6） ==========
   问题：.brand 是 flex:none、.header-right 固定 205px，390px 宽下三者总宽超视口 →
   时钟被挤到第二行并居中，形成"汉堡在上、品牌右上、时钟中间"的错落。
   改法：三者同一行、垂直居中；品牌可收缩（名称省略号），时钟按内容宽右对齐。 */
@media (max-width: 768px) {
  .app-header {
    align-items: center;
    column-gap: 8px;
    row-gap: 6px;
    padding: 8px 12px;
  }
  .drawer-toggle { order: 1; flex: 0 0 auto; margin: 0; align-self: center; }
  .brand {
    order: 2;
    flex: 1 1 auto;
    min-width: 0;          /* 允许收缩，否则把时钟挤到下一行 */
    gap: 8px;
    align-items: center;
  }
  .brand .logo { width: 32px; height: 32px; font-size: 18px; border-radius: 9px; }
  .firm-name {
    font-size: 13.5px; letter-spacing: .3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .app-name { font-size: 10.5px; letter-spacing: .3px; margin-top: 1px; }
  .header-right { order: 3; flex: 0 0 auto; }
  #headerClock { text-align: right; }
  .header-clock-date { font-size: 9.5px; line-height: 1.35; white-space: nowrap; color: rgba(255,255,255,.74); }
  .header-clock-time { font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: .5px; white-space: nowrap; }
  .top-nav { order: 4; flex: 1 1 100%; }
}
@media (max-width: 360px) {
  .firm-name { font-size: 12.6px; letter-spacing: 0; }
  .header-clock-date { font-size: 9px; }
  .header-clock-time { font-size: 14px; }
}

/* ========== 五、首页四宫格数据卡可点击（v3.9.7） ==========
   82 计算工具 / 27 法律分析 / 2375 法规 / 5475 案例，点击直达对应板块。 */
.hero-kpis a.kpi {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  border-radius: 10px;
  transition: background .16s, transform .16s, box-shadow .16s;
}
.hero-kpis a.kpi:hover {
  background: rgba(255,255,255,.085);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,.16);
}
.hero-kpis a.kpi:active { transform: translateY(0); }
.hero-kpis a.kpi:focus-visible { outline: 2px solid #c9a961; outline-offset: 2px; }
/* 右侧小箭头，提示"可进入" */
.hero-kpis a.kpi span::after {
  content: ' ›';
  font-size: 10px;
  opacity: .45;
  margin-left: 1px;
}

/* ========== 六、从搜索结果跳转到模块内具体条目的高亮（v4.0.2） ========== */
.hs-jump-hit {
  background: #fdf6ec !important;
  box-shadow: inset 0 0 0 2px #c9a961;
  border-radius: 8px;
  animation: hs-jump-flash 3s ease-out 1;
}
@keyframes hs-jump-flash {
  0%   { background: #f6e7c6; }
  100% { background: #fdf6ec; }
}
@media (prefers-reduced-motion: reduce) {
  .hs-jump-hit { animation: none; }
}