/* The Outpost watcher — one screen.

   Palette from docs/SUITE_CONVENTIONS.md: cream sheet, ink text, the deep band
   as the surround. Type follows the hub: Georgia for the wordmark, a system
   sans for the data, which is denser and steadier at small sizes on a phone.

   NO APP ACCENTS ON THIS PAGE, deliberately. GrantFox's terracotta and
   SkillFlamingo's rose exist to tell apps apart; here the only thing worth
   encoding in colour is state, and two colour systems on one row would compete
   for the same glance. Rows are identified by name.

   The five state colours were measured, not chosen by eye, per the conventions
   doc's rule. On the cream #f4f1e8, and with the Lab dE to the nearest app
   accent so a state can never be mistaken for a brand:

     up           #2f6b3f   5.64   dE 14.2 from the hub's forest
     degraded     #7d5200   6.04   dE 22.3 from DataGopher clay
     maintenance  #2f5c7a   6.34   dE 18.0 from FieldMouse grey
     down         #9d1f14   7.04   dE 25.5 from GrantFox terracotta
     unknown      #6b7063   4.51   the hub's corrected muted

   All five clear 4.5, so they carry the state word itself rather than only a
   dot. State is never colour alone: every row states its condition in words. */

:root {
  --cream: #f4f1e8;
  --ink: #26221e;
  --muted: #6b7063;
  --forest: #4f6f52;
  --deep: #26322b;
  --edge: #e2ddcd;

  --up: #2f6b3f;
  --degraded: #7d5200;
  --maintenance: #2f5c7a;
  --down: #9d1f14;
  --unknown: #6b7063;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
}

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

/* Every section below the header is laid out with `display: flex`, and a class
   rule beats the `hidden` attribute's UA `display: none` on specificity. Without
   this, hiding a section leaves its headings on screen -- which showed up as
   "Certificates" and "Channels" still standing over a page that had just said it
   could not reach the watcher. Hiding must actually hide. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--deep);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.4;
  min-height: 100vh;
  min-height: 100dvh;
}

.sheet {
  background: var(--cream);
  max-width: 34rem;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  padding: max(1rem, env(safe-area-inset-top)) 1rem max(1.5rem, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* ---- header ---- */

.head { display: flex; align-items: baseline; gap: 0.625rem; flex-wrap: wrap; }

.wordmark {
  font-family: var(--serif);
  font-size: 1.75rem;
  font-weight: 400;
  margin: 0;
  letter-spacing: 0.01em;
}
/* The suite's two-tone wordmark, split on the second half. */
.wordmark__lead { color: var(--ink); }
.wordmark__trail { color: var(--forest); }

.head__sub { margin: 0; color: var(--muted); font-size: 0.875rem; }

/* ---- the notice: staleness, or an unreachable watcher ---- */

.notice {
  margin: 0;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--edge);
  border-left: 3px solid var(--muted);
  background: #fbf9f3;
  font-size: 0.875rem;
  color: var(--ink);
}
.notice[data-tone="stale"] { border-left-color: var(--degraded); }
.notice[data-tone="unreachable"] { border-left-color: var(--down); }

/* ---- rows ---- */

.rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }

.row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.125rem 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--edge);
  /* The state plate: a left edge, so the row is scannable down the column. */
  border-left: 4px solid var(--state, var(--unknown));
  background: #fbf9f3;
}

.row__name { font-weight: 600; font-size: 1.0625rem; }

.row__state {
  grid-column: 2;
  grid-row: 1;
  color: var(--state, var(--unknown));
  font-weight: 600;
  font-size: 0.9375rem;
  text-align: right;
  white-space: nowrap;
}

.row__since { grid-column: 2; grid-row: 2; color: var(--muted); font-size: 0.8125rem; text-align: right; white-space: nowrap; }

.row__depth { grid-column: 1; grid-row: 2; color: var(--muted); font-size: 0.8125rem; }

.row__detail {
  grid-column: 1 / -1;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  word-break: break-word;
}

.row[data-state="up"] { --state: var(--up); }
.row[data-state="degraded"] { --state: var(--degraded); }
.row[data-state="maintenance"] { --state: var(--maintenance); }
.row[data-state="down"] { --state: var(--down); }

/* ---- the strip: certificates and channels ---- */

.strip, .events { display: flex; flex-direction: column; gap: 0.375rem; }

.strip__heading {
  font-family: var(--serif);
  font-size: 0.9375rem;
  font-weight: 400;
  margin: 0;
  color: var(--muted);
  border-bottom: 1px solid var(--edge);
  padding-bottom: 0.25rem;
}

.certs, .channels, .events__list { list-style: none; margin: 0; padding: 0; }

.certs li, .channels li {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.3125rem 0;
  font-size: 0.875rem;
  border-bottom: 1px solid var(--edge);
}
.certs li:last-child, .channels li:last-child { border-bottom: 0; }

.certs__host, .channels__name { color: var(--ink); word-break: break-all; }
.certs__days, .channels__status { color: var(--muted); white-space: nowrap; text-align: right; }
.certs__days[data-tone="warn"] { color: var(--degraded); font-weight: 600; }
.certs__days[data-tone="bad"], .channels__status[data-tone="bad"] { color: var(--down); font-weight: 600; }
.channels__status[data-tone="ok"] { color: var(--up); }

.push-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.3125rem 0;
}

.push-controls__status { margin: 0; color: var(--muted); font-size: 0.8125rem; }
.push-controls__status[data-tone="ok"] { color: var(--up); }
.push-controls__status[data-tone="bad"] { color: var(--down); }

.push-controls__button {
  flex: 0 0 auto;
  min-height: 2.75rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--forest);
  border-radius: 0.25rem;
  color: var(--forest);
  background: transparent;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}
.push-controls__button:disabled { opacity: 0.6; cursor: default; }

/* ---- events ---- */

.events__list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem;
  padding: 0.375rem 0;
  font-size: 0.8125rem;
  border-bottom: 1px solid var(--edge);
}
.events__list li:last-child { border-bottom: 0; }

.events__when { color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.events__what { color: var(--ink); }
.events__kind { font-weight: 600; }
.events__kind[data-kind="down"] { color: var(--down); }
.events__kind[data-kind="recovered"], .events__kind[data-kind="up"] { color: var(--up); }
.events__kind[data-kind="degraded"] { color: var(--degraded); }
.events__kind[data-kind="maintenance"] { color: var(--maintenance); }
.events__kind[data-kind="cert_expiring"], .events__kind[data-kind="push_lost"] { color: var(--degraded); }
.events__empty { color: var(--muted); font-size: 0.8125rem; padding: 0.375rem 0; }

/* ---- the sign-in gate ---- */

.gate { display: flex; flex-direction: column; align-items: flex-start; gap: 0.875rem; }

.gate__message { margin: 0; font-size: 0.9375rem; color: var(--ink); }

.gate__button {
  font: inherit;
  font-weight: 600;
  color: var(--cream);
  background: var(--forest);
  border: 1px solid var(--forest);
  border-radius: 0.25rem;
  /* A comfortable target on a phone, and wide enough that Face ID is the only
     precision the operator needs. */
  padding: 0.75rem 1.25rem;
  min-height: 2.75rem;
  cursor: pointer;
}
.gate__button:disabled { opacity: 0.6; cursor: default; }

/* ---- footer ---- */

.foot {
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--edge);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
}
.foot__line { margin: 0; color: var(--muted); font-size: 0.75rem; }

.foot__signout {
  font: inherit;
  font-size: 0.75rem;
  color: var(--muted);
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
  cursor: pointer;
  white-space: nowrap;
}