/* ICCP summer-school lab guide — page-specific styles.
   Load after https://imaging.cs.cmu.edu/shared/style.css.
*/

/* ── Palette (light) ── */
:root {
	color-scheme: light dark;

	--bg:                #fff;
	--text-2:            #444;
	--muted:             #666;
	--kbd-bg:            #fff;
	--link-on-surface:   #166dc7;
	--accent-on-surface: #af5300;
}

/* ── Palette (dark) ── */
@media (prefers-color-scheme: dark) {
	:root {
		--text:          #eee;
		--link:          #5ba3e8;
		--accent:        #e08a45;
		--surface:       #1e1e1e;
		--border-strong: #4a4a4a;
		--border-soft:   #333;
		--award-bg:      #2e2216;

		--bg:                #141414;
		--text-2:            #c0c0c0;
		--muted:             #9a9a9a;
		--kbd-bg:            #2a2a28;
		--link-on-surface:   #5ba3e8;
		--accent-on-surface: #e08a45;
	}
}

/* Fonts are declared in the CMU-hosted shared stylesheet. Its relative font
   URLs resolve under https://imaging.cs.cmu.edu/shared/fonts/.
*/
img, video {
	max-width: 100%;
	height: auto;
}

html { background: var(--bg); scroll-padding-top: 24px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
	background: var(--bg);
	/* Long paths and command lines in inline code must not force a horizontal scroll. */
	overflow-wrap: break-word;
	max-width: none;
	margin: 0;
	padding: 0;
}

/* `revert`, not zeroed: the base sheet's block margins also land on nested lists and on
   paragraphs inside list items, which added ~1400px to each of Parts 2 and 3. */
p, ul, ol, iframe, table, figure, pre {
	text-align: revert;
	margin: revert;
	width: revert;
}

li { margin: revert; }

video { margin: revert; }

.clip { width: 560px; }                 /* landscape visualizer screen recording */
.clip-wide { width: 640px; }            /* the results clip, shown larger */
.clip-portrait { width: 300px; }        /* portrait hardware capture */
.vidgrid video { width: 100%; }         /* sized by the grid's flex item */

pre { width: revert; }

