/* ═══════════════════════════════════════════════════════════════════════
   EM DocBox — DESIGN UNIFICATION LAYER (premium)
   Additive override that pulls every module (old Bebas/IBM-Plex + v2
   Manrope/DM-Sans) onto the landing's Source Serif 4 + Inter system.
   Loaded LAST on every page. Touches NO module HTML or JS — pure reskin.
   High-specificity / !important to win over module inline <style>.
   ═══════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;1,8..60,400;1,8..60,500&family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ─────────────────────────────────────────────────────────────────
   1. BASE TYPOGRAPHY → Inter (overrides DM Sans, IBM Plex Sans, Manrope)
   ───────────────────────────────────────────────────────────────── */
body, .mbody, .msec, .msec-body, p, li, td, th, label,
.card-sub, .page-desc, .tag, .fpill, .pill, .drug-row, .algo-step,
.controls-bar, .cnt-wrap, .mhd-sub, .mhd-tags, .stat-l {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
}
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* ─────────────────────────────────────────────────────────────────
   2. DISPLAY TITLES → Source Serif 4 (serif, premium editorial)
   ───────────────────────────────────────────────────────────────── */
.page-title, .empty-title, .mhd-title, .modal-title, .sys-panel-title {
  font-family: 'Source Serif 4', 'Tiempos Headline', Georgia, serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
  line-height: 1.12 !important;
}
/* Accent span inside page titles → italic colored (matches landing) */
.page-title span, .page-title em, .page-title .accent {
  font-style: italic !important;
  font-weight: 500 !important;
}

/* ─────────────────────────────────────────────────────────────────
   3. CARD NAMES / STAT NUMBERS → Inter tight (was Bebas Neue uppercase)
   ───────────────────────────────────────────────────────────────── */
.card-name, .stat-n, .hstat-n, .sys-panel-name, .tool-title, .cs-name, .mtable-title {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
}
.stat-n, .hstat-n { font-weight: 800 !important; }

/* Brand marks (nav-logo-text, foot-logo) intentionally KEEP Bebas — the
   landing wordmark uses Bebas too, so these are already consistent. */

/* ─────────────────────────────────────────────────────────────────
   4. EYEBROWS — drop the uppercase-mono-on-everything pattern
   ───────────────────────────────────────────────────────────────── */
.page-eyebrow {
  font-family: 'Inter', sans-serif !important;
  text-transform: none !important;
  letter-spacing: 0.01em !important;
  font-weight: 500 !important;
  font-size: 13px !important;
}

/* ─────────────────────────────────────────────────────────────────
   5. DOSE VALUES stay IBM Plex Mono — reinforce
   ───────────────────────────────────────────────────────────────── */
.dose, .tc2, .drug-dose, code, .mono, .dose-val {
  font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
}

/* ─────────────────────────────────────────────────────────────────
   6. BACKGROUND — kill crosshatch grid, apply ambient radial glow + noise
   ───────────────────────────────────────────────────────────────── */
body { background-image: none !important; }
/* z-index:-1 keeps the ambient layers behind ALL content without having to
   touch the z-index of any module element (which could break their layouts). */
body::before {
  content: '' !important; position: fixed !important; inset: 0 !important;
  pointer-events: none !important; z-index: -1 !important;
  background:
    radial-gradient(ellipse 70% 60% at 85% 10%, rgba(255,71,87,0.07), transparent 60%),
    radial-gradient(ellipse 60% 70% at 6% 92%, rgba(88,166,255,0.045), transparent 65%) !important;
}
body::after {
  content: '' !important; position: fixed !important; inset: 0 !important;
  pointer-events: none !important; z-index: -1 !important; opacity: 0.05 !important;
  mix-blend-mode: screen !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>") !important;
}
[data-theme="light"] body::before {
  background:
    radial-gradient(ellipse 70% 60% at 85% 10%, rgba(220,38,38,0.045), transparent 60%),
    radial-gradient(ellipse 60% 70% at 6% 92%, rgba(29,78,216,0.03), transparent 65%) !important;
}
[data-theme="light"] body::after { opacity: 0.035 !important; mix-blend-mode: multiply !important; }

/* ─────────────────────────────────────────────────────────────────
   7. KILL red-gradient-text headlines → solid premium ink
   ───────────────────────────────────────────────────────────────── */
.page-title, .card-name, .mhd-title {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
}

