/*
  管理: 課金・使用量（/admin/billing）ページ専用の「インデックス（目次）」チップバー。
  ------------------------------------------------------------------
  - 縦に長い管理ダッシュボード（KPI／運用ヘルス／収容／ユーザー明細／運用設定／価格／APIキー）へ
    ページ先頭から即ジャンプできるネイティブアンカー目次。JS 不要＝CSP 厳格（script/style-src に
    unsafe-inline 不在）と完全両立。
  - 配色・余白・角丸・タップ領域はすべて既存デザイントークン（var(--c-*) / var(--sp-*) / var(--tap-min)）
    参照。tokens.css は light-dark() でライト/ダーク自動追従するため本ファイルにテーマ分岐は不要。
    生 hex は var() のフォールバック位置にのみ置く（トークン欠落時の保険・§2D 準拠）。
  - app.css は別エージェント編集中のため一切触らず、本ファイルに隔離する（クラスは vg-admin-toc 名前空間）。
*/

/* 目次バー本体。既定は非 sticky（ページ先頭に一度だけ）＝既存挙動へ波及なし。
   トップへの復帰は base.html の #vg-to-top FAB が担うため、ここでは追加しない（過剰化回避）。 */
.vg-admin-toc {
  margin: var(--sp-3, 12px) 0 var(--sp-4, 16px);
}

.vg-admin-toc__label {
  display: block;
  margin: 0 0 var(--sp-1, 4px);
  font-size: var(--fs-sm, 0.875rem);
  font-weight: 600;
  color: var(--c-text-muted, #515a66);
}

/* チップは横一列・折り返さず、狭幅では横スクロール（モバイルで使いやすい）。
   縦のはみ出しは出さない（overscroll-behavior-x: contain でページの横スクロール連鎖を断つ）。 */
.vg-admin-toc__list {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--sp-2, 8px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--sp-1, 4px);
  scrollbar-width: thin;
}

/* 各項目＝丸ピル型のアンカー。タップ領域 44px 以上（--tap-min）。 */
.vg-admin-toc__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1, 4px);
  flex: 0 0 auto;
  min-height: var(--tap-min, 44px);
  padding: 0 var(--sp-3, 12px);
  border: 1px solid var(--c-border, #d3d9e0);
  border-radius: var(--radius-pill, 999px);
  background: var(--c-surface, #ffffff);
  color: var(--c-text, #14181f);
  font-size: var(--fs-sm, 0.875rem);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.vg-admin-toc__chip:hover {
  background: var(--c-surface-2, #eef1f5);
  border-color: var(--c-accent, #1b5fa8);
  color: var(--c-accent-text, #1b5fa8);
}

.vg-admin-toc__chip:focus-visible {
  outline: 2px solid var(--c-accent, #1b5fa8);
  outline-offset: 2px;
}

.vg-admin-toc__chip-ico {
  display: inline-flex;
  align-items: center;
}

/* 固定（sticky）ヘッダにアンカー先が潜り込まないよう、各セクションに十分な scroll-margin-top を確保。
   .vg-header は position:sticky; top:0（app.css）で高さ --header-h。KPI/収容は既存の安定 id を、
   その他は本改修で付与した sec-* id を対象にする（純追加・既存セレクタ温存）。 */
#admin-kpi,
#sec-ops-health,
#admin-capacity-mount,
#sec-users,
#sec-settings,
#sec-pricing,
#sec-keys {
  scroll-margin-top: calc(var(--header-h, 56px) + var(--sp-4, 16px));
}

/* スムーズスクロールは本ページ（目次を持つ文書）に限定して有効化＝他ページの既存挙動に波及させない。
   :has() で admin-toc を含む html のみへ適用し、視差過敏設定（reduced-motion）では無効化。 */
@media (prefers-reduced-motion: no-preference) {
  html:has(.vg-admin-toc) {
    scroll-behavior: smooth;
  }
}