/* ── Layout ── */
.layout { display: flex; min-height: 100vh; }
.sidebar {
	width: 280px; flex: 0 0 280px;
	background: var(--surface);
	border-right: 1px solid var(--border-strong);
	padding: 32px 20px 32px 28px;
	box-sizing: border-box;
	position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.content { flex: 1; min-width: 0; padding: 16px 48px 96px; box-sizing: border-box; }
.content-inner { max-width: 76ch; }

/* The sidebar has to fold away well before the lab sheet's 48em breakpoint: it is a
   fixed 280px, so below roughly 860px the content column stops being readable. */
@media (max-width: 53.75em) {
	.layout { display: block; }
	.sidebar { position: static; width: auto; height: auto; border-right: none; border-bottom: 1px solid var(--border-strong); }
	.content { padding: 32px 20px 64px; }
}

/* ── Sidebar ── */
.side-title { font-size: 15px; font-weight: 700; letter-spacing: .01em; margin: 0 0 2px; }
a.side-title { display: block; color: var(--text); text-decoration: none; }
a.side-title:hover, a.side-title:focus { color: var(--accent); }
.sidebar nav a.side-sub-link { padding-left: 2.2em; font-size: 12.5px; color: var(--muted); }
.sidebar nav a.side-sub-link:hover, .sidebar nav a.side-sub-link:focus { color: var(--text); }
.side-sub { font-size: 12.5px; color: var(--muted); margin: 0 0 20px; }
.side-part { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); margin: 20px 0 6px; }
.sidebar nav a {
	display: block; color: var(--text-2); text-decoration: none;
	font-size: 13.5px; padding: 3px 8px; border-radius: 0.25em;
}
.sidebar nav a:hover, .sidebar nav a:focus { background: var(--bg); color: var(--accent); }
.side-num { display: inline-block; width: 1.4em; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ── Header ── */
h1 {
	font-size: 2em;
	margin: 0.67em 0;
	color: var(--text);
	text-wrap: balance;
}

.doc-sub { font-size: 17px; color: var(--text-2); margin: 0 0 20px; text-wrap: pretty; }

ul.details {
	margin: 0 0 1em 0;
	padding-left: 0;
}

ul.details > li { margin: 0 1em 0.5em 0; }

/* Teaser figure in the header, spanning the content column like the lab templates. */
#teaser { margin: 0 0 8px; }

/* ── Part banners & sections ── */
.part {
	display: flex; align-items: baseline; gap: 12px;
	margin: 56px 0 8px; padding-top: 24px; border-top: 2px solid var(--border-strong);
}

/* Optical, not arbitrary: Avenir Next Pro's cap band centres font-size x 0.109 above the
   line box's centre, so the padding is asymmetric on purpose; top: -5px is half the
   cap-height difference between the 11.5px label and the 26px h2. Don't symmetrise. */
.part-tag {
	font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
	color: var(--bg); background: var(--accent); padding: 4.5px 10px 1.5px; border-radius: 999px;
	white-space: nowrap;
	position: relative; top: -5px;
}
.part h2 { font-size: 26px; margin: 0; letter-spacing: -.01em; text-wrap: balance; }
.part-note { color: var(--text-2); font-size: 14.5px; margin: 4px 0 24px; }

.step { margin: 36px 0; }
.step h3 {
	font-size: 19px; margin: 0 0 10px; display: flex; align-items: center; gap: 10px;
	text-wrap: balance;
}

/* Same cap-band offset (font-size x 0.109): padding-top centres the digit in the ring,
   and top: -2px puts the ring on one centre line with the 19px heading beside it. */
.step-num {
	box-sizing: border-box;
	flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; padding-top: 3px;
	background: var(--surface); border: 1px solid var(--border-strong); color: var(--text-2);
	font-size: 13.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
	font-variant-numeric: tabular-nums;
	position: relative; top: -2px;
}
.step h4 {
	font-size: 16.5px; margin: 26px 0 8px; padding-bottom: 4px;
	border-bottom: 1px solid var(--border-soft);
}
.step ol.sub { margin: 8px 0 8px; padding-left: 22px; list-style: lower-alpha; }
.step ol.sub > li { margin: 8px 0; color: var(--text); }
.step ol.roman { list-style: lower-roman; padding-left: 22px; }
.step p { margin: 8px 0; text-wrap: pretty; }

/* ── Figures ── */
figure { margin: 14px 0; }
figure video {
	border-radius: 0.25em; border: 1px solid var(--border-strong);
	display: block; max-width: 100%; height: auto; background: #000;
}
/* Cap-band offset again, plus line-height: 1 — the Font Awesome glyph reaches 0.857em
   above the baseline and would otherwise set a taller line box than the 10.5px text. */
.vid-badge {
	display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
	text-transform: uppercase; color: var(--accent-on-surface);
	border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
	border-radius: 999px; line-height: 1; padding: 2px 8px 0; margin-right: 6px; vertical-align: 1px;
}
.vidgrid { display: flex; flex-wrap: wrap; gap: 14px; margin: 12px 0; }
.vidgrid figure { flex: 0 1 260px; min-width: 0; margin: 0; }
.figgrid { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.figgrid img, figure > img {
	border-radius: 0.25em; border: 1px solid var(--border-strong);
	display: block; max-width: 100%; height: auto;
}
.figgrid img { flex: 1 1 220px; min-width: 0; max-width: 360px; object-fit: cover; }
.figgrid.wide img { max-width: 480px; }
figcaption { font-size: 13px; color: var(--muted); margin-top: 6px; }

/* A row of figures that keeps its proportions rather than wrapping: the two result
   panels under the header. Flex ratios match the assets' aspect ratios. */
.figrow { display: flex; flex-wrap: nowrap; gap: 14px; align-items: flex-start; margin: 12px 0; }
.figrow > figure { min-width: 0; margin: 0; }
.figrow > figure > img, .figrow > figure > video { width: 100%; height: auto; }
.figrow > .depth { flex: 1.157 1 0; }
.figrow > .transient { flex: 1.789 1 0; }

@media (max-width: 53.75em) {
	.figrow { flex-wrap: wrap; }
	.figrow > .depth, .figrow > .transient { flex: 1 1 100%; }
}

/* ── Option cards ── */
.optionrow { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0; }
.optioncard {
	flex: 1 1 220px; min-width: 0;
	border: 1px solid var(--border-strong);
	border-top: 3px solid var(--border-strong);
	border-radius: 0.25em;
	padding: 12px 14px;
	background: var(--surface);
}
.optionrow.wide > .optioncard { flex-basis: 260px; }
.optioncard > p { margin: 0 0 6px; }
.optioncard > pre { margin: 0; }
.optioncard .label { color: var(--link-on-surface); }
.optioncard.recommended { border-top-color: var(--accent); }
.optioncard.recommended .label { color: var(--accent-on-surface); }

/* ── Tables ── */
table { width: 100%; }

td, th {
	padding: 0.4em 0.5em;
	border: 1px solid var(--border-strong);
	text-align: left;
	vertical-align: top;
}

th { font-weight: 700; background: var(--surface); }
tbody tr:hover {
	background-color: transparent;
	box-shadow: inset 3px 0 0 var(--accent);
}
tbody tr:nth-child(even):hover { background-color: var(--surface); }

/* Every other row is --surface, where the base link colour is only 4.23:1. */
td a { color: var(--link-on-surface); }
td a:hover, td a:focus, td a:active { color: var(--accent-on-surface); }

/* Second line under a part name in the appendix list. The parts spreadsheet carries a
   notes column, but a fourth column would push the table into the horizontal scroller,
   and a note qualifies its own item, so it rides with it instead. --muted clears AA on
   the plain row and on the zebra-striped one alike (5.05:1 on #f0f0f0). */
.item-note { display: block; font-size: 90%; color: var(--muted); }

/* Lets a wide table scroll sideways without dropping its table semantics. */
.table-wrap { overflow-x: auto; margin: 12px 0; }

/* ── Callouts ── */
.note, .warn {
	border-radius: 0.25em; padding: 12px 16px; margin: 14px 0; font-size: 14.5px;
	border: 1px solid var(--border-strong); background: var(--surface);
}
.note strong:first-of-type { color: var(--link-on-surface); }
.note > i, .warn > i { margin-right: 0.15em; }
.note > i { color: var(--link-on-surface); }
.warn { background: var(--award-bg); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.warn strong:first-of-type, .warn > i { color: var(--accent); }
.tip strong:first-of-type, .tip > i { color: var(--accent-on-surface); }

/* ── Theory panel & math ── */
.theory {
	border: 1px solid var(--border-strong); border-left: 3px solid var(--accent);
	background: var(--surface); border-radius: 0.25em;
	padding: 14px 18px; margin: 18px 0; font-size: 15px;
}
.theory-title {
	font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
	color: var(--accent-on-surface); margin: 0 0 8px;
}
.theory p { margin: 8px 0; }
.math {
	font-family: "STIX Two Math", "Cambria Math", Georgia, "Times New Roman", serif;
	font-size: 19px; text-align: center; margin: 14px 0;
}
.math var, .theory var { font-style: italic; font-family: Georgia, "Times New Roman", serif; }
.frac { display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center; margin: 0 3px; }
.frac .num { display: block; padding: 0 6px 1px; border-bottom: 1px solid currentColor; }
.frac .den { display: block; padding: 1px 6px 0; }
.ph { color: var(--accent); font-size: 13px; font-weight: 600; }

/* ── Code / kbd ──
   Light code blocks, matching the lab base sheet rather than the dark blocks this guide
   used before. */
pre, code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	background-color: var(--surface);
	border: 1px solid var(--border-soft);
	border-radius: 0.25em;
}
pre {
	color: var(--text);
	padding: 14px 18px; overflow-x: auto;
	font-size: 13.5px; line-height: 1.6; margin: 12px 0;
}
:not(pre) > code { padding: 0.1em 0.3em; font-size: 87%; }
pre code { padding: 0; background: none; border: 0; border-radius: 0; font-size: inherit; }
pre .cm { color: var(--muted); font-style: italic; }
pre .dim { color: var(--muted); }
pre .ok { color: var(--accent-on-surface); font-weight: 700; }
kbd {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px;
	background: var(--kbd-bg); border: 1px solid var(--border-strong);
	border-bottom-width: 2px; border-radius: 0.25em; padding: 1px 7px;
}

/* ── Misc ── */
a { color: var(--link); text-decoration: none; }
a:focus, a:hover, a:active { color: var(--accent); text-decoration: none; }
.note a, .warn a, .theory a, .optioncard a, pre a {
	color: var(--link-on-surface);
}
.note a:hover, .note a:focus, .note a:active,
.warn a:hover, .warn a:focus, .warn a:active,
.theory a:hover, .theory a:focus, .theory a:active,
.optioncard a:hover, .optioncard a:focus, .optioncard a:active,
pre a:hover, pre a:focus, pre a:active {
	color: var(--accent-on-surface);
}
hr.soft { border: none; border-top: 1px solid var(--border-soft); margin: 48px 0 0; }
ul.plain { padding-left: 22px; }
ul.plain li { margin: 6px 0; }

/* Page credits. The lab base sheet styles `footer` italic; matching it here means one
   fewer thing that differs from the templates. */
footer {
	color: var(--muted);
	font-size: 13.5px;
	font-style: italic;
	margin-top: 40px;
	padding-top: 16px;
	border-top: 1px solid var(--border-soft);
}

footer p { margin: 6px 0; }

/* ── Printing ── */
@media print {
	:root {
		color-scheme: light;
		--bg: #fff;
		--text: #000;
		--text-2: #333;
		--muted: #555;
		--link: #000;
		--accent: #000;
		--surface: #fff;
		--border-strong: #888;
		--border-soft: #ccc;
		--award-bg: #fff;
		--kbd-bg: #fff;
		--link-on-surface: #000;
		--accent-on-surface: #000;
		--button-hover: #fff;
	}
	html, body { background: #fff; }
	body { color: #000; }
	.layout { display: block; }
	.sidebar { display: none; }
	.content { padding: 0; }
	.content-inner { max-width: none; }
	a { color: #000; text-decoration: underline; }
	.skip-link, video { display: none; }
	figure, .step, tr { break-inside: avoid; }
}