/* ai.ushost.org/status — status page only. Tokens and shared pieces: base.css. */
:root { --ok: #3fbf74; --warn: #e0a43a; --bad: #f0715b; --maint: rgb(var(--c1)); --none: #22262e; }

.status-main { padding: clamp(48px, 7vw, 88px) 0 var(--s-12); }
.status-main h1 { font-size: clamp(32px, 4.4vw, 48px); line-height: 1.08; letter-spacing: -0.03em; }
.status-main .sub { margin-top: var(--s-3); color: var(--fg-2); }

.banner { display: flex; align-items: center; gap: var(--s-4); margin: var(--s-7) 0; padding: var(--s-5) var(--s-6); border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--bg-1); color: var(--fg); font-weight: 560; font-size: 18px; letter-spacing: -0.01em; }
.banner .dot { width: 12px; height: 12px; flex: none; }
.banner.ok { border-color: rgba(63, 191, 116, 0.35); box-shadow: 0 0 60px -30px rgba(63, 191, 116, 0.6); }
.banner.degraded { border-color: rgba(224, 164, 58, 0.4); }
.banner.down { border-color: rgba(240, 113, 91, 0.45); }
.banner.maintenance { border-color: rgba(var(--c1), calc(0.45 * var(--tint-k))); }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--none); }
.dot.ok { background: var(--ok); box-shadow: 0 0 10px rgba(63, 191, 116, 0.6); } .dot.degraded { background: var(--warn); } .dot.down { background: var(--bad); } .dot.maintenance { background: var(--maint); }

.notice { border: 1px solid var(--line); border-left: 3px solid var(--maint); background: var(--bg-1); border-radius: var(--radius-md); padding: var(--s-4) var(--s-5); margin-bottom: var(--s-3); }
.notice.incident { border-left-color: var(--bad); }
.notice.info { border-left-color: var(--fg-3); }
.notice h3 { font-size: 16px; }
.notice .when { font-family: var(--font-mono); font-size: 12px; color: var(--fg-3); margin-top: var(--s-1); }
.notice p { margin-top: var(--s-2); font-size: 15px; white-space: pre-line; }

.panel { border-radius: var(--radius-lg); padding: 1px; background: var(--hairline); }
.panel-in { border-radius: calc(var(--radius-lg) - 1px); background: var(--bg-1); overflow: hidden; }
.comp { padding: var(--s-5) var(--s-6); }
.comp + .comp { border-top: 1px solid var(--line); }
.comp-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); }
.comp-name { color: var(--fg); font-weight: 560; }
.comp-desc { font-size: 13px; color: var(--fg-3); }
.comp-state { font-size: 14px; display: inline-flex; align-items: center; gap: var(--s-2); color: var(--fg-2); white-space: nowrap; }
.bars { display: grid; grid-template-columns: repeat(90, 1fr); gap: 2px; height: 28px; margin-top: var(--s-3); }
.bars i { border-radius: 2px; background: var(--none); }
.bars i.ok { background: var(--ok); opacity: 0.85; } .bars i.degraded { background: var(--warn); } .bars i.down { background: var(--bad); } .bars i.maintenance { background: var(--maint); }
@media (max-width: 599px) { .bars { grid-template-columns: repeat(45, 1fr); } .bars i:nth-child(-n+45) { display: none; } .comp { padding: var(--s-4); } }
.bars-legend { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); margin-top: var(--s-2); }
h2.sub-h { font-size: 18px; margin: var(--s-9) 0 var(--s-3); }
.incidents { list-style: none; }
.incidents li { padding: var(--s-3) 0; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--fg); }
.incidents li span { display: block; font-family: var(--font-mono); font-size: 12px; color: var(--fg-3); }
.incidents li.muted { color: var(--fg-3); }
.updated { margin-top: var(--s-6); font-family: var(--font-mono); font-size: 12px; color: var(--fg-3); }
/* Placeholder rows hold the panel's height until the live rows arrive (no layout shift). */
.skel .comp-name, .skel .comp-desc { width: 40%; border-radius: 6px; background: rgba(255, 255, 255, 0.04); }
.skel .comp-desc { width: 26%; margin-top: 4px; }
.skel .bars { background: rgba(255, 255, 255, 0.025); border-radius: 4px; }