/* Continuum Mechanics, an interactive book. Theme tokens first; every colour below and in
   the demos comes from them, so light and dark themes are one switch. */

:root {
	color-scheme: light;
	--bg: #fbfaf7;
	--bg-alt: #f2f0ea;
	--fg: #1d1c1a;
	--muted: #5d5a53;
	--faint: #9a968c;
	--rule: #dcd8ce;
	--accent: #0f6e78;
	--link: #0b5f8a;

	--c1: #c8312b;
	--c2: #23843c;
	--c3: #2a5fbf;
	--cin: #7a3fb8;
	--cout: #4a1f80;
	--ceig: #d06c00;
	--cref: #8c887f;
	--ccur: #0f8a8a;
	--cnor: #c2337a;
	--good: #23843c;
	--bad: #c8312b;

	--defn-bg: #eef4fb;
	--defn-bar: #2a5fbf;
	--thm-bg: #f4effa;
	--thm-bar: #7a3fb8;
	--blue-bg: #e7f1fb;
	--blue-bar: #3d7fd1;
	--warn-bg: #fdf3e2;
	--warn-bar: #d08a00;
	--non-bg: #fbecec;
	--non-bar: #c8312b;
	--ex-bg: #f1f6ef;
	--ex-bar: #4b8f3c;
	--goal-bg: #e9f5f4;

	--serif: "Iowan Old Style", "Charter", "Source Serif 4", "Source Serif Pro", "Georgia", "Cambria", serif;
	--sans: system-ui, -apple-system, "Segoe UI", "Inter", "Cantarell", "Noto Sans", sans-serif;
	--mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", "Menlo", monospace;
}

:root[data-theme="dark"] {
	color-scheme: dark;
	--bg: #16181b;
	--bg-alt: #1e2125;
	--fg: #e6e3dc;
	--muted: #aaa69c;
	--faint: #6f6c66;
	--rule: #33373c;
	--accent: #3fc1c9;
	--link: #7cc4f0;
	--c1: #ff6b61;
	--c2: #5fcf74;
	--c3: #6f9dff;
	--cin: #c08cff;
	--cout: #e0c4ff;
	--ceig: #ffa040;
	--cref: #8d8a84;
	--ccur: #3fd0cf;
	--cnor: #ff74b5;
	--good: #5fcf74;
	--bad: #ff6b61;
	--defn-bg: #1b2433;
	--defn-bar: #6f9dff;
	--thm-bg: #251d33;
	--thm-bar: #c08cff;
	--blue-bg: #18283a;
	--blue-bar: #5f9ff0;
	--warn-bg: #2f2716;
	--warn-bar: #e0a330;
	--non-bg: #331d1d;
	--non-bar: #ff6b61;
	--ex-bg: #1d2a1d;
	--ex-bar: #6fbf5c;
	--goal-bg: #15292a;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;
		--bg: #16181b;
		--bg-alt: #1e2125;
		--fg: #e6e3dc;
		--muted: #aaa69c;
		--faint: #6f6c66;
		--rule: #33373c;
		--accent: #3fc1c9;
		--link: #7cc4f0;
		--c1: #ff6b61;
		--c2: #5fcf74;
		--c3: #6f9dff;
		--cin: #c08cff;
		--cout: #e0c4ff;
		--ceig: #ffa040;
		--cref: #8d8a84;
		--ccur: #3fd0cf;
		--cnor: #ff74b5;
		--good: #5fcf74;
		--bad: #ff6b61;
		--defn-bg: #1b2433;
		--defn-bar: #6f9dff;
		--thm-bg: #251d33;
		--thm-bar: #c08cff;
		--blue-bg: #18283a;
		--blue-bar: #5f9ff0;
		--warn-bg: #2f2716;
		--warn-bar: #e0a330;
		--non-bg: #331d1d;
		--non-bar: #ff6b61;
		--ex-bg: #1d2a1d;
		--ex-bar: #6fbf5c;
		--goal-bg: #15292a;
	}
}

/* ---- page ---------------------------------------------------------------------------- */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--bg);
	color: var(--fg);
	font: 18px/1.6 var(--serif);
	overflow-x: hidden;
}
a { color: var(--link); text-underline-offset: 2px; text-decoration-thickness: 1px; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 8px; top: 8px; z-index: 10; background: var(--bg); padding: 4px 8px; }

