/* =========================================================
   RespondOT – Checklists & Playbooks Tool
   FINAL CSS – Dark Inject Modal + White Text Everywhere
   ========================================================= */


/* ===============================
   TOOL BAR
   =============================== */

.tool-bar{
  margin-top:14px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
}

.tool-bar__left,
.tool-bar__right{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:flex-end;
}

.tool-label{
  display:block;
  font-size:12px;
  letter-spacing:.2px;
  opacity:.85;
  margin:0 0 6px 2px;
}

.tool-select{
  min-width:240px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(19,52,95,.55);
  background:rgba(255,255,255,.03);
  color:inherit;
  outline:none;
}


/* ===============================
   PROGRESS
   =============================== */

.progress-wrap{
  min-width:260px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(19,52,95,.55);
  background:rgba(255,255,255,.02);
}

.progress-meta{
  display:flex;
  justify-content:space-between;
  font-size:12px;
  margin-bottom:8px;
}

.progress{
  height:10px;
  border-radius:999px;
  border:1px solid rgba(19,52,95,.55);
  background:rgba(255,255,255,.02);
  overflow:hidden;
}

.progress__bar{
  height:100%;
  width:0%;
  border-radius:999px;
  background:linear-gradient(90deg,#72f5a0,#6aa8ff);
  transition:width .35s ease;
}


/* ===============================
   SCENARIO PANEL
   =============================== */

.scenario-panel{
  margin-top:14px;
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(19,52,95,.55);
  background:rgba(255,255,255,.02);
  animation:fadeUp .35s ease both;
}

.scenario-title{
  font-size:13px;
  letter-spacing:.2px;
  text-transform:uppercase;
  opacity:.85;
  margin-bottom:6px;
}

.scenario-body{
  line-height:1.65;
}


/* ===============================
   TAGS
   =============================== */

.scenario-tags{
  margin-top:10px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.tag-pill{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(19,52,95,.55);
  background:rgba(255,255,255,.02);
}


/* ===============================
   PHASE CARDS
   =============================== */

.phase-card{
  opacity:0;
  transform:translateY(6px);
  animation:fadeUp .35s ease forwards;
}

.phase-card.active{
  outline:2px solid rgba(106,168,255,.65);
  outline-offset:2px;
}

.phase-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  cursor:pointer;
}

.phase-meta{
  font-size:12px;
  opacity:.85;
}

.phase-toggle{
  border-radius:12px;
  padding:8px 10px;
  border:1px solid rgba(19,52,95,.55);
  background:rgba(255,255,255,.02);
  cursor:pointer;
}

.phase-body{
  max-height:0;
  overflow:hidden;
  transition:max-height .35s ease;
}

.phase-card.active .phase-body{
  max-height:1600px;
}


/* ===============================
   CHECKLIST
   =============================== */

.checklist{
  list-style:none;
  padding:0;
  margin-top:14px;
  display:grid;
  gap:10px;
}

.checklist label{
  display:flex;
  gap:10px;
  line-height:1.5;
}

.checklist input[type="checkbox"]{
  margin-top:3px;
  transform:scale(1.05);
}

.muted-note{
  margin-top:12px;
  font-size:13px;
  opacity:.85;
}


/* =========================================================
   INJECT MODAL — DARK + WHITE (FORCED, HIGH SPECIFICITY)
   ========================================================= */

.inject-modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(6,10,16,.65);
  z-index:9999;
}

.inject-modal.open{
  display:flex;
}

/* ---------- CARD ---------- */
.inject-modal__card{
  width:min(820px,100%);
  border-radius:18px;
  border:1px solid rgba(106,168,255,.45);
  background:rgba(12,18,32,.96);
  box-shadow:0 18px 50px rgba(0,0,0,.55);
  overflow:hidden;
}

/* ---------- FORCE WHITE TEXT EVERYWHERE INSIDE MODAL ---------- */
.inject-modal__card,
.inject-modal__card h1,
.inject-modal__card h2,
.inject-modal__card h3,
.inject-modal__card h4,
.inject-modal__card h5,
.inject-modal__card h6,
.inject-modal__card p,
.inject-modal__card span,
.inject-modal__card small,
.inject-modal__card li,
.inject-modal__card ul,
.inject-modal__card ol,
.inject-modal__card strong,
.inject-modal__card em,
.inject-modal__card label{
  color:#e8eeff !important;
}

/* ---------- HEADER ---------- */
.inject-modal__head{
  padding:14px 16px;
  border-bottom:1px solid rgba(106,168,255,.35);
}

.inject-modal__kicker{
  font-size:12px;
  opacity:.85;
  text-transform:uppercase;
}

.inject-modal__title{
  margin-top:4px;
  font-size:18px;
  font-weight:700;
}

/* ---------- CLOSE ---------- */
.inject-x{
  cursor:pointer;
  padding:6px 10px;
  border-radius:10px;
  border:1px solid rgba(106,168,255,.45);
  background:rgba(255,255,255,.05);
  color:#e8eeff !important;
}

/* ---------- BODY ---------- */
.inject-modal__body{
  padding:16px;
}

.inject-meta{
  font-size:12px;
  opacity:.85;
  margin-bottom:10px;
}

.inject-box{
  border-radius:14px;
  padding:12px;
  border:1px solid rgba(106,168,255,.35);
  background:rgba(255,255,255,.04);
  line-height:1.65;
}

/* ---------- REFLECTIVE QUESTIONS (EXPLICIT FIX) ---------- */
.inject-qs{
  margin-top:14px;
  padding-top:14px;
  border-top:1px dashed rgba(106,168,255,.35);
}

.inject-qs__title{
  font-size:13px;
  font-weight:700;
  margin-bottom:8px;
  color:#e8eeff !important;
}

.inject-qs ul,
.inject-qs ol{
  margin:8px 0 0 18px;
  padding:0;
}

.inject-qs li{
  margin:6px 0;
  line-height:1.65;
  color:#e8eeff !important;
}

.inject-qs p{
  margin:8px 0 0;
  line-height:1.65;
  color:#e8eeff !important;
}

/* ---------- FOOTER ---------- */
.inject-modal__foot{
  padding:14px 16px;
  border-top:1px solid rgba(106,168,255,.35);
  display:flex;
  justify-content:flex-end;
  gap:10px;
}


/* ===============================
   ANIMATION
   =============================== */

@keyframes fadeUp{
  from{opacity:0; transform:translateY(8px);}
  to{opacity:1; transform:translateY(0);}
}