/* ──────────────────────────────────────────────────────────────────────────
   health.luups.ai — page-specific styles only.
   Tokens, fonts and shared components (.topbar, .card, .badge, .eyebrow)
   come from the master stylesheet, assets.luups.ai/luups.css. Everything
   here is scoped under body.luups-health per the design-system rules.
   ────────────────────────────────────────────────────────────────────────── */

.luups-health {
    font-variant-numeric: tabular-nums;
}

.luups-health .wrap {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 var(--s-5) var(--s-8);
}

.luups-health .topbar-meta {
    font-size: var(--fs-caption);
    color: var(--fg4);
    text-align: right;
}

/* ── Overall status banner ─────────────────────────────────────────────── */
.luups-health .overall {
    margin-top: var(--s-8);
    border: 1px solid var(--border);
    border-left: 4px solid var(--luups-ink-4);
    background: var(--bg-surface);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-1);
    padding: var(--s-5) var(--s-6);
    display: flex;
    align-items: center;
    gap: var(--s-4);
    flex-wrap: wrap;
}
.luups-health .overall__dot {
    width: 14px; height: 14px; border-radius: var(--r-full);
    background: var(--luups-ink-4); flex: none; position: relative;
}
.luups-health .overall--ok    { border-left-color: var(--luups-success); }
.luups-health .overall--ok    .overall__dot { background: var(--luups-success); color: var(--luups-success); }
.luups-health .overall--warn  { border-left-color: var(--luups-warning); }
.luups-health .overall--warn  .overall__dot { background: var(--luups-warning); color: var(--luups-warning); }
.luups-health .overall--down  { border-left-color: var(--luups-danger); }
.luups-health .overall--down  .overall__dot { background: var(--luups-danger); color: var(--luups-danger); }
.luups-health .overall__dot::after {
    content: ""; position: absolute; inset: -5px; border-radius: var(--r-full);
    border: 2px solid currentColor; opacity: .35;
    animation: luups-health-pulse 2.4s var(--ease-out) infinite;
}
@keyframes luups-health-pulse {
    0% { transform: scale(.6); opacity: .5; }
    80%, 100% { transform: scale(1.15); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .luups-health .overall__dot::after { animation: none; opacity: .25; }
}
.luups-health .overall__title { font-size: var(--fs-h3); font-weight: 500; letter-spacing: var(--tracking-heading); }
.luups-health .overall__sub { flex-basis: 100%; margin: 0; font-size: var(--fs-body-sm); color: var(--fg3); }

/* ── Section labels ────────────────────────────────────────────────────── */
.luups-health .section-label { margin: var(--s-10) 0 var(--s-3); }

/* ── Service cards ─────────────────────────────────────────────────────── */
.luups-health .service {
    padding: 0;
    overflow: hidden;
    margin-bottom: var(--s-5);
}
.luups-health .service__head {
    display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap;
    padding: var(--s-4) var(--s-5) 0;
}
.luups-health .service__name { font-size: var(--fs-h4); font-weight: 500; }
.luups-health .service__domain { font-size: var(--fs-caption); color: var(--fg4); }
.luups-health .service__head .badge { margin-left: auto; }

/* 90-day uptime strip */
.luups-health .uptime { padding: var(--s-4) var(--s-5) var(--s-1); }
.luups-health .uptime__bar { display: flex; gap: 2px; height: 26px; }
.luups-health .uptime__bar span {
    flex: 1 1 0; min-width: 2px; border-radius: 1.5px;
    background: var(--luups-success); opacity: .75;
}
.luups-health .uptime__bar span.w { background: var(--luups-warning); opacity: 1; }
.luups-health .uptime__bar span.d { background: var(--luups-danger); opacity: 1; }
.luups-health .uptime__bar span.u { background: var(--luups-paper-3); opacity: 1; }
.luups-health .uptime__legend {
    display: flex; justify-content: space-between;
    font-size: 11px; color: var(--fg4); margin-top: var(--s-2);
}

/* Component rows */
.luups-health .comp { list-style: none; margin: var(--s-3) 0 0; padding: 0; }
.luups-health .comp li {
    display: grid;
    grid-template-columns: 14px 1fr auto;
    gap: var(--s-1) var(--s-3);
    align-items: baseline;
    padding: var(--s-3) var(--s-5);
    border-top: 1px solid var(--luups-paper-2);
}
.luups-health .comp li.is-warn { background: var(--luups-warning-soft); }
.luups-health .comp li.is-down { background: var(--luups-danger-soft); }
.luups-health .dot { width: 9px; height: 9px; border-radius: var(--r-full); align-self: center; }
.luups-health .dot--ok      { background: var(--luups-success); }
.luups-health .dot--warn    { background: var(--luups-warning); }
.luups-health .dot--down    { background: var(--luups-danger); }
.luups-health .dot--unknown { background: var(--luups-ink-4); }
.luups-health .comp__name { font-weight: 500; }
.luups-health .comp__seen { font-size: var(--fs-caption); color: var(--fg3); text-align: right; white-space: nowrap; }
.luups-health .comp__msg { grid-column: 2 / 4; font-size: var(--fs-caption); color: var(--fg3); }
.luups-health .comp li.is-warn .comp__msg strong { color: var(--luups-warning); font-weight: 500; }
.luups-health .comp li.is-down .comp__msg strong { color: var(--luups-danger); font-weight: 500; }

/* ── Event timeline ────────────────────────────────────────────────────── */
.luups-health .events { border-left: 2px solid var(--border); margin: 0; padding: 0 0 0 var(--s-5); }
.luups-health .events-empty { color: var(--fg4); font-size: var(--fs-body-sm); }
.luups-health .event { position: relative; padding: 2px 0 var(--s-6); }
.luups-health .event::before {
    content: ""; position: absolute; left: -25.5px; top: 8px;
    width: 9px; height: 9px; border-radius: var(--r-full);
    background: var(--fg4); border: 2px solid var(--bg);
}
.luups-health .event--warn::before { background: var(--luups-warning); }
.luups-health .event--down::before { background: var(--luups-danger); }
.luups-health .event--ok::before   { background: var(--luups-success); }
.luups-health .event__meta { font-size: var(--fs-caption); color: var(--fg4); }
.luups-health .event__meta .sep { margin: 0 6px; color: var(--border); }
.luups-health .event__text { margin: 2px 0 0; }
.luups-health .event__text .tag { margin-left: var(--s-2); vertical-align: 2px; }

/* ── Footer ────────────────────────────────────────────────────────────── */
.luups-health .page-footer {
    border-top: 1px solid var(--border);
    margin-top: var(--s-12);
    padding: var(--s-5) 0 0;
    font-size: var(--fs-caption);
    color: var(--fg4);
    display: flex;
    justify-content: space-between;
    gap: var(--s-3);
    flex-wrap: wrap;
}
.luups-health .page-footer a { color: var(--fg3); }

@media (max-width: 560px) {
    .luups-health .topbar-meta { font-size: 11px; }
    .luups-health .service__head .badge { margin-left: 0; }
}