/* One stylesheet, three static pages, no framework and no build step.
   Narrow measure on purpose: legal text at full window width is unreadable. */

:root {
  color-scheme: light dark;
  --bg: #fdfdfc;
  --fg: #1a1a19;
  --muted: #6f6f6b;
  --rule: #e3e3df;
  --code-bg: #f1f1ee;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121212;
    --fg: #e9e9e6;
    --muted: #8d8d88;
    --rule: #2b2b2a;
    --code-bg: #1e1e1d;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 24px;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.8 ui-sans-serif, -apple-system, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 640px) {
  body { padding: 96px 24px; font-size: 14px; line-height: 1.75; }
}

main { max-width: 30rem; }

nav, footer { color: var(--muted); font-size: 12px; }
nav {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 40px;
}

footer {
  max-width: 30rem;
  margin-top: 56px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}

h1 { font-size: 1em; font-weight: 500; margin: 0; text-wrap: balance; }
h2 { font-size: 1em; font-weight: 500; margin: 40px 0 -8px; }

p { margin: 16px 0; text-wrap: pretty; }
li { text-wrap: pretty; margin: 8px 0; }
ul { padding-left: 20px; margin: 16px 0; }

.dateline { color: var(--muted); font-size: 12px; margin: 4px 0 40px; }

a { color: inherit; text-decoration-color: var(--muted); text-underline-offset: 2px; }
a:hover { text-decoration-color: currentColor; }
nav a, footer a { text-decoration: none; }
nav a:hover, footer a:hover { text-decoration: underline; }

code {
  background: var(--code-bg);
  padding: 1px 4px;
  font: 0.9em ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Slack scopes. A two-column table needs horizontal scroll at this measure. */
.scopes { list-style: none; padding: 0; }
.scopes li { margin: 14px 0; }
.scopes span { display: block; color: var(--muted); }

.note { color: var(--muted); font-size: 12px; line-height: 1.7; }

/* The hand-off URL on /callback. Long, and must not blow out the measure. */
.handoff { word-break: break-all; }