/* status.css — styles for the :::status block (folio-rs fleet frame), on
 * clavitor.ai/status and every site that embeds a fleet view.
 * Page-specific by design (per Folio principle: folio.css stays lean).
 * Served as /fleet/status.css and linked from the frame.
 *
 * A site draws the block in its own palette by setting these on .fleet-status;
 * unset, each falls back to the Clavitor look:
 *   surface  --fleet-status-card, -line, -ink, -soft, -faint, -hover, -radius, -shadow
 *   badges   --fleet-status-ok-bg/-ok-ink/-ok-line, -warn-*, -bad-*, -maint-*
 *   rings    --fleet-status-perfect, -five9, -four9, -three9, -below, -nodata
 *   bars     --fleet-status-up, -mid, -down (the daily bars' gradient, read by
 *            status.js), -maint, -nodata
 *   roles    --fleet-role-<word>, --fleet-role-<word>-ink */

/* Known-provider outage banners — front of the status body, drawn by
 * /fleet/status.js from the API's known_outages. */
.status-incident-banners { margin: 0 0 18px 0; }
.status-incident-body { flex: 1; min-width: 0; }
.status-incident-headline { display: block; font-weight: 700; }
.status-incident-eta { display: block; margin-top: 4px; font-weight: 600; opacity: 0.95; }
.status-incident-detail { display: block; margin-top: 6px; font-weight: 400; font-size: 0.88rem; line-height: 1.45; opacity: 0.92; }
.status-incident-banner {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    margin: 0 0 10px 0;
    background: var(--fleet-status-bad-bg, #FEF2F2);
    border: 1px solid var(--fleet-status-bad-line, #FECACA);
    border-radius: 6px;
    color: var(--fleet-status-bad-ink, #991B1B);
    font: 600 0.95rem/1.45 var(--font-sans, system-ui, sans-serif);
}
.status-incident-icon {
    flex: none;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 999px;
    background: #DC2626;
    color: #fff;
    font: 700 0.85rem/1.6rem var(--font-sans, system-ui, sans-serif);
    text-align: center;
}

.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: var(--fleet-status-ok-bg, #F0FDF4);
    color: var(--fleet-status-ok-ink, #15803D);
    border: 1px solid var(--fleet-status-ok-line, #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: var(--fleet-status-maint-bg, #EEF2FF);
    color: var(--fleet-status-maint-ink, #4338CA);
    border-color: var(--fleet-status-maint-line, #C7D2FE);
}
.status-banner.is-degraded {
    background: var(--fleet-status-warn-bg, #FEFCE8);
    color: var(--fleet-status-warn-ink, #854D0E);
    border-color: var(--fleet-status-warn-line, #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-roles {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-left: 8px;
    vertical-align: middle;
}
.status-role {
    display: inline-block;
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    background: #EEF2FF;
    color: #4338CA;
    font-size: 0.65rem;
    font-weight: var(--w-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
/* Role chips. A site may recolour any of them, the way --fleet-map-* recolours
 * the map: --fleet-role-<word> (the chip) and --fleet-role-<word>-ink (its
 * text). Unset, each keeps the Clavitor look below. The product words come
 * from the whole-fleet view (clavitor.com/status), one chip per product. */
.status-role-vault { background: var(--fleet-role-vault, #F0FDF4); color: var(--fleet-role-vault-ink, #15803D); }
.status-role-central-I,
.status-role-central-II { background: var(--fleet-role-central, #FEF3C7); color: var(--fleet-role-central-ink, #92400E); }
.status-role-services { background: var(--fleet-role-services, #E0E7FF); color: var(--fleet-role-services-ink, #3730A3); }
.status-role-mymnri { background: var(--fleet-role-mymnri, #FCE7F3); color: var(--fleet-role-mymnri-ink, #9D174D); }
.status-role-app { background: var(--fleet-role-app, #FCE7F3); color: var(--fleet-role-app-ink, #9D174D); }
.status-role-inomi { background: var(--fleet-role-inomi, #CCFBF1); color: var(--fleet-role-inomi-ink, #115E59); }
.status-role-callitor { background: var(--fleet-role-callitor, #E0F2FE); color: var(--fleet-role-callitor-ink, #075985); }
.status-role-securitor { background: var(--fleet-role-securitor, #F1F5F9); color: var(--fleet-role-securitor-ink, #334155); }
.status-role-inou { background: var(--fleet-role-inou, #EDE9FE); color: var(--fleet-role-inou-ink, #5B21B6); }
.status-role-vaultdb { background: var(--fleet-role-vaultdb, #F5F5F4); color: var(--fleet-role-vaultdb-ink, #44403C); }
.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: var(--fleet-status-nodata, #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: var(--fleet-status-up, #22C55E); }
.status-tooltip-bar .down  { background: var(--fleet-status-down, #EF4444); }
.status-tooltip-bar .maint { background: var(--fleet-status-maint, #D97706); }
.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,
.status-dist,
.status-chart-card {
    border: 1px solid var(--fleet-status-line, #E5E5E5);
    border-radius: var(--fleet-status-radius, var(--radius-sm));
    background: var(--fleet-status-card, #fff);
    box-shadow: var(--fleet-status-shadow, none);
}
.status-tile { padding: 16px 18px; }
.status-tile-val {
    font-size: 1.5rem;
    font-weight: var(--w-semibold);
    font-variant-numeric: tabular-nums;
    color: var(--fleet-status-ink, #0A0A0A);
    line-height: 1.1;
}
.status-tile-val.is-small {
    font-size: 0.95rem;
    font-family: var(--font-mono);
    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: var(--fleet-status-ink, #0A0A0A);
    font-variant-numeric: tabular-nums;
}
.status-band.b-green b { color: var(--fleet-status-ok-ink, #15803D); }
.status-band.b-amber b { color: var(--fleet-status-warn-ink, #854D0E); }
.status-band.b-red   b { color: var(--fleet-status-bad-ink, #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: var(--fleet-status-ok-ink, #15803D); }
.status-dist {
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 22px 26px;
    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: var(--font-mono);
    font-size: 30px;
    font-weight: 600;
    fill: var(--fleet-status-ink, #0A0A0A);
}
.status-donut-lbl {
    text-anchor: middle;
    font-family: var(--font-mono);
    font-size: 8.5px;
    letter-spacing: 0.12em;
    fill: var(--fleet-status-soft, #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: var(--fleet-status-ink, #0A0A0A);
}
.status-leg-lbl { color: var(--fleet-status-soft, #525252); }

/* The uptime bands: ring sectors and legend dots, by data-band. */
.status-arc[data-band="perfect"], .status-leg-dot[data-band="perfect"] { fill: var(--fleet-status-perfect, #15803D); background: var(--fleet-status-perfect, #15803D); }
.status-arc[data-band="five9"],   .status-leg-dot[data-band="five9"]   { fill: var(--fleet-status-five9, #22C55E);   background: var(--fleet-status-five9, #22C55E); }
.status-arc[data-band="four9"],   .status-leg-dot[data-band="four9"]   { fill: var(--fleet-status-four9, #65A30D);   background: var(--fleet-status-four9, #65A30D); }
.status-arc[data-band="three9"],  .status-leg-dot[data-band="three9"]  { fill: var(--fleet-status-three9, #D97706);  background: var(--fleet-status-three9, #D97706); }
.status-arc[data-band="below"],   .status-leg-dot[data-band="below"]   { fill: var(--fleet-status-below, #DC2626);   background: var(--fleet-status-below, #DC2626); }
.status-arc-empty { fill: none; stroke: var(--fleet-status-nodata, #E5E5E5); }

/* --- 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: var(--fleet-status-hover, #F5F5F4); }
.status-stat-tip {
    position: fixed;
    display: none;
    z-index: 60;
    pointer-events: none;
    background: var(--fleet-status-ink, #0A0A0A);
    color: var(--fleet-status-card, #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: var(--fleet-status-faint, #A3A3A3);
    margin-bottom: 7px;
}
.stip-row { display: flex; justify-content: space-between; gap: 22px; padding: 1px 0; }
.stip-pct { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: #4ADE80; }
.stip-empty { color: var(--fleet-status-faint, #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;
    padding: 18px 22px 20px;
}
.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: var(--fleet-status-ink, #0A0A0A);
}
.status-chart-pct {
    font-family: var(--font-mono);
    font-size: 1.05rem;
    font-weight: var(--w-semibold);
    color: var(--fleet-status-ok-ink, #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; box-shadow: none; 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: var(--fleet-status-ink, #0A0A0A); font-weight: var(--w-semibold); }