/* The app's design tokens, so the website and the app look like one thing.
   Kept in step by hand -- there are six values, and a build step to share them
   would cost more than it saves. */
:root {
  --surface-base: #ffffff;
  --surface-raised: #f7f8fa;
  --content-primary: #111827;
  --content-secondary: #4b5563;
  --content-muted: #6b7280;
  --action-primary: #1d4ed8;
  --border-subtle: #e2e8f0;
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface-base: #0b0f16;
    --surface-raised: #151b24;
    --content-primary: #f3f4f6;
    --content-secondary: #bec5d0;
    --content-muted: #9ca3af;
    --action-primary: #2563eb;
    --border-subtle: #27303d;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 2rem 1.25rem 4rem;
  background: var(--surface-base);
  color: var(--content-primary);
  /* The system font stack: nothing is fetched, so nothing about the reader is
     disclosed to a third party in order to draw text. */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.65;
}

main { max-width: 42rem; margin: 0 auto; }

h1 { font-size: 2rem; line-height: 1.25; margin: 0 0 0.5rem; }
h2 { font-size: 1.25rem; margin: 2.5rem 0 0.5rem; }
h3 { font-size: 1.05rem; margin: 1.75rem 0 0.5rem; }
p, li { color: var(--content-secondary); }
ul { padding-left: 1.25rem; }
li { margin-bottom: 0.4rem; }

a { color: var(--action-primary); }
a:focus-visible { outline: 2px solid var(--action-primary); outline-offset: 2px; }

.wordmark { font-size: 2.5rem; font-weight: 800; letter-spacing: -0.02em; margin: 0; }
.tagline { font-size: 1.15rem; color: var(--content-secondary); margin-top: 0.5rem; }
.state { color: var(--content-muted); }

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 0.95rem;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: 0.95rem;
}
th, td {
  text-align: left;
  vertical-align: top;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--content-secondary);
}
th { color: var(--content-primary); font-weight: 600; }

/* A table cannot reflow below a certain width, so it scrolls inside itself
   rather than pushing the whole page sideways. */
.table-scroll { overflow-x: auto; }

.card-list { list-style: none; padding: 0; }
.card-list li { margin-bottom: 0.75rem; }

footer {
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-subtle);
  color: var(--content-muted);
  font-size: 0.9rem;
}