.editor-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.editor-nav-group__header {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0 var(--space-sm);
  margin-bottom: var(--space-xs);
}

.editor-nav-group__icon {
  color: var(--primary-color);
  font-size: var(--font-size-lg, 1rem);
}

.editor-nav-group__label {
  flex: 1 1 auto;
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: var(--font-weight-bold, 700);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-light);
}

.editor-nav-group__status {
  font-size: var(--font-size-lg, 1rem);
}

.editor-nav-group__status--complete {
  color: var(--success-color);
}

.editor-nav-group__status--in-progress {
  color: var(--warning-color);
}

.editor-nav-group__status--not-started {
  color: var(--text-light);
}

.editor-nav-group__status--unknown {
  color: var(--text-light);
  opacity: 0.6;
}

.editor-nav-group__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.editor-nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 38px;
  border-radius: var(--radius-sm);
  border: none;
  background: none;
  color: var(--text-primary);
  padding: 0 var(--space-sm);
  font-weight: var(--font-weight-medium, 500);
  font-size: var(--font-size-lg, 1rem);
  cursor: pointer;
  text-decoration: none;

  &:hover {
    background: color-mix(in srgb, var(--primary-color) 8%, transparent);
    color: var(--primary-color);
  }

  &:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
  }

  &.active {
    background: color-mix(in srgb, var(--primary-color) 8%, transparent);
    color: var(--primary-color);
    font-weight: var(--font-weight-semibold, 600);
  }
}

.editor-nav-link__status {
  font-size: var(--font-size-lg, 1rem);
  flex-shrink: 0;
}

.editor-nav-link__status--complete {
  color: var(--success-color);
}

.editor-nav-link__status--in-progress {
  color: var(--warning-color);
}

.editor-nav-link__status--not-started {
  color: var(--text-light);
}

.editor-nav-link__status--unknown {
  color: var(--text-light);
  opacity: 0.5;
}

.editor-nav-link__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor-nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-lg);
  background: var(--error-color);
  color: #fff;
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: var(--font-weight-bold, 700);
  line-height: 1;
  flex-shrink: 0;
}

.editor-nav-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-lg);
  background: var(--warning-color);
  flex-shrink: 0;
}
