/*
 * jra-index-report.css — JRA（中央競馬）各場ページ（[jra_index_view keibajo date]・CPT jra_race 本文）の見た目。
 *   NAR型2階層の第2層（各場フル）。JSエンジン window.JraIndexReport が #jra-index-report-container 配下へ
 *   Rストリップ＋リッチ詳細（タブ/サマリ/マトリクス/追切/コース解説/Chart.js/波乱度/v2-v1トグル）を描画する。
 * 設計: C:/Temp/wf_twotier/plan.md §3.1/§3.3。
 *
 * 移植元（接頭辞 jra-gateway- → jra-index- へリネーム・スコープ .jra-index-gateway-container →
 *   .jra-index-container）:
 *   frontend/jra-gateway.css（窓口統合スタイル）の「詳細UIスタイル」一式。
 *
 * 方針（窓口と同一の中央分離規律）:
 *   - !important 実宣言は 0（特異度で勝つ＝コンテナクラス .jra-index-container で前置）。
 *   - 全セレクタ jra-index- 接頭辞・CSS変数は --jra-。短い修飾子（jra-active / jra-rank-* / jra-low-odds /
 *     jra-tansho-level-* / jra-sanrenp-level-* / jra-index-mode-* / jra-show-hint / jra-inactive）は JS が付与。
 *   - 中央/NAR/窓口資産（dual-index-／ability-／nar-／jra-gateway- 等）を一切参照しない（構造分離）。
 *   - JS-UI（#jra-index-rstrip-host / #jra-index-race-host 配下の描画）は既定で表示され、no-JS 時は
 *     .jra-index-fallback（サーバレンダ表）を表示。成功時は .jra-js-ready で .jra-index-fallback を隠す。
 *   - 単一インスタンス前提（固定 id は container/rstrip-host/race-host/data/fallback）。
 */

