/* ===========================================================================
   The page's only stylesheet, served from THIS origin so the CSP stays
   style-src 'self' with no unsafe-inline.

   EVERYTHING HERE IS SELF-HOSTED OR DRAWN. No @import, no CDN, no web font,
   no image fetched from another host. That is not tidiness — this page exists
   to be read when the estate it reports on is down, and an asset fetched from
   that estate would go missing at exactly the moment the page matters. The
   only binary it references is /nexuss-logo.png, copied into wwwroot and
   served from here.

   TYPEFACE. The stack below is copied verbatim from mynexuss.com. That site
   NAMES Inter but ships no @font-face and loads no font file — checked on
   2026-09-07, document.fonts was empty and the markup contains no font-face
   rule and no fonts.googleapis/gstatic link. It relies on Inter being present
   locally and otherwise falls through to Segoe UI / system-ui. Copying the
   stack therefore reproduces the brand's real rendering exactly, needs no
   font file, raises no licence question, and leaves font-src 'none' intact.
   =========================================================================== */

:root {
    color-scheme: light dark;

    /* Neutrals — the light counterpart. mynexuss.com publishes no light theme
       (its html is hard-coded data-theme="dark"), so these are derived to sit
       in the same family rather than copied. The brand hue below is NOT
       derived: #009ef7 is read straight off the site. */
    --bg: #ffffff;
    --bg-2: #f5f8fa;
    --panel: #ffffff;
    --ink: #181c32;
    --muted: #7e8299;
    --line: #e1e3ea;

    /* Brand — read from mynexuss.com's :root on 2026-09-07. */
    --brand: #009ef7;   /* --nx-primary */
    --accent: #7239ea;  /* --nx-accent  */

    /* The brand band is dark in BOTH themes; these never flip. */
    --band-from: #1e1e2d;   /* --nx-bg-2 */
    --band-to: #15151e;     /* --nx-bg   */
    --band-line: #2b2b40;   /* --nx-border */
    --band-ink: #e4e6ef;    /* --nx-text */
    --band-muted: #9899ac;  /* --nx-muted */

    --ok: #47be7d;
    --warn: #d99400;
    --bad: #d9214e;
    --maint: #0095e8;
    --unknown: #a1a5b7;

    --radius: 12px;
    --radius-lg: 16px;
}

@media (prefers-color-scheme: dark) {
    :root {
        /* Read from mynexuss.com's :root, one for one. */
        --bg: #15151e;      /* --nx-bg     */
        --bg-2: #1e1e2d;    /* --nx-bg-2   */
        --panel: #1b1b29;   /* --nx-card   */
        --ink: #e4e6ef;     /* --nx-text   */
        --muted: #9899ac;   /* --nx-muted  */
        --line: #2b2b40;    /* --nx-border */

        --ok: #50cd89;
        --warn: #ffc700;
        --bad: #f1416c;
        --maint: #009ef7;
        --unknown: #6d6d80;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 2rem 1rem 4rem;
    background: var(--bg);
    color: var(--ink);
    font: 16px/1.55 "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

main { max-width: 56rem; margin: 0 auto; }

/* ---------------------------------------------------------------------------
   The brand band.

   It is DARK IN BOTH THEMES, deliberately. The official wordmark is a
   two-ink PNG — #009ef7 and #ffffff, confirmed by counting its pixels — so
   more than a third of it is pure white and it simply disappears on a light
   background. mynexuss.com never has to solve this because it is dark-only.
   The alternatives were to recolour the mark (inventing a brand variant that
   nobody has approved) or to filter/invert it (which mangles the blue). A
   dark band uses the approved asset UNMODIFIED and keeps the page's own
   light/dark behaviour for everything below it.

   The gradient and the blue glow are lifted from mynexuss.com's own body
   treatment, so the band reads as the same surface the product sits on.
   --------------------------------------------------------------------------- */
.masthead {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.25rem;
    padding: 1.15rem 1.4rem;
    margin-bottom: 1.75rem;
    border: 1px solid var(--band-line);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(700px 220px at 18% -40%, rgba(0, 158, 247, 0.20), transparent 62%),
        linear-gradient(180deg, var(--band-from) 0%, var(--band-to) 100%);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24);
}

/* Intrinsic size attributes are on the <img>, so the band does not reflow
   while the logo decodes. */
.brand-logo {
    display: block;
    width: 160px;
    height: 40px;
    flex: none;
}

.masthead h1 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--band-muted);
}

