:root{
  --bg:#EEF2F7; --surface:#FFFFFF; --border:#DCE3EC; --border-strong:#C6D0DD;
  --ink:#16202E; --muted:#5B6B7F; --accent:#2D4A86;
  --ok:#178A5A; --ok-bg:#E7F4EC; --warn:#C07A00; --warn-bg:#FBF1DF;
  --down:#C0392B; --down-bg:#FBE9E7;
  --radius:14px; --shadow:0 1px 2px rgba(22,32,46,.04), 0 8px 24px rgba(22,32,46,.05);
  --jp:"Yu Gothic","YuGothic","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  --disp:"Space Grotesk",var(--jp); --mono:"JetBrains Mono","SFMono-Regular",Consolas,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--jp);line-height:1.65;
     -webkit-font-smoothing:antialiased;letter-spacing:.01em}
.wrap{max-width:820px;margin:0 auto;padding:0 20px}
header.top{position:sticky;top:0;z-index:10;background:rgba(238,242,247,.85);
  backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--border)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:60px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--disp);font-weight:700;font-size:16px}
.brand .mark{width:26px;height:26px;border-radius:7px;background:linear-gradient(135deg,var(--accent),#5878c0);
  display:grid;place-items:center;color:#fff;font-family:var(--disp);font-weight:700;font-size:13px}
.updated{font-family:var(--mono);font-size:12px;color:var(--muted)}
.hero{padding:44px 0 30px}
.hero-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:30px 30px 8px;position:relative;overflow:hidden}
.hero-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px}

/* 左端の帯の色切り替え */
.state-down .hero-card::before{background:var(--down)}
.state-warn .hero-card::before{background:var(--warn)}
.state-ok .hero-card::before{background:var(--ok)}

.status-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:0 0 10px}
.status-line{display:flex;align-items:center;gap:14px;margin:0}

/* 脈動する点(dot)のステータス切り替え */
.dot{width:15px;height:15px;border-radius:50%;flex:none;position:relative}
.state-down .dot{background:var(--down)}
.state-warn .dot{background:var(--warn)}
.state-ok .dot{background:var(--ok)}

.dot::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid currentColor;
  opacity:.35;animation:pulse 2.4s ease-out infinite}
.state-down .dot::after{color:var(--down)}
.state-warn .dot::after{color:var(--warn)}
.state-ok .dot::after{color:var(--ok)}

@keyframes pulse{0%{transform:scale(.6);opacity:.5}100%{transform:scale(1.25);opacity:0}}
.status-title{font-family:var(--disp);font-weight:600;font-size:27px;margin:0}
.status-sub{color:var(--muted);margin:9px 0 0;font-size:15px}
.stepper{display:flex;align-items:flex-start;margin:26px 0 6px;padding-top:22px;border-top:1px dashed var(--border)}
.step{flex:1;position:relative;text-align:center}
.step .node{width:16px;height:16px;border-radius:50%;background:var(--surface);border:2px solid var(--border-strong);
  margin:0 auto 10px;position:relative;z-index:2}
.step .bar{position:absolute;top:7px;left:50%;width:100%;height:2px;background:var(--border);z-index:1}
.step:last-child .bar{display:none}
.step .lbl{font-size:12.5px;color:var(--muted);font-weight:600}
.step .time{font-family:var(--mono);font-size:11px;color:var(--muted);opacity:.75;margin-top:3px;min-height:14px}

/* 🟢 done (完了：緑) 状態 */
.step.done .node{background:var(--ok);border-color:var(--ok)}
.step.done .bar{background:var(--ok)}
.step.done .lbl{color:var(--ink)}

/* 🔴 active (現在地：赤) 状態 */
.step.active .node{background:var(--down);border-color:var(--down);box-shadow:0 0 0 5px var(--down-bg)}
.step.active .lbl{color:var(--down)}

/* 計画メンテナンスバナー(Backlog告知、期間つき・予告中/作業中のみ表示) */
.maint-banner{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:20px 22px;position:relative;overflow:hidden;margin-bottom:14px}
.maint-banner::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--accent)}
.maint-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);margin:0 0 8px;font-weight:600}
.maint-title{font-family:var(--disp);font-weight:600;font-size:16px;margin:0 0 6px}
.maint-meta{font-family:var(--mono);font-size:12px;color:var(--muted);margin:0 0 10px}
.maint-body{font-size:13.5px;color:var(--ink);line-height:1.7;margin:0}

