/* ── Adjutant Showcase ── */
:root {
  --adj-bg:   #F7F3ED;
  --adj-acc:  #C8102E;
  --adj-txt:  #161820;
  --adj-mut:  #888888;
  --adj-brd:  rgba(22,24,32,.10);
  --adj-tr:   #9E7B3A;
  --adj-grn:  #1A8A4F;
}

/* ── OVERLAY ── */
.adj-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10,8,6,.72);
  z-index: 99999;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.adj-overlay.open { display: flex; }

/* ── POPUP BOX ── */
.adj-popup {
  font-family: 'Jost', sans-serif;
  background: var(--adj-bg);
  border-radius: 12px;
  width: 100%;
  max-width: 1100px;
  height: 90vh;
  max-height: 720px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 32px 96px rgba(0,0,0,.35);
}

/* ── TOP BAR ── */
.adj-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--adj-brd);
  flex-shrink: 0;
}
.adj-topbar-scen {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .28em;
  color: var(--adj-mut);
  text-transform: uppercase;
}
.adj-topbar-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--adj-txt);
  flex: 1;
}
.adj-topbar-ctrls { display: flex; gap: 6px; align-items: center; }

/* ── BUTTONS ── */
.adj-popup button,
.adj-popup button:hover,
.adj-popup button:focus,
.adj-popup button:active { all: unset; box-sizing: border-box; }

.adj-btn {
  font-family: 'Jost', sans-serif !important;
  font-size: 9px !important;
  font-weight: 400 !important;
  letter-spacing: .04em !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(22,24,32,.25) !important;
  color: rgba(22,24,32,.6) !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  transition: border-color .15s, color .15s !important;
  white-space: nowrap !important;
  line-height: 1.4 !important;
}
.adj-btn:hover {
  border-color: var(--adj-acc) !important;
  color: var(--adj-acc) !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
.adj-btn.arr  { padding: 4px 9px !important; font-size: 14px !important; letter-spacing: 0 !important; }
.adj-btn.lbl  { min-width: 62px !important; text-align: center !important; }
.adj-btn.off  { opacity: .22 !important; pointer-events: none !important; }

.adj-close-btn {
  font-size: 14px !important;
  width: 26px !important;
  height: 26px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  border: 1px solid rgba(22,24,32,.2) !important;
  color: rgba(22,24,32,.45) !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  transition: border-color .15s, color .15s !important;
}
.adj-close-btn:hover {
  border-color: var(--adj-acc) !important;
  color: var(--adj-acc) !important;
  background: transparent !important;
}

/* ── PROGRESS BAR ── */
.adj-progress { height: 2px; background: var(--adj-brd); flex-shrink: 0; }
.adj-progress-fill { height: 100%; background: rgba(22,24,32,.2); width: 0%; transition: width linear; }

/* ── STEP COUNTER ── */
.adj-cnt { font-size: 9px; letter-spacing: .18em; color: var(--adj-mut); text-transform: uppercase; margin-left: 2px; }

/* ── BODY ── */
.adj-body {
  flex: 1;
  display: grid;
  grid-template-columns: 42% 58%;
  min-height: 0;
  transition: background .45s;
}
.adj-body.ph-red   { background: linear-gradient(135deg, rgba(200,16,46,.04)  0%, transparent 55%); }
.adj-body.ph-trans { background: linear-gradient(135deg, rgba(158,123,58,.04) 0%, transparent 55%); }
.adj-body.ph-gold  { background: linear-gradient(135deg, rgba(200,16,46,.025) 0%, transparent 55%); }
.adj-body.ph-green { background: linear-gradient(135deg, rgba(26,138,79,.03)  0%, transparent 55%); }

/* ── LEFT PANEL ── */
.adj-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 36px 36px 28px 32px;
  border-right: 1px solid var(--adj-brd);
  overflow-y: auto;
}

/* phase pill */
.adj-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 18px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .3s, transform .3s;
}
.adj-pill.show { opacity: 1; transform: none; }
.adj-pill-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.adj-pill.ph-red   { color: var(--adj-acc); } .adj-pill.ph-red   .adj-pill-dot { background: var(--adj-acc); }
.adj-pill.ph-trans { color: var(--adj-tr);  } .adj-pill.ph-trans .adj-pill-dot { background: var(--adj-tr);  }
.adj-pill.ph-gold  { color: var(--adj-acc); } .adj-pill.ph-gold  .adj-pill-dot { background: var(--adj-acc); }
.adj-pill.ph-green { color: var(--adj-grn); } .adj-pill.ph-green .adj-pill-dot { background: var(--adj-grn); }

/* headline */
.adj-hl {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(20px, 2.6vw, 36px);
  font-weight: 600;
  line-height: 1.12;
  margin: 0 0 13px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .4s ease .04s, transform .4s ease .04s;
}
.adj-hl.show { opacity: 1; transform: none; }
.adj-hl em { font-style: italic; color: var(--adj-acc); }

/* sub text */
.adj-sub {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(14px, 1.7vw, 18px);
  font-style: italic;
  color: var(--adj-mut);
  line-height: 1.6;
  margin: 0 0 26px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .38s ease .1s, transform .38s ease .1s;
}
.adj-sub.show { opacity: 1; transform: none; }

/* step dots */
.adj-dots {
  display: flex;
  gap: 5px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  opacity: 0;
  transition: opacity .3s ease .16s;
}
.adj-dots.show { opacity: 1; }
.adj-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  border: none; padding: 0;
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.adj-dot.chat  { background: rgba(22,24,32,.15); }
.adj-dot.trans { background: rgba(158,123,58,.4); }
.adj-dot.adj   { background: rgba(22,24,32,.3); }
.adj-dot.cur   { background: var(--adj-txt); transform: scale(1.5); }

/* controls row */
.adj-ctrls { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }

/* ── RIGHT PANEL ── */
.adj-right { position: relative; overflow: hidden; }
.adj-frame {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: none;
  opacity: 0;
  transition: opacity .5s;
  pointer-events: none;
}
.adj-frame.on { opacity: 1; pointer-events: auto; }

/* ── MOBILE ── */
@media (max-width: 700px) {
  .adj-body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .adj-right { min-height: 260px; order: -1; }
  .adj-left  { border-right: none; border-bottom: 1px solid var(--adj-brd); padding: 20px; }
}