/* viewer/lib/nav-tabs.css
   全ページ共通のヘッダーナビ (.nav-tabs)。7 ページに値ごとコピペされていたものを一元化。
   色は theme.css の CSS 変数のみ参照 (light/dark は変数側で自動切替、per-page の
   [data-theme=light] 上書きは不要)。レイアウトは各ページ実装の最良版に正規化:
   - flex-shrink:0 … PC でタブ列が隣要素に押し潰されない (holdings の summary-pill fix 由来)
   - white-space:nowrap … タブ文言の折返し防止
   - モバイルは横スクロール化 + 略称 (.tab-short) 表示 + アーキタブ (.tab-arch) 非表示
   読み込みは theme.css の後に <link rel="stylesheet" href="/lib/nav-tabs.css">。 */

.nav-tabs { display: flex; gap: 4px; margin-left: auto; flex-shrink: 0; }
.nav-tabs a {
  color: var(--text-3);
  text-decoration: none;
  padding: 6px 14px;
  font-size: 0.78rem;
  border-radius: 16px;
  transition: all 0.15s;
  white-space: nowrap;
}
.nav-tabs a:hover { background: var(--hover); color: var(--text-1); }
.nav-tabs a.active { background: var(--text-1); color: var(--bg-page); font-weight: 600; }

/* モバイル: タブ列を横スクロール化し、略称を出してアーキタブは隠す */
@media (max-width: 768px) {
  .nav-tabs {
    gap: 2px;
    margin-left: auto;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    min-width: 0;
    flex-shrink: 1;               /* PC の flex-shrink:0 を上書きしてスクロール領域を確保 */
    -webkit-overflow-scrolling: touch;
  }
  .nav-tabs::-webkit-scrollbar { display: none; }
  .nav-tabs a { padding: 4px 10px; font-size: 0.7rem; border-radius: 14px; white-space: nowrap; flex-shrink: 0; }
  .nav-tabs .tab-full { display: none; }
  .nav-tabs .tab-short { display: inline; }
  .nav-tabs .tab-arch { display: none; }
}
@media (max-width: 380px) {
  .nav-tabs a { padding: 4px 8px; font-size: 0.66rem; }
}