/* 全域鍵盤焦點樣式 —— 由 nav.js / game-shell.js / dock.js 三個入口注入,
   拆掉任何一個入口都不會漏(與 sw-update.js 同樣的做法)。

   為什麼需要:改之前全站只有 4 個檔案寫過 :focus-visible,其餘頁面用鍵盤 Tab
   時完全看不到焦點在哪。那是 WCAG 2.4.7 的基本要求。

   用 :focus-visible 而不是 :focus —— 滑鼠點擊不會留下外框,只有鍵盤操作才顯示。
   outline 用 offset 撐開,才不會被元素自己的 border 或圓角吃掉。 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #f7d96a;
  outline-offset: 2px;
  border-radius: inherit;
}
/* 深色卡片上的金色外框有時仍不夠分明,補一圈暗色讓它從任何底色上都跳出來 */
a:focus-visible,
button:focus-visible {
  box-shadow: 0 0 0 4px rgba(4, 12, 18, .85);
}

/* ── 子分頁的觸控下限 ──────────────────────────────────────────────
   全站有九組子分頁,每頁各寫一份,實測高度從 20px 到 52px 都有。
   codex/tracker/journal 三組已達 44px;這裡把其餘五組補到同一個下限。

   只補下限與垂直置中(WCAG 2.5.5 的 44px),各自的配色、圓角、版面一律
   不動 —— 目的是止住漂移,不是重新設計。

   例外 .mission-tabs:它在宗門地圖上 176px 寬的任務卡裡只有 25px,
   強壓 44px 會把那張卡撐爆。25px 已過 WCAG 2.5.8(AA 的 24px 下限)。 */
.tl-tabs .tl-tab,
.me-subtabs .mst,
.pg-tabs .pg-tab,
.bd-tabs .bd-tab,
.record-tabs button {
  box-sizing: border-box;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
/* 上面把 display 換成 flex 之後,「計畫單 <b>0</b>」中間那個空白文字節點
   會被 flexbox 收掉,改由 gap 提供間距。b 自帶的 margin-left 再疊上去會變
   7px,歸零讓 gap 單獨負責。 */
.record-tabs button > b { margin-left: 0; }

/* .me-subtabs 在 ≤560px 有自己的 flex:1 等分規則:兩個分頁各 144px,
   扣掉 padding 只剩 126px,而「📊 Ourbit 分享單結果」需要 128px,
   於是折成兩行(第二行只剩一個「果」)。144px 是側邊 rail 釘住時的寬度,
   也就是登入後的常態。
   放寬 2px 只是把問題推到下一個更窄的裝置,改用 .codex-tabs /
   .tracker-tabs 已經在用的作法:不折行、寬度依內容,放不下就整條橫向捲動。 */
.me-subtabs { overflow-x: auto; scrollbar-width: none; }
.me-subtabs::-webkit-scrollbar { display: none; }
.me-subtabs .mst { white-space: nowrap; flex: 1 0 auto; }