/* 成績と、その説明。★絞り込みの帯の中に出る。
 *
 * ★★棒は積み上げ。「でたらめに選ぶと」と必ず並べて出す
 *   （基準が無いと、その数字が高いのか低いのか読み手に判断できない）。
 * ★ヘルプは成績の読み方を出すモーダルなので、ここに置いてある。
 */

/* ---------------------------------------------------------------- 成績 */
/* ★★絞り込みの**中**に置く。チップを押すと数字も一緒に変わるので、
 *   位置だけで「押した条件の成績」だと伝わる。離すと何の数字か分からない。
 * ★実測と基準を**同じ物差しの棒**で並べる。数字だけだと、
 *   34.8% が高いのか低いのか読み手に判断できない。 */
/* ★絞り込みと成績は同じ枠の中。★あいだは**字下げした罫線**で切る
 *   （設定画面の島の中と同じ作り。縁まで伸ばすと枠が割れて見える）。 */
.stats-box {
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px solid var(--edge);
}
/* ★★見出しは**絞り込みの札＋件数**。「この条件の成績」とだけ書いていた頃は、
 *   その条件が何なのかがどこにも書いていなかった。
 *   一覧の案内（.hint）と**同じ形**にして、どちらも一目で条件が読める。
 * ★ヘルプは右端へ寄せる（margin-left:auto）。あいだが空くので、
 *   読むもの（条件と件数）と押すもの（ヘルプ）が混ざらない。 */
.stats-hd {
  display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap;
  margin-bottom: 9px;
  font-size: 12px; color: var(--t2);
}
.stats-hd .help-btn { margin-left: auto; }
.stats-hd b { color: var(--t1); }
/* ★★成績そのものを**箱に入れる**（2026-08-25）。
 *   絞り込みの帯（--ink3）の中で、ここだけは**操作するものではなく読むもの**。
 *   面を変えると、押すところ（チップ）と読むところ（数字）が見分けられる。
 * ★面は --ink2（カードと同じ）。帯より一段沈むので「中身」に見える。
 *   ★--ink4 にしない。棒の下地が --ink4 なので、棒の溝が消える。
 * ★縁と角丸はカードと同じ。新しい流儀を持ち込まない。 */
.stats {
  display: flex; flex-direction: column; gap: 9px;
  background: var(--ink2);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  padding: 12px;
}
/* ★★出すものが無いとき（2026-08-30に足した）。**入れ子にしない**。
 *
 * ■ ★なぜ別扱いにするか
 *   中の枠（.stat-foot）は「色見本と内訳を棒から分ける」ためのもの。
 *   ★空のときは分ける相手が居ないので、**中身のない箱**だけが残り、
 *     面の色まで違う（--ink2 の中に --ink3）ので枠の入れ子に見えていた。
 *   ★余白も外12px＋内(8+8)で上28／左右22／下20px と四方が揃わなかった。
 * ★ここは1行の文だけ。**四方を同じ**にして、真ん中に置く。
 *   ★上下は少し厚め。1行だけだと薄い帯に見えて、箱として立たない。 */
.stats.stats-none {
  display: block;          /* ★flex をやめる（並べるものが無い） */
  padding: 18px 14px;
  text-align: center;
  font-size: 12px;
  line-height: 1.7;
  color: var(--t2);
}
/* ★次にやることは一段落として置く。同じ大きさで続けると、
 *   事実（無い）と案内（こうすると出る）が1つの文に見える。 */
.stats.stats-none > span {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--t3);
}

/* ★箱の中で成績が2つ（荒れ系とイン逃げ）並ぶときの区切り。
 *   ★箱の縁と同じ線にしない。中の区切りは弱く——強いと箱が割れて見える。 */
