/* Dark mode: keep white line */
[data-theme="dark"] .timeline::before { background: #ffffff; }
/* Light mode: use black line */
[data-theme="light"] .timeline::before { background: #000000; }

/* Dark-theme dot colors (6 steps from #6F01A1 → #4CC9F0) */
[data-theme="dark"] .timeline .dot:nth-child(1) { background: #6F01A1; }
[data-theme="dark"] .timeline .dot:nth-child(2) { background: #6829B0; }
[data-theme="dark"] .timeline .dot:nth-child(3) { background: #6151C0; }
[data-theme="dark"] .timeline .dot:nth-child(4) { background: #5A79D0; }
[data-theme="dark"] .timeline .dot:nth-child(5) { background: #53A1E0; }
[data-theme="dark"] .timeline .dot:nth-child(6) { background: #4CC9F0; }

/* Light-theme dot colors (6 steps from #6F01A1 → #0835FF) */
[data-theme="light"] .timeline .dot:nth-child(1) { background: #6F01A1; }
[data-theme="light"] .timeline .dot:nth-child(2) { background: #5A0BB3; }
[data-theme="light"] .timeline .dot:nth-child(3) { background: #4515C6; }
[data-theme="light"] .timeline .dot:nth-child(4) { background: #3120D9; }
[data-theme="light"] .timeline .dot:nth-child(5) { background: #1C2AEC; }
[data-theme="light"] .timeline .dot:nth-child(6) { background: #0835FF; }

/* Timeline wrapper */
.timeline {
  position: relative;
  width: 100%;
  max-width: 800px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 2rem;
  margin-top: 2rem;
}

/* Horizontal line */
.timeline::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: var(--line-height);
  background: #ffffff; /* White timeline line */
  transform: translateY(-50%);
  z-index: 0;
}

/* Dot */
.dot {
  position: relative;
  width: 22px;
  height: 22px;
  background: var(--primary);
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.25s ease;
  z-index: 1; /* above the line */
}

.dot:hover { transform: scale(1.15); }

.dot.active { box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.4); }

/* Permanent label under each dot */
.dot::after {
  content: attr(data-label);
  position: absolute;
  top: calc(100% + 8px); /* place below the dot */
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.9rem;
  white-space: nowrap;
  color: inherit; /* same as body text */
  pointer-events: none; /* label shouldn't capture hover */
}

/* Label text below the timeline */
#info {
  margin: 0 auto;      /* center under the timeline */
  margin-top: 4rem;
  min-height: 3rem;
  font-size: 1.1rem;
  text-align: center;
  width: 100%;
  max-width: 800px;    /* same as .timeline’s max-width */
  box-sizing: border-box;
}

.timeline .dot::after {
  display: block;
}

@media (max-width: 1300px) {
  .timeline .dot::after { display: none; }
}

@media (max-width: 1100px) {
  .timeline .dot::after { display: block; }
}

@media (min-width: 666px) and (max-width: 1099px) {
  .timeline .dot::after { display: none; }
}

@media (max-width: 665px) {
  .timeline .dot::after { display: none; }
}

@media (max-width: 600px) {
  .timeline .dot {
    width: 16px;
    height: 16px;
  }
  
  .dot::after { font-size: 0.8rem; }
  
  #info {
    font-size: 1rem;
    padding: 0 1vw;
  }
}