/* MedExPrep Institutional Demo Engine — frontend styles */
:root{
  --navy:#0f172a;--navy2:#162C55;--navy3:#1e293b;
  --teal:#14b8a6;--teal2:#0d9488;--mint:#5eead4;
  --text:#334155;--muted:#64748b;--line:#e2e8f0;--bg:#f8fafc;
  --warn:#f59e0b;--danger:#ef4444;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;color:var(--text);background:#f1f5f9;}
body{padding:0;margin:0;overflow-x:hidden;}
a{text-decoration:none;color:inherit;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
.mxApp{background:#f1f5f9;min-height:100vh;}

/* === Theme guard against global h1/h2 + a colors === */
.mxApp h1, .mxApp h2, .mxApp h3, .mxApp h4, .mxApp h5, .mxApp h6 { color: inherit; }
.mxStoryHero, .mxStoryHero h1, .mxStoryHero p, .mxStoryHero a, .mxStoryHero span:not([class*='gradient']) { color:#fff; }
.mxStoryHero h1 { color:#fff !important; }
.mxStoryHero p.lead, .mxStoryHero p.lead b { color:#fff !important; }
.mxAppBar, .mxAppBar a, .mxAppBar span, .mxTopBar, .mxTopBar a, .mxTopBar span { color:#fff !important; }
.mxImpactBand, .mxImpactBand * { color:#fff; }
.mxImpactBand .mxImpactBand__label { color:var(--mint) !important; }
.mxNextCard--primary, .mxNextCard--primary * { color:#fff !important; }
.mxModeStart { color: var(--teal2) !important; }
.mxApp .mxBtnHeroPrimary, .mxApp .mxBtnHeroGhost, .mxApp .mxBtnPrimary { color:#fff !important; }

/* ========== STAGE WRAPPER ========== */
.mxStage{display:none;}
.mxStage--active{display:block;}
.mxStage--app{display:none;}
.mxApp--inApp .mxStage--pitch{display:none;}
.mxApp--inApp .mxStage--app{display:flex;flex-direction:column;min-height:100vh;}

/* ========== STAGE 1: PITCH ========== */
.mxTopBar{position:sticky;top:0;z-index:60;background:rgba(15,23,42,.97);backdrop-filter:blur(12px);color:#fff !important;padding:13px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid rgba(94,234,212,.15);}
.mxBrandRow{display:flex;align-items:center;gap:12px;font-weight:900;font-size:.95rem;}
.mxDot{width:9px;height:9px;border-radius:50%;background:var(--mint);box-shadow:0 0 10px var(--mint);animation:mxPulse 2s ease-in-out infinite;}
@keyframes mxPulse{0%,100%{opacity:1;}50%{opacity:.5;}}
.mxBrandRow em{font-style:normal;color:var(--mint);}
.mxSep{color:rgba(255,255,255,.2);}
.mxTypePill{display:inline-flex;align-items:center;padding:5px 12px;border-radius:99px;background:rgba(94,234,212,.12);border:1px solid rgba(94,234,212,.3);color:var(--mint);font-size:.8rem;font-weight:700;letter-spacing:.02em;}
.mxTopActions{display:flex;align-items:center;gap:10px;}
.mxBtnPrimary{background:linear-gradient(135deg,var(--teal),var(--teal2));color:#fff;padding:9px 18px;border-radius:8px;font-weight:700;font-size:.88rem;letter-spacing:-.005em;box-shadow:0 4px 14px rgba(20,184,166,.3);transition:transform .15s,box-shadow .15s;}
.mxBtnPrimary:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(20,184,166,.45);}
.mxApp .mxBtnGhost{background:transparent;border:1px solid rgba(255,255,255,.2);color:#fff !important;padding:8px 16px;border-radius:8px;font-weight:600;font-size:.85rem;}
.mxBtnGhost:hover{background:rgba(255,255,255,.08);}

.mxStoryHero{background:radial-gradient(circle at top right,rgba(94,234,212,.18),transparent 32%),linear-gradient(135deg,var(--navy),var(--navy2));color:#fff;padding:54px 24px 30px;}
.mxStoryHero__inner{max-width:1180px;margin:0 auto;}
.mxBadge{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:99px;background:rgba(20,184,166,.18);border:1px solid rgba(94,234,212,.4);color:var(--mint);font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin-bottom:18px;}
.mxStoryHero h1{font-size:clamp(1.85rem,3.6vw,2.85rem);font-weight:950;line-height:1.1;letter-spacing:-.035em;margin:0 0 14px;max-width:920px;color:#fff !important;}
.mxStoryHero h1 span{background:linear-gradient(135deg,#5eead4,#14b8a6,#a7f3d0);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}
.mxStoryHero p.lead{color:rgba(255,255,255,.82) !important;font-size:1.05rem;line-height:1.65;margin:0 0 20px;max-width:840px;}
.mxStoryHero p.lead b{color:#fff;}
.mxScenarioBox{margin:0 0 22px;padding:14px 18px;background:rgba(255,255,255,.06);border:1px solid rgba(94,234,212,.22);border-radius:10px;color:rgba(255,255,255,.92);font-size:.95rem;max-width:880px;}
.mxScenarioBox b{color:var(--mint);}
.mxHeroCTAs{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px;}
.mxBtnLg{padding:13px 22px;border-radius:10px;font-weight:800;font-size:.96rem;letter-spacing:-.005em;display:inline-flex;align-items:center;gap:8px;}
.mxBtnHeroPrimary{background:linear-gradient(135deg,var(--teal),var(--teal2));color:#fff !important;box-shadow:0 8px 22px rgba(20,184,166,.4);transition:transform .15s,box-shadow .15s;}
.mxBtnHeroPrimary:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(20,184,166,.55);}
.mxBtnHeroGhost{background:rgba(255,255,255,.08);color:#fff !important;border:1px solid rgba(255,255,255,.22);transition:background .15s;}
.mxBtnHeroGhost:hover{background:rgba(255,255,255,.14);}

/* ========== COMPARISON BAND ========== */
.mxCompareBand{background:#fff;padding:36px 24px;border-bottom:1px solid var(--line);}
.mxCompareWrap{max-width:1180px;margin:0 auto;}
.mxCompareHead{text-align:center;margin-bottom:24px;}
.mxCompareHead h2{margin:0 0 8px;color:#0f172a;font-size:clamp(1.3rem,2.4vw,1.85rem);font-weight:950;letter-spacing:-.025em;line-height:1.2;}
.mxCompareHead h2 b{background:linear-gradient(135deg,#0f766e,#14b8a6);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}
.mxCompareHead p{color:var(--muted);margin:0;font-size:.94rem;}
.mxCompareGrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media (max-width:760px){.mxCompareGrid{grid-template-columns:1fr;}}
.mxCompareCard{padding:20px 22px;border-radius:14px;border:1px solid var(--line);background:#fff;}
.mxCompareCard h3{font-size:.96rem;font-weight:800;margin:0 0 12px;color:#0f172a;letter-spacing:-.005em;}
.mxCompareCard ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;}
.mxCompareCard li{font-size:.92rem;color:#475569;display:flex;align-items:flex-start;gap:8px;line-height:1.45;}
.mxCompareCard li::before{content:'•';color:var(--muted);font-weight:900;flex-shrink:0;}
.mxCompareCard--mep{border:2px solid var(--teal);background:linear-gradient(135deg,#f0fdfa,#fff);}
.mxCompareCard--mep h3{color:var(--teal2);}
.mxCompareCard--mep li::before{content:'✓';color:var(--teal);font-weight:900;}

/* ========== INSTANT IMPACT BAND ========== */
.mxImpactBand{background:#0f172a;color:#fff;padding:24px;text-align:center;}
.mxImpactBand__label{font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mint);margin-bottom:14px;}
.mxImpactChips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:1100px;margin:0 auto;}
.mxImpactChip{padding:10px 16px;border-radius:99px;background:rgba(94,234,212,.1);border:1px solid rgba(94,234,212,.3);color:#fff;font-size:.88rem;font-weight:600;display:inline-flex;align-items:center;gap:8px;}
.mxImpactChip::before{content:'✓';color:var(--mint);font-weight:900;}

/* ========== PAIN SELECTOR ========== */
.mxPain{background:#fff;padding:30px 24px;border-bottom:1px solid var(--line);}
.mxPain__inner{max-width:1180px;margin:0 auto;}
.mxPain h3{font-size:1.25rem;font-weight:900;color:#0f172a;margin:0 0 4px;letter-spacing:-.015em;}
.mxPain p.sub{color:var(--muted);font-size:.93rem;margin:0 0 18px;}
.mxPainChips{display:flex;flex-wrap:wrap;gap:9px;}
.mxPainChip{padding:9px 16px;border-radius:99px;background:#f1f5f9;border:1px solid #e2e8f0;color:#0f172a;font-size:.88rem;font-weight:600;cursor:pointer;transition:all .12s;}
.mxPainChip:hover{background:#e0f2fe;border-color:#bae6fd;}
.mxPainChip--active{background:linear-gradient(135deg,var(--teal),var(--teal2));color:#fff;border-color:var(--teal2);}

/* ========== MODE CHOOSER ========== */
.mxModeBand{background:linear-gradient(135deg,#f0fdfa,#fff);padding:36px 24px;border-bottom:1px solid var(--line);}
.mxMode__inner{max-width:1180px;margin:0 auto;text-align:center;}
.mxMode__inner h3{font-size:1.4rem;font-weight:900;color:#0f172a;margin:0 0 6px;letter-spacing:-.02em;}
.mxMode__inner p{color:var(--muted);margin:0 0 22px;}
.mxModes{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:880px;margin:0 auto;}
@media (max-width:680px){.mxModes{grid-template-columns:1fr;}}
.mxModeCard{padding:22px 24px;background:#fff;border:2px solid var(--line);border-radius:14px;text-align:left;cursor:pointer;transition:all .15s;}
.mxModeCard:hover{border-color:var(--teal);box-shadow:0 8px 24px rgba(20,184,166,.14);transform:translateY(-2px);}
.mxModeCard h4{font-size:1.05rem;font-weight:800;margin:0 0 6px;color:#0f172a;display:flex;align-items:center;gap:8px;}
.mxModeCard h4 .mxBadgeMini{font-size:.65rem;background:var(--mint);color:#0f172a;padding:2px 8px;border-radius:99px;font-weight:800;letter-spacing:.04em;}
.mxModeCard p{color:#475569;font-size:.9rem;margin:0 0 14px;line-height:1.5;}
.mxModeCard ul{list-style:none;padding:0;margin:0 0 14px;display:flex;flex-direction:column;gap:5px;font-size:.85rem;color:#64748b;}
.mxModeCard ul li::before{content:'•';color:var(--teal);margin-right:6px;}
.mxModeStart{display:inline-block;font-size:.88rem;font-weight:800;color:var(--teal2);}

/* ========== STAGE 2: APP SHELL ========== */
.mxAppShell{flex:1;display:flex;flex-direction:column;min-height:100vh;background:#f1f5f9;}
.mxAppBar{position:sticky;top:0;z-index:60;background:rgba(15,23,42,.97);backdrop-filter:blur(12px);color:#fff !important;padding:11px 22px;display:flex;align-items:center;gap:14px;border-bottom:1px solid rgba(94,234,212,.18);flex-wrap:wrap;}
.mxAppBar .mxBrandRow{font-size:.92rem;}
.mxAppBar__spacer{flex:1;}
.mxBackLink{color:rgba(255,255,255,.75);font-size:.85rem;font-weight:600;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:8px;transition:background .12s;}
.mxBackLink:hover{background:rgba(255,255,255,.08);color:#fff;}
.mxModePill{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:99px;font-size:.78rem;font-weight:700;}
.mxModePill__dot{width:7px;height:7px;border-radius:50%;background:var(--mint);}

.mxAppBody{flex:1;display:grid;grid-template-columns:240px 1fr 360px;gap:0;}
@media (max-width:1100px){.mxAppBody{grid-template-columns:220px 1fr;}.mxNarrator{display:none;}}
@media (max-width:780px){.mxAppBody{grid-template-columns:1fr;}.mxSidebar{display:none;}}

/* ========== SIDEBAR ========== */
.mxSidebar{background:#fff;border-right:1px solid var(--line);padding:18px 0;display:flex;flex-direction:column;gap:2px;}
.mxSidebar__label{font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:0 18px 10px;}
.mxNavItem{display:flex;align-items:center;gap:11px;padding:10px 18px;color:#475569;font-size:.9rem;font-weight:600;cursor:pointer;border-left:3px solid transparent;transition:all .12s;}
.mxNavItem:hover{background:#f8fafc;color:#0f172a;}
.mxNavItem--active{background:#f0fdfa;border-left-color:var(--teal);color:var(--teal2);font-weight:700;}
.mxNavIcon{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;font-size:.95rem;}
.mxNavBadge{margin-left:auto;font-size:.65rem;background:#fef3c7;color:#92400e;padding:2px 7px;border-radius:99px;font-weight:800;}
.mxSideBox{margin:14px 18px 0;padding:14px;background:linear-gradient(135deg,#0f172a,#162C55);color:#fff;border-radius:10px;}
.mxSideBox h5{font-size:.78rem;font-weight:800;margin:0 0 6px;letter-spacing:.02em;}
.mxSideBox p{font-size:.8rem;color:rgba(255,255,255,.78);margin:0 0 10px;line-height:1.45;}
.mxSideBox button{background:var(--mint);color:#0f172a;font-weight:800;font-size:.8rem;padding:8px 14px;border-radius:7px;width:100%;}

/* ========== MAIN ========== */
.mxMain{padding:22px 26px;overflow-y:auto;min-height:calc(100vh - 56px);}
.mxPanel{display:none;animation:mxFade .25s ease-out;}
.mxPanel--active{display:block;}
@keyframes mxFade{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:translateY(0);}}
.mxPanelHead{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:18px;}
.mxPanelHead h2{font-size:1.4rem;font-weight:900;color:#0f172a;letter-spacing:-.02em;margin:0;}
.mxPanelHead p{color:var(--muted);margin:4px 0 0;font-size:.9rem;}
.mxPanelHead__actions{display:flex;gap:8px;flex-wrap:wrap;}
.mxBtnSm{padding:7px 13px;border-radius:7px;font-size:.82rem;font-weight:700;border:1px solid var(--line);background:#fff;color:#0f172a;}
.mxBtnSm:hover{border-color:var(--teal);color:var(--teal2);}
.mxBtnSm--primary{background:var(--teal);color:#fff;border-color:var(--teal);}
.mxBtnSm--primary:hover{background:var(--teal2);color:#fff;}

/* KPIs */
.mxKpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px;}
@media (max-width:880px){.mxKpis{grid-template-columns:repeat(2,1fr);}}
.mxKpi{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px;transition:all .25s;}
.mxKpi--flash{box-shadow:0 0 0 3px rgba(20,184,166,.35);transform:translateY(-2px);}
.mxKpi__label{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;}
.mxKpi__value{font-size:1.85rem;font-weight:900;color:#0f172a;letter-spacing:-.03em;line-height:1;}
.mxKpi__delta{font-size:.78rem;font-weight:700;margin-top:4px;color:var(--teal2);}
.mxKpi__delta--warn{color:var(--warn);}
.mxKpi__delta--danger{color:var(--danger);}

/* Card */
.mxCard{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 20px;margin-bottom:14px;}
.mxCard__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;}
.mxCard__head h3{font-size:1rem;font-weight:800;color:#0f172a;margin:0;letter-spacing:-.005em;}
.mxCard__head p{color:var(--muted);font-size:.84rem;margin:2px 0 0;}

/* Heatmap */
.mxHeat{display:grid;grid-template-columns:repeat(7,1fr);gap:9px;}
.mxHeatCell{padding:14px 10px;border-radius:9px;text-align:center;}
.mxHeatCell h6{font-size:.7rem;font-weight:800;letter-spacing:.04em;color:#0f172a;margin:0 0 4px;}
.mxHeatCell .mxHeatVal{font-size:1.05rem;font-weight:900;color:#0f172a;}
.mxHeatCell--lo{background:#fef2f2;border:1px solid #fee2e2;}
.mxHeatCell--mid{background:#fef3c7;border:1px solid #fde68a;}
.mxHeatCell--hi{background:#dcfce7;border:1px solid #bbf7d0;}
.mxHeatCell--xhi{background:#a7f3d0;border:1px solid #6ee7b7;}
.mxHeatCell--pulse{animation:mxHeatPulse 1.4s ease-out;}
@keyframes mxHeatPulse{0%{box-shadow:0 0 0 0 rgba(20,184,166,.6);}50%{box-shadow:0 0 0 8px rgba(20,184,166,.18);}100%{box-shadow:0 0 0 0 rgba(20,184,166,0);}}

/* At-risk list */
.mxRisk{display:flex;flex-direction:column;gap:8px;}
.mxRiskRow{display:flex;align-items:center;gap:12px;padding:11px 14px;background:#f8fafc;border:1px solid var(--line);border-radius:10px;}
.mxRiskRow__num{width:26px;height:26px;border-radius:50%;background:#0f172a;color:#fff;font-weight:800;font-size:.8rem;display:inline-flex;align-items:center;justify-content:center;}
.mxRiskRow__info{flex:1;}
.mxRiskRow__info h6{font-size:.92rem;font-weight:700;color:#0f172a;margin:0 0 2px;}
.mxRiskRow__info p{font-size:.78rem;color:var(--muted);margin:0;}
.mxRiskFlag{font-size:.72rem;font-weight:800;padding:4px 10px;border-radius:99px;text-transform:uppercase;letter-spacing:.05em;}
.mxRiskFlag--hi{background:#fee2e2;color:#991b1b;}
.mxRiskFlag--med{background:#fef3c7;color:#92400e;}
.mxRiskFlag--watch{background:#e0f2fe;color:#075985;}

/* Guided Replay timeline */
.mxReplay{margin-bottom:18px;}
.mxTimeline{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;margin-top:12px;}
@media (max-width:980px){.mxTimeline{grid-template-columns:repeat(4,1fr);}}
@media (max-width:560px){.mxTimeline{grid-template-columns:repeat(2,1fr);}}
.mxStep{padding:12px 10px;background:#fff;border:1px solid var(--line);border-radius:10px;text-align:left;cursor:pointer;transition:all .15s;}
.mxStep__num{width:22px;height:22px;border-radius:50%;background:#cbd5e1;color:#fff;font-weight:800;font-size:.74rem;display:inline-flex;align-items:center;justify-content:center;margin-bottom:7px;}
.mxStep__title{font-size:.84rem;font-weight:800;color:#0f172a;line-height:1.25;margin:0 0 3px;}
.mxStep__sub{font-size:.72rem;color:var(--muted);line-height:1.35;margin:0;}
.mxStep--active{border-color:var(--teal);background:linear-gradient(135deg,#f0fdfa,#fff);box-shadow:0 6px 18px rgba(20,184,166,.18);}
.mxStep--active .mxStep__num{background:var(--teal);}
.mxStep--done .mxStep__num{background:#0f766e;}
.mxStep--done .mxStep__num::before{content:'✓';}

.mxReplayBar{display:flex;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap;}
.mxReplayBtn{padding:10px 20px;background:linear-gradient(135deg,var(--teal),var(--teal2));color:#fff;font-weight:800;border-radius:8px;font-size:.9rem;display:inline-flex;align-items:center;gap:8px;}
.mxReplayBtn:hover{box-shadow:0 6px 18px rgba(20,184,166,.4);}

/* Loop diagram */
.mxLoop{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;}
@media (max-width:880px){.mxLoop{grid-template-columns:repeat(2,1fr);}}
.mxLoopNode{padding:14px 14px;background:#f8fafc;border:1px solid var(--line);border-radius:10px;text-align:center;}
.mxLoopNode__num{width:26px;height:26px;border-radius:50%;background:var(--teal);color:#fff;font-weight:800;font-size:.82rem;margin:0 auto 7px;display:flex;align-items:center;justify-content:center;}
.mxLoopNode__title{font-size:.88rem;font-weight:800;color:#0f172a;margin:0 0 3px;}
.mxLoopNode__sub{font-size:.74rem;color:var(--muted);line-height:1.35;margin:0;}

/* ========== NARRATOR PANEL ========== */
.mxNarrator{background:#fff;border-left:1px solid var(--line);padding:22px 22px;overflow-y:auto;min-height:calc(100vh - 56px);}
.mxNarrator__head{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.mxNarrator__icon{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,var(--teal),var(--teal2));color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:900;}
.mxNarrator__title{font-size:.78rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--teal2);}
.mxNarrator__subtitle{font-size:1.02rem;font-weight:900;color:#0f172a;letter-spacing:-.01em;}
.mxNarrator__progress{display:flex;align-items:center;gap:6px;margin-bottom:14px;font-size:.78rem;color:var(--muted);}
.mxNarrator__bar{flex:1;height:4px;background:#e2e8f0;border-radius:2px;overflow:hidden;}
.mxNarrator__fill{height:100%;background:linear-gradient(90deg,var(--teal),var(--mint));width:14%;transition:width .3s ease;}

.mxNarBlock{margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--line);}
.mxNarBlock:last-of-type{border-bottom:none;padding-bottom:0;margin-bottom:18px;}
.mxNarBlock h6{font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 5px;}
.mxNarBlock p{font-size:.9rem;color:#334155;line-height:1.55;margin:0;}

.mxAudio{display:flex;align-items:center;gap:12px;padding:11px 13px;background:#f0fdfa;border:1px solid #99f6e4;border-radius:9px;margin-bottom:14px;}
.mxAudio__btn{width:34px;height:34px;border-radius:50%;background:var(--teal);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:.95rem;flex-shrink:0;}
.mxAudio__btn:hover{background:var(--teal2);}
.mxAudio__info{flex:1;}
.mxAudio__label{font-size:.78rem;font-weight:700;color:#0f172a;}
.mxAudio__time{font-size:.72rem;color:var(--muted);}
.mxAudio__bar{height:3px;background:#cbd5e1;border-radius:2px;overflow:hidden;margin-top:4px;}
.mxAudio__fill{height:100%;background:var(--teal);width:0%;transition:width .2s linear;}
.mxAudio__note{font-size:.7rem;color:var(--muted);font-style:italic;margin-top:4px;}

.mxNarBtns{display:flex;gap:8px;}
.mxNarBtn{flex:1;padding:9px 12px;border-radius:7px;font-size:.82rem;font-weight:700;text-align:center;border:1px solid var(--line);background:#fff;color:#0f172a;}
.mxNarBtn:hover{border-color:var(--teal);}
.mxNarBtn--primary{background:linear-gradient(135deg,var(--teal),var(--teal2));color:#fff;border-color:var(--teal2);}
.mxNarBtn--primary:hover{box-shadow:0 4px 12px rgba(20,184,166,.35);color:#fff;}

/* ========== REPORTS TAB ========== */
.mxReports{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
@media (max-width:880px){.mxReports{grid-template-columns:1fr;}}
.mxReport{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 20px;display:flex;flex-direction:column;gap:9px;}
.mxReport h4{font-size:1rem;font-weight:800;color:#0f172a;margin:0;letter-spacing:-.005em;}
.mxReport__for{font-size:.78rem;color:var(--teal2);font-weight:700;}
.mxReport__inc{font-size:.86rem;color:#475569;line-height:1.55;flex:1;}
.mxReport__inc b{color:#0f172a;}
.mxReport__btns{display:flex;gap:8px;margin-top:6px;}
.mxReport__btns button{flex:1;}

/* ========== INTEGRATIONS TAB ========== */
.mxIntGroup{margin-bottom:16px;}
.mxIntGroup h5{font-size:.76rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--teal2);margin:0 0 8px;}
.mxIntPills{display:flex;flex-wrap:wrap;gap:7px;}
.mxIntPill{padding:7px 13px;border-radius:7px;background:#f0fdfa;border:1px solid #99f6e4;color:#0f172a;font-size:.83rem;font-weight:600;cursor:pointer;transition:all .12s;}
.mxIntPill:hover{background:var(--teal);color:#fff;border-color:var(--teal2);}
.mxIntPill--selected{background:var(--teal);color:#fff;border-color:var(--teal2);}

.mxIntMatrix{margin-top:18px;}
.mxIntMatrix table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;}
.mxIntMatrix th{background:#f8fafc;padding:10px 14px;text-align:left;font-size:.78rem;font-weight:800;letter-spacing:.04em;color:#0f172a;border-bottom:1px solid var(--line);}
.mxIntMatrix td{padding:11px 14px;font-size:.85rem;color:#475569;border-bottom:1px solid var(--line);vertical-align:top;}
.mxIntMatrix tr:last-child td{border-bottom:none;}
.mxIntMatrix td b{color:#0f172a;}

.mxIntPath{margin-top:18px;padding:18px 20px;background:linear-gradient(135deg,#f0fdfa,#fff);border:1px solid #99f6e4;border-radius:12px;}
.mxIntPath h5{font-size:.95rem;font-weight:900;color:#0f172a;margin:0 0 10px;letter-spacing:-.005em;}
.mxIntPath ol{padding-left:22px;display:flex;flex-direction:column;gap:6px;font-size:.88rem;color:#334155;}
.mxIntPath ol li{line-height:1.5;}
.mxIntPath ol li b{color:var(--teal2);}

/* ========== NEXT STEPS PANEL ========== */
.mxNext{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
@media (max-width:980px){.mxNext{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.mxNext{grid-template-columns:1fr;}}
.mxNextCard{padding:18px 20px;border-radius:12px;cursor:pointer;transition:all .15s;}
.mxNextCard:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(15,23,42,.12);}
.mxNextCard--primary{background:linear-gradient(135deg,var(--teal),var(--teal2));color:#fff;}
.mxNextCard--ghost{background:#fff;border:1px solid var(--line);color:#0f172a;}
.mxNextCard h4{font-size:1rem;font-weight:900;margin:0 0 6px;letter-spacing:-.01em;}
.mxNextCard p{font-size:.82rem;margin:0;opacity:.9;line-height:1.5;}

/* ========== EMAIL MODAL ========== */
.mxModalBg{position:fixed;inset:0;background:rgba(15,23,42,.7);z-index:200;display:none;align-items:center;justify-content:center;padding:20px;animation:mxFade .2s;}
.mxModalBg--open{display:flex;}
.mxModal{background:#fff;border-radius:16px;max-width:480px;width:100%;padding:30px 30px 24px;box-shadow:0 25px 55px rgba(0,0,0,.25);}
.mxModal h3{font-size:1.35rem;font-weight:900;color:#0f172a;margin:0 0 6px;letter-spacing:-.02em;}
.mxModal p{color:var(--muted);font-size:.92rem;margin:0 0 20px;}
.mxModal label{display:block;font-size:.8rem;font-weight:700;color:#0f172a;margin:14px 0 6px;}
.mxModal input{width:100%;padding:11px 14px;font-size:.94rem;border:1px solid var(--line);border-radius:8px;font-family:inherit;color:#0f172a;}
.mxModal input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(20,184,166,.18);}
.mxModalBtns{display:flex;gap:10px;margin-top:22px;}
.mxModalBtns button{flex:1;padding:12px 18px;font-size:.92rem;font-weight:800;border-radius:8px;}
.mxModalSubmit{background:linear-gradient(135deg,var(--teal),var(--teal2));color:#fff;}
.mxModalSubmit:hover{box-shadow:0 6px 18px rgba(20,184,166,.4);}
.mxModalCancel{background:#f1f5f9;color:#0f172a;}
.mxModalSuccess{display:none;text-align:center;}
.mxModalSuccess--shown{display:block;}
.mxModalSuccess__icon{width:54px;height:54px;border-radius:50%;background:#dcfce7;color:var(--teal2);font-size:1.65rem;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;}
.mxModalSuccess h3{margin-bottom:8px;}
.mxModalNext{display:flex;flex-direction:column;gap:8px;margin-top:16px;}
.mxModalNext button{padding:11px 16px;font-size:.88rem;font-weight:700;border-radius:8px;border:1px solid var(--line);background:#fff;color:#0f172a;text-align:left;}
.mxModalNext button:hover{border-color:var(--teal);}

/* ========== FOOTER ========== */
.mxFootDisclaim{padding:16px 24px;background:#fff;border-top:1px solid var(--line);text-align:center;font-size:.8rem;color:var(--muted);font-style:italic;}

/* ==========================================================================
   v1.1 additions — report-preview drawer, status pill, ready-state report cards
   ========================================================================== */

/* Replay status pill (visible during guided replay) */
.mxReplayStatus{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:99px;font-size:.78rem;font-weight:800;letter-spacing:.04em;background:#f1f5f9;border:1px solid var(--line);color:var(--muted);transition:all .15s;opacity:.55;}
.mxReplayStatus.mxBadge--shown{opacity:1;}
.mxReplayStatus[data-tone="info"]{background:#e0f2fe;border-color:#bae6fd;color:#0369a1;}
.mxReplayStatus[data-tone="warn"]{background:#fef3c7;border-color:#fde68a;color:#92400e;}
.mxReplayStatus[data-tone="danger"]{background:#fee2e2;border-color:#fecaca;color:#991b1b;}
.mxReplayStatus[data-tone="success"]{background:#dcfce7;border-color:#bbf7d0;color:#166534;}
.mxReplayStatus::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor;}

/* Report card "Ready" state */
.mxReport--ready{border:2px solid #16a34a;background:linear-gradient(135deg,#f0fdf4,#fff);box-shadow:0 8px 22px rgba(22,163,74,.18);}
.mxReport__readyBadge{margin-left:auto;}

/* Generic side-effect pulse */
.mxFx--pulse{animation:mxFxPulse 1.4s ease-out;}
@keyframes mxFxPulse{0%{box-shadow:0 0 0 0 rgba(20,184,166,.6);}50%{box-shadow:0 0 0 10px rgba(20,184,166,.18);}100%{box-shadow:0 0 0 0 rgba(20,184,166,0);}}

/* ============== Report Drawer ============== */
.mxReportDrawer{position:fixed;inset:0;z-index:200;background:rgba(15,23,42,.55);display:none;align-items:stretch;justify-content:flex-end;}
.mxReportDrawer--open{display:flex;animation:mxFade .22s ease-out;}
.mxReportDrawer__panel{width:min(560px,100%);background:#fff;height:100%;display:flex;flex-direction:column;box-shadow:-25px 0 60px rgba(0,0,0,.25);overflow-y:auto;animation:mxSlideIn .28s cubic-bezier(.2,.8,.2,1);}
@keyframes mxSlideIn{from{transform:translateX(40px);opacity:.4;}to{transform:translateX(0);opacity:1;}}
.mxReportDrawer__head{padding:26px 32px 20px;background:linear-gradient(135deg,#0f172a 0%,#162C55 100%);color:#fff;position:relative;}
.mxReportDrawer__head h2{font-size:1.55rem;font-weight:950;letter-spacing:-.02em;margin:8px 0 6px;line-height:1.18;color:#fff;}
.mxReportDrawer__eyebrow{display:inline-block;padding:5px 11px;border-radius:99px;background:rgba(94,234,212,.18);border:1px solid rgba(94,234,212,.4);color:#5eead4;font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;}
.mxReportDrawer__audience{margin:0;font-size:.82rem;color:rgba(255,255,255,.78);}
.mxReportDrawer__close{position:absolute;top:18px;right:20px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;font-size:1.4rem;line-height:1;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;transition:background .15s;}
.mxReportDrawer__close:hover{background:rgba(255,255,255,.22);}
.mxReportDrawer__body{padding:24px 32px 12px;flex:1;}
.mxReportDrawer__body section{margin-bottom:20px;}
.mxReportDrawer__body h4{font-size:.74rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--teal2,#0d9488);margin:0 0 8px;}
.mxReportDrawer__body p{font-size:.95rem;line-height:1.6;color:#334155;margin:0;}
.mxReportDrawer__body ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;}
.mxReportDrawer__body ul li{padding-left:18px;position:relative;font-size:.92rem;line-height:1.55;color:#334155;}
.mxReportDrawer__body ul li::before{content:'';position:absolute;left:0;top:.6em;width:7px;height:7px;border-radius:50%;background:var(--teal,#14b8a6);}
.mxReportDrawer__note{margin-top:18px;padding:12px 14px;background:#f8fafc;border:1px dashed var(--line);border-radius:8px;font-size:.82rem;color:var(--muted);text-align:center;}
.mxReportDrawer__cta{display:flex;gap:10px;padding:18px 32px 26px;background:#fff;border-top:1px solid var(--line);}
.mxReportDrawer__cta button{flex:1;padding:13px 18px;font-size:.92rem;font-weight:800;border-radius:9px;}
.mxReportDrawer__cta .mxBtnGhost{background:#fff;color:#0f172a !important;border:1px solid var(--line);}
.mxReportDrawer__cta .mxBtnGhost:hover{border-color:var(--teal);color:var(--teal2) !important;}

/* New row pulse for added items */
.mxNewRow{position:relative;}
.mxNewRow::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--teal,#14b8a6),var(--teal2,#0d9488));border-radius:2px 0 0 2px;}

/* ==========================================================================
   v1.2 — Self-Explore TeachBack: hover affordance, active glow,
   self-explore hint banner, mobile bottom-sheet narrator
   ========================================================================== */

/* Teachable elements: subtle teal border on hover + "TeachBack this" pill */
.mxTeachable{position:relative;cursor:pointer;transition:box-shadow .15s,outline .15s;outline:1px dashed transparent;outline-offset:3px;}
.mxTeachable:hover{outline-color:rgba(20,184,166,.45);}
.mxApp[data-mx-mode="explore"] .mxTeachable{outline-color:rgba(20,184,166,.16);}
.mxApp[data-mx-mode="explore"] .mxTeachable:hover{outline-color:var(--teal,#14b8a6);}

/* Hover hint pill — only shown in self-explore mode */
.mxApp[data-mx-mode="explore"] .mxTeachable::after{
  content:'⚡ TeachBack™ this';
  position:absolute;top:6px;right:6px;
  padding:3px 8px;border-radius:99px;
  background:rgba(15,23,42,.92);color:#5eead4;
  font-size:.65rem;font-weight:800;letter-spacing:.04em;
  opacity:0;pointer-events:none;transition:opacity .15s;
  z-index:5;white-space:nowrap;
  box-shadow:0 4px 10px rgba(0,0,0,.18);
}
.mxApp[data-mx-mode="explore"] .mxTeachable:hover::after{opacity:1;}

/* Active state — when a teachable element is currently the context */
.mxTeachable--active{outline:2px solid var(--teal,#14b8a6) !important;outline-offset:3px;box-shadow:0 0 0 4px rgba(20,184,166,.18);animation:mxTeachActive 1.2s ease-out;}
@keyframes mxTeachActive{0%{box-shadow:0 0 0 0 rgba(20,184,166,.5);}50%{box-shadow:0 0 0 12px rgba(20,184,166,.18);}100%{box-shadow:0 0 0 4px rgba(20,184,166,.18);}}

/* Self-Explore hint banner */
.mxSEHint{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(60px);max-width:640px;width:92%;display:flex;align-items:center;gap:12px;padding:12px 18px;border-radius:12px;background:linear-gradient(135deg,#0f172a 0%,#162C55 100%);color:#fff;border:1px solid rgba(94,234,212,.4);box-shadow:0 14px 38px rgba(0,0,0,.35);z-index:150;opacity:0;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .25s;font-size:.88rem;line-height:1.45;}
.mxSEHint--shown{opacity:1;transform:translateX(-50%) translateY(0);}
.mxSEHint--out{opacity:0;transform:translateX(-50%) translateY(60px);}
.mxSEHint__ico{font-size:1.1rem;color:#5eead4;flex-shrink:0;}
.mxSEHint b{color:#5eead4;font-weight:900;}
.mxSEHint em{font-style:normal;color:#5eead4;font-weight:700;}
.mxSEHint__close{margin-left:auto;background:rgba(255,255,255,.08);color:#fff;border:none;width:26px;height:26px;border-radius:50%;font-size:.95rem;line-height:1;cursor:pointer;flex-shrink:0;}
.mxSEHint__close:hover{background:rgba(255,255,255,.18);}

/* ============== Mobile bottom-sheet narrator ============== */
@media (max-width:900px){
  /* Hide the inline narrator column; replace with bottom-sheet behavior */
  .mxNarrator{
    position:fixed;left:0;right:0;bottom:0;top:auto;
    width:100%;min-height:0;max-height:62vh;
    border-left:none;border-top:1px solid var(--line);
    border-radius:18px 18px 0 0;
    transform:translateY(calc(100% - 56px));
    transition:transform .3s cubic-bezier(.2,.8,.2,1);
    z-index:120;background:#fff;box-shadow:0 -14px 38px rgba(0,0,0,.18);
    padding-top:14px;
  }
  .mxNarrator::before{
    content:'';position:absolute;top:6px;left:50%;transform:translateX(-50%);
    width:36px;height:4px;border-radius:2px;background:#cbd5e1;
  }
  .mxNarrator__head{cursor:pointer;}
  .mxNarrator{overflow:hidden;}
  .mxNarrator__head, .mxNarrator__progress, .mxAudio, .mxNarBlock, .mxNarBtns{padding-left:18px;padding-right:18px;}

  /* Show as full when explicitly opened (mobile-open class) or when guided mode running */
  .mxNarrator--mobileOpen .mxNarrator,
  .mxApp--inApp[data-mx-mode="guided"] .mxNarrator{
    transform:translateY(0);
    overflow-y:auto;
  }

  body.mxNarrator--mobileOpen .mxNarrator{ transform:translateY(0) !important; overflow-y:auto !important; }
}

/* ==========================================================================
   v1.4 — Selected systems summary + dynamic pathway
   ========================================================================== */
.mxIntSummary{display:none;margin:14px 0 18px;padding:14px 18px;border-radius:12px;background:linear-gradient(135deg,#0f172a,#162C55);color:#fff;border:1px solid rgba(94,234,212,.3);}
.mxIntSummary--shown{display:block;animation:mxFade .25s ease-out;}
.mxIntSummary__row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:.88rem;line-height:1.55;}
.mxIntSummary__label{font-size:.74rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#5eead4;}
.mxIntSummary__grp{padding:5px 12px;border-radius:8px;background:rgba(94,234,212,.12);border:1px solid rgba(94,234,212,.25);}
.mxIntSummary__grp b{color:#5eead4;font-weight:800;}

/* v1.7.6 — Pulse animation on the Start replay button while user hasn't
   started yet, so the welcome state has an obvious next-action target. */
@keyframes mxBtnPulseAnim {
  0%, 100% { box-shadow: 0 0 0 0 rgba(23,157,153,.5); }
  50%      { box-shadow: 0 0 0 12px rgba(23,157,153,0); }
}
.mxBtnPulse { animation: mxBtnPulseAnim 1.6s ease-out infinite; }


/* v1.7.7 — Brief visual cue while we transition between guided steps */
.mxStep.mxStep--queued {
  animation: mxStepQueuedPulse 0.9s ease-out 1;
}
@keyframes mxStepQueuedPulse {
  0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(23,157,153,.5); }
  60%  { transform: scale(1.04); box-shadow: 0 0 0 10px rgba(23,157,153,0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(23,157,153,0); }
}