/* Radar chart rules */
.radar {
  width: 200px;
  height: 200px;
  margin: 2rem auto;
  display: block;
}
.radar { width: 180px; height: 180px; margin: 1.5rem auto; display: block; }

/* === FINAL SMALL GAUGE NO-CROPPING FIX - EXTRA BREATHING ROOM === */
@media (min-width: 768px) {
  /* Generous margin around gauges for protruding rounded caps */
  .grid.md\\:grid-cols-3 .relative.w-32.h-32 {
    width: 128px !important;
    height: 128px !important;
    margin: 4rem auto 3rem auto !important; /* top 4rem, bottom 3rem for balance */
  }

  /* Extra top/bottom padding on cards to center everything */
  .grid.md\\:grid-cols-3 > div {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }
}

/* SVG safety */
svg {
  overflow: visible !important;
  display: block !important;
}

/* Mobile: original tight fit (no issue there) */
@media (max-width: 767px) {
  .grid.md\\:grid-cols-3 .relative.w-32.h-32 {
    margin: 1.5rem auto !important;
  }
  .grid.md\\:grid-cols-3 > div {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
}

/* === ALL YOUR ORIGINAL RULES BELOW (preserved) === */
body { transition: background-color 0.3s ease; }
.health-score polygon { fill: rgba(16, 185, 129, 0.3); }
.health-score h2 { margin-bottom: 0.5rem; }

.animate-spin { animation: spin 1s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Score colors */
.score-low { color: #ef4444 !important; }
.score-mid { color: #fb923c !important; }
.score-high { color: #22c55e !important; }
.dark .score-low { color: #f87171 !important; }
.dark .score-mid { color: #fdba74 !important; }
.dark .score-high { color: #86efac !important; }
.score-slash { color: #9ca3af !important; }
.dark .score-slash { color: #6b7280 !important; }
.score-number { text-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); }

/* Text readability */

h2 + p { color: #6b7280; }
.dark h2 + p { color: #f3f4f6; }
.bg-white h4, .dark .bg-gray-900 h4 { color: #1f2937; }
.dark .bg-gray-900 h4 { color: #f3f4f6; }
.text-left p { color: #4b5563; }
.text-blue-300, .text-green-300, .text-orange-300 { color: #6b7280 !important; }

/* Fade-in animation */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fade-in 0.5s ease-out forwards; }

/* Mobile adjustments */
@media (max-width: 1024px) {
  .container, .max-w-5xl, .max-w-3xl, .max-w-4xl {
    max-width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  .p-12, .p-10, .p-8 { padding: 1.5rem !important; }
  .text-5xl { font-size: 2rem !important; line-height: 1.1 !important; }
  .text-9xl { font-size: 6rem !important; line-height: 1 !important; }
}
@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; }
}
@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; }
}

/* Misc */
html, body { overscroll-behavior-x: none; }
#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; }
.overflow-x-auto { -webkit-overflow-scrolling: touch; }