/* ──────────────────────────────────────────────────────────────────────────
   SHARED STYLES FOR INFOGRAPHICS DIAGRAMS
   Styles applied only to the embedded infographics diagrams pages.
   Consolidates selectors targeting ig-reg-, ig-enf-, ig-impl- prefixes
   ────────────────────────────────────────────────────────────────────────── */

body.infographic * { box-sizing: border-box; margin: 0; padding: 0; }

body.infographic {
    font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
    background: #ffffff;
    padding: 32px;
}

#ig-enf, #ig-reg, #ig-impl {
  font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  background: var(--gray-200);
  padding: 0;
}

/* ── PAGE WRAPPERS (Consolidated across all infographics) ──────────────– */
.ig-reg-page, .ig-enf-page, .ig-impl-page {
  max-width: 1000px;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  background: var(--gray-200);
}

/* ── HEADERS (Consolidated across all infographics) ────────────────────── */
.ig-reg-header, .ig-enf-header, .ig-impl-header {
  background: linear-gradient(135deg, #108993 0%, #204093 100%);
  color: white;
  padding: 26px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ig-reg-header h1, .ig-enf-header h1, .ig-impl-header h1 {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.3px;
}

.ig-reg-header p, .ig-enf-header p, .ig-impl-header p {
  font-size: 12.5px;
  opacity: 0.85;
  margin-top: 4px;
  font-weight: 400;
}

/* ── LOGO TEXT (Consolidated across all infographics) ───────────────────– */
.ig-reg-logo-text, .ig-enf-logo-text, .ig-impl-logo-text {
  text-align: right;
  font-size: 18px;
  opacity: 0.75;
  line-height: 1.5;
}

/* ── START REGISTRATION FLOW STYLES ───────────────────────────── */

/* ── PAGE-SPECIFIC LANE COLORS ────────────────────── */
.ig-reg-lane-label.ig-reg-parker { background: #204093; }
.ig-reg-lane-label.ig-reg-system { background: #108993; }
.ig-reg-lane.ig-reg-parker-lane { background: white; border-right: 3px solid #204093; }
.ig-reg-lane.ig-reg-system-lane { background: white; }

/* ── PAGE-SPECIFIC STEP COLORS ────────────────────── */
.ig-reg-step.ig-reg-parker-step { border-left: 4px solid #204093; }
.ig-reg-step.ig-reg-system-step { border-left: 4px solid #108993; }
.ig-reg-parker-num { background: #204093; }
.ig-reg-system-num { background: #108993; }
.ig-reg-enforce-num { background: #C6B49E; color: #204093; }  
.ig-reg-step-body h4 { color: #204093; }
.ig-reg-step-body p { color: #666; }

/* ── CENTER BANNER ──────────────────────────────── */
.ig-reg-center-banner {
  background: linear-gradient(90deg, #108993, #204093);
  color: #204093;
  text-align: center;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.3px;
}
.ig-reg-center-banner span {
  background: white;
  border: 1.5px solid #204093;
  border-radius: 6px;
  padding: 4px 14px;
  display: inline-block;
}

/* ── FORK ───────────────────────────────────────── */
.ig-reg-fork-row {
  display: flex;
  gap: 10px;
  padding: 0 14px 20px;
  background: #f0f3fa;
}
.ig-reg-fork-card {
  flex: 1;
  border-radius: 9px;
  padding: 14px 16px;
  border: 3px solid;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.ig-reg-fork-card.ig-reg-pass { border-color: #108993; background: white; }
.ig-reg-fork-card.ig-reg-fail { border-color: #c0392b; background: white; }
.ig-reg-fork-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: white; flex-shrink: 0;
}
.ig-reg-fork-icon.ig-reg-teal { background: #108993; }
.ig-reg-fork-icon.ig-reg-red { background: #c0392b; }
.ig-reg-fork-card h4 { font-size: 12.5px; font-weight: 700; margin-bottom: 3px; }
.ig-reg-fork-card.ig-reg-pass h4 { color: #108993; }
.ig-reg-fork-card.ig-reg-fail h4 { color: #c0392b; }
.ig-reg-fork-card p { font-size: 11px; color: #555; line-height: 1.4; }

/* ── FOOTER BAR ──────────────────────────────────── */
.ig-reg-footer-bar {
  background: #204093;
  display: flex;
  padding: 14px 36px;
}
.ig-reg-footer-item {
  flex: 1;
  text-align: center;
  color: white;
  border-right: 1px solid rgba(255,255,255,0.2);
  padding: 0 8px;
}
.ig-reg-footer-item:last-child { border-right: none; }
.ig-reg-footer-item .ig-reg-n { font-size: 20px; font-weight: 800; }
.ig-reg-footer-item p { font-size: 10.5px; opacity: 0.82; margin-top: 2px; }

/* ── LANE LABELS (Registration only - kept specific) ────────────────────– */
.ig-reg-lane-labels {
  display: flex;
  padding: 0;
}

.ig-reg-lane-label {
  flex: 1;
  padding: 10px 18px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: white;
}

/* ── LANES/SWIMLANES (Registration only) ────────────────────────────────– */
.ig-reg-lanes {
  display: flex;
  min-height: 240px;
}

.ig-reg-lane {
  flex: 1;
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}

/* ── STEP CARDS (Registration only) ─────────────────────────────────────– */
.ig-reg-step {
  background: white;
  border-radius: 9px;
  padding: 11px 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1.5px solid #e0e6f0;
  position: relative;
}

.ig-reg-step-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: white;
  flex-shrink: 0;
}

.ig-reg-step-body h4 {
  font-size: 12.5px;
  font-weight: 700;
  margin-bottom: 2px;
}

.ig-reg-step-body p {
  font-size: 11px;
  color: #666;
  line-height: 1.4;
}
/* ── END REGISTRATION FLOW STYLES ───────────────────────────── */


/* ── START ENFORCEMENT WORKFLOW STYLES ───────────────────────────── */



/* ── BADGE COLOR VARIANTS ─────────────────────────── */
.ig-enf-badge-blue { background: #dbeafe; color: #204093; }
.ig-enf-badge-teal { background: #d4f5f2; color: #108993; }
.ig-enf-badge-green { background: #d4f5e3; color: #1e7e44; }
.ig-enf-badge-red { background: #ffe0de; color: #c0392b; }

/* ── FORK ──────────────────────────────────────── */
.ig-enf-fork-section {
  padding: 0 16px;
padding-bottom: 16px;
background: white;
}
.ig-enf-fork-label {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #999;
  margin-bottom: 12px;
}
.ig-enf-fork-label .ig-enf-fl { flex: 1; text-align: right; }
.ig-enf-fork-label .ig-enf-fr { flex: 1; text-align: left; }
.ig-enf-fork-row {
  display: flex;
  gap: 16px;
}
.ig-enf-fork-card {
  flex: 1;
  border-radius: 10px;
  padding: 18px 20px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  border: 2px solid;
}
.ig-enf-fork-card.ig-enf-pass {
  border-color: #108993;
  background: white;
}
.ig-enf-fork-card.ig-enf-fail {
  border-color: #c0392b;
  background: white;
}
.ig-enf-fork-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  color: white;
}
.ig-enf-fork-icon.ig-enf-green { background: #108993; }
.ig-enf-fork-icon.ig-enf-red { background: #c0392b; }
.ig-enf-fork-text h3 { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.ig-enf-fork-card.ig-enf-pass .ig-enf-fork-text h3 { color: #108993; }
.ig-enf-fork-card.ig-enf-fail .ig-enf-fork-text h3 { color: #c0392b; }
.ig-enf-fork-text p { font-size: 12px; color: #555; line-height: 1.5; }

/* ── FOOTER BAR ──────────────────────────────────── */
.ig-enf-footer-bar {
  background: #204093;
  display: flex;
  padding: 14px 36px;
}
.ig-enf-footer-item {
  flex: 1;
  text-align: center;
  color: white;
  border-right: 1px solid rgba(255,255,255,0.2);
  padding: 0 20px;
}
.ig-enf-footer-item:last-child { border-right: none; }
.ig-enf-footer-item .ig-enf-n { font-size: 20px; font-weight: 800; }
.ig-enf-footer-item p { font-size: 10.5px; opacity: 0.82; margin-top: 2px; }

/* ── WORKFLOW SECTION (Enforcement - shared for future reuse) ──────────── */
.ig-enf-workflow {
  padding: 36px 36px 12px;
  background: white;
}

.ig-enf-step-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-bottom: 12px;
}

.ig-enf-connector-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 40px;
  flex-shrink: 0;
  position: relative;
}

.ig-enf-connector-col::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: -16px;
  width: 3px;
  background: #dde6f2;
  z-index: 0;
}

.ig-enf-step-row:first-child .ig-enf-connector-col::before {
  top: 50%;
  bottom: -16px;
}

.ig-enf-step-row:last-child .ig-enf-connector-col::before {
  top: 0;
  bottom: 50%;
}

.ig-enf-step-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 15px;
  color: white;
  flex-shrink: 0;
  z-index: 1;
  position: relative;
}

.ig-enf-line { 
  display: none; 
}

.ig-enf-step-card {
  flex: 1;
  background: #f8fafd;
  border: 1.5px solid #dde6f2;
  border-radius: 10px;
  margin-left: 14px;
  margin-bottom: 0;
  padding: 16px 20px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.ig-enf-step-card.ig-enf-active {
  border-color: #4690CD;
  background: #eef1f9;
}

.ig-enf-step-card .ig-enf-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.ig-enf-step-card .ig-enf-card-text h3 {
  font-size: 14.5px;
  font-weight: 700;
  color: #204093;
  margin-bottom: 4px;
}

.ig-enf-step-card .ig-enf-card-text p {
  font-size: 12.5px;
  color: #555;
  line-height: 1.5;
}

.ig-enf-step-card .ig-enf-badge {
  margin-left: auto;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 700;
  border-radius: 6px;
  padding: 3px 9px;
  align-self: flex-start;
}

/* ── STEP COLOR VARIANTS (Enforcement - all steps use primary navy theme) ── */
.ig-enf-step-num--primary { background: #204093; }
.ig-enf-step-card--primary { border-color: #204093; background: #eef1f9; }
.ig-enf-icon-wrap--blue { background: #dbeafe; }

/* ── FORK CARD INNER LAYOUT ──────────────────────────────────────────────── */
.ig-enf-fork-summary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  flex-shrink: 0;
}
.ig-enf-fork-header-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ig-enf-fork-icon--sm {
  width: 26px;
  height: 26px;
  font-size: 11px;
  flex-shrink: 0;
}
.ig-enf-fork-verdict {
  font-size: 20px;
  font-weight: 800;
}
.ig-enf-fork-verdict--pass { color: #108993; }
.ig-enf-fork-verdict--fail { color: #c0392b; }
.ig-enf-fork-divider {
  width: 100%;
  border-top: 2px solid;
  margin: 2px 0;
}
.ig-enf-fork-divider--pass { border-top-color: #108993; }
.ig-enf-fork-divider--fail { border-top-color: #c0392b; }
.ig-enf-fork-action {
  font-size: 16px;
  font-weight: 800;
  padding-left: 4px;
}
.ig-enf-fork-action--pass { color: #108993; }
.ig-enf-fork-action--fail { color: #c0392b; }
.ig-enf-fork-body { flex: 1; }
.ig-enf-fork-detail { font-size: 10.5px; line-height: 1.45; }
/* ── END ENFORCEMENT WORKFLOW STYLES ───────────────────────────── */


/* ── START IMPLEMENTATION TIMELINE STYLES ───────────────────────────── */

/* ── HEADER BADGES (Implementation timeline) ───────────────────────────── */
.ig-impl-header .ig-impl-badge {
  background: rgba(255, 255, 255, 0.18);
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  border-radius: 8px;
  padding: 8px 18px;
  text-align: center;
  font-size: 12px;
  white-space: nowrap;
}

.ig-impl-header .ig-impl-badge strong {
  display: block;
  font-size: 24px;
  font-weight: 800;
}

/* ── MILESTONE DOT BAR (Implementation timeline) ──────────────────────── */
.ig-impl-milestone-bar {
  display: flex;
  background: white;
  padding: 32px 28px 16px 28px;
  gap: 0;
  align-items: center;
  position: relative;
}

.ig-impl-m-title {
  position: absolute;
  top: 10px;
  left: 28px;
  font-size: 10px;
  font-weight: 700;
  opacity: 0.8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #444;
  z-index: 2;
}

.ig-impl-milestone-bar::before {
  content: '';
  position: absolute;
  top: 42px;
  left: 28px;
  right: 28px;
  height: 3px;
  background: #d5ddf0;
  z-index: 0;
}

.ig-impl-m-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  z-index: 1;
}

.ig-impl-m-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 3px solid white;
  box-shadow: 0 0 0 2px currentColor;
  flex-shrink: 0;
}

.ig-impl-m-label {
  font-size: 9.5px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: #444;
  white-space: nowrap;
}

/* ── PHASE GRID (Implementation timeline) ────────────────────────────── */
.ig-impl-phase-grid {
  display: flex;
  gap: 0;
}

.ig-impl-phase-col {
  flex: 1;
  border-right: 1px solid #e8ecf5;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.ig-impl-phase-col:last-child {
  border-right: none;
}

.ig-impl-phase-header {
  padding: 12px 14px 10px;
  color: white;
  text-align: center;
  min-height: 84px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ig-impl-phase-header .ig-impl-ph-num {
  font-size: 10px;
  font-weight: 700;
  opacity: 0.8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ig-impl-phase-header .ig-impl-ph-title {
  font-size: 13px;
  font-weight: 800;
  margin: 3px 0 2px;
  line-height: 1.2;
}

.ig-impl-phase-header .ig-impl-ph-weeks {
  font-size: 10.5px;
  opacity: 0.85;
  font-weight: 600;
}

.ig-impl-phase-body {
  padding: 12px 14px;
  background: #ffffff;
  flex: 1;
}

.ig-impl-phase-item {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-bottom: 8px;
  font-size: 11px;
  color: #444;
  line-height: 1.4;
}

.ig-impl-phase-item:last-child {
  margin-bottom: 0;
}

.ig-impl-bullet {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
}

/* ── WEEK BAR (Implementation timeline) ──────────────────────────────── */
.ig-impl-week-bar {
  display: flex;
  background: linear-gradient(90deg, #108993, #204093);
  padding: 0;
}

.ig-impl-week-item {
  flex: 1;
  text-align: center;
  color: white;
  padding: 9px 4px;
  font-size: 10.5px;
  font-weight: 700;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
}

.ig-impl-week-item:last-child {
  border-right: none;
}

/* ── NOTE BAR (Implementation timeline) ──────────────────────────────── */
.ig-impl-note-bar {
  background: #204093;
  padding: 12px 28px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  color: white;
}

.ig-impl-note-icon {
  width: 28px;
  height: 28px;
  background: #108993;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
  flex-shrink: 0;
}

/* ── MILESTONE DOT COLOR VARIANTS ───────────────────────────────────────── */
.ig-impl-m-dot--kickoff  { background: #C9CCCB; color: #C9CCCB; }
.ig-impl-m-dot--planning { background: #C6B49E; color: #C6B49E; }
.ig-impl-m-dot--config   { background: #108993; color: #108993; }
.ig-impl-m-dot--comms    { background: #0d7a82; color: #0d7a82; }
.ig-impl-m-dot--soft     { background: #2c5aad; color: #2c5aad; }
.ig-impl-m-dot--full     { background: #204093; color: #204093; }

/* ── MILESTONE LABEL HIGHLIGHT (Full Launch) ─────────────────────────────── */
.ig-impl-m-label--full { color: #204093; font-weight: 800; }

/* ── PHASE HEADER COLOR VARIANTS ────────────────────────────────────────── */
.ig-impl-phase-header--kickoff  { background: #C9CCCB; }
.ig-impl-phase-header--kickoff .ig-impl-ph-num,
.ig-impl-phase-header--kickoff .ig-impl-ph-title { color: #204093; }
.ig-impl-phase-header--planning { background: #C6B49E; }
.ig-impl-phase-header--planning .ig-impl-ph-num,
.ig-impl-phase-header--planning .ig-impl-ph-title { color: #204093; }
.ig-impl-phase-header--config   { background: #108993; }
.ig-impl-phase-header--comms    { background: #0d7a82; }
.ig-impl-phase-header--soft     { background: #2c5aad; }
.ig-impl-phase-header--full     { background: #204093; }

/* ── BULLET COLOR VARIANTS ───────────────────────────────────────────────── */
.ig-impl-bullet--kickoff  { background: #C9CCCB; }
.ig-impl-bullet--planning { background: #C6B49E; }
.ig-impl-bullet--config   { background: #108993; }
.ig-impl-bullet--comms    { background: #0d7a82; }
.ig-impl-bullet--soft     { background: #2c5aad; }
.ig-impl-bullet--full     { background: #204093; }
/* ── END IMPLEMENTATION TIMELINE STYLES ───────────────────────────── */