/* Course-page component utilities. Loaded after course.css so these rules can
   override layout-level styling when needed. Each class is designed to replace
   a recurring chunk of legacy presentational HTML (<center>, align="...",
   <table border cellspacing cellpadding>) without changing the rendered output. */

/* Sticky site-wide toolbar — injected by site-header.js before <main>.
   Contains the site logo, primary section nav, and site-search. The
   theme-toggle now lives in the secondary breadcrumb bar below this
   one (see <page-breadcrumbs> styling further down). */
.site-header {
	position: sticky;
	top: 0;
	z-index: 200;
	display: grid;
	grid-template-columns: auto auto 1fr;
	align-items: center;
	column-gap: 0.75em;
	padding: 0.25em 0.5em;
	background-color: var(--color-bg);
	border-bottom: 1px solid var(--color-border-mute);
	box-sizing: border-box;
}

.site-header__logo {
	grid-column: 1;
	grid-row: 1;
	display: flex;
	align-items: center;
}

.site-header__logo img {
	height: 2em;
	width: auto;
	display: block;
}

.site-header .site-nav {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	align-items: center;
}

.site-header site-search {
	grid-column: 3;
	grid-row: 1;
	display: flex;
	align-items: center;
}

/* Primary nav — horizontal list of top-level sections (Course, Exercises,
   Examples, Lectures). Active section gets a bottom-border accent and bold
   text so the reader always knows which silo they're in (MDN's tab pattern).
   Hidden below ~720px so the mobile header stays compact — logo + search
   still reach everything. */
.site-nav ul {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 0.25em;
}

.site-nav li {
	margin: 0;
}

.site-nav a {
	display: inline-block;
	padding: 0.25em 0.6em;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.9em;
	text-decoration: none;
	color: var(--color-text);
	border-bottom: 2px solid transparent;
	border-radius: 2px 2px 0 0;
	line-height: 1.4;
}

.site-nav a:hover {
	background-color: var(--color-border-mute);
}

.site-nav a[data-active] {
	font-weight: bold;
	border-bottom-color: var(--color-header-bg);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .site-nav a[data-active] {
		border-bottom-color: #ff9966;
	}
}

:root[data-theme="dark"] .site-nav a[data-active] {
	border-bottom-color: #ff9966;
}

/* Hidden on desktop; the @media (max-width: 720px) block below shows it. */
.site-header__hamburger {
	display: none;
}

@media (max-width: 720px) {
	.site-header {
		grid-template-columns: auto 1fr auto;
	}

	.site-header .site-nav {
		display: none;
	}

	.site-header site-search {
		grid-column: 2;
		min-width: 0;
	}

	.site-header__hamburger {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		grid-column: 3;
		grid-row: 1;
		/* 44×44 minimum tap target (Apple HIG / WCAG 2.5.5). Outer geometry
		   and icon weight are tuned to visually match .theme-toggle__trigger
		   so the two buttons read as siblings at the same viewport. */
		min-width: 44px;
		min-height: 44px;
		padding: 0.3em 0.5em;
		background: none;
		border: 1px solid var(--color-border-mute);
		border-radius: 4px;
		cursor: pointer;
		font-size: 1em;
		line-height: 1;
		color: var(--color-text);
	}

	.site-header__hamburger:hover {
		background-color: var(--color-border-mute);
	}

	.site-header__hamburger:focus-visible {
		outline: 2px solid var(--color-emphasis);
		outline-offset: 1px;
	}

	/* Mobile nav dropdown — full-width row below logo/search/hamburger */
	.site-nav-mobile {
		grid-column: 1 / -1;
		border-top: 1px solid var(--color-border-mute);
		padding: 0.25em 0;
	}

	.site-nav-mobile ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.site-nav-mobile a {
		display: block;
		padding: 0.5em 0.75em;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 0.95em;
		text-decoration: none;
		color: var(--color-text);
	}

	.site-nav-mobile a:hover {
		background-color: var(--color-border-mute);
	}

	.site-nav-mobile a[data-active] {
		font-weight: bold;
		border-left: 3px solid var(--color-header-bg);
		padding-left: calc(0.75em - 3px);
	}
}

.site-header .site-search {
	margin-top: 0;
	width: 100%;
	max-width: 360px;
	min-width: 0;
}

.site-header .site-search__input {
	min-width: 0;
}

.site-header .site-search__label {
	display: none;
}

.hero {
	text-align: center;
}

/* Breadcrumb nav on example pages — provides vertical separation from the
   page-hero theme-toggle above it and the description below. */
nav[aria-label="Breadcrumb"] {
	margin-top: 0.75em;
	margin-bottom: 0.5em;
}

/* Estimated reading-time badge rendered by page-hero.js when the
   reading-time attribute is present. Sits between the h1 and theme-toggle;
   muted via opacity so it recedes behind the title without a theme-specific
   colour override. */
.page-hero-reading-time {
	margin: 0.1em 0 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	opacity: 0.65;
}

/* Inline <code class="language-cobol"> inside section headings (h1–h6)
   should not be Prism-highlighted — keep COBOL keyword references in the
   heading flow rather than calling them out with token colours. The `body`
   prefix matches the specificity of Prism's `body .token.<x>` overrides in
   course.css so these rules win without `!important`. */
body :is(h1, h2, h3, h4, h5, h6) code[class*="language-"],
body :is(h1, h2, h3, h4, h5, h6) code[class*="language-"] .token {
	color: inherit;
	background: transparent;
	text-shadow: none;
}

/* Decorative disc bullet — replaces the legacy BallRed/Blue/Green/OrangeG.gif
   icons. Rendered as a ::before pseudo-element on .topic-label and on each
   dl.index-grid > dt so the bullet lives in CSS instead of empty aria-hidden
   spans. Colour is driven by the --bullet-color custom property, set per
   section. ul/li bullets use ::marker instead. */
.topic-label::before,
dl.index-grid > dt::before {
	content: "";
	display: inline-block;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	vertical-align: middle;
	margin: 0 5px;
	background-color: var(--bullet-color);
}

.topic-label {
	--bullet-color: #cc3300;
}

dl.index-grid {
	--bullet-color: #0066cc;
}

dl.index-grid.bullet-green {
	--bullet-color: #2e7d32;
}

dl.index-grid.bullet-orange {
	--bullet-color: #e07b00;
}

.center-block {
	text-align: center;
}

/* Reproduces <table border="1" cellspacing="1" cellpadding="5"> exactly:
   1px outer border, 1px gap between cells, 1px border on every cell, 5px
   cell padding. Verified against legacy renderings before the Phase 4 sweep. */
.data-table {
	border-collapse: separate;
	border-spacing: 1px;
	border: 1px solid;
}

.data-table > * > tr > th,
.data-table > * > tr > td {
	border: 1px solid;
	padding: 5px;
}

/* Breathing room between stacked data-tables (e.g. examples/index.html lists
   one table per topic, and captions would otherwise sit flush against the
   previous table's bottom border). */
