/* Stylesheet for the index (index.md, under _layouts/index.html), deliberately unrelated to the
   documents' one.

   document.css typesets contracts: a text serif, a 170 mm column, a rendering that holds up in
   print. An index of files is not a contract — it is skimmed on screen, and gains from looking
   like what one already sees in GitHub or VS Code.

   GitHub's colours, light and dark. Nothing is imposed: « color-scheme » carries over to what the
   page does not paint itself — scrollbars, form fields, selection — and « prefers-color-scheme »
   lets the browser setting decide.

   index.md is produced by the repository's build; this stylesheet is not. It is edited by hand. */

:root {
  color-scheme: light dark;

  --bg: #ffffff;
  --text: #1f2328;
  --link: #0969da;
  --rule: #d1d9e0;
  --muted: #59636e;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1117;
    --text: #e6edf3;
    --link: #4493f8;
    --rule: #3d444d;
    --muted: #9198a1;
  }
}

body {
  margin: 0;
  padding: 3rem 1.5rem 4rem;

  background: var(--bg);
  color: var(--text);

  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

main {
  max-width: 56rem;
  margin: 0 auto;
}

h1 {
  margin: 0 0 1.5rem;
  padding-bottom: 0.3em;
  border-bottom: 1px solid var(--rule);
  font-size: 2em;
  font-weight: 600;
}

/* One section per document. */
h3 {
  margin: 2rem 0 0.5rem;
  font-size: 1.25em;
  font-weight: 600;
}

/* One bullet per version: the date, then its languages. Tabular figures so the dates line up from
   one bullet to the next. */
li {
  margin: 0.15em 0;
  font-variant-numeric: tabular-nums;
}

a {
  color: var(--link);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

hr {
  height: 1px;
  margin: 2.5rem 0 1.5rem;
  border: 0;
  background: var(--rule);
}

/* The copyright line: the last paragraph, after the last rule. Same targeting as in
   document.css, where it is the legal statements block that is set quietly. */
main > hr:last-of-type ~ p:last-child {
  color: var(--muted);
  font-size: 0.875em;
}