h2 { font-size: 1rem; font-weight: 620; margin: 0; }
h3 { font-size: 1rem; font-weight: 620; margin: 0 0 0.4rem; }

.banner {
    border: 1px solid var(--line);
    border-left-width: 4px;
    border-radius: var(--radius);
    padding: 1rem 1.15rem;
    margin-bottom: 1.75rem;
    background: var(--panel);
}

.banner-text { margin: 0; font-size: 1.1rem; font-weight: 600; }

.banner.ok      { border-left-color: var(--ok); }
.banner.warn    { border-left-color: var(--warn); }
.banner.bad     { border-left-color: var(--bad); }
.banner.maint   { border-left-color: var(--maint); }
.banner.unknown { border-left-color: var(--unknown); }

.component {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1rem 1.15rem;
    margin-bottom: 0.85rem;
    background: var(--panel);
}

.component-head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: space-between;
    align-items: flex-start;
}

.component-desc { margin: 0.2rem 0 0; color: var(--muted); font-size: 0.875rem; }

.component-state { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }

.pill {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    border: 1px solid currentColor;
    white-space: nowrap;
}

.pill.ok      { color: var(--ok); }
.pill.warn    { color: var(--warn); }
.pill.bad     { color: var(--bad); }
.pill.maint   { color: var(--maint); }
.pill.unknown { color: var(--unknown); }

/* The 90-day strip. Bars shrink to fit rather than overflowing, so the page
   never scrolls sideways on a phone. */
.strip {
    display: flex;
    gap: 1px;
    margin-top: 0.9rem;
    height: 30px;
}

.day {
    flex: 1 1 0;
    min-width: 1px;
    border-radius: 1px;
    background: var(--unknown);
}

.day.ok      { background: var(--ok); }
.day.warn    { background: var(--warn); }
.day.bad     { background: var(--bad); }
.day.maint   { background: var(--maint); }
.day.unknown { background: var(--unknown); opacity: 0.35; }

.strip-legend {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--muted);
    margin-top: 0.35rem;
}

.strip-legend .uptime { font-variant-numeric: tabular-nums; }

/* The key. A day with no data and a fully operational day must not be
   distinguishable by colour alone. */
.strip-key {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    margin: 0.9rem 0 0;
    font-size: 0.75rem;
    color: var(--muted);
}

.strip-key .key { display: inline-flex; align-items: center; gap: 0.35rem; }

.swatch {
    display: inline-block;
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 2px;
    background: var(--unknown);
}

.swatch.ok      { background: var(--ok); }
.swatch.bad     { background: var(--bad); }
.swatch.maint   { background: var(--maint); }
.swatch.unknown { background: var(--unknown); opacity: 0.35; }

.incidents { margin-top: 2.25rem; }
.incidents > h2 { margin-bottom: 0.85rem; }

.incident {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1rem 1.15rem;
    margin-bottom: 0.85rem;
    background: var(--panel);
}

.incident-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
    margin: 0 0 0.75rem;
    font-size: 0.8rem;
    color: var(--muted);
}

.update { border-top: 1px solid var(--line); padding-top: 0.7rem; margin-top: 0.7rem; }
.update-meta { margin: 0 0 0.3rem; font-size: 0.8rem; color: var(--muted); display: flex; gap: 0.6rem; }
.update-meta strong { color: var(--ink); }

/* Authored copy is stored as plain text. Newlines are honoured here rather than
   by allowing markup through. */
.incident-body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }

.empty { color: var(--muted); }

footer {
    margin-top: 2.5rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--line);
    font-size: 0.82rem;
    color: var(--muted);
}

footer p { margin: 0.3rem 0; }

/* The provenance sentence. Set apart, because it is a caveat on every number
   above it rather than another footer line. */
.provenance {
    border-left: 3px solid var(--line);
    padding-left: 0.7rem;
    margin: 0.65rem 0 !important;
}
footer a { color: var(--brand); text-decoration-color: color-mix(in srgb, var(--brand) 45%, transparent); }

@media (max-width: 30rem) {
    .strip { height: 24px; }
    .component-head { flex-direction: column; }
    .masthead { justify-content: center; text-align: center; }
}