/* Orbyts Group — status page.
   A faithful build of "Orbyts Status.dc.html" from the Orbyts design project.
   No build step, no external requests; the page's data comes from /status.json.

   The design carries a LIGHT/DARK toggle in its header. That was a review aid
   for the canvas — the handoff says production follows the OS setting — so the
   toggle is gone and the palette swaps on prefers-color-scheme instead. */

/* ── Dark palette ───────────────────────────────────────────
   Only this page ships a dark theme, so the overrides live here rather than in
   tokens.css: the homepage is a deliberate black-hero / paper-panel composition
   and inverting its tokens would take the panel with it. Values are verbatim
   from the design system's .dark block. */
@media (prefers-color-scheme: dark) {
  :root {
    --color-surface: #111111;
    --color-header-bg: #070707;
    --color-section-bg: #0d0d0d;
    --color-paper: rgba(255, 255, 255, 0.03);
    --color-hover-bg: rgba(255, 255, 255, 0.06);

    --color-fg: #ffffff;
    --color-fg-secondary: #cccccc;
    --color-muted: #888888;
    --color-muted-2: #777777;
    --color-muted-3: #555555;

    --color-border: rgba(255, 255, 255, 0.08);
    --color-border-2: rgba(255, 255, 255, 0.12);
    --color-border-3: rgba(255, 255, 255, 0.18);

    --color-primary-ink: #FF8AC7;   /* lifted on dark so pink text stays legible */
    --color-success-border: rgba(33, 201, 151, 0.18);

    --sh-lg: 0 18px 50px rgba(0, 0, 0, 0.5);

    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  min-height: 100vh;
  background: var(--color-section-bg);
  color: var(--color-fg);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--color-primary-ink); text-decoration: none; }
a:hover, a:focus-visible { color: var(--color-primary); }

/* Small mono caps — the label voice used throughout the design. */
.mono {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ── Header ─────────────────────────────────────────────── */

.status-head {
  position: sticky;
  top: 0;
  z-index: 10;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 32px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-header-bg);
}

.head-left, .head-right {
  display: flex;
  align-items: center;
  gap: 18px;
}

.back {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-fg-secondary);
}
.back:hover, .back:focus-visible { color: var(--color-primary); }
.back .arrow { font-size: 13px; }

.head-rule {
  width: 1px;
  height: 20px;
  background: var(--color-border-2);
}

/* ORBYT-S-TATUS: the wordmark's final S is also the S of "Status", so the tail
   is set in the same face at the same size and pulled back over the wordmark's
   trailing letter-space. */
.status-lockup {
  display: flex;
  align-items: baseline;
  color: var(--color-fg);
}
.wordmark {
  font-family: var(--font-wordmark);
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  letter-spacing: var(--track-wordmark);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-fg);
}
.wordmark .y { color: var(--color-primary); }
.status-lockup .tail {
  font-family: var(--font-wordmark);
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  letter-spacing: var(--track-wordmark);
  text-transform: uppercase;
  margin-left: -2px;
}

/* ── Cards ──────────────────────────────────────────────── */

.status-main {
  max-width: 900px;
  margin: 0 auto;
  padding: 56px 32px 96px;
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
}

/* ── Overall state banner ───────────────────────────────── */

.overall {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 22px 24px;
  border-radius: 12px;
  border: 1px solid var(--color-success-border);
  background: var(--color-success-bg);
}
.overall .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--color-success);
  box-shadow: 0 0 0 4px rgba(33, 201, 151, 0.18);
}
.overall h1 {
  flex: 1;
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.overall .updated { color: var(--color-fg-secondary); }

/* The banner takes the colour of the worst thing on the page. */
.overall[data-state='degraded'] {
  border-color: rgba(255, 176, 32, 0.28);
  background: rgba(255, 176, 32, 0.08);
}
.overall[data-state='degraded'] .dot {
  background: var(--color-warning);
  box-shadow: 0 0 0 4px rgba(255, 176, 32, 0.18);
}
.overall[data-state='outage'] {
  border-color: rgba(255, 61, 94, 0.28);
  background: rgba(255, 61, 94, 0.08);
}
.overall[data-state='outage'] .dot {
  background: var(--color-danger);
  box-shadow: 0 0 0 4px rgba(255, 61, 94, 0.18);
}

/* ── Services ───────────────────────────────────────────── */

.services {
  margin-top: 40px;
  overflow: hidden;
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--color-border);
}
.card-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.card-head .window { color: var(--color-muted); }

