/* =====================================================================
 * CDC Program — student dashboard + per-item view styles.
 *
 * Mirrors the parent theme brand variables (--blue / --orange) and tries
 * to look at home inside the existing Bootscore frame without leaning on
 * the WC My Account chrome. Section §1 hides the WC sidebar on program
 * pages only; everything else is scoped under .cdc-program-* so it can't
 * leak into other parts of My Account.
 * ===================================================================== */

:root {
	--cdc-blue:    #1355a6;
	--cdc-orange:  #EE6C23;
	--cdc-green:   #198754;
	--cdc-red:     #dc3545;
	--cdc-gray:    #6c757d;
	--cdc-gray-2:  #adb5bd;
	--cdc-bg-soft: #f8f9fa;
	--cdc-bg-soft-2:#fcfcfc;
	--cdc-border:  #e9ecef;
	--cdc-text:    #212529;
	--cdc-radius:  10px;
}

/* ---------- §1 — Full-width override on program pages ------------- */

body.cdc-program-page .woocommerce-MyAccount-navigation {
	display: none !important;
}

/* Hide the theme entry-header entirely on program pages — our hero banner
 * already acts as the page title, and the WP "My Account" H1 above it is
 * redundant + visually awkward. */
body.cdc-program-page .entry-header {
	display: none !important;
}

/* Fallback if the theme doesn't wrap the H1 in .entry-header — still mimic
 * Bootstrap mb-5 so there's breathing room before the hero. */
body.cdc-program-page h1 {
	margin-bottom: 3rem !important;
}

/* Bootscore wraps the WC My Account nav in its own column. Hiding the nav
 * alone leaves an empty column taking up grid space; this rule hides the
 * parent column too. :has() is supported in all current evergreen browsers. */
body.cdc-program-page [class*="col-"]:has(> .woocommerce-MyAccount-navigation),
body.cdc-program-page [class*="col-"]:has(> nav.woocommerce-MyAccount-navigation) {
	display: none !important;
}

body.cdc-program-page .woocommerce-MyAccount-content,
body.cdc-program-page [class*="col-"]:has(> .woocommerce-MyAccount-content) {
	flex: 0 0 100% !important;
	max-width: 100% !important;
	width: 100% !important;
}

/* ---------- §2 — Wrap + hero ------------- */

.cdc-program-wrap {
	color: var(--cdc-text);
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}

/* FMX packets (X-Ray Patient, the 4 Manikin sheets) — wider cap for the
   dense grading grid. Class is added conditionally in packet-bespoke.php /
   packet-locked.php based on the packet's template_slug. */
.cdc-program-wrap.cdc-program-item-wide {
	max-width: 1280px;
}

.cdc-program-hero {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	margin-bottom: 2rem;
	padding: 1.75rem 2rem;
	background: linear-gradient(135deg, var(--cdc-blue), #0f4790);
	color: #fff;
	border-radius: var(--cdc-radius);
	box-shadow: 0 4px 12px rgba(19, 85, 166, 0.2);
}

.cdc-program-hero-text {
	flex: 1;
}

.cdc-program-heading {
	margin: 0 0 0.35rem;
	font-size: 1.75rem;
	font-weight: 700;
	color: #fff;
	line-height: 1.2;
}

.cdc-program-subhead {
	margin: 0;
	font-size: 0.95rem;
	opacity: 0.9;
}

.cdc-program-hero-progress {
	flex: 0 0 auto;
}

.cdc-progress-ring {
	--pct: 0;
	--size: 96px;
	--stroke: 8px;
	width: var(--size);
	height: var(--size);
	border-radius: 50%;
	background:
		conic-gradient(var(--cdc-orange) calc(var(--pct) * 1%), rgba(255, 255, 255, 0.2) 0);
	display: grid;
	place-items: center;
	position: relative;
}

.cdc-progress-ring::before {
	content: "";
	position: absolute;
	inset: var(--stroke);
	background: var(--cdc-blue);
	border-radius: 50%;
}

.cdc-progress-ring-text {
	position: relative;
	font-size: 1.25rem;
	font-weight: 700;
	color: #fff;
}

/* ---------- §3 — Sections ------------- */

.cdc-section {
	margin-bottom: 2.5rem;
}

.cdc-section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	margin-bottom: 1rem;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--cdc-border);
}

.cdc-section-title {
	margin: 0;
	font-size: 20px !important;
	font-weight: 700;
	color: var(--cdc-blue);
}

.cdc-section-progress {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-width: 220px;
}

.cdc-progress-bar {
	flex: 1;
	height: 8px;
	background: var(--cdc-border);
	border-radius: 999px;
	overflow: hidden;
}

.cdc-progress-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--cdc-orange), #f48a4f);
	border-radius: 999px;
	transition: width 0.4s ease;
}

.cdc-progress-text {
	font-size: 0.85rem;
	color: var(--cdc-gray);
	font-weight: 600;
	white-space: nowrap;
	min-width: 50px;
	text-align: right;
}

/* ---------- §3.5 — Sub-groups (nested within sections) ------------- */

.cdc-subgroup {
	margin: 0 0 1.25rem;
	padding: 1rem 1.25rem 1.1rem;
	background: var(--cdc-bg-soft);
	border-radius: var(--cdc-radius);
}

.cdc-subgroup-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.85rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px dashed var(--cdc-border);
}

.cdc-subgroup-title {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--cdc-blue);
}

.cdc-subgroup-progress {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-width: 180px;
}

.cdc-section-instructor {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin: -0.35rem 0 0.85rem;
}

.cdc-section-instructor label {
	margin: 0;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--cdc-text-muted, #6c757d);
	white-space: nowrap;
}

.cdc-section-instructor-select {
	font-size: 0.85rem;
	padding: 0.3rem 0.5rem;
	border: 1px solid var(--cdc-border);
	border-radius: 6px;
	background: #fff;
	max-width: 220px;
}

.cdc-section-instructor-status {
	font-size: 0.78rem;
	color: var(--cdc-text-muted, #6c757d);
	min-width: 3.5rem;
}

.cdc-section-instructor-unset .cdc-section-instructor-select {
	border-color: var(--cdc-orange);
}

.cdc-section-instructor-nudge {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--cdc-orange);
	white-space: nowrap;
}

@media (max-width: 600px) {
	.cdc-subgroup {
		padding: 0.85rem 0.9rem;
	}

	.cdc-subgroup-header {
		flex-direction: column;
		align-items: stretch;
		gap: 0.5rem;
	}

	.cdc-subgroup-progress {
		min-width: 0;
	}

	.cdc-section-instructor-select {
		max-width: none;
		flex: 1;
	}
}

/* ---------- §4 — Cards (row layout) ------------- */
/* Each card is a full-width horizontal row — looks like a list/table     */
/* but each row keeps the card chrome (rounded corners, border, hover).   */

.cdc-card-grid {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.cdc-card {
	display: flex;
	align-items: stretch;
	background: #fff;
	border: 1px solid var(--cdc-border);
	border-radius: 3px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
	overflow: hidden;
	transition: box-shadow 0.2s ease, transform 0.15s ease, border-color 0.2s ease;
	position: relative;
	cursor: pointer;
}

.cdc-card:hover {
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
	transform: translateX(2px);
	border-color: #d8dee5;
}

.cdc-card-body {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.85rem;
	flex: 1;
	padding: 0.85rem 1.25rem;
	min-width: 0; /* allow flex children to shrink past content size */
}

.cdc-card-title {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--cdc-text);
}

.cdc-card-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.4rem;
	flex: 0 0 auto;
}

.cdc-card-footer {
	display: flex;
	align-items: center;
	padding: 0 1.25rem;
	background: transparent;
	border-top: 0;
	border-left: 1px solid var(--cdc-border);
	align-self: stretch;
}

.cdc-card-action {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--cdc-blue);
	font-weight: 600;
	font-size: 0.9rem;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease;
}

/* Stretched link: pseudo-element covers the whole card so anywhere a
 * student clicks routes through .cdc-card-action's href. The visible
 * "Open / View" button stays in place; this just expands the hit area. */
.cdc-card-action::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.cdc-card-action i {
	transition: transform 0.2s ease;
}

.cdc-card-action:hover {
	color: var(--cdc-orange);
}

.cdc-card-action:hover i {
	transform: translateX(3px);
}

/* Certificate course gifted via a seat assignment with no ce_course page to
 * link to (see CDC_Program_Account::get_user_dashboards()) — not a link,
 * just confirmation the student has access. */
.cdc-card-action-disabled {
	color: var(--cdc-gray, #6c757d);
	cursor: default;
}

/* Card status accents — left border.
 *
 * 'submitted' / legacy 'locked' = student signed off, instructor hasn't
 * graded yet  → orange (matches in-progress hue; visible action needed).
 * 'graded' / 'passed' = instructor finalized, packet is done → green.
 * 'in_progress' = student still working on it. */
.cdc-card-passed,
.cdc-card-graded {
	border-left: 4px solid var(--cdc-green);
}

.cdc-card-submitted,
.cdc-card-locked,
.cdc-card-in-progress {
	border-left: 4px solid var(--cdc-orange);
}

.cdc-card-not-started {
	border-left: 4px solid transparent;
}

/* ---------- §5 — Status badges + optional badge ------------- */

.cdc-status-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.3rem 0.7rem;
	border-radius: 0 !important;
	font-size: 0.78rem;
	font-weight: 600;
	line-height: 1;
}

.cdc-status-badge i {
	font-size: 0.95em;
}

.cdc-status-not-started {
	background: var(--cdc-bg-soft);
	color: var(--cdc-gray);
}

.cdc-status-in-progress,
.cdc-status-submitted,
.cdc-status-locked {
	background: rgba(238, 108, 35, 0.12);
	color: var(--cdc-orange);
}

.cdc-status-passed,
.cdc-status-graded {
	background: rgba(25, 135, 84, 0.12);
	color: var(--cdc-green);
}

.cdc-optional-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.3rem 0.65rem;
	border-radius: 999px;
	font-size: 0.7rem;
	font-weight: 700;
	background: var(--cdc-border);
	color: var(--cdc-gray);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* ---------- §6 — Empty state ------------- */

.cdc-program-empty {
	text-align: center;
	padding: 3rem 1.5rem;
	color: var(--cdc-gray);
	background: var(--cdc-bg-soft);
	border-radius: var(--cdc-radius);
}

.cdc-program-empty i {
	display: block;
	font-size: 3rem;
	color: var(--cdc-gray-2);
	margin-bottom: 0.75rem;
}

/* ---------- §7 — Per-item view ------------- */

.cdc-program-breadcrumb {
	margin: 0 0 1rem;
	font-size: 0.9rem;
}

.cdc-program-breadcrumb a {
	display: inline-flex;
	align-items: center;
	gap: 0;
	color: var(--cdc-blue);
	font-weight: 600;
	text-decoration: none;
}

.cdc-program-breadcrumb a:hover {
	color: var(--cdc-orange);
}

.cdc-program-item-kicker {
	margin: 0 0 0.4rem;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--cdc-orange);
	text-transform: uppercase;
	letter-spacing: 0.6px;
}

.cdc-program-item-title {
	margin: 0 0 1.25rem;
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--cdc-blue);
	line-height: 1.2;
}

.cdc-program-item-body {
	margin: 0 0 1.75rem;
	padding: 1.75rem 2rem;
	background: #fff;
	border: 1px solid var(--cdc-border);
	border-radius: var(--cdc-radius);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
	line-height: 1.7;
	color: var(--cdc-text);
}

.woocommerce-account .woocommerce-MyAccount-content h2.cdc-quiz-section-heading {
	margin: 0 0 1rem;
	padding-bottom: 0.5rem;
	font-size: 1.35rem !important;
	font-weight: 700;
	color: var(--cdc-orange);
	border-bottom: 2px solid var(--cdc-orange);
}

.cdc-program-item-body h2,
.cdc-program-item-body h3 {
	margin: 1.75rem 0 0.75rem;
	font-size: 1.25rem;
	color: var(--cdc-blue);
	font-weight: 700;
	line-height: 1.3;
}

.cdc-program-item-body h3 {
	font-size: 22px !important;
}

.cdc-program-item-body h2:first-child,
.cdc-program-item-body h3:first-child {
	margin-top: 0;
}

