/**
 * Blogger Autopilot v1.5.1 — Complete UI Component Stylesheet (assets/ui/components.css).
 * 100% CSS Logical Properties (RTL/LTR bidirectional), WCAG 2.2 AA Focus Rings, 44px Touch Targets,
 * prefers-reduced-motion compliance, and Responsive Breakpoints at 480px, 768px, and 1024px.
 *
 * Components covered:
 *  - Buttons (primary, secondary, ghost, danger, sm, lg, icon, is-loading)
 *  - Inputs, Selects, Textareas, Toggles/Switches
 *  - Badges & Chips
 *  - Cards & Bento Containers
 *  - Tables (Responsive stacked layout on mobile <= 768px)
 *  - Empty States & Skeletons
 *  - Dialogs / Modals & Drawers
 *  - Tabs, Stepper, Progress & Native Meters
 *  - Alerts, Toasts & Tooltips
 *  - Interactive Guide Player, Annotated SVG Illustrations & Decision Tree
 */

/* SVG Sprite Hidden Container */
.bap-svg-sprite {
	position: absolute;
	inline-size: 0;
	block-size: 0;
	overflow: hidden;
	pointer-events: none;
}

.bap-icon {
	display: inline-block;
	vertical-align: middle;
	flex-shrink: 0;
}

.bap-icon--accent {
	color: var(--bap-primary);
}

/* 1. Buttons (44px min touch target) */
.bap-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--bap-space-2);
	min-block-size: 2.75rem;
	min-inline-size: 2.75rem;
	padding-block: var(--bap-space-2);
	padding-inline: var(--bap-space-4);
	border-radius: var(--bap-radius-md);
	font-weight: 600;
	font-size: var(--bap-text-sm);
	line-height: 1.25;
	border: 1px solid var(--bap-border);
	background: var(--bap-surface-2);
	color: var(--bap-text);
	cursor: pointer;
	text-decoration: none;
	transition: background-color 150ms ease, border-color 150ms ease, transform 120ms ease, opacity 150ms ease;
}

.bap-btn:hover:not(:disabled) {
	border-color: var(--bap-primary);
}

.bap-btn:focus-visible {
	outline: 3px solid var(--bap-focus-ring);
	outline-offset: 2px;
}

.bap-btn:disabled,
.bap-btn.is-loading {
	opacity: 0.65;
	cursor: not-allowed;
}

.bap-btn--primary,
.bap-btn-primary {
	background: var(--bap-primary);
	color: var(--bap-primary-contrast);
	border-color: transparent;
}

.bap-btn--secondary {
	background: var(--bap-surface-2);
	color: var(--bap-text);
	border-color: var(--bap-border);
}

.bap-btn--ghost {
	background: transparent;
	color: var(--bap-text-muted);
	border-color: transparent;
}

.bap-btn--ghost:hover:not(:disabled) {
	background: var(--bap-surface-2);
	color: var(--bap-text);
}

.bap-btn--danger,
.bap-btn-danger {
	background: var(--bap-danger);
	color: var(--bap-bg);
	border-color: transparent;
}

.bap-btn--sm,
.bap-btn-sm {
	min-block-size: 2.75rem;
	padding-block: var(--bap-space-1);
	padding-inline: var(--bap-space-3);
	font-size: var(--bap-text-xs);
}

.bap-btn--lg,
.bap-btn-lg {
	min-block-size: 3.125rem;
	padding-block: var(--bap-space-3);
	padding-inline: var(--bap-space-6);
	font-size: var(--bap-text-base);
}

.bap-btn--icon {
	padding-inline: var(--bap-space-2);
	min-inline-size: 2.75rem;
	min-block-size: 2.75rem;
	border-radius: var(--bap-radius-md);
}

