/* =======================================================================
   engine-page.css
   Shared styles for all DNAsed engine pages (supplements, self-insight,
   mental-aptitude, longevity, sleep, exercise, etc.).

   Each HTML page overrides --engine-* custom properties in a <style> block
   to apply its own accent color. Example:

       :root {
         --engine-color:      #059669;
         --engine-color-light: #ecfdf5;
         --engine-border:     #a7f3d0;
         --engine-bg:         #f8fafc;
         --engine-hover-bg:   #f1f5f9;
         --engine-h2-border:  #d1fae5;
         --engine-bq-bg:      #ecfdf5;
         --engine-bq-text:    #065f46;
         --engine-code-color: #be185d;
       }
   ======================================================================= */


/* =======================================================================
   1. CSS Custom Properties — Defaults (emerald / supplements)
   ======================================================================= */
:root {
  --engine-color:       #10b981;   /* primary accent */
  --engine-color-dark:  #059669;   /* darker shade for active states */
  --engine-color-light: #ecfdf5;   /* very light tint */
  --engine-border:      #a7f3d0;   /* light border tint */
  --engine-bg:          #f8fafc;   /* page background */
  --engine-hover-bg:    #f1f5f9;   /* hover tint for pills/tabs */
  --engine-h2-border:   #d1fae5;   /* coach article h2 underline */
  --engine-bq-bg:       #ecfdf5;   /* blockquote background */
  --engine-bq-text:     #065f46;   /* blockquote text */
  --engine-code-color:  #be185d;   /* inline code accent */
}


/* =======================================================================
   2. Base Body
   ======================================================================= */
body {
  font-family: 'Inter', sans-serif;
  background-color: var(--engine-bg);
  color: #1e293b;
}


/* =======================================================================
   3. Glass Panel
   ======================================================================= */
.glass-panel {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}


/* =======================================================================
   4. Goal Pills (goal selection buttons)
   ======================================================================= */
.goal-pill {
  padding: 6px 16px;
  border-radius: 20px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #64748b;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
  transition: all 0.2s;
}

.goal-pill:hover {
  background: var(--engine-hover-bg);
}

.goal-pill.active {
  background: var(--engine-color-dark);
  color: #ffffff;
  border-color: var(--engine-color-dark);
}


/* =======================================================================
   5. Mode Tabs (OTC / Rx switching)
   ======================================================================= */
.mode-tab {
  padding: 8px 20px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #64748b;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s;
}

.mode-tab:hover {
  background: var(--engine-hover-bg);
}

.mode-tab.active {
  background: var(--engine-color-light);
  color: var(--engine-color-dark);
  border-color: var(--engine-border);
}


/* =======================================================================
   6. Lane Indicators (recommendation lane cards)

   These colors are universal across engines — green/amber/red semantics.
   Note: supplements uses #ef4444 for avoid; self-insight and mental-aptitude
   use #f43f5e. We use #f43f5e (rose) as the standard. Supplements can
   override if needed.
   ======================================================================= */
.lane-consider {
  border-left: 4px solid #10b981;
  background: #f0fdf4;
}

.lane-caution {
  border-left: 4px solid #f59e0b;
  background: #fffbeb;
}

.lane-avoid {
  border-left: 4px solid #f43f5e;
  background: #fff1f2;
}


/* =======================================================================
   7. Recommendation Cards
   ======================================================================= */
.rec-card {
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 10px;
}


/* =======================================================================
   8. DNA Badge
   ======================================================================= */
.dna-badge {
  display: inline-block;
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--engine-color-light);
  color: var(--engine-color-dark);
  margin-right: 4px;
  margin-top: 4px;
}


/* =======================================================================
   8b. Source-Aware Genomic Evidence Badges
   ======================================================================= */
.source-awareness-panel {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-left: 4px solid #0f766e;
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 14px;
  color: #334155;
}

.source-awareness-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}

.source-awareness-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #ccfbf1;
  color: #0f766e;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.source-awareness-panel h3 {
  font-size: 0.9rem;
  line-height: 1.25;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 2px;
}

.source-awareness-panel p {
  font-size: 0.78rem;
  line-height: 1.45;
  margin: 0;
}

.source-awareness-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
  margin: 10px 0;
}

.source-awareness-kpi {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 8px;
  min-width: 0;
}

.source-awareness-kpi span {
  display: block;
  font-size: 0.66rem;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0;
}

.source-awareness-kpi strong {
  display: block;
  margin-top: 3px;
  font-size: 0.78rem;
  line-height: 1.25;
  color: #0f172a;
  overflow-wrap: anywhere;
}

.source-awareness-line {
  color: #475569;
  margin-top: 6px !important;
  overflow-wrap: anywhere;
}

.source-awareness-privacy {
  color: #64748b;
  margin-top: 8px !important;
}

.source-gate-badge {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 0.72rem;
  line-height: 1.35;
  border-radius: 6px;
  padding: 7px 9px;
  margin-top: 8px;
  overflow-wrap: anywhere;
}

.source-gate-direct {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46;
}

.source-gate-limited,
.source-gate-info {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e40af;
}

.source-gate-confirm {
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
}

.source-gate-blocked,
.source-gate-safety {
  background: #fff1f2;
  border: 1px solid #fecdd3;
  color: #9f1239;
}


/* =======================================================================
   9. Rx Badge (prescription indicator)
   ======================================================================= */
