/* ==========================================================================
   Lifestyle Report Custom Styles & Animations
   ========================================================================== */

/* Screen Routing & Transitions */
.screen {
  display: none;
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.screen.active {
  display: block;
  opacity: 1;
}

#loading-screen.screen.active {
  display: flex;
}

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

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #e4e4e7;
  border-radius: 9999px;
}

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

/* circular gauge animation logic */
.gauge-progress,
.gauge-progress-fill {
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dashoffset 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Progress bar fill animations */
.progress-item-fill,
.comparison-fill,
.risk-bar-fill {
  transition: width 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Custom visual pulse for active loader icon */
@keyframes softPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.85;
  }
}

.pulse-loader {
  animation: softPulse 2s infinite ease-in-out;
}

/* Page and Print Layout Styles */
@page {
  size: letter portrait;
  margin: 10mm;
}

.pdf-page-section {
  break-inside: avoid;
  page-break-inside: avoid;
}

.pdf-avoid-break {
  break-inside: avoid;
  page-break-inside: avoid;
}

.pdf-page-break-before {
  break-before: page;
  page-break-before: always;
}

.pdf-page-break-after {
  break-after: page;
  page-break-after: always;
}

/* Public share/PDF legal footer. It is rendered only on the public report
   route, so the authenticated working report remains unchanged. */
.report-disclaimer {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e4e4e7;
  color: #71717a;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.55;
  text-align: left;
}

.report-disclaimer-label {
  margin-bottom: 0.5rem;
  color: #52525b;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

.report-disclaimer p {
  margin: 0;
}

/* Match print geometry while the PDF worker prepares the public page. */
body.pdf-mode #public-report-screen {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  background: white;
}

/* The normal report remains the only DOM on screen. PDF mode creates this
   separate, print-only layout after all fonts, SVG icons and score animations
   have completed. Each child is a real US Letter sheet. */
#pdf-print-root {
  display: none;
}

body.pdf-mode #public-report-screen > header,
body.pdf-mode #public-report-core-slot {
  display: none;
}

body.pdf-mode #pdf-print-root {
  display: block;
}

body.pdf-mode .pdf-print-page {
  box-sizing: border-box;
  width: calc(8.5in - 20mm);
  height: calc(11in - 20mm);
  padding: 0;
  margin: 0 auto;
  overflow: hidden;
  background: white;
}

body.pdf-mode .pdf-print-page-body {
  height: 100%;
  overflow: hidden;
}

body.pdf-mode .pdf-print-chunk + .pdf-print-chunk {
  margin-top: 1rem;
}

body.pdf-mode .pdf-print-chunk {
  break-inside: avoid;
  page-break-inside: avoid;
}

body.pdf-mode .pdf-print-section-intro > .pdf-print-chunk {
  margin-top: 1.25rem;
}

body.pdf-mode .pdf-print-static-intro > .pdf-print-chunk {
  margin-top: 1rem;
}

/* Place directories are supporting evidence, not competing section titles.
   Compact them in PDF mode so rows stay scannable and more evidence fits on
   each Letter sheet. The web report keeps its original Tailwind sizing. */
body.pdf-mode .pdf-print-place-row {
  row-gap: 0.875rem;
  column-gap: 1.25rem;
}

body.pdf-mode .pdf-print-place-row .py-1 {
  padding-top: 0;
  padding-bottom: 0;
}

body.pdf-mode .pdf-print-place-row .text-lg {
  font-size: 0.9375rem;
  line-height: 1.25rem;
}

body.pdf-mode .pdf-print-place-row .text-sm {
  font-size: 0.75rem;
  line-height: 1rem;
}

body.pdf-mode .pdf-print-place-row .w-6,
body.pdf-mode .pdf-print-place-row .h-6 {
  width: 1.125rem;
  height: 1.125rem;
}

body.pdf-mode .pdf-print-place-row .w-5,
body.pdf-mode .pdf-print-place-row .h-5 {
  width: 1rem;
  height: 1rem;
}

body.pdf-mode .pdf-print-place-row .w-3\.5,
body.pdf-mode .pdf-print-place-row .h-3\.5 {
  width: 0.75rem;
  height: 0.75rem;
}

body.pdf-mode .pdf-print-page-oversized,
body.pdf-mode .pdf-print-page-oversized .pdf-print-page-body {
  overflow: visible;
}

