/* 導覽列「小工具」選單（老闆 10/17）：桌機滑過／點開是下拉目錄，手機在漢堡選單裡展開。
 HTML 由 tools/build-tools-menu.ts 寫進每一頁（資料來自 enscon.ai/tools/menu.json＋sitemap），JS 在 tools-menu.js。
 「小工具」本身是 <a class="nav-tools-btn">，字型、間距吃各頁的 .nav-links a（16 份導覽 CSS 不一樣，這裡不重設）。
 各頁斷點不同（768／860），所以手機模式不靠斷點：tools-menu.js 看漢堡鈕有沒有顯示，在 <html> 加 tm-m。 */
.hs-nav .nav-links li.nav-tools { position: static; }
.nav-tools-btn { display: inline-flex !important; align-items: center; gap: .35em; }
.tm-caret {
  display: inline-block; width: .4em; height: .4em; margin-top: -.25em; flex: none;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform .18s ease;
}
.nav-tools.is-open .tm-caret { transform: rotate(-135deg); margin-top: .2em; }

/* 桌機：浮在導覽列下方的白卡，一組一欄（三或四組，tm-n3／tm-n4）；組合包＋「全部小工具」在最下面一列（Atlas 10/19 選 A） */
.nav-tools-panel {
  display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  width: min(940px, calc(100vw - 32px)); box-sizing: border-box;
  padding: 18px 26px 14px; background: #fff; color: #1d2733; text-align: left;
  border: 1px solid #dfe4ea; border-radius: 14px; box-shadow: 0 18px 48px rgba(16, 32, 56, .16);
  z-index: 1000; font-weight: 400; letter-spacing: normal; text-transform: none;
  max-height: calc(100vh - 84px); overflow-y: auto; overscroll-behavior: contain;   /* 每個工具多一行說明後約 660px 高：矮螢幕（1366×768 扣掉瀏覽器列）自己捲，最下面「全部小工具」才點得到 */
}
.nav-tools.is-open > .nav-tools-panel { display: block; }
.tm-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 26px; }
.tm-cols.tm-n4 { grid-template-columns: repeat(4, 1fr); gap: 6px 20px; }
.tm-h { margin: 0 0 8px; font-size: 14px; font-weight: 700; letter-spacing: .06em; color: #02539C; }
.nav-tools-panel ul { list-style: none; margin: 0; padding: 0; display: block !important; position: static !important; background: none !important; box-shadow: none !important; border: 0 !important; max-height: none !important; }
.nav-tools-panel li { margin: 0 !important; padding: 0 !important; border: 0 !important; display: block !important; }
.nav-tools-panel a {
  display: block !important; padding: 4px 8px !important; margin: 0 -8px !important; border-radius: 8px;   /* 上下 4px：說明字拉到 14px、四組時欄變窄多折行，1280×768 才放得下（Atlas 10/19） */ border: 0 !important;
  font-size: 14.5px !important; line-height: 1.4 !important; font-weight: 500 !important; color: #1d2733 !important;
  text-decoration: none !important; white-space: normal; background: none; letter-spacing: normal !important;
}
.nav-tools-panel a::before, .nav-tools-panel a::after { content: none !important; }
.nav-tools-panel a:hover, .nav-tools-panel a:focus-visible { background: #eef4fa; color: #02539C !important; outline: none; }
.nav-tools-panel .tm-n { display: block; }
/* 工具名下面那一句（丟什麼進來、拿到什麼；UILESS，10/18） */
.nav-tools-panel .tm-d { display: block; margin-top: 1px; font-size: 14px; line-height: 1.4; font-weight: 400; color: #5b6878; }
.nav-tools-panel a:hover .tm-d, .nav-tools-panel a:focus-visible .tm-d { color: #3d5a7a; }
/* 最下面一列：組合包（橫排）＋「全部小工具」靠右 */
.tm-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #e6eaef; }
.tm-foot .tm-h { margin: 0 4px 0 0; }
.nav-tools-panel .tm-foot ul.tm-bl { display: flex !important; flex-wrap: wrap; gap: 0 14px; flex: 1 1 auto; }
.nav-tools-panel .tm-foot a { padding: 6px 8px !important; }
.nav-tools-panel a.tm-all { display: inline-block !important; margin: 0 -8px 0 auto !important; font-weight: 700 !important; color: #02539C !important; }

/* 手機（漢堡選單打開時，在清單裡展開成一段） */
/* 漢堡選單掛在 fixed／sticky 的導覽列下面、本來沒有高度上限：小工具一展開就超出螢幕、下面的項目點不到（10/17 實測首頁最後一項在 y=1199、螢幕 664）。
   打開時限高到螢幕底、自己捲；有的頁面這個清單是置中的 flex，內容比螢幕高時上半截會超出頂端、捲不到（同日實測第一項在 -492px），所以改靠上 */
html.tm-m .hs-nav .nav-links.open { justify-content: flex-start !important; align-content: flex-start !important; max-height: calc(100vh - 72px); max-height: calc(100dvh - 72px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
html.tm-m .hs-nav .nav-links li.nav-tools { position: relative; }
html.tm-m .nav-tools-btn { width: 100%; justify-content: space-between; }
html.tm-m .nav-tools-panel {
  position: static; transform: none; width: auto; padding: 2px 0 10px 14px; margin: 0 0 4px;
  background: transparent; color: inherit; border: 0; border-left: 2px solid currentColor; border-radius: 0; box-shadow: none;
  max-height: none; overflow: visible;   /* 手機由外層漢堡清單捲，不要捲中捲 */
}
html.tm-m .tm-cols { display: block; }
html.tm-m .tm-col { margin: 10px 0 2px; }
html.tm-m .tm-foot { display: block; margin-top: 10px; padding-top: 0; border-top: 0; }
html.tm-m .tm-foot .tm-h { margin: 0 0 2px; }
html.tm-m .nav-tools-panel .tm-foot ul.tm-bl { display: block !important; }
html.tm-m .tm-h { color: inherit; opacity: .65; font-size: 14px; margin-bottom: 2px; }
html.tm-m .nav-tools-panel a { color: inherit !important; font-size: 15.5px !important; padding: 8px 0 !important; margin: 0 !important; }
html.tm-m .nav-tools-panel a:hover, html.tm-m .nav-tools-panel a:focus-visible { background: none; text-decoration: underline !important; }
html.tm-m .nav-tools-panel .tm-d { color: inherit; opacity: .72; font-size: 14px; }
html.tm-m .nav-tools-panel a.tm-all { margin: 8px 0 0 !important; }
@media (prefers-reduced-motion: reduce) { .tm-caret { transition: none; } }