/* 2. Inputs, Selects, Toggles */
.bap-input,
.bap-select,
.bap-textarea {
	inline-size: 100%;
	min-block-size: 2.75rem;
	padding-block: var(--bap-space-2);
	padding-inline: var(--bap-space-3);
	background: var(--bap-bg);
	color: var(--bap-text);
	border: 1px solid var(--bap-border);
	border-radius: var(--bap-radius-md);
	font-size: var(--bap-text-base);
	transition: border-color 150ms ease, box-shadow 150ms ease;
}

.bap-input:focus-visible,
.bap-select:focus-visible,
.bap-textarea:focus-visible {
	outline: 3px solid var(--bap-focus-ring);
	outline-offset: 1px;
	border-color: var(--bap-primary);
}

.bap-toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--bap-space-2);
	min-block-size: 2.75rem;
	cursor: pointer;
}

.bap-label-with-help {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bap-space-2);
	margin-block-end: var(--bap-space-1);
}

/* 3. Badges & Chips */
.bap-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--bap-space-1);
	padding-block: 0.2rem;
	padding-inline: 0.65rem;
	border-radius: 999px;
	font-size: var(--bap-text-xs);
	font-weight: 600;
	background: var(--bap-surface-2);
	color: var(--bap-text);
	border: 1px solid var(--bap-border);
}

.bap-badge--primary {
	background: var(--bap-primary);
	color: var(--bap-primary-contrast);
	border-color: transparent;
}

.bap-chip {
	display: inline-flex;
	align-items: center;
	min-block-size: 2.75rem;
	padding-block: var(--bap-space-1);
	padding-inline: var(--bap-space-3);
	border-radius: 999px;
	font-size: var(--bap-text-xs);
	font-weight: 600;
	background: var(--bap-surface-2);
	color: var(--bap-text-muted);
	border: 1px solid var(--bap-border);
	text-decoration: none;
}

.bap-chip.is-active {
	background: var(--bap-primary);
	color: var(--bap-primary-contrast);
	border-color: transparent;
}

/* 4. Cards */
.bap-card {
	background: var(--bap-surface);
	border: 1px solid var(--bap-border);
	border-radius: var(--bap-radius-lg);
	padding: var(--bap-space-6);
	box-shadow: var(--bap-shadow-md);
}

/* 5. Responsive Tables */
.bap-table-wrap {
	inline-size: 100%;
	overflow-x: auto;
}

.bap-table {
	inline-size: 100%;
	border-collapse: collapse;
	text-align: start;
}

.bap-table th,
.bap-table td {
	padding-block: var(--bap-space-3);
	padding-inline: var(--bap-space-4);
	border-block-end: 1px solid var(--bap-border);
	text-align: start;
}

/* 6. Empty States & Skeletons */
.bap-empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding-block: var(--bap-space-8);
	padding-inline: var(--bap-space-4);
	background: var(--bap-surface-2);
	border: 1px dashed var(--bap-border);
	border-radius: var(--bap-radius-lg);
	gap: var(--bap-space-3);
}

.bap-skeleton-group {
	display: flex;
	flex-direction: column;
	gap: var(--bap-space-2);
	inline-size: 100%;
}

.bap-skeleton {
	background: var(--bap-surface-2);
	border-radius: var(--bap-radius-sm);
	block-size: 1rem;
	inline-size: 100%;
	animation: bap-pulse 1.6s ease-in-out infinite;
}

.bap-skeleton--short {
	inline-size: 65%;
}

@keyframes bap-pulse {
	0%, 100% { opacity: 0.55; }
	50% { opacity: 1; }
}

/* 7. Dialogs / Modals & Scroll Lock */
.bap-scroll-locked {
	overflow: hidden;
}

.bap-dialog-backdrop {
	position: fixed;
	inset-block: 0;
	inset-inline: 0;
	background: rgba(2, 6, 23, 0.78);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--bap-space-4);
	z-index: 9998;
}

.bap-dialog-backdrop[hidden] {
	display: none;
}

.bap-dialog {
	background: var(--bap-surface);
	border: 1px solid var(--bap-border);
	border-radius: var(--bap-radius-lg);
	inline-size: 100%;
	max-inline-size: 48rem;
	max-block-size: 90vh;
	overflow-y: auto;
	box-shadow: var(--bap-shadow-md);
}

