/* --- Main Wrapper & Headers --- */
.fims-onboarding-container { 
    max-width: 650px; 
    margin: 0 auto; 
    padding: 0 0; 
}
.fims-onboarding-header h2 { 
    margin-top: 1.5rem; 
}
.fims-onboarding-header h3 { 
    display: flex; 
    align-items: center; 
    gap: 0.5rem; 
    margin: 2.5rem 0 1.5rem 0; 
    color: var(--bs-primary); }
.fims-kb-header { 
    margin: 3rem 0 1.5rem 0; 
}

/* --- Pathway Pills --- */
.fims-pathway-pills { 
  display: flex; 
  gap: 0.75rem; 
  overflow-x: auto; 
  padding-bottom: 0.5rem; 
  -ms-overflow-style: none; 
  scrollbar-width: none; 
}
.fims-pathway-pills::-webkit-scrollbar { 
    display: none; 
}

.fims-pill { 
  flex-shrink: 0; 
  display: inline-flex; 
  align-items: center; 
  gap: 0.5rem; 
  padding: 0.5rem 1.25rem; 
  border-radius: 50rem; 
  font-size: 0.875rem; 
  font-weight: 600; 
  text-decoration: none; 
  transition: all 0.2s ease;
  background-color: var(--slate-90); 
  color: var(--slate-40); 
  border: 1px solid var(--slate-80); 
}
.fims-pill:hover { 
    background-color: var(--slate-80); 
    color: var(--slate-10); 
}
.fims-pill.is-active { 
    background-color: var(--slate-10); 
    color: var(--slate-90); 
    border-color: var(--slate-10); 
}

/* --- Timeline Logic (Extending .fims-step from community.css) --- */
/* --- Winding S-Curve Map Logic --- */
.fims-timeline { 
  display: flex; 
  flex-direction: column; 
  gap: 1.5rem; 
  position: relative; 
}

.fims-timeline-item { 
  position: relative; 
  cursor: pointer; 
  transition: all 0.3s ease; 
  /* Prevents shifted items from breaking the page width */
  max-width: calc(100% - 60px); 
}

/* 1. Weave back and forth: Shift every Even item 60px to the right */
.fims-timeline-item:nth-child(even) {
  transform: translateX(60px); 
}

/* --- Dynamic SVG S-Curves --- */

/* Path 1: Odd to Even (Curves Left to Right) */
.fims-timeline-item:nth-child(odd):not(.is-last)::after {
  content: '';
  position: absolute;
  top: 48px; /* Starts exactly at the bottom of your 48px step-number circle */
  left: 22px; /* Centered exactly under the icon */
  width: 60px; /* Bridges the exact 60px gap to the shifted item */
  height: calc(100% + 1.5rem - 48px); /* Dynamically stretches to the top of the next item */
  
  /* Draws the right-facing S-curve */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M 2,0 C 2,50 98,50 98,100' fill='none' stroke='%2399a6ac' stroke-width='4' stroke-dasharray='8,8'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  z-index: -1;
  opacity: 0.5;
}

/* Path 2: Even to Odd (Curves Right to Left) */
.fims-timeline-item:nth-child(even):not(.is-last)::after {
  content: '';
  position: absolute;
  top: 48px;
  left: -38px; /* Reaches exactly 60px backwards to the left-aligned item */
  width: 60px;
  height: calc(100% + 1.5rem - 48px);
  
  /* Draws the left-facing S-curve */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M 98,0 C 98,50 2,50 2,100' fill='none' stroke='%2399a6ac' stroke-width='4' stroke-dasharray='8,8'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  z-index: -1;
  opacity: 0.5;
}

/* Hide task button by default */
.fims-timeline-item .fims-task-btn { 
  display: none; 
  margin-top: 0.5rem; 
}

.fims-timeline-item.is-active .fims-step-number { 
  background-color: var(--bs-primary);
  color: white;
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 6px rgba(14, 104, 118, 0.15); 
}
.fims-timeline-item.is-active .fims-step-content { 
  background-color: rgba(14, 104, 118, 0.05); 
  padding: 1rem; 
  border-radius: 0.5rem; 
  border: 1px solid var(--bs-primary); 
}
.fims-timeline-item.is-active .fims-task-btn { 
  display: inline-flex; 
  align-items: center; 
  gap: 0.4rem; 
}

/* --- Horizontal Scroll (Extending .fims-card from community.css) --- */
.fims-horizontal-scroll { 
  display: flex; overflow-x: auto; gap: 1.5rem; padding-bottom: 1rem; 
  scroll-snap-type: x mandatory; cursor: grab; 
}
.fims-horizontal-scroll:active { cursor: grabbing; }

/* Lock the width of the cards from community.css so they scroll horizontally instead of stacking */
.fims-horizontal-scroll .fims-card { flex: 0 0 260px; scroll-snap-align: start; margin-bottom: 0; }

/* Custom Scrollbar */
.fims-horizontal-scroll::-webkit-scrollbar { height: 6px; }
.fims-horizontal-scroll::-webkit-scrollbar-track { background: transparent; }
.fims-horizontal-scroll::-webkit-scrollbar-thumb { background: var(--slate-60); border-radius: 10px; }