/* ============================================
   Side Nav — fixed left indicator strip
   Only visible on wide-enough viewports (≥ 1200 px)
   ============================================ */

.side-nav {
  display: none;            /* hidden until media-query kicks in */
  position: fixed;
  left: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 300;
}

@media (min-width: 1200px) {
  .side-nav { display: block; }
}

/* Inner wrapper holds the line + dots in a column */
.side-nav-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── Connecting vertical line ── */
.side-nav-line {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 24px;          /* half of first dot */
  bottom: 24px;       /* half of last dot  */
  width: 2px;
  background: rgba(45, 55, 72, 0.1);
  border-radius: 2px;
  overflow: hidden;
  pointer-events: none;
}

/* Animated fill — grows as you move down the page */
.side-nav-progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0%;
  background: linear-gradient(to bottom, #3182CE 0%, #7C5CFF 100%);
  border-radius: 2px;
  transition: height 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}

/* ── Each icon dot ── */
.side-nav-dot {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 7px 0;
  background: rgba(255, 255, 255, 0.82);
  border: 2px solid rgba(45, 55, 72, 0.12);
  color: var(--text-muted, #718096);
  text-decoration: none;
  font-size: 0.82rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 2px 10px rgba(45, 55, 72, 0.12),
    0 0 0 0 rgba(49, 130, 206, 0);
  z-index: 2;
  transition:
    transform       0.3s cubic-bezier(0.25, 1, 0.5, 1),
    box-shadow      0.3s ease,
    border-color    0.3s ease,
    color           0.3s ease,
    background      0.3s ease;
}

.side-nav-dot:hover {
  border-color: var(--accent-primary, #3182CE);
  color: var(--accent-primary, #3182CE);
  background: white;
  transform: scale(1.14);
  box-shadow:
    0 4px 18px rgba(49, 130, 206, 0.28),
    0 0 0 4px rgba(49, 130, 206, 0.08);
}

.side-nav-dot.active {
  background: linear-gradient(135deg, #3182CE 0%, #7C5CFF 100%);
  border-color: transparent;
  color: #fff;
  transform: scale(1.18);
  box-shadow:
    0 6px 22px rgba(49, 130, 206, 0.45),
    0 0 0 4px rgba(49, 130, 206, 0.15);
}

/* ── Tooltip (appears to the right on hover) ── */
.side-nav-label {
  position: absolute;
  left: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
  background: var(--text-primary, #2D3748);
  color: #fff;
  font-family: var(--font-family, 'Inter', sans-serif);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 5px 12px;
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition:
    opacity   0.2s ease,
    transform 0.2s ease;
}

/* Arrow pointing left toward the dot */
.side-nav-label::before {
  content: '';
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-right-color: var(--text-primary, #2D3748);
}

.side-nav-dot:hover .side-nav-label {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* ── Accessibility: keyboard focus ── */
.side-nav-dot:focus-visible {
  outline: 3px solid var(--accent-primary, #3182CE);
  outline-offset: 3px;
}