/* ===========================================================================
   NexusSec vLabs — public status board.

   Design reference: Netdata's live-dashboard language — arc gauges with a big
   centre value, sparkline cards, ranked bar-in-row tables, a stacked series
   with a live legend, high information density, thin separators.

   Two deliberate departures from that reference:
     1. Netdata's accent is green; ours stays NexusSec steel blue. Green,
        amber and red are reserved EXCLUSIVELY for status semantics here, so
        a colour on this page always means health and never branding.
     2. Dark only. A NOC board is a dark-room artifact and the site's light
        default would fight the chart ink. Cloudflare's status page does the
        same while cloudflare.com is light, so this is precedented, not an
        oversight.
   =========================================================================== */

:root {
  --bg:      #0a0f16;
  --panel:   #111823;
  --panel-2: #0d141d;
  --line:    rgba(148, 176, 232, .13);
  --line-2:  rgba(148, 176, 232, .07);
  --fg:      #e6ecf5;
  --fg-2:    rgba(230, 236, 245, .62);
  --fg-3:    rgba(230, 236, 245, .38);

  --blue:    #2f5fc4;
  --blue-lt: #7ea3f3;

  --up:      #3ecf8e;
  --degr:    #f5b642;
  --down:    #ff5f56;
  --pend:    #8b98a8;

  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); }
body {
  color: var(--fg); font-family: var(--sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
.shell { max-width: 1280px; margin: 0 auto; padding: 0 clamp(14px, 2.5vw, 26px) 64px; }

/* Screen-reader-only, for the live region and chart summaries. */
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- top bar ------------------------------------------------------------ */
.bar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(10, 15, 22, .94); backdrop-filter: blur(9px);
  border-bottom: 1px solid var(--line);
}
.bar-in {
  max-width: 1280px; margin: 0 auto; padding: 11px clamp(14px, 2.5vw, 26px);
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand img { height: 26px; width: auto; display: block; }
.brand b { font-size: 15.5px; letter-spacing: -.035em; color: #fff; }
.brand b i { color: var(--blue-lt); font-style: normal; }
.bar-tag {
  font: 500 9.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--fg-3); border-left: 1px solid var(--line); padding-left: 12px;
}
.bar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* live pulse */
.live { display: inline-flex; align-items: center; gap: 7px;
        font: 500 10px/1 var(--mono); letter-spacing: .1em;
        text-transform: uppercase; color: var(--fg-2); }
.live s { width: 7px; height: 7px; border-radius: 50%; background: var(--up);
          box-shadow: 0 0 0 0 rgba(62, 207, 142, .6); animation: pulse 2.4s ease-out infinite; }
.live.stale s { background: var(--pend); animation: none; }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(62, 207, 142, .55); }
  70%  { box-shadow: 0 0 0 8px rgba(62, 207, 142, 0); }
  100% { box-shadow: 0 0 0 0 rgba(62, 207, 142, 0); }
}
@media (prefers-reduced-motion: reduce) { .live s { animation: none; } }

.alerts {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px;
  border-radius: 7px; font: 600 10.5px/1 var(--mono); letter-spacing: .07em;
  border: 1px solid var(--line); color: var(--fg-2);
}
.alerts.hot { color: var(--down); border-color: rgba(255, 95, 86, .4); background: rgba(255, 95, 86, .09); }
.bar-right .home { font: 500 10px/1 var(--mono); letter-spacing: .1em;
                   text-transform: uppercase; color: var(--fg-3); }
