/* ─────────────────────────────────────────────────────────────────────────
   JetPatient · Growth shared styles
   Used by Stories Studio, Reputation Engine, Ambassadors, Profile Boost,
   Audience Studio, and Journey Orchestrator. Adds drawers, wizards,
   skeletons, focus states, and accessible-card affordances on top of the
   existing portal design tokens.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Right-side drawer (detail panels) ───────────────────────────────── */
.jpg-drawer-overlay{
  position:fixed;inset:0;background:rgba(5,20,55,.42);backdrop-filter:blur(4px);
  z-index:760;display:none;opacity:0;transition:opacity .2s ease;
}
.jpg-drawer-overlay.open{display:block;opacity:1}
.jpg-drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(560px,92vw);background:#fff;
  z-index:770;box-shadow:-12px 0 40px rgba(10,45,110,.18);
  transform:translateX(100%);transition:transform .28s cubic-bezier(.22,1,.36,1);
  display:flex;flex-direction:column;overflow:hidden;
}
.jpg-drawer.wide{width:min(720px,96vw)}
.jpg-drawer.open{transform:translateX(0)}
.jpg-drawer-header{
  padding:18px 22px 14px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0;
}
.jpg-drawer-title{font-size:16px;font-weight:800;color:var(--navy);letter-spacing:-.01em;line-height:1.25}
.jpg-drawer-sub{font-size:11.5px;color:var(--muted);font-weight:600;margin-top:2px;letter-spacing:.02em}
.jpg-drawer-close{
  background:transparent;border:1px solid var(--border);border-radius:8px;
  width:34px;height:34px;cursor:pointer;color:var(--muted);font-size:17px;
  display:flex;align-items:center;justify-content:center;transition:all .12s;flex-shrink:0;
}
.jpg-drawer-close:hover{background:var(--bg2);color:var(--navy);border-color:#94A3B8}
.jpg-drawer-close:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.jpg-drawer-body{padding:18px 22px;overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch}
.jpg-drawer-footer{
  padding:14px 22px;border-top:1px solid var(--border);
  display:flex;gap:10px;justify-content:flex-end;flex-shrink:0;background:#FAFBFE;
}

/* ── Wider modal (reuses .jp-modal-overlay) ──────────────────────────── */
.jp-modal.jpg-md{max-width:680px}
.jp-modal.jpg-lg{max-width:880px}
.jp-modal.jpg-xl{max-width:1080px}

/* ── Wizard step header (shared progress bar, multi-step modals) ─── */
.jpg-wiz{display:flex;align-items:center;gap:6px;margin-bottom:18px}
.jpg-wiz-step{
  display:flex;align-items:center;gap:8px;flex:1;
}
.jpg-wiz-step .ix{
  width:26px;height:26px;border-radius:50%;background:#E5E9F2;color:#94A3B8;
  font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:all .2s;
}
.jpg-wiz-step .lab{font-size:11.5px;font-weight:700;color:var(--muted);letter-spacing:.02em;flex:1;min-width:0}
.jpg-wiz-step.active .ix{background:var(--teal);color:#fff;box-shadow:0 0 0 4px rgba(0,201,192,.18)}
.jpg-wiz-step.active .lab{color:var(--navy)}
.jpg-wiz-step.done .ix{background:var(--success);color:#fff}
.jpg-wiz-step.done .ix::after{content:"✓";font-size:13px}
.jpg-wiz-step.done .ix .n{display:none}
.jpg-wiz-conn{flex:0 0 28px;height:2px;background:#E5E9F2;border-radius:1px}
.jpg-wiz-conn.done{background:var(--success)}
.jpg-pane{display:none}
.jpg-pane.active{display:block;animation:jpgFade .25s ease both}
@keyframes jpgFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

/* ── Form primitives (shared form fields) ────────────────────────────── */
.jpg-fld{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.jpg-fld label{font-size:11px;color:var(--muted);font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.jpg-fld input[type="text"],
.jpg-fld input[type="email"],
.jpg-fld input[type="tel"],
.jpg-fld input[type="number"],
.jpg-fld input[type="date"],
.jpg-fld input[type="url"],
.jpg-fld select,
.jpg-fld textarea{
  font:inherit;background:#fff;border:1px solid var(--border);border-radius:8px;
  padding:9px 11px;color:var(--navy);font-size:13px;width:100%;transition:border-color .15s,box-shadow .15s;
}
.jpg-fld input:focus,
.jpg-fld select:focus,
.jpg-fld textarea:focus{
  outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,201,192,.16);
}
.jpg-fld textarea{min-height:84px;resize:vertical;font-family:inherit;line-height:1.5}
.jpg-fld .help{font-size:11px;color:var(--muted);font-weight:600;line-height:1.45}
.jpg-fld-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:560px){.jpg-fld-row{grid-template-columns:1fr}}
.jpg-fld-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
@media (max-width:680px){.jpg-fld-3{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.jpg-fld-3{grid-template-columns:1fr}}

.jpg-toggle{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--navy);font-weight:600;cursor:pointer;user-select:none}
.jpg-toggle input{margin:0;cursor:pointer;width:16px;height:16px;accent-color:var(--teal)}

.jpg-chip-grp{display:flex;flex-wrap:wrap;gap:6px}
.jpg-chip{
  background:#fff;border:1px solid var(--border);color:var(--muted);
  padding:6px 11px;border-radius:100px;font-size:11.5px;font-weight:700;cursor:pointer;
  transition:all .12s;font-family:inherit;
}
.jpg-chip:hover{border-color:#94A3B8;color:var(--navy)}
.jpg-chip:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.jpg-chip.on{background:rgba(0,201,192,.14);border-color:rgba(0,201,192,.45);color:#00766F}

/* ── Empty / Loading / Error states ──────────────────────────────────── */
/* Wave 3 / Task 9 — promoted from Audience/Journeys to the shared layer.
   Used by every Growth module via JPGrowth.empty / .loading / .error. */
.jpg-empty{
  padding:38px 22px;text-align:center;background:#fff;border:1px dashed var(--border);
  border-radius:14px;color:var(--muted);
}
.jpg-empty .icon{
  width:48px;height:48px;border-radius:50%;background:var(--teal-lt,#E0FAF9);
  color:var(--teal-dk,#00857C);display:inline-flex;align-items:center;justify-content:center;
  margin:0 auto 12px;font-size:22px;font-weight:800;
}
.jpg-empty h4{color:var(--navy);font-size:15px;font-weight:800;margin:0 0 6px}
.jpg-empty p{font-size:13px;line-height:1.55;max-width:440px;margin:0 auto}
.jpg-empty .cta{margin-top:14px;display:inline-flex;gap:8px}
.jpg-empty .cta button{
  background:var(--teal);color:#fff;border:none;border-radius:8px;
  padding:8px 14px;font-size:12.5px;font-weight:800;cursor:pointer;font-family:inherit;
}
.jpg-empty .cta button.ghost{background:#fff;color:var(--navy);border:1px solid var(--border)}

.jpg-loading{
  padding:32px 22px;text-align:center;background:#fff;border:1px solid var(--border);
  border-radius:14px;color:var(--muted);font-size:13px;
}
.jpg-loading .spinner{
  width:32px;height:32px;border-radius:50%;border:3px solid #E2E8F0;
  border-top-color:var(--teal,#00C9C0);animation:jpgSpin 0.85s linear infinite;
  margin:0 auto 12px;
}
@keyframes jpgSpin{to{transform:rotate(360deg)}}

.jpg-error{
  padding:30px 22px;text-align:center;background:#FFF5F5;border:1px solid #FED7D7;
  border-left:4px solid #EF4444;border-radius:14px;color:#7F1D1D;
}
.jpg-error .icon{
  width:40px;height:40px;border-radius:50%;background:rgba(239,68,68,0.12);
  color:#B91C1C;display:inline-flex;align-items:center;justify-content:center;
  margin:0 auto 10px;font-size:20px;font-weight:800;
}
.jpg-error h4{color:#7F1D1D;font-size:14.5px;font-weight:800;margin:0 0 4px}
.jpg-error p{font-size:12.5px;line-height:1.55;max-width:420px;margin:0 auto;color:#991B1B}
.jpg-error .cta{margin-top:12px;display:inline-flex;gap:8px}
.jpg-error .cta button{
  background:#fff;color:#7F1D1D;border:1px solid #FECACA;border-radius:7px;
  padding:6px 12px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;
}

/* Demo-mode pill suppression (Wave 3 / Task 9). When the body carries
   data-jp-demo="false", every DEMO DATA badge is hidden so paying clinics
   never see fixture chrome. Modules using these pills add the data attribute
   class .jp-demo-pill to them so we can target them generically. */
body[data-jp-demo="false"] .jp-demo-pill{ display:none !important; }
/* Larger demo content blocks (hard-coded leads board, candidate cards,
   roster tiles, …) carry .jp-demo-content. Tagged blocks hide in production
   so the operator never sees a fake "Carmen R." or "Maria R." row. Modules
   should still render their real content (or an honest empty state) when
   demo is off. */
body[data-jp-demo="false"] .jp-demo-content{ display:none !important; }
/* Real-mode empty-state placeholders. Hidden by default (style="display:none"
   on the markup); flipped to block when demo is off. Each module's content
   container should ship a sibling .jp-real-empty with a single-CTA path so
   a paying clinic sees an actionable empty state, not a blank panel. */
body[data-jp-demo="false"] .jp-real-empty{ display:block !important; }

/* ── Round 3 — Demo-mode banner (top of every Growth page when demo is on) ── */
.jpg-demo-banner{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap;
  background:linear-gradient(90deg, rgba(0,201,192,0.10) 0%, rgba(124,92,247,0.10) 100%);
  border:1px solid rgba(0,201,192,0.30);
  border-radius:12px; padding:10px 16px; margin-bottom:14px;
  font-size:12.5px; color:#0A2D6E;
}
.jpg-demo-banner .lhs{ display:flex; align-items:center; gap:10px; flex:1; min-width:0; }
.jpg-demo-banner .dot{
  width:7px; height:7px; border-radius:50%;
  background:linear-gradient(135deg, #00C9C0, #7C5CF7);
  box-shadow:0 0 0 4px rgba(0,201,192,.18);
  flex-shrink:0;
}
.jpg-demo-banner b{ font-weight:800; }
.jpg-demo-banner .rhs{ display:flex; align-items:center; gap:8px; }
.jpg-demo-banner .learn{
  font-size:11.5px; font-weight:700; color:#00857C; text-decoration:none;
  padding:5px 10px; border-radius:6px; transition:background .15s;
}
.jpg-demo-banner .learn:hover{ background:rgba(0,201,192,.10); }
.jpg-demo-banner .cta{
  background:#0A2D6E; color:#fff; border:none;
  border-radius:8px; padding:7px 12px; font-size:12px; font-weight:800;
  cursor:pointer; font-family:inherit; transition:transform .12s, box-shadow .12s;
}
.jpg-demo-banner .cta:hover{ transform:translateY(-1px); box-shadow:0 4px 12px rgba(10,45,110,.22); }
[data-theme="dark"] .jpg-demo-banner{
  background:linear-gradient(90deg, rgba(0,201,192,0.16) 0%, rgba(124,92,247,0.16) 100%);
  border-color:rgba(0,201,192,0.42); color:#E0FAF9;
}
[data-theme="dark"] .jpg-demo-banner .cta{ background:#00C9C0; color:#0A2D6E; }

/* ── Round 3 — Demo-mode topbar pill (small chip that double-clicks-to-toggle) ── */
.jpg-demo-topbar-pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px; border-radius:100px;
  font-size:11px; font-weight:800; letter-spacing:.06em;
  cursor:pointer; font-family:inherit;
  transition:all .15s ease;
  user-select:none;
}
.jpg-demo-topbar-pill .dot{
  width:6px; height:6px; border-radius:50%;
  flex-shrink:0;
}
.jpg-demo-topbar-pill.on{
  background:rgba(0,201,192,0.15); color:#00766F;
  border:1px solid rgba(0,201,192,0.40);
}
.jpg-demo-topbar-pill.on .dot{
  background:linear-gradient(135deg, #00C9C0, #7C5CF7);
  box-shadow:0 0 0 3px rgba(0,201,192,.18);
}
.jpg-demo-topbar-pill.on:hover{ background:rgba(0,201,192,0.22); }
.jpg-demo-topbar-pill.off{
  background:rgba(15,23,42,0.05); color:#475569;
  border:1px solid rgba(15,23,42,0.12);
}
.jpg-demo-topbar-pill.off .dot{
  background:#94A3B8;
}
.jpg-demo-topbar-pill.off:hover{ background:rgba(15,23,42,0.10); color:#0F172A; }
.jpg-demo-topbar-pill:focus-visible{ outline:2px solid var(--teal,#00C9C0); outline-offset:2px; }

/* ── Round 5 / Task 1 — ⌘K Universal Patient Spotlight ─────────────────── */
#jpg-spotlight-overlay{
  position:fixed; inset:0; z-index:1000;
  background:rgba(8,18,40,0.55); backdrop-filter:blur(6px);
  display:flex; align-items:flex-start; justify-content:center;
  padding:12vh 16px 16px; animation:jpgSlFade .18s ease;
}
@keyframes jpgSlFade { from { opacity:0; } to { opacity:1; } }
.jpg-sl-card{
  width:100%; max-width:600px; background:#fff;
  border-radius:14px; box-shadow:0 24px 60px rgba(8,18,40,0.40);
  overflow:hidden; display:flex; flex-direction:column;
  animation:jpgSlRise .22s cubic-bezier(.22,.9,.36,1);
}
@keyframes jpgSlRise {
  from { transform:translateY(16px); opacity:0; }
  to   { transform:translateY(0);    opacity:1; }
}
#jpg-spotlight-input{
  width:100%; box-sizing:border-box;
  border:0; border-bottom:1px solid #E4E9F2;
  padding:18px 20px; font-size:16px; font-family:inherit;
  color:#0A2D6E; background:#fff; outline:0;
}
#jpg-spotlight-input::placeholder{ color:#94A3B8; }
.jpg-sl-list{
  max-height:55vh; overflow-y:auto; padding:6px 0;
}
.jpg-sl-row{
  display:grid; grid-template-columns:36px 1fr auto;
  gap:12px; align-items:center;
  padding:9px 16px; cursor:pointer;
  border-left:3px solid transparent;
}
.jpg-sl-row.active{ background:#F5F8FD; border-left-color:#00C9C0; }
.jpg-sl-av{
  width:36px; height:36px; border-radius:50%;
  background:linear-gradient(135deg,#00C9C0,#0A2D6E); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:12px;
}
.jpg-sl-nm{
  font-size:13.5px; font-weight:700; color:#0A2D6E;
  display:flex; align-items:center; gap:6px;
}
.jpg-sl-nm .flag{ font-size:13px; }
.jpg-sl-meta{
  font-size:11.5px; color:#475569; margin-top:2px;
  display:flex; align-items:center; gap:4px; flex-wrap:wrap;
}
.jpg-sl-pill{
  display:inline-flex; align-items:center;
  padding:1px 7px; border-radius:100px;
  background:#E0FAF9; color:#00857C;
  font-size:10.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em;
}
.jpg-sl-meta-x{ color:#64748B; }
.jpg-sl-id{
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:10.5px; color:#94A3B8; font-weight:700;
}
.jpg-sl-hint{
  border-top:1px solid #F1F4F9; padding:8px 18px;
  font-size:10.5px; color:#94A3B8; display:flex; gap:12px; align-items:center;
}
.jpg-sl-hint span{
  background:#F1F5F9; border:1px solid #E2E8F0; border-radius:4px;
  padding:1px 6px; font-family:'JetBrains Mono', monospace;
  font-size:10px; color:#475569; font-weight:700;
}

/* ── Round 5 / Task 5 — Unified Activity Feed ──────────────────────────── */
.jpg-activity-bar{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:12px 14px; background:#fff; border:1px solid var(--border, #E4E9F2);
  border-radius:12px; margin-bottom:12px;
}
.jpg-activity-bar-h{
  font-size:10.5px; font-weight:800; color:#94A3B8;
  text-transform:uppercase; letter-spacing:.07em; margin-right:4px;
}
.jpg-activity-chip{
  padding:5px 11px; border-radius:100px;
  border:1px solid var(--border, #E4E9F2); background:#fff;
  font-size:11.5px; font-weight:700; color:#475569;
  cursor:pointer; font-family:inherit;
}
.jpg-activity-chip:hover{ border-color:#94A3B8; }
.jpg-activity-chip.on{
  background:rgba(0,201,192,.14); border-color:rgba(0,201,192,.40); color:#00766F;
}
.jpg-activity-export{
  background:#0A2D6E; color:#fff; border:0; border-radius:8px;
  padding:6px 12px; font-size:11.5px; font-weight:800;
  cursor:pointer; font-family:inherit;
}
.jpg-activity-export:hover{ background:#1a3f88; }
.jpg-activity-feed{ display:flex; flex-direction:column; gap:6px; }
.jpg-activity-row{
  display:grid; grid-template-columns:90px 1fr; gap:14px;
  padding:10px 14px; background:#fff;
  border:1px solid var(--border, #E4E9F2); border-radius:10px;
  font-size:12.5px;
}
.jpg-activity-time{
  font-size:11px; color:#94A3B8; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em;
}
.jpg-activity-kind{ display:flex; align-items:center; gap:6px; margin-bottom:3px; }
.jpg-activity-pill{
  background:#EEF2FF; color:#3730A3; border:1px solid #C7D2FE;
  padding:1px 7px; border-radius:100px; font-size:10.5px; font-weight:800;
}
.jpg-activity-module{
  font-size:10.5px; color:#64748B; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em;
}
.jpg-activity-detail{
  color:#0A2D6E; font-weight:600; line-height:1.4;
}
.jpg-activity-link{
  display:inline-block; margin-top:3px; font-size:11.5px;
  color:#00857C; font-weight:700; text-decoration:none;
}
.jpg-activity-link:hover{ text-decoration:underline; }

/* ── Round 5 / Task 8 — First-time clinic onboarding card ──────────────── */
.jpg-onboard-card{
  background:linear-gradient(135deg,#FAFBFE 0%,#FFFFFF 100%);
  border:1px solid var(--border, #E4E9F2); border-radius:16px;
  padding:20px 22px;
}
.jpg-onboard-hdr{
  position:relative; padding-right:90px;
  border-bottom:1px solid #F1F5F9; margin-bottom:14px;
}
.jpg-onboard-eyebrow{
  font-size:10.5px; font-weight:800; color:#00857C;
  text-transform:uppercase; letter-spacing:.08em;
}
.jpg-onboard-hdr h3{
  margin:6px 0 4px; font-size:18px; font-weight:800; color:#0A2D6E;
  letter-spacing:-0.01em;
}
.jpg-onboard-hdr p{
  margin:0 0 12px; font-size:13px; color:#475569; line-height:1.5;
}
.jpg-onboard-progress{
  height:6px; border-radius:100px; background:#E2E8F0; overflow:hidden;
  margin-bottom:14px;
}
.jpg-onboard-progress-fill{
  height:100%; background:linear-gradient(90deg,#00C9C0,#7C5CF7);
  transition:width .3s ease;
}
.jpg-onboard-dismiss{
  position:absolute; top:0; right:0;
  background:transparent; border:1px solid var(--border, #E4E9F2);
  color:#64748B; border-radius:8px; padding:5px 11px;
  font-size:11.5px; font-weight:700; cursor:pointer; font-family:inherit;
}
.jpg-onboard-dismiss:hover{ background:#F8FAFC; color:#0A2D6E; }

.jpg-onboard-list{ display:flex; flex-direction:column; gap:10px; }
.jpg-onboard-step{
  display:grid; grid-template-columns:32px 1fr auto;
  gap:14px; align-items:flex-start;
  padding:12px 14px; background:#fff;
  border:1px solid var(--border, #E4E9F2); border-radius:10px;
}
.jpg-onboard-step.done{ background:#F8FAFC; opacity:.85; }
.jpg-onboard-step-num{
  width:32px; height:32px; border-radius:50%;
  background:#E0FAF9; color:#00857C;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:13px; flex-shrink:0;
}
.jpg-onboard-step.done .jpg-onboard-step-num{
  background:#10B981; color:#fff;
}
.jpg-onboard-step-label{ font-size:13.5px; font-weight:800; color:#0A2D6E; }
.jpg-onboard-step-sub  { font-size:11.5px; color:#64748B; margin-top:3px; line-height:1.45; }
.jpg-onboard-step-actions{ display:flex; flex-direction:column; gap:6px; align-items:flex-end; flex-shrink:0; }
.jpg-onboard-step-open{
  background:#0A2D6E; color:#fff; border:0; border-radius:7px;
  padding:6px 12px; font-size:11.5px; font-weight:800; cursor:pointer; font-family:inherit;
  white-space:nowrap;
}
.jpg-onboard-step-open:hover{ background:#1a3f88; }
.jpg-onboard-step-mark{
  background:#fff; color:#475569; border:1px solid var(--border, #E4E9F2);
  border-radius:7px; padding:5px 10px; font-size:11px; font-weight:700;
  cursor:pointer; font-family:inherit;
}
.jpg-onboard-step-mark:hover{ background:#F8FAFC; color:#0A2D6E; }
.jpg-onboard-step-status{
  font-size:11px; font-weight:800; color:#10B981;
  text-transform:uppercase; letter-spacing:.04em;
}

.jpg-skeleton{
  background:linear-gradient(90deg,#F1F5F9 0%,#E2E8F0 50%,#F1F5F9 100%);
  background-size:200% 100%;animation:jpgShimmer 1.4s ease-in-out infinite;
  border-radius:6px;
}
@keyframes jpgShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.jpg-skeleton.h-12{height:12px}
.jpg-skeleton.h-16{height:16px}
.jpg-skeleton.h-24{height:24px}
.jpg-skeleton.h-44{height:44px}
.jpg-skeleton.w-50{width:50%}
.jpg-skeleton.w-70{width:70%}

.jpg-error{
  background:#FEF2F2;border:1px solid #FECACA;border-radius:8px;
  padding:10px 12px;color:#991B1B;font-size:12px;line-height:1.5;display:flex;gap:8px;
}

/* ── Inline alert / info banner (used inside drawers + wizards) ── */
.jpg-banner{
  background:linear-gradient(135deg,rgba(0,201,192,.07),rgba(124,92,247,.05));
  border:1px solid rgba(0,201,192,.22);border-left:3px solid var(--teal);
  border-radius:8px;padding:10px 12px;font-size:12px;color:var(--navy);line-height:1.5;
  display:flex;gap:8px;align-items:flex-start;
}
.jpg-banner.warn{
  background:#FEF3C7;border:1px solid #FDE68A;border-left-color:#F59E0B;color:#78350F;
}
.jpg-banner.success{
  background:#F0FDF4;border:1px solid #BBF7D0;border-left-color:#10B981;color:#065F46;
}
.jpg-banner.danger{
  background:#FEF2F2;border:1px solid #FECACA;border-left-color:#EF4444;color:#991B1B;
}
.jpg-banner b{font-weight:800}

/* ── Accessible card affordance (cards become real buttons) ─────── */
.jpg-card-btn{cursor:pointer;transition:transform .15s,box-shadow .15s,border-color .15s}
.jpg-card-btn:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:12px}

/* ── Pill helpers ─────────────────────────────────────────────────── */
.jpg-pill{
  display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:100px;
  background:#F1F5F9;color:var(--navy);font-size:10.5px;font-weight:700;
  border:1px solid #E4E9F2;
}
.jpg-pill.ok{background:rgba(16,185,129,.10);color:#065F46;border-color:rgba(16,185,129,.30)}
.jpg-pill.warn{background:rgba(245,158,11,.13);color:#92400E;border-color:rgba(245,158,11,.30)}
.jpg-pill.danger{background:rgba(220,38,38,.12);color:#991B1B;border-color:rgba(220,38,38,.30)}
.jpg-pill.info{background:rgba(59,130,246,.10);color:#1E40AF;border-color:rgba(59,130,246,.28)}
.jpg-pill.purple{background:rgba(124,92,247,.10);color:#5B21B6;border-color:rgba(124,92,247,.30)}
.jpg-pill.teal{background:rgba(0,201,192,.10);color:#00766F;border-color:rgba(0,201,192,.30)}

/* ── KV grid (label/value pairs) ─────────────────────────────────── */
.jpg-kv{display:grid;grid-template-columns:120px 1fr;gap:8px 14px;font-size:12.5px}
.jpg-kv .k{color:var(--muted);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.04em;padding-top:1px}
.jpg-kv .v{color:var(--navy);font-weight:600;line-height:1.45}

/* ── Progress bar (reusable) ─────────────────────────────────────── */
.jpg-progress{height:6px;border-radius:100px;background:#E5E9F2;overflow:hidden;position:relative}
.jpg-progress > .fill{height:100%;border-radius:100px;background:linear-gradient(90deg,var(--teal),#7C5CF7);transition:width .5s ease}
.jpg-progress.danger > .fill{background:linear-gradient(90deg,#EF4444,#F59E0B)}
.jpg-progress.success > .fill{background:linear-gradient(90deg,#10B981,#34D399)}

/* ── Detail-panel patterns (event log, attribute list) ─────────── */
.jpg-panel{background:#fff;border:1px solid var(--border);border-radius:12px;padding:14px 16px;margin-bottom:12px}
.jpg-panel-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;gap:8px}
.jpg-panel-h h4{margin:0;font-size:12.5px;font-weight:800;color:var(--navy);letter-spacing:-.005em}
.jpg-panel-h .meta{font-size:11px;color:var(--muted);font-weight:600}
.jpg-event{display:flex;gap:10px;padding:6px 0;border-bottom:1px dashed #EEF1F8;font-size:12px;color:var(--navy);line-height:1.45}
.jpg-event:last-child{border-bottom:none}
.jpg-event .when{font-size:10.5px;color:var(--muted);font-weight:700;flex-shrink:0;min-width:62px}
.jpg-event .what b{font-weight:800;color:var(--navy)}

/* ── Generic action button (used inside drawers/modals) ─────────── */
.jpg-btn{
  background:#fff;color:var(--navy);border:1px solid var(--border);border-radius:8px;
  padding:9px 14px;font-size:12.5px;font-weight:800;cursor:pointer;font-family:inherit;
  transition:all .12s;display:inline-flex;align-items:center;gap:6px;
}
.jpg-btn:hover{border-color:#94A3B8;background:#F8FAFC}
.jpg-btn:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.jpg-btn.primary{background:linear-gradient(135deg,#00C9C0,#0090A0);color:#fff;border:none}
.jpg-btn.primary:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,201,192,.36)}
.jpg-btn.danger{color:#B91C1C;border-color:rgba(220,38,38,.32);background:#fff}
.jpg-btn.danger:hover{background:rgba(220,38,38,.06);border-color:#B91C1C}
.jpg-btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}
.jpg-btn.ghost:hover{color:var(--navy);background:#F8FAFC;border-color:var(--border)}
.jpg-btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.jpg-btn.sm{padding:6px 10px;font-size:11.5px}

/* ── Tag/Multi-select listbox ─────────────────────────────────── */
.jpg-tags-input{
  display:flex;flex-wrap:wrap;gap:6px;padding:6px 8px;background:#fff;
  border:1px solid var(--border);border-radius:8px;min-height:40px;
}
.jpg-tags-input:focus-within{border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,201,192,.16)}
.jpg-tag{
  display:inline-flex;align-items:center;gap:5px;background:rgba(0,201,192,.10);
  color:#00766F;border:1px solid rgba(0,201,192,.30);padding:2px 6px 2px 9px;
  border-radius:100px;font-size:11px;font-weight:700;
}
.jpg-tag .x{
  background:transparent;border:none;color:#00766F;cursor:pointer;font-size:13px;
  line-height:1;padding:0 2px;
}
.jpg-tag .x:hover{color:#B91C1C}
.jpg-tags-input input{border:none;outline:none;flex:1;min-width:80px;font:inherit;background:transparent}

/* ── Confirm dialog (replaces native confirm) ─────────────────── */
.jpg-confirm{max-width:420px}
.jpg-confirm .body{font-size:13px;color:var(--navy);line-height:1.55;padding:18px 22px}
.jpg-confirm .body p{margin:0 0 8px}
.jpg-confirm .body p:last-child{margin-bottom:0}

/* ──────────────────────────────────────────────────────────────────
   Wave 1 / Task 2 — Growth shell components
   One hero / KPI row / right rail / tab strip used by every Growth
   module. Per-module accent is the *only* knob — set --jpg-hero-accent
   and (optionally) --jpg-hero-accent-soft on the page-level wrapper.

   Default accent is the JetPatient teal/navy gradient. Modules opt in
   by setting their own accent on the wrapping #page-* element:

     #page-stories     { --jpg-hero-accent: linear-gradient(135deg,#5B21B6 0%,#7C5CF7 50%,#00A8A0 100%); --jpg-hero-accent-soft: rgba(167,139,250,0.55); }
     #page-reputation  { --jpg-hero-accent: linear-gradient(135deg,#0A2D6E 0%,#1a4a9e 50%,#F59E0B 100%); --jpg-hero-accent-soft: rgba(245,165,36,0.45); }
     #page-ambassadors { --jpg-hero-accent: linear-gradient(135deg,#065F46 0%,#10B981 50%,#34D399 100%); --jpg-hero-accent-soft: rgba(167,243,208,0.45); }
     #page-boost       { --jpg-hero-accent: linear-gradient(135deg,#0F172A 0%,#1E40AF 50%,#3B82F6 100%); --jpg-hero-accent-soft: rgba(96,165,250,0.45); }
     ... and so on.

   No per-module hero / KPI / rail / tabs CSS should remain after the
   sweep — only the accent variables. See CHANGES_v2.1_growth.md.
   ────────────────────────────────────────────────────────────────── */

/* Hero ----------------------------------------------------------- */
.jpg-hero{
  --jpg-hero-accent: linear-gradient(135deg,#0A2D6E 0%,#1a3f88 60%,#00A8A0 100%);
  --jpg-hero-accent-soft: rgba(0,201,192,0.55);
  background: var(--jpg-hero-accent);
  border-radius:16px;color:#fff;padding:22px 24px;margin-bottom:22px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:18px;position:relative;overflow:hidden;
}
.jpg-hero::after{
  content:"";position:absolute;right:-60px;top:-60px;width:240px;height:240px;
  border-radius:50%;
  background:radial-gradient(closest-side, var(--jpg-hero-accent-soft), transparent);
  pointer-events:none;
}
.jpg-hero > .body{position:relative;z-index:1;flex:1 1 320px;min-width:0}
.jpg-hero h2{
  margin:0 0 6px;font-size:22px;font-weight:800;letter-spacing:-0.01em;
  display:flex;align-items:center;gap:10px;
}
.jpg-hero p{margin:0;color:rgba(255,255,255,0.85);font-size:13px;max-width:600px;line-height:1.5}
.jpg-hero .jpg-hero-pill{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,255,255,0.18);border:1px solid rgba(255,255,255,0.35);
  color:#fff;padding:3px 10px;border-radius:100px;
  font-size:10.5px;font-weight:700;letter-spacing:0.06em;
}
.jpg-hero .jpg-hero-pill .dot{
  width:6px;height:6px;border-radius:50%;background:#fff;
  animation: jpg-pulse 1.6s ease-in-out infinite;
}
@keyframes jpg-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.5;transform:scale(0.9)}}
.jpg-hero .jpg-hero-cta{
  display:flex;gap:10px;flex-wrap:wrap;position:relative;z-index:1;
}
.jpg-hero .jpg-hero-cta button{
  border:none;border-radius:10px;padding:10px 14px;
  font-size:12.5px;font-weight:700;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;font-family:inherit;
}
.jpg-hero .jpg-hero-cta button.pri{background:#fff;color:var(--navy,#0A2D6E)}
.jpg-hero .jpg-hero-cta button.pri:hover{background:#E0FAF9}
.jpg-hero .jpg-hero-cta button.ghost{
  background:rgba(255,255,255,0.13);color:#fff;border:1px solid rgba(255,255,255,0.25);
}
.jpg-hero .jpg-hero-cta button.ghost:hover{background:rgba(255,255,255,0.20)}

/* KPI row -------------------------------------------------------- */
.jpg-kpis{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px;
}
@media (max-width:980px){.jpg-kpis{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.jpg-kpis{grid-template-columns:1fr}}
.jpg-kpi{
  background:#fff;border:1px solid var(--border,#E4E9F2);border-radius:14px;
  padding:18px 18px 16px;position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:4px;
}
.jpg-kpi::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background: var(--jpg-kpi-accent, var(--teal,#00C9C0));
}
.jpg-kpi[data-tone="ok"]::before{background:#10B981}
.jpg-kpi[data-tone="warn"]::before{background:#F59E0B}
.jpg-kpi[data-tone="rev"]::before{background:#7C5CF7}
.jpg-kpi[data-tone="info"]::before{background:#3B82F6}
.jpg-kpi[data-tone="risk"]::before{background:#EF4444}
.jpg-kpi .l{
  font-size:11px;color:var(--muted,#475569);font-weight:700;
  letter-spacing:0.04em;text-transform:uppercase;
}
.jpg-kpi .v{
  font-size:26px;font-weight:800;color:var(--navy,#0A2D6E);line-height:1.1;
  display:flex;align-items:baseline;gap:5px;margin-top:2px;
}
.jpg-kpi .v small{font-size:13px;font-weight:700;color:var(--muted,#475569)}
.jpg-kpi .m{font-size:11.5px;color:var(--muted,#475569);margin-top:2px;line-height:1.4}
.jpg-kpi .up{color:#15803D;font-weight:700}
.jpg-kpi .dn{color:#B91C1C;font-weight:700}

/* Right rail ----------------------------------------------------- */
.jpg-layout{
  display:grid;grid-template-columns:1fr 360px;gap:18px;align-items:start;
}
@media (max-width:1240px){.jpg-layout{grid-template-columns:1fr}}
.jpg-rail{display:flex;flex-direction:column;gap:14px}
.jpg-rail-card{
  background:#fff;border:1px solid var(--border,#E4E9F2);border-radius:14px;padding:18px;
}
.jpg-rail-card h4{
  margin:0 0 12px;font-size:13px;font-weight:800;color:var(--navy,#0A2D6E);
  display:flex;align-items:center;gap:8px;letter-spacing:-0.01em;
}
.jpg-rail-card h4 svg{color: var(--jpg-rail-accent, var(--teal,#00C9C0))}

/* Tabs / chip filter row ----------------------------------------- */
.jpg-tabs{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px;
}
.jpg-tab{
  padding:7px 14px;border-radius:100px;border:1px solid var(--border,#E4E9F2);
  background:#fff;font-size:12.5px;font-weight:700;color:var(--muted,#475569);
  cursor:pointer;transition:all .15s;font-family:inherit;display:inline-flex;
  align-items:center;gap:6px;
}
.jpg-tab .ct{
  background:#F1F5F9;color:var(--muted,#475569);border-radius:100px;
  padding:1px 8px;font-size:10.5px;font-weight:700;
}
.jpg-tab.on,.jpg-tab.active{
  background:rgba(0,201,192,0.14);border-color:rgba(0,201,192,0.40);color:#00766F;
}
.jpg-tab.on .ct,.jpg-tab.active .ct{background:#fff;color:#00766F}
.jpg-tab:hover{border-color:#94A3B8}
.jpg-tab:focus-visible{outline:2px solid var(--teal,#00C9C0);outline-offset:2px}
.jpg-tabs .jpg-tabs-meta{
  margin-left:auto;font-size:11.5px;color:var(--muted,#475569);font-weight:600;
}

/* Up next card (placeholder shell — actual ranker lands in Wave 2 / Task 4) */
.jpg-upnext-card{
  background:linear-gradient(180deg,#FAFBFE 0%,#fff 100%);
  border:1px solid var(--border,#E4E9F2);border-radius:14px;padding:18px;
}
.jpg-upnext-card h4{margin:0 0 10px;font-size:13px;font-weight:800;color:var(--navy,#0A2D6E)}
.jpg-upnext-card .item{
  display:flex;gap:10px;align-items:flex-start;padding:10px 0;
  border-bottom:1px solid #F1F4F9;cursor:pointer;
}
.jpg-upnext-card .item:last-child{border-bottom:none}
.jpg-upnext-card .item:hover{background:#F8FAFC;margin:0 -8px;padding-left:8px;padding-right:8px;border-radius:6px}
.jpg-upnext-card .item .ic{
  width:28px;height:28px;border-radius:8px;background:var(--teal-lt,#E0FAF9);
  color:var(--teal-dk,#00857C);display:flex;align-items:center;justify-content:center;
  flex-shrink:0;font-weight:800;font-size:11px;
}
.jpg-upnext-card .item .body{flex:1;min-width:0}
.jpg-upnext-card .item .lbl{font-size:12.5px;font-weight:700;color:var(--navy,#0A2D6E);line-height:1.35}
.jpg-upnext-card .item .why{font-size:11px;color:var(--muted,#475569);margin-top:2px;line-height:1.4}