/* The Architect Engine - Custom Styles */

/* Form Inputs */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="number"],
input[type="password"],
textarea,
select {
    @apply border-gray-300 rounded-lg shadow-sm focus:border-primary-500 focus:ring-primary-500;
}

/* Markdown Content */
.prose {
    @apply max-w-none;
}

.prose h1 {
    @apply text-2xl font-bold text-gray-900 mt-8 mb-4;
}

.prose h2 {
    @apply text-xl font-bold text-gray-900 mt-6 mb-3;
}

.prose h3 {
    @apply text-lg font-semibold text-gray-900 mt-4 mb-2;
}

.prose p {
    @apply text-gray-700 mb-4 leading-relaxed;
}

.prose ul {
    @apply list-disc pl-6 mb-4 space-y-1;
}

.prose ol {
    @apply list-decimal pl-6 mb-4 space-y-1;
}

.prose li {
    @apply text-gray-700;
}

.prose blockquote {
    @apply border-l-4 border-gray-300 pl-4 italic text-gray-600 my-4;
}

.prose code {
    @apply bg-gray-100 px-1 py-0.5 rounded text-sm font-mono text-gray-800;
}

.prose pre {
    @apply bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto my-4;
}

.prose pre code {
    @apply bg-transparent p-0;
}

.prose a {
    @apply text-primary-600 hover:text-primary-700 underline;
}

.prose hr {
    @apply my-8 border-gray-200;
}

/* Line Clamp Utilities */
.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn {
    from { transform: translateY(-10px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.animate-fade-in {
    animation: fadeIn 0.3s ease-out;
}

.animate-slide-in {
    animation: slideIn 0.3s ease-out;
}

/* Loading Spinner */
.spinner {
    border: 3px solid #f3f3f3;
    border-top: 3px solid #0ea5e9;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}