.top {
	position: sticky; top: 0; z-index: 5;
	display: flex; align-items: center; gap: 12px;
	padding: 8px 16px;
	background: color-mix(in srgb, var(--bg) 92%, transparent);
	backdrop-filter: blur(6px);
	border-bottom: 1px solid var(--rule);
	font-family: var(--sans);
}
.book-title { color: var(--fg); text-decoration: none; font-weight: 600; font-size: 15px; letter-spacing: 0.01em; }
.theme-toggle {
	margin-left: auto; font-size: 18px; line-height: 1;
	background: none; border: 1px solid var(--rule); border-radius: 6px; color: var(--fg);
	padding: 4px 8px; cursor: pointer;
}
.menu { display: none; }
.menu > summary { list-style: none; cursor: pointer; font-size: 20px; padding: 0 4px; }
.menu > summary::-webkit-details-marker { display: none; }
.menu[open] > .toc {
	position: absolute; left: 0; right: 0; top: 100%;
	max-height: 75vh; overflow: auto;
	background: var(--bg); border-bottom: 1px solid var(--rule); padding: 8px 16px 16px;
}

.layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 0 40px; max-width: 1240px; margin: 0 auto; padding: 0 16px; }
.side { position: sticky; top: 49px; align-self: start; max-height: calc(100vh - 49px); overflow: auto; padding: 20px 0 40px; }
main { min-width: 0; padding: 24px 0 64px; }
.page > * { max-width: 760px; }
.page > figure.demo, .page > .blk > .blk-body > figure.demo { max-width: none; }

@media (max-width: 900px) {
	.layout { display: block; }
	.side { display: none; }
	.menu { display: block; }
	body { font-size: 17px; }
}

.toc { font: 14px/1.45 var(--sans); }
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc-part { margin-bottom: 14px; }
.toc-part-title { display: block; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; }
.toc li a { display: block; color: var(--fg); text-decoration: none; padding: 3px 8px; border-radius: 6px; }
.toc li a:hover { background: var(--bg-alt); }
.toc li.current > a { background: var(--bg-alt); font-weight: 600; }
.toc-num { color: var(--muted); font-variant-numeric: tabular-nums; margin-right: 4px; }
.toc-sub { margin: 2px 0 6px 18px !important; border-left: 1px solid var(--rule); }
.toc-sub a { font-size: 13px; color: var(--muted) !important; padding: 2px 10px !important; }

h1, h2, h3, h4 { font-family: var(--sans); line-height: 1.25; letter-spacing: -0.005em; }
h1 { font-size: 30px; margin: 4px 0 20px; }
h2 { font-size: 22px; margin: 40px 0 12px; padding-top: 8px; border-top: 1px solid var(--rule); }
h3 { font-size: 18px; margin: 28px 0 8px; }
.kicker { font: 13px var(--sans); color: var(--muted); text-transform: uppercase; letter-spacing: 0.07em; margin: 0; }
.page-src { font: 14px var(--sans); color: var(--muted); margin: -12px 0 18px; }
.sec-num { color: var(--muted); font-weight: 500; margin-right: 6px; }
p, li { hyphens: auto; }
ul, ol { padding-left: 1.4em; }
li + li { margin-top: 0.25em; }
code { font-family: var(--mono); font-size: 0.88em; background: var(--bg-alt); padding: 0 4px; border-radius: 4px; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 32px 0; }
table { border-collapse: collapse; margin: 12px 0; font-size: 16px; display: block; overflow-x: auto; }
th, td { border-bottom: 1px solid var(--rule); padding: 6px 10px; text-align: left; vertical-align: top; }
th { font-family: var(--sans); font-size: 14px; color: var(--muted); }

.katex { font-size: 1.07em; }
.katex-display { overflow-x: auto; overflow-y: hidden; padding: 2px 0; margin: 0.8em 0; }
.c1 { color: var(--c1); }
.c2 { color: var(--c2); }
.c3 { color: var(--c3); }
.cin { color: var(--cin); }
.cout { color: var(--cout); }
.ceig { color: var(--ceig); }
.cref { color: var(--cref); }
.ccur { color: var(--ccur); }
.cnor { color: var(--cnor); }

/* ---- blocks ---------------------------------------------------------------------------- */

