/* One palette, named after what each colour is for rather than what it is,
   so that the dark block below only has to say which value each name takes. */
:root {
  color-scheme: light dark;
  --ground: #f6f5f3;
  --panel: #ffffff;
  --edge: #e0ddd8;
  --ink: #23252c;
  --faint: #6c707c;
  --mark: #4c5fd7;
  --mark-ink: #ffffff;
  --taken: #b4324f;
  --put: #2c7a4b;
  --code-ground: #edebe7;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #16181f;
    --panel: #1b1e28;
    --edge: #2b2f3c;
    --ink: #e4e6ec;
    --faint: #9298a8;
    --mark: #8b9cff;
    --mark-ink: #10121a;
    --taken: #f38ba8;
    --put: #a6e3a1;
    --code-ground: #12141b;
  }
}

/* The pictures. Full width for the first, a pair below it, and both drop to
   one column on a narrow screen. `aspect-ratio` on the frame rather than
   height on the image, so nothing jumps as they load. */
.shot {
  margin: 0 0 1.5rem;
  border: 1px solid var(--edge);
  border-radius: 6px;
  overflow: hidden;
  background: var(--code-ground);
}
.shot img { display: block; width: 100%; height: auto; }
.shot figcaption {
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  color: var(--faint);
  border-top: 1px solid var(--edge);
  background: var(--panel);
}
.shot-pair {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 40rem) {
  .shot-pair { grid-template-columns: 1fr; }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-text-size-adjust: 100%;
}
main { max-width: 46rem; margin: 0 auto; padding: 3.5rem 1.25rem 5rem; }

header { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 0.4rem; }
header img { width: 48px; height: 48px; border-radius: 11px; }
h1 { font-size: 1.9rem; margin: 0; letter-spacing: -0.02em; }
.tagline { color: var(--faint); font-size: 1.05rem; margin: 0 0 2.5rem; }

h2 {
  font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--faint); font-weight: 600;
  margin: 2.8rem 0 0.9rem; padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--edge);
}

.download { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.button {
  display: inline-block; background: var(--mark); color: var(--mark-ink);
  text-decoration: none; font-weight: 600;
  padding: 0.75rem 1.4rem; border-radius: 8px;
}
.button:hover { filter: brightness(1.08); }
.about-build { color: var(--faint); font-size: 0.9rem; }
.about-build strong { color: var(--ink); font-weight: 600; }

pre, code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
pre {
  background: var(--code-ground); border: 1px solid var(--edge); border-radius: 8px;
  padding: 0.85rem 1rem; overflow-x: auto; font-size: 0.86rem; line-height: 1.55;
}
p code { background: var(--code-ground); padding: 0.1em 0.35em; border-radius: 4px; font-size: 0.88em; }
a { color: var(--mark); }

.sha { word-break: break-all; font-size: 0.8rem; color: var(--faint); }
.needs { color: var(--faint); font-size: 0.95rem; }
.needs strong { color: var(--ink); }

footer {
  margin-top: 3.5rem; padding-top: 1.2rem; border-top: 1px solid var(--edge);
  color: var(--faint); font-size: 0.9rem;
}

/* The manual's pages, rendered from docs/manual/*.md. The front page's h2 is
   a small uppercase label over a section of a page that is mostly pictures;
   a page of prose wants headings that read as headings. */
.doc header a.home {
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: 1.1rem;
}
.doc article h1 { font-size: 1.9rem; margin: 1.5rem 0 1rem; letter-spacing: -0.02em; }
.doc article h2 {
  font-size: 1.3rem; text-transform: none; letter-spacing: 0; color: var(--ink);
  margin: 2.4rem 0 0.8rem; padding-bottom: 0.4rem;
}
.doc article h3 { font-size: 1.05rem; margin: 1.8rem 0 0.6rem; }
.doc article li code, .doc article td code { background: var(--code-ground); padding: 0.1em 0.35em; border-radius: 4px; font-size: 0.88em; }
.doc article table { border-collapse: collapse; width: 100%; font-size: 0.92rem; margin: 1rem 0; }
.doc article th, .doc article td {
  text-align: left; vertical-align: top; padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--edge);
}
.doc article th { color: var(--faint); font-weight: 600; }
.doc article img { max-width: 100%; height: auto; }
.doc article blockquote { margin: 1rem 0; padding-left: 1rem; border-left: 3px solid var(--edge); color: var(--faint); }

/* The list of pages: on the front page as a section, on each page as the
   way to the others. The page being read is named rather than linked. */
.manual ul, ul.manual { list-style: none; padding: 0; margin: 0; }
nav.manual ul { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; font-size: 0.92rem; margin: 1.5rem 0 0; }
nav.manual .blurb { display: none; }
nav.manual .here { color: var(--ink); font-weight: 600; }
ul.manual li { margin: 0.35rem 0; }
ul.manual .blurb { color: var(--faint); }
ul.manual .blurb::before { content: " — "; }