/*
 * Carrier Partner Portal
 * A self-contained interface layer. Every authored selector is scoped to
 * .cpp-app so the host theme and Elementor widgets remain untouched.
 */

.cpp-app {
	--cpp-orange: #e8734a;
	--cpp-orange-dark: #c95732;
	--cpp-orange-ink: #a43f21;
	--cpp-orange-soft: #fff0ea;
	--cpp-charcoal: #1e1e1e;
	--cpp-charcoal-2: #292929;
	--cpp-navy: #0e1b2f;
	--cpp-navy-2: #172a47;
	--cpp-ink: #1c2430;
	--cpp-muted: #626a73;
	--cpp-muted-2: #7b828a;
	--cpp-line: #dfe2e5;
	--cpp-line-strong: #c9ced3;
	--cpp-surface: #ffffff;
	--cpp-soft: #f4f5f6;
	--cpp-soft-2: #ebeef0;
	--cpp-success: #17643a;
	--cpp-success-bg: #e6f5ec;
	--cpp-warning: #715000;
	--cpp-warning-bg: #fff2c6;
	--cpp-danger: #a12b23;
	--cpp-danger-bg: #fde9e7;
	--cpp-info: #185ea8;
	--cpp-info-bg: #e8f2fc;
	--cpp-radius-xs: 8px;
	--cpp-radius-sm: 12px;
	--cpp-radius: 18px;
	--cpp-radius-lg: 26px;
	--cpp-radius-xl: 34px;
	--cpp-shadow-sm: 0 1px 2px rgba(14, 27, 47, 0.05), 0 8px 24px rgba(14, 27, 47, 0.06);
	--cpp-shadow: 0 20px 55px rgba(14, 27, 47, 0.12);
	--cpp-focus: 0 0 0 3px rgba(232, 115, 74, 0.3);
	position: relative;
	isolation: isolate;
	box-sizing: border-box;
	width: 100%;
	max-width: 1600px;
	margin-inline: auto;
	color: var(--cpp-ink);
	background: var(--cpp-surface);
	font-family: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.6;
	text-align: left;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* 1.8.0 dashboard refinement: restrained typography, rectangular surfaces, and clear status help. */
.cpp-app.cpp-dashboard {
	--cpp-radius-xs: 2px;
	--cpp-radius-sm: 2px;
	--cpp-radius: 0;
	--cpp-radius-lg: 0;
	--cpp-radius-xl: 0;
	font-weight: 400;
}

.cpp-app.cpp-dashboard :where(h1, h2) {
	font-weight: 600;
	letter-spacing: -0.025em;
}

.cpp-app.cpp-dashboard h3 {
	font-weight: 550;
}

.cpp-app.cpp-dashboard :where(strong, b, th, dt, label, .cpp-field > span) {
	font-weight: 500;
}

.cpp-app.cpp-dashboard :where(button, .cpp-button, .cpp-chip, .cpp-badge, [class*="cpp-status--"]) {
	font-weight: 500;
}

.cpp-app.cpp-dashboard .cpp-eyebrow {
	font-weight: 600;
}

.cpp-app.cpp-dashboard :where(.cpp-metric strong, .cpp-summary-grid strong, .cpp-metric-card strong, .cpp-primary-text) {
	font-weight: 600;
}

.cpp-app.cpp-dashboard,
.cpp-app.cpp-dashboard :where(
	.cpp-sidebar nav button,
	.cpp-sidebar-help,
	.cpp-panel,
	.cpp-card,
	[class*="card"],
	[class*="panel"],
	[class*="hero"],
	.cpp-callout,
	.cpp-table-wrap,
	.cpp-filter-bar,
	.cpp-drawer,
	.cpp-danger-zone,
	.cpp-contact-move,
	.cpp-empty-state,
	.cpp-editor,
	.cpp-document-slot,
	.cpp-fmcsa-dashboard,
	.cpp-fmcsa-tabs button,
	.cpp-mail-diagnostic-details,
	input,
	select,
	textarea,
	button,
	.cpp-button
) {
	border-radius: 0 !important;
}

.cpp-app.cpp-dashboard :where(.cpp-chip, .cpp-badge, [class*="cpp-status--"]) {
	border-radius: 2px !important;
}

.cpp-app.cpp-dashboard .cpp-sidebar nav button {
	gap: 12px;
	font-weight: 450;
}

.cpp-app .cpp-nav-icon {
	display: block;
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	stroke-width: 1.7;
}

.cpp-app .cpp-pillar-icon {
	display: grid;
	width: 40px;
	height: 40px;
	place-items: center;
	border: 1px solid var(--cpp-line);
	color: var(--cpp-orange-ink);
	background: var(--cpp-surface);
}

.cpp-app .cpp-pillar-icon .cpp-nav-icon {
	width: 20px;
	height: 20px;
}

.cpp-app .cpp-pillar-grid--interactive button > .cpp-pillar-icon {
	font-size: 0;
}

.cpp-app .cpp-pillar-grid--interactive button h3 {
	margin: 16px 0 8px;
}

.cpp-app .cpp-button--icon {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.cpp-app .cpp-button--icon .cpp-nav-icon,
.cpp-app .cpp-row-actions .cpp-nav-icon {
	width: 16px;
	height: 16px;
	flex-basis: 16px;
}

.cpp-app .cpp-primary-text {
	display: block;
	color: var(--cpp-ink);
}

.cpp-app .cpp-callout--plain {
	border-left: 3px solid var(--cpp-orange);
	background: var(--cpp-surface);
}

.cpp-app .cpp-status-modal-layer {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: grid;
	place-items: center;
	padding: 24px;
}

.cpp-app .cpp-status-modal-backdrop {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: rgba(12, 18, 25, 0.62);
	cursor: default;
}

.cpp-app .cpp-status-modal {
	position: relative;
	width: min(680px, 100%);
	max-height: min(760px, calc(100vh - 48px));
	overflow: auto;
	padding: 0;
	border: 1px solid var(--cpp-line-strong);
	background: var(--cpp-surface);
	box-shadow: 0 24px 80px rgba(9, 16, 24, 0.24);
}

.cpp-app .cpp-status-modal > header {
	position: sticky;
	top: 0;
	z-index: 1;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	padding: 24px;
	border-bottom: 1px solid var(--cpp-line);
	background: var(--cpp-surface);
}

.cpp-app .cpp-status-modal > header h2 {
	margin: 3px 0 0;
}

.cpp-app .cpp-status-modal > header .cpp-icon-button {
	flex: 0 0 auto;
}

.cpp-app .cpp-status-modal-body {
	padding: 24px;
}

.cpp-app .cpp-status-guide-list {
	display: grid;
	gap: 0;
	border: 1px solid var(--cpp-line);
}

.cpp-app .cpp-status-guide-list article {
	padding: 18px;
	border-bottom: 1px solid var(--cpp-line);
}

.cpp-app .cpp-status-guide-list article:last-child {
	border-bottom: 0;
}

.cpp-app .cpp-status-guide-list article > div:first-child {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 7px;
}

.cpp-app .cpp-status-guide-list h3,
.cpp-app .cpp-status-guide-list p {
	margin: 0;
}

.cpp-app .cpp-status-guide-list p + p {
	margin-top: 8px;
}

.cpp-app .cpp-status-next-step {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 16px;
	border-left: 3px solid var(--cpp-orange);
	background: var(--cpp-soft);
	color: var(--cpp-muted);
}

.cpp-app .cpp-status-next-step h3,
.cpp-app .cpp-status-next-step p {
	margin: 0;
}

.cpp-app .cpp-status-next-step p {
	margin-top: 4px;
}

.cpp-app .cpp-icon-button .cpp-nav-icon {
	width: 18px;
	height: 18px;
}

.cpp-app .cpp-applicant-status-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	margin-bottom: 18px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--cpp-line);
}

.cpp-app .cpp-applicant-details-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 24px;
	margin: 0 0 20px;
}

.cpp-app .cpp-applicant-details-grid div {
	min-width: 0;
}

