@charset "UTF-8";
/*
 * /ranking-renewal/ ランキング表の追加分。
 *
 * 中身は earr.css の続き。別ファイルにしてあるのは編集の衝突を避けるためで、
 * 設計上の区切りではない。earr.css を全面的に書き換える作業と並行して
 * この一群を足したとき、ファイル単位の上書きで 2 度消えたのが理由。
 * earr.css に依存 (deps) させて必ず後から読ませるので、同じ詳細度の指定は
 * こちらが勝つ。earr.css 側が落ち着いたら、この内容をそちらへ畳んでよい。
 *
 * @package ea-ranking-renewal
 */

/* =========================================================
 * 1) 上位3件の地色
 *
 * 元の #fffcf2 / #fafbfc / #fffaf5 はほぼ白で、1〜3 位が一覧の中で
 * 埋もれていた。金・銀・銅の左端の帯と合う range まで一段だけ濃くする。
 * hover (#fcfdff) と比較中 (--earr-orange-sf) はこの後に定義されている
 * earr.css 側が同詳細度で勝つ必要があるので、ここでも順序を変えない
 * (このファイルは earr.css の全体より後に読まれるため、!important は使わず
 *  詳細度も同じにして、hover/比較中には負けたままにしてある)。
 * ======================================================= */
.earr-table tbody tr.earr-top1 td { background: #fff8e6; }
.earr-table tbody tr.earr-top2 td { background: #f3f5f9; }
.earr-table tbody tr.earr-top3 td { background: #fdf3ea; }

/* hover と比較中は earr.css 側にあるが、このファイルが後に読まれる以上
   同詳細度では負ける。ここで同じ指定を置き直して優先順を元に戻す。 */
.earr-table tbody tr:hover td {
	background: #fcfdff;
}

.earr-table tbody tr.is-compared td {
	background: var(--earr-orange-sf);
}

/* =========================================================
 * 2) 損益推移 (月次カーブ)
 *
 * 金額だけでは「毎月積み上げたのか、一度の大勝ちで作った額なのか」が
 * 区別できない。同じ行に形を並べて、数字と一緒に読めるようにする。
 * SVG は JS が今表示している 20 行ぶんだけ入れる (164 行を先に描かない)。
 * 線色は最終損益の符号 (緑 / 赤) で、累計損益セルの文字色と揃える。
 * ======================================================= */
.earr-c-curve {
	width: 110px;
	padding-right: 6px !important;
	padding-left: 6px !important;
}

.earr-table th.earr-c-curve {
	text-align: center;
}

/* 寸法は earr.js が sparkline() に渡す viewBox と必ず一致させる。
   ずれると preserveAspectRatio="none" が効いて終点の丸が楕円になる。 */
.earr-spark-slot {
	display: block;
	width: 96px;
	height: 30px;
	margin: 0 auto;
	cursor: help;
}

/* 月次が 1 点しか無い EA (計測を始めたばかり) は線を引けない。 */
.earr-spark-slot.is-none {
	color: var(--earr-faint);
	font-size: 12px;
	line-height: 30px;
	text-align: center;
	cursor: default;
}

.earr-spark {
	display: block;
	width: 100%;
	height: 100%;
	/* preserveAspectRatio="none" で潰しているので、線幅は
	   vector-effect (JS 側で指定) が保つ。 */
	overflow: visible;
}

/* 余剰の配分について: EA名列に width:100% を与えて余った幅を 1 列に吸わせる
   案を実測したが採らない。推移列は上の width:110px だけで 9 言語すべて 110px
   に収まっており (実測済み)、吸わせる必要が無い。むしろ width 指定を持つ他の
   列まで内容幅まで縮み (詳細 104→76px / 比較 112→79px / スコア 92→81px)、
   逆に EA名列が 456→540px へ肥大して操作ボタンだけが窮屈になった。
   余剰は今のまま各列へ配らせる。 */

/* =========================================================
 * 3) スマホカード
 * ======================================================= */

/* カードにも表と同じ月次カーブを置く。スマホでは指標が縦に積まれて
   数字だけが並ぶので、形が 1 つあると「積み上げたのか一発なのか」が先に読める。 */
.earr-card-curve {
	margin: 11px 0 0;
	padding-top: 11px;
	border-top: 1px solid var(--earr-line-2);
}

.earr-card-curve .earr-spark {
	display: block;
	width: 100%;
	height: 44px;
	overflow: visible;
}

.earr-card-curve figcaption {
	margin-top: 4px;
	color: var(--earr-faint);
	font-size: 10.5px;
	text-align: right;
}

/* カーブの直後は既に区切り線があるので、指標側の線は重ねない。 */
.earr-card-curve + .earr-card-stats {
	padding-top: 0;
	border-top: 0;
}

/* 主値の右に添える副値 (最大DD に対する RF)。行を増やさずに意味を足す。 */
.earr-card-stats .earr-stat-sub {
	margin-left: 5px;
	color: var(--earr-faint);
	font-size: 10.5px;
	font-weight: 500;
	white-space: nowrap;
}

/* =========================================================
 * 4) 順位の数字を縦に揃える
 *
 * 王冠を数字の前に置いていたので、1〜3 位だけバッジが 26 → 32/34px に
 * 広がり、左揃えのセルの中で数字が右へずれていた (実測: 1〜3 位の数字の
 * 左端 128px / 4〜9 位 117px / 10 位以降 114px)。165 行をスクロールすると
 * 数字の位置が行ごとに揺れる。王冠を数字の後ろへ回すと、どの行も数字が
 * バッジの左端から始まって位置が揃う。「王冠は小さく、数字より前に
 * 出さない」という元の意図とも合う。
 * ::before は earr.css 側に残っているので、ここで消してから ::after に
 * 同じ絵を置き直す (このファイルは earr.css より後に読まれる)。
 * ======================================================= */
.earr-top1 .earr-rank::before,
.earr-top2 .earr-rank::before,
.earr-top3 .earr-rank::before {
	display: none;
}

.earr-top1 .earr-rank::after,
.earr-top2 .earr-rank::after,
.earr-top3 .earr-rank::after {
	content: "";
	width: 12px;
	height: 12px;
	background: currentColor;
	opacity: .75;
	-webkit-mask: var(--earr-crown) center / contain no-repeat;
	mask: var(--earr-crown) center / contain no-repeat;
}

/* =========================================================
 * 5) 列見出しの揃えを中身に合わせる
 *
 * 総合スコアは値が中央 (.earr-c-score の text-align:center) なのに
 * 見出しだけ右揃えで、「総合スコア」が 9.1 の右上に離れて出ていた。
 * 詳細・比較はセル幅いっぱいのボタンなのに見出しが左端に寄っていた。
 * 見出しと中身の軸を合わせる。
 *
 * セレクタは (0,2,1)。earr.css の
 * `.earr-table th.earr-c-num, .earr-table th.earr-c-score` と同詳細度で、
 * このファイルが後に読まれるぶんだけ勝つ。thead を挟んで (0,3,1) に
 * 上げると 1201px 以上の sticky 指定と詳細度が入れ替わるので上げない。
 * ======================================================= */
.earr-table th.earr-c-score,
.earr-table th.earr-c-detail,
.earr-table th.earr-c-act {
	text-align: center;
}

/* =========================================================
 * 6) EA名列の幅を止めて、余りを数値列へ返す
 *
 * table-layout:auto は器の余りを各列の自然幅の比で配る。EA名列は自然幅が
 * いちばん大きいので余りもいちばん多く吸い、実測で 456px (表 1,250px の
 * 36%) まで広がっていた。中身は左に寄るため右側だけが空き、そのぶん
 * 数値列が痩せる (最大DD 65px / PF 43px / 取引数 53px)。
 *
 * その 456px を決めていたのは 165 件中 2 件だけだった。バッジ列
 * (戦略タイプ2 + 通貨ペア + リスク特性) が 4 つ並ぶ FX-Dojo が 425px、
 * CSMV_EURCAD が 395px。残りの行は 260〜340px しか使わない。
 * 表全体の自然幅は 1,225px で器は 1,252px、余りは 27px しかないので
 * 「余った幅が EA名に集まっている」のではなく「2 行のために全行が広い」
 * 状態だった。
 *
 * 幅を与えて吸わせるのをやめ、収まらない行はバッジ列を折り返させる。
 * 実測 (1440px):
 *   EA名 456→400 / 累計損益 93→110 / 最大DD 65→77 / PF 43→51 /
 *   取引数 53→63 / 計測期間 65→77
 * 日本語で 2 段になるのは上の 2 行だけ (高さ 90→100px)。
 *
 * 400px の根拠は日本語ではなく他言語側にある。日本語だけ見れば 370px まで
 * 詰めても 2 段になる行は 2 件のままで、数値列へ 6〜8px 多く返せる。
 * ただし英語・ドイツ語はバッジの語が長く、400px でも 2 段の行が 6〜7 件
 * 出る (実測: de 6 件 / en 7 件)。370px にするとそれがさらに増えるので、
 * 日本語側の 6〜8px と引き換えにしない。
 *
 * 戦略タイプを 1 件に畳んで幅を稼ぐ案 (earr_render_types を $max=1 で
 * 呼ぶ) も本番で実測したが採らない。EA名の自然幅は 425→364px まで下がる
 * 一方、165 行中 53 行が「+1」になり、一覧に畳んだ跡だけが並ぶ。
 * 2 行が 2 段になるほうが情報を落とさない。
 *
 * width は table-layout:auto では希望値でしかなく、他列の min-content が
 * 優先される。器が狭いときは EA名列の側が先に縮む (1220px で 391px に
 * なることを実測) ので、表が器を超えて操作列が切れることはない。
 * ======================================================= */
.earr-c-ea {
	width: 400px;
}

/* 折り返しは列幅を決め打ちする側の前提なので、既定に頼らずここで明示する。
   row-gap を置かないと 2 段になった行でバッジの上下が詰まる。 */
.earr-ea-sub {
	flex-wrap: wrap;
	row-gap: 4px;
}

/* =========================================================
 * 7) 数値列の見出しを中央に
 *
 * 値は右揃えのまま (桁を縦に揃えて読むため)。見出しだけ中央に置く。
 * 5) で総合スコア・詳細・比較の見出しを中身の軸に合わせたが、数値列は
 * 見出しが列の右端に張り付いて見えるほうが読みにくいので、ここは軸を
 * 合わせずに中央で揃える。結果として見出し行は
 * 順位/EA名だけ左、それ以外はすべて中央になる。
 *
 * 並べ替えの矢印 (.earr-sort-i) は margin-right:-8px で幅への寄与を 0 に
 * してあるので、中央揃えではラベルだけが中央に来て矢印はその右に出る。
 * 矢印のぶんラベルが左に寄って見えないよう、負マージンの相殺は
 * そのままにして中央位置はラベル基準で取る。
 * ======================================================= */
.earr-table th.earr-c-num {
	text-align: center;
}

/* =========================================================
 * 8) 基準資金の注記 (2026-08-03)
 *
 * 損益と最大DD を金額から「基準資金に対する %」に変えたので、
 * 何に対する % なのかを表と同じ画面に必ず置く。
 *
 * p 要素なので earr.css の `.earr-root p { margin: 0 }` (0,1,1) に負ける。
 * margin を持たせる側は .earr-root 付きで書くこと。
 * ======================================================= */
.earr-root .earr-table-note {
	margin: 10px 2px 0;
	color: var(--earr-muted);
	font-size: 11.5px;
	line-height: 1.65;
}

/* =======================================================
 * 損益の単位トグル (円 / pips)  2026-08-04
 *
 * すぐ隣にあるタブ (.earr-tab) と役割が違う。タブは「どの母集団の順位で見るか」、
 * トグルは「同じ行を何の単位で読むか」。同じオレンジの pill にすると 2 つが同列に
 * 見えるので、選択中の塗りは ink にして系統を分ける (オレンジはタブに残す)。
 * ======================================================= */
.earr-root .earr-unit {
	display: inline-flex;
	flex: 0 0 auto;
	gap: 2px;
	padding: 2px;
	border: 1px solid var(--earr-line);
	border-radius: 999px;
	background: #fff;
}

.earr-root .earr-unit-btn {
	padding: 7px 15px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--earr-muted);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.earr-root .earr-unit-btn:hover {
	background: var(--earr-soft);
	color: var(--earr-ink);
}

.earr-root .earr-unit-btn.is-on,
.earr-root .earr-unit-btn.is-on:hover {
	background: var(--earr-ink);
	color: #fff;
}

/* pips に換算できない EA の「—」。値が無いことと、値がゼロであることを見分けられるよう
   数字と同じ色にしない。 */
.earr-root .earr-num-na {
	color: var(--earr-faint);
}

/* 一部の取引を pips の合計から除いた印。件数は title に入れてある。
   数字と同じ濃さにすると桁の一部に見えるので薄くする。 */
.earr-root .earr-num-flag {
	margin-left: 1px;
	color: var(--earr-faint);
	font-size: 10px;
	font-weight: 700;
	cursor: help;
}