.data-table + .data-table {
	margin-top: 1.5em;
}

/* Sidebar "additional detail" marker. Replaces the legacy 30×37 px i-Detail.gif
   icon with the 🔍 emoji. font-size 32px sits between the original box's width
   and height for a comparable visual footprint; vertical-align: middle keeps
   the glyph centred against neighbouring text (emoji baselines sit lower than
   image baselines, so the default would look dropped). */
.i-detail {
	font-size: 32px;
	line-height: 1;
	vertical-align: middle;
}

/* Lesson-level Prev / Next navigation bar. Rendered by lesson-nav.js.
   Flex row with space-between keeps Prev on the left and Next on the right.
   min-height: 2em reserves space even when one side is absent so the bar does
   not collapse. Inherits link colours from course.css (light and dark mode). */
.lesson-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5em;
	padding: 0.75em 0;
	border-top: 1px solid;
	margin-top: 1em;
	min-height: 2em;
}

.lesson-nav-prev,
.lesson-nav-next {
	font-size: 0.95em;
}

/* "Lesson X of N" indicator centred between Prev and Next. flex: 0 0 auto so
   the surrounding space-between layout keeps the indicator centred when both
   neighbour links are present; text-align stays inside in case the row wraps. */
.lesson-nav-position {
	font-size: 0.85em;
	font-family: Arial, Helvetica, sans-serif;
	color: var(--color-panel-text);
	font-weight: bold;
	letter-spacing: 0.04em;
	text-align: center;
	flex: 0 0 auto;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .lesson-nav {
		border-top-color: var(--color-border-soft, #444);
	}
}

:root[data-theme="dark"] .lesson-nav {
	border-top-color: var(--color-border-soft, #444);
}

/* ============================================================================
   Lesson-progress UI (components/lesson-checkbox.js, components/course-progress.js).
   `lc-progress.<id>` flags in localStorage drive both the per-lesson checkbox
   and the index-page summary + per-link checkmarks. Light DOM throughout, so
   these rules apply directly without piercing selectors.
   ============================================================================ */

.lesson-checkbox {
	margin: 1em 0;
	padding: 0.75em 1em;
	border: 1px solid var(--color-border-soft);
	background-color: var(--color-panel-bg);
	color: var(--color-panel-text);
	border-radius: 3px;
}

.lesson-checkbox-label {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-weight: bold;
	cursor: pointer;
}

.lesson-checkbox-input {
	width: 1.1em;
	height: 1.1em;
	cursor: pointer;
	margin: 0;
}

/* Touch devices need a larger checkbox to comfortably tap. */
@media (pointer: coarse), (max-width: 600px) {
	.lesson-checkbox-input {
		width: 1.6em;
		height: 1.6em;
	}
}

.lesson-checkbox-meta {
	margin-top: 0.4em;
	font-size: 0.9em;
}

.lesson-checkbox-position {
	font-weight: bold;
}

.lesson-checkbox-position:not(:empty) + .lesson-checkbox-count:not(:empty)::before {
	content: " — ";
}

.lesson-checkbox-note {
	margin: 0.4em 0 0;
	font-size: 0.8em;
	font-style: italic;
	opacity: 0.8;
}

/* Index-page progress summary + reset button. Sized to match the .course-content
   block above it so the strip lines up with the topic table. */
.course-progress {
	width: 605px;
	max-width: 100%;
	margin: 1em auto;
	padding: 0.6em 1em;
	border: 1px solid var(--color-border-soft);
	background-color: var(--color-panel-bg);
	color: var(--color-panel-text);
	border-radius: 3px;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em 1em;
}

.course-progress-summary {
	font-weight: bold;
	flex: 1 1 auto;
}

.course-progress-reset {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	font-weight: bold;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 0.35em 0.8em;
	cursor: pointer;
	background-color: var(--color-bg);
	color: var(--color-text);
	border: 1px solid var(--color-border-mute);
	border-radius: 3px;
	flex: 0 0 auto;
}

.course-progress-reset:hover,
.course-progress-reset:focus-visible {
	background-color: var(--color-cell-label-bg);
}

.course-progress-reset:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 1px;
}

.course-progress-note {
	flex: 1 0 100%;
	margin: 0;
	font-size: 0.8em;
	font-style: italic;
	opacity: 0.8;
}

/* Green ✓ inserted by course-progress.js next to each completed lesson link
   in the course-topics nav. Rendered as a sibling of the <a> (not a child) so
   the visited-link colour does not bleed onto the checkmark. */
.lesson-completed-mark {
	display: inline-block;
	margin-left: 0.4em;
	font-weight: bold;
	color: #2e7d32;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .lesson-completed-mark {
		color: #66bb6a;
	}
}

:root[data-theme="dark"] .lesson-completed-mark {
	color: #66bb6a;
}

/* ============================================================================
   Page-component classes migrated from per-page <style> blocks (Phase 5).
   Each rule belongs to a single course page in HTML usage. Rules that
   override broader selectors (e.g. element-level <pre>, <h2>, <form>, or
   .section-sidebar h4) stayed inline because globalizing them would change
   rendering on other pages.
   ============================================================================ */

/* COBOLIntro.html */

ul.construct-list {
	list-style-type: disc;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: var(--color-emphasis);
	font-size: 1.5em;
	padding-left: 4em;
}

ul.construct-list li {
	padding-left: 0.5em;
}

.animation-row {
	display: flex;
	width: 80%;
	margin: 0 auto;
	border: 1px solid;
}

.animation-row .animation-item {
	flex: 1;
	border: 1px solid;
	padding: 4px;
}

/* Copy.html */

.code-section {
	padding: 5px;
	overflow-x: auto;
}

.code-section + .code-section {
	border-top: 1px solid black;
}

.code-section.white-bg {
	background-color: var(--color-bg);
}

/* DataDeclaration.html */

.code-record {
	background-color: var(--color-code-bg);
	border: 1px solid;
	width: fit-content;
	max-width: 90%;
	margin: 0.5em auto;
	overflow-x: auto;
}

.code-record .record-title {
	font-weight: bold;
	text-align: center;
	padding: 4px;
	border-bottom: 1px solid;
}

.code-record pre {
	margin: 0;
}

.qa-grid {
	display: grid;
	grid-template-columns: 8% 1fr;
	column-gap: 5px;
	row-gap: 0.3em;
	width: 84%;
	margin: 0 auto;
}

.qa-grid .qa-label {
	font-weight: bold;
	align-self: start;
	padding-top: 0.15em;
}

/* Inspect.html */

ol.spaced > li + li {
	margin-top: 0.6em;
}

/* Intro2DirectAccess.html */

.two-col {
	display: flex;
	gap: 1em;
	align-items: flex-start;
}

.two-col-text {
	flex: 0 0 204px;
}

.two-col-media {
	flex: 1;
	display: flex;
	justify-content: center;
}

.img-figure {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0 auto;
	width: fit-content;
}

.img-figure figcaption {
	text-align: center;
}

/* Iteration.html */

