/*
 * jra-pro-report.css — JRA（中央競馬）新Proページ（[jra_index_pro_view]・codoc ペイウォール内）の見た目。
 *   Phase4（docs/09 §5.2/§9-7）。JSエンジン window.JraProReport が #jra-pro-report-container 配下へ、
 *   /pro-get を fetch した会員向けデータ（全場・全馬・単勝系＋脚質＋realtime）で
 *   競馬場切替＋Rストリップ＋リッチ詳細（タブ/サマリ/マトリクス/追切/コース解説/横断検索/Chart.js/波乱度/
 *   v2-v1トグル/前日-リアルタイムトグル）を描画する。
 *   ★横断検索（§8b）は legacy Pro（realtime-race-report.css / race-report-unified_v2.css）からの移植。
 *
 * 由来: frontend/jra-index-report.css（各場ビュー）を接頭辞 jra-index- → jra-pro- へ機械リネームし、
 *   Pro専用UI（コントロールバー＝前日/リアルタイム トグル・更新・競馬場切替タブ・取消馬・状態メッセージ）を
 *   末尾に追記した（docs/09 §C）。中央/NAR資産は一切参照しない（完全独立プラグイン）。
 *
 * 方針（各場ビューと同一の中央分離規律・docs/09 §C）:
 *   - !important 実宣言は 0（特異度で勝つ＝コンテナクラス .jra-pro-container で前置）。
 *   - 全セレクタ jra-pro- 接頭辞・CSS変数は --jra-pro-。短い修飾子（jra-pro-active / jra-pro-rank-* /
 *     jra-pro-low-odds / jra-pro-tansho-level-* / jra-pro-sanrenp-level-* / jra-pro-mode-* /
 *     jra-pro-show-hint / jra-pro-inactive / jra-pro-scratched）は JS が付与。
 *   - 中央/NAR/窓口資産（dual-index-／ability-／nar-／jra-gateway- 等）を一切参照しない（構造分離）。
 *   - ★描画は fetch（/pro-get）由来ゆえ no-JS フォールバック表は無い（ペイウォール内は空コンテナのみ）。
 *     成功時は .jra-pro-js-ready を container に付与。
 *   - 単一インスタンス前提（固定 id は container のみ。rstrip-host/race-host/control-bar は JS が生成）。
 */

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

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

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

  --jra-pro-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-pro-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-pro-container *,
.jra-pro-container *::before,
.jra-pro-container *::after { box-sizing: border-box; }
.jra-pro-container a { -webkit-tap-highlight-color: transparent; }

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

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

/* ============================================================
   1b. 他競馬場 切替UI（NAR同様の競馬場タブ＝JRAは青系・中央(JRA)/netkeiba 風）。
   ・各場CPT は単一場固定ゆえ、同日開催の全場へ横断する導線を上部にタブとして常時表示（サーバレンダ
     <a href>＝no-JS でも遷移可・.jra-pro-js-ready 非依存）。R選択（.jra-pro-rpill）とは別系統の
     class（.jra-pro-venuetab＝場遷移の <a>/現在地 <span>）で役割を分離。
   ・current（現在地）＝白地＋青上線＋青太字（aria-current=page・非リンク）。他場＝淡色タブのリンク。
   ・場数が多い日はタブ帯を横スクロール（overflow-x）。JRA は同日最大3場ゆえ通常スクロールは発生しない。
   ============================================================ */