.blk { margin: 20px 0; padding: 12px 16px; border-left: 4px solid var(--rule); border-radius: 0 8px 8px 0; background: var(--bg-alt); }
.blk-body > :first-child { margin-top: 0; }
.blk-body > :last-child { margin-bottom: 0; }
.blk-head { font-family: var(--sans); font-size: 15px; margin-bottom: 6px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.blk-kind { font-weight: 700; }
.blk-title { font-weight: 600; color: var(--muted); }
.blk-title::before { content: "("; }
.blk-title::after { content: ")"; }
.blk-source { margin-left: auto; font-size: 13px; color: var(--muted); }
.blk-defn { background: var(--defn-bg); border-color: var(--defn-bar); }
.blk-thm, .blk-prop, .blk-cor { background: var(--thm-bg); border-color: var(--thm-bar); }
.blk-recipe, .blk-key, .blk-fact { background: var(--blue-bg); border-color: var(--blue-bar); }
.blk-warning { background: var(--warn-bg); border-color: var(--warn-bar); }
.blk-nonexample { background: var(--non-bg); border-color: var(--non-bar); }
.blk-example { background: var(--ex-bg); border-color: var(--ex-bar); }
.blk-remark { background: transparent; border-color: var(--rule); }
.blk-exercise { background: transparent; border: 1px solid var(--rule); border-left-width: 4px; border-left-color: var(--accent); }
.blk-goal { background: var(--goal-bg); border-color: var(--accent); font-size: 1.04em; }
.blk-goal .blk-kind { color: var(--accent); text-transform: uppercase; letter-spacing: 0.06em; font-size: 13px; }
.blk-fact { font-size: 1.02em; }
.blk-recipe ol { margin: 0; }

.is-essential { box-shadow: inset 0 0 0 1px var(--defn-bar); }
.essential, .nn {
	font: 600 11px/1.6 var(--sans); text-transform: uppercase; letter-spacing: 0.06em;
	padding: 0 7px; border-radius: 99px; white-space: nowrap;
}
.essential { background: var(--defn-bar); color: var(--bg); }
.essential::before { content: "★ "; }
.nn { border: 1px solid var(--faint); color: var(--muted); font-weight: 500; }

details.blk { padding: 0; background: transparent; border: 1px solid var(--rule); border-left-width: 4px; }
details.blk > summary { cursor: pointer; padding: 8px 14px; font: 15px var(--sans); color: var(--muted); display: flex; gap: 10px; align-items: baseline; }
details.blk > summary .blk-kind { font-weight: 600; }
details.blk > .blk-body { padding: 4px 16px 12px; }
details.blk-proof { border-left-color: var(--thm-bar); }
details.blk-solution { border-left-color: var(--ex-bar); }
details.blk[open] > summary { border-bottom: 1px dashed var(--rule); }

.objectives { margin: 16px 0 28px; padding: 14px 18px 10px; border: 1px solid var(--rule); border-radius: 10px; background: var(--bg-alt); }
.objectives-head { border: 0; padding: 0; margin: 0 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); }
.objectives ol { margin: 0 0 4px; }
.objectives em { font-style: normal; font-family: var(--sans); font-size: 0.86em; font-weight: 600; color: var(--accent); }

/* ---- knowls ---------------------------------------------------------------------------- */

a.knowl { text-decoration-style: dotted; cursor: pointer; }
a.knowl.open { background: var(--bg-alt); border-radius: 3px; }
.knowl-box { margin: 10px 0 14px; padding: 2px 14px 6px; border: 1px solid var(--rule); border-radius: 8px; background: var(--bg); box-shadow: 0 2px 10px rgb(0 0 0 / 0.08); }
.knowl-box > .blk:first-child { margin-top: 10px; }
.knowl-ctx { font: 13px var(--sans); text-align: right; margin: 4px 0 6px; }

/* ---- demos ------------------------------------------------------------------------------- */

.demo { margin: 24px 0; }
.demo-mount { border: 1px solid var(--rule); border-radius: 10px; background: var(--bg); padding: 10px; font-family: var(--sans); font-size: 15px; }
.demo figcaption { font-size: 16px; margin-top: 8px; color: var(--fg); max-width: 760px; }
.demo figcaption .blk-kind { font-family: var(--sans); font-size: 14px; margin-right: 4px; }
.demo-loading { color: var(--muted); margin: 8px; }

