/* /stats 観測室。
   本体の文法：ダーク紺Hero→紙intro→紺characters→紙works→赤observatory→紺footer、
   という明暗の切り替えで場面を刻む構成をこのページにも適用する（紺→紙→紺のサンドイッチ）。
   ダーク面は Characters と同じ #0a1423、紙面は本体と同じ #f4efe6。 */

.statsPage{background:#0a1423;color:#f7f0e5}
.statsInner{max-width:1100px;margin:0 auto}
/* 06 PULSEのカテゴリ7色は stats.js の CATEGORY_COLORS で一元管理し、
   SVG/インラインstyleに直接埋め込む（CSS変数は経由しない。定義を2箇所に分けない） */

.statsHero{padding:150px 7vw 60px}
.statsHero h1{font-size:clamp(44px,6vw,80px);line-height:1.2;margin:20px 0 22px;font-weight:500;letter-spacing:-.03em}
.statsHero .lead{max-width:640px;color:#b8c0cd;font-size:15px;line-height:2;letter-spacing:.03em;text-wrap:pretty}
.statsHero .lead br{display:initial}

.statsKpiRow{display:grid;grid-template-columns:repeat(5,1fr);margin-top:48px;border-top:1px solid #ffffff24}
.statsKpi{padding:22px 20px;border-right:1px solid #ffffff18;border-bottom:1px solid #ffffff24}
.statsKpi:last-child{border-right:none}
.statsKpiLabel{font:10px Arial,sans-serif;letter-spacing:.18em;color:#7185a5;text-transform:uppercase}
.statsKpiValue{font-family:"JetBrains Mono","SF Mono",ui-monospace,monospace;font-weight:500;font-size:clamp(26px,3vw,40px);color:#f7f0e5;font-variant-numeric:tabular-nums;margin-top:10px;line-height:1}

.statsSection{padding:120px 7vw}
.statsSection .sectionNo{margin-top:0}
.statsSection h2{font-size:clamp(26px,3vw,36px);margin:16px 0 48px;font-weight:500}
.statsSectionIntro{max-width:640px;margin:0 0 28px}

/* ダーク面（01 VITAL・04 SIGNAL・05 RANKING・08 DECAY） */
.statsSection:not(.isPaper){color:#f7f0e5}
.statsSection:not(.isPaper) .sectionNo{color:#d9aa60}
.statsSection:not(.isPaper) h2{color:#f7f0e5}

/* 紙面（02 TREND・03 RHYTHM・06 PULSE・07 TRACE）— worksセクションと同じ配色文法 */
.statsSection.isPaper{background:#f4efe6;color:var(--ink)}
.statsSection.isPaper .sectionNo{color:var(--red)}
.statsSection.isPaper h2{color:var(--ink)}
/* 02+03 のみ内容が薄いため隣接時に詰める。06+07 は情報密度が高いのでこの詰めルールを適用しない */
#stats-trend.isPaper:has(+ #stats-rhythm.isPaper){padding-bottom:0}
#stats-rhythm.isPaper{padding-top:0}

/* 01 VITAL: 連続投稿日数を大きく、副次KPIは横並び */
.statsStreak{display:flex;align-items:baseline;gap:18px;padding-bottom:36px;border-bottom:1px solid #ffffff24;margin-bottom:36px}
.statsStreakValue{font-family:"JetBrains Mono",monospace;font-weight:600;font-size:clamp(56px,9vw,110px);color:var(--gold);line-height:1;font-variant-numeric:tabular-nums}
.statsStreakUnit{font:13px Arial,sans-serif;letter-spacing:.12em;color:#b8c0cd}
.statsVitalSub{font-size:13px;line-height:2;color:#b8c0cd}
.isPaper .statsVitalSub{color:#5a5648}

/* 02 TREND: スパークライン3本を縦積み（紙面） */
.statsTrendRow{border-top:1px solid #d8d0c3;padding:22px 0}
.statsTrendRow:last-child{border-bottom:1px solid #d8d0c3}
.statsTrendHead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px;font:11px Arial,sans-serif;letter-spacing:.1em;color:#5a5648}
.statsTrendHead b{color:#8a6a34;font-weight:600}
.statsTrendChart{position:relative}
.statsTrendSvg{display:block;width:100%;height:72px}
.statsTrendDot{position:absolute;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:#c69a54;pointer-events:none}
.statsTrendBarSvg{display:block;width:100%;height:100px}

/* 03 RHYTHM: 投稿ヒートマップ（紙面） */
.statsHeatmapScroll{overflow-x:auto;padding-bottom:10px}
.statsHeatmap{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,10px);gap:3px;width:max-content}
.statsHeatmap i{width:10px;height:10px;border-radius:2px;background:#e8e1d2;display:block}
.statsHeatmapNote{margin-top:14px;font:11px Arial,sans-serif;color:#5a5648;letter-spacing:.04em}

/* 04 SIGNAL: TOP5リスト + カテゴリ横棒（ダーク面） */
.statsSignalGrid{display:grid;grid-template-columns:1.3fr 1fr;gap:6vw}
.statsTop5{border-top:1px solid #ffffff24}
.statsTop5Row{display:grid;grid-template-columns:24px 1fr auto;gap:16px;align-items:baseline;padding:18px 0;border-bottom:1px solid #ffffff18}
.statsTop5Rank{font:12px "JetBrains Mono",monospace;color:var(--gold)}
.statsTop5Title{font-size:14px;line-height:1.6;color:#e6e9ef;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.statsTop5Count{font:13px "JetBrains Mono",monospace;color:#b8c0cd;font-variant-numeric:tabular-nums}

.statsCatBar{margin-bottom:16px}
.statsCatBarHead{display:flex;justify-content:space-between;font:11px Arial,sans-serif;letter-spacing:.06em;color:#b8c0cd;margin-bottom:6px}
.statsCatBarTrack{height:6px;background:#ffffff12;border-radius:3px;overflow:hidden}
.statsCatBarFill{height:100%;background:var(--gold)}
.statsCatLabel{font-variant-numeric:tabular-nums}
.statsCatLabel b{font-weight:600}
.statsCatLabel span{opacity:.7;margin-left:4px}

/* 05 RANKING: スキ率ランキング（ダーク面、04と同じ文法を拡張） */
.statsRankToolbar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.statsRankToolbar+.statsRankToolbar{margin-bottom:32px}
.statsChip{font:11px Arial,sans-serif;letter-spacing:.06em;padding:6px 14px;border:1px solid #ffffff30;color:#b8c0cd;background:none;cursor:pointer;border-radius:999px}
.statsChip.isActive{border-color:var(--gold);color:var(--gold)}
.statsRankRow{display:grid;grid-template-columns:24px 1fr 90px 56px;gap:14px;align-items:center;padding:18px 0;border-bottom:1px solid #ffffff18}
.statsRankTitleWrap{min-width:0}
.statsRankTitle{font-size:14px;line-height:1.5;color:#e6e9ef;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.statsRankCat{font:10px "JetBrains Mono",monospace;letter-spacing:.14em;color:#7185a5;text-transform:uppercase}
.statsRankBarTrack{height:6px;background:#ffffff12;border-radius:3px;overflow:hidden}
.statsRankBarFill{height:100%;background:var(--gold)}
.statsRankEta{font:13px "JetBrains Mono",monospace;color:var(--gold);text-align:right;font-variant-numeric:tabular-nums}

/* 06 PULSE: 直近2週間スキ率散布図（紙面） */
.statsScatterSvg{display:block;width:100%;height:auto;margin-bottom:20px}
.statsScatterLegend{display:flex;gap:14px 22px;margin-top:20px;font:11px "JetBrains Mono",monospace;color:#5a5648;flex-wrap:wrap}
.statsScatterLegend span{display:inline-flex;align-items:center;gap:6px}
.statsScatterLegend i{display:inline-block;width:14px;height:0;border-top:2px dashed #8a6a34;opacity:.85}
.statsScatterLegend b{color:#8a6a34}

.statsPulseTableWrap{margin-top:44px;padding-top:32px;border-top:2px solid #bfb6aa}
.statsPulseTableTitle{font:11px Arial,sans-serif;letter-spacing:.1em;color:#5a5648;margin:0 0 14px}
.statsPulseHead{display:grid;grid-template-columns:48px 28px 1fr 56px 64px;gap:14px;padding:0 0 10px;font:10px Arial,sans-serif;letter-spacing:.06em;color:#8a6a34;border-bottom:1px solid #bfb6aa}
.statsPulseTable{border-top:none}
.statsPulseRow{display:grid;grid-template-columns:48px 28px 1fr 56px 64px;gap:14px;align-items:baseline;padding:14px 0;border-bottom:1px solid #d8d0c3}
.statsPulseDate{font:11px "JetBrains Mono",monospace;color:#5a5648}
.statsPulseCat{font:11px "JetBrains Mono",monospace;color:#8a6a34;letter-spacing:.05em}
.statsPulseTitle{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.statsPulseTitle a{color:var(--ink)}
.statsPulseTitle a:hover{color:#8a6a34}
.statsPulseEta{font:12px "JetBrains Mono",monospace;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.statsPulseDiff{font:11px "JetBrains Mono",monospace;text-align:right;font-variant-numeric:tabular-nums}

.statsReportCard{margin-top:48px;padding-top:32px;border-top:1px solid #d8d0c3}
.statsReportGrid{display:flex;gap:14px;flex-wrap:wrap}
.statsReportItem{flex:1;min-width:100px;text-align:center;padding:20px 12px;background:#fff;border:1px solid #d8d0c3}
.statsReportCat{font:11px "JetBrains Mono",monospace;color:#8a6a34;margin-bottom:10px}
.statsReportScore{font-family:"JetBrains Mono",monospace;font-weight:700;font-size:28px;font-variant-numeric:tabular-nums}
.statsReportSub{font:600 11px "JetBrains Mono",monospace;margin-top:8px;font-variant-numeric:tabular-nums}
.statsReportCount{font-size:10px;color:#8a8478;margin-top:4px}

/* 07 TRACE: 記事別 日次推移（紙面） */
.statsTraceRow{border-top:1px solid #d8d0c3;padding:26px 0}
.statsTraceRow:last-child{border-bottom:1px solid #d8d0c3}
.statsTraceHead{display:flex;justify-content:space-between;gap:16px;margin-bottom:14px;font-size:13px;color:var(--ink)}
.statsTraceTitle{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;color:var(--ink)}
.statsTraceTitle:hover{color:#8a6a34}
.statsTraceDate{font:11px "JetBrains Mono",monospace;color:#8a6a34;flex-shrink:0}
.statsTraceChart{position:relative}
.statsTraceScale{display:flex;justify-content:space-between;font:10px "JetBrains Mono",monospace;color:#8a6a34;margin-bottom:6px}
.statsTraceSvg{display:block;width:100%;height:64px}
.statsTraceAxis{display:flex;justify-content:space-between;margin-top:4px;font:9px "JetBrains Mono",monospace;color:#5a5648}
.statsTraceAxis span.isHidden{visibility:hidden}

/* 08 DECAY: 記事の消費期限（ダーク面） */
.statsDecaySvg{display:block;width:100%;height:auto}
.statsDecayNote{margin-top:14px;font-size:13px;line-height:1.9;color:#b8c0cd}

.statsClosing{padding:0 7vw 100px;text-align:center}
.statsPlaque{margin:0 auto;padding:26px 0;max-width:420px;font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:24px;letter-spacing:.06em;color:#e6e9ef;border-top:1px solid #c69a5440;border-bottom:1px solid #c69a5440}
.statsObserved{margin:22px 0 0;font:11px "JetBrains Mono",monospace;color:#7185a5;letter-spacing:.04em}
.statsObserved .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--gold);margin-right:8px;animation:statsPulse 4s ease-in-out infinite}

@keyframes statsPulse{0%,100%{opacity:.35}50%{opacity:1}}
@media(prefers-reduced-motion: reduce){.statsObserved .dot{animation:none;opacity:.8}}

@media(max-width:850px){
  .statsHero{padding:110px 6vw 50px}
  .statsKpiRow{grid-template-columns:repeat(2,1fr)}
  .statsKpi:nth-child(2n){border-right:none}
  .statsSection{padding:70px 6vw}
  .statsSignalGrid{grid-template-columns:1fr;gap:40px}
  .statsStreakValue{font-size:64px}
  .statsClosing{padding:0 6vw 70px}
  .statsRankRow{grid-template-columns:20px 1fr 56px;grid-template-areas:"rank title eta" "rank bar eta";row-gap:6px}
  .statsRankRow .statsRankBarTrack{grid-area:bar}
  .statsRankRow .statsRankTitleWrap{grid-area:title}
  .statsRankRow .statsRankRank{grid-area:rank}
  .statsRankRow .statsRankEta{grid-area:eta}
}