/* One stylesheet for the whole site. Typography is the design. */

:root {
  --text: #111;
  --muted: #555;
  --rule: #ccc;
  --bg: #fff;
  --box-bg: #fafafa;
  --code-bg: #f4f4f4;
  --link: #0645ad;
  --link-visited: #0b0080;
  --measure: 46rem; /* about 85–90 characters per line in the default serif */
}

html {
  -webkit-text-size-adjust: 100%;
  overflow-wrap: break-word;
}

body {
  margin: 0;
  border-top: 4px solid var(--accent, var(--rule)); /* the current topic's colour */
  background: var(--bg);
  color: var(--text);
  font-family: serif;
  font-size: 1.0625rem;
  line-height: 1.45;
}

/* Header, main column, and footer share the same narrow centred measure. */
.site-header,
main,
.site-footer {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 1rem;
}

.site-header {
  padding-top: 0.6rem;
  padding-bottom: 0.4rem;
  margin-bottom: 0.9rem;
  border-bottom: 1px solid var(--rule);
}
.site-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0 1rem;
}
.site-title,
.site-title:visited {
  color: var(--text);
  font-weight: bold;
  text-decoration: none;
}
.site-bar nav a + a,
.topics a + a {
  margin-left: 0.7rem;
}

/* Every category of every subject, one click from any page. */
.topics {
  margin-top: 0.2rem;
  font-size: 0.9rem;
}
.topics .subject {
  color: var(--muted);
  margin-right: 0.6rem;
}
.topics a[aria-current] {
  color: var(--text);
  font-weight: bold;
  text-decoration: none;
}

/* Each category has a colour, shown as a small dot beside its name. */
.dot {
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  margin-right: 0.3em;
  border-radius: 50%;
  vertical-align: 0.05em;
}
h1 .dot {
  width: 0.4em;
  height: 0.4em;
  vertical-align: 0.15em;
}

.site-footer {
  margin-top: 2.5rem;
  padding-top: 0.5rem;
  padding-bottom: 1.5rem;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.85rem;
}
.site-footer p {
  margin: 0;
}

/* Links: traditional blue and underlined. */
a {
  color: var(--link);
}
a:visited {
  color: var(--link-visited);
}
a:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 1px;
}

/* Headings */
h1,
h2,
h3 {
  font-weight: normal;
  line-height: 1.2;
}
h1 {
  font-size: 1.7rem;
  margin: 0.2rem 0;
}
h2 {
  font-size: 1.3rem;
  margin: 1.4rem 0 0.4rem;
  padding-bottom: 0.1rem;
  border-bottom: 1px solid var(--rule);
}
h3 {
  font-size: 1.05rem;
  font-weight: bold;
  margin: 1rem 0 0.25rem;
}

p,
ul,
ol,
dl,
table,
figure {
  margin: 0 0 0.7rem;
}
ul,
ol {
  padding-left: 1.5rem;
}
li {
  margin-bottom: 0.15rem;
}

/* Secondary information */
.breadcrumbs,
.status,
.prereqs,
.note,
.cat-summary {
  color: var(--muted);
  font-size: 0.9rem;
}
.breadcrumbs {
  margin-bottom: 0.1rem;
}
.summary,
.lead {
  font-size: 1.05rem;
  font-style: italic;
  margin-bottom: 0.4rem;
}
.status,
.prereqs {
  margin-bottom: 0.3rem;
}

/* Table of contents of an article: a compact box, not a sidebar. */
.toc {
  display: inline-block;
  margin: 0.5rem 0 0.4rem;
  padding: 0.35rem 1rem 0.3rem 0.7rem;
  border: 1px solid var(--rule);
  background: var(--box-bg);
  font-size: 0.9rem;
}
.toc h2 {
  font-size: 0.9rem;
  font-weight: bold;
  margin: 0 0 0.15rem;
  padding: 0;
  border: 0;
}
.toc ol {
  margin: 0;
  padding-left: 1.3rem;
}
.toc li {
  margin: 0;
}

/* Lists of articles, set in columns like the contents page of a book. */
.contents {
  columns: 2 17rem;
  column-gap: 2rem;
}
.contents section {
  break-inside: avoid;
  margin-bottom: 0.7rem;
}
.contents h3 {
  margin: 0 0 0.1rem;
}
.contents ol,
.category-nav ol {
  margin: 0;
  padding-left: 1.5rem;
}
.contents li,
.category-nav li {
  margin: 0;
}
.cat-summary {
  margin: 0 0 0.15rem;
}

.az {
  columns: 3 13rem;
  column-gap: 2rem;
}
.az section {
  break-inside: avoid;
}
.az h2 {
  margin: 0.5rem 0 0.15rem;
}
.az ul {
  list-style: none;
  padding: 0;
}

/* The article's place in its category, at the end of every article. */
.category-nav {
  margin-top: 1.8rem;
  padding: 0.5rem 0.8rem 0.6rem;
  border: 1px solid var(--rule);
  border-left: 4px solid var(--rule); /* coloured per category in the template */
  background: var(--box-bg);
  font-size: 0.9rem;
}
.category-nav h2 {
  font-size: 0.95rem;
  font-weight: bold;
  margin: 0 0 0.2rem;
  padding: 0;
  border: 0;
}
.category-nav ol {
  columns: 2 13rem;
  column-gap: 1.5rem;
}
.category-nav [aria-current] {
  font-weight: bold;
}

/* Mathematics. Wide display equations scroll inside their own box. */
.katex {
  font-size: 1.05em;
}
.nowrap,
td .katex,
th .katex {
  white-space: nowrap;
}
.katex-display {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.1rem 0;
  margin: 0.6rem 0;
}

/* Code */
code,
pre {
  font-family: monospace;
  font-size: 0.9em;
}
code {
  background: var(--code-bg);
  padding: 0 0.2em;
}
pre {
  overflow-x: auto;
  background: var(--code-bg);
  padding: 0.5rem 0.8rem;
  line-height: 1.35;
}
pre code {
  padding: 0;
}

/* Figures */
figure {
  margin: 0.9rem 0;
  text-align: center;
}
figure img {
  width: 100%;
  max-width: 38rem; /* figures stay at a comfortable size in the wider column */
  height: auto;
}
figcaption {
  max-width: 38rem;
  margin: 0.2rem auto 0;
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.35;
  text-align: left;
}

/* Tables: thin rules only. A wide table scrolls by itself, never the page. */
table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 0.95rem;
}
th,
td {
  padding: 0.2rem 0.6rem;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}
th {
  border-bottom: 1px solid var(--text);
}

blockquote {
  margin: 0.7rem 0;
  padding-left: 0.8rem;
  border-left: 3px solid var(--rule);
}

@media print {
  .site-header nav,
  .topics,
  .site-footer,
  .category-nav,
  .toc {
    display: none;
  }
  .site-header {
    border: 0;
  }
  body {
    font-size: 11pt;
  }
  a,
  a:visited {
    color: #000;
  }
  article a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
  }
  h2,
  h3 {
    break-after: avoid;
  }
  figure,
  .katex-display {
    break-inside: avoid;
  }
}