/* ─────────────────────────────────────────────────────────────────
   8. CARDS — premium surface (rounded, soft border, lift on hover)
   ───────────────────────────────────────────────────────────────── */
.card, .sys-panel, .tool-card {
  border-radius: 16px !important;
  transition: transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s, border-color .2s !important;
}
.card:hover, .sys-panel:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 38px rgba(0,0,0,.34) !important;
}
[data-theme="light"] .card:hover, [data-theme="light"] .sys-panel:hover {
  box-shadow: 0 12px 38px rgba(15,23,42,.12) !important;
}

/* ─────────────────────────────────────────────────────────────────
   9. CONTROLS BAR / FILTER PILLS — refined
   ───────────────────────────────────────────────────────────────── */
.fpill, .filter-pill, .fb {
  border-radius: 999px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  transition: background .15s, border-color .15s, color .15s !important;
}

/* ─────────────────────────────────────────────────────────────────
   10. SCROLLBAR — subtle premium
   ───────────────────────────────────────────────────────────────── */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 6px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.2); }
[data-theme="light"] *::-webkit-scrollbar-thumb { background: rgba(15,23,42,.16); }

/* ─────────────────────────────────────────────────────────────────
   11. REDUCED MOTION
   ───────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .card, .sys-panel, .tool-card, .fpill { transition: none !important; }
  .card:hover, .sys-panel:hover { transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   EM DocBox — VIBRANCY + READABILITY LAYER   [BEGIN unify-vibrance]
   Appended to the unification layer. Pushes the muted 10%-alpha chip system
   to a confident, marketable color language and lifts text contrast — while
   FIXING the light-theme bug where amber/cyan/green chip text was unreadable
   on white. Pure reskin: no module HTML or JS touched. Loaded last → wins.
   ═══════════════════════════════════════════════════════════════════════ */

/* 12. TEXT READABILITY — theme-safe (spacing + weight only, no color shift) */
.msec-body, .mbody p, .mbody li, .mtable td, .drug-table td {
  line-height: 1.62 !important;
}
.card-sub, .page-desc, .mhd-sub { font-weight: 500 !important; }
.msec-title {
  font-weight: 700 !important;
  letter-spacing: -0.005em !important;
  color: var(--text) !important;
}