.cdc-program-item-body h4 {
	margin: 1.5rem 0 0.6rem;
	font-size: 0.95rem;
	color: var(--cdc-orange);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.cdc-program-item-body p {
	margin: 0.75rem 0;
}

.cdc-program-item-body ul,
.cdc-program-item-body ol {
	margin: 0.5rem 0 1rem;
	padding-left: 18px;
}

/* Section figure: 2-column layout used in packet bodies via [cdc_section].
 * Text on one side, image card on the other; collapses to single column on
 * mobile. Use position="left" on the shortcode to flip sides. */
.cdc-section-figure {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: 1.75rem;
	align-items: start;
	margin: 2.75rem 0;
}

.cdc-section-figure--image-left {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
}

.cdc-section-figure--image-left .cdc-section-figure__image {
	order: -1;
}

.cdc-section-figure--text-only {
	grid-template-columns: 1fr;
}

.cdc-section-figure__text > *:first-child {
	margin-top: 0;
}

.cdc-section-figure__text > *:last-child {
	margin-bottom: 0;
}

.cdc-section-figure__image {
	margin: 0;
	position: sticky;
	top: 150px;
}

.cdc-section-figure__image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
	border: 1px solid var(--cdc-border);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.cdc-section-figure__image figcaption {
	margin-top: 0.5rem;
	font-size: 0.85rem;
	color: var(--cdc-gray);
	font-style: italic;
	text-align: center;
}

@media (max-width: 768px) {
	.cdc-section-figure,
	.cdc-section-figure--image-left {
		grid-template-columns: 1fr;
	}

	.cdc-section-figure--image-left .cdc-section-figure__image {
		order: 0;
	}

	.cdc-section-figure__image {
		position: static;
	}
}

/* Inline signature mirror — student name appears in the body acknowledgment
 * text. Updates live via JS as they type in the typed_signature field; on
 * the locked view, server renders with the stored signature value. */
.cdc-signature-mirror {
	display: inline-block;
	min-width: 160px;
	padding: 0 0.5rem;
	border-bottom: 1px solid var(--cdc-blue);
	font-weight: 600;
	font-style: italic;
	color: var(--cdc-blue);
	text-align: center;
}

.cdc-signature-mirror-locked {
	color: var(--cdc-text);
	border-bottom-color: var(--cdc-gray);
}

.cdc-program-item-body li {
	margin-bottom: 0.45rem;
	font-size: 14px;
}

.cdc-program-item-body li::marker {
	color: var(--cdc-orange);
}

.cdc-program-item-body table {
	width: 100%;
	margin: 1rem 0 1.25rem;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--cdc-border);
	border-radius: var(--cdc-radius);
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.cdc-program-item-body table th {
	padding: 0.75rem 1rem;
	text-align: left;
	background: var(--cdc-bg-soft);
	font-weight: 700;
	color: var(--cdc-blue);
	border-bottom: 1px solid var(--cdc-border);
}

.cdc-program-item-body table td {
	padding: 0.75rem 1rem;
	text-align: left;
	border-bottom: 1px solid var(--cdc-border);
}

.cdc-program-item-body table tbody tr:nth-child(even) td {
	background: var(--cdc-bg-soft-2);
}

.cdc-program-item-body table tbody tr:last-child td {
	border-bottom: 0;
}

/* Opt-in pattern for tables where the last column is a short value
 * like a page number — add class "cdc-table-numbers" to the table. */
.cdc-program-item-body table.cdc-table-numbers td:last-child {
	text-align: right;
	color: var(--cdc-gray);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* Make sure label-style first columns in item-body tables (Grading
 * Criteria, BP Levels, etc.) don't squeeze down to a few characters
 * when the header text is short. We use min-width only — no `width:
 * 1%` collapse and no nowrap — so long first-cell content can still
 * wrap naturally. */
.cdc-program-item-body table th:first-child,
.cdc-program-item-body table td:first-child {
	min-width: 140px;
}

/* Stronger opt-in for tables that explicitly want the first column to
 * never wrap (still available via class="cdc-table-narrow-first"). */
.cdc-program-item-body table.cdc-table-narrow-first th:first-child,
.cdc-program-item-body table.cdc-table-narrow-first td:first-child {
	white-space: nowrap;
}

/* ---------- §8 — PDF download link ------------- */

.cdc-program-pdf-row {
	margin: -0.75rem 0 1.5rem;
}

.cdc-program-pdf-link {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.55rem 1rem;
	background: var(--cdc-bg-soft);
	color: var(--cdc-blue);
	border: 1px solid var(--cdc-border);
	border-radius: 6px;
	font-weight: 600;
	font-size: 0.9rem;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}

.cdc-program-pdf-link:hover {
	background: var(--cdc-blue);
	color: #fff;
}

/* ---------- §9 — Forms ------------- */

.cdc-program-form {
	margin: 0;
	padding: 1.75rem 2rem;
	background: #fff;
	border: 1px solid var(--cdc-border);
	border-radius: var(--cdc-radius);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.cdc-program-form-section {
	margin-bottom: 1.5rem;
}

.cdc-program-form-section:last-of-type {
	margin-bottom: 1rem;
}

.cdc-program-form-section-title {
	margin: 0 0 0.85rem;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--cdc-blue);
}

.cdc-program-form-acknowledge {
	padding: 1rem 1.25rem;
	background: var(--cdc-bg-soft);
	border-left: 4px solid var(--cdc-orange);
	border-radius: 6px;
	margin-bottom: 1.25rem;
}

.cdc-acknowledge-label {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	font-weight: 600;
	cursor: pointer;
	line-height: 1.5;
	font-size: 14px;
}

.cdc-acknowledge-label input[type="checkbox"] {
	flex: 0 0 auto;
	margin-top: 0.2rem;
	width: 1.1rem;
	height: 1.1rem;
	accent-color: var(--cdc-blue);
	cursor: pointer;
	position: relative;
	top: -2px;
}

.cdc-program-initials {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cdc-program-initials li {
	margin-bottom: 0.6rem;
	padding: 0.75rem 1rem;
	background: var(--cdc-bg-soft);
	border-left: 3px solid var(--cdc-orange);
	border-radius: 6px;
}

.cdc-program-initials label {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	cursor: pointer;
	line-height: 1.5;
}

.cdc-program-initials input[type="checkbox"] {
	flex: 0 0 auto;
	margin-top: 0.2rem;
	accent-color: var(--cdc-blue);
}

.cdc-program-field {
	margin-bottom: 1rem;
}

.cdc-program-field label,
.cdc-program-field-label {
	display: block;
	margin-bottom: 0.35rem;
	font-weight: 600;
	color: var(--cdc-text);
	font-size: 0.9rem;
}

.cdc-program-field input[type="text"],
.cdc-program-field input[type="email"] {
	width: 100%;
	max-width: 480px;
	padding: 0.6rem 0.85rem;
	border: 1px solid var(--cdc-border);
	border-radius: 6px;
	font-size: 1rem;
	font-family: inherit;
	background: #fff;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cdc-program-field input[type="text"]:focus,
.cdc-program-field input[type="email"]:focus {
	outline: none;
	border-color: var(--cdc-blue);
	box-shadow: 0 0 0 3px rgba(19, 85, 166, 0.15);
}

.cdc-program-field-static .cdc-program-today-date {
	display: inline-block;
	padding: 0.5rem 0.85rem;
	background: var(--cdc-bg-soft);
	border-radius: 6px;
	font-weight: 700;
	color: var(--cdc-blue);
}

.cdc-program-field-help {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.85rem;
	color: var(--cdc-gray);
	font-style: italic;
}

.cdc-program-form-actions {
	margin-top: 1.5rem;
}

.cdc-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.7rem 1.4rem;
	border: 0;
	border-radius: 6px;
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.2s ease, transform 0.1s ease;
}

.cdc-btn:active {
	transform: translateY(1px);
}

.cdc-btn-primary {
	background: var(--cdc-blue);
	color: #fff;
}

.cdc-btn-primary:hover {
	background: var(--cdc-orange);
	color: #fff;
}

.cdc-btn-primary:disabled {
	background: var(--cdc-gray-2);
	cursor: not-allowed;
	color: #fff;
}

/* ---------- §10 — Form messages ------------- */

.cdc-program-form-message {
	margin-top: 1rem;
	padding: 0;
	border-radius: 6px;
	font-weight: 500;
	font-size: 14px;
}

.cdc-program-form-message:not(:empty) {
	padding: 0.7rem 1rem;
}

.cdc-program-form-message-success {
	background: rgba(25, 135, 84, 0.12);
	color: var(--cdc-green);
	border-left: 4px solid var(--cdc-green);
}

.cdc-program-form-message-error {
	background: rgba(220, 53, 69, 0.1);
	color: var(--cdc-red);
	border-left: 4px solid var(--cdc-red);
}

/* ---------- §11 — Locked / signature card ------------- */

.cdc-program-locked-banner {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 1.5rem;
	padding: 1rem 1.25rem;
	background: rgba(25, 135, 84, 0.1);
	color: var(--cdc-green);
	border-left: 4px solid var(--cdc-green);
	border-radius: 6px;
	font-weight: 500;
	font-size: 14px;
}

.cdc-program-locked-banner i {
	font-size: 1.25rem;
}

.cdc-program-signature-card {
	margin-top: 1.5rem;
	padding: 1.5rem 1.75rem;
	background: #fff;
	border: 1px solid var(--cdc-border);
	border-radius: var(--cdc-radius);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.cdc-program-signature-card h3 {
	margin: 0 0 0.75rem;
	font-size: 0.8rem;
	color: var(--cdc-gray);
	text-transform: uppercase;
	letter-spacing: 0.6px;
	font-weight: 700;
}

.cdc-program-signature-card h4 {
	margin: 1.25rem 0 0.6rem;
	font-size: 0.8rem;
	color: var(--cdc-orange);
	text-transform: uppercase;
	letter-spacing: 0.6px;
}

.cdc-program-signature-card dl {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.4rem 1rem;
	margin: 0;
}

.cdc-program-signature-card dt {
	font-weight: 700;
	color: var(--cdc-gray);
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding-right: 10px;
	position: relative;
	top: 2px;
}

.cdc-program-signature-card dd {
	margin: 0;
	color: var(--cdc-text);
}

.cdc-program-initials-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cdc-program-initials-list li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0;
	color: var(--cdc-text);
}

.cdc-program-initials-list i {
	color: var(--cdc-green);
}

/* ---------- §12 — Bespoke form fields ------------- */

.cdc-field-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem 1.25rem;
}

.cdc-field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.cdc-field-wide {
	grid-column: 1 / -1;
}

/* Stacked direct-child siblings within a section get vertical breathing
 * room. Covers all four combinations of .cdc-field and .cdc-field-grid
 * so wrapping a field in a grid (for 50% width) doesn't break spacing. */
.cdc-program-form-section > .cdc-field + .cdc-field,
.cdc-program-form-section > .cdc-field-grid + .cdc-field,
.cdc-program-form-section > .cdc-field + .cdc-field-grid,
.cdc-program-form-section > .cdc-field-grid + .cdc-field-grid {
	margin-top: 15px;
}

/* Trio layouts for split field groups inside the 2-column field grid. */
.cdc-trio {
	display: grid;
	gap: 1rem;
}

.cdc-trio-name {
	grid-template-columns: minmax(0, 1fr) 80px minmax(0, 1fr);
}

.cdc-trio-csz {
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
}

.cdc-field label,
.cdc-field .cdc-field-label {
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--cdc-text);
}

.cdc-req {
	color: var(--cdc-orange);
	margin-left: 0.15rem;
}

.cdc-field input[type="text"],
.cdc-field input[type="email"],
.cdc-field input[type="tel"],
.cdc-field input[type="date"],
.cdc-field input[type="number"],
.cdc-field input[type="password"],
.cdc-field textarea {
	width: 100%;
	padding: 0.55rem 0.75rem;
	border: 1px solid var(--cdc-border);
	border-radius: 4px;
	font-size: 0.95rem;
	font-family: inherit;
	background: #fff;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cdc-field input[readonly] {
	background: var(--cdc-bg-soft);
	color: var(--cdc-gray);
	cursor: not-allowed;
}

.cdc-field input:focus,
.cdc-field textarea:focus {
	outline: none;
	border-color: var(--cdc-blue);
	box-shadow: 0 0 0 3px rgba(19, 85, 166, 0.12);
}

/* Make sure the input-with-toggle wrapper fills the column width so the
 * absolutely-positioned eye button has somewhere to anchor. */
.cdc-input-with-toggle {
	width: 100%;
}

.cdc-field-help {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.8rem;
	color: var(--cdc-gray);
	font-style: italic;
}

.cdc-field-help .bi-shield-lock {
	color: var(--cdc-green);
	font-style: normal;
}

/* Input with inline show/hide toggle (used on SSN). */
.cdc-input-with-toggle {
	position: relative;
	display: flex;
	align-items: stretch;
}

.cdc-input-with-toggle input {
	width: 100%;
	padding-right: 2.75rem;
}

.cdc-input-toggle {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 2.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	padding: 0;
	color: var(--cdc-gray);
	cursor: pointer;
	transition: color 0.2s ease, background 0.2s ease;
}

.cdc-input-toggle:hover,
.cdc-input-toggle:focus {
	color: var(--cdc-blue);
	background: var(--cdc-bg-soft);
	outline: none;
}

.cdc-input-toggle.is-active {
	color: var(--cdc-blue);
}

.cdc-input-toggle i {
	font-size: 1.05rem;
}

/* Radio groups rendered as inline option chips */
.cdc-radio-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.25rem;
}

.cdc-radio-option {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.55rem 0.95rem;
	background: #fff;
	border: 1px solid var(--cdc-border);
	border-radius: 4px;
	cursor: pointer;
	font-weight: 500;
	font-size: 0.95rem;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.cdc-radio-option:hover {
	border-color: var(--cdc-blue);
}

.cdc-radio-option input[type="radio"] {
	margin: 0;
	accent-color: var(--cdc-blue);
}

.cdc-radio-option:has(input[type="radio"]:checked) {
	background: rgba(19, 85, 166, 0.08);
	border-color: var(--cdc-blue);
	color: var(--cdc-blue);
	font-weight: 700;
}

/* Bespoke form actions: secondary button next to primary */
.cdc-btn-secondary {
	background: #fff;
	color: var(--cdc-blue);
	border: 1px solid var(--cdc-blue);
}

.cdc-btn-secondary:hover {
	background: var(--cdc-blue);
	color: #fff;
}

.cdc-program-form-actions {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	align-items: center;
}

/* ---------- Matching exercise layout ---------- */

.cdc-matching-instructions {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	margin: 1rem 0 1.5rem;
	padding: 0.85rem 1rem;
	background: var(--cdc-bg-soft);
	border-left: 4px solid var(--cdc-blue);
	border-radius: 4px;
	color: var(--cdc-text);
	line-height: 1.5;
}

.cdc-matching-instructions i {
	color: var(--cdc-blue);
	font-size: 1.1rem;
	margin-top: 0.15rem;
}

.cdc-matching-section {
	margin: 0 0 1.75rem;
	padding: 1.5rem;
	background: #fff;
	border-radius: var(--cdc-radius);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.cdc-matching-image {
	margin: 0 0 1.5rem;
	text-align: center;
}

.cdc-matching-image img {
	max-width: 100%;
	height: auto;
	border-radius: 6px;
}

.cdc-matching-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 1.5rem 2rem;
}

.cdc-matching-grid-heading {
	margin: 0 0 0.75rem;
	font-size: 0.8rem;
	color: var(--cdc-orange);
	text-transform: uppercase;
	letter-spacing: 0.6px;
	font-weight: 700;
}

.cdc-matching-term-list {
	margin: 0;
	padding-left: 1.4rem;
	list-style: decimal;
}

.cdc-matching-term-list li::marker {
	color: var(--cdc-gray);
	font-weight: 700;
}

.cdc-matching-term-row {
	margin-bottom: 0.75rem;
}

.cdc-matching-term-label {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	cursor: pointer;
	font-weight: 500;
	font-size: 14px;
}

.cdc-matching-term-text {
	flex: 1;
}

.cdc-matching-select {
	flex: 0 0 64px;
	padding: 0.4rem 0.5rem;
	border: 1px solid var(--cdc-border);
	border-radius: 4px;
	font-size: 0.95rem;
	font-weight: 600;
	background: #fff;
	cursor: pointer;
	text-align: center;
}

.cdc-matching-select:focus {
	outline: none;
	border-color: var(--cdc-blue);
	box-shadow: 0 0 0 3px rgba(19, 85, 166, 0.12);
}

.cdc-matching-def-list {
	margin: 0;
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	gap: 0.5rem 0.75rem;
	font-size: 0.95rem;
}

.cdc-matching-def-list dt {
	font-weight: 700;
	color: var(--cdc-blue);
}

.cdc-matching-def-list dd {
	margin: 0;
	line-height: 1.5;
}

.cdc-matching-threshold-note {
	display: inline-block;
	margin-left: 0.85rem;
	color: var(--cdc-gray);
	font-style: italic;
	font-size: 0.85rem;
}

/* Inline result panel (after submit) */
.cdc-matching-result {
	margin-top: 1.25rem;
}

.cdc-matching-result[hidden] {
	display: none;
}

.cdc-matching-result-summary {
	padding: 1rem 1.25rem;
	border-radius: 6px;
	margin-bottom: 1rem;
	font-weight: 500;
}

.cdc-matching-result-summary.is-passed {
	background: rgba(25, 135, 84, 0.1);
	color: var(--cdc-green);
	border-left: 4px solid var(--cdc-green);
}

.cdc-matching-result-summary.is-failed {
	background: rgba(238, 108, 35, 0.1);
	color: var(--cdc-orange);
	border-left: 4px solid var(--cdc-orange);
	font-size: 14px;
}

.cdc-matching-result-section-title {
	margin: 1rem 0 0.5rem;
	font-size: 0.85rem;
	color: var(--cdc-gray);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.cdc-matching-result-pairs,
.cdc-matching-summary-pairs {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cdc-matching-result-pairs li,
.cdc-matching-summary-pairs li {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.4rem;
	padding: 0.5rem 0.75rem;
	margin-bottom: 0.4rem;
	border-radius: 4px;
	font-size: 0.9rem;
}

.cdc-matching-result-pairs li.is-correct,
.cdc-matching-summary-pairs li.is-correct {
	background: rgba(25, 135, 84, 0.08);
	color: var(--cdc-text);
}

.cdc-matching-result-pairs li.is-wrong,
.cdc-matching-summary-pairs li.is-wrong {
	background: rgba(238, 108, 35, 0.08);
	color: var(--cdc-text);
}

.cdc-matching-result-pairs li.is-correct > i,
.cdc-matching-summary-pairs li.is-correct > i {
	color: var(--cdc-green);
}

.cdc-matching-result-pairs li.is-wrong > i,
.cdc-matching-summary-pairs li.is-wrong > i {
	color: var(--cdc-orange);
}

.cdc-matching-result-term,
.cdc-matching-summary-term {
	font-weight: 600;
}

.cdc-matching-result-chose,
.cdc-matching-summary-chose {
	font-weight: 700;
	font-family: monospace;
	padding: 0 0.35rem;
	background: rgba(255, 255, 255, 0.6);
	border-radius: 3px;
}

.cdc-matching-result-was,
.cdc-matching-summary-was {
	color: var(--cdc-gray);
	font-size: 0.85em;
	font-style: italic;
}

.cdc-matching-summary {
	margin-top: 1rem;
}

.cdc-matching-summary-section {
	margin-bottom: 1.5rem;
}

.cdc-matching-retake-row {
	margin-top: 1.5rem;
	text-align: center;
}

@media (max-width: 768px) {
	.cdc-matching-grid {
		grid-template-columns: 1fr;
	}

	.cdc-matching-section {
		padding: 1rem;
	}
}

/* ============ School Performance Fact Sheet ============ */
.cdc-fs-doc-header {
	text-align: left;
	padding: 1.25rem 0 1rem;
	margin: 0 0 1.5rem;
	border-bottom: 2px solid var(--cdc-blue);
}

.cdc-fs-doc-title {
	margin: 0 0 0.35rem;
	font-size: 22px;
	font-weight: 700;
	color: var(--cdc-blue);
}

.cdc-fs-doc-subtitle {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: #333;
}

.cdc-fs-doc-program {
	margin: 0.3rem 0 0;
	font-size: 14px;
	color: var(--cdc-gray);
	font-style: italic;
}

.cdc-fs-page {
	margin: 0 0 2rem;
	padding: 1.25rem 0 1.5rem;
	border-bottom: 1px solid var(--cdc-border);
}

.cdc-fs-page:last-of-type {
	border-bottom: none;
}

.cdc-fs-page-title {
	margin: 0 0 0.5rem;
	font-size: 17px;
	font-weight: 700;
	color: var(--cdc-blue);
	border-left: 4px solid var(--cdc-blue);
	padding-left: 0.7rem;
}

.cdc-fs-subsection-title {
	margin: 1.25rem 0 0.5rem;
	font-size: 14px;
	font-weight: 600;
	color: #333;
}

.cdc-fs-page-caption {
	margin: 0 0 1rem;
	font-size: 13px;
	color: var(--cdc-gray);
}

.cdc-fs-table-scroll {
	overflow-x: auto;
	margin: 0 0 0.75rem;
}

.cdc-fs-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
	margin: 0 0 0.75rem;
}

.cdc-fs-table th,
.cdc-fs-table td {
	border: 1px solid var(--cdc-border);
	padding: 0.55rem 0.65rem;
	text-align: left;
	vertical-align: top;
}

.cdc-fs-table thead th {
	background: var(--cdc-bg-soft);
	font-weight: 600;
	font-size: 12px;
	line-height: 1.35;
}

.cdc-fs-table tbody td:first-child {
	font-weight: 600;
	white-space: nowrap;
	background: rgba(19, 85, 166, 0.04);
}

.cdc-fs-salary-table th,
.cdc-fs-salary-table td {
	text-align: center;
	padding: 0.4rem 0.45rem;
	font-size: 12px;
}

/* Page 3 — Self-Employed/Freelance + Institutional Employment tables.
 * Both have 3 columns (Year / Description / Total). Locking column widths
 * via table-layout:fixed so the two tables line up visually as a pair. */
.cdc-fs-table-3col {
	table-layout: fixed;
	width: 100%;
}

.cdc-fs-table-3col th:nth-child(1),
.cdc-fs-table-3col td:nth-child(1) {
	width: 15%;
}

.cdc-fs-table-3col th:nth-child(2),
.cdc-fs-table-3col td:nth-child(2) {
	width: 60%;
}

.cdc-fs-table-3col th:nth-child(3),
.cdc-fs-table-3col td:nth-child(3) {
	width: 25%;
}

.cdc-fs-table-3col td {
	word-wrap: break-word;
}

.cdc-fs-salary-table thead th {
	font-size: 11px;
}

.cdc-fs-table-note {
	margin: 0.25rem 0 1rem;
	font-size: 12px;
	color: var(--cdc-gray);
	font-style: italic;
}

/* Per-page initials/date row + the "Initial only after..." caption */
.cdc-fs-initials-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.85rem;
	margin: 1.25rem 0 0;
	padding: 0.9rem 1rem;
	background: var(--cdc-bg-soft);
	border-radius: 6px;
	border-left: 3px solid var(--cdc-blue);
}

.cdc-fs-initials-field label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: #333;
	margin-bottom: 0.25rem;
}