body.pdf-mode .report-disclaimer {
  margin-top: 1.5rem;
  padding-top: 1rem;
}

body.pdf-mode #report-blocks > section,
body.pdf-mode .pdf-page-section {
  display: block;
  padding-bottom: 0;
  border-bottom: 0;
}

body.pdf-mode .pdf-page-section > * + * {
  margin-top: 1.25rem;
}

body.pdf-mode .mt-16,
body.pdf-mode .my-16,
body.pdf-mode .space-y-16 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 2rem;
}

body.pdf-mode .mb-16 { margin-bottom: 2rem; }
body.pdf-mode .pb-16 { padding-bottom: 2rem; }
body.pdf-mode .pt-16 { padding-top: 2rem; }
body.pdf-mode .mt-12 { margin-top: 1.5rem; }
body.pdf-mode .pt-10 { padding-top: 1rem; }

body.pdf-mode .pdf-components-flow {
  display: block;
  padding-top: 1rem;
  margin-top: 1rem;
}

body.pdf-mode .pdf-components-flow > * + * {
  margin-top: 1rem;
}

@media print {
  /* Hide all non-printable screens, controls, and elements */
  #intake-screen,
  #loading-screen,
  #my-reports-screen,
  #report-screen,
  #error-toast,
  .toast,
  header button,
  footer,
  #address-form,
  #submit-btn,
  #auth-status-container {
    display: none !important;
  }

  /* Force only the public-report-screen print view to show, overriding .hidden */
  #public-report-screen,
  #public-report-screen.hidden {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Force desktop-sized width tested for Letter/A4 portrait to prevent mobile responsive rendering */
  #public-report-screen {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: white !important;
  }

  body.pdf-mode #public-report-screen > header,
  body.pdf-mode #public-report-core-slot {
    display: none !important;
  }

  body.pdf-mode #pdf-print-root {
    display: block !important;
  }

  body.pdf-mode .pdf-print-page {
    box-sizing: border-box !important;
    width: calc(8.5in - 20mm) !important;
    height: calc(11in - 20mm) !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    break-after: page !important;
    page-break-after: always !important;
  }

  body.pdf-mode .pdf-print-page:last-child {
    break-after: auto !important;
    page-break-after: auto !important;
  }

  body.pdf-mode .pdf-print-page-body {
    height: 100% !important;
    overflow: hidden !important;
  }

  body.pdf-mode .pdf-print-chunk + .pdf-print-chunk {
    margin-top: 1rem !important;
  }

  body.pdf-mode .pdf-print-chunk {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  body.pdf-mode .pdf-print-section-intro > .pdf-print-chunk {
    margin-top: 1.25rem !important;
  }

  body.pdf-mode .pdf-print-static-intro > .pdf-print-chunk {
    margin-top: 1rem !important;
  }

  body.pdf-mode .pdf-print-place-row {
    row-gap: 0.875rem !important;
    column-gap: 1.25rem !important;
  }

  body.pdf-mode .pdf-print-place-row .py-1 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  body.pdf-mode .pdf-print-place-row .text-lg {
    font-size: 0.9375rem !important;
    line-height: 1.25rem !important;
  }

  body.pdf-mode .pdf-print-place-row .text-sm {
    font-size: 0.75rem !important;
    line-height: 1rem !important;
  }

  body.pdf-mode .pdf-print-place-row .w-6,
  body.pdf-mode .pdf-print-place-row .h-6 {
    width: 1.125rem !important;
    height: 1.125rem !important;
  }

  body.pdf-mode .pdf-print-place-row .w-5,
  body.pdf-mode .pdf-print-place-row .h-5 {
    width: 1rem !important;
    height: 1rem !important;
  }

  body.pdf-mode .pdf-print-place-row .w-3\.5,
  body.pdf-mode .pdf-print-place-row .h-3\.5 {
    width: 0.75rem !important;
    height: 0.75rem !important;
  }

  body.pdf-mode .pdf-print-page-oversized,
  body.pdf-mode .pdf-print-page-oversized .pdf-print-page-body {
    overflow: visible !important;
  }

  /*
   * Let report sections flow into available space. A forced page break before
   * every section creates nearly empty "tail" pages whenever the preceding
   * section ends with a short callout. The header is instead kept with the
   * first visible content below it.
   */
  #report-blocks > section,
  .pdf-page-section {
    display: block !important;
    break-before: auto !important;
    page-break-before: auto !important;
    break-inside: auto !important;
    page-break-inside: auto !important;
    /*
     * The screen divider and trailing padding can become their own final
     * fragment after a long section, producing a completely blank PDF page.
     * Headers already separate the printed sections, so omit that screen-only
     * decoration in print.
     */
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
  }

  .pdf-page-section > * + * {
    margin-top: 1.25rem !important;
  }

  .pdf-section-header {
    break-after: avoid-page !important;
    page-break-after: avoid !important;
  }

  /* Compress vertical spacing to maximize page utilization */
  .mt-16, .my-16, .space-y-16 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 2rem !important;
  }
  .mb-16 {
    margin-bottom: 2rem !important;
  }
  .pb-16 {
    padding-bottom: 2rem !important;
  }
  .pt-16 {
    padding-top: 2rem !important;
  }
  .mt-12 {
    margin-top: 1.5rem !important;
  }
  .pt-10 {
    padding-top: 1rem !important;
  }

  .pdf-components-flow {
    display: block !important;
    padding-top: 1rem !important;
    margin-top: 1rem !important;
  }

  .pdf-components-flow > * + * {
    margin-top: 1rem !important;
  }

  .pdf-avoid-break,
  .metric-card,
  .insight-card,
  .confidence-note,
  #public-realtor-branding {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  .pdf-component-splittable {
    break-inside: auto !important;
    page-break-inside: auto !important;
  }

  .pdf-component-splittable .pdf-keep-together {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  .pdf-component-splittable div.pdf-keep-together {
    display: block !important;
  }

  .pdf-static-group {
    break-inside: auto !important;
    page-break-inside: auto !important;
  }

  .pdf-static-group h4 {
    break-after: avoid-page !important;
    page-break-after: avoid !important;
  }

  .pdf-static-group .grid > div {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  .pdf-component-splittable .pdf-keep-with-next {
    break-after: avoid-page !important;
    page-break-after: avoid !important;
  }

  .pdf-preflight-break {
    break-before: page !important;
    page-break-before: always !important;
  }

  /*
   * Dynamic lists are flex items on screen. In print, let the list itself
   * continue naturally, while preserving each existing card as a whole.
   * These selectors use only the current markup and apply in print alone.
   */
  #report-blocks > .pdf-page-section > .flex.flex-col.gap-6.border-t.border-zinc-100.pt-6 {
    display: block !important;
    padding-top: 1rem !important;
    margin-top: 1rem !important;
  }

  #report-blocks > .pdf-page-section > .flex.flex-col.gap-6.border-t.border-zinc-100.pt-6 > .pdf-avoid-break {
    margin-top: 1rem !important;
  }

  #report-blocks > .pdf-page-section > .flex.flex-col.gap-6.border-t.border-zinc-100.pt-6 > .pdf-avoid-break:has(> .space-y-4),
  #report-blocks > .pdf-page-section > .flex.flex-col.gap-6.border-t.border-zinc-100.pt-6 > .pdf-avoid-break:has(> .grid) {
    break-inside: auto !important;
    page-break-inside: auto !important;
  }

  #report-blocks > .pdf-page-section > .flex.flex-col.gap-6.border-t.border-zinc-100.pt-6 > .pdf-avoid-break > .space-y-4 > div,
  #report-blocks > .pdf-page-section > .flex.flex-col.gap-6.border-t.border-zinc-100.pt-6 > .pdf-avoid-break > .grid > div {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  .pdf-page-break-before {
    break-before: page !important;
    page-break-before: always !important;
  }

  .pdf-page-break-after {
    break-after: page !important;
    page-break-after: always !important;
  }

  .report-disclaimer {
    margin-top: 1.5rem !important;
    padding-top: 1rem !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  /* Enforce exact vector/text/color reproduction */
  body {
    background: white !important;
    color: #18181b !important;
    print-color-adjust: exact !important;
    -webkit-print-color-adjust: exact !important;
  }

  /* Disable transitions and animations to prevent layout distortion */
  * {
    transition: none !important;
    animation: none !important;
  }

  /* Override responsive Tailwind grid & flex items to force desktop columns in print */
  .grid-cols-1.sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  
  .grid-cols-1.md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .flex-col.md\:flex-row {
    flex-direction: row !important;
  }
}

/* ==========================================================================
   Micro-animations & Interactive Elements
   ========================================================================== */

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

.animate-fadeIn {
  animation: fadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}