/* status.ditesol.com */
[hidden] { display: none !important; }
body.status-page { background: #f6f8fb; min-height: 100vh; }
.st-wrap { width: min(860px, 100% - 2rem); margin-inline: auto; }
.st-header { background: var(--white); border-bottom: 1px solid var(--line); }
.st-bar { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 1rem; }
.st-links { display: flex; align-items: center; gap: 1rem; font-weight: 600; font-size: 0.9rem; }
.st-links a:not(.btn) { color: var(--muted); text-decoration: none; }
@media (max-width: 520px) { .st-links a:not(.btn) { display: none; } }
.st-main { padding: 2rem 0 1rem; display: grid; gap: 1.5rem; }

:root {
  --s-operational: #16a34a;
  --s-degraded: #eab308;
  --s-partial_outage: #f97316;
  --s-major_outage: #dc2626;
  --s-maintenance: #3b82f6;
  --s-none: #e2e8f0;
}
.s-operational { --c: var(--s-operational); }
.s-degraded { --c: var(--s-degraded); }
.s-partial_outage { --c: var(--s-partial_outage); }
.s-major_outage { --c: var(--s-major_outage); }
.s-maintenance { --c: var(--s-maintenance); }
.s-none { --c: var(--s-none); }

.st-overall { display: flex; align-items: center; gap: 0.8rem; padding: 1.2rem 1.4rem; border-radius: var(--radius); background: var(--c, #64748b); color: var(--white); font-size: 1.25rem; font-weight: 700; box-shadow: var(--shadow); }
.st-overall.loading { --c: #64748b; }
.st-overall.s-degraded { color: #422006; }
.st-dot { width: 14px; height: 14px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.3); flex-shrink: 0; }

.st-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.st-card-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; padding: 1rem 1.4rem; border-bottom: 1px solid var(--line); }
.st-card-head h2 { font-size: 1.1rem; margin: 0; }
.st-card-head .muted { font-size: 0.85rem; }
.st-pad { padding: 1rem 1.4rem; margin: 0; }

.st-group-name { padding: 0.8rem 1.4rem 0.3rem; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.st-comp { padding: 0.9rem 1.4rem 1rem; border-bottom: 1px solid var(--line); }
.st-comp:last-child { border-bottom: 0; }
.st-comp-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 0.6rem; }
.st-comp-name { font-weight: 700; color: var(--navy); }
.st-comp-desc { display: block; font-weight: 400; font-size: 0.82rem; color: var(--muted); }
.st-comp-status { font-size: 0.85rem; font-weight: 700; color: var(--c); white-space: nowrap; }
.st-comp-status.s-degraded { color: #a16207; }

.st-bars { display: flex; gap: 2px; height: 34px; }
.st-bars span { flex: 1; border-radius: 2px; background: var(--c); min-width: 2px; cursor: pointer; transition: opacity 0.1s; }
.st-bars span:hover { opacity: 0.7; }
.st-bars-foot { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--muted); margin-top: 0.35rem; }
.st-bars-foot b { color: var(--ink); font-weight: 700; }
@media (max-width: 600px) { .st-bars span:nth-child(-n + 60) { display: none; } .st-bars-foot .ago90 { display: none; } .st-bars-foot .ago30 { display: inline !important; } }
.st-bars-foot .ago30 { display: none; }

.st-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; padding: 0.8rem 1.4rem; border-top: 1px solid var(--line); background: #fafbfd; font-size: 0.78rem; color: var(--muted); }
.st-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--c); margin-right: 0.35rem; vertical-align: -1px; }

/* Incidents */
.st-incident { background: var(--white); border: 1px solid var(--line); border-left: 5px solid var(--c); border-radius: var(--radius); padding: 1.1rem 1.4rem; margin-bottom: 1rem; }
.st-incident h3 { margin: 0 0 0.2rem; font-size: 1.1rem; color: var(--c); }
.st-incident.s-degraded h3 { color: #a16207; }
.st-incident .st-affects { font-size: 0.85rem; color: var(--muted); margin-bottom: 0.8rem; }
.st-update { padding: 0.6rem 0; border-top: 1px dashed var(--line); font-size: 0.95rem; }
.st-update:first-of-type { border-top: 0; }
.st-update strong { color: var(--navy); }
.st-update .when { display: block; font-size: 0.8rem; color: var(--muted); margin-top: 0.15rem; }
.st-section-title { font-size: 0.85rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.6rem; }

.st-past h2 { font-size: 1.2rem; margin: 0.5rem 0 0.8rem; }
.st-day { padding: 0.9rem 0; border-bottom: 1px solid var(--line); }
.st-day h3 { font-size: 0.95rem; margin: 0 0 0.4rem; color: var(--navy); }
.st-day .none { color: var(--muted); font-size: 0.9rem; margin: 0; }
.st-past-item { margin: 0.4rem 0 0.8rem; }
.st-past-item b { color: var(--c); }
.st-past-item.s-degraded b { color: #a16207; }
.st-past-item p { margin: 0.15rem 0 0; font-size: 0.9rem; color: var(--ink); }
.st-past-item small { color: var(--muted); }

.st-footer { padding: 1.5rem 0 3rem; font-size: 0.85rem; color: var(--muted); text-align: center; }
.st-footer p { margin: 0.3rem 0; }

.st-tip { position: fixed; z-index: 100; background: var(--navy); color: var(--white); font-size: 0.8rem; line-height: 1.4; padding: 0.55rem 0.75rem; border-radius: 8px; pointer-events: none; max-width: 240px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); }
.st-tip b { display: block; }