.dm { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: flex-start; }
.dm-panels { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 340px; min-width: 0; }
.dm-panel { flex: 1 1 260px; min-width: 0; max-width: 460px; position: relative; }
.dm-panel-title { font-size: 13px; color: var(--muted); text-align: center; margin: 0 0 2px; }
.dm-panel svg { width: 100%; height: auto; display: block; user-select: none; -webkit-user-select: none; touch-action: none; border-radius: 6px; background: var(--bg); outline: none; }
.dm-panel svg:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.dm-multi .dm-panels { flex: 1 1 100%; }
.dm-multi .dm-panel { max-width: none; }
.dm-multi .dm-side { flex-direction: row; flex-wrap: wrap; gap: 8px 24px; }
.dm-multi .dm-side > * { flex: 1 1 260px; }
.dm-side { flex: 1 1 250px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.dm-read { line-height: 1.5; }
.dm-read .katex { font-size: 1.04em; }
.dm-read .row { margin: 3px 0; overflow-x: auto; overflow-y: hidden; }
.dm-words { font-size: 15px; }
.dm-words strong { font-weight: 650; }
.dm-good { color: var(--good); font-weight: 650; }
.dm-bad { color: var(--bad); font-weight: 650; }
.dm-note { color: var(--muted); font-size: 14px; }
.dm-snap { color: var(--ceig); font-weight: 600; }
.dm-controls { border-top: 1px solid var(--rule); padding-top: 6px; }
.dm-controls > summary { cursor: pointer; color: var(--muted); font-size: 14px; }
.dm-grid { display: grid; grid-template-columns: auto 1fr 3.4em; gap: 4px 10px; align-items: center; margin-top: 6px; }
.dm-grid output { text-align: right; font-variant-numeric: tabular-nums; }
.dm-grid input[type="range"] { width: 100%; accent-color: var(--accent); }
.dm-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.dm button, .dm select {
	font: 14px var(--sans); color: var(--fg); background: var(--bg-alt);
	border: 1px solid var(--rule); border-radius: 6px; padding: 4px 10px; cursor: pointer;
}
.dm button[aria-pressed="true"] { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.dm-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: 1px; }
.dm-term { padding: 1px 4px; border-radius: 4px; cursor: pointer; }
.dm-term.on { background: var(--bg-alt); }
.dm-success { display: inline-block; background: var(--good); color: var(--bg); font-weight: 700; padding: 1px 10px; border-radius: 99px; }

/* SVG strokes and fills by role; the demos set classes, never colours */
svg text { font: 14px var(--sans); paint-order: stroke; stroke: var(--bg); stroke-width: 3.5px; stroke-linejoin: round; }
.dm svg .grid { stroke: var(--rule); stroke-width: 1; }
.dm svg .axis { stroke: var(--faint); stroke-width: 1.2; }
.s-c1 { stroke: var(--c1); fill: var(--c1); }
.s-c2 { stroke: var(--c2); fill: var(--c2); }
.s-c3 { stroke: var(--c3); fill: var(--c3); }
.s-cin { stroke: var(--cin); fill: var(--cin); }
.s-cout { stroke: var(--cout); fill: var(--cout); }
.s-ceig { stroke: var(--ceig); fill: var(--ceig); }
.s-cref { stroke: var(--cref); fill: var(--cref); }
.s-ccur { stroke: var(--ccur); fill: var(--ccur); }
.s-cnor { stroke: var(--cnor); fill: var(--cnor); }
.s-muted { stroke: var(--muted); fill: var(--muted); }
.s-faint { stroke: var(--faint); fill: var(--faint); }
.s-bad { stroke: var(--bad); fill: var(--bad); }
.s-good { stroke: var(--good); fill: var(--good); }
.s-fg { stroke: var(--fg); fill: var(--fg); }
svg .line { fill: none; }
svg .area { stroke: none; fill-opacity: 0.14; }
svg .area-strong { stroke: none; fill-opacity: 0.28; }
svg .dash { stroke-dasharray: 5 4; }
svg .dot { stroke-dasharray: 1.5 4; stroke-linecap: round; }
svg text[class] { stroke: var(--bg); }
.dm svg .handle { fill-opacity: 0.18; stroke-width: 1.5; cursor: grab; }
.dm svg .handle:hover, .dm svg .handle.active { fill-opacity: 0.35; }
.dm svg .handle.focus { stroke-width: 3; }

/* ---- cover, back matter, footer ------------------------------------------------------------ */

.cover h1 { font-size: 40px; margin-bottom: 4px; }
.subtitle { font: 18px var(--sans); color: var(--muted); margin: 0 0 24px; }
.cover-part ol { list-style: none; padding: 0; columns: 2 260px; }
.cover-part li { break-inside: avoid; }
.cover-part h2 { font-size: 19px; }
.idx { columns: 2 300px; padding-left: 1.2em; }
.idx li { break-inside: avoid; }
.idx-where { font: 13px var(--sans); color: var(--muted); }

.pn { display: flex; justify-content: space-between; gap: 16px; margin-top: 56px; padding-top: 16px; border-top: 1px solid var(--rule); font-family: var(--sans); }
.pn a { text-decoration: none; max-width: 48%; }
.pn a span { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.pn .next { text-align: right; margin-left: auto; }
.foot { margin-top: 32px; font: 13px/1.5 var(--sans); color: var(--muted); }
.math-error { color: var(--bad); }

@media print {
	.top, .side, .pn, .theme-toggle { display: none; }
	.layout { display: block; }
	details.blk > .blk-body { display: block; }
}

figure.static { margin: 20px 0; }
figure.static svg { width: 100%; max-width: 560px; height: auto; display: block; margin: 0 auto; }
figure.static figcaption { font-size: 16px; color: var(--muted); margin-top: 6px; }

/* The grey reference shapes sit on a dark background in dark mode: give them more weight */
:root[data-theme="dark"] svg .s-cref.area-strong { fill-opacity: 0.45; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) svg .s-cref.area-strong { fill-opacity: 0.45; }
}