.stat + .stat { border-top: 1px solid rgba(46,49,54,.5); padding-top: 9px; }
.stat-row { display: flex; align-items: center; gap: 8px; }
.stat-row + .stat-row { margin-top: 5px; }
.stat-k { width: 86px; flex: none; font-size: 11px; color: var(--t2); }
.stat-bar {
  flex: 1; min-width: 0;
  height: 11px;          /* ★色で3段を読ませるので、細いと色が判別できない */
  border-radius: 999px;
  background: var(--ink4);
  /* ★積み上げるので横並び。★角丸は**外側だけ**（overflow で切る）。
   *   1本ずつ丸めると、継ぎ目に隙間が空いて別々の棒に見える。 */
  display: flex;
  overflow: hidden;
}
.stat-bar > i {
  height: 100%;
  background: var(--t3);
  /* ★★どんなに細い段も 2px は出す（2026-08-27）。
   *   ★激荒れ以上は実測 1.4% ＝ 3.5px。いまは見えるが、絞り込みしだいで
   *     1%を切ると**消える**。0件と1件が同じ見た目になるのがいちばんまずい。
   *   ★★厳密な比率からは少しずれる。承知のうえ——
   *     「そこに在る」ことが読めないほうが、2pxの誤差より嘘に近い。
   *   ★flex-shrink は既定のまま（1）。合計が100%を超えたら
   *     太い段が数pxずつ譲るので、棒が容れ物からはみ出すことはない。 */
  min-width: 2px;
}
/* ★★段の境目に細い切れ目を入れる。色だけに頼らず、**形**でも段が分かる。
 *   flex の gap では棒が伸びて（%の合計＋隙間で）100%を超え、最後の段が
 *   切れる＝グラフが嘘になる。内側の影なら**幅を変えずに**線が引ける。
 * ★1px。★2pxだと、2pxしかない段が**自分の区切り線に覆われて**消える。 */
.stat-bar > i + i { box-shadow: inset 1px 0 0 var(--ink3); }
/* ★★段の色。**小→中→大で濃くなる**。度合いが色の強さとそのまま結びつく。
 *   結果の言葉（.res-head t1..t3）と同じトークンを使う——
 *   別の緑を持ち込むと、カードの「中荒れ」と棒の中段が違う色になる。
 *
 * ★★実測と基準で**同じ色**を使う（2026-08-25に灰色をやめた）。
 *   2本を並べているのは**比べるため**で、比べるなら同じ色でないといけない。
 *   「小荒れが増えたのか、大荒れが増えたのか」は、
 *   同じ色どうしを見比べて初めて分かる。
 * ★どちらが成績かは**名札で分ける**（左が太字＝実測、下が「でたらめに選ぶと」）。
 *   色を変えて区別すると、肝心の比較ができなくなる。 */
.stat-bar > i.s1 { background: var(--rough1); }
.stat-bar > i.s2 { background: var(--rough2); }
.stat-bar > i.s3 { background: var(--rough3); }
/* ★★激荒れ以上（2026-08-27）。★極荒れは**この段にまとめてある**
 *   （inc/stats.php の tiers_merged）。実測 1.0% + 0.4% ＝ 1.4%。
 *   ★別々に描くと 2.4px と 1.0px になり、色の違いが読めないまま
 *     区切り線だけが増える。読めない区別は描かない。 */
.stat-bar > i.s4 { background: var(--rough4); }
.stat-row.hit .stat-k { color: var(--t1); font-weight: 700; }
/* ★下の段（でたらめに選ぶと）は**引く**。読ませたいのは上の実測で、
 *   下は物差しとして添えてあるだけ。同じ濃さだと、どちらが成績か迷う。
 * ★★この class は inc/stats.php が前から書き出していたのに、決まりが
 *   1つも無く**何も起きない字**だった（2026-08-25に見つけて足した）。 */
.stat-row.base .stat-k,
.stat-row.base .stat-v { color: var(--t3); }

/* ★★足元（色見本＋内訳）を**1つの枠**に入れる（2026-08-27）。
 *
 * ■ なぜ囲うか
 *   棒は**見る**もの、色見本と内訳は**読む**もの。役割が違うのに、
 *   どちらも地の上にじかに並んでいて境目が無かった。
 *   ★成績が2つ（荒れ系とイン逃げ）並ぶので、
 *     「どこまでが1つの成績か」が読めないと混ざる。
 * ★面は --ink3（一段浮いた面）。箱（.stats）が --ink2 なので、
 *   その中で少しだけ浮く。★新しい色は足さない——既にある段を使う。
 * ★横は**いっぱいまで**。字下げすると、棒とも箱の縁ともそろわない
 *   半端な位置に左端ができる。 */
.stat-foot {
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--ink3);
  border-radius: var(--radius);
}
/* 段の色見本。★積み上げは、どの緑がどの段かが分からないと読めない。
 * ★★6段ぶん並ぶので折り返す。1行に押し込むと字が潰れる。
 * ★0%の段も出す（inc/stats.php に理由）。だから幅は毎回同じで、
 *   絞り込みを変えても足元の高さが跳ねない。 */
