/* ═══════════════════════════════════════════════════════════════════
   Dr. Malik's AI — Design System
   Unified tokens matching landing page (Inter, OKLCH, --sp-*, --r-*)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ── Design Tokens ── */
:root {
  /* Typography — single family */
  --font: 'Inter', system-ui, -apple-system, sans-serif;

  /* Type scale (1.25 ratio, fixed rem for app UI) */
  --text-xs: 0.75rem;    /* 12px — minimum allowed */
  --text-sm: 0.8125rem;  /* 13px */
  --text-base: 0.9375rem;/* 15px */
  --text-md: 1rem;       /* 16px */
  --text-lg: 1.25rem;    /* 20px */
  --text-xl: 1.5625rem;  /* 25px */
  --text-2xl: 1.953rem;  /* 31px */

  /* Surfaces — warm-tinted OKLCH neutrals (hue 80) */
  --bg-0: oklch(0.985 0.003 80);     /* warm near-white */
  --bg-1: oklch(0.97 0.004 80);      /* warm light cream */
  --bg-2: oklch(0.94 0.005 80);      /* warm parchment */
  --bg-3: oklch(0.91 0.006 80);      /* warm stone */

  /* Text — cool hue 250 for contrast */
  --text-0: oklch(0.16 0.01 250);    /* near-black */
  --text-1: oklch(0.38 0.015 250);   /* mid-gray */
  --text-2: oklch(0.55 0.01 250);    /* light-gray — AAA on --bg-0 */

  /* Borders */
  --border: oklch(0.78 0.005 80 / 0.5);

  /* Accent — clinical blue */
  --accent: oklch(0.50 0.20 250);
  --accent-dim: oklch(0.42 0.14 250);
  --accent-glow: oklch(0.55 0.20 250);

  /* Focus */
  --focus-ring: oklch(0.55 0.15 250);
  --focus-offset: 2px;

  /* Semantic status — clinical colors */
  --safe: oklch(0.45 0.14 145);
  --safe-bg: oklch(0.45 0.14 145 / 0.10);
  --safe-dot: oklch(0.50 0.16 145);
  --caution: oklch(0.55 0.14 75);
  --caution-bg: oklch(0.55 0.14 75 / 0.10);
  --error: oklch(0.55 0.16 25);
  --success: oklch(0.45 0.14 145);

  /* Semantic status — block variants (for status-block component) */
  --status-safe: oklch(0.42 0.12 145);
  --status-safe-bg: oklch(0.94 0.04 145);
  --status-safe-text: oklch(0.28 0.08 145);
  --status-caution: oklch(0.50 0.14 75);
  --status-caution-bg: oklch(0.94 0.05 75);
  --status-caution-text: oklch(0.32 0.1 75);
  --status-danger: oklch(0.48 0.18 25);
  --status-danger-bg: oklch(0.94 0.04 25);
  --status-danger-text: oklch(0.30 0.12 25);
  --status-info: oklch(0.45 0.12 250);
  --status-info-bg: oklch(0.94 0.04 250);
  --status-info-text: oklch(0.28 0.1 250);

  /* Buttons */
  --btn-bg: oklch(0.18 0.01 250);
  --btn-text: oklch(0.98 0.003 80);
  --btn-hover: oklch(0.26 0.015 250);
  --btn-pill-bg: oklch(0.16 0.01 250 / 0.06);
  --btn-pill-border: oklch(0.16 0.01 250 / 0.12);
  --btn-pill-hover-bg: oklch(0.16 0.01 250 / 0.10);
  --btn-pill-hover-border: oklch(0.16 0.01 250 / 0.20);

  /* Badges */
  --badge-bg: oklch(0.16 0.01 250 / 0.05);
  --badge-border: oklch(0.16 0.01 250 / 0.10);

  /* Radii */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;

  /* Spacing scale (4pt base) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* Shadows */
  --shadow: 0 2px 8px oklch(0.0 0 0 / 0.06);
  --shadow-card-hover: 0 8px 24px oklch(0.0 0 0 / 0.08);
  --shadow-sm: 0 1px 3px oklch(0.0 0 0 / 0.04);
  --shadow-lg: 0 4px 16px oklch(0.0 0 0 / 0.10);

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 120ms;
  --duration-normal: 200ms;
}

