/*
 * notes.css - the /notes pages: markdown rendered to raw tags, styled here
 * once, with no classes. Every value is a Stellar token (stellar.css). Light
 * and dark come from stellar's :root.dark overrides; the page sets `dark` on
 * <html> to match the system.
 */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  color-scheme: light;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
html.dark {
  color-scheme: dark;
}

body {
  margin: 0;
  padding: var(--size-3) var(--size-5) var(--size-9);
  font-family: var(--font-sans);
  font-size: var(--font-size-0);
  line-height: var(--font-line-height-1);
  background: var(--neutral-1);
  color: var(--neutral-1-on);
  -webkit-text-size-adjust: 100%;
}

/* The reading column. */
main {
  max-width: 81ch;
}

/* ---- contents ---------------------------------------------------- */

/* The nav is the contents: a collapsed <details> at the top when narrow, a
   sticky sidebar when wide (see the end). The current page is marked with
   aria-current. */
nav {
  font-size: var(--font-size--1);
  line-height: var(--font-line-height--1);
  max-width: 81ch;
}
nav summary {
  cursor: pointer;
  padding: var(--size--2) 0;
  color: var(--neutral-1-dim);
  border-bottom: var(--border-width-1) solid var(--neutral-4);
}
nav summary:hover {
  color: var(--neutral-1-on);
}
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* The page being read gets one rule beside its sections; deeper entries (a
   section's subsections, its code) only indent. */
nav ul ul {
  padding-left: var(--size--1);
}
nav [aria-current] + ul {
  margin-left: var(--size--2);
  padding-left: var(--size--2);
  border-left: var(--border-width-1) solid var(--neutral-4);
}
nav [aria-current] + ul ul {
  padding-left: var(--size--1);
}
nav code {
  font-size: inherit;
}
/* The path to the notes, then a label above each list. */
nav p {
  margin: 0;
  color: var(--neutral-1-dim);
}
nav * + p {
  margin-top: var(--size-0);
}
nav li > a {
  display: block;
}
nav a {
  border-radius: var(--border-radius-1);
  color: var(--neutral-1-on);
  text-decoration: none;
}
nav [aria-current] + ul a {
  color: var(--neutral-1-dim);
}
nav a:hover {
  background: var(--neutral-3);
  color: var(--neutral-1-on);
}
nav a[aria-current="page"] {
  color: var(--neutral-1-on);
  font-weight: var(--font-weight-semi-bold);
}

/* Moving from one note to another, the page crossfades and the contents
   doesn't jump: the entry being left folds its sections away as the one
   arrived at opens, and the entries between slide to their new places. Each
   entry is named in the template (view-transition-name), so the browser
   pairs it across the two pages. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}
/* The list labels slide with the entries above them. A thread's label is
   named in the template, like the entries. */
nav #releases {
  view-transition-name: releases;
}
/* An entry's before and after keep their own height, pinned to the top, so
   clipping them to the entry's changing height reveals or hides its
   sections instead of stretching them. */
::view-transition-group(*) {
  overflow: clip;
  animation-duration: var(--anim-duration-fast);
  animation-timing-function: var(--anim-ease-standard);
}

/* ---- headings ---------------------------------------------------- */

/* Stellar's line-height tokens are absolute rems tuned to body sizes, so
   none fit display text; 1.1 is the shared display ratio, as on
   understand-stellar. */
h1, h2, h3, h4 {
  line-height: 1.1;
  text-wrap: balance;
  color: var(--neutral-1-on);
  scroll-margin-top: var(--size-4);
}

h1 {
  font-size: var(--font-size-6);
  font-weight: var(--font-weight-extra-bold);
  letter-spacing: var(--font-letter-spacing--2);
  margin: 0 0 var(--size-3);
}

h2 {
  font-size: var(--font-size-3);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--font-letter-spacing--1);
  margin: var(--size-6) 0 var(--size-1);
  padding-bottom: var(--size--1);
  border-bottom: var(--border-width-2) solid var(--neutral-4);
}

/* A section heading links to itself, in the heading's own colour. */
h2 > a, h3 > a {
  color: inherit;
  text-decoration: none;
}

/* The section the contents (or a link) just jumped to. */
h2:target {
  color: var(--primary-7);
  border-bottom-color: var(--primary-6);
}
h3:target {
  color: var(--primary-7);
}

h3 {
  font-size: var(--font-size-1);
  font-weight: var(--font-weight-semi-bold);
  margin: var(--size-4) 0 var(--size-0);
}

/* ---- text -------------------------------------------------------- */

p, ul, ol, blockquote, pre, table {
  margin: 0 0 var(--size-2);
}

a {
  color: var(--primary-7);
  text-decoration-thickness: from-font;
}
a:hover {
  color: var(--primary-9);
}

