/**
 * count-ranking.css — 計数値の期間別ランキング (subscribers.html / followers.html)
 * の見た目。
 * 対の JS は count-ranking.js。
 *
 * **ページ固有 <style> の後、mobile.css の前で link すること。** 文字サイズは
 * mobile.css が後勝ちで決める規約なので、ここの font-size は詳細度をクラス
 * 1 つ (0,1,0) までに抑える (子孫セレクタに font-size を書かない)。
 *
 * 列を畳む @media は「幅が足りないか」で見る (mobile.css の文字サイズの条件を
 * コピーしないこと。横向きスマホは幅 844px 前後あり畳む必要がない)。
 */

body {
    margin: 0;
    padding: 10px 1ch;
    background-color: #f0f0f0;
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic",
        "Meiryo", "MS PGothic", "Noto Sans CJK JP", sans-serif;
    font-size: 16px;
}

.title { text-align: center; font-size: 20px; margin: 4px 0 8px; }
.desc { text-align: center; font-size: 14px; color: #666; margin-bottom: 4px; }
.generated { text-align: center; font-size: 14px; color: #666; margin-bottom: 12px; }
.status, .nodata { text-align: center; color: #666; padding: 20px 0; }

/* 粒度切替 (clips.html / kickers.html と同じ見た目) */
.controls { text-align: center; margin-bottom: 8px; }
.controls button {
    font-size: 16px; padding: 4px 14px; margin: 0 2px;
    border: 1px solid #bbb; border-radius: 4px;
    background-color: #fff; cursor: pointer;
    min-height: var(--tap, 34px);
}
.controls button.active { background-color: #333; color: #fff; border-color: #333; }

/* 区間ナビ: 「前の区間 < 今の区間 > 次の区間」。表示中の区間だけ太字で
   少し大きく、両隣はリンク。端の区間では無い側を出さない */
.period-nav {
    display: flex; justify-content: center; align-items: baseline;
    flex-wrap: wrap; gap: 4px 10px;
    font-size: 18px; font-weight: normal;
    margin: 22px 0 6px; text-align: center;
}
.period-nav .current { font-size: 22px; font-weight: bold; }
.period-nav a { color: #06c; text-decoration: none; }
.period-nav a:hover { text-decoration: underline; }
.period-nav .arrow { color: #888; }
/* font-weight: 今の区間 (.current = 太字) の中に添える絶対日付も細字にする */
.period-nav .note { font-size: 14px; color: #999; font-weight: normal; }

/* 取得が止まっている時の注意。平常時は出ない */
.fetch-warning {
    max-width: 760px; margin: 8px auto; padding: 6px 10px;
    border: 1px solid #e0b978; border-radius: 6px;
    background: #fdf6e3; color: #8a5a00;
    font-size: 14px; text-align: center;
}

/* 集計が期間全体を代表していない区間・材料の無い区間への注釈 */
.method-note {
    text-align: center; font-size: 14px; color: #999;
    margin: -2px 0 6px;
}

.table-wrapper { max-width: 720px; margin: 0 auto; }
table { width: 100%; border-collapse: collapse; }
th, td {
    padding: 6px;
    text-align: right;
    border-bottom: 1px solid #ddd;
    white-space: nowrap;
    font-size: 16px;
    vertical-align: middle;
}
th { background-color: #f2f2f2; font-weight: normal; }
tr:nth-child(even) { background-color: #f9f9f9; }

td.rank { color: #888; min-width: 22px; }

/* 配信者列: 残り幅を占有する */
th.member-col, td.member-cell {
    width: 100%; text-align: left; white-space: normal;
    overflow: hidden; word-break: break-word;
}
/* アバターと名前は <a> の中に入るので inline-block で並べる。flex を使うと
   flex アイテムになるのは <a> だけで、中の span は幅 0 に潰れる */
.avatar {
    display: inline-block; width: 26px; height: 26px;
    border-radius: 50%; background-color: #ccc;
    background-size: cover; background-position: center;
    vertical-align: middle; margin-right: 6px;
}
/* 長い名前で表を押し広げないよう幅を切って省略記号 */
.member-name {
    display: inline-block; vertical-align: middle;
    max-width: 14em; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap;
}
.name-link { color: inherit; text-decoration: none; }
.name-link:hover .member-name { text-decoration: underline; }

/* グループ切替タブ。グループは増える前提なので折り返して並べる
   (clips.html と同じ見た目。文字サイズは mobile.css が後勝ちで決める) */
.group-tabs {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 6px; margin: 6px auto 10px;
}
.group-tabs a {
    padding: 4px 12px; font-size: 16px; border: 1px solid #ccc;
    border-radius: 14px; background: #fff; color: #333;
    text-decoration: none;
    display: inline-flex; align-items: center;
    min-height: var(--tap, 34px); box-sizing: border-box;
}
.group-tabs a[aria-current="page"] {
    background: #333; color: #fff; border-color: #333;
}
.group-tabs a:hover { border-color: #888; }

/* 補足行 (狭幅で畳んだ現在値)。色と字送りだけ持ち、大きさは mobile.css へ譲る */
.sub { color: #888; font-size: 13px; }
.sub .total { margin-left: 4px; }

/* 増加数は順位の根拠なので少し強く出す */
td.gain-cell { font-weight: bold; }
td.gain-cell .sub { font-weight: normal; }

/* 初登場・順位変化の印 (clips.html と同じ意味・同じ見た目) */
.rank-change { margin-right: 4px; }
.rank-change.new { color: #c00; font-weight: bold; }

/* 広い幅でだけ出す/隠す列見出しの言い換え */
.label-short { display: none; }
/* 狭幅で畳んだ現在値の行。既定は隠す。**下の @media より前に置くこと**
   (同じ詳細度なので、後ろに置くと媒体クエリの display: block を打ち消す) */
.meta-narrow { display: none; margin-top: 2px; }

@media (max-width: 640px) {
    /* 4 列のままだと配信者名が数文字幅まで潰れるので、現在値の列を畳んで
       名前の下へ回す。出し分けは CSS だけで行い、DOM には両方持たせる */
    th.total-col, td.total-cell { display: none; }
    .meta-narrow { display: block; }
    .label-full { display: none; }
    .label-short { display: inline; }
    .table-wrapper { max-width: none; }
}