.bap-dialog--xl {
	max-inline-size: 62rem;
}

.bap-dialog__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bap-space-3);
	padding-block: var(--bap-space-4);
	padding-inline: var(--bap-space-6);
	border-block-end: 1px solid var(--bap-border);
}

.bap-dialog__title {
	margin: 0;
	font-size: var(--bap-text-lg);
}

.bap-dialog__body {
	padding: var(--bap-space-6);
}

/* 8. Tabs, Stepper, Progress & Native Meters */
.bap-progress-bar-native,
.bap-meter-native {
	appearance: none;
	inline-size: 100%;
	block-size: 0.55rem;
	border-radius: 999px;
	overflow: hidden;
	border: none;
	background: var(--bap-surface-2);
	margin-block: var(--bap-space-2);
}

.bap-progress-bar-native::-webkit-progress-bar,
.bap-meter-native::-webkit-progress-bar {
	background: var(--bap-surface-2);
	border-radius: 999px;
}

.bap-progress-bar-native::-webkit-progress-value,
.bap-meter-native::-webkit-progress-value {
	background: var(--bap-primary);
	border-radius: 999px;
}

.bap-stepper {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bap-space-3);
	margin-block-end: var(--bap-space-6);
}

.bap-stepper__step {
	flex: 1 1 10rem;
	padding: var(--bap-space-3);
	border-radius: var(--bap-radius-md);
	background: var(--bap-surface-2);
	border: 1px solid var(--bap-border);
	font-size: var(--bap-text-sm);
	font-weight: 600;
}

.bap-stepper__step.is-active {
	border-color: var(--bap-primary);
	color: var(--bap-primary);
}

.bap-stepper__step.is-completed {
	border-color: var(--bap-success);
}

/* 9. Alerts, Toast Stack & Tooltips */
.bap-alert {
	display: flex;
	align-items: flex-start;
	gap: var(--bap-space-3);
	padding: var(--bap-space-4);
	border-radius: var(--bap-radius-md);
	border: 1px solid var(--bap-border);
	background: var(--bap-surface-2);
	color: var(--bap-text);
	margin-block: var(--bap-space-3);
}

.bap-alert--success {
	border-inline-start: 4px solid var(--bap-success);
}

.bap-alert--warn {
	border-inline-start: 4px solid var(--bap-warn);
}

.bap-alert--danger,
.bap-alert--error {
	border-inline-start: 4px solid var(--bap-danger);
}

.bap-alert--info {
	border-inline-start: 4px solid var(--bap-info);
}

.bap-toast-stack {
	position: fixed;
	inset-block-end: var(--bap-space-4);
	inset-inline-end: var(--bap-space-4);
	z-index: 9999;
	display: flex;
	flex-direction: column;
	gap: var(--bap-space-2);
	max-inline-size: 24rem;
}

.bap-toast {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bap-space-3);
	padding-block: var(--bap-space-3);
	padding-inline: var(--bap-space-4);
	border-radius: var(--bap-radius-md);
	background: var(--bap-surface);
	color: var(--bap-text);
	border: 1px solid var(--bap-border);
	box-shadow: var(--bap-shadow-md);
	font-size: var(--bap-text-sm);
}

.bap-toast__dismiss {
	background: transparent;
	border: none;
	color: var(--bap-text-muted);
	cursor: pointer;
	min-inline-size: 2.75rem;
	min-block-size: 2.75rem;
	font-size: var(--bap-text-lg);
}

[data-tooltip] {
	position: relative;
}

/* 10. Interactive Guide Player, SVG Illustrations & Decision Tree */
.bap-guide-header__top,
.bap-guide-step-card__header,
.bap-step-guide-item__header,
.bap-provider-guide__header,
.bap-checklist-card__header,
.bap-dtree-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--bap-space-3);
	margin-block-end: var(--bap-space-3);
}

.bap-guide-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bap-space-2);
	margin-block-start: var(--bap-space-3);
}