strong {
  font-weight: var(--font-weight-semi-bold);
}

ul, ol {
  padding-left: var(--size-3);
}
li::marker {
  color: var(--neutral-1-dim);
}

blockquote {
  padding: var(--size--1) var(--size-2);
  border-left: var(--border-width-3) solid var(--primary-5);
  background: var(--neutral-2);
  color: var(--neutral-2-on);
}
blockquote > :last-child {
  margin-bottom: 0;
}

hr {
  border: 0;
  border-top: var(--border-width-1) solid var(--neutral-4);
  margin: var(--size-5) 0;
}

/* ---- code -------------------------------------------------------- */

/* Code is set apart by its font alone, in prose, tables and the contents. */
code {
  font-family: var(--font-mono);
  font-size: var(--font-size-0);
}

pre {
  padding: var(--size-1) var(--size-2);
  border: var(--border-width-1) solid var(--neutral-4);
  border-radius: var(--border-radius-2);
  background: var(--neutral-2);
  color: var(--neutral-2-on);
  line-height: var(--font-line-height-0);
  overflow-x: auto;
}
/* A code block sits in a <figure> with a copy <button>, top right, shown
   on hover or focus, and always on touch screens. */
figure {
  position: relative;
  margin: 0 0 var(--size-2);
}
figure > pre {
  margin: 0;
}
figure > button {
  position: absolute;
  top: var(--size--2);
  right: var(--size--2);
  display: grid;
  place-items: center;
  border: none;
  background: var(--neutral-2);
  color: var(--neutral-2-dim);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--anim-duration-fast);
}
figure:hover > button,
figure > button:focus-visible,
figure > button[data-copied] {
  opacity: 1;
}
figure > button:hover {
  color: var(--neutral-2-on);
}
figure > button[data-copied] {
  color: var(--primary-7);
}
/* With no hover the button always shows, so the code starts below it: its
   offset, and its 16px (1rem) icon, plus a gap. */
@media (hover: none) {
  figure > button {
    opacity: 1;
  }
  figure > pre {
    padding-top: calc(2 * var(--size--2) + 1rem);
  }
}

/* A repro's source: open by default, its summary naming the file. */
details {
  margin: 0 0 var(--size-2);
}
details > summary {
  cursor: pointer;
  color: var(--neutral-1-dim);
}
details > summary:hover {
  color: var(--neutral-1-on);
}
details[open] > summary {
  margin-bottom: var(--size--1);
}
details:target > summary {
  color: var(--primary-7);
}

/* ---- tables ------------------------------------------------------ */

/* A wide table scrolls inside itself, not the page. Numbers line up on the
   right; the first column labels the row. */
table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
/* No vertical padding: the size scale starts at about 12px, too tall for a
   row. The tallest line height spaces rows instead. */
th, td {
  padding: 0 var(--size-0);
  line-height: var(--font-line-height-4);
  text-align: right;
  white-space: nowrap;
}
th:first-child, td:first-child {
  text-align: left;
}
/* A column marked left in the markdown holds words, not numbers: they wrap,
   at the body's line height, no narrower than 16ch (a narrow screen scrolls
   the table instead). */
td[style*="left"] {
  min-width: 16ch;
  white-space: normal;
  line-height: var(--font-line-height-1);
}
/* A note whose markdown isn't ours (a copy, verbatim) can't mark its
   columns; tables: words in its frontmatter treats them all as words. */
[data-tables="words"] :is(th, td) {
  min-width: 16ch;
  white-space: normal;
  text-align: left;
  line-height: var(--font-line-height-1);
}
th {
  font-weight: var(--font-weight-semi-bold);
  border-bottom: var(--border-width-2) solid var(--neutral-5);
}
/* Zebra rows carry the eye across; the last row closes the table. */
tbody tr:nth-child(even) {
  background: var(--neutral-3);
}
tbody tr:last-child td {
  border-bottom: var(--border-width-1) solid var(--neutral-4);
}
tbody tr:hover {
  background: var(--neutral-4);
}

@media (min-width: 48rem) {
  body {
    padding: var(--size-6) var(--size-4) var(--size-9);
  }
}

/* Wide: the contents becomes a sticky sidebar, always open, beside the
   reading column. 15rem is the sidebar, as on understand-stellar. */
@media (min-width: 64rem) {
  body {
    display: grid;
    grid-template-columns: 15rem minmax(0, 81ch);
    justify-content: center;
  }
  nav {
    position: sticky;
    top: var(--size-6);
    align-self: start;
    max-height: calc(100vh - 2 * var(--size-6));
    overflow-y: auto;
    margin: 0;
  }
  nav summary {
    display: none;
  }
  main {
    margin: 0;
  }
}