/* Hindi Word Converter — hand-written styles (loaded after Tailwind's compiled utilities) */

body { font-family: 'Inter', 'Noto Sans Devanagari', system-ui, sans-serif; }
h1, h2, h3, .font-display { font-family: 'Manrope', 'Inter', system-ui, sans-serif; }
.devnag { font-family: 'Noto Sans Devanagari', sans-serif; }

/* Kruti Dev — renders KD-encoded ASCII bytes as Devanagari when font is installed */
.krutidev { font-family: 'Kruti Dev 010', 'Kruti Dev 010 Regular', 'Krutidev010', 'DevLys 010', 'Kruti Dev', serif; font-size: 16px; line-height: 1.7; }
.unicode-hi { font-family: 'Noto Sans Devanagari', 'Mangal', 'Nirmala UI', sans-serif; font-size: 14px; line-height: 1.7; }

/* Rich preview styling — tables, headings, lists */
.prose-preview p { margin: 0.4em 0; }
.prose-preview h1, .prose-preview h2, .prose-preview h3 { font-weight: 700; margin: 0.6em 0 0.3em; }
.prose-preview h1 { font-size: 1.3em; }
.prose-preview h2 { font-size: 1.15em; }
.prose-preview h3 { font-size: 1.05em; }
.prose-preview table { border-collapse: collapse; margin: 0.5em 0; width: 100%; font-size: 0.9em; }
.prose-preview table td, .prose-preview table th { border: 1px solid #cbd5e1; padding: 4px 8px; vertical-align: top; }
.prose-preview table th { background: #f1f5f9; font-weight: 600; }
.prose-preview ul, .prose-preview ol { padding-left: 1.5em; margin: 0.4em 0; }
.prose-preview strong { font-weight: 700; }
.prose-preview em { font-style: italic; }
.prose-preview img { max-width: 100%; height: auto; }

.drop-zone.dragover { border-color: #e11d48; background-color: #fff1f2; }
.fade-in { animation: fadeIn 0.25s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.spinner { border: 3px solid #e2e8f0; border-top: 3px solid #e11d48; border-radius: 50%; width: 28px; height: 28px; animation: spin 0.8s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Progress bar — determinate (real %, width set inline via JS) for OCR page
   reads, and indeterminate (a sliding block, since a synchronous docx-to-docx
   conversion request gives no real incremental signal) elsewhere. */
.progress-track { width: 100%; height: 6px; background: #f1f5f9; border-radius: 999px; overflow: hidden; margin-top: 12px; position: relative; }
.progress-fill { height: 100%; background: #e11d48; border-radius: 999px; width: 0%; transition: width 0.35s ease; }
.progress-fill.indeterminate { position: absolute; width: 35%; transition: none; animation: progress-indeterminate 1.3s ease-in-out infinite; }
@keyframes progress-indeterminate { 0% { left: -35%; } 100% { left: 100%; } }
.progress-percent { font-size: 0.75rem; color: #94a3b8; font-weight: 600; margin-top: 4px; text-align: right; }

.icon { display: inline-block; vertical-align: -0.125em; }
.icon svg { display: block; width: 100%; height: 100%; }

/* ---- Onboarding tour ---- */
#tour-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,0.55); z-index: 9998; }
#tour-highlight { position: fixed; z-index: 9999; border-radius: 12px; box-shadow: 0 0 0 4px #e11d48, 0 0 24px 4px rgba(225,29,72,0.35); pointer-events: none; transition: top .3s ease, left .3s ease, width .3s ease, height .3s ease; background: transparent; }
#tour-tooltip { position: fixed; z-index: 10000; max-width: 340px; background: #fff; border-radius: 14px; padding: 18px 20px; box-shadow: 0 12px 32px rgba(0,0,0,0.25); transition: top .3s ease, left .3s ease; }
#tour-tooltip h4 { font-weight: 700; font-size: 1rem; color: #1e293b; margin-bottom: 6px; }
#tour-tooltip p { font-size: 0.875rem; color: #475569; line-height: 1.5; margin-bottom: 14px; }
.tour-dots { display: flex; gap: 6px; align-items: center; }
.tour-dot { width: 6px; height: 6px; border-radius: 50%; background: #cbd5e1; }
.tour-dot.active { background: #e11d48; width: 16px; border-radius: 3px; }
.tour-btn-next { background: #e11d48; color: #fff; font-weight: 600; font-size: 0.8rem; padding: 7px 16px; border-radius: 8px; }
.tour-btn-text { color: #94a3b8; font-size: 0.8rem; font-weight: 500; }