.processing-template {
	border: 1px solid;
	padding: 0;
	width: 75%;
	margin: 0.5em auto;
	overflow: hidden;
}

.processing-template-header {
	background-color: var(--color-panel-bg);
	text-align: center;
	padding: 5px;
	border-bottom: 1px solid;
	font-weight: bold;
}

.processing-template-body {
	padding: 5px;
}

.saq-table {
	background-color: var(--color-code-bg);
	border: 1px solid;
	margin: 0 auto;
	overflow: hidden;
}

.saq-row {
	display: grid;
	grid-template-columns: 8% 62% 30%;
	border-bottom: 1px solid;
}

.saq-row:last-child {
	border-bottom: none;
}

.saq-label {
	background-color: var(--color-panel-bg);
	padding: 4px 8px;
	font-weight: bold;
	border-right: 1px solid;
}

.saq-question {
	padding: 4px 8px;
	border-right: 1px solid;
}

.saq-answer {
	padding: 4px 8px;
	vertical-align: top;
}

.saq-reveal {
	border: 1px solid var(--color-border-soft);
	border-radius: 3px;
	background-color: var(--color-code-bg);
}

.saq-reveal summary {
	cursor: pointer;
	padding: 3px 6px;
	font-style: italic;
	list-style: none;
}

.saq-reveal summary::before {
	content: "▶ ";
	font-style: normal;
	font-size: 0.7em;
}

details[open].saq-reveal summary::before {
	content: "▼ ";
}

.saq-reveal > :not(summary) {
	padding: 4px 8px;
	margin: 0;
}

/* RefMod.html */

.table-scroll {
	overflow-x: auto;
}

.table-scroll table {
	width: 100%;
	table-layout: fixed;
}

.table-scroll table th,
.table-scroll table td {
	width: auto !important;
	overflow-wrap: break-word;
}

.results-box {
	background-color: var(--color-results-bg);
	border: 2px solid;
	padding: 7px;
	max-width: 366px;
	margin: 0 auto;
}

.results-box-header {
	text-align: center;
	font-weight: bold;
	margin-bottom: 0.5em;
}

.results-two-col {
	display: flex;
	gap: 1em;
}

/* RelativeFiles.html */

.declaratives-layout {
	display: flex;
	gap: 1em;
	align-items: flex-start;
}

.declaratives-text {
	flex: 1;
}

.declaratives-code {
	flex: 1;
	display: flex;
	justify-content: center;
}

/* ReportWriter.html */

.iframe-wrapper {
	text-align: center;
	border: 1px solid;
}

/* Selection.html */

.eval-row {
	display: grid;
	font-family: monospace;
	align-items: center;
	justify-items: center;
	padding: 4px 0;
}

.eval-row-3col {
	grid-template-columns: 2fr 1fr 2fr;
}

.eval-row-4col {
	grid-template-columns: auto auto auto auto;
	justify-content: center;
	column-gap: 1.5em;
}

.code-compare {
	display: flex;
	gap: 1em;
	justify-content: center;
	width: 85%;
	margin: 0 auto;
}

.code-compare > div {
	flex: 1;
	min-width: 0;
}

.condition-types-box {
	border: 1px solid;
	width: 241px;
	margin: 0 auto;
}

.condition-types-box .box-header {
	background-color: var(--color-panel-bg);
	padding: 7px;
	text-align: center;
}

.condition-types-box .box-body {
	background-color: var(--color-code-bg);
	padding: 7px;
}

/* SequentialFiles2.html — selectors are scoped under .qa-form so .qa-label
   here doesn't collide with DataDeclaration.html's .qa-grid .qa-label. */

.qa-form {
	border: 1px solid;
	width: 96%;
	margin: 0 auto;
}

.qa-form .qa-row {
	display: grid;
	grid-template-columns: 8% 62% 30%;
	border-bottom: 1px solid var(--color-border-soft);
}

.qa-form .qa-row:last-child {
	border-bottom: none;
}

.qa-form .qa-label {
	background-color: var(--color-panel-bg);
	padding: 4px 8px;
	border-right: 1px solid var(--color-border-soft);
}

.qa-form .qa-question {
	background-color: var(--color-code-bg);
	padding: 4px 8px;
	border-right: 1px solid var(--color-border-soft);
}

.qa-form .qa-answer {
	background-color: var(--color-code-bg);
	padding: 4px 8px;
	overflow: hidden;
}

/* SortMerge.html */

.spec-block {
	background-color: var(--color-code-bg);
	border: 1px solid;
	padding: 10px;
	max-width: 500px;
	margin: 0 auto;
	box-sizing: border-box;
}

/* Subprograms.html */

.code-run-pair {
	display: flex;
	border: 1px solid;
	box-sizing: border-box;
}

.code-run-pair .code-part {
	padding: 5px;
	flex: 1;
}

.code-run-pair .run-part {
	background-color: var(--color-bg);
	padding: 5px;
	border-left: 1px solid;
}

/* index.html */

/* Header: flexbox replaces the 3-column layout table */
.course-header {
	display: flex;
	align-items: flex-start;
	width: 605px;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.course-header-title {
	flex: 1 1 0;
	min-width: 0;
}

.course-header-legend {
	flex: 0 0 207px;
}

.legend-grid {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.25rem 0.5rem;
	align-items: center;
	margin: 0;
	padding: 0;
}

.legend-grid dt,
.legend-grid dd {
	margin: 0;
}

.course-hr {
	width: 605px;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

/* Main content box replaces outer border layout table */
.course-content {
	width: 605px;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	border: 1px solid;
	padding: 1px;
	box-sizing: border-box;
}

/* CSS grid replaces the inner 2-column topic layout table */
.course-topics {
	display: grid;
	grid-template-columns: 225px 1fr;
	width: 100%;
}

/* Topic-label is rendered as <h2> by build-lesson-index.js so each topic
   group becomes an anchorable section (#introduction-to-cobol etc.) and
   has proper heading semantics. The selector targets both the old div
   form and the new h2 to keep the build script's output flexible. */
.topic-label {
	background-color: var(--color-panel-bg);
	padding: 4px;
	margin: 0;
	font-size: 1em;
	font-weight: bold;
	font-family: inherit;
	line-height: 1.3;
}

.topic-links {
	background-color: var(--color-bg);
	display: flex;
	flex-direction: column;
}

/* One-line context blurb rendered above each topic's links. Sits at the
   top of the topic-links column so it visually pairs with the label on
   the left without crowding the narrow 225px label column. */
.topic-description {
	margin: 0 0 0.5em;
	padding: 4px 4px 0;
	font-size: 0.9em;
	color: var(--color-text-muted);
	line-height: 1.35;
}

/* Flexbox rows replace each icon+link layout table */
.course-link {
	display: flex;
	align-items: center;
}

.course-link-icon {
	flex: 0 0 auto;
}

/* Maroon divider spanning both grid columns */
.topic-divider {
	grid-column: 1 / -1;
	height: 1px;
	background-color: #990033;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .topic-divider {
		background-color: #b3334d;
	}
}

:root[data-theme="dark"] .topic-divider {
	background-color: #b3334d;
}

/* Course content link icons — replace i-Tut.gif, i-exercise.gif, i-SAQ.gif */
.icon-tut,
.icon-exercise,
.icon-saq,
.icon-ref {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 21px;
	border-radius: 3px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #fff;
	vertical-align: middle;
	flex-shrink: 0;
	margin: 4px 5px;
}

.icon-tut {
	background-color: #1565c0;
}

.icon-exercise {
	background-color: #2e7d32;
}

.icon-saq {
	background-color: #c84a00;
}

.icon-ref {
	background-color: #6a1b9a;
}

/* ============================================================================
   Code toolbar — Download / Copy / Run buttons grouped above a code block.
   Used on example pages; the .code-toolbar div sits immediately before <pre>.
   ============================================================================ */

.code-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	align-items: center;
	margin-bottom: 0;
}

