/* Page de statut (chargée après home.css et patch-notes.css, dont elle réutilise le hero). */

/* En-tête : état global et disponibilité sur 30 jours */
.st-summary{display:flex;align-items:stretch;gap:14px;flex-wrap:wrap;margin-top:28px}
.st-banner{flex:1 1 320px;display:flex;align-items:center;gap:14px;padding:18px 22px;background:var(--panel);border:1px solid var(--line-2);}
.st-banner div{display:flex;flex-direction:column;gap:3px;min-width:0}
.st-banner strong{font-size:19px;font-weight:750;letter-spacing:-.01em}
.st-banner .st-age{font-size:13px;color:var(--dim)}
.st-banner .st-dot{width:14px;height:14px;}
.st-banner.up{border-color:rgba(29,224,98,.4);background:linear-gradient(90deg,rgba(29,224,98,.12),var(--panel) 60%)}
.st-banner.slow{border-color:rgba(255,190,90,.45);background:linear-gradient(90deg,rgba(255,190,90,.12),var(--panel) 60%)}
.st-banner.down{border-color:rgba(255,110,110,.5);background:linear-gradient(90deg,rgba(255,110,110,.14),var(--panel) 60%)}
.st-kpi{flex:0 0 auto;display:flex;flex-direction:column;justify-content:center;gap:2px;padding:14px 24px;background:var(--panel);border:1px solid var(--line-2);}
.st-kpi strong{font-family:var(--pix);font-size:26px;color:#1de062;letter-spacing:.02em}
.st-kpi span{font-size:12.5px;color:var(--dim)}

.st-dot{display:inline-block;width:10px;height:10px;flex:none;background:var(--dim)}
.up>.st-dot,.st-dot.up{background:#1de062;box-shadow:0 0 10px rgba(29,224,98,.7)}
.st-banner.up>.st-dot{animation:pulse 2.4s ease-in-out infinite}
.slow>.st-dot,.st-dot.slow{background:#ffbe5a;box-shadow:0 0 10px rgba(255,190,90,.7)}
.down>.st-dot,.st-dot.down{background:#ff6e6e;box-shadow:0 0 10px rgba(255,110,110,.7);animation:pulse 1s ease-in-out infinite}
@keyframes pulse{50%{opacity:.4}}

/* Groupes */
.status{padding-top:8px}
.st-group{margin-top:38px}
.st-group:first-child{margin-top:0}
.st-ghead{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.st-ghead h2{font-family:var(--pix);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.st-ghead p{font-size:13.5px;color:var(--dim)}
.st-list{display:grid;gap:10px}

/* Un service : nom, état, puis l'historique (une case par minute, sur une heure) */
.st-row{padding:16px 20px 12px;background:rgba(17,26,48,.72);border:1px solid var(--line-2);transition:border-color .2s}
.st-row:hover{border-color:rgba(255,255,255,.14)}
.st-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:12px}
.st-name{display:flex;flex-direction:column;min-width:0}
.st-name strong{font-size:15px;font-weight:650}
.st-name span{font-size:12.5px;color:var(--dim)}
.st-right{display:flex;align-items:center;gap:14px;white-space:nowrap}
.st-state{display:inline-flex;align-items:center;gap:8px;font-family:var(--pix);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase}
.st-state .st-dot{width:8px;height:8px;animation:none}
.st-state.up{color:#1de062}
.st-state.slow{color:#ffbe5a}
.st-state.down{color:#ff6e6e}
.st-state.wait{color:var(--dim)}
.st-num{font-size:13px;font-weight:650;color:var(--text);min-width:64px;text-align:right}

.st-bars{display:flex;gap:2px;height:30px;align-items:stretch}
.st-bars i{flex:1;min-width:2px;background:rgba(255,255,255,.07);transition:transform .15s,filter .15s;cursor:default}
.st-bars i.up{background:#1de062;opacity:.8}
.st-bars i.slow{background:#ffbe5a}
.st-bars i.down{background:#ff6e6e}
.st-bars i:hover{transform:scaleY(1.18);filter:brightness(1.2)}
.st-legend{display:flex;justify-content:space-between;gap:10px;margin-top:7px;font-size:11.5px;color:var(--dim)}
.st-legend .ms{color:var(--muted)}

/* Incidents */
.st-none{display:flex;align-items:center;gap:12px;padding:16px 20px;background:rgba(17,26,48,.72);border:1px solid var(--line-2);font-size:14px;color:var(--muted)}
.st-none .st-dot{animation:none}
.st-inc-list{display:grid;gap:10px}
.st-inc{padding:14px 20px;background:rgba(17,26,48,.72);border:1px solid var(--line-2)}
.st-inc-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.st-inc-h .st-dot{animation:none}
.st-inc h3{font-size:15px;font-weight:650}
.st-inc p{margin-top:6px;font-size:13px;color:var(--dim)}
.st-tag{margin-left:auto;padding:3px 9px;font-family:var(--pix);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase}
.st-tag.done{background:rgba(29,224,98,.12);color:#1de062}
.st-tag.open{background:rgba(255,110,110,.14);color:#ff6e6e}

.st-how{margin-top:30px;font-size:13.5px;color:var(--dim);max-width:760px}
.st-how a{color:var(--accent)}

@media (max-width:760px){
  .st-kpi{flex:1 1 100%}
  .st-top{flex-direction:column;gap:8px}
  .st-bars{gap:1px;height:24px}
  .st-bars i{min-width:1px;}
}