.cdc-fs-initials-field input {
	width: 100%;
	padding: 0.4rem 0.55rem;
	border: 1px solid var(--cdc-border);
	border-radius: 4px;
	font-size: 14px;
	background: #fff;
}

.cdc-fs-initials-field input[type="text"] {
	text-transform: uppercase;
	font-weight: 600;
}

.cdc-fs-initials-note {
	grid-column: 1 / -1;
	margin: 0;
	font-size: 11px;
	color: var(--cdc-gray);
	font-style: italic;
}

/* Page 6 signature block */
.cdc-fs-page-signature {
	background: rgba(19, 85, 166, 0.04);
	padding: 1.5rem 1.5rem 1.25rem;
	border-radius: 6px;
	border: 1px solid var(--cdc-border);
}

.cdc-fs-signature-block {
	margin-top: 1.5rem;
	padding-top: 1rem;
	border-top: 1px solid var(--cdc-border);
}

.cdc-fs-school-signature-note {
	margin: 0.85rem 0 0;
	padding: 0.5rem 0.75rem;
	background: #fff;
	border: 1px dashed var(--cdc-border);
	border-radius: 4px;
	font-size: 12px;
	color: var(--cdc-gray);
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

/* Reference sections (definitions + right to cancel) */
.cdc-fs-reference {
	margin: 2rem 0;
	padding: 1.25rem 1.4rem;
	background: var(--cdc-bg-soft);
	border-radius: 6px;
}

.cdc-fs-reference .cdc-fs-page-title {
	border-left: none;
	padding-left: 0;
}

.cdc-fs-definitions {
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0;
}

.cdc-fs-definitions > li {
	margin-bottom: 0.6rem;
	font-size: 12.5px;
	line-height: 1.5;
}

.cdc-fs-definitions strong {
	color: var(--cdc-blue);
}

.cdc-fs-cancel-list {
	margin: 0.5rem 0 0 1.25rem;
	padding: 0;
}

.cdc-fs-cancel-list > li {
	margin-bottom: 0.6rem;
	font-size: 13px;
	line-height: 1.5;
}

/* Right to Cancel — multi-paragraph + lettered/numbered sub-lists, with
 * an inline-blank placeholder for the "first class session" date. */
.cdc-fs-reference-rtc p {
	margin: 0 0 0.85rem;
	font-size: 13px;
	line-height: 1.55;
}

.cdc-fs-rtc-blank {
	display: inline-block;
	min-width: 90px;
	padding: 0 2px;
	margin: 0 2px;
	font-family: monospace;
	letter-spacing: 0.05em;
	color: #777;
	border-bottom: 1px solid #555;
	vertical-align: baseline;
	text-align: center;
}

.cdc-fs-rtc-lettered,
.cdc-fs-rtc-numbered {
	list-style: none;
	margin: 0.5rem 0 1rem 0.5rem;
	padding: 0;
}

.cdc-fs-rtc-lettered > li,
.cdc-fs-rtc-numbered > li {
	margin-bottom: 0.45rem;
	font-size: 13px;
	line-height: 1.5;
	display: flex;
	gap: 0.45rem;
	align-items: flex-start;
}

.cdc-fs-rtc-marker {
	flex: 0 0 auto;
	font-weight: 600;
	color: var(--cdc-blue);
	min-width: 2em;
}

/* Locked view (post-submission) */
.cdc-fs-locked .cdc-fs-locked-initials-summary {
	margin: 1rem 0 1.5rem;
	padding: 1rem 1.25rem;
	background: var(--cdc-bg-soft);
	border-radius: 6px;
}

.cdc-fs-locked-initials-summary h4 {
	margin: 0 0 0.6rem;
	font-size: 14px;
	color: var(--cdc-blue);
}

.cdc-fs-locked-initials-summary ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cdc-fs-locked-initials-summary li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.3rem 0;
	font-size: 13px;
}

.cdc-fs-locked-initials-summary li i {
	color: #2d7a2d;
	font-size: 14px;
}

@media (max-width: 700px) {
	.cdc-fs-table {
		font-size: 11px;
	}
	.cdc-fs-table th,
	.cdc-fs-table td {
		padding: 0.4rem 0.5rem;
	}
	.cdc-fs-initials-row {
		grid-template-columns: 1fr;
	}
}

/* Generic radio group (used by Student Follow-Up + future bespokes) */
.cdc-radio-group {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.85rem;
	margin-top: 0.4rem;
}

.cdc-radio-option {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.4rem 0.7rem;
	background: var(--cdc-bg-soft);
	border-radius: 4px;
	cursor: pointer;
	font-size: 14px;
}

.cdc-radio-option input[type="radio"] {
	margin: 0;
	accent-color: var(--cdc-blue);
}

.cdc-radio-option:has(input:checked) {
	background: rgba(19, 85, 166, 0.1);
	color: var(--cdc-blue);
	font-weight: 600;
}

/* Student Follow-Up employer block (used twice within Current Employment) */
.cdc-followup-employer {
	margin-top: 1.25rem;
	padding: 1.1rem 1.25rem;
	background: #fff;
	border: 1px solid var(--cdc-border);
	border-radius: 6px;
}

.cdc-followup-employer-heading {
	margin: 0 0 0.75rem;
	font-size: 14px;
	font-weight: 600;
	color: var(--cdc-blue);
}

/* Time Log packet — editable running log of class + HW hours */
.cdc-tl-progress {
	margin: 0 0 1.25rem;
	padding: 0.75rem 1rem;
	background: var(--cdc-bg-soft);
	border-radius: 6px;
}

.cdc-tl-progress-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	margin-bottom: 0.5rem;
	font-size: 14px;
}

.cdc-tl-progress-meta strong {
	color: var(--cdc-blue);
	font-size: 16px;
}

.cdc-tl-autosave-status {
	font-size: 12px;
	color: var(--cdc-gray);
	font-style: italic;
	min-height: 1em;
}

.cdc-tl-autosave-status.is-pending { color: var(--cdc-gray); }
.cdc-tl-autosave-status.is-ok      { color: #2d7a2d; font-style: normal; }
.cdc-tl-autosave-status.is-error   { color: #c0392b; font-style: normal; }

.cdc-tl-progress-bar {
	height: 8px;
	background: var(--cdc-border);
	border-radius: 4px;
	overflow: hidden;
}

.cdc-tl-progress-fill {
	height: 100%;
	background: var(--cdc-blue);
	transition: width 220ms ease;
}

/* ---------- Time Sheet 4-week calendar ---------- */

.cdc-tl-header-readonly {
	background: var(--cdc-bg-soft) !important;
	border-color: var(--cdc-border) !important;
	color: var(--cdc-text);
	cursor: default;
}

.cdc-tl-no-booking {
	max-width: 640px;
	margin: 1.5rem auto;
	margin-left: 0;
	padding: 1.5rem 1.75rem;
	background: var(--cdc-bg-soft);
	border: 1px solid var(--cdc-border);
	border-left: 4px solid var(--cdc-orange);
	border-radius: var(--cdc-radius);
}

.cdc-tl-no-booking h3 {
	margin-top: 0;
	margin-bottom: 0.75rem;
	color: var(--cdc-blue);
	font-size: 18px;
}

.cdc-tl-no-booking p {
	margin: 0.5rem 0;
	line-height: 1.55;
}

.cdc-tl-no-booking a {
	color: var(--cdc-blue);
	text-decoration: underline;
}

.cdc-tl-calendar {
	margin-top: 0.5rem;
	background: #fff;
	border: 1px solid var(--cdc-border);
	border-radius: 8px;
	overflow: hidden;
}

.cdc-tl-calendar-header {
	display: grid;
	grid-template-columns: 80px repeat(7, 1fr);
	background: var(--cdc-bg-soft);
	border-bottom: 1px solid var(--cdc-border);
}

.cdc-tl-calendar-header::before {
	content: '';
}

.cdc-tl-cal-col-label {
	padding: 0.5rem 0.4rem;
	text-align: center;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: var(--cdc-gray);
	border-left: 1px solid var(--cdc-border);
}

.cdc-tl-cal-col-label:first-child {
	border-left: none;
}

.cdc-tl-cal-col-label.is-class {
	color: var(--cdc-blue);
}

.cdc-tl-cal-week {
	display: grid;
	grid-template-columns: 80px repeat(7, 1fr);
	border-bottom: 1px solid var(--cdc-border);
}

.cdc-tl-cal-week:last-child {
	border-bottom: none;
}

.cdc-tl-cal-week-label {
	padding: 0.6rem 0.6rem;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--cdc-blue);
	background: var(--cdc-bg-soft);
	display: flex;
	align-items: center;
	border-right: 1px solid var(--cdc-border);
}

.cdc-tl-cal-day {
	all: unset;
	box-sizing: border-box;
	position: relative;
	min-height: 76px;
	padding: 0.55rem 0.5rem 0.5rem;
	border-left: 1px solid var(--cdc-border);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 0.15rem;
	cursor: pointer;
	transition: background-color 120ms ease, border-color 120ms ease;
	text-align: center;
}

.cdc-tl-cal-day:first-child {
	border-left: none;
}

.cdc-tl-cal-day:hover:not(.is-locked):not(:disabled) {
	background: rgba(19, 85, 166, 0.05);
}

.cdc-tl-cal-day:focus-visible {
	outline: 2px solid var(--cdc-blue);
	outline-offset: -2px;
	z-index: 1;
}

.cdc-tl-cal-day-month {
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--cdc-gray);
	line-height: 1;
}

.cdc-tl-cal-day-num {
	font-size: 20px;
	font-weight: 600;
	color: var(--cdc-text);
	line-height: 1;
	margin-top: 0.05rem;
}

.cdc-tl-cal-day-hours {
	margin-top: auto;
	font-size: 11px;
	font-weight: 600;
	color: var(--cdc-gray);
	min-height: 14px;
	line-height: 1;
}

/* Class-day cell (auto-filled Saturday, 8h) */
.cdc-tl-cal-day.is-class {
	background: rgba(19, 85, 166, 0.08);
	cursor: default;
}

.cdc-tl-cal-day.is-class .cdc-tl-cal-day-num,
.cdc-tl-cal-day.is-class .cdc-tl-cal-day-month {
	color: var(--cdc-blue);
}

.cdc-tl-cal-day.is-class .cdc-tl-cal-day-hours {
	color: var(--cdc-blue);
}

/* Homework-day cell (clicked, 4h) */
.cdc-tl-cal-day.is-homework {
	background: rgba(238, 108, 35, 0.12);
}

.cdc-tl-cal-day.is-homework .cdc-tl-cal-day-num {
	color: var(--cdc-orange);
}

.cdc-tl-cal-day.is-homework .cdc-tl-cal-day-hours {
	color: var(--cdc-orange);
}

/* Final partial-day cell (11th HW click, 1.5h) */
.cdc-tl-cal-day.is-homework.is-homework-partial {
	background: rgba(238, 108, 35, 0.18);
}

.cdc-tl-cal-day.is-homework.is-homework-partial::after {
	content: '';
	position: absolute;
	top: 4px;
	right: 4px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--cdc-orange);
}

/* Disabled state — locked submission OR cap reached on un-marked cells */
.cdc-tl-cal-day:disabled,
.cdc-tl-cal-day.is-locked,
.cdc-tl-cal-day.is-disabled-cap {
	cursor: not-allowed;
}

.cdc-tl-cal-day.is-disabled-cap:not(.is-homework):not(.is-class) {
	opacity: 0.5;
}

/* Out-of-window cells: the Sun-Fri trailing the 4th class Saturday. The
 * course ends on that Saturday, so these days are rendered for layout
 * symmetry but visually muted and non-interactive. */
.cdc-tl-cal-day.is-out-of-window {
	background: repeating-linear-gradient(
		135deg,
		transparent 0,
		transparent 6px,
		rgba(0, 0, 0, 0.025) 6px,
		rgba(0, 0, 0, 0.025) 12px
	);
	opacity: 0.45;
}

.cdc-tl-cal-day.is-out-of-window:hover {
	background: repeating-linear-gradient(
		135deg,
		transparent 0,
		transparent 6px,
		rgba(0, 0, 0, 0.025) 6px,
		rgba(0, 0, 0, 0.025) 12px
	);
}

.cdc-tl-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin: 0.75rem 0 0;
	font-size: 12px;
	color: var(--cdc-gray);
	align-items: center;
}

.cdc-tl-legend-chip {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 3px;
	margin-right: 0.35rem;
	vertical-align: -1px;
	border: 1px solid var(--cdc-border);
}

.cdc-tl-legend-chip.is-class    { background: rgba(19, 85, 166, 0.12); border-color: rgba(19, 85, 166, 0.4); }
.cdc-tl-legend-chip.is-homework { background: rgba(238, 108, 35, 0.12); border-color: rgba(238, 108, 35, 0.4); }
.cdc-tl-legend-chip.is-partial  { background: rgba(238, 108, 35, 0.18); border-color: rgba(238, 108, 35, 0.55); position: relative; }
.cdc-tl-legend-chip.is-partial::after {
	content: '';
	position: absolute;
	top: 1px;
	right: 1px;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--cdc-orange);
}

.cdc-tl-submit:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

@media (max-width: 700px) {
	.cdc-tl-calendar-header,
	.cdc-tl-cal-week {
		grid-template-columns: 56px repeat(7, 1fr);
	}
	.cdc-tl-cal-week-label {
		padding: 0.45rem 0.4rem;
		font-size: 10px;
		writing-mode: vertical-rl;
		transform: rotate(180deg);
		justify-content: center;
	}
	.cdc-tl-cal-day {
		min-height: 60px;
		padding: 0.4rem 0.25rem 0.35rem;
	}
	.cdc-tl-cal-day-num    { font-size: 16px; }
	.cdc-tl-cal-day-month  { font-size: 9px; }
	.cdc-tl-cal-day-hours  { font-size: 10px; }
}

/* Read-only field display (used by *-locked.php views to mirror form layout) */
.cdc-field-readonly {
	margin-top: 0.25rem;
	padding: 0.55rem 0.75rem;
	background: var(--cdc-bg-soft);
	border-radius: 4px;
	font-size: 14px;
	min-height: 38px;
	display: flex;
	align-items: center;
	color: #1a1a1a;
	word-break: break-word;
}

.cdc-field-readonly-paragraph {
	display: block;
	white-space: normal;
	line-height: 1.5;
	padding: 0.7rem 0.85rem;
}

.cdc-form-locked .cdc-program-form-section {
	margin-bottom: 1.5rem;
}

/* Locked Likert cells — picked = blue pill, unpicked = faint dot */
.cdc-survey-rating-locked {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	font-size: 13px;
	color: #c8c8c8;
}

.cdc-survey-rating-locked.is-picked {
	background: var(--cdc-blue);
	color: #fff;
	font-weight: 700;
}

/* Student Survey Likert table — 10 statements x 1..5 radio scale */
.cdc-survey-scale-legend {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin: 0 0 1rem;
	padding: 0.5rem 0.75rem;
	background: var(--cdc-bg-soft);
	border-radius: 4px;
	font-size: 13px;
}

.cdc-survey-table {
	border: 1px solid var(--cdc-border);
	border-radius: 6px;
	overflow: hidden;
}

.cdc-survey-row {
	display: grid;
	grid-template-columns: 1fr 360px;
	align-items: center;
	gap: 1rem;
	padding: 0.65rem 1rem;
	border-bottom: 1px solid var(--cdc-border);
}

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

.cdc-survey-row.cdc-survey-head {
	background: var(--cdc-bg-soft);
	font-weight: 600;
	font-size: 13px;
}

.cdc-survey-statement {
	font-size: 14px;
	line-height: 1.4;
}

/* Fixed-column grid so head numbers + body radios land in identical cells.
 * Columns: [Disagree anchor] [1] [2] [3] [4] [5] [Agree anchor] */
.cdc-survey-ratings {
	display: grid;
	grid-template-columns: 70px repeat(5, 36px) 50px;
	column-gap: 6px;
	align-items: center;
	justify-content: end;
}

