/* Shared design system for the console.

   Rules of thumb, kept deliberately narrow so every page looks like one app:
   generous whitespace, hairline borders rather than heavy ones, rounded
   corners, the system font stack, shadow that appears on hover rather than
   sitting there permanently, and colour used only where it carries meaning.
   Everything structural is greyscale. */

:root {
  --ink:        #1c1c1e;   /* primary text */
  --ink-soft:   #6e6e73;   /* secondary text */
  --ink-faint:  #a1a1a6;   /* tertiary, timestamps, units */
  --line:       #e8e8ed;   /* hairline borders */
  --line-strong:#d8d8de;
  --bg:         #ffffff;
  --bg-sunken:  #fafafa;   /* page background behind cards */
  --bg-hover:   #f5f5f7;

  /* The only colours in the system. Each one means something. */
  --live:       #17803d;   /* running */
  --live-bg:    #e9f6ee;
  --down:       #b3261e;   /* stopped */
  --down-bg:    #fdecea;
  --wait:       #9a6700;   /* working */
  --wait-bg:    #fff6e0;

  --radius-lg: 18px;
  --radius:    12px;
  --radius-sm: 9px;

  --shadow-hover: 0 8px 28px rgba(0, 0, 0, .10);
  --shadow-card:  0 1px 2px rgba(0, 0, 0, .04);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg-sunken);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 28px;
}

/* ---------- top bar ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
}

.topbar .wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 60px;
}

.brand {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
  display: flex;
  align-items: center;
  gap: 9px;
}

/* The mark is a plain rounded square. No logo to go stale. */
.brand .mark {
  width: 22px; height: 22px;
  border-radius: 7px;
  background: var(--ink);
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.topbar nav {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

.topbar nav a {
  padding: 7px 13px;
  border-radius: 999px;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 500;
  transition: background .15s ease, color .15s ease;
}

.topbar nav a:hover { background: var(--bg-hover); color: var(--ink); }
.topbar nav a[aria-current="page"] { background: var(--ink); color: #fff; }

/* ---------- headings ---------- */

.hero { padding: 60px 0 34px; }

.hero h1 {
  margin: 0 0 10px;
  font-size: 44px;
  line-height: 1.08;
  letter-spacing: -.032em;
  font-weight: 650;
}

.hero p {
  margin: 0;
  font-size: 18px;
  color: var(--ink-soft);
  max-width: 60ch;
}

.section-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 18px;
}

.section-head h2 {
  margin: 0;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -.015em;
}

.section-head .hint {
  font-size: 13px;
  color: var(--ink-faint);
  margin-left: auto;
}

/* ---------- cards ---------- */

.card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/* Tiles are the clickable cards on the homepage. */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 18px;
}

.tile {
  display: flex;
  flex-direction: column;
  padding: 26px;
  min-height: 190px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: transform .18s cubic-bezier(.2, .7, .3, 1),
              box-shadow .18s ease,
              border-color .18s ease;
}

.tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
  border-color: var(--line-strong);
}

.tile h3 {
  margin: 0 0 6px;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.015em;
}

.tile .who {
  font-size: 13px;
  color: var(--ink-faint);
  margin-bottom: 12px;
}

.tile p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14.5px;
}

.tile .foot {
  margin-top: auto;
  padding-top: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--ink-soft);
}

.tile .go {
  margin-left: auto;
  color: var(--ink);
  font-weight: 500;
  transition: transform .18s ease;
}

.tile:hover .go { transform: translateX(3px); }

/* ---------- status ---------- */

.dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ink-faint);
  flex: none;
}

.dot.live { background: var(--live); }
.dot.down { background: var(--down); }
.dot.wait { background: var(--wait); }

/* A running server gets a gentle pulse. It is the one thing on the page that
   moves, which is what makes it readable at a glance from across the room. */
.dot.live { animation: pulse 2.4s ease-in-out infinite; }

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(23, 128, 61, .34); }
  50%      { box-shadow: 0 0 0 5px rgba(23, 128, 61, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .dot.live { animation: none; }
  .tile, .tile .go { transition: none; }
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
  background: var(--bg-hover);
  color: var(--ink-soft);
}

.pill.live { background: var(--live-bg); color: var(--live); }
.pill.down { background: var(--down-bg); color: var(--down); }
.pill.wait { background: var(--wait-bg); color: var(--wait); }

/* ---------- buttons ---------- */

.btn {
  appearance: none;
  border: 1px solid var(--line-strong);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease,
              box-shadow .15s ease, opacity .15s ease;
}

.btn:hover:not(:disabled) {
  background: var(--bg-hover);
  border-color: var(--ink-faint);
}

.btn:active:not(:disabled) { transform: translateY(.5px); }

.btn:disabled { opacity: .38; cursor: default; }

.btn.primary {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.btn.primary:hover:not(:disabled) { background: #000; border-color: #000; }

.btn.danger { color: var(--down); border-color: #f0c9c5; }
.btn.danger:hover:not(:disabled) { background: var(--down-bg); border-color: var(--down); }

.btn.mini { padding: 5px 11px; font-size: 12.5px; }

.btn:focus-visible,
select:focus-visible,
input:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* ---------- form controls ---------- */

select, input[type="number"] {
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 8px 11px;
}

input[type="number"] { width: 72px; }

/* ---------- misc ---------- */

.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }
.mono {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;
  font-variant-ligatures: none;
}

footer {
  padding: 48px 0 56px;
  color: var(--ink-faint);
  font-size: 13px;
}

@media (max-width: 620px) {
  .wrap { padding: 0 18px; }
  .hero { padding: 40px 0 26px; }
  .hero h1 { font-size: 32px; }
  .hero p { font-size: 16px; }
}