/* Generated by bin/build-assets.php — do not edit. Source: resources/css/pages/status.css */
/* Public service-status page. Source plan: pages-expanded.md:76-86. */

.page-status .status-page {
    width: 100%;
    max-width: var(--container-default);
    margin-inline: auto;
    padding: var(--sp-600) var(--sp-300);
    box-sizing: border-box;
}

.status-page__header {
    max-width: 48rem;
    margin-bottom: var(--sp-500);
}

.status-page__eyebrow {
    margin: 0 0 var(--sp-150);
    /* AA: --c-green fails on white (1.95:1); navy-light is 5.51:1 and matches
       .home-section__eyebrow. See tokens/color/green.css A11Y GUARD. */
    color: var(--c-navy-light);
    font-size: var(--fs-sm);
    font-weight: 700;
    text-transform: uppercase;
}

.status-page h1 {
    margin: 0 0 var(--sp-250);
    color: var(--c-navy);
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.1;
}

.status-page__lead {
    margin: 0;
    color: var(--c-text-secondary);
    font-size: var(--fs-lg);
    line-height: 1.55;
}

.status-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-300);
    padding: var(--sp-400);
    margin-bottom: var(--sp-350);
    border: 1px solid var(--c-border);
    border-left: 4px solid var(--c-green);
    border-radius: var(--r-md);
    background: #fff;
}

.status-summary h2 {
    margin: 0 0 var(--sp-100);
    color: var(--c-navy);
    font-size: var(--fs-xl);
}

.status-summary p {
    margin: 0;
    color: var(--c-text-secondary);
}

.status-pill,
.status-dot {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    white-space: nowrap;
    font-size: var(--fs-sm);
    font-weight: 700;
}

.status-pill {
    padding: .45rem .75rem;
    border-radius: 999px;
}

.status-dot::before,
.status-legend__item span {
    content: '';
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
    background: currentColor;
}

.status-pill--operational,
.status-dot--operational,
.status-legend__item--operational {
    color: #176d3b;
    background: #e8f7ee;
}

.status-pill--degraded,
.status-dot--degraded,
.status-legend__item--degraded {
    color: #8a5a00;
    background: #fff5dc;
}

.status-pill--maintenance,
.status-dot--maintenance,
.status-legend__item--maintenance {
    color: #315a8c;
    background: #eaf2ff;
}

.status-pill--incident,
.status-dot--incident,
.status-legend__item--incident {
    color: #9d2424;
    background: #ffeded;
}

.status-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-200);
    margin-bottom: var(--sp-500);
}

.status-legend__item {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .6rem;
    border-radius: 999px;
    font-size: var(--fs-xs);
    font-weight: 700;
}

.status-components h2,
.status-incidents h2 {
    margin: 0 0 var(--sp-300);
    color: var(--c-navy);
    font-size: var(--fs-xl);
}

.status-components__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: var(--sp-300);
    margin-bottom: var(--sp-600);
}

.status-component {
    padding: var(--sp-350);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    background: #fff;
}

.status-component__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-250);
    margin-bottom: var(--sp-250);
}

.status-component h3 {
    margin: 0;
    color: var(--c-navy);
    font-size: var(--fs-md);
}

.status-component p {
    margin: 0;
    color: var(--c-text-secondary);
    line-height: 1.55;
}

.status-incidents__intro {
    margin: 0 0 var(--sp-300);
    color: var(--c-text-secondary);
}

.status-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
}

.status-timeline__item {
    position: relative;
    padding: var(--sp-300) var(--sp-350);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    background: #fff;
}

.status-timeline__date {
    display: block;
    margin-bottom: var(--sp-100);
    color: var(--c-text-secondary);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
}

.status-timeline strong {
    color: var(--c-navy);
}

.status-timeline p {
    margin: var(--sp-100) 0 0;
    color: var(--c-text-secondary);
}

@media (max-width: 720px) {
    .status-summary,
    .status-component__top {
        align-items: stretch;
        flex-direction: column;
    }
}