/* Only needed for the radar chart – everything else is Tailwind */
.radar {
  width: 200px;
  height: 200px;
  margin: 2rem auto;
  display: block;
}

/* Remove any old body background rules – we use the wrapper div now */
body { transition: background-color 0.3s ease; }

/* Fix green card once and for all */
.health-score polygon { fill: rgba(16, 185, 129, 0.3); }

.radar { width: 180px; height: 180px; margin: 1.5rem auto; display: block; }
.health-score h2 { margin-bottom: 0.5rem; }


  /* LOCAL TOOL FIX – MOBILE-FRIENDLY REPORT (WORKS 100% – Dec 2025) */
  @media (max-width: 1024px) {
    /* Kill narrow containers */
    .container, .max-w-5xl, .max-w-3xl, .max-w-4xl {
      max-width: 100% !important;
      padding-left: 1rem !important;
      padding-right: 1rem !important;
    }

    /* Reduce huge padding on form + report cards */
    .p-12, .p-10, .p-8 {
      padding: 1.5rem !important;
    }

    /* Smaller title */
    .text-5xl {
      font-size: 2rem !important;
      line-height: 1.1 !important;
    }

    /* Smaller giant percentage */
    .text-9xl {
      font-size: 6rem !important;
      line-height: 1 !important;
    }
  }

  /* Optional: slightly tighter on very small phones */
  @media (max-width: 480px) {
    .p-12, .p-10 { padding: 1.25rem !important; }
    .text-5xl { font-size: 1.875rem !important; }
    .text-9xl { font-size: 5.5rem !important; }
  }
  
  
/* Mobile-friendly report - force full width and reduce padding on small screens */
@media (max-width: 768px) {
  .max-w-5xl {
    max-width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  .p-8, .p-6, .p-12 {
    padding: 1.5rem !important;
  }
  .text-7xl, .text-8xl {
    font-size: 4rem !important;
  }
  .text-5xl {
    font-size: 2.5rem !important;
  }
  .text-4xl {
    font-size: 2rem !important;
  }
  .grid {
    grid-template-columns: 1fr !important;
  }
  .md\\:grid-cols-3, .md\\:grid-cols-4 {
    grid-template-columns: 1fr !important;
  }
  table {
    font-size: 0.875rem !important;
  }
  table th, table td {
    padding: 0.75rem !important;
  }
}

@media (max-width: 480px) {
  .p-8, .p-6, .p-12 {
    padding: 1rem !important;
  }
  .text-7xl, .text-8xl {
    font-size: 3.5rem !important;
  }
  .text-5xl {
    font-size: 2.25rem !important;
  }
}

/* AI ai-search-features-checklist – Mobile fixes */
#ai-search-features-checklist ul {
  list-style: none;
  padding: 0;
}

@media (max-width: 768px) {
  #ai-search-features-checklist li {
    flex-direction: column;
    text-align: center;
  }
  .grid {
    grid-template-columns: 1fr;
  }
  .checklist-card ul {
    text-align: left;
  }
}




/* Disable horizontal rubber-band bounce on iOS Safari (current pure-CSS solution – works with sticky headers) */
html, body {
  overscroll-behavior-x: none;
}

/* Safety: prevent dynamic table from causing real viewport stretch (keep from previous) */
#results .max-w-5xl {
  max-width: 100% !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

#results .overflow-x-auto,
#results table {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed;
  overflow-wrap: break-word;
}

#results table th,
#results table td {
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Smooth internal scroll */
.overflow-x-auto {
  -webkit-overflow-scrolling: touch;
}


/* Metric popover */
#metric-popover {
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}
@media (max-width: 640px) {
  #metric-popover {
    max-width: 90vw;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
  }
}

/* Metric Emojis */
.fixes-panel .text-3xl {
  line-height: 1 !important;
}

/* Dark mode body text */
.dark body {
  color: #686666;
}