:root {
  /* ── 面 ── */
  --bg: #eef1f5;
  --surface: #ffffff;
  --surface-2: #f6f8fa;
  --line: #e2e6ec;
  --line-strong: #cfd6df;

  /* ── 文字 ── */
  --text: #14181d;
  --text-2: #4a545f;
  --muted: #78838f;
  --on-brand: #ffffff;

  /* ── ブランド（濃い青をメインカラーにする） ── */
  --brand: #0d3f96;
  --brand-deep: #0a2f73;
  --brand-tint: #e7eefb;
  --accent: #1560d0;

  /* ── 状態 ── */
  --win: #d4152e;
  --win-tint: #fdecee;
  --warn: #b35c00;

  /* ── 形 ── */
  --r-card: 16px;
  --r-inner: 10px;
  --r-pill: 999px;
  --tap: 44px;
  --pad: 14px;
  --gap: 12px;
  --shadow: 0 1px 2px rgba(16, 32, 56, .06), 0 1px 8px rgba(16, 32, 56, .04);

  /* ── タイポグラフィ（3段 + 数値強調） ── */
  --fs-title: 17px;
  --fs-body: 15px;
  --fs-meta: 12px;
  --fs-stat: 22px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1216;
    --surface: #181d23;
    --surface-2: #131820;
    --line: #29313a;
    --line-strong: #39434f;

    --text: #e9edf2;
    --text-2: #b3bdc8;
    --muted: #8b96a2;

    --brand: #12326f;
    --brand-deep: #0d2451;
    --brand-tint: #16233c;
    --accent: #6ea8ff;

    --win: #ff6b7d;
    --win-tint: #2a1a1f;
    --warn: #e0a05a;

    --shadow: 0 1px 2px rgba(0, 0, 0, .4);
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  font-size: var(--fs-body);
  line-height: 1.55;
  /* 下部ナビの高さ + セーフエリア分を空ける。最後の行が隠れないように。 */
  padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  -webkit-text-size-adjust: 100%;
}
a { color: var(--accent); text-decoration: none; }

/* ══ ヘッダー ════════════════════════════════════════════════ */
/*
   2種類ある。
     .bar   … 下位画面。戻る + タイトル。スクロールしても残す。
     .brand … ホーム。アプリ名を出す。高さがあるので固定しない。
*/
header {
  background: var(--brand);
  color: var(--on-brand);
  padding-top: env(safe-area-inset-top, 0px);
}
header.bar {
  position: sticky; top: 0; z-index: 10;
}
header .row {
  display: flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 8px var(--pad);
}
header .back {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; margin-left: -8px;
  font-size: 22px; line-height: 1; color: var(--on-brand);
}
header h1 {
  margin: 0; font-size: var(--fs-title); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
header .sub {
  margin-left: auto; font-size: var(--fs-meta);
  color: rgba(255, 255, 255, .78); white-space: nowrap;
}
header.brand .row { min-height: 56px; }
header.brand .logo {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 18px; font-weight: 700; letter-spacing: .04em;
}
header.brand .logo .ic { width: 24px; height: 24px; }

main { padding: var(--pad); }

/* ══ 共通 ══════════════════════════════════════════════════ */
.section { margin: 0 0 20px; }
.section > h2 {
  margin: 0 0 8px 2px;
  font-size: var(--fs-meta); font-weight: 700; letter-spacing: .02em;
  color: var(--muted);
}
.muted { color: var(--muted); }
.note { font-size: var(--fs-meta); color: var(--muted); }
.mono { font-variant-numeric: tabular-nums; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
}
.empty {
  padding: 28px 14px; text-align: center; color: var(--muted);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); box-shadow: var(--shadow);
}