.cpp-app .cpp-applicant-details-grid dt {
	margin: 0 0 4px;
	color: var(--cpp-muted);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.cpp-app .cpp-applicant-details-grid dd {
	margin: 0;
	overflow-wrap: anywhere;
	color: var(--cpp-ink);
}

/* --- Ownership proof, inside the approval decision ------------------ */

.cpp-app .cpp-applicant-proof {
	margin: 20px 0 0;
	padding: 18px 20px;
	border: 1px solid var(--cpp-line);
	border-left: 3px solid var(--cpp-orange);
	border-radius: var(--cpp-radius-sm);
	background: var(--cpp-soft);
}

.cpp-app .cpp-applicant-proof--missing {
	border-left-color: var(--cpp-danger);
}

.cpp-app .cpp-applicant-proof header {
	margin: 0 0 12px;
}

.cpp-app .cpp-applicant-proof h3 {
	margin: 2px 0 0;
	font-size: 0.98rem;
}

.cpp-app .cpp-applicant-proof header small {
	display: block;
	margin-top: 3px;
	color: var(--cpp-muted);
	font-size: 0.7rem;
	font-weight: 650;
}

.cpp-app .cpp-applicant-proof .cpp-detail-list {
	margin-bottom: 14px;
}

.cpp-app .cpp-applicant-proof-note {
	max-width: 68ch;
	margin: 10px 0 0;
	color: var(--cpp-muted);
	font-size: 0.74rem;
	line-height: 1.55;
}

.cpp-app .cpp-applications-table .cpp-application-actions {
	min-width: 174px;
	flex-wrap: nowrap;
	white-space: nowrap;
}

.cpp-app .cpp-application-actions > .cpp-button {
	width: 100%;
	min-height: 38px;
	justify-content: center;
}

.cpp-app .cpp-applicant-actions {
	position: sticky;
	bottom: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 24px;
	border-top: 1px solid var(--cpp-line);
	background: var(--cpp-surface);
	box-shadow: 0 -10px 24px rgba(14, 27, 47, 0.06);
}

.cpp-app .cpp-applicant-actions > div {
	display: flex;
	align-items: center;
	gap: 9px;
}

.cpp-app .cpp-applicant-actions .cpp-icon-button--danger {
	width: 40px;
	height: 40px;
	border: 1px solid #e8bbb6;
	background: var(--cpp-danger-bg);
	color: var(--cpp-danger);
}

.cpp-app .cpp-applicant-actions .cpp-button--danger {
	border-color: #e8bbb6;
	background: #fff;
	color: var(--cpp-danger);
}

@media (max-width: 640px) {
	.cpp-app .cpp-status-modal-layer {
		align-items: end;
		padding: 0;
	}

	.cpp-app .cpp-status-modal {
		width: 100%;
		max-height: 90vh;
	}

	.cpp-app .cpp-status-modal > header,
	.cpp-app .cpp-status-modal-body {
		padding: 20px;
	}

	.cpp-app .cpp-applicant-details-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.cpp-app .cpp-applicant-actions {
		align-items: stretch;
		flex-direction: column;
		padding: 16px 20px;
	}

	.cpp-app .cpp-applicant-actions > div {
		width: 100%;
	}

	.cpp-app .cpp-applicant-actions > div:first-child {
		flex-direction: column;
	}

	.cpp-app .cpp-applicant-actions > div:first-child .cpp-button {
		width: 100%;
	}

	.cpp-app .cpp-applicant-actions > div:last-child {
		justify-content: flex-end;
	}
}

/* 1.7 dashboard, password-policy, and least-privilege driver surfaces. */
.cpp-app .cpp-password-layout {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(310px, 1.1fr);
	gap: 26px;
	align-items: start;
}

.cpp-app .cpp-password-layout > div:first-child {
	display: grid;
	gap: 18px;
}

.cpp-app .cpp-password-guide {
	padding: 20px;
	border: 1px solid var(--cpp-line);
	border-radius: var(--cpp-radius);
	background: linear-gradient(145deg, #fff, var(--cpp-soft));
}

.cpp-app .cpp-password-strength > div:first-child {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 10px;
}

.cpp-app .cpp-password-strength span {
	color: var(--cpp-muted);
	font-size: 0.82rem;
	font-weight: 800;
}

.cpp-app .cpp-password-meter {
	height: 8px;
	overflow: hidden;
	border-radius: 999px;
	background: #dfe3e7;
}

.cpp-app .cpp-password-meter span {
	display: block;
	height: 100%;
	width: 0;
	border-radius: inherit;
	background: var(--cpp-danger);
	transition: width 180ms ease, background 180ms ease;
}

.cpp-app .cpp-password-meter span[data-level="4"],
.cpp-app .cpp-password-meter span[data-level="5"] { background: #d49218; }
.cpp-app .cpp-password-meter span[data-level="6"] { background: #4d9568; }
.cpp-app .cpp-password-meter span[data-level="7"] { background: var(--cpp-success); }

.cpp-app .cpp-password-checklist {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px 14px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

.cpp-app .cpp-password-checklist li {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	color: var(--cpp-muted);
	font-size: 0.82rem;
}

/* Scoped to the tick only. This used to target every span inside the item,
   which turned the rule's own label into a green pill once the markup gained
   a second span for the text. */
.cpp-app .cpp-password-checklist li .cpp-password-tick {
	display: grid;
	place-items: center;
	flex: 0 0 19px;
	height: 19px;
	border: 1px solid var(--cpp-line-strong);
	border-radius: 50%;
	color: transparent;
	font-size: 11px;
}

.cpp-app .cpp-password-checklist li.is-met { color: var(--cpp-success); }
.cpp-app .cpp-password-checklist li.is-met .cpp-password-tick { border-color: var(--cpp-success); color: #fff; background: var(--cpp-success); }

.cpp-app .cpp-password-match {
	margin: 14px 0 0;
	color: var(--cpp-danger);
	font-size: 0.82rem;
	font-weight: 800;
}
.cpp-app .cpp-password-match.is-met { color: var(--cpp-success); }

.cpp-app .cpp-public-data-note {
	grid-column: 1 / -1;
	margin: 0;
	padding: 12px 14px;
	border-left: 3px solid var(--cpp-orange);
	border-radius: 0 10px 10px 0;
	color: var(--cpp-muted);
	background: var(--cpp-orange-soft);
	font-size: 0.86rem;
}

.cpp-app .cpp-command-center { display: grid; gap: 26px; }

.cpp-app .cpp-command-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(270px, 0.45fr);
	gap: 36px;
	padding: clamp(28px, 4vw, 52px);
	border-radius: var(--cpp-radius-lg);
	color: #fff;
	background:
		radial-gradient(circle at 85% 15%, rgba(232,115,74,.34), transparent 34%),
		linear-gradient(135deg, #151d28, #202d3e 58%, #172332);
	box-shadow: var(--cpp-shadow);
}

.cpp-app .cpp-command-hero :where(h1, h2) { max-width: 800px; color: #fff; }
.cpp-app .cpp-command-hero > div > p:not(.cpp-eyebrow) { max-width: 720px; color: rgba(255,255,255,.75); font-size: 1.02rem; }
.cpp-app .cpp-command-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.cpp-app .cpp-command-hero .cpp-button--outline { border-color: rgba(255,255,255,.4); color: #fff; background: rgba(255,255,255,.06); }

.cpp-app .cpp-command-hero aside {
	align-self: stretch;
	padding: 22px;
	border: 1px solid rgba(255,255,255,.14);
	border-radius: var(--cpp-radius);
	background: rgba(255,255,255,.07);
	backdrop-filter: blur(8px);
}
.cpp-app .cpp-command-hero aside > small { display: block; margin-bottom: 12px; color: rgba(255,255,255,.65); text-transform: uppercase; letter-spacing: .12em; font-weight: 800; }
.cpp-app .cpp-command-hero aside dl { margin: 22px 0 0; }
.cpp-app .cpp-command-hero aside dl div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.12); }
.cpp-app .cpp-command-hero aside :where(dt, dd) { margin: 0; color: #fff; }
.cpp-app .cpp-command-hero aside dt { color: rgba(255,255,255,.65); }

.cpp-app .cpp-overview-metrics article {
	min-height: 132px;
	padding: 22px;
	border: 1px solid var(--cpp-line);
	border-radius: var(--cpp-radius);
	background: #fff;
	box-shadow: var(--cpp-shadow-sm);
}
.cpp-app .cpp-overview-metrics article strong { display: block; margin: 8px 0 3px; font-size: 2rem; line-height: 1; }
.cpp-app .cpp-overview-metrics article small { color: var(--cpp-muted); }
.cpp-app .cpp-section-header--compact { margin-bottom: 12px; }

.cpp-app .cpp-pillar-grid--interactive button {
	min-height: 210px;
	padding: 26px;
	border: 1px solid var(--cpp-line);
	border-radius: var(--cpp-radius);
	text-align: left;
	background: #fff;
	box-shadow: var(--cpp-shadow-sm);
	cursor: pointer;
	transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.cpp-app .cpp-pillar-grid--interactive button:hover { transform: translateY(-3px); border-color: var(--cpp-orange); box-shadow: var(--cpp-shadow); }
.cpp-app .cpp-pillar-grid--interactive button > span { color: var(--cpp-orange); font-size: .78rem; font-weight: 900; letter-spacing: .15em; }
.cpp-app .cpp-pillar-grid--interactive button > strong { display: block; margin: 18px 0 8px; color: var(--cpp-charcoal); font-size: 1.45rem; }
.cpp-app .cpp-pillar-grid--interactive button p { color: var(--cpp-muted); }
.cpp-app .cpp-pillar-grid--interactive button small { color: var(--cpp-orange-ink); font-weight: 850; }

.cpp-app .cpp-driver-document-grid,
.cpp-app .cpp-driver-priority-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}
.cpp-app .cpp-driver-doc-card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 230px;
	padding: 22px;
	border: 1px solid var(--cpp-line);
	border-radius: var(--cpp-radius);
	background: #fff;
	box-shadow: var(--cpp-shadow-sm);
}
.cpp-app .cpp-driver-doc-card p { color: var(--cpp-muted); }
.cpp-app .cpp-driver-doc-card footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; padding-top: 16px; border-top: 1px solid var(--cpp-line); }
.cpp-app .cpp-driver-doc-card footer > span { display: grid; gap: 7px; }
.cpp-app .cpp-driver-doc-card footer small { color: var(--cpp-muted); }
.cpp-app .cpp-driver-doc-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.cpp-app .cpp-driver-upload { margin-bottom: 22px; border-color: rgba(232,115,74,.45); box-shadow: var(--cpp-shadow); }

.cpp-app .cpp-license-extraction,
.cpp-app .cpp-document-reader {
	display: grid;
	gap: 10px;
	margin: 18px 0;
}

.cpp-app .cpp-license-scan-status,
.cpp-app .cpp-document-read-status {
	margin: 0;
	padding: 10px 12px;
	border-left: 3px solid #c8a04b;
	background: #fff8e7;
	color: #514625;
	font-size: 13px;
	line-height: 1.5;
}

.cpp-app .cpp-license-scan-status[data-tone="success"],
.cpp-app .cpp-document-read-status[data-tone="success"] {
	border-color: #5a9072;
	background: #edf7f1;
	color: #264a36;
}

.cpp-app .cpp-document-read-status[data-tone="working"]::before {
	display: inline-block;
	width: 11px;
	height: 11px;
	margin-right: 8px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	content: "";
	vertical-align: -1px;
	animation: cpp-spin .7s linear infinite;
}

.cpp-app .cpp-date-check {
	display: block;
	margin-top: 8px;
	padding: 9px 10px;
	border-left: 3px solid #c8a04b;
	background: #fff8e7;
	color: #514625;
	line-height: 1.45;
}

.cpp-app .cpp-date-confirm {
	margin-top: 10px;
	font-size: 13px;
}

.cpp-app .cpp-link-button {
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--cpp-orange, #d85f38);
	font: inherit;
	cursor: pointer;
}

.cpp-app .cpp-auth-step {
	margin-top: 22px;
	padding-top: 22px;
	border-top: 1px solid var(--cpp-border);
}

.cpp-app .cpp-auth-step h2 {
	margin: 4px 0 8px;
}

.cpp-app .cpp-mfa-key {
	display: grid;
	gap: 6px;
	margin: 18px 0;
	padding: 16px;
	border: 1px solid var(--cpp-border);
	background: #f7f8f9;
}

.cpp-app .cpp-mfa-key code {
	font-size: 18px;
	letter-spacing: .08em;
	overflow-wrap: anywhere;
}

.cpp-app .cpp-mfa-setup {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin: 18px 0;
}

.cpp-app .cpp-mfa-option {
	min-width: 0;
	padding: 18px;
	border: 1px solid var(--cpp-border);
	border-radius: 14px;
	background: #fff;
}

.cpp-app .cpp-mfa-option h3 {
	margin: 6px 0 12px;
}

.cpp-app .cpp-option-number {
	color: var(--cpp-orange);
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.cpp-app .cpp-mfa-qr {
	width: min(260px, 100%);
	margin: 0 auto 12px;
	padding: 8px;
	border: 1px solid var(--cpp-border);
	border-radius: 10px;
	background: #fff;
}

.cpp-app .cpp-mfa-qr svg {
	display: block;
	width: 100%;
	height: auto;
}

.cpp-app .cpp-mfa-option .cpp-mfa-key {
	margin: 0;
}

.cpp-app .cpp-recovery-codes {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin: 18px 0;
}

.cpp-app .cpp-recovery-codes code {
	padding: 10px;
	border: 1px solid var(--cpp-border);
	background: #f7f8f9;
	text-align: center;
	letter-spacing: .08em;
}

.cpp-app .cpp-alert-list {
	display: grid;
	gap: 14px;
}

.cpp-app .cpp-alert-card {
	padding: 20px;
	border: 1px solid var(--cpp-border);
	border-left: 4px solid #c8a04b;
	background: #fff;
}

.cpp-app .cpp-alert-card--critical {
	border-left-color: #b64236;
}

.cpp-app .cpp-alert-card header,
.cpp-app .cpp-alert-card header > div,
.cpp-app .cpp-alert-card footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.cpp-app .cpp-alert-card header > div {
	justify-content: flex-start;
}

.cpp-app .cpp-alert-card h2 {
	margin: 0;
	font-size: 18px;
}

.cpp-app .cpp-alert-card dl {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin: 16px 0;
}

.cpp-app .cpp-alert-card dt {
	color: var(--cpp-muted);
	font-size: 12px;
}

.cpp-app .cpp-alert-card dd {
	margin: 4px 0 0;
	overflow-wrap: anywhere;
}

@media (max-width: 720px) {
	.cpp-app .cpp-alert-card dl {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
.cpp-app .cpp-driver-unlinked { display: grid; place-items: center; min-height: 65vh; }
.cpp-app .cpp-driver-unlinked .cpp-notice-card { max-width: 720px; }
.cpp-app .cpp-driver-unlinked dl div { display: grid; grid-template-columns: 140px 1fr; gap: 16px; padding: 12px 0; border-top: 1px solid var(--cpp-line); }
.cpp-app .cpp-driver-unlinked :where(dt, dd) { margin: 0; }
.cpp-app .cpp-driver-unlinked dt { color: var(--cpp-muted); }

@media (max-width: 900px) {
	.cpp-app .cpp-password-layout,
	.cpp-app .cpp-command-hero { grid-template-columns: minmax(0, 1fr); }
	.cpp-app .cpp-password-checklist { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 680px) {
	.cpp-app .cpp-command-hero { gap: 22px; padding: 24px 18px; }
	.cpp-app .cpp-command-actions > * { width: 100%; }
	.cpp-app .cpp-driver-document-grid,
	.cpp-app .cpp-driver-priority-list { grid-template-columns: minmax(0, 1fr); }
	.cpp-app .cpp-driver-doc-card footer { align-items: stretch; flex-direction: column; }
}

.cpp-app *,
.cpp-app *::before,
.cpp-app *::after {
	box-sizing: inherit;
}

.cpp-app [hidden] {
	display: none !important;
}

.cpp-app :where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, figure, blockquote) {
	margin-top: 0;
}

.cpp-app :where(h1, h2, h3, h4, h5, h6) {
	margin-bottom: 0.55em;
	color: var(--cpp-charcoal);
	font-family: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-weight: 650;
	line-height: 1.08;
	letter-spacing: -0.035em;
}

.cpp-app h1 {
	font-size: clamp(2rem, 4vw, 4.35rem);
}

.cpp-app h2 {
	font-size: clamp(1.55rem, 2.4vw, 2.55rem);
}

.cpp-app h3 {
	font-size: clamp(1.15rem, 1.5vw, 1.45rem);
}

.cpp-app h4 {
	font-size: 1rem;
	letter-spacing: -0.015em;
}

.cpp-app p {
	margin-bottom: 1em;
}

.cpp-app :where(a) {
	color: var(--cpp-orange-ink);
	font-weight: 700;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.cpp-app :where(a:hover) {
	color: var(--cpp-orange-dark);
}

.cpp-app :where(button, input, select, textarea) {
	font: inherit;
}

.cpp-app :where(button, a, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--cpp-orange);
	outline-offset: 3px;
	box-shadow: var(--cpp-focus);
}

.cpp-app :where(img, svg) {
	max-width: 100%;
}

.cpp-app .cpp-sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.cpp-app .cpp-eyebrow {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 18px;
	color: var(--cpp-orange-ink);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.13em;
	line-height: 1.2;
	text-transform: uppercase;
}

.cpp-app .cpp-eyebrow::before {
	width: 22px;
	height: 2px;
	background: var(--cpp-orange);
	content: "";
}

.cpp-app .cpp-muted,
.cpp-app .cpp-help-text,
.cpp-app .cpp-field-hint,
.cpp-app .cpp-meta {
	color: var(--cpp-muted);
}

.cpp-app .cpp-kicker {
	color: var(--cpp-muted);
	font-size: 0.8rem;
	font-weight: 750;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Brand */
.cpp-app .cpp-brand {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	max-width: 230px;
	color: var(--cpp-navy);
	text-decoration: none;
}

.cpp-app .cpp-brand-logo {
	display: block;
	width: clamp(158px, 18vw, 220px);
	max-width: 100%;
	height: auto;
	object-fit: contain;
}

.cpp-app .cpp-language-menu {
	position: relative;
	z-index: 30;
	flex: 0 0 auto;
	width: max-content;
	max-width: 100%;
	color: var(--cpp-navy);
	font-size: 13px;
	line-height: 1.25;
}

.cpp-app .cpp-language-menu__toggle {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-width: 132px;
	min-height: 40px;
	padding: 8px 12px;
	border: 1px solid #d9dee5;
	border-radius: 4px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(14, 30, 52, .05);
	color: var(--cpp-navy);
	font: inherit;
	font-weight: 560;
	text-align: left;
	cursor: pointer;
	transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.cpp-app .cpp-language-menu__toggle:hover,
.cpp-app .cpp-language-menu__toggle:focus-visible,
.cpp-app .cpp-language-menu.is-open .cpp-language-menu__toggle {
	border-color: #aeb8c5;
	background: #fbfcfd;
	box-shadow: 0 0 0 3px rgba(238, 100, 56, .12);
}

.cpp-app .cpp-language-menu__flag {
	display: block;
	flex: 0 0 22px;
	width: 22px;
	height: 15px;
	border: 1px solid rgba(14, 30, 52, .14);
	border-radius: 1px;
	object-fit: cover;
	box-shadow: 0 1px 2px rgba(14, 30, 52, .12);
}

.cpp-app .cpp-language-menu__chevron {
	width: 7px;
	height: 7px;
	margin: -3px 1px 0 auto;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	opacity: .65;
	transform: rotate(45deg);
	transition: transform .18s ease, margin .18s ease;
}

.cpp-app .cpp-language-menu.is-open .cpp-language-menu__chevron {
	margin-top: 3px;
	transform: rotate(225deg);
}

.cpp-app .cpp-language-menu__options {
	display: none;
	position: absolute;
	z-index: 100;
	top: calc(100% + 8px);
	left: 0;
	width: 214px;
	padding: 6px;
	border: 1px solid #d9dee5;
	border-radius: 4px;
	background: #fff;
	box-shadow: 0 16px 40px rgba(14, 30, 52, .16);
}

.cpp-app .cpp-header-actions .cpp-language-menu__options,
.cpp-app .cpp-account-menu .cpp-language-menu__options,
.cpp-app .cpp-login-panel > .cpp-language-menu .cpp-language-menu__options,
.cpp-app .cpp-login-toolbar .cpp-language-menu__options {
	right: 0;
	left: auto;
}

.cpp-app .cpp-language-menu.is-open .cpp-language-menu__options {
	display: grid;
	gap: 2px;
	animation: cpp-language-menu-in .16s ease-out;
}

.cpp-app .cpp-language-menu__option {
	display: grid;
	grid-template-columns: 22px minmax(0, 1fr) 18px;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 48px;
	padding: 7px 9px;
	border: 0;
	border-radius: 2px;
	background: transparent;
	color: var(--cpp-navy);
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.cpp-app .cpp-language-menu__option:hover,
.cpp-app .cpp-language-menu__option:focus-visible {
	background: #f4f6f8;
	outline: none;
}

.cpp-app .cpp-language-menu__option.is-active {
	background: #fff4ef;
	color: var(--cpp-orange-ink);
}

.cpp-app .cpp-language-menu__option > span:nth-child(2) {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.cpp-app .cpp-language-menu__option strong {
	font-weight: 600;
}

.cpp-app .cpp-language-menu__option small {
	color: var(--cpp-muted);
	font-size: 11px;
}

.cpp-app .cpp-language-menu__check {
	visibility: hidden;
	color: var(--cpp-orange-ink);
	font-size: 15px;
	text-align: center;
}

.cpp-app .cpp-language-menu__option.is-active .cpp-language-menu__check {
	visibility: visible;
}

@keyframes cpp-language-menu-in {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.cpp-app .cpp-brand-word {
	display: grid;
	color: currentColor;
	font-family: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 1.2rem;
	font-weight: 800;
	letter-spacing: -0.055em;
	line-height: 0.8;
}

.cpp-app .cpp-brand-shield {
	display: grid;
	width: 37px;
	height: 41px;
	place-items: center;
	border: 2px solid currentColor;
	border-top-color: var(--cpp-orange);
	border-radius: 10px 10px 15px 15px;
	color: currentColor;
	font-family: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 0.68rem;
	font-weight: 800;
}

/* Buttons and compact controls */
.cpp-app :where(.cpp-button, .cpp-btn, button.cpp-button, input[type="submit"].cpp-button),
.cpp-app #wp-submit {
	display: inline-flex;
	min-height: 46px;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 11px 20px;
	border: 1px solid var(--cpp-orange);
	border-radius: 999px;
	background: var(--cpp-orange);
	box-shadow: none;
	color: #161616;
	cursor: pointer;
	font-family: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 0.88rem;
	font-weight: 800;
	line-height: 1.15;
	text-align: center;
	text-decoration: none;
	transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
	-webkit-appearance: none;
	appearance: none;
}

.cpp-app :where(.cpp-button, .cpp-btn, #wp-submit):hover:not(:disabled) {
	border-color: #f08058;
	background: #f08058;
	color: #101010;
	transform: translateY(-1px);
}

.cpp-app :where(.cpp-button, .cpp-btn):active:not(:disabled),
.cpp-app #wp-submit:active:not(:disabled) {
	transform: translateY(0);
}

.cpp-app :where(.cpp-button, .cpp-btn).cpp-button--secondary,
.cpp-app :where(.cpp-button, .cpp-btn).is-secondary,
.cpp-app .cpp-button-secondary {
	border-color: var(--cpp-navy);
	background: var(--cpp-navy);
	color: #fff;
}

.cpp-app :where(.cpp-button, .cpp-btn).cpp-button--secondary:hover:not(:disabled),
.cpp-app :where(.cpp-button, .cpp-btn).is-secondary:hover:not(:disabled),
.cpp-app .cpp-button-secondary:hover:not(:disabled) {
	border-color: var(--cpp-navy-2);
	background: var(--cpp-navy-2);
	color: #fff;
}

.cpp-app :where(.cpp-button, .cpp-btn).cpp-button--outline,
.cpp-app :where(.cpp-button, .cpp-btn).is-outline,
.cpp-app .cpp-button-outline {
	border-color: var(--cpp-line-strong);
	background: #fff;
	color: var(--cpp-navy);
}

.cpp-app :where(.cpp-button, .cpp-btn).cpp-button--outline:hover:not(:disabled),
.cpp-app :where(.cpp-button, .cpp-btn).is-outline:hover:not(:disabled),
.cpp-app .cpp-button-outline:hover:not(:disabled) {
	border-color: var(--cpp-orange);
	background: var(--cpp-orange-soft);
}

.cpp-app :where(.cpp-button, .cpp-btn).cpp-button--ghost,
.cpp-app :where(.cpp-button, .cpp-btn).is-ghost,
.cpp-app .cpp-button-ghost {
	border-color: transparent;
	background: transparent;
	color: var(--cpp-ink);
}

.cpp-app :where(.cpp-button, .cpp-btn).cpp-button--danger,
.cpp-app :where(.cpp-button, .cpp-btn).is-danger,
.cpp-app .cpp-button-danger {
	border-color: var(--cpp-danger);
	background: var(--cpp-danger);
	color: #fff;
}

.cpp-app :where(.cpp-button, .cpp-btn).cpp-button--small,
.cpp-app :where(.cpp-button, .cpp-btn).is-small {
	min-height: 36px;
	padding: 7px 14px;
	font-size: 0.78rem;
}

.cpp-app :where(.cpp-button, .cpp-btn).cpp-button--icon,
.cpp-app :where(.cpp-button, .cpp-btn).is-icon,
.cpp-app .cpp-icon-button {
	width: 42px;
	min-width: 42px;
	height: 42px;
	min-height: 42px;
	padding: 0;
	border-color: var(--cpp-line);
	background: #fff;
	color: var(--cpp-navy);
}

.cpp-app :where(button, .cpp-button, .cpp-btn, input[type="submit"]):disabled,
.cpp-app :where(button, .cpp-button, .cpp-btn)[aria-disabled="true"] {
	cursor: not-allowed;
	opacity: 0.55;
	transform: none;
}

.cpp-app .cpp-button-row,
.cpp-app .cpp-actions,
.cpp-app .cpp-card-actions,
.cpp-app .cpp-form-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

.cpp-app .cpp-form-actions {
	justify-content: flex-end;
	padding-top: 8px;
}

/* Forms */
.cpp-app .cpp-form,
.cpp-app form {
	color: var(--cpp-ink);
}

.cpp-app .cpp-form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.cpp-app .cpp-form-grid--three {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cpp-app .cpp-field,
.cpp-app .login-username,
.cpp-app .login-password {
	display: grid;
	gap: 7px;
	margin: 0;
}

.cpp-app .cpp-field--full,
.cpp-app .cpp-form-grid > .cpp-form-actions,
.cpp-app .cpp-form-grid > .cpp-alert {
	grid-column: 1 / -1;
}

.cpp-app :where(label, .cpp-label) {
	color: var(--cpp-charcoal);
	font-size: 0.82rem;
	font-weight: 800;
	line-height: 1.35;
}

.cpp-app .cpp-required {
	color: var(--cpp-danger);
}

.cpp-app :where(input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="date"], input[type="search"], input[type="url"], select, textarea),
.cpp-app #loginform :where(input[type="text"], input[type="password"]) {
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 11px 14px;
	border: 1px solid var(--cpp-line-strong);
	border-radius: var(--cpp-radius-sm);
	background: #fff;
	box-shadow: 0 1px 1px rgba(14, 27, 47, 0.02) inset;
	color: var(--cpp-ink);
	font-size: 0.92rem;
	line-height: 1.35;
	transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
	-webkit-appearance: none;
	appearance: none;
}

.cpp-app select {
	padding-right: 42px;
	background-image: linear-gradient(45deg, transparent 50%, var(--cpp-navy) 50%), linear-gradient(135deg, var(--cpp-navy) 50%, transparent 50%);
	background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
	background-repeat: no-repeat;
	background-size: 5px 5px, 5px 5px;
}

.cpp-app textarea {
	min-height: 118px;
	resize: vertical;
}

.cpp-app :where(input, select, textarea)::placeholder {
	color: #81878d;
	opacity: 1;
}

.cpp-app :where(input, select, textarea):focus {
	border-color: var(--cpp-orange-dark);
	outline: 0;
	box-shadow: var(--cpp-focus);
}

.cpp-app :where(input, select, textarea):disabled,
.cpp-app :where(input, select, textarea)[readonly] {
	background: var(--cpp-soft);
	color: var(--cpp-muted);
	cursor: not-allowed;
}

.cpp-app :where(input, select, textarea)[aria-invalid="true"],
.cpp-app .has-error :where(input, select, textarea),
.cpp-app .is-invalid :where(input, select, textarea) {
	border-color: var(--cpp-danger);
	background: #fffafa;
}

.cpp-app .cpp-field-error,
.cpp-app .cpp-error-text {
	margin: 0;
	color: var(--cpp-danger);
	font-size: 0.78rem;
	font-weight: 700;
}

.cpp-app :where(input[type="checkbox"], input[type="radio"]) {
	width: 18px;
	height: 18px;
	margin: 0;
	border: 1px solid var(--cpp-line-strong);
	accent-color: var(--cpp-orange-dark);
}

.cpp-app .cpp-check,
.cpp-app .cpp-checkbox,
.cpp-app .cpp-radio,
.cpp-app .login-remember label {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	font-size: 0.84rem;
	font-weight: 650;
	line-height: 1.45;
}

/*
 * A checkbox is a flex item next to wrapping text, so without an explicit
 * basis the browser shrinks it into a squashed rectangle. Pin the box to a
 * true square and align it optically with the first line of the label.
 */
.cpp-app :where(.cpp-check, .cpp-checkbox, .cpp-radio, .login-remember label) > input[type="checkbox"],
.cpp-app :where(.cpp-check, .cpp-checkbox, .cpp-radio, .login-remember label) > input[type="radio"] {
	width: 18px;
	min-width: 18px;
	height: 18px;
	flex: 0 0 18px;
	margin: 0;
	translate: 0 calc((1.45em - 18px) / 2);
	accent-color: var(--cpp-orange);
	cursor: pointer;
}

.cpp-app :where(.cpp-check, .cpp-checkbox, .cpp-radio) > span {
	min-width: 0;
	flex: 1 1 auto;
}

.cpp-app .cpp-input-group {
	display: flex;
	align-items: stretch;
}

.cpp-app .cpp-input-group > :first-child {
	border-radius: var(--cpp-radius-sm) 0 0 var(--cpp-radius-sm);
}

.cpp-app .cpp-input-group > :last-child {
	margin-left: -1px;
	border-radius: 0 var(--cpp-radius-sm) var(--cpp-radius-sm) 0;
}

.cpp-app .cpp-choice-grid,
.cpp-app .cpp-option-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.cpp-app .cpp-choice,
.cpp-app .cpp-option-card {
	position: relative;
	display: grid;
	min-height: 92px;
	align-content: center;
	gap: 3px;
	padding: 18px;
	border: 1px solid var(--cpp-line);
	border-radius: var(--cpp-radius);
	background: #fff;
	cursor: pointer;
	transition: border-color 150ms ease, background-color 150ms ease, transform 150ms ease;
}

.cpp-app :where(.cpp-choice, .cpp-option-card):hover,
.cpp-app :where(.cpp-choice, .cpp-option-card).is-selected,
.cpp-app :where(.cpp-choice, .cpp-option-card):has(input:checked) {
	border-color: var(--cpp-orange);
	background: var(--cpp-orange-soft);
}

.cpp-app .cpp-otp,
.cpp-app .cpp-otp-group {
	display: flex;
	justify-content: center;
	gap: 10px;
}

.cpp-app .cpp-otp input,
.cpp-app input.cpp-otp-input {
	width: 52px;
	height: 58px;
	padding: 0;
	font-family: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 1.45rem;
	font-weight: 750;
	text-align: center;
}

/* Header and onboarding */
.cpp-app .cpp-app-header {
	display: flex;
	min-height: 88px;
	align-items: center;
	justify-content: space-between;
	gap: 22px;
	padding: 18px clamp(22px, 4vw, 58px);
	border-bottom: 1px solid var(--cpp-line);
	background: rgba(255, 255, 255, 0.96);
}

.cpp-app .cpp-secure-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 13px;
	border: 1px solid var(--cpp-line);
	border-radius: 999px;
	color: var(--cpp-muted);
	font-size: 0.73rem;
	font-weight: 750;
}

.cpp-app .cpp-secure-label span {
	color: var(--cpp-success);
	font-size: 0.7rem;
}

.cpp-app.cpp-application {
	min-height: 760px;
	overflow: hidden;
	border: 1px solid var(--cpp-line);
	border-radius: var(--cpp-radius-lg);
	box-shadow: var(--cpp-shadow-sm);
}

.cpp-app .cpp-onboarding-layout {
	display: grid;
	min-height: 672px;
	grid-template-columns: minmax(310px, 0.9fr) minmax(480px, 1.1fr);
}

.cpp-app .cpp-onboarding-aside {
	position: relative;
	overflow: hidden;
	padding: clamp(42px, 6vw, 86px);
	background: var(--cpp-navy);
	color: rgba(255, 255, 255, 0.78);
}

.cpp-app .cpp-onboarding-aside::after {
	position: absolute;
	right: -12%;
	bottom: -23%;
	width: 72%;
	aspect-ratio: 1;
	border: 54px solid rgba(232, 115, 74, 0.11);
	border-radius: 50%;
	content: "";
}

.cpp-app .cpp-onboarding-aside > * {
	position: relative;
	z-index: 1;
}

.cpp-app .cpp-onboarding-aside h1 {
	max-width: 720px;
	color: #fff;
	font-size: clamp(2.35rem, 4.6vw, 4.8rem);
}

.cpp-app .cpp-onboarding-aside > p:not(.cpp-eyebrow) {
	max-width: 600px;
	margin-bottom: 44px;
	font-size: 1rem;
}

.cpp-app .cpp-onboarding-aside .cpp-eyebrow {
	color: #ff9c78;
}

.cpp-app .cpp-assurance {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 15px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	color: #fff;
	font-size: 0.88rem;
	font-weight: 700;
}

.cpp-app .cpp-assurance span {
	color: #ff9c78;
	font-family: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 0.72rem;
	font-weight: 750;
}

.cpp-app .cpp-onboarding-main {
	padding: clamp(34px, 6vw, 78px);
	background: #fff;
}

.cpp-app .cpp-onboarding-main > [data-cpp-view] {
	max-width: 680px;
	margin-inline: auto;
}

.cpp-app .cpp-progress {
	display: grid;
	max-width: 520px;
	align-items: center;
	grid-template-columns: 32px 1fr 32px 1fr 32px 1fr 32px;
	margin: 0 auto clamp(38px, 6vw, 68px);
}

.cpp-app .cpp-progress span {
	display: grid;
	width: 32px;
	height: 32px;
	place-items: center;
	border: 1px solid var(--cpp-line-strong);
	border-radius: 50%;
	background: #fff;
	color: var(--cpp-muted);
	font-family: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 0.75rem;
	font-style: normal;
	font-weight: 750;
}

.cpp-app .cpp-progress i {
	height: 1px;
	background: var(--cpp-line);
}

.cpp-app .cpp-progress span.is-active,
.cpp-app .cpp-progress span.is-complete {
	border-color: var(--cpp-orange);
	background: var(--cpp-orange);
	color: #161616;
}

.cpp-app .cpp-progress i.is-complete {
	background: var(--cpp-orange);
}

/* Login */
.cpp-app.cpp-login {
	position: relative;
	display: flex;
	min-height: min(900px, calc(100vh - 32px));
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border: 1px solid var(--cpp-line);
	border-radius: 4px;
	background:
		linear-gradient(180deg, rgba(9, 20, 36, .3), rgba(9, 20, 36, .68)),
		url("../images/overhead-carrier-partner.jpg") center center / cover no-repeat;
	box-shadow: 0 28px 80px rgba(8, 20, 38, .24);
}

.cpp-app .cpp-login-panel {
	display: flex;
	flex-direction: column;
	position: relative;
	z-index: 2;
	width: min(92%, 590px);
	min-height: 640px;
	padding: clamp(28px, 4.5vw, 52px);
	border: 1px solid rgba(255, 255, 255, .84);
	border-radius: 4px;
	background: #fff;
	box-shadow: 0 30px 90px rgba(8, 20, 38, .38);
}

.cpp-app .cpp-login-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	margin-bottom: clamp(34px, 6vh, 66px);
}

.cpp-app .cpp-login-toolbar > .cpp-brand {
	min-width: 0;
}

.cpp-app .cpp-login-toolbar .cpp-brand-logo {
	width: clamp(150px, 15vw, 190px);
}

.cpp-app .cpp-login-form,
.cpp-app [data-cpp-invite]:not(:empty) {
	width: min(100%, 470px);
	margin: auto;
}

.cpp-app .cpp-login-form h1 {
	font-size: clamp(2.2rem, 4vw, 3.35rem);
	letter-spacing: -.045em;
}

.cpp-app .cpp-login-form > p:not(.cpp-eyebrow) {
	color: var(--cpp-muted);
}

.cpp-app #loginform {
	display: grid;
	gap: 17px;
	margin-top: 30px;
}

.cpp-app #loginform .login-remember,
.cpp-app #loginform .login-submit {
	margin: 0;
}

.cpp-app #wp-submit {
	width: 100%;
	min-height: 50px;
}

.cpp-app .cpp-login-links {
	display: flex;
	justify-content: space-between;
	gap: 18px;
	margin-top: 22px;
	font-size: 0.8rem;
}

.cpp-app .cpp-login-backdrop-label {
	position: absolute;
	z-index: 1;
	right: 28px;
	bottom: 22px;
	margin: 0;
	color: rgba(255, 255, 255, .9);
	font-size: .78rem;
	font-weight: 560;
	letter-spacing: .04em;
}

/* Dashboard shell */
.cpp-app.cpp-dashboard {
	display: grid;
	min-height: min(900px, calc(100vh - 32px));
	overflow: hidden;
	grid-template-columns: 280px minmax(0, 1fr);
	border: 1px solid var(--cpp-line);
	border-radius: var(--cpp-radius-lg);
	background: var(--cpp-soft);
	box-shadow: var(--cpp-shadow-sm);
}

.cpp-app .cpp-mobile-header {
	display: none;
}

.cpp-app .cpp-sidebar {
	position: relative;
	z-index: 30;
	display: flex;
	min-height: 100%;
	flex-direction: column;
	padding: 32px 22px;
	background: var(--cpp-charcoal);
	color: rgba(255, 255, 255, 0.72);
}

.cpp-app .cpp-sidebar > .cpp-brand {
	box-sizing: border-box;
	width: calc(100% - 24px);
	min-height: 70px;
	justify-content: center;
	margin: 0 12px 34px;
	padding: 13px 16px;
	border: 1px solid rgba(255, 255, 255, 0.24);
	border-radius: 0;
	background: #fff;
	color: var(--cpp-navy);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}

.cpp-app .cpp-sidebar > .cpp-brand .cpp-brand-logo {
	width: 100%;
	max-width: 196px;
}

.cpp-app .cpp-console-label {
	margin: -16px 12px 28px;
	color: #ff9c78;
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.cpp-app .cpp-sidebar nav {
	display: grid;
	gap: 5px;
}

.cpp-app .cpp-sidebar nav :where(a, button),
.cpp-app .cpp-nav-item {
	display: flex;
	width: 100%;
	min-height: 45px;
	align-items: center;
	gap: 12px;
	padding: 10px 13px;
	border: 1px solid transparent;
	border-radius: 4px;
	background: transparent;
	color: rgba(255, 255, 255, 0.72);
	cursor: pointer;
	font-size: 0.82rem;
	font-weight: 700;
	text-align: left;
	text-decoration: none;
	transition: background-color 220ms cubic-bezier(0.22, 1, 0.36, 1), color 220ms ease, border-color 220ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cpp-app .cpp-sidebar nav :where(a, button):hover,
.cpp-app .cpp-nav-item:hover {
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	transform: translateX(3px);
}

.cpp-app .cpp-sidebar nav :where(a, button).is-active,
.cpp-app .cpp-sidebar nav :where(a, button)[aria-current="page"],
.cpp-app .cpp-nav-item.is-active {
	border-color: rgba(232, 115, 74, 0.42);
	background: var(--cpp-orange);
	color: #171717;
	transform: translateX(0);
}

.cpp-app .cpp-sidebar nav :where(svg, .dashicons),
.cpp-app .cpp-nav-icon {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	font-size: 18px;
}

.cpp-app .cpp-sidebar-help {
	display: grid;
	grid-template-columns: 40px 1fr;
	column-gap: 11px;
	margin-top: auto;
	padding: 15px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--cpp-radius);
	background: rgba(255, 255, 255, 0.06);
}

.cpp-app .cpp-sidebar-help > span {
	display: grid;
	width: 40px;
	height: 40px;
	grid-row: 1 / span 2;
	place-items: center;
	border-radius: 50%;
	background: var(--cpp-orange);
	color: #171717;
	font-family: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 0.72rem;
	font-weight: 800;
}

.cpp-app .cpp-sidebar-help strong {
	align-self: end;
	color: #fff;
	font-size: 0.78rem;
}

.cpp-app .cpp-sidebar-help :where(a, small) {
	align-self: start;
	color: rgba(255, 255, 255, 0.64);
	font-size: 0.68rem;
	font-weight: 650;
}

/*
 * The scrolling work area.
 *
 * The horizontal inset is a variable so the sticky header can cancel it and
 * run edge to edge while its text stays aligned with the content below. There
 * is no top padding: the header supplies its own, and anything here would show
 * as a gap above a bar that is meant to be flush with the top of the panel.
 */
.cpp-app .cpp-dashboard-main {
	--cpp-main-inset: clamp(24px, 3.5vw, 52px);
	--cpp-main-measure: 1320px;
	min-width: 0;
	padding: 0 var(--cpp-main-inset) var(--cpp-main-inset);
	overflow: auto;
	scroll-behavior: smooth;
}

.cpp-app .cpp-dashboard-main > [data-cpp-view] {
	width: 100%;
	max-width: var(--cpp-main-measure);
	margin-inline: auto;
}

.cpp-app .cpp-dashboard-main > [data-cpp-view].is-view-entering,
.cpp-app [data-ws-content].is-view-entering {
	animation: cpp-view-enter 280ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes cpp-view-enter {
	from {
		opacity: 0;
		transform: translateY(7px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.cpp-app .cpp-page-header,
.cpp-app .cpp-topbar {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 28px;
}

.cpp-app .cpp-page-header h1,
.cpp-app .cpp-topbar h1 {
	margin-bottom: 6px;
	font-size: clamp(2rem, 3.4vw, 3.25rem);
}

.cpp-app .cpp-page-header p,
.cpp-app .cpp-topbar p {
	margin: 0;
	color: var(--cpp-muted);
}

.cpp-app .cpp-breadcrumbs {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 7px;
	margin-bottom: 12px;
	color: var(--cpp-muted);
	font-size: 0.74rem;
}

/* Panels, cards, metrics, and layout utilities */
.cpp-app .cpp-card,
.cpp-app .cpp-panel,
.cpp-app .cpp-section-card,
.cpp-app .cpp-widget {
	position: relative;
	padding: clamp(20px, 2.5vw, 30px);
	border: 1px solid var(--cpp-line);
	border-radius: var(--cpp-radius);
	background: #fff;
	box-shadow: var(--cpp-shadow-sm);
}

.cpp-app .cpp-card--dark,
.cpp-app .cpp-panel--dark {
	border-color: var(--cpp-charcoal);
	background: var(--cpp-charcoal);
	color: rgba(255, 255, 255, 0.72);
}

.cpp-app .cpp-card--dark :where(h2, h3, h4),
.cpp-app .cpp-panel--dark :where(h2, h3, h4) {
	color: #fff;
}

.cpp-app .cpp-card--accent,
.cpp-app .cpp-panel--accent {
	border-color: #f3b69e;
	background: var(--cpp-orange-soft);
}

.cpp-app .cpp-card-header,
.cpp-app .cpp-panel-header,
.cpp-app .cpp-section-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 18px;
	margin-bottom: 20px;
	padding-bottom: 17px;
	border-bottom: 1px solid var(--cpp-line);
}

.cpp-app .cpp-card-header :where(h2, h3, h4),
.cpp-app .cpp-panel-header :where(h2, h3, h4),
.cpp-app .cpp-section-header :where(h2, h3, h4) {
	margin: 0;
}

.cpp-app .cpp-grid,
.cpp-app .cpp-card-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

.cpp-app .cpp-grid--two {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cpp-app .cpp-grid--four {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cpp-app .cpp-stack {
	display: grid;
	gap: 18px;
}

.cpp-app .cpp-split {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.75fr);
	gap: 20px;
}

.cpp-app .cpp-stats,
.cpp-app .cpp-metric-grid,
.cpp-app .cpp-summary-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	margin-bottom: 22px;
}

.cpp-app .cpp-stat,
.cpp-app .cpp-metric,
.cpp-app .cpp-summary-card {
	min-width: 0;
	padding: 20px;
	border: 1px solid var(--cpp-line);
	border-radius: var(--cpp-radius);
	background: #fff;
}

.cpp-app :where(.cpp-stat, .cpp-metric, .cpp-summary-card) > span:first-child,
.cpp-app .cpp-stat-label,
.cpp-app .cpp-metric-label {
	display: block;
	margin-bottom: 11px;
	color: var(--cpp-muted);
	font-size: 0.69rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.cpp-app .cpp-stat strong,
.cpp-app .cpp-metric strong,
.cpp-app .cpp-stat-value,
.cpp-app .cpp-metric-value {
	display: block;
	overflow: hidden;
	color: var(--cpp-charcoal);
	font-family: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: clamp(1.5rem, 2.3vw, 2.25rem);
	font-weight: 650;
	letter-spacing: -0.045em;
	line-height: 1.05;
	text-overflow: ellipsis;
}

.cpp-app .cpp-stat-trend,
.cpp-app .cpp-metric-meta {
	display: block;
	margin-top: 9px;
	color: var(--cpp-muted);
	font-size: 0.73rem;
}

.cpp-app .cpp-pillar-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.cpp-app .cpp-pillar-card {
	position: relative;
	min-height: 190px;
	overflow: hidden;
	padding: 24px;
	border: 1px solid var(--cpp-line);
	border-radius: var(--cpp-radius);
	background: #fff;
}

.cpp-app .cpp-pillar-card::after {
	position: absolute;
	right: -25px;
	bottom: -35px;
	width: 115px;
	height: 115px;
	border-radius: 50%;
	background: var(--cpp-orange-soft);
	content: "";
}

.cpp-app .cpp-pillar-card > * {
	position: relative;
	z-index: 1;
}

.cpp-app .cpp-progress-bar,
.cpp-app .cpp-meter {
	position: relative;
	height: 8px;
	overflow: hidden;
	border-radius: 999px;
	background: var(--cpp-soft-2);
}

.cpp-app :where(.cpp-progress-bar, .cpp-meter) > span {
	display: block;
	width: var(--cpp-progress, 0%);
	height: 100%;
	border-radius: inherit;
	background: var(--cpp-orange);
}

.cpp-app .cpp-divider {
	height: 1px;
	margin: 22px 0;
	border: 0;
	background: var(--cpp-line);
}

/* Tabs, filters, search, and pagination */
.cpp-app .cpp-tabs,
.cpp-app [role="tablist"] {
	display: flex;
	max-width: 100%;
	align-items: center;
	gap: 4px;
	padding: 4px;
	overflow-x: auto;
	border: 1px solid var(--cpp-line);
	border-radius: 999px;
	background: #fff;
	scrollbar-width: thin;
}

.cpp-app .cpp-tabs :where(button, a),
.cpp-app [role="tablist"] [role="tab"] {
	display: inline-flex;
	min-height: 38px;
	align-items: center;
	justify-content: center;
	padding: 8px 15px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--cpp-muted);
	cursor: pointer;
	font-size: 0.78rem;
	font-weight: 750;
	text-decoration: none;
	white-space: nowrap;
}

.cpp-app .cpp-tabs :where(button, a).is-active,
.cpp-app .cpp-tabs :where(button, a)[aria-selected="true"],
.cpp-app [role="tablist"] [role="tab"][aria-selected="true"] {
	background: var(--cpp-charcoal);
	color: #fff;
}

.cpp-app .cpp-toolbar,
.cpp-app .cpp-filters,
.cpp-app .cpp-table-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 17px;
}

.cpp-app .cpp-filter-group {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 9px;
}

.cpp-app .cpp-search {
	position: relative;
	width: min(100%, 330px);
}

.cpp-app .cpp-search input {
	padding-left: 42px;
}

.cpp-app .cpp-search::before {
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 15px;
	width: 15px;
	height: 15px;
	border: 2px solid var(--cpp-muted);
	border-radius: 50%;
	content: "";
	transform: translateY(-58%);
}

.cpp-app .cpp-search::after {
	position: absolute;
	z-index: 1;
	top: calc(50% + 5px);
	left: 27px;
	width: 7px;
	height: 2px;
	background: var(--cpp-muted);
	content: "";
	transform: rotate(45deg);
}

.cpp-app .cpp-filter-pill,
.cpp-app .cpp-segmented button {
	display: inline-flex;
	min-height: 36px;
	align-items: center;
	gap: 7px;
	padding: 7px 13px;
	border: 1px solid var(--cpp-line);
	border-radius: 999px;
	background: #fff;
	color: var(--cpp-muted);
	cursor: pointer;
	font-size: 0.74rem;
	font-weight: 750;
}

.cpp-app .cpp-filter-pill.is-active,
.cpp-app .cpp-segmented button.is-active,
.cpp-app .cpp-segmented button[aria-pressed="true"] {
	border-color: var(--cpp-charcoal);
	background: var(--cpp-charcoal);
	color: #fff;
}

.cpp-app .cpp-pagination {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 7px;
	margin-top: 18px;
}

.cpp-app .cpp-pagination :where(a, button, span) {
	display: grid;
	min-width: 38px;
	height: 38px;
	place-items: center;
	border: 1px solid var(--cpp-line);
	border-radius: 10px;
	background: #fff;
	color: var(--cpp-ink);
	font-size: 0.78rem;
	font-weight: 750;
	text-decoration: none;
}

.cpp-app .cpp-pagination .is-current,
.cpp-app .cpp-pagination [aria-current="page"] {
	border-color: var(--cpp-orange);
	background: var(--cpp-orange);
	color: #161616;
}

.cpp-app .cpp-pagination > span,
.cpp-app .cpp-result-count {
	min-width: 0;
	height: auto;
	margin-right: auto;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--cpp-muted);
}

/* Tables */
.cpp-app .cpp-table-wrap,
.cpp-app .cpp-data-table-wrap {
	width: 100%;
	overflow-x: auto;
	border: 1px solid var(--cpp-line);
	border-radius: var(--cpp-radius);
	background: #fff;
	-webkit-overflow-scrolling: touch;
}

.cpp-app :where(.cpp-table, .cpp-data-table) {
	width: 100%;
	min-width: 720px;
	margin: 0;
	border: 0;
	border-collapse: separate;
	border-spacing: 0;
	background: #fff;
	color: var(--cpp-ink);
	font-size: 0.82rem;
}

.cpp-app :where(.cpp-table, .cpp-data-table) th {
	padding: 13px 16px;
	border: 0;
	border-bottom: 1px solid var(--cpp-line);
	background: #fafafa;
	color: var(--cpp-muted);
	font-size: 0.67rem;
	font-weight: 800;
	letter-spacing: 0.075em;
	text-align: left;
	text-transform: uppercase;
	white-space: nowrap;
}

.cpp-app :where(.cpp-table, .cpp-data-table) td {
	padding: 15px 16px;
	border: 0;
	border-bottom: 1px solid var(--cpp-line);
	vertical-align: middle;
}

.cpp-app :where(.cpp-table, .cpp-data-table) tbody tr:last-child td {
	border-bottom: 0;
}

.cpp-app :where(.cpp-table, .cpp-data-table) tbody tr:hover td {
	background: #fcf8f6;
}

.cpp-app :where(.cpp-table, .cpp-data-table) th[aria-sort],
.cpp-app .cpp-sortable {
	cursor: pointer;
}

.cpp-app .cpp-table-primary {
	display: grid;
	gap: 2px;
}

.cpp-app .cpp-table-primary strong {
	color: var(--cpp-charcoal);
}

.cpp-app .cpp-table-primary small {
	color: var(--cpp-muted);
}

.cpp-app .cpp-row-actions {
	display: flex;
	justify-content: flex-end;
	gap: 6px;
}

/* Status chips */
/*
 * Status pills.
 *
 * `nowrap` alone used to clip the label against whatever ancestor happened to
 * hide its overflow, so "Awaiting email" read as "Awaiting em" with no hint
 * that anything was missing. The pill now caps its own width and ellipsises
 * its label, and every pill carries a title attribute, so a shortened status
 * is visibly shortened and readable on hover.
 */
.cpp-app :where(.cpp-status, .cpp-chip, .cpp-badge, [class*="cpp-status--"]) {
	display: inline-flex;
	max-width: 100%;
	min-height: 28px;
	min-width: 0;
	align-items: center;
	gap: 7px;
	padding: 5px 10px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: var(--cpp-soft-2);
	color: #4e555b;
	font-size: 0.68rem;
	font-weight: 800;
	line-height: 1.1;
	white-space: nowrap;
}

.cpp-app :where(.cpp-status, .cpp-chip, .cpp-badge, [class*="cpp-status--"])::before {
	width: 7px;
	height: 7px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: currentColor;
	content: "";
}

.cpp-app .cpp-chip-label {
	overflow: hidden;
	min-width: 0;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/*
 * Single-line labels that can outrun their column.
 *
 * Only elements that must stay on one line are listed. Definition-list values
 * are excluded on purpose: they already wrap on a word boundary, and wrapping
 * shows the whole value where an ellipsis would hide part of it.
 */
.cpp-app :where(.cpp-slot-scope, .cpp-nav-label small, .cpp-workspace-identity strong, .cpp-workspace-identity small) {
	display: block;
	overflow: hidden;
	max-width: 100%;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Headings inside a dialog wrap instead of clipping: a status title is short
   enough to fold onto a second line, and folding beats losing words. */
.cpp-app .cpp-status-modal :where(h2, h3) {
	overflow-wrap: anywhere;
	white-space: normal;
}

.cpp-app :where(.cpp-status--valid, .cpp-status--active, .cpp-status--approved, .cpp-chip--success) {
	border-color: #b9dfc8;
	background: var(--cpp-success-bg);
	color: var(--cpp-success);
}

.cpp-app :where(.cpp-status--expiring, .cpp-status--warning, .cpp-status--pending, .cpp-status--pending-review, .cpp-status--awaiting-carrier, .cpp-chip--warning) {
	border-color: #ead58f;
	background: var(--cpp-warning-bg);
	color: var(--cpp-warning);
}

.cpp-app :where(.cpp-status--expired, .cpp-status--missing, .cpp-status--banned, .cpp-status--locked, .cpp-status--error, .cpp-chip--danger) {
	border-color: #efc0bc;
	background: var(--cpp-danger-bg);
	color: var(--cpp-danger);
}

.cpp-app :where(.cpp-status--info, .cpp-status--invited, .cpp-chip--info) {
	border-color: #bdd8f1;
	background: var(--cpp-info-bg);
	color: var(--cpp-info);
}

.cpp-app :where(.cpp-status--not-applicable, .cpp-status--inactive, .cpp-chip--neutral) {
	border-color: var(--cpp-line);
	background: var(--cpp-soft);
	color: #555d65;
}

/* Documents and uploads */
.cpp-app .cpp-document-grid,
.cpp-app .cpp-documents-grid,
.cpp-app .cpp-upload-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.cpp-app .cpp-document-card,
.cpp-app .cpp-document-slot {
	display: grid;
	gap: 14px;
	padding: 19px;
	border: 1px solid var(--cpp-line);
	border-radius: var(--cpp-radius);
	background: #fff;
}

.cpp-app .cpp-document-card-header,
.cpp-app .cpp-document-meta {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.cpp-app .cpp-document-card h3,
.cpp-app .cpp-document-slot h3 {
	margin: 0;
	font-size: 1rem;
	letter-spacing: -0.02em;
}

.cpp-app .cpp-upload-slot,
.cpp-app .cpp-dropzone {
	position: relative;
	display: grid;
	min-height: 148px;
	place-items: center;
	align-content: center;
	gap: 7px;
	padding: 22px;
	border: 1.5px dashed var(--cpp-line-strong);
	border-radius: var(--cpp-radius);
	background: #fafafa;
	color: var(--cpp-muted);
	cursor: pointer;
	text-align: center;
	transition: border-color 150ms ease, background-color 150ms ease, transform 150ms ease;
}

.cpp-app :where(.cpp-upload-slot, .cpp-dropzone):hover,
.cpp-app :where(.cpp-upload-slot, .cpp-dropzone).is-dragover,
.cpp-app :where(.cpp-upload-slot, .cpp-dropzone)[data-state="dragover"] {
	border-color: var(--cpp-orange);
	background: var(--cpp-orange-soft);
}

.cpp-app :where(.cpp-upload-slot, .cpp-dropzone).is-uploaded,
.cpp-app :where(.cpp-upload-slot, .cpp-dropzone)[data-state="uploaded"] {
	border-style: solid;
	border-color: #b9dfc8;
	background: var(--cpp-success-bg);
}

.cpp-app :where(.cpp-upload-slot, .cpp-dropzone).has-error,
.cpp-app :where(.cpp-upload-slot, .cpp-dropzone)[data-state="error"] {
	border-color: var(--cpp-danger);
	background: var(--cpp-danger-bg);
}

.cpp-app :where(.cpp-upload-slot, .cpp-dropzone) input[type="file"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
	opacity: 0;
}

.cpp-app .cpp-upload-icon {
	display: grid;
	width: 42px;
	height: 42px;
	place-items: center;
	border-radius: 50%;
	background: #fff;
	box-shadow: var(--cpp-shadow-sm);
	color: var(--cpp-orange-ink);
}

.cpp-app .cpp-file-row,
.cpp-app .cpp-file-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 13px;
	border: 1px solid var(--cpp-line);
	border-radius: var(--cpp-radius-sm);
	background: #fff;
}

.cpp-app .cpp-file-info {
	min-width: 0;
}

.cpp-app .cpp-file-info strong {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cpp-app .cpp-file-info small {
	color: var(--cpp-muted);
}

/* Profiles, lists, notes, and activity */
.cpp-app .cpp-profile-header {
	display: flex;
	align-items: center;
	gap: 16px;
}

.cpp-app .cpp-avatar {
	display: grid;
	width: 48px;
	height: 48px;
	flex: 0 0 auto;
	place-items: center;
	border-radius: 50%;
	background: var(--cpp-navy);
	color: #fff;
	font-family: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-weight: 750;
}

.cpp-app .cpp-definition-list,
.cpp-app .cpp-detail-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 24px;
	margin: 0;
}

.cpp-app :where(.cpp-definition-list, .cpp-detail-list) > div {
	padding: 13px 0;
	border-bottom: 1px solid var(--cpp-line);
}

.cpp-app :where(.cpp-definition-list, .cpp-detail-list) dt {
	color: var(--cpp-muted);
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.cpp-app :where(.cpp-definition-list, .cpp-detail-list) dd {
	margin: 3px 0 0;
	color: var(--cpp-charcoal);
	font-weight: 700;
	word-break: break-word;
}

.cpp-app .cpp-list,
.cpp-app .cpp-activity-list,
.cpp-app .cpp-timeline {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cpp-app .cpp-list-item,
.cpp-app .cpp-activity-item,
.cpp-app .cpp-timeline-item {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 13px;
	padding: 15px 0;
	border-bottom: 1px solid var(--cpp-line);
}

.cpp-app :where(.cpp-list-item, .cpp-activity-item, .cpp-timeline-item):last-child {
	border-bottom: 0;
}

.cpp-app .cpp-timeline-item::before {
	width: 10px;
	height: 10px;
	margin-top: 7px;
	flex: 0 0 auto;
	border: 2px solid var(--cpp-orange);
	border-radius: 50%;
	background: #fff;
	content: "";
}

.cpp-app .cpp-note {
	padding: 15px 17px;
	border-left: 3px solid var(--cpp-orange);
	border-radius: 0 var(--cpp-radius-sm) var(--cpp-radius-sm) 0;
	background: var(--cpp-orange-soft);
}

.cpp-app details.cpp-accordion,
.cpp-app .cpp-accordion-item {
	border-bottom: 1px solid var(--cpp-line);
}

.cpp-app details.cpp-accordion > summary,
.cpp-app .cpp-accordion-trigger {
	display: flex;
	min-height: 54px;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 13px 0;
	color: var(--cpp-charcoal);
	cursor: pointer;
	font-weight: 800;
}

.cpp-app .cpp-accordion-content {
	padding: 0 0 18px;
	color: var(--cpp-muted);
}

/* Alerts and feedback */
.cpp-app .cpp-alert,
.cpp-app .cpp-banner,
.cpp-app .cpp-inline-notice {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	padding: 14px 16px;
	border: 1px solid #bdd8f1;
	border-radius: var(--cpp-radius-sm);
	background: var(--cpp-info-bg);
	color: #174f86;
	font-size: 0.82rem;
}

.cpp-app :where(.cpp-alert, .cpp-banner, .cpp-inline-notice).is-success,
.cpp-app .cpp-alert--success {
	border-color: #b9dfc8;
	background: var(--cpp-success-bg);
	color: var(--cpp-success);
}

.cpp-app :where(.cpp-alert, .cpp-banner, .cpp-inline-notice).is-warning,
.cpp-app .cpp-alert--warning {
	border-color: #ead58f;
	background: var(--cpp-warning-bg);
	color: var(--cpp-warning);
}

.cpp-app :where(.cpp-alert, .cpp-banner, .cpp-inline-notice).is-error,
.cpp-app .cpp-alert--error {
	border-color: #efc0bc;
	background: var(--cpp-danger-bg);
	color: var(--cpp-danger);
}

.cpp-app .cpp-toast-region {
	position: fixed;
	z-index: 100020;
	top: 24px;
	right: 24px;
	display: grid;
	width: min(390px, calc(100vw - 32px));
	gap: 10px;
	pointer-events: none;
}

.cpp-app .cpp-toast {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: start;
	gap: 11px;
	padding: 15px 16px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-left: 4px solid var(--cpp-orange);
	border-radius: var(--cpp-radius-sm);
	background: var(--cpp-charcoal);
	box-shadow: var(--cpp-shadow);
	color: #fff;
	pointer-events: auto;
	animation: cpp-toast-in 220ms ease both;
}

.cpp-app .cpp-toast.is-success,
.cpp-app .cpp-toast--success {
	border-left-color: #55bd7c;
}

.cpp-app .cpp-toast.is-error,
.cpp-app .cpp-toast--error {
	border-left-color: #f17a71;
}

.cpp-app .cpp-toast--warning {
	border-left-color: #e3b341;
}

.cpp-app .cpp-toast button {
	padding: 0;
	border: 0;
	background: transparent;
	color: #fff;
	cursor: pointer;
}

/* Modal and destructive confirmation */
.cpp-app .cpp-modal-backdrop,
.cpp-app .cpp-modal-layer,
.cpp-app .cpp-dialog-backdrop {
	position: fixed;
	z-index: 100000;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 22px;
	background: rgba(14, 27, 47, 0.68);
	backdrop-filter: blur(4px);
}

.cpp-app .cpp-modal,
.cpp-app .cpp-dialog,
.cpp-app dialog.cpp-modal {
	width: min(620px, 100%);
	max-height: min(820px, calc(100vh - 44px));
	margin: auto;
	padding: 0;
	overflow: auto;
	border: 1px solid var(--cpp-line);
	border-radius: var(--cpp-radius-lg);
	background: #fff;
	box-shadow: var(--cpp-shadow);
	color: var(--cpp-ink);
}

.cpp-app dialog.cpp-modal::backdrop {
	background: rgba(14, 27, 47, 0.68);
	backdrop-filter: blur(4px);
}

.cpp-app .cpp-modal-header,
.cpp-app .cpp-modal-head,
.cpp-app .cpp-modal-body,
.cpp-app .cpp-modal-footer,
.cpp-app .cpp-dialog-header,
.cpp-app .cpp-dialog-body,
.cpp-app .cpp-dialog-footer {
	padding: 21px 24px;
}

.cpp-app .cpp-modal-header,
.cpp-app .cpp-modal-head,
.cpp-app .cpp-dialog-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	border-bottom: 1px solid var(--cpp-line);
}

.cpp-app .cpp-modal-footer,
.cpp-app .cpp-dialog-footer {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	border-top: 1px solid var(--cpp-line);
	background: var(--cpp-soft);
}

.cpp-app .cpp-modal-close,
.cpp-app .cpp-dialog-close {
	display: grid;
	width: 38px;
	height: 38px;
	place-items: center;
	padding: 0;
	border: 1px solid var(--cpp-line);
	border-radius: 50%;
	background: #fff;
	color: var(--cpp-charcoal);
	cursor: pointer;
}

/* Empty, loading, and skeleton states */
.cpp-app .cpp-empty,
.cpp-app .cpp-empty-state,
.cpp-app .cpp-error-state {
	display: grid;
	min-height: 240px;
	place-items: center;
	align-content: center;
	gap: 10px;
	padding: 36px;
	border: 1px dashed var(--cpp-line-strong);
	border-radius: var(--cpp-radius);
	background: rgba(255, 255, 255, 0.62);
	color: var(--cpp-muted);
	text-align: center;
}

.cpp-app :where(.cpp-empty, .cpp-empty-state, .cpp-error-state) > :where(h2, h3) {
	margin: 0;
	color: var(--cpp-charcoal);
}

.cpp-app .cpp-empty-icon {
	display: grid;
	width: 58px;
	height: 58px;
	place-items: center;
	border-radius: 50%;
	background: var(--cpp-orange-soft);
	color: var(--cpp-orange-ink);
	font-size: 1.4rem;
}

.cpp-app .cpp-loading {
	display: flex;
	min-height: 190px;
	align-items: center;
	justify-content: center;
	gap: 12px;
	color: var(--cpp-muted);
	font-size: 0.82rem;
	font-weight: 700;
}

.cpp-app .cpp-loading-icon,
.cpp-app .cpp-spinner {
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
	animation: cpp-spin 700ms linear infinite;
}

.cpp-app .cpp-loading-icon circle {
	stroke: var(--cpp-line);
	stroke-width: 2;
}

.cpp-app .cpp-loading-icon path {
	stroke: var(--cpp-orange-dark);
	stroke-width: 2.4;
	stroke-linecap: round;
}

.cpp-app .cpp-skeleton {
	position: relative;
	overflow: hidden;
	border-radius: 8px;
	background: var(--cpp-soft-2);
	color: transparent !important;
}

.cpp-app .cpp-skeleton::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.74), transparent);
	content: "";
	animation: cpp-shimmer 1.35s infinite;
	transform: translateX(-100%);
}

.cpp-app .cpp-app--notice,
.cpp-app.cpp-app--notice {
	display: grid;
	min-height: 480px;
	place-items: center;
	padding: 24px;
	border-radius: var(--cpp-radius-lg);
	background: var(--cpp-soft);
}

.cpp-app .cpp-notice-card {
	width: min(520px, 100%);
	padding: clamp(26px, 5vw, 48px);
	border: 1px solid var(--cpp-line);
	border-radius: var(--cpp-radius-lg);
	background: #fff;
	box-shadow: var(--cpp-shadow-sm);
	text-align: center;
}

.cpp-app .cpp-notice-card .cpp-brand {
	margin-bottom: 26px;
}

/* Small utilities */
.cpp-app .cpp-text-right {
	text-align: right;
}

.cpp-app .cpp-text-center {
	text-align: center;
}

.cpp-app .cpp-w-full {
	width: 100%;
}

.cpp-app .cpp-mt-0 {
	margin-top: 0;
}

.cpp-app .cpp-mb-0 {
	margin-bottom: 0;
}

@keyframes cpp-spin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes cpp-shimmer {
	to {
		transform: translateX(100%);
	}
}

@keyframes cpp-toast-in {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (max-width: 1100px) {
	.cpp-app.cpp-dashboard {
		grid-template-columns: 238px minmax(0, 1fr);
	}

	.cpp-app .cpp-sidebar {
		padding-inline: 16px;
	}

	.cpp-app .cpp-dashboard-main {
		--cpp-main-inset: 28px;
		padding: 0 var(--cpp-main-inset) var(--cpp-main-inset);
	}

	.cpp-app .cpp-stats,
	.cpp-app .cpp-metric-grid,
	.cpp-app .cpp-summary-grid,
	.cpp-app .cpp-grid--four {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cpp-app .cpp-grid,
	.cpp-app .cpp-card-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cpp-app .cpp-split {
		grid-template-columns: minmax(0, 1fr);
	}

	.cpp-app .cpp-onboarding-layout {
		grid-template-columns: minmax(300px, 0.8fr) minmax(430px, 1.2fr);
	}

	.cpp-app .cpp-onboarding-aside,
	.cpp-app .cpp-onboarding-main {
		padding: 44px;
	}
}

@media (max-width: 760px) {
	.cpp-app {
		border-radius: 0;
		font-size: 14px;
	}

	.cpp-app.cpp-application,
	.cpp-app.cpp-login,
	.cpp-app.cpp-dashboard {
		min-height: 100vh;
		border-inline: 0;
		border-radius: 0;
	}

	.cpp-app .cpp-app-header {
		min-height: 72px;
		padding: 13px 18px;
	}

	.cpp-app .cpp-secure-label {
		padding: 7px 9px;
		font-size: 0.65rem;
	}

	.cpp-app .cpp-onboarding-layout {
		display: block;
	}

	.cpp-app .cpp-onboarding-aside,
	.cpp-app .cpp-onboarding-main {
		padding: 34px 22px;
	}

	.cpp-app .cpp-onboarding-aside h1 {
		font-size: clamp(2.25rem, 10vw, 3.7rem);
	}

	.cpp-app .cpp-onboarding-aside > p:not(.cpp-eyebrow) {
		margin-bottom: 28px;
	}

	.cpp-app .cpp-progress {
		margin-bottom: 34px;
	}

	.cpp-app.cpp-login {
		display: flex;
		padding: 24px 14px;
	}

	.cpp-app .cpp-login-panel {
		width: min(100%, 570px);
		min-height: auto;
		padding: 24px 20px 34px;
	}

	.cpp-app .cpp-login-toolbar {
		margin-bottom: 42px;
	}

	.cpp-app .cpp-login-backdrop-label {
		display: none;
	}

	.cpp-app.cpp-dashboard {
		display: block;
		overflow: visible;
	}

	.cpp-app .cpp-mobile-header {
		position: sticky;
		z-index: 40;
		top: 0;
		display: flex;
		min-height: 70px;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		padding: 12px 18px;
		border-bottom: 1px solid var(--cpp-line);
		background: rgba(255, 255, 255, 0.96);
		backdrop-filter: blur(12px);
	}

	.cpp-app .cpp-mobile-header .cpp-brand {
		max-width: 180px;
	}

	.cpp-app .cpp-mobile-header button {
		display: grid;
		width: 44px;
		height: 44px;
		place-items: center;
		padding: 0;
		border: 1px solid var(--cpp-line);
		border-radius: 50%;
		background: #fff;
		color: var(--cpp-navy);
		cursor: pointer;
		font-size: 1.25rem;
	}

	.cpp-app .cpp-sidebar {
		position: fixed;
		z-index: 100001;
		top: 0;
		bottom: 0;
		left: 0;
		width: min(300px, 86vw);
		min-height: 100vh;
		overflow-y: auto;
		box-shadow: var(--cpp-shadow);
		transform: translateX(-105%);
		transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
	}

	.cpp-app.is-menu-open .cpp-sidebar,
	.cpp-app[data-menu-open="true"] .cpp-sidebar,
	.cpp-app .cpp-sidebar.is-open {
		transform: translateX(0);
	}

	.cpp-app.cpp-dashboard::after {
		position: fixed;
		z-index: 100000;
		inset: 0;
		background: rgba(14, 27, 47, 0.58);
		content: "";
		opacity: 0;
		pointer-events: none;
		transition: opacity 240ms ease;
	}

	.cpp-app.cpp-dashboard.is-menu-open::after,
	.cpp-app.cpp-dashboard[data-menu-open="true"]::after {
		opacity: 1;
		pointer-events: auto;
	}

	.cpp-app .cpp-dashboard-main {
		--cpp-main-inset: 18px;
		padding: 0 var(--cpp-main-inset) 42px;
		overflow: visible;
	}

	.cpp-app .cpp-page-header,
	.cpp-app .cpp-topbar {
		align-items: stretch;
		flex-direction: column;
		gap: 16px;
	}

	.cpp-app .cpp-form-grid,
	.cpp-app .cpp-form-grid--three,
	.cpp-app .cpp-choice-grid,
	.cpp-app .cpp-option-grid,
	.cpp-app .cpp-grid,
	.cpp-app .cpp-card-grid,
	.cpp-app .cpp-grid--two,
	.cpp-app .cpp-grid--four,
	.cpp-app .cpp-pillar-grid,
	.cpp-app .cpp-document-grid,
	.cpp-app .cpp-documents-grid,
	.cpp-app .cpp-upload-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.cpp-app .cpp-stats,
	.cpp-app .cpp-metric-grid,
	.cpp-app .cpp-summary-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cpp-app .cpp-toolbar,
	.cpp-app .cpp-filters,
	.cpp-app .cpp-table-toolbar {
		align-items: stretch;
		flex-direction: column;
	}

	.cpp-app .cpp-search {
		width: 100%;
	}

	.cpp-app .cpp-tabs,
	.cpp-app [role="tablist"] {
		justify-content: flex-start;
		border-radius: var(--cpp-radius-sm);
	}

	.cpp-app .cpp-definition-list,
	.cpp-app .cpp-detail-list {
		grid-template-columns: minmax(0, 1fr);
	}

	.cpp-app .cpp-toast-region {
		top: 14px;
		right: 16px;
	}

	.cpp-app .cpp-modal-backdrop,
	.cpp-app .cpp-dialog-backdrop {
		align-items: end;
		padding: 10px;
	}

	.cpp-app .cpp-modal,
	.cpp-app .cpp-dialog,
	.cpp-app dialog.cpp-modal {
		width: 100%;
		max-height: calc(100vh - 20px);
		border-radius: var(--cpp-radius-lg) var(--cpp-radius-lg) var(--cpp-radius-sm) var(--cpp-radius-sm);
	}
}

@media (max-width: 480px) {
	.cpp-app .cpp-brand-word {
		font-size: 1rem;
	}

	.cpp-app .cpp-brand-shield {
		width: 32px;
		height: 35px;
	}

	.cpp-app .cpp-secure-label {
		max-width: 128px;
		line-height: 1.15;
	}

	.cpp-app .cpp-onboarding-aside {
		padding-top: 32px;
	}

	.cpp-app .cpp-onboarding-main {
		padding-inline: 16px;
	}

	.cpp-app .cpp-progress {
		grid-template-columns: 28px 1fr 28px 1fr 28px 1fr 28px;
	}

	.cpp-app .cpp-progress span {
		width: 28px;
		height: 28px;
	}

	.cpp-app .cpp-login-panel {
		padding-inline: 18px;
	}

	.cpp-app .cpp-login-links {
		align-items: flex-start;
		flex-direction: column;
		gap: 10px;
	}

	.cpp-app .cpp-dashboard-main {
		--cpp-main-inset: 14px;
		padding-inline: var(--cpp-main-inset);
	}

	.cpp-app .cpp-card,
	.cpp-app .cpp-panel,
	.cpp-app .cpp-section-card,
	.cpp-app .cpp-widget {
		padding: 18px;
		border-radius: var(--cpp-radius-sm);
	}

	.cpp-app .cpp-stats,
	.cpp-app .cpp-metric-grid,
	.cpp-app .cpp-summary-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.cpp-app .cpp-button-row,
	.cpp-app .cpp-actions,
	.cpp-app .cpp-form-actions {
		align-items: stretch;
		flex-direction: column;
	}

	.cpp-app .cpp-button-row > *,
	.cpp-app .cpp-actions > *,
	.cpp-app .cpp-form-actions > * {
		width: 100%;
	}

	.cpp-app .cpp-otp,
	.cpp-app .cpp-otp-group {
		gap: 5px;
	}

	.cpp-app .cpp-otp input,
	.cpp-app input.cpp-otp-input {
		width: 43px;
		height: 52px;
	}

	.cpp-app .cpp-empty,
	.cpp-app .cpp-empty-state,
	.cpp-app .cpp-error-state {
		min-height: 210px;
		padding: 26px 18px;
	}

	.cpp-app .cpp-modal-header,
	.cpp-app .cpp-modal-body,
	.cpp-app .cpp-modal-footer,
	.cpp-app .cpp-dialog-header,
	.cpp-app .cpp-dialog-body,
	.cpp-app .cpp-dialog-footer {
		padding: 18px;
	}

	.cpp-app .cpp-modal-footer,
	.cpp-app .cpp-dialog-footer {
		align-items: stretch;
		flex-direction: column-reverse;
	}
}

/* Large-text and browser-zoom containment.
 *
 * Text is deliberately allowed to increase each component's block size.
 * Containers may scroll when their content is intrinsically wider (tables,
 * document identifiers), but text must never paint over an adjacent section.
 */
.cpp-app,
.cpp-app *,
.cpp-app *::before,
.cpp-app *::after {
	box-sizing: border-box;
}

.cpp-app :where(
	article, section, aside, header, footer, main, nav, form, fieldset, details,
	dialog, div, dl, dt, dd, ul, ol, li, table, thead, tbody, tfoot, tr, th, td
) {
	min-width: 0;
}

.cpp-app :where(
	h1, h2, h3, h4, h5, h6, p, li, dt, dd, th, td, label, legend, summary,
	small, strong, em, a, code, pre, blockquote
) {
	max-width: 100%;
	overflow-wrap: break-word;
	word-break: normal;
}

.cpp-app :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
	width: 100%;
	max-width: 100%;
	height: auto;
	min-height: 44px;
	line-height: 1.4;
}

.cpp-app :where(
	button:not(.cpp-icon-button),
	.cpp-button,
	.cpp-status-guide-button,
	[role="button"]:not(.cpp-icon-button)
) {
	max-width: 100%;
	height: auto;
	min-height: 42px;
	white-space: normal;
	line-height: 1.35;
	overflow-wrap: break-word;
}

.cpp-app :where(
	.cpp-form-actions, .cpp-command-actions, .cpp-driver-doc-actions,
	.cpp-section-header, .cpp-table-actions, .cpp-toolbar, .cpp-bulk-bar,
	.cpp-drawer-status, .cpp-note footer, .cpp-otp-test-control,
	.cpp-fmcsa-rating-card
) {
	flex-wrap: wrap;
	align-items: flex-start;
}

.cpp-app :where(.cpp-chip, .cpp-badge, .cpp-pill, .cpp-status-chip, .cpp-eyebrow) {
	max-width: 100%;
	height: auto;
	white-space: normal;
	overflow-wrap: break-word;
}

.cpp-app :where(.cpp-table-wrap, .cpp-matrix-wrap, .cpp-safer-matrix) {
	max-width: 100%;
	overflow-x: auto;
	overflow-y: visible;
	-webkit-overflow-scrolling: touch;
}

.cpp-app :where(table, th, td) {
	white-space: normal;
}

.cpp-app :where(pre, code) {
	white-space: pre-wrap;
	word-break: break-word;
}

.cpp-app :where(img, svg, video, canvas) {
	max-width: 100%;
}

.cpp-app :where(
	.cpp-modal-card, .cpp-dialog-card, .cpp-drawer, .cpp-auth-step,
	.cpp-panel, .cpp-card, .cpp-notice-card
) {
	height: auto;
	max-width: 100%;
}

.cpp-app :where(.cpp-modal-card, .cpp-dialog-card, .cpp-drawer) {
	overflow-y: auto;
	overscroll-behavior: contain;
}

@media (max-width: 900px) {
	.cpp-app :where(
		.cpp-form-grid, .cpp-settings-grid, .cpp-overview-grid,
		.cpp-access-assignment-grid, .cpp-access-option-grid
	) {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Standalone shortcode dashboards and application-specific components. */
.cpp-app.cpp-standalone {
	width: 100%;
	max-width: none;
	min-height: min(920px, calc(100dvh - 24px));
	margin: 0;
}

.cpp-app .cpp-header-actions,
.cpp-app .cpp-account-menu,
.cpp-app .cpp-inline-form,
.cpp-app .cpp-filter-bar,
.cpp-app .cpp-copy-row,
.cpp-app .cpp-slot-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
}

.cpp-app .cpp-header-actions > a {
	font-size: 0.78rem;
	text-decoration: none;
}

.cpp-app .cpp-dashboard-main {
	display: flex;
	min-height: 0;
	flex-direction: column;
	gap: 28px;
}

/*
 * The header band.
 *
 * Full-bleed by design: it cancels the work area's horizontal inset so the
 * white band and its rule run the whole width of the panel, instead of
 * stopping short and butting into the content card below. Its text is still
 * aligned with that content, because the inline padding grows to whatever
 * centring the measure needs — no wrapper element required.
 *
 * It is also the top edge of the scroll area, so it owns the vertical padding
 * that used to be missing and made the eyebrow sit against the window.
 */
.cpp-app .cpp-dashboard-topbar {
	position: sticky;
	z-index: 20;
	top: 0;
	display: flex;
	min-height: 76px;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	margin-block: 0;
	margin-inline: calc(var(--cpp-main-inset, 32px) * -1);
	padding-block: 20px;
	/*
	 * Re-add the inset the negative margin just cancelled, plus whatever the
	 * measure needs to stay centred. `100%` resolves against the work area's
	 * content width — the same box the content below is centred in — so the
	 * header text lines up with that content exactly.
	 */
	padding-inline: calc(var(--cpp-main-inset, 32px) + max(0px, (100% - var(--cpp-main-measure, 1320px)) / 2));
	border-bottom: 1px solid var(--cpp-line);
	background: var(--cpp-surface);
}

.cpp-app .cpp-dashboard-topbar :where(p, strong, small, span) {
	margin: 0;
}

.cpp-app .cpp-dashboard-topbar > div:first-child > strong {
	display: block;
	color: var(--cpp-navy);
	font-size: 1.08rem;
}

.cpp-app .cpp-account-menu > span {
	display: grid;
	color: var(--cpp-charcoal);
	font-size: 0.82rem;
	font-weight: 750;
	line-height: 1.35;
	text-align: right;
}

.cpp-app .cpp-account-menu small {
	color: var(--cpp-muted);
	font-size: 0.68rem;
	font-weight: 650;
}

.cpp-app .cpp-form,
.cpp-app form.cpp-form {
	display: grid;
	gap: 22px;
}

.cpp-app :where(input:not([type]), input[type="time"]),
.cpp-app .cpp-copy-row input {
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 11px 14px;
	border: 1px solid var(--cpp-line-strong);
	border-radius: var(--cpp-radius-sm);
	background: #fff;
	box-shadow: 0 1px 1px rgba(14, 27, 47, 0.02) inset;
	color: var(--cpp-ink);
	font-size: 0.92rem;
	line-height: 1.35;
	transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

.cpp-app input[type="file"] {
	width: 100%;
	min-height: 54px;
	padding: 7px;
	border: 1px dashed var(--cpp-line-strong);
	border-radius: var(--cpp-radius-sm);
	background: var(--cpp-soft);
	color: var(--cpp-muted);
}

.cpp-app input[type="file"]::file-selector-button {
	min-height: 38px;
	margin-right: 12px;
	padding: 8px 14px;
	border: 0;
	border-radius: 9px;
	background: var(--cpp-navy);
	color: #fff;
	font-weight: 750;
	cursor: pointer;
}

.cpp-app .cpp-form-actions {
	gap: 14px;
	margin-top: 2px;
	padding-top: 14px;
	border-top: 1px solid var(--cpp-line);
}

.cpp-app .cpp-section-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 28px;
}

.cpp-app .cpp-section-header h1 {
	margin-bottom: 8px;
	font-size: clamp(2rem, 3.2vw, 3.25rem);
}

.cpp-app .cpp-section-header p:last-child {
	max-width: 760px;
	margin-bottom: 0;
	color: var(--cpp-muted);
}

.cpp-app .cpp-two-column {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.75fr);
	gap: 24px;
	align-items: start;
	margin-block: 24px 34px;
}

.cpp-app .cpp-metric-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin-bottom: 26px;
}

.cpp-app .cpp-metric-grid > :where(article, button) {
	display: grid;
	gap: 5px;
	min-height: 112px;
	align-content: center;
	padding: 22px;
	border: 1px solid var(--cpp-line);
	border-radius: var(--cpp-radius);
	background: #fff;
	box-shadow: var(--cpp-shadow-sm);
	color: var(--cpp-ink);
	text-align: left;
}

.cpp-app .cpp-metric-grid > button {
	cursor: pointer;
}

.cpp-app .cpp-metric-grid > :where(article, button) strong {
	color: var(--cpp-navy);
	font-size: 1.8rem;
	line-height: 1;
}

.cpp-app .cpp-metric-grid > :where(article, button) span {
	color: var(--cpp-muted);
	font-size: 0.76rem;
	font-weight: 750;
	text-transform: uppercase;
	letter-spacing: 0.055em;
}

.cpp-app .cpp-filter-bar,
.cpp-app .cpp-inline-form {
	align-items: end;
	margin-bottom: 24px;
	padding: 18px;
	border: 1px solid var(--cpp-line);
	border-radius: var(--cpp-radius);
	background: #fff;
}

.cpp-app .cpp-filter-bar .cpp-field,
.cpp-app .cpp-inline-form .cpp-field {
	min-width: min(260px, 100%);
	flex: 1 1 220px;
}

.cpp-app .cpp-subnav {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	margin-bottom: 28px;
	padding: 6px;
	border: 1px solid var(--cpp-line);
	border-radius: 15px;
	background: #fff;
	scrollbar-width: thin;
}

.cpp-app .cpp-workspace-breadcrumb {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 18px;
	color: var(--cpp-muted);
	font-size: .78rem;
}

.cpp-app .cpp-workspace-breadcrumb button {
	padding: 0;
	border: 0;
	background: none;
	color: var(--cpp-orange-ink);
	font: inherit;
	cursor: pointer;
}

.cpp-app .cpp-workspace-breadcrumb button:hover,
.cpp-app .cpp-workspace-breadcrumb button:focus-visible {
	text-decoration: underline;
}

.cpp-app .cpp-workspace-breadcrumb span:last-child {
	min-width: 0;
	overflow: hidden;
	color: var(--cpp-ink);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cpp-app .cpp-workspace-heading {
	margin-bottom: 18px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--cpp-line);
}

.cpp-app .cpp-subnav button {
	display: inline-flex;
	min-height: 42px;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--cpp-muted);
	font-size: 0.78rem;
	font-weight: 750;
	white-space: nowrap;
	cursor: pointer;
}

.cpp-app .cpp-subnav button.is-active {
	background: var(--cpp-navy);
	color: #fff;
}

.cpp-app .cpp-row-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 8px;
}

.cpp-app .cpp-row-actions > button,
.cpp-app .cpp-link-danger {
	display: inline-flex;
	min-height: 34px;
	align-items: center;
	justify-content: center;
	padding: 6px 12px;
	border: 1px solid var(--cpp-line);
	border-radius: 999px;
	background: #fff;
	color: var(--cpp-navy);
	font-size: 0.74rem;
	font-weight: 750;
	line-height: 1.2;
	cursor: pointer;
}

.cpp-app .cpp-row-actions > button.is-danger,
.cpp-app .cpp-link-danger {
	border-color: #ecc7c3;
	background: var(--cpp-danger-bg);
	color: var(--cpp-danger);
}

.cpp-app :where(.cpp-table, .cpp-data-table) td > small,
.cpp-app :where(.cpp-table, .cpp-data-table) td > strong {
	display: block;
}

.cpp-app :where(.cpp-table, .cpp-data-table) td > small {
	margin-top: 4px;
	color: var(--cpp-muted);
}

.cpp-app .cpp-form-error,
.cpp-app .cpp-callout {
	padding: 14px 16px;
	border: 1px solid #ecc7c3;
	border-radius: var(--cpp-radius-sm);
	background: var(--cpp-danger-bg);
	color: var(--cpp-danger);
}

.cpp-app .cpp-callout {
	margin-bottom: 22px;
	border-color: #c8daee;
	background: var(--cpp-info-bg);
	color: var(--cpp-ink);
}

.cpp-app .cpp-callout--success {
	border-color: #b7dcc6;
	background: var(--cpp-success-bg);
}

.cpp-app :where(.cpp-form-error, .cpp-callout) :last-child {
	margin-bottom: 0;
}

.cpp-app .cpp-editor {
	margin-bottom: 26px;
	border-color: rgba(232, 115, 74, 0.55);
	box-shadow: 0 16px 44px rgba(14, 27, 47, 0.1);
}

.cpp-app .cpp-pack-selector {
	margin: 0;
	padding: 20px;
	border: 1px solid var(--cpp-line);
	border-radius: var(--cpp-radius);
}

.cpp-app .cpp-pack-selector legend {
	padding-inline: 8px;
	font-weight: 800;
}

.cpp-app .cpp-pack-selector > p {
	color: var(--cpp-muted);
	font-size: 0.8rem;
}

.cpp-app .cpp-pack-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.cpp-app .cpp-pack-option {
	display: flex;
	gap: 10px;
	padding: 13px;
	border: 1px solid var(--cpp-line);
	border-radius: var(--cpp-radius-sm);
	background: var(--cpp-soft);
}

.cpp-app .cpp-pack-option span,
.cpp-app .cpp-pack-option small {
	display: block;
}

.cpp-app .cpp-pack-option small {
	margin-top: 3px;
	color: var(--cpp-muted);
	font-weight: 550;
}

.cpp-app .cpp-carrier-confirm {
	display: grid;
	grid-template-columns: minmax(200px, 0.75fr) minmax(0, 1.25fr);
	gap: 22px;
	margin-block: 24px;
	padding: 22px;
	border: 1px solid #b7dcc6;
	border-radius: var(--cpp-radius);
	background: linear-gradient(135deg, var(--cpp-success-bg), #fff 70%);
}

.cpp-app .cpp-carrier-confirm :where(h2, p, dl) {
	margin-bottom: 0;
}

.cpp-app .cpp-carrier-confirm dl {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.cpp-app .cpp-carrier-confirm dt,
.cpp-app .cpp-carrier-confirm dd {
	margin: 0;
}

.cpp-app .cpp-carrier-confirm dt {
	color: var(--cpp-muted);
	font-size: 0.67rem;
	font-weight: 750;
	text-transform: uppercase;
}

.cpp-app .cpp-carrier-confirm dd {
	font-size: 0.82rem;
	font-weight: 700;
}

.cpp-app .cpp-name-results {
	margin-top: 30px;
	padding-top: 26px;
	border-top: 1px solid var(--cpp-line);
}

.cpp-app .cpp-name-results > header {
	margin-bottom: 18px;
}

.cpp-app .cpp-name-results > header :where(h2, p) {
	margin-bottom: 5px;
}

.cpp-app .cpp-carrier-result-grid {
	display: grid;
	gap: 14px;
}

.cpp-app .cpp-carrier-result {
	display: grid;
	grid-template-columns: minmax(220px, 1.2fr) minmax(260px, 1fr) auto;
	gap: 18px;
	align-items: center;
	padding: 19px 20px;
	border: 1px solid #d9e0e7;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 8px 24px rgba(14, 27, 47, 0.055);
}

.cpp-app .cpp-carrier-result:hover {
	border-color: #b7c4d0;
	box-shadow: 0 12px 30px rgba(14, 27, 47, 0.09);
}

.cpp-app .cpp-carrier-result__main :where(h3, p) {
	margin-bottom: 4px;
}

.cpp-app .cpp-carrier-result__main > span {
	color: var(--cpp-muted);
	font-size: 0.78rem;
}

.cpp-app .cpp-carrier-result__status {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.cpp-app .cpp-carrier-result__status > span {
	display: grid;
	justify-items: start;
	gap: 6px;
}

.cpp-app .cpp-carrier-result__status small {
	color: var(--cpp-muted);
	font-size: 0.64rem;
	font-weight: 750;
	letter-spacing: 0.035em;
	text-transform: uppercase;
}

.cpp-app .cpp-fmcsa-preview {
	margin-bottom: 26px;
	border: 1px solid var(--cpp-line);
	border-radius: var(--cpp-radius);
	background: var(--cpp-soft);
}

.cpp-app .cpp-fmcsa-preview > summary {
	padding: 16px 20px;
	color: var(--cpp-navy);
	font-weight: 800;
	cursor: pointer;
}

.cpp-app .cpp-fmcsa-preview .cpp-fmcsa-dashboard {
	margin: 0 12px 12px;
}

/* Complete FMCSA data presentation shared by application, portal, and console. */
.cpp-app .cpp-fmcsa-dashboard {
	margin-top: 30px;
	padding: clamp(20px, 3vw, 34px);
	border: 1px solid #ccd5df;
	border-radius: 24px;
	background: #f8fafc;
	box-shadow: 0 18px 44px rgba(14, 27, 47, 0.08);
}

.cpp-app .cpp-fmcsa-hero {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	padding-bottom: 24px;
	border-bottom: 1px solid #d9e0e7;
}

.cpp-app .cpp-fmcsa-hero h2 {
	margin-bottom: 6px;
	font-size: clamp(1.55rem, 2.4vw, 2.4rem);
}

.cpp-app .cpp-fmcsa-hero p {
	margin: 0;
	color: var(--cpp-muted);
}

.cpp-app .cpp-fmcsa-identity {
	display: grid;
	justify-items: end;
	gap: 7px;
	min-width: 190px;
}

.cpp-app .cpp-fmcsa-identity strong {
	color: var(--cpp-navy);
	font-size: 1rem;
}

.cpp-app .cpp-fmcsa-identity > span:not(.cpp-chip) {
	color: var(--cpp-muted);
	font-size: 0.78rem;
}

.cpp-app .cpp-fmcsa-address {
	display: grid;
	grid-template-columns: 0.7fr 1.5fr 0.8fr;
	gap: 16px;
	margin: 18px 0;
	padding: 14px 16px;
	border: 1px solid #d9e0e7;
	border-radius: 13px;
	background: #fff;
	font-size: 0.78rem;
}

.cpp-app .cpp-fmcsa-address span {
	color: var(--cpp-muted);
}

.cpp-app .cpp-fmcsa-authority-basis {
	margin: 18px 0;
	padding: 16px 18px;
	border: 1px solid var(--cpp-line);
	border-left-width: 5px;
	border-radius: 13px;
	background: #fff;
}

.cpp-app .cpp-fmcsa-authority-basis.is-success { border-left-color: var(--cpp-success); }
.cpp-app .cpp-fmcsa-authority-basis.is-warning { border-left-color: #c68a00; }
.cpp-app .cpp-fmcsa-authority-basis.is-danger { border-left-color: var(--cpp-danger); }
.cpp-app .cpp-fmcsa-authority-basis.is-neutral { border-left-color: var(--cpp-muted); }

.cpp-app .cpp-fmcsa-authority-basis :where(p, small) {
	display: block;
	margin: 4px 0 0;
	color: var(--cpp-muted);
	font-size: 0.76rem;
}

.cpp-app .cpp-fmcsa-source-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 18px;
}

.cpp-app .cpp-fmcsa-source-check {
	margin: 0 0 18px;
	padding: 13px 15px;
	border: 1px solid var(--cpp-line);
	border-radius: 13px;
	background: rgba(255, 255, 255, 0.72);
}

.cpp-app .cpp-fmcsa-source-check > summary {
	cursor: pointer;
	color: var(--cpp-navy);
	font-size: 0.78rem;
	font-weight: 760;
}

.cpp-app .cpp-fmcsa-source-check > p {
	margin: 10px 0;
	color: var(--cpp-muted);
	font-size: 0.75rem;
}

.cpp-app .cpp-fmcsa-source-check .cpp-fmcsa-source-actions {
	margin-bottom: 0;
}

.cpp-app .cpp-fmcsa-group-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin-top: 18px;
}

.cpp-app .cpp-fmcsa-group {
	padding: 20px;
	border: 1px solid #d9e0e7;
	border-radius: 16px;
	background: #fff;
}

.cpp-app .cpp-fmcsa-group > header {
	min-height: 66px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--cpp-line);
}

.cpp-app .cpp-fmcsa-group h3 {
	margin-bottom: 5px;
	font-size: 1rem;
}

.cpp-app .cpp-fmcsa-group header p {
	margin: 0;
	color: var(--cpp-muted);
	font-size: 0.73rem;
}

.cpp-app .cpp-fmcsa-facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 16px;
	margin: 0;
}

.cpp-app .cpp-fmcsa-fact {
	min-width: 0;
	padding: 12px 0;
	border-bottom: 1px solid #edf0f3;
}

.cpp-app .cpp-fmcsa-fact dt,
.cpp-app .cpp-fmcsa-fact dd {
	margin: 0;
}

.cpp-app .cpp-fmcsa-fact dt {
	color: var(--cpp-muted);
	font-size: 0.66rem;
	font-weight: 750;
	text-transform: uppercase;
	letter-spacing: 0.035em;
}

.cpp-app .cpp-fmcsa-fact dd {
	overflow-wrap: anywhere;
	color: var(--cpp-navy);
	font-size: 0.84rem;
	font-weight: 750;
}

.cpp-app .cpp-fmcsa-fact.is-success dd { color: var(--cpp-success); }
.cpp-app .cpp-fmcsa-fact.is-warning dd { color: var(--cpp-warning); }
.cpp-app .cpp-fmcsa-fact.is-danger dd { color: var(--cpp-danger); }
.cpp-app .cpp-status--success { border-color: #abd4bb; background: var(--cpp-success-bg); color: var(--cpp-success); }
.cpp-app .cpp-status--warning { border-color: #ead28b; background: var(--cpp-warning-bg); color: var(--cpp-warning); }
.cpp-app .cpp-status--danger { border-color: #ecc7c3; background: var(--cpp-danger-bg); color: var(--cpp-danger); }
.cpp-app .cpp-status--neutral { border-color: var(--cpp-line); background: var(--cpp-soft); color: var(--cpp-muted); }

.cpp-app .cpp-fmcsa-details {
	margin-top: 12px;
	border: 1px solid #d9e0e7;
	border-radius: 14px;
	background: #fff;
}

.cpp-app .cpp-fmcsa-details > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 15px 18px;
	font-weight: 800;
	cursor: pointer;
}

.cpp-app .cpp-fmcsa-details > summary small {
	color: var(--cpp-muted);
	font-weight: 650;
}

.cpp-app .cpp-fmcsa-record-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	padding: 0 16px 16px;
}

.cpp-app .cpp-fmcsa-record {
	padding: 15px;
	border: 1px solid var(--cpp-line);
	border-radius: 12px;
	background: #fbfcfd;
}

.cpp-app .cpp-fmcsa-record > strong {
	display: block;
	margin-bottom: 10px;
	color: var(--cpp-orange-ink);
	font-size: 0.75rem;
}

.cpp-app .cpp-fmcsa-record dl {
	display: grid;
	gap: 7px;
	margin: 0;
}

.cpp-app .cpp-fmcsa-record dl > div {
	display: grid;
	grid-template-columns: minmax(100px, 0.8fr) minmax(0, 1.2fr);
	gap: 10px;
	font-size: 0.72rem;
}

.cpp-app .cpp-fmcsa-record dt,
.cpp-app .cpp-fmcsa-record dd {
	margin: 0;
	overflow-wrap: anywhere;
}

.cpp-app .cpp-fmcsa-record dt { color: var(--cpp-muted); }
.cpp-app .cpp-fmcsa-record dd { color: var(--cpp-navy); font-weight: 700; }

.cpp-app .cpp-fmcsa-footer {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(180px, 0.4fr);
	gap: 18px;
	margin-top: 18px;
	padding: 16px 0;
	border-top: 1px solid #d9e0e7;
	border-bottom: 1px solid #d9e0e7;
	font-size: 0.74rem;
}

.cpp-app .cpp-fmcsa-footer > div {
	display: grid;
	gap: 7px;
}

.cpp-app .cpp-fmcsa-coverage {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.cpp-app .cpp-fmcsa-coverage span {
	padding: 4px 8px;
	border: 1px solid #ccd5df;
	border-radius: 999px;
	background: #fff;
	color: var(--cpp-muted);
	font-size: 0.65rem;
	font-weight: 700;
}

.cpp-app .cpp-fmcsa-disclaimer {
	margin: 14px 0 0;
	color: var(--cpp-muted);
	font-size: 0.7rem;
}

/* Owner-only registration testing notice. */
.cpp-app .cpp-test-mode-banner {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 16px;
	align-items: center;
	max-width: 980px;
	margin: 0 auto 22px;
	padding: 16px 18px;
	border: 1px solid #e4bd55;
	border-radius: 16px;
	background: linear-gradient(135deg, #fff9e8, #fff4cf);
	box-shadow: 0 14px 34px rgba(91, 65, 0, .09);
	color: #5e4608;
}
.cpp-app .cpp-test-mode-banner[hidden] { display: none !important; }
.cpp-app .cpp-test-mode-banner__icon { display: grid; place-items: center; min-width: 48px; height: 32px; padding: 0 9px; border-radius: 999px; background: #7a5900; color: #fff; font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.cpp-app .cpp-test-mode-banner :where(strong, p) { margin: 0; }
.cpp-app .cpp-test-mode-banner p { margin-top: 4px; font-size: 13px; line-height: 1.55; }
.cpp-app .cpp-test-mode-banner code { padding: 3px 7px; border-radius: 7px; background: #fff; color: #2e2306; font-size: 16px; font-weight: 900; letter-spacing: .12em; }

/* Rich in-house SAFER/QCMobile Snapshot. */
.cpp-app .cpp-fmcsa-dashboard--rich { gap: 0; padding: 0; overflow: hidden; }
.cpp-app .cpp-fmcsa-dashboard--rich > .cpp-fmcsa-hero { padding: clamp(24px, 4vw, 38px); margin: 0; border-radius: 0; background: linear-gradient(135deg, #101d31 0%, #192b45 68%, #243a57 100%); color: #fff; }
.cpp-app .cpp-fmcsa-dashboard--rich .cpp-fmcsa-hero h2,
.cpp-app .cpp-fmcsa-dashboard--rich .cpp-fmcsa-hero p,
.cpp-app .cpp-fmcsa-dashboard--rich .cpp-fmcsa-identity strong,
.cpp-app .cpp-fmcsa-dashboard--rich .cpp-fmcsa-identity > span:not(.cpp-chip) { color: #fff; }
.cpp-app .cpp-fmcsa-source-ribbon { display: flex; align-items: center; gap: 10px; padding: 14px clamp(20px, 4vw, 38px); border-bottom: 1px solid var(--cpp-border); background: #f7f9fb; }
.cpp-app .cpp-fmcsa-source-ribbon p { margin: 0 0 0 auto; max-width: 620px; color: var(--cpp-muted); font-size: 12px; line-height: 1.5; text-align: right; }
.cpp-app .cpp-fmcsa-tabs { display: flex; gap: 6px; padding: 18px clamp(20px, 4vw, 38px) 0; overflow-x: auto; background: #fff; scrollbar-width: thin; }
.cpp-app .cpp-fmcsa-tabs button { flex: 0 0 auto; min-height: 42px; padding: 0 15px; border: 1px solid var(--cpp-border); border-radius: 11px 11px 0 0; background: #f7f8fa; color: var(--cpp-muted); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.cpp-app .cpp-fmcsa-tabs button:hover { color: var(--cpp-navy); background: #fff; }
.cpp-app .cpp-fmcsa-tabs button.is-active { border-color: var(--cpp-orange); background: var(--cpp-orange); color: #fff; }
.cpp-app .cpp-fmcsa-tab-panels { padding: clamp(22px, 4vw, 38px); background: #fff; }
.cpp-app .cpp-fmcsa-tab-panel[hidden] { display: none !important; }
.cpp-app .cpp-fmcsa-tab-panel:focus { outline: none; }
.cpp-app .cpp-fmcsa-tab-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 22px; }
.cpp-app .cpp-fmcsa-tab-header :where(p, h3) { margin: 0; }
.cpp-app .cpp-fmcsa-tab-header h3 { margin-top: 5px; color: var(--cpp-navy); font-size: clamp(21px, 3vw, 30px); }
.cpp-app .cpp-fmcsa-tab-header > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--cpp-orange-soft); color: var(--cpp-orange-dark); font-size: 11px; font-weight: 900; }
.cpp-app .cpp-fmcsa-tab-panel .cpp-fmcsa-group-grid { margin-top: 20px; }
.cpp-app .cpp-fmcsa-tab-panel .cpp-fmcsa-group { margin-bottom: 18px; }

.cpp-app .cpp-safer-stat-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.cpp-app .cpp-safer-stat-strip article { display: flex; flex-direction: column; gap: 5px; min-height: 88px; padding: 15px; border: 1px solid var(--cpp-border); border-radius: 14px; background: #f8fafb; }
.cpp-app .cpp-safer-stat-strip span { color: var(--cpp-muted); font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .045em; }
.cpp-app .cpp-safer-stat-strip strong { color: var(--cpp-navy); font-size: 18px; line-height: 1.25; }
.cpp-app .cpp-safer-matrix { margin-top: 18px; border: 1px solid var(--cpp-border); border-radius: 16px; overflow: hidden; background: #fff; }
.cpp-app .cpp-safer-matrix > header { padding: 17px 19px; border-bottom: 1px solid var(--cpp-border); background: #f8fafb; }
.cpp-app .cpp-safer-matrix > header :where(h4, p) { margin: 0; }
.cpp-app .cpp-safer-matrix > header h4 { color: var(--cpp-navy); font-size: 15px; }
.cpp-app .cpp-safer-matrix > header p { margin-top: 4px; color: var(--cpp-muted); font-size: 12px; }
.cpp-app .cpp-safer-matrix table { width: 100%; min-width: 590px; border-collapse: collapse; }
.cpp-app .cpp-safer-matrix :where(th, td) { padding: 12px 14px; border-bottom: 1px solid #e9edf1; text-align: center; font-size: 12px; }
.cpp-app .cpp-safer-matrix thead th { background: #16263d; color: #fff; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
.cpp-app .cpp-safer-matrix tbody th { background: #f7f9fb; color: var(--cpp-navy); text-align: left; }
.cpp-app .cpp-safer-matrix tbody td { color: var(--cpp-navy); font-weight: 800; }
.cpp-app .cpp-safer-matrix tbody tr:last-child :where(th, td) { border-bottom: 0; }

.cpp-app .cpp-safer-tags { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.cpp-app .cpp-safer-tag-group { padding: 16px; border: 1px solid var(--cpp-border); border-radius: 14px; background: #f8fafb; }
.cpp-app .cpp-safer-tag-group > strong { display: block; margin-bottom: 10px; color: var(--cpp-navy); font-size: 12px; }
.cpp-app .cpp-safer-tag-group > div { display: flex; flex-wrap: wrap; gap: 6px; }
.cpp-app .cpp-safer-tag-group span { padding: 6px 9px; border-radius: 999px; background: #fff; border: 1px solid var(--cpp-border); color: var(--cpp-navy); font-size: 11px; font-weight: 750; }
.cpp-app .cpp-safer-tag-group em { color: var(--cpp-muted); font-size: 11px; line-height: 1.5; }
.cpp-app .cpp-fmcsa-rating-card { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 18px; padding: 22px; border-left: 5px solid var(--cpp-warning); border-radius: 14px; background: #f8fafb; }
.cpp-app .cpp-fmcsa-rating-card.success { border-left-color: var(--cpp-success); }
.cpp-app .cpp-fmcsa-rating-card.danger { border-left-color: var(--cpp-danger); }
.cpp-app .cpp-fmcsa-rating-card span { display: block; color: var(--cpp-muted); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.cpp-app .cpp-fmcsa-rating-card strong { display: block; margin-top: 5px; color: var(--cpp-navy); font-size: 24px; }
.cpp-app .cpp-fmcsa-rating-card p { max-width: 520px; margin: 0; color: var(--cpp-muted); font-size: 12px; line-height: 1.55; }
.cpp-app .cpp-fmcsa-coverage-note { margin-bottom: 16px; padding: 16px 18px; border-radius: 14px; background: var(--cpp-orange-soft); color: var(--cpp-navy); }
.cpp-app .cpp-fmcsa-coverage-note :where(strong, p) { margin: 0; }
.cpp-app .cpp-fmcsa-coverage-note p { margin-top: 4px; color: var(--cpp-muted); font-size: 12px; }
.cpp-app .cpp-fmcsa-dashboard--rich > .cpp-fmcsa-footer,
.cpp-app .cpp-fmcsa-dashboard--rich > .cpp-alert,
.cpp-app .cpp-fmcsa-dashboard--rich > .cpp-fmcsa-disclaimer { margin: 0 clamp(20px, 4vw, 38px) 24px; }

.cpp-app .cpp-otp-test-control { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 18px 0; padding: 17px 18px; border: 1px solid var(--cpp-border); border-radius: 14px; background: #f7f9fb; }
.cpp-app .cpp-otp-test-control.is-active { border-color: #e0b53e; background: #fff8df; }
.cpp-app .cpp-otp-test-control :where(strong, p) { margin: 0; }
.cpp-app .cpp-otp-test-control p { margin-top: 4px; color: var(--cpp-muted); font-size: 12px; line-height: 1.5; }

@media (max-width: 820px) {
	.cpp-app .cpp-safer-stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cpp-app .cpp-safer-tags { grid-template-columns: 1fr; }
	.cpp-app .cpp-fmcsa-source-ribbon,
	.cpp-app .cpp-fmcsa-rating-card,
	.cpp-app .cpp-otp-test-control { align-items: flex-start; flex-direction: column; }
	.cpp-app .cpp-fmcsa-source-ribbon p { margin-left: 0; text-align: left; }
}
@media (max-width: 560px) {
	.cpp-app .cpp-test-mode-banner { grid-template-columns: auto minmax(0, 1fr); }
	.cpp-app .cpp-test-mode-banner .cpp-button { grid-column: 1 / -1; width: 100%; }
	.cpp-app .cpp-safer-stat-strip { grid-template-columns: 1fr; }
	.cpp-app .cpp-fmcsa-tab-panels { padding: 20px 14px; }
	.cpp-app .cpp-fmcsa-tabs { padding-inline: 14px; }
}

/* Document center and slide-over carrier profile. */
.cpp-app .cpp-status-summary {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin-bottom: 28px;
}

.cpp-app .cpp-status-summary > div {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px;
	border: 1px solid var(--cpp-line);
	border-radius: 13px;
	background: #fff;
}

.cpp-app .cpp-document-group {
	margin-top: 36px;
}

.cpp-app .cpp-document-group > header {
	margin-bottom: 16px;
}

.cpp-app .cpp-document-slot {
	display: grid;
	gap: 15px;
	min-height: 100%;
	padding: 20px;
	border-left-width: 5px;
}

.cpp-app .cpp-document-slot > header,
.cpp-app .cpp-document-slot > footer {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.cpp-app .cpp-document-slot > footer {
	align-items: center;
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid var(--cpp-line);
}

.cpp-app .cpp-slot-scope,
.cpp-app .cpp-missing-note {
	margin: 0;
	color: var(--cpp-muted);
	font-size: 0.7rem;
}

.cpp-app .cpp-slot-frequency {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 7px;
	margin: 0;
	color: var(--cpp-ink);
	font-size: 0.74rem;
}

.cpp-app .cpp-slot-frequency span {
	color: var(--cpp-muted);
	font-size: 0.64rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.cpp-app .cpp-document-meta {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin: 0;
}

.cpp-app .cpp-document-meta dt,
.cpp-app .cpp-document-meta dd {
	margin: 0;
	font-size: 0.72rem;
}

.cpp-app .cpp-document-meta dt { color: var(--cpp-muted); }
.cpp-app .cpp-document-meta dd { overflow-wrap: anywhere; font-weight: 700; }

.cpp-app .cpp-drawer-layer {
	position: fixed;
	z-index: 100020;
	inset: 0;
}

.cpp-app .cpp-drawer-backdrop {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	background: rgba(14, 27, 47, 0.58);
	cursor: pointer;
}

.cpp-app .cpp-drawer {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(820px, 92vw);
	overflow-y: auto;
	background: var(--cpp-soft);
	box-shadow: -20px 0 55px rgba(14, 27, 47, 0.22);
}

.cpp-app .cpp-drawer-header {
	position: sticky;
	z-index: 2;
	top: 0;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	padding: 24px clamp(20px, 4vw, 36px);
	border-bottom: 1px solid var(--cpp-line);
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(12px);
}

.cpp-app .cpp-drawer-header :where(h2, p) { margin-bottom: 4px; }
.cpp-app .cpp-drawer-body { display: grid; gap: 22px; padding: 28px clamp(20px, 4vw, 36px) 48px; }
.cpp-app .cpp-drawer-status { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cpp-app .cpp-notes { display: grid; gap: 10px; margin-top: 16px; }
.cpp-app .cpp-note footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cpp-app .cpp-note-actions { display: inline-flex; align-items: center; gap: 10px; }
.cpp-app .cpp-note-actions button { border: 0; background: transparent; color: var(--cpp-muted); cursor: pointer; }
.cpp-app .cpp-danger-zone { padding: 18px; border: 1px solid #ecc7c3; border-radius: var(--cpp-radius); background: var(--cpp-danger-bg); }
.cpp-app .cpp-danger-zone summary { color: var(--cpp-danger); font-weight: 800; cursor: pointer; }
.cpp-app .cpp-danger-zone form { margin-top: 16px; }

/* Deliberately not styled as a danger zone: moving a carrier to another address
   is a recoverable administrative act, not a destructive one. */
.cpp-app .cpp-contact-move { margin-top: 18px; padding: 16px 18px; border: 1px solid var(--cpp-line); border-radius: var(--cpp-radius); background: var(--cpp-soft); }
.cpp-app .cpp-contact-move summary { font-weight: 700; cursor: pointer; color: var(--cpp-ink); }
.cpp-app .cpp-contact-move > p { margin: 12px 0 0; font-size: 13px; line-height: 1.55; color: var(--cpp-muted); }
.cpp-app .cpp-contact-move form { margin-top: 16px; display: grid; gap: 12px; }
.cpp-app .cpp-contact-move .cpp-field-hint { margin: -4px 0 0; }

body.cpp-has-modal,
body.cpp-has-drawer {
	overflow: hidden;
}

.cpp-app .cpp-confirm-dialog {
	width: min(560px, 100%);
}

.cpp-app .cpp-confirm-dialog .cpp-form-actions {
	justify-content: flex-end;
}

.cpp-app .cpp-operation-result {
	position: relative;
	display: grid;
	gap: 10px;
	margin-bottom: 18px;
	padding: 16px 54px 16px 18px;
	border: 1px solid #b7dcc6;
	background: var(--cpp-success-bg);
	color: var(--cpp-ink);
}

.cpp-app .cpp-operation-result--warning {
	border-color: #ead28b;
	background: var(--cpp-warning-bg);
}

.cpp-app .cpp-operation-result > .cpp-icon-button {
	position: absolute;
	top: 9px;
	right: 9px;
}

.cpp-app .cpp-operation-result details {
	padding-top: 4px;
}

.cpp-app .cpp-operation-result summary {
	cursor: pointer;
	font-weight: 700;
}

.cpp-app .cpp-operation-result ul {
	margin: 10px 0 0;
	padding-left: 20px;
}

.cpp-app .cpp-version-history {
	border-top: 1px solid var(--cpp-line);
	border-bottom: 1px solid var(--cpp-line);
}

.cpp-app .cpp-version-history summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 0;
	cursor: pointer;
	font-weight: 750;
}

.cpp-app .cpp-version-history summary span {
	display: grid;
	min-width: 25px;
	height: 25px;
	place-items: center;
	border-radius: 999px;
	background: var(--cpp-soft);
	color: var(--cpp-muted);
	font-size: 0.72rem;
}

.cpp-app .cpp-version-history ol {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0 0 10px;
	list-style: none;
}

.cpp-app .cpp-version-history li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	border-top: 1px solid var(--cpp-line);
}

.cpp-app .cpp-version-history li div {
	display: grid;
	gap: 3px;
	min-width: 0;
}

.cpp-app .cpp-version-history li small {
	color: var(--cpp-muted);
}

@media (max-width: 1000px) {
	.cpp-app .cpp-two-column,
	.cpp-app .cpp-fmcsa-group-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.cpp-app .cpp-pack-grid,
	.cpp-app .cpp-fmcsa-record-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 760px) {
	.cpp-app .cpp-account-menu > span {
		display: none;
	}

	.cpp-app .cpp-header-actions > a {
		display: none;
	}

	.cpp-app .cpp-section-header,
	.cpp-app .cpp-fmcsa-hero {
		align-items: stretch;
		flex-direction: column;
	}

	.cpp-app .cpp-fmcsa-identity {
		justify-items: start;
	}

	.cpp-app .cpp-metric-grid,
	.cpp-app .cpp-status-summary {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cpp-app .cpp-carrier-confirm,
	.cpp-app .cpp-carrier-result,
	.cpp-app .cpp-fmcsa-address,
	.cpp-app .cpp-fmcsa-footer {
		grid-template-columns: minmax(0, 1fr);
	}

	.cpp-app .cpp-carrier-result {
		align-items: start;
	}

	.cpp-app .cpp-filter-bar,
	.cpp-app .cpp-inline-form {
		align-items: stretch;
		flex-direction: column;
	}

	.cpp-app .cpp-filter-bar > *,
	.cpp-app .cpp-inline-form > * {
		width: 100%;
	}
}

@media (max-width: 480px) {
	.cpp-app .cpp-dashboard-topbar {
		min-height: 58px;
		padding-block: 14px;
	}

	.cpp-app .cpp-dashboard-topbar > div:first-child > strong {
		font-size: 0.92rem;
	}

	.cpp-app .cpp-metric-grid,
	.cpp-app .cpp-status-summary,
	.cpp-app .cpp-carrier-confirm dl,
	.cpp-app .cpp-fmcsa-facts,
	.cpp-app .cpp-document-meta {
		grid-template-columns: minmax(0, 1fr);
	}

	.cpp-app .cpp-fmcsa-dashboard {
		padding: 16px;
		border-radius: 17px;
	}

	.cpp-app .cpp-row-actions {
		justify-content: flex-start;
	}

	.cpp-app .cpp-document-slot > footer {
		align-items: stretch;
		flex-direction: column;
	}

	.cpp-app .cpp-slot-actions > * {
		width: 100%;
	}

	.cpp-app .cpp-drawer {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cpp-app *,
	.cpp-app *::before,
	.cpp-app *::after {
		scroll-behavior: auto !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

@media (forced-colors: active) {
	.cpp-app :where(.cpp-status, .cpp-chip, .cpp-badge, [class*="cpp-status--"]) {
		border-color: currentColor;
	}

	.cpp-app :where(button, .cpp-button, .cpp-btn, input, select, textarea) {
		forced-color-adjust: auto;
	}
}

/* 1.5 onboarding and operations experience. */
.cpp-app.cpp-application {
	min-height: 860px;
	border-color: #d8dee6;
	border-radius: 28px;
	background: #f5f7fa;
	box-shadow: 0 24px 70px rgba(14, 27, 47, 0.11);
}

.cpp-app.cpp-application .cpp-app-header {
	min-height: 68px;
	justify-content: flex-end;
	padding: 12px clamp(22px, 4vw, 54px);
	border-color: #e2e7ec;
}

.cpp-app.cpp-application .cpp-app-header .cpp-header-actions {
	justify-content: flex-end;
}

.cpp-app .cpp-header-help {
	display: inline-flex;
	min-height: 38px;
	align-items: center;
	padding: 7px 15px;
	border: 1px solid var(--cpp-line);
	border-radius: 999px;
	background: #fff;
	color: var(--cpp-navy);
}

.cpp-app .cpp-onboarding-layout {
	min-height: 778px;
	grid-template-columns: minmax(360px, 0.82fr) minmax(560px, 1.48fr);
}

.cpp-app .cpp-onboarding-aside {
	display: flex;
	min-width: 0;
	flex-direction: column;
	padding: clamp(38px, 5vw, 72px);
	background:
		radial-gradient(circle at 110% 12%, rgba(232, 115, 74, 0.23), transparent 35%),
		linear-gradient(155deg, #0e1b2f 0%, #132642 55%, #0b1728 100%);
}

.cpp-app .cpp-onboarding-aside::after {
	right: -28%;
	bottom: -22%;
	width: 82%;
	border-width: 1px;
	border-color: rgba(255, 255, 255, 0.08);
}

.cpp-app.cpp-application .cpp-onboarding-intro h1 {
	max-width: 520px;
	margin-bottom: 20px;
	color: #fff;
	font-size: clamp(34px, 3vw, 50px);
	line-height: 1.04;
	overflow-wrap: break-word;
	text-transform: none;
}

.cpp-app .cpp-onboarding-intro > p:last-child {
	max-width: 520px;
	margin-bottom: 34px;
	color: rgba(255, 255, 255, 0.72);
	font-size: 0.96rem;
}

.cpp-app .cpp-onboarding-step-list {
	display: grid;
	gap: 8px;
	margin-bottom: 28px;
}

.cpp-app .cpp-onboarding-step-list article {
	display: grid;
	grid-template-columns: 42px minmax(0, 1fr);
	gap: 13px;
	align-items: center;
	padding: 12px 14px;
	border: 1px solid transparent;
	border-radius: 14px;
	color: rgba(255, 255, 255, 0.5);
	transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.cpp-app .cpp-onboarding-step-list article.is-active {
	border-color: rgba(255, 255, 255, 0.15);
	background: rgba(255, 255, 255, 0.09);
	color: #fff;
}

.cpp-app .cpp-onboarding-step-list article.is-complete {
	color: rgba(255, 255, 255, 0.76);
}

.cpp-app .cpp-onboarding-step-list b {
	display: grid;
	width: 38px;
	height: 38px;
	place-items: center;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 11px;
	font-size: 0.7rem;
	letter-spacing: 0.05em;
}

.cpp-app .cpp-onboarding-step-list .is-active b,
.cpp-app .cpp-onboarding-step-list .is-complete b {
	border-color: var(--cpp-orange);
	background: var(--cpp-orange);
	color: #171717;
}

.cpp-app .cpp-onboarding-step-list :where(strong, small) {
	display: block;
}

.cpp-app .cpp-onboarding-step-list strong {
	color: currentColor;
	font-size: 0.82rem;
}

.cpp-app .cpp-onboarding-step-list small {
	margin-top: 2px;
	color: currentColor;
	font-size: 0.68rem;
	font-weight: 550;
}

.cpp-app .cpp-onboarding-trust {
	display: grid;
	grid-template-columns: 38px minmax(0, 1fr);
	gap: 12px;
	align-items: center;
	margin-top: auto;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.cpp-app .cpp-onboarding-trust > span {
	display: grid;
	width: 38px;
	height: 38px;
	place-items: center;
	border-radius: 50%;
	background: rgba(232, 115, 74, 0.18);
	color: #ff9c78;
	font-weight: 900;
}

.cpp-app .cpp-onboarding-trust p,
.cpp-app .cpp-onboarding-trust :where(strong, small) {
	display: block;
	margin: 0;
}

.cpp-app .cpp-onboarding-trust strong {
	color: #fff;
	font-size: 0.77rem;
}

.cpp-app .cpp-onboarding-trust small {
	margin-top: 3px;
	color: rgba(255, 255, 255, 0.58);
	font-size: 0.65rem;
}

.cpp-app .cpp-onboarding-main {
	padding: clamp(28px, 4.5vw, 64px);
	background:
		linear-gradient(rgba(14, 27, 47, 0.025) 1px, transparent 1px),
		linear-gradient(90deg, rgba(14, 27, 47, 0.025) 1px, transparent 1px),
		#f6f8fa;
	background-size: 36px 36px;
}

.cpp-app .cpp-progress-shell {
	display: flex;
	max-width: 860px;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin: 0 auto 20px;
}

.cpp-app .cpp-progress-shell .cpp-progress {
	width: min(360px, 55%);
	margin: 0;
}

.cpp-app .cpp-progress-shell > p {
	margin: 0;
	color: var(--cpp-muted);
	font-size: 0.72rem;
	font-weight: 750;
	letter-spacing: 0.025em;
}

.cpp-app .cpp-onboarding-main > .cpp-onboarding-card {
	width: 100%;
	max-width: 860px;
	min-height: 590px;
	margin-inline: auto;
	padding: clamp(26px, 4vw, 48px);
	border: 1px solid #dde3e9;
	border-radius: 24px;
	background: rgba(255, 255, 255, 0.98);
	box-shadow: 0 16px 46px rgba(14, 27, 47, 0.08);
}

.cpp-app .cpp-step-header {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	gap: 16px;
	align-items: start;
	margin-bottom: 32px;
}

.cpp-app .cpp-step-header .cpp-step-icon {
	display: grid;
	width: 48px;
	height: 48px;
	place-items: center;
	border: 1px solid #f0c0ae;
	border-radius: 14px;
	background: var(--cpp-orange-soft);
	color: var(--cpp-orange-ink);
	font-size: 0.73rem;
	font-weight: 850;
	letter-spacing: 0.05em;
}

.cpp-app .cpp-step-header .cpp-eyebrow {
	margin-bottom: 8px;
}

.cpp-app.cpp-application .cpp-step-header h1 {
	margin-bottom: 8px;
	font-size: clamp(32px, 2.8vw, 46px);
	line-height: 1.06;
	overflow-wrap: break-word;
	text-transform: none;
}

.cpp-app .cpp-step-header p:last-child {
	margin: 0;
	color: var(--cpp-muted);
}

.cpp-app .cpp-lookup-form {
	gap: 18px;
}

.cpp-app .cpp-identifier-select {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.cpp-app .cpp-identifier-select > legend {
	margin-bottom: 10px;
	color: var(--cpp-charcoal);
	font-size: 0.78rem;
	font-weight: 800;
}

.cpp-app .cpp-identifier-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}

.cpp-app .cpp-identifier-option {
	position: relative;
	display: grid;
	min-width: 0;
	grid-template-columns: 40px minmax(0, 1fr);
	gap: 10px;
	align-items: center;
	padding: 14px;
	border: 1px solid var(--cpp-line);
	border-radius: 14px;
	background: #fff;
	cursor: pointer;
	transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease, transform 150ms ease;
}

.cpp-app .cpp-identifier-option:hover {
	border-color: #e2a087;
	transform: translateY(-1px);
}

.cpp-app .cpp-identifier-option:has(input:checked) {
	border-color: var(--cpp-orange);
	background: #fff8f5;
	box-shadow: 0 0 0 2px rgba(232, 115, 74, 0.12);
}

.cpp-app .cpp-identifier-option input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.cpp-app .cpp-identifier-option:focus-within {
	outline: 2px solid var(--cpp-orange);
	outline-offset: 3px;
}

.cpp-app .cpp-identifier-mark {
	display: grid;
	width: 40px;
	height: 40px;
	place-items: center;
	border-radius: 11px;
	background: var(--cpp-soft);
	color: var(--cpp-navy);
	font-size: 0.68rem;
	font-weight: 850;
}

.cpp-app .cpp-identifier-option:has(input:checked) .cpp-identifier-mark {
	background: var(--cpp-orange);
	color: #171717;
}

.cpp-app .cpp-identifier-option :where(strong, small) {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cpp-app .cpp-identifier-option strong {
	font-size: 0.76rem;
	white-space: nowrap;
}

.cpp-app .cpp-identifier-option small {
	margin-top: 2px;
	color: var(--cpp-muted);
	font-size: 0.62rem;
	font-weight: 600;
}

.cpp-app .cpp-search-composer {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 12px;
	align-items: end;
	padding: 18px;
	border: 1px solid #dce2e8;
	border-radius: 16px;
	background: var(--cpp-soft);
}

.cpp-app .cpp-search-composer .cpp-button {
	min-height: 50px;
	padding-inline: 22px;
}

.cpp-app .cpp-form-note {
	margin: -7px 0 0;
	color: var(--cpp-muted);
	font-size: 0.73rem;
}

.cpp-app .cpp-data-assurance,
.cpp-app .cpp-delivery-receipt {
	display: grid;
	grid-template-columns: 38px minmax(0, 1fr);
	gap: 12px;
	align-items: center;
	margin-top: 22px;
	padding: 14px 16px;
	border: 1px solid #cfe2d7;
	border-radius: 14px;
	background: #f3faf6;
}

.cpp-app :where(.cpp-data-assurance, .cpp-delivery-receipt) > span {
	display: grid;
	width: 36px;
	height: 36px;
	place-items: center;
	border-radius: 11px;
	background: var(--cpp-success-bg);
	color: var(--cpp-success);
	font-weight: 900;
}

.cpp-app :where(.cpp-data-assurance, .cpp-delivery-receipt) p,
.cpp-app :where(.cpp-data-assurance, .cpp-delivery-receipt) :where(strong, small) {
	display: block;
	margin: 0;
}

.cpp-app :where(.cpp-data-assurance, .cpp-delivery-receipt) strong {
	font-size: 0.78rem;
}

.cpp-app :where(.cpp-data-assurance, .cpp-delivery-receipt) small {
	margin-top: 3px;
	color: var(--cpp-muted);
	font-size: 0.68rem;
}

.cpp-app .cpp-service-form-card {
	margin-top: 24px;
	padding: clamp(20px, 3vw, 28px);
	border: 1px solid #dce2e8;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 8px 28px rgba(14, 27, 47, 0.055);
}

.cpp-app .cpp-service-form-card > header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--cpp-line);
}

.cpp-app .cpp-service-form-card > header :where(h2, p) {
	margin-bottom: 0;
}

.cpp-app .cpp-service-form-card > header h2 {
	font-size: 1.35rem;
}

.cpp-app .cpp-carrier-confirm {
	grid-template-columns: minmax(230px, 0.8fr) minmax(0, 1.2fr);
	margin: 0 0 18px;
	padding: 22px;
	border-color: #cbd9e5;
	background: linear-gradient(135deg, #f2f7fb, #fff 72%);
}

.cpp-app .cpp-match-label {
	display: inline-flex;
	margin-bottom: 9px;
	color: var(--cpp-info);
	font-size: 0.65rem;
	font-weight: 850;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.cpp-app .cpp-carrier-confirm dd .cpp-chip {
	margin-top: 2px;
}

.cpp-app .cpp-fmcsa-preview > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
}

.cpp-app .cpp-fmcsa-preview > summary :where(span, small) {
	display: block;
}

.cpp-app .cpp-fmcsa-preview > summary small {
	color: var(--cpp-muted);
	font-size: 0.65rem;
	font-weight: 600;
}

.cpp-app .cpp-otp-card {
	max-width: 560px;
	margin-inline: auto;
}

.cpp-app .cpp-field--otp input {
	min-height: 68px;
	font-size: clamp(1.55rem, 4vw, 2.2rem);
	font-weight: 800;
	letter-spacing: 0.5em;
	text-align: center;
}

.cpp-app .cpp-delivery-receipt {
	max-width: 650px;
	margin: 0 auto 20px;
}

.cpp-app .cpp-delivery-receipt code {
	font-size: 0.67rem;
}

/* Super-admin delivery diagnostics inside the front-end Activity Log. */
.cpp-app .cpp-mail-diagnostic-panel {
	margin-bottom: 34px;
	padding: clamp(20px, 3vw, 30px);
	border: 1px solid #cbd5e1;
	border-radius: 22px;
	background: linear-gradient(145deg, #fff, #f7f9fb);
	box-shadow: 0 16px 42px rgba(14, 27, 47, 0.08);
}

.cpp-app .cpp-mail-diagnostic-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 22px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--cpp-line);
}

.cpp-app .cpp-mail-diagnostic-header :where(h2, p) {
	margin-bottom: 0;
}

.cpp-app .cpp-mail-diagnostic-header h2 {
	font-size: clamp(1.45rem, 2.4vw, 2.15rem);
}

.cpp-app .cpp-mail-diagnostic-header p:last-child {
	color: var(--cpp-muted);
}

.cpp-app .cpp-mail-health-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin-bottom: 16px;
}

.cpp-app .cpp-mail-health-grid article {
	display: grid;
	gap: 3px;
	padding: 17px;
	border: 1px solid var(--cpp-line);
	border-radius: 14px;
	background: #fff;
}

.cpp-app .cpp-mail-health-grid small {
	color: var(--cpp-muted);
	font-size: 0.64rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.cpp-app .cpp-mail-health-grid strong {
	color: var(--cpp-navy);
	font-size: 1.08rem;
}

.cpp-app .cpp-mail-health-grid span {
	color: var(--cpp-muted);
	font-size: 0.67rem;
}

.cpp-app .cpp-mail-diagnosis {
	margin-bottom: 16px;
	padding: 15px 17px;
	border: 1px solid #c8daee;
	border-left-width: 4px;
	border-radius: 12px;
	background: var(--cpp-info-bg);
}

.cpp-app .cpp-mail-diagnosis.is-accepted {
	border-color: #b7dcc6;
	background: var(--cpp-success-bg);
}

.cpp-app .cpp-mail-diagnosis.is-failed {
	border-color: #e7aaa4;
	background: var(--cpp-danger-bg);
}

.cpp-app .cpp-mail-diagnosis p {
	margin: 4px 0 0;
	font-size: 0.79rem;
}

.cpp-app .cpp-mail-diagnostic-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-block: 18px;
}

.cpp-app .cpp-mail-diagnostic-details {
	border: 1px solid #293747;
	border-radius: 14px;
	background: #111a24;
	overflow: hidden;
}

.cpp-app .cpp-mail-diagnostic-details > summary {
	padding: 14px 17px;
	color: #f1f5f9;
	font-size: 0.76rem;
	font-weight: 800;
	cursor: pointer;
}

.cpp-app .cpp-mail-diagnostic-log {
	max-height: 620px;
	margin: 0;
	padding: 20px;
	border-top: 1px solid #293747;
	background: #0b1119;
	color: #d8e3ee;
	font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
	font-size: 0.7rem;
	font-weight: 500;
	line-height: 1.65;
	white-space: pre-wrap;
	word-break: break-word;
	overflow: auto;
}

.cpp-app .cpp-mail-log-empty {
	padding: 24px;
	border-top: 1px solid #293747;
	color: #d8e3ee;
}

.cpp-app .cpp-mail-log-empty p {
	margin: 5px 0 0;
	color: #94a3b8;
	font-size: 0.75rem;
}

.cpp-app .cpp-audit-section {
	padding-top: 6px;
}

/* Self-contained operations settings */
.cpp-app .cpp-settings-workspace {
	display: grid;
	gap: 22px;
}

.cpp-app .cpp-settings-form {
	display: grid;
	gap: 20px;
}

.cpp-app .cpp-settings-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

.cpp-app .cpp-settings-panel {
	display: grid;
	align-content: start;
	gap: 20px;
	min-width: 0;
	padding: clamp(22px, 2.6vw, 32px);
	border: 1px solid var(--cpp-line);
	border-radius: 0;
	background: #fff;
	box-shadow: 0 12px 30px rgba(14, 27, 47, 0.055);
}

.cpp-app .cpp-settings-panel > header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 17px;
	border-bottom: 1px solid var(--cpp-line);
}

.cpp-app .cpp-settings-panel > header :where(h2, p) {
	margin: 0;
}

.cpp-app .cpp-settings-panel > header h2 {
	margin-top: 4px;
	font-size: clamp(1.3rem, 2vw, 1.65rem);
	font-weight: 600;
	letter-spacing: -0.035em;
}

.cpp-app .cpp-settings-panel > header p:last-child {
	max-width: 620px;
	margin-top: 7px;
	color: var(--cpp-muted);
	font-size: 0.82rem;
	line-height: 1.55;
}

.cpp-app .cpp-settings-toggle {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	align-items: start;
	gap: 13px;
	padding: 17px;
	border: 1px solid var(--cpp-line);
	border-radius: 0;
	background: var(--cpp-soft);
	cursor: pointer;
}

.cpp-app .cpp-settings-toggle input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.cpp-app .cpp-settings-toggle > span {
	position: relative;
	width: 42px;
	height: 24px;
	margin-top: 1px;
	border: 1px solid var(--cpp-line-strong);
	border-radius: 999px;
	background: #cfd4d9;
	transition: background-color 180ms ease, border-color 180ms ease;
}

.cpp-app .cpp-settings-toggle > span::after {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 4px rgba(14, 27, 47, 0.24);
	content: "";
	transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cpp-app .cpp-settings-toggle input:checked + span {
	border-color: var(--cpp-orange-dark);
	background: var(--cpp-orange);
}

.cpp-app .cpp-settings-toggle input:checked + span::after {
	transform: translateX(18px);
}

.cpp-app .cpp-settings-toggle input:focus-visible + span {
	outline: 3px solid rgba(232, 115, 74, 0.25);
	outline-offset: 2px;
}

.cpp-app .cpp-settings-toggle div {
	display: grid;
	gap: 4px;
}

.cpp-app .cpp-settings-toggle strong {
	font-size: 0.88rem;
	font-weight: 650;
}

.cpp-app .cpp-settings-toggle small,
.cpp-app .cpp-settings-panel .cpp-field small {
	color: var(--cpp-muted);
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.5;
}

.cpp-app .cpp-input-suffix {
	position: relative;
}

.cpp-app .cpp-input-suffix input {
	padding-right: 50px;
}

.cpp-app .cpp-input-suffix > span {
	position: absolute;
	top: 50%;
	right: 14px;
	color: var(--cpp-muted);
	font-size: 0.72rem;
	transform: translateY(-50%);
}

.cpp-app .cpp-settings-save {
	position: sticky;
	z-index: 8;
	bottom: 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 16px 18px;
	border: 1px solid #27384d;
	border-radius: 0;
	background: rgba(14, 27, 47, 0.96);
	box-shadow: 0 16px 36px rgba(14, 27, 47, 0.25);
	color: #fff;
	backdrop-filter: blur(12px);
}

.cpp-app .cpp-settings-save div {
	display: grid;
	gap: 3px;
}

.cpp-app .cpp-settings-save strong {
	font-size: 0.84rem;
	font-weight: 650;
}

.cpp-app .cpp-settings-save small {
	color: rgba(255, 255, 255, 0.65);
	font-size: 0.7rem;
}

.cpp-app .cpp-settings-toggle:has(input:disabled) {
	cursor: not-allowed;
	opacity: 0.72;
}

.cpp-app .cpp-health-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.cpp-app .cpp-health-card {
	display: grid;
	align-content: start;
	gap: 10px;
	padding: 20px;
	border: 1px solid var(--cpp-line);
	background: #fff;
}

.cpp-app .cpp-health-card header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.cpp-app .cpp-health-card :where(h2, p) {
	margin: 0;
}

.cpp-app .cpp-health-card h2 {
	font-size: 1rem;
}

.cpp-app .cpp-health-card > strong {
	overflow-wrap: anywhere;
	font-size: 0.86rem;
}

.cpp-app .cpp-health-card p,
.cpp-app .cpp-data-freshness {
	color: var(--cpp-muted);
	font-size: 0.78rem;
}

.cpp-app .cpp-application-receipt {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	width: min(620px, 100%);
	margin: 22px auto;
	text-align: left;
}

.cpp-app .cpp-application-receipt > div,
.cpp-app .cpp-success-next {
	padding: 16px;
	border: 1px solid var(--cpp-line);
	background: var(--cpp-soft);
}

.cpp-app .cpp-application-receipt :where(dt, dd) {
	margin: 0;
}

.cpp-app .cpp-application-receipt dt {
	margin-bottom: 6px;
	color: var(--cpp-muted);
	font-size: 0.72rem;
}

.cpp-app .cpp-application-receipt dd {
	overflow-wrap: anywhere;
	font-weight: 750;
}

.cpp-app .cpp-success-next {
	width: min(620px, 100%);
	margin: 20px auto;
	text-align: left;
}

.cpp-app .cpp-success-next h2 {
	margin: 0 0 10px;
	font-size: 1rem;
}

.cpp-app .cpp-success-next ol {
	display: grid;
	gap: 8px;
	margin: 0;
	padding-left: 22px;
}

.cpp-app .cpp-resume-notice {
	margin: 14px 0 0;
	padding: 11px 13px;
	border-left: 3px solid var(--cpp-orange);
	background: var(--cpp-orange-soft);
	color: var(--cpp-muted);
	font-size: 0.78rem;
}

.cpp-app .cpp-resume-notice > p {
	margin: 5px 0 10px;
}

.cpp-app .cpp-resume-copy {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 8px;
}

.cpp-app .cpp-resume-copy input {
	min-width: 0;
	padding: 9px 11px;
	border: 1px solid var(--cpp-border);
	border-radius: 8px;
	background: #fff;
	color: var(--cpp-ink);
	font: inherit;
}

@media (max-width: 900px) {
	.cpp-app .cpp-settings-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.cpp-app .cpp-health-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 600px) {
	.cpp-app .cpp-mfa-setup {
		grid-template-columns: minmax(0, 1fr);
	}

	.cpp-app .cpp-resume-copy {
		grid-template-columns: minmax(0, 1fr);
	}

	.cpp-app .cpp-settings-panel {
		padding: 20px 16px;
	}

	.cpp-app .cpp-settings-panel > header,
	.cpp-app .cpp-settings-save {
		align-items: stretch;
		flex-direction: column;
	}

	.cpp-app .cpp-settings-save .cpp-button {
		width: 100%;
	}

	.cpp-app .cpp-application-receipt {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.cpp-app .cpp-dashboard-main > [data-cpp-view].is-view-entering,
	.cpp-app [data-ws-content].is-view-entering {
		animation: none;
	}

	.cpp-app .cpp-sidebar nav :where(a, button),
	.cpp-app .cpp-nav-item {
		transition: none;
	}

}

@media (max-width: 1100px) {
	.cpp-app .cpp-onboarding-layout {
		grid-template-columns: minmax(300px, 0.72fr) minmax(480px, 1.28fr);
	}

	.cpp-app .cpp-onboarding-step-list small {
		display: none;
	}

	.cpp-app .cpp-identifier-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 900px) {
	.cpp-app .cpp-onboarding-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.cpp-app .cpp-onboarding-aside {
		padding: 36px;
	}

	.cpp-app.cpp-application .cpp-onboarding-intro h1 {
		font-size: clamp(32px, 6vw, 46px);
	}

	.cpp-app .cpp-onboarding-step-list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.cpp-app .cpp-onboarding-step-list article {
		grid-template-columns: 38px minmax(0, 1fr);
		padding: 9px;
	}

	.cpp-app .cpp-onboarding-step-list small,
	.cpp-app .cpp-onboarding-trust {
		display: none;
	}
}

@media (max-width: 700px) {
	.cpp-app.cpp-application {
		border-radius: 18px;
	}

	.cpp-app.cpp-application .cpp-app-header {
		min-height: 60px;
		padding: 10px 16px;
	}

	.cpp-app .cpp-secure-label {
		display: none;
	}

	.cpp-app .cpp-onboarding-aside {
		padding: 28px 20px;
	}

	.cpp-app .cpp-onboarding-intro > p:last-child {
		margin-bottom: 24px;
	}

	.cpp-app .cpp-onboarding-step-list {
		grid-template-columns: repeat(4, 1fr);
		gap: 5px;
	}

	.cpp-app .cpp-onboarding-step-list article {
		display: grid;
		grid-template-columns: 1fr;
		justify-items: center;
		padding: 7px 4px;
		text-align: center;
	}

	.cpp-app .cpp-onboarding-step-list article div {
		display: none;
	}

	.cpp-app .cpp-onboarding-main {
		padding: 18px 12px 26px;
	}

	.cpp-app .cpp-progress-shell {
		align-items: stretch;
		flex-direction: column;
		gap: 9px;
		margin-bottom: 14px;
	}

	.cpp-app .cpp-progress-shell .cpp-progress {
		width: 100%;
	}

	.cpp-app .cpp-progress-shell > p {
		text-align: center;
	}

	.cpp-app .cpp-onboarding-main > .cpp-onboarding-card {
		min-height: 520px;
		padding: 22px 16px;
		border-radius: 18px;
	}

	.cpp-app .cpp-step-header {
		grid-template-columns: 40px minmax(0, 1fr);
		gap: 12px;
		margin-bottom: 24px;
	}

	.cpp-app .cpp-step-header .cpp-step-icon {
		width: 40px;
		height: 40px;
	}

	.cpp-app.cpp-application .cpp-step-header h1 {
		font-size: clamp(27px, 7.5vw, 34px);
	}

	.cpp-app .cpp-search-composer,
	.cpp-app .cpp-carrier-confirm,
	.cpp-app .cpp-carrier-confirm dl,
	.cpp-app .cpp-mail-health-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.cpp-app .cpp-search-composer .cpp-button,
	.cpp-app .cpp-mail-diagnostic-actions .cpp-button {
		width: 100%;
	}

	.cpp-app .cpp-service-form-card > header,
	.cpp-app .cpp-mail-diagnostic-header {
		align-items: flex-start;
		flex-direction: column;
	}

	.cpp-app .cpp-fmcsa-preview > summary {
		align-items: flex-start;
		flex-direction: column;
	}
}

/* Keep these final so older component rules cannot restore heavy type or rounded dashboard chrome. */
.cpp-app.cpp-dashboard {
	--cpp-radius-xs: 2px;
	--cpp-radius-sm: 2px;
	--cpp-radius: 0;
	--cpp-radius-lg: 0;
	--cpp-radius-xl: 0;
	font-weight: 400;
}

.cpp-app.cpp-dashboard * {
	border-radius: 0 !important;
	font-weight: 400 !important;
}

.cpp-app.cpp-dashboard :where(h1, h2) {
	font-weight: 600 !important;
}

.cpp-app.cpp-dashboard :where(h3, strong, b, th, dt, label, .cpp-field > span, button, .cpp-button, .cpp-chip, .cpp-badge, [class*="cpp-status--"]) {
	font-weight: 500 !important;
}

.cpp-app.cpp-dashboard :where(.cpp-eyebrow, .cpp-metric strong, .cpp-summary-grid strong, .cpp-metric-card strong, .cpp-primary-text) {
	font-weight: 600 !important;
}

.cpp-app .cpp-status-next-step {
	background: var(--cpp-soft);
}

/* Portal access workspace and final interaction corrections. */
.cpp-app .cpp-pillar-grid,
.cpp-app .cpp-pillar-grid > *,
.cpp-app .cpp-pillar-grid--interactive button {
	min-width: 0;
}

.cpp-app .cpp-pillar-grid--interactive button {
	display: flex;
	overflow: hidden;
	flex-direction: column;
	align-items: flex-start;
	white-space: normal !important;
}

.cpp-app .cpp-pillar-grid--interactive button :where(h3, p, small) {
	width: 100%;
	max-width: 100%;
	overflow-wrap: break-word;
	white-space: normal !important;
}

.cpp-app .cpp-pillar-grid--interactive button small {
	margin-top: auto;
	padding-top: 18px;
}

.cpp-app .cpp-icon-button {
	display: inline-grid !important;
	align-items: center !important;
	justify-content: center !important;
	place-items: center !important;
	padding: 0 !important;
	line-height: 0 !important;
}

.cpp-app .cpp-icon-button .cpp-nav-icon {
	display: block;
	margin: auto;
}

.cpp-app .cpp-spinner {
	border: 2px solid var(--cpp-line);
	border-top-color: var(--cpp-orange-dark);
	border-radius: 50% !important;
}

.cpp-app .cpp-access-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr);
	gap: 20px;
	align-items: start;
	margin-top: 20px;
}

.cpp-app .cpp-access-editor {
	min-width: 0;
}

.cpp-app .cpp-access-identity,
.cpp-app .cpp-access-assignment-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.cpp-app .cpp-access-block {
	min-width: 0;
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--cpp-line);
}

.cpp-app .cpp-access-block > div:first-child {
	margin-bottom: 14px;
}

.cpp-app .cpp-access-block :where(h3, p) {
	margin: 0;
}

.cpp-app .cpp-access-block p {
	margin-top: 5px;
	color: var(--cpp-muted);
	font-size: .82rem;
	line-height: 1.55;
}

.cpp-app .cpp-access-option-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.cpp-app .cpp-access-option,
.cpp-app .cpp-assignment-option {
	display: flex;
	min-width: 0;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	padding: 12px;
	border: 1px solid var(--cpp-line);
	background: #fff;
	cursor: pointer;
}

.cpp-app .cpp-access-option:hover,
.cpp-app .cpp-assignment-option:hover {
	border-color: var(--cpp-orange);
	background: var(--cpp-orange-soft);
}

.cpp-app .cpp-access-option input,
.cpp-app .cpp-assignment-option input {
	width: 17px;
	height: 17px;
	flex: 0 0 17px;
	margin: 2px 0 0;
	accent-color: var(--cpp-orange-dark);
}

.cpp-app .cpp-access-option > span,
.cpp-app .cpp-assignment-option > span {
	min-width: 0;
	color: var(--cpp-ink);
	line-height: 1.35;
}

.cpp-app .cpp-access-option-title,
.cpp-app .cpp-access-option small,
.cpp-app .cpp-assignment-option small {
	display: block;
}

.cpp-app .cpp-access-option small,
.cpp-app .cpp-assignment-option small {
	margin-top: 4px;
	color: var(--cpp-muted);
	font-size: .72rem;
	overflow-wrap: anywhere;
}

.cpp-app .cpp-assignment-list {
	display: grid;
	max-height: 320px;
	overflow: auto;
	gap: 7px;
	padding-right: 4px;
}

.cpp-app .cpp-access-editor.is-global-access .cpp-access-assignment-grid {
	opacity: .48;
}

.cpp-app .cpp-access-editor :where(input, select):disabled {
	cursor: not-allowed;
}

.cpp-app .cpp-access-notice-icon {
	display: grid;
	width: 36px;
	height: 36px;
	flex: 0 0 36px;
	place-items: center;
	border: 1px solid var(--cpp-orange);
	color: var(--cpp-orange-ink);
}

.cpp-app .cpp-access-notice-icon .cpp-nav-icon {
	width: 18px;
	height: 18px;
}

.cpp-app .cpp-callout:has(.cpp-access-notice-icon) {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.cpp-app .cpp-demo-code {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 5px 14px;
	margin: 14px 0;
	padding: 14px 16px;
	border: 1px solid #e8b15e;
	background: #fff8e8;
	color: var(--cpp-ink);
}

.cpp-app .cpp-demo-code > span {
	color: #8a4d05;
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.cpp-app .cpp-demo-code code {
	grid-row: span 2;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 1.35rem;
	font-weight: 600;
	letter-spacing: .16em;
	justify-self: end;
}

.cpp-app .cpp-demo-code small {
	color: var(--cpp-muted);
	line-height: 1.4;
}

.cpp-app .cpp-status-guide-button {
	display: inline-flex;
	width: auto;
	min-width: max-content;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 16px;
	white-space: nowrap;
	line-height: 1;
}

.cpp-app .cpp-status-guide-button .cpp-nav-icon {
	margin: 0;
}

.cpp-app .cpp-bulk-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 10px;
	margin: 0 0 14px;
	padding: 12px;
	border: 1px solid var(--cpp-line);
	background: #fff;
}

.cpp-app .cpp-bulk-bar .cpp-field {
	min-width: 190px;
	margin: 0;
}

.cpp-app .cpp-bulk-bar .cpp-field--grow {
	flex: 1 1 320px;
	min-width: min(100%, 260px);
}

.cpp-app .cpp-bulk-bar [data-console-bulk-count] {
	align-self: center;
	color: var(--cpp-muted);
	font-size: .82rem;
}

.cpp-app .cpp-select-cell {
	width: 44px;
	text-align: center;
}

.cpp-app .cpp-select-cell input {
	width: 18px;
	height: 18px;
	margin: 0;
	vertical-align: middle;
}

@media (max-width: 1180px) {
	.cpp-app .cpp-access-layout {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 760px) {
	.cpp-app .cpp-access-identity,
	.cpp-app .cpp-access-assignment-grid,
	.cpp-app .cpp-access-option-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.cpp-app .cpp-demo-code {
		grid-template-columns: minmax(0, 1fr);
	}

	.cpp-app .cpp-demo-code code {
		grid-row: auto;
		justify-self: start;
	}
}

@media (max-width: 480px) {
	.cpp-app .cpp-language-menu__toggle {
		min-width: 116px;
		padding-inline: 10px;
	}

	.cpp-app .cpp-language-menu__options {
		width: min(214px, calc(100vw - 28px));
	}

	.cpp-app .cpp-login-toolbar {
		align-items: flex-start;
		flex-direction: column;
		gap: 14px;
	}

	.cpp-app .cpp-login-toolbar .cpp-language-menu {
		align-self: stretch;
		width: 100%;
	}

	.cpp-app .cpp-login-toolbar .cpp-language-menu__toggle {
		width: 100%;
	}

	.cpp-app .cpp-login-toolbar .cpp-language-menu__options {
		right: auto;
		left: 0;
		width: 100%;
	}
}

/* Final cascade guard: keep text-bearing controls and section containers
 * content-sized even when a component above uses a compact fixed dimension.
 * Icon-only controls keep their intentionally square geometry.
 */
.cpp-app :where(
	button:not(.cpp-icon-button),
	.cpp-button,
	.cpp-status-guide-button,
	[role="button"]:not(.cpp-icon-button),
	input:not([type="checkbox"]):not([type="radio"]),
	select,
	textarea
) {
	height: auto !important;
	min-height: 42px;
	white-space: normal !important;
	line-height: 1.4;
	overflow-wrap: break-word;
}

.cpp-app :where(
	.cpp-card,
	.cpp-panel,
	.cpp-section-card,
	.cpp-widget,
	.cpp-auth-step,
	.cpp-modal-card,
	.cpp-dialog-card,
	.cpp-notice-card
) {
	height: auto !important;
	min-width: 0;
	max-width: 100%;
}

.cpp-app :where(
	.cpp-page-header,
	.cpp-topbar,
	.cpp-dashboard-topbar,
	.cpp-card-header,
	.cpp-panel-header,
	.cpp-section-header,
	.cpp-header-actions,
	.cpp-form-actions,
	.cpp-command-actions,
	.cpp-driver-doc-actions,
	.cpp-toolbar,
	.cpp-table-actions,
	.cpp-bulk-bar,
	.cpp-fmcsa-source-ribbon,
	.cpp-fmcsa-rating-card,
	.cpp-otp-test-control
) {
	flex-wrap: wrap !important;
	height: auto !important;
	align-items: flex-start;
}

.cpp-app :where(
	.cpp-chip,
	.cpp-badge,
	.cpp-pill,
	.cpp-status-chip,
	.cpp-eyebrow,
	.cpp-test-mode-banner__icon
) {
	width: auto;
	height: auto !important;
	min-height: 0;
	max-width: 100%;
	white-space: normal !important;
	line-height: 1.35;
	overflow-wrap: break-word;
}

.cpp-app :where(.cpp-table-wrap, .cpp-matrix-wrap, .cpp-safer-matrix) {
	max-width: 100%;
	overflow-x: auto !important;
	-webkit-overflow-scrolling: touch;
}

@media (max-width: 900px) {
	.cpp-app :where(
		.cpp-grid,
		.cpp-card-grid,
		.cpp-grid--two,
		.cpp-grid--four,
		.cpp-split,
		.cpp-stats,
		.cpp-metric-grid,
		.cpp-summary-grid,
		.cpp-form-grid,
		.cpp-settings-grid,
		.cpp-overview-grid,
		.cpp-access-assignment-grid,
		.cpp-access-option-grid,
		.cpp-safer-stat-strip
	) {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

/* Typography integrity guard.
 *
 * Theme CSS, browser text enlargement, translated labels, and unusually long
 * company names must not turn ordinary words into isolated letter fragments.
 * Display headings use viewport-bounded pixel clamps so they remain readable
 * without inheriting an unexpectedly huge root font from the active theme.
 */
.cpp-app :where(h1, h2, h3, h4, h5, h6) {
	max-inline-size: 100%;
	overflow-wrap: break-word !important;
	word-break: normal !important;
	hyphens: manual;
	text-wrap: balance;
	line-height: 1.12;
}

.cpp-app h1 {
	font-size: clamp(30px, calc(24px + 2.4vw), 52px) !important;
}

.cpp-app h2 {
	font-size: clamp(24px, calc(20px + 1.8vw), 40px) !important;
}

.cpp-app h3 {
	font-size: clamp(20px, calc(18px + 1vw), 29px) !important;
}

.cpp-app h4 {
	font-size: clamp(17px, calc(16px + 0.55vw), 23px) !important;
}

.cpp-app.cpp-application .cpp-onboarding-intro h1 {
	font-size: clamp(32px, calc(26px + 1.7vw), 50px) !important;
}

.cpp-app.cpp-application .cpp-step-header h1 {
	font-size: clamp(28px, calc(24px + 1.45vw), 46px) !important;
}

.cpp-app :where(p, li, dt, dd, label, legend, summary, small, strong, em, a, blockquote) {
	overflow-wrap: break-word !important;
	word-break: normal !important;
	hyphens: manual;
}

/* Machine-generated values are the only text allowed to split anywhere. */
.cpp-app :where(code, pre, .cpp-document-meta dd, .cpp-fmcsa-fact dd, .cpp-fmcsa-record dd) {
	overflow-wrap: anywhere !important;
	word-break: break-word !important;
}

/* FMCSA confirmation cards give the legal name a real column and collapse
 * automatically before either side becomes too narrow.
 */
.cpp-app .cpp-carrier-confirm {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	align-items: start;
}

.cpp-app .cpp-carrier-confirm > :where(div, dl) {
	min-width: 0;
}

.cpp-app .cpp-carrier-confirm h2 {
	max-width: 100%;
	margin-bottom: 0;
	font-size: clamp(26px, calc(22px + 1.35vw), 38px) !important;
	line-height: 1.1;
	letter-spacing: -0.025em;
	overflow-wrap: break-word !important;
	word-break: normal !important;
	text-wrap: balance;
}

.cpp-app .cpp-carrier-confirm dl {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
	align-content: start;
}

.cpp-app .cpp-carrier-confirm :where(dt, dd, .cpp-chip) {
	max-width: 100%;
	overflow-wrap: break-word !important;
	word-break: normal !important;
}

/* 3.1.4 coherent component type scale.
 *
 * Duplicate .cpp-app classes deliberately raise specificity above Elementor
 * kit and active-theme heading rules. Each dense component gets an explicit
 * pixel-bounded size rather than inheriting a display font intended for the
 * surrounding WordPress page.
 */
html body .cpp-app.cpp-app {
	--cpp-type-hero: clamp(34px, calc(28px + 1.5vw), 48px);
	--cpp-type-page: clamp(30px, calc(26px + 1.1vw), 42px);
	--cpp-type-section: clamp(24px, calc(22px + 0.65vw), 32px);
	--cpp-type-card: clamp(21px, calc(20px + 0.45vw), 27px);
	--cpp-type-body: clamp(14px, calc(13px + 0.18vw), 16px);
	--cpp-type-small: clamp(12px, calc(11px + 0.12vw), 13px);
}

html body .cpp-app.cpp-app :where(h1, h2, h3, h4) {
	max-width: 100% !important;
	font-family: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
	overflow-wrap: break-word !important;
	word-break: normal !important;
	writing-mode: horizontal-tb !important;
	text-orientation: mixed !important;
}

html body .cpp-app.cpp-app h1 {
	font-size: var(--cpp-type-page) !important;
	line-height: 1.08 !important;
}

html body .cpp-app.cpp-app h2 {
	font-size: var(--cpp-type-section) !important;
	line-height: 1.12 !important;
}

html body .cpp-app.cpp-app h3 {
	font-size: var(--cpp-type-card) !important;
	line-height: 1.16 !important;
}

html body .cpp-app.cpp-app h4 {
	font-size: clamp(18px, calc(17px + 0.3vw), 22px) !important;
	line-height: 1.2 !important;
}

/* Command-center and driver hero titles. */
html body .cpp-app.cpp-app.cpp-dashboard .cpp-command-hero > div > h1,
html body .cpp-app.cpp-app.cpp-dashboard .cpp-driver-hero > div > h1 {
	max-width: 19ch !important;
	margin-bottom: 18px !important;
	font-size: var(--cpp-type-hero) !important;
	line-height: 1.04 !important;
	letter-spacing: -0.035em !important;
	text-wrap: balance;
}

html body .cpp-app.cpp-app.cpp-dashboard .cpp-command-hero > div > p:not(.cpp-eyebrow) {
	max-width: 62ch !important;
	font-size: var(--cpp-type-body) !important;
	line-height: 1.55 !important;
}

/* The three primary workspace cards. */
html body .cpp-app.cpp-app.cpp-dashboard .cpp-pillar-grid--interactive > button {
	height: auto !important;
	min-height: 260px !important;
	padding: clamp(22px, 2.4vw, 30px) !important;
}

html body .cpp-app.cpp-app.cpp-dashboard .cpp-pillar-grid--interactive > button > h3 {
	margin: 18px 0 10px !important;
	font-size: var(--cpp-type-card) !important;
	line-height: 1.08 !important;
	letter-spacing: -0.025em !important;
	overflow-wrap: break-word !important;
	word-break: normal !important;
	text-wrap: balance;
}

html body .cpp-app.cpp-app.cpp-dashboard .cpp-pillar-grid--interactive > button > p {
	margin-bottom: 16px !important;
	font-size: var(--cpp-type-body) !important;
	line-height: 1.5 !important;
}

html body .cpp-app.cpp-app.cpp-dashboard .cpp-pillar-grid--interactive > button > small {
	font-size: var(--cpp-type-small) !important;
	line-height: 1.35 !important;
}

/* Document cards: title and status receive separate grid tracks, so short
 * statuses can never collapse into one-character columns.
 */
html body .cpp-app.cpp-app.cpp-dashboard .cpp-document-slot > header {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) auto !important;
	align-items: start !important;
	gap: 14px !important;
}

html body .cpp-app.cpp-app.cpp-dashboard .cpp-document-slot > header > div {
	min-width: 0 !important;
}

html body .cpp-app.cpp-app.cpp-dashboard .cpp-document-slot > header h3 {
	margin: 6px 0 0 !important;
	font-size: var(--cpp-type-card) !important;
	line-height: 1.18 !important;
	letter-spacing: -0.02em !important;
	overflow-wrap: break-word !important;
	word-break: normal !important;
	text-wrap: pretty;
}

html body .cpp-app.cpp-app :where(.cpp-status, .cpp-chip, .cpp-badge, [class*="cpp-status--"]) {
	font-size: 12px !important;
	line-height: 1.2 !important;
	overflow-wrap: break-word !important;
	word-break: normal !important;
	writing-mode: horizontal-tb !important;
	text-orientation: mixed !important;
}

html body .cpp-app.cpp-app.cpp-dashboard .cpp-document-slot > header > :where(.cpp-status, .cpp-chip, .cpp-badge, [class*="cpp-status--"]) {
	width: max-content !important;
	min-width: max-content !important;
	max-width: 150px !important;
	justify-self: end !important;
	white-space: nowrap !important;
}

html body .cpp-app.cpp-app.cpp-dashboard .cpp-document-slot > p:not(.cpp-slot-scope):not(.cpp-slot-frequency) {
	font-size: var(--cpp-type-body) !important;
	line-height: 1.5 !important;
}

html body .cpp-app.cpp-app.cpp-dashboard .cpp-document-slot > footer {
	flex-wrap: wrap !important;
	gap: 12px !important;
}

html body .cpp-app.cpp-app.cpp-dashboard .cpp-document-slot .cpp-slot-actions {
	min-width: 0 !important;
	gap: 8px !important;
}

html body .cpp-app.cpp-app.cpp-dashboard .cpp-document-slot .cpp-slot-actions :where(.cpp-button, button, a) {
	width: auto !important;
	min-width: 0 !important;
	min-height: 36px !important;
	padding: 8px 13px !important;
	font-size: 13px !important;
	line-height: 1.2 !important;
	text-indent: 0 !important;
	white-space: nowrap !important;
	opacity: 1 !important;
}

html body .cpp-app.cpp-app.cpp-dashboard .cpp-document-slot .cpp-slot-actions > a.cpp-button {
	color: #161616 !important;
}

/* Metrics and dense record titles share the same restrained hierarchy. */
html body .cpp-app.cpp-app.cpp-dashboard :where(
	.cpp-overview-metrics article strong,
	.cpp-summary-grid article strong,
	.cpp-stat strong,
	.cpp-metric strong,
	.cpp-stat-value,
	.cpp-metric-value
) {
	font-size: clamp(26px, calc(24px + 0.8vw), 34px) !important;
	line-height: 1.05 !important;
}

html body .cpp-app.cpp-app.cpp-dashboard :where(
	.cpp-driver-doc-card h3,
	.cpp-carrier-result h3,
	.cpp-service-form-card h2
) {
	font-size: var(--cpp-type-card) !important;
	line-height: 1.18 !important;
	overflow-wrap: break-word !important;
	word-break: normal !important;
}

@media (max-width: 760px) {
	html body .cpp-app.cpp-app.cpp-dashboard .cpp-command-hero > div > h1,
	html body .cpp-app.cpp-app.cpp-dashboard .cpp-driver-hero > div > h1 {
		max-width: 100% !important;
		font-size: clamp(32px, 9vw, 42px) !important;
	}

	html body .cpp-app.cpp-app.cpp-dashboard .cpp-document-slot > header {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	html body .cpp-app.cpp-app.cpp-dashboard .cpp-document-slot > header > :where(.cpp-status, .cpp-chip, .cpp-badge, [class*="cpp-status--"]) {
		justify-self: start !important;
	}
}

/* 3.1.4 control contrast guard.
 *
 * WordPress themes frequently target generic anchors and buttons after the
 * plugin stylesheet. Repeat the component class to keep every portal variant
 * legible without affecting controls outside the portal.
 */
html body .cpp-app.cpp-app .cpp-button.cpp-button,
html body .cpp-app.cpp-app button.cpp-button.cpp-button,
html body .cpp-app.cpp-app input[type="submit"].cpp-button.cpp-button {
	border-color: var(--cpp-orange) !important;
	background-color: var(--cpp-orange) !important;
	color: #161616 !important;
	-webkit-text-fill-color: #161616 !important;
	font-family: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
	font-size: 15px !important;
	line-height: 1.2 !important;
	opacity: 1;
}

html body .cpp-app.cpp-app .cpp-button.cpp-button:is(.cpp-button--small, .is-small) {
	font-size: 13px !important;
}

html body .cpp-app.cpp-app .cpp-button.cpp-button:hover:not(:disabled),
html body .cpp-app.cpp-app button.cpp-button.cpp-button:hover:not(:disabled),
html body .cpp-app.cpp-app input[type="submit"].cpp-button.cpp-button:hover:not(:disabled) {
	border-color: #f08058 !important;
	background-color: #f08058 !important;
	color: #101010 !important;
	-webkit-text-fill-color: #101010 !important;
}

html body .cpp-app.cpp-app .cpp-button.cpp-button:is(.cpp-button--secondary, .is-secondary),
html body .cpp-app.cpp-app .cpp-button-secondary.cpp-button-secondary {
	border-color: var(--cpp-navy) !important;
	background-color: var(--cpp-navy) !important;
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
}

html body .cpp-app.cpp-app .cpp-button.cpp-button:is(.cpp-button--secondary, .is-secondary):hover:not(:disabled),
html body .cpp-app.cpp-app .cpp-button-secondary.cpp-button-secondary:hover:not(:disabled) {
	border-color: var(--cpp-navy-2) !important;
	background-color: var(--cpp-navy-2) !important;
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
}

html body .cpp-app.cpp-app .cpp-button.cpp-button:is(.cpp-button--outline, .is-outline),
html body .cpp-app.cpp-app .cpp-button-outline.cpp-button-outline {
	border-color: var(--cpp-line-strong) !important;
	background-color: #fff !important;
	color: var(--cpp-navy) !important;
	-webkit-text-fill-color: var(--cpp-navy) !important;
}

html body .cpp-app.cpp-app .cpp-button.cpp-button:is(.cpp-button--outline, .is-outline):hover:not(:disabled),
html body .cpp-app.cpp-app .cpp-button-outline.cpp-button-outline:hover:not(:disabled) {
	border-color: var(--cpp-orange) !important;
	background-color: var(--cpp-orange-soft) !important;
	color: var(--cpp-navy) !important;
	-webkit-text-fill-color: var(--cpp-navy) !important;
}

html body .cpp-app.cpp-app .cpp-button.cpp-button:is(.cpp-button--ghost, .is-ghost),
html body .cpp-app.cpp-app .cpp-button-ghost.cpp-button-ghost {
	border-color: transparent !important;
	background-color: transparent !important;
	color: var(--cpp-ink) !important;
	-webkit-text-fill-color: var(--cpp-ink) !important;
}

html body .cpp-app.cpp-app .cpp-button.cpp-button:is(.cpp-button--ghost, .is-ghost):hover:not(:disabled),
html body .cpp-app.cpp-app .cpp-button-ghost.cpp-button-ghost:hover:not(:disabled) {
	border-color: var(--cpp-line-strong) !important;
	background-color: var(--cpp-soft) !important;
	color: var(--cpp-ink) !important;
	-webkit-text-fill-color: var(--cpp-ink) !important;
}

html body .cpp-app.cpp-app .cpp-button.cpp-button:is(.cpp-button--danger, .is-danger),
html body .cpp-app.cpp-app .cpp-button-danger.cpp-button-danger {
	border-color: var(--cpp-danger) !important;
	background-color: var(--cpp-danger) !important;
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
}

html body .cpp-app.cpp-app .cpp-button.cpp-button:is(.cpp-button--danger, .is-danger):hover:not(:disabled),
html body .cpp-app.cpp-app .cpp-button-danger.cpp-button-danger:hover:not(:disabled) {
	border-color: #7e201a !important;
	background-color: #7e201a !important;
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
}

html body .cpp-app.cpp-app .cpp-row-actions > button:not(.is-danger),
html body .cpp-app.cpp-app .cpp-icon-button {
	background-color: #fff !important;
	color: var(--cpp-navy) !important;
	-webkit-text-fill-color: var(--cpp-navy) !important;
	font-size: 13px !important;
	line-height: 1.2 !important;
}

html body .cpp-app.cpp-app :where(.cpp-row-actions > button.is-danger, .cpp-link-danger) {
	border-color: #ecc7c3 !important;
	background-color: var(--cpp-danger-bg) !important;
	color: var(--cpp-danger) !important;
	-webkit-text-fill-color: var(--cpp-danger) !important;
	font-size: 13px !important;
	line-height: 1.2 !important;
}

/* The dark hero intentionally uses the white outline variant. */
html body .cpp-app.cpp-app .cpp-command-hero .cpp-button.cpp-button:is(.cpp-button--outline, .is-outline) {
	border-color: rgba(255, 255, 255, 0.58) !important;
	background-color: rgba(255, 255, 255, 0.08) !important;
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
}

html body .cpp-app.cpp-app .cpp-command-hero .cpp-button.cpp-button:is(.cpp-button--outline, .is-outline):hover:not(:disabled) {
	border-color: #fff !important;
	background-color: rgba(255, 255, 255, 0.16) !important;
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
}

/* 3.1.5 surface contrast system.
 *
 * The host theme may assign heading and paragraph colors with selectors that
 * are stronger than the original component rules. These explicit light/dark
 * surface contracts keep every foreground paired with its authored backdrop.
 */
html body .cpp-app.cpp-app {
	--cpp-on-light: #1c2430;
	--cpp-on-light-muted: #626a73;
	--cpp-on-dark: #ffffff;
	--cpp-on-dark-muted: #d6e0eb;
}

html body .cpp-app.cpp-app :where(h1, h2, h3, h4, h5, h6) {
	color: var(--cpp-on-light) !important;
	-webkit-text-fill-color: var(--cpp-on-light) !important;
}

html body .cpp-app.cpp-app :where(
	.cpp-command-hero,
	.cpp-onboarding-aside,
	.cpp-card--dark,
	.cpp-panel--dark,
	.cpp-toast
) {
	color: var(--cpp-on-dark-muted) !important;
}

html body .cpp-app.cpp-app :where(
	.cpp-command-hero,
	.cpp-onboarding-aside,
	.cpp-card--dark,
	.cpp-panel--dark,
	.cpp-toast
) :where(h1, h2, h3, h4, h5, h6, strong) {
	color: var(--cpp-on-dark) !important;
	-webkit-text-fill-color: var(--cpp-on-dark) !important;
}

html body .cpp-app.cpp-app :is(
	.cpp-command-hero.cpp-command-hero,
	.cpp-onboarding-aside.cpp-onboarding-aside,
	.cpp-card--dark.cpp-card--dark,
	.cpp-panel--dark.cpp-panel--dark,
	.cpp-toast.cpp-toast
) :where(h1, h2, h3, h4, h5, h6, strong) {
	color: var(--cpp-on-dark) !important;
	-webkit-text-fill-color: var(--cpp-on-dark) !important;
}

html body .cpp-app.cpp-app :is(
	.cpp-command-hero.cpp-command-hero,
	.cpp-onboarding-aside.cpp-onboarding-aside,
	.cpp-card--dark.cpp-card--dark,
	.cpp-panel--dark.cpp-panel--dark,
	.cpp-toast.cpp-toast
) :where(p, li, dt, dd, small, label) {
	color: var(--cpp-on-dark-muted) !important;
	-webkit-text-fill-color: var(--cpp-on-dark-muted) !important;
}

html body .cpp-app.cpp-app .cpp-command-hero > div > p:not(.cpp-eyebrow),
html body .cpp-app.cpp-app .cpp-command-hero aside > small,
html body .cpp-app.cpp-app .cpp-command-hero aside :where(dt, dd),
html body .cpp-app.cpp-app .cpp-onboarding-aside > p:not(.cpp-eyebrow),
html body .cpp-app.cpp-app :where(.cpp-card--dark, .cpp-panel--dark, .cpp-toast) :where(p, li, dt, dd, small, label) {
	color: var(--cpp-on-dark-muted) !important;
	-webkit-text-fill-color: var(--cpp-on-dark-muted) !important;
}

html body .cpp-app.cpp-app .cpp-command-hero aside dd,
html body .cpp-app.cpp-app .cpp-assurance,
html body .cpp-app.cpp-app .cpp-toast :where(p, strong) {
	color: var(--cpp-on-dark) !important;
	-webkit-text-fill-color: var(--cpp-on-dark) !important;
}

html body .cpp-app.cpp-app :where(.cpp-command-hero, .cpp-onboarding-aside, .cpp-card--dark, .cpp-panel--dark, .cpp-toast) a:not(.cpp-button) {
	color: var(--cpp-on-dark) !important;
	-webkit-text-fill-color: var(--cpp-on-dark) !important;
	text-decoration-color: currentColor !important;
}

html body .cpp-app.cpp-app :where(.cpp-command-hero, .cpp-onboarding-aside) .cpp-eyebrow {
	color: #ff9c78 !important;
	-webkit-text-fill-color: #ff9c78 !important;
}

html body .cpp-app.cpp-app .cpp-sidebar {
	color: var(--cpp-on-dark-muted) !important;
}

html body .cpp-app.cpp-app .cpp-sidebar nav :where(a, button):not(.is-active):not([aria-current="page"]),
html body .cpp-app.cpp-app .cpp-sidebar .cpp-nav-item:not(.is-active) {
	color: #d6e0eb !important;
	-webkit-text-fill-color: #d6e0eb !important;
}

html body .cpp-app.cpp-app .cpp-sidebar nav :where(a, button):is(.is-active, [aria-current="page"]),
html body .cpp-app.cpp-app .cpp-sidebar .cpp-nav-item.is-active {
	background-color: var(--cpp-orange) !important;
	color: #171717 !important;
	-webkit-text-fill-color: #171717 !important;
}

html body .cpp-app.cpp-app .cpp-sidebar-help :where(strong, a, small) {
	color: var(--cpp-on-dark) !important;
	-webkit-text-fill-color: var(--cpp-on-dark) !important;
}

html body .cpp-app.cpp-app :where(
	.cpp-tabs :where(button, a).is-active,
	.cpp-tabs :where(button, a)[aria-selected="true"],
	[role="tablist"] [role="tab"][aria-selected="true"],
	.cpp-filter-pill.is-active,
	.cpp-segmented button.is-active,
	.cpp-segmented button[aria-pressed="true"],
	.cpp-subnav button.is-active
) {
	background-color: var(--cpp-charcoal) !important;
	color: var(--cpp-on-dark) !important;
	-webkit-text-fill-color: var(--cpp-on-dark) !important;
}

html body .cpp-app.cpp-app :where(.cpp-login-backdrop-label, .cpp-avatar) {
	color: var(--cpp-on-dark) !important;
	-webkit-text-fill-color: var(--cpp-on-dark) !important;
}

/* SaaS table system.
 *
 * A td carrying .cpp-row-actions must remain a table-cell. The prior generic
 * flex rule detached the Action column from row sizing and background paint.
 */
html body .cpp-app.cpp-app :where(.cpp-table-wrap, .cpp-data-table-wrap) {
	overflow: auto !important;
	border-color: #d9e0e7 !important;
	background-color: #fff !important;
	box-shadow: 0 8px 24px rgba(14, 27, 47, 0.055);
}

html body .cpp-app.cpp-app :where(.cpp-table, .cpp-data-table) {
	border-collapse: separate !important;
	border-spacing: 0 !important;
	background-color: #fff !important;
	color: var(--cpp-on-light) !important;
}

html body .cpp-app.cpp-app :where(.cpp-table, .cpp-data-table) thead th {
	padding: 14px 18px !important;
	border-bottom: 1px solid #d9e0e7 !important;
	background-color: #f7f9fb !important;
	color: #536274 !important;
	font-size: 11px !important;
	font-weight: 750 !important;
	letter-spacing: 0.09em !important;
}

html body .cpp-app.cpp-app :where(.cpp-table, .cpp-data-table) thead th:last-child {
	min-width: 250px;
	text-align: right !important;
}

html body .cpp-app.cpp-app :where(.cpp-table, .cpp-data-table) tbody tr {
	--cpp-table-row-bg: #ffffff;
}

html body .cpp-app.cpp-app :where(.cpp-table, .cpp-data-table) tbody tr:nth-child(even) {
	--cpp-table-row-bg: #fbfcfd;
}

html body .cpp-app.cpp-app :where(.cpp-table, .cpp-data-table) tbody tr:hover {
	--cpp-table-row-bg: #fff7f2;
}

html body .cpp-app.cpp-app :where(.cpp-table, .cpp-data-table) tbody td {
	padding: 18px !important;
	border-bottom: 1px solid #e1e6eb !important;
	background-color: var(--cpp-table-row-bg) !important;
	color: var(--cpp-on-light) !important;
	line-height: 1.45 !important;
	vertical-align: middle !important;
}

html body .cpp-app.cpp-app :where(.cpp-table, .cpp-data-table) tbody tr:last-child td {
	border-bottom: 0 !important;
}

html body .cpp-app.cpp-app :where(.cpp-table, .cpp-data-table) tbody td > strong,
html body .cpp-app.cpp-app :where(.cpp-table, .cpp-data-table) .cpp-primary-text {
	color: var(--cpp-on-light) !important;
	-webkit-text-fill-color: var(--cpp-on-light) !important;
	font-weight: 650 !important;
}

html body .cpp-app.cpp-app :where(.cpp-table, .cpp-data-table) tbody td > small {
	color: var(--cpp-on-light-muted) !important;
	-webkit-text-fill-color: var(--cpp-on-light-muted) !important;
}

html body .cpp-app.cpp-app :where(.cpp-table, .cpp-data-table) td.cpp-row-actions {
	display: table-cell !important;
	width: 1% !important;
	min-width: 250px !important;
	height: auto !important;
	text-align: right !important;
	white-space: nowrap !important;
}

html body .cpp-app.cpp-app :where(.cpp-table, .cpp-data-table) td.cpp-row-actions > :where(button, a, .cpp-action-state) {
	margin: 3px 0 3px 8px !important;
	vertical-align: middle !important;
}

html body .cpp-app.cpp-app :where(.cpp-table, .cpp-data-table) td.cpp-row-actions > :where(button, .cpp-link-danger) {
	min-height: 36px !important;
	padding: 8px 13px !important;
	border-radius: 7px !important;
	font-size: 13px !important;
	line-height: 1.2 !important;
	white-space: nowrap !important;
}

html body .cpp-app.cpp-app .cpp-action-state {
	display: inline-flex;
	min-height: 34px;
	align-items: center;
	justify-content: center;
	padding: 7px 11px;
	border: 1px solid #d9e0e7;
	border-radius: 999px;
	background: #f3f6f9;
	color: #536274 !important;
	-webkit-text-fill-color: #536274 !important;
	font-size: 12px;
	font-weight: 650;
	line-height: 1.2;
	white-space: nowrap;
}

html body .cpp-app.cpp-app :where(.cpp-table, .cpp-data-table) td.cpp-row-actions:empty::after {
	color: #8a96a3;
	content: "—";
	font-size: 14px;
}

@media (max-width: 760px) {
	html body .cpp-app.cpp-app :where(.cpp-table, .cpp-data-table) thead th:last-child,
	html body .cpp-app.cpp-app :where(.cpp-table, .cpp-data-table) td.cpp-row-actions {
		min-width: 240px !important;
	}
}

/* =====================================================================
 * 3.1 experience layer
 *
 * Shortcode surfaces render inside host pages that already own the site
 * header and logo, so the shell here carries workspace identity, progress,
 * and reach instead of branding. Everything below is scoped to .cpp-app.
 * ================================================================== */

.cpp-app .cpp-skip-link {
	position: absolute;
	z-index: 200;
	top: 8px;
	left: 8px;
	padding: 10px 16px;
	border-radius: var(--cpp-radius-xs);
	background: var(--cpp-charcoal);
	color: #fff;
	font-size: 0.82rem;
	font-weight: 700;
	text-decoration: none;
	transform: translateY(-200%);
	transition: transform 160ms ease;
}

.cpp-app .cpp-skip-link:focus-visible {
	transform: translateY(0);
	outline: 2px solid var(--cpp-orange);
	outline-offset: 2px;
}

/* --- Shared progress meter ---------------------------------------- */

.cpp-app .cpp-meter {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 8px;
	border-radius: 999px;
	background: var(--cpp-soft-2);
}

.cpp-app .cpp-meter > i {
	display: block;
	width: 0;
	height: 100%;
	border-radius: inherit;
	background: var(--cpp-orange);
	transition: width 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cpp-app .cpp-meter--success > i { background: var(--cpp-success); }
.cpp-app .cpp-meter--warning > i { background: #b8860b; }
.cpp-app .cpp-meter--danger > i { background: var(--cpp-danger); }
.cpp-app .cpp-meter--brand > i { background: var(--cpp-orange); }
.cpp-app .cpp-meter[data-tone="success"] > i { background: var(--cpp-success); }
.cpp-app .cpp-meter[data-tone="warning"] > i { background: #d9a30a; }
.cpp-app .cpp-meter[data-tone="danger"] > i { background: var(--cpp-danger); }

/* --- Sidebar identity, readiness, grouped navigation --------------- */

.cpp-app .cpp-workspace-identity {
	margin: 0 0 22px;
	padding: 0 4px 20px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.cpp-app .cpp-workspace-identity .cpp-eyebrow {
	margin: 0 0 6px;
	color: var(--cpp-orange);
	font-size: 0.64rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.cpp-app .cpp-workspace-identity strong {
	display: block;
	overflow-wrap: anywhere;
	color: #fff;
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1.3;
}

.cpp-app .cpp-workspace-identity small {
	display: block;
	margin-top: 5px;
	color: rgba(255, 255, 255, 0.55);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.cpp-app .cpp-sidebar-progress {
	margin: 0 4px 22px;
	padding: 14px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--cpp-radius-xs);
	background: rgba(255, 255, 255, 0.05);
}

.cpp-app .cpp-sidebar-progress > div:first-child {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 9px;
}

.cpp-app .cpp-sidebar-progress span {
	color: rgba(255, 255, 255, 0.66);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.cpp-app .cpp-sidebar-progress b {
	color: #fff;
	font-size: 1.05rem;
	font-weight: 800;
}

.cpp-app .cpp-sidebar-progress .cpp-meter {
	height: 6px;
	background: rgba(255, 255, 255, 0.16);
}

.cpp-app .cpp-sidebar-progress small {
	display: block;
	margin-top: 9px;
	color: rgba(255, 255, 255, 0.55);
	font-size: 0.7rem;
	line-height: 1.45;
}

.cpp-app .cpp-nav-group + .cpp-nav-group {
	margin-top: 18px;
}

.cpp-app .cpp-nav-group-label {
	margin: 0 0 7px;
	padding-left: 13px;
	color: rgba(255, 255, 255, 0.38);
	font-size: 0.62rem;
	font-weight: 800;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

.cpp-app .cpp-sidebar nav .cpp-nav-label {
	display: grid;
	min-width: 0;
	flex: 1 1 auto;
	gap: 1px;
}

.cpp-app .cpp-sidebar nav .cpp-nav-label small {
	overflow: hidden;
	color: inherit;
	font-size: 0.68rem;
	font-weight: 500;
	line-height: 1.3;
	opacity: 0.62;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cpp-app .cpp-sidebar nav :where(a, button) {
	min-height: 48px;
	align-items: center;
}

.cpp-app .cpp-nav-badge {
	display: inline-grid;
	min-width: 22px;
	height: 20px;
	flex: 0 0 auto;
	align-content: center;
	justify-items: center;
	padding: 0 6px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
	font-size: 0.68rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.cpp-app .cpp-nav-badge--danger {
	background: var(--cpp-danger);
	color: #fff;
}

.cpp-app .cpp-sidebar nav :where(a, button).is-active .cpp-nav-badge {
	background: rgba(0, 0, 0, 0.24);
	color: #fff;
}

.cpp-app .cpp-sidebar-help {
	display: grid;
	gap: 10px;
	grid-template-columns: minmax(0, 1fr);
	margin-top: auto;
	padding: 0;
	border: 0;
	background: none;
}

.cpp-app .cpp-sidebar-help-action {
	display: grid;
	width: 100%;
	align-items: center;
	gap: 11px;
	grid-template-columns: 36px 1fr;
	padding: 13px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--cpp-radius-xs);
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
	cursor: pointer;
	text-align: left;
	transition: background-color 200ms ease, border-color 200ms ease;
}

.cpp-app .cpp-sidebar-help-action:hover {
	border-color: rgba(232, 115, 74, 0.6);
	background: rgba(232, 115, 74, 0.16);
}

.cpp-app .cpp-sidebar-help-action > span:first-child {
	display: grid;
	width: 36px;
	height: 36px;
	place-items: center;
	border-radius: 50%;
	background: var(--cpp-orange);
	color: #171717;
	font-size: 0.9rem;
	font-weight: 800;
}

.cpp-app .cpp-sidebar-help-action > span:last-child {
	display: grid;
	gap: 2px;
}

.cpp-app .cpp-sidebar-help-action strong {
	color: #fff;
	font-size: 0.8rem;
	font-weight: 700;
}

.cpp-app .cpp-sidebar-help-action small {
	color: rgba(255, 255, 255, 0.58);
	font-size: 0.69rem;
}

.cpp-app .cpp-sidebar-help-support {
	display: flex;
	min-height: 40px;
	align-items: center;
	padding: 8px 4px;
	color: rgba(255, 255, 255, 0.6);
	font-size: 0.72rem;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cpp-app .cpp-sidebar-help-support:hover {
	color: #fff;
}

/* --- Top bar ------------------------------------------------------- */

.cpp-app .cpp-topbar-context {
	display: grid;
	min-width: 0;
	gap: 5px;
}

.cpp-app .cpp-topbar-context strong {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* --- Mobile header and bottom tab bar ------------------------------ */

.cpp-app .cpp-mobile-title {
	display: grid;
	min-width: 0;
	flex: 1 1 auto;
	gap: 1px;
	text-align: center;
}

.cpp-app .cpp-mobile-title small {
	color: var(--cpp-muted);
	font-size: 0.62rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.cpp-app .cpp-mobile-title strong {
	overflow: hidden;
	color: var(--cpp-ink);
	font-size: 0.92rem;
	font-weight: 700;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cpp-app .cpp-mobile-menu-button,
.cpp-app .cpp-mobile-help-button,
.cpp-app .cpp-mobile-header-spacer {
	display: grid;
	width: 42px;
	height: 42px;
	flex: 0 0 auto;
	place-items: center;
	padding: 0;
	border: 1px solid var(--cpp-line);
	border-radius: var(--cpp-radius-xs);
	background: #fff;
	color: var(--cpp-navy);
	cursor: pointer;
}

.cpp-app .cpp-mobile-header-spacer {
	border-color: transparent;
	background: none;
}

.cpp-app .cpp-mobile-help-button {
	font-size: 1.05rem;
	font-weight: 800;
}

.cpp-app .cpp-mobile-menu-button > span {
	position: relative;
	display: block;
	width: 18px;
	height: 2px;
	background: currentColor;
}

.cpp-app .cpp-mobile-menu-button > span::before,
.cpp-app .cpp-mobile-menu-button > span::after {
	position: absolute;
	left: 0;
	width: 18px;
	height: 2px;
	background: currentColor;
	content: "";
	transition: transform 200ms ease;
}

.cpp-app .cpp-mobile-menu-button > span::before { top: -6px; }
.cpp-app .cpp-mobile-menu-button > span::after { top: 6px; }

.cpp-app .cpp-tabbar {
	display: none;
}

@media (max-width: 760px) {
	.cpp-app .cpp-tabbar {
		position: sticky;
		z-index: 45;
		bottom: 0;
		display: grid;
		grid-auto-columns: 1fr;
		grid-auto-flow: column;
		border-top: 1px solid var(--cpp-line);
		background: rgba(255, 255, 255, 0.97);
		backdrop-filter: blur(12px);
		padding-bottom: env(safe-area-inset-bottom, 0);
	}

	.cpp-app .cpp-tabbar button {
		position: relative;
		display: grid;
		min-height: 58px;
		align-content: center;
		justify-items: center;
		gap: 3px;
		padding: 8px 4px;
		border: 0;
		border-top: 2px solid transparent;
		background: none;
		color: var(--cpp-muted);
		cursor: pointer;
		font-size: 0.66rem;
		font-weight: 700;
	}

	.cpp-app .cpp-tabbar button.is-active {
		border-top-color: var(--cpp-orange);
		color: var(--cpp-orange-ink);
	}

	.cpp-app .cpp-tabbar .cpp-nav-icon {
		width: 21px;
		height: 21px;
	}

	.cpp-app .cpp-tabbar .cpp-nav-badge {
		position: absolute;
		top: 6px;
		left: calc(50% + 4px);
		min-width: 18px;
		height: 17px;
		font-size: 0.6rem;
	}

	.cpp-app.cpp-dashboard .cpp-dashboard-main {
		padding-bottom: 24px;
	}
}

/* --- Getting-started checklist ------------------------------------- */

.cpp-app .cpp-setup {
	padding: clamp(20px, 3vw, 30px);
	border: 1px solid var(--cpp-line);
	border-left: 3px solid var(--cpp-orange);
	border-radius: var(--cpp-radius);
	background: var(--cpp-surface);
	box-shadow: var(--cpp-shadow-sm);
}

.cpp-app .cpp-setup.is-complete {
	border-left-color: var(--cpp-success);
}

.cpp-app .cpp-setup-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
}

.cpp-app .cpp-setup-head h2 {
	margin: 4px 0 6px;
	font-size: clamp(1.15rem, 1.6vw, 1.45rem);
}

.cpp-app .cpp-setup-head > div > p:last-child {
	max-width: 62ch;
	color: var(--cpp-muted);
	font-size: 0.9rem;
}

.cpp-app .cpp-setup-score {
	display: grid;
	flex: 0 0 auto;
	justify-items: center;
	padding: 10px 16px;
	border: 1px solid var(--cpp-line);
	border-radius: var(--cpp-radius-sm);
	background: var(--cpp-soft);
	text-align: center;
}

.cpp-app .cpp-setup-score b {
	color: var(--cpp-charcoal);
	font-size: 1.6rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.cpp-app .cpp-setup-score b i {
	color: var(--cpp-muted-2);
	font-size: 0.95rem;
	font-style: normal;
	font-weight: 700;
}

.cpp-app .cpp-setup-score span {
	margin-top: 4px;
	color: var(--cpp-muted);
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.cpp-app .cpp-setup-meter {
	margin: 18px 0 6px;
}

.cpp-app .cpp-setup-steps {
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}

.cpp-app .cpp-setup.is-collapsed .cpp-setup-steps {
	display: none;
}

.cpp-app .cpp-setup-step {
	display: grid;
	align-items: center;
	gap: 16px;
	grid-template-columns: 30px minmax(0, 1fr) auto;
	padding: 16px 0;
	border-top: 1px solid var(--cpp-line);
}

.cpp-app .cpp-setup-step strong {
	display: block;
	color: var(--cpp-charcoal);
	font-size: 0.95rem;
	font-weight: 700;
}

.cpp-app .cpp-setup-step p {
	max-width: 68ch;
	margin: 3px 0 0;
	color: var(--cpp-muted);
	font-size: 0.85rem;
	line-height: 1.5;
}

.cpp-app .cpp-setup-step.is-done strong {
	color: var(--cpp-muted);
	text-decoration: line-through;
	text-decoration-color: var(--cpp-line-strong);
	text-decoration-thickness: 1px;
}

.cpp-app .cpp-step-number,
.cpp-app .cpp-step-check {
	display: grid;
	width: 30px;
	height: 30px;
	place-items: center;
	border: 1.5px solid var(--cpp-line-strong);
	border-radius: 50%;
	color: var(--cpp-muted);
	font-size: 0.8rem;
	font-weight: 800;
}

.cpp-app .cpp-step-check {
	border-color: var(--cpp-success);
	background: var(--cpp-success);
	color: #fff;
}

.cpp-app .cpp-step-progress {
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: 340px;
	margin-top: 9px;
}

.cpp-app .cpp-step-progress .cpp-meter {
	height: 6px;
}

.cpp-app .cpp-step-progress small {
	flex: 0 0 auto;
	color: var(--cpp-muted);
	font-size: 0.74rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.cpp-app .cpp-setup-foot {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--cpp-line);
}

/* --- Readiness card ------------------------------------------------ */

.cpp-app .cpp-readiness-card {
	padding: clamp(20px, 3vw, 30px);
	border: 1px solid var(--cpp-line);
	border-radius: var(--cpp-radius);
	background: var(--cpp-surface);
	box-shadow: var(--cpp-shadow-sm);
}

.cpp-app .cpp-readiness-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 26px;
	margin-bottom: 18px;
}

.cpp-app .cpp-readiness-head h2 {
	margin: 4px 0 6px;
	font-size: clamp(1.1rem, 1.5vw, 1.4rem);
}

.cpp-app .cpp-readiness-head p {
	max-width: 66ch;
	color: var(--cpp-muted);
	font-size: 0.88rem;
}

.cpp-app .cpp-readiness-dial {
	display: grid;
	width: 92px;
	height: 92px;
	flex: 0 0 auto;
	align-content: center;
	justify-items: center;
	border: 3px solid var(--cpp-orange);
	border-radius: 50%;
	background: var(--cpp-orange-soft);
}

.cpp-app .cpp-readiness-dial b {
	color: var(--cpp-orange-ink);
	font-size: 1.6rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.cpp-app .cpp-readiness-dial b i {
	font-size: 0.85rem;
	font-style: normal;
}

.cpp-app .cpp-readiness-dial span {
	margin-top: 3px;
	color: var(--cpp-orange-ink);
	font-size: 0.62rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.cpp-app .cpp-readiness-legend {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	margin-top: 18px;
}

.cpp-app .cpp-legend-item {
	display: flex;
	align-items: baseline;
	gap: 9px;
	padding: 12px 14px;
	border: 1px solid var(--cpp-line);
	border-left: 3px solid var(--cpp-line-strong);
	border-radius: var(--cpp-radius-xs);
	background: var(--cpp-surface);
	cursor: pointer;
	text-align: left;
	transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.cpp-app .cpp-legend-item:hover {
	background: var(--cpp-soft);
	transform: translateY(-1px);
}

.cpp-app .cpp-legend-item b {
	color: var(--cpp-charcoal);
	font-size: 1.3rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.cpp-app .cpp-legend-item span {
	color: var(--cpp-muted);
	font-size: 0.78rem;
	font-weight: 600;
}

.cpp-app .cpp-legend-item--valid { border-left-color: var(--cpp-success); }
.cpp-app .cpp-legend-item--expiring { border-left-color: #d9a30a; }
.cpp-app .cpp-legend-item--expired,
.cpp-app .cpp-legend-item--missing { border-left-color: var(--cpp-danger); }

/* --- Priority queue ------------------------------------------------ */

.cpp-app .cpp-priority-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cpp-app .cpp-priority-row {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 0;
	border-top: 1px solid var(--cpp-line);
}

.cpp-app .cpp-priority-row:first-child {
	border-top: 0;
}

.cpp-app .cpp-priority-main {
	min-width: 0;
	flex: 1 1 auto;
}

.cpp-app .cpp-priority-main strong {
	display: block;
	color: var(--cpp-charcoal);
	font-size: 0.92rem;
	font-weight: 700;
}

.cpp-app .cpp-priority-main small {
	display: block;
	margin-top: 2px;
	color: var(--cpp-muted);
	font-size: 0.78rem;
}

.cpp-app .cpp-priority-row .cpp-chip,
.cpp-app .cpp-priority-row .cpp-button {
	flex: 0 0 auto;
}

/* --- Quick tips ---------------------------------------------------- */

.cpp-app .cpp-tips {
	margin: 0 0 22px;
	padding: 16px 18px;
	border: 1px solid rgba(24, 94, 168, 0.24);
	border-radius: var(--cpp-radius-sm);
	background: var(--cpp-info-bg);
}

.cpp-app .cpp-tips-head {
	display: flex;
	align-items: center;
	gap: 10px;
}

.cpp-app .cpp-tips-icon {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	color: var(--cpp-info);
}

.cpp-app .cpp-tips-icon .cpp-nav-icon {
	width: 19px;
	height: 19px;
}

.cpp-app .cpp-tips-head strong {
	flex: 1 1 auto;
	color: var(--cpp-info);
	font-size: 0.85rem;
	font-weight: 800;
}

.cpp-app .cpp-tips-toggle {
	flex: 0 0 auto;
	padding: 4px 8px;
	border: 0;
	border-radius: var(--cpp-radius-xs);
	background: none;
	color: var(--cpp-info);
	cursor: pointer;
	font-size: 0.74rem;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cpp-app .cpp-tips-toggle:hover {
	background: rgba(24, 94, 168, 0.1);
}

/* Collapsed, the strip is one quiet line the reader can reopen at any time. */
.cpp-app .cpp-tips.is-collapsed {
	padding-block: 11px;
}

.cpp-app .cpp-tips ul {
	margin: 12px 0 0;
	padding-left: 20px;
}

.cpp-app .cpp-tips li {
	max-width: 82ch;
	margin-top: 6px;
	color: #14456f;
	font-size: 0.85rem;
	line-height: 1.55;
}

/* --- Account settings --------------------------------------------- */

/*
 * The "Signed in as" block became the way into account settings, so it has to
 * read as pressable while keeping the same two-line shape it had as static
 * text — the topbar layout depends on that shape.
 */
.cpp-app button.cpp-account-trigger {
	display: grid;
	padding: 4px 8px;
	gap: 1px;
	border: 1px solid transparent;
	border-radius: var(--cpp-radius-xs);
	background: none;
	color: var(--cpp-charcoal);
	cursor: pointer;
	font: inherit;
	font-size: 0.82rem;
	font-weight: 750;
	line-height: 1.35;
	text-align: right;
}

.cpp-app button.cpp-account-trigger small {
	color: var(--cpp-muted);
	font-size: 0.68rem;
	font-weight: 650;
}

.cpp-app button.cpp-account-trigger:hover {
	border-color: var(--cpp-line);
	background: var(--cpp-soft);
}

.cpp-app .cpp-account-dialog {
	width: min(680px, 100%);
	max-height: min(90vh, 900px);
}

.cpp-app .cpp-account-body {
	overflow-y: auto;
	padding: 4px 26px 26px;
}

.cpp-app .cpp-account-section {
	padding: 20px 0;
	border-bottom: 1px solid var(--cpp-line);
}

.cpp-app .cpp-account-section:last-child {
	border-bottom: 0;
	padding-bottom: 4px;
}

.cpp-app .cpp-account-section > h3 {
	margin: 0 0 10px;
	font-size: 0.95rem;
}

.cpp-app .cpp-account-value {
	margin: 0 0 12px;
	overflow-wrap: anywhere;
	font-size: 0.9rem;
}

.cpp-app .cpp-account-section .cpp-form {
	gap: 14px;
}

/* Recovery codes are shown once, so they get room and a deliberate frame. */
.cpp-app .cpp-account-recovery {
	padding: 16px 18px;
	border: 1px solid var(--cpp-warning);
	border-radius: var(--cpp-radius-sm);
	background: var(--cpp-warning-bg);
}

.cpp-app .cpp-account-recovery h4 {
	margin: 0 0 6px;
	color: var(--cpp-warning);
	font-size: 0.9rem;
}

.cpp-app .cpp-account-recovery p {
	margin: 0 0 12px;
	color: var(--cpp-warning);
	font-size: 0.78rem;
	line-height: 1.55;
}

.cpp-app .cpp-mfa-recovery-list {
	display: grid;
	margin: 0 0 14px;
	padding: 0;
	gap: 6px;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	list-style: none;
}

.cpp-app .cpp-mfa-recovery-list code {
	display: block;
	padding: 6px 8px;
	border-radius: var(--cpp-radius-xs);
	background: var(--cpp-surface);
	font-size: 0.82rem;
	letter-spacing: 0.06em;
	text-align: center;
}

/* --- Support request dialog ---------------------------------------- */

.cpp-app .cpp-support-dialog {
	width: min(680px, 100%);
	max-height: min(90vh, 860px);
}

.cpp-app .cpp-support-form {
	padding: 4px 26px 26px;
	gap: 20px;
}

.cpp-app .cpp-support-intro {
	max-width: 62ch;
	margin: 0;
	color: var(--cpp-muted);
	font-size: 0.85rem;
	line-height: 1.6;
}

.cpp-app .cpp-support-form textarea {
	min-height: 140px;
	resize: vertical;
}

/* The support control appears in a sidebar, a card footer, and a dialog
   footer. Only the sidebar variant is a full-width block. */
.cpp-app button.cpp-sidebar-help-support {
	width: 100%;
	border: 0;
	background: none;
	cursor: pointer;
	font: inherit;
	text-align: left;
}

.cpp-app button.cpp-help-link {
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	font: inherit;
}

/* The guest triggers replaced anchors, so they inherit link presentation
   rather than the default button chrome. */
.cpp-app button.cpp-header-help,
.cpp-app .cpp-login-support button.cpp-link-button {
	border: 0;
	background: none;
	cursor: pointer;
	font: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cpp-app button.cpp-header-help {
	padding: 0;
}

/* --- Support request queues --------------------------------------- */

.cpp-app .cpp-ticket-queue {
	margin-top: 30px;
}

.cpp-app .cpp-ticket-queue > .cpp-section-header p {
	max-width: 76ch;
}

/* --- Upload rules and document-reader scope ----------------------- */

.cpp-app .cpp-upload-categories {
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.cpp-app .cpp-upload-category {
	display: grid;
	align-content: start;
	gap: 14px;
	padding: 18px 20px;
	border: 1px solid var(--cpp-line);
	border-radius: var(--cpp-radius-sm);
	background: var(--cpp-soft);
}

.cpp-app .cpp-upload-category header {
	display: grid;
	gap: 5px;
}

.cpp-app .cpp-upload-category h3 {
	margin: 0;
	font-size: 0.94rem;
}

.cpp-app .cpp-upload-category header p {
	max-width: 56ch;
	margin: 0;
	color: var(--cpp-muted);
	font-size: 0.76rem;
	line-height: 1.55;
}

.cpp-app .cpp-upload-types {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	border: 0;
}

.cpp-app .cpp-upload-types legend {
	padding: 0;
	color: var(--cpp-charcoal);
	font-size: 0.76rem;
	font-weight: 750;
}

/*
 * The catalog carries 33 document types, which is a long single column. The
 * list wraps into however many columns fit and scrolls past a sensible height,
 * so it never pushes the sticky save bar off the screen.
 */
.cpp-app .cpp-ai-documents {
	display: grid;
	max-height: 340px;
	margin: 0;
	padding: 4px 2px;
	gap: 9px;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	border: 0;
	overflow-y: auto;
}

/* Marked, not disabled: the owner decides, and the marker is the warning. */
.cpp-app .cpp-ai-documents .cpp-check.is-restricted {
	padding-left: 9px;
	border-left: 2px solid var(--cpp-warning);
}

.cpp-app .cpp-ai-documents .cpp-check small {
	display: block;
	color: var(--cpp-muted);
	font-size: 0.68rem;
	font-weight: 500;
}

.cpp-app .cpp-ai-documents .cpp-check.is-restricted small {
	color: var(--cpp-warning);
	font-weight: 650;
}

.cpp-app .cpp-settings-warning {
	max-width: 78ch;
	margin: 10px 0 0;
	padding: 10px 13px;
	border-left: 3px solid var(--cpp-warning);
	border-radius: var(--cpp-radius-xs);
	background: var(--cpp-warning-bg);
	color: var(--cpp-warning);
	font-size: 0.76rem;
	line-height: 1.55;
}

/* --- Support routing --------------------------------------------- */

.cpp-app .cpp-support-recipients {
	display: grid;
	margin: 4px 0 0;
	padding: 16px 18px;
	gap: 10px;
	border: 1px solid var(--cpp-line);
	border-radius: var(--cpp-radius-sm);
}

.cpp-app .cpp-support-recipients legend {
	padding: 0 6px;
	color: var(--cpp-charcoal);
	font-size: 0.8rem;
	font-weight: 750;
}

.cpp-app .cpp-support-recipients .cpp-check small {
	display: block;
	color: var(--cpp-muted);
	font-size: 0.7rem;
	font-weight: 500;
}

/* --- Quick start guide dialog -------------------------------------- */

.cpp-app .cpp-help-dialog {
	width: min(880px, 100%);
	max-height: min(86vh, 780px);
}

.cpp-app .cpp-help-body {
	display: grid;
	min-height: 0;
	grid-template-columns: 210px minmax(0, 1fr);
}

/* No tab strip when there is only one topic: reclaim its column. */
.cpp-app .cpp-help-body--single {
	grid-template-columns: minmax(0, 1fr);
}

.cpp-app .cpp-help-tabs {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 18px 12px;
	border-right: 1px solid var(--cpp-line);
	background: var(--cpp-soft);
}

.cpp-app .cpp-help-tabs button {
	padding: 11px 13px;
	border: 0;
	border-radius: var(--cpp-radius-xs);
	background: none;
	color: var(--cpp-muted);
	cursor: pointer;
	font-size: 0.83rem;
	font-weight: 700;
	text-align: left;
}

.cpp-app .cpp-help-tabs button:hover {
	background: rgba(0, 0, 0, 0.05);
	color: var(--cpp-charcoal);
}

.cpp-app .cpp-help-tabs button.is-active {
	background: var(--cpp-charcoal);
	color: #fff;
}

.cpp-app .cpp-help-panels {
	overflow: auto;
	padding: 24px 26px;
}

.cpp-app .cpp-help-panel h3 {
	margin: 0 0 6px;
	font-size: 1.2rem;
}

.cpp-app .cpp-help-intro {
	max-width: 70ch;
	margin: 0 0 18px;
	color: var(--cpp-muted);
	font-size: 0.9rem;
}

.cpp-app .cpp-help-steps {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cpp-app .cpp-help-steps li {
	display: grid;
	gap: 14px;
	grid-template-columns: 28px minmax(0, 1fr);
	padding: 14px 0;
	border-top: 1px solid var(--cpp-line);
}

.cpp-app .cpp-help-steps li b {
	display: grid;
	width: 28px;
	height: 28px;
	place-items: center;
	border-radius: 50%;
	background: var(--cpp-orange-soft);
	color: var(--cpp-orange-ink);
	font-size: 0.78rem;
	font-weight: 800;
}

.cpp-app .cpp-help-steps strong {
	display: block;
	margin-bottom: 3px;
	color: var(--cpp-charcoal);
	font-size: 0.92rem;
	font-weight: 700;
}

.cpp-app .cpp-help-steps p {
	max-width: 74ch;
	margin: 0;
	color: var(--cpp-muted);
	font-size: 0.86rem;
	line-height: 1.6;
}

.cpp-app .cpp-help-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	padding: 16px 22px;
	border-top: 1px solid var(--cpp-line);
	background: var(--cpp-soft);
}

.cpp-app .cpp-help-footer p {
	flex: 1 1 240px;
	margin: 0;
	color: var(--cpp-muted);
	font-size: 0.83rem;
}

@media (max-width: 720px) {
	.cpp-app .cpp-help-body {
		grid-template-columns: minmax(0, 1fr);
	}

	.cpp-app .cpp-help-tabs {
		flex-direction: row;
		overflow-x: auto;
		border-right: 0;
		border-bottom: 1px solid var(--cpp-line);
		padding: 10px;
	}

	.cpp-app .cpp-help-tabs button {
		flex: 0 0 auto;
	}
}

/* --- Document center toolbar --------------------------------------- */

.cpp-app .cpp-doc-readiness {
	margin-bottom: 22px;
}

.cpp-app .cpp-doc-toolbar {
	position: sticky;
	z-index: 20;
	top: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-bottom: 22px;
	padding: 14px 0;
	border-bottom: 1px solid var(--cpp-line);
	background: var(--cpp-soft);
}

.cpp-app .cpp-doc-search {
	position: relative;
	display: flex;
	min-width: 240px;
	flex: 1 1 280px;
	align-items: center;
}

.cpp-app .cpp-doc-search svg {
	position: absolute;
	left: 13px;
	width: 17px;
	height: 17px;
	color: var(--cpp-muted-2);
	pointer-events: none;
}

.cpp-app .cpp-doc-search input {
	width: 100%;
	min-height: 44px;
	padding: 10px 14px 10px 38px;
	border: 1px solid var(--cpp-line-strong);
	border-radius: var(--cpp-radius-xs);
	background: var(--cpp-surface);
	color: var(--cpp-ink);
	font-size: 0.88rem;
}

.cpp-app .cpp-doc-search input:focus-visible {
	border-color: var(--cpp-orange);
	box-shadow: var(--cpp-focus);
	outline: none;
}

.cpp-app .cpp-doc-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.cpp-app .cpp-doc-filter {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 38px;
	padding: 7px 13px;
	border: 1px solid var(--cpp-line-strong);
	border-radius: 999px;
	background: var(--cpp-surface);
	color: var(--cpp-muted);
	cursor: pointer;
	font-size: 0.8rem;
	font-weight: 700;
	transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

.cpp-app .cpp-doc-filter b {
	padding: 1px 7px;
	border-radius: 999px;
	background: var(--cpp-soft-2);
	color: var(--cpp-muted);
	font-size: 0.72rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.cpp-app .cpp-doc-filter:hover {
	border-color: var(--cpp-charcoal);
	color: var(--cpp-charcoal);
}

.cpp-app .cpp-doc-filter.is-active {
	border-color: var(--cpp-charcoal);
	background: var(--cpp-charcoal);
	color: #fff;
}

.cpp-app .cpp-doc-filter.is-active b {
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
}

.cpp-app .cpp-doc-filter--attention.is-active,
.cpp-app .cpp-doc-filter--expired.is-active,
.cpp-app .cpp-doc-filter--missing.is-active {
	border-color: var(--cpp-danger);
	background: var(--cpp-danger);
}

.cpp-app .cpp-doc-filter--expiring.is-active {
	border-color: #9a6c00;
	background: #9a6c00;
}

.cpp-app .cpp-doc-filter--valid.is-active {
	border-color: var(--cpp-success);
	background: var(--cpp-success);
}

/* --- Document groups ----------------------------------------------- */

.cpp-app .cpp-document-group.is-empty {
	display: none;
}

.cpp-app .cpp-document-group-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 4px;
}

.cpp-app .cpp-group-toggle {
	display: flex;
	min-width: 0;
	flex: 1 1 auto;
	align-items: center;
	gap: 11px;
	padding: 8px 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
	text-align: left;
}

.cpp-app .cpp-group-caret {
	display: block;
	width: 9px;
	height: 9px;
	flex: 0 0 auto;
	border-right: 2px solid var(--cpp-muted);
	border-bottom: 2px solid var(--cpp-muted);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform 200ms ease;
}

.cpp-app .cpp-document-group.is-collapsed .cpp-group-caret {
	transform: rotate(-45deg) translate(-2px, 2px);
}

.cpp-app .cpp-group-toggle > span:last-child {
	display: grid;
	gap: 2px;
}

.cpp-app .cpp-group-toggle strong {
	color: var(--cpp-charcoal);
	font-size: 1.08rem;
	font-weight: 700;
}

.cpp-app .cpp-group-toggle small {
	color: var(--cpp-muted);
	font-size: 0.78rem;
	font-weight: 600;
}

.cpp-app .cpp-group-meter {
	width: min(220px, 100%);
	flex: 0 0 auto;
}

.cpp-app .cpp-document-group-note {
	max-width: 84ch;
	margin: 0 0 14px;
	color: var(--cpp-muted);
	font-size: 0.84rem;
}

.cpp-app .cpp-document-group.is-collapsed .cpp-document-grid,
.cpp-app .cpp-document-group.is-collapsed .cpp-document-group-note,
.cpp-app .cpp-document-group.is-collapsed .cpp-group-empty {
	display: none;
}

.cpp-app .cpp-group-empty {
	margin: 6px 0 0;
	color: var(--cpp-muted);
	font-size: 0.85rem;
	font-style: italic;
}

.cpp-app .cpp-slot-guidance {
	margin: 0 0 10px;
	color: var(--cpp-charcoal);
	font-size: 0.85rem;
	font-weight: 600;
}

.cpp-app .cpp-slot-detail {
	margin-bottom: 12px;
}

.cpp-app .cpp-slot-detail summary {
	color: var(--cpp-muted);
	cursor: pointer;
	font-size: 0.8rem;
	font-weight: 700;
}

.cpp-app .cpp-slot-detail p {
	margin: 8px 0 0;
	color: var(--cpp-muted);
	font-size: 0.83rem;
	line-height: 1.55;
}

/* --- Loading skeletons --------------------------------------------- */

.cpp-app .cpp-skeleton {
	display: grid;
	gap: 18px;
}

.cpp-app .cpp-skeleton-hero,
.cpp-app .cpp-skeleton-line,
.cpp-app .cpp-skeleton-row > div,
.cpp-app .cpp-skeleton-split > div,
.cpp-app .cpp-skeleton-table > div {
	border-radius: var(--cpp-radius-sm);
	background: linear-gradient(100deg, var(--cpp-soft-2) 30%, #f7f8f9 50%, var(--cpp-soft-2) 70%);
	background-size: 220% 100%;
	animation: cpp-skeleton-shimmer 1.4s ease-in-out infinite;
}

.cpp-app .cpp-skeleton-hero { height: 190px; }
.cpp-app .cpp-skeleton-line { width: 40%; height: 34px; }

.cpp-app .cpp-skeleton-row {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.cpp-app .cpp-skeleton-row > div { height: 116px; }

.cpp-app .cpp-skeleton-split {
	display: grid;
	gap: 18px;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
}

.cpp-app .cpp-skeleton-split > div { height: 340px; }

.cpp-app .cpp-skeleton-table {
	display: grid;
	gap: 8px;
}

.cpp-app .cpp-skeleton-table > div { height: 52px; }

@keyframes cpp-skeleton-shimmer {
	from { background-position: 180% 0; }
	to { background-position: -20% 0; }
}

@media (max-width: 760px) {
	.cpp-app .cpp-skeleton-split {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --- Errors, hints, and validation --------------------------------- */

.cpp-app .cpp-field-hint {
	display: block;
	margin-top: 5px;
	color: var(--cpp-muted);
	font-size: 0.76rem;
	font-weight: 500;
	line-height: 1.45;
}

/* A requester's own help-request history: what they sent, when, and where it
   got to. Deliberately quiet — it is a receipt, not a queue to work. */
.cpp-app .cpp-support-history {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 10px;
}

.cpp-app .cpp-support-history__item {
	padding: 14px 16px;
	border: 1px solid var(--cpp-line, #e4e7ec);
	border-radius: 14px;
	background: var(--cpp-surface, #fff);
}

.cpp-app .cpp-support-history__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.cpp-app .cpp-support-history__head small {
	display: block;
	margin-top: 2px;
	color: var(--cpp-muted);
	font-size: 0.76rem;
}

.cpp-app .cpp-support-history__message {
	margin: 8px 0 0;
	color: var(--cpp-muted);
	font-size: 0.86rem;
	line-height: 1.5;
	white-space: pre-wrap;
	/* Long requests stay a preview; the full text lives on the task. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.cpp-app .cpp-support-history__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 10px;
	color: var(--cpp-muted);
	font-size: 0.74rem;
}

.cpp-app .cpp-support-history__ref {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	letter-spacing: .02em;
}

.cpp-app .cpp-support-history__reply {
	padding: 2px 8px;
	border-radius: 999px;
	background: #e7f6ec;
	color: #0a6b34;
	font-weight: 600;
}

/* A hint that reports a real misconfiguration rather than describing a field,
   so it has to read as a warning and not as more help text. */
.cpp-app .cpp-field-hint--warning {
	color: var(--cpp-danger, #b42318);
	font-weight: 600;
}

/* Per-model cost/accuracy notes under the document-reader model field. */
.cpp-app .cpp-model-notes {
	margin: 8px 0 0;
	padding-left: 18px;
	list-style: disc;
}

.cpp-app .cpp-model-notes li {
	margin: 0 0 3px;
}

.cpp-app .cpp-model-notes code {
	font-size: 0.74rem;
}

.cpp-app .cpp-field-error {
	display: block;
	margin-top: 6px;
	color: var(--cpp-danger);
	font-size: 0.78rem;
	font-weight: 650;
	line-height: 1.45;
}

.cpp-app :where(.cpp-field, .cpp-check).is-invalid :where(input, select, textarea) {
	border-color: var(--cpp-danger);
	background: var(--cpp-danger-bg);
}

.cpp-app :where(.cpp-field, .cpp-check).is-invalid :where(input, select, textarea):focus-visible {
	box-shadow: 0 0 0 3px rgba(161, 43, 35, 0.22);
}

.cpp-app .cpp-form-error {
	display: grid;
	gap: 4px;
	padding: 14px 16px;
	border: 1px solid rgba(161, 43, 35, 0.3);
	border-left: 3px solid var(--cpp-danger);
	border-radius: var(--cpp-radius-xs);
	background: var(--cpp-danger-bg);
	color: var(--cpp-danger);
}

.cpp-app .cpp-form-error strong {
	color: var(--cpp-danger);
	font-size: 0.92rem;
	font-weight: 800;
}

.cpp-app .cpp-form-error .cpp-error-detail {
	color: #7d211b;
	font-size: 0.85rem;
	line-height: 1.5;
}

.cpp-app .cpp-form-error .cpp-error-hint {
	color: #7d211b;
	font-size: 0.83rem;
	font-weight: 500;
	line-height: 1.55;
	opacity: 0.88;
}

.cpp-app .cpp-form-error:focus-visible {
	box-shadow: var(--cpp-focus);
	outline: none;
}

.cpp-app .cpp-empty-state {
	display: grid;
	justify-items: center;
	padding: 34px 26px;
	border: 1px dashed var(--cpp-line-strong);
	border-radius: var(--cpp-radius);
	background: var(--cpp-surface);
	text-align: center;
}

.cpp-app .cpp-empty-state-icon {
	display: grid;
	width: 44px;
	height: 44px;
	place-items: center;
	margin-bottom: 12px;
	border-radius: 50%;
	background: var(--cpp-soft);
	color: var(--cpp-muted);
}

.cpp-app .cpp-empty-state-icon .cpp-nav-icon {
	width: 22px;
	height: 22px;
}

.cpp-app .cpp-empty-state strong {
	color: var(--cpp-charcoal);
	font-size: 1.02rem;
	font-weight: 700;
}

.cpp-app .cpp-empty-state p {
	max-width: 62ch;
	margin: 7px 0 0;
	color: var(--cpp-muted);
	font-size: 0.88rem;
	line-height: 1.6;
}

.cpp-app .cpp-empty-state-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 18px;
}

.cpp-app .cpp-empty-state--error {
	border-style: solid;
	border-color: rgba(161, 43, 35, 0.3);
	background: var(--cpp-danger-bg);
}

.cpp-app .cpp-empty-state--error .cpp-empty-state-icon {
	background: rgba(161, 43, 35, 0.12);
	color: var(--cpp-danger);
}

.cpp-app .cpp-empty-state--error strong {
	color: var(--cpp-danger);
}

.cpp-app .cpp-table-empty {
	padding: 22px 16px;
	color: var(--cpp-muted);
	font-size: 0.87rem;
	text-align: center;
}

.cpp-app .cpp-section-lede {
	max-width: 78ch;
	margin: -8px 0 20px;
	color: var(--cpp-muted);
	font-size: 0.9rem;
}

/* --- Toasts -------------------------------------------------------- */

.cpp-app .cpp-toast {
	display: grid;
	align-items: start;
	gap: 11px;
	grid-template-columns: 10px minmax(0, 1fr) 24px;
	max-width: 400px;
}

.cpp-app .cpp-toast-mark {
	width: 10px;
	height: 10px;
	margin-top: 5px;
	border-radius: 50%;
	background: #8f98a3;
}

.cpp-app .cpp-toast--success .cpp-toast-mark { background: #55bd7c; }
.cpp-app .cpp-toast--warning .cpp-toast-mark { background: #e3b341; }
.cpp-app .cpp-toast--error .cpp-toast-mark { background: #f17a71; }

.cpp-app .cpp-toast-body {
	display: grid;
	gap: 3px;
	min-width: 0;
}

.cpp-app .cpp-toast-body strong {
	font-size: 0.9rem;
	font-weight: 750;
	line-height: 1.35;
}

.cpp-app .cpp-toast-body small {
	font-size: 0.8rem;
	font-weight: 500;
	line-height: 1.5;
	opacity: 0.88;
}

.cpp-app .cpp-toast-close {
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	border-radius: var(--cpp-radius-xs);
	background: none;
	color: inherit;
	cursor: pointer;
	font-size: 1.15rem;
	line-height: 1;
	opacity: 0.6;
}

.cpp-app .cpp-toast-close:hover {
	opacity: 1;
}

/* --- Secure upload progress ---------------------------------------- */

.cpp-app .cpp-upload-progress {
	display: grid;
	gap: 9px;
	margin: 18px 0;
	padding: 15px 17px;
	border: 1px solid var(--cpp-line);
	border-left: 3px solid var(--cpp-orange);
	border-radius: var(--cpp-radius-xs);
	background: var(--cpp-soft);
}

.cpp-app .cpp-upload-progress-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.cpp-app .cpp-upload-progress-head strong {
	color: var(--cpp-charcoal);
	font-size: 0.88rem;
	font-weight: 700;
}

.cpp-app .cpp-upload-progress-head small {
	color: var(--cpp-orange-ink);
	font-size: 0.85rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.cpp-app .cpp-upload-track {
	position: relative;
	display: block;
	overflow: hidden;
	height: 8px;
	border-radius: 999px;
	background: var(--cpp-soft-2);
}

.cpp-app .cpp-upload-track > i {
	display: block;
	width: 0;
	height: 100%;
	background: var(--cpp-orange);
	transition: width 240ms ease;
}

.cpp-app .cpp-upload-progress.is-indeterminate .cpp-upload-track > i {
	width: 40%;
	animation: cpp-upload-sweep 1.15s ease-in-out infinite;
}

.cpp-app .cpp-upload-progress.is-failed {
	border-left-color: var(--cpp-danger);
	background: var(--cpp-danger-bg);
}

.cpp-app .cpp-upload-progress.is-failed .cpp-upload-track > i {
	background: var(--cpp-danger);
}

.cpp-app .cpp-upload-progress.is-failed :where(strong, small) {
	color: var(--cpp-danger);
}

.cpp-app .cpp-upload-note {
	color: var(--cpp-muted);
	font-size: 0.78rem;
	line-height: 1.45;
}

@keyframes cpp-upload-sweep {
	from { transform: translateX(-100%); }
	to { transform: translateX(250%); }
}

.cpp-app .cpp-file-chosen {
	display: block;
	margin-top: 7px;
	font-size: 0.79rem;
	font-weight: 650;
}

.cpp-app .cpp-file-chosen[data-tone="ok"] { color: var(--cpp-success); }
.cpp-app .cpp-file-chosen[data-tone="error"] { color: var(--cpp-danger); }

/* --- Sticky form actions ------------------------------------------- */

.cpp-app .cpp-form-actions--sticky {
	position: sticky;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 14px;
	margin-top: 22px;
	padding: 14px 0 2px;
	border-top: 1px solid var(--cpp-line);
	background: linear-gradient(to top, var(--cpp-surface) 74%, rgba(255, 255, 255, 0));
}

.cpp-app .cpp-form-status {
	margin-right: auto;
	color: var(--cpp-muted);
	font-size: 0.79rem;
	font-weight: 650;
}

.cpp-app form[data-cpp-dirty="true"] .cpp-form-status {
	color: var(--cpp-orange-ink);
}

/* --- Sign-in refinements ------------------------------------------- */

.cpp-app .cpp-password-input {
	position: relative;
	display: flex;
	align-items: center;
}

.cpp-app .cpp-password-input input {
	width: 100%;
	padding-right: 68px;
}

.cpp-app .cpp-password-toggle {
	position: absolute;
	right: 8px;
	padding: 6px 10px;
	border: 0;
	border-radius: var(--cpp-radius-xs);
	background: var(--cpp-soft-2);
	color: var(--cpp-muted);
	cursor: pointer;
	font-size: 0.76rem;
	font-weight: 750;
}

.cpp-app .cpp-password-toggle:hover {
	background: var(--cpp-line);
	color: var(--cpp-charcoal);
}

.cpp-app .cpp-login-help {
	margin-top: 18px;
	padding: 14px 16px;
	border: 1px solid var(--cpp-line);
	border-radius: var(--cpp-radius-xs);
	background: var(--cpp-soft);
}

.cpp-app .cpp-login-help summary {
	color: var(--cpp-charcoal);
	cursor: pointer;
	font-size: 0.85rem;
	font-weight: 700;
}

.cpp-app .cpp-login-help ol {
	margin: 12px 0 0;
	padding-left: 20px;
}

.cpp-app .cpp-login-help li {
	margin-top: 7px;
	color: var(--cpp-muted);
	font-size: 0.84rem;
	line-height: 1.55;
}

.cpp-app .cpp-login-toolbar {
	justify-content: space-between;
}

/* --- Blocked-access notice cards ----------------------------------- */

.cpp-app.cpp-app--notice .cpp-notice-card {
	display: grid;
	max-width: 620px;
	justify-items: start;
	text-align: left;
}

.cpp-app .cpp-notice-card h1 {
	margin: 6px 0 10px;
	font-size: clamp(1.3rem, 2.4vw, 1.75rem);
}

.cpp-app .cpp-notice-card p {
	max-width: 62ch;
	color: var(--cpp-muted);
	font-size: 0.92rem;
	line-height: 1.65;
}

.cpp-app .cpp-notice-guidance {
	margin-top: 12px;
	padding: 12px 14px;
	border-left: 3px solid var(--cpp-orange);
	background: var(--cpp-orange-soft);
	color: var(--cpp-orange-ink) !important;
	font-size: 0.86rem !important;
	font-weight: 600;
}

.cpp-app .cpp-notice-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 11px;
	margin-top: 22px;
}

/* --- Application onboarding ---------------------------------------- */

.cpp-app .cpp-progress-meter {
	margin: 14px 0 10px;
	overflow: hidden;
	height: 6px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.22);
}

.cpp-app .cpp-progress-meter > i {
	display: block;
	height: 100%;
	background: var(--cpp-orange);
	transition: width 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cpp-app .cpp-onboarding-reassure {
	margin-top: 26px;
	padding: 15px 17px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--cpp-radius-sm);
	background: rgba(255, 255, 255, 0.07);
}

.cpp-app .cpp-onboarding-reassure p {
	margin: 0;
	color: rgba(255, 255, 255, 0.78);
	font-size: 0.84rem;
	line-height: 1.6;
}

.cpp-app .cpp-onboarding-reassure strong {
	color: #fff;
}

/* --- Responsive behaviour ------------------------------------------ */

@media (max-width: 900px) {
	.cpp-app .cpp-setup-head,
	.cpp-app .cpp-readiness-head {
		flex-direction: column;
		gap: 16px;
	}

	.cpp-app .cpp-setup-step {
		grid-template-columns: 28px minmax(0, 1fr);
	}

	.cpp-app .cpp-setup-step > .cpp-button {
		grid-column: 2;
		justify-self: start;
	}

	.cpp-app .cpp-group-meter {
		width: 100%;
	}
}

@media (max-width: 620px) {
	.cpp-app .cpp-priority-row {
		flex-wrap: wrap;
	}

	.cpp-app .cpp-priority-main {
		flex: 1 1 100%;
	}

	.cpp-app .cpp-doc-toolbar {
		position: static;
	}

	.cpp-app .cpp-doc-filters {
		overflow-x: auto;
		width: 100%;
		flex-wrap: nowrap;
		padding-bottom: 4px;
	}

	.cpp-app .cpp-doc-filter {
		flex: 0 0 auto;
	}

	.cpp-app .cpp-toast {
		max-width: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cpp-app .cpp-meter > i,
	.cpp-app .cpp-upload-track > i,
	.cpp-app .cpp-progress-meter > i,
	.cpp-app .cpp-group-caret,
	.cpp-app .cpp-legend-item {
		transition: none;
	}

	.cpp-app .cpp-skeleton-hero,
	.cpp-app .cpp-skeleton-line,
	.cpp-app .cpp-skeleton-row > div,
	.cpp-app .cpp-skeleton-split > div,
	.cpp-app .cpp-skeleton-table > div,
	.cpp-app .cpp-upload-progress.is-indeterminate .cpp-upload-track > i {
		animation: none;
	}
}

@media (forced-colors: active) {
	.cpp-app .cpp-meter,
	.cpp-app .cpp-upload-track,
	.cpp-app .cpp-doc-filter,
	.cpp-app .cpp-legend-item,
	.cpp-app .cpp-setup,
	.cpp-app .cpp-readiness-card,
	.cpp-app .cpp-tips {
		border: 1px solid CanvasText;
	}

	.cpp-app .cpp-meter > i,
	.cpp-app .cpp-upload-track > i {
		background: Highlight;
	}

	.cpp-app .cpp-nav-badge {
		border: 1px solid CanvasText;
	}
}

/* Restore the muted/emphasis hierarchy the global dark-surface contrast pass
   flattens with !important, without weakening its guarantees elsewhere. */
html body .cpp-app.cpp-app .cpp-sidebar-help .cpp-sidebar-help-action small {
	color: rgba(255, 255, 255, 0.58) !important;
	-webkit-text-fill-color: rgba(255, 255, 255, 0.58) !important;
}

html body .cpp-app.cpp-app .cpp-sidebar-help .cpp-sidebar-help-support {
	color: rgba(255, 255, 255, 0.6) !important;
	-webkit-text-fill-color: rgba(255, 255, 255, 0.6) !important;
}

html body .cpp-app.cpp-app .cpp-sidebar-help .cpp-sidebar-help-support:hover {
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
}

html body .cpp-app.cpp-app .cpp-toast .cpp-toast-body small {
	color: var(--cpp-on-dark-muted) !important;
	-webkit-text-fill-color: var(--cpp-on-dark-muted) !important;
}

/* =====================================================================
 * Application stage pipeline (CRM style)
 *
 * The chip representing the application can be dragged, tapped, or moved
 * with the keyboard between stages. Stages the applicant has not reached
 * are visibly locked, because the server owns the real state machine.
 * ================================================================== */

.cpp-app .cpp-progress-shell {
	margin-bottom: clamp(28px, 4vw, 46px);
}

.cpp-app .cpp-pipeline {
	--cpp-pipeline-dot: 38px;
	position: relative;
	/* Top band is reserved for the draggable chip so it never sits on a dot. */
	padding: 46px 18px 16px;
	border: 1px solid var(--cpp-line);
	border-radius: var(--cpp-radius);
	background: var(--cpp-surface);
	box-shadow: var(--cpp-shadow-sm);
}

.cpp-app .cpp-pipeline-rail {
	position: absolute;
	z-index: 0;
	top: calc(var(--cpp-pipeline-dot) / 2 - 1px);
	right: 12%;
	left: 12%;
	overflow: hidden;
	height: 3px;
	border-radius: 999px;
	background: var(--cpp-soft-2);
}

.cpp-app .cpp-pipeline-rail-fill {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--cpp-orange);
	transition: width 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cpp-app .cpp-pipeline-stages {
	position: relative;
	z-index: 1;
	display: grid;
	gap: 6px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cpp-app .cpp-pipeline-dot {
	position: relative;
	z-index: 1;
}

.cpp-app .cpp-pipeline-stage {
	display: grid;
	justify-items: center;
	gap: 8px;
	padding: 0 4px 6px;
	border: 0;
	background: none;
	color: var(--cpp-muted);
	cursor: pointer;
	text-align: center;
	transition: color 180ms ease, transform 180ms ease;
}

.cpp-app .cpp-pipeline-dot {
	display: grid;
	width: 38px;
	height: 38px;
	place-items: center;
	border: 2px solid var(--cpp-line-strong);
	border-radius: 50%;
	background: var(--cpp-surface);
	color: var(--cpp-muted);
	font-size: 0.86rem;
	font-weight: 800;
	transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.cpp-app .cpp-pipeline-text {
	display: grid;
	gap: 1px;
}

.cpp-app .cpp-pipeline-text strong {
	color: var(--cpp-charcoal);
	font-size: 0.82rem;
	font-weight: 750;
}

.cpp-app .cpp-pipeline-text small {
	color: var(--cpp-muted);
	font-size: 0.7rem;
	line-height: 1.35;
}

.cpp-app .cpp-pipeline-stage.is-done .cpp-pipeline-dot {
	border-color: var(--cpp-success);
	background: var(--cpp-success);
	color: #fff;
}

.cpp-app .cpp-pipeline-stage.is-current .cpp-pipeline-dot {
	border-color: var(--cpp-orange);
	background: var(--cpp-orange);
	color: #171717;
	box-shadow: 0 0 0 5px rgba(232, 115, 74, 0.18);
}

.cpp-app .cpp-pipeline-stage.is-locked {
	cursor: not-allowed;
}

.cpp-app .cpp-pipeline-stage.is-locked .cpp-pipeline-dot {
	border-style: dashed;
	background: var(--cpp-soft);
}

.cpp-app .cpp-pipeline-stage.is-locked :where(strong, small) {
	color: var(--cpp-muted-2);
}

.cpp-app .cpp-pipeline-stage:not(.is-locked):not(.is-current):hover .cpp-pipeline-dot {
	border-color: var(--cpp-orange);
	color: var(--cpp-orange-ink);
}

.cpp-app .cpp-pipeline-stage:not(.is-locked):hover {
	transform: translateY(-2px);
}

.cpp-app .cpp-pipeline-stage.is-drop-target .cpp-pipeline-dot {
	border-color: var(--cpp-orange);
	background: var(--cpp-orange-soft);
	box-shadow: 0 0 0 6px rgba(232, 115, 74, 0.22);
	transform: scale(1.06);
}

.cpp-app .cpp-pipeline-stage.is-drop-blocked .cpp-pipeline-dot {
	border-color: var(--cpp-danger);
	background: var(--cpp-danger-bg);
	box-shadow: 0 0 0 6px rgba(161, 43, 35, 0.16);
}

/* The draggable chip */
.cpp-app .cpp-pipeline-marker {
	position: absolute;
	z-index: 3;
	top: 9px;
	display: inline-flex;
	height: 30px;
	min-height: 30px;
	align-items: center;
	gap: 7px;
	padding: 0 12px 0 8px;
	border: 1px solid var(--cpp-orange);
	border-radius: 999px;
	background: var(--cpp-charcoal);
	color: #fff;
	cursor: grab;
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	touch-action: none;
	transform: translateX(-50%);
	transition: left 320ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 180ms ease;
	white-space: nowrap;
}

.cpp-app .cpp-pipeline-marker:hover {
	box-shadow: 0 6px 18px rgba(14, 27, 47, 0.24);
}

.cpp-app .cpp-pipeline-marker.is-dragging {
	cursor: grabbing;
	box-shadow: 0 12px 30px rgba(14, 27, 47, 0.32);
	transition: box-shadow 180ms ease;
}

.cpp-app .cpp-pipeline-grip {
	display: grid;
	width: 12px;
	height: 14px;
	align-content: center;
	justify-content: center;
	gap: 2px;
	grid-template-columns: 3px 3px;
}

.cpp-app .cpp-pipeline-grip::before,
.cpp-app .cpp-pipeline-grip::after {
	display: block;
	height: 100%;
	border-radius: 1px;
	background: repeating-linear-gradient(to bottom, var(--cpp-orange) 0 2px, transparent 2px 4px);
	content: "";
}

.cpp-app .cpp-pipeline-status {
	margin: 14px 0 0;
	color: var(--cpp-charcoal);
	font-size: 0.84rem;
	font-weight: 700;
	text-align: center;
}

.cpp-app .cpp-pipeline-help {
	margin: 4px 0 0;
	color: var(--cpp-muted);
	font-size: 0.75rem;
	text-align: center;
}

.cpp-app .cpp-pipeline.is-dragging .cpp-pipeline-stage {
	transform: none;
}

.cpp-app .cpp-pipeline.is-submitted .cpp-pipeline-rail-fill {
	background: var(--cpp-success);
}

/* Left-rail stage cards become shortcuts to the same control. */
.cpp-app .cpp-onboarding-step-list article.is-open {
	cursor: pointer;
}

.cpp-app .cpp-onboarding-step-list article.is-open:hover {
	border-color: rgba(255, 255, 255, 0.4);
	background: rgba(255, 255, 255, 0.08);
}

.cpp-app .cpp-onboarding-step-list article[aria-disabled="true"] {
	cursor: not-allowed;
}

.cpp-app .cpp-onboarding-step-list article:focus-visible {
	outline: 2px solid var(--cpp-orange);
	outline-offset: 2px;
}

@media (max-width: 720px) {
	.cpp-app .cpp-pipeline-stages {
		gap: 2px;
	}

	.cpp-app .cpp-pipeline-text small {
		display: none;
	}

	.cpp-app .cpp-pipeline-text strong {
		font-size: 0.72rem;
	}

	.cpp-app .cpp-pipeline {
		--cpp-pipeline-dot: 34px;
		padding-inline: 12px;
	}

	.cpp-app .cpp-pipeline-dot {
		width: 34px;
		height: 34px;
	}

	/* A four-stage pipeline leaves no room for a labelled chip, so the chip
	   becomes a compact grip and the accessible name carries the meaning. */
	.cpp-app .cpp-pipeline-marker {
		width: 34px;
		height: 34px;
		min-height: 34px;
		justify-content: center;
		padding: 0;
		gap: 0;
	}

	.cpp-app .cpp-pipeline-marker-text {
		position: absolute;
		overflow: hidden;
		width: 1px;
		height: 1px;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cpp-app .cpp-pipeline-marker,
	.cpp-app .cpp-pipeline-rail-fill,
	.cpp-app .cpp-pipeline-stage,
	.cpp-app .cpp-pipeline-dot {
		transition: none;
	}
}

@media (forced-colors: active) {
	.cpp-app .cpp-pipeline,
	.cpp-app .cpp-pipeline-dot,
	.cpp-app .cpp-pipeline-marker {
		border: 1px solid CanvasText;
	}

	.cpp-app .cpp-pipeline-rail-fill {
		background: Highlight;
	}
}

/* Identifier chooser: real line icons, a visible selected state, and copy
   that is allowed to wrap instead of being clipped. */
.cpp-app .cpp-identifier-option {
	grid-template-columns: 42px minmax(0, 1fr) 20px;
	align-items: start;
	padding: 15px 14px;
}

.cpp-app .cpp-identifier-mark {
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: var(--cpp-soft);
	color: var(--cpp-navy);
}

.cpp-app .cpp-identifier-mark svg {
	width: 21px;
	height: 21px;
}

.cpp-app .cpp-identifier-copy {
	min-width: 0;
	align-self: center;
}

.cpp-app .cpp-identifier-option strong {
	font-size: 0.8rem;
	line-height: 1.3;
	white-space: normal;
}

.cpp-app .cpp-identifier-option small {
	font-size: 0.68rem;
	line-height: 1.35;
	white-space: normal;
}

.cpp-app .cpp-identifier-tick {
	display: grid;
	width: 20px;
	height: 20px;
	align-self: center;
	place-items: center;
	border: 1.5px solid var(--cpp-line-strong);
	border-radius: 50%;
	background: #fff;
	transition: border-color 160ms ease, background-color 160ms ease;
}

.cpp-app .cpp-identifier-tick::after {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: transparent;
	content: "";
	transition: background-color 160ms ease;
}

.cpp-app .cpp-identifier-option:has(input:checked) .cpp-identifier-tick {
	border-color: var(--cpp-orange);
}

.cpp-app .cpp-identifier-option:has(input:checked) .cpp-identifier-tick::after {
	background: var(--cpp-orange);
}

.cpp-app .cpp-identifier-option:has(input:checked) .cpp-identifier-mark {
	background: var(--cpp-orange);
	color: #171717;
}

/* =====================================================================
 * Operations console: work queues instead of a flat metric wall.
 * ================================================================== */

.cpp-app .cpp-queue-block + .cpp-queue-block {
	margin-top: 26px;
}

.cpp-app .cpp-queue-note {
	max-width: 78ch;
	margin: 4px 0 0;
	color: var(--cpp-muted);
	font-size: 0.85rem;
}

.cpp-app .cpp-queue-grid {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.cpp-app .cpp-queue-card {
	display: grid;
	align-content: start;
	gap: 4px;
	padding: 18px 18px 16px;
	border: 1px solid var(--cpp-line);
	border-left: 4px solid var(--cpp-line-strong);
	border-radius: var(--cpp-radius-sm);
	background: var(--cpp-surface);
	cursor: pointer;
	text-align: left;
	transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 180ms ease, border-color 180ms ease;
}

.cpp-app .cpp-queue-card:hover {
	border-color: var(--cpp-line-strong);
	box-shadow: var(--cpp-shadow-sm);
	transform: translateY(-2px);
}

.cpp-app .cpp-queue-card b {
	color: var(--cpp-charcoal);
	font-size: 2.1rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.cpp-app .cpp-queue-card strong {
	margin-top: 6px;
	color: var(--cpp-charcoal);
	font-size: 0.92rem;
	font-weight: 750;
}

.cpp-app .cpp-queue-card small {
	color: var(--cpp-muted);
	font-size: 0.78rem;
	line-height: 1.5;
}

.cpp-app .cpp-queue-card--danger { border-left-color: var(--cpp-danger); }
.cpp-app .cpp-queue-card--warning { border-left-color: #d9a30a; }
.cpp-app .cpp-queue-card--success { border-left-color: var(--cpp-success); }

.cpp-app .cpp-queue-card--danger b { color: var(--cpp-danger); }
.cpp-app .cpp-queue-card--warning b { color: #8a6400; }

/* A queue at zero is good news, so it should recede rather than shout. */
.cpp-app .cpp-queue-card.is-empty {
	border-left-color: var(--cpp-line);
	background: var(--cpp-soft);
}

.cpp-app .cpp-queue-card.is-empty b {
	color: var(--cpp-muted-2);
}

.cpp-app .cpp-job-list {
	display: grid;
	gap: 2px;
}

.cpp-app .cpp-job-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 13px 0;
	border-top: 1px solid var(--cpp-line);
}

.cpp-app .cpp-job-row:first-child {
	border-top: 0;
}

.cpp-app .cpp-job-row strong {
	display: block;
	color: var(--cpp-charcoal);
	font-size: 0.88rem;
	font-weight: 700;
}

.cpp-app .cpp-job-row small {
	display: block;
	margin-top: 2px;
	color: var(--cpp-muted);
	font-size: 0.78rem;
}

@media (max-width: 620px) {
	.cpp-app .cpp-queue-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* =====================================================================
 * 3.4 refinement pass
 *
 * Priorities: nothing that reads as a single label may break across two
 * lines, every card keeps one predictable shape, and controls are sized
 * from a shared scale rather than per-component guesses.
 * ================================================================== */

/* --- Labels never split ------------------------------------------- */

/*
 * Written as explicit selectors, not :where(), because :where() contributes
 * no specificity and every earlier per-component rule would win.
 */
.cpp-app .cpp-chip,
.cpp-app .cpp-badge,
.cpp-app .cpp-nav-badge,
.cpp-app [class*="cpp-status--"],
.cpp-app .cpp-button,
.cpp-app .cpp-btn,
.cpp-app button.cpp-table-link,
.cpp-app .cpp-secure-label,
.cpp-app .cpp-match-label {
	white-space: nowrap;
}

/* Wide, wrap-friendly buttons opt back in explicitly. */
.cpp-app .cpp-button--block,
.cpp-app .cpp-button--wrap,
.cpp-app .cpp-setup-step .cpp-button,
.cpp-app .cpp-empty-state .cpp-button {
	white-space: normal;
}

.cpp-app .cpp-secure-label {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 13px;
	border: 1px solid var(--cpp-line);
	border-radius: 999px;
	background: var(--cpp-surface);
	color: var(--cpp-muted);
	font-size: 0.72rem;
	font-weight: 750;
	line-height: 1;
}

.cpp-app .cpp-secure-label > span[aria-hidden] {
	color: var(--cpp-success);
	font-size: 0.6rem;
}

/* --- Shared control scale ------------------------------------------ */

.cpp-app {
	--cpp-control-height: 44px;
}

.cpp-app .cpp-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.cpp-app .cpp-field select,
.cpp-app .cpp-filter-bar input,
.cpp-app .cpp-filter-bar select {
	min-height: var(--cpp-control-height);
}

/* --- Filter bars stay on one line ---------------------------------- */

/*
 * One row, always, above the breakpoint. Fields flex from a zero basis and
 * share the remaining width instead of each demanding a fixed minimum, which
 * is what forced the bar onto two and three lines.
 */
.cpp-app .cpp-filter-bar {
	display: flex;
	flex-wrap: nowrap;
	align-items: end;
	gap: 10px;
	padding: 14px;
	border: 1px solid var(--cpp-line);
	border-radius: var(--cpp-radius-sm);
	background: var(--cpp-surface);
}

.cpp-app .cpp-filter-bar > .cpp-field {
	min-width: 108px;
	flex: 1 1 0;
	margin: 0;
}

.cpp-app .cpp-filter-bar > .cpp-field--search {
	flex: 2 1 0;
	min-width: 150px;
}

.cpp-app .cpp-filter-bar > .cpp-button {
	flex: 0 0 auto;
	height: var(--cpp-control-height);
}

.cpp-app .cpp-filter-bar select,
.cpp-app .cpp-filter-bar input {
	width: 100%;
}

@media (max-width: 900px) {
	.cpp-app .cpp-filter-bar {
		flex-wrap: wrap;
	}

	.cpp-app .cpp-filter-bar > .cpp-field {
		flex: 1 1 160px;
	}

	.cpp-app .cpp-filter-bar > .cpp-field--search {
		flex: 1 1 100%;
	}
}

@media (max-width: 560px) {
	.cpp-app .cpp-filter-bar > .cpp-field,
	.cpp-app .cpp-filter-bar > .cpp-field--search {
		flex: 1 1 100%;
	}

	.cpp-app .cpp-filter-bar > .cpp-button {
		flex: 1 1 calc(50% - 5px);
	}
}

.cpp-app .cpp-bulk-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 14px 0;
	padding: 12px 14px;
	border: 1px solid var(--cpp-line);
	border-radius: var(--cpp-radius-sm);
	background: var(--cpp-soft);
}

.cpp-app .cpp-bulk-bar > .cpp-field { margin: 0; flex: 0 1 210px; }
.cpp-app .cpp-bulk-bar > .cpp-field--grow { flex: 1 1 260px; }
.cpp-app .cpp-bulk-bar > .cpp-button { flex: 0 0 auto; height: var(--cpp-control-height); }
.cpp-app .cpp-bulk-bar > span { margin-left: auto; color: var(--cpp-muted); font-size: 0.8rem; font-weight: 700; white-space: nowrap; }

/* --- Tables --------------------------------------------------------- */

.cpp-app .cpp-table thead th {
	position: sticky;
	z-index: 2;
	top: 0;
	padding: 12px 14px;
	border-bottom: 1px solid var(--cpp-line-strong);
	background: var(--cpp-soft);
	color: var(--cpp-muted);
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	white-space: nowrap;
}

.cpp-app .cpp-table td {
	padding: 14px;
	vertical-align: middle;
}

.cpp-app .cpp-table tbody tr {
	transition: background-color 140ms ease;
}

.cpp-app .cpp-table tbody tr:hover {
	background: var(--cpp-soft);
}

/* Sort controls are text, not boxed buttons. */
.cpp-app .cpp-table thead .cpp-sort-button,
.cpp-app .cpp-table thead button {
	display: inline-flex;
	min-height: 0;
	align-items: center;
	gap: 5px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
}

.cpp-app .cpp-table thead button:hover {
	color: var(--cpp-charcoal);
}

/* The carrier name is a link, not a bordered control. */
.cpp-app .cpp-table-link {
	display: inline-block;
	max-width: 100%;
	overflow: hidden;
	min-height: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--cpp-charcoal);
	cursor: pointer;
	font-size: 0.92rem;
	font-weight: 750;
	text-align: left;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cpp-app .cpp-table-link:hover {
	color: var(--cpp-orange-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cpp-app .cpp-carrier-cell {
	display: flex;
	min-width: 0;
	align-items: center;
	gap: 11px;
}

.cpp-app .cpp-carrier-avatar {
	display: grid;
	width: 34px;
	height: 34px;
	flex: 0 0 34px;
	place-items: center;
	border-radius: 9px;
	background: var(--cpp-orange-soft);
	color: var(--cpp-orange-ink);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.02em;
}

.cpp-app .cpp-carrier-identity {
	display: grid;
	min-width: 0;
	gap: 1px;
}

.cpp-app .cpp-carrier-identity small {
	overflow: hidden;
	color: var(--cpp-muted);
	font-size: 0.75rem;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cpp-app .cpp-cell-mono {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.cpp-app .cpp-cell-mono small,
.cpp-app .cpp-cell-numeric small,
.cpp-app .cpp-cell-time {
	display: block;
	color: var(--cpp-muted);
	font-size: 0.74rem;
	white-space: nowrap;
}

.cpp-app .cpp-cell-numeric strong {
	font-size: 1.05rem;
	font-variant-numeric: tabular-nums;
}

.cpp-app .cpp-carrier-actions,
.cpp-app .cpp-application-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	white-space: nowrap;
}

/* --- Identifier chooser -------------------------------------------- */

.cpp-app .cpp-identifier-grid {
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 12px;
}

/*
 * Stacked rather than columnar: three side-by-side cards left the label
 * column so narrow that words broke a letter at a time.
 */
.cpp-app .cpp-identifier-option {
	display: grid;
	align-items: start;
	gap: 14px;
	grid-template-columns: 44px 1fr;
	grid-template-rows: auto auto;
	padding: 16px;
	border-radius: var(--cpp-radius-sm);
}

.cpp-app .cpp-identifier-mark {
	width: 44px;
	height: 44px;
	grid-row: 1;
	grid-column: 1;
	border-radius: 12px;
}

.cpp-app .cpp-identifier-tick {
	grid-row: 1;
	grid-column: 2;
	justify-self: end;
	align-self: start;
}

.cpp-app .cpp-identifier-copy {
	grid-row: 2;
	grid-column: 1 / -1;
	min-width: 0;
}

.cpp-app .cpp-identifier-option strong {
	display: block;
	margin-bottom: 3px;
	font-size: 0.9rem;
	line-height: 1.3;
	overflow-wrap: break-word;
	word-break: normal;
}

.cpp-app .cpp-identifier-option small {
	display: block;
	color: var(--cpp-muted);
	font-size: 0.76rem;
	line-height: 1.45;
	overflow-wrap: break-word;
	word-break: normal;
}

/* --- FMCSA search results ------------------------------------------ */

.cpp-app .cpp-carrier-result {
	display: grid;
	align-items: center;
	gap: 18px;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1.5fr) auto;
	padding: 18px;
	border: 1px solid var(--cpp-line);
	border-radius: var(--cpp-radius-sm);
	background: var(--cpp-surface);
	transition: border-color 160ms ease, box-shadow 160ms ease;
}

.cpp-app .cpp-carrier-result:hover {
	border-color: var(--cpp-line-strong);
	box-shadow: var(--cpp-shadow-sm);
}

.cpp-app .cpp-carrier-result__main {
	min-width: 0;
}

.cpp-app .cpp-carrier-result__main h3 {
	margin: 2px 0 4px;
	font-size: 1.02rem;
	line-height: 1.25;
}

.cpp-app .cpp-carrier-result__sub {
	margin: 0;
	color: var(--cpp-muted);
	font-size: 0.8rem;
	line-height: 1.45;
}

.cpp-app .cpp-carrier-result__status {
	display: grid;
	gap: 10px;
	margin: 0;
	min-width: 0;
}

.cpp-app .cpp-carrier-result__status div {
	display: grid;
	gap: 3px;
	min-width: 0;
}

.cpp-app .cpp-carrier-result__status dt {
	color: var(--cpp-muted);
	font-size: 0.64rem;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.cpp-app .cpp-carrier-result__status dd {
	margin: 0;
	min-width: 0;
}

.cpp-app .cpp-carrier-result__status .cpp-chip {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cpp-app .cpp-carrier-result__action {
	flex: 0 0 auto;
}

@media (max-width: 820px) {
	.cpp-app .cpp-carrier-result {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}

	.cpp-app .cpp-carrier-result__status {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* --- Official FMCSA match card -------------------------------------- */

.cpp-app .cpp-carrier-confirm {
	display: block;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--cpp-line);
	border-radius: var(--cpp-radius);
	background: var(--cpp-surface);
}

.cpp-app .cpp-carrier-confirm__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 18px;
	padding: 20px 22px;
	border-bottom: 1px solid var(--cpp-line);
	background: var(--cpp-soft);
}

.cpp-app .cpp-carrier-confirm__head h2 {
	margin: 6px 0 2px;
	font-size: clamp(1.1rem, 1.8vw, 1.4rem);
	line-height: 1.25;
}

.cpp-app .cpp-carrier-confirm__head p {
	margin: 0;
	color: var(--cpp-muted);
	font-size: 0.84rem;
}

.cpp-app .cpp-match-label {
	display: inline-block;
	color: var(--cpp-info);
	font-size: 0.64rem;
	font-weight: 800;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}

.cpp-app .cpp-carrier-confirm__facts {
	display: grid;
	gap: 0;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	margin: 0;
	padding: 0;
}

.cpp-app .cpp-carrier-confirm__facts > div {
	display: grid;
	gap: 4px;
	padding: 15px 22px;
	border-right: 1px solid var(--cpp-line);
	border-bottom: 1px solid var(--cpp-line);
}

.cpp-app .cpp-carrier-confirm__facts dt {
	color: var(--cpp-muted);
	font-size: 0.64rem;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.cpp-app .cpp-carrier-confirm__facts dd {
	margin: 0;
	color: var(--cpp-charcoal);
	font-size: 0.92rem;
	font-weight: 700;
}

.cpp-app .cpp-carrier-confirm__authority {
	grid-column: 1 / -1;
}

.cpp-app .cpp-carrier-confirm__note {
	margin: 0;
	padding: 14px 22px;
	color: var(--cpp-muted);
	font-size: 0.8rem;
}

/* --- Checkboxes and radios ------------------------------------------ */

.cpp-app :where(.cpp-check, .cpp-checkbox, .login-remember label) > input[type="checkbox"] {
	position: relative;
	appearance: none;
	-webkit-appearance: none;
	border: 1.5px solid var(--cpp-line-strong);
	border-radius: 5px;
	background: var(--cpp-surface);
	transition: border-color 140ms ease, background-color 140ms ease;
}

.cpp-app :where(.cpp-check, .cpp-checkbox, .login-remember label) > input[type="checkbox"]::after {
	position: absolute;
	top: 47%;
	left: 50%;
	width: 5px;
	height: 9px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	content: "";
	opacity: 0;
	transform: translate(-50%, -55%) rotate(45deg);
	transition: opacity 120ms ease;
}

.cpp-app :where(.cpp-check, .cpp-checkbox, .login-remember label) > input[type="checkbox"]:checked {
	border-color: var(--cpp-orange);
	background: var(--cpp-orange);
}

.cpp-app :where(.cpp-check, .cpp-checkbox, .login-remember label) > input[type="checkbox"]:checked::after {
	opacity: 1;
}

.cpp-app :where(.cpp-check, .cpp-checkbox, .login-remember label) > input[type="checkbox"]:focus-visible {
	box-shadow: var(--cpp-focus);
	outline: none;
}

.cpp-app :where(.cpp-check, .cpp-checkbox) > span {
	line-height: 1.5;
}

/* --- Password reveal ------------------------------------------------ */

.cpp-app .cpp-password-toggle {
	display: grid;
	width: 34px;
	height: 34px;
	min-height: 34px;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--cpp-muted);
}

.cpp-app .cpp-password-toggle:hover {
	background: var(--cpp-soft-2);
	color: var(--cpp-charcoal);
}

.cpp-app .cpp-password-toggle svg {
	width: 19px;
	height: 19px;
}

.cpp-app .cpp-password-toggle .cpp-eye-slash {
	opacity: 0;
	transition: opacity 140ms ease;
}

.cpp-app .cpp-password-toggle.is-revealed {
	color: var(--cpp-orange-ink);
}

.cpp-app .cpp-password-toggle.is-revealed .cpp-eye-slash {
	opacity: 1;
}

.cpp-app .cpp-password-input input {
	padding-right: 48px;
}

.cpp-app .cpp-password-toggle {
	right: 6px;
}

/* --- Password strength guide ---------------------------------------- */

.cpp-app .cpp-password-layout {
	display: grid;
	gap: 22px;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: start;
}

@media (max-width: 780px) {
	.cpp-app .cpp-password-layout {
		grid-template-columns: minmax(0, 1fr);
	}
}

.cpp-app .cpp-password-guide {
	padding: 18px;
	border: 1px solid var(--cpp-line);
	border-radius: var(--cpp-radius-sm);
	background: var(--cpp-soft);
}

.cpp-app .cpp-password-strength-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 9px;
}

.cpp-app .cpp-password-strength-head strong {
	font-size: 0.86rem;
	font-weight: 750;
	white-space: nowrap;
}

.cpp-app .cpp-password-strength-head span {
	color: var(--cpp-muted);
	font-size: 0.8rem;
	font-weight: 750;
	white-space: nowrap;
}

.cpp-app .cpp-password-meter {
	overflow: hidden;
	height: 6px;
	border-radius: 999px;
	background: var(--cpp-soft-2);
}

.cpp-app .cpp-password-checklist {
	display: grid;
	gap: 8px;
	margin: 16px 0 0;
	padding: 0;
	grid-template-columns: minmax(0, 1fr);
	list-style: none;
}

.cpp-app .cpp-password-checklist li {
	display: grid;
	align-items: start;
	gap: 9px;
	grid-template-columns: 17px minmax(0, 1fr);
	margin: 0;
	padding: 0;
	color: var(--cpp-muted);
	font-size: 0.8rem;
	line-height: 1.45;
}

.cpp-app .cpp-password-checklist li::before,
.cpp-app .cpp-password-checklist li::marker {
	content: none;
}

.cpp-app .cpp-password-tick {
	position: relative;
	display: block;
	width: 17px;
	height: 17px;
	margin-top: 1px;
	border: 1.5px solid var(--cpp-line-strong);
	border-radius: 50%;
	background: var(--cpp-surface);
}

.cpp-app .cpp-password-tick::after {
	position: absolute;
	top: 45%;
	left: 50%;
	width: 4px;
	height: 8px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	content: "";
	opacity: 0;
	transform: translate(-50%, -55%) rotate(45deg);
}

.cpp-app :where(.cpp-password-checklist li, .cpp-password-match).is-met {
	color: var(--cpp-success);
}

.cpp-app :where(.cpp-password-checklist li, .cpp-password-match).is-met .cpp-password-tick {
	border-color: var(--cpp-success);
	background: var(--cpp-success);
}

.cpp-app :where(.cpp-password-checklist li, .cpp-password-match).is-met .cpp-password-tick::after {
	opacity: 1;
}

.cpp-app .cpp-password-match {
	display: grid;
	align-items: start;
	gap: 9px;
	grid-template-columns: 17px minmax(0, 1fr);
	margin: 14px 0 0;
	padding-top: 13px;
	border-top: 1px solid var(--cpp-line);
	color: var(--cpp-muted);
	font-size: 0.8rem;
	font-weight: 700;
}

/* --- Recovery codes -------------------------------------------------- */

.cpp-app .cpp-recovery-codes {
	display: grid;
	gap: 8px;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	margin: 18px 0;
	padding: 16px;
	border: 1px solid var(--cpp-line);
	border-radius: var(--cpp-radius-sm);
	background: var(--cpp-soft);
}

.cpp-app .cpp-recovery-codes code {
	padding: 11px 10px;
	border: 1px solid var(--cpp-line);
	border-radius: 8px;
	background: var(--cpp-surface);
	color: var(--cpp-charcoal);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.86rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-align: center;
	white-space: nowrap;
}

/* --- Sign-in ---------------------------------------------------------- */

.cpp-app .cpp-login-panel {
	width: min(430px, 100%);
	padding: clamp(24px, 3vw, 34px);
}

.cpp-app .cpp-login-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 22px;
}

.cpp-app .cpp-login-head {
	margin-bottom: 20px;
}

.cpp-app .cpp-login-head h1 {
	margin: 4px 0 6px;
	font-size: clamp(1.5rem, 2.6vw, 1.9rem);
	letter-spacing: -0.02em;
	text-transform: none;
}

.cpp-app .cpp-login-head p {
	margin: 0;
	color: var(--cpp-muted);
	font-size: 0.88rem;
}

.cpp-app .cpp-login-fields {
	display: grid;
	gap: 14px;
}

.cpp-app .cpp-login-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
}

.cpp-app .cpp-login-row .cpp-check {
	font-size: 0.8rem;
	font-weight: 650;
}

.cpp-app .cpp-button--block {
	width: 100%;
	justify-content: center;
}

.cpp-app .cpp-login-welcome {
	display: grid;
	align-items: start;
	gap: 11px;
	grid-template-columns: 26px minmax(0, 1fr);
	margin-bottom: 20px;
	padding: 13px 15px;
	border: 1px solid rgba(23, 100, 58, 0.24);
	border-radius: var(--cpp-radius-sm);
	background: var(--cpp-success-bg);
}

.cpp-app .cpp-login-welcome-mark {
	display: grid;
	width: 26px;
	height: 26px;
	place-items: center;
	border-radius: 50%;
	background: var(--cpp-success);
	color: #fff;
	font-size: 0.78rem;
	font-weight: 800;
}

.cpp-app .cpp-login-welcome strong {
	display: block;
	color: var(--cpp-success);
	font-size: 0.88rem;
}

.cpp-app .cpp-login-welcome span:last-child {
	color: #1d5638;
	font-size: 0.81rem;
	line-height: 1.5;
}

.cpp-app .cpp-login-welcome--stale {
	border-color: rgba(113, 80, 0, 0.28);
	background: var(--cpp-warning-bg);
}

.cpp-app .cpp-login-welcome--stale .cpp-login-welcome-mark { background: #9a6c00; }
.cpp-app .cpp-login-welcome--stale strong { color: #715000; }
.cpp-app .cpp-login-welcome--stale span:last-child { color: #6a4d05; }

.cpp-app .cpp-login-foot {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--cpp-line);
}

.cpp-app .cpp-login-help ul {
	margin: 10px 0 0;
	padding-left: 18px;
}

.cpp-app .cpp-login-help li {
	margin-top: 7px;
	color: var(--cpp-muted);
	font-size: 0.82rem;
	line-height: 1.55;
}

.cpp-app .cpp-login-help p {
	margin: 10px 0 0;
	color: var(--cpp-muted);
	font-size: 0.82rem;
}

.cpp-app .cpp-login-support {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 16px 0 0;
	font-size: 0.82rem;
}

/* --- Pipeline stages share exactly one width ------------------------ */

.cpp-app .cpp-pipeline-stages {
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.cpp-app .cpp-pipeline-stage {
	min-width: 0;
}

.cpp-app .cpp-pipeline-text {
	min-width: 0;
	width: 100%;
}

.cpp-app .cpp-pipeline-text strong,
.cpp-app .cpp-pipeline-text small {
	display: block;
	overflow: hidden;
	max-width: 100%;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* --- Workspace breadcrumb ------------------------------------------- */

.cpp-app .cpp-workspace-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
	font-size: 0.8rem;
}

.cpp-app .cpp-workspace-breadcrumb button {
	min-height: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--cpp-muted);
	cursor: pointer;
	font: inherit;
	font-weight: 700;
}

.cpp-app .cpp-workspace-breadcrumb button:hover {
	color: var(--cpp-orange-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cpp-app .cpp-workspace-breadcrumb span[aria-hidden] {
	color: var(--cpp-line-strong);
}

.cpp-app .cpp-workspace-breadcrumb [aria-current="page"] {
	color: var(--cpp-charcoal);
	font-weight: 750;
}

.cpp-app .cpp-workspace-heading-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* --- Invitation fallback -------------------------------------------- */

.cpp-app .cpp-invite-backup {
	margin-top: 12px;
}

.cpp-app .cpp-invite-backup summary {
	color: var(--cpp-muted);
	cursor: pointer;
	font-size: 0.8rem;
	font-weight: 700;
}

/* ---------------------------------------------------------------------
 * Table column behaviour
 *
 * The row-actions column carries a 250px !important floor from an earlier
 * pass, which starved the identity column until long company names stacked
 * one letter per line. Give the table a real minimum and let the wrapper
 * scroll instead of crushing a column.
 * ------------------------------------------------------------------ */

.cpp-app .cpp-table-wrap {
	overflow-x: auto;
	border-radius: var(--cpp-radius-sm);
}

.cpp-app .cpp-table {
	min-width: 900px;
}

.cpp-app .cpp-carrier-cell {
	min-width: 210px;
}

html body .cpp-app.cpp-app .cpp-table-link {
	max-width: 260px;
	white-space: nowrap !important;
	overflow: hidden;
	text-overflow: ellipsis;
	word-break: normal !important;
	overflow-wrap: normal !important;
}

/* Two compact actions do not need a quarter of the table. */
html body .cpp-app.cpp-app :where(.cpp-table, .cpp-data-table) td.cpp-carrier-actions,
html body .cpp-app.cpp-app :where(.cpp-table, .cpp-data-table) thead th:last-child {
	min-width: 200px !important;
}

@media (max-width: 780px) {
	.cpp-app .cpp-table {
		min-width: 760px;
	}
}

/* ---------------------------------------------------------------------
 * Visually hidden text
 *
 * The plugin uses .screen-reader-text throughout but never defined it,
 * relying on the host theme. When a theme omits it the spans render as
 * real blocks and silently add a row of height to every filter bar and
 * table header. Define it inside our own scope.
 * ------------------------------------------------------------------ */

.cpp-app .screen-reader-text:not(:focus):not(:active) {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
}

/* Uniform control height across inputs, selects, and buttons in bars. */
.cpp-app .cpp-filter-bar select,
.cpp-app .cpp-filter-bar input,
.cpp-app .cpp-bulk-bar select,
.cpp-app .cpp-bulk-bar input {
	height: var(--cpp-control-height);
	min-height: var(--cpp-control-height);
	padding-block: 0;
}

.cpp-app .cpp-filter-bar .cpp-button,
.cpp-app .cpp-bulk-bar .cpp-button {
	height: var(--cpp-control-height);
	min-height: var(--cpp-control-height);
}

/* ---------------------------------------------------------------------
 * Status pills stay on one line
 *
 * An earlier pass set `white-space: normal !important` on chips so long
 * labels could not overflow their container. The side effect was every
 * two-word status ("On schedule", "Pending Review") breaking across two
 * lines. Keep them on one line and truncate instead, which achieves the
 * original goal without the ragged result.
 * ------------------------------------------------------------------ */

html body .cpp-app.cpp-app :where(.cpp-chip, .cpp-badge, .cpp-pill, .cpp-status-chip, [class*="cpp-status--"]) {
	max-width: 100%;
	overflow: hidden;
	white-space: nowrap !important;
	text-overflow: ellipsis;
	overflow-wrap: normal !important;
	word-break: normal !important;
}

/* The chip's leading dot must not be squeezed away by the ellipsis clamp. */
html body .cpp-app.cpp-app :where(.cpp-chip, .cpp-badge, [class*="cpp-status--"]) > span[aria-hidden] {
	flex: 0 0 auto;
}

/* =====================================================================
 * 3.5 authentication surfaces
 *
 * The sign-in card was a fixed narrow strip, so every step after the
 * password form — authenticator setup, recovery codes — was crammed into
 * it. The panel now grows for the steps that need room, and each step
 * shows where the person is in the flow.
 * ================================================================== */

.cpp-app.cpp-login .cpp-login-panel {
	transition: width 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

/*
 * The panel is a flex item in a nowrap row that also holds the backdrop
 * caption, so flex-shrink was clamping it back to its narrow size no matter
 * what width was declared — including !important. Take it out of the shrink
 * calculation and give it an explicit basis instead.
 */
.cpp-app.cpp-login .cpp-login-panel {
	flex: 0 0 auto;
	max-width: 100%;
}

.cpp-app.cpp-login.is-wide .cpp-login-panel {
	width: min(960px, 100%);
	flex-basis: min(960px, 100%);
	padding: clamp(28px, 4vw, 46px);
}

/* The caption must never compete with the panel for row space. */
.cpp-app.cpp-login .cpp-login-backdrop-label {
	position: absolute;
	right: clamp(16px, 3vw, 40px);
	bottom: clamp(14px, 2.5vw, 28px);
	margin: 0;
	max-width: min(46ch, 40%);
}

/* --- Flow progress --------------------------------------------------- */

.cpp-app .cpp-auth-flow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 18px;
	margin: 0 0 26px;
	padding: 0 0 20px;
	border-bottom: 1px solid var(--cpp-line);
	list-style: none;
}

.cpp-app .cpp-auth-flow li {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	color: var(--cpp-muted-2);
	font-size: 0.82rem;
	font-weight: 700;
	white-space: nowrap;
}

.cpp-app .cpp-auth-flow-mark {
	display: grid;
	width: 24px;
	height: 24px;
	flex: 0 0 24px;
	place-items: center;
	border: 1.5px solid var(--cpp-line-strong);
	border-radius: 50%;
	background: var(--cpp-surface);
	font-size: 0.72rem;
	font-weight: 800;
}

.cpp-app .cpp-auth-flow li.is-done { color: var(--cpp-success); }
.cpp-app .cpp-auth-flow li.is-done .cpp-auth-flow-mark {
	border-color: var(--cpp-success);
	background: var(--cpp-success);
	color: #fff;
}

.cpp-app .cpp-auth-flow li.is-current { color: var(--cpp-charcoal); }
.cpp-app .cpp-auth-flow li.is-current .cpp-auth-flow-mark {
	border-color: var(--cpp-orange);
	background: var(--cpp-orange);
	color: #171717;
}

.cpp-app .cpp-auth-head {
	margin-bottom: 12px;
}

.cpp-app .cpp-auth-head h2 {
	margin: 4px 0 0;
	font-size: clamp(1.3rem, 2.2vw, 1.75rem);
	line-height: 1.25;
	letter-spacing: -0.02em;
	text-transform: none;
}

.cpp-app .cpp-auth-lede {
	max-width: 66ch;
	margin: 0 0 26px;
	color: var(--cpp-muted);
	font-size: 0.93rem;
	line-height: 1.65;
}

/* --- Authenticator setup --------------------------------------------- */

.cpp-app .cpp-mfa-setup {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	margin-bottom: 28px;
}

.cpp-app .cpp-mfa-option {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 22px;
	border: 1px solid var(--cpp-line);
	border-radius: var(--cpp-radius-sm);
	background: var(--cpp-surface);
}

.cpp-app .cpp-mfa-option > header {
	display: flex;
	align-items: center;
	gap: 11px;
}

.cpp-app .cpp-mfa-option h3 {
	margin: 0;
	font-size: 1rem;
	font-weight: 750;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
}

.cpp-app .cpp-option-number {
	display: grid;
	width: 26px;
	height: 26px;
	flex: 0 0 26px;
	place-items: center;
	margin: 0;
	border-radius: 50%;
	background: var(--cpp-orange-soft);
	color: var(--cpp-orange-ink);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0;
	text-transform: none;
}

.cpp-app .cpp-mfa-option p {
	margin: 0;
	color: var(--cpp-muted);
	font-size: 0.84rem;
	line-height: 1.6;
}

.cpp-app .cpp-mfa-qr {
	display: grid;
	place-items: center;
	padding: 16px;
	border: 1px solid var(--cpp-line);
	border-radius: var(--cpp-radius-xs);
	background: #fff;
}

.cpp-app .cpp-mfa-qr svg {
	display: block;
	width: 100%;
	max-width: 190px;
	height: auto;
}

.cpp-app .cpp-mfa-key {
	display: grid;
	gap: 14px;
	margin: 0;
	padding: 16px;
	border: 1px solid var(--cpp-line);
	border-radius: var(--cpp-radius-xs);
	background: var(--cpp-soft);
}

.cpp-app .cpp-mfa-key code {
	display: block;
	padding: 12px;
	border: 1px solid var(--cpp-line);
	border-radius: 8px;
	background: var(--cpp-surface);
	color: var(--cpp-charcoal);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1.7;
	text-align: center;
	/* The key is emitted in four-character groups; wrap between groups. */
	word-break: normal;
	overflow-wrap: normal;
}

.cpp-app .cpp-mfa-key dl {
	display: grid;
	gap: 6px;
	margin: 0;
}

.cpp-app .cpp-mfa-key dl div {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	min-width: 0;
}

.cpp-app .cpp-mfa-key :where(dt, dd) {
	margin: 0;
	font-size: 0.76rem;
}

.cpp-app .cpp-mfa-key dt { color: var(--cpp-muted); white-space: nowrap; }
.cpp-app .cpp-mfa-key dd { overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }

.cpp-app .cpp-auth-code-form {
	display: grid;
	gap: 14px;
	max-width: 340px;
	padding-top: 24px;
	border-top: 1px solid var(--cpp-line);
}

/* --- Recovery codes --------------------------------------------------- */

/*
 * auto-fill, not auto-fit: auto-fit collapses the empty tracks on a short
 * final row, which stretched the last code to a different width.
 */
.cpp-app .cpp-recovery-codes {
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

.cpp-app .cpp-recovery-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

@media (max-width: 620px) {
	.cpp-app .cpp-recovery-codes {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cpp-app .cpp-recovery-actions .cpp-button {
		flex: 1 1 100%;
		justify-content: center;
	}
}

/* --- Checkbox: one custom control, no native remnants ----------------- */

.cpp-app .cpp-check > input[type="checkbox"],
.cpp-app .cpp-checkbox > input[type="checkbox"],
.cpp-app .login-remember label > input[type="checkbox"] {
	position: relative;
	display: block;
	box-sizing: border-box;
	width: 18px;
	min-width: 18px;
	height: 18px;
	flex: 0 0 18px;
	margin: 0;
	padding: 0;
	appearance: none;
	-webkit-appearance: none;
	border: 1.5px solid var(--cpp-line-strong);
	border-radius: 5px;
	background: var(--cpp-surface);
	background-image: none;
	box-shadow: none;
	cursor: pointer;
	transition: border-color 140ms ease, background-color 140ms ease;
	translate: 0 calc((1.5em - 18px) / 2);
}

.cpp-app .cpp-check > input[type="checkbox"]::before,
.cpp-app .cpp-checkbox > input[type="checkbox"]::before,
.cpp-app .login-remember label > input[type="checkbox"]::before {
	content: none;
}

.cpp-app .cpp-check > input[type="checkbox"]::after,
.cpp-app .cpp-checkbox > input[type="checkbox"]::after,
.cpp-app .login-remember label > input[type="checkbox"]::after {
	position: absolute;
	top: 1px;
	left: 5px;
	width: 4px;
	height: 9px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	content: "";
	opacity: 0;
	transform: rotate(45deg);
	transition: opacity 120ms ease;
}

.cpp-app .cpp-check > input[type="checkbox"]:checked,
.cpp-app .cpp-checkbox > input[type="checkbox"]:checked,
.cpp-app .login-remember label > input[type="checkbox"]:checked {
	border-color: var(--cpp-orange-dark);
	background: var(--cpp-orange-dark);
}

.cpp-app .cpp-check > input[type="checkbox"]:checked::after,
.cpp-app .cpp-checkbox > input[type="checkbox"]:checked::after,
.cpp-app .login-remember label > input[type="checkbox"]:checked::after {
	opacity: 1;
}

/* The tick sits in a fixed grid column, so pin both axes or it renders as
   an ellipse rather than a circle. */
.cpp-app .cpp-password-checklist li .cpp-password-tick,
.cpp-app .cpp-password-match .cpp-password-tick {
	width: 18px;
	min-width: 18px;
	height: 18px;
	flex: 0 0 18px;
}

.cpp-app .cpp-password-checklist li,
.cpp-app .cpp-password-match {
	grid-template-columns: 18px minmax(0, 1fr);
}

.cpp-app .cpp-task-title {
	display: grid;
	gap: 4px;
	min-width: 220px;
}

.cpp-app .cpp-task-title small,
.cpp-app .cpp-table td > small {
	display: block;
	margin-top: 4px;
	color: var(--cpp-muted);
}

.cpp-app .cpp-table-actions {
	display: flex;
	gap: 6px;
	min-width: 180px;
}

.cpp-app .cpp-sms-test-log {
	display: grid;
	gap: 14px;
	margin-top: 16px;
	padding: 16px;
	border: 1px solid var(--cpp-line);
	border-left: 4px solid var(--cpp-orange-dark);
	border-radius: 12px;
	background: var(--cpp-surface-soft, #f8f8f7);
}

.cpp-app .cpp-sms-test-log[hidden] {
	display: none;
}

.cpp-app .cpp-sms-test-log.is-success {
	border-left-color: #237a57;
}

.cpp-app .cpp-sms-test-log.is-error {
	border-left-color: #b42318;
	background: #fff8f7;
}

.cpp-app .cpp-sms-test-log > header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.cpp-app .cpp-sms-test-log > header span,
.cpp-app .cpp-sms-test-log dt {
	color: var(--cpp-muted);
	font-size: 12px;
}

.cpp-app .cpp-sms-test-log > p,
.cpp-app .cpp-sms-test-next p {
	margin: 0;
	line-height: 1.55;
}

.cpp-app .cpp-sms-test-log dl {
	display: grid;
	gap: 0;
	margin: 0;
	border: 1px solid var(--cpp-line);
	border-radius: 10px;
	background: var(--cpp-surface);
}

.cpp-app .cpp-sms-test-log dl > div {
	display: grid;
	grid-template-columns: minmax(120px, .7fr) minmax(0, 1.3fr);
	gap: 12px;
	padding: 9px 12px;
	border-bottom: 1px solid var(--cpp-line);
}

.cpp-app .cpp-sms-test-log dl > div:last-child {
	border-bottom: 0;
}

.cpp-app .cpp-sms-test-log dd {
	margin: 0;
	overflow-wrap: anywhere;
	font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
	font-size: 12px;
}

.cpp-app .cpp-sms-test-next {
	display: grid;
	gap: 5px;
}

@media (max-width: 620px) {
	.cpp-app .cpp-sms-test-log > header,
	.cpp-app .cpp-sms-test-log dl > div {
		display: grid;
		grid-template-columns: 1fr;
		gap: 3px;
	}
}

/* ------------------------------------------------------------------
 * Approval chain surfaces
 *
 * A submission now travels driver -> carrier -> compliance team, so three
 * new pieces of UI carry that story: a banner that states where something
 * stands (and why it came back), the carrier's decision cards, and the
 * driver's own record of what was approved and what was not.
 * ---------------------------------------------------------------- */

.cpp-app .cpp-review-banner {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 10px 0 0;
	padding: 10px 12px;
	border-radius: 10px;
	border-left: 3px solid currentColor;
	background: var(--cpp-info-bg);
	color: var(--cpp-info);
	font-size: 13px;
	line-height: 1.5;
}

.cpp-app .cpp-review-banner strong {
	font-weight: 700;
}

.cpp-app .cpp-review-banner span {
	color: inherit;
	opacity: 0.9;
}

.cpp-app .cpp-review-banner--pending {
	background: var(--cpp-warning-bg);
	color: var(--cpp-warning);
}

.cpp-app .cpp-review-banner--valid {
	background: var(--cpp-success-bg);
	color: var(--cpp-success);
}

.cpp-app .cpp-review-banner--expired {
	background: var(--cpp-danger-bg);
	color: var(--cpp-danger);
}

/* Carrier decision cards ------------------------------------------ */

.cpp-app .cpp-approval-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 16px;
	margin: 18px 0 26px;
}

.cpp-app .cpp-approval-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 18px;
	border: 1px solid var(--cpp-line);
	border-radius: 14px;
	background: var(--cpp-surface);
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.cpp-app .cpp-approval-card > header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
}

.cpp-app .cpp-approval-card h3 {
	margin: 2px 0 0;
	font-size: 17px;
	line-height: 1.3;
}

.cpp-app .cpp-approval-note {
	margin: 0;
	padding: 9px 11px;
	border-radius: 9px;
	background: var(--cpp-soft, #f4f6f9);
	font-size: 13px;
	line-height: 1.5;
}

.cpp-app .cpp-approval-note span {
	display: block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	opacity: 0.7;
}

.cpp-app .cpp-approval-decision {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid var(--cpp-line);
}

.cpp-app .cpp-approval-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.cpp-app .cpp-approval-actions .cpp-button {
	flex: 1 1 auto;
}

/* Driver next steps and submission log ---------------------------- */

.cpp-app .cpp-next-step-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cpp-app .cpp-next-step {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 14px;
	border: 1px solid var(--cpp-line);
	border-left-width: 3px;
	border-radius: 10px;
	background: var(--cpp-surface);
}

.cpp-app .cpp-next-step div {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.cpp-app .cpp-next-step span,
.cpp-app .cpp-next-step small {
	font-size: 13px;
	line-height: 1.45;
	opacity: 0.8;
}

.cpp-app .cpp-next-step--urgent {
	border-left-color: var(--cpp-danger);
}

.cpp-app .cpp-next-step--high {
	border-left-color: var(--cpp-warning);
}

.cpp-app .cpp-submission-row--expired td:first-child {
	box-shadow: inset 3px 0 0 var(--cpp-danger);
}

.cpp-app .cpp-submission-row--valid td:first-child {
	box-shadow: inset 3px 0 0 var(--cpp-success);
}

.cpp-app .cpp-submission-row--pending td:first-child {
	box-shadow: inset 3px 0 0 var(--cpp-warning);
}

/* ------------------------------------------------------------------
 * Task workspace
 *
 * One card style and one dialog, used by the console, the carrier
 * workspace, and the driver dashboard. The card deliberately carries a
 * single action: everything else happens inside the dialog, where the
 * document, the history, and the decision are visible together.
 * ---------------------------------------------------------------- */

.cpp-app .cpp-task-group + .cpp-task-group {
	margin-top: 26px;
}

.cpp-app .cpp-task-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 14px;
	margin: 14px 0 4px;
}

.cpp-app .cpp-task-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px 18px;
	border: 1px solid var(--cpp-line);
	border-left: 3px solid var(--cpp-line);
	border-radius: var(--cpp-radius-lg, 14px);
	background: #fff;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.cpp-app .cpp-task-card--urgent { border-left-color: var(--cpp-danger); }
.cpp-app .cpp-task-card--high { border-left-color: var(--cpp-warning); }
.cpp-app .cpp-task-card.is-overdue { border-left-color: var(--cpp-danger); }

.cpp-app .cpp-task-card > header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.cpp-app .cpp-task-kind {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--cpp-muted);
}

.cpp-app .cpp-task-card h3 {
	margin: 0;
	font-size: 16px;
	line-height: 1.35;
}

.cpp-app .cpp-task-context {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--cpp-muted);
}

.cpp-app .cpp-task-detail {
	margin: 0;
	font-size: 13px;
	line-height: 1.55;
	color: var(--cpp-muted);
}

.cpp-app .cpp-task-card > footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: auto;
	padding-top: 10px;
	border-top: 1px solid var(--cpp-line);
}

.cpp-app .cpp-task-card > footer small {
	font-size: 12px;
	color: var(--cpp-muted);
}

.cpp-app .cpp-task-card > footer small.is-overdue {
	font-weight: 700;
	color: var(--cpp-danger);
}

/* Dialog ----------------------------------------------------------- */

.cpp-app .cpp-task-modal {
	width: min(680px, 100%);
}

.cpp-app .cpp-task-instruction {
	margin: 0 0 14px;
	padding: 12px 14px;
	border-radius: 10px;
	background: var(--cpp-info-bg);
	color: var(--cpp-info);
	font-size: 14px;
	line-height: 1.55;
	font-weight: 600;
}

.cpp-app .cpp-task-document {
	margin: 0 0 18px;
	padding: 16px;
	border: 1px solid var(--cpp-line);
	border-radius: 12px;
	background: var(--cpp-soft);
}

.cpp-app .cpp-task-document > header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}

.cpp-app .cpp-task-document h3 {
	margin: 2px 0 0;
	font-size: 16px;
}

.cpp-app .cpp-task-file-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

/* History ---------------------------------------------------------- */

.cpp-app .cpp-task-log h3 {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cpp-muted);
}

.cpp-app .cpp-task-log ul {
	margin: 0 0 20px;
	padding: 0 0 0 18px;
	list-style: none;
	border-left: 2px solid var(--cpp-line);
}

.cpp-app .cpp-log-entry {
	position: relative;
	padding: 0 0 14px;
}

.cpp-app .cpp-log-entry::before {
	content: "";
	position: absolute;
	top: 6px;
	left: -24px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--cpp-line);
}

.cpp-app .cpp-log-entry--decision::before { background: var(--cpp-info); }
.cpp-app .cpp-log-entry--upload::before { background: var(--cpp-success); }

.cpp-app .cpp-log-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	font-size: 12px;
	color: var(--cpp-muted);
}

.cpp-app .cpp-log-meta strong {
	font-size: 13px;
	color: var(--cpp-ink);
}

.cpp-app .cpp-log-badge--internal {
	padding: 1px 7px;
	border-radius: 9px;
	background: var(--cpp-warning-bg);
	color: var(--cpp-warning);
	font-size: 10px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.cpp-app .cpp-log-entry p {
	margin: 3px 0 0;
	font-size: 14px;
	line-height: 1.55;
	white-space: pre-line;
}

/* Save area -------------------------------------------------------- */

.cpp-app .cpp-task-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-top: 18px;
	border-top: 1px solid var(--cpp-line);
}

.cpp-app .cpp-task-field {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 14px;
	border: 1px dashed var(--cpp-line);
	border-radius: 12px;
	background: var(--cpp-soft);
}

.cpp-app .cpp-task-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.cpp-app .cpp-task-actions .cpp-button {
	flex: 1 1 auto;
}

.cpp-app .cpp-task-save-hint {
	margin: 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--cpp-muted);
}

/* Ownership proof step ---------------------------------------------- */

.cpp-app .cpp-inline-success {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0 0 4px;
	padding: 12px 14px;
	border-radius: 10px;
	border-left: 3px solid var(--cpp-success);
	background: var(--cpp-success-bg);
	color: var(--cpp-success);
	font-size: 14px;
	line-height: 1.5;
}

.cpp-app .cpp-inline-success span {
	font-size: 13px;
	opacity: 0.9;
}

/* ------------------------------------------------------------------
 * Message catalog
 *
 * The editor lives in the console rather than wp-admin, so it uses the
 * portal's own design language: cards, not core WordPress tables.
 * ---------------------------------------------------------------- */

.cpp-app .cpp-inline-note {
	margin: 0 0 18px;
	padding: 12px 14px;
	border-radius: 10px;
	border-left: 3px solid var(--cpp-info);
	background: var(--cpp-info-bg);
	color: var(--cpp-info);
	font-size: 13px;
	line-height: 1.55;
}

.cpp-app .cpp-message-group {
	margin: 0 0 28px;
}

.cpp-app .cpp-message-group h2 {
	margin: 0 0 12px;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cpp-muted);
}

.cpp-app .cpp-message-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 14px;
}

.cpp-app .cpp-message-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px 18px;
	border: 1px solid var(--cpp-line);
	border-radius: var(--cpp-radius-lg, 14px);
	background: #fff;
}

.cpp-app .cpp-message-card.is-off {
	opacity: 0.62;
}

.cpp-app .cpp-message-card > header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
}

.cpp-app .cpp-message-card h3 {
	margin: 0;
	font-size: 15px;
	line-height: 1.35;
}

.cpp-app .cpp-message-when {
	margin: 2px 0 0;
	font-size: 12px;
	color: var(--cpp-muted);
}

.cpp-app .cpp-message-when-fixed {
	display: block;
	padding: 9px 12px;
	border-radius: 9px;
	background: var(--cpp-soft);
	font-size: 14px;
}

.cpp-app .cpp-message-flags {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.cpp-app .cpp-pill {
	padding: 2px 8px;
	border-radius: 10px;
	background: var(--cpp-soft);
	color: var(--cpp-muted);
	font-size: 10px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.cpp-app .cpp-pill--info { background: var(--cpp-info-bg); color: var(--cpp-info); }
.cpp-app .cpp-pill--off { background: var(--cpp-danger-bg); color: var(--cpp-danger); }

.cpp-app .cpp-message-subject {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--cpp-ink);
}

.cpp-app .cpp-message-card > footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: auto;
	padding-top: 10px;
	border-top: 1px solid var(--cpp-line);
}

.cpp-app .cpp-message-card > footer small {
	font-size: 12px;
	color: var(--cpp-muted);
}

/* Editor ----------------------------------------------------------- */

.cpp-app .cpp-message-columns {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 22px;
	align-items: start;
}

@media (max-width: 900px) {
	.cpp-app .cpp-message-columns {
		grid-template-columns: minmax(0, 1fr);
	}
}

.cpp-app .cpp-message-main {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.cpp-app .cpp-message-body {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 13.5px;
	line-height: 1.75;
}

.cpp-app .cpp-message-side {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 18px;
	border: 1px solid var(--cpp-line);
	border-radius: 14px;
	background: var(--cpp-soft);
}

.cpp-app .cpp-message-side h3 {
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cpp-muted);
}

.cpp-app .cpp-check-stack {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.cpp-app .cpp-token-list {
	display: flex;
	flex-direction: column;
	gap: 4px;
	max-height: 300px;
	overflow-y: auto;
}

.cpp-app .cpp-token {
	display: flex;
	flex-direction: column;
	gap: 1px;
	padding: 7px 9px;
	border: 1px solid transparent;
	border-radius: 8px;
	background: #fff;
	text-align: left;
	cursor: pointer;
}

.cpp-app .cpp-token:hover,
.cpp-app .cpp-token:focus-visible {
	border-color: var(--cpp-info);
}

.cpp-app .cpp-token code {
	font-size: 12px;
	font-weight: 700;
	color: var(--cpp-info);
}

.cpp-app .cpp-token span {
	font-size: 11px;
	line-height: 1.4;
	color: var(--cpp-muted);
}

.cpp-app .cpp-message-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid var(--cpp-line);
}

.cpp-app .cpp-add-task {
	margin-top: 24px;
	padding: 16px 18px;
}

.cpp-app .cpp-add-task > summary {
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
}

.cpp-app .cpp-add-task > p {
	margin: 10px 0 14px;
	font-size: 13px;
	color: var(--cpp-muted);
}

.cpp-app .cpp-ownership-fieldset {
	margin: 4px 0 0;
	padding: 16px 18px;
	border: 1px dashed var(--cpp-line);
	border-radius: 12px;
	background: var(--cpp-soft);
}

.cpp-app .cpp-ownership-fieldset legend {
	padding: 0 8px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cpp-muted);
}

.cpp-app .cpp-ownership-why {
	margin: 0 0 14px;
	font-size: 13px;
	line-height: 1.55;
	color: var(--cpp-muted);
}

/* ------------------------------------------------------------------
 * Approvals redesign
 *
 * The filter row used to be a full panel with two stacked full-width
 * selects and a hero button — more space than the work it filtered.
 * It is now one inline strip that applies on change.
 * ---------------------------------------------------------------- */

.cpp-app .cpp-task-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 18px;
}

.cpp-app .cpp-task-filters select {
	min-width: 168px;
	height: 36px;
	padding: 0 30px 0 11px;
	font-size: 13px;
	border-radius: 8px;
}

.cpp-app .cpp-task-filters .cpp-button {
	height: 36px;
}

/* The record a task belongs to, on the card and in the dialog. */

.cpp-app .cpp-task-subject {
	margin: 0;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--cpp-ink);
}

.cpp-app .cpp-task-identity {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	margin: 0 0 14px;
	padding: 12px 14px;
	border-radius: 10px;
	background: var(--cpp-soft);
	border-left: 3px solid var(--cpp-ink);
}

.cpp-app .cpp-task-identity-kind {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--cpp-muted);
}

.cpp-app .cpp-task-identity strong {
	font-size: 17px;
	line-height: 1.25;
	color: var(--cpp-ink);
}

.cpp-app .cpp-task-identity-carrier {
	width: 100%;
	font-size: 13px;
	color: var(--cpp-muted);
}

/* An instruction addressed to somebody else reads as information, not a
   call to action, so it drops the blue "do this" treatment. */
.cpp-app .cpp-task-instruction.is-waiting {
	background: var(--cpp-soft);
	color: var(--cpp-muted);
	font-weight: 500;
}

/* ------------------------------------------------------------------
 * Structured fields
 *
 * Every field built by formField() has the same anatomy — label,
 * requirement badge, control, hint, error slot — so spacing, alignment
 * and error placement are decided once instead of per form.
 * ---------------------------------------------------------------- */

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

.cpp-app .cpp-field > span {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px;
}

/* The label row must not collapse when a field sits beside a taller one. */
.cpp-app .cpp-form-grid > .cpp-field {
	align-content: start;
}

.cpp-app .cpp-form-lede {
	margin: 8px 0 18px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--cpp-muted);
}

@media (max-width: 640px) {
	.cpp-app .cpp-form-grid,
	.cpp-app .cpp-form-grid--three {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* A decision that belongs to someone else, shown where the buttons would be. */
.cpp-app .cpp-task-blocked {
	margin: 0;
	padding: 11px 13px;
	border-radius: 9px;
	border-left: 3px solid var(--cpp-line);
	background: var(--cpp-soft);
	color: var(--cpp-muted);
	font-size: 13px;
	line-height: 1.55;
}

/* ------------------------------------------------------------------
 * Step zero: company or driver
 *
 * The two paths are offered as equals, one above the other, because they
 * are genuine alternatives rather than a choice and its fallback. Each
 * card carries what that path actually gives you, so the decision is made
 * on outcomes instead of on a label.
 * ---------------------------------------------------------------- */

.cpp-app .cpp-identifier-grid--stacked {
	grid-template-columns: minmax(0, 1fr);
}

.cpp-app .cpp-applicant-option {
	align-items: flex-start;
}

.cpp-app .cpp-applicant-points {
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 4px;
}

.cpp-app .cpp-applicant-points li {
	position: relative;
	padding-left: 18px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--cpp-muted);
}

.cpp-app .cpp-applicant-points li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 8px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.55;
}

/*
 * "You are applying as X — switch?", under the step heading.
 *
 * A sentence rather than a button, and inside the header's text column rather
 * than beside it: that header is a two-column grid, and anything added as a
 * third child drops into the 48px icon column and comes out as a squeezed blob.
 */
.cpp-app .cpp-step-switch {
	margin: 10px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--cpp-muted);
}

.cpp-app .cpp-step-switch .cpp-link-button {
	font-size: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* The same idea one level up: a queue that is not yours, read deliberately. */
.cpp-app .cpp-task-watching {
	margin: 0 0 4px;
	padding: 11px 13px;
	border-radius: 9px;
	border-left: 3px solid var(--cpp-line);
	background: var(--cpp-soft);
	color: var(--cpp-muted);
	font-size: 13px;
	line-height: 1.55;
}

/* ------------------------------------------------------------------
 * Why a document came back
 *
 * The single most useful thing on the task screen, so it sits directly
 * on the document rather than at the end of the history.
 * ---------------------------------------------------------------- */

.cpp-app .cpp-decision-reason {
	display: flex;
	flex-direction: column;
	gap: 3px;
	margin: 0 0 12px;
	padding: 12px 14px;
	border-radius: 10px;
	border-left: 3px solid currentColor;
	background: var(--cpp-danger-bg);
	color: var(--cpp-danger);
}

.cpp-app .cpp-decision-reason--valid {
	background: var(--cpp-success-bg);
	color: var(--cpp-success);
}

.cpp-app .cpp-decision-reason--pending {
	background: var(--cpp-warning-bg);
	color: var(--cpp-warning);
}

.cpp-app .cpp-decision-reason strong {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.cpp-app .cpp-decision-reason p {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--cpp-ink);
	white-space: pre-line;
}

.cpp-app .cpp-decision-reason small {
	font-size: 12px;
	opacity: 0.85;
}

.cpp-app .cpp-task-log-empty {
	margin: 0 0 20px;
	padding: 12px 14px;
	border-radius: 9px;
	background: var(--cpp-soft);
	color: var(--cpp-muted);
	font-size: 13px;
	line-height: 1.5;
}