/* T-113: トップ「最近の変更」の 2 段・畳み（native <details>）・概況の 1 行表示の見た目。
 * public/ の外部ファイル（トップだけが <link> で読む）。インライン CSS を増やさない = CSP の style-src
 * ハッシュ（_headers）は変わらない（changelog-filter.css と同じ方式）。色は BaseLayout の変数のみを使う。
 * 設計: docs/superpowers/specs/2026-10-19-t113-top-recent-changes-design.md §4・§6・§7。
 * 構造: components/HomeChanges.astro・HomeTierList.astro。 */

/* 段（新規追加・削除／更新）。見出し h3 の右に補足 p を同じ行で並べる。 */
.tier { margin: 0 0 1.25rem; }
.tier h3 { font-size: 1.05rem; margin: 1rem 0.5rem 0.25rem 0; display: inline-block; }
.tier .tier-sub { display: inline; margin: 0; }
.tier-note { margin: 0.1rem 0 0.4rem; }

/* 畳み: 同じ日・同じ種類が 11 件以上の束を 1 行にする。<summary> の三角をビュレットの位置に合わせる。 */
.changelist > .fold { list-style: none; margin-left: -1.15em; }
.changelist .fold > details > summary { cursor: pointer; }
.changelist .fold .fold-label { font-weight: 600; }
.changelist .fold .fold-hint { color: var(--muted); font-size: 0.9rem; margin-left: 0.25rem; white-space: nowrap; }
/* 「一覧を開く／閉じる」の出し分け（JS 不要）。 */
.changelist .fold > details[open] > summary .fold-hint-closed { display: none; }
.changelist .fold > details:not([open]) > summary .fold-hint-open { display: none; }
.changelist .fold-list { margin: 0.25rem 0 0.75rem; padding-left: 1.25rem; font-size: 0.95rem; }
.changelist .fold-list > li { break-inside: avoid; }
/* PC 幅は 2 段組で長い束を短く（375px は 1 列）。 */
@media (min-width: 40rem) { .changelist .fold-list { columns: 2; column-gap: 1.5rem; } }

/* 概況（総数）の 1 行表示。 */
.stats-line { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; list-style: none; margin: 0.25rem 0 0; padding: 0; }