/* 13. VIBRANT CHIP SYSTEM — DARK (stronger fill + edge + weight, vivid ink) */
.tag, .pill, .ppill {
  font-weight: 700 !important;
  letter-spacing: .02em !important;
}
.tag { font-size: 10.5px !important; padding: 3px 10px !important; }
.tag-red    { background: rgba(255,71,87,.18)  !important; color: #ff6b78 !important; border-color: rgba(255,71,87,.45)  !important; }
.tag-orange { background: rgba(251,146,60,.18) !important; color: #ffa959 !important; border-color: rgba(251,146,60,.45) !important; }
.tag-amber  { background: rgba(255,193,7,.18)  !important; color: #ffce3a !important; border-color: rgba(255,193,7,.45)  !important; }
.tag-green  { background: rgba(0,212,160,.18)  !important; color: #1fe3b4 !important; border-color: rgba(0,212,160,.45)  !important; }
.tag-blue   { background: rgba(88,166,255,.18) !important; color: #7ab8ff !important; border-color: rgba(88,166,255,.45) !important; }
.tag-purple { background: rgba(192,132,252,.18)!important; color: #cda4ff !important; border-color: rgba(192,132,252,.45)!important; }
.tag-pink   { background: rgba(244,114,182,.18)!important; color: #ff8ec6 !important; border-color: rgba(244,114,182,.45)!important; }
.tag-cyan   { background: rgba(34,211,238,.18) !important; color: #4ddbf2 !important; border-color: rgba(34,211,238,.45) !important; }

/* 13b. VIBRANT CHIP SYSTEM — LIGHT (deep ink for WCAG contrast on white) */
[data-theme="light"] .tag-red    { background: rgba(220,38,38,.12)  !important; color: #b91c1c !important; border-color: rgba(220,38,38,.32)  !important; }
[data-theme="light"] .tag-orange { background: rgba(234,88,12,.12)  !important; color: #c2410c !important; border-color: rgba(234,88,12,.32)  !important; }
[data-theme="light"] .tag-amber  { background: rgba(180,83,9,.12)   !important; color: #92400e !important; border-color: rgba(180,83,9,.32)   !important; }
[data-theme="light"] .tag-green  { background: rgba(5,150,105,.12)  !important; color: #047857 !important; border-color: rgba(5,150,105,.32)  !important; }
[data-theme="light"] .tag-blue   { background: rgba(29,78,216,.12)  !important; color: #1d4ed8 !important; border-color: rgba(29,78,216,.32)  !important; }
[data-theme="light"] .tag-purple { background: rgba(124,58,237,.12) !important; color: #6d28d9 !important; border-color: rgba(124,58,237,.32) !important; }
[data-theme="light"] .tag-pink   { background: rgba(190,24,93,.12)  !important; color: #be185d !important; border-color: rgba(190,24,93,.32)  !important; }
[data-theme="light"] .tag-cyan   { background: rgba(14,116,144,.12) !important; color: #0e7490 !important; border-color: rgba(14,116,144,.32) !important; }

/* 14. ALERT BOXES — more presence (deeper fill + defined left rule) */
.abox { border-width: 1px !important; }
.abox.danger  { background: rgba(255,71,87,.13)  !important; border-color: rgba(255,71,87,.40)  !important; }
.abox.warn    { background: rgba(255,193,7,.13)  !important; border-color: rgba(255,193,7,.40)  !important; }
.abox.info    { background: rgba(88,166,255,.13) !important; border-color: rgba(88,166,255,.40) !important; }
.abox.success { background: rgba(0,212,160,.13)  !important; border-color: rgba(0,212,160,.40)  !important; }
.abox::before { width: 3px !important; }
[data-theme="light"] .abox.danger  { background: rgba(220,38,38,.09)  !important; color: #991b1b !important; }
[data-theme="light"] .abox.warn    { background: rgba(180,83,9,.09)   !important; color: #92400e !important; }
[data-theme="light"] .abox.info    { background: rgba(29,78,216,.09)  !important; color: #1e3a8a !important; }
[data-theme="light"] .abox.success { background: rgba(5,150,105,.09)  !important; color: #065f46 !important; }

/* 15. ACCENT-TINTED SURFACES — tie cards + active filters to module color */
.card:hover, .sys-panel:hover { border-color: var(--acc) !important; }
.fpill.on, .fb.active {
  background: var(--acc-dim) !important;
  border-color: var(--acc) !important;
  color: var(--text) !important;
  font-weight: 700 !important;
}
/* Active filter gets a subtle accent glow so the current view is obvious */
.fpill.on { box-shadow: 0 0 0 1px var(--acc-dim), 0 4px 14px var(--acc-glow) !important; }
/* [END unify-vibrance] */

/* ═══════════════════════════════════════════════════════════════════════
   UNIFIED SYSTEM HERO   [BEGIN sys-hero]
   One identical hero (eyebrow + Source Serif title + 4-metric strip) injected
   by system-hero.js onto every guideline system page, replacing the four
   divergent legacy headers. Accent is set per-specialty via --acc by the JS.
   ═══════════════════════════════════════════════════════════════════════ */
.sys-hero { max-width: 1200px; margin: 0 auto; padding: 46px 32px 10px; position: relative; z-index: 1; }
.sys-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--acc, #ff4757);
  margin-bottom: 14px;
}
.sys-hero-eyebrow::before { content: ''; width: 22px; height: 2px; border-radius: 2px; background: var(--acc, #ff4757); }
.sys-hero-title {
  font-family: 'Source Serif 4', 'Tiempos Headline', Georgia, serif;
  font-weight: 600; font-size: clamp(30px, 4.4vw, 46px); line-height: 1.08;
  letter-spacing: -.02em; color: var(--text); margin: 0 0 20px;
}
.sys-hero-title em, .sys-hero-title .acc { font-style: italic; font-weight: 500; color: var(--acc, #ff4757); }
.sys-metrics {
  display: flex; flex-wrap: wrap; align-items: stretch; gap: 0;
  border: 1px solid var(--border2); border-radius: 14px; overflow: hidden;
  background: var(--surface); max-width: 580px;
}
.sys-metric { flex: 1; min-width: 92px; padding: 13px 18px; display: flex; flex-direction: column; gap: 4px; }
.sys-metric + .sys-metric { border-left: 1px solid var(--border); }
.sys-metric-n { font-family: 'Inter', sans-serif; font-weight: 800; font-size: 26px; line-height: 1; letter-spacing: -.02em; color: var(--text); }
.sys-metric-n .u { color: var(--acc, #ff4757); }
.sys-metric-l { font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text3); }
[data-theme="light"] .sys-metrics { background: #fff; }
@media (max-width: 700px) {
  .sys-hero { padding: 28px 18px 6px; }
  .sys-metrics { max-width: 100%; }
  .sys-metric { padding: 11px 12px; }
  .sys-metric-n { font-size: 20px; }
}
/* Neutralize the legacy heterogeneous headers once the unified hero is live */
body.sys-hero-on .page-header,
body.sys-hero-on .stats-row,
body.sys-hero-on .tool-header,
body.sys-hero-on .ph-title { display: none !important; }
/* [END sys-hero] */

/* ═══════════════════════════════════════════════════════════════════════
   READABILITY TYPE SYSTEM   [BEGIN sys-typography]
   One legible type scale for ALL module content (Whoop's clean tracked
   micro-labels + Function Health's generous serif/sans hierarchy). Targets
   the union of every module's content classes + generic .msec descendants so
   heterogeneous modules render identically. Wins via load order + !important.
   ═══════════════════════════════════════════════════════════════════════ */

/* Condition title in the modal header → editorial serif */
.mhd-title, .modal-title {
  font-family: 'Source Serif 4', 'Tiempos Headline', Georgia, serif !important;
  font-size: clamp(22px, 3vw, 30px) !important;
  font-weight: 600 !important; letter-spacing: -0.02em !important; line-height: 1.15 !important;
}
.mhd-sub {
  font-family: 'Inter', sans-serif !important;
  font-size: 14.5px !important; line-height: 1.55 !important; font-weight: 450 !important;
  color: var(--text2) !important;
}

/* Section labels → clean uppercase Inter micro-label (kills the old mono look) */
.msec-title, .msec-label, .msec-hd, .msec-hd .msec-label, .sec-title {
  font-family: 'Inter', sans-serif !important;
  font-size: 12.5px !important; font-weight: 700 !important;
  letter-spacing: 0.07em !important; text-transform: uppercase !important;
  color: var(--text2) !important;
}

/* Body copy → 15px / 1.7 / bright — the core readability lift */
.mbody, .msec, .pres-box, .fc-content,
.msec p, .msec li, .mbody p, .mbody li, .pres-box p, .pres-box li, .fc-content p, .fc-content li {
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important; line-height: 1.7 !important; color: var(--text2) !important;
}
.msec li, .mbody li, .pres-box li, .fc-content li { margin-bottom: 6px !important; }
.msec + .msec { margin-top: 18px !important; }

/* Tables → roomy + readable; headers as quiet uppercase labels */
.msec table td, .msec table th, .mtable td, .mtable th,
.pop-table td, .pop-table th, .drug-table td, .drug-table th {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important; line-height: 1.5 !important;
  padding: 9px 12px !important; color: var(--text2) !important;
}
.msec table th, .mtable th, .pop-table th, .drug-table th {
  font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.05em !important;
  text-transform: uppercase !important; color: var(--text3) !important;
}

/* Dose / monospace values → IBM Plex Mono, consistent size */
.dose, .tc2, .drug-dose, .dose-val, .mono, .msec code, .rx-dose, .mtable .tc2 {
  font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
  font-size: 13.5px !important; line-height: 1.5 !important;
}

/* Emphasis inside body → strong, full-contrast */
.msec b, .msec strong, .mbody b, .mbody strong, .pres-box b { font-weight: 700 !important; color: var(--text) !important; }

/* Guideline sources / tag rows */
.guide-link, .mhd-tags { font-size: 12.5px !important; line-height: 1.55 !important; }

/* Card face → consistent name + subtitle */
.card-name, .cs-name, .tool-title { font-size: 17px !important; font-weight: 700 !important; letter-spacing: -0.01em !important; line-height: 1.25 !important; }
.card-sub { font-size: 13.5px !important; line-height: 1.55 !important; color: var(--text3) !important; }

/* Light theme: keep body dark enough on white */
[data-theme="light"] .mbody, [data-theme="light"] .msec,
[data-theme="light"] .msec p, [data-theme="light"] .msec li,
[data-theme="light"] .pres-box, [data-theme="light"] .fc-content,
[data-theme="light"] .msec table td, [data-theme="light"] .mtable td, [data-theme="light"] .pop-table td { color: #334155 !important; }
[data-theme="light"] .mhd-sub { color: #475569 !important; }
[data-theme="light"] .msec-title, [data-theme="light"] .msec-label, [data-theme="light"] .msec-hd { color: #0f172a !important; }
/* [END sys-typography] */