/* ===========================================================
   CCC WEB標準 / データを見せる部品（2026-08-27 追加）
   base.css のあとに、**必要なときだけ**読み込む。
   マイミュージックトレースで実際に使ったものを、そのまま置いている。
   =========================================================== */

/* --- 棒グラフ -------------------------------------------
   ライブラリを使わず、divの高さだけで描く。

   ★入れ物には必ず高さを持たせる（ここでつまずいた）
     `.bar` に高さが無いと、中の <i> が伸びる先を持てず、**棒が1本も出ない**。
     実際にそうなって、グラフが空のまま気づかなかった。 */
.bars {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 2px; align-items: end; height: 160px; margin-bottom: var(--s7);
}
.bars .bar {
  height: 100%;                    /* ← これが無いと棒が出ない */
  position: relative;
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
  border-radius: var(--radius-s) var(--radius-s) 0 0;
}
.bars .bar > i {
  position: absolute; inset: auto 0 0 0;
  background: var(--primary); border-radius: inherit;
  height: 0;                        /* 画面に入ってから伸ばす */
  transition: height 1s var(--ease-out);
}
.bars .bar > small {
  position: absolute; inset: auto 0 -1.6em 0; text-align: center;
  font-size: 10px; color: var(--text-muted); font-family: var(--font-en);
}

/* --- 順位の並び ------------------------------------------ */
.rank { list-style: none; margin: 0; padding: 0; }
.rank li {
  display: grid; grid-template-columns: 2.6em 1fr auto; gap: var(--s4);
  align-items: center; padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--border);
}
.rank .rank-no { font-family: var(--font-en); color: var(--text-muted); font-size: var(--fs-small); }
.rank .rank-main { display: grid; gap: 2px; min-width: 0; }
.rank .rank-sub { color: var(--text-muted); font-size: 11px; }
.rank .rank-num { font-family: var(--font-en); font-size: var(--fs-small); justify-self: end; }

/* --- 数字を見せるマス ------------------------------------ */
.stat {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-m); padding: var(--s5);
}
.stat b { display: block; font-size: var(--fs-h3); line-height: 1.2; font-variant-numeric: tabular-nums; }
.stat span { font-size: var(--fs-small); color: var(--text-muted); }

/* --- ダッシュボードの並べ方 ------------------------------ */
.dash { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.panel { border: 1px solid var(--border); border-radius: var(--radius-m); padding: var(--s5); background: var(--surface); }
.panel h3 {
  font-size: var(--fs-small); letter-spacing: .08em; color: var(--text-muted);
  margin: 0 0 var(--s4); text-transform: uppercase;
}
.panel-wide { grid-column: 1 / -1; }