/* status.ndmx.net (docs/ops/status-page-spec.md; the owner's approved design,
   design/status-page/index.html). Built from the design faithfully; the fonts are served
   from here (IBM Plex, SIL Open Font License 1.1, fonts/OFL.txt). */

@font-face { font-family: "IBM Plex Sans"; font-weight: 300; font-display: swap;
  src: url("fonts/IBMPlexSans-Light.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap;
  src: url("fonts/IBMPlexSans-Regular.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-display: swap;
  src: url("fonts/IBMPlexSans-Medium.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap;
  src: url("fonts/IBMPlexSans-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 300; font-display: swap;
  src: url("fonts/IBMPlexSansArabic-Light.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 400; font-display: swap;
  src: url("fonts/IBMPlexSansArabic-Regular.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 600; font-display: swap;
  src: url("fonts/IBMPlexSansArabic-SemiBold.woff2") format("woff2"); }

:root{--night:#0b1019;--ice:#B5CFE1;--navy:#0f2447;--acc:#2451D6;--ink:#1d2433;--ink3:#5f6878;--line:#e2e7ef;--bg:#f5f7fa;--sur:#fff;
--ok:#3fbf7f;--okd:#1f8a4c;--warn:#f0b43c;--warnd:#a86b0c;--crit:#ef5a4f;--critd:#b3261e;--grey:#8a94a6;--greyd:#5f6878;--state:var(--ok)}
body.amber{--state:var(--warn)}body.red{--state:var(--crit)}
/* Planned work in progress: the brand's own blue, beside the design's three. */
body.planned{--state:#5b8cff}
/* Stale (spec §4): grey, never green; the band greyed too. "unknown": grey lamp only. */
body.stale,body.unknown{--state:var(--grey)}body.stale .hero{filter:grayscale(.85)}
*{box-sizing:border-box;margin:0}
body{font:15px/1.55 "IBM Plex Sans","IBM Plex Sans Arabic",sans-serif;color:var(--ink);background:var(--bg)}
html[lang="ar"] body{font-family:"IBM Plex Sans Arabic","IBM Plex Sans",sans-serif}
/* The hero: the sign-in page's own ground, the NDMX sphere as the status lamp. */
.hero{position:relative;overflow:hidden;background:var(--night) url("img/ndmx-signin-ground-dark.svg") center/cover;color:#fff}
.bar{position:relative;z-index:2;max-width:960px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;gap:16px}
.bar img{height:24px}.bar .lang{margin-inline-start:auto;color:var(--ice);font:inherit;font-size:14px;text-decoration:none;border:1px solid #b5cfe155;border-radius:999px;padding:4px 12px;background:none;cursor:pointer}
.bar .lang:focus-visible{outline:2px solid var(--ice);outline-offset:2px}
.stage{position:relative;z-index:2;max-width:960px;margin:0 auto;padding:8px 20px 52px;display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center}
.orb{position:relative;width:64px;height:64px;display:grid;place-items:center}
.orb::before{content:"";position:absolute;inset:-16px;border-radius:50%;background:radial-gradient(circle,var(--state) 0,transparent 68%);opacity:.55;animation:breathe 4s ease-in-out infinite}
.orb::after{content:"";position:absolute;inset:2px;border-radius:50%;box-shadow:0 0 0 1.5px var(--state),0 0 18px var(--state)}
.orb img{position:relative;width:52px;height:52px}
@keyframes breathe{50%{opacity:.3;transform:scale(.94)}}
@media (prefers-reduced-motion:reduce){.orb::before{animation:none}}
.say h1{font-size:26px;line-height:1.2;font-weight:300;letter-spacing:-.2px}
html[lang="ar"] .say h1{letter-spacing:0}
.say h1 b{font-weight:600}
.say p{color:#c9d6e8;margin-top:2px;font-size:14px;max-width:60ch}
.chk{display:inline-flex;gap:8px;align-items:center;white-space:nowrap;font-size:13px;color:var(--ice);background:#ffffff10;border:1px solid #ffffff1f;border-radius:999px;padding:5px 12px}
/* The check: a ring that fills toward the next read, spins while reading. */
.ring{width:14px;height:14px;flex:none}
.ring circle{fill:none;stroke-width:2.4}
.ring .track{stroke:#ffffff26}
.ring .fill{stroke:var(--state);stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;stroke-dasharray:31.4;stroke-dashoffset:31.4}
.chk.reading .ring{animation:spin .8s linear infinite}
.chk.reading .ring .fill{stroke-dashoffset:22}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.chk.reading .ring{animation:none}}
/* The ribbon from the app's own top bar, run along the hero's foot. */
.ribbon{position:absolute;inset-inline-end:-30px;bottom:-24px;width:300px;opacity:.7;z-index:1;pointer-events:none}
html[dir="rtl"] .ribbon{transform:scaleX(-1)}
main{max-width:960px;margin:-28px auto 0;padding:0 20px 56px;position:relative;z-index:3;display:grid;gap:20px}
.card{background:var(--sur);border:1px solid var(--line);border-radius:14px;box-shadow:0 1px 2px #0f244710}
.card[hidden]{display:none}
.card h2{font-size:15px;font-weight:600;padding:18px 22px 6px;color:var(--navy)}
.planned{display:grid;grid-template-columns:auto 1fr;gap:18px;padding:20px 22px;align-items:start}
.planned + .planned{border-top:1px solid var(--line)}
.cal{width:58px;border-radius:10px;overflow:hidden;text-align:center;border:1px solid var(--line)}
.cal b{display:block;background:var(--acc);color:#fff;font-size:12px;padding:3px 0;letter-spacing:.3px}
.cal span{display:block;font-size:24px;font-weight:600;color:var(--navy);padding:4px 0}
.planned h3{font-size:16px;font-weight:600}.planned .when{color:var(--ink3);font-size:14px}
.planned p{margin-top:6px;white-space:pre-line}
.svc{padding:16px 22px;border-top:1px solid var(--line);display:grid;grid-template-columns:28px 1fr auto;gap:2px 14px;align-items:center}
.svc:first-of-type{border-top:0}
.ic{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:#eef3fa;color:var(--navy)}
.ic svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.svc .name{font-weight:500}.svc .what{grid-column:2/-1;color:var(--ink3);font-size:13px}
.st{font-size:13px;font-weight:600;display:flex;align-items:center;gap:7px}
.st i{width:8px;height:8px;border-radius:50%}
.ok{color:var(--okd)}.ok i{background:var(--ok)}.warn{color:var(--warnd)}.warn i{background:var(--warn)}
.crit{color:var(--critd)}.crit i{background:var(--crit)}.plan{color:var(--acc)}.plan i{background:#5b8cff}
.grey{color:var(--greyd)}.grey i{background:var(--grey)}
.days{grid-column:2/-1;display:flex;gap:2px;height:30px;margin-top:10px;align-items:flex-end}
.days span{flex:1;height:100%;background:#e6eaf0;border-radius:2px}
.days .o{background:#bfe6cf}.days .w{background:#f3d08a}.days .c{background:#f0a59e}.days .m{background:#c9d6f5}
.dk{grid-column:2/-1;display:flex;justify-content:space-between;color:var(--ink3);font-size:12px;margin-top:4px}
.hist .item{padding:16px 22px;border-top:1px solid var(--line);display:grid;grid-template-columns:96px 1fr;gap:14px}
.hist .item:first-of-type{border-top:0}
.hist .d{color:var(--ink3);font-size:13px}.hist h3{font-size:15px;font-weight:600}
.hist p{white-space:pre-line}
.hist .tag{display:inline-block;font-size:12px;color:var(--okd);background:#e6f5ec;border-radius:999px;padding:1px 9px;margin-top:6px}
.hist .none{padding:6px 22px 18px;color:var(--ink3)}
.foot{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--ink3);font-size:14px;padding-top:8px;flex-wrap:wrap;text-align:center}
.foot img{height:18px;opacity:.6}.foot a{color:var(--acc)}
@media (max-width:640px){.stage{grid-template-columns:auto 1fr;gap:14px}.stage .chk{grid-column:1/-1;justify-self:start}.orb{width:48px;height:48px}.orb img{width:40px;height:40px}.say h1{font-size:21px}.hist .item{grid-template-columns:1fr}}