/*
 * Styles for the public /status/<slug> pages only.
 *
 * Kept out of style.css deliberately: the card classes in style.css are
 * shared with nine other templates, and this page's data blocks (fact list,
 * metric grid, risk meter, incident table, folded playbook) are its own.
 */

/* Answer-first facts under the status hero */
.status-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 1.75rem;
    margin: 1.25rem 0 0;
    padding: 1rem 0 0;
    border-top: 1px solid #e2e8f0;
}
.status-facts dt {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #94a3b8;
    margin: 0 0 0.25rem;
}
.status-facts dd {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #0f172a;
}

/* 90-day metric grid */
.metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}
.metric {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 0.9rem 1rem;
}
.metric-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.15;
}
.metric-label {
    font-size: 0.78rem;
    color: #64748b;
    margin-top: 0.3rem;
    line-height: 1.4;
}

/* Risk */
.risk-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.75rem;
}
.risk-chip {
    flex: 1;
    min-width: 200px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 0.9rem 1rem;
    background: #fff;
}
.risk-chip-score {
    font-size: 1.5rem;
    font-weight: 800;
    color: #0f172a;
}
.risk-chip-label {
    font-size: 0.78rem;
    color: #64748b;
    margin-top: 0.3rem;
}
.risk-level {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.18rem 0.5rem;
    border-radius: 20px;
    margin-left: 0.4rem;
    vertical-align: middle;
}
.risk-level-normal { background: #f0fdf4; color: #15803d; }
.risk-level-elevated { background: #fffbeb; color: #b45309; }
.risk-level-high { background: #fef2f2; color: #b91c1c; }

/* Incident table */
.incident-table-wrap { overflow-x: auto; margin-top: 1rem; }
.incident-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    min-width: 520px;
}
.incident-table th {
    text-align: left;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
    padding: 0 0.75rem 0.5rem 0;
    border-bottom: 1px solid #e2e8f0;
}
.incident-table td {
    padding: 0.65rem 0.75rem 0.65rem 0;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
    vertical-align: top;
}
.severity-pill {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.15rem 0.5rem;
    border-radius: 20px;
}
.severity-degraded { background: #fffbeb; color: #b45309; }
.severity-major { background: #fef2f2; color: #b91c1c; }
.severity-critical { background: #450a0a; color: #fecaca; }

/* Folded "what to do" playbook */
.playbook { margin-top: 0.75rem; color: #334155; line-height: 1.75; }
.playbook h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
    margin: 1.75rem 0 0.5rem;
}
.playbook h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
    margin: 1.25rem 0 0.35rem;
}
.playbook p { margin: 0 0 0.9rem; }
.playbook ul, .playbook ol { margin: 0 0 1rem; padding-left: 1.25rem; }
.playbook li { margin-bottom: 0.4rem; }
.playbook blockquote {
    border-left: 3px solid #cbd5e1;
    margin: 1rem 0;
    padding: 0.5rem 1rem;
    color: #475569;
    background: #f8fafc;
    border-radius: 0 8px 8px 0;
}
.playbook table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    margin: 0 0 1rem;
}
.playbook th, .playbook td {
    text-align: left;
    padding: 0.5rem 0.75rem 0.5rem 0;
    border-bottom: 1px solid #f1f5f9;
}
.playbook-source {
    margin-top: 1rem;
    font-size: 0.8rem;
    color: #94a3b8;
}

@media (max-width: 600px) {
    .status-facts { gap: 1.1rem; }
    .metric-value { font-size: 1.25rem; }
}