/* =============================================================================
   サイト共通ヘッダー
   /status/（Next.js: alert/web/components/SiteNav.tsx）の見た目をそのまま写したもの。
   値は Tailwind の slate 系（#e2e8f0 = slate-200, #64748b = slate-500 …）。
   片方を変えたら、もう片方も同じ値にすること。
   使う場所: index.html（比較ツール）, themes/**（tools/build_seo.py が生成）
   ============================================================================= */
/* 縦スクロールバーの有無でページ幅が変わると、中央寄せのヘッダーが左右にずれる
   （比較ツールはスクロールしない／検証テーマと /status/ はスクロールする）。
   常にスクロールバー分の余白を確保して、どのページでも同じ位置に出す */
html { scrollbar-gutter: stable; }
/* スクロールバーの幅もページ間で揃える（既定幅はズーム倍率で変わり、/status/ 側は 10px 固定なので
   ここで全ページ 10px にしないと中央寄せの位置が 1〜2px ずれる）。値は alert/web/app/globals.css と同じ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

.site-head { background: #fff; border-bottom: 1px solid #e2e8f0; line-height: 1.5; }

/* max-w-7xl mx-auto flex flex-wrap items-center gap-x-4 gap-y-1 px-4 py-2 sm:px-6 lg:px-8 */
.site-bar {
  max-width: 80rem; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center;
  column-gap: 16px; row-gap: 4px;
  padding: 8px 16px;
}
@media (min-width: 640px)  { .site-bar { padding-left: 24px; padding-right: 24px; } }
@media (min-width: 1024px) { .site-bar { padding-left: 32px; padding-right: 32px; } }

/* ブランド: wordmark 24px ＋ 和名キャプション。タブと見分けがつくように
   ①キャプションは小さく薄く（11px/500 slate-400）②右に仕切り線を置いてタブ群と切る */
.site-brand {
  display: flex; align-items: center; gap: 8px; text-decoration: none;
  padding-right: 14px; margin-right: 2px; border-right: 1px solid #e2e8f0;
}
.site-brand img { height: 24px; width: auto; display: block; }
.site-brand-ja { font-size: 11px; font-weight: 500; color: #94a3b8; letter-spacing: .02em; line-height: 1; padding-top: 3px; white-space: nowrap; }
.site-brand:hover .site-brand-ja { color: #64748b; }

/* タブ: 13px/600 slate-500、下線2px、選択中は slate-900 + #2f5fd6 */
.site-tabs { display: flex; gap: 2px; }
.site-tabs .tab {
  display: inline-block; background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 6px 10px; font: inherit; font-size: 13px; font-weight: 600; color: #64748b;
  cursor: pointer; text-decoration: none; transition: color .15s;
}
.site-tabs .tab:hover { color: #0f172a; }
.site-tabs .tab.on { color: #0f172a; border-bottom-color: #2f5fd6; }

/* 比較ツールの操作列（index.html のみ）。バーと同じ幅・余白でその下に並べる */
.site-tools {
  max-width: 80rem; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 16px; padding: 0 16px 10px;
}
@media (min-width: 640px)  { .site-tools { padding-left: 24px; padding-right: 24px; } }
@media (min-width: 1024px) { .site-tools { padding-left: 32px; padding-right: 32px; } }
.site-tools .sub { color: #64748b; font-size: 12px; }
/* テーマ名が長いので select が伸びすぎないように。ボタン列を同じ行に収める */
.site-tools select { max-width: 420px; }
/* 検証テーマ表示では比較ツールの操作列を出さない（app.js が body に印を付ける） */
body.view-themes .site-tools { display: none; }

/* 白地＋薄いグリッド（/status/ の .grid-bg と同じ値）。index.html と themes/ の body に付ける */
body.site-grid {
  background-color: #fff;
  background-image:
    linear-gradient(rgba(15, 23, 42, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.035) 1px, transparent 1px);
  background-size: 56px 56px;
}

/* /status/ はライトのみだが、親サイトにはダークモードがあるので白い帯が浮かないように */
@media (prefers-color-scheme: dark) {
  body.site-grid {
    background-color: #0b1220;
    background-image:
      linear-gradient(rgba(148, 163, 184, 0.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(148, 163, 184, 0.06) 1px, transparent 1px);
  }
  .site-head { background: #0f172a; border-bottom-color: #1e293b; }
  .site-brand span { color: #e2e8f0; }
  .site-tabs .tab { color: #94a3b8; }
  .site-tabs .tab:hover, .site-tabs .tab.on { color: #f8fafc; }
  .site-tabs .tab.on { border-bottom-color: #7ea1ff; }
  .site-tools .sub { color: #94a3b8; }
}