/* runv.club docs: black on white, red underlines, a table of contents on the side */
:root { --accent: #d00000; --soft: #555; --rule: #ddd; --code: #f3f3f3; }
html { background: #fff; color: #000; border-top: 6px solid #000; }
body { margin: 0; font: 1.0625rem/1.7 Charter, "Bitstream Charter", "Iowan Old Style", Georgia, serif; }
header, footer, .toc, h1, h2, h3, .lead, .term, .pn, table {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
}
header { max-width: 66rem; margin: 0 auto; padding: 1.25rem 1.25rem 0; font-weight: 800; }
header a { text-decoration: none; color: #000; }
header a::before { content: "$ "; color: var(--accent); }
.wrap { max-width: 66rem; margin: 0 auto; padding: 0 1.25rem; display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 3rem; }
main { max-width: 42rem; padding: 1rem 0 3rem; }
a { color: #000; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: .22em; }
a:hover { background: var(--accent); color: #fff; text-decoration: none; }
h1 { font-size: 1.7rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.25; margin: 1.5rem 0 .5rem; }
h2 { font-size: 1rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; margin: 2.75rem 0 .75rem; padding-bottom: .3rem; border-bottom: 2px solid #000; }
h3 { font-size: 1rem; font-weight: 800; margin: 2rem 0 .5rem; }
.lead { color: var(--soft); margin: 0 0 .25rem; }
.term { font-size: .85rem; color: var(--soft); margin: 0 0 2rem; }
code { background: var(--code); padding: .1em .3em; font-size: .9em; }
pre { background: var(--code); padding: 1rem 1.25rem; border-left: 4px solid var(--accent); overflow-x: auto; line-height: 1.5; font-size: .9rem; }
pre code { background: none; padding: 0; }
img { max-width: 100%; height: auto; display: block; margin: 1.5rem 0; border: 1px solid var(--rule); }
table { border-collapse: collapse; width: 100%; font-size: .85rem; margin: 1rem 0 1.5rem; }
th, td { text-align: left; vertical-align: top; padding: .45rem .6rem; border-bottom: 1px solid var(--rule); }
th { border-bottom: 2px solid #000; }
ul.topics { list-style: none; padding: 0; }
ul.topics li { padding: .45rem 0; border-bottom: 1px solid var(--rule); }
ul.topics span { color: var(--soft); }
.toc { font-size: .85rem; padding-top: 1.5rem; position: sticky; top: 0; align-self: start; max-height: 100vh; overflow-y: auto; }
.toc summary { display: none; }
.toc h2 { font-size: .75rem; margin: 1.25rem 0 .4rem; padding-bottom: .2rem; border-bottom-width: 1px; }
.toc ul { list-style: none; padding: 0; margin: 0; }
.toc li { margin: .15rem 0; }
.toc a { text-decoration: none; }
.toc a[aria-current] { font-weight: 800; }
.toc a[aria-current]::before { content: "> "; color: var(--accent); }
.pn { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3.5rem; padding-top: 1rem; border-top: 2px solid #000; font-size: .85rem; }
footer { max-width: 66rem; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; font-size: .75rem; color: var(--soft); text-transform: uppercase; letter-spacing: .06em; border-top: 1px solid var(--rule); }
@media (max-width: 48rem) {
  .wrap { grid-template-columns: 1fr; gap: 0; }
  .toc { position: static; max-height: none; padding-top: 1rem; border-top: 1px solid var(--rule); order: 2; }
  main { order: 1; }
  .toc summary { display: block; cursor: pointer; text-transform: uppercase; letter-spacing: .06em; font-weight: 800; }
}