/* みんなの結果ページ。style.css のトークンをそのまま使い、
 * このページにしか出てこない要素（グラフ・集計表）だけをここに置く。 */

.hero .lead a { color: var(--accent); }

/* 読み込み中・失敗・母数不足の一行表示 */
.state {
  margin: 40px auto; padding: 20px; max-width: 520px;
  text-align: center; color: var(--text-sub); font-size: 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}

.block { margin-top: 40px; }
.block h2 {
  margin: 0 0 4px; font-size: 18px; color: var(--accent);
}
.block .note { margin: 0 0 14px; font-size: 12px; color: var(--text-sub); }

/* ---- 見出しの数値 ---- */
.figs {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  margin-top: 8px;
}
.fig {
  padding: 12px 10px; text-align: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.fig .v {
  display: block; font-size: 26px; font-weight: 700; line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.fig .v small { font-size: 13px; font-weight: 400; color: var(--text-sub); margin-left: 1px; }
.fig .k { display: block; font-size: 11px; color: var(--text-sub); }
.fig.main .v { color: var(--accent); }

/* ---- ヒストグラム ---- */
.chartbox {
  padding: 16px 14px 8px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.chartbox svg { display: block; width: 100%; height: auto; }
.chartbox .grid { stroke: var(--border); stroke-width: 1; }
.chartbox .ax { fill: var(--text-sub); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.chartbox .hb rect:first-child { transition: opacity .12s; }
.chartbox .hb:hover rect:first-child { opacity: .7; }

/* ---- 目立ったところ ---- */
.picks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.picks li {
  padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.picks .lbl { display: block; font-size: 11px; color: var(--text-sub); }
.picks .ttl { font-size: 15px; }
.picks .ttl em { font-style: normal; font-size: 12px; color: var(--text-sub); margin-left: 6px; }
.picks .num { float: right; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.picks .num.p { color: var(--played); }
.picks .num.h { color: var(--have); }

/* ---- 集計表 ---- */
.tools { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
#tfilter {
  flex: 1 1 220px; min-width: 0; padding: 9px 12px;
  font-size: 16px; font-family: inherit; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.key { display: flex; gap: 12px; font-size: 12px; color: var(--text-sub); }
.key b { display: inline-flex; align-items: center; gap: 5px; font-weight: 400; }
.key i { display: block; width: 10px; height: 10px; border-radius: 3px; }
.key i.p { background: var(--played); }
.key i.h { background: var(--have); }

.tablebox {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: auto; max-height: 70vh;
}
table { border-collapse: collapse; width: 100%; font-size: 13px; }
thead th {
  position: sticky; top: 0; z-index: 1;
  padding: 0; text-align: left; font-weight: 400;
  background: var(--surface); border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
thead th .h, thead th button {
  display: block; width: 100%; padding: 10px 7px;
  font: inherit; font-size: 11px; color: var(--text-sub); text-align: inherit;
  background: none; border: 0;
}
thead th button { cursor: pointer; }
thead th button:hover { color: var(--text); }
thead th button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
thead th[aria-sort] button { color: var(--accent); font-weight: 600; }
thead th button .caret { font-size: 9px; margin-left: 3px; }
th.num, td.num { text-align: right; }
/* 表のバーは .bar にしないこと。style.css のスコアバー（.bar）と衝突し、
 * セル全体に背景が乗る。 */
th.num button, th.num .h { text-align: right; }

tbody td { padding: 7px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--surface-2); }
td.rk { width: 30px; text-align: right; font-size: 11.5px; color: var(--text-sub); font-variant-numeric: tabular-nums; }
td.nm { min-width: 150px; line-height: 1.4; }
td.nm span { display: block; font-size: 13px; }
td.nm em { display: block; font-style: normal; font-size: 10.5px; color: var(--text-sub); }
td.meter { width: 84px; padding-right: 0; }
.track { display: block; height: 7px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.track i { display: block; height: 100%; border-radius: 999px; }
.track i.p { background: var(--played); }
.track i.h { background: var(--have); }
td.num { width: 50px; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.num small { font-size: 9.5px; color: var(--text-sub); }
td.oo { color: var(--text-sub); }

.foot-note { margin: 24px 0 0; font-size: 12px; color: var(--text-sub); }

@media (max-width: 560px) {
  .hero h1 { font-size: 24px; }
  .fig .v { font-size: 21px; }
  td.meter { width: 52px; }
}