.stat-legend {
  display: flex; flex-wrap: wrap; gap: 5px 12px;
  font-size: 10px; color: var(--t3);
}
.stat-lg { display: inline-flex; align-items: center; gap: 5px; }
.stat-lg > i { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.stat-lg > i.s1 { background: var(--rough1); }
.stat-lg > i.s2 { background: var(--rough2); }
.stat-lg > i.s3 { background: var(--rough3); }
.stat-lg > i.s4 { background: var(--rough4); }
.stat-lg b { color: var(--t2); font-variant-numeric: tabular-nums; }
.stat-v {
  width: 48px; flex: none; text-align: right;
  font-size: 12px; color: var(--t2);
  font-variant-numeric: tabular-nums;
}
.stat-row.hit .stat-v { color: var(--t1); font-weight: 700; }
/* ★内訳。★色見本のすぐ下に来るので、間は詰める（同じ枠の中の続き）。
 *   ★見本が無いとき（イン逃げ）は枠の中でこれ1つ。上の余白は要らない。 */
.stat-note { font-size: 11px; color: var(--t3); line-height: 1.5; }
.stat-legend + .stat-note { margin-top: 6px; }
.stat-note b { color: var(--t1); }

/* ---------------------------------------------------------------- ヘルプ */
/* ★押しても長押しでも開く。長押しだけにすると、
 *   そういう操作があること自体に気づけない（js/help.js を参照）。 */
.help-btn {
  flex: none;
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: none; padding: 4px 0;
  font-size: 11px; color: var(--t3);
  white-space: nowrap;           /* ★内訳に押されて「成績に／ついて」と折れない */
  cursor: pointer;
  -webkit-touch-callout: none;   /* 長押しでiOSのメニューを出さない */
}
.help-i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 10px; font-weight: 700; line-height: 1;
}
.help-btn:hover { color: var(--t2); }
.help-btn:hover .help-i { border-color: var(--line2); }
.help-dlg { max-width: 420px; }
/* ★長い。プランの説明＋成績の見方が入るので、中で送れるようにする。
 *   送れないと、画面の小さい端末で「閉じる」に届かない。 */
.help-dlg .dlg-body { max-height: 74vh; overflow-y: auto; }
.help-p { font-size: 12px; color: var(--t2); line-height: 1.65; }
.help-p + .help-p { margin-top: 12px; }
.help-p b { color: var(--t1); }

/* プランの説明。★中身は inc/plans.php の desc だけ（書き写さない）。 */
.help-plan + .help-plan { margin-top: 14px; }
.help-plan-t {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 5px;
  font-size: 14px; font-weight: 700; color: var(--t1);
}
.help-plan .help-p { margin-top: 0; }
/* プランの説明と成績の見方の切れ目。★見出しで切る（罫線だけだと何の切れ目か不明）。 */
.help-sep {
  margin: 18px 0 10px;
  padding-top: 14px;
  border-top: 1px solid var(--edge);
  font-size: 12px; font-weight: 600; letter-spacing: .06em;
  color: var(--t3);
}

/* 段階の見本。★実際のカードと同じ .res-head を並べる
 *   ——別の色を書き写すと、カードの色を変えた日に説明だけ古いまま残る。 */
/* ★★2列を**そろえて**組む（2026-08-27に直した）。
 *
 * ■ 何が起きていたか
 *   1行ずつ flex にして、左の列を **86px 固定**にしていた。
 *   段を6つに増やしたとき配当の言い方が長くなり
 *   （「500〜1000倍（5万円〜）」＝およそ125px）、**折り返した**。
 *   ★2列しかないのに片方が2行になると、段の梯子に見えなくなる。
 * ■ ★∴ 幅を決め打ちにせず、**いちばん長い行に合わせる**（max-content）。
 *   ★これなら、配当の言い方を変えても直しに来なくて済む。
 *   ★display:contents で行を透かして、表全体を1つの格子にする。
 *     こうしないと、行ごとに左の幅がばらばらになって段がそろわない。
 *   ★境目の線は行ではなく**升目**が持つ（行が透けているので）。 */
.ladder {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 12px;
  margin: 12px 0;
}
.ladder-row { display: contents; }
.ladder-k, .ladder-row .res-head {
  padding: 5px 0;
  border-top: 1px solid rgba(46,49,54,.5);
}
.ladder-row:first-child .ladder-k,
.ladder-row:first-child .res-head { border-top: none; }
.ladder-k {
  font-size: 11px; color: var(--t3);
  /* ★折り返させない。ここが折り返すと段の梯子に見えなくなる。 */
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}