.jra-pro-venue-switch { margin-bottom: 8px; } /* タブ帯とレース番号ストリップの間隔 */
.jra-pro-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-pro-blue); /* タブの土台ライン（全タブ共通の下辺） */
}
.jra-pro-venue-switch-tabs::-webkit-scrollbar { display: none; } /* WebKit: スクロールバー非表示 */
.jra-pro-container .jra-pro-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-pro-fg-muted は不足） */
  background: #eaf1fb;               /* 非選択タブ＝淡いブルーグレー */
  border: 1px solid var(--jra-pro-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-pro-container a.jra-pro-venuetab:link,
.jra-pro-container a.jra-pro-venuetab:visited { color: #5b626e; text-decoration: none; }
.jra-pro-container a.jra-pro-venuetab:hover { background: #e1e8f2; color: var(--jra-pro-blue); }
.jra-pro-container .jra-pro-venuetab-current {
  padding-top: 5px;                  /* 上線 3px ぶん詰めて非選択タブと高さを揃える */
  color: var(--jra-pro-blue);
  font-weight: 700;
  background: #ffffff;               /* 現在地＝白地（active タブ） */
  border-color: var(--jra-pro-blue);
  border-top-width: 3px;             /* 現在地＝青の上線（太） */
  cursor: default;
}
.jra-pro-venuetab:focus { outline: 2px solid var(--jra-pro-focus); outline-offset: 2px; }
.jra-pro-venuetab:focus:not(:focus-visible) { outline: none; }

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

/* レースブロック（中央 .ability-race-block 同型） */
.jra-pro-race-block {
  margin: 18px 0 40px;
  padding-bottom: 15px;
  border-bottom: 2px solid #eee;
}
/* 見出し（中央 h3.race-title＝青→水色グラデ帯） */
.jra-pro-container .jra-pro-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-pro-container .jra-pro-race-title::before,
.jra-pro-container .jra-pro-race-title::after { content: none; }
.jra-pro-container .jra-pro-race-details {
  margin: 0 0 10px;
  padding: 0 2px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--jra-pro-fg-muted);
}

/* 指数タブ（中央 .ability-tab-button 同型） */
.jra-pro-tab-buttons {
  display: flex;
  width: 100%;
  border-bottom: 2px solid var(--jra-pro-grid);
  margin-bottom: 10px;
}
.jra-pro-tab-button {
  flex: 1;
  padding: 8px;
  font-size: 14px;
  color: var(--jra-pro-fg);
  background: var(--jra-pro-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-pro-tab-button:last-child { margin-right: 0; }
.jra-pro-tab-button:hover { background: var(--jra-pro-tab-hover); }
.jra-pro-tab-button.jra-pro-active {
  color: var(--jra-pro-brand);
  font-weight: 700;
  background: var(--jra-pro-tab-active-bg);
  border-bottom-color: var(--jra-pro-brand);
}
.jra-pro-tab-button:focus { outline: 2px solid var(--jra-pro-focus); outline-offset: -2px; }
.jra-pro-tab-button:focus:not(:focus-visible) { outline: none; }

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

/* ソートラジオ（中央 .sort-container＝馬番順/指数順） */
.jra-pro-sort-container {
  margin-bottom: 15px;
  padding: 10px;
  background: var(--jra-pro-selector-bg);
  border-radius: 5px;
}
.jra-pro-sort-container[hidden] { display: none; }
.jra-pro-sort-label { margin-right: 10px; font-weight: 700; }
.jra-pro-sort-group { display: inline-block; }
.jra-pro-sort-group[hidden] { display: none; }
.jra-pro-sort-option {
  margin-right: 15px;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}
.jra-pro-container .jra-pro-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-pro-chart-wrap {
  position: relative;
  width: 100%;
  min-width: 0;
}
.jra-pro-chart-wrap canvas { display: block; }

/* 横スクロール枠＋ヒント影 */
.jra-pro-scroll-frame { position: relative; margin-top: 15px; }
.jra-pro-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.jra-pro-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-pro-scroll-frame.jra-pro-show-hint .jra-pro-scroll-hint { opacity: 1; }

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

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

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

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

/* 脚質タブ（legacy race-report-unified_v2.css 1893-2072 の移植・!important は使わない）
   ＝番/馬名/予想脚質（逃げ・先行・差し・追込）/脚質指数（位置バー）。 */
.jra-pro-kyakushitsu-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.jra-pro-kyakushitsu-table th,
.jra-pro-kyakushitsu-table td {
  border: 1px solid var(--jra-pro-grid);
  padding: 3px 6px;
  text-align: center;
  white-space: nowrap;
}
.jra-pro-kyakushitsu-table thead th {
  background: var(--jra-pro-th-bg);
  color: var(--jra-pro-fg);
  font-weight: 700;
}
.jra-pro-kyakushitsu-table tbody tr:nth-child(even) { background: var(--jra-pro-zebra); }
.jra-pro-kyakushitsu-table th:first-child,
.jra-pro-kyakushitsu-table td.jra-pro-kyakushitsu-umaban {
  width: 30px;
  min-width: 30px;
  max-width: 30px;
  font-variant-numeric: tabular-nums;
}
.jra-pro-kyakushitsu-table th.jra-pro-kyakushitsu-th-umamei,
.jra-pro-kyakushitsu-table td.jra-pro-kyakushitsu-umamei {
  width: 125px;
  min-width: 125px;
  max-width: 125px;
  text-align: left;
}
.jra-pro-kyakushitsu-table td.jra-pro-kyakushitsu-label,
.jra-pro-kyakushitsu-table th:nth-child(3) {
  width: 5em;
  min-width: 5em;
  max-width: 5em;
}
.jra-pro-kyakushitsu-table td.jra-pro-kyakushitsu-bar-cell,
.jra-pro-kyakushitsu-table th:nth-child(4) { width: auto; }

/* 位置バー（左＝追込寄り／右＝逃げ寄り。偏差値 20-80 を 0-100% に写す） */
.jra-pro-kyakushitsu-bar-outer {
  width: 100%;
  height: 12px;
  position: relative;
  border-radius: 3px;
  background: linear-gradient(90deg, #e9d5ff, #dbeafe, #ffedd5, #fecaca);
}
.jra-pro-kyakushitsu-marker {
  position: absolute;
  top: -2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transform: translateX(-50%);
}
/* 脚質4分類の色（legacy 1946-1949）。ラベル文字が非色チャネルなので色覚非依存。 */
.jra-pro-kyakushitsu-marker.jra-pro-kyakushitsu-nige { background: #ef4444; }
.jra-pro-kyakushitsu-marker.jra-pro-kyakushitsu-senko { background: #f97316; }
.jra-pro-kyakushitsu-marker.jra-pro-kyakushitsu-sashi { background: #3b82f6; }
.jra-pro-kyakushitsu-marker.jra-pro-kyakushitsu-oikomi { background: #8b5cf6; }
td.jra-pro-kyakushitsu-nige { color: #b91c1c; }
td.jra-pro-kyakushitsu-senko { color: #c2410c; }
td.jra-pro-kyakushitsu-sashi { color: #1d4ed8; }
td.jra-pro-kyakushitsu-oikomi { color: #6d28d9; }

/* データなし（-9999 / 0 / 欠損）＝グレーアウト（legacy 2063-2072） */
.jra-pro-kyakushitsu-table td.jra-pro-kyakushitsu-no-data {
  color: #999;
  background-color: #f5f5f5;
}
.jra-pro-kyakushitsu-table td.jra-pro-kyakushitsu-no-data .jra-pro-kyakushitsu-bar-outer {
  background: #e0e0e0;
  opacity: 0.5;
}

@media (max-width: 768px) {
  .jra-pro-kyakushitsu-table th:first-child,
  .jra-pro-kyakushitsu-table td.jra-pro-kyakushitsu-umaban {
    width: 25px;
    min-width: 25px;
    max-width: 25px;
  }
  .jra-pro-kyakushitsu-table th.jra-pro-kyakushitsu-th-umamei,
  .jra-pro-kyakushitsu-table td.jra-pro-kyakushitsu-umamei {
    width: 11em;
    min-width: 11em;
    max-width: 11em;
  }
  .jra-pro-kyakushitsu-bar-outer { height: 10px; }
  .jra-pro-kyakushitsu-marker { width: 14px; height: 14px; }
}

/* 想定隊列図（legacy race-report-unified_v2.css 1951-2017 / 2052-2060 の移植・!important は使わない）
   ＝脚質表の直下。右ほど前（逃げ寄り）／左ほど後方。馬番の丸は JS が right/top を % で置く。 */
.jra-pro-formation {
  margin-top: 20px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 5px;
}
.jra-pro-formation-title {
  font-size: 13px;
  font-weight: 700;
  color: #333;
  margin-bottom: 10px;
}
.jra-pro-formation-track {
  position: relative;
  height: 130px;
  background: #a7f3d0;
  border-radius: 5px;
  padding: 10px;
  overflow: visible;
}
/* ダートコース用背景（legacy 1976-1978） */
.jra-pro-formation-track.jra-pro-formation-dirt { background: #e8d5c4; }
.jra-pro-formation-track-line {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.3);
}
.jra-pro-formation-track-label {
  position: absolute;
  top: 5px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.8);
}
.jra-pro-formation-track-label.jra-pro-formation-back { left: 10px; }
.jra-pro-formation-track-label.jra-pro-formation-front { right: 10px; }
.jra-pro-formation-horse {
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  border: 2px solid #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
/* 脚質4分類の色（legacy 2014-2017・脚質表のマーカーと同じ4色） */
.jra-pro-formation-horse.jra-pro-kyakushitsu-nige { background: #ef4444; }
.jra-pro-formation-horse.jra-pro-kyakushitsu-senko { background: #f97316; }
.jra-pro-formation-horse.jra-pro-kyakushitsu-sashi { background: #3b82f6; }
.jra-pro-formation-horse.jra-pro-kyakushitsu-oikomi { background: #8b5cf6; }

@media (max-width: 768px) {
  .jra-pro-formation-track { height: 110px; }
  .jra-pro-formation-horse {
    width: 24px;
    height: 24px;
    font-size: 9px;
  }
}

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

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

/* バー（軌道＝人気側→波乱側のグラデ）＋スライダー（◯・left は JS がインライン%）。 */
.jra-pro-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-pro-grid);
  border-radius: 6px;
}
.jra-pro-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-pro-wave-slider.jra-pro-tansho-level-1 { border-color: #43a047; }
.jra-pro-wave-slider.jra-pro-tansho-level-2 { border-color: #1976d2; }
.jra-pro-wave-slider.jra-pro-tansho-level-3 { border-color: #e64a19; }
/* 三連複用スライダー色。 */
.jra-pro-wave-slider.jra-pro-sanrenp-level-1 { border-color: #43a047; }
.jra-pro-wave-slider.jra-pro-sanrenp-level-2 { border-color: #00acc1; }
.jra-pro-wave-slider.jra-pro-sanrenp-level-3 { border-color: #1976d2; }
.jra-pro-wave-slider.jra-pro-sanrenp-level-4 { border-color: #7b1fa2; }
.jra-pro-wave-slider.jra-pro-sanrenp-level-5 { border-color: #e64a19; }

/* ============================================================
   4. v1.0旧指数モード 波乱度予想（7段階グループ帯）
      ★graceful: race.wave_prediction.group_old が無い／null の日は JS が帯を生成しない（非表示）。
   ============================================================ */
.jra-pro-wave-old {
  margin-bottom: 24px;
  padding: 0;
}
.jra-pro-wave-old-labels {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
  padding: 0 2px;
}
.jra-pro-wave-old-label-left {
  font-size: 12px;
  font-weight: 600;
  color: #4a90d9;
}
.jra-pro-wave-old-label-right {
  font-size: 12px;
  font-weight: 600;
  color: #e64a19;
}
.jra-pro-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-pro-wave-old-groups {
  display: flex;
  gap: 6px;
}
.jra-pro-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-pro-wave-old-group-box span {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}
/* active（該当グループ）＝色付き（背景/文字色は JS が WAVE_GROUP_OLD でインライン指定）。 */
.jra-pro-wave-old-group-box.jra-pro-active {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.jra-pro-wave-old-group-box.jra-pro-active span {
  font-size: 18px;
  font-weight: 800;
}
/* inactive（非該当）＝淡灰・淡字。 */
.jra-pro-wave-old-group-box.jra-pro-inactive {
  background: var(--jra-pro-zebra);
  border-color: #e0e0e0;
}
.jra-pro-wave-old-group-box.jra-pro-inactive span { color: #cccccc; }

/* ============================================================
   5. 各指数サマリと総合評価 表（タブ外・新モードのみ）
      列: 番／馬名／複率(%)／総合(四捨五入+S-Dバッジ+バー)／能力／期待値／追切。
   ============================================================ */
.jra-pro-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-pro-summary-wrap {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.jra-pro-container .jra-pro-summary-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.jra-pro-container .jra-pro-summary-table th,
.jra-pro-container .jra-pro-summary-table td {
  border: 1px solid var(--jra-pro-grid);
  padding: 3px 6px;
  text-align: center;
  white-space: nowrap;
}
/* ヘッダ＝濃紺帯・白文字（中央 .summary-table th #1e3a8a）。 */
.jra-pro-container .jra-pro-summary-table thead th {
  padding: 8px 6px;
  background: var(--jra-pro-summary-th-bg);
  color: #ffffff;
  font-weight: 700;
}
.jra-pro-summary-table .jra-pro-summary-umamei { text-align: left; }
/* 列幅（中央: 複率=60px・能力/期待値/追切/総合=90px）。 */
.jra-pro-summary-table th.jra-pro-summary-col-rate,
.jra-pro-summary-table td.jra-pro-summary-col-rate {
  min-width: 60px; max-width: 60px; width: 60px;
}
.jra-pro-summary-table th.jra-pro-summary-col-cell,
.jra-pro-summary-table td.jra-pro-summary-col-cell {
  min-width: 90px; max-width: 90px; width: 90px;
}
.jra-pro-summary-table td.jra-pro-summary-col-sogo { font-weight: 700; }
/* ソート可能ヘッダ（カーソル＋インジケータ＋選択中の色切替）。
   ★legacy race-report-unified_v2.css 1689-1769 の .sortable-header / .sort-indicator を移植:
     非選択＝⇅（半透明白）／選択中＝▲▼（白）＋ヘッダ背景 #3b82f6・hover は #2563eb。
     legacy は hover より active-sort を後置＝選択中はhoverでも #3b82f6。同じ順序・同じ特異度で再現する。 */
.jra-pro-summary-sortable { cursor: pointer; user-select: none; transition: background-color 0.2s ease; }
.jra-pro-summary-sort-indicator {
  display: inline-block;
  margin-left: 3px;
  font-size: 0.85em;
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.2s ease;
}
.jra-pro-summary-sort-indicator::after { content: "\21C5"; }
.jra-pro-container .jra-pro-summary-table thead th.jra-pro-summary-sortable:hover { background: #2563eb; }
.jra-pro-container .jra-pro-summary-table thead th.jra-pro-summary-sortable.jra-pro-summary-active-sort { background: #3b82f6; }
.jra-pro-summary-active-sort .jra-pro-summary-sort-indicator { color: #ffffff; }
.jra-pro-summary-active-sort .jra-pro-summary-sort-indicator::after { content: "\25BC"; }
.jra-pro-summary-active-sort[data-jra-pro-sort-dir="asc"] .jra-pro-summary-sort-indicator::after { content: "\25B2"; }

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

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

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

/* ============================================================
   8. コース解説枠（レースブロック最下部・タブ外）
      ★本文は do_blocks 済みの信頼 HTML（Gutenberg ブロック）を JS が innerHTML 直挿し。
        本文クラス（wp-block-* 等）はテーマ依存ゆえ最小余白・見出し体裁のみ自前で当てる。
   ============================================================ */
.jra-pro-course-feature {
  margin: 30px 0 20px;
  padding: 20px;
  background: #ffffff;
  border: 1px solid var(--jra-pro-border-soft);
  border-radius: 8px;
}
.jra-pro-container .jra-pro-course-feature-title {
  margin: 0 0 15px;
  font-size: 1.2em;
  font-weight: 700;
  color: var(--jra-pro-brand);
  text-align: center;
}
.jra-pro-course-feature-content {
  font-size: 12px;
  line-height: 1.6;
  color: var(--jra-pro-fg);
}
/* 本文（テーマ提供ブロック）の最小余白のみ。色/装飾はテーマに委ねる。 */
.jra-pro-course-feature-content p { margin: 0 0 15px; font-size: 12px; }
.jra-pro-course-feature-content ul,
.jra-pro-course-feature-content ol { margin: 15px 0; padding-left: 20px; }
.jra-pro-course-feature-content img { max-width: 100%; height: auto; }
/* ★is-not-stacked-on-mobile の自前搭載（無料側と同旨・2026-08-16）: Pro は現状テンプレの
   サーバー描画でコアCSSが載るため実害はないが、per-race フォールバック（v0.3.1）や
   将来のテンプレキャッシュ化でコアCSSが不在になっても横並びが崩れないよう自衛する。 */
.jra-pro-course-feature-content .wp-block-columns.is-not-stacked-on-mobile { flex-wrap: nowrap; }
/* ↑ !important 不使用（§16-b 規範）: 詳細度（0,3,0）で .is-layout-flex（0,1,0）に勝つ（無料側と同旨）。 */

/* ============================================================
   8b. 横断検索（コース解説の下・全場全レース横断・JS が container 直下へ構築）
       ★legacy 移植元:
         realtime-race-report.css 386-632（.cross-search-section / .realtime-condition-search /
           #search-results-table 系）・798-1039（.condition-row 系＝AND条件カード）
         race-report-unified_v2.css 964-1203（#race-training-cross-search-app の .v2-htv-* 系）
       接頭辞を jra-pro- に置換し !important は使わない（.jra-pro-container 前置で特異度を取る）。
   ============================================================ */
.jra-pro-cross-section {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 2px solid #e5e7eb;
}
.jra-pro-container .jra-pro-cross-title {
  margin: 0 0 15px;
  font-size: 1.3em;
  color: var(--jra-pro-brand);
  text-align: center;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--jra-pro-border-soft);
}

/* --- (A) 抽出条件該当馬の横断検索（AND 最大5条件）--- */
.jra-pro-condition-search {
  margin-bottom: 40px;
  padding: 20px;
  background: var(--jra-pro-selector-bg);
  border: 1px solid var(--jra-pro-border-soft);
  border-radius: 8px;
}
.jra-pro-condition-controls {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 20px;
  width: 100%;
}
.jra-pro-condition-line {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px;
}
.jra-pro-condition-line-label { font-weight: 700; min-width: 80px; font-size: 14px; }
.jra-pro-cross-radio { font-weight: 500; font-size: 14px; margin-right: 5px; }

.jra-pro-condition-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 8px 0 4px;
  width: 100%;
}
.jra-pro-condition-row {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 40px 12px 14px;
  background: #ffffff;
  border: 1px solid #cfd8dc;
  border-radius: 6px;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.jra-pro-condition-row.jra-pro-condition-error { border-color: #e53935; background: #fff5f5; }
.jra-pro-condition-row-header {
  font-weight: 700;
  color: var(--jra-pro-brand);
  min-width: 56px;
  font-size: 14px;
}
.jra-pro-condition-field {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding-right: 10px;
  border-right: 1px dashed #e0e0e0;
}
.jra-pro-condition-field:last-of-type { border-right: none; padding-right: 0; }
.jra-pro-condition-field label { font-weight: 500; margin-right: 4px; font-size: 13px; }
/* AND バッジ（2件目以降のみ）＝legacy .condition-row + .condition-row::before */
.jra-pro-condition-row + .jra-pro-condition-row::before {
  content: "AND";
  position: absolute;
  top: -10px;
  left: 16px;
  background: #ffb300;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  letter-spacing: 0.5px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.jra-pro-condition-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  background: #ffffff;
  color: #666666;
  border: 1px solid #cccccc;
  border-radius: 50%;
  cursor: pointer;
  line-height: 1;
  font-size: 14px;
  font-weight: 700;
  padding: 0;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.jra-pro-condition-remove:hover { background: #fce4ec; color: #c62828; border-color: #c62828; }
.jra-pro-condition-row[data-jra-pro-only-row="true"] .jra-pro-condition-remove { display: none; }

.jra-pro-condition-input-group {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px solid var(--jra-pro-border-soft);
}
.jra-pro-condition-threshold {
  padding: 5px 8px;
  border: 1px solid #cccccc;
  border-radius: 4px;
  width: 80px;
  font-size: 13px;
}
.jra-pro-condition-rank {
  padding: 5px 8px;
  border: 1px solid #cccccc;
  border-radius: 4px;
  background: #ffffff;
  font-size: 13px;
}

.jra-pro-condition-actions-line { margin-top: 4px; }
.jra-pro-condition-add {
  padding: 8px 14px;
  background: #ffffff;
  color: #0277bd;
  border: 1px dashed #0277bd;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
  transition: background-color 0.15s ease;
}
.jra-pro-condition-add:hover:not(:disabled) { background: #e3f2fd; }
.jra-pro-condition-add:disabled { color: #aaaaaa; border-color: #cccccc; cursor: not-allowed; }
.jra-pro-condition-count { font-size: 12px; color: #666666; margin-left: 8px; }
.jra-pro-condition-apply {
  padding: 10px 20px;
  font-size: 14px;
  background: #007bff;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 700;
  transition: background-color 0.2s;
}
.jra-pro-condition-apply:hover { background: #0056b3; }
.jra-pro-condition-reset {
  margin-left: 8px;
  padding: 10px 16px;
  background: #eceff1;
  color: #455a64;
  border: 1px solid #b0bec5;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.15s ease;
}
.jra-pro-condition-reset:hover { background: #cfd8dc; }

.jra-pro-condition-results { margin-top: 15px; }
.jra-pro-container .jra-pro-condition-results-message {
  font-style: italic;
  color: #6c757d;
  text-align: center;
  padding: 20px;
  margin: 0;
}
.jra-pro-condition-results-table {
  max-height: 400px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--jra-pro-border-soft);
  border-radius: 4px;
}
.jra-pro-container .jra-pro-condition-results-table table {
  width: 100%;
  min-width: max-content;
  border-collapse: collapse;
  font-size: 13px;
}
.jra-pro-container .jra-pro-condition-results-table th,
.jra-pro-container .jra-pro-condition-results-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #e9ecef;
  text-align: center;
  white-space: nowrap;
}
.jra-pro-container .jra-pro-condition-results-table th { background: #e9ecef; font-weight: 700; }
/* ★legacy は2段ヘッダの両行を top:0 で sticky にしており下段が上段の裏に隠れる。
   ここは上段のみ sticky にして重なりを避ける（表示位置・色は legacy と同じ）。 */
.jra-pro-container .jra-pro-condition-results-table thead tr:first-child th {
  position: sticky;
  top: 0;
  z-index: 1;
}
.jra-pro-condition-results-table td.jra-pro-cond-left { text-align: left; }
.jra-pro-condition-results-table tbody tr:hover { background: #e9ecef; }
.jra-pro-cond-result-row { cursor: pointer; }
.jra-pro-container .jra-pro-condition-results-table th.jra-pro-cond-group-header {
  background: #cfe8ff;
  border-left: 2px solid #90caf9;
  font-size: 12px;
}
.jra-pro-container .jra-pro-condition-results-table th.jra-pro-cond-sub-header {
  background: #e3f2fd;
  font-size: 12px;
  font-weight: 600;
}
.jra-pro-container .jra-pro-condition-results-table th.jra-pro-cond-group-first,
.jra-pro-container .jra-pro-condition-results-table td.jra-pro-cond-group-first {
  border-left: 2px solid #90caf9;
}

/* --- (B) 追い切り評価 レース横断検索（偏差値／自己最速）--- */
.jra-pro-training-cross { margin-bottom: 20px; }
.jra-pro-cross-block { margin-bottom: 20px; }
.jra-pro-container .jra-pro-cross-subtitle {
  margin: 0 0 10px;
  color: #1f2937;
  font-size: 1em;
  border-bottom: 1px solid #f3f4f6;
  padding-bottom: 5px;
  text-align: center;
}
.jra-pro-cross-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}
.jra-pro-cross-control-item { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.jra-pro-cross-control-item label {
  font-size: 0.9em;
  color: #374151;
  white-space: nowrap;
  flex-shrink: 0;
}
.jra-pro-cross-range-value {
  display: inline-block;
  font-weight: 700;
  color: #2563eb;
  margin-left: 5px;
  min-width: 25px;
  text-align: right;
}
.jra-pro-cross-select {
  padding: 8px 10px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 0.9em;
  background: #ffffff;
  flex-grow: 1;
  min-width: 150px;
  cursor: pointer;
}
.jra-pro-cross-range { flex-grow: 1; accent-color: #2563eb; }
.jra-pro-cross-apply {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #2563eb;
  border-radius: 4px;
  font-size: 0.9em;
  background: #2563eb;
  color: #ffffff;
  cursor: pointer;
  transition: background-color 0.2s;
}
.jra-pro-cross-apply:hover { background: #1d4ed8; }
@media (min-width: 768px) {
  .jra-pro-cross-controls { flex-direction: row; align-items: center; gap: 15px; }
  .jra-pro-cross-control-item { flex-grow: 1; }
  .jra-pro-cross-control-item:nth-child(2) { flex-grow: 2; }
  .jra-pro-cross-control-item:last-child { flex-grow: 0; width: auto; min-width: 120px; }
  .jra-pro-cross-apply { width: auto; }
}
.jra-pro-cross-results {
  position: relative;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  background: #f9fafb;
}
.jra-pro-cross-scroll {
  max-height: 300px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
.jra-pro-cross-result-header,
.jra-pro-cross-result-item {
  display: grid;
  gap: 6px;
  align-items: center;
  padding: 8px;
  border-bottom: 1px solid #f3f4f6;
  font-size: 0.85em;
}
.jra-pro-cross-result-item { cursor: pointer; transition: background-color 0.15s ease; }
.jra-pro-cross-result-item:hover { background: #eff6ff; }
.jra-pro-cross-result-item:active { background: #dbeafe; }
.jra-pro-cross-result-item:last-child { border-bottom: none; }
.jra-pro-cross-result-header span,
.jra-pro-cross-result-item span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}
.jra-pro-cross-result-header span:nth-child(4),
.jra-pro-cross-result-item span:nth-child(4) { text-align: left; }
.jra-pro-cross-result-header {
  position: sticky;
  top: 0;
  z-index: 1;
  font-weight: 700;
  background: #e5e7eb;
  border-bottom: 1px solid #d1d5db;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* 列幅（legacy 1162-1184 の grid-template-columns をそのまま） */
.jra-pro-cross-cols-dev {
  grid-template-columns:
    minmax(40px, 0.7fr) minmax(30px, 0.4fr) minmax(30px, 0.4fr) minmax(130px, 2.2fr)
    minmax(45px, 0.7fr) minmax(70px, 1fr) minmax(50px, 0.8fr);
}
.jra-pro-cross-cols-best {
  grid-template-columns:
    minmax(40px, 0.7fr) minmax(30px, 0.4fr) minmax(30px, 0.4fr) minmax(130px, 2.2fr)
    minmax(70px, 1fr) minmax(40px, 0.6fr) minmax(50px, 0.8fr);
}
.jra-pro-container .jra-pro-cross-no-data {
  margin: 0;
  text-align: center;
  padding: 15px;
  color: #6b7280;
  font-size: 0.95em;
  background: #f9fafb;
  border-radius: 3px;
}
@media (max-width: 767px) {
  .jra-pro-cross-result-header,
  .jra-pro-cross-result-item { font-size: 0.75em; gap: 3px; padding: 5px; }
}
/* 条件検索のモバイル（legacy 579-632 / 995-1038） */
@media (max-width: 768px) {
  .jra-pro-condition-search { padding: 15px; }
  .jra-pro-condition-line-label {
    width: 100%;
    margin-bottom: 8px;
    padding-bottom: 5px;
    border-bottom: 1px solid #e9ecef;
  }
  .jra-pro-condition-row {
    flex-direction: column;
    align-items: stretch;
    padding: 22px 14px 12px;
    gap: 8px;
  }
  .jra-pro-condition-field {
    border-right: none;
    border-bottom: 1px dashed #eeeeee;
    padding: 4px 0;
  }
  .jra-pro-condition-field:last-of-type { border-bottom: none; }
  .jra-pro-condition-row-header {
    margin-bottom: 4px;
    padding-bottom: 4px;
    border-bottom: 1px solid #f0f0f0;
  }
  .jra-pro-condition-row + .jra-pro-condition-row::before { left: 50%; transform: translateX(-50%); }
  .jra-pro-condition-remove { top: 6px; right: 6px; width: 24px; height: 24px; }
  .jra-pro-condition-actions-line { flex-wrap: wrap; }
  .jra-pro-condition-add { flex: 1 1 auto; }
  .jra-pro-condition-input-group { margin-left: 8px; padding-left: 8px; flex-shrink: 0; }
  .jra-pro-condition-threshold { width: 80px; padding: 4px 6px; font-size: 13px; }
  .jra-pro-condition-apply { width: 100%; margin-top: 10px; }
  .jra-pro-container .jra-pro-condition-results-table th,
  .jra-pro-container .jra-pro-condition-results-table td { padding: 6px 5px; font-size: 12px; }
}

/* ============================================================
   9. v2.0/v1.0 モード切替トグル（container 先頭・has_old 単一 bool が真のときのみ JS が構築）
   ============================================================ */
.jra-pro-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-pro-mode-switch {
  display: flex;
  align-items: center;
  gap: 10px;
}
.jra-pro-mode-zenjitsu-label,
.jra-pro-mode-old-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--jra-pro-fg-muted);
  transition: color 0.3s ease, opacity 0.3s ease;
}
.jra-pro-mode-zenjitsu-label.jra-pro-active {
  color: var(--jra-pro-brand);
  font-weight: 700;
}
.jra-pro-mode-old-label.jra-pro-active {
  color: #4b5563;
  font-weight: 700;
}
/* トグルスイッチ本体（チェックボックスを覆うスライダー）。 */
.jra-pro-mode-toggle {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
}
.jra-pro-mode-toggle input {
  width: 0;
  height: 0;
  opacity: 0;
}
.jra-pro-mode-toggle-slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--jra-pro-brand); /* v2.0（新）時は青＝ON 表示 */
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.3s ease;
}
.jra-pro-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-pro-mode-toggle input:checked + .jra-pro-mode-toggle-slider { background: #d1d5db; }
.jra-pro-mode-toggle input:checked + .jra-pro-mode-toggle-slider::before { transform: translateX(20px); }
.jra-pro-mode-toggle input:focus-visible + .jra-pro-mode-toggle-slider {
  outline: 2px solid var(--jra-pro-focus);
  outline-offset: 2px;
}

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

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

.jra-pro-fallback { padding: 0 0 8px; } /* 左右0＝no-JS フォールバック表も画面幅いっぱい（JS-UI と整合） */
.jra-pro-container .jra-pro-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-pro-ink);
  border: 0;
  background: none;
}
.jra-pro-fallback .jra-pro-race { margin: 0 0 22px; }
.jra-pro-container .jra-pro-fallback .jra-pro-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-pro-fallback .jra-pro-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.jra-pro-fallback .jra-pro-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.jra-pro-fallback .jra-pro-table th,
.jra-pro-fallback .jra-pro-table td {
  border: 1px solid var(--jra-pro-grid);
  padding: 3px 6px;
  text-align: center;
  white-space: nowrap;
}
.jra-pro-fallback .jra-pro-table thead th {
  background: var(--jra-pro-th-bg);
  color: var(--jra-pro-fg);
  font-weight: 700;
}
.jra-pro-fallback .jra-pro-table tbody tr:nth-child(even) { background: var(--jra-pro-zebra); }
.jra-pro-fallback .jra-pro-umamei { text-align: left; }
.jra-pro-fallback .jra-pro-umaban,
.jra-pro-fallback .jra-pro-tansho,
.jra-pro-fallback .jra-pro-fukusho,
.jra-pro-fallback .jra-pro-kitaichi,
.jra-pro-fallback .jra-pro-odds-proper,
.jra-pro-fallback .jra-pro-odds-target,
.jra-pro-fallback .jra-pro-rank,
.jra-pro-fallback .jra-pro-sogo { font-variant-numeric: tabular-nums; }

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

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

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

/* ============================================================================
 * Pro 専用 UI（各場ビュー由来の上記スタイルに追記・docs/09 §C/§5.2）。
 *   コントロールバー（前日/リアルタイム トグル・更新ボタン・最終更新・ローディング）／
 *   競馬場切替タブ（全場一括fetchの中で場を選ぶ）／取消馬（realtime_rank===0）／状態メッセージ。
 * 中央/NAR class を参照しない・!important 実宣言 0・全接頭辞 jra-pro-。
 * ============================================================================ */

/* 認可待ち/非会員/読み込み中の状態メッセージ（container 直下に textContent で表示）。 */
.jra-pro-message {
  padding: 20px 16px;
  text-align: center;
  color: var(--jra-pro-fg-muted);
  font-size: 14px;
  line-height: 1.7;
}
.jra-pro-message-strong { color: var(--jra-pro-ink); font-weight: 700; }

/* 日付タブ帯（container 先頭・窓口の日付セレクタ同型。dates を持たない日は空＝畳む）。 */
.jra-pro-container .jra-pro-datestrip {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 4px;
  margin: 0 0 10px;
  border-bottom: 1px solid var(--jra-pro-rule-soft); /* 下線タブの土台罫 */
}
.jra-pro-container .jra-pro-datestrip:empty { display: none; }
.jra-pro-container .jra-pro-datenav {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  border: 0;
  background: none;
  color: var(--jra-pro-muted);
  font-family: 'Roboto Mono', monospace;
  font-weight: 400;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.jra-pro-container .jra-pro-datenav[disabled] { opacity: 0.3; cursor: default; }
.jra-pro-container .jra-pro-datepills {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: stretch;
  gap: 2px;
}
.jra-pro-container .jra-pro-datepill {
  flex: 1;
  min-width: 0;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 9px 4px;
  border: 0;
  border-bottom: 2px solid transparent; /* 既定は透明＝土台罫が透ける。アクティブで青下線に */
  margin-bottom: -1px;
  background: none;
  color: var(--jra-pro-muted);
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.jra-pro-container .jra-pro-datepill.jra-pro-dateactive {
  color: var(--jra-pro-blue);
  border-bottom-color: var(--jra-pro-blue);
}
.jra-pro-container .jra-pro-datepill:focus-visible,
.jra-pro-container .jra-pro-datenav:focus-visible {
  outline: 2px solid var(--jra-pro-focus);
  outline-offset: 2px;
}
/* 日付切替の失敗/空データ通知（帯の下段に1行・空なら畳む）。 */
.jra-pro-container .jra-pro-datestrip-note {
  flex: 0 0 100%;
  padding: 4px 2px 6px;
  font-size: 11px;
  color: var(--jra-pro-fg-muted);
}
.jra-pro-container .jra-pro-datestrip-note:empty { display: none; }
/* 過去日ジャンプ（月別セレクト・Pro 遡及=2025/10/4〜が長くタブ帯のパンでは届きにくいときだけ JS が生成）。 */
.jra-pro-container .jra-pro-datejump {
  flex: none;
  align-self: center;
  max-width: 11em;
  margin-left: 4px;
  padding: 2px 4px;
  font-size: 12px;
  color: var(--jra-pro-fg-muted);
  background: transparent;
  border: 1px solid var(--jra-pro-rule-soft);
  border-radius: 4px;
}
.jra-pro-container .jra-pro-datejump:focus-visible {
  outline: 2px solid var(--jra-pro-focus);
  outline-offset: 2px;
}

/* コントロールバー（波乱度予想の直下・タブの直前）。 */
.jra-pro-container .jra-pro-control-bar {
  display: flex;
  flex-wrap: nowrap; /* ★モバイルでも1行に収める（2026-08-16 ユーザー指示。刻印の「更新」語尾撤去とセットで
                        412px 幅でも収まる実測。トグル・刻印・更新ボタンは下の nowrap 群で折返し禁止） */
  align-items: center;
  gap: 10px 16px;
  padding: 8px 10px;
  margin: 10px 0;
  background: var(--jra-pro-selector-bg);
  border: 1px solid var(--jra-pro-border-soft);
  border-radius: 8px;
}

/* 前日/リアルタイム トグル（各場の v2/v1 モードトグルと同じ見た目の小型版）。 */
.jra-pro-container .jra-pro-index-mode-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.jra-pro-container .jra-pro-mode-static-label,
.jra-pro-container .jra-pro-mode-realtime-label {
  font-size: 12px;
  color: var(--jra-pro-muted);
  cursor: pointer;
  user-select: none;
  white-space: nowrap; /* 1行化（ラベル内で折り返さない） */
}
.jra-pro-container .jra-pro-mode-static-label.jra-pro-active,
.jra-pro-container .jra-pro-mode-realtime-label.jra-pro-active {
  color: var(--jra-pro-brand);
  font-weight: 700;
}
.jra-pro-container .jra-pro-toggle-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
}
.jra-pro-container .jra-pro-toggle-switch input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.jra-pro-container .jra-pro-toggle-slider {
  position: absolute;
  inset: 0;
  background: #c1cbda;
  border-radius: 999px;
  transition: background 0.15s ease;
}
.jra-pro-container .jra-pro-toggle-slider::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: 18px;
  height: 18px;
  background: #ffffff;
  border-radius: 50%;
  transition: transform 0.15s ease;
}
.jra-pro-container .jra-pro-toggle-switch input:checked + .jra-pro-toggle-slider {
  background: var(--jra-pro-brand);
}
.jra-pro-container .jra-pro-toggle-switch input:checked + .jra-pro-toggle-slider::before {
  transform: translateX(18px);
}
.jra-pro-container .jra-pro-toggle-switch input:focus-visible + .jra-pro-toggle-slider {
  outline: 2px solid var(--jra-pro-focus);
  outline-offset: 2px;
}

/* 現在モード表示・最終更新・更新ボタン・ローディング。 */
.jra-pro-container .jra-pro-current-mode-display { font-size: 12px; color: var(--jra-pro-muted); }
.jra-pro-container .jra-pro-current-mode-label.jra-pro-mode-realtime { color: var(--jra-pro-brand); font-weight: 700; }
.jra-pro-container .jra-pro-refresh-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.jra-pro-container .jra-pro-last-updated { font-size: 11px; color: var(--jra-pro-faint); white-space: nowrap; }
.jra-pro-container .jra-pro-refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 12px;
  color: var(--jra-pro-brand);
  background: #ffffff;
  border: 1px solid var(--jra-pro-brand);
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap; /* 1行化（「更新」がボタン内で折り返さない） */
}
/* 小幅端末では余白と文字を詰めて1行を維持（412px 実測で余裕・360px 級への保険） */
@media (max-width: 420px) {
  .jra-pro-container .jra-pro-control-bar { gap: 8px 10px; padding: 8px; }
  .jra-pro-container .jra-pro-index-mode-switch { gap: 6px; }
  .jra-pro-container .jra-pro-mode-static-label,
  .jra-pro-container .jra-pro-mode-realtime-label { font-size: 11px; }
  .jra-pro-container .jra-pro-last-updated { font-size: 10px; }
  .jra-pro-container .jra-pro-refresh-btn { padding: 4px 8px; font-size: 11px; }
}
.jra-pro-container .jra-pro-refresh-btn:hover { background: var(--jra-pro-tab-active-bg); }
.jra-pro-container .jra-pro-refresh-btn:focus-visible { outline: 2px solid var(--jra-pro-focus); outline-offset: 2px; }
.jra-pro-container .jra-pro-loading-indicator {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--jra-pro-muted);
}
.jra-pro-container .jra-pro-loading-indicator.jra-pro-active { display: inline-flex; }
.jra-pro-container .jra-pro-spinner {
  width: 12px;
  height: 12px;
  border: 2px solid var(--jra-pro-rule-soft);
  border-top-color: var(--jra-pro-brand);
  border-radius: 50%;
  animation: jra-pro-spin 0.8s linear infinite;
}
@keyframes jra-pro-spin { to { transform: rotate(360deg); } }

/* realtime 未取得警告（AM9時前など）。 */
.jra-pro-container .jra-pro-realtime-warning {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  margin: 0 0 10px;
  font-size: 12px;
  color: #8a6d00;
  background: rgba(255, 214, 0, 0.12);
  border: 1px solid rgba(255, 214, 0, 0.5);
  border-radius: 6px;
}
.jra-pro-container .jra-pro-realtime-warning.jra-pro-active { display: flex; }

/* 競馬場切替タブ（全場一括fetchの中で1場を選ぶ・現在地=青/他場=グレー）。 */
.jra-pro-container .jra-pro-venue-switch { margin: 0 0 10px; }
.jra-pro-container .jra-pro-venue-switch-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}
.jra-pro-container .jra-pro-venuetab {
  flex: 0 0 auto;
  padding: 5px 12px;
  font-size: 13px;
  color: var(--jra-pro-rpill-future-fg);
  background: var(--jra-pro-rpill-future-bg);
  border: 1px solid var(--jra-pro-rpill-future-bd);
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}
.jra-pro-container .jra-pro-venuetab:hover { background: var(--jra-pro-tab-hover); }
.jra-pro-container .jra-pro-venuetab-current {
  color: #ffffff;
  background: var(--jra-pro-blue);
  border-color: var(--jra-pro-blue);
  cursor: default;
  font-weight: 700;
}
.jra-pro-container .jra-pro-venuetab:focus-visible { outline: 2px solid var(--jra-pro-focus); outline-offset: 2px; }

/* 取消・除外馬（realtime_rank_tansho===0）＝行を淡色＋打消し線で明示。 */
.jra-pro-container tr.jra-pro-scratched td {
  color: var(--jra-pro-faint);
  text-decoration: line-through;
  background: #eff4fc;
}
.jra-pro-container tr.jra-pro-scratched td.jra-pro-umaban { text-decoration: none; }