.jra-index-container {
  /* 上部クロム（JRA基調＝青系）パレット */
  --jra-blue: #1d4e89;           /* ブランド濃青（選択R）＝assets/race.png の紺 #002b64 と同系 */
  --jra-ink: #1f2227;            /* 主テキスト（濃墨） */
  --jra-muted: #626872;          /* 副次テキスト */
  --jra-muted-2: #8796aa;
  --jra-faint: #97a5bb;
  --jra-rule-soft: #ced8ea;
  --jra-rpill-future-bg: #f9fbfe;
  --jra-rpill-future-fg: #34383f;
  --jra-rpill-future-bd: #c6d0e1;
  --jra-rpill-done-bg: #d9e2f1;
  --jra-rpill-done-fg: #8796aa;
  --jra-rnav-bg: #e2ebf9;
  --jra-rnav-fg: #616874;

  /* 下部コンテンツ（中央準拠ブルー）パレット */
  --jra-fg: #333333;
  --jra-fg-muted: #6b7280;
  --jra-brand: #005ab3;          /* 中央ブランド青 */
  --jra-grid: #dddddd;           /* 表の罫線 */
  --jra-border-soft: #dee2e6;
  --jra-th-bg: #f2f2f2;          /* データ表ヘッダ（中央 灰） */
  --jra-tab-bg: #f5f5f5;
  --jra-tab-hover: #e9e9e9;
  --jra-tab-active-bg: #e3f2fd;
  --jra-zebra: #f9f9f9;
  --jra-selector-bg: #f8f9fa;
  --jra-rank1-bg: #ffe6e6;
  --jra-rank2-bg: #fff3e0;
  --jra-rank3-bg: #e3f2fd;
  --jra-odds-low-fg: #c62828;

  /* サマリ表/マトリクス/追切（中央 dual_index_report 静的表示 配色）パレット */
  --jra-summary-th-bg: #1e3a8a;
  --jra-bar-track: #f3f4f6;
  --jra-rank-s: #ff8c00;
  --jra-rank-a: #ff9999;
  --jra-rank-b: #fbbf24;
  --jra-rank-c: #8494a4;
  --jra-rank-d: #999999;

  --jra-focus: #a35e00;          /* キーボードフォーカス輪郭（淡背景で3:1以上＝WCAG 1.4.11/2.4.11。青系移行後も琥珀のまま維持＝ブランド青と混同しない） */

  /* 基底 typography（コンテナで一括指定＝テーマ font-size/line-height に左右されない） */
  width: 100%;
  margin: 0; /* ★中央(.race-ability-report)に倣い max-width 制約なし＝テーマ本文幅を最大限利用（画面幅いっぱい・中央寄せ余白を出さない） */
  background: #ffffff;
  color: var(--jra-fg);
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Yu Gothic', 'Meiryo', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.jra-index-container *,
.jra-index-container *::before,
.jra-index-container *::after { box-sizing: border-box; }
.jra-index-container a { -webkit-tap-highlight-color: transparent; }

/* ============================================================
   1. Rストリップ（横スクロール帯・現在R中央化・青系ピル）
   ============================================================ */
.jra-index-rstrip-host { padding-top: 6px; }
.jra-index-rstrip-wrap { margin-bottom: 6px; }
.jra-index-rstrip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0 0; /* 左右0＝画面幅最大利用（中央デスクトップ余白0に整合）。モバイルは下のメディアクエリで端余白。 */
}
.jra-index-rnav {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 34px;
  border: 0;
  border-radius: 8px;
  background: var(--jra-rnav-bg);
  color: var(--jra-rnav-fg);
  font-family: 'Roboto Mono', monospace;
  font-weight: 400;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.jra-index-rnav[disabled] { opacity: 0.4; cursor: default; }
.jra-index-rpills {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.jra-index-rpills::-webkit-scrollbar { display: none; }
.jra-index-rpill {
  flex: 0 0 auto;
  min-width: 54px;
  scroll-snap-align: center;
  text-align: center;
  padding: 8px 12px;
  border-radius: 18px;
  font-family: 'Roboto Mono', monospace;
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  border: 1px solid var(--jra-rpill-future-bd);
  background: var(--jra-rpill-future-bg);
  color: var(--jra-rpill-future-fg);
  transition: background 0.15s ease, color 0.15s ease;
}
.jra-index-rpill.jra-index-rpill-current {
  background: var(--jra-blue);
  color: #ffffff;
  border-color: var(--jra-blue);
}
.jra-index-rpill.jra-index-rpill-done {
  background: var(--jra-rpill-done-bg);
  color: var(--jra-rpill-done-fg);
  border-color: var(--jra-rpill-done-bg);
}

/* キーボードフォーカスリング。 */
.jra-index-rpill:focus-visible,
.jra-index-rnav:focus-visible {
  outline: 2px solid var(--jra-focus);
  outline-offset: 2px;
}

/* ============================================================
   1a2. 中央競馬TOP（窓口）へ戻るボタン（NAR .nar-index-back-top と同型＝JRAは青系・2026-08-16）。
   ・各場CPT は日付変更手段が無いため窓口へ誘導（右揃え・他場切替タブの上・サーバレンダ）。
   ============================================================ */
.jra-index-back-top { text-align: right; margin: 0 0 18px; } /* 戻るボタン↔競馬場切替タブ の間隔（NAR同値） */
.jra-index-container a.jra-index-back-top-link,
.jra-index-container a.jra-index-back-top-link:link,
.jra-index-container a.jra-index-back-top-link:visited {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border: 1px solid var(--jra-blue);
  border-radius: 6px;
  background: #ffffff;
  color: var(--jra-blue);
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Meiryo', sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.jra-index-container a.jra-index-back-top-link:hover { background: var(--jra-blue); color: #ffffff; }
.jra-index-back-top-link:focus-visible { outline: 2px solid var(--jra-focus); outline-offset: 2px; }

/* ============================================================
   1a3. AdSense 広告（NAR .nar-index-ad と同型・2026-08-16 ユーザー指示）。
   ・①レース選択（Rストリップ）とレース名称の間／②コース解説の下（コンテナ末尾）の2箇所。
   ・区切りバー無し（NAR同判断）・min-height で CLS 抑制・実体は Google の <ins>。
   ============================================================ */
.jra-index-ad { margin: 20px 0; }
.jra-index-ad-label {
  font-family: 'Roboto Mono', monospace;
  font-size: 10px;
  letter-spacing: 2px;
  color: #999999;
  margin-bottom: 8px;
}
.jra-index-ad-slot { min-height: 80px; }

/* ============================================================
   1b. 他競馬場 切替UI（NAR同様の競馬場タブ＝JRAは青系・中央(JRA)/netkeiba 風）。
   ・各場CPT は単一場固定ゆえ、同日開催の全場へ横断する導線を上部にタブとして常時表示（サーバレンダ
     <a href>＝no-JS でも遷移可・.jra-js-ready 非依存）。R選択（.jra-index-rpill）とは別系統の
     class（.jra-index-venuetab＝場遷移の <a>/現在地 <span>）で役割を分離。
   ・current（現在地）＝白地＋青上線＋青太字（aria-current=page・非リンク）。他場＝淡色タブのリンク。
   ・場数が多い日はタブ帯を横スクロール（overflow-x）。JRA は同日最大3場ゆえ通常スクロールは発生しない。
   ============================================================ */
.jra-index-venue-switch { margin-bottom: 8px; } /* タブ帯とレース番号ストリップの間隔 */
.jra-index-venue-switch-tabs {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  min-width: 0;                      /* flex 子が内容幅未満に縮める＝overflow-x スクロールを有効化 */
  overflow-x: auto;                  /* 多数場は横スクロール（JRA は最大3場ゆえ通常は発生しない） */
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;             /* Firefox: スクロールバー非表示 */
  border-bottom: 2px solid var(--jra-blue); /* タブの土台ライン（全タブ共通の下辺） */
}
.jra-index-venue-switch-tabs::-webkit-scrollbar { display: none; } /* WebKit: スクロールバー非表示 */
.jra-index-container .jra-index-venuetab {
  flex: 0 0 auto;
  scroll-snap-align: center;
  width: 64px;                       /* 文字数(2〜3字)に依らず一定幅＝タブの横幅を揃える（box-sizing:border-box で枠込み一定） */
  padding: 7px 4px;
  text-align: center;
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Meiryo', sans-serif;
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  color: #5b626e;                    /* 非選択タブ文字＝#eaf1fb 上で 5.41:1（AA・--jra-fg-muted は不足） */
  background: #eaf1fb;               /* 非選択タブ＝淡いブルーグレー */
  border: 1px solid var(--jra-rpill-future-bd);
  border-bottom: 0;                  /* 下辺は土台ライン（タブ帯の border-bottom）に委ねる */
  border-radius: 6px 6px 0 0;        /* 上だけ角丸＝タブ形状 */
  transition: background 0.15s ease, color 0.15s ease;
}
/* テーマ本文リンクの color/下線に確実に勝つ特異度（.container .venuetab a:link で (0,3,1)）。 */
.jra-index-container a.jra-index-venuetab:link,
.jra-index-container a.jra-index-venuetab:visited { color: #5b626e; text-decoration: none; }
.jra-index-container a.jra-index-venuetab:hover { background: #e1e8f2; color: var(--jra-blue); }
.jra-index-container .jra-index-venuetab-current {
  padding-top: 5px;                  /* 上線 3px ぶん詰めて非選択タブと高さを揃える */
  color: var(--jra-blue);
  font-weight: 700;
  background: #ffffff;               /* 現在地＝白地（active タブ） */
  border-color: var(--jra-blue);
  border-top-width: 3px;             /* 現在地＝青の上線（太） */
  cursor: default;
}
.jra-index-venuetab:focus { outline: 2px solid var(--jra-focus); outline-offset: 2px; }
.jra-index-venuetab:focus:not(:focus-visible) { outline: none; }

/* ============================================================
   2. レース本体（指数タブ＝能力/期待値・各タブにチャート＋ソート可能テーブル）
      ★中央準拠ブルー。
   ============================================================ */
.jra-index-race-host { padding: 0; } /* 左右0＝レース本体(タブ/表/チャート/サマリ/マトリクス)を画面幅いっぱいに（中央 .ability-race-block 同様） */

/* レースブロック（中央 .ability-race-block 同型） */
.jra-index-race-block {
  margin: 18px 0 40px;
  padding-bottom: 15px;
  border-bottom: 2px solid #eee;
}
/* 見出し（中央 h3.race-title＝青→水色グラデ帯） */
.jra-index-container .jra-index-race-title {
  margin: 0 0 5px;
  padding: 10px 15px;
  font-size: 1.2em;
  line-height: 1.4;
  color: #ffffff;
  background: linear-gradient(to right, #005ab3, #87ceeb);
  border: 0;
  border-radius: 5px;
  box-shadow: none;
}
.jra-index-container .jra-index-race-title::before,
.jra-index-container .jra-index-race-title::after { content: none; }
.jra-index-container .jra-index-race-details {
  margin: 0 0 10px;
  padding: 0 2px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--jra-fg-muted);
}

/* 指数タブ（中央 .ability-tab-button 同型） */
.jra-index-tab-buttons {
  display: flex;
  width: 100%;
  border-bottom: 2px solid var(--jra-grid);
  margin-bottom: 10px;
}
.jra-index-tab-button {
  flex: 1;
  padding: 8px;
  font-size: 14px;
  color: var(--jra-fg);
  background: var(--jra-tab-bg);
  border: none;
  border-bottom: 3px solid transparent;
  margin-right: 2px;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  transition: all 0.3s ease;
}
.jra-index-tab-button:last-child { margin-right: 0; }
.jra-index-tab-button:hover { background: var(--jra-tab-hover); }
.jra-index-tab-button.jra-active {
  color: var(--jra-brand);
  font-weight: 700;
  background: var(--jra-tab-active-bg);
  border-bottom-color: var(--jra-brand);
}
.jra-index-tab-button:focus { outline: 2px solid var(--jra-focus); outline-offset: -2px; }
.jra-index-tab-button:focus:not(:focus-visible) { outline: none; }

.jra-index-tab-content { display: none; }
.jra-index-tab-content.jra-active { display: block; }

/* ソートラジオ（中央 .sort-container＝馬番順/指数順） */
.jra-index-sort-container {
  margin-bottom: 15px;
  padding: 10px;
  background: var(--jra-selector-bg);
  border-radius: 5px;
}
.jra-index-sort-container[hidden] { display: none; }
.jra-index-sort-label { margin-right: 10px; font-weight: 700; }
.jra-index-sort-group { display: inline-block; }
.jra-index-sort-group[hidden] { display: none; }
.jra-index-sort-option {
  margin-right: 15px;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}
.jra-index-container .jra-index-sort-option input[type="radio"] {
  -webkit-appearance: radio;
  appearance: auto;
  width: 14px;
  height: 14px;
  min-width: 14px;
  flex: none;
  margin: 0 5px 0 0;
  padding: 0;
  vertical-align: middle;
  cursor: pointer;
  opacity: 1;
}

/* チャート枠（中央 .chart-container＝高さは JS が px 指定） */
.jra-index-chart-wrap {
  position: relative;
  width: 100%;
  min-width: 0;
}
.jra-index-chart-wrap canvas { display: block; }

/* 横スクロール枠＋ヒント影 */
.jra-index-scroll-frame { position: relative; margin-top: 15px; }
.jra-index-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.jra-index-scroll-hint {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 22px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  background: linear-gradient(to right, rgba(15, 23, 42, 0), rgba(15, 23, 42, 0.16));
}
.jra-index-scroll-frame.jra-show-hint .jra-index-scroll-hint { opacity: 1; }

/* データ表（中央データ表＝11px・全辺#ddd罫・padding 3px 6px・灰ヘッダ#f2f2f2 暗字・ゼブラ#f9f9f9） */
.jra-index-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.jra-index-table th,
.jra-index-table td {
  border: 1px solid var(--jra-grid);
  padding: 3px 6px;
  text-align: center;
  white-space: nowrap;
}
.jra-index-table thead th {
  background: var(--jra-th-bg);
  color: var(--jra-fg);
  font-weight: 700;
}
.jra-index-table tbody tr:nth-child(even) { background: var(--jra-zebra); }

.jra-index-umamei,
.jra-index-th-umamei { text-align: left; }
.jra-index-umaban,
.jra-index-fukusho,
.jra-index-kitaichi,
.jra-index-odds-proper,
.jra-index-odds-target,
.jra-index-rank { font-variant-numeric: tabular-nums; }

/* 順位 上位3（背景色のみ＝数字が非色チャネルゆえ色覚非依存） */
.jra-index-rank.jra-rank-1 { background: var(--jra-rank1-bg); }
.jra-index-rank.jra-rank-2 { background: var(--jra-rank2-bg); }
.jra-index-rank.jra-rank-3 { background: var(--jra-rank3-bg); }

/* オッズ < 10倍 赤太字（中央 .low-odds）。 */
.jra-index-odds-proper.jra-low-odds,
.jra-index-odds-target.jra-low-odds {
  color: var(--jra-odds-low-fg);
  font-weight: 700;
}

/* ------------------------------------------------------------
   2b. 外部プロモ（競馬AI予想メーカー）＝タブ content 末尾＝指数テーブルの直下。
       構成: リード文＋テキストリンク（1ブロック内 <br> 改行）→ バナー（画像リンク）。
       ★JS が生成するのは「能力(複勝確率)」タブのみ（jra-index-report.js PROMO_TAB_IDS）。
       ★直後（タブ外）の .jra-index-summary-title が margin-top:40px を持つため、
         本ブロックは下マージンを持たない（＝間隔は summary 側の 40px に一本化）。
       ★★.jra-index-promo-lead は **div**（p ではない）。テーマ(JIN:R)が本文の p へ上下 33px
         (=2.357em・本番実測) の margin を当てており、コンテナ前置（特異度 0,2,0）では勝てず
         リード文とリンクの行間が1行ぶん空いてしまう。本CSSは !important を使わない規範ゆえ、
         テーマの p 規則が当たらない div にして余白を自分で持つ（JS 側も div を生成する）。
   ------------------------------------------------------------ */
.jra-index-promo { margin: 20px 0 0; text-align: left; }
.jra-index-container .jra-index-promo-lead {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--jra-fg);
}
.jra-index-container .jra-index-promo-lead strong { font-weight: 700; }
.jra-index-container .jra-index-promo-link {
  display: inline-block;
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--jra-brand);
  text-decoration: underline;
  word-break: break-word;
}
.jra-index-container .jra-index-promo-link:hover { text-decoration: none; }
.jra-index-container .jra-index-promo-link:focus { outline: 2px solid var(--jra-focus); outline-offset: 2px; }
.jra-index-container .jra-index-promo-link:focus:not(:focus-visible) { outline: none; }
.jra-index-container .jra-index-promo-banner { display: block; text-decoration: none; }
.jra-index-container .jra-index-promo-img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;
  border: 0;
  border-radius: 4px;
}

/* ============================================================
   3. 波乱度予想（新）= レース単位（ラベル＋スライダー型）
      ★graceful: race.wave_prediction が無い fixture では JS が要素を生成しない（非表示）。
   ============================================================ */
.jra-index-wave {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  padding: 8px 0;
  margin-bottom: 15px;
}
.jra-index-wave-item {
  flex: 1;
  min-width: 0;
}
.jra-index-wave-label {
  margin-bottom: 6px;
  font-size: 13px;
  text-align: left;
}
.jra-index-wave-type { color: var(--jra-fg-muted); }
.jra-index-wave-value { font-weight: 700; }

/* 単勝用ラベル色（緑・青・赤橙）。 */
.jra-index-wave-value.jra-tansho-level-1 { color: #43a047; }
.jra-index-wave-value.jra-tansho-level-2 { color: #1976d2; }
.jra-index-wave-value.jra-tansho-level-3 { color: #e64a19; }
/* 三連複用ラベル色（緑・水色・青・紫・赤橙）。 */
.jra-index-wave-value.jra-sanrenp-level-1 { color: #43a047; }
.jra-index-wave-value.jra-sanrenp-level-2 { color: #00acc1; }
.jra-index-wave-value.jra-sanrenp-level-3 { color: #1976d2; }
.jra-index-wave-value.jra-sanrenp-level-4 { color: #7b1fa2; }
.jra-index-wave-value.jra-sanrenp-level-5 { color: #e64a19; }

/* バー（軌道＝人気側→波乱側のグラデ）＋スライダー（◯・left は JS がインライン%）。 */
.jra-index-wave-bar {
  position: relative;
  height: 12px;
  background: linear-gradient(90deg, #e0f2e1 0%, #e5fbfc 25%, #e8f4ff 50%, #f5eeff 75%, #fff2e8 100%);
  border: 1px solid var(--jra-grid);
  border-radius: 6px;
}
.jra-index-wave-slider {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  background: #ffffff;
  border: 3px solid #43a047;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
/* 単勝用スライダー色。 */
.jra-index-wave-slider.jra-tansho-level-1 { border-color: #43a047; }
.jra-index-wave-slider.jra-tansho-level-2 { border-color: #1976d2; }
.jra-index-wave-slider.jra-tansho-level-3 { border-color: #e64a19; }
/* 三連複用スライダー色。 */
.jra-index-wave-slider.jra-sanrenp-level-1 { border-color: #43a047; }
.jra-index-wave-slider.jra-sanrenp-level-2 { border-color: #00acc1; }
.jra-index-wave-slider.jra-sanrenp-level-3 { border-color: #1976d2; }
.jra-index-wave-slider.jra-sanrenp-level-4 { border-color: #7b1fa2; }
.jra-index-wave-slider.jra-sanrenp-level-5 { border-color: #e64a19; }

/* ============================================================
   4. v1.0旧指数モード 波乱度予想（7段階グループ帯）
      ★graceful: race.wave_prediction.group_old が無い／null の日は JS が帯を生成しない（非表示）。
   ============================================================ */
.jra-index-wave-old {
  margin-bottom: 24px;
  padding: 0;
}
.jra-index-wave-old-labels {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
  padding: 0 2px;
}
.jra-index-wave-old-label-left {
  font-size: 12px;
  font-weight: 600;
  color: #4a90d9;
}
.jra-index-wave-old-label-right {
  font-size: 12px;
  font-weight: 600;
  color: #e64a19;
}
.jra-index-wave-old-gradient-bar {
  height: 6px;
  margin-bottom: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg,
    #4a90d9 0%,
    #43a047 17%,
    #9acd32 33%,
    #ffd600 50%,
    #ffa726 67%,
    #ff7043 83%,
    #e64a19 100%);
}
.jra-index-wave-old-groups {
  display: flex;
  gap: 6px;
}
.jra-index-wave-old-group-box {
  flex: 1;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid transparent;
  border-radius: 6px;
  transition: box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.jra-index-wave-old-group-box span {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}
/* active（該当グループ）＝色付き（背景/文字色は JS が WAVE_GROUP_OLD でインライン指定）。 */
.jra-index-wave-old-group-box.jra-active {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.jra-index-wave-old-group-box.jra-active span {
  font-size: 18px;
  font-weight: 800;
}
/* inactive（非該当）＝淡灰・淡字。 */
.jra-index-wave-old-group-box.jra-inactive {
  background: var(--jra-zebra);
  border-color: #e0e0e0;
}
.jra-index-wave-old-group-box.jra-inactive span { color: #cccccc; }

/* ============================================================
   5. 各指数サマリと総合評価 表（タブ外・新モードのみ）
      列: 番／馬名／複率(%)／総合(四捨五入+S-Dバッジ+バー)／能力／期待値／追切。
   ============================================================ */
.jra-index-summary-title {
  margin: 40px 0 8px;
  text-align: left;
  font-weight: 900;
  font-size: 1.3em;
  background: linear-gradient(to right, #003d82, #00bfff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  display: inline-block;
}
.jra-index-summary-wrap {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.jra-index-container .jra-index-summary-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.jra-index-container .jra-index-summary-table th,
.jra-index-container .jra-index-summary-table td {
  border: 1px solid var(--jra-grid);
  padding: 3px 6px;
  text-align: center;
  white-space: nowrap;
}
/* ヘッダ＝濃紺帯・白文字（中央 .summary-table th #1e3a8a）。 */
.jra-index-container .jra-index-summary-table thead th {
  padding: 8px 6px;
  background: var(--jra-summary-th-bg);
  color: #ffffff;
  font-weight: 700;
}
.jra-index-summary-table .jra-index-summary-umamei { text-align: left; }
/* 列幅（中央: 複率=60px・能力/期待値/追切/総合=90px）。 */
.jra-index-summary-table th.jra-index-summary-col-rate,
.jra-index-summary-table td.jra-index-summary-col-rate {
  min-width: 60px; max-width: 60px; width: 60px;
}
.jra-index-summary-table th.jra-index-summary-col-cell,
.jra-index-summary-table td.jra-index-summary-col-cell {
  min-width: 90px; max-width: 90px; width: 90px;
}
.jra-index-summary-table td.jra-index-summary-col-sogo { font-weight: 700; }
/* ソート可能ヘッダ（カーソル＋インジケータ枠）。 */
.jra-index-summary-sortable { cursor: pointer; }
.jra-index-summary-sort-indicator { margin-left: 3px; font-size: 0.85em; }
.jra-index-summary-active-sort .jra-index-summary-sort-indicator::after { content: "\25BC"; }
.jra-index-summary-active-sort[data-jra-sort-dir="asc"] .jra-index-summary-sort-indicator::after { content: "\25B2"; }

/* ランクバッジ＋進捗バー（サマリ表セル内・中央 .rank-display-container 系）。 */
.jra-index-rank-display {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
}
.jra-index-rank-text {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0;
  margin-bottom: 2px;
  min-width: 50px;
}
.jra-index-rank-badge {
  font-weight: 600;
  font-size: 1.4em;
  letter-spacing: 0.05em;
  line-height: 1;
  min-width: 15px;
  text-align: center;
}
.jra-index-rank-value {
  font-size: 0.85em;
  font-weight: 400;
  color: var(--jra-fg);
  min-width: 35px;
  text-align: right;
}
.jra-index-rank-bar-container {
  width: 50px;
  height: 6px;
  background: var(--jra-bar-track);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 2px;
}
.jra-index-rank-bar {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}
/* バッジ/バー色（S橙・A赤・B黄・C青灰・D灰）＝中央配色を変数化。 */
.jra-index-rank-badge.jra-rank-s { color: var(--jra-rank-s); }
.jra-index-rank-bar.jra-rank-s { background: var(--jra-rank-s); }
.jra-index-rank-badge.jra-rank-a { color: var(--jra-rank-a); }
.jra-index-rank-bar.jra-rank-a { background: var(--jra-rank-a); }
.jra-index-rank-badge.jra-rank-b { color: var(--jra-rank-b); }
.jra-index-rank-bar.jra-rank-b { background: var(--jra-rank-b); }
.jra-index-rank-badge.jra-rank-c { color: var(--jra-rank-c); }
.jra-index-rank-bar.jra-rank-c { background: var(--jra-rank-c); }
.jra-index-rank-badge.jra-rank-d { color: var(--jra-rank-d); }
.jra-index-rank-bar.jra-rank-d { background: linear-gradient(90deg, #888, #bbb); }
/* 総合評価セル内のバッジは更に太字（中央 :nth-child(5) を class 化）。 */
.jra-index-summary-col-sogo .jra-index-rank-badge { font-weight: 900; }

/* ============================================================
   6. 指数マトリクス（5×5・複勝能力指数 × 期待値指数）
   ============================================================ */
.jra-index-matrix-heading {
  margin: 50px 0 10px;
  font-size: 1.2em;
  color: var(--jra-brand);
  text-align: center;
}
.jra-index-matrix-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px 0;
}
.jra-index-matrix-grid {
  display: flex;
  align-items: stretch;
  min-height: 500px;
}
.jra-index-matrix-y-axis {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40px;
  margin-right: 5px;
  height: 500px;
  font-size: 14px;
  color: var(--jra-fg);
}
.jra-index-matrix-y-title {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 13px;
  color: var(--jra-fg);
}
.jra-index-matrix-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.jra-index-matrix-cells {
  display: grid;
  grid-template-columns: repeat(5, 140px);
  grid-template-rows: repeat(5, 100px);
  gap: 0;
  width: 700px;
  border-top: 0.5px solid var(--jra-grid);
  border-right: 0.5px solid var(--jra-grid);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: relative;
}
/* Y軸グラデーション境界（左・上向き）／X軸グラデーション境界（下・右向き）。 */
.jra-index-matrix-cells::before {
  content: "";
  position: absolute;
  left: -2px;
  top: 0;
  width: 2px;
  height: 500px;
  background: linear-gradient(to top, #0066cc, #87ceeb, #90ee90);
}
.jra-index-matrix-cells::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 700px;
  height: 2px;
  background: linear-gradient(to right, #0066cc, #87ceeb, #90ee90);
}
.jra-index-matrix-cells .jra-index-matrix-y-arrow {
  position: absolute;
  left: -8px;
  top: -8px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 10px solid #90ee90;
}
.jra-index-matrix-cells .jra-index-matrix-x-arrow {
  position: absolute;
  right: -8px;
  bottom: -8px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid #90ee90;
}
.jra-index-matrix-cell {
  height: 100px;
  width: 140px;
  padding: 2px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  font-size: 11px;
  border: 0.5px solid var(--jra-grid);
  background: #ffffff;
  position: relative;
}
.jra-index-matrix-horse {
  margin: 2px 0;
  padding: 2px 4px;
  width: 130px;
  font-size: 10px;
  font-weight: 400;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--jra-fg);
}
/* ★馬チップの強調色分け（top-both 青太字／top-one 青灰）はユーザー指示で不要（中央も .horse-top-both の着色定義なし）。
   JS は top-both/top-one/normal クラスを付与し続けるが着色しない＝全馬 base（.jra-index-matrix-horse の通常文字）で統一。 */
.jra-index-matrix-x-axis { margin-top: 5px; }
.jra-index-matrix-x-labels {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 700px;
  padding: 5px 0;
  font-size: 14px;
  color: var(--jra-fg);
  position: relative;
}
.jra-index-matrix-x-title { font-size: 13px; color: var(--jra-fg); }

/* ============================================================
   7. 追切ビューアー（追切タブ内）
      ★偏差値の数値色・バー色・コース割合バー色は JS がインライン指定（中央同様）。
        CSS は大数値の寸法・バー枠・横棒レイアウト・セレクト/ラジオ体裁のみ。
   ============================================================ */
.jra-index-training-viewer { padding: 12px 0; }
.jra-index-training-main {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
@media (min-width: 769px) {
  .jra-index-training-main { flex-direction: row; gap: 20px; align-items: flex-start; }
  .jra-index-training-cards,
  .jra-index-training-course-chart { flex: 1; min-width: 0; }
}
/* 馬名セレクト行＋ラジオ群（最終/1週前・4F/1F）。 */
.jra-index-training-horse-selector {
  margin-bottom: 12px;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
}
.jra-index-training-horse-selector label {
  margin-right: 2px;
  font-size: 0.9em;
  color: var(--jra-fg-muted);
}
.jra-index-container .jra-index-training-horse-selector select {
  min-width: 150px;
  padding: 6px 10px;
  font-size: 0.9em;
  background: #ffffff;
  border: 1px solid var(--jra-border-soft);
  border-radius: 4px;
  cursor: pointer;
}
.jra-index-training-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 12px;
  padding: 5px 12px;
  background: var(--jra-selector-bg);
  border: 1px solid var(--jra-border-soft);
  border-radius: 6px;
}
.jra-index-training-radio-group {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  margin: 0;
  padding: 0;
}
.jra-index-training-radio-group label {
  margin-right: 10px;
  font-size: 0.9em;
  color: var(--jra-fg);
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  cursor: pointer;
}
.jra-index-container .jra-index-training-radio-group input[type="radio"] {
  -webkit-appearance: radio;
  appearance: auto;
  width: 14px;
  height: 14px;
  min-width: 14px;
  flex: none;
  margin: 0 4px 0 0;
  padding: 0;
  vertical-align: middle;
  cursor: pointer;
  accent-color: #007bff;
}
.jra-index-training-cards {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.jra-index-training-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 12px;
  background: #ffffff;
  border: 1px solid var(--jra-border-soft);
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.jra-index-training-card-title {
  margin-bottom: 8px;
  padding-bottom: 5px;
  font-size: 1.1em;
  font-weight: 700;
  color: var(--jra-ink);
  text-align: center;
  border-bottom: 1px solid #f3f4f6;
}
.jra-index-training-info {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  font-size: 0.9em;
}
.jra-index-training-info strong {
  display: inline-block;
  min-width: 70px;
  margin-right: 6px;
  font-weight: 600;
  color: #4b5563;
}
/* 偏差値（大数値）＝中央 .training-deviation-number（3em・縁取り影）。色は JS インライン。 */
.jra-index-training-deviation-item {
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 16px;
}
.jra-index-training-deviation-item strong { margin-bottom: 8px; font-size: 1.1em; }
.jra-index-training-deviation {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 8px;
}
.jra-index-training-deviation-number {
  font-size: 3em;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-shadow:
    -2px -2px 0 rgba(255, 255, 255, 0.8),
    2px -2px 0 rgba(255, 255, 255, 0.8),
    -2px 2px 0 rgba(255, 255, 255, 0.8),
    2px 2px 0 rgba(255, 255, 255, 0.8),
    0 0 8px rgba(0, 0, 0, 0.1);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}
.jra-index-training-deviation-bar-wrap {
  width: 100%;
  height: 20px;
  background: var(--jra-bar-track);
  border: 1px solid var(--jra-border-soft);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}
.jra-index-training-deviation-bar {
  height: 100%;
  border-radius: 10px;
  transition: width 0.4s ease-out;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
/* コース割合 横棒チャート（坂路/ウッド/ポリ/ダート/芝/その他%）。バー色は JS インライン。 */
.jra-index-training-course-chart {
  display: flex;
  flex-direction: column;
  padding: 12px;
  background: #ffffff;
  border: 1px solid var(--jra-border-soft);
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.jra-index-training-course-title {
  margin-bottom: 8px;
  padding-bottom: 5px;
  font-size: 1em;
  color: var(--jra-ink);
  text-align: center;
  border-bottom: 1px solid #f3f4f6;
}
/* 集計範囲（全レース/好成績）ラジオ。 */
.jra-index-training-course-scope {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  margin-bottom: 15px;
  padding: 5px 12px;
  background: var(--jra-selector-bg);
  border: 1px solid var(--jra-border-soft);
  border-radius: 6px;
}
@media (min-width: 480px) {
  .jra-index-training-course-scope { flex-direction: row; justify-content: center; align-items: center; gap: 0 8px; }
}
.jra-index-training-bars {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.jra-index-training-bar-row {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  font-size: 0.85em;
}
.jra-index-training-bar-label {
  min-width: 75px;
  margin-right: 6px;
  flex-shrink: 0;
  font-weight: 500;
  color: #4b5563;
}
.jra-index-training-bar-outer {
  flex: 1 1 0;
  height: 16px;
  background: var(--jra-bar-track);
  border-radius: 2px;
  overflow: hidden;
}
.jra-index-training-bar-inner {
  height: 100%;
  border-radius: 2px;
  transition: width 0.4s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 0.7em;
  font-weight: 700;
  white-space: nowrap;
}
.jra-index-training-bar-pct {
  min-width: 70px;
  margin-left: 6px;
  flex-shrink: 0;
  font-size: 0.8em;
  text-align: right;
  color: var(--jra-fg);
}
.jra-index-training-self-best {
  display: inline-block;
}
.jra-index-training-no-data {
  padding: 40px 20px;
  text-align: center;
  font-size: 14px;
  color: #999;
}

/* ============================================================
   8. コース解説枠（レースブロック最下部・タブ外）
      ★本文は do_blocks 済みの信頼 HTML（Gutenberg ブロック）を JS が innerHTML 直挿し。
        本文クラス（wp-block-* 等）はテーマ依存ゆえ最小余白・見出し体裁のみ自前で当てる。
   ============================================================ */
.jra-index-course-feature {
  margin: 30px 0 20px;
  padding: 20px;
  background: #ffffff;
  border: 1px solid var(--jra-border-soft);
  border-radius: 8px;
}
.jra-index-container .jra-index-course-feature-title {
  margin: 0 0 15px;
  font-size: 1.2em;
  font-weight: 700;
  color: var(--jra-brand);
  text-align: center;
}
.jra-index-course-feature-content {
  font-size: 12px;
  line-height: 1.6;
  color: var(--jra-fg);
}
/* 本文（テーマ提供ブロック）の最小余白のみ。色/装飾はテーマに委ねる。 */
.jra-index-course-feature-content p { margin: 0 0 15px; font-size: 12px; }
.jra-index-course-feature-content ul,
.jra-index-course-feature-content ol { margin: 15px 0; padding-left: 20px; }
.jra-index-course-feature-content img { max-width: 100%; height: auto; }
/* ★is-not-stacked-on-mobile の実装をスコープ付きで自前搭載（2026-08-16）:
   コアのブロックCSSは「そのページでサーバー描画されたブロック」の分しか読み込まれない
   （separate core block assets）。本ページの解説は inline-JSON 経由の JS 挿入＝コアCSS不在で
   flex-wrap:wrap が残り、見出し列とバー画像列がモバイルで縦積みになる（Pro はテンプレを
   サーバー描画するためコアCSSが載り横並び＝表示乖離の実害）。コアと同じ規則を自前で持つ。 */
.jra-index-course-feature-content .wp-block-columns.is-not-stacked-on-mobile { flex-wrap: nowrap; }
/* ↑ !important 不使用（§16-b 規範）: 競合は global-styles の .is-layout-flex{flex-wrap:wrap}（0,1,0）のみで
   本セレクタ（0,3,0）が詳細度で勝つ（2026-08-16 実測＝マッチする flex-wrap 規則はこの1件だけ）。 */

/* ============================================================
   9. v2.0/v1.0 モード切替トグル（container 先頭・has_old 単一 bool が真のときのみ JS が構築）
   ============================================================ */
.jra-index-mode-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  padding: 2px 0; /* 左右0＝モードトグルを右端まで（画面幅最大利用）。モバイルは下のメディアクエリで端余白。 */
  margin: 14px 0 4px;
}
.jra-index-mode-switch {
  display: flex;
  align-items: center;
  gap: 10px;
}
.jra-index-mode-zenjitsu-label,
.jra-index-mode-old-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--jra-fg-muted);
  transition: color 0.3s ease, opacity 0.3s ease;
}
.jra-index-mode-zenjitsu-label.jra-active {
  color: var(--jra-brand);
  font-weight: 700;
}
.jra-index-mode-old-label.jra-active {
  color: #4b5563;
  font-weight: 700;
}
/* トグルスイッチ本体（チェックボックスを覆うスライダー）。 */
.jra-index-mode-toggle {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
}
.jra-index-mode-toggle input {
  width: 0;
  height: 0;
  opacity: 0;
}
.jra-index-mode-toggle-slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--jra-brand); /* v2.0（新）時は青＝ON 表示 */
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.3s ease;
}
.jra-index-mode-toggle-slider::before {
  content: "";
  position: absolute;
  left: 3px;
  bottom: 3px;
  width: 14px;
  height: 14px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;
}
/* v1.0（旧）時（checked）はグレー＝OFF 表示・つまみ右移動。 */
.jra-index-mode-toggle input:checked + .jra-index-mode-toggle-slider { background: #d1d5db; }
.jra-index-mode-toggle input:checked + .jra-index-mode-toggle-slider::before { transform: translateX(20px); }
.jra-index-mode-toggle input:focus-visible + .jra-index-mode-toggle-slider {
  outline: 2px solid var(--jra-focus);
  outline-offset: 2px;
}

/* モード別タブ強調色（コンテナ修飾子で出し分け）。新＝青系／旧＝紫系（中央準拠 #8b5cf6）。 */
.jra-index-container.jra-index-mode-old .jra-index-tab-button.jra-active {
  color: #8b5cf6;
  background: #ede9fe;
  border-bottom-color: #8b5cf6;
}
.jra-index-container.jra-index-mode-old .jra-index-tab-button:hover:not(.jra-active) {
  background: #f5f3ff;
}

/* ============================================================
   フォールバック表（JS無効/失敗時のみ可視・PHP サーバレンダ）。
   ★PHP のフォールバック class（.jra-index-fallback-venue / .jra-index-race / .jra-index-race-title /
     .jra-table-wrap / .jra-index-table / .jra-umaban 等）に対応。
   成功時は .jra-js-ready で隠す（特異度で勝つ＝!important 不使用）。
   ============================================================ */
.jra-index-container.jra-js-ready .jra-index-fallback { display: none; }

.jra-index-fallback { padding: 0 0 8px; } /* 左右0＝no-JS フォールバック表も画面幅いっぱい（JS-UI と整合） */
.jra-index-container .jra-index-fallback-venue {
  margin: 14px 0 6px;
  padding: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  color: var(--jra-ink);
  border: 0;
  background: none;
}
.jra-index-fallback .jra-index-race { margin: 0 0 22px; }
.jra-index-container .jra-index-fallback .jra-index-race-title {
  margin: 12px 0 5px;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.4;
  color: #ffffff;
  background: linear-gradient(to right, #005ab3, #87ceeb);
  border: 0;
  border-radius: 5px;
}
.jra-index-fallback .jra-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.jra-index-fallback .jra-index-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.jra-index-fallback .jra-index-table th,
.jra-index-fallback .jra-index-table td {
  border: 1px solid var(--jra-grid);
  padding: 3px 6px;
  text-align: center;
  white-space: nowrap;
}
.jra-index-fallback .jra-index-table thead th {
  background: var(--jra-th-bg);
  color: var(--jra-fg);
  font-weight: 700;
}
.jra-index-fallback .jra-index-table tbody tr:nth-child(even) { background: var(--jra-zebra); }
.jra-index-fallback .jra-umamei { text-align: left; }
.jra-index-fallback .jra-umaban,
.jra-index-fallback .jra-tansho,
.jra-index-fallback .jra-fukusho,
.jra-index-fallback .jra-kitaichi,
.jra-index-fallback .jra-odds-proper,
.jra-index-fallback .jra-odds-target,
.jra-index-fallback .jra-rank,
.jra-index-fallback .jra-sogo { font-variant-numeric: tabular-nums; }

/* ============================================================
   データなし
   ============================================================ */
.jra-index-no-data {
  padding: 28px 16px;
  text-align: center;
  color: var(--jra-fg-muted);
  background: #f8fafc;
  border: 1px dashed var(--jra-grid);
  border-radius: 8px;
}

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (max-width: 768px) {
  /* モバイルのみ中央 .race-ability-report と同じ左右5pxの端余白（デスクトップは0＝全幅利用）。 */
  .jra-index-container { padding-left: 5px; padding-right: 5px; }
  .jra-index-tab-button { font-size: 12px; padding: 6px 4px; }
  .jra-index-sort-option { font-size: 12px; margin-right: 10px; }
  .jra-index-race-block { margin-left: -5px; margin-right: -5px; padding-left: 5px; padding-right: 5px; }
  .jra-index-chart-wrap { margin-left: -5px; margin-right: -5px; width: calc(100% + 10px); }
  .jra-index-chart-wrap canvas { font-feature-settings: "kern" 0; letter-spacing: -0.3px; }
  .jra-index-training-bar-label { min-width: 60px; font-size: 12px; }
  .jra-index-training-bar-pct { min-width: 40px; font-size: 12px; }
  .jra-index-course-feature {
    margin-left: -5px;
    margin-right: -5px;
    margin-top: 20px;
    margin-bottom: 15px;
    padding: 15px;
  }
  .jra-index-container .jra-index-course-feature-title { font-size: 1.1em; margin-bottom: 10px; }
  .jra-index-mode-bar { padding-left: 5px; padding-right: 5px; }
  .jra-index-mode-zenjitsu-label,
  .jra-index-mode-old-label { font-size: 11px; }
  .jra-index-mode-switch { gap: 6px; }
  .jra-index-mode-toggle { width: 36px; height: 18px; }
  .jra-index-mode-toggle-slider::before { width: 12px; height: 12px; }
  .jra-index-mode-toggle input:checked + .jra-index-mode-toggle-slider::before { transform: translateX(18px); }
  .jra-index-wave-old-label-left,
  .jra-index-wave-old-label-right { font-size: 10px; }
  .jra-index-wave-old-groups { gap: 4px; }
  .jra-index-wave-old-group-box { height: 30px; }
  .jra-index-wave-old-group-box span { font-size: 13px; }
  .jra-index-wave-old-group-box.jra-active span { font-size: 15px; }
}
@media (max-width: 600px) {
  .jra-index-wave { gap: 12px; padding: 6px 0; }
  .jra-index-wave-item { flex: 1; min-width: 0; }
  .jra-index-wave-label { font-size: 11px; }
  .jra-index-wave-bar { height: 10px; }
  .jra-index-wave-slider { width: 16px; height: 16px; border-width: 2px; }
}
@media (max-width: 480px) {
  .jra-index-rpill { font-size: 12px; padding: 7px 10px; min-width: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .jra-index-rnav,
  .jra-index-rpill,
  .jra-index-venuetab,
  .jra-index-tab-button,
  .jra-index-scroll-hint,
  .jra-index-mode-zenjitsu-label,
  .jra-index-mode-old-label,
  .jra-index-mode-toggle-slider,
  .jra-index-mode-toggle-slider::before,
  .jra-index-wave-old-group-box { transition: none; }
}