.cbchg-app {
	max-width: 820px;
	margin: 0 auto;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	color: #1f2937;
}

.cbchg-selector-card {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	padding: 24px;
	margin-bottom: 24px;
}

/* ---------- Track toggle (Pre-School / Primary / JSS / Senior / Professional) ---------- */
.cbchg-track-toggle {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 14px;
}
.cbchg-track-btn {
	flex: 1 1 auto;
	min-width: 0;
	padding: 8px 10px;
	border: 1px solid #cbd5e1;
	background: #fff;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 600;
	color: #475569;
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.cbchg-track-btn.is-active { background: #0f766e; border-color: #0f766e; color: #fff; }
.cbchg-track-btn:hover:not(.is-active) { border-color: #0f766e; color: #0f766e; }
.cbchg-mode-toggle[hidden] { display: none; }

/* ---------- Mode toggle ---------- */
.cbchg-mode-toggle {
	display: flex;
	gap: 8px;
	margin-bottom: 18px;
	background: #f1f5f9;
	border-radius: 10px;
	padding: 4px;
}
.cbchg-mode-btn {
	flex: 1;
	padding: 10px 12px;
	border: none;
	background: transparent;
	border-radius: 7px;
	font-size: 14px;
	font-weight: 600;
	color: #475569;
	cursor: pointer;
}
.cbchg-mode-btn.is-active { background: #fff; color: #0f766e; box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
.cbchg-mode-btn:hover:not(.is-active) { color: #0f766e; }
.cbchg-mode-panel[hidden] { display: none; }

.cbchg-hint { font-weight: 400; color: #64748b; font-size: 12px; }

.cbchg-field input[type="number"] {
	width: 100%;
	padding: 8px 10px;
	border-radius: 6px;
	border: 1px solid #cbd5e1;
	font-size: 14px;
	background: #fff;
	box-sizing: border-box;
}

/* ---------- Warnings banner (partial booklet failures) ---------- */
.cbchg-warnings {
	background: #fffbeb;
	border: 1px solid #fde68a;
	color: #92400e;
	padding: 12px 16px;
	border-radius: 8px;
	margin-bottom: 20px;
	font-size: 13px;
}
.cbchg-warnings ul { margin: 6px 0 0; padding-left: 18px; }
.cbchg-warnings li { margin-bottom: 3px; }

/* ---------- Booklet page-fit banner (shown after a booklet is generated
   when it falls short of - or lands exactly on - the configured target
   page count; see evaluateBookletFit() in frontend.js) ---------- */
.cbchg-booklet-fit {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	background: #eff6ff;
	border: 1px solid #bfdbfe;
	color: #1e40af;
	padding: 12px 16px;
	border-radius: 8px;
	margin-bottom: 20px;
	font-size: 13px;
	line-height: 1.5;
}
.cbchg-booklet-fit[hidden] { display: none; }
.cbchg-fit-text { flex: 1 1 240px; }
.cbchg-fit-hint { color: #3b5bab; font-style: italic; }
.cbchg-fit-btn {
	flex: 0 0 auto;
	width: auto;
	padding: 8px 14px;
	background: #1d4ed8;
	color: #fff;
	border: none;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
}
.cbchg-fit-btn:hover { background: #1e3a8a; }

/* ---------- Booklet tree builder ---------- */
.cbchg-tree {
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	background: #fff;
	padding: 10px 12px;
	max-height: 360px;
	overflow-y: auto;
}
.cbchg-tree-placeholder { color: #94a3b8; font-size: 13px; margin: 4px 0; }
.cbchg-tree-area { margin-bottom: 10px; }
.cbchg-tree-area:last-child { margin-bottom: 0; }
.cbchg-tree-area-label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	font-size: 14px;
	color: #0f766e;
	cursor: pointer;
	padding: 4px 0;
}
.cbchg-tree-strands { margin-left: 22px; border-left: 2px solid #e2e8f0; padding-left: 12px; }
.cbchg-tree-strand { margin: 4px 0; }
.cbchg-tree-strand-label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	font-size: 13px;
	color: #1f2937;
	cursor: pointer;
	padding: 3px 0;
}
.cbchg-tree-substrands { margin-left: 22px; padding: 2px 0 4px; }
.cbchg-tree-sub-label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	color: #334155;
	cursor: pointer;
	padding: 2px 0;
}
.cbchg-tree-hint { font-size: 12px; color: #94a3b8; font-style: italic; }
.cbchg-tree input[type="checkbox"] { width: 15px; height: 15px; flex-shrink: 0; }

.cbchg-title { margin: 0 0 4px; font-size: 22px; }
.cbchg-subtitle { margin: 0 0 20px; color: #64748b; font-size: 14px; }

.cbchg-field { margin-bottom: 14px; }
.cbchg-field label { display: block; font-weight: 600; margin-bottom: 4px; font-size: 13px; }
.cbchg-field select {
	width: 100%;
	padding: 8px 10px;
	border-radius: 6px;
	border: 1px solid #cbd5e1;
	font-size: 14px;
	background: #fff;
}
.cbchg-field select:disabled { background: #f1f5f9; color: #94a3b8; }

.cbchg-btn {
	width: 100%;
	padding: 12px;
	background: #0f766e;
	color: #fff;
	border: none;
	border-radius: 6px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	margin-top: 6px;
}
.cbchg-btn:disabled { background: #94a3b8; cursor: not-allowed; }
.cbchg-btn:not(:disabled):hover { background: #0d5a54; }

.cbchg-btn-secondary {
	background: #fff;
	color: #0f766e;
	border: 2px solid #0f766e;
	margin-bottom: 16px;
}
.cbchg-btn-secondary:hover { background: #f0fdfa; }

.cbchg-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
	font-size: 14px;
	cursor: pointer;
}

.cbchg-link-btn {
	display: block;
	background: none;
	border: none;
	color: #0f766e;
	text-decoration: underline;
	font-size: 13px;
	cursor: pointer;
	padding: 8px 0 0;
	margin: 0;
}
.cbchg-link-btn:hover { color: #0d5a54; }
.cbchg-link-btn[hidden] { display: none; }

/* ---------- History panel ---------- */
.cbchg-history-loading { color: #64748b; font-size: 14px; padding: 12px 0; }
.cbchg-history-section { margin-bottom: 24px; }
.cbchg-history-section:last-child { margin-bottom: 0; }
.cbchg-history-heading { font-size: 15px; margin: 0 0 10px; color: #1f2937; }
.cbchg-history-empty { color: #94a3b8; font-size: 13px; margin: 4px 0 14px; }
.cbchg-history-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.cbchg-history-row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 10px 12px;
}
.cbchg-history-row-booklet { padding-left: 14px; }
.cbchg-history-check { display: flex; align-items: center; padding-top: 2px; }
.cbchg-history-check input { width: 16px; height: 16px; }
.cbchg-history-info { flex: 1; min-width: 0; }
.cbchg-history-title { font-weight: 600; font-size: 13.5px; color: #1f2937; }
.cbchg-history-meta { font-size: 12px; color: #64748b; margin-top: 2px; }
.cbchg-history-row .cbchg-link-btn { padding: 0; flex-shrink: 0; align-self: center; }
#cbchg-history-combine-btn { max-width: 320px; }

.cbchg-loading { text-align: center; padding: 40px 0; color: #475569; }
.cbchg-spinner {
	width: 34px; height: 34px;
	border: 4px solid #e2e8f0;
	border-top-color: #0f766e;
	border-radius: 50%;
	margin: 0 auto 12px;
	animation: cbchg-spin 0.8s linear infinite;
}
@keyframes cbchg-spin { to { transform: rotate(360deg); } }

.cbchg-error {
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #b91c1c;
	padding: 12px 16px;
	border-radius: 8px;
	margin-bottom: 20px;
	font-size: 14px;
}

/* Printable paper - now just a transparent wrapper around the real
   page sheets built by buildPagePreview() in frontend.js; each
   .cbchg-page below carries the actual paper look (background,
   border, shadow, page-sized padding) so what you see on screen is
   what will print/PDF, one physical page at a time. */
.cbchg-paper {
	background: transparent;
	border: none;
	box-shadow: none;
	padding: 0;
	font-family: var(--cbchg-font-family, inherit);
	font-size: var(--cbchg-font-size, inherit);
}

/* Study Notes view (Professional track) - plain readable prose, not a
   paper-style question layout, so it gets its own light typographic
   treatment layered on top of the shared .cbchg-paper reset. */
.cbchg-notes {
	max-width: 780px;
	margin: 0 auto;
	line-height: 1.6;
	color: #1f2937;
}
.cbchg-notes-header {
	border-bottom: 2px solid #e5e7eb;
	margin-bottom: 16px;
	padding-bottom: 10px;
}
.cbchg-notes-header h2 {
	margin: 0 0 4px;
}
.cbchg-notes-meta {
	margin: 0;
	color: #6b7280;
	font-size: 0.9em;
}
.cbchg-notes h3, .cbchg-notes h4, .cbchg-notes h5 {
	margin: 22px 0 8px;
	color: #111827;
}
.cbchg-notes p {
	margin: 0 0 12px;
}
.cbchg-notes ul {
	margin: 0 0 12px;
	padding-left: 22px;
}
.cbchg-notes li {
	margin-bottom: 6px;
}

/* ---------------------------------------------------------------
 * PAGE PREVIEW - real, page-sized sheets stacked with a gap between
 * them so you can see (and scroll through) exactly how many pages a
 * layout produces, with columns rendered exactly as they'll print -
 * this is what item "on page preview, even for 2 columns" and
 * "booklet-style pagination" refer to.
 * ------------------------------------------------------------- */
.cbchg-page-preview {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
}
.cbchg-page {
	position: relative;
	background: #fff;
	border: 1px solid #e2e8f0;
	box-shadow: 0 2px 10px rgba(0,0,0,0.08);
	padding: 68px; /* ~18mm on-screen preview - keep in sync with print @media rule and PAGE_PADDING in frontend.js */
	box-sizing: border-box;
	width: 100%;
	max-width: 794px;   /* A4 default */
	overflow: hidden;
}
.cbchg-page[data-page-size="A3"]     { max-width: 1123px; }
.cbchg-page[data-page-size="Letter"] { max-width: 816px; }
/* Booklets are dense, multi-page documents (up to 30 pages) rather
   than a single one-off practice sheet, so they get a tighter page
   margin - more usable content area per page, less wasted white
   border, without looking cramped. Must stay in sync with
   PAGE_PADDING_BOOKLET in frontend.js, which uses this same value
   when working out how much content fits per page. */
.cbchg-page-booklet { padding: 53px; } /* ~14mm on-screen preview - keep in sync with PAGE_PADDING_BOOKLET in frontend.js */
.cbchg-page-number {
	position: absolute;
	bottom: 10px;
	right: 16px;
	font-size: 10px;
	color: #94a3b8;
}
#cbchg-page-count {
	font-size: 12.5px;
	color: #475569;
	font-weight: 600;
	margin-left: 8px;
}

/* ---------------------------------------------------------------
 * LAYOUT PANEL (paper size / columns / font / header) - none of
 * these values are hardcoded, they're read from and written to
 * wp_cbchg_paper_templates via the Layout panel in frontend.js.
 * ------------------------------------------------------------- */
.cbchg-layout-panel {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 18px;
	margin-bottom: 16px;
}
.cbchg-layout-title { margin: 0 0 12px; font-size: 15px; }
.cbchg-layout-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cbchg-layout-row label { flex: 0 0 170px; font-size: 13px; color: #334155; }
.cbchg-layout-row select,
.cbchg-layout-row input,
.cbchg-layout-row textarea {
	flex: 1;
	padding: 6px 8px;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	font-size: 13px;
}
.cbchg-layout-actions { display: flex; gap: 12px; margin-top: 4px; }

.cbchg-paper-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }

.cbchg-custom-header { text-align: center; margin-bottom: 14px; }

/* ---------------------------------------------------------------
 * Column layout - explicit grid, not CSS multi-column.
 *
 * Each "row" of columns is built in JS (renderPaper -> buildColumnRow)
 * from a literal slice of the question list, so "Questions per column"
 * is guaranteed exactly (e.g. 9/9), and a tall diagram in one question
 * can no longer throw off where the other column's items land - which
 * is what happened with the old `column-count` auto-balance approach.
 * ------------------------------------------------------------- */
.cbchg-col-row {
	display: grid;
	grid-template-columns: repeat(var(--cbchg-row-columns, 1), 1fr);
	margin-bottom: 10px;
}
.cbchg-col { min-width: 0; padding: 0 16px; }
.cbchg-col:first-child { padding-left: 0; }
.cbchg-col:last-child { padding-right: 0; }
.cbchg-paper.cbchg-booklet .cbchg-col { padding: 0 10px; }
.cbchg-paper.cbchg-booklet .cbchg-col:first-child { padding-left: 0; }
.cbchg-paper.cbchg-booklet .cbchg-col:last-child { padding-right: 0; }
/* The requested visible line between columns. */
.cbchg-col:not(:last-child) {
	border-right: 1px solid #cbd5e1;
}
.cbchg-paper .cbchg-question { break-inside: avoid; page-break-inside: avoid; }

/* ---------------------------------------------------------------
 * Manual layout additions: a hard page break the teacher placed
 * after a specific question number, and inserted non-question
 * blocks (cloze passage / AI topic set / image / free note) - see
 * renderQuestionRuns() in frontend.js. The break element is a
 * zero-height marker on screen; print/PDF (which is just this same
 * markup run through window.print(), see the download button
 * handler) is what actually turns it into a new sheet.
 * ------------------------------------------------------------- */
.cbchg-page-break { height: 0; margin: 0; }
@media print {
	.cbchg-page-break { break-after: page; page-break-after: always; }
}
.cbchg-inserted-block {
	margin: 14px 0;
	padding: 12px 16px;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	break-inside: avoid;
	page-break-inside: avoid;
}
.cbchg-block-image { text-align: center; }
.cbchg-block-image img { max-width: 100%; height: auto; }
.cbchg-block-cloze, .cbchg-block-topic { background: #f8fafc; }

/* ---------------------------------------------------------------
 * Professional-mode Notes Booklet (combined notes + revision
 * questions across several topics into one continuously-flowing
 * document - see renderNotesBooklet() in frontend.js). Deliberately
 * NO forced page break between chapters, so short topics don't each
 * waste a trailing page; only the heading + its first block are kept
 * together so a heading never gets stranded alone at a page bottom.
 * ------------------------------------------------------------- */
.cbchg-notes-booklet-card { margin-top: 16px; }
.cbchg-booklet-toc { margin-bottom: 24px; break-after: page; page-break-after: always; }
.cbchg-booklet-toc ol { padding-left: 20px; }
.cbchg-booklet-chapter { margin-bottom: 22px; }
.cbchg-chapter-head { break-inside: avoid; page-break-inside: avoid; }
.cbchg-chapter-head h3 { margin-bottom: 2px; }

/* ---------------------------------------------------------------
 * Monetization: wallet balance chip + pay-to-download modal (see
 * the CBCHG_Wallet JS module in frontend.js). Kept intentionally
 * simple/self-contained rather than pulling in a modal library.
 * ------------------------------------------------------------- */
.cbchg-wallet-row {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
	flex-wrap: wrap;
}
.cbchg-wallet-balance {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	font-weight: 600;
	font-size: 0.9em;
	background: #eef2ff;
	border: 1px solid #c7d2fe;
	border-radius: 999px;
	color: #3730a3;
	transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
	white-space: nowrap;
}
.cbchg-wallet-balance::before {
	content: "\1F4B3"; /* credit card emoji as a lightweight, dependency-free icon */
	font-size: 0.95em;
	line-height: 1;
}
.cbchg-wallet-balance.is-low {
	background: #fff1f2;
	border-color: #fecdd3;
	color: #9f1239;
}
.cbchg-wallet-balance.is-updated {
	transform: scale(1.06);
}
.cbchg-wallet-recover-link {
	font-size: 0.8em;
	padding: 6px 4px; /* larger tap target than the text alone - see min-height below */
	min-height: 32px;
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
}
@media (max-width: 640px) {
	.cbchg-wallet-row {
		margin-left: 0;
		width: 100%;
		justify-content: center;
		flex-direction: column;
		gap: 6px;
	}
	.cbchg-wallet-balance {
		width: 100%;
		justify-content: center;
	}
	.cbchg-wallet-recover-link {
		width: 100%;
		justify-content: center;
		min-height: 40px; /* comfortable thumb target on mobile */
		font-size: 0.85em;
	}
}
.cbchg-pay-modal {
	position: fixed; inset: 0; z-index: 9999;
	background: rgba(15, 23, 42, 0.55);
	display: flex; align-items: center; justify-content: center;
	padding: 16px; /* keeps the modal off the screen edges on small phones */
	box-sizing: border-box;
}
.cbchg-pay-modal-inner {
	background: #fff; border-radius: 10px; padding: 24px;
	max-width: 360px; width: 100%;
	max-height: calc(100vh - 32px); overflow-y: auto; /* scrollable if a keyboard covers part of it */
	box-shadow: 0 10px 40px rgba(0,0,0,0.25);
	box-sizing: border-box;
}
.cbchg-pay-modal-inner h3 { margin-top: 0; }
.cbchg-pay-modal-inner input[type="email"],
.cbchg-pay-modal-inner input[type="text"] {
	width: 100%; padding: 10px; margin: 10px 0;
	border: 1px solid #cbd5e1; border-radius: 6px;
	font-size: 16px; /* 16px+ stops iOS Safari auto-zooming the page on focus */
	box-sizing: border-box;
}
.cbchg-pay-modal-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
@media (max-width: 480px) {
	.cbchg-pay-modal-actions {
		flex-direction: column-reverse; /* primary action on top, thumb-reachable */
	}
	.cbchg-pay-modal-actions button {
		width: 100%;
		min-height: 44px; /* Apple/Google's recommended minimum tap target */
	}
}

/* ---------------------------------------------------------------
 * Notes truncation notice - shown under a free preview of
 * Professional-mode study notes once the free-preview word budget
 * runs out, prompting the visitor to pay to see the rest (see
 * CBCHG_Wallet JS module + handle_get_topic_notes() server-side).
 * ------------------------------------------------------------- */
.cbchg-notes-truncated-notice {
	margin-top: 4px;
	padding: 16px 18px;
	border: 1px dashed #c7d2fe;
	border-radius: 10px;
	background: linear-gradient(180deg, rgba(238,242,255,0.6), rgba(238,242,255,0.15));
	text-align: center;
}
.cbchg-notes-truncated-notice p {
	margin: 0 0 10px;
	color: #3730a3;
	font-size: 0.95em;
}
.cbchg-notes-unlock-btn {
	font: inherit;
	font-weight: 600;
	color: #fff;
	background: #4338ca;
	border: none;
	border-radius: 8px;
	padding: 8px 18px;
	cursor: pointer;
}
.cbchg-notes-unlock-btn:hover { background: #3730a3; }
.cbchg-notes-unlock-btn:disabled { opacity: 0.6; cursor: default; }

 * paper is the visitor's own forked/editable copy - see
 * currentPaper.is_fork in frontend.js).
 * ------------------------------------------------------------- */
.cbchg-q-edit-controls { display: flex; gap: 10px; margin-top: 6px; }
.cbchg-q-edit-controls button {
	font-size: 12px;
	color: #0f766e;
	background: none;
	border: 1px dashed #0f766e;
	border-radius: 6px;
	padding: 3px 8px;
	cursor: pointer;
}
.cbchg-edit-textarea, .cbchg-edit-marks {
	width: 100%;
	font: inherit;
	padding: 4px 6px;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
}
.cbchg-edit-marks { width: 70px; }

.cbchg-custom-diagram-wrap { margin: 10px 0; }
.cbchg-custom-diagram-wrap[data-align="center"] { text-align: center; }
.cbchg-custom-diagram-wrap[data-align="left"] { text-align: left; }
.cbchg-custom-diagram-wrap[data-align="right"] { text-align: right; }

/* Self-contained 3x3 grid so top/left/right/bottom labels sit right
   next to the image itself (not absolutely positioned), which means
   they can never overflow into a neighbouring print column even when
   the image is small or the column is narrow. */
.cbchg-diagram-grid {
	display: inline-grid;
	grid-template-columns: minmax(0,auto) auto minmax(0,auto);
	grid-template-rows: auto auto auto;
	align-items: center;
	justify-items: center;
	gap: 2px 8px;
	max-width: 100%;
}
.cbchg-diagram-grid .cbchg-lbl { display: none; font-size: 11px; font-weight: 600; color: #1f2937; line-height: 1.25; max-width: 110px; }
.cbchg-diagram-grid .cbchg-lbl.has-text { display: block; }
.cbchg-diagram-grid .cbchg-lbl-top    { grid-column: 2; grid-row: 1; text-align: center; }
.cbchg-diagram-grid .cbchg-lbl-left   { grid-column: 1; grid-row: 2; text-align: right; }
.cbchg-diagram-grid .cbchg-img-cell   { grid-column: 2; grid-row: 2; position: relative; display: inline-block; }
.cbchg-diagram-grid .cbchg-lbl-right  { grid-column: 3; grid-row: 2; text-align: left; }
.cbchg-diagram-grid .cbchg-lbl-bottom { grid-column: 2; grid-row: 3; text-align: center; }
/* Small leader tick pointing from each label back toward the image. */
.cbchg-lbl-top::after    { content: ""; display: block; width: 1px; height: 8px; background: #94a3b8; margin: 2px auto 0; }
.cbchg-lbl-bottom::before{ content: ""; display: block; width: 1px; height: 8px; background: #94a3b8; margin: 0 auto 2px; }
.cbchg-lbl-left::after   { content: "\2192"; margin-left: 4px; color: #94a3b8; }
.cbchg-lbl-right::before { content: "\2190"; margin-right: 4px; color: #94a3b8; }

/* ---------------------------------------------------------------
 * Pin labels - numbered markers pointing at an exact spot on the
 * image (e.g. labelling the chambers of a heart), plus a matching
 * numbered legend below. Positioned as % of the image's own box, so
 * they scale correctly whatever width/column the image ends up at,
 * and can never spill into a neighbouring print column.
 * ------------------------------------------------------------- */
.cbchg-img-cell.cbchg-pins-editable .cbchg-custom-diagram { cursor: crosshair; }
.cbchg-diagram-pin-layer { position: absolute; inset: 0; pointer-events: none; }
.cbchg-diagram-pin {
	position: absolute;
	width: 20px;
	height: 20px;
	transform: translate(-50%, -50%);
	background: #0f766e;
	color: #fff;
	border: 2px solid #fff;
	border-radius: 50%;
	font-size: 10.5px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 1px 3px rgba(0,0,0,0.35);
	pointer-events: auto;
	touch-action: none;
	user-select: none;
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}
.cbchg-diagram-pin.is-draggable { cursor: grab; }
.cbchg-diagram-pin.is-draggable:active { cursor: grabbing; }

.cbchg-diagram-pin-hint {
	font-size: 11px;
	color: #64748b;
	font-style: italic;
	margin-top: 6px;
}

.cbchg-diagram-legend { list-style: none; margin: 8px 0 0; padding: 0; text-align: left; font-size: 12px; }
.cbchg-diagram-legend li { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.cbchg-diagram-legend-num {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #0f766e;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}
.cbchg-diagram-legend-text { flex: 1; }
.cbchg-pin-text-input {
	width: 100%;
	padding: 3px 6px;
	border: 1px solid #cbd5e1;
	border-radius: 4px;
	font-size: 12px;
	font-family: inherit;
	box-sizing: border-box;
}
.cbchg-pin-delete-btn {
	flex: 0 0 auto;
	background: none;
	border: none;
	color: #b91c1c;
	cursor: pointer;
	font-size: 15px;
	line-height: 1;
	padding: 2px 4px;
}

.cbchg-custom-diagram {
	width: var(--cbchg-img-width, 45%);
	max-width: 100%;
	height: auto;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	display: inline-block;
}
.cbchg-diagram-caption {
	font-size: 12px;
	font-style: italic;
	color: #475569;
	margin-top: 4px;
}
.cbchg-diagram-caption:empty { display: none; }

/* Resize/reposition/label controls - only shown on the visitor's own
   forked (editable) copy, next to the diagram; hidden on print. */
.cbchg-diagram-controls {
	margin-top: 8px;
	padding: 8px 10px;
	background: #f8fafc;
	border: 1px dashed #cbd5e1;
	border-radius: 6px;
	font-size: 12px;
}
.cbchg-diagram-controls-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.cbchg-diagram-controls-row:last-child { margin-bottom: 0; }
.cbchg-diagram-controls label { flex: 0 0 auto; color: #334155; font-weight: 600; }
.cbchg-diagram-size-slider { flex: 1; }
.cbchg-diagram-align-group { display: flex; gap: 4px; }
.cbchg-diagram-align-btn {
	font-size: 11px;
	padding: 3px 8px;
	border: 1px solid #cbd5e1;
	background: #fff;
	border-radius: 4px;
	cursor: pointer;
	color: #334155;
}
.cbchg-diagram-align-btn.is-active { background: #0f766e; color: #fff; border-color: #0f766e; }
.cbchg-diagram-caption-input {
	flex: 1;
	padding: 4px 6px;
	border: 1px solid #cbd5e1;
	border-radius: 4px;
	font-size: 12px;
	font-family: inherit;
}
.cbchg-custom-diagram-wrap .cbchg-remove-diagram-btn {
	display: inline-block;
	margin-top: 6px;
	font-size: 12px;
	color: #b91c1c;
	background: none;
	border: none;
	cursor: pointer;
	text-decoration: underline;
}

.cbchg-diagram-label-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
	margin-top: 2px;
}
.cbchg-diagram-label-field { display: flex; flex-direction: column; gap: 2px; }
.cbchg-diagram-label-field span { font-size: 10px; text-transform: uppercase; letter-spacing: 0.3px; color: #64748b; font-weight: 700; }
.cbchg-diagram-label-field input {
	padding: 4px 6px;
	border: 1px solid #cbd5e1;
	border-radius: 4px;
	font-size: 12px;
	font-family: inherit;
}

/* ---------- Layout "Apply" confirmation toast ---------- */
.cbchg-toast {
	position: fixed;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	background: #0f766e;
	color: #fff;
	padding: 10px 18px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	box-shadow: 0 4px 14px rgba(0,0,0,0.2);
	z-index: 9999;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease;
}
.cbchg-toast.is-visible { opacity: 1; }

/* ---------------------------------------------------------------
 * Image picker modal ("Add image" on a question) - Upload / Media
 * Library / Search Online tabs. Shared by whichever question
 * triggered it; see openImageModal()/closeImageModal() in
 * frontend.js.
 * ------------------------------------------------------------- */
html.cbchg-modal-open { overflow: hidden; }

.cbchg-modal {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}
.cbchg-modal[hidden] { display: none; }
.cbchg-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.55);
}
.cbchg-modal-box {
	position: relative;
	background: #fff;
	border-radius: 12px;
	width: 100%;
	max-width: 560px;
	max-height: 86vh;
	display: flex;
	flex-direction: column;
	box-shadow: 0 10px 40px rgba(0,0,0,0.25);
	overflow: hidden;
}
.cbchg-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid #e2e8f0;
	flex: 0 0 auto;
}
.cbchg-modal-header h3 { margin: 0; font-size: 16px; color: #1f2937; }
.cbchg-modal-close {
	background: none;
	border: none;
	font-size: 22px;
	line-height: 1;
	color: #64748b;
	cursor: pointer;
	padding: 2px 6px;
}
.cbchg-modal-close:hover { color: #1f2937; }

.cbchg-modal-tabs {
	display: flex;
	gap: 4px;
	padding: 12px 20px 0;
	flex: 0 0 auto;
	border-bottom: 1px solid #e2e8f0;
}
.cbchg-modal-tab {
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	padding: 8px 4px 10px;
	margin-right: 16px;
	font-size: 13px;
	font-weight: 600;
	color: #64748b;
	cursor: pointer;
}
.cbchg-modal-tab.is-active { color: #0f766e; border-bottom-color: #0f766e; }

.cbchg-modal-panel { padding: 16px 20px; overflow-y: auto; flex: 1 1 auto; }
.cbchg-modal-hint { font-size: 12px; color: #64748b; margin: 0 0 10px; }

.cbchg-modal-upload-drop {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 120px;
	border: 2px dashed #cbd5e1;
	border-radius: 8px;
	color: #475569;
	font-size: 13px;
	cursor: pointer;
	text-align: center;
}
.cbchg-modal-upload-drop:hover { border-color: #0f766e; color: #0f766e; background: #f0fdfa; }

.cbchg-modal-search-row { display: flex; gap: 8px; margin-bottom: 14px; }
.cbchg-modal-search-row input[type="search"] {
	flex: 1;
	padding: 8px 10px;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	font-size: 13px;
}
.cbchg-modal-search-row select {
	flex: 0 0 auto;
	padding: 8px 10px;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	font-size: 13px;
	background: #fff;
}
.cbchg-modal-search-row .cbchg-btn { width: auto; margin: 0; padding: 8px 16px; font-size: 13px; }

.cbchg-modal-results {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
	gap: 8px;
}
.cbchg-modal-empty { grid-column: 1 / -1; color: #64748b; font-size: 13px; text-align: center; padding: 24px 0; }

.cbchg-modal-thumb {
	position: relative;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 8px;
	overflow: hidden;
	cursor: pointer;
	background: #f1f5f9;
	aspect-ratio: 1 / 1;
	display: block;
}
.cbchg-modal-thumb:hover { border-color: #0f766e; }
.cbchg-modal-thumb:disabled { opacity: 0.5; cursor: not-allowed; }
.cbchg-modal-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cbchg-modal-credit {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(15, 23, 42, 0.65);
	color: #fff;
	font-size: 10px;
	padding: 3px 6px;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#cbchg-modal-library-more, #cbchg-modal-online-more { margin: 12px auto 0; text-align: center; }

.cbchg-modal-status {
	margin: 0 20px 16px;
	padding: 8px 12px;
	border-radius: 6px;
	background: #f0fdfa;
	color: #0f766e;
	font-size: 12.5px;
	flex: 0 0 auto;
}
.cbchg-modal-status.is-error { background: #fef2f2; color: #b91c1c; }

@media screen and (max-width: 480px) {
	.cbchg-modal { padding: 0; }
	.cbchg-modal-box { max-width: none; max-height: 100vh; height: 100%; border-radius: 0; }
	.cbchg-modal-search-row { flex-wrap: wrap; }
	.cbchg-modal-search-row select { flex: 1 1 100%; }
}

.cbchg-paper-header { text-align: center; border-bottom: 2px solid #1f2937; padding-bottom: 14px; margin-bottom: 20px; }
.cbchg-paper-header h2 { margin: 0 0 6px; font-size: 20px; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; }
.cbchg-paper-meta { display: flex; justify-content: center; gap: 24px; font-size: 13px; color: #475569; }

.cbchg-learner-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px 30px;
	margin: 18px 0 22px;
	font-size: 14px;
}
.cbchg-blank-line { display: inline-block; border-bottom: 1px solid #1f2937; min-width: 160px; margin-left: 6px; }
.cbchg-label { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

.cbchg-instructions { font-size: 13px; font-style: italic; color: #475569; margin-bottom: 22px; }

.cbchg-section { margin-bottom: 28px; }
.cbchg-section-title { font-size: 16px; font-weight: 700; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; border-bottom: 1px solid #cbd5e1; padding-bottom: 6px; margin-bottom: 4px; }
.cbchg-section-instructions { font-size: 13px; font-style: italic; color: #64748b; margin-bottom: 14px; }

.cbchg-question { margin-bottom: 20px; page-break-inside: avoid; }
.cbchg-q-row { display: flex; justify-content: space-between; gap: 16px; font-size: 14.5px; }
.cbchg-q-text { flex: 1; }
.cbchg-q-marks { flex-shrink: 0; font-weight: 600; color: #0f766e; white-space: nowrap; }

.cbchg-options { list-style: none; margin: 8px 0 0 18px; padding: 0; }
.cbchg-options li { margin-bottom: 4px; font-size: 14px; }

.cbchg-answer-lines { margin-top: 8px; }
.cbchg-answer-lines .line { border-bottom: 1px solid #cbd5e1; height: 22px; }

.cbchg-marking {
	margin-top: 10px;
	background: #f0fdf4;
	border: 2px solid #16a34a;
	border-radius: 6px;
	padding: 10px 14px;
	font-size: 13px;
}
.cbchg-marking-heading {
	font-weight: 700;
	color: #166534;
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: 2px;
	font-size: 11px;
	letter-spacing: 0.5px;
	margin-bottom: 6px;
}
.cbchg-marking strong { color: #166534; }
.cbchg-rubric-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	margin-top: 8px;
}
.cbchg-rubric-cell { background: #fff; border: 1px solid #d1fae5; border-radius: 4px; padding: 6px 8px; font-size: 12px; }
.cbchg-rubric-cell b { display: block; margin-bottom: 3px; font-size: 11px; color: #166534; }

/* ---------- Grade-band font treatments ---------- */
/* "upper" = Grade 4-10: formal KNEC exam look - serif body text, compact size. */
.cbchg-paper.cbchg-band-upper {
	font-family: "Times New Roman", Times, Georgia, serif;
	font-size: 13px;
	line-height: 1.5;
}
.cbchg-paper.cbchg-band-upper .cbchg-paper-header h2 { font-family: "Times New Roman", Times, serif; font-size: 18px; letter-spacing: 0.5px; }
.cbchg-paper.cbchg-band-upper .cbchg-section-title { font-family: Arial, Helvetica, sans-serif; }

/* "early_years" = PP1-Grade 3: bold, rounded, large-print worksheet look. */
.cbchg-paper.cbchg-band-early_years {
	font-family: Verdana, "Comic Sans MS", "Segoe Print", "Trebuchet MS", sans-serif;
	font-size: 19px;
	line-height: 1.7;
}
.cbchg-paper.cbchg-band-early_years .cbchg-paper-header h2 {
	font-family: Verdana, "Comic Sans MS", "Trebuchet MS", sans-serif;
	font-weight: 800;
	font-size: 26px;
}
.cbchg-paper.cbchg-band-early_years .cbchg-section-title {
	font-size: 19px;
	text-decoration: underline;
	text-transform: none;
	border-bottom: none;
}
.cbchg-paper.cbchg-band-early_years .cbchg-q-text { font-weight: 600; }
.cbchg-paper.cbchg-band-early_years .cbchg-instructions,
.cbchg-paper.cbchg-band-early_years .cbchg-section-instructions { font-size: 15px; }

/* ---------- fill_blank ---------- */
.cbchg-blank {
	display: inline-block;
	min-width: 34px;
	border-bottom: 2px solid #1f2937;
	margin: 0 3px;
	height: 1em;
	vertical-align: -3px;
}
.cbchg-band-early_years .cbchg-blank { min-width: 46px; border-bottom-width: 3px; }

/* ---------- match_columns ---------- */
.cbchg-match-columns { margin-top: 10px; }
.cbchg-match-row {
	display: grid;
	grid-template-columns: 1fr 60px 1fr;
	align-items: center;
	gap: 4px;
	margin-bottom: 10px;
}
.cbchg-match-item { font-weight: 600; }
.cbchg-match-right { text-align: right; }
.cbchg-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; vertical-align: middle; }
.cbchg-match-space { border-bottom: 1px dotted #94a3b8; height: 1px; align-self: center; }
.cbchg-match-img { width: 44px; height: 44px; object-fit: contain; vertical-align: middle; }

/* ---------- circle_choice ---------- */
.cbchg-circle-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; }
.cbchg-circle-item {
	display: inline-block;
	border: 2px solid transparent;
	padding: 2px 10px;
	border-radius: 50%;
	font-weight: 700;
	font-size: 1.1em;
}

/* ---------- table_task ---------- */
.cbchg-table { border-collapse: collapse; margin: 10px 0; width: 100%; max-width: 420px; }
.cbchg-table th, .cbchg-table td { border: 1px solid #1f2937; padding: 6px 10px; text-align: left; font-size: 0.9em; }
.cbchg-table th { background: #f1f5f9; font-weight: 700; }

/* ---------- diagram_task ---------- */
.cbchg-diagram-wrap { margin: 10px 0; }
.cbchg-diagram { width: 160px; height: auto; color: #1f2937; display: block; }

/* ---------- AI illustrations ---------- */
.cbchg-illustration-wrap { margin: 10px 0; }
.cbchg-illustration {
	width: 150px;
	height: 150px;
	object-fit: contain;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	padding: 6px;
	background: #fff;
	/* Safety net so a slightly-off model result still reads as a plain
	   pencil sketch instead of a colour photo/illustration. */
	filter: grayscale(1) contrast(1.15);
}
.cbchg-band-early_years .cbchg-illustration { width: 190px; height: 190px; }

.cbchg-marking { color: #1f2937; } /* keep marking box readable regardless of band font colour tweaks */

/* ==================================================================
   Booklet mode - compact, KNEC-exam-style layout
   ================================================================== */
.cbchg-paper.cbchg-booklet {
	font-family: "Times New Roman", Times, Georgia, serif;
	font-size: 13px;
	line-height: 1.45;
}
.cbchg-paper.cbchg-booklet .cbchg-paper-header h2 { font-family: "Times New Roman", Times, serif; font-size: 18px; letter-spacing: 0.5px; }

.cbchg-booklet-subject {
	font-size: 15px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #fff;
	background: #0f766e;
	padding: 6px 12px;
	border-radius: 4px;
	margin: 16px 0 8px;
	font-family: Arial, Helvetica, sans-serif;
}
.cbchg-booklet-subject:first-child { margin-top: 4px; }
.cbchg-booklet-substrand {
	font-size: 12.5px;
	font-weight: 700;
	font-style: italic;
	color: #475569;
	border-bottom: 1px dashed #cbd5e1;
	padding-bottom: 4px;
	margin: 4px 0 12px;
	font-family: Arial, Helvetica, sans-serif;
}

.cbchg-bq { margin-bottom: 12px; page-break-inside: avoid; }
.cbchg-bq-main { flex: 1; }
.cbchg-bq-row { display: flex; justify-content: space-between; gap: 12px; }
.cbchg-bq-text { flex: 1; }
.cbchg-bq-num { font-weight: 700; }
.cbchg-bq-marks { flex-shrink: 0; font-weight: 600; color: #0f766e; white-space: nowrap; font-size: 12px; }

/* When a question needs rough-work room (short answer / table / diagram),
   run the question and a ruled "working space" box side by side, like the
   KNEC KPSEA paper layout. Falls back to stacked on narrow screens. */
.cbchg-bq:has(.cbchg-working-space) { display: flex; align-items: flex-start; gap: 14px; }
.cbchg-working-space {
	flex: 0 0 130px;
	min-height: 46px;
	border: 1px dashed #94a3b8;
	border-radius: 4px;
	position: relative;
}
.cbchg-working-space-label {
	position: absolute;
	top: 2px;
	left: 6px;
	font-size: 9px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	color: #94a3b8;
	font-family: Arial, Helvetica, sans-serif;
}

/* Aligned multiple-choice option row/grid, matching the compact
   "A. ... B. ... C. ... D. ..." layout used in real KNEC papers. */
.cbchg-mcq-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 4px 16px;
	margin: 6px 0 0 20px;
	font-size: 13px;
}
@media screen and (min-width: 560px) {
	.cbchg-mcq-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Lock printed/PDF output to A4, matching standard KNEC/CBC paper size,
   regardless of the visitor's browser/OS print default (which otherwise
   defaults to US Letter for some users and skews the layout). */
@page {
	size: A4;
	margin: 0;
}

@media print {
	.cbchg-booklet-subject { background: #fff !important; color: #1f2937 !important; border: 2px solid #1f2937; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	.cbchg-booklet-subject { page-break-before: auto; }
	.cbchg-bq { page-break-inside: avoid; }
}

@media print {
	/* Hide literally everything else on the page first (theme header,
	   navigation, sidebars, footer/widget areas, chat widgets, etc.),
	   then reveal only the generator app and move it to the top of the
	   printed page. Elements hidden this way still occupy layout space
	   (visibility != display), which is exactly why #cbchg-app is pulled
	   out of flow with position:absolute below - otherwise the paper
	   would print with a large blank gap where the hidden header was. */
	body * { visibility: hidden !important; }
	#cbchg-app, #cbchg-app * { visibility: visible !important; }
	#cbchg-app {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		margin: 0;
		max-width: none;
	}

	.cbchg-selector-card, #cbchg-loading, .cbchg-toggle, .cbchg-btn-secondary, .cbchg-link-btn, .cbchg-mode-toggle, .cbchg-track-toggle, #cbchg-warnings, #cbchg-booklet-fit, .cbchg-layout-panel, .cbchg-q-edit-controls, .cbchg-toast, .cbchg-diagram-controls, .cbchg-diagram-pin-hint, .cbchg-pin-delete-btn, .cbchg-remove-diagram-btn, .cbchg-modal { display: none !important; }
	.cbchg-pin-text-input { border: none !important; padding: 0 !important; background: transparent !important; }
	.cbchg-paper { border: none; box-shadow: none; padding: 0; }

	/* Each .cbchg-page prints as its own physical page - no on-screen
	   shadow/gap/page-number chrome, just a real page break between them.
	   display:block (not flex) because forced page breaks on flex
	   children are unreliable in Chromium's print engine and were
	   producing large blank gaps at the top of pages 2+. Padding here
	   is now the ONLY margin the printed sheet gets (@page margin is
	   0) - must stay in sync with PAGE_PADDING in frontend.js, which
	   budgets how much content fits per page using this same value. */
	.cbchg-page-preview { display: block; gap: 0; }
	.cbchg-page {
		max-width: none;
		width: auto;
		border: none;
		box-shadow: none;
		padding: 18mm; /* even margin on all four sides - keep in sync with PAGE_PADDING in frontend.js */
		page-break-after: always;
		break-after: page;
		page-break-inside: avoid;
		break-inside: avoid;
	}
	.cbchg-page-booklet { padding: 14mm; } /* even margin, tighter than the single-sheet default for dense multi-page booklets - keep in sync with PAGE_PADDING_BOOKLET in frontend.js */
	.cbchg-page:last-child { page-break-after: auto; break-after: auto; }
	.cbchg-page-number { display: none; }
}

@media screen and (max-width: 640px) {
	.cbchg-learner-grid { grid-template-columns: 1fr; }
	.cbchg-rubric-grid { grid-template-columns: 1fr 1fr; }
	.cbchg-match-row { grid-template-columns: 1fr 30px 1fr; }
	.cbchg-page { max-width: 100%; padding: 18px 14px; }

	.cbchg-app { padding: 0 4px; }
	.cbchg-selector-card { padding: 16px; }
	.cbchg-title { font-size: 19px; }
	.cbchg-paper { padding: 18px 14px; }
	.cbchg-paper-header h2 { font-size: 17px; }
	.cbchg-paper-meta { flex-direction: column; gap: 4px; }
	.cbchg-q-row { flex-direction: column; gap: 4px; }
	.cbchg-illustration, .cbchg-band-early_years .cbchg-illustration { width: 110px; height: 110px; }
	.cbchg-diagram { width: 130px; }

	.cbchg-mode-btn { font-size: 12.5px; padding: 9px 6px; }
	.cbchg-track-toggle { gap: 5px; }
	.cbchg-track-btn { flex: 1 1 45%; font-size: 11.5px; padding: 7px 6px; }
	.cbchg-mcq-grid { grid-template-columns: 1fr 1fr; }
	.cbchg-bq:has(.cbchg-working-space) { flex-direction: column; }
	.cbchg-working-space { flex-basis: auto; width: 100%; min-height: 34px; }
	.cbchg-tree { max-height: 280px; }

	/* Stack columns for on-screen legibility only. This whole block is
	   scoped to "screen and (...)" (not a bare "(...)") specifically so
	   it can never match during print/PDF - a bare max-width query
	   without a media type applies to print too, and on some mobile
	   browsers window.print()/"Save as PDF" evaluates media queries
	   against the phone's narrow on-screen viewport rather than the
	   @page A4 size, which silently forced single-column PDFs even when
	   a 2+ column layout was chosen. */
	.cbchg-col-row { grid-template-columns: 1fr !important; }
	.cbchg-col { border-right: none !important; padding: 0 !important; margin-bottom: 14px; }
	.cbchg-col:last-child { margin-bottom: 0; }
}

@media screen and (max-width: 400px) {
	.cbchg-paper { padding: 14px 10px; }
	.cbchg-rubric-grid { grid-template-columns: 1fr; }
}