.download-btn {
	display: inline-block;
	padding: 0.4em 0.85em;
	font-size: 0.9em;
	line-height: 1.4;
	cursor: pointer;
	border-radius: 3px;
	background-color: #f0f0f0;
	color: #333;
	border: 1px solid #bbb;
	text-decoration: none;
	transition: opacity 0.15s;
}

.download-btn:hover,
.download-btn:focus {
	opacity: 0.85;
	outline: 2px solid currentColor;
	outline-offset: 1px;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .download-btn {
		background-color: #2e2e2e;
		color: #ddd;
		border-color: #555;
	}
}

:root[data-theme="dark"] .download-btn {
	background-color: #2e2e2e;
	color: #ddd;
	border-color: #555;
}

/* ============================================================================
   Copy-to-clipboard button (components/copy-button.js)
   The host <pre> gets position:relative so the button can sit top-right.
   The body prefix matches the specificity of the adjacent Prism overrides so
   this wins without needing !important.
   ============================================================================ */

/* Give every Prism <pre> a positioning context for the absolute button. */
body pre[class*="language-"] {
	position: relative;
}

.copy-button {
	position: absolute;
	top: 0.4em;
	right: 0.4em;
	padding: 0.2em 0.55em;
	font-size: 0.75em;
	line-height: 1.4;
	cursor: pointer;
	border-radius: 3px;
	/* Light-theme colours */
	background-color: #f0f0f0;
	color: #333;
	border: 1px solid #bbb;
	opacity: 0.8;
	transition:
		opacity 0.15s,
		background-color 0.15s,
		color 0.15s,
		border-color 0.15s;
}

.copy-button:hover,
.copy-button:focus {
	opacity: 1;
	outline: 2px solid currentColor;
	outline-offset: 1px;
}

.copy-button.is-success {
	background-color: #e8f5e9;
	color: #2e7d32;
	border-color: #a5d6a7;
	opacity: 1;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .copy-button {
		background-color: #2e2e2e;
		color: #ddd;
		border-color: #555;
	}

	:root:not([data-theme="light"]) .copy-button.is-success {
		background-color: #1b3a1e;
		color: #66bb6a;
		border-color: #388e3c;
	}
}

:root[data-theme="dark"] .copy-button {
	background-color: #2e2e2e;
	color: #ddd;
	border-color: #555;
}

:root[data-theme="dark"] .copy-button.is-success {
	background-color: #1b3a1e;
	color: #66bb6a;
	border-color: #388e3c;
}

/* Touch devices need a 44×44 minimum tap target (Apple HIG / WCAG 2.5.5). */
@media (pointer: coarse), (max-width: 600px) {
	.copy-button {
		min-width: 44px;
		min-height: 44px;
		padding: 0.5em 0.85em;
	}
}

/* ============================================================================
   "Run on Compiler Explorer" link button (components/run-in-ce.js)
   Visually mirrors .copy-button but rendered inline in document flow rather than
   absolutely positioned over a code block.
   ============================================================================ */

.run-in-ce {
	display: inline-block;
	padding: 0.4em 0.85em;
	font-size: 0.9em;
	line-height: 1.4;
	cursor: pointer;
	border-radius: 3px;
	background-color: #f0f0f0;
	color: #333;
	border: 1px solid #bbb;
	text-decoration: none;
	transition: opacity 0.15s;
}

.run-in-ce:hover,
.run-in-ce:focus {
	opacity: 0.85;
	outline: 2px solid currentColor;
	outline-offset: 1px;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .run-in-ce {
		background-color: #2e2e2e;
		color: #ddd;
		border-color: #555;
	}
}

:root[data-theme="dark"] .run-in-ce {
	background-color: #2e2e2e;
	color: #ddd;
	border-color: #555;
}

/* ============================================================================
   Theme-toggle dropdown (components/theme-toggle.js)
   Single trigger button showing the current mode's icon; clicking opens a
   menu with three rows (OS default | Light | Dark) — MDN-style. The active
   row uses the site header palette as a filled marker.
   ============================================================================ */

.theme-toggle {
	position: relative;
	display: inline-block;
	margin-top: 0.5em;
}

.theme-toggle__trigger {
	background: transparent;
	color: inherit;
	border: 1px solid var(--color-border-mute);
	border-radius: 4px;
	cursor: pointer;
	padding: 0.3em 0.5em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.theme-toggle__trigger:hover {
	background-color: var(--color-panel-bg);
}

.theme-toggle__trigger:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -2px;
}

.theme-toggle__menu {
	position: absolute;
	top: calc(100% + 4px);
	right: 0;
	margin: 0;
	padding: 4px 0;
	list-style: none;
	background-color: var(--color-bg);
	border: 1px solid var(--color-border-mute);
	border-radius: 4px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
	min-width: 140px;
	/* Above the breadcrumb bar (z-index 199) and site header (z-index 200) so
	   the menu stays visible while both are sticky-stacked at the top. */
	z-index: 1000;
}

.theme-toggle__menu[hidden] {
	display: none;
}

.theme-toggle__menuitem {
	display: flex;
	align-items: center;
	gap: 0.6em;
	width: 100%;
	padding: 0.45em 0.85em;
	background: transparent;
	color: inherit;
	border: none;
	font: inherit;
	font-size: 0.9em;
	text-align: left;
	cursor: pointer;
	white-space: nowrap;
}

.theme-toggle__menuitem:hover,
.theme-toggle__menuitem:focus-visible {
	background-color: var(--color-panel-bg);
	outline: none;
}

.theme-toggle__menuitem[aria-checked="true"] {
	background-color: var(--color-header-bg);
	color: var(--color-header-text);
}

@media (prefers-reduced-motion: no-preference) {
	.theme-toggle__trigger,
	.theme-toggle__menuitem {
		transition:
			background-color 0.15s,
			color 0.15s;
	}
}

/* Touch devices need a 44×44 minimum tap target (Apple HIG / WCAG 2.5.5);
   the default sizing is comfortable for a mouse but cramped under a fingertip.
   The 720px threshold mirrors the hamburger button's display rule, so when the
   hamburger is visible the trigger matches its size. */
