/* =====================================================================
   全部功能页（#sub-allfuncs）：列表 → 「图标 + 名字」的多列网格
   2026-09-27 · 开发员12号
   ---------------------------------------------------------------------
   用户反馈（截图）：「这全部功能里面都是啥玩意，排列乱七八糟，那么多小字干啥，
                      就名字和图标就行了，可以多分几列呀」

   要做两件事：
     ① 排列乱七八糟 → 是 index.html 里两行**标签错位**（法务顾问少一个 </div>、
        思维导图多一个），把 af-go 挤到 item 外面，整行布局塌成竖排单字。
        已在那两行修好（板块内 <div>/</div> 现在 334/334 平）。
     ② 小字太多 → 这里隐藏 .af-desc（每条的长描述）与右箭头 .af-go，
        并把每个分组的 .af-list 从「竖列表」改成 4 列网格。

   🔴 为什么单独一个 css：项目铁律「改别人的样式别动 style.css」→ 新建独立文件、
      排在 style.css 之后加载（见 index.html 的 <link> 顺序）。
   🔴 类名沿用页面既有的 .af-*，但选择器全部挂在 #sub-allfuncs 下 —— 只影响这一页。
   ===================================================================== */

/* 每个分组的列表：从"白卡竖排"改成 4 列网格（每组一个 .af-list，共 6 组） */
#sub-allfuncs .af-list {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  padding: 0;
}

/* 每一项：图标在上、名字在下，居中 */
#sub-allfuncs .af-item {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  gap: 7px;
  padding: 13px 4px 11px;
  background: var(--card, #fff);
  border-radius: 14px;
  border-bottom: none;                 /* 覆盖 style.css 的行分隔线 */
  box-shadow: 0 2px 8px rgba(249, 89, 1, 0.06);
  min-width: 0;
}
#sub-allfuncs .af-item:active { background: #fff1e7; }

#sub-allfuncs .af-ico {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 13px;
  font-size: 20px;
}

/* 名称区：占满整格、居中，允许换行但别撑破 */
#sub-allfuncs .af-main { flex: 0 0 auto; width: 100%; min-width: 0; }
#sub-allfuncs .af-name {
  justify-content: center;
  font-size: 12.5px;
  line-height: 1.28;
  gap: 4px;
  word-break: break-word;
}

/* —— 用户要的「只留名字和图标」—— */
#sub-allfuncs .af-desc { display: none; }        /* 每条的长描述 */
#sub-allfuncs .af-go { display: none; }          /* 右侧箭头（网格里不需要） */
#sub-allfuncs .af-badge.on { display: none; }    /* 「已上线」不显示；未上线的其它状态仍保留 */

/* 窄屏（小屏手机）降到 3 列，避免名字被挤成竖排 */
@media (max-width: 360px) {
  #sub-allfuncs .af-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}