/* status.css — styles for the :::status block on /status.
 * Page-specific by design (per Folio principle: folio.css stays lean).
 * Loaded only on the status page via a <link> emitted from the block. */

.status-banner {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: var(--radius-sm);
    margin-bottom: 20px;
    font-weight: var(--w-semibold);
    font-size: 0.82rem;
    background: #F0FDF4;
    color: #15803D;
    border: 1px solid #BBF7D0;
}
.status-banner-icon { font-size: 0.95rem; }
.status-tile-sub { font-size: 0.72rem; color: var(--text-tertiary); margin-top: 3px; }
.status-banner.is-maintenance { background: #EEF2FF; color: #4338CA; border-color: #C7D2FE; }
.status-banner.is-degraded   { background: #FEFCE8; color: #854D0E; border-color: #FDE68A; }

.status-meta {
    display: flex;
    justify-content: space-between;
    font-size: var(--t-sm);
    color: var(--text-tertiary);
    margin-bottom: 16px;
}

.status-node { margin-bottom: 28px; }
.status-node-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
}
.status-health {
    font-size: 0.75rem;
    font-weight: var(--w-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.status-health-operational { color: var(--success); }
.status-health-degraded    { color: #CA8A04; }
.status-health-down        { color: #DC2626; }
.status-health-unknown     { color: var(--text-tertiary); }
.status-health-maintenance { color: #6366F1; }
.status-health-planned     { color: var(--text-tertiary); }

.status-bars {
    display: flex;
    gap: 1px;
    height: 28px;
    align-items: flex-end;
}
.status-bar {
    position: relative;
    flex: 1;
    height: 100%;
    border-radius: 2px;
    min-width: 2px;
    cursor: default;
}
.status-bar-unknown { background: #E5E7EB; }

.status-range {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: var(--text-tertiary);
    margin-top: 4px;
}

.status-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 14px;
    min-width: 220px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 10;
    font-size: 0.75rem;
}
.status-tooltip-date { font-weight: var(--w-semibold); margin-bottom: 6px; }
.status-tooltip-bar {
    display: flex;
    height: 8px;
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 6px;
}
.status-tooltip-bar .up   { background: #22C55E; }
.status-tooltip-bar .down { background: #EF4444; }
.status-tooltip-spans { color: var(--text-tertiary); line-height: 1.6; }
.status-bar:hover .status-tooltip { display: block; }

.status-section-label {
    margin-top: 32px;
    margin-bottom: 16px;
    font-size: 0.7rem;
    font-weight: var(--w-medium);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.status-outage-node { opacity: 0.6; }

.status-planned-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
}
.status-planned-cell { padding: 8px 0; }
.status-planned-cell .pop-card-city { color: var(--text-tertiary); }

.status-maintenance-info {
    margin-top: 8px;
}
.status-maintenance-when {
    font-size: var(--t-sm);
    color: var(--text-tertiary);
    margin-bottom: 4px;
}
.status-maintenance-text {
    font-size: var(--t-sm);
    color: var(--text-secondary);
    line-height: 1.5;
    max-width: 65ch;
}

.status-incidents { margin-top: 48px; }
.status-incidents-title {
    font-size: 1rem;
    font-weight: var(--w-semibold);
    margin-bottom: 16px;
}
.status-incident-status {
    font-weight: var(--w-semibold);
    font-size: 0.8rem;
    text-transform: uppercase;
}
.status-incident-status-resolved { color: var(--success); }
.status-incident-status-ongoing  { color: #DC2626; }
.status-incident-status-other    { color: #CA8A04; }

.status-updated {
    margin-top: 16px;
    font-size: var(--t-sm);
    color: var(--text-tertiary);
}

/* --- High-level fleet stats bar (P-263) --- */
.status-stats { margin-bottom: 32px; }
.status-tiles {
    display: flex;
    gap: 20px;                 /* same gap as .status-charts → tile 2|3 boundary lines up with chart 1|2 */
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.status-tile-pair {
    flex: 1 1 340px;           /* matches .status-chart-card → each pair sits above a chart */
    display: flex;
    gap: 12px;
    min-width: 0;
}
.status-tile-pair > .status-tile { flex: 1 1 0; min-width: 0; }
@media (max-width: 720px) { .status-tile-pair { flex-basis: 100%; } }
.status-tile {
    border: 1px solid #E5E5E5;
    border-radius: var(--radius-sm);
    padding: 16px 18px;
    background: #fff;
}
.status-tile-val {
    font-size: 1.5rem;
    font-weight: var(--w-semibold);
    font-variant-numeric: tabular-nums;
    color: #0A0A0A;
    line-height: 1.1;
}
.status-tile-val.is-small {
    font-size: 0.95rem;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    letter-spacing: -0.01em;
}
.status-tile-label {
    font-size: var(--t-sm);
    color: var(--text-tertiary);
    margin-top: 6px;
}
.status-bands {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    font-size: var(--t-sm);
    color: var(--text-tertiary);
}
.status-band b {
    font-weight: var(--w-semibold);
    color: #0A0A0A;
    font-variant-numeric: tabular-nums;
}
.status-band.b-green b { color: #15803D; }
.status-band.b-amber b { color: #854D0E; }
.status-band.b-red   b { color: #B91C1C; }
.status-band.b-grey  b { color: var(--text-tertiary); }
.status-health-unavailable { color: var(--text-tertiary); }

/* --- Distribution donut + legend (P-263) --- */
.status-tile-val.is-accent { color: #15803D; }
.status-dist {
    display: flex;
    align-items: center;
    gap: 32px;
    border: 1px solid #E5E5E5;
    border-radius: var(--radius-sm);
    padding: 22px 26px;
    background: #fff;
    flex-wrap: wrap;
}
.status-donut { flex: 0 0 auto; }
.status-donut-svg { width: 132px; height: 132px; display: block; }
.status-donut-num {
    text-anchor: middle;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 30px;
    font-weight: 600;
    fill: #0A0A0A;
}
.status-donut-lbl {
    text-anchor: middle;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 8.5px;
    letter-spacing: 0.12em;
    fill: #737373;
}
.status-legend { flex: 1 1 220px; display: flex; flex-direction: column; gap: 9px; }
.status-legend-title {
    font-size: 0.72rem;
    font-weight: var(--w-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-tertiary);
    margin-bottom: 4px;
}
.status-leg-row { display: flex; align-items: center; gap: 11px; font-size: var(--t-sm); }
.status-leg-dot { width: 13px; height: 13px; border-radius: 3px; flex: 0 0 auto; }
.status-leg-ct {
    font-weight: var(--w-semibold);
    font-variant-numeric: tabular-nums;
    min-width: 22px;
    text-align: right;
    color: #0A0A0A;
}
.status-leg-lbl { color: #525252; }

/* --- Donut hover + tooltip (P-263) --- */
.status-arc { cursor: pointer; transition: opacity .12s; }
.status-arc:hover { opacity: 0.82; }
.status-donut-num, .status-donut-lbl { pointer-events: none; }
.status-leg-row[data-band] { cursor: pointer; border-radius: 4px; transition: background .12s; }
.status-leg-row[data-band]:hover { background: #F5F5F4; }
.status-stat-tip {
    position: fixed;
    display: none;
    z-index: 60;
    pointer-events: none;
    background: #0A0A0A;
    color: #fff;
    border-radius: var(--radius-sm);
    padding: 11px 13px;
    font-size: 0.8rem;
    line-height: 1.4;
    max-width: 300px;
    box-shadow: 0 6px 22px rgba(0,0,0,.22);
}
.stip-title {
    font-size: 0.68rem;
    font-weight: var(--w-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #A3A3A3;
    margin-bottom: 7px;
}
.stip-row { display: flex; justify-content: space-between; gap: 22px; padding: 1px 0; }
.stip-pct { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; color: #4ADE80; }
.stip-empty { color: #A3A3A3; }

/* --- Two distribution charts (primary uptime, 30d + 7d) (P-263) --- */
.status-charts { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 14px; }
.status-chart-card {
    flex: 1 1 340px;
    border: 1px solid #E5E5E5;
    border-radius: var(--radius-sm);
    padding: 18px 22px 20px;
    background: #fff;
}
.status-chart-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 14px;
    font-size: var(--t-sm);
    font-weight: var(--w-semibold);
    color: #0A0A0A;
}
.status-chart-pct {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 1.05rem;
    font-weight: var(--w-semibold);
    color: #15803D;
    font-variant-numeric: tabular-nums;
}
/* charts host the donut inline — strip the standalone .status-dist chrome */
.status-chart-card .status-dist { border: none; padding: 0; background: transparent; gap: 24px; }
.status-stat-note { font-size: var(--t-sm); color: var(--text-tertiary); line-height: 1.5; max-width: 70ch; }
.status-stat-note b { color: #0A0A0A; font-weight: var(--w-semibold); }