.bar-right .home:hover { color: #fff; }

/* ---- headline banner ---------------------------------------------------- */
.hero { padding: 30px 0 22px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.hero-dot { width: 13px; height: 13px; border-radius: 50%; flex: none; background: var(--up);
            box-shadow: 0 0 22px var(--up); }
.hero h1 { margin: 0; font-size: clamp(21px, 3.2vw, 31px); letter-spacing: -.035em;
           font-weight: 800; color: #fff; }
.hero p { margin: 4px 0 0; font: 500 11px/1.5 var(--mono); letter-spacing: .04em; color: var(--fg-2); }
.hero.degraded .hero-dot { background: var(--degr); box-shadow: 0 0 22px var(--degr); }
.hero.outage  .hero-dot { background: var(--down); box-shadow: 0 0 22px var(--down); }

/* ---- section heading (Netdata's collapsible group header) ---------------- */
.sect { margin: 30px 0 13px; display: flex; align-items: baseline; gap: 12px; }
.sect h2 { margin: 0; font: 600 10px/1 var(--mono); letter-spacing: .17em;
           text-transform: uppercase; color: var(--blue-lt); }
.sect span { font: 500 10px/1 var(--mono); letter-spacing: .06em; color: var(--fg-3); }
.sect hr { flex: 1; border: 0; border-top: 1px solid var(--line-2); }

/* ---- KPI gauge row ------------------------------------------------------ */
.kpis { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }
.kpi {
  background: var(--panel); border: 1px solid var(--line); border-radius: 11px;
  padding: 15px 14px 13px; display: flex; flex-direction: column; align-items: center;
  position: relative; overflow: hidden;
}
.kpi > h3 {
  margin: 0 0 9px; font: 500 9px/1.3 var(--mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--fg-3); text-align: center;
}
.kpi svg { display: block; }
.kpi .val {
  position: absolute; top: 50%; left: 0; right: 0; text-align: center;
  transform: translateY(-2px); pointer-events: none;
}
.kpi .val b { display: block; font-size: 23px; font-weight: 800; letter-spacing: -.035em; color: #fff; }
.kpi .val span { display: block; margin-top: 1px; font: 500 8.5px/1 var(--mono);
                 letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); }
.kpi .foot { margin-top: 8px; font: 500 9.5px/1 var(--mono); letter-spacing: .05em; color: var(--fg-3); }

.g-track { stroke: rgba(148, 176, 232, .11); }
.g-up    { stroke: var(--up); }
.g-degr  { stroke: var(--degr); }
.g-down  { stroke: var(--down); }
.g-blue  { stroke: var(--blue-lt); }

/* ---- monitor cards (sparkline + big overlaid value) --------------------- */
.mons { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); }
.mon {
  background: var(--panel); border: 1px solid var(--line); border-radius: 11px;
  padding: 14px 16px 12px; position: relative; overflow: hidden;
}
.mon.is-degraded { border-color: rgba(245, 182, 66, .34); }
.mon.is-down     { border-color: rgba(255, 95, 86, .42); background: linear-gradient(180deg, rgba(255,95,86,.06), var(--panel)); }

.mon-top { display: flex; align-items: flex-start; gap: 10px; }
.mon-id { min-width: 0; }
.mon-id b { display: block; font-size: 14.5px; letter-spacing: -.02em; color: #fff; }
.mon-id span { display: block; margin-top: 2px; font: 500 10px/1.4 var(--mono);
               letter-spacing: .05em; color: var(--fg-3); }
.mon-top .pill { margin-left: auto; flex: none; }

.pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px;
        border-radius: 20px; font: 600 9.5px/1 var(--mono); letter-spacing: .08em;
        text-transform: uppercase; white-space: nowrap; }
.pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor;
          box-shadow: 0 0 7px currentColor; }
.p-up   { color: var(--up);   background: rgba(62, 207, 142, .12); }
.p-degr { color: var(--degr); background: rgba(245, 182, 66, .13); }
.p-down { color: var(--down); background: rgba(255, 95, 86, .13); }
.p-pend { color: var(--pend); background: rgba(139, 152, 168, .13); }

/* sparkline block: chart fills the card, current value sits over it */
.spark { position: relative; margin: 12px -16px 0; height: 62px; }
/* The portal check has no latency series, so its card gets no chart — just
   the value line. Shorter box, or the card would carry dead space. */
.spark--none { height: 30px; }
.spark svg { display: block; width: 100%; height: 100%; }
.spark .now {
  position: absolute; left: 16px; top: 2px; pointer-events: none;
  text-shadow: 0 2px 14px rgba(10, 15, 22, .95);
}
.spark .now b { font-size: 21px; font-weight: 800; letter-spacing: -.035em; color: #fff; }
.spark .now u { text-decoration: none; font: 500 10px/1 var(--mono); color: var(--fg-2); margin-left: 3px; }
.spark .empty { position: absolute; inset: 0; display: grid; place-items: center;
                font: 500 10px/1 var(--mono); letter-spacing: .1em;
                text-transform: uppercase; color: var(--fg-3); }

/* uptime triple */
.trip { display: flex; gap: 16px; margin-top: 11px; padding-top: 11px;
        border-top: 1px solid var(--line-2); }
.trip div { min-width: 0; }
.trip b { display: block; font: 600 12.5px/1 var(--mono); color: var(--fg); }
.trip span { display: block; margin-top: 3px; font: 500 8.5px/1 var(--mono);
             letter-spacing: .11em; text-transform: uppercase; color: var(--fg-3); }
.trip .thin { color: var(--fg-3); }
.mon-what { margin: 10px 0 0; font-size: 11.5px; line-height: 1.55; color: var(--fg-2); }

/* ---- ranked bar-in-row table (Netdata "Top nodes by …") ----------------- */
.rank { background: var(--panel); border: 1px solid var(--line); border-radius: 11px; overflow: hidden; }
.rank-row { display: grid; grid-template-columns: 1fr 74px; align-items: center; gap: 12px;
            padding: 10px 15px; position: relative; border-top: 1px solid var(--line-2); }
.rank-row:first-child { border-top: 0; }
.rank-fill { position: absolute; inset: 0 auto 0 0; background: rgba(126, 163, 243, .13);
             border-right: 1px solid rgba(126, 163, 243, .3); pointer-events: none; }
.rank-row.warn .rank-fill { background: rgba(245, 182, 66, .14); border-right-color: rgba(245, 182, 66, .4); }
.rank-name { position: relative; font: 500 11.5px/1 var(--mono); letter-spacing: .03em; color: var(--fg); }
.rank-val { position: relative; text-align: right; font: 600 11.5px/1 var(--mono); color: #fff; }

/* ---- combined series + live legend -------------------------------------- */
.series { background: var(--panel); border: 1px solid var(--line); border-radius: 11px; padding: 14px 16px 10px; }
.series > svg { display: block; width: 100%; height: 168px; }
.legend { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; padding-top: 11px;
          border-top: 1px solid var(--line-2); }
.legend b {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 9px;
  border: 1px solid var(--line); border-radius: 7px;
  font: 500 10px/1 var(--mono); letter-spacing: .04em; color: var(--fg-2);
}
.legend b s { width: 8px; height: 2px; border-radius: 2px; }
.legend b u { text-decoration: none; color: #fff; font-weight: 600; }
.ax { font: 500 8.5px/1 var(--mono); fill: var(--fg-3); letter-spacing: .08em; }
.grid-l { stroke: var(--line-2); }

/* ---- 90-day availability bars ------------------------------------------- */
.b90 { background: var(--panel); border: 1px solid var(--line); border-radius: 11px; padding: 14px 16px; }
.b90-row { padding: 11px 0; border-top: 1px solid var(--line-2); }
.b90-row:first-child { border-top: 0; padding-top: 0; }
.b90-head { display: flex; align-items: baseline; gap: 10px; }
.b90-head b { font-size: 12.5px; color: #fff; letter-spacing: -.01em; }
.b90-head span { margin-left: auto; font: 600 11px/1 var(--mono); color: var(--fg-2); }
/* overflow:hidden is a guarantee, not decoration: 90 bars at their minimum
   width plus gaps can exceed a narrow container, and without this the row
   would push the whole page into horizontal scroll. */
.b90-bars { display: flex; gap: 2px; align-items: stretch; height: 26px; margin-top: 7px; overflow: hidden; }
.b90-bars i { flex: 1; min-width: 2px; border-radius: 2px; background: var(--up); }
.b90-bars i.d-degr { background: var(--degr); }
.b90-bars i.d-down { background: var(--down); }
.b90-bars i.d-none { background: rgba(148, 176, 232, .08); }
.b90-scale { display: flex; justify-content: space-between; margin-top: 6px;
             font: 500 9px/1 var(--mono); letter-spacing: .08em; color: var(--fg-3); }

/* ---- datacenter fleet --------------------------------------------------- */
.fleet { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); }
.dc { background: var(--panel-2); border: 1px solid var(--line); border-radius: 11px; padding: 15px 16px; }
.dc.build { border-style: dashed; border-color: rgba(245, 182, 66, .3); }
.dc-top { display: flex; align-items: center; gap: 9px; }
.dc-top b { font-size: 17px; font-weight: 800; letter-spacing: -.03em; color: #fff; }
.dc-top .pill { margin-left: auto; }
.dc p { margin: 9px 0 0; font: 500 10px/1.5 var(--mono); letter-spacing: .05em; color: var(--fg-3); }

/* ---- events ------------------------------------------------------------- */
.ev { background: var(--panel); border: 1px solid var(--line); border-radius: 11px; overflow: hidden; }
.ev-row { display: flex; align-items: center; gap: 12px; padding: 11px 15px;
          border-top: 1px solid var(--line-2); flex-wrap: wrap; }
.ev-row:first-child { border-top: 0; }
.ev-row time { font: 500 10px/1 var(--mono); letter-spacing: .05em; color: var(--fg-3); min-width: 124px; }
.ev-row b { font-size: 12.5px; color: #fff; }
.ev-row .arrow { font: 500 10.5px/1 var(--mono); color: var(--fg-2); margin-left: auto; }
.ev-empty { padding: 22px 15px; text-align: center; font: 500 10.5px/1.6 var(--mono);
            letter-spacing: .05em; color: var(--fg-3); }

/* ---- method / footer ---------------------------------------------------- */
.method { margin-top: 13px; background: var(--panel-2); border: 1px solid var(--line-2);
          border-radius: 11px; padding: 16px 18px; }
.method h3 { margin: 0 0 9px; font: 600 9.5px/1 var(--mono); letter-spacing: .15em;
             text-transform: uppercase; color: var(--fg-2); }
.method ul { margin: 0; padding-left: 17px; }
.method li { font-size: 12px; line-height: 1.72; color: var(--fg-2); margin-bottom: 4px; }
.method a { color: var(--blue-lt); border-bottom: 1px solid rgba(126, 163, 243, .35); }
.foot { margin-top: 26px; display: flex; justify-content: space-between; gap: 14px;
        flex-wrap: wrap; font: 500 10.5px/1.6 var(--mono); letter-spacing: .04em; color: var(--fg-3); }
.foot a { color: var(--blue-lt); }

@media (max-width: 620px) {
  .hero { padding: 22px 0 16px; }
  .trip { gap: 13px; }
  .ev-row time { min-width: 100%; }
  .ev-row .arrow { margin-left: 0; }
  .bar-tag { display: none; }

  /* Two gauges per row rather than one. At 168px minimum they stacked into a
     single column, putting ~900px of gauges above the first component. */
  .kpis { grid-template-columns: repeat(auto-fit, minmax(138px, 1fr)); gap: 8px; }
  .kpi { padding: 13px 10px 11px; }
  .kpi svg { width: 92px; height: 92px; }
  .kpi .val b { font-size: 20px; }

  /* Keep the full 90-day window visible instead of truncating the history:
     thinner bars and a 1px gap fit all 90 days inside a phone width. */
  .b90-bars { gap: 1px; height: 22px; }
  .b90-bars i { min-width: 1px; border-radius: 1px; }
}