@media (pointer: coarse), (max-width: 720px) {
	.theme-toggle__trigger {
		min-width: 44px;
		min-height: 44px;
	}

	.theme-toggle__menuitem {
		min-height: 44px;
		padding: 0.6em 0.85em;
	}
}

@media (max-width: 600px) {
	/* DataDeclaration.html */
	.code-record {
		width: 100%;
		max-width: 100%;
	}

	.qa-grid {
		width: 100%;
	}

	/* Intro2DirectAccess.html */
	.two-col {
		flex-direction: column;
	}

	/* Iteration.html */
	.saq-row {
		display: block;
		border-bottom: 2px solid var(--color-border-mute);
	}

	.saq-label {
		border-right: none;
		padding-bottom: 2px;
	}

	.saq-question {
		border-right: none;
	}

	.processing-template {
		width: 100%;
	}

	/* RefMod.html */
	.results-two-col {
		flex-direction: column;
		gap: 0;
	}

	/* RelativeFiles.html */
	.declaratives-layout {
		flex-direction: column;
	}

	.declaratives-code {
		justify-content: flex-start;
		width: 100%;
	}

	/* Selection.html */
	.code-compare {
		flex-direction: column;
		width: 100%;
	}

	.condition-types-box {
		width: 100%;
		box-sizing: border-box;
	}

	/* SequentialFiles2.html */
	.qa-form .qa-row {
		display: block;
		border-bottom: 2px solid var(--color-border-mute);
		margin-bottom: 0;
	}

	.qa-form .qa-label {
		display: block;
		font-weight: bold;
		padding-bottom: 2px;
	}

	.qa-form .qa-question {
		display: block;
	}

	.qa-form .qa-answer {
		display: block;
	}

	/* SortMerge.html */
	.spec-block {
		max-width: 100%;
	}

	/* Subprograms.html */
	.code-run-pair {
		flex-direction: column;
	}

	.code-run-pair .run-part {
		border-left: none;
		border-top: 1px solid;
	}

	/* index.html */
	.course-header {
		flex-wrap: wrap;
	}

	.course-header-title {
		flex: 1 1 auto;
	}

	/* Legend wraps to its own row on narrow screens */
	.course-header-legend {
		flex: 0 0 100%;
		margin-top: 8px;
	}

	/* Topic sections stack vertically on mobile */
	.course-topics {
		grid-template-columns: 1fr;
	}
}

/* ============================================================================
   Exercise-page patterns (issue #283).
   Used by exercise spec pages migrated from the legacy maroon-header-table
   layout. The .exam-meta dl replaces the metadata-rows of the outer table;
   .example-run wraps the "Example run" sample-output blocks that legacy pages
   built from nested <ul><tt> hacks.
   ============================================================================ */

dl.exam-meta {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.4em 1em;
	margin: 1em 0;
}

dl.exam-meta dt {
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	color: var(--color-panel-text);
}

dl.exam-meta dd {
	margin: 0;
}

dl.exam-meta dd > p:first-child {
	margin-top: 0;
}

dl.exam-meta dd > p:last-child {
	margin-bottom: 0;
}

@media (max-width: 600px) {
	dl.exam-meta {
		grid-template-columns: 1fr;
		gap: 0.2em 0;
	}

	dl.exam-meta dd {
		margin-bottom: 0.6em;
	}
}

dl.index-grid {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 1em 1.5em;
	margin: 1em 0;
}

dl.index-grid dd {
	margin: 0;
}

dl.index-grid dd > p:first-child {
	margin-top: 0;
}

dl.index-grid dd > p:last-child {
	margin-bottom: 0;
}

@media (max-width: 600px) {
	dl.index-grid {
		grid-template-columns: 1fr;
		gap: 0.2em 0;
	}

	dl.index-grid dd {
		margin-bottom: 1em;
	}
}

figure.example-run {
	background-color: var(--color-results-bg);
	border: 1px solid;
	margin: 1em 0;
	padding: 0;
	max-width: fit-content;
}

figure.example-run figcaption {
	background-color: var(--color-panel-bg);
	color: var(--color-panel-text);
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	padding: 4px 10px;
	border-bottom: 1px solid;
}

figure.example-run pre {
	margin: 0;
	padding: 8px 10px;
	background: transparent;
}

figure.example-run kbd {
	font-weight: bold;
	font-family: inherit;
}

/* ============================================================================
   related-content custom element (cross-linking infrastructure, Issue #220).
   Used on course pages and exercises to link to related examples, exercises,
   and lectures. Light DOM, so these styles apply directly.
   ============================================================================ */

related-content {
	display: block;
}

.related-content {
	border: 1px solid var(--color-border-soft);
	background-color: var(--color-panel-bg);
	color: var(--color-panel-text);
	padding: 0.6em 1em 0.8em;
	margin: 1.2em 0;
	width: fit-content;
	min-width: 220px;
}

.related-heading {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	font-weight: bold;
	margin: 0 0 0.4em;
	padding-bottom: 0.3em;
	border-bottom: 1px solid var(--color-border-soft);
}

.related-group + .related-group {
	margin-top: 0.6em;
}

