/* Custom styles beyond Tailwind CDN */

/* Smooth transitions for HTMX swaps */
.htmx-swapping {
    opacity: 0.5;
    transition: opacity 200ms ease-in;
}

.htmx-settling {
    opacity: 1;
    transition: opacity 200ms ease-in;
}

/* Focus ring improvements */
input:focus, select:focus, textarea:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

/* Prose-like styling for KB articles */
.prose h1 { font-size: 2em; font-weight: 700; margin-top: 2rem; margin-bottom: 1rem; }
.prose h2 { font-size: 1.5em; font-weight: 700; margin-top: 1.5rem; margin-bottom: 0.75rem; }
.prose h3 { font-size: 1.25em; font-weight: 600; margin-top: 1rem; margin-bottom: 0.5rem; }
.prose p { margin-bottom: 1rem; line-height: 1.75; }
.prose ul, .prose ol { margin-bottom: 1rem; padding-left: 1.5rem; }
.prose li { margin-bottom: 0.25rem; line-height: 1.75; }
.prose blockquote { border-left: 4px solid #d1d5db; padding-left: 1rem; font-style: italic; }
.prose pre { border-radius: 0.5rem; padding: 1rem; overflow-x: auto; margin-bottom: 1rem; }
.prose img { max-width: 100%; border-radius: 0.5rem; }
.prose a { color: #4f46e5; text-decoration: underline; }
.prose a:hover { color: #4338ca; }