/* Backend status page. Dark like the rest of the site; the only colour
   that carries meaning is the surety ladder, which is shared with the
   map's pin colours on purpose -- blue means "site resolved" in both
   places, and a reader should not have to learn it twice. */
#statusmain {
  max-width: 1100px; margin: 0 auto; padding: 12px 16px 48px;
}
#statusmain section { margin: 0 0 34px; }
#statusmain h2 {
  font-size: 16px; font-weight: 600; color: #e2e8f0;
  margin: 0 0 4px; padding-bottom: 4px; border-bottom: 1px solid #2a3038;
}
#statusmain h3 { font-size: 13px; color: #c4cad4; margin: 18px 0 6px; }
#statusmain h4 { font-size: 12px; color: #8a919c; margin: 12px 0 4px;
                 font-weight: 500; }
.lede { font-size: 12px; color: #8a919c; margin: 6px 0 12px;
        max-width: 70ch; line-height: 1.5; }

/* The ladder. Segments are proportional, and a stage with nothing in it
   gets NO segment -- a zero-width sliver for an unbuilt stage would be
   a claim made in pixels. */
.stagebar {
  display: flex; height: 18px; border-radius: 3px; overflow: hidden;
  background: #14171b; border: 1px solid #2a3038; margin: 0 0 10px;
}
.stagebar .seg {
  font-size: 10px; line-height: 18px; text-align: center;
  color: #10141a; font-weight: 600; min-width: 2px;
}

.stages { display: flex; flex-direction: column; gap: 2px; }
.stage {
  display: grid; grid-template-columns: 14px 5.5em 15em 6em 1fr;
  align-items: baseline; gap: 8px; padding: 4px 6px; border-radius: 3px;
  font-size: 12px;
}
/* The ingest rows carry no colour chip -- there is no ladder to colour --
   so without their own track every column shifted one to the left and the
   count landed in the 14px chip slot. Counts here run to five figures
   ("9,919" and up), so the number column is sized in em against the
   digits rather than in px against nothing. */
.stage.nochip {
  grid-template-columns: 6.5em 17em 6em 1fr;
}
.stage .n, .stage .f { font-variant-numeric: tabular-nums; white-space: nowrap; }
.stage:nth-child(odd) { background: #14171b; }
.stage .n { text-align: right; color: #e2e8f0; font-weight: 600; }
.stage .lbl { color: #c4cad4; }
.stage .f { color: #8a919c; font-variant-numeric: tabular-nums; }
.stage .blurb { color: #6f7783; }
/* Declared but not built. Dimmed rather than hidden: a pipeline whose
   remaining stages are invisible looks finished. */
.stage.unbuilt { opacity: 0.55; }
.stage.unbuilt .f { font-style: italic; }
.stage .chip { width: 10px; height: 10px; border-radius: 2px;
               display: inline-block; }

.bigstat .n { font-size: 30px; color: #e2e8f0; font-weight: 600;
              font-variant-numeric: tabular-nums; }
.bigstat .of { font-size: 12px; color: #8a919c; margin-left: 8px; }
.bigstat .stagebar { margin-top: 10px; }

.counts { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 12px;
          color: #8a919c; margin: 10px 0; }
.counts b { color: #e2e8f0; font-variant-numeric: tabular-nums; }
.counts .bad b { color: #e06c6c; }

.statetable table, table.jobs {
  width: 100%; border-collapse: collapse; font-size: 12px;
}
.statetable th {
  text-align: left; color: #8a919c; font-weight: 500; padding: 3px 6px;
  border-bottom: 1px solid #2a3038;
}
.statetable td, table.jobs td { padding: 3px 6px; color: #c4cad4; }
.statetable tr:nth-child(even), table.jobs tr:nth-child(even) {
  background: #14171b;
}
.r { text-align: right; font-variant-numeric: tabular-nums; }
.dim { color: #6f7783; }

/* Per-state progress: the bar is the share RESOLVED, so a long bar means
   a state is nearly done rather than merely large. */
.minibar { position: relative; width: 180px; }
.minibar span {
  display: inline-block; height: 8px; background: #7da7e0;
  border-radius: 2px; vertical-align: middle;
}
.minibar i { font-style: normal; color: #6f7783; margin-left: 6px;
             font-size: 11px; font-variant-numeric: tabular-nums; }

table.jobs tr.stale td { color: #e0a86c; }

/* Worker rows. The dot is the whole point of the section -- filled means
   we heard from it recently, hollow means we did not -- so it comes
   first in the row and is not something you have to read a timestamp to
   work out. */
table.jobs td code, .lede code, #compute-body code {
  font-size: 11px; background: #14171b; border: 1px solid #2a3038;
  border-radius: 3px; padding: 0 4px; color: #c4cad4;
}
table.jobs tr.stale td:first-child { color: #8a919c; }