static/css/style.css

/* VeriMed AI -- small additions beyond Tailwind's utility classes */

html {
    scroll-behavior: smooth;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    overflow-x: hidden;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

img, video, canvas, svg {
    max-width: 100%;
    height: auto;
}

button, a, input, textarea, select {
    -webkit-tap-highlight-color: transparent;
}

main {
    width: 100%;
}

/* Prevent long content from blowing out mobile cards */
.break-words, p, span, div, a, li {
    overflow-wrap: anywhere;
}

/* Distinctive geometric heading font -- used for h1-h4 and the verdict
   label so key numbers/verdicts feel more "designed" than default system
   sans, without touching body copy readability. */
h1, h2, h3, h4, .font-display {
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

@media (max-width: 640px) {
    h1 {
        font-size: 1.75rem;
        line-height: 2rem;
    }

    h2 {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }

    h3 {
        font-size: 1.125rem;
        line-height: 1.5rem;
    }

    .glass-card,
    #resultsPlaceholder,
    #resultsCard > div,
    .rounded-3xl,
    .rounded-2xl {
        border-radius: 1rem;
    }

    .sticky {
        position: static;
    }
}

/* Smooth fade-in for result panels */
#resultsCard, #predictOutputPanel {
    animation: fadeIn 0.25s ease-in-out;
}

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