/* ── Global Reset + Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text-0);
  background: var(--bg-2);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Focus States (Global) ── */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* Remove default outline for mouse clicks */
:focus:not(:focus-visible) {
  outline: none;
}

/* ── Accessible minimum touch targets ── */
button, [role="button"], a, input, select, textarea {
  min-height: 44px;
}

/* Override for inline text elements that shouldn't be 44px */
a:not([class]), .note a, .footer a {
  min-height: auto;
}

/* Small buttons get padding to reach 44px touch area */
.touch-target-sm {
  position: relative;
}
.touch-target-sm::after {
  content: '';
  position: absolute;
  inset: -8px;
}

/* ── Typography Utilities ── */
h1, h2, h3 { font-family: var(--font); }

/* ── Status Blocks (replaces border-left accent stripes) ── */
.status-block {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  line-height: 1.6;
  margin-bottom: var(--sp-2);
  position: relative;
}
.status-block::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid currentColor;
  opacity: 0.15;
  pointer-events: none;
}
.status-block.safe    { background: var(--status-safe-bg); color: var(--status-safe-text); }
.status-block.caution { background: var(--status-caution-bg); color: var(--status-caution-text); }
.status-block.danger  { background: var(--status-danger-bg); color: var(--status-danger-text); }
.status-block.info    { background: var(--status-info-bg); color: var(--status-info-text); }
.status-block-title { font-weight: 600; margin-bottom: 2px; }

/* ── Responsive Breakpoints ── */
/* Mobile-first: styles apply to all, then scale up */

/* Tablet portrait */
@media (min-width: 480px) {
  :root { --text-base: 0.9375rem; }
}

/* Tablet landscape */
@media (min-width: 768px) {
  :root { --text-base: 0.9375rem; }
}

/* Desktop */
@media (min-width: 1024px) {
  :root { --text-base: 0.9375rem; }
}

/* ── Print ── */
@media print {
  :root {
    --bg-0: white;
    --bg-1: #f5f5f5;
    --text-0: #000;
    --text-1: #333;
    --text-2: #555;
  }
  /* Clinician-only surfaces must never appear on printed output */
  .foods-avoid-panel,
  .ddx-panel,
  .lab-recs-panel { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   Clinician-only AI panels — rendered on both submission.html (saved
   view) and calculator.html (inline result after Calculate). Shared
   here so both surfaces stay in sync.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Foods-to-Avoid panel ── */
.foods-avoid-panel { margin-top: 1.5rem; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--status-info-bg); padding: 14px 16px; }
.foods-avoid-panel .fap-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.foods-avoid-panel .fap-title { font-size: 12px; font-weight: 700; color: var(--text-0); text-transform: uppercase; letter-spacing: 0.12em; }
.foods-avoid-panel .fap-tag { font-size: 10.5px; font-weight: 600; color: var(--text-2); background: var(--bg-0); border: 0.5px solid var(--border); border-radius: 999px; padding: 2px 8px; text-transform: uppercase; letter-spacing: 0.08em; }
.foods-avoid-panel .fap-empty { font-size: 13px; color: var(--text-2); padding: 4px 0; }
.foods-avoid-card { background: var(--bg-0); border: 0.5px solid var(--border); border-radius: var(--r-sm); padding: 10px 12px; margin-bottom: 8px; }
.foods-avoid-card:last-child { margin-bottom: 0; }
.foods-avoid-card .fac-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.foods-avoid-card .fac-food { font-size: 13px; font-weight: 600; color: var(--text-0); line-height: 1.4; }
.foods-avoid-card .fac-reason { font-size: 12.5px; color: var(--text-1); line-height: 1.5; margin-top: 4px; }
.foods-avoid-card .fac-chips { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 8px; }
.foods-avoid-card .fac-chip { font-size: 10.5px; font-weight: 500; color: var(--text-1); background: var(--bg-1); border: 0.5px solid var(--border); border-radius: 999px; padding: 2px 8px; }
.fac-sev { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 3px 10px; border-radius: 999px; white-space: nowrap; flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; }
.fac-sev::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.fac-sev--avoid { background: var(--status-danger-bg); color: var(--status-danger-text); border: 0.5px solid currentColor; }
.fac-sev--limit { background: var(--status-caution-bg); color: var(--status-caution-text); border: 0.5px solid currentColor; }

/* ── Differential-Diagnosis panel ── */
.ddx-panel { margin-top: 1rem; margin-bottom: 1rem; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--status-info-bg); padding: 14px 16px; }
.ddx-panel .ddx-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.ddx-panel .ddx-title { font-size: 12px; font-weight: 700; color: var(--text-0); text-transform: uppercase; letter-spacing: 0.12em; }
.ddx-panel .ddx-tag { font-size: 10.5px; font-weight: 600; color: var(--text-2); background: var(--bg-0); border: 0.5px solid var(--border); border-radius: 999px; padding: 2px 8px; text-transform: uppercase; letter-spacing: 0.08em; }
.ddx-panel .ddx-empty { font-size: 13px; color: var(--text-2); padding: 4px 0; }
.ddx-card { background: var(--bg-0); border: 0.5px solid var(--border); border-radius: var(--r-sm); padding: 10px 12px; margin-bottom: 8px; }
.ddx-card:last-child { margin-bottom: 0; }
.ddx-card .ddx-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ddx-card .ddx-cond-wrap { display: flex; gap: 8px; align-items: baseline; flex: 1; min-width: 0; }
.ddx-card .ddx-num { font-size: 12px; font-weight: 700; color: var(--text-2); flex-shrink: 0; min-width: 16px; }
.ddx-card .ddx-cond { font-size: 13.5px; font-weight: 600; color: var(--text-0); line-height: 1.4; }
.ddx-card .ddx-rationale { font-size: 12.5px; color: var(--text-1); line-height: 1.5; margin-top: 6px; padding-left: 24px; }
.ddx-card .ddx-distinguish { font-size: 12.5px; color: var(--text-1); line-height: 1.5; margin-top: 4px; padding-left: 24px; }
.ddx-card .ddx-distinguish::before { content: '\2192 '; color: var(--text-2); font-weight: 600; }
.ddx-lk { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 3px 10px; border-radius: 999px; white-space: nowrap; flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; }
.ddx-lk::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ddx-lk--high     { background: var(--status-danger-bg);  color: var(--status-danger-text);  border: 0.5px solid currentColor; }
.ddx-lk--moderate { background: var(--status-caution-bg); color: var(--status-caution-text); border: 0.5px solid currentColor; }
.ddx-lk--low      { background: var(--status-info-bg);    color: var(--status-info-text);    border: 0.5px solid currentColor; }

