/* ===========================================================================
 * Direction C — 稼働バンドを「計器盤」にする  2026-09-10
 * 会長ご指示:「Cに進もう」（A・Bは様子見で残す）
 *
 * この案が触るのは .stats の中だけ。ここは元から紺（--navy-deep:#0A1E3C）なので、
 * 明るい本文の配色には一切かかわらない。
 *
 * 🟥 HTMLを1文字も触らない理由:
 *   このバンドは ~/ai-work/scripts/site-live-stats.py が10分毎に丸ごと再生成する。
 *   HTMLに手を入れると次の生成で消えるか、生成側と衝突する。
 *   ⇒ 生成側が固定して出すクラス名（stat / live / n / l / stats-note / sn-h / sn-b /
 *      sn-cta / sn-t）にだけCSSを掛ける。実測 2026-09-10: 上記9クラスで生成されている。
 *
 * 戻すのは <link> 1行を消すだけ。
 * ======================================================================== */

/* ── 1. バンド全体：奥行きと、横切る走査線 ─────────────────────── */
.stats{
  position:relative;overflow:hidden;
  background:
    radial-gradient(760px 300px at 50% 0%, rgba(25,194,179,.10), transparent 70%),
    var(--navy-deep);
}
/* 極薄の計器グリッド（バンドの中だけ） */
.stats::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(25,194,179,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(25,194,179,.07) 1px, transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(ellipse 100% 120% at 50% 0%, #000 10%, transparent 78%);
  mask-image:radial-gradient(ellipse 100% 120% at 50% 0%, #000 10%, transparent 78%);
}
/* 左から右へ走る光の線 */
.stats::after{
  content:"";position:absolute;top:0;bottom:0;width:220px;pointer-events:none;z-index:0;
  background:linear-gradient(90deg, transparent, rgba(25,194,179,.10) 45%, rgba(25,194,179,.16) 50%, rgba(25,194,179,.10) 55%, transparent);
  animation:sac-band-sweep 9s ease-in-out infinite;
}
@keyframes sac-band-sweep{ 0%{left:-240px} 100%{left:100%} }
.stats .wrap{position:relative;z-index:1}

/* ── 2. 各計器：区切りを発光させ、上に目盛りを1本 ───────────────── */
.stats .stat{
  border-left:1px solid rgba(25,194,179,.20);
  position:relative;
  transition:background .28s ease, transform .28s ease;
}
.stats .stat:first-child{border-left:0}
/* 計器の上端の目盛り（3本） */
.stats .stat::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:64px;height:9px;pointer-events:none;
  background:
    linear-gradient(90deg, rgba(25,194,179,.75) 1px, transparent 1px) 0 0/21px 9px repeat-x;
  opacity:.7;
}
.stats .stat:hover{background:rgba(25,194,179,.06);transform:translateY(-2px)}

/* ── 3. 数字：計器の読み。桁を揃え、下に基線を引く ───────────────── */
.stats .stat .n{
  font-variant-numeric:tabular-nums;
  letter-spacing:.005em;
  text-shadow:0 0 30px rgba(25,194,179,.38);
  position:relative;display:inline-block;
}
.stats .stat .n::after{
  content:"";position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);
  width:34px;height:1px;
  background:linear-gradient(90deg, transparent, rgba(25,194,179,.85), transparent);
}
.stats .stat.live .n{color:#5fe0b4;text-shadow:0 0 30px rgba(95,224,180,.5)}

/* ── 4. ラベル：計器の銘板らしく ───────────────────────────── */
.stats .stat .l{color:#8FB4D6;letter-spacing:.16em}

/* ── 5. 「LIVE」であることを、脈で示す ─────────────────────────
 * 生成側が .stat.live を必ず付けるので、ここに脈打つ点を置く */
.stats .stat.live .l::before{
  content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  background:#5fe0b4;box-shadow:0 0 8px #5fe0b4;
  margin-right:8px;vertical-align:middle;
  animation:sac-pulse-dot 2.4s ease-in-out infinite;
}
@keyframes sac-pulse-dot{ 0%,100%{opacity:.35;transform:scale(.85)} 50%{opacity:1;transform:scale(1.15)} }

/* ── 6. 下段の案内：計器盤のコンソール ───────────────────────── */
.stats .stats-note{
  border-top:1px solid rgba(25,194,179,.18);
  position:relative;
}
.stats .stats-note .sn-cta{
  box-shadow:0 0 30px rgba(95,224,180,.26);
  transition:box-shadow .24s ease, transform .24s ease;
}
.stats .stats-note .sn-cta:hover{box-shadow:0 0 46px rgba(95,224,180,.44)}
.stats .stats-note .sn-t{
  font-family:var(--en);font-size:11px;letter-spacing:.2em;color:#5F7E9E;
}

/* ── 7. アクセシビリティ・モバイル・印刷 ─────────────────────── */
@media (prefers-reduced-motion:reduce){
  .stats::after{animation:none;display:none}
  .stats .stat.live .l::before{animation:none;opacity:.9}
  .stats .stat{transition:none}
}
@media (max-width:820px){
  .stats::after{display:none}
  .stats::before{background-size:34px 34px}
  .stats .stat{border-left:0;border-top:1px solid rgba(25,194,179,.16)}
  .stats .stat:first-child{border-top:0}
  .stats .stat:hover{transform:none}
}
@media print{
  .stats::before,.stats::after{display:none!important}
  .stats .stat::before,.stats .stat .n::after{display:none!important}
  .stats .stat.live .l::before{display:none!important}
  .stats .stat .n{text-shadow:none!important}
}