/* リンク数が増えると狭い画面でページ全体が横スクロールしてしまうため、
   ナビ自身をスクロールさせて幅に収める（スクロールバーは隠す）。 */
.trainer-nav {
  display: flex; gap: 4px; background: rgba(120,120,128,0.12);
  border-radius: var(--radius-sm); padding: 2px;
  /* flex-basis:0 と min-width:0 の併用で、リンクの合計幅ではなく
     利用可能な残り幅にナビを収める（収まらない分はナビ内でスクロール） */
  overflow-x: auto; min-width: 0; flex: 1 1 0;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.trainer-nav::-webkit-scrollbar { display: none; }
.trainer-nav a { flex: 0 0 auto; }
.trainer-nav a {
  font-family: var(--font); font-size: 13px; font-weight: 500; color: var(--label-secondary);
  text-decoration: none; padding: 6px 14px; border-radius: 6px; white-space: nowrap;
}
.trainer-nav a.active { background: var(--bg-elevated); color: var(--label); box-shadow: var(--shadow-card); font-weight: 600; }