.bap-guide-steps-list {
	display: flex;
	flex-direction: column;
	gap: var(--bap-space-4);
	margin-block: var(--bap-space-4);
}

.bap-step-guide-item,
.bap-provider-guide,
.bap-checklist-item {
	background: var(--bap-surface-2);
	border: 1px solid var(--bap-border);
	border-radius: var(--bap-radius-md);
	padding: var(--bap-space-4);
}

.bap-step-guide-item.is-completed,
.bap-guide-step-card.is-completed,
.bap-checklist-item.is-completed {
	border-inline-start: 4px solid var(--bap-success);
}

.bap-step-guide-item.is-failed,
.bap-guide-step-card.is-failed,
.bap-checklist-item.is-failed {
	border-inline-start: 4px solid var(--bap-danger);
}

.bap-step-number,
.bap-checklist-item__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 1.75rem;
	block-size: 1.75rem;
	border-radius: 999px;
	background: var(--bap-primary);
	color: var(--bap-primary-contrast);
	font-weight: 700;
	font-size: var(--bap-text-xs);
	flex-shrink: 0;
}

.bap-guide-illustration {
	margin-block: var(--bap-space-3);
	margin-inline: 0;
}

.bap-guide-svg {
	display: block;
	inline-size: 100%;
	max-inline-size: 32.5rem;
	block-size: auto;
	border-radius: var(--bap-radius-md);
}

.bap-copy-box,
.bap-code-example,
.bap-d17-card {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--bap-space-2);
	padding: var(--bap-space-3);
	background: var(--bap-bg);
	border: 1px solid var(--bap-border);
	border-radius: var(--bap-radius-md);
	margin-block: var(--bap-space-3);
}

.bap-copy-box__code,
.bap-code-example__url {
	font-family: var(--bap-font-mono);
	font-size: var(--bap-text-sm);
	color: var(--bap-primary);
	word-break: break-all;
}

.bap-code-highlight {
	background: var(--bap-surface-2);
	color: var(--bap-success);
	padding-inline: var(--bap-space-1);
	border-radius: var(--bap-radius-sm);
}

.bap-guide-meta-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: var(--bap-space-3);
	margin-block: var(--bap-space-3);
}

.bap-guide-meta-box {
	padding: var(--bap-space-3);
	background: var(--bap-bg);
	border-radius: var(--bap-radius-md);
	border: 1px solid var(--bap-border);
}

.bap-guide-meta-box__label {
	display: block;
	font-size: var(--bap-text-xs);
	color: var(--bap-text-muted);
	margin-block-end: var(--bap-space-1);
}

.bap-guide-meta-box__text {
	margin: 0;
	font-size: var(--bap-text-sm);
}

.bap-guide-step-card__footer,
.bap-step-guide-item__actions,
.bap-checklist-item__actions,
.bap-dtree-options {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bap-space-2);
	margin-block-start: var(--bap-space-3);
}

.bap-dtree-option-btn {
	inline-size: 100%;
	justify-content: space-between;
	text-align: start;
}

/* 11. Responsive Breakpoints (1024px, 768px, 480px) */
@media (max-width: 1024px) {
	.bap-card {
		padding: var(--bap-space-4);
	}
	.bap-dialog {
		max-inline-size: 94vw;
	}
}

@media (max-width: 768px) {
	.bap-table thead {
		display: none;
	}
	.bap-table,
	.bap-table tbody,
	.bap-table tr,
	.bap-table td {
		display: block;
		inline-size: 100%;
	}
	.bap-table tr {
		margin-block-end: var(--bap-space-3);
		border: 1px solid var(--bap-border);
		border-radius: var(--bap-radius-md);
		padding: var(--bap-space-2);
	}
	.bap-guide-meta-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	/* v1.5.5: buttons are no longer forced to 100% width here (it broke flex rows); see responsive.css */
	.bap-dialog__header,
	.bap-dialog__body {
		padding: var(--bap-space-3);
	}
}

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