/* ===================================================================
   wow.css — Wow Moment surfaces (CHW Equity Cockpit + Live HEDIS Loop
              + Cultural Cohort Engine + lane palette utilities)
   Master Spec v3 § 7. Audience-sensitivity rider per § 16.
   =================================================================== */

/* ---------- Lane pills (small inline badges) ---------- */
.lane-pill {
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:999px;
  font-size:11px; font-weight:700; letter-spacing:0.4px; text-transform:uppercase;
}
.lane-pill--gap    { background:var(--lane-gap-soft);    color:var(--lane-gap-ink);    border:1px solid color-mix(in srgb, var(--lane-gap) 18%, transparent); }
.lane-pill--engage { background:var(--lane-engage-soft); color:var(--lane-engage-ink); border:1px solid color-mix(in srgb, var(--lane-engage) 25%, transparent); }
.lane-pill--enable { background:var(--lane-enable-soft); color:var(--lane-enable-strong); border:1px solid var(--lane-enable-border); }

/* ---------- KPI cards on lane-tagged surfaces ---------- */
.kpi-card.kpi-card--lane-gap    { border-top:3px solid var(--lane-gap); }
.kpi-card.kpi-card--lane-engage { border-top:3px solid var(--lane-engage); }
.kpi-card.kpi-card--lane-enable { border-top:3px solid var(--lane-enable); }

