/**
 * Tailwind-equivalent styles for documentation content (generated from React docs).
 * Scoped to .docs-content so the rest of the site is unchanged.
 */

.docs-content {
	--tw-blue-50: #eff6ff;
	--tw-blue-100: #dbeafe;
	--tw-blue-200: #bfdbfe;
	--tw-blue-500: #3b82f6;
	--tw-blue-600: #2563eb;
	--tw-blue-700: #1d4ed8;
	--tw-blue-800: #1e40af;
	--tw-blue-900: #1e3a8a;
	--tw-green-50: #f0fdf4;
	--tw-green-100: #dcfce7;
	--tw-green-200: #bbf7d0;
	--tw-green-600: #16a34a;
	--tw-green-700: #15803d;
	--tw-green-800: #166534;
	--tw-green-900: #14532d;
	--tw-purple-50: #faf5ff;
	--tw-purple-100: #f3e8ff;
	--tw-purple-200: #e9d5ff;
	--tw-purple-400: #c084fc;
	--tw-purple-600: #9333ea;
	--tw-purple-700: #7e22ce;
	--tw-purple-800: #6b21a8;
	--tw-purple-900: #581c87;
	--tw-orange-50: #fff7ed;
	--tw-orange-100: #ffedd5;
	--tw-orange-200: #fed7aa;
	--tw-orange-600: #ea580c;
	--tw-orange-700: #c2410c;
	--tw-orange-800: #9a3412;
	--tw-orange-900: #7c2d12;
	--tw-indigo-50: #eef2ff;
	--tw-indigo-100: #e0e7ff;
	--tw-indigo-200: #c7d2fe;
	--tw-indigo-600: #4f46e5;
	--tw-indigo-700: #4338ca;
	--tw-indigo-800: #3730a3;
	--tw-indigo-900: #312e81;
	--tw-red-50: #fef2f2;
	--tw-red-100: #fee2e2;
	--tw-red-200: #fecaca;
	--tw-red-600: #dc2626;
	--tw-red-700: #b91c1c;
	--tw-red-800: #991b1b;
	--tw-red-900: #7f1d1d;
	--tw-yellow-50: #fefce8;
	--tw-yellow-100: #fef9c3;
	--tw-yellow-200: #fde68a;
	--tw-yellow-800: #854d0e;
	--tw-yellow-900: #713f12;
	--tw-gray-100: #f3f4f6;
	--tw-gray-200: #e5e7eb;
	--tw-gray-300: #d1d5db;
	--tw-gray-600: #4b5563;
	--tw-gray-700: #374151;
	--tw-gray-800: #1f2937;
	--tw-gray-900: #111827;
}

/* Layout & spacing – tuned for app-style docs (less gap than default Tailwind) */
.docs-content .space-y-8 > * + * { margin-top: 1.25rem; }
.docs-content .space-y-6 > * + * { margin-top: 1rem; }
.docs-content .space-y-4 > * + * { margin-top: 0.75rem; }
.docs-content .space-y-3 > * + * { margin-top: 0.5rem; }
.docs-content .space-y-2 > * + * { margin-top: 0.375rem; }
.docs-content .space-y-1 > * + * { margin-top: 0.25rem; }
.docs-content .space-x-2 > * + * { margin-left: 0.65rem; }
.docs-content .space-x-3 > * + * { margin-left: 0.75rem; }
.docs-content .space-x-4 > * + * { margin-left: 0.85rem; }

.docs-content .text-center { text-align: center; }
.docs-content .mx-auto { margin-left: auto; margin-right: auto; }
.docs-content .max-w-4xl { max-width: 56rem; }
.docs-content .w-full { width: 100%; }
.docs-content .h-full { height: 100%; }
.docs-content .w-6 { width: 1.5rem; min-width: 1.5rem; }
.docs-content .h-6 { height: 1.5rem; min-height: 1.5rem; }
.docs-content .w-8 { width: 2rem; }
.docs-content .h-8 { height: 2rem; }
.docs-content .flex { display: flex; }
.docs-content .items-center { align-items: center; }
.docs-content .items-start { align-items: flex-start; }
.docs-content .justify-center { justify-content: center; }
.docs-content .flex-shrink-0 { flex-shrink: 0; }
.docs-content .relative { position: relative; }
.docs-content .overflow-hidden { overflow: hidden; }

.docs-content .p-4 { padding: 0.875rem 1rem; }
.docs-content .p-6 { padding: 1rem 1.25rem; }
.docs-content .mb-1 { margin-bottom: 0.2rem; }
.docs-content .mb-2 { margin-bottom: 0.4rem; }
.docs-content .mb-3 { margin-bottom: 0.5rem; }
.docs-content .mb-4 { margin-bottom: 0.6rem; }
.docs-content .mb-6 { margin-bottom: 0.75rem; }
.docs-content .mt-3 { margin-top: 0.5rem; }
.docs-content .mt-4 { margin-top: 0.6rem; }

