/* 1. Reset the LI to ensure no Bootstrap frames/padding interfere */
li.tw-list-none {
  border: none !important;
  background: transparent !important;
  padding-left: 0 !important; /* Forces alignment control to the Button */
  margin-left: 1.5rem !important; /* This is the 'tw-ml-6' equivalent */
}

/* 2. The Precision Dot */
.timeline-button {
  position: absolute;

  /* MATH: The li has ml-6 (1.5rem). 
     To center a 0.75rem dot on the line at the edge of that margin:
     We move it left by (1.5rem + half the dot width). */
  left: -1.9rem !important;
  top: 0.25rem;

  width: 0.75rem;
  height: 0.75rem;
  border-radius: 9999px;
  background: #d1d5db;

  display: flex;
  align-items: center;
  justify-content: center;

  /* This creates the 'gap' around the dot so it looks clean */
  border: 2px solid white !important;
  z-index: 10;
  transition: all 0.2s ease;
  cursor: pointer;
}

/* 3. Force the Line to be visible and solid */
ol.tw-border-l-2 {
  border-left: 2px solid #d1d5db !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: none !important;
}

/* Ensure the dot stays put when screen shrinks */
.tw-relative {
  position: relative !important;
}
/* hover only when expanded */
.timeline-button:hover:not(.collapsed) {
  background: #6b7280;
}

/* collapsed state */
.timeline-button.collapsed {
  background: transparent !important;
  color: #6b7280;
}
/* 1. Main Text Size - Matching standard blog paragraphs */
#Tailscaleipdoesntwork p,
.tw-text-base {
  font-size: 1.5rem !important; /* ~18px */
  line-height: 1.7 !important;
  color: #333 !important;
  margin-top: 8px !important;
}

/* 2. Heading Size */
#Tailscaleipdoesntwork h3,
.tw-text-lg {
  font-size: 1.5rem !important; /* ~24px */
  font-weight: 700 !important;
  margin-bottom: 4px !important;
}

/* 3. Date Size */
time,
.tw-text-sm {
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  color: #6b7280 !important;
}

/* 4. The Alignment "Math" */
/* If <li> has tw-ml-6 (1.5rem), the dot needs to move left exactly that much */
.timeline-button {
  width: 12px !important;
  height: 12px !important;
  position: absolute;
  left: -1.92rem !important; /* Adjust this slightly if the dot isn't centered on the line */
  top: 0.5rem;
  background: #cbd5e1;
  border: 3px solid white !important;
  border-radius: 50%;
  z-index: 10;
}

/* 5. The Vertical Line */
ol.tw-border-l-2 {
  border-left: 2px solid #e2e8f0 !important;
}