/* ── Lab-Recommendations panel ── */
.lab-recs-panel { margin-top: 1rem; margin-bottom: 1rem; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--status-info-bg); padding: 14px 16px; }
.lab-recs-panel .lrp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.lab-recs-panel .lrp-title { font-size: 12px; font-weight: 700; color: var(--text-0); text-transform: uppercase; letter-spacing: 0.12em; }
.lab-recs-panel .lrp-tag { font-size: 10.5px; font-weight: 600; color: var(--text-2); background: var(--bg-0); border: 0.5px solid var(--border); border-radius: 999px; padding: 2px 8px; text-transform: uppercase; letter-spacing: 0.08em; }
.lab-recs-panel .lrp-empty { font-size: 13px; color: var(--text-2); padding: 4px 0; }
.lr-card { background: var(--bg-0); border: 0.5px solid var(--border); border-radius: var(--r-sm); padding: 10px 12px; margin-bottom: 8px; }
.lr-card:last-child { margin-bottom: 0; }
.lr-card .lr-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.lr-card .lr-test { font-size: 13.5px; font-weight: 600; color: var(--text-0); line-height: 1.4; flex: 1; min-width: 0; }
.lr-card .lr-reason { font-size: 12.5px; color: var(--text-1); line-height: 1.5; margin-top: 6px; }
.lr-card .lr-timing { font-size: 12.5px; color: var(--text-1); line-height: 1.5; margin-top: 4px; }
.lr-card .lr-timing::before { content: '\23F1  '; color: var(--text-2); margin-right: 2px; }
.lr-cat { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 3px 10px; border-radius: 999px; white-space: nowrap; flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; }
.lr-cat::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.lr-cat--baseline   { background: var(--status-danger-bg);  color: var(--status-danger-text);  border: 0.5px solid currentColor; }
.lr-cat--monitoring { background: var(--status-caution-bg); color: var(--status-caution-text); border: 0.5px solid currentColor; }
.lr-cat--diagnostic { background: var(--status-info-bg);    color: var(--status-info-text);    border: 0.5px solid currentColor; }

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Dark Mode — token overrides
   Activated by <html data-theme="dark"> (set by inline FOUC script).
   ═══════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] {
  /* Surfaces — dark, cool-tinted (hue 250) */
  --bg-0: oklch(0.14 0.008 250);   /* near-black canvas */
  --bg-1: oklch(0.18 0.010 250);   /* card surface */
  --bg-2: oklch(0.22 0.012 250);   /* elevated surface (body default) */
  --bg-3: oklch(0.27 0.014 250);   /* hover / selected */

  /* Text — warm off-white for legibility */
  --text-0: oklch(0.96 0.005 80);
  --text-1: oklch(0.78 0.010 80);
  --text-2: oklch(0.60 0.010 80);

  /* Borders */
  --border: oklch(0.50 0.012 250 / 0.45);

  /* Accent — brighten for contrast on dark bg */
  --accent: oklch(0.72 0.18 250);
  --accent-dim: oklch(0.60 0.14 250);
  --accent-glow: oklch(0.78 0.20 250);

  /* Focus */
  --focus-ring: oklch(0.72 0.18 250);

  /* Semantic status — keep hue, raise lightness */
  --safe: oklch(0.70 0.14 145);
  --safe-bg: oklch(0.70 0.14 145 / 0.15);
  --safe-dot: oklch(0.75 0.16 145);
  --caution: oklch(0.78 0.14 75);
  --caution-bg: oklch(0.78 0.14 75 / 0.15);
  --error: oklch(0.72 0.17 25);
  --success: oklch(0.70 0.14 145);

  /* Semantic status — block variants */
  --status-safe: oklch(0.70 0.14 145);
  --status-safe-bg: oklch(0.28 0.08 145);
  --status-safe-text: oklch(0.90 0.10 145);
  --status-caution: oklch(0.78 0.14 75);
  --status-caution-bg: oklch(0.30 0.10 75);
  --status-caution-text: oklch(0.92 0.12 75);
  --status-danger: oklch(0.72 0.18 25);
  --status-danger-bg: oklch(0.28 0.12 25);
  --status-danger-text: oklch(0.90 0.14 25);
  --status-info: oklch(0.70 0.14 250);
  --status-info-bg: oklch(0.28 0.10 250);
  --status-info-text: oklch(0.90 0.12 250);

  /* Buttons — inverted (light primary on dark bg) */
  --btn-bg: oklch(0.94 0.005 80);
  --btn-text: oklch(0.14 0.010 250);
  --btn-hover: oklch(0.84 0.010 80);
  --btn-pill-bg: oklch(0.96 0.005 80 / 0.06);
  --btn-pill-border: oklch(0.96 0.005 80 / 0.16);
  --btn-pill-hover-bg: oklch(0.96 0.005 80 / 0.12);
  --btn-pill-hover-border: oklch(0.96 0.005 80 / 0.28);

  /* Badges */
  --badge-bg: oklch(0.96 0.005 80 / 0.06);
  --badge-border: oklch(0.96 0.005 80 / 0.14);

  /* Shadows — stronger for depth on dark */
  --shadow: 0 2px 8px oklch(0 0 0 / 0.40);
  --shadow-card-hover: 0 8px 24px oklch(0 0 0 / 0.55);
  --shadow-sm: 0 1px 3px oklch(0 0 0 / 0.30);
  --shadow-lg: 0 4px 16px oklch(0 0 0 / 0.50);

  /* Browser UI color */
  color-scheme: dark;
}

/* Logo inversion — matches any <img src=".../logo.svg"> anywhere on the page */
html.dark img[src$="logo.svg"],
html.dark img[src$="logo.png"],
html[data-theme="dark"] img[src$="logo.svg"],
html[data-theme="dark"] img[src$="logo.png"],
html[data-theme="dark"] .topbar-logo img,
html[data-theme="dark"] img.logo {
  filter: brightness(0) invert(1);
}

/* Smooth theme transition (skip for users who prefer reduced motion — handled by the rule above) */
html, body {
  transition: background-color var(--duration-normal) var(--ease-out),
              color var(--duration-normal) var(--ease-out);
}