:root {
  --edge: #d0d7de;
  --bar: #f6f8fa;
  --ink: #1f2328;
}

body {
  font: 15px/1.5 system-ui, sans-serif;
  color: var(--ink);
  margin: 0;
  padding: 0 0 3rem;
}

#placeholder, #signin { max-width: 24rem; margin: 4rem auto; padding: 0 1rem; }

.error { color: #cf222e; }
.quiet { color: #656d76; }

/*
 * The whole console drives visibility through the `hidden` attribute, and
 * `hidden` is only a user-agent rule saying `display: none`. Any author rule
 * with a `display` beats the user agent outright, whatever its specificity —
 * so `main label { display: block }` quietly un-hid the production
 * confirmation on Test, and `#bar { display: flex }` put an empty header
 * above the sign-in form (#98).
 *
 * Neither failure shows up as an error. Stating it once, with !important,
 * is what makes `hidden` mean hidden no matter what is added below.
 */
[hidden] { display: none !important; }

#signin label { display: block; margin: 0 0 .75rem; }
#signin input, #signin select { display: block; width: 100%; padding: .4rem; box-sizing: border-box; }

/*
 * Three columns, the outer two equal, so the pages sit in the middle of the
 * bar whatever the width of the title and of the user on either side.
 */
#bar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem;
  padding: .6rem 1rem;
  background: var(--bar);
  border-bottom: 2px solid var(--edge);
}
/*
 * The pages are links beside the title, with no border: a hover highlight, and
 * the page you are on marked. The user and Sign out sit at the right.
 */
#bar nav { display: flex; gap: .15rem; flex-wrap: wrap; justify-content: center; }
#bar nav a { padding: .25rem .65rem; border-radius: 6px; font-size: .9rem; color: inherit; text-decoration: none; }
#bar nav a:hover { background: #eaeef2; }
#bar nav a[aria-current="page"] { background: #d0d7de; font-weight: 600; }
#bar nav a:focus-visible { outline: 2px solid #0969da; outline-offset: 1px; }
#bar-user { justify-self: end; display: flex; align-items: center; gap: .5rem; }
#bar #signout { font-size: .85rem; padding: .25rem .6rem; }
/* Too narrow for three columns: the title and user share the first row, the pages wrap below. */
@media (max-width: 900px) {
  #bar { grid-template-columns: 1fr auto; }
  #bar nav { grid-column: 1 / -1; grid-row: 2; }
}
#who { color: #656d76; font-size: .85rem; }

main { max-width: 40rem; margin: 2rem auto; padding: 0 1rem; }
main label { display: block; margin: 0 0 .75rem; }

/*
 * Production, loudly.
 *
 * The one accident worth engineering against is dropping a test item into
 * the live world, and that accident is always made by someone who knows
 * perfectly well which service they meant. So this is not a label to read;
 * it is a colour that is wrong in peripheral vision.
 */
body.production #bar { background: #fff1e5; border-bottom-color: #bc4c00; }
body.production #service-name { color: #bc4c00; }

table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: .35rem .6rem; border-bottom: 1px solid var(--edge); }

/*
 * The bots table is nine columns, and `main` is sized for a form. Widening
 * it for every page would leave the drop form's single field stretched
 * across a monitor, so the width follows the page rather than the shell.
 */
main.wide { max-width: 72rem; }

/* main's labels are block, which would put a checkbox on its own line. */
main label.inline { display: inline-flex; align-items: center; gap: .4rem; width: auto; }
main label.inline input { margin: 0; }

#bots-table { font-size: .85rem; }
#bots-table td { vertical-align: top; white-space: nowrap; }
/* A bot doing nothing should read as quiet, not as a missing value. */
#bots-table td.none { color: #8c959f; }
#bots-table td.flat { color: #cf222e; }

/*
 * The form sits under a nine-column table, so it must not inherit the
 * table's width -- a three-field form stretched across a monitor reads as
 * three unrelated controls rather than one order.
 */
#patrol-form { max-width: 26rem; margin-top: 2rem; }
#patrol-form h3 { margin-bottom: .25rem; }
#patrol-form input, #patrol-form select {
  display: block; width: 100%; padding: .4rem; box-sizing: border-box;
}

/*
 * A value whose tooltip carries the thing you actually came to read. The
 * dotted underline is the only signal that hovering is worth doing, and
 * without it the id may as well not be in the page.
 */
#bots-table td.named { text-decoration: underline dotted; cursor: help; }

/*
 * An item id is a uuid and will wrap into two lines in a proportional
 * font, which makes a list of them impossible to scan down. Monospace and
 * nowrap keep the column one line each and the digits aligned, which is
 * what makes comparing one against the bots table possible by eye.
 */
#inventory-table { font-size: .85rem; }
#inventory-table td:first-child {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
}
#inventory-more { margin-top: 1rem; padding: .4rem .8rem; }

/* Database traffic. Red and green carry the verdict; the number sits beside it. */
.kpis { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1rem 0; }
.kpi { border: 1px solid #d0d7de; border-radius: 6px; padding: .6rem .9rem; min-width: 11rem; border-left-width: 6px; }
.kpi.good { border-left-color: #1a7f37; }
.kpi.bad { border-left-color: #cf222e; }
.kpi.unknown { border-left-color: #8c959f; }
.kpi .value { font-size: 1.4rem; font-weight: 600; }
.kpi .name { color: #656d76; font-size: .8rem; }
.traffic-table { font-size: .85rem; }
.traffic-table td { white-space: nowrap; }
.traffic-table td:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.traffic-table td.up { color: #cf222e; }
.traffic-table td:first-child { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
/* Status: the verdict first. One colour on the left edge, the same size every time. */
.status-banner { border: 1px solid #d0d7de; border-left-width: 6px; border-radius: 6px; padding: .8rem 1rem; margin: 1rem 0; }
.status-banner.good { border-left-color: #1a7f37; background: #e6f4ea; }
.status-banner.bad { border-left-color: #cf222e; background: #fdeaea; }
.status-banner.none { border-left-color: #8c959f; background: #f1f3f5; }
.status-word { font-size: 1.35rem; font-weight: 700; }
.status-banner.good .status-word { color: #1a7f37; }
.status-banner.bad .status-word { color: #cf222e; }
/* A fixed first column, so the facts and the links below them line up. */
.facts { display: grid; grid-template-columns: 13rem 1fr; gap: .3rem 1.5rem; margin: 0 0 1.5rem; }
.facts dt { color: #656d76; font-size: .88rem; }
.facts dd { margin: 0; overflow-wrap: anywhere; }
#status-links dd { font-size: .9rem; }
#traffic-chart { width: 100%; max-width: 900px; height: auto; }