.related-group-label {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.85em;
	font-weight: bold;
	margin: 0 0 0.2em;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.related-group-list {
	list-style: disc;
	margin: 0;
	padding-left: 1.4em;
}

.related-group-list li {
	margin-bottom: 0.15em;
	font-size: 0.9em;
}

/* ============================================================================
   page-toc custom element (issue #255) and lesson-toc custom element
   (issue #382).

   page-toc: sticky in-page sidebar table-of-contents for long course pages.
   Opt-in per page by adding <page-toc></page-toc> inside .page-wrapper.
   The element is hidden below the desktop breakpoint so lesson-toc handles
   mobile/tablet navigation.

   lesson-toc: auto-generated flat nav at the top of each lesson that lists
   the page's <h2> sections. Replaces the hand-authored <ul class="toc">
   block. Hidden on desktop when the page-toc sidebar is present.
   ============================================================================ */

page-toc {
	display: none;
}

lesson-toc {
	display: block;
}

.page-toc {
	font-size: 0.85em;
	line-height: 1.4;
}

.page-toc-heading {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.9em;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin: 0 0 0.5em;
	padding-bottom: 0.3em;
	border-bottom: 1px solid var(--color-border-soft);
}

.page-toc-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.page-toc-list li {
	margin: 0;
	padding: 0;
}

.page-toc-list a {
	display: block;
	padding: 0.25em 0 0.25em 0.7em;
	border-left: 2px solid transparent;
	text-decoration: none;
	line-height: 1.3;
}

.page-toc-list a:hover {
	border-left-color: var(--color-border-soft);
}

.page-toc-list a[data-active] {
	border-left-color: var(--color-header-bg);
	font-weight: bold;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .page-toc-list a[data-active] {
		border-left-color: #ff9966;
	}
}

:root[data-theme="dark"] .page-toc-list a[data-active] {
	border-left-color: #ff9966;
}

.page-toc-h3 a {
	padding-left: 1.5em;
	font-size: 0.95em;
}

/* Desktop layout: page-wrapper becomes a two-column grid when it contains a
   page-toc. The TOC occupies column 1, spanning every row of the wrapper,
   while page-content / section-grid / page-footer siblings flow down
   column 2. The grid wrapper drops its 1px border so the sidebar and
   content don't share a single visual frame. The narrower top-of-page
   ul.toc inside .page-content is hidden in this layout because the
   sidebar covers the same role. */
@media (min-width: 1100px) {
	.page-wrapper:has(page-toc) {
		display: grid;
		grid-template-columns: 200px minmax(0, 715px);
		column-gap: 2em;
		max-width: 947px;
		border: none;
	}

	.page-wrapper:has(page-toc) > *:not(page-toc) {
		grid-column: 2;
		min-width: 0;
	}

	/* Take page-toc out of grid flow with position: fixed.
	   Why: same row-inflation issue documented for course-sidebar above —
	   when page-toc spans rows 1 to -1, its tall content distributes
	   across row tracks and inflates rows that only need to fit a short
	   item (e.g. the hero's section-grid). Fixed positioning bypasses
	   grid sizing entirely. The grid still reserves a 200px first column
	   track (empty); page-toc visually fills it via viewport-coordinate
	   left/top. The 2-col layout uses max-width 947px so the offset is
	   `max(0px, (50vw - 947px / 2))`. The 3-col layout below overrides
	   for max-width 1199px and the right-hand column. */
	.page-wrapper:has(page-toc) > page-toc {
		display: block;
		position: fixed;
		top: calc(var(--site-bar-height) + 1em);
		left: max(0px, calc(50vw - 947px / 2));
		width: 200px;
		max-height: calc(100vh - var(--site-bar-height) - 2em);
		overflow-y: auto;
		padding: 0.5em 0.25em;
		box-sizing: border-box;
	}

	/* Hide the top-of-page TOC on desktop when the sidebar is present —
	   the sidebar covers the same role. Selector matches both layout
	   shapes used across course pages: `ul.toc`/`lesson-toc` inside
	   .page-content (Iteration-style) and inside .section-grid >
	   .section-full (COBOLIntro-style). The trailing <hr /> sibling is
	   hidden too so the empty divider doesn't leave a stray rule. */
	.page-wrapper:has(page-toc) ul.toc,
	.page-wrapper:has(page-toc) ul.toc + hr,
	.page-wrapper:has(page-toc) lesson-toc,
	.page-wrapper:has(page-toc) lesson-toc + hr,
	/* Also hide the leading <hr> immediately above lesson-toc so we don't
	   leave an orphan divider between the hero and the section header
	   when the sidebar TOC takes over (uses :has() preceding-sibling). */
	.page-wrapper:has(page-toc) hr:has(+ lesson-toc),
	.page-wrapper:has(page-toc) hr:has(+ ul.toc) {
		display: none;
	}
}

@media print {
	page-toc {
		display: none !important;
	}
}

/* ============================================================================
   copyright-notice custom element (issue #257).
   Light DOM — inherits theme tokens and body font from course.css. The hr
   border uses currentColor so it tracks --color-text in both light and dark
   mode without an explicit dark-mode override.
   ============================================================================ */

copyright-notice {
	display: block;
}

/* Replaces deprecated <hr size="1"> (issue #373). */
hr.thin-rule {
	border: none;
	border-top: 1px solid currentColor;
	margin: 0.75em 0;
}

copyright-notice hr {
	border: none;
	border-top: 1px solid currentColor;
	margin: 0.75em 0;
	color: inherit;
}

copyright-notice h3 {
	text-align: center;
	margin: 0.5em 0;
}

copyright-notice p {
	margin: 0.5em 1em;
}

copyright-notice .center {
	text-align: center;
}

copyright-notice .left {
	text-align: left;
}

/* Visually hide an element while keeping it readable by screen readers.
   Used by site-search for its aria-live status announcer. */
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Site search — header search input + ranked dropdown rendered by
   site-search.js. The container is positioned relative so the absolutely-
   positioned dropdown anchors to the input below it. Sizing keeps the field
   compact inside .hero (≤ 360px) but stretches to full width on mobile. */
.site-search {
	position: relative;
	display: inline-block;
	margin-top: 0.6em;
	width: min(360px, 100%);
	text-align: left;
}

.site-search__label {
	display: block;
	font-size: 0.75em;
	font-weight: bold;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--color-emphasis);
	margin-bottom: 0.2em;
}

.site-search__input {
	width: 100%;
	box-sizing: border-box;
	font-family: inherit;
	font-size: 0.95em;
	padding: 0.4em 0.6em;
	border: 1px solid var(--color-border-mute);
	border-radius: 4px;
	background-color: var(--color-bg);
	color: var(--color-text);
}

.site-search__input:focus {
	outline: 2px solid var(--color-emphasis);
	outline-offset: 1px;
}

.site-search__results {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	margin-top: 4px;
	max-height: 60vh;
	/* Both axes must be explicit. Setting only overflow-y leaves overflow-x at
	   the spec-mandated computed value of `auto` (whenever the other axis is
	   non-visible), which on narrow viewports caused a stray horizontal
	   scrollbar under long result rows. */
	overflow-x: hidden;
	overflow-y: auto;
	background-color: var(--color-bg);
	border: 1px solid var(--color-border-mute);
	border-radius: 4px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	z-index: 100;
}

.site-search__results[hidden] {
	display: none;
}

.site-search__result {
	display: block;
	padding: 0.5em 0.7em;
	text-decoration: none;
	color: var(--color-text);
	border-bottom: 1px solid var(--color-border-soft);
}

.site-search__result:last-child {
	border-bottom: none;
}

.site-search__result:hover,
.site-search__result--active {
	background-color: var(--color-panel-bg);
}

.site-search__result-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.5em;
}

.site-search__result-title {
	font-weight: bold;
	color: var(--color-link);
	/* Allow the flex item to shrink and wrap when titles outgrow the dropdown
	   width (the surrounding row is display: flex, which sets min-width: auto
	   on its children by default). */
	min-width: 0;
	overflow-wrap: anywhere;
}

.site-search__result-section {
	font-size: 0.8em;
	color: var(--color-emphasis);
	white-space: nowrap;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.site-search__result-desc {
	display: block;
	margin-top: 0.2em;
	font-size: 0.85em;
	color: var(--color-text);
	opacity: 0.85;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.site-search__empty {
	margin: 0;
	padding: 0.7em;
	font-style: italic;
	color: var(--color-text);
	opacity: 0.8;
}

@media (max-width: 600px) {
	.site-search {
		width: 100%;
	}
}

/* ============================================================================
   edit-on-github custom element (issue #402).
   MDN-style "Help improve this page" footer panel: a small bordered card
   offering two contribution paths — edit the file directly on GitHub, or
   open an issue with the page path pre-filled. Sits below the
   copyright-notice block on content pages; standalone on index pages.
   Light DOM — link colours come from course.css.
   ============================================================================ */

edit-on-github {
	display: block;
}

.edit-on-github {
	font-size: 0.85em;
	margin: 1em 0 0.25em;
	padding: 0.5em 0.75em;
	border: 1px solid var(--color-border-soft);
	border-radius: 4px;
	background-color: var(--color-panel-bg);
	opacity: 0.85;
}

.edit-on-github:hover,
.edit-on-github:focus-within {
	opacity: 1;
}

.edit-on-github-heading {
	margin: 0 0 0.25em;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.9em;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-text-muted);
}

.edit-on-github-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.3em 1em;
}