.cdc-survey-anchor {
	font-size: 11px;
	color: var(--cdc-gray);
	font-weight: 500;
	white-space: nowrap;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.cdc-survey-anchor-left  { text-align: right; }
.cdc-survey-anchor-right { text-align: left; }

.cdc-survey-rating-num {
	text-align: center;
	font-size: 13px;
	font-weight: 600;
}

.cdc-survey-rating-option {
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	user-select: none;
}

.cdc-survey-rating-option input[type="radio"] {
	margin: 0;
	accent-color: var(--cdc-blue);
}

.cdc-survey-rating-option span {
	display: none; /* number is in the column header */
}

@media (max-width: 700px) {
	.cdc-survey-row {
		grid-template-columns: 1fr;
		gap: 0.5rem;
	}
	.cdc-survey-row.cdc-survey-head {
		display: none;
	}
	.cdc-survey-ratings {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		gap: 0.5rem;
	}
	/* Spacer cells become endpoint labels on mobile: "1 ○ ○ ○ ○ ○ 5" */
	.cdc-survey-anchor-spacer {
		display: inline-block;
		font-size: 13px;
		font-weight: 700;
		color: var(--cdc-blue);
		line-height: 1;
		min-width: 0.85em;
		text-align: center;
	}
	.cdc-survey-anchor-spacer:first-child::before { content: "1"; }
	.cdc-survey-anchor-spacer:last-child::before  { content: "5"; }
}

/* Recommended BP levels table — 5 columns with a text-heavy "Health Impact"
 * column. Force column widths via table-layout:fixed so Systolic / Diastolic
 * value columns and the and/or separator get enough room. Smaller font keeps
 * the dense table from feeling overwhelming inside packet body content. */
.cdc-bp-levels-table {
	table-layout: fixed;
	width: 100%;
	font-size: 12.5px;
	line-height: 1.45;
	border-collapse: collapse;
	margin: 1rem 0;
}

.cdc-bp-levels-table th,
.cdc-bp-levels-table td {
	padding: 0.55rem 0.65rem;
	vertical-align: top;
	word-wrap: break-word;
	overflow-wrap: break-word;
	border: 1px solid var(--cdc-border);
}

.cdc-bp-levels-table thead th {
	background: var(--cdc-bg-soft);
	font-weight: 600;
	text-align: left;
	line-height: 1.3;
}

.cdc-bp-levels-table th:nth-child(1),
.cdc-bp-levels-table td:nth-child(1) { width: 18%; }
.cdc-bp-levels-table th:nth-child(2),
.cdc-bp-levels-table td:nth-child(2) { width: 18%; }
.cdc-bp-levels-table th:nth-child(3),
.cdc-bp-levels-table td:nth-child(3) {
	width: 10%;
	text-align: center;
	white-space: nowrap;
}
.cdc-bp-levels-table th:nth-child(4),
.cdc-bp-levels-table td:nth-child(4) { width: 18%; }
.cdc-bp-levels-table th:nth-child(5),
.cdc-bp-levels-table td:nth-child(5) { width: 36%; }

@media (max-width: 700px) {
	.cdc-bp-levels-table {
		font-size: 11.5px;
	}
	.cdc-bp-levels-table th,
	.cdc-bp-levels-table td {
		padding: 0.4rem 0.45rem;
	}
}

/* How-to step list (used by Blood Pressure procedure walkthrough, etc.)
 * Each step is an image + numbered instruction card. Stacks to single
 * column on mobile, side-by-side image+text on desktop. */
.cdc-howto-steps {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin: 1.25rem 0;
}

.cdc-howto-step {
	display: grid;
	grid-template-columns: 160px 1fr;
	gap: 1rem;
	align-items: flex-start;
	padding: 0.85rem 1rem;
	background: var(--cdc-bg-soft);
	border-radius: 6px;
	border-left: 3px solid var(--cdc-blue);
}

.cdc-howto-step-img {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 1px solid var(--cdc-border);
	border-radius: 4px;
	overflow: hidden;
	min-height: 110px;
}

.cdc-howto-step-img img {
	width: 100%;
	height: auto;
	display: block;
}

.cdc-howto-step-img:empty::before,
.cdc-howto-step-img img[src=""]::before {
	content: "Image placeholder";
	color: var(--cdc-gray);
	font-size: 12px;
	font-style: italic;
}

.cdc-howto-step-text {
	font-size: 14px;
	line-height: 1.5;
}

.cdc-howto-step-text strong.cdc-howto-step-num {
	color: var(--cdc-blue);
	margin-right: 0.4rem;
}

@media (max-width: 700px) {
	.cdc-howto-step {
		grid-template-columns: 1fr;
	}
	.cdc-howto-step-img {
		max-width: 200px;
	}
}

/* Responsive video wrapper — used to embed YouTube / Vimeo iframes inside
 * packet body content. Uses the classic padding-bottom hack so the wrapper
 * holds a 16:9 aspect ratio (56.25%) across all browsers. The iframe fills
 * the wrapper absolutely. */
.cdc-video-wrap {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	margin: 1.5rem 0;
	background: #000;
	border-radius: 6px;
}

.cdc-video-wrap iframe,
.cdc-video-wrap object,
.cdc-video-wrap embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Instrument booklet figure — used for the Dental Instruments packet
 * (and any future read_acknowledge packet that displays a sequence of
 * full-width reference images). Each image renders as its own figure
 * with a subtle frame and a numbered caption. */
.cdc-instrument-figure {
	margin: 1.5rem 0;
	padding: 0;
	text-align: center;
}

.cdc-instrument-figure img {
	display: block;
	width: 100%;
	max-width: 900px;
	height: auto;
	margin: 0 auto;
	border: 1px solid var(--cdc-border);
	border-radius: 6px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
	background: #fff;
}

.cdc-instrument-figure figcaption {
	margin-top: 0.5rem;
	font-size: 13px;
	color: var(--cdc-gray);
	font-style: italic;
}

/* Inline reference documents (resume / cover-letter / thank-you samples)
 * Each sample is rendered as a faux-paper card inside the packet body. */
.cdc-doc-sample {
	max-width: 720px;
	margin: 2rem auto;
	padding: 2.25rem 2.5rem;
	background: #fff;
	border: 1px solid #d8d8d8;
	border-radius: 4px;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
	color: #1a1a1a;
	font-size: 13px;
	line-height: 1.5;
}

.cdc-doc-sample-label {
	display: inline-block;
	margin: 0 auto 0.6rem;
	padding: 0.25rem 0.65rem;
	background: var(--cdc-blue);
	color: #fff;
	border-radius: 3px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.cdc-doc-sample-label-wrap {
	max-width: 720px;
	margin: 2rem auto -1.25rem;
	text-align: center;
}

/* Resume #1 — combination style with underlined section headings */
.cdc-resume-combo .cdc-resume-name {
	margin: 0;
	font-size: 22px;
	font-weight: 400;
	border-bottom: 1px solid #1a1a1a;
	padding-bottom: 0.1rem;
	display: inline-block;
}

.cdc-resume-combo .cdc-resume-contact {
	margin: 0.15rem 0 1.25rem;
	font-size: 13px;
}

.cdc-resume-combo h4 {
	margin: 1.25rem 0 0.5rem;
	font-size: 14px;
	font-weight: 600;
	text-decoration: underline;
}

.cdc-resume-combo .cdc-resume-skills-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.25rem 1.5rem;
	margin: 0.5rem 0 1rem 0.5rem;
}

.cdc-resume-combo ul {
	margin: 0.25rem 0 0.75rem 1.25rem;
	padding: 0;
}

.cdc-resume-combo .cdc-resume-employer {
	margin: 0.85rem 0 0.2rem;
	font-weight: 600;
}

.cdc-resume-combo .cdc-resume-school {
	margin: 0.5rem 0 0;
	font-weight: 600;
}

.cdc-resume-combo .cdc-resume-school-detail {
	margin: 0 0 0.25rem;
	font-style: italic;
}

/* Resume #2 — two-column template (label / content) */
.cdc-resume-twocol .cdc-resume-name-line {
	border-bottom: 1px solid #1a1a1a;
	padding-bottom: 0.25rem;
	margin-bottom: 0.15rem;
	text-align: right;
}

.cdc-resume-twocol .cdc-resume-name-line strong {
	font-size: 22px;
	font-weight: 600;
	color: #333;
}

.cdc-resume-twocol .cdc-resume-contact-line {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.5rem;
	font-size: 12px;
	color: #555;
}

.cdc-resume-twocol .cdc-resume-body {
	display: grid;
	grid-template-columns: 140px 1fr;
	gap: 1rem 1.25rem;
}

.cdc-resume-twocol .cdc-resume-row-label {
	font-weight: 700;
	color: #333;
	font-size: 13px;
}

.cdc-resume-twocol .cdc-resume-row-content p {
	margin: 0 0 0.25rem;
}

.cdc-resume-twocol .cdc-resume-row-content ul {
	margin: 0.25rem 0 0.5rem 1.25rem;
	padding: 0;
}

.cdc-resume-twocol .cdc-resume-experience-entry {
	margin-bottom: 0.75rem;
}

.cdc-resume-twocol .cdc-resume-experience-title {
	font-weight: 600;
}

.cdc-resume-twocol .cdc-resume-experience-dates {
	font-style: italic;
	font-size: 12px;
	color: #555;
}

/* Letter samples (cover letter, thank-you letter) */
.cdc-letter-sample .cdc-letter-header {
	text-align: center;
	margin-bottom: 1.5rem;
	font-weight: 600;
}

.cdc-letter-sample .cdc-letter-header .cdc-letter-title {
	display: block;
	font-size: 15px;
}

.cdc-letter-sample .cdc-letter-header .cdc-letter-subtitle {
	display: block;
	font-size: 14px;
	font-weight: 500;
}

.cdc-letter-sample .cdc-letter-date {
	margin: 0 0 1.25rem;
}

.cdc-letter-sample .cdc-letter-address {
	margin: 0 0 1rem;
	white-space: pre-line;
}

.cdc-letter-sample .cdc-letter-salutation,
.cdc-letter-sample .cdc-letter-closing {
	margin: 0 0 1rem;
}

.cdc-letter-sample p {
	margin: 0 0 0.9rem;
}

.cdc-letter-sample .cdc-letter-signature-block {
	margin-top: 2.25rem;
}

.cdc-letter-sample .cdc-letter-signature-name {
	margin: 0;
	font-weight: 600;
}

.cdc-letter-sample .cdc-letter-signature-title {
	margin: 0 0 1.5rem;
}

.cdc-letter-sample .cdc-letter-enclosure {
	margin: 0;
	font-weight: 600;
}

@media (max-width: 700px) {
	.cdc-doc-sample {
		padding: 1.25rem 1.25rem;
	}
	.cdc-resume-combo .cdc-resume-skills-grid {
		grid-template-columns: 1fr 1fr;
	}
	.cdc-resume-twocol .cdc-resume-body {
		grid-template-columns: 1fr;
		gap: 0.25rem 0;
	}
	.cdc-resume-twocol .cdc-resume-row-label {
		margin-top: 0.75rem;
	}
}

/* File upload packet — student-side slots + locked-view list */
.cdc-fu-slot {
	margin: 0 0 1.5rem;
	padding: 1rem 1.1rem;
	background: var(--cdc-bg-soft);
	border-radius: 6px;
	border: 1px solid var(--cdc-border);
}

.cdc-fu-slot-label {
	display: block;
	font-weight: 600;
	font-size: 15px;
	margin-bottom: 0.15rem;
	color: var(--cdc-blue);
}

.cdc-fu-slot-desc {
	margin: 0 0 0.6rem;
	font-size: 13px;
	color: var(--cdc-gray);
}

.cdc-fu-existing {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0.4rem 0 0.6rem;
	padding: 0.45rem 0.7rem;
	background: rgba(19, 85, 166, 0.08);
	border-radius: 4px;
	font-size: 13px;
	flex-wrap: wrap;
}

.cdc-fu-existing-name {
	font-weight: 600;
	color: var(--cdc-blue);
	word-break: break-all;
}

.cdc-fu-existing-link {
	color: var(--cdc-blue);
	text-decoration: underline;
}

.cdc-fu-existing-note {
	color: var(--cdc-gray);
	font-style: italic;
	font-size: 12px;
}

.cdc-fu-slot input[type="file"] {
	display: block;
	width: 100%;
	padding: 0.5rem;
	background: #fff;
	border: 1px dashed var(--cdc-border);
	border-radius: 4px;
	cursor: pointer;
	font-size: 13px;
}

.cdc-fu-locked-list {
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.cdc-fu-locked-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 0.75rem 1rem;
	background: var(--cdc-bg-soft);
	border-radius: 6px;
}

.cdc-fu-locked-meta {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	min-width: 0;
}

.cdc-fu-locked-label {
	font-weight: 600;
	color: var(--cdc-blue);
	font-size: 14px;
}

.cdc-fu-locked-name {
	font-size: 13px;
	word-break: break-all;
}

.cdc-fu-locked-date {
	font-size: 12px;
	color: var(--cdc-gray);
}

.cdc-btn-sm {
	padding: 0.35rem 0.7rem;
	font-size: 13px;
}

/* Admin-only mode banner: indicates the dashboard is showing all packets
 * regardless of program track, with quick links to simulate each track. */
.cdc-admin-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1.5rem;
	padding: 0.55rem 0.9rem;
	background: #fff8e1;
	border: 1px solid #f0c674;
	border-radius: 4px;
	font-size: 13px;
}

.cdc-admin-bar-label {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.15rem 0.55rem;
	background: #d28100;
	color: #fff;
	border-radius: 3px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	font-size: 11px;
}

.cdc-admin-bar-text {
	color: #6b4500;
}

.cdc-admin-bar a {
	color: #6b4500;
	font-weight: 600;
	text-decoration: underline;
}

.cdc-admin-bar a:hover {
	color: #4a2f00;
}

/* Welcome / orientation intro panel — shown above the section list on
 * the dashboard. Subtle blue-left accent so it reads as a note, not as
 * another section. */
.cdc-program-intro {
	margin: 0 0 2.5rem;
	padding: 1.75rem 1.85rem;
	background: var(--cdc-bg-soft);
	border-left: 4px solid var(--cdc-blue);
	border-radius: 6px;
}

.cdc-program-intro-heading {
	margin: 0 0 0.75rem;
	font-size: 20px;
	font-weight: 700;
	color: var(--cdc-blue);
}

.cdc-program-intro-lede {
	font-size: 14.5px;
	line-height: 1.6;
}

/* Show/Hide getting-started toggle. Default state shows "Show…" label
 * plus down chevron; expanded swaps to "Hide…" plus up chevron via the
 * .is-expanded class added in JS. */
.cdc-program-intro-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.85rem;
	padding: 0.45rem 0.9rem;
	background: #fff;
	border: 1px solid var(--cdc-blue);
	color: var(--cdc-blue);
	border-radius: 4px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background 120ms ease, color 120ms ease;
}

.cdc-program-intro-toggle:hover,
.cdc-program-intro-toggle:focus-visible {
	background: var(--cdc-blue);
	color: #fff;
	outline: none;
}

.cdc-program-intro-toggle-icon {
	display: inline-flex;
	transition: transform 180ms ease;
}

.cdc-program-intro-toggle.is-expanded .cdc-program-intro-toggle-icon {
	transform: rotate(180deg);
}

/* Swap label text based on expanded state. */
.cdc-program-intro-toggle-hide,
.cdc-program-intro-toggle .cdc-program-intro-toggle-label-hide {
	display: none;
}
.cdc-program-intro-toggle.is-expanded .cdc-program-intro-toggle-label-show {
	display: none;
}
.cdc-program-intro-toggle.is-expanded .cdc-program-intro-toggle-label-hide {
	display: inline;
}

.cdc-program-intro-details {
	margin-top: 2rem;
}

.cdc-program-intro-sub {
	margin: 1.6rem 0 0.6rem;
	font-size: 15px;
	font-weight: 600;
	color: #1f1f1f;
	letter-spacing: 0.2px;
	padding-bottom: 0.35rem;
	border-bottom: 1px solid var(--cdc-border);
}

.cdc-program-intro p {
	margin: 0 0 0.75rem;
	font-size: 14px;
	line-height: 1.55;
	color: #333;
}

.cdc-program-intro p:last-child {
	margin-bottom: 0;
}

/* Inline status badge legend — each row pairs a real status badge with a
 * one-line description, so students see exactly what they'll see below. */
