/* VoxLensAI clinical theme
   Surfaces: white on light slate. Single accent: deep sapphire #075985.
   No gradients, no glass on chrome. Gradients live only inside data bars.

   Sibling of the OtoSensAI theme (#0F766E) — identical structure, shifted hue.
   The hue shift is functional, not decorative: this product's highest-stakes
   element is a two-state verdict (high-risk red / low-risk emerald). Teal chrome
   at hue 175 sits ~15 degrees from emerald, so the safety signal would compete
   with the furniture. Sapphire at hue 201 clears both verdict colours. */

:root {
    /* Brand */
    --accent:        #075985;  /* sky-800  · buttons, links, pill hover, focus */
    --accent-strong: #0C4A6E;  /* sky-900  · hover / pressed                   */
    --accent-tint:   #F0F9FF;  /* sky-50   · tinted card fills                 */
    --accent-line:   #BAE6FD;  /* sky-200  · tinted borders                    */
    --accent-lift:   #7DD3FC;  /* sky-300  · accent text ON DARK only          */

    /* Neutrals */
    --ink:   #0F172A;          /* slate-900 */
    --muted: #64748B;          /* slate-500 */
    --page:  #F8FAFC;          /* slate-50  */
    --card:  #FFFFFF;
    --line:  #E2E8F0;          /* slate-200 */
    --hero:  #040C14;          /* dark hero base */

    /* Semantic risk palette — NEVER reuse these for chrome */
    --risk-high:     #DC2626;  /* red-600     · icon chip                      */
    --risk-high-ink: #B91C1C;  /* red-700     · verdict headline (4.83 -> 5.9) */
    --risk-low:      #047857;  /* emerald-700 · low-risk verdict               */
    --risk-warn:     #B45309;  /* amber-700   · precancerous                   */
}

body {
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    color: var(--ink);
}

/* Legacy class names kept as stable hooks (they predate this theme); their
   values are now flat, not gradient/glass. Renaming them would touch every
   template for no benefit. */
.medical-gradient { background: var(--page); }
.glass-effect     { background: var(--card); border: 1px solid var(--line); }

.shadow-2xl {
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px -12px rgba(15, 23, 42, .12);
}

/* ---------- components ---------- */

.condition-pill {
    background: var(--card);
    border: 1px solid var(--line);
    color: #334155;
    transition: border-color .15s ease, color .15s ease;
}
.condition-pill:hover { border-color: var(--accent); color: var(--accent); }

.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--accent-strong); }

/* Calm transitions, no levitation. */
button, .btn-accent, a.btn {
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

/* ---------- animation ---------- */

@keyframes brandIn {
    from { opacity: 0; transform: translateY(8px); letter-spacing: .12em; }
    to   { opacity: 1; transform: translateY(0);   letter-spacing: -.02em; }
}
.brand-word { animation: brandIn .7s cubic-bezier(.22, 1, .36, 1) both; }

@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
.fade-in { animation: fadeIn .4s ease both; }

@keyframes slideIn { from { width: 0 } }
.bar-fill { animation: slideIn .8s cubic-bezier(.2, .7, .2, 1) both; }

@keyframes demoCardIn {
    from { opacity: 0; transform: translateY(14px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.demo-card { animation: demoCardIn .8s cubic-bezier(.22, 1, .36, 1) both; }

/* Fills to a per-element --w set inline, with staggered delays. */
@keyframes demoBarFill { from { width: 0 } to { width: var(--w) } }
.demo-bar { width: 0; animation: demoBarFill 1.1s cubic-bezier(.22, 1, .36, 1) forwards; }

@keyframes scan { from { transform: translateY(0) } to { transform: translateY(160px) } }
.animate-scan { animation: scan 2s ease-in-out infinite alternate; }

/* Pulsing ring — high-risk verdict only. Deliberately the one loud element. */
@keyframes alarm {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .35); }
    50%      { box-shadow: 0 0 0 14px rgba(220, 38, 38, 0); }
}
.alarm { animation: alarm 1.8s ease-in-out infinite; }

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

/* ---------- accessibility ---------- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    /* Bars must still render filled, not collapsed to zero width. */
    .demo-bar { width: var(--w); }
}

button:focus-visible,
input:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

[x-cloak] { display: none !important; }

/* ---------- scrollbar ---------- */

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #F1F5F9; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #94A3B8; }

/* ---------- print ---------- */

@media print {
    body { background: #fff; }
    .glass-effect { border: none; box-shadow: none; }
    button, .no-print { display: none !important; }
}

@media (max-width: 768px) {
    h1 { font-size: 2.25rem; }
}