/* The API status page (api-status.js). */
.st { padding-top: 40px; }
.st-hero { display: grid; gap: 8px; margin-bottom: 22px; }
.st-hero h1 { margin: 0; display: flex; align-items: center; gap: 14px; font: 700 clamp(30px, 4.2vw, 48px)/1.08 var(--font-ui); letter-spacing: -.03em; }
.st-hero h1 i { width: 18px; height: 18px; border-radius: 50%; flex: none; background: var(--st, #5fe07a); box-shadow: 0 0 0 6px color-mix(in srgb, var(--st, #5fe07a) 20%, transparent), 0 0 22px var(--st, #5fe07a); animation: st-pulse 2.4s ease-in-out infinite; }
@keyframes st-pulse { 50% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--st, #5fe07a) 6%, transparent), 0 0 30px var(--st, #5fe07a); } }
@media (prefers-reduced-motion: reduce) { .st-hero h1 i { animation: none; } }
.st-card { margin-bottom: 14px; }
.st-key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 12.5px; color: var(--mute); }
.st-key i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: -6px; }
.st-comp { padding: 16px 0; border-top: 1px solid var(--line); }
.st-comp:first-of-type { border-top: 0; padding-top: 4px; }
.st-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.st-row h3 { margin: 0; font: 600 16px/1.2 var(--font-ui); }
.st-row p { margin: 4px 0 0; font-size: 13px; color: var(--mute); }
.st-state { font: 600 13px/1 var(--font-ui); display: inline-flex; align-items: center; gap: 8px; }
.st-state i { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.st-bars { display: grid; grid-template-columns: repeat(90, 1fr); gap: 2px; height: 34px; margin-top: 12px; }
.st-bars span { border-radius: 2px; background: var(--c); transition: transform .12s; position: relative; }
.st-bars span:hover { transform: scaleY(1.15); }
.st-scale { display: flex; justify-content: space-between; font: 400 11.5px/1 var(--font-mono); color: var(--mute); margin-top: 6px; }
.operational { --c: #4fcf72; color: #5fe07a; } .degraded { --c: #e9c04f; color: #f2cf6a; } .partial { --c: #f08a4b; color: #f6a06a; } .outage { --c: #e5534b; color: #ff7b72; } .nodata { --c: #ffffff14; color: var(--mute); } .off { --c: #ffffff10; color: var(--mute); } .maintenance { --c: #6aa6ff; color: #8ab8ff; }
.st-key i.operational, .st-key i.degraded, .st-key i.partial, .st-key i.outage, .st-key i.nodata { background: var(--c); }
.st-inc { border-radius: 16px; padding: 18px 20px; margin-bottom: 14px; border: 1px solid color-mix(in srgb, var(--c) 55%, var(--line)); background: color-mix(in srgb, var(--c) 9%, var(--tile, #182027)); }
.st-inc h2 { margin: 0 0 4px; font: 600 19px/1.25 var(--font-ui); color: var(--ink); }
.st-meta { font-size: 12.5px; color: var(--mute); }
.st-updates { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.st-updates li { display: grid; grid-template-columns: 120px 1fr; gap: 12px; font-size: 14px; color: var(--ink); }
.st-updates b { text-transform: capitalize; }
.st-updates time { display: block; font: 400 12px/1.4 var(--font-mono); color: var(--mute); }
.st-hist { padding: 14px 0; border-top: 1px solid var(--line); }
.st-hist:first-child { border-top: 0; }
.st-hist summary { cursor: pointer; display: flex; justify-content: space-between; gap: 12px; list-style: none; }
.st-hist summary::-webkit-details-marker { display: none; }
.st-hist h3 { margin: 0; font: 600 15px/1.3 var(--font-ui); }
.st-how code { font-family: var(--font-mono); font-size: 12.5px; }
.st-tip { position: fixed; z-index: 30; pointer-events: none; padding: 8px 10px; border-radius: 10px; background: #0e1418f2; border: 1px solid var(--line-2); font-size: 12.5px; color: var(--ink); white-space: nowrap; }
@media (max-width: 720px) { .st-bars { grid-template-columns: repeat(45, 1fr); } .st-bars span:nth-child(-n + 45) { display: none; } .st-updates li { grid-template-columns: 1fr; gap: 2px; } }
.st-how h2 { margin: 0 0 10px; font: 600 18px/1.2 var(--font-ui); letter-spacing: 0; }