/* Charcoal, cream and orange, taken from the launcher icon so the page and the
   app read as the same product. Single stylesheet, no inline styles, so the CSP
   in nginx.conf can stay strict without 'unsafe-inline'. */

:root {
  --bg: #16151a;
  --surface: #1e1d24;
  --text: #ece6dc;
  --muted: #a49c92;
  --accent: #ff7a2f;
  --rule: #2f2d36;
}

/* The page commits to dark. A light variant would need the icon artwork to work
   on cream too, and it does not. */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

main {
  max-width: 44rem;
  margin: 0 auto;
  padding: 3rem 1.25rem 1rem;
}

h1 {
  font-size: 2.25rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 1.5rem;
}

h2 {
  font-size: 1.3rem;
  margin: 2.75rem 0 0.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  letter-spacing: -0.01em;
}

h1 + p strong, h2 + p strong { color: var(--text); }

p, li { color: var(--text); }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

strong { color: #fff; }

ul, ol { padding-left: 1.25rem; }
li { margin: 0.35rem 0; }

blockquote {
  margin: 1.5rem 0;
  padding: 0.75rem 1.15rem;
  background: var(--surface);
  border-left: 3px solid var(--accent);
  border-radius: 0 4px 4px 0;
}
blockquote p { margin: 0.4rem 0; }

code {
  background: var(--surface);
  padding: 0.12em 0.4em;
  border-radius: 3px;
  font-size: 0.88em;
}

hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5rem 0; }

table { border-collapse: collapse; width: 100%; margin: 1.25rem 0; display: block; overflow-x: auto; }
th, td { text-align: left; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--rule); }
th { color: var(--muted); font-weight: 600; font-size: 0.9rem; }

footer {
  max-width: 44rem;
  margin: 3rem auto 0;
  padding: 1.25rem;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.9rem;
}
footer a { color: var(--muted); }
footer a:hover { color: var(--accent); }

@media (max-width: 34rem) {
  main { padding-top: 2rem; }
  h1 { font-size: 1.85rem; }
  body { font-size: 16px; }
}