/* the paper's contents: rendered markdown */

.prose { padding: 16px 24px 26px; font-size: 13.5px; line-height: 1.6; }
.prose > :first-child { margin-top: 0; }
.prose p, .prose ul, .prose ol, .prose blockquote { max-width: 80ch; margin: 0.6em 0; }
.prose li { margin: 0.2em 0; }
.prose li > p { margin: 0.2em 0; }

.prose h1, .prose h2, .prose h3, .prose h4 { color: var(--heading); line-height: 1.25; scroll-margin-top: calc(var(--head-h) + 14px); }
.prose h2 { font-size: 17px; margin: 1.6em 0 0.5em; padding-bottom: 4px; border-bottom: 1px solid var(--paper-edge); box-shadow: 0 1px 0 var(--paper-hi); }
.prose h3 { font-size: 14.5px; margin: 1.4em 0 0.4em; }
.prose h4 { font-size: 13.5px; margin: 1.2em 0 0.3em; }
/* the heading you just jumped to, so the eye lands on it */
@keyframes flash { 0%, 35% { background: var(--flash); box-shadow: 0 0 0 6px var(--flash); } 100% { background: transparent; box-shadow: 0 0 0 6px transparent; } }
.prose .flash { animation: flash 1.6s ease-out; }

.prose a { color: var(--link); text-decoration: none; border-bottom: 1px dotted var(--link); }
.prose a:hover { background: var(--hover); border-bottom-style: solid; }
.prose hr { margin: 1.6em 0; border: 0; border-top: 1px solid var(--paper-edge); border-bottom: 1px solid var(--paper-hi); }
.prose blockquote { padding: 6px 12px; color: var(--quote-text); background: var(--quote); border-left: 3px solid var(--paper-edge); border-radius: 0 var(--r-box) var(--r-box) 0; }

.prose :not(pre) > code {
  padding: 0 3px; overflow-wrap: anywhere;
  font-family: var(--mono); font-size: 0.88em;
  background: var(--code-bg); border: 1px solid var(--code-edge); border-radius: var(--r-box);
}
.prose a code { border-bottom: 0; }
.prose td code { overflow-wrap: normal; }
.prose td:first-child code { white-space: nowrap; }

/* code blocks: a sunken well, never raised. the colours come from the palette's --code-*,
   which the highlighter writes in (lib/docs.ts) */
.codebox {
  max-width: 100%; margin: 0.8em 0;
  background: var(--well);
  border: 1px solid var(--edge); border-radius: var(--r-box);
  box-shadow: var(--code-well);
}
.codebox pre { margin: 0; padding: 10px 12px; overflow: auto; font-family: var(--mono); font-size: 12.5px; line-height: 1.5; color: var(--code-text); background: transparent !important; }
.codebox pre code { font: inherit; }

/* $$ math, as mathml the browser draws */
/* overflow-y has to be hidden too, or a fraction of a pixel of descent shows a vertical scrollbar */
.prose .math { margin: 0.9em 0; padding: 2px 0; overflow-x: auto; overflow-y: hidden; }
/* a real math font where there is one, so braces under a sum stretch to fit */
.prose math { font-size: 1.1em; font-family: "STIX Two Math", "Latin Modern Math", "Cambria Math", math; }

/* tables: a raised header row, a ruled body */
.tablewrap { overflow-x: auto; margin: 0.8em 0; }
.prose table { min-width: 60%; border-collapse: separate; border-spacing: 0; overflow: hidden; background: var(--sheet); border: 1px solid var(--edge); border-radius: var(--r-box); }
.prose th, .prose td { padding: 5px 10px; text-align: left; vertical-align: top; }
.prose th {
  font-size: 12px; white-space: nowrap;
  background: var(--grad-control);
  border-bottom: 1px solid var(--edge); border-right: 1px solid var(--etch);
  box-shadow: var(--raised-soft);
}
.prose th:last-child { border-right: 0; }
.prose td { border-bottom: 1px solid var(--paper-rule); }
.prose tr:last-child td { border-bottom: 0; }
.prose tbody tr:nth-child(even) td { background: var(--paper-alt); }

/* the 404 page */
.lost { display: flex; gap: 16px; align-items: flex-start; }
.lost h2 { margin-top: 4px; }
.lost .haiku p { margin: 0 0 12px; padding-left: 14px; font-style: italic; color: var(--text-2); }

@media (max-width: 760px) {
  .prose { padding: 12px 14px 20px; }
}