.cdc-program-intro-badges {
	list-style: none;
	margin: 0.5rem 0 0.9rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.cdc-program-intro-badges > li {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 13.5px;
}

.cdc-program-intro-badges .cdc-status-badge {
	flex: 0 0 auto;
	min-width: 130px;
	justify-content: center;
}

/* Item-type list — each row has a leading icon and a label+description.
 * Single-column flex so long descriptions don't wrap awkwardly inside
 * narrow grid cells. */
.cdc-program-intro-types {
	list-style: none;
	margin: 0.75rem 0 0.9rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}

.cdc-program-intro-types > li {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	padding: 0.65rem 0.85rem;
	background: #fff;
	border: 1px solid var(--cdc-border);
	border-radius: 5px;
}

.cdc-program-intro-types > li > i {
	flex: 0 0 auto;
	color: var(--cdc-blue);
	font-size: 18px;
	line-height: 1;
	margin-top: 1px;
}

.cdc-program-intro-types > li > div {
	font-size: 13px;
	line-height: 1.45;
}

.cdc-program-intro-types > li > div strong {
	display: block;
	margin-bottom: 0.1rem;
	color: var(--cdc-blue);
}

/* Generic bulleted intro list (Tracking your progress section) */
.cdc-program-intro-list {
	margin: 0.5rem 0 0.9rem 1.25rem;
	padding: 0;
}

.cdc-program-intro-list > li {
	margin-bottom: 0.45rem;
	font-size: 14px;
	line-height: 1.5;
}

.cdc-program-intro-list > li:last-child {
	margin-bottom: 0;
}

/* Time-sheet callout — distinct background, bold border, so the "this
 * one is different" point lands visually. */
.cdc-program-intro-callout {
	margin: 1.5rem 0;
	padding: 1.15rem 1.35rem;
	background: rgba(245, 158, 11, 0.08);
	border: 1px solid rgba(245, 158, 11, 0.35);
	border-radius: 6px;
}

.cdc-program-intro-callout-title {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	margin: 0 0 0.6rem;
	font-size: 15px;
	font-weight: 700;
	color: #b86700;
}

.cdc-program-intro-callout-title i {
	font-size: 18px;
}

.cdc-program-intro-callout p {
	margin: 0 0 0.65rem;
	font-size: 13.5px;
	line-height: 1.55;
}

.cdc-program-intro-callout ul {
	margin: 0.5rem 0 0 1.25rem;
	padding: 0;
}

.cdc-program-intro-callout ul li {
	margin-bottom: 0.5rem;
	font-size: 13.5px;
	line-height: 1.5;
}

.cdc-program-intro-callout ul li:last-child {
	margin-bottom: 0;
}

@media (max-width: 700px) {
	.cdc-program-intro {
		padding: 1.2rem 1.2rem;
	}
	.cdc-program-intro-heading {
		font-size: 17px;
	}
	.cdc-program-intro-lede,
	.cdc-program-intro p {
		font-size: 13.5px;
	}
	.cdc-program-intro-types {
		gap: 0.45rem;
	}
	.cdc-program-intro-badges > li {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.25rem;
	}
}

/* Completed badge — green pill shown next to section / sub-group titles
 * on the dashboard when every packet in the group is done. */
.cdc-completed-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	margin-left: 0.6rem;
	padding: 0.15rem 0.55rem;
	background: rgba(45, 122, 45, 0.12);
	color: #2d7a2d;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	vertical-align: middle;
	line-height: 1.5;
}

.cdc-completed-badge i {
	font-size: 13px;
}

/* Auto-fill badge — small inline chip next to a label, indicating the
 * field was pre-populated from a related packet. Editable; just a hint. */
.cdc-autofill-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	margin-left: 0.5rem;
	padding: 0.05rem 0.4rem;
	background: rgba(19, 85, 166, 0.08);
	color: var(--cdc-blue);
	border-radius: 3px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	vertical-align: middle;
}

.cdc-autofill-badge i {
	font-size: 12px;
}

/* Coronal Polish Check-Off checklist (per-patient prerequisites) */
.cdc-co-checklist {
	list-style: none;
	margin: 0.75rem 0 1rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.cdc-co-checklist-item label {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	padding: 0.55rem 0.75rem;
	background: var(--cdc-bg-soft);
	border-radius: 4px;
	cursor: pointer;
	font-size: 14px;
	line-height: 1.4;
}

.cdc-co-checklist-item input[type="checkbox"] {
	flex: 0 0 auto;
	margin: 2px 0 0;
	accent-color: var(--cdc-blue);
}

.cdc-co-checklist-item label:has(input:checked) {
	background: rgba(19, 85, 166, 0.08);
}

/* Locked view (post-submission) — replace the input checkboxes with
 * static icons and color-code by checked / unchecked state. */
.cdc-form-locked .cdc-co-checklist-item {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	padding: 0.55rem 0.75rem;
	background: var(--cdc-bg-soft);
	border-radius: 4px;
	font-size: 14px;
	line-height: 1.4;
}

.cdc-form-locked .cdc-co-checklist-item.is-checked {
	background: rgba(45, 122, 45, 0.08);
}

.cdc-form-locked .cdc-co-checklist-icon {
	flex: 0 0 auto;
	font-size: 16px;
	line-height: 1.4;
}

.cdc-form-locked .cdc-co-checklist-item.is-checked .cdc-co-checklist-icon {
	color: #2d7a2d;
}

.cdc-form-locked .cdc-co-checklist-item.is-unchecked .cdc-co-checklist-icon {
	color: #c4c4c4;
}

.cdc-form-locked .cdc-co-checklist-item.is-unchecked {
	color: var(--cdc-gray);
}

/* X-Ray Check-Off rows — task label on the left, student initials in the
 * middle, instructor-initials placeholder on the right (admin-side). */
.cdc-xrco-row {
	display: grid;
	grid-template-columns: 1fr 150px 150px;
	gap: 0.85rem;
	align-items: center;
	padding: 0.6rem 0.85rem;
	margin: 0 0 0.5rem;
	background: var(--cdc-bg-soft);
	border-radius: 4px;
	border-left: 3px solid var(--cdc-blue);
}

.cdc-xrco-label {
	font-size: 14px;
	line-height: 1.4;
}

.cdc-xrco-initial-cell label {
	display: block;
	font-size: 11px;
	font-weight: 600;
	color: #555;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	margin-bottom: 0.2rem;
}

.cdc-xrco-initial-cell input {
	width: 100%;
	padding: 0.35rem 0.5rem;
	border: 1px solid var(--cdc-border);
	border-radius: 4px;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	text-transform: uppercase;
	background: #fff;
}

.cdc-xrco-instructor-cell .cdc-xrco-instructor-placeholder {
	padding: 0.35rem 0.5rem;
	border: 1px dashed var(--cdc-border);
	border-radius: 4px;
	font-size: 12px;
	text-align: center;
	color: var(--cdc-gray);
	font-style: italic;
	background: #fff;
}

.cdc-xrco-patient-block {
	margin: 0 0 1.5rem;
	padding: 1rem 1.15rem;
	background: #fff;
	border: 1px solid var(--cdc-border);
	border-radius: 6px;
}

.cdc-xrco-patient-heading {
	margin: 0 0 0.75rem;
	font-size: 15px;
	font-weight: 700;
	color: var(--cdc-blue);
}

@media (max-width: 700px) {
	.cdc-xrco-row {
		grid-template-columns: 1fr;
		gap: 0.5rem;
	}
}

/* FMX evaluation form — X-Ray Patient packet. Error-count grid + totals
 * row with auto-calculated total errors and grade. */
.cdc-fmx-errors-heading {
	margin: 1.25rem 0 0.5rem;
	font-size: 14px;
	font-weight: 600;
	color: var(--cdc-blue);
}

.cdc-fmx-si-legend {
	margin: 0;
	font-size: 11px;
	color: var(--cdc-gray);
}

.cdc-fmx-errors-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 0.45rem 0.75rem;
	margin: 0 0 1rem;
}

.cdc-fmx-error-item {
	display: grid;
	grid-template-columns: 1fr 70px;
	gap: 0.5rem;
	align-items: center;
	padding: 0.4rem 0.6rem;
	background: var(--cdc-bg-soft);
	border-radius: 4px;
	font-size: 13px;
}

.cdc-fmx-error-item label {
	margin: 0;
	font-weight: 500;
	color: #333;
}

.cdc-fmx-err-input {
	width: 100%;
	padding: 0.3rem 0.45rem;
	border: 1px solid var(--cdc-border);
	border-radius: 4px;
	font-size: 13px;
	text-align: center;
	background: #fff;
}

.cdc-fmx-totals {
	margin: 0.75rem 0 0;
	padding: 0.75rem 1rem;
	background: rgba(19, 85, 166, 0.06);
	border-radius: 6px;
	border: 1px solid var(--cdc-border);
}

.cdc-fmx-total-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 0.4rem 0;
	font-size: 14px;
	border-bottom: 1px solid var(--cdc-border);
}

.cdc-fmx-total-row:last-child {
	border-bottom: none;
}

.cdc-fmx-total-row > strong {
	color: var(--cdc-blue);
	font-size: 16px;
}

.cdc-fmx-total-row input {
	width: 120px;
	padding: 0.35rem 0.5rem;
	border: 1px solid var(--cdc-border);
	border-radius: 4px;
	font-size: 14px;
	text-align: right;
	background: #fff;
}

.cdc-fmx-grade-input {
	font-weight: 600;
	color: var(--cdc-blue);
}

/* ===========================================================================
   Periodontal Probing / Bleeding Index chart
   =========================================================================== */
.cdc-perio-radio-row {
	display: flex;
	gap: 1.25rem;
	align-items: center;
	padding-top: 0.35rem;
}
.cdc-perio-radio-row label {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 14px;
	cursor: pointer;
}

.cdc-perio-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	align-items: center;
	margin: 0.5rem 0 1rem;
	font-size: 13px;
	color: var(--cdc-text, #333);
}
.cdc-perio-legend-item {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.cdc-perio-arch {
	margin-bottom: 1.5rem;
}
.cdc-perio-arch-title {
	margin: 0 0 0.5rem;
	font-size: 14px;
	font-weight: 600;
	color: var(--cdc-blue);
}

/* Horizontal scroll so 16 tooth columns stay usable on tablets/phones. */
.cdc-perio-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 0.5rem;
	border: 1px solid var(--cdc-border);
	border-radius: 6px;
	background: #fff;
}
.cdc-perio-row {
	display: flex;
	gap: 0;
	min-width: max-content;
}

.cdc-perio-tooth {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	border-right: 1px solid var(--cdc-border);
	padding: 0.4rem 0.3rem;
}
.cdc-perio-tooth:last-child {
	border-right: none;
}
.cdc-perio-tooth-num {
	text-align: center;
	font-size: 12px;
	font-weight: 600;
	color: var(--cdc-blue);
	margin-bottom: 0.35rem;
}

.cdc-perio-surface {
	display: flex;
	align-items: center;
	gap: 0.2rem;
	margin-bottom: 0.3rem;
}
.cdc-perio-surface:last-child {
	margin-bottom: 0;
}
.cdc-perio-surface-label {
	width: 12px;
	font-size: 11px;
	font-weight: 700;
	color: #888;
	text-align: center;
}
.cdc-perio-sites {
	display: flex;
	gap: 0.15rem;
}

.cdc-perio-site {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.15rem;
}
.cdc-perio-depth {
	width: 30px;
	padding: 0.2rem 0.1rem;
	text-align: center;
	font-size: 13px;
	border: 1px solid var(--cdc-border);
	border-radius: 4px;
	background: #fff;
	-moz-appearance: textfield;
}
.cdc-perio-depth::-webkit-outer-spin-button,
.cdc-perio-depth::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.cdc-perio-depth-readonly {
	display: inline-block;
	width: 30px;
	text-align: center;
	font-size: 13px;
	font-weight: 600;
	color: #333;
}

/* Bleeding toggle: a tappable dot under each site. */
.cdc-perio-bleed {
	display: inline-flex;
	cursor: pointer;
	margin: 0;
}
.cdc-perio-bleed input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}
.cdc-perio-dot {
	display: block;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	border: 1.5px solid #c33;
	background: transparent;
	transition: background 0.12s ease;
}
.cdc-perio-bleed input:checked + .cdc-perio-dot,
.cdc-perio-dot.is-on {
	background: #c33;
}
.cdc-perio-bleed input:focus-visible + .cdc-perio-dot {
	outline: 2px solid var(--cdc-blue);
	outline-offset: 2px;
}
.cdc-perio-site.is-bleeding .cdc-perio-depth-readonly {
	color: #c33;
}
.cdc-perio-site.is-bleeding .cdc-perio-dot {
	background: #c33;
}

/* ===========================================================================
   Surface Identification (tooth zones)
   =========================================================================== */
.cdc-surfaceid-arch {
	margin-bottom: 1.75rem;
}
.cdc-surfaceid-arch-title {
	margin: 0 0 0.75rem;
	font-size: 15px;
	font-weight: 600;
	color: var(--cdc-blue);
	border-bottom: 1px solid var(--cdc-border);
	padding-bottom: 0.35rem;
}

/* 4 columns desktop → 2 tablet → 1 phone. */
.cdc-surfaceid-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
}
@media (max-width: 900px) {
	.cdc-surfaceid-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
	.cdc-surfaceid-grid { grid-template-columns: 1fr; }
}

.cdc-surfaceid-card {
	border: 1px solid var(--cdc-border);
	border-radius: 8px;
	background: #fff;
	padding: 0.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}
.cdc-surfaceid-card-head {
	font-size: 14px;
	font-weight: 700;
	color: var(--cdc-blue);
	text-align: center;
}

.cdc-surfaceid-images {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
}
.cdc-surfaceid-images figure {
	margin: 0;
	flex: 0 1 auto;
}
.cdc-surfaceid-tooth-img img {
	display: block;
	max-height: 90px;
	width: auto;
	margin: 0 auto;
}
.cdc-surfaceid-map-img img {
	display: block;
	max-height: 90px;
	width: auto;
	margin: 0 auto;
}

/* When the tooth image carries the lettered zones itself (Adult Dentition —
   no separate shared map), let it render large enough to read the A–E
   labels instead of the small side-by-side size. */
.cdc-surfaceid-images--single {
	display: block;
}
.cdc-surfaceid-images--single .cdc-surfaceid-tooth-img img {
	max-height: none;
	max-width: 100%;
	width: auto;
}

.cdc-surfaceid-zones {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}
.cdc-surfaceid-zone-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.cdc-surfaceid-zone-letter {
	flex: 0 0 1.4rem;
	height: 1.4rem;
	line-height: 1.4rem;
	text-align: center;
	font-weight: 700;
	font-size: 13px;
	color: #fff;
	background: var(--cdc-blue);
	border-radius: 50%;
}
.cdc-surfaceid-select {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.3rem 0.4rem;
	font-size: 13px;
	border: 1px solid var(--cdc-border);
	border-radius: 4px;
	background: #fff;
}

