/* ClearAuth Demo — Custom styles (Tailwind handles most) */
:root {
  --brand: #10b981; /* emerald-500 */
  --brand-600: #059669; /* emerald-600 */
  --brand-700: #047857; /* emerald-700 */
}

html, body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial, "Apple Color Emoji", "Segoe UI Emoji"; }

/* Buttons */
.btn-primary { display:inline-flex; align-items:center; justify-content:center; border-radius:0.5rem; background:#059669; color:white; padding:0.5rem 1rem; font-size:0.875rem; font-weight:500; box-shadow:0 1px 2px rgba(16,24,40,.05); transition:background .15s, box-shadow .15s; border:0; }
.btn-primary:hover { background:#047857; }
.btn-primary:focus{ outline:2px solid rgba(16,185,129,.35); outline-offset:2px; }

.btn-secondary { display:inline-flex; align-items:center; justify-content:center; border-radius:0.5rem; background:#fff; color:#065f46; padding:0.5rem 1rem; font-size:0.875rem; font-weight:500; box-shadow:0 1px 2px rgba(16,24,40,.05); border:1px solid #a7f3d0; transition:background .15s, box-shadow .15s; }
.btn-secondary:hover { background:#ecfdf5; }
.btn-secondary:focus{ outline:2px solid rgba(16,185,129,.35); outline-offset:2px; }

.btn-quiet { display:inline-flex; align-items:center; justify-content:center; border-radius:0.375rem; background:#fff; color:#374151; padding:0.375rem 0.625rem; font-size:0.875rem; border:1px solid #e5e7eb; }
.btn-quiet:hover{ background:#f9fafb; }

/* Stepper */
#stepper { counter-reset: step; }
.step-item { position:relative; display:flex; align-items:center; gap:0.5rem; padding:0.25rem 0.5rem; border-radius:0.5rem; cursor:default; }
.step-index { display:inline-flex; height:1.75rem; width:1.75rem; align-items:center; justify-content:center; border-radius:9999px; background:#f3f4f6; color:#4b5563; font-size:0.875rem; font-weight:600; }
.step-label { display:none; font-size:0.875rem; color:#4b5563; font-weight:500; }
@media (min-width: 640px){ .step-label{ display:block; } }
.step-connector { flex:1; height:2px; background:#e5e7eb; border-radius:9999px; }
.step-active .step-index { background:#059669; color:#fff; }
.step-active .step-label { color:#065f46; }
.step-complete .step-index { background:#d1fae5; color:#065f46; }
.step-complete .step-label { color:#059669; }

/* Step panels */
.step-panel { opacity: 1; transform: translateY(0); transition: opacity .25s ease, transform .25s ease; }
.step-panel.hidden { opacity: 0; transform: translateY(8px); }

/* Inputs & fields */
.field-label { display:block; font-size:0.75rem; font-weight:500; color:#6b7280; margin-bottom:0.25rem; }
.input { width:100%; border:1px solid #e5e7eb; border-radius:0.5rem; padding:0.5rem 0.75rem; font-size:0.875rem; }
.input:focus { border-color:#34d399; outline:2px solid rgba(16,185,129,.25); outline-offset:2px; }
.field-with-badge { position:relative; }
.badge-extracted { position:absolute; top:-0.5rem; right:0.5rem; display:inline-flex; align-items:center; border-radius:9999px; background:#ecfdf5; color:#065f46; border:1px solid #a7f3d0; padding:0.125rem 0.5rem; font-size:10px; font-weight:600; }
.conf { position:absolute; bottom:-0.5rem; right:0.5rem; display:inline-flex; align-items:center; border-radius:9999px; padding:0.125rem 0.375rem; font-size:10px; border:1px solid transparent; }
.conf-high { background:#ecfdf5; color:#065f46; border-color:#a7f3d0; }
.conf-review { background:#fffbeb; color:#92400e; border-color:#fde68a; }
.conf-dot { display:inline-block; height:10px; width:10px; border-radius:9999px; }

/* Loader */
.loader { width: 18px; height: 18px; border-radius: 9999px; border: 2px solid #34d399; border-top-color: transparent; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* File cards */
.file-card { display:flex; align-items:center; gap:0.75rem; border-radius:0.75rem; border:1px solid #e5e7eb; background:#fff; padding:0.75rem; box-shadow:0 1px 2px rgba(16,24,40,0.05); }
.file-icon { height:2.5rem; width:2.5rem; border-radius:0.5rem; background:#f3f4f6; color:#4b5563; display:flex; align-items:center; justify-content:center; }
.file-name { font-size:0.875rem; font-weight:500; }
.file-size { font-size:0.75rem; color:#6b7280; }
.file-check { margin-left:auto; display:inline-flex; height:1.5rem; width:1.5rem; align-items:center; justify-content:center; border-radius:9999px; background:#d1fae5; color:#065f46; }

/* PDF preview */
.pdf-viewport { height:70vh; overflow:auto; border-radius:0.75rem; background:#f9fafb; padding:0.75rem; }
.pdf-page { width: 816px; height: 1056px; background:white; margin:0 auto; box-shadow:0 1px 3px rgba(0,0,0,.08); border:1px solid #e5e7eb; padding:2rem; }
.pdf-header { text-align:center; font-size:1.125rem; font-weight:600; color:#1f2937; margin-bottom:1rem; }
.pdf-section { margin-top:0.75rem; }
.pdf-section-title { font-size:13px; font-weight:600; color:#374151; border-bottom:1px solid #e5e7eb; padding-bottom:0.25rem; margin-bottom:0.5rem; }
.pdf-field-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:1rem; row-gap:0.25rem; font-size:12px; }
.pdf-field { grid-column: span 6 / span 6; }
.pdf-kv { display:flex; align-items:flex-start; gap:0.5rem; }
.pdf-k { width:10rem; color:#6b7280; }
.pdf-v { flex:1; color:#1f2937; }

/* Attachments list */
.attach-pill { display:inline-flex; align-items:center; gap:0.5rem; border-radius:9999px; background:#f3f4f6; padding:0.25rem 0.625rem; font-size:0.75rem; color:#374151; }
.attach-dot { display:inline-block; height:6px; width:6px; border-radius:9999px; background:#10b981; }

/* Utilities */
.shadow-xs { box-shadow: 0 1px 2px rgba(16,24,40,0.05); }
.ring-quiet { box-shadow: 0 0 0 1px rgba(17,24,39,0.06) inset; }

/* Small screens */
@media (max-width: 1024px) {
  .pdf-viewport { height: 55vh; }
  .pdf-page { transform: scale(.85); transform-origin: top center; height: 1056px; }
}