/* status.cubek.dev: page layout on top of the design system (css/tokens.css, css/components.css). */
.brand { gap: var(--s-2); text-decoration: none; }
.brand-name { font-weight: 600; font-size: var(--text-lg); letter-spacing: var(--tracking-heading); }
.brand-sub { color: var(--muted); font-size: var(--text-lg); }
.page { max-width: 820px; padding-top: var(--s-10); padding-bottom: var(--s-16); }
.banner { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-5) var(--s-6); border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface); }
.banner h1 { font-size: var(--text-xl); margin: 0; }
.banner-at { margin-left: auto; font-size: var(--text-sm); }
.banner-ok { background: var(--ok-soft); border-color: transparent; }
.banner-warn { background: var(--warn-soft); border-color: transparent; }
.banner-danger { background: var(--danger-soft); border-color: transparent; }
.section { margin-top: var(--s-10); }
.section h2 { font-size: var(--text-md); color: var(--text-2); margin: 0 0 var(--s-3); }
.components { list-style: none; margin: 0; padding: 0; }
.component { padding: var(--s-4) var(--s-5); border-top: 1px solid var(--border); }
.component:first-child { border-top: 0; }
.component-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); }
.component-name { font-weight: 500; }
.bars { display: block; width: 100%; height: 28px; background: linear-gradient(90deg, var(--neutral-soft) 75%, transparent 75%) 0 0 / calc(100% / 90) 100% repeat-x; }
.bars rect { width: 3px; height: 28px; rx: 1px; }
.bars .ok { fill: var(--ok); }
.bars .warn { fill: var(--warn); }
.bars .danger { fill: var(--danger); }
.component-foot { display: flex; justify-content: space-between; font-size: var(--text-xs); margin-top: var(--s-2); }
.incident { margin-bottom: var(--s-3); padding: var(--s-4) var(--s-5); }
.incident-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); }
.incident h3 { font-size: var(--text-md); margin: 0; }
.updates { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; gap: var(--s-2); font-size: var(--text-sm); color: var(--text-2); }
@media (max-width: 640px) { .banner { flex-wrap: wrap; } .banner-at { margin-left: 0; width: 100%; } }