/* ===================================================================
   status.css — public service status page (/status).
   Colors come only from tokens.css variables.
   =================================================================== */

.st {
    --st-ok: var(--success);
    --st-warn: var(--warning);
    --st-down: var(--destructive);
    --st-none: color-mix(in srgb, var(--muted-foreground) 22%, transparent);
    max-width: 880px;
    margin: 0 auto;
    padding-bottom: clamp(48px, 8vw, 88px);
}

.st-head { padding-bottom: clamp(20px, 3vw, 28px); }

.st-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Overall banner ---------- */
.st-banner {
    --st-tone: var(--muted-foreground);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 22px;
    border: 1px solid color-mix(in srgb, var(--st-tone) 34%, var(--border));
    border-radius: var(--radius);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--st-tone) 12%, transparent), transparent 70%),
        var(--card);
    box-shadow: var(--shadow-md);
}
.st-banner--operational { --st-tone: var(--st-ok); }
.st-banner--degraded { --st-tone: var(--st-warn); }
.st-banner--partial_outage,
.st-banner--major_outage { --st-tone: var(--st-down); }

.st-banner__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: var(--st-tone);
    background: color-mix(in srgb, var(--st-tone) 16%, transparent);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--st-tone) 7%, transparent);
}
.st-ico { width: 22px; height: 22px; display: none; }
.st-banner--operational .st-ico--ok,
.st-banner--degraded .st-ico--warn,
.st-banner--partial_outage .st-ico--warn,
.st-banner--major_outage .st-ico--warn,
.st-banner--no_data .st-ico--none { display: block; }

.st-banner__text { min-width: 0; }
.st-banner__title {
    margin: 0 0 4px;
    font-family: var(--font-display);
    font-size: clamp(1.12rem, 2.6vw, 1.32rem);
    font-weight: 650;
    letter-spacing: var(--tracking-tight);
    color: var(--foreground);
}
.st-banner__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 8px;
    margin: 0;
    font-size: 0.86rem;
    color: var(--muted-foreground);
}
.st-banner__meta time { font-variant-numeric: tabular-nums; color: var(--foreground); }
.st-banner__error {
    margin: 6px 0 0;
    font-size: 0.84rem;
    color: var(--st-warn);
}

/* ---------- Legend ---------- */
.st-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px 16px;
    margin: 26px 2px 12px;
    font-size: 0.78rem;
    color: var(--muted-foreground);
}
.st-legend span { display: inline-flex; align-items: center; gap: 6px; }
.st-swatch {
    display: inline-block;
    width: 8px;
    height: 14px;
    border-radius: 2px;
}
.st-swatch--ok { background: var(--st-ok); }
.st-swatch--warn { background: var(--st-warn); }
.st-swatch--down { background: var(--st-down); }
.st-swatch--none { background: var(--st-none); }

/* ---------- Provider cards ---------- */
.st-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.st-card {
    padding: 22px 22px 20px;
    min-width: 0;
}
.st-card + .st-card { border-top: 1px solid var(--border); }

.st-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.st-card__name {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.04rem;
    font-weight: 600;
    color: var(--foreground);
    min-width: 0;
}

.st-pill {
    --st-tone: var(--muted-foreground);
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 11px 4px 9px;
    border-radius: var(--radius-pill);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--st-tone);
    background: color-mix(in srgb, var(--st-tone) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--st-tone) 26%, transparent);
}
.st-pill--operational { --st-tone: var(--st-ok); }
.st-pill--degraded { --st-tone: var(--st-warn); }
.st-pill--outage { --st-tone: var(--st-down); }
.st-pill__dot {
    position: relative;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}
.st-pill--operational .st-pill__dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: currentColor;
    animation: st-pulse 2.4s var(--ease) infinite;
}
@keyframes st-pulse {
    0% { transform: scale(1); opacity: 0.55; }
    70%, 100% { transform: scale(2.6); opacity: 0; }
}

/* Metrics */
.st-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 18px;
}
.st-metric {
    min-width: 0;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: var(--muted);
}
.st-metric dt {
    margin: 0 0 3px;
    font-size: 0.74rem;
    line-height: 1.3;
    color: var(--muted-foreground);
}
.st-metric dd {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 1rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--foreground);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Uptime bars */
.st-bars-wrap { margin-bottom: 16px; }
.st-bars {
    display: flex;
    align-items: stretch;
    gap: 3px;
    height: 36px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.st-bar {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    border-radius: 3px;
    background: var(--st-none);
    cursor: default;
    transition: opacity 0.15s var(--ease), transform 0.15s var(--ease);
}
.st-bar--ok { background: var(--st-ok); }
.st-bar--warn { background: var(--st-warn); }
.st-bar--down { background: var(--st-down); }
.st-bars:hover .st-bar { opacity: 0.55; }
.st-bars .st-bar:hover { opacity: 1; transform: scaleY(1.08); }

.st-bars__axis {
    display: flex;
    justify-content: space-between;
    margin-top: 7px;
    font-size: 0.74rem;
    color: var(--muted-foreground);
}

/* Models */
.st-models {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
}
.st-models__label {
    flex: none;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}
.st-models__list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    min-width: 0;
}
.st-chip {
    max-width: 100%;
    padding: 3px 9px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    font-size: 0.78rem;
    color: var(--secondary-foreground);
    background: var(--surface-warm);
    overflow-wrap: anywhere;
}
.st-chip--empty { color: var(--muted-foreground); border-style: dashed; }

/* ---------- Tooltip ---------- */
.st-tooltip {
    position: fixed;
    z-index: 200;
    max-width: min(260px, calc(100vw - 16px));
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    background: var(--popover);
    color: var(--popover-foreground);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    box-shadow: var(--shadow-lg);
    pointer-events: none;
    white-space: nowrap;
}
.st-tooltip[hidden] { display: none; }

/* ---------- Methodology ---------- */
.st-method {
    margin-top: 28px;
    padding: 22px 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-warm);
}
.st-method h2 {
    margin: 0 0 12px;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--foreground);
}
.st-method ul {
    margin: 0;
    padding-left: 1.1em;
    display: grid;
    gap: 8px;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--muted-foreground);
}
.st-method__contact {
    margin: 16px 0 0;
    font-size: 0.9rem;
    color: var(--muted-foreground);
}
.st-method__contact a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
    margin-left: 4px;
}
.st-method__contact a:hover { text-decoration: underline; }
.st-method__contact a:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
    .st-banner { padding: 16px; gap: 12px; align-items: flex-start; }
    .st-banner__icon { width: 38px; height: 38px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--st-tone) 7%, transparent); }
    .st-ico { width: 19px; height: 19px; }
    .st-banner__meta { flex-direction: column; }
    .st-banner__dot { display: none; }
    .st-legend { justify-content: flex-start; gap: 6px 12px; }
    .st-card { padding: 18px 16px 16px; }
    .st-metrics { gap: 6px; }
    .st-metric { padding: 8px 9px; }
    .st-metric dd { font-size: 0.9rem; }
    .st-bars { gap: 2px; height: 32px; }
    .st-bar { border-radius: 2px; }
    .st-models { flex-direction: column; gap: 8px; }
    .st-method { padding: 18px 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .st-pill--operational .st-pill__dot::after { animation: none; display: none; }
    .st-bar { transition: none; }
    .st-bars .st-bar:hover { transform: none; }
}