/* ============================================================
   Wattly — System Status page
   Builds on home.css tokens. Live uptime bars + service cards.
   ============================================================ */

.status-shell { padding-top: 124px; padding-bottom: var(--sect); }
.status-wrap { max-width: 820px; margin: 0 auto; }

/* Header */
.status-head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: 38px; }
.status-head .status-ic { width: 44px; height: 44px; color: var(--accent); }
.status-head h1 { font-weight: 900; font-size: clamp(2.2rem, 5vw, 3.3rem); letter-spacing: -0.035em; line-height: 1.02; }
.status-head p { color: var(--tx-2); font-size: 1.08rem; }

/* Overall banner */
.status-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  padding: 4px 2px 26px; margin-bottom: 26px;
  border-bottom: 1px solid var(--hair);
}
.status-ind { display: flex; align-items: center; gap: 14px; }
.status-bdot { width: 12px; height: 12px; border-radius: 50%; background: var(--tx-3); flex: none; position: relative; }
.status-banner.operational .status-bdot { background: var(--accent); }
.status-banner.degraded .status-bdot { background: #f5b842; }
.status-banner.down .status-bdot { background: #fa6152; }
.status-banner.operational .status-bdot::after,
.status-banner.degraded .status-bdot::after,
.status-banner.down .status-bdot::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  background: inherit; opacity: 0.35; animation: pingdot 2.4s ease-out infinite;
}
@keyframes pingdot { 0% { transform: scale(0.6); opacity: 0.5; } 80%,100% { transform: scale(2.1); opacity: 0; } }
.status-btext { font-weight: 800; font-size: clamp(1.4rem, 2.6vw, 1.9rem); letter-spacing: -0.025em; }
.status-banner.operational .status-btext { color: var(--accent); }
.status-banner.degraded .status-btext { color: #f5b842; }
.status-banner.down .status-btext { color: #fa6152; }
.status-updated { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tx-3); }
.status-updated b { color: var(--tx-2); font-weight: 500; }

/* Services */
.services-list { display: flex; flex-direction: column; gap: 14px; }
.service-card { padding: 22px 24px; border: 1px solid var(--hair); border-radius: var(--r-md); background: var(--surface); transition: border-color .2s ease; }
.service-card:hover { border-color: var(--hair-2); }
.service-card.loading { opacity: 0.6; }
.service-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.service-name { font-weight: 700; font-size: 1.05rem; letter-spacing: -0.015em; }
.service-badge { font-family: var(--mono); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--hair-2); color: var(--tx-2); }
.service-badge.operational { background: var(--accent-dim); border-color: var(--accent-line); color: var(--accent); }
.service-badge.degraded { background: rgba(245,184,66,0.12); border-color: rgba(245,184,66,0.32); color: #f5b842; }
.service-badge.down { background: rgba(250,97,82,0.12); border-color: rgba(250,97,82,0.32); color: #fa6152; }

/* Uptime bars */
.service-bars { display: flex; gap: 2px; height: 36px; align-items: stretch; }
.ubar { flex: 1; border-radius: 2px; min-width: 2px; background: var(--hair); transition: transform .12s ease, filter .12s ease; position: relative; }
.ubar:hover { transform: scaleY(1.08); filter: brightness(1.25); }
.ubar.bar-ok { background: var(--accent); opacity: 0.85; }
.ubar.bar-warn { background: #f5b842; opacity: 0.9; }
.ubar.bar-down { background: #fa6152; }
.ubar.bar-empty { background: var(--hair); }
.ubar[data-tip]:hover::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  white-space: nowrap; font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.04em;
  padding: 6px 9px; border-radius: 7px; background: #000; border: 1px solid var(--hair-2); color: var(--tx); z-index: 5; pointer-events: none;
}
.bar-legend { display: flex; align-items: center; justify-content: space-between; margin-top: 11px; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tx-3); }
.bar-legend-pct { color: var(--tx-2); }
.bar-legend-pct.good { color: var(--accent); }
.bar-legend-pct.warning { color: #f5b842; }
.bar-legend-pct.poor { color: #fa6152; }

/* Footnote */
.status-footnote { text-align: center; margin-top: 34px; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tx-3); }
.status-footnote a { color: var(--accent); text-decoration: none; }
.status-footnote a:hover { text-decoration: underline; }
.status-demo-note { display: inline-block; margin-top: 8px; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tx-3); opacity: 0.7; }

/* Responsive */
@media (max-width: 600px) {
  .status-shell { padding-top: 104px; }
  .status-banner { flex-direction: column; align-items: flex-start; gap: 12px; }
  .service-bars { height: 30px; }
  .service-bars .ubar:nth-child(n+61) { display: none; } /* show ~30 days on phones */
  .bar-legend span:first-child { content: "30 days ago"; }
}