/* Visual system modelled on Ona: off-white page, white cards with hairline
   borders and generous radii, a light serif display face over a grotesk,
   near-black ink, one green accent, and colour only where state lives.
   Newsreader stands in for Martina Plantijn; Geist for ABC Diatype. */
@import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;1,6..72,300;1,6..72,400&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500&display=swap");

:root {
  --bg: #f7f7f6;
  --surface: #ffffff;
  --surface-2: #f2f2f1;
  --surface-3: #e9e9e7;
  --line: rgb(10 14 25 / 0.08);
  --line-2: rgb(10 14 25 / 0.14);
  --fg: #0a0e19;
  --fg-2: #636363;
  --fg-3: #8f8f8f;
  --green: #397554;
  --green-dark: #1e3c2c;
  --green-tint: #e2efe6;
  --blue-tint: #e3e7fb;
  --amber-tint: #fbeedb;
  --red: #c41e3a;
  --ok: #2f9e5b;
  --run: #d98e04;
  --await: #2f6fed;
  --idle: #c0c0be;
  --err: #c41e3a;
  --serif: "Newsreader", "Times New Roman", Georgia, serif;
  --sans: "Geist", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --r: 8px;
  --r-lg: 16px;
  color-scheme: light;
}

* { box-sizing: border-box; min-width: 0; }

.dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--idle); }
.dot.run { background: var(--run); }
.dot.await { background: var(--await); box-shadow: 0 0 0 3px rgb(47 111 237 / 0.18); animation: pulse 1.6s ease-in-out infinite; }
.dot.done { background: var(--ok); }
.dot.lost { background: var(--err); }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgb(47 111 237 / 0); } }

.mark { display: inline-grid; place-items: center; width: 30px; height: 30px; color: var(--fg); }
.mark svg { width: 100%; height: 100%; display: block; }
.mark.lg { width: 56px; height: 56px; }
.grow { flex: 1; }
.eyebrow { font: 500 11px/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--red); }