main, div.document {
  max-width: 920px; /* To restore our layout */
}

.alectryon-standalone .alectryon-centered, .alectryon-standalone .alectryon-floating {
    max-width: 100vw;
}

/* Ensure the heading creates a positioning context */
.page-container h1,
.page-container h2,
.page-container h3 {
  position: relative;
}

.page-container .self-link {
  color: inherit;
  text-decoration: none;
}

.page-container .self-link::before {
  content: "#";
  position: absolute;
  left: -1.3rem;
  color: var(--accent-color, #89b4fa);
  opacity: 0;
  transition: opacity 0.15s ease-in-out;
  font-weight: normal;
}

.page-container h1:hover .self-link::before,
.page-container h2:hover .self-link::before,
.page-container h3:hover .self-link::before {
  opacity: 0.7;
}

.page-container .self-link:hover::before {
  opacity: 1;
}

dl.docinfo {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 1em;
  row-gap: 0.6em;
  align-items: baseline;
  margin: 1em 0 2em;
  padding-bottom: 0.8em;
  border-bottom: 1px solid #ddd;
}

dl.docinfo dt,
dl.docinfo dd {
  margin: 0;
}

dl.docinfo dd p {
  margin: 0;
}

/* keep dt/dd pairs glued together on wrap */
dl.docinfo dt { font-weight: 600; }

dl.docinfo dd.authors {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3em;
}

dl.docinfo dd.authors p {
  margin: 0;
}

dl.docinfo dd.authors p:not(:last-child)::after {
  content: ",";
}

dl.docinfo dd.files ul.simple {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  list-style: none;
  margin: 0;
  padding: 0;
}
dl.docinfo dd.files ul.simple li { margin: 0; }
dl.docinfo dd.files ul.simple p { margin: 0; }

dl.docinfo dd.files a {
  border-radius: 5px;
  padding: 4px 8px;
  background: #e5e7e8;
  color: #343d44;
  font-size: small;
  text-decoration: none;
}

dl.docinfo dd.files a:hover {
  background: #91c3ea;
  text-decoration: none;
}

/* Disable prettifying */
.alectryon-root,
.alectryon-root pre,
.alectryon-root code,
.alectryon-root .sentence,
.alectryon-root .goal,
.alectryon-root .token,
.docutils.literal {
  font-variant-ligatures: none !important;
  font-feature-settings: "liga" 0, "calt" 0 !important;
}

nav.contents {
  display: block;
  border-width: 1px;
}

nav.contents p {
  margin: 0;
}

nav.contents a {
  padding: 0;
}

nav.contents ul {
  margin: 0;
}

@media (prefers-color-scheme: dark) {
  .docutils.literal {
    background-color: #282828;
  }

  .highlight .kn, code .kn {
    color: #438f01;
  }

  .highlight .nf, .code .nf {
    color: #ff875e;
  }

  .highlight .nv, .code .nv {
    color: #d8640b;
  }

  .highlight .kt, .code .kt {
    color: #a6c4ff;
  }

  .highlight .nb, .code .nb {
    color: #e9baf4;
  }

  .highlight .bp, .code .bp {
    color: #c3a002;
  }

  .alectryon-io .alectryon-sentence:hover .alectryon-output:not(:hover) .alectryon-messages, .alectryon-io .alectryon-sentence.alectryon-target .alectryon-output .alectryon-messages, .alectryon-io .alectryon-sentence:hover .alectryon-output:not(:hover) .alectryon-goals, .alectryon-io .alectryon-sentence.alectryon-target .alectryon-output .alectryon-goals {
    box-shadow: 0 0 3px #cbcbcb;
  }

  .alectryon-io .alectryon-goals, .alectryon-io .alectryon-messages {
    background: #282827;
    border: thin solid #80837e;
  }

  .alectryon-io .alectryon-goal, .alectryon-io .alectryon-message {
    background: #383b35;
  }

  .alectryon-io .goal-hyps > span, .alectryon-io .goal-conclusion {
    background: #1f1f1f;
  }
}

/* ---------------------------------------------------------------------- */
/* Course-wide table of contents (see toc.js): a floating "Contents" button */
/* at the bottom left; the panel pops out above it.                        */

:root {
  --toc-bg: rgba(236, 238, 240, 0.85); /* soft grey, slightly translucent */
  --toc-fg: #24292e;
  --toc-border: #d8dee4;
  --toc-accent: #183691;
  --toc-button-bg: #183691;
  --toc-button-fg: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --toc-bg: rgba(47, 47, 47, 0.95);
    --toc-fg: #f4ebdb;
    --toc-border: #4e4e4e;
    --toc-accent: #b8c9ff;
    --toc-button-bg: #b8c9ff;
    --toc-button-fg: #1f1f1f;
  }
}

/* The whole widget is one <details> box at the bottom left. Closed, it is
   the pill-shaped button; open, the same box grows upwards into the table of
   contents, with the button staying put as its bottom bar. */
.toc {
  --toc-button-height: 2.6rem;
  --toc-button-radius: calc(var(--toc-button-height) / 2); /* pill shape */
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 1000;
  border-radius: var(--toc-button-radius);
  background: var(--toc-button-bg);
  color: var(--toc-button-fg);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  opacity: 0.85;
  font-size: 0.95rem;
  line-height: 1.4;
}

.toc:hover,
.toc[open] {
  opacity: 1;
}

.toc[open] {
  width: 20rem;
  max-width: calc(100vw - 2rem);
  height: calc(100vh - 2rem);
  height: calc(100dvh - 2rem); /* on phones: the area actually visible, not the one behind the URL bar */
  box-sizing: border-box;
  padding-bottom: var(--toc-button-height); /* room for the button */
  background: var(--toc-bg);
  color: var(--toc-fg);
  border: 1px solid var(--toc-border);
}

.toc > summary {
  list-style: none; /* no disclosure triangle on the button */
  height: var(--toc-button-height);
  line-height: var(--toc-button-height);
  padding: 0 1.1em;
  cursor: pointer;
}

.toc > summary::-webkit-details-marker {
  display: none;
}

/* The label is only shown once the box is open. */
.toc:not([open]) .toc-label {
  display: none;
}

/* When open, the button sits at the bottom of the box. */
.toc[open] > summary {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--toc-button-bg);
  color: var(--toc-button-fg);
  border-radius: 0 0 calc(var(--toc-button-radius) - 1px) calc(var(--toc-button-radius) - 1px);
}

.toc-list {
  height: 100%;
  box-sizing: border-box;
  overflow-y: auto;
  overscroll-behavior: contain; /* scrolling the list must not scroll the page behind it */
  padding: 0.5rem 1rem;
}

.toc-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.toc-list ul ul {
  padding-left: 1em;
  font-size: 0.92em;
}

.toc-list li {
  margin: 0.15rem 0;
}

.toc-list a {
  color: var(--toc-fg);
}

.toc-list > ul > li > a {
  font-weight: 600;
}

.toc-list a:hover {
  color: var(--toc-accent);
}

/* Between 1000px and 1680px the open panel would cover the centred page, so
   move the content next to the panel. Above 1680px the centred page already
   clears the panel and nothing moves. */
@media (min-width: 1000px) and (max-width: 1680px) {
  body.toc-open {
    margin-left: 23rem;
  }
}

@media print {
  .toc {
    display: none;
  }
}