/*
 * Generated by ci/status-page.sh from packages/ui/src/tokens.css and
 * packages/ui/src/status-page.css. Do not edit — edit those and rerun.
 *
 * The colour mode is `prefers-color-scheme` and nothing else: the site's
 * Light / Dark / System switch writes `data-theme` from a script, and the
 * Status Page runs no script (launch-surfaces ticket 08 §3).
 */

:root {
  color-scheme: light;

  --tigby-ground: #f5f7f9;
  --tigby-surface: #ffffff;
  --tigby-well: #edf1f5;
  --tigby-hairline: #dce3ea;
  --tigby-ink: #0e1720;
  --tigby-muted: #5c7080;
  --tigby-accent: #2f5e94;
  --tigby-ready: #0f7350;
  --tigby-warn: #8f5a10;
  --tigby-danger: #b3261e;
  --tigby-on-accent: #ffffff;
  --tigby-on-danger: #ffffff;
  --tigby-edge: #7f8b97;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --tigby-ground: #0b0f14;
    --tigby-surface: #131b24;
    --tigby-well: #0e141b;
    --tigby-hairline: #22303d;
    --tigby-ink: #e7eef4;
    --tigby-muted: #8fa3b5;
    --tigby-accent: #5a8ac4;
    --tigby-ready: #34b27b;
    --tigby-warn: #d08b2c;
    --tigby-danger: #e0645a;
    --tigby-on-accent: #0b0f14;
    --tigby-on-danger: #0b0f14;
    --tigby-edge: #55697b;
  }
}

/*
 * The Status Page's stylesheet, layout half (build slice 38).
 *
 * The page is a static file on the witness, written by a Python renderer after
 * every Probe run, and the witness runs no Node process at all — so there is no
 * Tailwind here and no build step on the machine. `ci/status-page.sh` glues the
 * colour tokens out of `tokens.css` onto the front of this file and writes the
 * result to `ops/stages/90-monitor.d/status.d/status.css`, which is deployed
 * with the renderer. Both halves therefore come from this package, and a
 * palette correction reaches the Status Page the way it reaches every other
 * surface: by changing `tokens.css` and regenerating.
 *
 * Two rules of `tokens.css` do not survive the crossing, on purpose:
 *
 *   - `data-theme` does not exist here. The site's Light / Dark / System switch
 *     is a script that writes an attribute, and this page runs no script by
 *     decision (launch-surfaces ticket 08 §3): the "last checked" timestamp is
 *     the page's only moving part, and nothing on it may be able to change what
 *     a reader sees. So the colour mode is `prefers-color-scheme` and nothing
 *     else.
 *   - the type scale is written out as plain declarations rather than as
 *     `@theme` tokens, because nothing here compiles utilities. The values are
 *     the ones DESIGN.md § Typography fixes.
 *
 * The column is 46rem and not the site's 1120px measure: this page is one
 * column of prose over a list of eight labels, which is the documentation
 * measure (65–75ch, docs/brand/tokens.md § Shape, space, depth, motion), not
 * the marketing grid.
 */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/archivo-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/archivo-latin-500-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/archivo-latin-600-normal.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2");
}

* {
  box-sizing: border-box;
}

html {
  background-color: var(--tigby-ground);
  color: var(--tigby-ink);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: "Archivo", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.03125rem;
  line-height: 1.6;
  font-weight: 400;
}

::selection {
  background-color: color-mix(in srgb, var(--tigby-accent) 35%, transparent);
}

a {
  color: var(--tigby-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* 2px accent outline, 2px offset, `:focus-visible` only — the one interactive
   thing on the page is a link, and it gets the same ring as every control on
   the site. */
:focus-visible {
  outline: 2px solid var(--tigby-accent);
  outline-offset: 2px;
}

.measure {
  margin-inline: auto;
  width: 100%;
  max-width: 46rem;
  padding-inline: 30px;
  padding-block: 56px 30px;
}

/* The name is written as the domain and therefore lowercase, which is the one
   place `tigby` is spelt that way in prose (voice.md § Spelling of the name).
   No uppercase transform for the same reason: TIGBY belongs to legal text. */
.masthead {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.84375rem;
  line-height: 1.85;
  color: var(--tigby-muted);
}

.masthead a {
  color: inherit;
}

h1 {
  margin: 16px 0 0;
  font-size: 2.375rem;
  line-height: 1.1;
  letter-spacing: -0.028em;
  font-weight: 600;
}

.lede {
  margin: 16px 0 0;
  max-width: 52ch;
}

.lede-de {
  color: var(--tigby-muted);
}

/* The 2px accent top edge is the only heavier line in the system, and the
   Incident Notice is where it belongs on this page: it is the one thing here a
   person wrote, and it stands above the rows. No panel fill — a fill is for the
   terminal and the command chip (DESIGN.md § Do's and Don'ts). */
.notice {
  margin-top: 30px;
  border-top: 2px solid var(--tigby-accent);
  padding-top: 16px;
}

.notice-lang + .notice-lang {
  margin-top: 16px;
  border-top: 1px solid var(--tigby-hairline);
  padding-top: 16px;
}

.notice h2,
.notice h3 {
  margin: 0 0 8px;
  font-size: 1.25rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  font-weight: 500;
}

.notice p,
.notice ul,
.notice ol {
  margin: 0 0 12px;
}

.notice :last-child {
  margin-bottom: 0;
}

.rows {
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--tigby-hairline);
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid var(--tigby-hairline);
  padding: 12px 0;
}

.row-label {
  min-width: 0;
}

.row-label-de {
  display: block;
  color: var(--tigby-muted);
  font-size: 0.84375rem;
  line-height: 1.45;
}

/* A state is something a machine decided, so it is set in the mono face like
   every other machine-read string (the Machine-Read Rule). Two states only:
   there is no `warn` on this page, because a Probe result is *ok* or
   *disrupted* and nothing between (CONTEXT.md § Probe). */
.row-state {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.84375rem;
  line-height: 1.85;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.row-state-ok {
  color: var(--tigby-ready);
}

.row-state-disrupted {
  color: var(--tigby-danger);
}

.row-state-de {
  display: block;
  color: var(--tigby-muted);
}

.row-detail {
  flex-basis: 100%;
  margin: 0;
  color: var(--tigby-muted);
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.84375rem;
  line-height: 1.85;
}

/* The page's only honesty mechanism (ADR 0002, third amendment): no script
   greys this page out when it goes stale, so the timestamp is what a reader
   checks. It is a machine-written instant, so it is mono and it is written out
   in full UTC rather than as "3 minutes ago", which would need a clock. */
.checked {
  margin: 30px 0 0;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.84375rem;
  line-height: 1.85;
  font-variant-numeric: tabular-nums;
}

.checked-time {
  color: var(--tigby-ink);
}

.checked-label {
  color: var(--tigby-muted);
}

.colophon {
  margin: 30px 0 0;
  border-top: 1px solid var(--tigby-hairline);
  padding-top: 16px;
  color: var(--tigby-muted);
  font-size: 0.84375rem;
  line-height: 1.45;
}

/* 8px, the tight step: the two languages of one sentence are one group. */
.colophon [lang] {
  display: block;
  margin-top: 8px;
}

@media (max-width: 899px) {
  .measure {
    padding-block: 30px;
  }

  h1 {
    font-size: 2rem;
  }
}