.edit-on-github-links li {
	margin: 0;
}

.edit-on-github-links a {
	text-decoration: underline;
}

/* ============================================================================
   last-updated custom element (issue #410). Fetches sitemap.xml and renders
   a small dated stamp at the bottom of each lesson page. Light DOM so it
   inherits course.css typography. Muted via opacity so it sits below the
   copyright notice without competing for attention.
   ============================================================================ */

last-updated {
	display: block;
}

.last-updated {
	text-align: center;
	margin: 0.75em 0 0;
	opacity: 0.75;
}

/* ============================================================================
   breadcrumbs custom element (MDN-style sticky secondary bar).
   Light DOM. Auto-injected by components/breadcrumbs.js as a sibling of
   .site-header so the element forms a full-width bar that sticks just below
   the header. Hosts the breadcrumb trail on the left and the theme-toggle
   on the right (mirroring MDN's layout). The .breadcrumbs-list and
   .breadcrumbs-item rules below style the trail markup itself.
   ============================================================================ */

page-breadcrumbs {
	display: block;
	position: sticky;
	top: var(--site-header-height);
	/* One under .site-header (200) so it tucks beneath when both are
	   sticky-stacked at the top of the viewport. */
	z-index: 199;
	background-color: var(--color-bg);
	border-bottom: 1px solid var(--color-border-mute);
	box-sizing: border-box;
}

.breadcrumb-bar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75em;
	padding: 0.2em 0.5em;
	min-height: 1.5em;
}

/* Empty spacer rendered on pages without a breadcrumb trail (e.g. the site
   home) so the theme-toggle still right-aligns via space-between. */
.breadcrumb-bar-spacer {
	flex: 1 1 auto;
}

/* Override the in-content nav[aria-label="Breadcrumb"] margin rule below —
   inside the sticky bar the wrapping <div> handles spacing. */
.breadcrumb-bar-inner nav.page-breadcrumbs {
	margin: 0;
}

/* Theme-toggle's own default margin-top (from the .theme-toggle rule near
   the bottom of this file) would push it off-center inside the bar. */
.breadcrumb-bar-inner .theme-toggle {
	margin-top: 0;
}

/* Only at ultra-narrow viewports (≤360px) do we stack the breadcrumb trail
   and theme toggle vertically. Above this width even a 4-level breadcrumb
   like Home › Course › Topic › Page fits on one row thanks to the leaf
   truncation rule at ≤600px below. Stacking earlier (the previous 480px
   breakpoint) wasted vertical space on common mobile sizes. */
@media (max-width: 360px) {
	.breadcrumb-bar-inner {
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 0.25em 0.5em;
	}

	.breadcrumb-bar-inner > nav.page-breadcrumbs,
	.breadcrumb-bar-inner > .breadcrumb-bar-spacer {
		flex: 1 1 100%;
	}

	.breadcrumb-bar-inner > theme-toggle,
	.breadcrumb-bar-inner > .theme-toggle {
		margin-left: auto;
	}
}

nav.page-breadcrumbs {
	font-size: 0.85em;
	color: var(--color-text-muted);
	min-width: 0;
}

.breadcrumbs-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0 0.4em;
}

.breadcrumbs-item {
	display: inline-flex;
	align-items: center;
}

.breadcrumbs-item + .breadcrumbs-item::before {
	content: "›";
	margin-right: 0.4em;
	color: var(--color-text-muted);
	opacity: 0.6;
}

.breadcrumbs-item a {
	text-decoration: none;
}

.breadcrumbs-item a:hover {
	text-decoration: underline;
}

/* Leaf is rendered as <a href="#top"> so clicking it scrolls to the page
   top. Mute its color regardless of link/visited state — the breadcrumb's
   own muted hue should win over the global a:link / a:visited rules
   (specificity 0,1,1) without `!important`. */
.breadcrumbs-current,
.breadcrumbs-current:link,
.breadcrumbs-current:visited {
	color: var(--color-text-muted);
}

/* Narrow viewports: keep the breadcrumb trail on a single row by clipping
   the current-page leaf with an ellipsis. The h1 immediately below repeats
   the leaf title in full, so truncating it here loses no information. */
@media (max-width: 600px) {
	.breadcrumbs-list {
		flex-wrap: nowrap;
		min-width: 0;
	}

	.breadcrumbs-item {
		min-width: 0;
		flex-shrink: 0;
	}

	.breadcrumbs-item:last-child {
		flex-shrink: 1;
		overflow: hidden;
	}

	.breadcrumbs-current {
		display: inline-block;
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		vertical-align: bottom;
	}
}

/* ============================================================================
   course-sidebar custom element (MDN-style left rail).
   Light DOM. Auto-injected by components/course-sidebar.js on pages within
   the COBOL course. Renders the full course outline grouped by topic, with
   the current page highlighted via the same data-active pattern page-toc
   uses for its scroll-spy.

   Layout interaction:
   - Below 1100px: hidden. The inline lesson-toc at the top of each page
     handles per-page navigation; the course index is reachable via the
     site-header logo link.
   - 1100-1399px: course-sidebar takes the left rail. If page-toc is also
     present in the DOM, it is hidden at this width (and lesson-toc is
     re-shown at the top of the page so the reader still has an in-page
     index).
   - 1400px+: three-column layout — course-sidebar left, content middle,
     page-toc right (mirrors MDN's CSS docs).
   ============================================================================ */

course-sidebar,
examples-sidebar,
exercises-sidebar {
	display: none;
}

.course-sidebar {
	font-size: 0.85em;
	line-height: 1.4;
}

.course-sidebar-heading {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.9em;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin: 0 0 0.5em;
	padding-bottom: 0.3em;
	border-bottom: 1px solid var(--color-border-soft);
}

.course-sidebar-heading a {
	text-decoration: none;
	color: inherit;
}

.course-sidebar-heading a:hover {
	text-decoration: underline;
}

.course-sidebar-topics {
	list-style: none;
	padding: 0;
	margin: 0;
}

.course-sidebar-topic {
	margin: 0 0 1em;
}

.course-sidebar-topic-label {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.85em;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: 0 0 0.25em;
	color: var(--color-text-muted);
}

.course-sidebar-topic[data-active-topic] .course-sidebar-topic-label {
	color: var(--color-text);
}

.course-sidebar-links {
	list-style: none;
	padding: 0;
	margin: 0;
}

