@tailwind base;
@tailwind components;
@tailwind utilities;

/* System font stack — clean, fast, native feel */
body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@layer base {
  :root {
    --background: 248 250 252;
    --foreground: 15 23 42;
  }

  html { scroll-behavior: smooth; }

  body {
    @apply bg-slate-50 text-slate-900;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Refined focus states — neutral blue ring (not red — red looks like errors) */
  *:focus-visible {
    outline: 2px solid #3B82F6;
    outline-offset: 2px;
    border-radius: 4px;
  }

  /* Smooth transitions on all interactive elements */
  button, a, input, select, textarea {
    transition: all 0.15s ease;
  }
}

@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@layer utilities {
  .animate-in { animation: fadeIn 0.3s ease-out; }
  .slide-in   { animation: slideUp 0.3s ease-out; }

  /* Audit hero panel: fade + slide on initial render */
  .audit-hero-enter {
    animation: fadeSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  /* Finding card stagger: start hidden, JS adds .is-visible via IntersectionObserver */
  .stagger-hidden {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.35s ease, transform 0.35s ease;
  }
  .stagger-hidden.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Force Clerk OTP inputs to fit — nuclear specificity */
div[data-field-name="code"] input,
.cl-otpCodeFieldInput,
input[data-otp-input],
.cl-otpCodeField input {
  width: 32px !important;
  max-width: 32px !important;
  min-width: 32px !important;
  height: 40px !important;
  padding: 0 !important;
  font-size: 16px !important;
  text-align: center !important;
}

div[data-field-name="code"],
.cl-otpCodeFieldInputs,
.cl-otpCodeField {
  max-width: 280px !important;
  gap: 4px !important;
  display: flex !important;
  justify-content: center !important;
}

/* iOS Safari keyboard activation:
   We deliberately do NOT set overflow:hidden here even though it
   was the original rule. On iOS Safari, overflow:hidden on a
   positioned ancestor of an <input> creates a scroll-context trap —
   the virtual keyboard opens but cannot push the focused input
   into view, so the keyboard LOOKS like it never appeared.
   .cl-card / .cl-rootBox / .cl-cardBox wrap every Clerk input,
   so this rule (with !important) re-trapped the scroll context
   and silently undid the fix in commit 08f5c5d, which removed
   overflow-hidden from the JSX wrappers but missed this CSS file.
   Width is still constrained via max-width below. */
.cl-card,
.cl-rootBox,
.cl-cardBox {
  max-width: 100% !important;
}

/* Print styles for Written Report */
@media print {
  body { background: white !important; }
  nav, aside, header, .print\\:hidden { display: none !important; }
  .print\\:break-inside-avoid { page-break-inside: avoid; break-inside: avoid; }
  .print\\:static { position: static !important; }
  .print\\:shadow-none { box-shadow: none !important; }
  .print\\:bg-white { background: white !important; }
  .print\\:max-w-none { max-width: none !important; }
  .print\\:border-0 { border: none !important; }
  .print\\:pt-12 { padding-top: 3rem !important; }
  @page { margin: 1in; }
}
