/* /about and /status (server/pages.py).
 *
 * The palette, the type stack and the body defaults come from style.css,
 * which these pages load first — a second copy of the colours here would be
 * a second thing to change and a deployment that looks like two sites. This
 * file is only the shape of a document: one readable column, a masthead and
 * a footer.
 *
 * No inline styles anywhere, in here or in the pages: the server's
 * Content-Security-Policy admits stylesheets of this origin and nothing
 * else, so an inline `style=` attribute would simply not apply.
 */

.page {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px;
}

.page__head,
.page__main,
.page__foot {
  width: 100%;
  max-width: 720px;
}

/* ── masthead ─────────────────────────────────────────────────────── */
.page__head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: baseline;
  justify-content: space-between;
  padding: 28px 0 20px;
  border-bottom: 1px solid var(--line);
}

.page__brand {
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.02em;
  color: var(--text);
  text-decoration: none;
}
.page__brand:hover { color: var(--amber); }

.page__tabs { display: flex; gap: 18px; }

.page__tab {
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
}
.page__tab:hover { color: var(--text); }
.page__tab--here { color: var(--amber); }

/* ── body copy ────────────────────────────────────────────────────── */
.page__main { padding: 36px 0 8px; }

.page__title {
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin: 0 0 18px;
}

.page__main h2 {
  font-size: 17px;
  letter-spacing: -0.01em;
  margin: 34px 0 10px;
}

.page__main p { margin: 0 0 14px; max-width: 62ch; }

.page__lead {
  font-size: 17px;
  color: var(--muted);
  max-width: 60ch;
}

.page__main a { color: var(--amber); }

/* Specificity, not order: `.page__main a` above is one class and one
   element, so a bare `.page__cta` loses to it and the label comes out amber
   on amber — invisible. */
.page__main a.page__cta {
  display: inline-block;
  margin-top: 6px;
  padding: 10px 18px;
  border-radius: var(--radius);
  background: var(--amber);
  color: var(--void);
  font-weight: 600;
  text-decoration: none;
}
.page__main a.page__cta:hover { filter: brightness(1.08); }

.page__muted { color: var(--muted); font-size: 13px; }
.page__main code {
  font-family: var(--mono);
  font-size: 0.92em;
  background: var(--slab-2);
  border-radius: 5px;
  padding: 1px 5px;
}

/* ── status ───────────────────────────────────────────────────────── */
.page__state {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 12px;
}

/* The dot carries the state as colour; the words beside it carry it for
   everyone the colour does not reach. */
.page__dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--muted);
  flex: none;
}
.page__state--ok .page__dot { background: var(--mint); }
.page__state--warn .page__dot { background: var(--amber); }
.page__state--down .page__dot { background: var(--alarm); }

.page__table {
  width: 100%;
  border-collapse: collapse;
  margin: 22px 0 6px;
}
.page__table th,
.page__table td {
  text-align: left;
  font-weight: 400;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.page__table td { text-align: right; }

.page__cell--ok { color: var(--mint); }
.page__cell--warn { color: var(--amber); }
.page__cell--down { color: var(--alarm); }

.page__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
  margin: 0 0 18px;
}
.page__fact dt { color: var(--muted); font-size: 13px; }
.page__fact dd { margin: 2px 0 0; font-family: var(--mono); font-size: 14px; }

/* ── footer ───────────────────────────────────────────────────────── */
.page__foot {
  margin-top: auto;
  padding: 28px 0 34px;
  border-top: 1px solid var(--line);
}
.page__links { display: flex; flex-wrap: wrap; gap: 18px; margin: 0 0 8px; }
.page__links a { color: var(--muted); text-decoration: none; font-size: 14px; }
.page__links a:hover { color: var(--text); }
.page__foot p { margin: 0 0 6px; }

@media (max-width: 520px) {
  .page__title { font-size: 26px; }
  .page__lead { font-size: 16px; }
}

/* ── the htop block on /status ─────────────────────────────────────
 *
 * Drawn in characters rather than styled boxes: the server's
 * Content-Security-Policy admits no inline styles, so a per-bar `width:`
 * could never apply — and a meter drawn in pipes is the thing being
 * imitated anyway. All that is left for CSS is the colour of a bar, which
 * comes from a class.
 */
.htop {
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.45;
  margin: 18px 0 14px;
  padding: 14px 16px;
  background: var(--slab);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  /* A narrow phone scrolls the meters rather than wrapping them into
     nonsense: a bar that wraps is not a bar. */
  overflow-x: auto;
  white-space: pre;
}

.htop__bar--ok { color: var(--mint); }
.htop__bar--warn { color: var(--amber); }
.htop__bar--high { color: var(--alarm); }
.htop__idle { color: var(--muted); }
.htop__note { color: var(--muted); }
.htop__head { color: var(--muted); font-weight: 600; }

/* The invented process rows. Dimmer than the meters above them, so the
   block reads as decoration rather than as a readout. */
.htop__proc { color: var(--muted); }