/* ══ リスト（行が主役。カードを積み上げない） ═══════════════ */
.list {
  list-style: none; margin: 0; padding: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.list > li + li { border-top: 1px solid var(--line); }
.list a, .list .row {
  display: flex; align-items: center; gap: 12px;
  min-height: var(--tap); padding: 12px var(--pad); color: inherit;
}
.list a:active { background: var(--brand-tint); }
.list .grow { flex: 1; min-width: 0; }
.list .name { font-weight: 600; }
.list .meta { font-size: var(--fs-meta); color: var(--muted); }
.list .chev { color: var(--line-strong); font-size: 18px; }

/* ══ チップ ════════════════════════════════════════════════ */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips a, .chips .off {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap); padding: 8px 16px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-pill); box-shadow: var(--shadow);
  font-size: 14px; font-weight: 600;
}
.chips a.on { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.chips .off { color: var(--muted); opacity: .55; }

/* ══ 6艇の比較表（レース詳細の主役） ════════════════════════ */
.grid {
  width: 100%; border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}
.grid th, .grid td {
  padding: 10px 6px; text-align: center;
  border-top: 1px solid var(--line); white-space: nowrap;
}
.grid thead th {
  border-top: 0; background: var(--surface-2);
  font-size: 11px; font-weight: 700; color: var(--muted);
}
.grid td.player { text-align: left; white-space: normal; min-width: 0; }
.grid td.player .nm { font-weight: 600; }
.grid td.player .sub { font-size: 11px; color: var(--muted); }
.grid tr.first td { background: var(--win-tint); }
.grid .pos { font-weight: 700; font-size: var(--fs-title); }
.grid .pos.p1 { color: var(--win); }

/* 艇番カラー。公式の枠色に合わせる。番号だけだと6行の見分けが遅い。 */
.boat {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 7px;
  font-weight: 700; font-size: 13px; color: #111;
}
.b1 { background: #ffffff; border: 1px solid var(--line-strong); }
.b2 { background: #2b2b2b; color: #fff; }
.b3 { background: #e8402a; color: #fff; }
.b4 { background: #2f6fd0; color: #fff; }
.b5 { background: #f5d000; }
.b6 { background: #34a853; color: #fff; }

/* ══ バッジ ════════════════════════════════════════════════ */
.badge {
  display: inline-block; padding: 2px 8px; border-radius: 6px;
  font-size: 11px; font-weight: 700;
  border: 1px solid var(--line-strong); color: var(--text-2);
}
.badge.warn { color: var(--win); border-color: var(--win); background: var(--win-tint); }

/* ══ 払戻 ══════════════════════════════════════════════════ */
.pay {
  width: 100%; border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.pay th, .pay td {
  padding: 8px; border-top: 1px solid var(--line); font-size: 14px;
}
.pay th { text-align: left; color: var(--muted); font-weight: 700; width: 5.5em; }
.pay td.comb { text-align: left; font-weight: 600; }
.pay td.amt { text-align: right; font-weight: 700; }
.pay td.pop { text-align: right; color: var(--muted); font-size: 11px; width: 4.5em; }

/* ══ 折りたたみ（公式原文はここに畳む） ═════════════════════ */
details {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card); box-shadow: var(--shadow);
  padding: 0 var(--pad); margin-top: var(--gap);
}
details > summary {
  min-height: var(--tap); display: flex; align-items: center;
  cursor: pointer; font-size: 14px; font-weight: 600; color: var(--accent);
}
details[open] > summary { border-bottom: 1px solid var(--line); }
details .body { padding: 12px 0; font-size: 14px; }
details dl { margin: 0; display: grid; grid-template-columns: 7em 1fr; gap: 6px 10px; }
details dt { color: var(--muted); }
details dd { margin: 0; word-break: break-all; }

/* ══ フォーム ══════════════════════════════════════════════ */
form.search { display: grid; gap: 12px; }
label {
  display: block; margin-bottom: 6px;
  font-size: var(--fs-meta); font-weight: 600; color: var(--muted);
}
input, select, button {
  font: inherit; width: 100%; min-height: var(--tap);
  padding: 10px 12px; border-radius: var(--r-inner);
  border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--text);
}
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
button {
  background: var(--brand); color: var(--on-brand); border-color: var(--brand);
  font-weight: 700; box-shadow: var(--shadow);
}

/* ══ 下部固定ナビ（片手で届く位置に主要導線を置く） ═════════ */
nav.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
/*
   高さとアイコンは「押せる最小」から決める。
   セル自体が 48px×(画面幅/4) あるので、iOS の 44pt 目安は満たす。
   アイコンを 19px まで落としても、タップ領域は1ピクセルも狭くならない。
*/
nav.tabs a, nav.tabs .off {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; min-height: 48px; font-size: 10px; font-weight: 600; color: var(--muted);
}
nav.tabs a.on { color: var(--brand); }
/* 線幅も落とす。同じ寸法でも、太いままだと小さくした分だけ黒く見える。 */
nav.tabs .ic { width: 19px; height: 19px; stroke-width: 1.6; }
/* 未実装の導線は押せることを示さない（Supervisor 決定: 無効表示） */
nav.tabs .off { opacity: .38; cursor: default; }

/* ══ カレンダー ════════════════════════════════════════════ */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.cal .dow {
  text-align: center; font-size: 11px; font-weight: 600;
  color: var(--muted); padding: 2px 0;
}
.cal a, .cal span {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 46px; border-radius: var(--r-inner); font-size: 15px;
  background: var(--surface); border: 1px solid var(--line);
}
.cal span { opacity: .3; }
.cal a { font-weight: 600; box-shadow: var(--shadow); }
.cal a .n { font-size: 10px; font-weight: 400; color: var(--muted); }
.cal a.has { border-color: var(--brand); }

/* ══ アイコン（インライン SVG・単色） ══════════════════════ */
/*
   色は持たせない。stroke: currentColor なので、置いた場所の color を継ぐ。
   ヘッダーでは白、下部ナビでは --muted、選択中は --brand になる。
   ダークテーマの追加指定が要らないのはこのため。
*/
.ic { flex: none; display: inline-block; vertical-align: -.18em; }
.chips .ic { width: 16px; height: 16px; margin-right: 6px; color: var(--muted); }
.chips a:active .ic { color: inherit; }

/* ══ ホームの収録量（1行に収める。KPIカードにしない） ═══════ */
.statline {
  display: flex; gap: 18px; align-items: baseline;
  margin: 0 2px 16px; padding: 0;
  font-size: var(--fs-meta); color: var(--muted);
  white-space: nowrap; overflow-x: auto; scrollbar-width: none;
}
.statline::-webkit-scrollbar { display: none; }
.statline b {
  font-size: var(--fs-stat); font-weight: 700; color: var(--text);
  margin-right: 3px; font-variant-numeric: tabular-nums;
}

/* 開催場コードの小バッジ。行の高さは変えない（名前と同じ行に置く）。 */
.list .name .code {
  display: inline-block; min-width: 2.2em; margin-right: 7px;
  padding: 1px 5px; border-radius: 5px;
  background: var(--brand-tint); color: var(--brand);
  font-size: 11px; font-weight: 700; text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ══ 表の行がタップできることを示す ═════════════════════════ */
/*
   行全体が押せるのに手がかりが無いと、R 列のリンクしか押されない。
   列は増やさず、chevron 1つ分だけ幅を取る。
*/
.grid td.cv, .grid th.cv { width: 1.1em; padding-left: 0; padding-right: 8px; }
.grid td.cv .chev { color: var(--line-strong); font-size: 16px; }
.grid tr.tap { cursor: pointer; }
.grid tr.tap:active td { background: var(--brand-tint); }
/* 1着の行はすでに win-tint。押下時に消えないよう、こちらを後に置く。 */
.grid tr.first.tap:active td { background: var(--brand-tint); }

/* 選手名を主、登録番号・級別・支部を従にする（項目は減らさない）。 */
.grid td.player .nm { font-weight: 700; font-size: 14px; }

/* ══ 選手プロフィール（既存の算出値だけを視覚化する） ═══════ */
/*
   主従を分ける。級別・支部・登録番号・出走数は「誰か」を確かめるための
   補助情報なので1行に畳んで muted に落とし、3つの率だけを主役にする。
   密度を下げても縦は伸ばさない（出走履歴を押し下げないため）。
*/
.prof { margin: 0 0 20px; padding: 11px var(--pad) 14px; }
.prof-top {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  padding-bottom: 9px; border-bottom: 1px solid var(--line);
}
.prof-top .grade {
  flex: none; padding: 1px 7px;
  border: 0; background: var(--brand-tint); color: var(--brand);
}
.prof-top .meta {
  min-width: 0; font-size: var(--fs-meta); color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.prof .stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px;
  margin-top: 13px;
}
.prof .s { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.prof .s .k { font-size: 11px; color: var(--muted); white-space: nowrap; }
.prof .s .v {
  font-size: var(--fs-stat); font-weight: 700; line-height: 1.05;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.prof .s .bar {
  display: block; height: 5px; margin-top: 1px;
  border-radius: var(--r-pill);
  background: var(--line); overflow: hidden;
}
/* バーは軌道が見えて初めて割合として読める。塗りだけ濃くする。 */
.prof .s .bar i { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
/* 3列が最も苦しいのは 320px。ラベルだけ先に縮めて、数値と軌道は守る。 */
@media (max-width: 340px) {
  .prof .s .k { font-size: 10px; }
  .prof .s .v { font-size: 20px; }
}

/* 進入コース別。数字は残し、下段に高さだけのバーを敷く。 */
.grid tr.barrow td { border-top: 0; padding: 0 6px 10px; }
.grid td.cbar span {
  display: flex; height: 26px; align-items: flex-end; justify-content: center;
}
.grid td.cbar i {
  display: block; width: 60%; min-width: 10px; min-height: 3px;
  border-radius: 3px; background: var(--accent); opacity: .85;
}

/* 決まり手の傾向。既存の件数・%はそのまま、下に細いバーを足すだけ。 */
.list .mrow .grow { display: flex; flex-direction: column; gap: 5px; }
.mbar {
  display: block; height: 3px; border-radius: var(--r-pill);
  background: var(--line); overflow: hidden; max-width: 180px;
}
.mbar i { display: block; height: 100%; background: var(--accent); }

/* ══ エラー（表示に失敗したときだけ出す） ═══════════════════ */
.err {
  margin-top: 12vh; padding: 28px var(--pad) 30px; text-align: center;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); box-shadow: var(--shadow);
}
.err .t { margin: 0; font-size: var(--fs-title); font-weight: 700; }
.err .s { margin: 6px 0 0; font-size: var(--fs-meta); color: var(--muted); }
.err .btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap); min-width: 180px; margin-top: 18px; padding: 0 22px;
  border-radius: var(--r-pill);
  background: var(--brand); color: var(--on-brand);
  font-weight: 700; box-shadow: var(--shadow);
}
.err .btn[data-busy] { opacity: .5; pointer-events: none; }

/* ══ 収支 ══════════════════════════════════════════════════ */
/*
   最上部に「損益」だけを大きく出す。回収率も的中率も大事だが、
   毎日開いて最初に知りたいのは1つである。残りは同じカードの中に畳む。
   カードは1枚だけにする。3枚並べるとスクロールが伸びて履歴が沈む。
*/
.chips.seg { gap: 6px; margin-bottom: 14px; }
.chips.seg a { flex: 1; justify-content: center; text-align: center; }

.bal-kpi { margin: 0 0 20px; padding: 14px var(--pad) 16px; }
.bal-kpi .lead .k { font-size: 11px; color: var(--muted); }
.bal-kpi .lead .v {
  font-size: 30px; font-weight: 800; line-height: 1.1;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.bal-kpi .sub {
  display: flex; gap: 18px; margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--line);
}
.bal-kpi .grid2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px;
  margin-top: 10px;
}
.bal-kpi .k { font-size: 11px; color: var(--muted); margin-right: 6px; }
.bal-kpi b { font-weight: 700; }
.bal-kpi .note { margin: 10px 0 0; }

/* 損益の符号。色は情報であって装飾ではないので、プラスとマイナスだけに使う。 */
.bal { text-align: right; white-space: nowrap; }
.bal b { display: block; font-variant-numeric: tabular-nums; }
.bal .meta { font-size: 11px; color: var(--muted); }
.plus { color: var(--brand); }
.minus { color: var(--win); }
td.bal { display: table-cell; }

/* 集計行。既存の .mrow と同じ骨格で、右側に損益を置く。 */
.list a.mrow { display: flex; align-items: center; gap: 10px; }
.list .mrow .bal { flex: none; }

/* ══ 予想 ══════════════════════════════════════════════════ */
/*
   最初に見るのは「買うか」「本命は何か」「どれくらい確かか」の3つ。
   内部スコアは details に畳む。判定の色は情報なので3色だけに絞る。
*/
.dec {
  display: inline-block; min-width: 4.2em; padding: 2px 8px;
  border-radius: var(--r-pill); text-align: center;
  font-size: 11px; font-weight: 700; white-space: nowrap;
}
.dec.bet { background: var(--brand); color: var(--on-brand); }
.dec.watch { background: var(--brand-tint); color: var(--brand); }
.dec.skip { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }

.pred-head { margin: 0 0 20px; padding: 14px var(--pad) 16px; }
.pred-head .top { display: flex; align-items: center; gap: 10px; }
.pred-head .conf { margin-left: auto; font-size: 15px; font-weight: 700; }
.pred-head .pick {
  margin-top: 8px; font-size: 34px; font-weight: 800; letter-spacing: .02em;
  line-height: 1.1; font-variant-numeric: tabular-nums;
}
.pred-head .note { margin: 6px 0 0; }
/* 締切までの残り。判定の右隣に置く。数字が伸びても本命を押し出さない。 */
.pred-head .dl {
  padding: 2px 8px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface-2);
  color: var(--text-2); font-size: 11px; font-weight: 700; white-space: nowrap;
}

/* 予測確率・現在オッズ・期待回収率を横に3つ。狭い画面でも折り返さない。 */
.kv3 {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px; margin: 12px 0 0;
}
.kv3 > div { min-width: 0; }
.kv3 dt { margin: 0; font-size: 11px; color: var(--muted); }
.kv3 dd {
  margin: 2px 0 0; font-size: 15px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 期待回収率は損益分岐を跨ぐかどうかだけを色で示す。 */
.kv3 dd.good, .grid td.good { color: var(--brand); }
.kv3 dd.bad, .grid td.bad { color: var(--win); }

/* 組番の表。横スクロールは表の中だけで起こす。 */
.picks td, .picks th { padding-left: 6px; padding-right: 6px; }
.picks a.send {
  display: inline-block; padding: 2px 8px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface);
  font-size: 11px; font-weight: 700; white-space: nowrap; text-decoration: none;
}

/* ══ 勝負モード ════════════════════════════════════════════ */
/*
   最初に押すものなので、画面の一番上に大きく置く。
   ON/OFF は色ではなく文字でも分かるようにする（屋外で色が飛ぶため）。
*/
.battle {
  margin: 0 0 16px; padding: 12px var(--pad);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); box-shadow: var(--shadow);
}
/* 狭い画面ではボタンを次の行へ送る。見出しを1文字ずつ折り返さない
   ため、.ttl に min-width:0 を置かない（置くと0まで縮む）。 */
.battle .row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.battle .ttl { font-weight: 700; font-size: 15px; flex: 1 1 auto; white-space: nowrap; }
.battle .state {
  flex: none; padding: 2px 10px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface-2);
  color: var(--muted); font-size: 11px; font-weight: 700; white-space: nowrap;
}
.battle .state.on { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.battle .tgl {
  flex: none; margin-left: auto; min-height: 40px; padding: 0 16px;
  border-radius: var(--r-pill); border: 1px solid var(--brand);
  background: var(--brand); color: var(--on-brand);
  font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer;
}
.battle .note { margin: 8px 0 0; }
.battle.sub { margin-bottom: 12px; }
.battle.sub .ttl { font-size: 13px; white-space: normal; }

/* 監視中の札。場名の右に小さく添える。 */
.wtag {
  display: inline-block; margin-left: 4px; padding: 1px 6px;
  border-radius: var(--r-pill); border: 1px solid var(--brand);
  color: var(--brand); font-size: 10px; font-weight: 700; white-space: nowrap;
}

/* 理由は押せる要素ではない。リンクに見せない。 */
.chips.reasons .tag {
  display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px;
  border-radius: var(--r-pill); border: 1px solid var(--line);
  background: var(--surface); color: var(--text-2);
  font-size: 12px;
}

/* 画面幅が広いときは中央に寄せる。スマホ最優先だが、PCで崩さない。 */
@media (min-width: 640px) {
  header .row, main, nav.tabs {
    max-width: 720px; margin-left: auto; margin-right: auto;
  }
  nav.tabs { border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
}