/* One stylesheet, no framework, no web font, no request to anywhere.
   The accent is the app icon's own gradient, taken from bundle/make-icon.swift in the product's
   repository rather than invented here. */

:root {
  --ink: #16181d;
  --ink-soft: #5b6270;
  --paper: #ffffff;
  --paper-soft: #f5f6f8;
  --rule: #e3e6ea;
  --link: #2058c8;
  --accent-a: #2e6be6;
  --accent-b: #0e9ab8;
  --warn-ink: #7a4a05;
  --warn-bg: #fff8e8;
  --warn-rule: #f0dcb4;
  --text: 40rem;
  --wide: 62rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e7eaf0;
    --ink-soft: #99a1b0;
    --paper: #101216;
    --paper-soft: #171a20;
    --rule: #262a32;
    --link: #7aa5ff;
    --warn-ink: #f0cd8e;
    --warn-bg: #241d10;
    --warn-rule: #453a22;
  }
}

* { box-sizing: border-box; }

/* A net rather than a fix: nothing here is known to overflow, and the widths below are all maxima.
   But a narrow screen could not be measured — headless Chrome clamps its viewport to 500 points and
   ignores the viewport meta — so the three kinds of element that classically push a page wider than
   the glass are told outright that they may not. */
img, pre, table, iframe { max-width: 100%; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  text-rendering: optimizeLegibility;
}

a { color: var(--link); }

.wrap { max-width: var(--wide); margin: 0 auto; padding: 0 1.5rem; }
.col { max-width: var(--text); }

/* A block that is both is a block that would centre itself: `max-width` on the text column plus
   the wrapper's `margin: 0 auto` puts a 40rem column in the middle of a 62rem box, while a `.col`
   nested inside a `.wrap` sits against its left edge. The page used both forms, and the left margin
   jumped from section to section. Here the outer box keeps its width and each child is what the
   text column limits, so the two spellings mean the same thing. */
.wrap.col { max-width: var(--wide); }
.wrap.col > * { max-width: var(--text); }

/* Header ------------------------------------------------------------------ */

header.site { border-bottom: 1px solid var(--rule); }
header.site .wrap { display: flex; align-items: center; gap: .7rem; min-height: 4rem; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); font-weight: 640; }
header.site nav { margin-left: auto; display: flex; gap: 1.3rem; font-size: .95rem; flex-wrap: wrap; }
header.site nav a { color: var(--ink-soft); text-decoration: none; }
header.site nav a:hover { color: var(--ink); }

/* Hero -------------------------------------------------------------------- */

/* `padding-block`, never the `padding` shorthand, on anything that also carries `.wrap`.
   Both are a single class, so the later rule wins outright, and a shorthand with a `0` in it takes
   `.wrap`'s side padding away without a word. It happened twice — the hero sat 24 points left of
   every section below it, and the changelog ended up flush against the glass — and both times the
   only thing that showed it was a picture of the page. The longhand cannot make that mistake:
   it does not name the inline axis at all. */
.hero { padding-block: 4.5rem 2.5rem; }
.hero h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.1;
  letter-spacing: -.025em;
  font-weight: 680;
  margin: 0 0 1.25rem;
  max-width: 22ch;
}
.hero h1 { text-wrap: balance; }
/* No chip at this size: the border and the fill that make `code` readable in a paragraph become a
   box with a word in it at three rem. The monospace face is enough to say what it is. */
.hero h1 code { font-size: .8em; background: none; border: 0; padding: 0; }
.rule {
  height: 3px; width: 4.5rem; border-radius: 2px; margin: 0 0 1.75rem;
  background: linear-gradient(90deg, var(--accent-a), var(--accent-b));
}
.lede { font-size: 1.2rem; color: var(--ink-soft); margin: 0 0 2rem; max-width: 48ch; text-wrap: pretty; }

.cta { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.btn {
  display: inline-block; text-decoration: none; color: #fff;
  background: linear-gradient(135deg, var(--accent-a), var(--accent-b));
  padding: .75rem 1.5rem; border-radius: 9px; font-weight: 600;
}
.cta .meta { color: var(--ink-soft); font-size: .95rem; }

.notice {
  margin: 1.25rem 0 0; padding: .85rem 1rem; max-width: var(--text);
  background: var(--warn-bg); border: 1px solid var(--warn-rule);
  border-radius: 9px; color: var(--warn-ink); font-size: .95rem;
}
.notice a { color: inherit; }

/* Sections ---------------------------------------------------------------- */

section { padding: 3.25rem 0; border-top: 1px solid var(--rule); }
h2 { font-size: 1.5rem; letter-spacing: -.02em; font-weight: 640; margin: 0 0 .9rem; }
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

/* Screenshots ------------------------------------------------------------- */

figure.shot { margin: 1.75rem 0 0; }
figure.shot img {
  display: block; width: 100%; height: auto;
  border-radius: 10px; border: 1px solid var(--rule);
}
figure.shot figcaption { color: var(--ink-soft); font-size: .9rem; margin-top: .6rem; }
/* The panel is a small window; blown up to the full column it looks like a poster of itself. */
/* 24rem is 384 points, and the panel is 380 wide. Any more and a picture at twice its size is
   being shown at more than its size, which throws the sharpness away for nothing. */
figure.shot.narrow { max-width: 24rem; }

/* Code -------------------------------------------------------------------- */

pre {
  background: var(--paper-soft); border: 1px solid var(--rule);
  border-radius: 9px; padding: 1rem 1.15rem; overflow-x: auto;
  font: 13.5px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
  margin: 0 0 1rem;
}
pre code { font: inherit; background: none; border: 0; padding: 0; white-space: inherit; }
code {
  font: .92em/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--paper-soft); border: 1px solid var(--rule);
  padding: .12em .35em; border-radius: 4px;
  /* A command is one thing. On a phone `sudo nano` broke across two lines and became two chips,
     which reads as two commands. Every inline span here is short enough that refusing to break it
     cannot push the page wider — the longest is `sudo nano /etc/hosts`. */
  white-space: nowrap;
}

/* Lists ------------------------------------------------------------------- */

ul.plain { list-style: none; padding: 0; margin: 0; }
ul.plain li { padding: .55rem 0; border-bottom: 1px solid var(--rule); }
ul.plain li:last-child { border-bottom: none; }

/* Prose pages, and the changelog ------------------------------------------ */

.page { padding-block: 3.5rem 1rem; }
.page h1 { font-size: clamp(1.9rem, 4vw, 2.5rem); letter-spacing: -.025em; font-weight: 680; margin: 0 0 1rem; }
.page .lede { font-size: 1.15rem; }

/* The class lands on the heading itself: kramdown attaches it to the element it follows, and a
   heading is what a version is. So the rule is written for a heading rather than for a wrapper. */
.page h2.release {
  margin: 2.6rem 0 .7rem;
  padding-top: 1.7rem;
  border-top: 1px solid var(--rule);
  font-size: 1.3rem;
}
.page h2.release:first-of-type { border-top: none; padding-top: 0; margin-top: 2rem; }
.page ul { padding-left: 1.15rem; margin: 0 0 1rem; }
.page li { margin: .4rem 0; }

/* Footer ------------------------------------------------------------------ */

footer.site {
  border-top: 1px solid var(--rule); padding: 2.5rem 0 4rem;
  color: var(--ink-soft); font-size: .95rem;
}
footer.site nav { display: flex; gap: 1.4rem; flex-wrap: wrap; margin-bottom: .9rem; }

.dim { color: var(--ink-soft); }