/* コンポーネント以下 */
section{margin:34px 0}
h2.sec{font-family:var(--disp);font-weight:600;font-size:14px;margin:0 0 14px;display:flex;align-items:center;gap:9px}
h2.sec .tick{font-family:var(--mono);font-size:11px;color:var(--muted);font-weight:500}
.comp{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.comp-row{display:flex;align-items:center;justify-content:space-between;padding:15px 20px;border-top:1px solid var(--border)}
.comp-row:first-child{border-top:none}
.comp-name{font-size:15px;font-weight:600}
.comp-name small{display:block;font-weight:400;color:var(--muted);font-size:12.5px;margin-top:1px}
.pill{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;padding:5px 12px;border-radius:999px}
.pill .pd{width:8px;height:8px;border-radius:50%}
.pill.ok{background:var(--ok-bg);color:var(--ok)} .pill.ok .pd{background:var(--ok)}
.pill.warn{background:var(--warn-bg);color:var(--warn)} .pill.warn .pd{background:var(--warn)}
.pill.down{background:var(--down-bg);color:var(--down)} .pill.down .pd{background:var(--down)}
.uptime{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px}
.uptime-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.uptime-head .pct{font-family:var(--mono);font-weight:500;font-size:15px}
.bars{display:flex;gap:2px;height:34px;position:relative}
.bars i{flex:1;border-radius:2px;background:var(--ok);opacity:.9}
.bars i.w{background:var(--warn)} .bars i.d{background:var(--down)}
.bars i:hover{opacity:.6}
.bars i.maint{background:repeating-linear-gradient(135deg,#eef2fb 0 6px,#dbe3f5 6px 12px);opacity:1}
.maint-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:600;color:var(--accent);text-align:center;padding:0 10px}
.uptime-head .pct.maint{color:var(--accent)}
.uptime-foot{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:9px}
.calc{margin-top:14px;padding-top:13px;border-top:1px dashed var(--border)}
.calc-title{font-size:12px;font-weight:600;color:var(--ink);margin:0 0 11px}
.calc-grid{display:grid;grid-template-columns:auto 1fr auto;gap:8px 16px;align-items:baseline;margin:0;
  font-family:var(--mono);font-size:12px;color:var(--muted)}
.calc-grid .k{color:var(--ink);font-family:var(--jp);font-weight:600;font-size:12px;white-space:nowrap}
.calc-grid .f{overflow-wrap:anywhere}
.calc-grid .r{color:var(--ok);font-weight:500;text-align:right;white-space:nowrap}
.calc-note{font-size:11px;color:var(--muted);margin-top:12px;opacity:.85;line-height:1.6}
@media (max-width:560px){.calc-grid{grid-template-columns:1fr auto}.calc-grid .k{grid-column:1 / -1;margin-top:4px}}
.inc{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
details.item{border-top:1px solid var(--border)} details.item:first-child{border-top:none}
summary{list-style:none;cursor:pointer;padding:16px 20px;display:flex;gap:13px;align-items:flex-start}
summary::-webkit-details-marker{display:none}
.idot{width:9px;height:9px;border-radius:50%;margin-top:7px;flex:none}
.idot.down{background:var(--down)} .idot.warn{background:var(--warn)} .idot.ok{background:var(--ok)} .idot.maint{background:var(--accent)}
.isum{flex:1}
.ihead{font-size:15px;font-weight:600} .idate{font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:2px}
.ibadge{font-size:11px;font-weight:700;padding:3px 9px;border-radius:6px;white-space:nowrap;margin-top:2px}
.ibadge.resolved{background:var(--ok-bg);color:var(--ok)} .ibadge.active{background:var(--down-bg);color:var(--down)} .ibadge.maint{background:#eef2fb;color:var(--accent)}
.timeline{padding:2px 20px 18px 42px}
.tl{position:relative;padding:8px 0 8px 20px;border-left:2px solid var(--border)}
.tl::before{content:"";position:absolute;left:-6px;top:12px;width:10px;height:10px;border-radius:50%;background:var(--surface);border:2px solid var(--border-strong)}
.tl .tt{font-family:var(--mono);font-size:11.5px;color:var(--muted)} .tl .ts{font-weight:600;font-size:13.5px;margin-top:1px}
.tl .tx{font-size:13.5px;color:var(--muted);margin-top:2px}
.tl.res::before{background:var(--ok);border-color:var(--ok)}
@media (max-width:560px){.status-title{font-size:22px}.step .lbl{font-size:11px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}

/* 🟡 復旧監視中(SUSPECT)用のオレンジ表示定義を、既存ルールを壊さずに安全に追加 */
.state-warn .hero-card::before { background: var(--warn); }
.state-warn .dot { background: var(--warn); }
.state-warn .dot::after { color: var(--warn); }
.step.active-warn .node {
    background: var(--warn);
    border-color: var(--warn);
    box-shadow: 0 0 0 5px var(--warn-bg);
}