/* Post-submit summary, grouped per tooth. */
.cdc-surfaceid-summary {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 1rem;
	margin-top: 1rem;
}
.cdc-surfaceid-summary-tooth {
	border: 1px solid var(--cdc-border);
	border-radius: 8px;
	padding: 0.6rem 0.75rem;
	background: #fff;
}
.cdc-surfaceid-summary-title {
	margin: 0 0 0.4rem;
	font-size: 13px;
	font-weight: 700;
	color: var(--cdc-blue);
}
.cdc-surfaceid-summary-pairs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}
.cdc-surfaceid-summary-pairs li {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 13px;
}
.cdc-surfaceid-summary-pairs li.is-correct { color: #1a7f37; }
.cdc-surfaceid-summary-pairs li.is-wrong   { color: #c33; }
.cdc-surfaceid-summary-zone {
	font-weight: 700;
	flex: 0 0 1.1rem;
}
.cdc-surfaceid-summary-arrow { opacity: 0.5; }
.cdc-surfaceid-retake-row {
	grid-column: 1 / -1;
	margin: 0.5rem 0 0;
}

/* ---------- X-Ray Patient FMX grid (3×3 upload + grading) ---------- */

.cdc-fmx-directions {
	margin: 0.25rem 0 1.25rem;
	padding: 1rem 1.25rem;
	background: var(--cdc-bg-soft);
	border: 1px solid var(--cdc-border);
	border-left: 4px solid var(--cdc-blue);
	border-radius: 6px;
	font-size: 13px;
}

.cdc-fmx-directions h4 {
	margin: 0 0 0.5rem;
	font-size: 14px;
	color: var(--cdc-blue);
	font-weight: 600;
}

.cdc-fmx-directions h4:not(:first-child) {
	margin-top: 1rem;
}

.cdc-fmx-directions ol,
.cdc-fmx-directions ul.cdc-fmx-scale {
	margin: 0;
	padding-left: 1.25rem;
}

.cdc-fmx-directions ol li {
	margin-bottom: 0.35rem;
	line-height: 1.5;
}

.cdc-fmx-scale > li {
	margin-bottom: 0.4rem;
}

.cdc-fmx-scale ul {
	margin: 0.25rem 0 0;
	padding-left: 1.25rem;
	color: var(--cdc-gray);
}

.cdc-fmx-scale ul li {
	margin-bottom: 0.15rem;
	font-size: 12px;
}

.cdc-fmx-scale-note {
	margin: 0.75rem 0 0;
	padding-top: 0.6rem;
	border-top: 1px solid var(--cdc-border);
	font-size: 12px;
	font-style: italic;
	color: var(--cdc-gray);
}

.cdc-fmx-grid {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin: 0 0 1rem;
}

/* Each "row" wrapper from the original 3×3 layout now stacks its cells
 * vertically — every cell (Upper Left, Upper Central, etc.) gets the
 * full content width to itself instead of sharing a row with 2 siblings.
 * The empty middle bitewing cell is hidden entirely. */
.cdc-fmx-grid-row {
	display: flex;
	flex-direction: row;
	gap: 1rem;
}

.cdc-fmx-grid-row > .cdc-fmx-grid-cell {
	flex: 1 1 0;
	min-width: 0;
}

.cdc-fmx-grid-cell {
	background: #fff;
	border: 1px solid var(--cdc-border);
	border-radius: 8px;
	padding: 0.75rem;
}

.cdc-fmx-grid-cell.is-empty {
	background: transparent;
	border: 1px dashed var(--cdc-border);
}

.cdc-fmx-grid-cell.is-bitewing {
	border-color: rgba(238, 108, 35, 0.45);
	background: rgba(238, 108, 35, 0.04);
}

.cdc-fmx-cell-label {
	margin: 0 0 0.6rem;
	font-size: 13px;
	font-weight: 600;
	color: var(--cdc-blue);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.5rem;
}

.cdc-fmx-grid-cell.is-bitewing .cdc-fmx-cell-label {
	color: var(--cdc-orange);
}

.cdc-fmx-bw-tag {
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	background: rgba(238, 108, 35, 0.18);
	color: var(--cdc-orange);
	padding: 0.15rem 0.45rem;
	border-radius: 10px;
}

/* Screen-reader-only utility for hiding upload-button text visually
 * while keeping it available to assistive tech. */
.cdc-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.cdc-fmx-cell-slots.is-rows {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	/* Cap the row width so inputs don't stretch absurdly inside the now
	 * full-width parent cell. Labels sit on the left, whitespace fills
	 * any remaining cell width to the right. */
	max-width: 760px;
}

/* Shared grid template — header row + each slot row use the same columns
 * so everything lines up vertically. Columns:
 *   1. label  ("Upper Left 1")
 *   2. thumb  (48px square)
 *   3. S Err  (number)
 *   4. S Init (text)
 *   5. I Err  (number, readonly)
 *   6. I Init (text, readonly)
 *   7. upload (icon button, editable only)
 */
.cdc-fmx-row-head,
.cdc-fmx-slot.is-row {
	display: grid;
	/* label fixed-tight; thumb 48px; 4 input columns flex with a min of
	 * 80px each so even the longest header word ("INSTRUCTOR") fits on
	 * one line above the input; upload icon 36px. */
	grid-template-columns: 100px 48px minmax(80px, 1fr) minmax(80px, 1fr) minmax(80px, 1fr) minmax(80px, 1fr) 36px;
	gap: 0.4rem;
	align-items: center;
}

/* Locked view has no upload column — drop the last col. */
.cdc-fmx-grid.is-locked .cdc-fmx-row-head,
.cdc-fmx-slot.is-row.is-locked {
	grid-template-columns: 100px 48px minmax(80px, 1fr) minmax(80px, 1fr) minmax(80px, 1fr) minmax(80px, 1fr);
}

.cdc-fmx-row-head {
	padding: 0 0.1rem 0.25rem;
}

.cdc-fmx-row-head > div {
	font-size: 9.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	line-height: 1.15;
	color: var(--cdc-gray);
	text-align: center;
}

.cdc-fmx-row-head > div:nth-child(5),
.cdc-fmx-row-head > div:nth-child(6) {
	color: var(--cdc-orange);
}

.cdc-fmx-slot.is-row {
	padding: 0.35rem 0.4rem;
	background: #fff;
	border: 1px solid var(--cdc-border);
	border-radius: 4px;
	position: relative;
	transition: background-color 120ms ease;
}

.cdc-fmx-slot.is-row.is-bitewing {
	border-color: rgba(238, 108, 35, 0.45);
	background: rgba(238, 108, 35, 0.04);
}

.cdc-fmx-slot.is-row.is-uploading::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.7);
	border-radius: 4px;
	pointer-events: none;
}

.cdc-fmx-slot.is-row.has-upload-error {
	border-color: var(--cdc-red);
}

.cdc-fmx-slot-label {
	font-size: 12px;
	font-weight: 600;
	color: var(--cdc-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cdc-fmx-slot-image {
	width: 48px;
	height: 48px;
	background: #000;
	border: 1px solid var(--cdc-border);
	border-radius: 3px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.cdc-fmx-slot-image a {
	display: block;
	width: 100%;
	height: 100%;
}

.cdc-fmx-slot-preview {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	display: block;
}

.cdc-fmx-slot-placeholder {
	color: var(--cdc-gray-2);
	font-size: 18px;
	background: var(--cdc-bg-soft);
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cdc-fmx-slot-se,
.cdc-fmx-slot-ie,
.cdc-fmx-slot-si,
.cdc-fmx-slot-ii {
	width: 100%;
	padding: 0.3rem 0.25rem;
	border: 1px solid var(--cdc-border);
	border-radius: 4px;
	font-size: 13px;
	text-align: center;
	background: #fff;
}

.cdc-fmx-slot-si,
.cdc-fmx-slot-ii {
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: 0.5px;
}

.cdc-fmx-slot-ie[readonly],
.cdc-fmx-slot-ii[readonly] {
	background: var(--cdc-bg-soft);
	color: var(--cdc-gray);
	cursor: not-allowed;
}

/* Read-only display cells in locked view. */
.cdc-fmx-slot-cell {
	font-size: 13px;
	text-align: center;
	padding: 0.3rem 0.25rem;
	background: var(--cdc-bg-soft);
	border-radius: 3px;
	color: var(--cdc-text);
}

.cdc-fmx-slot-cell.is-instructor {
	background: rgba(238, 108, 35, 0.08);
	color: var(--cdc-orange);
	font-weight: 600;
}

.cdc-fmx-slot-actions {
	display: flex;
}

.cdc-fmx-slot-upload-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 0.3rem 0.3rem;
	border: 1px solid var(--cdc-blue);
	background: #fff;
	color: var(--cdc-blue);
	border-radius: 4px;
	font-size: 19px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 120ms ease;
}

.cdc-fmx-slot-upload-btn:hover {
	background: rgba(19, 85, 166, 0.08);
}

.cdc-fmx-slot-error {
	margin: 0.25rem 0 0;
	color: var(--cdc-red);
	font-size: 11px;
	line-height: 1.4;
	grid-column: 1 / -1;
}

.cdc-fmx-slot-missing {
	color: var(--cdc-gray-2);
}

/* Mobile: stack each slot vertically again so the inputs don't get crushed. */
@media (max-width: 700px) {
	.cdc-fmx-row-head {
		display: none;
	}
	.cdc-fmx-slot.is-row,
	.cdc-fmx-grid.is-locked .cdc-fmx-slot.is-row.is-locked {
		grid-template-columns: 48px 1fr 1fr;
		grid-template-areas:
			"thumb  label   upload"
			"thumb  serr    sinit"
			"thumb  ierr    iinit";
		gap: 0.4rem;
		padding: 0.5rem;
	}
	.cdc-fmx-slot.is-row .cdc-fmx-slot-image   { grid-area: thumb; width: 56px; height: 56px; }
	.cdc-fmx-slot.is-row .cdc-fmx-slot-label   { grid-area: label; }
	.cdc-fmx-slot.is-row .cdc-fmx-slot-actions { grid-area: upload; }
	.cdc-fmx-slot.is-row .cdc-fmx-slot-se,
	.cdc-fmx-slot.is-row .cdc-fmx-slot-cell:nth-of-type(1) { grid-area: serr; }
	.cdc-fmx-slot.is-row .cdc-fmx-slot-si,
	.cdc-fmx-slot.is-row .cdc-fmx-slot-cell:nth-of-type(2) { grid-area: sinit; }
	.cdc-fmx-slot.is-row .cdc-fmx-slot-ie,
	.cdc-fmx-slot.is-row .cdc-fmx-slot-cell:nth-of-type(3) { grid-area: ierr; }
	.cdc-fmx-slot.is-row .cdc-fmx-slot-ii,
	.cdc-fmx-slot.is-row .cdc-fmx-slot-cell:nth-of-type(4) { grid-area: iinit; }
}

/* The 800px media query for .cdc-fmx-grid-row used to swap from 3-col to
 * 1-col; the layout is now always 1-col so this block is no longer needed. */

/* ---------- FMX mount-view modal ---------- */

.cdc-fmx-mount-actions {
	margin: 0 0 0.75rem;
}

.cdc-fmx-mount-trigger {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}

body.cdc-fmx-mount-open {
	overflow: hidden;
}

.cdc-fmx-mount-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cdc-fmx-mount-modal[hidden] {
	display: none;
}

.cdc-fmx-mount-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.75);
}

.cdc-fmx-mount-dialog {
	position: relative;
	width: 96%;
	max-width: 1400px;
	max-height: 92vh;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.cdc-fmx-mount-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.85rem 1.25rem;
	border-bottom: 1px solid var(--cdc-border);
	background: var(--cdc-bg-soft);
}

.cdc-fmx-mount-header h3 {
	margin: 0;
	color: var(--cdc-blue);
	font-size: 18px;
}

.cdc-fmx-mount-close {
	background: transparent;
	border: none;
	font-size: 18px;
	color: var(--cdc-gray);
	cursor: pointer;
	padding: 0.3rem 0.5rem;
	border-radius: 4px;
	line-height: 1;
}

.cdc-fmx-mount-close:hover {
	background: rgba(0, 0, 0, 0.06);
	color: var(--cdc-text);
}

.cdc-fmx-mount-grid {
	flex: 1;
	overflow: auto;
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.cdc-fmx-mount-row {
	display: grid;
	grid-template-columns: 2fr 3fr 2fr; /* roughly mirrors the 2-3-2 image counts */
	gap: 1rem;
	align-items: stretch;
}

.cdc-fmx-mount-cell {
	background: var(--cdc-bg-soft);
	border: 1px solid var(--cdc-border);
	border-radius: 8px;
	padding: 0.6rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.cdc-fmx-mount-cell.is-empty {
	background: transparent;
	border: 1px dashed var(--cdc-border);
}

.cdc-fmx-mount-cell.is-bitewing {
	border-color: rgba(238, 108, 35, 0.5);
	background: rgba(238, 108, 35, 0.05);
}

.cdc-fmx-mount-cell-label {
	font-size: 11px;
	font-weight: 600;
	color: var(--cdc-blue);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	text-align: center;
}

.cdc-fmx-mount-cell.is-bitewing .cdc-fmx-mount-cell-label {
	color: var(--cdc-orange);
}

.cdc-fmx-mount-cell-images {
	display: flex;
	gap: 0.5rem;
	flex: 1;
	align-items: stretch;
}

.cdc-fmx-mount-img {
	flex: 1;
	min-width: 0;
	background: #000;
	border-radius: 4px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 3 / 4;
}

.cdc-fmx-mount-img a,
.cdc-fmx-mount-img img {
	display: block;
	width: 100%;
	height: 100%;
}

.cdc-fmx-mount-img img {
	object-fit: contain;
}

.cdc-fmx-mount-empty {
	color: var(--cdc-gray-2);
	background: var(--cdc-bg-soft);
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
}

.cdc-fmx-mount-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 0.75rem 1.25rem;
	border-top: 1px solid var(--cdc-border);
	background: var(--cdc-bg-soft);
}

.cdc-fmx-mount-footer p {
	margin: 0;
	font-size: 12px;
	color: var(--cdc-gray);
	font-style: italic;
}

@media (max-width: 900px) {
	.cdc-fmx-mount-row {
		grid-template-columns: 1fr;
	}
	.cdc-fmx-mount-cell.is-empty {
		display: none;
	}
	.cdc-fmx-mount-img {
		aspect-ratio: 4 / 3;
	}
}

/* ---------- FMX radiograph lightbox ---------- */

body.cdc-fmx-lightbox-open {
	overflow: hidden;
}

.cdc-fmx-lightbox {
	position: fixed;
	inset: 0;
	z-index: 10000; /* above the mount modal (9999) */
	display: flex;
	align-items: center;
	justify-content: center;
}

.cdc-fmx-lightbox[hidden] {
	display: none;
}

.cdc-fmx-lightbox-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.92);
	cursor: zoom-out;
}

.cdc-fmx-lightbox-close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	z-index: 2;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.6);
	border: 1px solid rgba(255, 255, 255, 0.3);
	color: #fff;
	font-size: 16px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color 120ms ease;
}

.cdc-fmx-lightbox-close:hover,
.cdc-fmx-lightbox-close:focus-visible {
	background: rgba(255, 255, 255, 0.15);
	outline: none;
}

.cdc-fmx-lightbox-figure {
	position: relative;
	z-index: 1;
	margin: 0;
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.85rem;
	max-width: 95vw;
	max-height: 95vh;
}

.cdc-fmx-lightbox-img {
	display: block;
	max-width: 100%;
	max-height: 82vh;
	object-fit: contain;
	background: #000;
	border-radius: 4px;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.6);
}

.cdc-fmx-lightbox-caption {
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	letter-spacing: 0.3px;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* Stacked checklist — one item per row, full-width. Use for long-text
 * acknowledgement checklists (X-Ray Contract, similar). Re-uses the
 * .cdc-cond-item styling for the inner label+checkbox pill. */
.cdc-checklist-stack {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0.5rem 0;
}

.cdc-checklist-stack .cdc-cond-item {
	align-items: flex-start;
	padding: 0.55rem 0.75rem;
	font-size: 14px;
	line-height: 1.45;
}

.cdc-checklist-stack .cdc-cond-item input[type="checkbox"] {
	margin-top: 2px;
}

/* Conditions checklist grid (Coronal Polish patient mega) */
.cdc-cond-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 0.4rem 0.85rem;
	margin-top: 0.5rem;
}

.cdc-cond-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.35rem 0.55rem;
	background: var(--cdc-bg-soft);
	border-radius: 4px;
	font-size: 13px;
	cursor: pointer;
}

.cdc-cond-item input[type="checkbox"] {
	flex: 0 0 auto;
	margin: 0;
	accent-color: var(--cdc-blue);
}

.cdc-cond-item:has(input:checked) {
	background: rgba(19, 85, 166, 0.1);
	color: var(--cdc-blue);
	font-weight: 600;
}

.cdc-tl-fineprint {
	margin: 0.75rem 0 1rem;
	font-size: 13px !important;
	line-height: 1.4;
	color: var(--cdc-gray);
}

.cdc-program-form-help {
	margin: 0.25rem 0 1rem;
	font-size: 13px;
	color: #000;
	font-style: italic;
}

/* ---------- Process evaluation (clinical procedure) layout ---------- */

.cdc-pe-objective {
	margin: 0 0 1rem;
	padding: 0.9rem 1.1rem;
	background: var(--cdc-bg-soft);
	border-left: 4px solid var(--cdc-blue);
	border-radius: 4px;
}

.cdc-pe-objective-title {
	margin: 0 0 0.35rem;
	font-size: 18px !important;
	color: var(--cdc-blue);
	letter-spacing: 0.5px;
	font-weight: 700;
}

.cdc-pe-objective p {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
}

/* Reference figures for the procedure (Max/Min points + Min practices). */
.cdc-pe-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	margin-top: 0.75rem;
	padding-top: 0.75rem;
	border-top: 1px dashed var(--cdc-border);
}

.cdc-pe-stat {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.cdc-pe-stat-label {
	font-size: 11px;
	font-weight: 700;
	color: var(--cdc-gray);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.cdc-pe-stat-value {
	font-size: 18px;
	font-weight: 700;
	color: var(--cdc-blue);
}

.cdc-pe-scale {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	margin: 0 0 1.25rem;
	padding: 0.75rem 1.1rem;
	background: #fff;
	border: 1px solid var(--cdc-border);
	border-radius: 4px;
	font-size: 13px;
	color: var(--cdc-text);
}

.cdc-pe-scale strong:first-child {
	color: var(--cdc-gray);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-size: 12px;
}

.cdc-pe-scale span strong {
	color: var(--cdc-orange);
	font-weight: 700;
}

.cdc-pe-step-table {
	display: block;
	margin: 0 0 1.5rem;
	border: 1px solid var(--cdc-border);
	border-radius: 6px;
	/* No overflow: hidden here — it would clip the SE/IE/SI/II header
	   tooltips, which intentionally pop up above the table's top edge.
	   Rounded corners are recreated below on the first/last children instead. */
}

.cdc-pe-step-table > *:first-child {
	border-radius: 6px 6px 0 0;
}

.cdc-pe-step-table > *:last-child {
	border-radius: 0 0 6px 6px;
}

.cdc-pe-step-head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) max-content max-content max-content max-content max-content;
	gap: 1rem;
	padding: 0.65rem 1rem;
	background: var(--cdc-bg-soft);
	font-size: 12px;
	font-weight: 700;
	color: var(--cdc-gray);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.cdc-pe-step-head-rate,
.cdc-pe-step-head-se,
.cdc-pe-step-head-ie,
.cdc-pe-step-head-si,
.cdc-pe-step-head-ii {
	text-align: right;
	min-width: 2.5rem;
}

.cdc-pe-section-row {
	padding: 0.6rem 1rem;
	background: rgba(19, 85, 166, 0.05);
	border-top: 1px solid var(--cdc-border);
}

.cdc-pe-section-title {
	font-weight: 700;
	color: var(--cdc-blue);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
}

/* Header step row — a non-scored "parent" line like "8. Repeat steps 4-8..."
 * that introduces lettered sub-items beneath it. Spans full width (no
 * rating column rendered); steps below it are visually nested via the
 * .cdc-pe-step-row:not(.cdc-pe-step-row-header) padding bump. */
.cdc-pe-step-row-header {
	display: block;
	background: rgba(19, 85, 166, 0.04);
	border-top: 1px solid var(--cdc-border);
	padding: 0.65rem 1rem;
}

.cdc-pe-step-row-header .cdc-pe-step-text {
	font-weight: 600;
	color: #1f1f1f;
	font-size: 14px;
}

/* Explicit sub-item indent — opt-in via .cdc-pe-step-row-sub. Author marks
 * each sub-item with the "Sub-item (indented)" ACF checkbox; steps without
 * the flag render at top level even when a Header appears above. */
.cdc-pe-step-row-sub {
	padding-left: 2.25rem !important;
	background: rgba(19, 85, 166, 0.02);
}

.cdc-pe-step-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) max-content max-content max-content max-content max-content;
	gap: 1rem;
	align-items: center;
	padding: 0.7rem 1rem;
	border-top: 1px solid var(--cdc-border);
}