/* ---------- Risk tier chips (asset framing — not deficit) ---------- */
.chip-low    { background:#E6F4EC; color:#1B5E20; border:1px solid #B7D7BD; }
.chip-rising { background:#FEF1DE; color:#6E4109; border:1px solid color-mix(in srgb, var(--lane-engage) 30%, transparent); }
.chip-high   { background:#FBE9E7; color:#7C2D12; border:1px solid #FACFC4; }
.chip-priority { background:var(--lane-gap-soft); color:var(--lane-gap-ink); border:1px solid color-mix(in srgb, var(--lane-gap) 18%, transparent); margin:2px 4px 2px 0; padding:4px 10px; border-radius:6px; font-size:12px; font-weight:600; display:inline-block; }
.chip-mask   { background:var(--mask-bg); color:var(--mask-ink); border:1px solid var(--mask-border); }
.chip-soft   { background:var(--color-surface); color:var(--color-ink-soft); border:1px solid var(--color-border); margin:2px 4px 2px 0; }
.lang-pill   { background:var(--color-primary-soft); color:var(--color-primary); padding:1px 6px; border-radius:4px; font-size:11px; font-weight:700; letter-spacing:0.4px; }

/* ===================================================================
   CHW Equity Cockpit — 3-column layout (per F2 framing)
   =================================================================== */

.cockpit-grid {
  display:grid;
  grid-template-columns: 280px 1fr 320px;
  gap:20px;
  margin-top:20px;
  align-items:start;
}
@media (max-width:1100px) {
  .cockpit-grid { grid-template-columns: 1fr; }
}

.cockpit-col__head {
  display:flex; flex-direction:column; gap:4px;
  margin-bottom:12px;
}

/* ---------- Promotora panel (left col) ---------- */
.promo-card { padding:18px; }
.promo-card__avatar {
  width:64px; height:64px; border-radius:50%;
  background:linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  color:#fff; display:grid; place-items:center;
  font-family:var(--font-display); font-weight:800; font-size:22px;
  margin-bottom:14px;
}
.promo-card__name { font-size:18px; font-weight:700; color:var(--color-ink); }
.promo-card__role { font-size:13px; color:var(--color-ink-soft); margin-bottom:14px; }
.promo-card__meta { display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--color-ink-soft); }
.promo-card__meta div { padding:6px 0; border-top:1px dashed var(--color-border); }
.promo-card__meta div:first-child { border-top:none; }
.promo-card__nextwin {
  margin-top:14px; padding:12px;
  background:var(--lane-gap-soft); border-radius:10px;
}
.promo-card__nextwin .label { font-size:11px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; color:var(--lane-gap-ink); }
.promo-card__nextwin .value { font-size:14px; font-weight:600; color:var(--lane-gap-ink); margin-top:2px; }
.promo-card__badges { margin-top:14px; }
.promo-card__badges .label { font-size:11px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; color:var(--color-ink-soft); margin-bottom:6px; }

/* ---------- Member worklist (middle col) ---------- */
.member-list { display:flex; flex-direction:column; gap:10px; }
.member-card {
  background:var(--color-bg);
  border:1px solid var(--color-border);
  border-radius:12px;
  padding:14px 16px;
  transition: box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.member-card:hover { box-shadow:var(--shadow-sm); border-color:var(--color-border-strong); }
.member-card.flash { border-color:var(--lane-gap); box-shadow:0 0 0 3px var(--lane-gap-soft); }
.member-card__head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:10px; }
.member-card__name { font-weight:700; font-size:15px; color:var(--color-ink); }
.member-card__meta { font-size:12px; color:var(--color-ink-soft); }
.member-card__body { font-size:13px; color:var(--color-ink-soft); }
.member-card__row { display:flex; justify-content:space-between; padding:5px 0; border-top:1px dashed var(--color-border); }
.member-card__row:first-child { border-top:none; }
.member-card__row .k { color:var(--color-ink-mute); }
.member-card__row .v { color:var(--color-ink); font-weight:500; }
.member-card__row .v.risk { color:var(--color-warn); }
.member-card__priorities { margin-top:10px; padding-top:10px; border-top:1px dashed var(--color-border); }
.member-card__priorities .label { font-size:11px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; color:var(--color-ink-soft); margin-bottom:6px; }
.member-card__actions { display:flex; gap:8px; margin-top:12px; }
.member-card__actions .btn { flex:1; }

/* ---------- Privacy Mask card variant ---------- */
.member-card--masked {
  background:var(--mask-bg);
  border:1px dashed var(--mask-border);
}
.member-card--masked .member-card__name { color:var(--mask-ink); }
.member-card--masked .lock-glyph { font-size:13px; }
.mask-explainer { padding:12px; background:var(--color-surface-elev); border-radius:8px; border:1px solid var(--mask-border); }
.mask-explainer p { font-size:13px; color:var(--mask-ink); }

/* ---------- Intervention plan (right col) ---------- */
.plan-card { padding:18px; }
.plan-steps { list-style:none; padding:0; margin:0; }
.plan-step { display:flex; gap:12px; padding:10px 0; border-top:1px dashed var(--color-border); }
.plan-step:first-child { border-top:none; }
.plan-step__num {
  flex-shrink:0;
  width:28px; height:28px; border-radius:50%;
  background:var(--lane-gap); color:#fff;
  display:grid; place-items:center;
  font-weight:700; font-size:13px;
}
.plan-step__label { font-weight:600; font-size:13px; color:var(--color-ink); }
.plan-step__detail { font-size:12px; color:var(--color-ink-soft); margin-top:2px; }
.plan-foot { margin-top:14px; padding-top:14px; border-top:1px solid var(--color-border); }

/* ---------- Mask notice (cockpit footer) ---------- */
.mask-notice { background:var(--mask-bg); border:1px solid var(--mask-border); margin-top:24px; }
.mask-notice__title { font-size:14px; font-weight:700; color:var(--mask-ink); margin-bottom:6px; }
.mask-notice__body { font-size:13px; color:var(--mask-ink); margin:0; line-height:1.55; }

/* ===================================================================
   Live HEDIS Gap-Closure Loop (Wow #3) — 4-system simultaneous fire
   =================================================================== */

.loop-stage {
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap:16px;
  margin-top:20px;
}
@media (max-width:900px) { .loop-stage { grid-template-columns: 1fr; } }

.loop-pane {
  background:var(--color-bg);
  border:1px solid var(--color-border);
  border-radius:14px;
  padding:18px;
  position:relative;
  min-height:200px;
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.loop-pane.is-firing {
  border-color:var(--color-success);
  box-shadow:0 0 0 4px var(--color-success-soft), var(--shadow-md);
  transform: translateY(-2px);
}
.loop-pane__head { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.loop-pane__title { font-weight:700; font-size:14px; color:var(--color-ink); display:flex; align-items:center; gap:8px; }
.loop-pane__title-glyph { width:28px; height:28px; border-radius:6px; background:var(--color-primary-soft); color:var(--color-primary); display:grid; place-items:center; font-size:14px; font-weight:700; }
.loop-pane__system-tag { font-size:11px; font-weight:600; color:var(--color-ink-mute); letter-spacing:0.4px; text-transform:uppercase; }

/* The fire button + script */
.loop-stage-controls {
  display:flex; flex-direction:column; gap:12px;
  padding:18px; background:linear-gradient(135deg, var(--lane-gap-soft) 0%, #fff 100%);
  border:1px solid color-mix(in srgb, var(--lane-gap) 14%, transparent);
  border-radius:14px; margin-bottom:12px;
}
.loop-script { font-size:14px; color:var(--lane-gap-ink); line-height:1.55; font-style:italic; }
.loop-fire-btn { font-size:16px; padding:14px 24px; }

/* Pane content variations */
.points-counter { font-family:var(--font-display); font-weight:800; font-size:38px; color:var(--lane-gap); transition: color var(--dur-base) var(--ease-out); }
.points-counter.is-celebrating { color:var(--color-success); }
.celebration-banner {
  margin-top:10px; padding:10px;
  background:var(--color-success-soft); color:var(--color-success);
  border-radius:8px; font-size:13px; font-weight:600;
  opacity:0; transform: translateY(4px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.celebration-banner.is-visible { opacity:1; transform: translateY(0); }

.feed-line {
  padding:8px 12px; background:var(--color-surface); border-radius:6px;
  font-size:12px; color:var(--color-ink-soft); margin-bottom:6px;
  display:flex; gap:8px; align-items:flex-start;
  border-left:3px solid var(--color-border);
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.feed-line.is-new { background:var(--color-success-soft); border-left-color:var(--color-success); color:var(--color-ink); }
.feed-line__time { font-family:var(--font-mono); color:var(--color-ink-mute); font-size:11px; }

.kpi-flash {
  display:flex; flex-direction:column; gap:6px; align-items:center; padding:14px 0;
}
.kpi-flash__label { font-size:11px; font-weight:700; color:var(--color-ink-soft); letter-spacing:0.5px; text-transform:uppercase; }
.kpi-flash__value { font-family:var(--font-display); font-weight:800; font-size:42px; color:var(--lane-gap); transition: color var(--dur-base) var(--ease-out); }
.kpi-flash__value.is-celebrating { color:var(--color-success); }
.kpi-flash__delta { font-size:13px; color:var(--color-ink-soft); opacity:0; transition: opacity var(--dur-base) var(--ease-out); }
.kpi-flash__delta.is-visible { opacity:1; color:var(--color-success); font-weight:600; }

.outreach-preview {
  border:1px solid var(--color-border); border-radius:12px;
  padding:14px; background:var(--color-surface-elev);
  margin-top:8px; opacity:0; transform: translateX(20px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.outreach-preview.is-visible { opacity:1; transform: translateX(0); }
.outreach-preview__head { display:flex; justify-content:space-between; margin-bottom:10px; }
.outreach-preview__channel { font-size:11px; font-weight:700; color:var(--color-ink-soft); letter-spacing:0.4px; text-transform:uppercase; }
.outreach-preview__lang { background:var(--color-primary-soft); color:var(--color-primary); padding:2px 8px; border-radius:4px; font-size:11px; font-weight:700; }
.outreach-preview__body {
  font-family:var(--font-body);
  font-size:14px; color:var(--color-ink); line-height:1.5;
  background:var(--color-surface); padding:12px; border-radius:8px;
}
.outreach-preview__note { font-size:11px; color:var(--color-ink-mute); margin-top:8px; }

/* ===================================================================
   Cultural Cohort Content Engine (Wow #1)
   =================================================================== */

.cohort-engine {
  border:1px solid var(--color-border); border-radius:14px;
  padding:0; overflow:hidden;
  background:var(--color-bg);
}
.cohort-engine__bar {
  display:flex; gap:8px; align-items:center;
  padding:12px 16px; background:var(--color-surface);
  border-bottom:1px solid var(--color-border);
  flex-wrap:wrap;
}
.cohort-engine__bar .label {
  font-size:11px; font-weight:700; color:var(--color-ink-soft);
  letter-spacing:0.4px; text-transform:uppercase;
  margin-right:8px;
}
.cohort-engine__variant-btn {
  padding:6px 12px;
  background:var(--color-bg); border:1px solid var(--color-border);
  border-radius:999px; font-size:13px; font-weight:600;
  color:var(--color-ink-soft); cursor:pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.cohort-engine__variant-btn:hover { border-color:var(--color-border-strong); }
.cohort-engine__variant-btn.is-active {
  background:var(--lane-gap); color:#fff; border-color:var(--lane-gap);
}
.cohort-engine__body { padding:24px; }
.cohort-engine__module-head {
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:16px; padding-bottom:14px; border-bottom:1px solid var(--color-border);
  margin-bottom:14px;
}
.cohort-engine__module-title { font-size:20px; font-weight:700; color:var(--color-ink); margin:4px 0 0; }
.cohort-engine__module-meta { font-size:13px; color:var(--color-ink-soft); }
.cohort-engine__narrator {
  display:flex; align-items:center; gap:10px;
  background:var(--color-surface); padding:10px 14px;
  border-radius:10px; margin:14px 0;
}
.cohort-engine__narrator-avatar {
  width:42px; height:42px; border-radius:50%;
  background:linear-gradient(135deg, var(--color-secondary) 0%, var(--color-primary) 100%);
  color:#fff; display:grid; place-items:center;
  font-weight:700; font-size:14px; flex-shrink:0;
}
.cohort-engine__narrator-avatar--photo {
  background:transparent;
  object-fit:cover;
  border:2px solid #fff;
  box-shadow:0 0 0 1px var(--color-border);
}
.cohort-engine__narrator-name { font-weight:600; font-size:14px; color:var(--color-ink); }
.cohort-engine__narrator-role { font-size:12px; color:var(--color-ink-soft); }
.cohort-engine__example {
  background:var(--lane-gap-soft); border:1px solid color-mix(in srgb, var(--lane-gap) 12%, transparent);
  border-radius:10px; padding:14px; margin:10px 0;
  font-size:14px; color:var(--lane-gap-ink); line-height:1.55;
}
.cohort-engine__example .label {
  font-size:11px; font-weight:700; color:var(--lane-gap-ink); opacity:0.7;
  letter-spacing:0.4px; text-transform:uppercase; margin-bottom:4px; display:block;
}
.cohort-engine__quote {
  font-style:italic; font-size:15px; color:var(--color-ink); padding:14px 18px;
  border-left:4px solid var(--lane-gap); margin:14px 0; background:var(--color-surface);
  border-radius:6px;
}
.cohort-engine__compliance {
  display:flex; flex-direction:column; gap:6px;
  padding:14px; background:#FAFBFD; border:1px dashed var(--color-border);
  border-radius:10px; margin-top:14px;
  font-size:12px; color:var(--color-ink-soft);
}
.cohort-engine__compliance strong { color:var(--color-ink); }

.cohort-engine__framing-note {
  font-size:12px; color:var(--color-ink-mute);
  padding:10px 16px; background:#FFFAEB;
  border-top:1px solid #F2DDA0;
  border-radius:0;
  text-align:center;
}

/* ===================================================================
   Triple Episode mission card (member view)
   =================================================================== */
.episode-card {
  border:1px solid var(--lane-gap); border-radius:14px;
  background: linear-gradient(135deg, var(--lane-gap-soft) 0%, #fff 60%);
  padding:18px; margin-top:16px;
}
.episode-card__head { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; margin-bottom:12px; }
.episode-card__title { font-size:18px; font-weight:700; color:var(--lane-gap-ink); margin:6px 0 4px; }
.episode-card__sub { font-size:13px; color:var(--color-ink-soft); }
.episode-card__pts {
  text-align:right; flex-shrink:0;
}
.episode-card__pts-value { font-family:var(--font-display); font-weight:800; font-size:26px; color:var(--lane-gap); }
.episode-card__pts-meta { font-size:11px; color:var(--color-ink-soft); }
.episode-steps { display:flex; flex-direction:column; gap:8px; }
.episode-step {
  display:flex; gap:12px; padding:12px;
  background:var(--color-bg); border:1px solid var(--color-border);
  border-radius:10px;
}
.episode-step__num {
  width:28px; height:28px; border-radius:50%;
  background:var(--lane-gap); color:#fff;
  display:grid; place-items:center;
  font-weight:700; font-size:13px; flex-shrink:0;
}
.episode-step__title { font-weight:600; font-size:14px; color:var(--color-ink); }
.episode-step__what { font-size:13px; color:var(--color-ink-soft); margin-top:4px; }
.episode-step__actions { display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
.episode-step__action-chip {
  padding:4px 10px; background:var(--color-primary-soft); color:var(--color-primary);
  border-radius:6px; font-size:12px; font-weight:600;
}

.episode-card__compliance {
  margin-top:14px; padding:12px;
  background:#FAFBFD; border:1px dashed var(--color-border); border-radius:8px;
  font-size:12px; color:var(--color-ink-soft); line-height:1.5;
}

/* ===================================================================
   3-lane mission board (member dashboard)
   =================================================================== */
.lane-board { display:grid; gap:18px; margin-top:20px; }
.lane-section {
  border:1px solid var(--color-border); border-radius:14px;
  padding:18px; background:var(--color-bg);
}
.lane-section--gap    { border-top:4px solid var(--lane-gap); }
.lane-section--engage { border-top:4px solid var(--lane-engage); }
.lane-section--enable { border-top:4px solid var(--lane-enable); }
.lane-section__head {
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:12px; margin-bottom:12px;
}
.lane-section__head h2 { font-size:18px; margin:6px 0 4px; }
.lane-section__sub { font-size:13px; color:var(--color-ink-soft); }
.lane-section__items { display:flex; flex-direction:column; gap:10px; }

.support-card {
  display:flex; gap:12px; padding:14px;
  background:var(--lane-enable-soft);
  border:1px solid var(--lane-enable-border);
  border-radius:10px;
}
.support-card__glyph {
  width:38px; height:38px; border-radius:50%;
  background:var(--lane-enable); color:#fff;
  display:grid; place-items:center;
  font-size:18px; flex-shrink:0;
}
.support-card__title { font-weight:600; font-size:14px; color:var(--lane-enable-strong); }
.support-card__sub { font-size:13px; color:var(--lane-enable-strong); opacity:0.85; }
.support-card__label {
  font-size:11px; font-weight:700; letter-spacing:0.4px; text-transform:uppercase;
  color:var(--lane-enable-strong); opacity:0.7; margin-top:4px;
}

/* ===================================================================
   Send-Nudge button states
   =================================================================== */
.btn.is-loading { opacity:0.85; cursor:wait; }
.btn.is-success { background:var(--color-success) !important; border-color:var(--color-success) !important; }

/* ===================================================================
   Sr-only utility
   =================================================================== */
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.sr-only:focus {
  position:static; width:auto; height:auto; padding:8px; margin:0;
  clip:auto; white-space:normal; background:var(--color-primary); color:#fff;
}