.course-sidebar-link {
	margin: 0;
}

.course-sidebar-link a {
	display: block;
	padding: 0.25em 0 0.25em 0.7em;
	border-left: 2px solid transparent;
	text-decoration: none;
	line-height: 1.3;
}

.course-sidebar-link a:hover {
	border-left-color: var(--color-border-soft);
}

.course-sidebar-link a[data-active] {
	border-left-color: var(--color-header-bg);
	font-weight: bold;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .course-sidebar-link a[data-active] {
		border-left-color: #ff9966;
	}
}

:root[data-theme="dark"] .course-sidebar-link a[data-active] {
	border-left-color: #ff9966;
}

/* Subtle type marker so the reader can tell tutorials from exercises and
   self-assessment questions at a glance. Matches the icon legend on
   course/index.html. */
.course-sidebar-link--exercise a::after,
.course-sidebar-link--saq a::after,
.course-sidebar-link--reference a::after {
	margin-left: 0.4em;
	font-size: 0.85em;
	color: var(--color-text-muted);
	font-weight: normal;
}

.course-sidebar-link--exercise a::after {
	content: "ex";
}

.course-sidebar-link--saq a::after {
	content: "saq";
}

.course-sidebar-link--reference a::after {
	content: "ref";
}

/* Narrow-desktop band: course-sidebar is the only sidebar visible.
   The page-wrapper grid is identical in shape to the existing page-toc
   layout, just keyed on :has(course-sidebar). When :has(page-toc) ALSO
   matches at this width, the override block further down hides page-toc
   and re-shows the inline lesson-toc so the reader still has an in-page
   index. */
@media (min-width: 1100px) {
	.page-wrapper:has(course-sidebar),
	.page-wrapper:has(examples-sidebar),
	.page-wrapper:has(exercises-sidebar) {
		display: grid;
		grid-template-columns: 220px minmax(0, 715px);
		column-gap: 2em;
		max-width: 967px;
		border: none;
		align-items: start;
	}

	.page-wrapper:has(course-sidebar) > *:not(course-sidebar):not(page-toc),
	.page-wrapper:has(examples-sidebar) > *:not(examples-sidebar):not(page-toc),
	.page-wrapper:has(exercises-sidebar) > *:not(exercises-sidebar):not(page-toc) {
		grid-column: 2;
		min-width: 0;
	}

	/* Take course-sidebar out of grid flow with position: fixed.
	   Why: with grid-row: 1 / -1 (needed for sticky to work over the full
	   page), the sidebar's tall content (~820px clamped by max-height)
	   gets distributed across the grid's row tracks. On pages with many
	   direct .page-wrapper children (RelativeFiles has 36, Iteration has
	   2), the algorithm inflates one or more rows by hundreds of pixels,
	   leaving large empty bands in the content column.
	   Fixed positioning bypasses grid sizing entirely. The grid still
	   reserves the 220px first column track (empty); the sidebar visually
	   fills it via viewport-coordinate left/top. Horizontal position
	   tracks the wrapper's centered left edge:
	     wrapper-left = max(0, (viewport-width - max-width) / 2)
	   The 2-col layout uses max-width 967px so the offset is
	   `max(0px, (50vw - 967px / 2))`. The 3-col layout below overrides
	   for max-width 1199px. */
	.page-wrapper:has(course-sidebar) > course-sidebar,
	.page-wrapper:has(examples-sidebar) > examples-sidebar,
	.page-wrapper:has(exercises-sidebar) > exercises-sidebar {
		display: block;
		position: fixed;
		top: calc(var(--site-bar-height) + 1em);
		left: max(0px, calc(50vw - 967px / 2));
		width: 220px;
		max-height: calc(100vh - var(--site-bar-height) - 2em);
		overflow-y: auto;
		padding: 0.5em 0.25em;
		box-sizing: border-box;
	}
}

/* Narrow desktop with both sidebars in the DOM: hide page-toc (no room),
   re-show the inline lesson-toc / ul.toc so the reader can still jump
   between page sections. The existing :has(page-toc) rule hides those by
   default; this override (more specific via the extra :has clause) wins. */
@media (min-width: 1100px) and (max-width: 1279px) {
	.page-wrapper:has(course-sidebar):has(page-toc) > page-toc {
		display: none;
	}

	.page-wrapper:has(course-sidebar):has(page-toc) lesson-toc,
	.page-wrapper:has(course-sidebar):has(page-toc) ul.toc {
		display: block;
	}

	.page-wrapper:has(course-sidebar):has(page-toc) lesson-toc + hr,
	.page-wrapper:has(course-sidebar):has(page-toc) ul.toc + hr {
		display: block;
	}
}

/* Wide-desktop three-column layout: course-sidebar left, content middle,
   page-toc right. Mirrors MDN's CSS reference pages. */
@media (min-width: 1280px) {
	.page-wrapper:has(course-sidebar):has(page-toc) {
		grid-template-columns: 220px minmax(0, 715px) 200px;
		max-width: 1199px;
	}

	/* Override the 2-col left offset for the wider 3-col max-width. */
	.page-wrapper:has(course-sidebar):has(page-toc) > course-sidebar {
		left: max(0px, calc(50vw - 1199px / 2));
	}

	/* In the 3-col layout page-toc moves to the right column. Override the
	   fixed-positioning left offset so it tracks the wrapper's right edge:
	     wrapper-right = 50vw + 1199px / 2
	     page-toc.left = wrapper-right - 200px (page-toc width)
	*/
	.page-wrapper:has(course-sidebar):has(page-toc) > page-toc {
		left: max(0px, calc(50vw + 1199px / 2 - 200px));
	}

	.page-wrapper:has(course-sidebar):has(page-toc) > *:not(course-sidebar):not(page-toc) {
		grid-column: 2;
	}
}

@media print {
	course-sidebar,
	examples-sidebar,
	exercises-sidebar,
	page-breadcrumbs {
		display: none !important;
	}
}

/* Fixed back-link pill on iframe-only viewer pages (lectures and PPZ slide decks) */
.viewer-back-link {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 9999;
	background: #fff;
	padding: 4px 8px;
	border: 1px solid #999;
	border-radius: 3px;
	font-family: sans-serif;
	font-size: 0.85rem;
	text-decoration: none;
	color: #333;
}

[data-theme="dark"] .viewer-back-link {
	background: #1a1a1a;
	border-color: #555;
	color: #e0e0e0;
}

/* Sample data viewer (examples/*.html) */

.sample-data {
	border: 1px solid var(--color-border-soft);
	border-radius: 3px;
	background-color: var(--color-code-bg);
	margin: 1rem 0;
}

.sample-data summary {
	cursor: pointer;
	padding: 3px 6px;
	list-style: none;
}

.sample-data summary::before {
	content: "▶ ";
	font-size: 0.7em;
}

details[open].sample-data summary::before {
	content: "▼ ";
}

.sample-data > pre {
	padding: 4px 8px;
	margin: 0;
	overflow-x: auto;
	white-space: pre;
}