.cdc-pe-step-text {
	font-size: 14px;
	line-height: 1.45;
}

.cdc-pe-step-rating {
	display: inline-flex;
	gap: 0.35rem;
}

.cdc-pe-step-mirror {
	min-width: 2.5rem;
	text-align: right;
	font-size: 13px;
	font-weight: 700;
	color: var(--cdc-blue);
	font-variant-numeric: tabular-nums;
}

.cdc-pe-th-help {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: 3px;
	color: var(--cdc-gray);
	font-size: 18px;
	text-transform: none;
	letter-spacing: normal;
	cursor: help;
	position: relative;
	top: -5px;
	vertical-align: middle;
}

.cdc-pe-th-help::after {
	content: attr(data-tooltip);
	position: absolute;
	bottom: calc(100% + 8px);
	left: 0;
	background: #1f1f1f;
	color: #fff;
	padding: 0.35rem 0.6rem;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 400;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.12s ease;
	z-index: 20;
	pointer-events: none;
}

.cdc-pe-th-help:hover::after,
.cdc-pe-th-help:focus::after {
	opacity: 1;
	visibility: visible;
}

/* Rightmost column (II) — flip the tooltip to open leftward so it
 * doesn't overflow past the table's right edge. */
.cdc-pe-step-head-ii .cdc-pe-th-help::after {
	left: auto;
	right: 0;
}

.cdc-pe-rating-option {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	min-height: 32px;
	padding: 0 0.5rem;
	background: #fff;
	border: 1px solid var(--cdc-border);
	border-radius: 4px;
	cursor: pointer;
	font-weight: 700;
	font-size: 14px;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.cdc-pe-rating-option input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.cdc-pe-rating-option:hover {
	border-color: var(--cdc-blue);
}

/* Default "any rating picked" feedback — overridden by scale-specific rules
 * further down. Kept as a fallback if a form lacks data-scale. */
.cdc-pe-rating-option:has(input:checked) {
	background: var(--cdc-blue);
	color: #fff;
	border-color: var(--cdc-blue);
}

/* Demo tabs (v2 — only shown when pe_demonstrations > 1) */
.cdc-pe-demo-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 1rem 0 0.85rem;
	border-bottom: 2px solid var(--cdc-border);
}

.cdc-pe-demo-tab {
	padding: 0.55rem 1rem;
	background: transparent;
	border: 0;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	cursor: pointer;
	font-weight: 600;
	font-size: 14px;
	color: var(--cdc-gray);
	transition: color 0.15s ease, border-color 0.15s ease;
}

.cdc-pe-demo-tab:hover {
	color: var(--cdc-blue);
}

.cdc-pe-demo-tab.is-active {
	color: var(--cdc-blue);
	border-bottom-color: var(--cdc-blue);
}

.cdc-pe-demo-panel {
	display: none;
}

.cdc-pe-demo-panel.is-active {
	display: block;
}

.cdc-pe-demo-heading {
	margin: 0 0 0.85rem;
	font-size: 1rem;
	color: var(--cdc-blue);
	font-weight: 700;
}

/* Critical step asterisk */
.cdc-pe-asterisk {
	color: var(--cdc-red);
	font-weight: 700;
	margin-left: 0.2rem;
}

.cdc-pe-step-row.is-critical {
	background: rgba(220, 53, 69, 0.03);
}

/* Disabled rating buttons (when step's max_rating excludes higher values) */
.cdc-pe-rating-option.is-disabled {
	opacity: 0.25;
	cursor: not-allowed;
	pointer-events: none;
}

/* Running total per demonstration */
.cdc-pe-demo-total {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 1rem;
	padding: 0.7rem 1rem;
	background: var(--cdc-bg-soft);
	border-radius: 6px;
}