.svc {
  padding: 20px 24px;
  border-bottom: 1px solid var(--color-border);
}

.svc-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.svc-name {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.svc-name .name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.svc-name .note {
  font-size: 13px;
  color: var(--color-fg-secondary);
}

.state-operational { color: var(--color-success); }
.state-degraded    { color: var(--color-warning); }
.state-outage      { color: var(--color-danger); }

/* ── The 90-day strip ───────────────────────────────────────
   The track is one continuous faint bar and recorded days are drawn onto its
   right-hand end, newest last. That is deliberate: the design has no "no data"
   day and its legend has no swatch for one, so a day we did not measure must
   not render as a coloured square. It renders as track — the absence of a bar,
   not a state — and the strip fills in from the right as history accrues. */
.svc-days {
  position: relative;
  margin-top: 14px;
  height: 30px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--color-fg) 5%, transparent);
  display: flex;
  justify-content: flex-end;
  gap: 2px;
  overflow: hidden;
}
.svc-days .day {
  border-radius: 2px;
  flex: 0 0 auto;
}
.day-operational { background: var(--color-success); }
.day-degraded    { background: var(--color-warning); }
.day-outage      { background: var(--color-danger); }

.svc-scale {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--color-muted-2);
}
.svc-scale .uptime { color: var(--color-fg-secondary); }

.legend {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 16px 24px;
  background: var(--color-section-bg);
}
.legend span {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-fg-secondary);
}
.legend i {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: block;
}

/* ── Incident history ───────────────────────────────────── */

.history { margin-top: 48px; }
.history > h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.incidents {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.incident { padding: 22px 24px; }
.incident .date { color: var(--color-muted); }
.incident .title-row {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.incident .title-row i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.incident h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.incident .updates {
  margin: 14px 0 0 3px;
  padding-left: 16px;
  border-left: 1px solid var(--color-border-2);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.incident .update p {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 22px;
  color: var(--color-fg-secondary);
}

.stage-investigating { color: var(--color-warning); }
.stage-identified    { color: var(--color-warning); }
.stage-monitoring    { color: var(--color-info); }
.stage-resolved      { color: var(--color-success); }

.no-incidents {
  background: var(--color-surface);
  border: 1px dashed var(--color-border-2);
  border-radius: 12px;
  padding: 22px 24px;
  font-size: 14px;
  color: var(--color-muted);
}

/* ── Footer ─────────────────────────────────────────────── */

.status-foot {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  flex-wrap: wrap;
  color: var(--color-muted-2);
}
.status-foot .lockup {
  display: flex;
  align-items: center;
  gap: 16px;
}
.status-foot .wordmark { font-size: 13px; }
.status-foot .wordmark .y { color: var(--color-primary-ink); }
.status-foot .foot-rule {
  width: 1px;
  height: 16px;
  background: var(--color-border-2);
}
.status-foot a { color: inherit; }
.status-foot a:hover, .status-foot a:focus-visible { color: var(--color-primary); }
.status-foot .foot-links {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

/* ── Load and error states ──────────────────────────────── */

/* Shown until status.json has been read, and replaced by whatever it says.
   Nothing in the markup asserts a state before the data arrives — a page that
   said "all systems operational" while it was still fetching would be making a
   claim it had not checked. */
.loading {
  padding: 22px 24px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
  color: var(--color-muted);
  font-size: 14px;
}
.fetch-error {
  border-color: rgba(255, 61, 94, 0.28);
  background: rgba(255, 61, 94, 0.06);
  color: var(--color-fg-secondary);
}

/* ── Narrow screens ─────────────────────────────────────── */

@media (max-width: 720px) {
  .status-head { padding: 12px 20px; }
  .status-main { padding: 40px 20px 72px; }
  .svc, .card-head, .legend, .incident { padding-left: 18px; padding-right: 18px; }
  .svc-top { flex-direction: column; align-items: flex-start; gap: 8px; }
  .svc-days { height: 26px; }
  .status-foot { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 420px) {
  .head-left .back span:last-child { display: none; }
  .svc-scale { font-size: 10px; letter-spacing: 0.12em; }
}

/* `hidden` is a UA rule of `display: none`, and any author `display` beats it. */
[hidden] { display: none !important; }

.setup-key { -webkit-user-select: none; user-select: none; }