/*
 * Standalone HTML pages (not signed-in app). Breakpoint names: see COAL_UI_BREAKPOINTS in app.css.
 */
.coal-skip-link {
	position: absolute;
	left: -9999px;
	top: 0.75rem;
	z-index: 10001;
	padding: 0.5rem 1rem;
	background: var(--bg-surface);
	color: var(--accent);
	border-radius: 8px;
	border: 1px solid var(--border);
	font-weight: 600;
	font-size: 0.875rem;
	text-decoration: none;
}
.coal-skip-link:focus {
	left: 0.75rem;
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}
.coal-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	max-width: 100%;
}

@media (max-width: 767px) {
	body.profile-page .profile-main,
	body.onboarding-page .onboarding-main,
	body.integration-detail .integration-detail-main,
	body.data-section-page .main {
		padding-left: 1rem;
		padding-right: 1rem;
	}
	body.profile-page .profile-header,
	body.onboarding-page .onboarding-header,
	body.integration-detail .integration-detail-header {
		padding-left: 1rem;
		padding-right: 1rem;
	}
	body.integration-detail .data-setup-card {
		padding: 1.25rem;
	}
	body.onboarding-page .onboarding-main {
		padding-top: 1.25rem;
	}
	body.mapping-page {
		padding: 0.75rem;
	}
	body.mapping-page .header {
		margin-bottom: 1rem;
	}
	body.mapping-page .header h1 {
		font-size: 1.05rem;
	}
	body.mapping-page .mapping-container {
		min-height: calc(100vh - 100px);
	}
	body.data-section-page .header {
		flex-wrap: wrap;
		gap: 0.75rem;
	}
	body.integration-detail .integration-detail-header {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		justify-content: space-between;
		gap: 0.75rem;
	}
}