.cdc-pe-demo-total-label {
	font-size: 13px;
	font-weight: 700;
	color: var(--cdc-gray);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.cdc-pe-demo-total-value {
	display: inline-flex;
	align-items: baseline;
	gap: 0.3rem;
	font-size: 16px;
	color: var(--cdc-text);
}

.cdc-pe-total {
	font-size: 16px;
	font-weight: 700;
	color: var(--cdc-blue);
}

.cdc-pe-total-sep,
.cdc-pe-total-max {
	color: var(--cdc-gray);
	font-weight: 600;
}

/* Final score block on locked view */
.cdc-pe-final-score {
	margin-top: 1.5rem;
	padding: 1rem 1.25rem;
	background: rgba(19, 85, 166, 0.05);
	border-left: 4px solid var(--cdc-blue);
	border-radius: 6px;
}

.cdc-pe-final-score h4 {
	margin: 0 0 0.75rem;
	font-size: 0.85rem;
	color: var(--cdc-blue);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.cdc-pe-final-score dl {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.4rem 1rem;
	margin: 0;
}

.cdc-pe-final-score dt {
	font-weight: 600;
	color: var(--cdc-gray);
	font-size: 0.9rem;
}

.cdc-pe-final-score dd {
	margin: 0;
	font-weight: 700;
	color: var(--cdc-text);
}

/* Per-step comments below each demo panel */
.cdc-pe-comments-block {
	margin-top: 1.25rem;
}

.cdc-pe-comments-block label {
	display: block;
	margin-bottom: 0.3rem;
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--cdc-text);
}

.cdc-pe-comments-block textarea {
	width: 100%;
	padding: 0.55rem 0.75rem;
	border: 1px solid var(--cdc-border);
	border-radius: 4px;
	font-size: 0.95rem;
	font-family: inherit;
}

/* Scale-aware color cues on the active radio buttons.
 * 1/2/3 scale: 3 = green (best), 2 = orange, 1 = red.
 * 0/1/2 scale: 2 = green (best), 1 = orange, 0 = red. */
.cdc-program-form-process-evaluation[data-scale="1_2_3"] .cdc-pe-rating-option:has(input[value="3"]:checked) {
	background: var(--cdc-green);
	border-color: var(--cdc-green);
	color: #fff;
}
.cdc-program-form-process-evaluation[data-scale="1_2_3"] .cdc-pe-rating-option:has(input[value="2"]:checked) {
	background: var(--cdc-orange);
	border-color: var(--cdc-orange);
	color: #fff;
}
.cdc-program-form-process-evaluation[data-scale="1_2_3"] .cdc-pe-rating-option:has(input[value="1"]:checked) {
	background: var(--cdc-red);
	border-color: var(--cdc-red);
	color: #fff;
}
.cdc-program-form-process-evaluation[data-scale="0_1_2"] .cdc-pe-rating-option:has(input[value="2"]:checked) {
	background: var(--cdc-green);
	border-color: var(--cdc-green);
	color: #fff;
}
.cdc-program-form-process-evaluation[data-scale="0_1_2"] .cdc-pe-rating-option:has(input[value="1"]:checked) {
	background: var(--cdc-orange);
	border-color: var(--cdc-orange);
	color: #fff;
}
.cdc-program-form-process-evaluation[data-scale="0_1_2"] .cdc-pe-rating-option:has(input[value="0"]:checked) {
	background: var(--cdc-red);
	border-color: var(--cdc-red);
	color: #fff;
}

/* Locked-view rating badge — scale-aware colors mirror the active form. */
.cdc-pe-rating-display {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	min-height: 32px;
	padding: 0 0.5rem;
	border-radius: 4px;
	font-weight: 700;
	font-size: 14px;
	background: var(--cdc-bg-soft);
	border: 1px solid var(--cdc-border);
	color: var(--cdc-text);
}

/* 1/2/3 scale */
.cdc-pe-rating-display-scale-1_2_3.cdc-pe-rating-display-v-3 {
	background: var(--cdc-green); color: #fff; border-color: var(--cdc-green);
}
.cdc-pe-rating-display-scale-1_2_3.cdc-pe-rating-display-v-2 {
	background: var(--cdc-orange); color: #fff; border-color: var(--cdc-orange);
}
.cdc-pe-rating-display-scale-1_2_3.cdc-pe-rating-display-v-1 {
	background: var(--cdc-red); color: #fff; border-color: var(--cdc-red);
}

/* 0/1/2 scale */
.cdc-pe-rating-display-scale-0_1_2.cdc-pe-rating-display-v-2 {
	background: var(--cdc-green); color: #fff; border-color: var(--cdc-green);
}
.cdc-pe-rating-display-scale-0_1_2.cdc-pe-rating-display-v-1 {
	background: var(--cdc-orange); color: #fff; border-color: var(--cdc-orange);
}
.cdc-pe-rating-display-scale-0_1_2.cdc-pe-rating-display-v-0 {
	background: var(--cdc-red); color: #fff; border-color: var(--cdc-red);
}

/* Backwards-compat for v1 locked rows (8HIC submitted before v2). */
.cdc-pe-rating-display-3 {
	background: var(--cdc-green); color: #fff; border-color: var(--cdc-green);
}
.cdc-pe-rating-display-2 {
	background: var(--cdc-orange); color: #fff; border-color: var(--cdc-orange);
}
.cdc-pe-rating-display-1 {
	background: var(--cdc-red); color: #fff; border-color: var(--cdc-red);
}

.cdc-pe-locked-block {
	margin-top: 1.25rem;
	padding: 0.85rem 1rem;
	background: #fff;
	border: 1px solid var(--cdc-border);
	border-radius: 6px;
}

.cdc-pe-locked-block h4 {
	margin: 0 0 0.4rem;
	font-size: 0.85rem;
	color: var(--cdc-gray);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-weight: 700;
}

.cdc-pe-locked-block p {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
}

.cdc-pe-instructor-note {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	margin: 1rem 0;
	padding: 0.85rem 1rem;
	background: rgba(238, 108, 35, 0.08);
	border-left: 4px solid var(--cdc-orange);
	border-radius: 4px;
	color: var(--cdc-text);
	font-size: 13px;
	line-height: 1.5;
}

.cdc-pe-instructor-note i {
	color: var(--cdc-orange);
	font-size: 1.05rem;
	margin-top: 0.05rem;
	flex: 0 0 auto;
}

@media (max-width: 600px) {
	.cdc-pe-step-row {
		grid-template-columns: 1fr;
		gap: 0.5rem;
	}

	.cdc-pe-step-head-rate,
	.cdc-pe-step-head-se,
	.cdc-pe-step-head-ie,
	.cdc-pe-step-head-si,
	.cdc-pe-step-head-ii {
		display: none;
	}

	.cdc-pe-step-mirror {
		text-align: left;
	}

	.cdc-pe-step-mirror::before {
		content: attr(data-cdc-pe-mobile-label) ": ";
		font-weight: 600;
		color: var(--cdc-gray);
		text-transform: uppercase;
		font-size: 11px;
	}
}

/* Stacked radio/checkbox acknowledgment lists (used by the Customer Training
 * Contract — long-statement options where each item is its own card row). */
.cdc-ctc-options,
.cdc-ctc-acks {
	list-style: none;
	margin: 0.75rem 0 0;
	padding: 0;
}

.cdc-ctc-options li,
.cdc-ctc-acks li {
	margin-bottom: 0.6rem;
	padding: 0.85rem 1rem;
	background: var(--cdc-bg-soft);
	border-left: 3px solid var(--cdc-orange);
	border-radius: 6px;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.cdc-ctc-options li:has(input:checked),
.cdc-ctc-acks li:has(input:checked) {
	background: rgba(25, 135, 84, 0.07);
	border-left-color: var(--cdc-green);
}

.cdc-ctc-options label,
.cdc-ctc-acks label {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	cursor: pointer;
	line-height: 1.45;
	margin: 0;
	font-weight: 500;
	font-size: 14px;
}

.cdc-ctc-options label span,
.cdc-ctc-acks label span {
	position: relative;
	top: 2px;
}

.cdc-ctc-options input,
.cdc-ctc-acks input {
	flex: 0 0 auto;
	margin: 0.15rem 0 0;
	width: 1.15rem;
	height: 1.15rem;
	accent-color: var(--cdc-blue);
	cursor: pointer;
}

.cdc-ctc-options li:has(input:checked) input,
.cdc-ctc-acks li:has(input:checked) input {
	accent-color: var(--cdc-green);
}

.cdc-program-form-help {
	margin: 0.5rem 0;
	color: #000;
	font-style: italic;
	font-size: 0.9rem;
}

/* Submitted-information summary on the locked view */
.cdc-bespoke-summary {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.5rem 1.5rem;
	margin: 0;
}

.cdc-bespoke-summary dt {
	font-weight: 700;
	color: var(--cdc-gray);
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	position: relative;
	top: 2px;
}

.cdc-bespoke-summary dd {
	margin: 0;
	color: var(--cdc-text);
	font-size: 0.95rem;
	word-break: break-word;
}

/* Acknowledgments list — long checkbox labels render readable instead
 * of squeezed into a dt/dd grid column. */
.cdc-bespoke-acks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.cdc-bespoke-ack-item {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	padding: 0.7rem 0.95rem;
	background: var(--cdc-bg-soft);
	border-left: 3px solid var(--cdc-border);
	border-radius: 6px;
	font-size: 0.92rem;
	line-height: 1.55;
	color: var(--cdc-text);
}

.cdc-bespoke-ack-item.is-checked {
	border-left-color: var(--cdc-green);
	background: rgba(25, 135, 84, 0.06);
}

.cdc-bespoke-ack-item i {
	color: var(--cdc-gray-2);
	font-size: 1.05rem;
	line-height: 1.5;
	flex-shrink: 0;
}

.cdc-bespoke-ack-item.is-checked i {
	color: var(--cdc-green);
}

/* ---------- §13 — Inline checkable items ([cdc_check]) ------------- */

.cdc-check-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin: 0.4rem 0;
	padding: 0.7rem 1rem;
	background: var(--cdc-bg-soft);
	border-left: 3px solid var(--cdc-border);
	border-radius: 6px;
	transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.cdc-check-item.is-checked {
	background: rgba(25, 135, 84, 0.07);
	border-left-color: var(--cdc-green);
}

.cdc-check-item.is-checked .cdc-check-text {
	color: var(--cdc-gray);
	text-decoration: line-through;
	text-decoration-color: rgba(108, 117, 125, 0.5);
}

.cdc-check-item-auto {
	border-left-color: var(--cdc-orange);
}

.cdc-check-item-auto.is-checked {
	border-left-color: var(--cdc-green);
}

.cdc-check-item.is-locked {
	opacity: 0.85;
}

.cdc-check-label {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	flex: 1;
	cursor: pointer;
	line-height: 1.45;
	margin: 0;
	font-size: 14px;
}

.cdc-check-item .cdc-check-input {
	flex: 0 0 auto;
	margin: 0.15rem 0 0;
	width: 1.15rem;
	height: 1.15rem;
	accent-color: var(--cdc-blue);
	cursor: pointer;
	position: relative;
	top: -2px;
}

.cdc-check-item .cdc-check-input:disabled {
	cursor: not-allowed;
}

.cdc-check-item.is-checked .cdc-check-input {
	accent-color: var(--cdc-green);
}

.cdc-check-item-auto .cdc-check-input {
	accent-color: var(--cdc-orange);
}

.cdc-check-text {
	flex: 1;
	color: var(--cdc-text);
}

.cdc-check-hint {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	margin-left: 0.6rem;
	font-size: 0.78rem;
	font-style: italic;
	color: var(--cdc-orange);
	white-space: nowrap;
	position: relative;
	top: 2px;
}

.cdc-check-item.is-checked .cdc-check-hint {
	color: var(--cdc-green);
}

.cdc-check-right {
	flex: 0 0 auto;
	color: var(--cdc-gray);
	font-weight: 600;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	font-size: 14px;
}

.cdc-check-course-link {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	color: var(--cdc-blue);
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease;
}

.cdc-check-course-link:hover {
	color: var(--cdc-orange);
	text-decoration: underline;
}

.cdc-check-course-link i {
	font-size: 1em;
}

/* Plain-text fallback when shortcode is used outside context */
.cdc-check-fallback {
	color: var(--cdc-text);
}

/* ---------- §13 — Responsive ------------- */

@media (max-width: 768px) {
	.cdc-program-hero {
		flex-direction: column;
		text-align: center;
		padding: 1.5rem;
	}

	.cdc-section-header {
		flex-direction: column;
		align-items: stretch;
		gap: 0.6rem;
	}

	.cdc-section-progress {
		min-width: 0;
	}

	.cdc-program-item-body,
	.cdc-program-form,
	.cdc-program-signature-card {
		padding: 1.25rem 1.25rem;
	}

	.cdc-program-item-title {
		font-size: 1.4rem;
	}
}

@media (max-width: 600px) {
	/* Rows stack vertically on phones: title row, then action below. */
	.cdc-card {
		flex-direction: column;
		align-items: stretch;
	}

	.cdc-card-body {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
		padding: 0.85rem 1rem;
	}

	.cdc-card-footer {
		padding: 0.75rem 1rem;
		border-left: 0;
		border-top: 1px solid var(--cdc-border);
		background: var(--cdc-bg-soft);
		justify-content: flex-end;
	}

	/* Field grids and trios collapse to single column on phones. */
	.cdc-field-grid,
	.cdc-trio {
		grid-template-columns: 1fr !important;
	}
}

/* Desktop-only larger section title. */
@media (min-width: 768px) {
	.cdc-program-form-section-title {
		font-size: 20px !important;
	}
}

/* ---------- Admin preview banner ----------
 * Shown at the top of a student's locked packet page when an admin
 * is viewing via ?as_user=<id>. Makes it crystal clear which
 * student's data is being displayed and gives a one-click back path
 * to the Submissions queue. */

.cdc-program-preview-banner {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1rem;
	padding: 0.7rem 1rem;
	background: rgba(19, 85, 166, 0.08);
	border-left: 4px solid var(--cdc-blue);
	border-radius: 6px;
	font-size: 14px;
	color: var(--cdc-text);
}

.cdc-program-preview-banner i {
	color: var(--cdc-blue);
	font-size: 1.1rem;
	flex-shrink: 0;
}

.cdc-program-preview-banner span {
	flex: 1;
	line-height: 1.45;
}

.cdc-program-preview-back {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	color: var(--cdc-blue);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.cdc-program-preview-back:hover {
	color: #0e4585;
}

@media (max-width: 600px) {
	.cdc-program-preview-banner {
		flex-wrap: wrap;
	}
	.cdc-program-preview-back {
		margin-left: auto;
	}
}

/* ---------- Not-enrolled screen ----------
 * Shown when a logged-in user with no cdc_program_track meta tries to
 * hit /my-account/program/. Same visual treatment as the pending screen
 * but using the blue accent to read as informational rather than
 * action-required. */

.cdc-not-enrolled {
	max-width: 640px;
	margin: 2rem auto;
	margin-left: 0;
	padding: 2rem;
	background: var(--cdc-bg-soft);
	border: 1px solid var(--cdc-border);
	border-left: 4px solid var(--cdc-blue);
	border-radius: var(--cdc-radius);
}

.cdc-not-enrolled h2 {
	margin-top: 0;
	margin-bottom: 1rem;
	color: var(--cdc-blue);
	font-size: 22px;
}

.cdc-not-enrolled p {
	margin: 0.75rem 0;
	color: var(--cdc-text);
	line-height: 1.55;
}

.cdc-not-enrolled a {
	color: var(--cdc-blue);
	text-decoration: underline;
}

/* ---------- Pending-activation screen ---------- */

.cdc-pending-activation {
	max-width: 640px;
	margin: 2rem auto;
	padding: 2rem;
	background: var(--cdc-bg-soft);
	border: 1px solid var(--cdc-border);
	border-left: 4px solid var(--cdc-orange);
	border-radius: var(--cdc-radius);
}

.cdc-pending-activation h2 {
	margin-top: 0;
	margin-bottom: 1rem;
	color: var(--cdc-blue);
	font-size: 22px;
}

.cdc-pending-activation p {
	margin: 0.75rem 0;
	color: var(--cdc-text);
	line-height: 1.55;
}

.cdc-pending-activation a {
	color: var(--cdc-blue);
	text-decoration: underline;
}

.cdc-pending-activation .cdc-pending-booking {
	margin: 1.25rem 0;
	padding: 1rem 1.25rem;
	background: #fff;
	border: 1px solid var(--cdc-border);
	border-left: 3px solid var(--cdc-blue);
	border-radius: 6px;
	font-size: 16px;
}

/* ============================================================
 * X-Ray Patient FMX — single image upload + 3×3 grading grid.
 * Replaces the old 18-slot grid + mount-modal + lightbox.
 * ============================================================ */

.cdc-fmx-single-upload {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin: 1rem 0 1.5rem;
}

.cdc-fmx-single-preview {
	border: 1px dashed var(--cdc-border);
	border-radius: 6px;
	background: #fafbfc;
	padding: 0.75rem;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 200px;
}

.cdc-fmx-single-preview.is-locked {
	background: #fff;
	border-style: solid;
}

.cdc-fmx-single-img {
	max-width: 100%;
	max-height: 480px;
	height: auto;
	display: block;
}

.cdc-fmx-single-placeholder {
	color: var(--cdc-gray);
	text-align: center;
	font-size: 14px;
}

.cdc-fmx-single-placeholder .bi {
	display: block;
	font-size: 36px;
	margin-bottom: 0.5rem;
	opacity: 0.6;
}

.cdc-fmx-single-actions {
	display: flex;
	justify-content: center;
	gap: 0.75rem;
	align-items: center;
	flex-wrap: wrap;
}

.cdc-fmx-single-upload.is-uploading {
	opacity: 0.6;
}

.cdc-fmx-single-error {
	color: var(--cdc-red, #c0392b);
	font-size: 13px;
	margin: 0 0 0 0.5rem;
}

.cdc-fmx-codes {
	columns: 2;
	-webkit-columns: 2;
	column-gap: 1.5rem;
	margin: 0.5rem 0 1rem;
	padding-left: 0;
	list-style: none;
	font-size: 13px;
}

.cdc-fmx-codes li {
	break-inside: avoid;
	margin-bottom: 0.2rem;
}

.cdc-fmx-code-num {
	display: inline-block;
	min-width: 1.6rem;
	color: var(--cdc-gray);
	font-weight: 600;
}

@media (max-width: 600px) {
	.cdc-fmx-codes { columns: 1; }
}

/* The 3×3 grading grid. Each cell contains N films (2 in left/right
   regions, 3 in center). Each film has dual student/instructor
   sub-columns with an error code + initials field. */

.cdc-fmx-grid-cell[data-region] .cdc-fmx-cell-label,
.cdc-fmx-grid-cell.is-locked .cdc-fmx-cell-label {
	font-size: 13px;
	font-weight: 600;
	margin: 0 0 0.4rem;
	color: var(--cdc-dark);
	text-align: center;
}

.cdc-fmx-cell-films {
	display: flex;
	gap: 0.4rem;
}

.cdc-fmx-film {
	flex: 1 1 0;
	min-width: 0;
}

.cdc-fmx-cell-dual {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.25rem;
}

.cdc-fmx-cell-col {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	padding: 0.3rem 0.25rem;
	background: #fafbfc;
	border: 1px solid var(--cdc-border);
	border-radius: 4px;
	position: relative;
}

.cdc-fmx-cell-col.is-student {
	background: #f6faff;
}

.cdc-fmx-cell-col.is-instructor {
	background: #fff8ee;
}

.cdc-fmx-cell-col-label {
	position: absolute;
	top: 2px;
	left: 4px;
	font-size: 9px;
	font-weight: 700;
	color: var(--cdc-gray);
	letter-spacing: 0.5px;
	pointer-events: none;
}

.cdc-fmx-grid-cell .cdc-fmx-code {
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	padding: 0.15rem 0.2rem;
	border: 1px solid var(--cdc-border);
	border-radius: 4px;
	background: #fff;
	width: 100%;
	box-sizing: border-box;
	/* An explicit floor, not just padding + line-height: <input> elements
	   carry their own internal minimum sizing in every browser that pure
	   padding math doesn't fully override. Pinning min-height directly is
	   what actually guarantees the input/div/readonly-input variants of
	   this cell render at the same height instead of drifting apart. */
	min-height: 34px;
	margin: 0;
	/* hide the number spinners — large arrows look messy at this size */
	-moz-appearance: textfield;
}

.cdc-fmx-grid-cell .cdc-fmx-code::-webkit-outer-spin-button,
.cdc-fmx-grid-cell .cdc-fmx-code::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.cdc-fmx-grid-cell .cdc-fmx-code[readonly] {
	background: #fff;
	color: var(--cdc-gray);
}

/* Editable multi-code cell: a div[role=button] (opens the shared popover)
   instead of a number input, so a film can hold more than one error code
   without needing room for a multi-digit value in this small a box.
   Deliberately NOT a <button> — browser UA default button styling never
   quite pixel-matched the plain <input>/<div> used for the read-only
   side, even after several rounds of resets. A div has no built-in
   form-control styling to fight, so it matches by construction. */
.cdc-fmx-grid-cell .cdc-fmx-code-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	cursor: pointer;
}

.cdc-fmx-grid-cell .cdc-fmx-code-btn:hover {
	border-color: var(--cdc-blue);
}

.cdc-fmx-grid-cell .cdc-fmx-code-btn:focus-visible {
	outline: 2px solid var(--cdc-blue);
	outline-offset: 1px;
}

.cdc-fmx-grid-cell .cdc-fmx-code-btn.is-disabled {
	cursor: default;
	opacity: 0.6;
}

.cdc-fmx-code-text {
	/* Comma-separated codes (e.g. "2, 3, 5") wrap onto a second line
	   inside the cell's fixed height rather than overflowing. */
	white-space: normal;
	word-break: break-word;
	text-align: center;
}

.cdc-fmx-code-popover {
	position: absolute;
	z-index: 9999;
	width: 260px;
	max-height: 340px;
	overflow-y: auto;
	background: #fff;
	border: 1px solid var(--cdc-border);
	border-radius: 6px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
	padding: 0.5rem;
}

.cdc-fmx-code-popover-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.4rem;
	padding-bottom: 0.4rem;
	border-bottom: 1px solid var(--cdc-border);
}

.cdc-fmx-code-popover-title {
	font-size: 12px;
	font-weight: 700;
	color: var(--cdc-blue);
}

.cdc-fmx-code-popover-close {
	background: none;
	border: none;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	color: var(--cdc-gray);
	padding: 0 0.25rem;
}

.cdc-fmx-code-popover-list {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.cdc-fmx-code-popover-item {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 12px;
	padding: 0.2rem 0.3rem;
	border-radius: 3px;
	cursor: pointer;
}

.cdc-fmx-code-popover-item:hover {
	background: var(--cdc-bg-soft);
}

.cdc-fmx-code-popover-actions {
	display: flex;
	justify-content: space-between;
	gap: 0.5rem;
	margin-top: 0.5rem;
	padding-top: 0.5rem;
	border-top: 1px solid var(--cdc-border);
}

.cdc-fmx-code-popover-actions .cdc-btn {
	font-size: 12px;
	padding: 0.3rem 0.6rem;
}

.cdc-fmx-grid-cell .cdc-fmx-initials {
	font-size: 12px;
	font-weight: 600;
	text-align: center;
	text-transform: uppercase;
	padding: 0.25rem 0.2rem;
	border: 1px solid var(--cdc-border);
	border-radius: 3px;
	width: 100%;
	box-sizing: border-box;
	min-height: 30px;
	margin: 0;
}

.cdc-fmx-grid-cell .cdc-fmx-initials[readonly] {
	background: #fff;
	color: var(--cdc-gray);
}

/* Box model deliberately identical to .cdc-fmx-code (the editable
   div[role=button]/input in the same grid) — this is the read-only
   display shown for the OTHER side (e.g. the student's codes on the
   admin grading panel, where the instructor's side is editable). They
   must match pixel-for-pixel since they sit side by side in the same row. */
.cdc-fmx-locked-code {
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	padding: 0.15rem 0.2rem;
	background: #fff;
	border: 1px solid var(--cdc-border);
	border-radius: 4px;
	text-align: center;
	width: 100%;
	box-sizing: border-box;
	min-height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Box model deliberately identical to .cdc-fmx-initials, for the same
   reason as .cdc-fmx-locked-code above. */
.cdc-fmx-locked-initials {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	padding: 0.25rem 0.2rem;
	background: #fff;
	border: 1px solid var(--cdc-border);
	border-radius: 3px;
	text-align: center;
	width: 100%;
	box-sizing: border-box;
	min-height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Center column cells (Upper Center / Lower Center) hold 3 films,
   so the initials need to be smaller to stay on one line. Applied to
   both the read-only and editable variants so they stay matched there too. */
.cdc-fmx-grid-cell[data-films="3"] .cdc-fmx-locked-initials,
.cdc-fmx-grid-cell[data-films="3"] .cdc-fmx-initials {
	font-size: 10px;
}

/* Narrow desktop / tablet landscape: still 3-col but the inputs need
   to shrink so the center cell (3 films × 2 sub-cols = 6 inputs) stays
   readable. Drops to about half the desktop size. */
@media (max-width: 1100px) and (min-width: 901px) {
	.cdc-fmx-grid-cell .cdc-fmx-initials,
	.cdc-fmx-locked-initials {
		font-size: 11px;
	}
	.cdc-fmx-cell-films {
		gap: 0.3rem;
	}
	.cdc-fmx-cell-dual {
		gap: 0.2rem;
	}
}

/* Tablet and below: collapse the 3×3 grid to one column. Each region
   becomes a full-width stacked card. The bitewing-center spacer cell
   is hidden so it doesn't create a gap. Films inside each cell stay
   side-by-side at this size since the cell is now wide enough. */
@media (max-width: 900px) {
	.cdc-fmx-grid-row {
		flex-direction: column;
	}
	.cdc-fmx-grid-row > .cdc-fmx-grid-cell.is-empty {
		display: none;
	}
}

/* Small phones: also stack the films within each cell so the
   student/instructor sub-columns get full width. */
@media (max-width: 480px) {
	.cdc-fmx-cell-films {
		flex-direction: column;
		gap: 0.6rem;
	}
}

/* ============================================================
 * scp-film-mounting: 4 grading sheets per submission.
 * Each sheet has a tagged header + per-sheet upload + grading grid
 * (FMX or BW) + manual 3-field score box.
 * ============================================================ */

.cdc-scpfm-sheet {
	border: 2px solid var(--cdc-border);
	border-radius: 8px;
	padding: 1rem 1.25rem;
	margin: 1.25rem 0;
	background: #fff;
}

.cdc-scpfm-sheet > .cdc-program-form-section-title {
	margin-top: 0;
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.cdc-scpfm-sheet-tag {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 0.15rem 0.5rem;
	border-radius: 999px;
	background: var(--cdc-bg-soft, #f0f4fa);
	color: var(--cdc-gray);
}

.cdc-scpfm-sheet-tag.is-fmx {
	background: #e8f1ff;
	color: #1f5fa8;
}

.cdc-scpfm-sheet-tag.is-bw {
	background: #fff1e0;
	color: #b25b00;
}

.cdc-scpfm-score-box {
	margin-top: 1rem;
}

/* BW-only grids hide their would-be empty rows (no upper/lower) so the
   2-cell bitewing layout sits flush. */
.cdc-fmx-grid.is-bw-only .cdc-fmx-grid-row {
	margin: 0;
}

/* ---------- Program-completion banner (student dashboard) ---------- */

.cdc-program-completion-banner {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
	margin: 0 0 1.5rem;
	padding: 1rem 1.15rem;
	background: linear-gradient(135deg, rgba(25, 135, 84, 0.12), rgba(25, 135, 84, 0.04));
	border: 1px solid rgba(25, 135, 84, 0.35);
	border-left: 4px solid #198754;
	border-radius: 8px;
	color: #0f4d2d;
}

.cdc-program-completion-banner > .bi {
	font-size: 1.5rem;
	color: #198754;
	flex: 0 0 auto;
	line-height: 1.2;
}

.cdc-program-completion-banner-text {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	line-height: 1.4;
}

.cdc-program-completion-banner-text strong {
	font-size: 1.05rem;
	color: #0f4d2d;
}

/* ============================================================
 * AHA Basic Life Support E-Card Contract layout tweaks shared
 * by both packets that use the aha-ecard-contract template.
 * ============================================================ */

.cdc-aha-ec-intro {
	background: var(--cdc-bg-soft, #f8f9fa);
}

.cdc-aha-ec-body p { margin: 0 0 0.75rem; }
.cdc-aha-ec-body ol { margin: 0.25rem 0 0.75rem 1.25rem; }

.cdc-aha-ec-initial {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	margin: 1rem 0;
	padding: 0.75rem 1rem;
	background: var(--cdc-bg-soft, #f8f9fa);
	border: 1px dashed var(--cdc-border, #e9ecef);
	border-radius: 6px;
}

.cdc-aha-ec-initial .cdc-field {
	flex: 0 0 110px;
	margin: 0;
}

.cdc-aha-ec-initial p {
	flex: 1;
	margin: 0;
	line-height: 1.55;
}

.cdc-aha-ec-deadline {
	margin: 1rem 0 0.5rem;
	padding: 0.75rem 1rem;
	background: #fff;
	border: 1px solid var(--cdc-border, #e9ecef);
	border-radius: 6px;
	line-height: 1.8;
}

.cdc-aha-ec-deadline input[type="date"] {
	display: inline-block;
	width: auto;
	margin: 0 0.35rem;
	vertical-align: baseline;
}