/* hosts-cli documentation site. One hand-written stylesheet, no external
   assets, no fonts loaded from third parties, no trackers. Light by default,
   with a dark variant for readers whose system asks for one. */

:root {
  --bg: #ffffff;
  --fg: #1c1f24;
  --muted: #5a6270;
  --rule: #e4e7ec;
  --accent: #1b5fa8;
  --code-bg: #f6f7f9;
  --button-bg: #ffffff;

  /* The navigation bar is one line tall and says so, so that the offset which
     keeps an anchored heading clear of it is derived from its height rather
     than guessed at and left to drift. */
  --nav-height: 3rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14171c;
    --fg: #e6e8ec;
    --muted: #9aa3b0;
    --rule: #2b3038;
    --accent: #79b1ef;
    --code-bg: #1d2128;
    --button-bg: #232830;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0 auto;
  max-width: 48rem;
  padding: 0 1.25rem 5rem;
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.65;
}

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

img {
  display: block;
  height: auto;
  max-width: 100%;
}

/* --- the top of the page ---------------------------------------------- */

header {
  padding-top: 3rem;
}

h1 {
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  margin: 0;
}

header .tagline {
  color: var(--muted);
  margin: 0.2rem 0 2.5rem;
}

/* The claim the whole program is built around, said once and plainly. */
.hero {
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin: 0 0 0.6rem;
}

.hero em {
  color: var(--accent);
  font-style: italic;
  font-weight: 600;
}

.lede {
  color: var(--muted);
  font-size: 1.05rem;
  margin: 0 0 2rem;
}

/* --- the install block, with its copy button -------------------------- */

.install {
  position: relative;
}

.install pre {
  padding-right: 5.5rem;
}

button.copy {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  background: var(--button-bg);
  border: 1px solid var(--rule);
  border-radius: 5px;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.8rem;
  padding: 0.15rem 0.6rem;
}

button.copy:hover {
  color: var(--fg);
}

/* --- the demonstration ------------------------------------------------ */

figure {
  margin: 2rem 0;
}

figure img {
  border: 1px solid var(--rule);
  border-radius: 6px;
}

figcaption {
  color: var(--muted);
  font-size: 0.85rem;
  margin-top: 0.6rem;
}

/* --- section navigation ----------------------------------------------- */

/* A sticky element only sticks within its containing block, so this has to be
   a child of body: nested in the header it would come unstuck the moment the
   header scrolled past, which is to say immediately. It also stays on one line
   rather than wrapping, because a bar whose height depends on the width of the
   window cannot have a matching scroll offset. */
nav {
  position: sticky;
  top: 0;
  z-index: 10;
  height: var(--nav-height);
  margin: 2.5rem -1.25rem 0;
  padding: 0 1.25rem;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.95rem;
  font-size: 0.88rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

nav a {
  text-decoration: none;
  white-space: nowrap;
}

nav a:hover {
  text-decoration: underline;
}

/* --- body ------------------------------------------------------------- */

h2 {
  border-bottom: 1px solid var(--rule);
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  margin-top: 3rem;
  padding-bottom: 0.3rem;
}

h3 {
  font-size: 1.05rem;
  margin-top: 2rem;
}

/* So that following an anchor does not hide the heading behind the nav. */
h2,
h3 {
  scroll-margin-top: calc(var(--nav-height) + 0.75rem);
}

code,
pre {
  font-family: ui-monospace, "Cascadia Code", Consolas, "Liberation Mono",
    monospace;
  font-size: 0.88em;
}

code {
  background: var(--code-bg);
  border-radius: 3px;
  padding: 0.1em 0.35em;
}

pre {
  background: var(--code-bg);
  border: 1px solid var(--rule);
  border-radius: 6px;
  line-height: 1.55;
  overflow-x: auto;
  padding: 0.9rem 1rem;
}

pre code {
  background: none;
  padding: 0;
}

table {
  border-collapse: collapse;
  display: block;
  margin: 1.2rem 0;
  overflow-x: auto;
  width: 100%;
}

th,
td {
  border-bottom: 1px solid var(--rule);
  padding: 0.5rem 0.9rem 0.5rem 0;
  text-align: left;
  vertical-align: top;
}

th {
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

blockquote {
  border-left: 3px solid var(--accent);
  color: var(--muted);
  margin: 1.4rem 0;
  padding: 0.1rem 0 0.1rem 1rem;
}

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

footer a {
  margin-right: 1rem;
}