/* Bits of CS theme (ported from the SvelteKit app.css). Pages are rendered
   with the org headings shifted down one level: * is h2, ** is h3. */

/* SITE BAR AND CHAPTER CARDS: compact and square, like rkulskis.github.io */
.wdo-bar {
	/* Line the bar's contents up with the 1080px content column. */
	padding: 6px max(8px, calc((100% - 1080px) / 2));
}
.wdo-bar a {
	gap: .4em;
	font-size: 1.3em;
	color: black;
}
.wdo-cards {
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	margin: 1em 0;
}
.wdo-card {
	border: 1px solid #ddd;
	border-radius: 0;
	box-shadow: none;
}
.wdo-card:hover {
	border-color: #1a1a1a;
}
.wdo-card-img {
	width: 100%;
	aspect-ratio: 3 / 2;
	padding: .5em;
	box-sizing: border-box;
	overflow: hidden;
}
.wdo-card-img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.wdo-card-label {
	padding: .4em;
	font-size: 1em;
}

/* FOOTNOTES */
.footnote-ref {
	vertical-align: baseline;
	line-height: 1.1;
	font-size: 80%;
}
.footnote-back {
	font-size: 80%;
}
/* MATH */
/* katex.min.css loads after this file; beat its .katex { font-size: 1.21em }. */
#content .katex {
	font-size: 1em;
}
/* KaTeX renders every formula twice: a hidden MathML copy for screen readers,
   then the visual one. Only katex.min.css hides that MathML, so whenever the
   CDN file is slow or blocked every formula reads twice on the page
   ("Cartesian productCartesian product"). Own the rule here instead. */
.katex-mathml {
	position: absolute;
	clip: rect(1px, 1px, 1px, 1px);
	width: 1px;
	height: 1px;
	overflow: hidden;
	padding: 0;
	border: 0;
}
.math.inline {
	font-family: "Computer Modern Serif", serif;
}
/* COLORS */
.df {
	color: #3e70bb;
}
/* FIGURES: a figure gets exactly the same column as the body text. */
figure {
	max-width: 100%;
}
p img,
figure img {
	display: flex;
	margin: 0 auto;
	max-height: 400px;
	/* min-width would push past a phone screen; cap it at the column. */
	min-width: min(20em, 100%);
}
figure p {
	display: flex;
	justify-content: center;
}
figure p span.katex,
figure p span.katex-display {
	margin-bottom: -0.5em;
}
figcaption {
	display: table;
	margin: 20px auto 0;
	font-style: italic;
	text-align: left;
	/* display:table shrink-to-fits, so one long inline formula can push the
	   caption past the column; cap it and let that rare case scroll. */
	max-width: 100%;
	overflow-x: auto;
}
/* NOTHING SCROLLS SIDEWAYS. A handful of derivations (figure 11 is a
   three-column array) are simply wider than a phone; those scroll inside their
   own box at full size rather than shrinking to unreadable. min-width lets the
   box shrink inside figure p's flex row, which otherwise refuses to go
   narrower than its content. */
.katex-display {
	display: block;
	max-width: 100%;
	min-width: 0;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 2px 0;
}
figure p span.math.display {
	max-width: 100%;
	min-width: 0;
}
html,
body {
	max-width: 100%;
	overflow-x: hidden;
}


/* SECTION NUMBERS */
/* Increment on the headings themselves: a counter changed in ::before is only
   visible inside that heading, so subsections would read 0.1, 0.2, ... */
h2 {
	counter-increment: section-counter;
	counter-reset: subsection-counter;
}
h3 {
	counter-increment: subsection-counter;
}
h2::before {
	content: counter(section-counter) "    ";
	font-weight: bold;
	font-style: normal;
	color: #333;
}
h3::before {
	content: counter(section-counter) "." counter(subsection-counter) "    ";
	font-weight: bold;
	font-style: normal;
	color: #333;
}
html {
	color: #1a1a1a;
}
h1,
h2 {
	font-size: 2em;
}
h3 {
	font-size: 1.5em;
}
h1.title {
	font-size: 1.5em;
	margin: .5em 0 .2em;
}
.title + p {
	margin: 0;
}
#content {
	padding: 0 8px 2em;
}
body {
	margin: 0;
	counter-reset: section-counter subsection-counter;
	font-family: "Computer Modern Serif", serif;
	text-align: left;
	overflow-wrap: break-word;
	text-rendering: optimizeLegibility;
	font-kerning: normal;
	font-size: 20px;
}
p {
	margin: 1em 0;
}
a {
	color: #1a1a1a;
}
a:visited {
	color: #1a1a1a;
}
img {
	max-width: 100%;
}
h6 {
	font-size: 1em;
	font-style: italic;
	font-weight: normal;
}
ol, ul {
	padding-left: 1.7em;
	margin-top: 1em;
}
li > ol, li > ul {
	margin-top: 0;
}
blockquote {
	margin: 1em 0 1em 1.7em;
	padding-left: 1em;
	border-left: 2px solid #e6e6e6;
	color: #606060;
}
code {
	font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
	font-size: 85%;
	margin: 0;
	hyphens: manual;
	white-space: pre-wrap;
}
pre {
	margin: 1em 0;
	overflow: auto;
}
pre code {
	padding: 0;
	overflow: visible;
	overflow-wrap: normal;
}
hr {
	background-color: #1a1a1a;
	border: none;
	height: 1px;
	margin: 1em 0;
}
/* TABLES */
table {
	display: block;
	width: fit-content;
	max-width: 100%;
	margin: auto;
	overflow-x: auto;
	border-collapse: collapse;
}
table caption {
	margin-bottom: 0.75em;
}
tbody {
	margin-top: 0.5em;
	border-top: 1px solid #1a1a1a;
	border-bottom: 1px solid #1a1a1a;
}
th {
	border-top: 1px solid #1a1a1a;
	padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
	padding: 0.125em 0.5em 0.25em 0.5em;
}

/* MOBILE -- must stay last: these override the desktop rules above, which
   have the same specificity and would otherwise win on source order. */
@media (max-width: 700px) {
	body {
		font-size: 16px;
	}
	#content {
		padding: 0 8px 1.5em;
	}
	.wdo-bar a {
		font-size: 1.1em;
	}
	.wdo-cards {
		grid-template-columns: repeat(2, 1fr);
		gap: .6rem;
	}
	.wdo-card-label {
		padding: .4em .3em;
		font-size: .85em;
	}
}

/* PRINT: keep a figure whole. Without this a figure splits across the page
   break, or the caption lands on the page after its figure. */
@media print {
	figure,
	figure p,
	figcaption {
		break-inside: avoid;
		page-break-inside: avoid;
	}
	figcaption {
		break-before: avoid;
		page-break-before: avoid;
	}
	/* On screen these scroll sideways; on paper a scroll box just hides
	   whatever it clips, so let the content print in full. */
	html,
	body,
	figcaption,
	table,
	.katex-display {
		overflow: visible;
	}
	/* A heading stranded at the foot of a page is the same problem. */
	h2,
	h3 {
		break-after: avoid;
		page-break-after: avoid;
	}
}