.home-status-row { display: flex; align-items: center; gap: 8px; }
.home-status-row .home-status-lead { color: var(--color-text); font-weight: 600; }
.home-status-row .home-status-text { min-width: 0; font-size: 13px; color: var(--color-text-muted); }
.home-status-row .home-status-arrow { flex: none; color: var(--color-text-muted); }
.home-status-row time { font-variant-numeric: tabular-nums; }

.home-status-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--color-text-muted); }
.home-status--ok .home-status-dot { background: var(--color-success); }
.home-status--warn .home-status-dot { background: var(--color-warning); }

.home-hero-status { margin-top: 20px; min-height: 44px; }
.l-hero-center .home-hero-status { justify-content: center; }
.home-hero--with-card .l-hero-center .home-hero-status { justify-content: flex-start; }

.home-status-body { margin-top: var(--space-10); display: flex; flex-direction: column; gap: var(--space-4); }
.home-status-aside { display: flex; flex-direction: column; gap: var(--space-4); }

.home-status-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.home-status-card--main { overflow: hidden; }

.home-status-line { padding: 12px 20px; border-bottom: 1px solid var(--color-border); }

.home-status-component {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 110px 90px;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--color-border);
}

.home-status-component:last-child { border-bottom: none; }
.home-status-component-name { font-size: 13.5px; font-weight: 600; color: var(--color-text); overflow-wrap: anywhere; }
.home-status-component-status { font-size: 13px; color: var(--color-text-muted); }
.home-status-component-status.is-ok { color: var(--color-success); }
.home-status-component-uptime { font: 600 13px/1 var(--font-mono); color: var(--color-text); text-align: right; font-variant-numeric: tabular-nums; }

.landing .home-status-period { padding: 12px 20px; font-size: 12px; color: var(--color-text-muted); }

.home-status-card--incident { padding: 16px 20px; display: flex; flex-direction: column; gap: 8px; }
.home-status-incident-head { display: flex; align-items: center; gap: 8px; }
.home-status-incident-label { font-size: 13px; font-weight: 700; color: var(--color-text); }
.landing .home-status-incident-affected { font-size: 12.5px; color: var(--color-text-muted); }

.landing .home-status-empty { font-size: 13.5px; line-height: 1.6; color: var(--color-text-muted); }

.home-status-links { display: flex; flex-wrap: wrap; gap: 8px; }

.home-status-chip {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 12px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 16px;
}

.home-status-chip span { font: 600 12px/1 var(--font-mono); color: var(--color-text); }
.home-status-chip:hover { border-color: var(--color-text-muted); }
.landing .home-status-body .home-status-aside .home-status-links a.home-status-chip:hover { text-decoration: none; }

@media (min-width: 1024px) {
    .home-status-body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 20px; align-items: start; }
}

@media (max-width: 1023px) {
    .home-status-line,
    .home-status-incident-link,
    .home-status-chip { min-height: 44px; }
}

@media (max-width: 767px) {
    .home-status-body { margin-top: var(--space-6); gap: var(--space-3); }
    .home-status-aside { gap: var(--space-3); }

    .home-status-component {
        grid-template-columns: minmax(0, 1fr) 60px;
        grid-template-areas: "name uptime" "status uptime";
        row-gap: 2px;
        padding: 12px 16px;
    }

    .home-status-component-name { grid-area: name; }
    .home-status-component-status { grid-area: status; }
    .home-status-component-uptime { grid-area: uptime; align-self: center; }
}