/* Typography – app-style scale (compact, clear hierarchy) */
.docs-content .text-4xl { font-size: 1.15rem; line-height: 1.35; }
.docs-content .text-3xl { font-size: 1.1rem; line-height: 1.3; }
.docs-content .text-2xl { font-size: 1rem; line-height: 1.35; }
.docs-content .text-xl { font-size: 0.9875rem; line-height: 1.4; }
.docs-content .text-lg { font-size: 0.9375rem; line-height: 1.4; }
.docs-content .text-sm { font-size: 0.8125rem; line-height: 1.4; }
.docs-content .font-bold { font-weight: 700; }
.docs-content .font-semibold { font-weight: 600; }
.docs-content .font-medium { font-weight: 500; }

/* Text colors */
.docs-content .text-white { color: #fff; }
.docs-content .text-gray-900 { color: var(--tw-gray-900); }
.docs-content .text-gray-700 { color: var(--tw-gray-700); }
.docs-content .text-gray-600 { color: var(--tw-gray-600); }
.docs-content .text-gray-300 { color: var(--tw-gray-300); }
.docs-content .text-blue-900 { color: var(--tw-blue-900); }
.docs-content .text-blue-800 { color: var(--tw-blue-800); }
.docs-content .text-blue-700 { color: var(--tw-blue-700); }
.docs-content .text-blue-600 { color: var(--tw-blue-600); }
.docs-content .text-blue-300 { color: #93c5fd; }
.docs-content .text-blue-200 { color: var(--tw-blue-200); }
.docs-content .text-green-900 { color: var(--tw-green-900); }
.docs-content .text-green-300 { color: #86efac; }
.docs-content .text-green-800 { color: var(--tw-green-800); }
.docs-content .text-green-700 { color: var(--tw-green-700); }
.docs-content .text-green-200 { color: var(--tw-green-200); }
.docs-content .text-purple-900 { color: var(--tw-purple-900); }
.docs-content .text-purple-300 { color: #d8b4fe; }
.docs-content .text-purple-800 { color: var(--tw-purple-800); }
.docs-content .text-purple-200 { color: var(--tw-purple-200); }
.docs-content .text-purple-600 { color: var(--tw-purple-600); }
.docs-content .text-purple-400 { color: var(--tw-purple-400); }
.docs-content .text-orange-900 { color: var(--tw-orange-900); }
.docs-content .text-orange-300 { color: #fdba74; }
.docs-content .text-orange-800 { color: var(--tw-orange-800); }
.docs-content .text-orange-200 { color: var(--tw-orange-200); }
.docs-content .text-indigo-900 { color: var(--tw-indigo-900); }
.docs-content .text-indigo-300 { color: #a5b4fc; }
.docs-content .text-indigo-800 { color: var(--tw-indigo-800); }
.docs-content .text-indigo-200 { color: var(--tw-indigo-200); }
.docs-content .text-red-900 { color: var(--tw-red-900); }
.docs-content .text-red-300 { color: #fca5a5; }
.docs-content .text-red-800 { color: var(--tw-red-800); }
.docs-content .text-red-200 { color: var(--tw-red-200); }
.docs-content .text-yellow-900 { color: var(--tw-yellow-900); }
.docs-content .text-yellow-300 { color: #fde047; }
.docs-content .text-yellow-800 { color: var(--tw-yellow-800); }
.docs-content .text-yellow-200 { color: var(--tw-yellow-200); }

/* Backgrounds */
.docs-content .bg-white { background-color: #fff; }
.docs-content .bg-blue-50 { background-color: var(--tw-blue-50); }
.docs-content .bg-blue-500 { background-color: var(--tw-blue-500); }
.docs-content .bg-green-500 { background-color: #22c55e; }
.docs-content .bg-green-600 { background-color: #16a34a; }
.docs-content .bg-gray-50 { background-color: var(--tw-gray-100); }
.docs-content .bg-gray-100 { background-color: var(--tw-gray-100); }
.docs-content .bg-yellow-50 { background-color: var(--tw-yellow-50); }
.docs-content .bg-white.bg-opacity-20 { background-color: rgba(255,255,255,0.2); }
.docs-content .opacity-90 { opacity: 0.9; }

/* Gradients (light theme) */
.docs-content .bg-gradient-to-br.from-blue-50.to-blue-100 {
	background: linear-gradient(to bottom right, var(--tw-blue-50), var(--tw-blue-100));
}
.docs-content .bg-gradient-to-br.from-green-50.to-green-100 {
	background: linear-gradient(to bottom right, var(--tw-green-50), var(--tw-green-100));
}
.docs-content .bg-gradient-to-br.from-purple-50.to-purple-100 {
	background: linear-gradient(to bottom right, var(--tw-purple-50), var(--tw-purple-100));
}
.docs-content .bg-gradient-to-br.from-orange-50.to-orange-100 {
	background: linear-gradient(to bottom right, var(--tw-orange-50), var(--tw-orange-100));
}
.docs-content .bg-gradient-to-br.from-indigo-50.to-indigo-100 {
	background: linear-gradient(to bottom right, var(--tw-indigo-50), var(--tw-indigo-100));
}
.docs-content .bg-gradient-to-br.from-red-50.to-red-100 {
	background: linear-gradient(to bottom right, var(--tw-red-50), var(--tw-red-100));
}

/*
 * Feature cards (emoji + title + body): icon column left of title, consistent gap.
 * Markup: <div class="... bg-gradient-to-br ..."><div class="text-* text-3xl mb-3">…</div><h3>…</h3><p>…</p><ul>…</ul>
 */
.docs-content [class*="bg-gradient-to-br"] {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 0.75rem;
	row-gap: 0.45rem;
	align-items: start;
}

.docs-content [class*="bg-gradient-to-br"] > div.text-3xl {
	grid-column: 1;
	grid-row: 1;
	margin-bottom: 0 !important;
	line-height: 1.2;
	align-self: start;
	min-width: 1.5rem;
	text-align: center;
}

.docs-content [class*="bg-gradient-to-br"] > h3 {
	grid-column: 2;
	grid-row: 1;
	margin-top: 0;
	align-self: start;
}

.docs-content [class*="bg-gradient-to-br"] > h3 ~ * {
	grid-column: 1 / -1;
}
.docs-content .bg-gradient-to-r.from-purple-50.to-indigo-50 {
	background: linear-gradient(to right, var(--tw-purple-50), var(--tw-indigo-50));
}
.docs-content .bg-gradient-to-r.from-blue-500.to-purple-600 {
	background: linear-gradient(to right, #3b82f6, #9333ea);
	color: #fff;
}
/* Gradient section: white text only for title and intro paragraph (first direct h2 + p) */
.docs-content .bg-gradient-to-r.from-blue-500.to-purple-600 > h2,
.docs-content .bg-gradient-to-r.from-blue-500.to-purple-600 > p {
	color: #fff !important;
}
/* Need Help inner cards (translucent): keep white text */
.docs-content .bg-gradient-to-r.from-blue-500.to-purple-600 .bg-white.bg-opacity-20 {
	background-color: rgba(255, 255, 255, 0.2) !important;
	color: #fff;
	border: none;
}
.docs-content .bg-gradient-to-r.from-blue-500.to-purple-600 .bg-white.bg-opacity-20 h3,
.docs-content .bg-gradient-to-r.from-blue-500.to-purple-600 .bg-white.bg-opacity-20 p {
	color: #fff !important;
}
/* Ready to Explore More: glass tiles on gradient — white text for contrast */
.docs-content .bg-gradient-to-r.from-blue-500.to-purple-600 .doc-card--link {
	background-color: rgba(255, 255, 255, 0.2) !important;
	color: #fff !important;
	border: none;
	text-decoration: none;
}
.docs-content .bg-gradient-to-r.from-blue-500.to-purple-600 .doc-card--link:hover {
	background-color: rgba(255, 255, 255, 0.32) !important;
	color: #fff !important;
}
.docs-content .bg-gradient-to-r.from-blue-500.to-purple-600 .doc-card--link h3,
.docs-content .bg-gradient-to-r.from-blue-500.to-purple-600 .doc-card--link p {
	color: #fff !important;
}
.docs-content .bg-gradient-to-r.from-blue-500.to-purple-600 .doc-card--link p {
	opacity: 0.95;
}
.docs-content .bg-gradient-to-r.from-blue-500.to-purple-600 .doc-card--link:hover h3,
.docs-content .bg-gradient-to-r.from-blue-500.to-purple-600 .doc-card--link:hover p {
	color: #fff !important;
}

/* Bottom gradient strip (“Need Help?” / “Ready to Explore More?”): tighter padding */
.docs-content .bg-gradient-to-r.from-blue-500.to-purple-600.p-6 {
	padding: 0.85rem 1rem !important;
}
.docs-content .bg-gradient-to-r.from-blue-500.to-purple-600 > h2 {
	margin-bottom: 0.5rem !important;
}
.docs-content .bg-gradient-to-r.from-blue-500.to-purple-600 > p.mb-4 {
	margin-bottom: 0.6rem !important;
}
.docs-content .bg-gradient-to-r.from-blue-500.to-purple-600 .grid.gap-4 {
	gap: 0.65rem !important;
}
.docs-content .bg-gradient-to-r.from-blue-500.to-purple-600 .bg-white.bg-opacity-20 {
	padding: 0.5rem 0.65rem !important;
}
.docs-content .bg-gradient-to-r.from-blue-500.to-purple-600 .bg-white.bg-opacity-20 h3 {
	margin-bottom: 0.25rem !important;
}
.docs-content .bg-gradient-to-r.from-blue-500.to-purple-600 .doc-card.doc-card--link {
	padding: 0.5rem 0.65rem !important;
}
.docs-content .bg-gradient-to-r.from-blue-500.to-purple-600 .doc-card.doc-card--link h3 {
	margin-bottom: 0.25rem !important;
}

/* Borders */
.docs-content .border { border-width: 1px; border-style: solid; }
.docs-content .border-blue-200 { border-color: var(--tw-blue-200); }
.docs-content .border-blue-700 { border-color: var(--tw-blue-700); }
.docs-content .border-green-200 { border-color: var(--tw-green-200); }
.docs-content .border-green-700 { border-color: var(--tw-green-700); }
.docs-content .border-purple-200 { border-color: var(--tw-purple-200); }
.docs-content .border-purple-700 { border-color: var(--tw-purple-700); }
.docs-content .border-orange-200 { border-color: var(--tw-orange-200); }
.docs-content .border-orange-700 { border-color: var(--tw-orange-700); }
.docs-content .border-indigo-200 { border-color: var(--tw-indigo-200); }
.docs-content .border-indigo-700 { border-color: var(--tw-indigo-700); }
.docs-content .border-red-200 { border-color: var(--tw-red-200); }
.docs-content .border-red-700 { border-color: var(--tw-red-700); }
.docs-content .border-yellow-200 { border-color: var(--tw-yellow-200); }
.docs-content .border-yellow-700 { border-color: #ca8a04; }
.docs-content .border-gray-200 { border-color: var(--tw-gray-200); }
.docs-content .border-gray-600 { border-color: var(--tw-gray-600); }
.docs-content .rounded-lg { border-radius: 0.5rem; }
.docs-content .rounded-full { border-radius: 9999px; }

/* Grid */
.docs-content .grid { display: grid; }
.docs-content .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.docs-content .gap-4 { gap: 1rem; }
.docs-content .gap-6 { gap: 1.5rem; }
.docs-content .shadow-lg { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); }

@media (min-width: 768px) {
	.docs-content .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.docs-content .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.docs-content .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.docs-content .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Video aspect ratio */
.docs-content .aspect-video { aspect-ratio: 16 / 10; }
.docs-content .aspect-video iframe { display: block; width: 100%; height: 100%; }

/* Ordered lists: numbers must show, match reference (indent box, number column + text) */
.docs-content ol,
.docs-content .list-decimal {
	list-style-type: decimal !important;
	list-style-position: outside;
	padding-left: 2em;
	margin: 0 0 0 0.25rem;
}
.docs-content ol li,
.docs-content .list-decimal li {
	list-style-type: decimal !important;
	list-style-position: outside;
	padding-left: 0.4em;
	margin-bottom: 0.35rem;
}
.docs-content ol li::marker,
.docs-content .list-decimal li::marker {
	color: var(--tw-gray-700);
	font-weight: 600;
}
.docs-content ol li:last-child,
.docs-content .list-decimal li:last-child {
	margin-bottom: 0;
}
.docs-content ol.list-decimal.list-inside {
	padding-left: 2em;
	margin: 0;
	list-style-position: outside;
}
.docs-content ol.list-decimal.list-inside li {
	padding-left: 0.4em;
	margin-bottom: 0.35rem;
}
/* Step box: grey card indented from sub-heading, clear left margin so numbers visible */
.docs-content .bg-white.rounded-lg.border {
	padding: 0.75rem 1rem 0.875rem 1.25rem;
	margin-left: 0;
	margin-top: 0.25rem;
}
.docs-content .bg-white.rounded-lg.border ol {
	padding-left: 2em;
}
/* Quick Start Checklist: green box styling to match reference */
.docs-content .bg-green-50.border-green-200 {
	border-radius: 0.5rem;
	box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.docs-content .bg-gray-50.border-gray-200 {
	border-radius: 0.5rem;
	box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

/* CTA at bottom - match original gradient */
.docs-content .docs-cta.mt-4 { margin-top: 1.5rem; }

/* Narrow viewports: keep Tailwind-style content inside the viewport */
@media (max-width: 991.98px) {
	.docs-content {
		max-width: 100%;
		box-sizing: border-box;
		overflow-x: hidden;
		overflow-wrap: break-word;
	}

	.docs-content .grid {
		min-width: 0;
	}

	.docs-content .flex {
		min-width: 0;
	}

	.docs-content img,
	.docs-content video,
	.docs-content iframe {
		max-width: 100%;
	}

	.docs-content .aspect-video {
		max-width: 100%;
	}
}