.rx-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.68rem;
  padding: 2px 8px;
  border-radius: 4px;
  background: #fef2f2;
  color: #dc2626;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}


/* =======================================================================
   10. Spinner / Loading
   ======================================================================= */
.spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid #e2e8f0;
  border-top-color: var(--engine-color-dark);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}


/* =======================================================================
   11. Severity Pills (interaction severity badges)
   ======================================================================= */
.severity-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.severity-contra  { color: #991b1b; background: #fef2f2; border: 1px solid #fca5a5; }
.severity-major   { color: #9a3412; background: #fff7ed; border: 1px solid #fdba74; }
.severity-moderate { color: #92400e; background: #fffbeb; border: 1px solid #fcd34d; }
.severity-minor   { color: #3f6212; background: #f7fee7; border: 1px solid #bef264; }
.severity-info    { color: #1e40af; background: #eff6ff; border: 1px solid #93c5fd; }


/* =======================================================================
   12. Chat Bubbles (coach panel)
   ======================================================================= */
.chat-bubble-user {
  background-color: var(--engine-color-dark);
  color: white;
  border-radius: 1rem 1rem 0 1rem;
}

.chat-bubble-ai {
  background: rgba(241, 245, 249, 0.9);
  color: #1e293b;
  border: 1px solid #e2e8f0;
  border-radius: 1rem 1rem 1rem 0;
}


/* =======================================================================
   13. Coach Article (full-page coach markdown rendering)

   Accent-colored properties use custom properties so each engine gets
   its own tint on h2 borders, blockquotes, and inline code.
   ======================================================================= */
.coach-article h1 {
  font-size: 1.5rem;
  font-weight: 800;
  color: #1e293b;
  margin: 1.25rem 0 0.5rem;
}

.coach-article h2 {
  font-size: 1.2rem;
  font-weight: 700;
  color: #1e293b;
  margin: 1.25rem 0 0.5rem;
  border-bottom: 2px solid var(--engine-h2-border);
  padding-bottom: 0.25rem;
}

.coach-article h3 {
  font-size: 1rem;
  font-weight: 700;
  color: #334155;
  margin: 1rem 0 0.3rem;
}

.coach-article p {
  margin: 0.4rem 0;
  line-height: 1.7;
  color: #334155;
}

.coach-article ul,
.coach-article ol {
  margin: 0.4rem 0 0.4rem 1.5rem;
  line-height: 1.7;
  color: #334155;
}

.coach-article li {
  margin: 0.2rem 0;
}

.coach-article ul li {
  list-style-type: disc;
}

.coach-article ol li {
  list-style-type: decimal;
}

.coach-article strong {
  color: #0f172a;
  font-weight: 700;
}

.coach-article em {
  color: #64748b;
  font-style: italic;
}

.coach-article blockquote {
  border-left: 4px solid var(--engine-color-dark);
  background: var(--engine-bq-bg);
  padding: 0.5rem 0.75rem;
  margin: 0.5rem 0;
  border-radius: 0 0.5rem 0.5rem 0;
  color: var(--engine-bq-text);
}

.coach-article code {
  background: #f1f5f9;
  color: var(--engine-code-color);
  padding: 0.1rem 0.3rem;
  border-radius: 0.25rem;
  font-size: 0.88em;
}


/* =======================================================================
   14. Condition Tags (user-supplied conditions/context)
   ======================================================================= */
.condition-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: var(--engine-color-light);
  border: 1px solid var(--engine-border);
  color: var(--engine-bq-text);
  font-size: 0.75rem;
  font-weight: 500;
}

.condition-tag button {
  background: none;
  border: none;
  color: #6b7280;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  font-size: 0.85rem;
}

.condition-tag button:hover {
  color: #dc2626;
}


/* =======================================================================
   15. Importance Tiers (new: start-here / consider / deep-dive)
   ======================================================================= */
.rec-card[data-importance-tier="start-here"] {
  border-left: 4px solid var(--engine-color);
}

.rec-card[data-importance-tier="consider"] {
  border-left: 4px solid #6b7280;
}

.rec-card[data-importance-tier="deep-dive"] {
  display: none;
}

.importance-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
}

.importance-badge.high {
  background: #dcfce7;
  color: #166534;
}

.importance-badge.medium {
  background: #fef9c3;
  color: #854d0e;
}

.importance-badge.low {
  background: #f3f4f6;
  color: #6b7280;
}


/* =======================================================================
   16. Engine Summary Header
   ======================================================================= */
#engine-summary-header {
  padding: 1rem 1.5rem;
  border-radius: 12px;
  margin-bottom: 1rem;
  font-size: 0.95rem;
}


/* =======================================================================
   17. Progressive Disclosure (<details> elements on rec cards)

   Already in theme.css as .rec-card-body / .tier-section.
   These supplement the theme.css styles for engine-page-specific
   disclosure patterns (e.g., "The Science", "Watch-Outs").
   ======================================================================= */
.rec-card details summary {
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
  color: #64748b;
  list-style: none;
  user-select: none;
}

.rec-card details summary::-webkit-details-marker {
  display: none;
}

.rec-card details summary::before {
  content: '\25B8 ';
  display: inline-block;
  transition: transform 0.15s;
}

.rec-card details[open] summary::before {
  transform: rotate(90deg);
}