/* ============================================================
   Tabs — タブ（画面内の表示切替）
   Tab Bar（アプリ最上位ナビ）や Segmented（モード切替）とは別物。
   ビュー内のパネルを切り替える。選択は署名色の下罫（選択の核）＋太字で示し、
   下罫は滑って追従する。矢印キーで移動。配線は js/catalog.js。
   ============================================================ */

.tabs { max-width: 380px; }
.tablist { display: flex; gap: 2px; border-bottom: 1px solid var(--line); position: relative; }
.tablist button {
  padding: 11px 14px; font-size: 14px; color: var(--ash);
  min-height: var(--tap-min); position: relative;
  transition: color var(--dur-fast) var(--ease);
}
.tablist button[aria-selected="true"] { color: var(--ink); font-weight: 700; }

/* 滑る下罫＝選択の核（署名色） */
.tab-ink {
  position: absolute; bottom: -1px; left: 0; width: 0; height: 2px;
  background: var(--brand);
  transition: left var(--dur-mid) var(--ease), width var(--dur-mid) var(--ease);
}

.tabpanel { padding: 16px 2px 4px; font-size: 14px; color: var(--ink); line-height: 1.9; max-width: 44em; }
.tabpanel[hidden] { display: none; }